/* Hi Lovely Human site CSS. Team review fixes, 2026-11-03.
   Palette is #1A1A1A, #F2EFE4 and #FF2E88 only. No alpha grays and no opacity. */
@font-face{font-family:"Hi Lovely Human Refined";src:url(fonts/HiLovelyHumanHumanLed-Refined.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--black:#1A1A1A;--off:#F2EFE4;--pink:#FF2E88;--col:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--off);font:400 18px/1.6 "IBM Plex Sans",sans-serif}
a{color:var(--off)}
.p{color:var(--pink)}
.display{font-family:"Hi Lovely Human Refined";font-weight:400;letter-spacing:0;font-kerning:normal;line-height:1.05;margin:0 0 .4em;font-size:clamp(40px,4.5vw,64px);text-transform:uppercase}
.nav{position:fixed;inset:0 0 auto 0;z-index:10;height:72px;display:flex;align-items:center;gap:32px;padding:0 max(4vw,calc((100vw - var(--col))/2));background:var(--black)}
.nav-mark img{display:block;height:56px;width:56px}
.nav nav{display:flex;gap:28px;margin-left:auto}
.nav nav a{text-decoration:none;font-size:16px}
.nav nav a.on{text-decoration:underline;text-underline-offset:6px}   /* was pink: pink is reserved */
.nav-buy{font-size:16px;font-weight:500;font-display:swap}
.progress{display:none}                                               /* pink progress bar removed */
section{padding:96px 4vw;max-width:var(--col);margin:0 auto}          /* no 80vh min-height */
.hero{min-height:100vh;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center;padding-top:120px}
.hero-art img{display:block;width:min(100%,480px);height:auto;margin-bottom:24px}
.sub{font-size:22px;margin:0 0 32px}
.price{font-size:28px;font-weight:500;margin:0 0 8px}
.terms{font-size:16px;margin:0 0 28px}
.chapter p{max-width:34em}
.chapter + .chapter, .buy, .signup, .faq{border-top:1px solid var(--off)}
.photo{display:block;width:100%;height:auto;object-fit:cover}
.hero .photo{aspect-ratio:4/5;height:auto}
.details{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-top:40px}
.details .photo{aspect-ratio:4/5;height:100%}
.story-photo{margin-top:48px}
.btn{display:inline-block;background:var(--pink);color:var(--black);font:600 18px "IBM Plex Sans",sans-serif;text-decoration:none;padding:18px 40px;border:0;border-radius:0;cursor:pointer}
.btn:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--off);outline-offset:3px}
.buy{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.signup{text-align:center}
.signup .photo{max-width:720px;margin:0 auto 40px}
.signup form{display:flex;justify-content:center;max-width:520px;margin:32px auto 12px}
.signup input{flex:1;min-width:0;background:var(--black);color:var(--off);border:1px solid var(--off);border-radius:0;padding:16px;font:400 16px "IBM Plex Sans",sans-serif}
.signup input::placeholder{color:var(--off)}
.fine{font-size:14px}
.signup .fine.err{color:var(--off)}
.signup input[aria-invalid=true]{border-width:2px}
.slot-video[hidden],[hidden]{display:none!important}
.batch-note{font:500 16px "IBM Plex Sans",sans-serif;letter-spacing:.04em}
.signup-media{display:grid;grid-template-columns:2fr 1fr;gap:16px;max-width:900px;margin:0 auto 40px}
.signup .signup-media .photo{max-width:none;margin:0;aspect-ratio:auto;height:100%}
.teaser{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--black)}
.faq{max-width:820px}
.faq h2{margin-bottom:16px}
details{border-bottom:1px solid var(--off);padding:20px 0}
summary{cursor:pointer;font-weight:500;color:var(--off);list-style:none;display:flex;justify-content:space-between}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-weight:400;font-display:swap}details[open] summary::after{content:"\2013"}
footer{padding:56px 4vw;border-top:1px solid var(--off);text-align:center;font-size:16px}
footer .links a{margin:0 10px;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:760px){
 .nav{gap:14px;height:60px;padding:0 6vw}.nav-mark img{height:44px;width:44px}.nav nav{gap:16px}.nav nav a{font-size:14px}.nav nav{display:none}.nav-buy{margin-left:auto;white-space:nowrap;font-size:14px;padding:8px 12px;background:var(--pink);color:var(--black);text-decoration:none}.nav nav a[href='#faq']{display:none}
 .hero-art img{width:min(100%,300px)}
 .hero .photo{order:2}.hero-copy{order:1}
 .signup-media{grid-template-columns:1fr}.teaser{max-width:280px;margin:0 auto}
 .hero,.buy{grid-template-columns:1fr;gap:32px}
 .hero{min-height:auto;padding-top:84px}
 .hero .photo{aspect-ratio:4/5}
 .details{grid-template-columns:1fr}
 section{padding:64px 6vw}
 body{font-size:16px}
}
.nw{white-space:nowrap}

/* Waitlist usability and accessible media. */
section[id],details[id]{scroll-margin-top:96px}
.signup-media{margin-top:40px}
.signup .fine{max-width:520px;margin:12px auto}
.video-toggle{grid-column:1/-1;justify-self:center;background:var(--black);color:var(--off);border:1px solid var(--off);padding:12px 20px;font:inherit;cursor:pointer}
.video-toggle:focus-visible{outline:2px solid var(--off);outline-offset:3px}
.btn:disabled{cursor:wait}
@media(max-width:760px){
 section[id],details[id]{scroll-margin-top:76px}
 .signup form{flex-direction:column;gap:12px}
 .signup input,.signup form .btn{width:100%;min-height:52px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


.skip-link{position:fixed;top:8px;left:8px;z-index:20;transform:translateY(-200%);background:var(--off);color:var(--black);padding:12px 16px}
.skip-link:focus{transform:none}
#main-content{scroll-margin-top:96px}

.size-chart{border-collapse:collapse;margin:1rem 0 .25rem;font-family:"IBM Plex Sans",Arial,sans-serif;font-size:.95rem;width:100%;max-width:26rem}.size-chart th,.size-chart td{padding:.4rem .5rem;text-align:center;border-bottom:1px solid rgba(242,239,228,.25);font-weight:400}.size-chart th[scope=row]{text-align:left}.size-chart thead th{font-weight:600}

/* Post-signup confirmation v2: replaces the form in place */
.signup .fine.confirm{max-width:720px;margin:32px auto;padding:40px 24px;border:2px solid var(--pink);font-size:inherit;text-align:center}
.confirm:focus{outline:none}.confirm:focus-visible{outline:2px solid var(--off);outline-offset:3px}
.confirm-head{display:block;font-family:"Hi Lovely Human Refined","IBM Plex Sans",sans-serif;text-transform:uppercase;font-size:clamp(40px,7vw,72px);line-height:1.05;color:var(--off)}
.confirm-sub{display:block;margin-top:20px;font:400 20px/1.5 "IBM Plex Sans",sans-serif;color:var(--off)}
@media(max-width:600px){.signup .fine.confirm{padding:32px 16px}.confirm-sub{font-size:18px}}
/* Brand rule: brush font (Hi Lovely Human Refined) is uppercase only, everywhere */
.display,.confirm-head,.brush,[class*="brush"]{text-transform:uppercase!important}