/* ============================================================
   Happy Endings — global stylesheet
   happyendin.gs

   Two modes, one red. Blanc (light): cream paper, warm ink,
   sealing-wax red. Noir (dark): candlelit black, Blanc’s cream type, the same
   red. Every Blanc rule holds in Noir, small red labels included (chosen 23 Oct 2026). Follows prefers-color-scheme; <html data-theme="light|dark">
   (light = Blanc, dark = Noir) overrides it, set by .tog.

   Type: Fraunces (display, opsz 144) + Archivo (UI/body).
   Load: https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Archivo:wght@400;500;600;700&display=swap

   Tokens
     --font-display / --font-ui / --font-mono / --font-easy   the four faces
     --fs-11 … --fs-72   the type scale: 11, 13, 15, 17, 22, 26, 36, 56, 72
     --shadow-lift / --shadow-deep / --scrim   a menu or card lifted, the pull-out margin, the shade behind a modal
     --z-*               named layers: raised, float, menu, tab, pullout, demo, modal, banner, reveal
     --bg / --ink        page ground and type
     --acc / --acc-ink   the one red, and what sits on it
     --line              hairlines (gold in Blanc, the cream grain on candlelit black in Noir)
     --inv-bg / --inv-ink  inverse band (.inv)
     --card              chapter cards
     --sub-bg / --sub-ink  the red band (.sub) and its inputs
     --grain / --grain-dot / --grain-blend  paper grain in both modes:
                         ink dots multiplied in Blanc, cream dots screened in Noir
     --imgf              filter applied to illustrations (.illo)

   Components
     .wm   wordmark  (<b>happy</b>endin<span class="dot">.</span>gs)
     .btn  pill button   .btn-c (red)   .btn-inv (on .inv band)
     .tag  small caps kicker
     .in   form input (Fraunces 800)
     .tog  Blanc/Noir toggle (44px round, icons)
     .marq marquee band   .caret blinking cursor
     .card .inv .sub .line .illo
   Headings: light weight phrase + one <em> at 800 (see .f)
   ============================================================ */

:root{--font-display:'Fraunces',Georgia,serif;--font-ui:'Archivo',system-ui,sans-serif;--font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;--font-easy:'Atkinson Hyperlegible Next','Archivo',sans-serif;--fs-11:11px;--fs-13:13px;--fs-15:15px;--fs-17:17px;--fs-22:22px;--fs-26:26px;--fs-36:36px;--fs-56:56px;--fs-72:72px;--shadow-lift:0 10px 30px rgba(0,0,0,.14);--shadow-deep:-18px 0 40px rgba(0,0,0,.18);--scrim:rgba(0,0,0,.45);--z-raised:2;--z-float:6;--z-menu:20;--z-tab:30;--z-pullout:40;--z-demo:45;--z-modal:50;--z-banner:60;--z-reveal:100}
:root{--bg:#F4ECDC;--ink:#2A211B;--acc:#A8192B;--acc-ink:#F4ECDC;--line:#C8A86B;--inv-bg:#1C1A18;--inv-ink:#F4ECDC;--card:#FBF6EA;--sub-bg:#A8192B;--sub-ink:#F4ECDC;--grain:.07;--grain-dot:rgba(0,0,0,.9);--grain-blend:multiply;--imgf:sepia(.25) saturate(.9)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#120E0C;--ink:#F4ECDC;--acc:#A8192B;--acc-ink:#F4ECDC;--line:#443F3A;--inv-bg:#F4ECDC;--inv-ink:#120E0C;--card:#1D1916;--sub-bg:#A8192B;--sub-ink:#F4ECDC;--grain:.10;--grain-dot:rgba(244,236,220,.9);--grain-blend:screen;--imgf:contrast(1.05)}}
:root[data-theme="dark"]{--bg:#120E0C;--ink:#F4ECDC;--acc:#A8192B;--acc-ink:#F4ECDC;--line:#443F3A;--inv-bg:#F4ECDC;--inv-ink:#120E0C;--card:#1D1916;--sub-bg:#A8192B;--sub-ink:#F4ECDC;--grain:.10;--grain-dot:rgba(244,236,220,.9);--grain-blend:screen;--imgf:contrast(1.05)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:var(--grain);background-image:radial-gradient(var(--grain-dot) .6px,transparent .7px);background-size:3px 3px;mix-blend-mode:var(--grain-blend);z-index:9}
a{color:var(--ink)}a:hover{color:var(--acc)}
.f{font-family:var(--font-display);font-variation-settings:'opsz' 144;letter-spacing:-.02em}
.wrap{max-width:1320px;margin:0 auto;padding-left:40px;padding-right:40px}
@media(max-width:720px){.wrap{padding-left:20px;padding-right:20px}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;font-weight:600;font-size:17px;text-decoration:none;cursor:pointer;border:2px solid var(--ink);color:var(--ink);background:transparent;font-family:inherit;transition:transform .15s}
.btn:hover{transform:translateY(-2px);color:var(--ink)}
.btn-c{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}.btn-c:hover{color:var(--acc-ink)}
.btn-inv{background:var(--inv-ink);color:var(--inv-bg);border-color:var(--inv-ink)}.btn-inv:hover{color:var(--inv-bg)}
.nav a{text-decoration:none;font-weight:600;font-size:15px}
.wm{font-size:28px;text-decoration:none;color:var(--ink);letter-spacing:-.03em}.wm b{font-weight:800}.wm .dot{color:var(--acc);font-weight:800;display:inline-block;transition:color .2s,transform .2s}.wm:hover{color:var(--ink)}.wm:hover .dot{color:var(--acc);transform:translateY(-.12em) scale(1.25)}
.acc-fill{fill:var(--acc)}.ink-fill{fill:var(--ink)}.inv-fill{fill:var(--inv-ink)}
.tag{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.line{border-top:1px solid var(--line)}
.marq{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.marq div{display:inline-block;animation:m 32s linear infinite}.marq span{padding:0 28px}.marq .hrt{color:var(--acc)}@keyframes m{to{transform:translateX(-50%)}}
.caret{display:inline-block;width:.08em;height:.85em;background:var(--acc);vertical-align:-.06em;margin-left:.06em;animation:b 1s steps(1) infinite}@keyframes b{50%{opacity:0}}
.in{height:62px;border:2px solid var(--sub-ink);background:var(--sub-bg);color:var(--sub-ink);border-radius:999px;padding:0 24px 3px;font-family:var(--font-display);font-variation-settings:'opsz' 72;font-weight:800;font-size:var(--fs-22);letter-spacing:-.01em;flex:1 1 280px;min-width:0}.in::placeholder{color:var(--sub-ink);opacity:.55;font-weight:800}.in:focus{outline:none;box-shadow:0 0 0 3px var(--sub-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.row{display:flex;flex-wrap:wrap;gap:48px;align-items:center}.col{flex:1 1 460px;min-width:0}.ctr{display:flex;justify-content:center}
.illo{width:100%;height:auto;filter:var(--imgf)}
.inv{background:var(--inv-bg);color:var(--inv-ink)}.inv a{color:var(--inv-ink)}.inv a.btn-inv{color:var(--inv-bg)}.inv a.btn-inv:hover{color:var(--inv-bg)}
.sub{background:var(--sub-bg);color:var(--sub-ink)}
.card{background:var(--card)}
.tog{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;padding:0}
.tog svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tog .moon{display:none}:root[data-theme="dark"] .tog .sun{display:none}:root[data-theme="dark"] .tog .moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tog .sun{display:none}:root:not([data-theme="light"]) .tog .moon{display:block}}