/* ============================================================
   CINEMA LAYER — 3D depth, scroll choreography, bento, wide canvas
   ============================================================ */
:root{
  --wide: min(1620px, 94vw);
  --mid: min(1180px, 92vw);
  --read: 68ch;
  --ease-cine: cubic-bezier(.16,1,.3,1);
}

/* ---------- THE STAGE: real 3D perspective on the document ---------- */
.stage{perspective:1400px;perspective-origin:50% 40%;transform-style:preserve-3d}

/* ---------- WIDE CANVAS ---------- */
.wide{width:var(--wide);margin-inline:auto}
.mid{width:var(--mid);margin-inline:auto}
/* long-form text keeps a readable measure INSIDE a wide stage */
.pillar-wrap, .cx-wrap, .mm-wrap{max-width:var(--wide)!important}
.pillar-wrap > p, .pillar-wrap > h2, .pillar-wrap > h3,
.pillar-wrap > .pillar-faq, .pillar-wrap > header{max-width:var(--read);margin-inline:auto}
.pillar-wrap > header{max-width:min(900px,92vw)}

/* ============ BENTO ============ */
/* Balanced on a 12-col grid. Every span-cycle CLOSES its rows exactly —
   no orphan holes, no ragged edges. Cycle of 7: (8+4) (4+4+4) (6+6) = 12,12,12 */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:1fr;              /* equal-height rows */
  grid-auto-flow:dense;            /* backfill any gap automatically */
  gap:1.1rem;
  align-items:stretch;
  width:var(--wide);
  margin:var(--s-4) auto var(--s-5);
  transform-style:preserve-3d;
}
.bento > *{grid-column:span 4;min-width:0}   /* min-width:0 = no overflow blowouts */

.bento > *:nth-child(7n+1){grid-column:span 8}
.bento > *:nth-child(7n+2){grid-column:span 4}
.bento > *:nth-child(7n+3){grid-column:span 4}
.bento > *:nth-child(7n+4){grid-column:span 4}
.bento > *:nth-child(7n+5){grid-column:span 4}
.bento > *:nth-child(7n+6){grid-column:span 6}
.bento > *:nth-child(7n+7){grid-column:span 6}

/* A lone trailing tile always fills its row rather than stranding a gap */
.bento > *:last-child:nth-child(7n+1){grid-column:span 12}
.bento > *:last-child:nth-child(7n+6){grid-column:span 12}
.bento > *:last-child:nth-child(7n+2){grid-column:span 4}

@media (max-width:1180px){
  .bento{grid-template-columns:repeat(6,1fr);gap:1rem}
  .bento > *,
  .bento > *:nth-child(7n+1),.bento > *:nth-child(7n+2),.bento > *:nth-child(7n+3),
  .bento > *:nth-child(7n+4),.bento > *:nth-child(7n+5),.bento > *:nth-child(7n+6),
  .bento > *:nth-child(7n+7),.bento > *:last-child:nth-child(7n+1){grid-column:span 3}
  .bento > *:nth-child(7n+1){grid-column:span 6}
  .bento > *:last-child:nth-child(odd){grid-column:span 6}
}
@media (max-width:680px){
  .bento{grid-template-columns:1fr;gap:.85rem;grid-auto-rows:auto;margin:var(--s-3) auto var(--s-4)}
  .bento > *,.bento > *:nth-child(n){grid-column:span 1!important}
}

/* every bento tile is a dimensional OBJECT, never a flat cell */
.bento .pillar-card, .tile3d{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;                       /* fill the equal-height row */
  min-height:clamp(180px,17vw,240px);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--ac,#8DF250) 12%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(16,22,40,.96), rgba(6,8,16,.92));
  border:1px solid rgba(238,243,233,.11);
  border-radius:24px;
  padding:clamp(1.3rem,1.7vw,1.9rem);
  gap:.7rem;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-cine), box-shadow .7s var(--ease-cine), border-color .5s;
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 18px 44px rgba(0,0,0,.42);
  margin:0;
}
/* rim light — the "lifted off the page" tell */
.bento .pillar-card::before, .tile3d::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.09), transparent 34%);
  opacity:.8;
}
/* the specular sweep that follows the cursor */
.bento .pillar-card::after, .tile3d::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--ac,#8DF250) 26%, transparent), transparent 60%);
  transition:opacity .5s;
}
.bento .pillar-card:hover::after, .tile3d:hover::after{opacity:1}
.bento .pillar-card:hover, .tile3d:hover{
  border-color:color-mix(in srgb, var(--ac,#8DF250) 55%, transparent);
  box-shadow:0 2px 0 rgba(255,255,255,.08) inset,
             0 40px 80px rgba(0,0,0,.55),
             0 0 60px color-mix(in srgb, var(--ac,#8DF250) 20%, transparent);
}
/* content floats ABOVE the tile surface in Z */
.bento .pillar-card > *, .tile3d > *{position:relative;z-index:2;transform:translateZ(22px)}
.bento .pillar-card h3, .tile3d h3{
  font-family:var(--font-display);font-weight:800;font-size:clamp(1.1rem,1.55vw,1.45rem);
  letter-spacing:-.02em;margin:0 0 .1rem;color:var(--ink);line-height:1.15;
  text-wrap:balance;                 /* no orphan words in tile headings */
}
.bento > *:nth-child(7n+1) h3{font-size:clamp(1.4rem,2.2vw,2rem)}
.bento .pillar-card > *:first-child{transform:translateZ(34px)}
.bento .pillar-card p{color:var(--ink-dim);line-height:1.65;font-size:.92rem;margin:0;text-wrap:pretty}
.bento .pillar-card p + p{margin-top:.6rem}
.bento .pillar-card b{color:var(--ink)}
/* illustration always anchors the tile floor, at one consistent optical size */
.bento .pillar-card .illo{
  margin-top:auto;padding-top:1.1rem;
  width:min(100%,240px);height:auto;
  align-self:center;transform:translateZ(46px);
  opacity:.92;
}
.bento > *:nth-child(7n+1) .illo{width:min(100%,300px)}

/* ---------- SCROLL REVEAL: cards fly in from depth ---------- */
[data-cine]{opacity:0;will-change:transform,opacity}
[data-cine="up"]{transform:translateY(46px) translateZ(-90px) rotateX(7deg)}
[data-cine="left"]{transform:translateX(-56px) translateZ(-70px) rotateY(9deg)}
[data-cine="right"]{transform:translateX(56px) translateZ(-70px) rotateY(-9deg)}
[data-cine="zoom"]{transform:scale(.9) translateZ(-140px)}
[data-cine].in{opacity:1;transform:none;transition:opacity .9s var(--ease-cine), transform 1.05s var(--ease-cine)}
[data-cine].in{transition-delay:var(--d,0ms)}

/* ---------- CINEMATIC HERO: layered depth, camera push ---------- */
.cine-hero{
  position:relative;min-height:clamp(420px,66vh,720px);
  display:flex;align-items:center;justify-content:center;
  width:var(--wide);margin:0 auto var(--s-5);
  transform-style:preserve-3d;
}
.cine-layer{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.cine-layer svg{width:100%;height:100%;overflow:visible}
.ch-back{transform:translateZ(-260px) scale(1.28);opacity:.32;filter:blur(2px)}
.ch-mid{transform:translateZ(-120px) scale(1.12);opacity:.6}
.ch-fore{transform:translateZ(60px)}
.cine-copy{position:relative;z-index:5;text-align:center;transform:translateZ(90px);max-width:min(880px,92vw)}
.cine-copy h1{font-size:clamp(2.6rem,7.5vw,6rem);line-height:.98;letter-spacing:-.035em;margin-bottom:1rem}
.cine-copy .meme-answer, .cine-copy .pillar-lead{margin-inline:auto}

/* ---------- PINNED SCENE (scroll-scrubbed) ---------- */
.pin-scene{position:relative}
.pin-inner{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;transform-style:preserve-3d}

/* ---------- HORIZONTAL RAIL (the era journey / filmstrip) ---------- */
.rail-scene{position:relative}
.rail-inner{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.rail-track{display:flex;gap:2.4rem;padding-inline:6vw;will-change:transform;transform-style:preserve-3d}
.rail-card{
  flex:0 0 min(560px,80vw);
  background:linear-gradient(160deg, rgba(16,22,40,.96), rgba(6,8,16,.94));
  border:1px solid rgba(238,243,233,.12);border-radius:28px;
  padding:2rem 2.2rem;position:relative;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  transition:transform .6s var(--ease-cine), border-color .5s, box-shadow .6s;
  transform-style:preserve-3d;
}
.rail-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--ac,#8DF250) 16%, transparent), transparent 62%)}
.rail-card.focus{border-color:color-mix(in srgb, var(--ac,#8DF250) 60%, transparent);
  box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 70px color-mix(in srgb, var(--ac,#8DF250) 22%, transparent)}
.rail-num{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ac,#8DF250)}
.rail-card h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.025em;margin:.4rem 0 .8rem;line-height:1.02}
.rail-card p{color:var(--ink-dim);line-height:1.7;font-size:.95rem;margin-bottom:.5rem}
.rail-card .illo{max-width:180px;position:absolute;right:1.4rem;bottom:1.2rem;opacity:.5}
.rail-prog{position:absolute;left:6vw;right:6vw;bottom:7vh;height:2px;background:rgba(238,243,233,.12);border-radius:4px;z-index:6}
.rail-prog i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--lime),var(--cyan));box-shadow:0 0 14px var(--lime)}
.rail-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:3.4vh;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);z-index:6}
@media (max-width:680px){
  .rail-inner{height:auto;position:static;display:block}
  .rail-track{flex-direction:column;transform:none!important;padding:0;gap:1rem}
  .rail-card{flex:1 1 auto;width:100%}
  .rail-card .illo{position:static;margin:1rem auto 0;opacity:.8}
  .rail-prog,.rail-hint{display:none}
}

/* ---------- PARALLAX DEPTH LAYERS ---------- */
[data-plx]{will-change:transform}

/* ---------- SPECIMEN FILMSTRIP (horizontal, draggable) ---------- */
.strip{display:flex;gap:1rem;overflow-x:auto;padding:1rem 0 1.4rem;scroll-snap-type:x mandatory;
  scrollbar-width:thin;width:var(--wide);margin:var(--s-3) auto;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{height:6px}
.strip::-webkit-scrollbar-thumb{background:rgba(141,242,80,.4);border-radius:6px}
.strip-card{flex:0 0 230px;scroll-snap-align:center;background:var(--jar);border:1px solid rgba(238,243,233,.12);
  border-left:4px solid var(--ac,#8DF250);border-radius:20px;padding:1.1rem;text-decoration:none;color:var(--ink);
  transition:transform .5s var(--ease-cine),box-shadow .5s;transform-style:preserve-3d}
.strip-card:hover{transform:translateY(-8px) rotateY(-6deg) scale(1.03);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.strip-card .illo, .strip-card svg{width:100%;max-width:120px;margin:0 auto .6rem;display:block}
.strip-k{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac,#8DF250)}
.strip-n{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;margin-top:.2rem}

/* ---------- SCROLL PROGRESS BEAM ---------- */
.beam{position:fixed;top:0;left:0;height:2px;width:0;z-index:85;
  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--plasma));
  box-shadow:0 0 16px var(--lime);transition:width .12s linear}

/* ---------- SECTION DEPTH: content pulls back as it exits ---------- */
.depth-out{transition:transform .6s var(--ease-cine), opacity .6s}

/* ---------- REDUCED MOTION / CALM ---------- */
@media (prefers-reduced-motion:reduce){
  [data-cine]{opacity:1!important;transform:none!important}
  .rail-inner{height:auto;position:static;display:block}
  .rail-track{flex-direction:column;transform:none!important}
  .pin-inner{position:static;height:auto}
  .stage{perspective:none}
  .bento .pillar-card > *, .tile3d > *{transform:none}
}
html.calm-mode [data-cine]{opacity:1!important;transform:none!important}
html.calm-mode .stage{perspective:none}
html.calm-mode .rail-inner{position:static;height:auto;display:block}
html.calm-mode .rail-track{flex-direction:column;transform:none!important}
html.calm-mode .beam{display:none}

/* ---------- HUB BENTO: same balanced closing cycle ---------- */
.field-station.bento{width:var(--wide);margin-inline:auto}
.field-station.bento .fs-tile{
  grid-column:span 4;
  display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;min-height:clamp(170px,15vw,215px);
  border-radius:24px;padding:clamp(1.2rem,1.6vw,1.7rem);
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-cine), box-shadow .7s var(--ease-cine), border-color .5s;
}
/* .big is decorative only now — the cycle governs the layout, so rows always close */
.field-station.bento .fs-tile.big{grid-column:span 4}
.field-station.bento .fs-tile:nth-child(7n+1){grid-column:span 8;min-height:clamp(220px,19vw,280px)}
.field-station.bento .fs-tile:nth-child(7n+2),
.field-station.bento .fs-tile:nth-child(7n+3),
.field-station.bento .fs-tile:nth-child(7n+4),
.field-station.bento .fs-tile:nth-child(7n+5){grid-column:span 4}
.field-station.bento .fs-tile:nth-child(7n+6),
.field-station.bento .fs-tile:nth-child(7n+7){grid-column:span 6}
.field-station.bento .fs-tile:last-child:nth-child(7n+1){grid-column:span 12}
.field-station.bento .fs-tile:last-child:nth-child(7n+6){grid-column:span 12}

.field-station.bento .fs-tile h3{font-size:clamp(1.05rem,1.5vw,1.5rem);line-height:1.15;margin:.35rem 0 .3rem;text-wrap:balance}
.field-station.bento .fs-tile:nth-child(7n+1) h3{font-size:clamp(1.5rem,2.4vw,2.3rem)}
.field-station.bento .fs-tile p{font-size:.88rem;line-height:1.6;margin:0;text-wrap:pretty}
.field-station.bento .fs-tile .fs-k{margin-bottom:.1rem}
.field-station.bento .fs-tile .fs-go{margin-top:.85rem}

@media (max-width:1180px){
  .field-station.bento .fs-tile,
  .field-station.bento .fs-tile.big,
  .field-station.bento .fs-tile:nth-child(7n+2),
  .field-station.bento .fs-tile:nth-child(7n+3),
  .field-station.bento .fs-tile:nth-child(7n+4),
  .field-station.bento .fs-tile:nth-child(7n+5),
  .field-station.bento .fs-tile:nth-child(7n+6),
  .field-station.bento .fs-tile:nth-child(7n+7){grid-column:span 3}
  .field-station.bento .fs-tile:nth-child(7n+1){grid-column:span 6}
  .field-station.bento .fs-tile:last-child:nth-child(odd){grid-column:span 6}
}
@media (max-width:680px){
  .field-station.bento .fs-tile,
  .field-station.bento .fs-tile:nth-child(n){grid-column:span 1!important;min-height:0}
}

/* codex grid gets the wide treatment too */
.cx-grid{width:100%}
.cx-wrap{max-width:var(--wide)}

/* ---------- CODEX: dimensional entries in a wide two-column wall ---------- */
@media (min-width:1000px){
  .cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
}
.cx-e.tile3d{border-radius:20px;padding:1.1rem 1.3rem;--ac:var(--ec)}
.cx-e.tile3d > *{transform:translateZ(16px)}
.cx-e.tile3d:hover{transform:translateY(-5px) translateZ(10px)}
.cx-tools{width:100%}

/* ============================================================
   BALANCE & POLISH PASS — one rhythm, everywhere
   ============================================================ */

/* ---------- 1. ONE VERTICAL RHYTHM ---------- */
:root{
  --gutter: clamp(1.2rem, 4vw, 3rem);
  --nav-h: 66px;
}
body > #nav-root ~ article,
body > #nav-root ~ main{ padding-top: calc(var(--nav-h) + var(--s-3)); }

/* every top-level content wrapper shares one gutter + one rhythm */
.pillar-wrap, .cx-wrap, .mm-wrap, .bt-wrap, .sc-wrap, .fg-wrap, .meme-wrap{
  padding-inline: var(--gutter);
  padding-bottom: var(--s-6);
}

/* consistent heading rhythm — space ABOVE a heading always beats space below it */
.pillar-wrap h2, .cx-wrap h2, .mm-wrap h2{
  margin: var(--s-5) auto var(--s-2);
  line-height:1.08; letter-spacing:-.02em; text-wrap:balance;
}
.pillar-wrap h2:first-of-type{ margin-top: var(--s-4); }
.pillar-wrap h3{ margin: var(--s-3) auto var(--s-1); }
.pillar-wrap > p{ margin-bottom: var(--s-2); line-height:1.75; text-wrap:pretty; }
.pillar-wrap > p:last-of-type{ margin-bottom: var(--s-4); }

/* headers: balanced, never cramped, never floating */
.pillar-wrap > header, .meme-hero{
  padding-block: var(--s-4) var(--s-2);
  text-align:center;
}
.pillar-wrap > header .specimen-tag, .meme-hero .specimen-tag{ margin-bottom: var(--s-2); }
.pillar-wrap > header h1, .meme-hero h1{ margin-bottom: var(--s-3); text-wrap:balance; }
.pillar-lead, .meme-answer{
  margin-inline:auto; margin-bottom:0;
  max-width: 62ch; line-height:1.75; text-wrap:pretty;
}

/* ---------- 2. TABLES: balanced, breathing, scrollable ---------- */
.cmp{
  width:min(100%, var(--wide)); margin: var(--s-3) auto var(--s-4);
  border-collapse:separate; border-spacing:0;
  background:linear-gradient(160deg, rgba(16,22,40,.7), rgba(6,8,16,.6));
  border:1px solid rgba(238,243,233,.1); border-radius:20px; overflow:hidden;
}
.cmp th, .cmp td{ padding: .95rem 1.15rem; vertical-align:top; line-height:1.6; }
.cmp th{
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lime); text-align:left; background:rgba(141,242,80,.06);
  border-bottom:1px solid rgba(141,242,80,.22);
}
.cmp td{ border-bottom:1px solid rgba(238,243,233,.07); font-size:.92rem; color:var(--ink-dim); }
.cmp tr:last-child td{ border-bottom:none; }
.cmp tr:hover td{ background:rgba(141,242,80,.035); }
.cmp td strong, .cmp td b{ color:var(--ink); }
@media (max-width:680px){
  .cmp{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cmp th, .cmp td{ padding:.75rem .85rem; font-size:.85rem; white-space:nowrap; }
  .cmp td:last-child{ white-space:normal; min-width:200px; }
}

/* ---------- 3. FAQ: even, calm, aligned ---------- */
.pillar-faq{ margin: var(--s-5) auto var(--s-4); max-width: min(860px, 92vw); }
.pillar-faq h2{ margin-bottom: var(--s-2); }
.pillar-faq details{
  border:1px solid rgba(238,243,233,.1); border-radius:16px;
  padding:0; margin-bottom:.6rem; overflow:hidden;
  background:rgba(12,17,32,.6);
  transition:border-color .4s, background .4s;
}
.pillar-faq details[open]{ border-color:rgba(141,242,80,.35); background:rgba(12,17,32,.9); }
.pillar-faq summary{ padding:1.05rem 1.3rem; cursor:pointer; font-weight:600; line-height:1.5; }
.pillar-faq details > *:not(summary){ padding:0 1.3rem 1.15rem; margin:0; color:var(--ink-dim); line-height:1.75; }

/* ---------- 4. RAIL: balanced card interiors ---------- */
.rail-card{ padding: clamp(1.6rem, 2.4vw, 2.4rem); min-height: clamp(340px, 46vh, 440px); display:flex; flex-direction:column; }
.rail-card h3{ margin:.5rem 0 1rem; text-wrap:balance; }
.rail-card p{ margin-bottom:.75rem; }
.rail-card p:last-of-type{ margin-bottom:0; }
.rail-card .illo{ max-width:150px; opacity:.42; right:1.6rem; bottom:1.4rem; }
.rail-track{ gap: clamp(1.4rem, 2.4vw, 2.6rem); align-items:stretch; }

/* ---------- 5. FIGURES & ILLUSTRATIONS: one consistent frame ---------- */
.illo-fig{ margin: var(--s-4) auto; width:min(100%, 720px); padding: clamp(1.2rem,1.8vw,1.7rem); }
.illo-fig .illo{ margin-inline:auto; }
.illo-chart{ margin: var(--s-4) auto; width:min(100%, 640px); }
.illo-divider{ margin: var(--s-5) auto; width:min(100%, var(--read)); }

/* ---------- 6. FOOTER & SECTION CLOSE ---------- */
.pfoot{ margin-top: var(--s-6); padding-block: var(--s-4) var(--s-3); border-top:1px solid rgba(238,243,233,.08); }
.pfoot .wrap{ width:var(--wide); margin-inline:auto; padding-inline:0; }
.pfoot .legal{ max-width:70ch; margin-top:.6rem; line-height:1.65; }

/* ---------- 7. SPECIMEN PAGES: balance the body column ---------- */
.meme-body{ width:min(100%, var(--read)); margin-inline:auto; padding-block: var(--s-3) var(--s-5); }
.meme-body h2{ margin: var(--s-5) 0 var(--s-2); }
.meme-body h2:first-child{ margin-top: var(--s-3); }
.meme-body p{ margin-bottom: var(--s-2); line-height:1.8; text-wrap:pretty; }
.meme-related{ width:min(100%, var(--wide)); margin: var(--s-5) auto 0; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.illo-fig.hab{ width:min(100%, 560px); }

/* ---------- 8. TOOLS: even panels ---------- */
.mm-panel, .bt-arena, .fg-out, .sc-grade{ margin-block: var(--s-3); }
.mm-slider{ margin-bottom: 1.5rem; }
.mm-slider:last-child{ margin-bottom: 1.9rem; }
.cx-tools{ margin-block: var(--s-3) var(--s-3); }
.cx-grid{ gap:1rem; }

/* ---------- 9. TYPE COLOUR BALANCE ---------- */
h1,h2,h3{ color:var(--ink); }
p{ color:var(--ink-dim); }
.pillar-wrap > p strong, .meme-body p strong{ color:var(--ink); font-weight:600; }
a{ text-underline-offset:3px; }

/* ---------- 10. NO ORPHANS, NO OVERFLOW ---------- */
h1,h2,h3,.rail-card h3,.fs-tile h3{ overflow-wrap:break-word; }
img,svg,table,pre{ max-width:100%; }
.bento > *, .field-station.bento > *{ overflow:hidden; }

/* ---------- SOLVED BENTO: JS assigns spans; nth-child must not fight it ---------- */
.bento.bento--solved > *:nth-child(n){ grid-column: unset; }
.bento.bento--solved > *[data-span="12"]{grid-column:span 12}
.bento.bento--solved > *[data-span="8"]{grid-column:span 8}
.bento.bento--solved > *[data-span="7"]{grid-column:span 7}
.bento.bento--solved > *[data-span="6"]{grid-column:span 6}
.bento.bento--solved > *[data-span="5"]{grid-column:span 5}
.bento.bento--solved > *[data-span="4"]{grid-column:span 4}
.bento.bento--solved > *[data-span="3"]{grid-column:span 3}
/* type scales with the tile's actual width, so big tiles genuinely read as big */
.bento.bento--solved > *[data-span="8"] h3,
.bento.bento--solved > *[data-span="7"] h3{font-size:clamp(1.45rem,2.2vw,2.1rem)}
.bento.bento--solved > *[data-span="12"] h3{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.bento.bento--solved > *[data-span="8"] .illo,
.bento.bento--solved > *[data-span="12"] .illo{width:min(100%,300px)}
.bento.bento--solved > *[data-span="3"] h3{font-size:clamp(1rem,1.35vw,1.25rem)}
.bento.bento--solved > *[data-span="3"] .illo{width:min(100%,180px)}
/* mobile: solver spans must collapse */
@media (max-width:1180px){
  .bento.bento--solved > *[data-span]{grid-column:span 3}
  .bento.bento--solved > *[data-span="8"],
  .bento.bento--solved > *[data-span="7"],
  .bento.bento--solved > *[data-span="12"]{grid-column:span 6}
}
@media (max-width:680px){
  .bento.bento--solved > *[data-span]{grid-column:span 1!important}
}

/* hub: solver governs layout; .big only carries emphasis, never span */
.field-station.bento.bento--solved .fs-tile:nth-child(n){grid-column:unset}
.field-station.bento.bento--solved .fs-tile[data-span="12"]{grid-column:span 12}
.field-station.bento.bento--solved .fs-tile[data-span="8"]{grid-column:span 8}
.field-station.bento.bento--solved .fs-tile[data-span="7"]{grid-column:span 7}
.field-station.bento.bento--solved .fs-tile[data-span="6"]{grid-column:span 6}
.field-station.bento.bento--solved .fs-tile[data-span="5"]{grid-column:span 5}
.field-station.bento.bento--solved .fs-tile[data-span="4"]{grid-column:span 4}
.field-station.bento.bento--solved .fs-tile[data-span="3"]{grid-column:span 3}
.field-station.bento.bento--solved .fs-tile[data-span="8"] h3,
.field-station.bento.bento--solved .fs-tile[data-span="7"] h3,
.field-station.bento.bento--solved .fs-tile[data-span="12"] h3{font-size:clamp(1.5rem,2.4vw,2.3rem)}
.field-station.bento.bento--solved .fs-tile[data-span="8"],
.field-station.bento.bento--solved .fs-tile[data-span="12"]{min-height:clamp(220px,19vw,280px)}
.field-station.bento.bento--solved .fs-tile[data-span="3"] h3{font-size:clamp(1rem,1.3vw,1.2rem)}
.field-station.bento.bento--solved .fs-tile[data-span="3"] .tile-art{width:56px}
@media (max-width:1180px){
  .field-station.bento.bento--solved .fs-tile[data-span]{grid-column:span 3}
  .field-station.bento.bento--solved .fs-tile[data-span="8"],
  .field-station.bento.bento--solved .fs-tile[data-span="7"],
  .field-station.bento.bento--solved .fs-tile[data-span="12"]{grid-column:span 6}
}
@media (max-width:680px){
  .field-station.bento.bento--solved .fs-tile[data-span]{grid-column:span 1!important}
}

/* ============================================================
   FIX PASS — dead space in tiles, heading alignment, cascade wins
   ============================================================ */

/* ---------- A. HEADINGS: sentence case, aligned to the text column ---------- */
.pillar-wrap h1, .pillar-wrap h2, .pillar-wrap h3,
.meme-body h2, .meme-body h3, .meme-hero h1,
.cx-wrap h1, .cx-wrap h2, .mm-wrap h1, .mm-wrap h2,
.bento h3, .rail-card h3, .fs-tile h3{
  text-transform:none !important;
  font-weight:800;
  letter-spacing:-.02em;
}
/* headings share the EXACT same column as the prose beneath them */
.pillar-wrap > h2, .pillar-wrap > h3{
  width:min(100%, var(--read));
  margin-inline:auto;
  text-align:left;
}
.pillar-wrap > p, .pillar-wrap > ul, .pillar-wrap > ol{
  width:min(100%, var(--read));
  margin-inline:auto;
}
/* the lab-voice labels stay shouting — that's deliberate */
.specimen-tag, .fs-k, .cx-tag, .rail-num, .strip-k,
.pillar-faq summary + *, .mm-lab i, .fg-latin{ text-transform:none; }
.specimen-tag, .fs-k, .rail-num, .strip-k, .cx-y{ text-transform:uppercase !important; }

/* ---------- B. THE DEAD-SPACE FIX ---------- */
/* Rows no longer force every tile to the tallest sibling's height.
   Tiles size to their content; the grid stays tidy via dense auto-flow. */
.bento{
  grid-auto-rows:auto;          /* was 1fr — THAT was the dead space */
  align-items:start;            /* tiles hug their content */
}
.bento .pillar-card, .tile3d{
  height:auto;                  /* was 100% — no more stretching to fill */
  min-height:0;
  justify-content:flex-start;
}
/* the illustration no longer gets pushed to a far-away floor */
.bento .pillar-card .illo{
  margin-top:1rem;              /* was margin-top:auto — that created the gap */
  padding-top:0;
}
/* short tiles keep a sensible floor so they don't look like chips */
.bento .pillar-card{ min-height:clamp(150px,12vw,190px); }
.bento.bento--solved > *[data-span="8"],
.bento.bento--solved > *[data-span="12"]{ min-height:clamp(190px,15vw,240px); }

/* hub tiles: same treatment */
.field-station.bento{ grid-auto-rows:auto; align-items:start; }
.field-station.bento .fs-tile{ height:auto; min-height:clamp(160px,13vw,200px); }

/* ---------- C. TILE INTERNALS: text that fills, art that anchors ---------- */
.bento .pillar-card p{ font-size:.93rem; line-height:1.68; }
.bento .pillar-card > *:last-child{ margin-bottom:0; }

/* ============ VISUAL PACK II — components ============ */

/* --- stat callouts --- */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;
  width:min(100%,var(--wide));margin:var(--s-4) auto}
.statcard{
  position:relative;text-align:center;padding:1.6rem 1.1rem;border-radius:20px;
  background:linear-gradient(160deg,rgba(16,22,40,.95),rgba(6,8,16,.9));
  border:1px solid rgba(238,243,233,.1);border-top:3px solid var(--sc,#8DF250);
  overflow:hidden;transition:transform .6s var(--ease-cine),box-shadow .6s;
}
.statcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--sc,#8DF250) 16%, transparent), transparent 70%)}
.statcard:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 40px color-mix(in srgb,var(--sc,#8DF250) 18%,transparent)}
.statcard b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.4rem);
  line-height:1;color:var(--sc,#8DF250);text-shadow:0 0 34px var(--sc,#8DF250);letter-spacing:-.03em}
.statcard span{display:block;margin-top:.5rem;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);line-height:1.5}

/* --- pull quotes --- */
.pullquote{
  position:relative;width:min(100%,760px);margin:var(--s-4) auto;
  padding:1.8rem 2rem 1.6rem 3.6rem;border-radius:22px;
  background:linear-gradient(140deg,rgba(16,22,40,.85),rgba(6,8,16,.7));
  border:1px solid rgba(238,243,233,.1);border-left:4px solid var(--qc,#8DF250);
}
.pq-mark{position:absolute;left:1.3rem;top:1.7rem;width:26px;height:auto}
.pullquote p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.9vw,1.5rem);
  line-height:1.45;color:var(--ink);margin:0;letter-spacing:-.01em;text-wrap:pretty}
.pullquote cite{display:block;margin-top:.9rem;font-family:var(--font-mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--qc,#8DF250);font-style:normal}

/* --- charts --- */
.illo-donut{max-width:230px;margin:0 auto}
.illo-bars{max-width:600px;margin:0 auto}
.illo-flow{max-width:780px;margin:0 auto}
.illo-timeline{max-width:800px;margin:0 auto}
.illo-fig:has(.illo-timeline),.illo-fig:has(.illo-flow),.illo-fig:has(.illo-bars){width:min(100%,860px)}

/* legend for the donut */
.chart-legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;justify-content:center;margin-top:1rem}
.chart-legend span{display:flex;align-items:center;gap:.4rem;font-family:var(--font-mono);
  font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.chart-legend i{width:9px;height:9px;border-radius:3px;background:var(--lc);display:inline-block}

/* split figure: chart beside prose, uses the full width */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center;
  width:min(100%,var(--wide));margin:var(--s-5) auto}
.split > div:last-child p{max-width:52ch}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:1.4rem}}

/* ============================================================
   SECTION HEADERS — centred, designed, sharing the text column
   (fixes headings hanging at the container edge while body sat centred)
   ============================================================ */

/* The shared editorial column. Headings and prose now occupy the SAME
   centred column — and the headings are centred within it, deliberately. */
.pillar-wrap > h2,
.pillar-wrap > h3,
.meme-body > h2,
.meme-body > h3,
.cx-wrap > h2,
.mm-wrap > h2,
.mm-wrap > section > h2{
  width:min(100%, var(--read));
  margin-inline:auto;
  text-align:center;
  text-wrap:balance;
  position:relative;
}

/* h2 gets the full treatment: centred, with a lit rule beneath it */
.pillar-wrap > h2,
.meme-body > h2,
.cx-wrap > h2,
.mm-wrap > h2,
.mm-wrap > section > h2{
  margin-top:var(--s-5);
  margin-bottom:var(--s-3);
  padding-bottom:1.1rem;
  font-size:clamp(1.7rem,3.2vw,2.6rem);
  line-height:1.1;
}
.pillar-wrap > h2::after,
.meme-body > h2::after,
.cx-wrap > h2::after,
.mm-wrap > h2::after,
.mm-wrap > section > h2::after{
  content:"";
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--lime), transparent);
  box-shadow:0 0 14px rgba(141,242,80,.55);
}
/* a faint centred spore above each section title — the lab's own punctuation */
.pillar-wrap > h2::before,
.meme-body > h2::before{
  content:"";
  position:absolute;left:50%;top:-1.15rem;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 12px var(--lime), 0 0 26px rgba(141,242,80,.5);
  opacity:.85;
}
/* h3 is centred but quieter — no rule, no spore */
.pillar-wrap > h3,
.meme-body > h3{
  margin-top:var(--s-3);
  margin-bottom:var(--s-1);
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  color:var(--ink);
}

/* Body copy stays LEFT-aligned inside the same centred column —
   centred prose is hard to read; centred headings over it is the editorial move. */
.pillar-wrap > p,
.pillar-wrap > ul,
.pillar-wrap > ol,
.meme-body > p,
.meme-body > ul{
  width:min(100%, var(--read));
  margin-inline:auto;
  text-align:left;
}

/* The lead paragraph and hero are centred as a block AND as text */
.pillar-lead, .meme-answer{ text-align:center; max-width:64ch; }

/* Headings INSIDE cards, tiles, rails and figures are never centred by this —
   they stay left where they belong. */
.bento h3, .tile3d h3, .rail-card h3, .fs-tile h3,
.pillar-card h3, .statcard span, .illo-fig figcaption{
  width:auto; margin-inline:0; text-align:left;
}
.pillar-card h3::before, .pillar-card h3::after,
.bento h3::before, .bento h3::after{ content:none; }
.illo-fig figcaption{ text-align:center; }

/* FAQ heading matches the section rhythm */
.pillar-faq > h2{ text-align:center; }

@media (max-width:680px){
  .pillar-wrap > h2::before, .meme-body > h2::before{ top:-.9rem; }
  .pillar-wrap > h2, .meme-body > h2{ margin-top:var(--s-4); padding-bottom:.9rem; }
}

/* ============ UNIVERSAL VISUAL LAYER ============ */

/* --- hero emblem: a living organism orbiting behind every page title --- */
.hero-emblem{
  position:relative;width:clamp(120px,15vw,180px);height:clamp(120px,15vw,180px);
  margin:0 auto var(--s-2);pointer-events:none;
}
.he-rings, .he-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.he-rings svg{width:100%;height:100%}
.he-art{padding:16%}
.he-art svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 0 26px color-mix(in srgb, var(--ec,#8DF250) 55%, transparent));
  animation:heFloat 8s ease-in-out infinite}
@keyframes heFloat{50%{transform:translateY(-8px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.he-art svg{animation:none}}
html.calm-mode .he-art svg{animation:none}

/* --- meme gallery on specimen pages --- */
.meme-gallery{width:min(100%,var(--wide));margin:var(--s-6) auto var(--s-4)}
.meme-gallery h2{width:min(100%,var(--read));margin:0 auto var(--s-2);text-align:center;
  font-size:clamp(1.7rem,3.2vw,2.6rem);padding-bottom:1.1rem;position:relative}
.meme-gallery h2::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);
  box-shadow:0 0 14px rgba(141,242,80,.55)}
.mg-lead{width:min(100%,var(--read));margin:0 auto var(--s-3);text-align:center;color:var(--ink-dim);line-height:1.7}
.mg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media (max-width:820px){.mg-grid{grid-template-columns:1fr}}
.mg-grid .illo-fig{width:100%;margin:0;padding:1rem}
.illo.ma{border-radius:12px;overflow:hidden;width:100%;height:auto}
.illo-fig.vit{width:min(100%,420px);padding:1.1rem 1.3rem}
.illo-fig.vit .illo{max-width:360px}

/* meme-art frames get a subtle scanline so they read as "rendered by the lab" */
.illo-fig:has(.ma)::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

/* ---------- TAXONOMY: RADIAL CLADOGRAM ---------- */
.tx-head{width:min(100%,var(--read));margin:0 auto;text-align:center;padding-top:var(--s-4)}
.tx-stage{width:min(100%,1120px);margin:var(--s-3) auto var(--s-5)}
.tx-legend{width:min(100%,var(--wide));margin:0 auto var(--s-2);display:flex;gap:1.2rem;flex-wrap:wrap;
  justify-content:center;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-dim)}
.tx-scroll::-webkit-scrollbar{height:8px;width:8px}
.tx-scroll::-webkit-scrollbar-thumb{background:rgba(141,242,80,.4);border-radius:8px}

/* tree typography */
.tx-root-label{font-family:var(--font-display);font-weight:800;font-size:19px;fill:#8DF250}
.tx-root-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;fill:#8A93A6;text-transform:uppercase}
.tx-phy-label{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:-.01em}
.tx-leaf-label{font-family:var(--font-body);font-weight:500;font-size:11.5px;fill:#AEB7C4;
  transition:fill .25s, font-weight .25s}
.tx-leaf:hover .tx-leaf-label,.tx-leaf:focus .tx-leaf-label{fill:#EEF3E9;font-weight:700}
.tx-leaf{cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.tx-leaf:hover circle:first-child{opacity:.4}
.tx-leaf:focus{outline:none}
.tx-leaf:focus circle:nth-child(2){stroke:#8DF250;stroke-width:3}

/* the lit branch — traces the whole lineage on hover */
.tx-link{transition:opacity .3s, stroke-width .3s}
.tx-link.lit{opacity:1 !important;stroke-width:2.6 !important;filter:drop-shadow(0 0 6px currentColor)}

.tx-scroll-hint{text-align:center;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-dim);margin-top:.9rem;opacity:.7}

@media (max-width:820px){
  .tx-leaf-label{font-size:10px}
  .tx-phy-label{font-size:11px}
}

/* ============================================================
   PRE-LAUNCH: DEVICE OPTIMISATION — phones, tablets, desktop, 4K
   ============================================================ */

/* ---------- 0. GLOBAL SAFETY: never allow horizontal scroll ---------- */
html,body{max-width:100%;overflow-x:hidden}
*{min-width:0}
img,svg,video,canvas,table,pre,iframe{max-width:100%}

/* ---------- 1. TOUCH TARGETS: 44px minimum on coarse pointers ---------- */
@media (pointer:coarse){
  .pnav .links a, .pnav .dd > button, .pnav .menu-btn,
  .btn, .cx-f, .sv-tb, .fs-go, button, .jr-chip, .calm-btn,
  summary, .strip-card, .tab, .mm-run, .bt-go, .fg-go, .sc-actions .btn{
    min-height:44px;
  }
  .pnav .links a, .pnav .dd > button{ display:flex; align-items:center; }
  input[type="range"]{ height:30px; }               /* easier to grab */
  .cx-f{ padding:.55rem .8rem; }
}

/* ---------- 2. FLUID TYPE: never too big on phones, never tiny on 4K ---------- */
@media (max-width:520px){
  .cine-copy h1, .meme-hero h1, .pillar-wrap > header h1{ font-size:clamp(2rem,9vw,2.8rem); }
  .pillar-wrap > h2, .meme-body > h2, .meme-gallery h2{ font-size:clamp(1.4rem,6vw,1.8rem); }
  :root{ --gutter:clamp(1rem,5vw,1.4rem); }
  .statcard b{ font-size:clamp(1.9rem,9vw,2.6rem); }
}
@media (min-width:2000px){
  :root{ --wide:min(1800px,88vw); --read:72ch; }
  body{ font-size:1.06rem; }
}

/* ---------- 3. TABLET: bento to two-up, rails behave ---------- */
@media (min-width:681px) and (max-width:1100px){
  .split{ grid-template-columns:1fr; gap:1.4rem; }
  .mg-grid{ grid-template-columns:1fr 1fr; }
  .statrow{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- 4. PHONE: single column everything, kill heavy motion ---------- */
@media (max-width:680px){
  .mg-grid{ grid-template-columns:1fr; }
  .statrow{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .cine-hero{ min-height:auto; padding-block:var(--s-4); }
  .cine-layer.ch-back, .cine-layer.ch-mid{ display:none; }   /* perf: drop deep parallax layers */
  .spot-rail{ display:none; }
  .beam{ display:none; }
  .hero-emblem{ width:96px; height:96px; }
  .pullquote{ padding:1.4rem 1.4rem 1.2rem 2.8rem; }
  .pullquote p{ font-size:1.1rem; }
  .rail-scene{ height:auto !important; }
  .illo-fig{ padding:.9rem; }
  .meme-gallery{ margin-top:var(--s-4); }
  /* tables scroll rather than crush */
  .cmp{ font-size:.82rem; }
  /* the radial tree: let it scroll, don't shrink to illegibility */
  #txSvg{ min-width:640px; }
}

/* ---------- 5. VERY SMALL (≤380px): tighten further ---------- */
@media (max-width:380px){
  .statrow{ grid-template-columns:1fr; }
  .fs-go, .cx-f{ font-size:.52rem; }
  .cine-copy h1{ font-size:clamp(1.8rem,10vw,2.3rem); }
}

/* ---------- 6. LANDSCAPE PHONE: don't let hero eat the screen ---------- */
@media (max-height:520px) and (orientation:landscape){
  .cine-hero{ min-height:auto; }
  .pin-inner, .rail-inner{ height:auto; position:static; }
}

/* ---------- 7. SAFE-AREA (notched phones) ---------- */
@supports(padding:max(0px)){
  .pnav{ padding-left:max(1rem,env(safe-area-inset-left)); padding-right:max(1rem,env(safe-area-inset-right)); }
  body{ padding-bottom:env(safe-area-inset-bottom); }
}

/* ---------- 8. HOVER-CAPABLE ONLY: don't leave :hover states stuck on touch ---------- */
@media (hover:none){
  .bento .pillar-card:hover, .tile3d:hover, .fs-tile:hover, .strip-card:hover{ transform:none; }
  .tile-art{ opacity:.22; }   /* show a bit since there's no hover to reveal it */
}

/* ---------- 9. PRINT: clean, ink-friendly ---------- */
@media print{
  .spot-rail,.beam,.hero-emblem,.living-bg,.world-hud,.vanta,.jr-chip,.calm-btn,
  .pnav,.pfoot,.warp,.cine-layer{ display:none !important; }
  *{ background:#fff !important; color:#111 !important; box-shadow:none !important; }
  a{ color:#111 !important; text-decoration:underline; }
  .bento,.mg-grid,.statrow{ display:block !important; }
  .illo-fig,.pillar-card{ break-inside:avoid; border:1px solid #ccc !important; }
}

/* ---------- 10. DATA-SAVER / SLOW: respect the user ---------- */
@media (prefers-reduced-data:reduce){
  .spot-rail,.cine-layer.ch-back,.cine-layer.ch-mid{ display:none; }
  .he-art svg,.illo animate{ animation:none; }
}