/* ============================================================
   JPIF v2 — japanisthefuture.com/v2
   Editorial horizontal centerpiece: absolutely-composed sections,
   extreme type scale, layered parallax, line-draw animation,
   counter load -> choreographed reveal. JPIF v06 brand tokens.
   Frame (sidebar / nav / rail / drawers) carried over from v1.
   ============================================================ */

:root{
  --red:#FF2B2B; --red-deep:#C8001C;
  --ink:#0A0A0C; --ink-2:#14141A;
  --paper:#F3F1EB; --concrete:#E4E2DC; --concrete-2:#CFCCC4;
  --stone:#6E6B64;
  --line-d:rgba(255,255,255,.14); --line-l:rgba(0,0,0,.14);
  --display:'Unbounded',sans-serif;
  --headline:'Saira Condensed',sans-serif;
  --body:'Inter Tight',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --nav-fg:var(--paper); --nav-line:var(--line-d);
  --ease:cubic-bezier(.2,.9,.25,1);
  --ease-rv:cubic-bezier(.22,1,.36,1);
  --ease-smooth:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--ink);overflow:hidden}
html{-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--body);color:var(--paper);font-size:16px;line-height:1.5;overscroll-behavior:none;touch-action:none;cursor:grab}
body.dragging{cursor:grabbing}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.red{color:var(--red)}
.nojs{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
body[data-nav="dark"]{--nav-fg:var(--paper);--nav-line:var(--line-d)}
body[data-nav="light"]{--nav-fg:var(--ink);--nav-line:var(--line-l)}
body[data-nav="concrete"]{--nav-fg:var(--ink);--nav-line:var(--line-l)}

/* ============ INTRO LOADER (copy sequence, not a counter) -> reveal ============ */
#loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(40px,7vh,96px) clamp(28px,6vw,96px) clamp(46px,9vh,104px)}
#loader.gone{transform:translateY(-101%);transition:transform 1.05s var(--ease);pointer-events:none}
.ld-kicker{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:clamp(20px,3.4vh,40px)}
.ld-line{font-family:var(--headline);font-weight:800;text-transform:uppercase;color:var(--paper);font-size:clamp(40px,min(10.5vh,6.8vw),150px);line-height:.86;letter-spacing:-.022em;white-space:nowrap;opacity:0;transform:translateY(26px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.ld-line.in{opacity:1;transform:none}
.ld-line .red{color:var(--red)}
.ld-bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .35s linear}
html[data-lang="jp"] .ld-line{font-size:clamp(34px,8vh,118px);line-height:1.06;letter-spacing:.01em}

/* ============ STAGE / TRACK ============ */
#stage{position:fixed;inset:0;overflow:hidden;z-index:1}
#track{position:absolute;top:0;left:0;height:100%;will-change:transform}

/* a section = a fixed-height canvas of a content-sized width; everything inside is positioned */
.panel{position:absolute;top:0;left:0;height:100%;width:var(--w,120vh);overflow:hidden;background:var(--ink);color:var(--paper);border-left:1px solid var(--line-d)}
.panel[data-theme="light"]{background:var(--paper);color:var(--ink);border-left:1px solid rgba(0,0,0,.16)}
.panel:not(.opening):not(.panel--break):not(.panel--fb) .el{margin-left:80px;margin-right:80px}
/* red is accent/punctuation ONLY per brand guide — never a background surface */

/* every composed element is an absolutely-positioned, parallaxing layer */
.el{position:absolute}
.layer{will-change:transform}

/* ---- imagery ---- */
.el-img{overflow:hidden}
.el-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.08) brightness(.96)}
.el-img.reveal{clip-path:inset(0 0 100% 0)}
.panel.is-active .el-img.reveal{clip-path:inset(0 0 0 0);transition:clip-path 1.15s var(--ease)}
.scrim::after{content:'';position:absolute;inset:0}
.panel[data-theme="dark"] .scrim.bleed::after{background:rgba(10,10,12,.55)}
.panel[data-theme="light"] .scrim.bleed::after{background:rgba(243,241,235,.74)}

/* ---- type system: the TITLE is the one giant element per section ---- */
/* small, consistent chapter index — its own layer, same size everywhere, never giant */
.cidx{font-family:var(--mono);font-weight:700;font-size:clamp(13px,1.7vh,20px);letter-spacing:.14em;color:var(--red);display:block;line-height:1}
.ctitle{font-family:var(--headline);font-weight:800;text-transform:uppercase;font-size:clamp(54px,13.5vh,184px);line-height:.84;letter-spacing:-.025em}
.ctitle .red{color:var(--red)}
.cbig{font-family:var(--display);font-weight:700;font-size:clamp(50px,11.5vh,168px);line-height:.9;letter-spacing:-.04em}
.clead{font-family:var(--body);font-size:clamp(15px,2vh,21px);line-height:1.5;max-width:42ch}
.panel[data-theme="dark"] .clead{color:var(--concrete-2)}
.panel[data-theme="light"] .clead{color:var(--ink);opacity:.8}
.ceyebrow{font-family:var(--mono);font-weight:500;font-size:clamp(9px,1.2vh,12px);letter-spacing:.26em;text-transform:uppercase;color:var(--stone);display:flex;align-items:center;gap:13px}
.ccap{font-family:var(--mono);font-size:clamp(9px,1.25vh,12px);letter-spacing:.16em;text-transform:uppercase;color:var(--stone);line-height:1.7}
.ccap .red{color:var(--red)}
/* Japanese: full-width glyphs need a smaller scale, positive tracking and looser leading than condensed Latin */
html[data-lang="jp"] .ctitle,html[data-lang="jp"] .cbig{font-size:clamp(38px,9.5vh,124px);line-height:1.12;letter-spacing:.01em}
html[data-lang="jp"] .clead{line-height:1.85}
html[data-lang="jp"] .ch-body,html[data-lang="jp"] .open-mission,html[data-lang="jp"] .bc,html[data-lang="jp"] .tl-step p,html[data-lang="jp"] .tl-step h4,html[data-lang="jp"] .gt,html[data-lang="jp"] .clead{line-break:strict;word-break:normal;overflow-wrap:normal;text-wrap:pretty}

/* ============================================================
   ARCHETYPES — each section is a different system (canals model):
   FB full-bleed sliced title · NUM giant number · SPLIT 50/50
   · ESSAY field + giant word · STATEMENT centred type
   ============================================================ */

/* FB — full-bleed photo; the giant title is sliced so the scene shows through the gaps */
.panel--fb{color:var(--paper)}
.panel--fb .fb-img{position:absolute;inset:0;overflow:hidden}
.panel--fb .fb-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.16) contrast(1.05) brightness(.8)}
.panel--fb .fb-img::after{content:'';position:absolute;inset:0;background:linear-gradient(102deg,rgba(8,8,10,.66),rgba(8,8,10,.22) 52%,rgba(8,8,10,.46))}
.panel--fb .clead{color:var(--paper)}
.panel--fb .ccap{color:rgba(255,255,255,.62)}
.panel--fb .cidx,.panel--fb .ceyebrow{color:#fff}
.ctitle--cut{color:var(--red);-webkit-mask:repeating-linear-gradient(180deg,#000 0 6.4vh,transparent 6.4vh 7.7vh);mask:repeating-linear-gradient(180deg,#000 0 6.4vh,transparent 6.4vh 7.7vh)}
.ctitle--white{color:var(--paper)}

/* NUM — one giant meaningful number (count / duration / year) on a solid field */
.cstat{font-family:var(--display);font-weight:800;color:var(--red);font-size:clamp(150px,47vh,640px);line-height:.74;letter-spacing:-.06em;display:inline-flex;align-items:flex-start}
.cstat .unit{font-family:var(--headline);font-weight:800;font-size:clamp(22px,6vh,78px);line-height:1;letter-spacing:0;margin:.4em 0 0 .14em;text-transform:uppercase}

/* ESSAY — a large editorial sentence paired with a giant word anchor */
.cessay{font-family:var(--body);font-weight:500;font-size:clamp(19px,3.3vh,42px);line-height:1.26;letter-spacing:-.012em}
.cessay .red{color:var(--red)}
.cword{font-family:var(--headline);font-weight:800;text-transform:uppercase;font-size:clamp(96px,29vh,420px);line-height:.72;letter-spacing:-.03em}

/* SPLIT — 50/50 photo | colour field (panel background fills the other half) */
.panel--split .sp-img{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}
.panel--split .sp-img.left{left:0;border-right:1px solid var(--line-d)}
.panel--split .sp-img.right{right:0;border-left:1px solid var(--line-d)}
.panel--split .sp-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.05) brightness(.92)}

/* CONCRETE field (#E4E2DC) — allocated light secondary surface; dark type, red stays punctuation only */
.panel[data-theme="concrete"]{background:var(--concrete);color:var(--ink);border-left:1px solid var(--line-l)}
.panel[data-theme="concrete"] .clead,.panel[data-theme="concrete"] .cessay{color:var(--ink);opacity:.82}
.panel[data-theme="concrete"] .cstat{color:var(--red)}

/* centred statement helper */
.tcenter{text-align:center}

/* editorial image credit (canals: "IMAGE / 'title' / source") — small caps over the photo */
.icredit{font-family:var(--mono);font-weight:500;font-size:clamp(8px,1.05vh,11px);letter-spacing:.15em;text-transform:uppercase;line-height:1.75;color:rgba(255,255,255,.72);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.icredit b{color:#fff;font-weight:700}
.icredit em{display:inline-block;font-style:italic;text-transform:none;letter-spacing:.02em;opacity:.9}
.panel[data-theme="light"] .icredit{color:rgba(20,20,20,.6);text-shadow:0 1px 10px rgba(255,255,255,.5)}
.panel[data-theme="light"] .icredit b{color:#141414}

/* layered image — a smaller framed photo overlapping the main one at its own parallax depth */
.iframe{overflow:hidden;border:6px solid var(--ink);box-shadow:0 26px 70px rgba(0,0,0,.55)}
.panel[data-theme="light"] .iframe{border-color:var(--paper)}
.iframe img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.06) brightness(.9)}

/* drawn red rules (line-draw) */
.r-line{height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease)}
.panel.is-active .r-line{transform:scaleX(1)}
.v-line{width:1.5px;background:var(--red);transform:scaleY(0);transform-origin:top center;transition:transform 1.1s var(--ease)}
.panel.is-active .v-line{transform:scaleY(1)}

/* CTA */
.cta{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:13px 22px;border:1px solid currentColor;transition:background .3s,border-color .3s,color .3s,gap .3s}
.cta:hover{border-color:var(--red);color:var(--red);gap:18px}
.cta .arr{transition:transform .3s}.cta:hover .arr{transform:translateX(4px)}

/* partner logos — NATURAL colour, no boxes (the mono-silhouette filter flattened them into blocks) */
.chips{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px);flex-wrap:wrap}
.chips .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-right:8px}
.chip{display:inline-flex;align-items:center}
.chip img{height:clamp(18px,2.4vh,22px);width:auto;max-width:88px;object-fit:contain;opacity:.92;transition:opacity .25s,transform .25s}.chip img.inv{filter:brightness(0) invert(1)}
.chip:hover img{opacity:1;transform:translateY(-1px)}
/* WORK (full-bleed dark photo): logos keep their real brand colour; only the label is white */
.panel--fb .chip img{opacity:.98}
.panel--fb .chips .lbl{color:rgba(255,255,255,.62)}

/* timeline module (MOVE / VISA — the long expanding sections) */
.tl{position:relative;display:flex;align-items:flex-start;gap:clamp(46px,8vh,132px)}
.tl::before{content:'';position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 2.8s var(--ease-smooth)}
.panel.seen .tl::before{transform:scaleX(1)}
.tl-step{position:relative;flex:0 0 auto;width:clamp(220px,30vh,360px);padding-top:38px}
.tl-step::before{content:'';position:absolute;top:3px;left:0;width:9px;height:9px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .45s var(--ease-rv)}
.panel.seen .tl-step::before{transform:scale(1)}
.tl-step .n{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--red)}
.tl-step h4{font-family:var(--headline);font-weight:700;text-transform:uppercase;font-size:clamp(30px,4.6vh,58px);line-height:.98;letter-spacing:-.01em;margin:13px 0 11px}
.tl-step p{font-size:clamp(14px,1.95vh,20px);line-height:1.5;opacity:.74;max-width:32ch}
/* 5-step variant (07 VISA) — tighter so all five fit one screen without clipping "Stay" */
.tl--5{justify-content:space-between;gap:clamp(18px,2.6vh,44px)}
.tl--5 .tl-step{width:clamp(168px,21vh,252px)}
.tl--5 .tl-step p{max-width:22ch}
.tl-logo{display:block;height:clamp(16px,2vh,20px);width:auto;margin-top:15px;opacity:.85}
.panel.seen .tl-step{animation:stepIn .55s var(--ease-rv) both}
.panel.seen .tl-step:nth-child(2),.panel.seen .tl-step:nth-child(2)::before{animation-delay:.16s;transition-delay:.16s}
.panel.seen .tl-step:nth-child(3),.panel.seen .tl-step:nth-child(3)::before{animation-delay:.32s;transition-delay:.32s}
.panel.seen .tl-step:nth-child(4),.panel.seen .tl-step:nth-child(4)::before{animation-delay:.48s;transition-delay:.48s}
.panel.seen .tl-step:nth-child(5),.panel.seen .tl-step:nth-child(5)::before{animation-delay:.64s;transition-delay:.64s}
@keyframes stepIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============ REVEAL (per-active section choreography) ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.mask{display:block;overflow:hidden}
.mask .ln{display:block;transform:translateY(106%);transition:transform 1.05s var(--ease)}
.panel.is-active .rv{opacity:1;transform:none}
.panel.is-active .mask .ln{transform:none}
.panel.is-active [data-d="1"]{transition-delay:.06s}
.panel.is-active [data-d="2"]{transition-delay:.12s}
.panel.is-active [data-d="3"]{transition-delay:.2s}
.panel.is-active .mask:nth-child(2) .ln{transition-delay:.08s}

/* ============ OPENING ============ */
.opening .el-img{inset:0}
.opening .el-img.scrim::after{background:rgba(10,10,12,.66)}
.opening-block{position:absolute;left:clamp(50px,8vw,170px);right:clamp(44px,6vw,120px);top:39%;transform:translateY(calc(-50% - 50px));display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
.wm-anim{position:relative;width:min(37vw,440px);aspect-ratio:2119/1486;overflow:hidden}
.wm-anim .wmL{position:absolute;left:-5.62%;top:-8.08%;height:116.08%;width:auto;max-width:none;transform:translateY(110%);opacity:0;transition:transform .55s cubic-bezier(.2,.85,.3,1),opacity .25s ease-out}
.wm-anim .wmL.j{clip-path:inset(0% 77.56% 0% 5.05%)}
.wm-anim .wmL.p{clip-path:inset(0% 45.57% 0% 26.52%)}
.wm-anim .wmL.i{clip-path:inset(0% 30.46% 0% 57.53%)}
.wm-anim .wmL.f{clip-path:inset(0% 5.01% 0% 73.02%)}
.wm-anim .wmL.in{transform:translateY(0);opacity:1}
.opening-cue{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
/* opening mission tagline — music-led, states what JPIF is, reveals after the wordmark */
.open-mission{width:clamp(280px,34vw,540px);padding-bottom:clamp(8px,1.4vh,18px);font-family:var(--body);font-weight:600;font-size:clamp(16px,2.2vh,24px);line-height:1.26;letter-spacing:-.005em;color:var(--ink);text-align:right;margin:0;opacity:0;transform:translateY(14px)}
.open-mission .red{color:var(--red);font-weight:600}
.opening.is-active .open-mission{animation:omIn 1.05s var(--ease) 2.1s forwards}
@keyframes omIn{to{opacity:1;transform:none}}
.opening-cue .arr{display:inline-block;animation:cueNudge 1.8s ease-in-out infinite}
@keyframes cueNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* ============ SOUND TOGGLE ============ */
.sound{display:inline-flex;align-items:center;gap:9px;color:currentColor;transition:color .25s}
.sound:hover{color:var(--red)}
.sound-ico{position:relative;width:11px;height:11px;border:1.25px solid var(--red);border-radius:50%;flex:none;transition:border-color .25s}
.sound.on .sound-ico{border-color:transparent}
.sound.on .sound-ico::before,.sound.on .sound-ico::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1.25px;background:var(--red)}
.sound.on .sound-ico::before{transform:translate(-50%,-50%) rotate(45deg)}
.sound.on .sound-ico::after{transform:translate(-50%,-50%) rotate(-45deg)}
.sound-label{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:currentColor;opacity:.9;transition:opacity .25s}
.sound:hover .sound-label{opacity:1}

/* ============ FRAME (sidebar · header · top-right · rail) ============ */
/* base colour (pre-render + logo container); most frame text instead auto-adapts via
   difference blend below, so its colour tracks whatever panel slides behind it with zero
   timing dependency. red accents stay OUT of the blend (red reads on every brand surface)
   so they never shift hue. the logo keeps its data-nav PNG swap. */
#hd,#topright,#rail,#hint{color:var(--nav-fg);transition:color .28s ease}
#hd{position:fixed;top:0;left:0;right:0;z-index:30;height:64px;display:flex;align-items:center;padding:0 clamp(20px,4vw,44px);pointer-events:none}
.hd-mark{pointer-events:auto;display:inline-flex;align-items:center;height:64px;opacity:1;transition:opacity .55s ease}
.hd-mark img{height:34px;width:auto;display:none}
body[data-nav="dark"] .hd-mark .lg-d{display:block}
body[data-nav="light"] .hd-mark .lg-l,body[data-nav="concrete"] .hd-mark .lg-l{display:block}
/* landing: a horizontal "Japan is the future" line at top-left that cross-fades INTO the logo on scroll */
.hd-line{position:absolute;left:clamp(20px,4vw,44px);top:50%;transform:translateY(-50%);font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .55s ease}
body.on-opening .hd-mark{opacity:0}
body.on-opening .hd-line{opacity:1}
.vs-dot{width:7px;height:7px;border-radius:50%;background:var(--red)}

#topright{position:fixed;top:0;right:0;z-index:31;height:64px;display:flex;align-items:center;gap:clamp(13px,1.7vw,24px);padding:0 clamp(20px,4vw,44px);pointer-events:none}
#topright>*{pointer-events:auto}
.tr-clock{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:currentColor;opacity:.9}
.lang{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em}
.lang button{padding:2px 5px;color:currentColor;opacity:.72;transition:opacity .2s,color .2s}
.lang button.on{opacity:1;color:var(--red)}
.lang .sep{opacity:.6;margin:0 1px}
.tr-sub{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:currentColor;display:inline-flex;align-items:center;transition:color .25s}
.tr-sub:hover{color:var(--red)}

#rail{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 clamp(20px,4vw,44px) 16px;pointer-events:none}
/* the rail spans the full width and crosses light + dark fields at once, so a single
   colour can never be right — a blended pseudo lets the line auto-adapt across its length.
   the red dot rides above it at normal blend so it stays true red the whole way. */
.rail-line{position:relative;height:1px;margin-bottom:11px;background:var(--nav-line);transition:background .28s ease}
#railDot{position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:var(--red);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,43,43,.18)}
.rail-ticks{position:relative;display:flex;justify-content:space-between;gap:6px;pointer-events:auto}
.rail-tick{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:currentColor;opacity:.72;white-space:nowrap;transition:opacity .3s,color .3s;padding:2px 0}
.rail-tick:hover{opacity:1}.rail-tick.on{opacity:1;color:var(--red)}
/* break panels = a small dot in the rail, no label */
.rail-tick--break{padding:0;display:flex;align-items:center;opacity:1}
.rail-tick--break::before{content:'';display:block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.38;transition:background .3s,opacity .3s}
.rail-tick--break:hover::before{opacity:.8}
.rail-tick--break.on::before{background:var(--red);opacity:1}
@media (max-width:760px){.rail-tick{font-size:0;padding:0}.rail-tick::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}.rail-tick.on::before{background:var(--red);opacity:1}}

#hint{position:fixed;right:clamp(20px,4vw,44px);bottom:48px;z-index:29;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:currentColor;opacity:.82;display:flex;align-items:center;gap:10px;transition:opacity .5s,color .28s}
body.has-scrolled #hint{opacity:0;pointer-events:none}
#hint .swipe{display:inline-block;width:24px;height:1px;background:currentColor;position:relative;overflow:hidden}
#hint .swipe::after{content:'';position:absolute;inset:0;background:var(--red);transform:translateX(-100%);animation:swipe 1.8s ease-in-out infinite}
@keyframes swipe{0%{transform:translateX(-100%)}50%{transform:translateX(100%)}100%{transform:translateX(100%)}}

/* --- frame colour = data-nav theme (full contrast). The earlier mix-blend-mode:difference approach
   rendered FAINT on light sections (the blend wasn't inverting against the panel — a stacking/isolation
   boundary; opacity:1 didn't fix it), so frame text was unreadable on paper. body.dataset.nav is set
   from the panel behind the nav region, flipping --nav-fg ink/paper per section → readable everywhere.
   red on/hover states stay true brand red. the logo keeps its data-nav PNG swap. --- */
.hd-line,.tr-clock,.lang button,.lang .sep,.tr-sub,.sound-label,.rail-tick,#hint{color:var(--nav-fg);transition:color .28s ease}
.lang button.on,.rail-tick.on,.tr-sub:hover,.sound:hover .sound-label{color:var(--red)}

/* ============ SLIDE-OUT DRAWERS ============ */
#scrim{position:fixed;inset:0;z-index:40;background:rgba(10,10,12,.6);opacity:0;pointer-events:none;transition:opacity .4s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
body.drawer-open #scrim{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(440px,92vw);background:var(--ink-2);color:var(--paper);border-left:1px solid var(--line-d);transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,6vw,64px);gap:18px}
.drawer.open{transform:translateX(0)}
.drawer-close{position:absolute;top:24px;right:26px;width:34px;height:34px;display:grid;place-items:center;color:var(--stone);transition:color .25s}
.drawer-close:hover{color:var(--red)}
.drawer-close::before,.drawer-close::after{content:'';position:absolute;width:18px;height:1.5px;background:currentColor}
.drawer-close::before{transform:rotate(45deg)}.drawer-close::after{transform:rotate(-45deg)}
.drawer .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:9px}
.drawer h3{font-family:var(--headline);font-weight:900;font-size:clamp(30px,4.2vw,46px);line-height:.88;letter-spacing:.005em;text-transform:uppercase}
.drawer h3 .red{color:var(--red);display:block}
.drawer p{color:var(--concrete-2);font-size:15px;line-height:1.5;max-width:34ch}
.sub-form{display:flex;border:1px solid var(--line-d);margin-top:8px}
.sub-form input{flex:1;background:none;border:0;color:var(--paper);font-family:var(--body);font-size:15px;padding:15px 16px;outline:none}
.sub-form input::placeholder{color:var(--stone)}
.sub-form button{padding:0 20px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--paper);background:var(--red);transition:background .25s}
.sub-form button:hover{background:var(--red-deep)}
.sub-thanks{display:none;color:var(--red);font-family:var(--mono);font-size:13px;letter-spacing:.1em;margin-top:6px}
.drawer.done .sub-form{display:none}.drawer.done .sub-thanks{display:block}
/* honeypot — invisible to humans; bots fill it and get dropped before any POST */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.sub-form.sending button{opacity:.5;pointer-events:none}

/* ending — social row + business contact line (replaces the old contact drawer) */
.end-social{display:flex;flex-wrap:wrap;gap:clamp(14px,1.7vw,28px)}
.end-social a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper);opacity:.72;transition:color .25s,opacity .25s;display:inline-flex;align-items:center}
.end-social a:hover{color:var(--red);opacity:1}
/* platform icons (shown on mobile in place of the text labels — see @media) */
.end-social .si{display:none;align-items:center}
.end-social .si svg{width:23px;height:23px;display:block}
.end-social a[aria-disabled="true"]{opacity:.42;cursor:default;pointer-events:none}
.end-biz{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-top:14px}
.end-biz a{color:var(--stone);transition:color .25s}
.end-biz a:hover{color:var(--red)}

/* ============================================================
   v3 — CANALS-GRAMMAR SECTION SYSTEM (brand fonts, extreme hierarchy)
   GIANT stacked headline · small tidy body column ·
   hard ink/paper/black fields · positional credits · red markers
   ============================================================ */
.panel[data-theme="black"]{background:#000;color:var(--paper);border-left:1px solid var(--line-d)}
body[data-nav="black"]{--nav-fg:var(--paper);--nav-line:var(--line-d)}
body[data-nav="black"] .hd-mark .lg-d{display:block}

/* GIANT stacked headline — the hero, fills the panel height */
.gt{font-family:var(--headline);font-weight:800;text-transform:uppercase;font-size:clamp(60px,20vh,260px);line-height:.8;letter-spacing:-.025em}
.gt .red{color:var(--red)}
.gt .mask{display:block;overflow:hidden}
.gt .ln{display:block;transform:translateY(106%);transition:transform 1.05s var(--ease)}
.panel.is-active .gt .ln{transform:none}
.panel.is-active .gt .mask:nth-child(2) .ln{transition-delay:.07s}
.panel.is-active .gt .mask:nth-child(3) .ln{transition-delay:.14s}
.panel.is-active .gt .mask:nth-child(4) .ln{transition-delay:.21s}
html[data-lang="jp"] .gt{font-size:clamp(44px,13vh,150px);line-height:1.04;letter-spacing:.01em}

/* body column — small, tidy, beside the giant type */
.bc{font-family:var(--body);font-weight:400;font-size:clamp(14px,1.9vh,18px);line-height:1.6;max-width:34ch}
.bc .red{color:var(--red);font-weight:600}
.panel[data-theme="dark"] .bc{color:var(--concrete-2)}
.panel[data-theme="black"] .bc{color:rgba(255,255,255,.8)}
.panel[data-theme="light"] .bc,.panel[data-theme="concrete"] .bc{color:var(--ink);opacity:.82}

/* positional image credit (LEFT / 'title' / source) */
.icr{font-family:var(--mono);font-weight:500;font-size:clamp(9px,1.1vh,11px);line-height:1.75;letter-spacing:.13em;text-transform:uppercase;color:var(--stone)}
.icr .pos{color:var(--red);letter-spacing:.22em}
.icr em{display:block;font-style:italic;text-transform:none;letter-spacing:.02em;opacity:.95}

/* stat marker — clean editorial figure: a big red number with a small mono label beneath (no clunky filled circle) */
.rc{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left;font-family:var(--headline);font-weight:800;color:var(--red);text-transform:uppercase;line-height:.8;font-size:clamp(60px,9.8vh,120px);letter-spacing:-.02em}
.rc small{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(9px,1.15vh,12px);letter-spacing:.2em;color:var(--stone);margin-top:15px;line-height:1.35;max-width:13ch}
.stat-row{display:flex;justify-content:space-between;width:60vh;align-items:flex-start}
.stat-row .rc{font-size:clamp(34px,5.4vh,64px)}
.stat-row .rc small{white-space:nowrap;max-width:none;margin-top:11px}

/* calm chapter number (NOT huge) + label */
.chn{font-family:var(--display);font-weight:700;color:var(--red);font-size:clamp(26px,4vh,54px);line-height:1;letter-spacing:-.03em;display:block}
.chn-lbl{font-family:var(--mono);font-weight:500;font-size:clamp(9px,1.1vh,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--stone);display:block;margin-top:9px}

/* framed photo + layered second image */
.ph{overflow:hidden}
/* drop shadow (canals-style lift) — drop-shadow filter follows the reveal clip-path, so it draws in with the image */
.ph--sh{filter:drop-shadow(0 26px 44px rgba(0,0,0,.42))}
.ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.05) brightness(.95)}
.ph2{overflow:hidden;border:7px solid var(--paper);box-shadow:0 26px 72px rgba(0,0,0,.5)}
.panel[data-theme="dark"] .ph2,.panel[data-theme="black"] .ph2{border-color:#000}
.ph2 img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05) brightness(.94)}

/* thin red rule accent (draws on active) */
.hr{height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.panel.is-active .hr{transform:scaleX(1)}

/* ============================================================
   MOTION + IMAGE REVEALS + BREAK PANEL (canals: slow, smooth, image-led)
   ============================================================ */
/* slow the line + text reveals (override the durations set above) */
.gt .ln{transition:transform 1.6s var(--ease-rv)}
.mask .ln{transition:transform 1.55s var(--ease-rv)}
/* opacity-only reveal: NO transform transition — the render loop sets transform every frame, so a
   transform transition restarts each frame and FREEZES the parallax at the entering offset (the body
   ended up 40px left of the headline). Without it, .rv parallax tracks live and aligns with the titles. */
.rv{transition:opacity 1.45s var(--ease-rv)}
.hr,.r-line,.v-line{transition:transform 1.5s var(--ease-rv)}
/* TIMELINE (04/07) reveal — fast + sequential, latched on .seen so it never replays. Lives with the .tl rules above. */

/* IMAGE REVEAL — slow clip-path curtain, LATCHED on first view (.seen) so it stays open.
   alternate direction per image: .img-up reveals bottom→top, .img-down reveals top→bottom */
.img-up,.img-down{will-change:clip-path;transition:clip-path 2.2s var(--ease-smooth)}
.img-up{clip-path:inset(100% 0 0 0)}
.img-down{clip-path:inset(0 0 100% 0)}
.panel.seen .img-up,.panel.seen .img-down{clip-path:inset(0 0 0 0)}
.opening .img-up{transition-delay:.35s}      /* let the loader clear before the landing reveal starts */

/* full-bleed image BREAK panel — fixed-feel parallax bg (strong depth + subtle zoom via JS) */
.panel--break{background:#000;border-left:1px solid var(--line-d)}
.panel--break .brk-img{overflow:hidden}
.panel--break .brk-img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03) brightness(1.06)}
/* WIDE breaks: SOLID circle caption (placed top-right). SLIM breaks: plain label, no circle. Both on parallax plane 0.09. */
.brk-cap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:clamp(120px,16vh,178px);height:clamp(120px,16vh,178px);border-radius:50%;background:var(--red);box-shadow:0 16px 44px rgba(0,0,0,.42);color:#fff;font-family:var(--headline);font-weight:800;font-size:clamp(10.5px,1.35vh,14px);letter-spacing:0;text-transform:uppercase;line-height:1.12;padding:10px}
.brk-cap .t{color:#0A0A0C;letter-spacing:0;margin-bottom:3px;font-size:clamp(16px,1.95vh,22px);line-height:.94}
.brk-label{font-family:var(--headline);font-weight:800;text-transform:uppercase;font-size:clamp(17px,2.4vh,28px);letter-spacing:.01em;color:#0A0A0C;line-height:1.04}
.brk-label .t{color:var(--red)}

/* back-to-top CTA is mobile-only (desktop navigates via the rail) */
.to-top{display:none}

/* ============ MOBILE — stack the absolutely-composed elements ============ */
/* ============ MOBILE — portrait, native vertical scroll, custom stacked layout ============ */
@media (max-width:760px){
  /* unlock native vertical scroll (desktop locks it for the horizontal engine) */
  html{height:auto;overflow-x:hidden;overflow-y:auto}
  body{height:auto;overflow:visible;cursor:auto;touch-action:auto;overscroll-behavior:auto;-webkit-tap-highlight-color:transparent}
  body.is-loading{overflow:hidden}
  #stage{position:static;inset:auto;height:auto;overflow:visible}
  #track{position:static;width:100%;height:auto;transform:none!important;will-change:auto}

  /* loader keeps its feel, just fits the narrow screen */
  .ld-line{white-space:nowrap;font-size:clamp(24px,7.8vw,34px);line-height:.92}

  /* each panel = a full-width section stacked top to bottom */
  .panel{position:relative!important;width:100%!important;height:auto!important;min-height:100vh;min-height:100svh;transform:none!important;overflow:hidden;border-left:0!important;border-top:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(16px,4vw,24px);padding:clamp(94px,15vh,120px) 24px clamp(74px,11vh,100px)}
  .panel[data-theme="light"]{border-top:0}
  /* themed panels set border-left at higher specificity → kill it on mobile so there's no left sliver (esp. the opening) */
  .panel[data-theme="light"],.panel[data-theme="black"],.panel[data-theme="concrete"]{border-left:0!important}
  .panel:not(.opening):not(.panel--break):not(.panel--fb) .el{margin:0}

  /* composed layers drop into normal flow; no parallax / skew */
  .el{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:auto!important;max-width:100%!important;transform:none!important;text-align:left!important}

  /* portrait reading order: number, title, image, body, timeline, CTA, partner */
  .layer:has(.chn){order:1}
  .layer:has(.ch-title){order:2}
  .layer.ph,.layer.fb-img,.layer.el-img{order:3}
  .layer:has(.ch-body){order:4}
  .layer:has(.tl){order:5}
  .layer:has(.cta){order:6;margin:clamp(16px,4.5vw,26px) 0!important}
  .layer:has(.chips){order:7}
  .layer:has(.end-social){order:8}
  .layer:has(.hr){display:none}
  .ph2{display:none!important}

  /* hero photos = full-width banners */
  .ph,.fb-img,.el-img{width:100%!important;height:auto!important;aspect-ratio:3/2;border:0!important;box-shadow:none!important;filter:none!important;clip-path:none!important}
  .ph img,.fb-img img,.el-img img{width:100%;height:100%;object-fit:cover}
  .panel--fb .fb-img::after{display:none}

  /* type tuned to portrait width */
  .gt{font-size:clamp(54px,17vw,96px);line-height:.85}
  html[data-lang="jp"] .gt{font-size:clamp(40px,12.5vw,76px);line-height:1.04}
  .chn{font-size:clamp(30px,9vw,44px)}
  .chn-lbl{font-size:11px;margin-top:7px}
  .bc{font-size:16px;line-height:1.62;max-width:none!important}
  .cta{font-size:11px;padding:13px 20px}
  .chips{gap:16px}

  /* timeline (04/07) -> vertical spine list */
  .tl{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .tl::before{left:5px;right:auto;top:6px;bottom:6px;width:1.5px;height:auto;transform:scaleY(0);transform-origin:top;transition:transform 2.4s var(--ease-smooth)}
  .panel.seen .tl::before{transform:scaleY(1)}
  .tl-step{width:100%!important;padding:0 0 24px 28px}
  .tl-step:last-child{padding-bottom:0}
  .tl-step::before{top:4px;left:1px}
  .tl-step h4{font-size:clamp(28px,8.5vw,40px);margin:7px 0 6px}
  .tl-step p{font-size:15px;max-width:none}
  .tl--5 .tl-step{width:100%!important}
  .tl-logo{margin-top:11px}

  /* OPENING — full-screen photo + animated wordmark + mission */
  .opening{padding:0!important;justify-content:center}
  .opening .el-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;order:0}
  /* wordmark lifts UP into the sky; tagline sits low over the city (shrunk so it doesn't orphan) */
  .opening-block{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;transform:none!important;z-index:2;width:100%;min-height:100svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding:clamp(104px,16vh,150px) 28px clamp(122px,18vh,168px)}
  .wm-anim{width:52vw;max-width:212px}
  .open-mission{width:auto!important;max-width:34ch;margin-top:auto;text-align:left!important;font-size:clamp(15px,4.2vw,19px);line-height:1.32;color:var(--paper)}

  /* BREAK — FULL-SCREEN photo (top to bottom) + caption */
  .panel--break{padding:0!important;min-height:100svh;justify-content:center;align-items:center}
  .panel--break .brk-img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;clip-path:none!important;transform:none!important}
  .panel--break .brk-img img{clip-path:none!important;transform:none!important}
  .brk-cap,.brk-label{position:relative!important;z-index:2;opacity:1!important;transform:none!important}
  /* full-bleed break/fb images over-bleed 1px so no sub-pixel sliver shows on the left during scroll */
  .panel--break .brk-img,.panel--fb .fb-img{left:-1px!important;right:-1px!important}
  /* CIRCLE caption = small centred seal on the photo (it also carries .el, which the width:100% rule flattens
     into a pill — restore circular dims). Kept small so it doesn't cover the photo. */
  .panel--break .brk-cap{width:clamp(108px,30vw,126px)!important;height:clamp(108px,30vw,126px)!important;max-width:none!important;border-radius:50%!important;margin:0 auto!important;padding:7px!important;text-align:center!important;font-size:14px!important;letter-spacing:0!important;line-height:1.02}
  .panel--break .brk-cap .t{font-size:clamp(18px,5.4vw,23px)!important;letter-spacing:0!important;margin-bottom:2px}
  /* SLIM label caption sits TOP-RIGHT in the sky (Keikyu Line, Tokyo Tower) */
  .panel--break .brk-label{position:absolute!important;top:clamp(78px,11.5vh,112px)!important;right:22px!important;left:auto!important;bottom:auto!important;width:auto!important;max-width:64vw!important;text-align:right!important;padding:0!important;font-size:clamp(19px,5.4vw,25px)!important;line-height:1.02;text-shadow:0 1px 16px rgba(255,255,255,.35)}

  /* 08 MAINTENANCE = centred statement on mobile too (matches desktop) */
  .panel[data-slug="maintenance"]{align-items:center}
  .panel[data-slug="maintenance"] .el{text-align:center!important}

  /* ENDING is the LAST panel — its scroll-linked reveal can't complete (nothing to scroll past),
     so force its content fully visible on mobile (else headline + socials + back-to-top stay dim) */
  .panel[data-slug="ending"] .rv{opacity:1!important;transform:none!important}
  .panel[data-slug="ending"] .ch-title .ln{transform:none!important}

  /* social row = platform ICONS on one compact strip (text labels wrap to 2 lines — Mike) */
  .end-social{flex-wrap:nowrap!important;gap:22px;align-items:center}
  .end-social .st{display:none}
  .end-social .si{display:inline-flex}
  .end-social a{opacity:.82}

  /* BACK TO TOP — shown only on mobile, at the very bottom of the ending panel */
  .to-top{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);background:none;border:0;padding:8px 0;cursor:pointer}
  .to-top .ar{font-size:14px;line-height:1;transform:translateY(-1px)}

  /* gentle slide-up on reveal (no render loop to fight it here) */
  .rv{transform:translateY(22px);transition:opacity 1s var(--ease-rv),transform 1s var(--ease-rv)}
  .panel.is-active .rv{transform:none}

  /* drop the horizontal-only chrome */
  #rail,#hint{display:none!important}
  .tr-clock{display:none}
  #hd{height:56px}.hd-mark img{height:26px}
  #topright{height:56px;gap:14px}
  .hd-line{font-size:11px;letter-spacing:.18em}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}.mask .ln{transform:none;transition:none}
  .r-line,.v-line,.tl::before{transform:none}.el-img.reveal{clip-path:none}
  .tl-step,.wm-anim .wmL{animation:none;transition:none}#hint .swipe::after{animation:none}
}

/* (07 VISA reverted to the standard chapter panel + static .tl timeline — strip/#vsRail CSS removed) */

/* ---------- custom cursor: big difference disc + trailing red brand ring (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
  html.has-cur, html.has-cur *{cursor:none!important}
  #cur,#curR,#curD{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;will-change:transform;transform:translate3d(-300px,-300px,0);contain:layout style size}
  #cur{width:36px;height:36px;background:#fff;mix-blend-mode:difference;z-index:999998}
  #curR{width:50px;height:50px;border:1.5px solid var(--red);z-index:999997}#curD{width:4px;height:4px;background:var(--red);z-index:999999}
}
@media (hover:none),(pointer:coarse){ #cur,#curR,#curD{display:none} }

.chip img[src*="robertwalters"]{height:clamp(26px,3.4vh,31px);max-width:62px}
.chip img[src*="sakurahouse"]{height:clamp(25px,3.3vh,31px)}
.chip img[src*="samurai"]{height:clamp(25px,3.3vh,31px);max-width:130px}

.chip img[src*="youtube"]{height:clamp(19px,2.6vh,23px)}


/* ============================================================
   UNIVERSAL DIFFERENCE CHROME — 2026-07-10
   Logo + header text + footer nav blend against the page via
   mix-blend-mode:difference (white source stays legible on any panel).
   The one brand red kept = the logo dot, carried as a separate
   non-blended overlay (.hd-dot) so it never flips to cyan.
   ============================================================ */
#hd,#topright{mix-blend-mode:difference}
#hd,#topright,
.hd-line,.tr-clock,.lang button,.lang .sep,.tr-sub{color:#fff!important}

/* logo: always the WHITE dotless wordmark (JS also swaps src as backup) */
.hd-mark .lg-d{display:block!important;content:url(../logos/wm-nodot-white.png)}
.hd-mark .lg-l{display:none!important}
body[data-nav="light"] .hd-mark .lg-d,
body[data-nav="concrete"] .hd-mark .lg-d,
body[data-nav="black"] .hd-mark .lg-d{display:block!important}

/* red dot over the "i" — separate fixed layer, NOT blended → true red always */
.hd-dot{position:fixed;z-index:32;border-radius:50%;background:var(--red);
  pointer-events:none;opacity:0;transition:opacity .3s ease;will-change:transform}
.hd-dot.show{opacity:1}

/* lang active + hovers: red inverts under difference, so use white + weight
   (matches the nf-tab pattern: white difference text, red kept only as a dot) */
.lang button{opacity:.55}
.lang button.on{color:#fff!important;opacity:1}
/* difference layer does NOT render the active lang — only the #topright-red overlay does,
   so the two copies don't ghost/offset (looked "covered" on mobile) */
#topright .lang button.on{color:transparent!important}
.tr-sub:hover,.lang button:hover{color:#fff!important;opacity:1}

/* footer nav adopts the same difference treatment */
.end-social a,.end-biz,.end-biz a,.to-top{mix-blend-mode:difference}
.end-social a,.end-biz,.end-biz a,.to-top{color:#fff!important}
.end-social a:hover,.end-biz a:hover,.to-top:hover{color:#fff!important;opacity:1}

/* ---- RED ACCENT LAYER — a clone of #topright that sits ABOVE the difference
   blend, un-blended, so the ACTIVE language + the clock COLONS read true red on
   every panel. All glyphs transparent except those two. Built + synced by JS. ---- */
#topright-red{position:fixed;top:0;right:0;z-index:33;height:64px;display:flex;align-items:center;
  gap:clamp(13px,1.7vw,24px);padding:0 clamp(20px,4vw,44px);pointer-events:none;mix-blend-mode:normal}
#topright-red *{color:transparent!important;text-decoration:none!important}
#topright-red .jstr{color:var(--red)!important}          /* colons only (digits are spaces) */
#topright-red .lang button.on{color:var(--red)!important}
@media(max-width:760px){#topright-red{height:56px}#topright-red .tr-clock{display:none}}

/* ---- FOOTER RAIL (#rail): scrolling nav line + section text adopt difference;
   the red progress DOT + the active section stay true red via a non-blended
   #rail-red overlay (cloned + synced by JS). Rail is hidden on mobile. ---- */
#rail{mix-blend-mode:difference}
#rail,#rail .rail-tick{color:#fff!important}
#rail .rail-line{background:rgba(255,255,255,.3)!important}
#rail #railDot{background:transparent!important;box-shadow:none!important}
#rail .rail-tick.on{color:#fff!important}
#rail .rail-tick--break.on::before{background:#fff!important}
#rail-red{position:fixed;left:0;right:0;bottom:0;z-index:31;padding:0 clamp(20px,4vw,44px) 16px;pointer-events:none;mix-blend-mode:normal}
#rail-red *{color:transparent!important}
#rail-red .rail-line{background:transparent!important}
#rail-red .rd{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);background:var(--red)!important;box-shadow:0 0 0 4px rgba(255,43,43,.18)!important}
#rail-red .rail-tick.on{color:var(--red)!important}
#rail-red .rail-tick--break.on::before{background:var(--red)!important;opacity:1}
@media(max-width:760px){#rail-red{display:none!important}}

/* ---- LEFT-EDGE SLIVER FIXES (2026-07-10) ----
   Desktop: the opening panel sits at x=0 with a 1px border-left = a hairline at the
   viewport edge on the START page. It's full-viewport (--w:100vw) so it needs no seam. */
.panel.opening{border-left:0!important}
/* Mobile: full-bleed images sat exactly at x=0/x=width, so sub-pixel scroll revealed a
   1px of the panel bg. Over-bleed 1px each side. (width:100% earlier overrode right:-1px
   → the real fix is a wider width, not right positioning.) */
@media(max-width:760px){
  .opening .el-img,.panel--break .brk-img{
    left:-1px!important;right:auto!important;width:calc(100% + 2px)!important;max-width:none!important;
  }
}

/* ---- MOBILE LEFT-EDGE SEAM (real fix, 2026-07-10) ----
   Full-bleed images carry will-change:clip-path (reveal anim) → each is a standalone GPU
   layer. Inside an overflow:hidden panel, its composited edge sub-pixel-seams against the
   panel bg at x=0 during native scroll on iOS (a 1px sliver, paper-coloured on the opening).
   Over-bleeding the image can't fix a compositing seam. De-promote on mobile so the image
   paints in the panel's own layer — no separate layer, no clip-boundary seam. */
@media(max-width:760px){
  .img-up,.img-down,.el-img,.brk-img,.fb-img,.el-img img{will-change:auto!important}
  /* NOTE: opening panel keeps its paper bg — the black hero wordmark must stay visible while
     the opening image is still loading (dark bg made it invisible). The seam is fixed by the
     filter-removal above, so no dark-bg backstop needed. */
}

/* ---- MOBILE SCROLL SMOOTHNESS (2026-07-10) ----
   The real culprit behind the janky momentum scroll + the transient left seam: the <img>s
   still carry CSS filters on mobile (line ~65 etc. — the mobile rule only stripped the filter
   off the .el-img WRAPPER, not the image). A filter forces a re-composite on every paint, so
   during momentum scroll the compositor thrashes (jitter/"stuck") and leaves a sub-pixel seam
   that snaps away when it settles. Drop filters on mobile → cheap static bitmaps → smooth. */
@media(max-width:760px){
  .el-img img,.brk-img img,.fb-img img,.sp-img img,.ph img,.ph2 img,.iframe img{filter:none!important}
}

/* FIX: the #rail-red overlay is a clone of #rail; the global `.rail-ticks{pointer-events:auto}`
   re-enabled clicks on the clone's (handler-less) ticks, so they sat on top of the real rail and
   swallowed every section-jump click. Force the whole overlay non-interactive. */
#rail-red,#rail-red *{pointer-events:none!important}

/* rail dot now snaps to the ACTIVE tick's exact centre (set in JS updateRail); glide it there */
#railDot,#rail-red .rd{transition:left .45s var(--ease)}