/* jetzets site.css: tokens, base, type, shared shell, components, homepage. SPEC 1, 2, 3; partials in research/partials. */

/* ---------- fonts: self-hosted WOFF subsets (research/fonts.css, SPEC 1.2) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-400.woff") format("woff");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-500.woff") format("woff");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-700.woff") format("woff");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/PlusJakartaSans-800.woff") format("woff");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-700.woff") format("woff");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-800.woff") format("woff");
}

@font-face {
  font-family: "jz-sans-fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Arial"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 103.85%;
  ascent-override: 99.95%;
  descent-override: 21.38%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "jz-sans-fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 105.14%;
  ascent-override: 98.72%;
  descent-override: 21.11%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "jz-sans-fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica Neue Bold");
  size-adjust: 100.15%;
  ascent-override: 103.64%;
  descent-override: 22.17%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "jz-sans-fallback";
  font-style: normal;
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Helvetica Neue Bold");
  size-adjust: 101.28%;
  ascent-override: 102.49%;
  descent-override: 21.92%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "jz-mono-fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Consolas Bold"), local("Consolas-Bold");
  size-adjust: 109.13%;
  ascent-override: 93.47%;
  descent-override: 27.49%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "jz-mono-fallback";
  font-style: normal;
  font-weight: 800;
  src: local("Consolas Bold"), local("Consolas-Bold");
  size-adjust: 109.13%;
  ascent-override: 93.47%;
  descent-override: 27.49%;
  line-gap-override: 0.00%;
}

@font-face {
  font-family: "jz-mono-fallback-courier";
  font-style: normal;
  font-weight: 700;
  src: local("Courier New Bold"), local("CourierNewPS-BoldMT"), local("Menlo Bold");
  size-adjust: 99.98%;
  ascent-override: 102.02%;
  descent-override: 30.00%;
  line-gap-override: 0.00%;
}


/* ---------- tokens (SPEC 1) ---------- */
:root{
  --cream:#FDF6E8;--cream-2:#F3EADA;--card:#FFFFFF;--ink:#141210;--ink-2:#4A443C;--ink-3:#7C7367;--line:rgba(20,18,16,.12);
  --accent:#F2542D;--clay:#C4472C;--jade:#0E7C5A;--mango:#F2A93B;--blue:#2F5FE0;
  --sky-cream:#FDF6E8;--sky-cream2:#F3EADA;--sky-honey:#E9B96A;--sky-dusk:#2B1E3A;--sky-ink:#141210;--sky-navy:#0B1430;
  --lamp:#FDECC8;--lamp-dim:#B9A98A;--ember:#FF7A4F;--grey-dead:#A0968A;
  --cream-72:rgba(253,246,232,.72);
  /* derived alphas, all from the tokens above */
  --cream-92:rgba(253,246,232,.92);--cream-60:rgba(253,246,232,.6);--cream-10:rgba(253,246,232,.1);
  --ink-92:rgba(20,18,16,.92);--ink-55:rgba(20,18,16,.55);--ink-0:rgba(20,18,16,0);--lamp-80:rgba(253,236,200,.8);
  --navy-80:rgba(11,20,48,.8);--navy-0:rgba(11,20,48,0);--cream-45:rgba(253,246,232,.45);--cream-0:rgba(253,246,232,0);
  --ink-70:rgba(20,18,16,.7);--honey-0:rgba(233,185,106,0);--accent-35:rgba(242,84,45,.35);--accent-0:rgba(242,84,45,0);
  --font-sans:"Plus Jakarta Sans","jz-sans-fallback",Arial,Roboto,sans-serif;
  --font-mono:"JetBrains Mono","jz-mono-fallback","jz-mono-fallback-courier",Consolas,"Courier New",monospace;
  /* type scale (SPEC 1.2) */
  --fs-xl:clamp(52px,8.4vw,128px);--fs-l:clamp(40px,6.5vw,96px);--fs-m:clamp(30px,3.8vw,56px);--fs-h3:28px;--fs-lead:22px;
  --fs-body:18px;--fs-small:15px;--fs-bubble:28px;--fs-stat:clamp(56px,7vw,112px);--fs-clock:96px;--fs-sticker:26px;
  --fs-label:13px;--fs-stamp:14px;--fs-caption:12px;--fs-btn:16px;--fs-nav:15px;--fs-menu:32px;
  /* space, grid, shape (SPEC 1.3, 1.4) */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s8:96px;--sec:128px;
  --side:64px;--max:1360px;--gap:24px;--nav-h:64px;--btn-h:52px;--tap:44px;
  --r-chip:10px;--r-btn:14px;--r-card:20px;--r-bubble:30px;--r-tail:8px;--r-phone:36px;
  --sh-sm:3px;--sh-md:6px;--sh-lg:10px;
  /* theme (light by default; [data-theme=dark] swaps) */
  --fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--edge:var(--ink);--sh:var(--ink);
}
@media (max-width:1023px){:root{--side:32px}}
@media (max-width:767px){:root{
  --fs-xl:52px;--fs-l:42px;--fs-m:32px;--fs-h3:22px;--fs-lead:19px;--fs-body:17px;--fs-small:14px;--fs-bubble:18px;
  --fs-stat:min(56px,11.5vw);--fs-clock:48px;--fs-sticker:18px;--fs-label:12px;--fs-stamp:13px;--fs-btn:15px;
  --sec:80px;--side:16px;--gap:16px;--btn-h:48px;--r-card:16px}}
[data-theme=dark]{--fg:var(--cream);--fg-2:var(--cream-72);--fg-3:var(--cream-72);--edge:var(--lamp-80);--sh:var(--lamp);color:var(--fg)}
[data-theme=light]{color:var(--fg)}
[data-sky=cream2],[data-sky=honey]{--fg-3:var(--ink-2)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--ink);font:400 var(--fs-body)/1.6 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ico.ico-in{display:inline-block;width:.75em;height:.75em;margin-left:.12em;vertical-align:-.05em}
.nw{white-space:nowrap}
/* display headings: pull the final period in against the last letter (V-12) */
.kp{margin-left:-.06em}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--s2);top:-100px;z-index:100;padding:12px 18px;background:var(--ink);color:var(--cream);border-radius:var(--r-btn);font-weight:800;text-decoration:none}
.skip:focus{top:var(--s1)}
.wrap{width:min(100% - 2*var(--side),var(--max));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
@media (max-width:1023px){.grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:767px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- type (SPEC 1.2) ---------- */
.t-xl{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.045em;line-height:.92}
.t-l{font-size:var(--fs-l);font-weight:800;letter-spacing:-.04em;line-height:.95}
.t-m{font-size:var(--fs-m);font-weight:800;letter-spacing:-.035em;line-height:1.02}
h3,.t-h3{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.t-xl,.t-l,.t-m,h3{color:var(--fg)}
.lead{font-size:var(--fs-lead);font-weight:500;letter-spacing:-.01em;line-height:1.45;color:var(--fg-2);max-width:46ch}
p{color:var(--fg-2);max-width:62ch}
.small{font-size:var(--fs-small);font-weight:500;line-height:1.5}
.label{font:700 var(--fs-label)/1.35 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);max-width:none}
.stamp{display:inline-flex;align-items:center;gap:10px;font:800 var(--fs-stamp)/1 var(--font-mono);letter-spacing:.06em;color:var(--fg)}
.stamp::before{content:"";width:24px;height:2px;background:currentColor;flex:none}
.caption{font:700 var(--fs-caption)/1.4 var(--font-mono);letter-spacing:.02em;color:var(--fg-3);max-width:none}
.br{display:inline}
@media (max-width:767px){.br{display:none}}
.kick{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);margin-bottom:var(--s2)}
.jz-line{padding-bottom:.08em;margin-bottom:-.08em}

/* ---------- buttons, chips, stickers, bubbles (SPEC 1.4, 1.5, 1.8) ---------- */
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s4)}
.btn{--o:var(--sh-md);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding:0 20px;
  border:3px solid var(--edge);border-radius:var(--r-btn);font:800 var(--fs-btn)/1.15 var(--font-sans);letter-spacing:-.02em;
  text-decoration:none;box-shadow:var(--o) var(--o) 0 var(--sh);transition:translate .18s,box-shadow .18s;cursor:pointer}
.btn:hover{translate:-1px -1px;box-shadow:calc(var(--o) + 1px) calc(var(--o) + 1px) 0 var(--sh)}
.btn:active{translate:3px 3px;box-shadow:0 0 0 var(--sh)}
.btn .ico{width:18px;height:18px}
.btn--p{background:var(--accent);color:var(--cream)}
.btn--s{background:var(--cream);color:var(--ink)}
[data-theme=dark] .btn--p{color:var(--ink)}
[data-theme=dark] .btn--s{background:transparent;color:var(--cream)}
.btn--sm{--o:var(--sh-sm);min-height:var(--tap);padding:0 16px;font-size:15px}
.btn-sub{font:inherit}
.btn--ext{column-gap:0}.btn--ext .btn-sub{margin-left:.3em}.btn--ext .ico{margin-left:10px}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);font-weight:800;color:var(--fg);text-decoration:underline;text-decoration-thickness:2px}
.tlink .ico{width:18px;height:18px}
@media (max-width:767px){
  .btns{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .btn--ext{flex-wrap:wrap;column-gap:8px;padding-block:8px;text-align:center}
  .btn--ext .btn-sub{order:3;flex-basis:100%;margin:2px 0 0;font:700 12px/1.3 var(--font-mono);letter-spacing:.02em}
}
.chip{--o:var(--sh-sm);display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:2px solid var(--edge);border-radius:var(--r-chip);
  background:var(--card);color:var(--ink);font:700 var(--fs-label)/1 var(--font-mono);letter-spacing:.06em;white-space:nowrap;box-shadow:var(--o) var(--o) 0 var(--sh)}
.sticker{--o:var(--sh-md);display:inline-flex;align-items:center;justify-content:center;padding:.5em .85em;border:3px solid var(--ink);border-radius:999px;
  background:var(--accent);color:var(--cream);font:800 var(--fs-sticker)/1 var(--font-mono);white-space:nowrap;
  box-shadow:inset 0 0 0 5px var(--cream),var(--o) var(--o) 0 var(--sh);transform:rotate(var(--r,0deg))}
[data-theme=dark] .sticker{color:var(--ink)}
.bubble{--o:var(--sh-md);display:inline-block;padding:.5em .8em .55em;background:var(--card);color:var(--ink);border:3px solid var(--ink);
  border-radius:var(--r-bubble) var(--r-bubble) var(--r-bubble) var(--r-tail);font:700 var(--fs-bubble)/1.1 var(--font-sans);letter-spacing:-.03em;
  white-space:nowrap;box-shadow:var(--o) var(--o) 0 var(--ink)}
.bubble--me{background:var(--accent);color:var(--cream);border-radius:var(--r-bubble) var(--r-bubble) var(--r-tail) var(--r-bubble)}
.av{width:28px;height:28px;flex:none;display:inline-grid;place-items:center;border:2px solid var(--ink);border-radius:999px;font:700 12px/1 var(--font-mono);color:var(--ink)}
.av--m{background:var(--mango)}.av--j{background:var(--jade);color:var(--cream)}.av--b{background:var(--blue);color:var(--cream)}.av--p{background:var(--accent);color:var(--cream)}
.days{display:flex;gap:6px}
.day{width:36px;height:36px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:8px;background:var(--card);color:var(--ink);font:800 15px/1 var(--font-mono)}
.day.on{background:var(--ink);color:var(--cream)}

/* ---------- wordmark (SPEC 1.6) ---------- */
.wm{display:inline-flex;align-items:baseline;font:800 22px/1 var(--font-sans);letter-spacing:-.05em;color:inherit;text-decoration:none;white-space:nowrap}
.wm-ring{width:max(.19em,9px);height:max(.19em,9px);margin-left:.03em;flex:none;color:var(--accent);stroke-width:2px;overflow:visible}
[data-theme=dark] .wm-ring,.nav.is-dark .wm-ring{color:var(--ember)}
.wm--xl{font-size:128px;color:var(--fg)}
.wm--xl .wm-ring{stroke-width:3px}
@media (max-width:767px){.wm--xl{font-size:64px}}

/* ---------- windows (SPEC 1.7) ---------- */
.window{position:relative}
.window-frame{position:relative;overflow:hidden;padding:10px;background:var(--cream);border:3px solid var(--edge);border-radius:var(--r-card);
  box-shadow:var(--sh-md) var(--sh-md) 0 var(--sh);transition:translate .25s}
.window-frame img{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r-card) - 10px)}
[data-theme=dark] .window-frame{padding:0;background:var(--ink)}
[data-theme=dark] .window-frame img{border-radius:calc(var(--r-card) - 3px)}
.window:hover .window-frame{translate:0 -4px}
.window figcaption{margin-top:14px}
.win-dot{position:absolute;z-index:3;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--accent);pointer-events:none}

/* ---------- nav (SPEC 3, section 0) ---------- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);background:var(--cream-92);border-bottom:2px solid var(--ink);color:var(--ink);transition:background-color .25s,border-color .25s,color .25s}
.nav.is-top{background:transparent;border-bottom-color:transparent}
.nav.is-dark{background:var(--ink-92);border-bottom-color:var(--lamp);color:var(--cream)}
.nav-in{height:100%;display:flex;align-items:center;gap:var(--s3)}
.nav .wm,.foot .wm{min-height:var(--tap);align-items:center}
.nav .wm-ring,.foot .wm-ring{align-self:flex-end;margin-bottom:12px}
.nav-links{display:flex;gap:2px;margin:0 auto;padding:0;list-style:none}
.nav-links a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;font:700 var(--fs-nav)/1 var(--font-sans);letter-spacing:-.01em;text-decoration:none}
.nav-links a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.nav-links a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:8px}
.nav .btn--sm{margin-left:auto}
.nav-links+.btn--sm{margin-left:0}
.nav.is-dark .btn{--edge:var(--lamp-80);--sh:var(--lamp);color:var(--ink)}
.menu{display:none}
.menu summary{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;border:2px solid currentColor;border-radius:var(--r-chip);font:700 var(--fs-label)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;list-style:none}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.sheet{position:fixed;inset:var(--nav-h) 0 0 0;overflow:auto;padding:var(--s3) var(--side) var(--s5);background:var(--cream);color:var(--ink);border-top:2px solid var(--ink)}
.sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sheet .big a{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);
  box-shadow:var(--sh-md) var(--sh-md) 0 var(--ink);font:800 var(--fs-menu)/1.05 var(--font-sans);letter-spacing:-.035em;text-decoration:none}
.sheet .big a[aria-current=page]{background:var(--accent);color:var(--cream)}
.sheet .sm{display:flex;gap:var(--s3);margin-top:var(--s4)}
.sheet .sm a{display:inline-flex;align-items:center;min-height:var(--tap);font-weight:700}
@media (max-width:767px){
  .nav-links{display:none}
  .nav-in{gap:10px}
  .nav .btn{width:auto;padding:0 14px}
  .nav-links+.btn--sm{margin-left:auto}
  .menu{display:block}
}

/* ---------- footer (SPEC 3, section 10) ---------- */
.foot{position:relative;z-index:1;background:var(--cream);color:var(--ink);border-top:3px solid var(--ink);padding:var(--s6) 0 var(--s5)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:var(--s4)}
.foot-tag{margin-top:var(--s2);font-weight:700;color:var(--ink)}
.foot ul{list-style:none;margin:var(--s1) 0 0;padding:0}
.foot li a{display:inline-block;min-height:var(--tap);min-width:var(--tap);padding:12px 0;font:600 var(--fs-small)/20px var(--font-sans);text-decoration:none}
.foot li a:hover{text-decoration:underline}
.foot li .ico{display:inline-block;width:.8em;height:.8em;margin-left:.3em;vertical-align:-.02em}
.foot-lines{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);display:grid;gap:6px}
.foot-lines p{font-size:var(--fs-small);font-weight:500;line-height:1.5;color:var(--ink-2);max-width:none}
@media (max-width:1023px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.foot-grid{grid-template-columns:1fr}}

/* ---------- sections, sky, scenes (SPEC 2.6) ---------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--sky-cream)}
main{position:relative;z-index:1;display:block}
[data-sky=cream]{background:var(--sky-cream)}[data-sky=cream2]{background:var(--sky-cream2)}[data-sky=honey]{background:var(--sky-honey)}
[data-sky=dusk]{background:var(--sky-dusk)}[data-sky=ink]{background:var(--sky-ink)}[data-sky=navy]{background:var(--sky-navy)}
html.sky-on main>section[data-sky]{background:transparent}
.sec{position:relative;padding:var(--sec) 0}
.scene{position:relative;height:100vh;min-height:640px;max-height:1100px;overflow:hidden}
.media{position:absolute;inset:0}
.media img{width:100%;height:100%;object-fit:cover}
.scrim{position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(to top,var(--ink-55),var(--ink-0));pointer-events:none}
@media (max-width:767px){.scene{height:100svh;min-height:560px}}

/* ---------- inner pages: dark band + reading layout (SPEC 4) ---------- */
.band{display:flex;align-items:flex-end;min-height:240px;padding:var(--s5) 0 var(--s4);background:var(--ink);color:var(--cream)}
.band .label{color:var(--cream)}
.band h1{margin-top:var(--s2);max-width:22ch}
@media (max-width:767px){.band{min-height:180px}}
.read{width:min(100% - 2*var(--side),720px);margin-inline:auto;padding:var(--s8) 0 var(--sec)}
.read>*+*{margin-top:var(--s2)}
.read h2{margin-top:var(--s6);font-size:var(--fs-m);font-weight:800;letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
.read h3{margin-top:var(--s4)}
/* prose lists only (unclassed, plus .rules); component lists (chiprow, stats, filmstrip, credit-list, jlist, also) are untouched */
.read :is(ul,ol):where(:not([class]),.rules){padding-left:1.2em;color:var(--ink-2)}
.read :is(ul,ol):where(:not([class]),.rules)>li+li{margin-top:6px}
.read>.window,.read .pair>.window{margin-block:var(--s5)}
.read table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.read th,.read td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.read th{font:700 var(--fs-label)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.read td.num{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums;text-align:right}

/* ---------- inner-page components (COMPONENTS.md) ---------- */
.read>.wide{width:min(100vw - 2*var(--side),1040px);margin-left:50%;translate:-50% 0}
.chiprow{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--s2);font:700 var(--fs-caption)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--cream-72)}
.footnote{padding:20px 22px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-chip)}
.footnote p{font-size:var(--fs-small)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.filmstrip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.filmstrip .window-frame{padding:0;aspect-ratio:16/9;border-width:2px;border-radius:var(--r-chip);box-shadow:var(--sh-sm) var(--sh-sm) 0 var(--sh)}
.filmstrip .window-frame img{border-radius:8px}
.filmstrip figcaption{margin-top:8px}
.film{position:relative;display:block;text-decoration:none}
.film .play{position:absolute;z-index:2;left:50%;top:50%;width:72px;height:72px;margin:-36px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--cream);border:3px solid var(--ink);box-shadow:var(--sh-md) var(--sh-md) 0 var(--ink)}
.film .play .ico{width:28px;height:28px;fill:currentColor}
.jlist{display:grid;gap:var(--s5);margin:0;padding:0;list-style:none}
.jcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:var(--s4);align-items:center}
@media (max-width:767px){.pair,.jcard{grid-template-columns:minmax(0,1fr)}.filmstrip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- reveal start states: only before site.js has set its own (SPEC 2.9) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.js-ready) [data-reveal],html.js:not(.js-ready) .hero-copy>*,html.js:not(.js-ready) .hero-cue,html.js:not(.js-ready) .page-home .nav .wm{visibility:hidden}
  html.js:not(.js-ready) .hero-veil{opacity:.7}
}

/* ================= HOMEPAGE ================= */
/* 1 hero */
.hero{margin-top:calc(-1*var(--nav-h));display:flex;align-items:center}
.hero .media img{object-position:72% 100%}
.kb{position:absolute;inset:0}
.hero-veil{position:absolute;inset:0;background:var(--cream);opacity:.15}
.hero-grad{position:absolute;inset:0;background:linear-gradient(to bottom,var(--cream-45),var(--cream-0) 70%)}
.hero .hero-cap{color:var(--ink-2)}
.hero-copy{position:relative;z-index:2;padding-top:var(--nav-h)}
.hero h1{margin:var(--s3) 0}
.hero .lead{color:var(--ink-2)}
.hero-cue{position:absolute;z-index:2;left:0;right:0;bottom:var(--s4);display:flex;align-items:flex-end;gap:14px;pointer-events:none}
.cue-line{width:2px;height:56px;background:var(--ink)}
.hero-cue .stamp::before{display:none}
/* photo credits: small, one line where possible (owner feedback 1 Oct) */
.caption.credit{font-size:10px;line-height:1.35;letter-spacing:.03em;opacity:.78}
.caption .credit{display:inline-block;font-size:10px;letter-spacing:.03em;opacity:.7;margin-left:.35em;white-space:nowrap}
@media (max-width:767px){.caption.credit,.caption .credit{font-size:9.5px}}
.hero-cue .caption{color:var(--ink-2);margin-top:6px}
html:not(.mo) .hero-cue .caption{display:none}
@media (max-width:767px){
  .hero{align-items:flex-start}
  .hero-copy{padding-top:calc(var(--nav-h) + var(--s4))}
  .hero .media img{object-position:60% 50%}
  .hero h1{margin:var(--s2) 0}
  .hero-cue{display:none}
}

/* 2 the question */
.q{padding:0}
.q-band{position:relative;z-index:2;margin-bottom:-144px;padding:var(--s5) 0 52px;background:var(--cream);border-block:3px solid var(--ink)}
.q-band h2{margin-top:var(--s1)}
.q-scene{margin:0}
.q-scene .media{inset:0 -6vw}
.q-cap{padding-top:14px}
.q-beat{padding:var(--s8) 0 var(--sec);align-items:center}
.q-body{grid-column:2/7;display:grid;gap:var(--s2)}
.q-body p:first-child{font-size:var(--fs-lead);font-weight:500;line-height:1.45;color:var(--ink)}
.chat{grid-column:8/13;width:100%;max-width:420px;padding:18px 18px 30px;background:var(--card);color:var(--ink);border:3px solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--o,6px) var(--o,6px) 0 var(--ink);--o:var(--sh-md)}
.chat-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--s2);padding-bottom:14px;border-bottom:2px solid var(--ink);font:700 var(--fs-label)/1 var(--font-mono)}
.avs{display:flex}.avs .av+.av{margin-left:-7px}
.msg{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.msg .who{font:700 11px/1 var(--font-mono);color:var(--ink-3);margin:0 0 4px 36px}
.typing .bubble{display:inline-flex;gap:6px;padding:.62em .8em}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.mo .chat .reply{margin-top:-14px;transform:translateX(var(--x)) rotate(var(--r))}
.mo-p .chat .reply{margin-top:-2px}
@media (max-width:1023px){.q-body{grid-column:1/-1}.chat{grid-column:1/-1;margin-top:var(--s5)}}
@media (max-width:767px){.q-band{margin-bottom:-96px;padding:var(--s4) 0 var(--s5)}.q-scene .media{inset:-6vh 0}.chat .desk{display:none}.q-beat{padding-top:var(--s6)}}

/* 1b who we are (owner feedback 1 Oct: jetzets before tara) */
.who-grid{align-items:center;row-gap:var(--s6)}
.who-copy{grid-column:1/8}
.who-copy h2{margin-top:var(--s3)}
.who-copy .lead{margin-top:var(--s3);max-width:34ch;color:var(--ink)}
.who-copy p:not(.lead):not(.label){margin-top:var(--s2);max-width:58ch}
.who-copy .btns{margin-top:var(--s4)}
.who-art{grid-column:8/13;margin:0;display:grid;justify-items:center;gap:var(--s2)}
.who-ring{width:min(100%,440px);height:auto;overflow:visible}
.who-orbit{fill:none;stroke:var(--accent);stroke-width:5}
.who-wm{font:800 46px var(--font-sans);letter-spacing:-2.3px;fill:var(--ink)}
.who-dot{fill:var(--accent);stroke:var(--ink);stroke-width:3}
.who-sh{fill:var(--ink)}
.who-dot2{fill:var(--cream);stroke:var(--ink);stroke-width:3}
.who-t{font:800 26px var(--font-sans);letter-spacing:-1px;fill:var(--ink)}
.who-live{font:800 12px var(--font-mono);letter-spacing:2px;fill:var(--jade)}
.who-art figcaption{text-align:center}
@media (max-width:1023px){.who-copy,.who-art{grid-column:1/-1}.who-ring{width:min(100%,340px)}}

/* 3 what we believe */
.bel{--fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-2);color:var(--ink)}
.bel-head{padding:var(--sec) 0 var(--s5)}
.bel-media{position:relative}
.bel-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.bel-img img{width:100%;height:100%;object-fit:cover}
.bel-media figcaption{padding:12px max(var(--side),(100% - var(--max))/2) 0}
.bel-text{padding:var(--s5) 0 var(--s8)}
.bel-text h2{max-width:16ch}
.bel-text .lead{margin-top:var(--s3)}
.bel-count{display:none}
@media (max-width:767px){.bel-img{aspect-ratio:4/5}}
.mo-d .bel-frame,.mo-p .belief{--fg:var(--cream);--fg-2:var(--cream-72);--fg-3:var(--cream-72);color:var(--cream)}
.mo-d .bel-img::after,.mo-p .bel-img::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(to top,var(--ink-55),var(--ink-0))}
.mo-d .belief:first-of-type .bel-img::after,.mo-p .belief:first-of-type .bel-img::after{height:72%;background:linear-gradient(to top,var(--ink-70),var(--ink-70) 40%,var(--ink-0))}
.mo-d .belief:first-of-type,.mo-p .belief:first-of-type{--fg-2:var(--cream-92);--fg-3:var(--cream-92)}
.mo-d .bel-track{height:300vh}
.mo-d .bel-frame{position:sticky;top:0;height:100vh;overflow:hidden}
.mo-d .bel-head{position:absolute;z-index:5;top:auto;left:auto;right:var(--side);bottom:calc(var(--s8) + 84px);width:auto;padding:0}
.mo-d .bel-head .kick{align-items:flex-end;margin:0}
.mo-d .belief,.mo-d .bel-media,.mo-d .bel-img{position:absolute;inset:0;aspect-ratio:auto}
.mo-d .belief{isolation:isolate}
.mo-d .bel-media figcaption{position:absolute;z-index:3;right:var(--side);bottom:var(--s5);max-width:300px;padding:0;text-align:right}
.mo-d .bel-text{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 0 var(--s8)}
.mo-d .bel-text .lead{max-width:46ch}
.mo-d .bel-count{position:absolute;z-index:5;right:var(--side);bottom:calc(var(--s8) + 40px);display:flex;align-items:center;gap:var(--s2)}
.bel-count .label{color:var(--cream)}
.dots{display:flex;gap:8px}.dots i{width:10px;height:10px;border-radius:50%;border:2px solid var(--cream)}
.dots i.on{background:var(--cream)}
.mo-p .bel-head{padding:var(--s6) 0 var(--s4)}
.mo-p .belief{position:relative;background:var(--ink)}
.mo-p .belief:first-of-type .bel-img img{object-position:38% 50%}
.mo-p .bel-media{position:relative}
.mo-p .bel-img{position:relative;aspect-ratio:4/5}
.mo-p .bel-img::after{display:none}
.mo-p .bel-media figcaption{position:static;padding:10px var(--side) 0;color:var(--cream-72)}
.mo-p .bel-text{position:relative;padding:var(--s3) 0 var(--s7)}

/* 4 dusk */
.dusk .scene-copy{position:absolute;z-index:2;left:0;right:0;bottom:var(--s8)}
.dusk h2{margin-top:var(--s3);max-width:14ch}
.scene-cap{position:absolute;z-index:2;right:var(--side);bottom:var(--s4);max-width:min(420px,60vw);text-align:right}
.dusk .media{transform-origin:50% 0}
.dusk .media img{object-position:50% 20%}
@media (max-width:767px){.dusk{height:70svh;min-height:520px}.dusk .scene-copy{bottom:var(--s8)}.scene-cap{left:var(--side);text-align:left;max-width:none}}
/* phone: the hero credit sits over the dark skyline, so it gets a cream backing (lead fix, N3039-01) */
@media (max-width:767px){.hero .hero-cap{right:auto;width:fit-content;max-width:calc(100% - 2 * var(--side));padding:4px 8px;border-radius:6px;background:rgba(253,246,232,.9);color:var(--ink-2)}}

/* 5 product one: tara */
.prod-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.prod-head{grid-column:7/13;grid-row:1}
.prod-vis{grid-column:1/6;grid-row:1/3;display:grid;place-items:center;padding:var(--s5) 0}
.prod-call{grid-column:7/13;grid-row:2}
.tara-wm{display:inline-flex;align-items:baseline;margin-top:var(--s1);font-size:var(--fs-l);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--fg)}
.tara-wm i{width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--accent)}
.prod-head .t-m{margin-top:var(--s3)}
.prod-head p{margin-top:var(--s3)}
.prod-more{margin-top:var(--s4)}
.mo-d .prod{padding-bottom:var(--s4)}
.mo-d .prod-vis{position:sticky;top:0;height:100vh;padding:0}
.phone-wrap .hexbg{inset:-12% -30%}
.hexbg{position:absolute;inset:0;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V17L28 1l28 16v33L28 66zm0 0v32' fill='none' stroke='%23FDF6E8' stroke-width='2'/%3E%3C/svg%3E") 0 0/56px 98px}
.hexbg--ink{inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V17L28 1l28 16v33L28 66zm0 0v32' fill='none' stroke='%23141210' stroke-width='2'/%3E%3C/svg%3E")}
.phone-wrap{position:relative;width:min(300px,100%)}
.phone{position:relative;aspect-ratio:9/18.6;padding:9px;background:var(--ink);border:4px solid var(--edge);border-radius:var(--r-phone);box-shadow:var(--sh-lg) var(--sh-lg) 0 var(--sh)}
.screen{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;border-radius:27px;background:var(--cream);color:var(--ink)}
.scr-top{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.scr-wm{display:inline-flex;align-items:baseline;font:800 24px/1 var(--font-sans);letter-spacing:-.05em}
.scr-wm i{width:6px;height:6px;margin-left:2px;border-radius:50%;background:var(--accent)}
.scr-top .av{width:24px;height:24px;font-size:10px}
.scr-search{display:flex;align-items:center;gap:6px;height:34px;margin:0 12px;padding:0 10px;background:var(--card);border:2px solid var(--ink);border-radius:10px;font:500 12px/1 var(--font-sans);color:var(--ink-3)}
.scr-search .ico{width:15px;height:15px;color:var(--ink)}
.scr-chips{display:flex;gap:6px;padding:9px 12px}
.scr-chips span{padding:5px 7px;background:var(--card);border:2px solid var(--ink);border-radius:8px;font:700 9.5px/1 var(--font-mono);letter-spacing:.02em;white-space:nowrap}
.scr-chips .on{background:var(--ink);color:var(--cream)}
.scr-map{position:relative;flex:1;border-top:2px solid var(--line)}
.scr-map svg{position:absolute;inset:0;width:100%;height:100%}
.scr-map .map-bg{fill:var(--cream-2)}.scr-map .hx{fill:none;stroke:var(--line);stroke-width:1}
.scr-map .roads path{fill:none;stroke:var(--card);stroke-width:8;stroke-linecap:round}
.scr-map .venues circle{fill:var(--card);stroke:var(--ink);stroke-width:2}
.pin{position:absolute;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--accent);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.pin .sticker{position:absolute;left:50%;bottom:20px;--fs-sticker:11px;padding:.45em .65em;border-width:2px;box-shadow:inset 0 0 0 3px var(--cream),2px 2px 0 var(--ink);color:var(--cream);transform:translateX(-50%) rotate(var(--r,0deg))}
.scr-sheet{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 14px 16px;background:var(--card);border-top:3px solid var(--ink);border-radius:20px 20px 0 0;display:grid;gap:7px}
.scr-sheet::before{content:"";justify-self:center;width:36px;height:4px;margin:-4px 0 4px;border-radius:2px;background:var(--line)}
.scr-sheet b{font-size:15px;line-height:1.2;letter-spacing:-.02em}
.scr-sheet span{display:flex;align-items:center;gap:7px;font:500 11.5px/1.3 var(--font-sans);color:var(--ink-2)}
.scr-sheet .ico{width:15px;height:15px;color:var(--ink)}
.scr-sheet u{font:800 11.5px/1 var(--font-sans);color:var(--ink);text-decoration-thickness:2px;display:inline-flex;gap:4px;align-items:center}
.ps{position:absolute;z-index:3}
.ps1{right:-17%;top:3%;--r:7deg}.ps2{left:-21%;top:33%;--r:-6deg}.ps3{right:-19%;top:57%;--r:5deg}.ps4{left:-27%;top:87%;--r:-7deg}
.callouts{display:grid;gap:var(--s3);margin-top:var(--s5)}
.callout{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:22px 26px;background:var(--card);color:var(--ink);
  border:3px solid var(--edge);border-radius:var(--r-card);box-shadow:var(--sh-md) var(--sh-md) 0 var(--sh)}
.callout h3{color:var(--ink)}
.callout p{margin-top:4px;color:var(--ink-2);font-size:var(--fs-small);font-weight:500}
.callout .sticker{color:var(--cream);--sh:var(--ink)}
.callout .big{width:56px;height:56px;padding:12px;border:3px solid var(--ink);border-radius:14px;background:var(--mango);stroke-width:2.5}
.prod-stats{margin-top:var(--sec)}
/* homepage: one compact tara panel (owner, 1 Oct); the full set piece lives on /tara/ */
.prod--compact .prod-head{align-self:center}
@media (min-width:1024px){.prod--compact .prod-vis{grid-row:1}}
.mo-d .prod--compact .prod-vis{position:relative;height:auto;padding:var(--s5) 0}
.prod--compact .stats{margin-top:var(--s5)}
.prod--compact .stat b{font-size:clamp(40px,3.6vw,60px)}
.prod--compact .prod-note{margin-top:var(--s2)}
.prod--compact .btns{margin-top:var(--s5)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--gap);margin:0;padding:var(--s5) 0 0;list-style:none;border-top:3px solid var(--edge)}
.stat b{display:block;font:800 var(--fs-stat)/1 var(--font-mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--fg);transition:color .25s}
.stat b.is-counting{color:var(--mango)}
.stat .label{display:block;margin-top:14px;color:var(--fg-2)}
.stats .note{align-self:end}
.prod-stats .btns{margin-top:var(--s5)}
@media (max-width:1023px){
  .prod-grid{grid-template-columns:minmax(0,1fr)}
  .prod-head,.prod-vis,.prod-call{grid-column:1;grid-row:auto}
  .prod-vis{padding:var(--s6) 0 var(--s4)}
  .phone-wrap{width:min(80vw,320px)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .wide{grid-column:1/-1}
  .stats .note{grid-column:1/-1}
}
@media (max-width:767px){.callout{grid-template-columns:minmax(0,1fr);padding:18px 18px 20px}.callout>:last-child{justify-self:start}.callout .days{gap:5px}.callout .day{width:34px;height:34px}.ps1{right:-8%}.ps2{left:-10%}.ps3{right:-9%}.ps4{left:-6%;top:97%}}

/* 6 the good stuff */
.gs{padding:var(--sec) 0}
.gs-intro .lead{margin-top:var(--s3)}
.gs-intro h2{margin-top:var(--s3);max-width:12ch}
.gs-strip{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--side);padding:var(--s5) var(--side) var(--s3);align-items:flex-start;scrollbar-width:thin}
.gs-win{flex:none;width:var(--w);scroll-snap-align:start}
.gs-win .window-frame{aspect-ratio:var(--ar)}
.gs-win figcaption{max-width:36ch}
.gs-win.pt{--w:32vw;--ar:4/5}.gs-win.ls{--w:44vw;--ar:3/2}
@media (max-width:1023px){.gs-win.pt,.gs-win.ls{--w:78vw}.gs-strip{gap:var(--s2)}}
.mo-d .gs{padding:0}
.mo-d .gs-track{height:420vh}
.mo-d .gs-frame{position:sticky;top:0;height:100vh;overflow:hidden}
.mo-d .gs-rail{display:flex;align-items:center;gap:var(--s6);width:max-content;height:100%;padding:var(--nav-h) var(--s6) 0}
.mo-d .gs-intro{width:min(720px,50vw);flex:none;align-self:flex-start;padding-top:var(--s8)}
.mo-d .gs-intro .wrap{width:auto}
.mo-d .gs-strip{overflow:visible;padding:0;gap:var(--s4);align-items:center}
.mo-d .gs-win{width:auto}
.mo-d .gs-win .window-frame{height:var(--h)}
.mo-d .gs-win.pt{--h:60vh}.mo-d .gs-win.ls{--h:44vh}
.mo-d .gs-win:nth-child(2){margin-top:22vh}.mo-d .gs-win:nth-child(3){margin-bottom:24vh}.mo-d .gs-win:nth-child(5){margin-top:24vh}.mo-d .gs-win:nth-child(6){margin-bottom:20vh}
.mo-d .gs-win figcaption{position:absolute;left:0;top:100%;width:min(100%,36ch)}

/* 7 the night shift */
.night{display:grid;grid-template-columns:minmax(0,1fr);overflow:clip}
.night-copy{position:relative;z-index:3;align-self:start;padding:var(--sec) 0 var(--s5)}
.mo-d .night-copy,.mo-d .night-track{grid-area:1/1}
.mo-d .night-copy{padding:calc(var(--nav-h) + var(--s4)) 0 0;pointer-events:none}
.night-copy h2{margin-top:var(--s3)}
.night-copy p{margin-top:var(--s3);max-width:62ch}
.night-frame{position:relative;overflow:hidden;display:flex;flex-direction:column}
.night-iris{position:relative;overflow:hidden}
.night-stage{position:relative;aspect-ratio:16/9;background:var(--sky-navy)}
.night-stage img{width:100%;height:100%}
.night-stage .lyr{position:absolute;inset:0;display:none}
.lyr picture,.lyr img{position:absolute;inset:0;width:100%;height:100%}
.night-stage.is-layered .lyr{display:block}
.night-stage.is-layered>picture{visibility:hidden}
.night-beam,.night-honey,.night-ring{display:none}
.night-band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding:var(--s4) 0}
.clock{display:flex;align-items:baseline;gap:10px;font:800 var(--fs-clock)/1 var(--font-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--fg)}
.clock .label{letter-spacing:.1em}
.banks{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.bank{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 8px;border:2px solid var(--edge);border-radius:var(--r-chip);font:700 var(--fs-label)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg);transition:border-color .4s,color .4s}
.mo .bank{background:var(--sky-navy);transition:border-color .4s,color .4s,background-color .4s}.mo .is-dawn .bank{background:var(--sky-honey)}
.bank .ico{width:18px;height:18px;padding:2px;border-radius:50%;background:var(--accent);color:var(--ink);stroke-width:3.5;transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.bank.on .ico{transform:scale(1)}
.night-cap{padding:var(--s2) 0 var(--s5)}
.night-cap .caption{max-width:72ch}
@media (max-width:767px){
  .night-stage{aspect-ratio:9/16}
}
/* night, motion on */
.mo .night-track{height:calc(100vh + 250vh)}
.mo-p .night-track{height:calc(100svh + 130vh)}
.mo .night-frame{position:sticky;top:0;height:100vh;display:block;pointer-events:none}
.mo-p .night-frame{height:100svh}
.mo .night-iris{position:absolute;inset:0;background:var(--sky-navy)}
.mo .night-iris::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:44%;background:linear-gradient(to top,var(--navy-80),var(--navy-0));pointer-events:none}
.mo .night-stage{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);aspect-ratio:16/9;translate:-50% -50%}
.mo-p .night-stage{width:max(100vw,56.25vh);aspect-ratio:9/16;translate:-50% calc(-50% - 12svh)}
.mo-p .night-frame .night-ring{top:calc(var(--nav-h) + 72px)}
.mo .night-beam{display:block;position:absolute;z-index:2;top:0;bottom:0;left:-43px;width:86px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent-0),var(--accent-35) 44%,var(--accent) 46.5% 53.5%,var(--accent-35) 56%,var(--accent-0));transform:translateX(-12vw)}
.mo .night-honey{display:block;position:absolute;z-index:3;inset:0;--t:100%;background:linear-gradient(to bottom,var(--honey-0) var(--t),var(--sky-honey) calc(var(--t) + 150px))}
.mo .night-ring{display:block;position:absolute;z-index:4;left:50%;top:50%;width:48px;height:48px;margin:-24px;color:var(--accent);stroke-width:3px}
.mo .night-ring svg{width:100%;height:100%;overflow:visible}
.mo .night-band{position:absolute;z-index:5;left:0;right:0;bottom:var(--s5);padding:0}
.mo .night-cap{position:absolute;z-index:5;left:0;right:0;bottom:calc(var(--s5) + var(--fs-clock) + var(--s3));padding:0}
.mo-d .night-cap .caption{max-width:min(520px,40vw)}
.mo .is-dawn .night-band,.mo-d .is-dawn .night-cap{--fg:var(--ink);--fg-3:var(--ink-2);--edge:var(--ink);color:var(--ink)}
.night-cap,.night-band{transition:color .4s}
.mo-d .night-copy p{max-width:min(40ch,44vw)}
.mo-d .night{margin-top:-130vh;pointer-events:none}
.mo-d .night-copy{position:sticky;top:0;height:100vh}
.lyr-lit .twinkle{animation:twinkle 5s ease-in-out infinite alternate;animation-play-state:paused}
.night.is-live .twinkle{animation-play-state:running}
@keyframes twinkle{from{opacity:.3}to{opacity:1}}
.mo-p .night-copy{padding-bottom:var(--s4)}
.mo-p .night-band{bottom:var(--s4);gap:var(--s2)}
.mo-p .night-cap{top:calc(var(--nav-h) + var(--s2));left:var(--side);right:var(--side);width:auto;text-align:left}

/* 8 dawn */
.dawn .media img{object-position:50% 60%}
.dawn-copy{position:absolute;z-index:2;left:0;right:0;top:calc(var(--nav-h) + var(--s6))}
.dawn-copy h2{margin-top:var(--s3);color:var(--ink);max-width:14ch}
.dawn-card{position:absolute;z-index:2;left:max(var(--side),(100vw - var(--max))/2);bottom:var(--s6);width:min(560px,calc(100% - 2*var(--side)));padding:28px 30px 30px;background:var(--card);
  border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-md) var(--sh-md) 0 var(--ink)}
.dawn-card p{color:var(--ink-2)}
.dawn-card .btns{margin-top:var(--s3)}
.dawn .scene-cap{color:var(--ink-2);top:calc(var(--nav-h) + var(--s5));bottom:auto;max-width:300px}
html:not(.mo) .dawn{height:auto;max-height:none;min-height:0;overflow:visible}
html:not(.mo) .dawn .media{position:relative;aspect-ratio:16/9}
html:not(.mo) .dawn-copy{position:static;padding:var(--s6) 0 0}
html:not(.mo) .dawn-card{position:static;margin:var(--s4) 0 var(--sec) max(var(--side),(100vw - var(--max))/2);width:calc(100% - 2*var(--side));max-width:560px}
html:not(.mo) .dawn .scene-cap{position:static;padding:12px var(--side) 0;text-align:left;max-width:none;color:var(--ink-2)}
@media (max-width:767px){
  html:not(.mo) .dawn .media{aspect-ratio:2/3}
  .mo .dawn{height:auto;max-height:none;overflow:visible}
  .mo .dawn .media-box{position:relative;height:100svh;overflow:hidden}
  .mo .dawn-card{position:relative;left:auto;bottom:auto;margin:-120px var(--side) 0;width:auto}
  .mo .dawn .scene-cap{position:static;padding:var(--s3) var(--side) var(--s6);text-align:left}
}
.media-box{position:absolute;inset:0;overflow:hidden}
html:not(.mo) .media-box{position:static}

/* 9 closing */
.closing{overflow:hidden;text-align:center}
.closing .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.closing p.body{margin-top:var(--s3);max-width:46ch;font-size:var(--fs-lead);font-weight:500;line-height:1.45}
.closing p.body+p.body{margin-top:var(--s2);font-size:var(--fs-body)}
.closing .btns{justify-content:center}
.mini{display:grid;gap:12px;justify-items:start;margin:var(--s6) auto 0;width:min(360px,100%)}
.mini .msg{margin:0}
.mini .me{justify-self:end}
.teaser{width:100%;margin-top:var(--s8)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s3);text-align:left}
.card{display:flex;flex-direction:column;gap:12px;padding:26px 26px 22px;background:var(--card);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-md) var(--sh-md) 0 var(--ink)}
.card time{font:700 var(--fs-caption)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.card h3{font-size:24px}
.card p{font-size:var(--fs-small);line-height:1.5}
.card .tlink{margin-top:auto;color:var(--ink)}
.closing .wm--xl{margin-top:var(--s8)}
.iris-disc{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--sky-honey);display:none}
@media (max-width:1023px){.cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- homepage: From the Journal (15 Oct 2026; filled by tools/build_inner.py) ---------- */
.jnl .jnl-lead{max-width:60ch;margin-top:var(--s2)}
.jnl-list{display:grid;gap:0 var(--s5);margin:var(--s4) 0 var(--s3);padding:0;list-style:none}
@media (min-width:768px){.jnl-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jnl-list li{padding:var(--s2) 0;border-top:2px solid var(--ink)}
.jnl-list .caption{display:block}