/* =====================================================================
   HDI D1 Daylight: home page, "two worlds" extension (2026-09-18, PROPOSED)
   Uses tokens.css + web.css from D1 unchanged. Daylight = default.
   The other side = html[data-world="other"], set only by the reader's switch.
   ===================================================================== */

/* ---------- the other side: token set (D1 dark set, verified in contrast.md) ---------- */
:root[data-world="other"]{
  color-scheme: dark;
  --surface-base:#00161F; --surface-card:#002231; --surface-elevated:#0A3040;
  --role-body:#F3EEE4; --role-heading:#F3EEE4; --role-muted:#A3B3B9; --role-link:#7DD3E3; --role-inverse:#002231;
  --text-primary:#F3EEE4; --text-secondary:#C9D3D6; --text-muted:#A3B3B9; --text-inverse:#002231;
  --border-default:#7B929B; --border-subtle:#1E3C49;
  --brand-accent:#7DD3E3; --brand-accent-hover:#A5E3EE; --brand-on-accent:#002231;
  --focus-ring-color:#7DD3E3;
  --ink:#F3EEE4; --ink-2:#C9D3D6; --ink-3:#A3B3B9; --paper:#00161F; --paper-2:#002231; --paper-3:#0A3040;
  --harbour:#7DD3E3; --harbour-dk:#A5E3EE; --rule:#1E3C49; --rule-ui:#7B929B; --ochre:#E8B866;
  --void:#000E14;          /* board and CTA ground: the darkest surface */
}

/* ---------- world swap: both headings in the DOM, only the active one rendered (and read) ---------- */
html:not([data-world="other"]) .w-other{ display:none !important }
html[data-world="other"] .w-day{ display:none !important }

/* ---------- placeholder copy: visibly marked, never mistaken for final copy ---------- */
.pending{ font-family:var(--font-body); font-style:italic; font-size:var(--fs-small); color:var(--text-secondary);
          border-bottom:1.5px dashed var(--rule-ui); padding-bottom:.1em }
p.pending{ display:inline-block }
.more{ margin-top:1.5rem } .more a{ font-weight:600 }

/* ================= 1. HERO ================= */
.hero{ position:relative; overflow:clip; isolation:isolate; padding:clamp(3rem,7vw,6.5rem) 0 clamp(4rem,9vw,8rem) }
.hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:center }
.hero-copy{ position:relative; z-index:2 }
.hero h1{ font-size:var(--fs-display); line-height:var(--lh-tight); font-weight:320; letter-spacing:-.03em; margin:0 0 1.75rem }
.hero h1 .l{ display:block }
.hero h1 em{ font-style:italic; font-weight:300 }
.hero .sub{ font-size:var(--fs-lead); line-height:1.5; max-width:34em; color:var(--ink) }
.hero .ctas{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.25rem }

/* daylight field (D1 M2): warm window light behind everything */
.daylight{ position:absolute; z-index:-1; left:0; top:0; width:980px; height:980px; margin:-490px 0 0 -490px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,236,196,.95), rgba(255,236,196,.55) 38%, rgba(250,247,240,0) 72%);
  opacity:0; transform:translate3d(62vw,38vh,0); will-change:transform,opacity; transition:opacity var(--motion-duration-slow) var(--motion-ease-out) }
.daylight.on{ opacity:1 }
.daylight::after{ content:""; position:absolute; inset:28%; background:
   linear-gradient(90deg, transparent 49.4%, rgba(0,34,49,.05) 49.5% 50.5%, transparent 50.6%),
   linear-gradient(0deg, transparent 49.4%, rgba(0,34,49,.05) 49.5% 50.5%, transparent 50.6%); transform:skewX(-12deg); filter:blur(3px) }

/* the other side: the same element becomes a cold torch beam.
   It sits ABOVE the screens and BELOW the text: it brightens only the decorative layer.
   Text contrast is computed at the beam's brightest point (contrast.md). */
[data-world="other"] .daylight{ z-index:1; width:420px; height:420px; margin:-210px 0 0 -210px; opacity:1; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(215,244,252,.36), rgba(170,228,242,.26) 50%, rgba(140,215,232,.16) 78%, rgba(125,211,227,.03) 90%, rgba(125,211,227,0) 100%) }
[data-world="other"] .daylight::after{ display:none }
[data-world="other"] .hero{ background:radial-gradient(120% 90% at 50% 0%, #002231 0%, var(--surface-base) 60%) }

/* the fan: sheets (daylight) / phones (other side) in the same places */
.stack{ position:relative; z-index:0; aspect-ratio:1/1.08; max-width:520px; justify-self:end; width:100% }
.layer{ position:absolute; inset:0; will-change:transform }
.sheet{ position:absolute; width:52%; aspect-ratio:210/297; perspective:1100px; transform:rotate(var(--r)); will-change:transform }
.sheet[data-d="1"]{ left:0;   top:16%; --r:-7deg; --dd:0 }
.sheet[data-d="2"]{ left:12%; top:9%;  --r:-3deg; --dd:1 }
.sheet[data-d="3"]{ left:24%; top:4%;  --r:1deg;  --dd:2 }
.sheet[data-d="4"]{ left:36%; top:9%;  --r:4deg;  --dd:3 }
.sheet[data-d="5"]{ left:48%; top:16%; --r:8deg;  --dd:4 }
.flip{ position:absolute; inset:0; transform-style:preserve-3d;
       transition:transform var(--motion-duration-slow) var(--motion-ease-out); transition-delay:calc(var(--dd,0) * 70ms + 180ms) }
[data-world="other"] .flip{ transform:rotateY(180deg) }
.face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden }
.face.paper{ background:#FFFDF8; color:#002231; border:1px solid #D9D1C1; padding:7% 7% 0;
  box-shadow:0 1px 0 rgba(0,34,49,.06), 0 24px 40px -28px rgba(0,34,49,.45) }
.face.paper .m{ display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #002231; padding-bottom:5%; font-family:var(--font-display); font-size:.8rem }
.face.paper .m i{ font-style:italic }
.face.paper .t{ font-family:var(--font-display); font-weight:340; font-size:clamp(.95rem,1.7vw,1.35rem); line-height:1; margin-top:62%; letter-spacing:-.01em }
.face.paper svg{ position:absolute; left:7%; right:7%; top:17%; width:86%; height:36% }
/* screen face: the negative of the paper drawing (white/cyan line on navy glass) */
.face.screen{ inset:2% 14%; transform:rotateY(180deg); border-radius:14% / 7%; overflow:hidden; color:#7DD3E3;
  background:linear-gradient(165deg, #0A3040 0%, #002231 55%, #00161F 100%); border:1.5px solid #7B929B;
  box-shadow:0 0 0 3px #00161F, 0 26px 44px -26px rgba(0,0,0,.9) }
.face.screen svg{ position:absolute; left:12%; top:20%; width:76%; height:40%; opacity:.9 }
.face.screen .notch{ position:absolute; left:38%; right:38%; top:4%; height:3.2%; border-radius:99px; background:#00161F; border:1px solid #1E3C49 }
.face.screen .glow{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(125,211,227,.20), rgba(125,211,227,.03) 65%); opacity:1 }
[data-world="other"] .stack{ opacity:.45 }

/* flicker: slow (0.38 Hz desktop, 0.25 Hz mobile), low amplitude (opacity 1 -> .84), runs only while the pointer moves */
@keyframes flick{ 0%,100%{ opacity:1 } 50%{ opacity:.84 } }
.face.screen .glow{ animation:flick 2.6s ease-in-out infinite; animation-play-state:paused }
.sheet[data-d="2"] .glow{ animation-delay:-.7s } .sheet[data-d="3"] .glow{ animation-delay:-1.5s }
.sheet[data-d="4"] .glow{ animation-delay:-.3s } .sheet[data-d="5"] .glow{ animation-delay:-2.1s }
[data-world="other"] .hero.live .face.screen .glow{ animation-play-state:running }
@media (hover:none){ .face.screen .glow{ animation-duration:4s } }

/* the prop */
.prop{ position:absolute; left:6%; bottom:-2%; width:64%; height:auto; pointer-events:none }
.prop-other{ display:none }
[data-world="other"] .prop-day{ display:none }
[data-world="other"] .prop-other{ display:block; bottom:-4% }

/* ================= reading sections (shared) ================= */
.read{ padding:clamp(4rem,9vw,8rem) 0; border-top:1px solid var(--border-subtle); background:var(--surface-base) }
.read .wrap{ display:grid; grid-template-columns:minmax(180px,.35fr) 1fr; gap:clamp(1.5rem,5vw,5rem) }
.read h2{ font-size:var(--fs-h1); line-height:1.05; font-weight:340; margin:.6rem 0 1.5rem }
.read .intro{ font-family:var(--font-display); font-size:var(--fs-lead); line-height:1.5; max-width:30em }
.read .intro.pending{ font-family:var(--font-body); font-size:var(--fs-small) }

/* ================= 2. PROCESS ================= */
.steps{ position:relative; margin:3rem 0 0; padding:0 0 0 4.75rem; max-width:46rem }
.steps ol{ list-style:none; margin:0; padding:0; display:grid; gap:2.75rem; position:relative }
.steps .path{ position:absolute; left:0; top:0; width:4rem; height:100%; overflow:visible }
.pencil path{ fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round }
.pencil .graphite{ stroke-width:.9; opacity:.35 }
.cables{ display:none }
.cables path{ fill:none; stroke-width:2.6; stroke-linecap:round }
.cables path:nth-child(1){ stroke:#7DD3E3 } .cables path:nth-child(2){ stroke:#A3B3B9 } .cables path:nth-child(3){ stroke:#C9D3D6; opacity:.8 }
[data-world="other"] .pencil{ display:none }
[data-world="other"] .cables{ display:inline }
/* the draw: a surface-coloured cover shrinks away (transform only). Default: already drawn. */
.cover{ position:absolute; left:-.5rem; top:0; width:5rem; height:100%; background:var(--surface-base); transform-origin:50% 100%; transform:scaleY(0) }
.steps li{ position:relative }
.steps .n{ position:absolute; z-index:1; left:-3.75rem; top:.1rem; width:2rem; height:2rem; display:grid; place-items:center; background:var(--surface-base);
           border:1.5px solid var(--ink); border-radius:50%; font:600 .9375rem/1 var(--font-body) }
.steps h3{ font-size:var(--fs-h3); font-weight:500; margin:0 0 .5rem; letter-spacing:-.005em }
.steps p{ max-width:var(--measure); margin:0 }
/* other side: the three steps become three screen windows */
[data-world="other"] .win{ position:relative; background:var(--surface-elevated); border:1px solid var(--border-default); border-radius:8px;
  padding:2.5rem 1.25rem 1.25rem; box-shadow:0 22px 40px -28px rgba(0,0,0,.9) }
[data-world="other"] .win::before{ content:""; position:absolute; left:0; right:0; top:0; height:1.75rem; border-bottom:1px solid var(--border-subtle);
  background:radial-gradient(circle at 1rem 50%, #A3B3B9 3.5px, transparent 4.5px), radial-gradient(circle at 1.75rem 50%, #A3B3B9 3.5px, transparent 4.5px),
             radial-gradient(circle at 2.5rem 50%, #A3B3B9 3.5px, transparent 4.5px) }
[data-world="other"] .steps .n{ top:.9rem }

/* ================= 3. SADNESS ================= */
.coin{ margin:2rem 0 0; padding:1rem 0 1rem 1.5rem; border-left:2px solid var(--ochre); font-family:var(--font-display); font-style:italic; font-size:var(--fs-lead) }
.coin p{ margin:0 }
.calm p:not(.intro){ max-width:var(--measure) }
.board{ list-style:none; margin:.5rem 0 1rem; padding:1rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem;
        background:var(--void); border:1px solid var(--border-subtle); border-radius:4px }
.board li{ display:grid; gap:.6rem }
.fig{ position:relative; display:grid; place-items:center; height:7.5rem; background:var(--surface-elevated); border-radius:3px;
      font:600 clamp(3rem, 2rem + 3vw, 4.5rem)/1 var(--font-body); color:var(--text-primary) }
.fig b{ position:relative; z-index:1; font-weight:600; transform:translateY(-.06em) }
.fig::after{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--void) }  /* split-flap seam */
.flabel{ font-size:var(--fs-small); color:var(--text-secondary) }
.board-note{ font-size:var(--fs-small); color:var(--text-secondary); max-width:var(--measure) }

/* ================= 4. TWO WORLDS IMAGE ================= */
.worlds{ padding:clamp(3rem,6vw,5rem) 0 0; border-top:1px solid var(--border-subtle) }
.worlds .label{ margin:0 auto 1.25rem }
.worlds-fig{ margin:0 }
.worlds-frame{ position:relative; overflow:hidden; width:100%; aspect-ratio:16/10; max-height:88vh; container-type:inline-size; background:var(--surface-card) }
.worlds-frame img{ position:absolute; top:0; left:0; height:100%; width:auto; max-width:none;
  transition:transform 900ms var(--motion-ease-in-out); will-change:transform }
[data-world="other"] [data-mode="split"] img{ transform:translateX(calc(100cqw - 100%)) }     /* shift to the dark half */
[data-mode="mirror"] img{ width:100%; object-fit:cover }
[data-world="other"] [data-mode="mirror"] img{ transform:scaleY(-1) }                        /* the reflection becomes the image */
.worlds-frame .ph{ display:none }
.missing img{ display:none }
.missing .ph{ position:absolute; inset:0; display:grid; place-items:center; border:2px dashed var(--rule-ui); font-weight:600; color:var(--text-secondary) }

/* ================= 5. DIMENSIONS + REPORT PREVIEW ================= */
.cards{ list-style:none; margin:2rem 0 1rem; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem }
.card{ position:relative; background:var(--paper-2); border:1px solid var(--rule); padding:1.25rem 1.25rem 1.5rem; min-height:9rem;
       transform:rotate(var(--r)); box-shadow:0 18px 28px -24px rgba(0,34,49,.5);
       transition:transform var(--motion-duration-slow) var(--motion-ease-out); transition-delay:calc(var(--i) * 50ms + 150ms) }
.card .k{ display:block; font-size:var(--fs-label); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary) }
.card h3{ font-size:1.5rem; font-weight:400; margin-top:2.25rem }
.card .bar{ display:none }
/* other side: the cards are windows stacked on a screen, with slight glitch edges (static, never flashing) */
[data-world="other"] .cards{ background:var(--void); padding:1.25rem; border:1px solid var(--border-subtle); border-radius:10px }
[data-world="other"] .card{ background:var(--surface-elevated); border-color:var(--border-default); border-radius:6px; padding-top:2.6rem;
  transform:translate3d(calc(var(--i) * -5px), calc(var(--i) * 4px), 0); box-shadow:0 20px 34px -24px rgba(0,0,0,.95) }
[data-world="other"] .card .bar{ display:flex; gap:6px; position:absolute; left:0; right:0; top:0; height:1.6rem; padding:0 .7rem; align-items:center; border-bottom:1px solid var(--border-subtle) }
[data-world="other"] .card .bar i{ width:8px; height:8px; border-radius:50%; border:1px solid #A3B3B9 }
[data-world="other"] .card::before, [data-world="other"] .card::after{ content:""; position:absolute; inset:-1px; border:1px solid; border-radius:6px; pointer-events:none }
[data-world="other"] .card::before{ border-width:2px; border-color:rgba(125,211,227,.8); clip-path:inset(22% 0 64% 0); transform:translateX(5px) }
[data-world="other"] .card::after{ border-width:2px; border-color:rgba(232,184,102,.6); clip-path:inset(68% 0 20% 0); transform:translateX(-4px) }
[data-world="other"] .card:nth-child(even)::before{ clip-path:inset(48% 0 40% 0) }

.preview{ margin-top:clamp(4rem,8vw,6rem) }
.pv{ position:relative; width:min(400px,100%); aspect-ratio:4/5; perspective:1200px; margin:1rem 0 1rem }
.pv .flip{ transition-delay:250ms }
.pv .face.paper{ padding:8%; }
.pv .doc .m{ margin-bottom:10% }
.ln{ display:block; height:7px; margin:0 0 5.5%; background:#D9D1C1; border-radius:1px }
.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}
.doc .blk{ display:block; height:24%; margin:0 0 6%; background:#F2ECE0; border:1px solid #D9D1C1 }
.doc .rule{ display:block; height:2px; background:#002231; margin:0 0 6% }
.pv .face.screen{ inset:0 8%; border-radius:9% / 7%; padding:16% 7% 0; display:grid; align-content:start; gap:5% }
.toast{ display:grid; grid-template-columns:auto 1fr; column-gap:.75rem; align-items:center; padding:.8rem; background:rgba(243,238,228,.07);
        border:1px solid #1E3C49; border-radius:12px }
.toast b{ grid-row:span 2; width:28px; height:28px; border-radius:50%; background:#7DD3E3; opacity:.55 }
.toast .ln{ background:#A3B3B9; opacity:.5; height:6px; margin:.2rem 0 }
.pv-note{ margin-top:.25rem }

/* ================= 6. FINAL CTA ================= */
.cta{ padding:clamp(5rem,10vw,9rem) 0; border-top:1px solid var(--border-subtle); text-align:center }
.cta h2{ font-size:var(--fs-h1); line-height:1.08; font-weight:340; margin:.75rem auto 1.25rem; max-width:18em }
.cta h2 em{ font-style:italic }
.cta .ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:2rem }
.cta .label{ color:var(--text-secondary) }
[data-world="other"] .cta{ background:var(--void) }
[data-world="other"] .cta h2{ color:var(--text-secondary) }
/* the only light point: a window onto daylight */
[data-world="other"] .way-back{ position:relative; background:#FAF7F0; color:#002231; border-color:#FFFDF8;
  box-shadow:0 0 0 1px rgba(255,236,196,.7), 0 0 38px 8px rgba(255,226,170,.30), 0 0 120px 36px rgba(255,226,170,.10) }
[data-world="other"] .way-back:hover{ background:#FFFDF8; color:#002231; border-color:#FFFDF8 }
[data-world="other"] .cta .btn-secondary{ color:var(--text-secondary); border-color:var(--border-default) }

/* footer: leave room for the floating switch */
.foot{ padding-bottom:6.5rem }

/* ================= THE SWITCH ================= */
.switch{ position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); z-index:70;
  width:64px; height:64px; padding:0; border-radius:50%; cursor:pointer; background:#FAF7F0; border:2px solid #002231;
  box-shadow:0 12px 30px -12px rgba(0,34,49,.6); transition:transform var(--motion-duration-fast) var(--motion-ease-out) }
.switch[hidden]{ display:none }
.switch:hover{ transform:translateY(-2px) }
.switch:focus-visible{ outline:3px solid var(--focus-ring-color); outline-offset:4px; border-radius:50% }
/* the pane shows the current world; the sliver shows the other one, and widens on hover/focus */
.pane{ position:absolute; inset:5px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 35% 35%, #FFF4DC, #F2E3C2 70%) }
.pane::before{ content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-linear-gradient(0deg, rgba(125,211,227,.35) 0 1px, transparent 1px 4px), linear-gradient(160deg,#0A3040,#00161F);
  transform:translateX(74%); transition:transform var(--motion-duration-base) var(--motion-ease-out) }
.pane::after{ content:""; position:absolute; inset:0; border-radius:50%;   /* window mullions */
  background:linear-gradient(90deg, transparent calc(50% - 1px), #002231 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
             linear-gradient(0deg, transparent calc(50% - 1px), #002231 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) }
.switch:hover .pane::before, .switch:focus-visible .pane::before{ transform:translateX(42%) }
[data-world="other"] .switch{ background:#00161F; border-color:#F3EEE4; box-shadow:0 0 26px 2px rgba(125,211,227,.18) }
[data-world="other"] .pane{ background:repeating-linear-gradient(0deg, rgba(125,211,227,.3) 0 1px, transparent 1px 4px), linear-gradient(160deg,#0A3040,#00161F) }
[data-world="other"] .pane::before{ background:radial-gradient(circle at 35% 35%, #FFF4DC, #F2E3C2 70%) }
[data-world="other"] .pane::after{ background:linear-gradient(90deg, transparent calc(50% - 1px), #F3EEE4 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
             linear-gradient(0deg, transparent calc(50% - 1px), #F3EEE4 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) }
.tip{ position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); white-space:nowrap; pointer-events:none;
  background:var(--ink); color:var(--paper); padding:.55rem .8rem; font:600 1rem/1.2 var(--font-body); border-radius:2px;
  opacity:0; transition:opacity var(--motion-duration-fast) linear }
.switch:hover .tip, .switch:focus-visible .tip, .switch.hint .tip{ opacity:1 }

/* ================= THE TURN (transition overlay, decorative) ================= */
.turn{ position:fixed; inset:0; z-index:65; pointer-events:none; overflow:hidden; perspective:1600px }
.turn[hidden]{ display:none }
.turn-sheet{ position:absolute; inset:0; transform-origin:50% 100%; will-change:transform, opacity }
.turn[data-to="other"] .turn-sheet{ background:repeating-linear-gradient(0deg, rgba(125,211,227,.06) 0 1px, transparent 1px 4px), #00161F }
.turn[data-to="day"] .turn-sheet{ background:repeating-linear-gradient(0deg, rgba(0,34,49,.06) 0 1px, transparent 1px 32px), #FAF7F0 }
.turn-edge{ position:absolute; left:0; right:0; top:-90px; height:90px; background:linear-gradient(to top, rgba(0,20,28,.35), rgba(0,20,28,0)) }
.turn-sheet::after{ content:""; position:absolute; left:0; right:0; top:0; height:26px }   /* the curl highlight on the lifted edge */
.turn[data-to="other"] .turn-sheet::after{ background:linear-gradient(to bottom, rgba(125,211,227,.35), transparent) }
.turn[data-to="day"] .turn-sheet::after{ background:linear-gradient(to bottom, rgba(0,34,49,.18), transparent) }

/* ================= responsive ================= */
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr }
  .stack{ justify-self:center; max-width:360px; margin-top:.5rem }
  .read .wrap{ grid-template-columns:1fr }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .board{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 760px){
  .worlds-frame{ aspect-ratio:4/5 }
  .cards{ gap:.9rem } .card{ padding:1rem; min-height:7.5rem } .card h3{ font-size:1.25rem; margin-top:1.5rem }
  .steps{ padding-left:3.75rem } .steps .path{ width:3rem } .cover{ width:3.75rem } .steps .n{ left:-3.25rem }
  .switch{ width:60px; height:60px }
}

/* ================= MOTION (D1 MOTION.md + additions, see NOTES.md) ================= */
@keyframes rise{ from{ opacity:0; transform:translate3d(0,var(--motion-reveal-distance),0) } to{ opacity:1; transform:none } }
.hero [data-rise]{ animation:rise var(--motion-duration-slow) var(--motion-ease-out) both; animation-delay:calc(var(--i,0) * var(--motion-stagger-step) + 80ms) }

@supports (animation-timeline: view()){
  @keyframes fan{ to{ transform:translate3d(var(--fx), var(--fy), 0) rotate(calc(var(--r) * 2.2)) } }
  .sheet{ animation:fan linear both; animation-timeline:scroll(root); animation-range:0 70vh }
  .sheet[data-d="1"]{ --fx:-28px; --fy:26px } .sheet[data-d="2"]{ --fx:-14px; --fy:10px } .sheet[data-d="3"]{ --fx:0px; --fy:-8px }
  .sheet[data-d="4"]{ --fx:14px; --fy:10px }  .sheet[data-d="5"]{ --fx:28px; --fy:26px }
  @keyframes reveal{ from{ opacity:0; transform:translate3d(0,var(--motion-reveal-distance),0) } to{ opacity:1; transform:none } }
  [data-animate="fade-up"]{ animation:reveal linear both; animation-timeline:view(); animation-range:entry 5% entry 70% }
  /* pencil / cables draw: the cover shrinks as the steps pass through the viewport */
  @keyframes undraw{ from{ transform:scaleY(1) } to{ transform:scaleY(0) } }
  .cover{ animation:undraw linear both; animation-timeline:view(); animation-range:cover 10% contain 55% }
  @keyframes ink{ from{ opacity:.18 } to{ opacity:1 } }
  h2.ink{ animation:ink linear both; animation-timeline:view(); animation-range:entry 0% entry 90% }
}
html.io [data-animate="fade-up"]{ opacity:0; transform:translate3d(0,var(--motion-reveal-distance),0);
  transition:opacity var(--motion-duration-slow) var(--motion-ease-out), transform var(--motion-duration-slow) var(--motion-ease-out);
  transition-delay:calc(var(--i,0) * var(--motion-stagger-step)) }
html.io [data-animate].motion-visible{ opacity:1; transform:none }
html.io .cover{ transform:scaleY(1); transition:transform var(--motion-duration-calm) var(--motion-ease-in-out) }
html.io .cover.motion-visible{ transform:scaleY(0) }

@media (prefers-reduced-motion: reduce){
  .hero [data-rise], .sheet, [data-animate], .cover, h2.ink{ animation:none !important; transition:opacity 150ms linear !important }
  [data-animate]{ transform:none !important }
  .sheet{ transform:rotate(var(--r)) !important }
  .cover{ display:none }
  .flip, .card, .worlds-frame img, .pane::before, .switch{ transition:none !important }
  .face.screen .glow{ animation:none !important }
  html:not([data-world="other"]) .daylight{ display:none }
  .turn{ display:none !important }
}

/* Rosemary 2026-09-18: mirror image (Arwen v01) in its own 21:9 frame, no crop; the other side flips it so the reflection leads */
.worlds-fig[data-mode="mirror"] .worlds-frame{ aspect-ratio:1915/821; max-height:none }
.worlds-fig[data-mode="mirror"] .worlds-frame img{ inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:none }
[data-world="other"] .worlds-fig[data-mode="mirror"] .worlds-frame img{ transform:scaleY(-1) }
@media (max-width:640px){ .worlds-fig[data-mode="mirror"] .worlds-frame{ aspect-ratio:4/5 } }

/* paper grain (Owner idea 30.9.): the same seamless 256px tile on both worlds, dark specks by day, light specks on the other side */
html[data-world="other"] body{ background-image:url(../img/grain-night.png) }
.read{ background:transparent }

/* B13 mindflow (GATE-20260930-011): three roles, prominent (Owner 30.9.) */
.roles{ list-style:none; margin:2rem 0 2.25rem; padding:0; border-top:1px solid var(--rule) }
.roles li{ padding:1.25rem 0; border-bottom:1px solid var(--rule); line-height:1.25 }
.roles .role{ display:block; font-family:var(--font-display, serif); font-style:italic; font-size:clamp(1.15rem, 1.6vw, 1.35rem); color:var(--ink-2); margin-bottom:.15rem }
.roles strong{ display:block; font-family:var(--font-display, serif); font-weight:600; font-size:clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing:-.01em; color:var(--ink) }
.roles .why-line{ display:block; margin-top:.4rem; font-size:1.1rem; line-height:1.45; color:var(--ink-2) }
@media (min-width:720px){ .roles .why-line{ display:block; margin-left:0 } }

/* B15-1 hero goal line (GATE-20260930-015) */
.hero-goal{ font-size:clamp(1.1rem, 1.5vw, 1.3rem); line-height:1.45; color:var(--ink); margin:.35rem 0 1.25rem; max-width:34em }

/* B19 study chain (GATE-20260930-024): third scroll, disclosure order */
.chain{ margin:1.75rem 0 1.5rem; padding:0; border-top:1px solid var(--rule) }
.chain>div{ padding:1.1rem 0; border-bottom:1px solid var(--rule) }
.chain dt{ font-family:var(--font-display, serif); font-style:italic; font-size:clamp(1.15rem, 1.6vw, 1.35rem); color:var(--ink-2); margin:0 0 .3rem }
.chain dd{ margin:0; font-size:1.1rem; line-height:1.5; color:var(--ink) }
.chain-cta{ font-size:1.15rem; line-height:1.5 }

/* B20-13 investment line + click trigger (GATE-20260930-025) */
.invest{ font-size:1.15rem; line-height:1.5; margin-top:1.5rem }
.click-trigger{ font-size:.95rem; color:var(--ink-2); margin-top:-.5rem }

/* B16-3 arena line under the three roles */
.arena{ font-family:var(--font-display, serif); font-style:italic; font-size:clamp(1.25rem, 1.8vw, 1.5rem); line-height:1.4; color:var(--ink); margin:0 0 1.5rem }

.promise{ font-family:var(--font-display, serif); font-weight:600; font-size:clamp(1.5rem, 2.4vw, 2rem); letter-spacing:-.01em; line-height:1.25; color:var(--ink); margin:-.5rem 0 1.75rem }

ul.chain{ list-style:none }
ul.chain li{ padding:1rem 0; border-bottom:1px solid var(--rule); font-size:1.15rem; line-height:1.5; color:var(--ink) }
ul.chain li strong{ font-family:var(--font-display, serif); font-weight:600; font-size:1.3em; letter-spacing:-.01em }

/* B24 side figure in the left column (Owner 30.9.): sticky beside the study bullets; after the text on one column */
.read .col-l .side-fig{ margin:0; position:sticky; top:5.5rem }
.read .col-l .side-fig img{ width:100%; height:auto; display:block; border:1px solid var(--rule); box-shadow:0 22px 40px -30px rgba(0,34,49,.55); background:#fff }
.read .col-l .side-fig figcaption{ font-size:var(--fs-small); color:var(--text-secondary); margin-top:.75rem; line-height:1.45 }
@media (max-width: 900px){ .read .col-l:has(.side-fig){ order:2; max-width:22rem; margin-top:1.5rem } .read .col-l .side-fig{ position:static } }

/* B25 photograph in the left column of the scene (Arwen v01, 2026-09-30): no paper border, soft corners */
.read .col-l .side-photo img{ border:0; border-radius:6px; background:transparent; box-shadow:0 30px 50px -36px rgba(0,34,49,.6) }

/* B26 proof block: logo in the left column, sticky like the side figure */
.proof-sec .col-l .proof-logo{ position:sticky; top:5.5rem; margin:.9rem 0 0; padding:0 .5rem }
.proof-sec .col-l .proof-logo small{ display:block; font-family:var(--font-body); font-size:var(--fs-small); color:var(--text-secondary); margin-top:.35rem }
.proof-sec .col-l .proof-logo img{ max-width:100%; height:auto; display:block; margin:0 auto }
@media (max-width: 900px){ .proof-sec .col-l{ order:2; max-width:22rem } .proof-sec .col-l .proof-logo{ position:static } }

/* B29 reference list on /research/ (batch 23) */
.research-others .refs{ list-style:none; padding:0; margin:1.5rem 0 0; font-size:var(--fs-small); color:var(--text-secondary); line-height:1.5 }
.research-others .refs li{ margin:0 0 .55rem; padding-left:1rem; text-indent:-1rem }
.research-others .refs a{ color:inherit; text-decoration:underline; text-underline-offset:2px; word-break:break-all }

/* B30 odds chart in the left column of the why-section (Sohn 2019); ink and rule only, no good/bad colour */
.read .col-l .side-chart{ background:transparent }
.read .col-l .side-chart .odds{ width:100%; height:auto; display:block; font-family:var(--font-body) }
.side-chart .odds .grid{ stroke:var(--rule); stroke-width:1 }
.side-chart .odds .base{ stroke:var(--ink); stroke-width:1.5; stroke-dasharray:4 4 }
.side-chart .odds .bar{ fill:var(--ink); opacity:.88 }
.side-chart .odds .ci{ stroke:#8A5300; stroke-width:2 }
.side-chart .odds text{ fill:var(--text-secondary); font-size:14px }
.side-chart .odds .lab{ fill:var(--ink); font-size:16px; font-weight:600 }
.side-chart .odds .val{ fill:var(--ink); font-size:16px; font-weight:600 }
.side-chart .odds .base-t{ font-size:13px }
.side-chart .odds .src{ font-size:11.5px }
html[data-world="other"] .side-chart .odds .bar{ fill:var(--text-light, #f5f5f5); opacity:.9 }
html[data-world="other"] .side-chart .odds .lab, html[data-world="other"] .side-chart .odds .val{ fill:var(--text-light, #f5f5f5) }
html[data-world="other"] .side-chart .odds .base{ stroke:var(--text-light, #f5f5f5) }
.why .evidence{ margin-top:1.4rem }

/* B31 care bridge: the emphasised line reads as the turn of the section */
.why .evidence.care{ margin-top:1.8rem; padding-top:1.2rem; border-top:1px solid var(--rule) }
.why .evidence.care strong{ font-family:var(--font-display); font-weight:600; font-size:1.18em; line-height:1.35; color:var(--ink); display:block; margin-bottom:.35rem }
html[data-world="other"] .why .evidence.care strong{ color:#f5f5f5 }
.side-chart .odds .axis{ font-size:12px }