/* site.css: the type, the journey's sections and the fixed layers (build spec §11).
   The journey's numbers live here (--d-open / --dwell / --travel / --d-end, in screens); journey.js measures them.
   Sizes are tied to the large viewport (100lvh): the browser toolbar sliding never resizes or moves anything. */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-roman.woff2') format('woff2');font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-italic.woff2') format('woff2');font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:'Zen Old Mincho';src:url('../fonts/zen-old-mincho-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --site-css:1;   /* sentinel: main.js reloads once if a stale HTML got another stylesheet */
  --bg:#b9dbea; --ink:#0f1a5a; --peach:#ffc27c; --mauve:#8f80c2; --ultra:#1f3cff;
  --night:#0d0f15; --night-bg:#0b1030;
  --fg:#0f1a5a; --fg-2:rgba(15,26,90,.9); --fg-3:rgba(15,26,90,.76); --rule:rgba(15,26,90,.22);
  --halo:rgba(226,241,248,.55); --sheet-rgb:226,241,248;
  --spectrum:linear-gradient(90deg,var(--peach),var(--mauve) 55%,var(--ultra));
  --serif-en:'Fraunces','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --serif-ja:'Fraunces','Zen Old Mincho','Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP',serif;
  --gutter:clamp(20px,4.4vw,64px);
  --top:calc(env(safe-area-inset-top,0px) + 18px);
  --base:calc(env(safe-area-inset-bottom,0px) + clamp(44px,8.6vh,84px));
  --measure:388px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --H:100vh; --d-open:.35; --dwell:.9; --travel:1.3; --d-end:.5;
  color-scheme:light only;
}
@supports (height:100lvh){:root{--H:100lvh}}
/* night tokens: the night's copy, and the chrome whenever the sky behind it is dark (main.js: html.ink-light) */
.ink-light .chrome,[data-tone="night"]{
  --fg:#ece9f8; --fg-2:rgba(236,233,248,.86); --fg-3:rgba(214,208,240,.72); --rule:rgba(236,233,248,.24);
  --halo:rgba(10,12,20,.5); --sheet-rgb:13,15,21;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
  scroll-padding-top:0;background-color:var(--bg);transition:background-color .8s ease}
html.is-night{background-color:var(--night-bg)}
body{margin:0;font-family:var(--serif-en);line-height:1.5;color:var(--fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-optical-sizing:auto;font-kerning:normal}
:lang(en){font-family:var(--serif-en)}
:lang(ja){font-family:var(--serif-ja)}
h1,h2,p{margin:0;font-weight:400}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible{outline:2px solid var(--ultra);outline-offset:3px;border-radius:2px}
/* 100svh probe: main.js reads it for framing only (the visible height while the browser toolbar is shown) */
.svh{position:absolute;left:0;top:0;width:0;height:100vh;height:100svh;visibility:hidden;pointer-events:none}

/* ---------- fixed layers (all sized to the large viewport: the toolbar never resizes them) ---------- */
.aura,#gl,.grain,.cut{position:fixed;left:0;top:0;width:100%;height:100vh;height:var(--H)}
.aura{z-index:0;background-color:var(--bg);background-repeat:no-repeat}
#gl{z-index:1;display:block;opacity:0;transition:opacity .9s ease}
.gl #gl{opacity:1}
.grain{z-index:2;pointer-events:none;opacity:.09;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cut{z-index:4;pointer-events:none;background:#dcecf3;opacity:0;transition:opacity .45s ease}
.is-night .cut{background:var(--night-bg)}
.is-cut .cut{opacity:1;transition:opacity .16s ease}
/* the WebGL context was lost: the current picture, still, where the scene was */
.still{position:fixed;z-index:1;left:50%;top:50%;width:auto;height:min(80vh,110vw);transform:translate(-50%,-50%);pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}

/* ---------- the journey: one section per station ----------
   height = (dwell + travel) screens; the stage is sticky for (dwell + travel - 1) >= dwell screens, so the copy never
   moves while it is shown. .dwell-end marks where the travel starts, .anchor where #links land (journey.js) */
main,.s-end{position:relative;z-index:3}
.station{--d:var(--dwell);position:relative;height:calc((var(--d) + var(--travel)) * var(--H))}
.s-open{--d:var(--d-open)}
.s-end{--d:var(--d-end);height:calc((var(--d) + 1) * var(--H))}
.dwell-end{position:absolute;left:0;top:calc(var(--d) * var(--H));width:1px;height:1px;pointer-events:none}
.anchor{position:absolute;left:0;top:calc(var(--d) * .5 * var(--H));width:1px;height:1px}
.s-open .anchor{top:0}
.s-end .anchor{top:calc(var(--d) * var(--H))}
.plate{display:none;margin:0}
/* the halo of a copy block reaches past the screen edge: clip it here, or the page would scroll sideways (clip, not
   hidden, where supported: a focused link must not be able to scroll the stage) */
.stage{position:sticky;top:0;height:100vh;height:var(--H);pointer-events:none;overflow:hidden;overflow:clip}
.stage>*{pointer-events:auto}

/* ---------- copy block: one per station, both languages stacked in one grid cell ----------
   the cell is as tall as the longer language, so switching never changes a size (nothing moves); the inactive
   language is visibility:hidden, which also takes it out of the accessibility tree and find-in-page */
.copy{position:absolute;left:var(--gutter);bottom:var(--base);width:min(var(--measure),36vw);color:var(--fg)}
.copy[data-side="end"]{left:auto;right:var(--gutter)}
.copy::before{content:"";position:absolute;z-index:-1;inset:-90px -110px -80px -140px;pointer-events:none;
  background:radial-gradient(closest-side,var(--halo),transparent);opacity:0;transition:opacity .5s var(--ease)}
.station.is-on .copy::before{opacity:.9;transition:opacity .9s var(--ease)}
.tt{display:grid}
.tt>*{grid-area:1/1;align-self:end;transition:opacity .5s ease .12s,visibility 0s}
[data-lang="ja"] .tt>[lang="en"],[data-lang="en"] .tt>[lang="ja"],
[data-lang="ja"] .t[lang="en"],[data-lang="en"] .t[lang="ja"]{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}

.kicker{display:flex;align-items:center;gap:14px;font-family:var(--serif-en);font-size:10.5px;line-height:1.4;font-weight:400;
  font-variation-settings:"SOFT" 100,"WONK" 0,"wght" 460;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.kicker::before{content:"";flex:none;width:28px;height:1px;background:var(--spectrum)}
.h{margin-top:14px;color:var(--fg);text-wrap:balance}
.h:lang(en){font-family:var(--serif-en);font-size:21px;line-height:1.24;letter-spacing:-.004em;font-variation-settings:"SOFT" 100,"WONK" 0,"wght" 330}
.h:lang(ja){font-family:var(--serif-ja);font-size:16.5px;line-height:1.8;letter-spacing:.08em;font-weight:500;font-variation-settings:"SOFT" 100,"wght" 380;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-autospace:normal}
.h .open{margin-left:-.5em}
.body{margin-top:18px;color:var(--fg-2)}
.h+.body{margin-top:16px}
.kicker+.body{margin-top:20px}
.body p{margin:0}
.body:lang(ja){font-family:var(--serif-ja);font-size:14px;line-height:2;letter-spacing:.06em;font-weight:500;font-variation-settings:"SOFT" 100,"wght" 360;
  word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty;hanging-punctuation:allow-end;text-autospace:normal;
  font-variant-numeric:lining-nums proportional-nums}
.body:lang(ja) p+p{margin-top:.85em}
.body:lang(en){font-family:var(--serif-en);font-size:14.5px;line-height:1.66;letter-spacing:.003em;font-variation-settings:"SOFT" 100,"WONK" 0,"wght" 350;
  text-wrap:pretty;hanging-punctuation:first;font-variant-numeric:lining-nums proportional-nums}
.body:lang(en) p+p{margin-top:.75em}
.sig{margin-top:20px;font-family:var(--serif-en);font-style:italic;font-size:13.5px;line-height:1.4;letter-spacing:.01em;color:var(--fg-3);
  font-variation-settings:"SOFT" 100,"WONK" 1,"wght" 340}
br.lg{display:inline}

/* ---------- wordmark (opening / closing) ---------- */
.wordmark{position:absolute;left:0;right:0;bottom:var(--base);text-align:center;color:var(--fg)}
.wordmark .name{display:block;font-family:var(--serif-en);font-size:17px;line-height:1.2;letter-spacing:.035em;font-variation-settings:"SOFT" 100,"WONK" 0,"wght" 330}
.s-end .wordmark{bottom:calc(var(--base) - 8px)}
.link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:32px;padding:0 4px;font-family:var(--serif-en);font-size:12px;letter-spacing:.06em;
  font-variation-settings:"SOFT" 100,"wght" 400;color:var(--fg-2);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 4px calc(100% - 7px)/calc(100% - 8px) 1px no-repeat;transition:color .3s}
.link svg{width:8px;height:8px;flex:none;opacity:.7}
@media (hover:hover){.link:hover{color:var(--fg)}}
/* the opening keeps a place for the Sound control just under the name (main.js measures it; the button itself lives
   in the chrome row and glides up to it) */
.sound-slot{display:block;width:44px;height:44px;margin:6px auto 0}
.cue{position:absolute;left:50%;top:calc(100% + 6px);width:1px;height:28px;margin-left:-.5px;overflow:hidden;background:var(--rule)}
.cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:var(--fg);transform:translateY(-100%);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- entrance / exit (classes from main.js) ---------- */
.blk>*,.wordmark>*{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.station.is-on .blk>*,.station.is-on .wordmark>*{opacity:1;transform:none;transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
.station.is-on .blk>:nth-child(2),.station.is-on .wordmark>:nth-child(2){transition-delay:.09s}
.station.is-on .blk>:nth-child(3),.station.is-on .wordmark>:nth-child(3){transition-delay:.18s}
.station.is-on .blk>:nth-child(4){transition-delay:.27s}
html:not(.gl) .blk>*,html:not(.gl) .wordmark>*{opacity:1;transform:none}        /* WebGL slow or absent: copy is simply there */
.js:not(.is-ready) .blk>*,.js:not(.is-ready) .wordmark>*{opacity:0}

/* ---------- chrome row: progress | sound | language ----------
   the language comes first in the DOM (tab order follows the opening's reading order: the top, then the wordmark's
   Sound); the grid puts each in its column */
.chrome{position:fixed;z-index:6;left:0;right:0;top:var(--top);height:44px;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;pointer-events:none;color:var(--fg);opacity:0;transition:opacity .9s ease .3s}
.chrome>.progress{grid-area:1/1}
.chrome>.sound{grid-area:1/2}
.chrome>.lang{grid-area:1/3}
.is-ready .chrome{opacity:1}
.is-ready .chrome .sound,.is-ready .chrome .lang{pointer-events:auto}
.chrome *,.chrome *::before{transition:color 1.2s var(--ease),background-color 1.2s var(--ease),border-color 1.2s var(--ease)}
.progress{justify-self:start;display:flex;align-items:center;gap:12px;margin:0;font-family:var(--serif-en);font-size:10.5px;line-height:1;letter-spacing:.08em;
  font-variation-settings:"SOFT" 100,"wght" 420;font-variant-numeric:tabular-nums lining-nums;color:var(--fg-3)}
.chrome .progress{opacity:0;transition:opacity .9s var(--ease),color 1.2s var(--ease)}
.show-progress .chrome .progress{opacity:1}
.progress .cur{color:var(--fg)}
.progress .track{position:relative;width:40px;height:1px;background:var(--rule);overflow:hidden}
.progress .track b{position:absolute;inset:0;background:var(--fg);opacity:.7;transform-origin:0 50%;transform:scaleX(var(--p,.3333))}
.chrome .progress .track b{transition:transform .8s var(--ease),background-color 1.2s var(--ease)}
.sound{justify-self:center;position:relative;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--fg);cursor:pointer;
  display:grid;place-items:center;-webkit-user-select:none;user-select:none}
/* Sound: under the wordmark on the opening, then a 2-D glide to the top centre, where it stays (closing included) */
.chrome .sound{transition:transform .6s var(--ease),color 1.2s var(--ease)}
.at-open .chrome .sound{transform:translate(var(--open-dx,0px),var(--open-dy,0px))}
.sound::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid var(--rule)}
.sound .bars{display:flex;align-items:center;gap:2.5px;height:11px}
.sound .bars i{display:block;width:1.5px;height:11px;border-radius:1px;background:currentColor}
.chrome .sound .bars i{transition:transform .6s var(--ease),opacity .3s,background-color 1.2s var(--ease)}
.sound .bars i:nth-child(1){transform:scaleY(.28)}
.sound .bars i:nth-child(2){transform:scaleY(.55)}
.sound .bars i:nth-child(3){transform:scaleY(.4)}
.sound .bars i:nth-child(4){transform:scaleY(.22)}
.sound[data-state="playing"] .bars i{animation:eq 1.4s ease-in-out infinite alternate}
.sound[data-state="playing"] .bars i:nth-child(2){animation-delay:-.5s}
.sound[data-state="playing"] .bars i:nth-child(3){animation-delay:-.9s}
.sound[data-state="playing"] .bars i:nth-child(4){animation-delay:-.2s}
.sound[data-state="pending"] .bars i{opacity:.5}
.sound[hidden]{display:none}
@keyframes eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@media (hover:hover){.sound:hover::before{border-color:var(--fg-3)}}
.sound:active::before{background-color:var(--rule)}
.sound:focus-visible{outline:none}
.sound:focus-visible::before{border-color:var(--fg);box-shadow:0 0 0 2px var(--ultra)}
.lang{justify-self:end;display:flex;align-items:center;margin-right:-10px;font-family:var(--serif-en);font-size:10.5px;line-height:1;letter-spacing:.16em;
  font-variation-settings:"SOFT" 100,"wght" 440}
.lang button{min-width:36px;height:44px;padding:0 10px;margin:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:var(--fg-3);cursor:pointer}
.lang button+button{position:relative}
.lang button+button::before{content:"";position:absolute;left:-1px;top:50%;width:1px;height:10px;margin-top:-5px;background:var(--rule)}
.lang button[aria-pressed="true"]{color:var(--fg);cursor:default}
@media (hover:hover){.lang button:hover{color:var(--fg)}}
.lang button:focus-visible{outline:2px solid var(--ultra);outline-offset:-6px;border-radius:4px}

/* ---------- breakpoints (order matters) ---------- */
@media (max-width:1320px) and (min-aspect-ratio:9/10){
  :root{--measure:372px}
  .body:lang(ja){font-size:13.5px;line-height:1.95} .body:lang(en){font-size:14px}
}
@media (min-width:1680px) and (min-height:940px){
  :root{--measure:416px}
  .kicker,.progress,.lang{font-size:11px} .h:lang(en){font-size:23px} .h:lang(ja){font-size:17.5px}
  .body:lang(ja){font-size:15px} .body:lang(en){font-size:15.5px} .sig{font-size:14.5px} .wordmark .name{font-size:18px}
}
/* portrait phones and tablets: the copy rides on a soft sheet that runs to the 100lvh edge */
@media (max-aspect-ratio:9/10),(max-width:680px) and (orientation:portrait){
  :root{--gutter:22px;--top:calc(env(safe-area-inset-top,0px) + 6px);--chrome-h:0px;
    --under:max(var(--chrome-h),env(safe-area-inset-bottom,0px));--base:calc(var(--under) + 26px);--dwell:.8;--travel:1.2}
  @supports (height:100lvh){:root{--chrome-h:calc(100lvh - 100svh)}}
  .copy,.copy[data-side="end"]{left:0;right:0;width:auto;bottom:0;padding:84px var(--gutter) var(--base)}
  .copy::before{inset:0;background:linear-gradient(to bottom,rgba(var(--sheet-rgb),0),rgba(var(--sheet-rgb),.27) 28px,rgba(var(--sheet-rgb),.63) 56px,rgba(var(--sheet-rgb),.9) 84px)}
  .station.is-on .copy::before{opacity:1}
  .progress{color:var(--fg-2)}   /* the pictures reach the top of a phone screen: the quiet .76 ink measured 3.9:1 there */
  .kicker{font-size:10px;gap:12px} .kicker::before{width:22px}
  .h{margin-top:12px} .h:lang(en){font-size:18px;line-height:1.26} .h:lang(ja){font-size:15px;line-height:1.75;letter-spacing:.06em} .h .open{margin-left:0}
  .body,.h+.body{margin-top:12px} .kicker+.body{margin-top:14px}
  .body:lang(ja){font-size:13px;line-height:1.88;letter-spacing:.04em} .body:lang(ja) p+p{margin-top:.6em}
  .body:lang(en){font-size:13.5px;line-height:1.58} .body:lang(en) p+p{margin-top:.6em}
  .sig{margin-top:14px;font-size:12.5px}
  .s-open .wordmark{bottom:calc(var(--base) + 30px)} .s-end .wordmark{bottom:var(--base)} .wordmark .name{font-size:15px}
  .cue{height:22px}
  br.lg{display:none}
}
@media (max-aspect-ratio:9/10) and (min-width:600px){
  :root{--gutter:48px}
  .copy,.copy[data-side="end"]{padding-right:max(var(--gutter),calc(100% - var(--gutter) - 420px))}
  .body:lang(ja){font-size:14px;line-height:1.95} .body:lang(en){font-size:14.5px;line-height:1.62} .h:lang(en){font-size:20px} .h:lang(ja){font-size:16px}
}
@media (max-width:360px) and (max-aspect-ratio:9/10){:root{--gutter:18px} .body:lang(ja){font-size:12.5px} .body:lang(en){font-size:13px}}
/* phones held sideways: side by side, copy centred between the chrome and the toolbar */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  :root{--gutter:max(22px,calc(env(safe-area-inset-left,0px) + 6px),calc(env(safe-area-inset-right,0px) + 6px));--top:calc(env(safe-area-inset-top,0px) + 4px);
    --chrome-h:0px;--base:calc(max(var(--chrome-h),env(safe-area-inset-bottom,0px)) + 16px);--measure:340px;--dwell:.8;--travel:1.2}
  @supports (height:100lvh){:root{--chrome-h:calc(100lvh - 100svh)}}
  .copy{top:56px;bottom:var(--base);width:min(var(--measure),44vw);display:flex;flex-direction:column;justify-content:center}
  .copy::before{inset:-40px -80px -40px -60px}
  .kicker{font-size:9.5px;gap:10px} .kicker::before{width:20px}
  .h{margin-top:8px} .h:lang(en){font-size:16px;line-height:1.24} .h:lang(ja){font-size:13.5px;line-height:1.7;letter-spacing:.06em}
  .body,.h+.body,.kicker+.body{margin-top:9px}
  .body:lang(ja){font-size:12px;line-height:1.78;letter-spacing:.03em} .body:lang(ja) p+p{margin-top:.4em}
  .body:lang(en){font-size:12.5px;line-height:1.5} .body:lang(en) p+p{margin-top:.45em}
  .sig{margin-top:9px;font-size:11.5px}
  .s-open .wordmark,.s-end .wordmark{bottom:var(--base)} .wordmark .name{font-size:14px} .link{margin-top:4px}
  .sound-slot{margin-top:2px}
  .cue{display:none}   /* 390 px of height: the name and the Sound control are enough */
}
@media (pointer:coarse){
  html{touch-action:manipulation}
  .grain{mix-blend-mode:normal;opacity:.045}   /* no full-screen blend layer over WebGL on phones */
  .stage,.chrome{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .link{-webkit-touch-callout:default}
}
.ios .grain{mix-blend-mode:normal;opacity:.045}
@media (prefers-reduced-motion:reduce){
  .blk>*,.wordmark>*,.station.is-on .blk>*,.station.is-on .wordmark>*{transform:none!important;transition-duration:.3s!important;transition-delay:0s!important}
  .sound .bars i,.cue::after{animation:none!important}
  .chrome .sound{transition:color 1.2s var(--ease)}
  #gl{transition-duration:.01s}
}
@media (prefers-contrast:more){:root{--fg-2:var(--fg);--fg-3:var(--fg)} .station.is-on .copy::before{opacity:1}}

/* ---------- no WebGL / no JS: a quiet stacked page, every image and word visible ---------- */
.no-gl .station,html:not(.js) .station{height:auto;min-height:100vh;padding:14vh var(--gutter)}
.no-gl .stage,html:not(.js) .stage{position:relative;height:auto}
.no-gl .copy,.no-gl .wordmark,html:not(.js) .copy,html:not(.js) .wordmark{position:relative;left:auto;right:auto;top:auto;bottom:auto;
  width:min(30rem,100%);margin:0 auto;padding:0;display:block}
.no-gl .copy::before,html:not(.js) .copy::before,.no-gl .cue,html:not(.js) .cue,.no-gl #gl,html:not(.js) #gl,.no-gl .sound-slot,html:not(.js) .sound-slot{display:none}
.no-gl .blk>*,.no-gl .wordmark>*,html:not(.js) .blk>*,html:not(.js) .wordmark>*{opacity:1!important;transform:none!important}
.no-gl .plate,html:not(.js) .plate{display:block;width:min(72vw,26rem);margin:0 auto 2.4rem}
.no-gl .plate img,html:not(.js) .plate img{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.no-gl .is-dark,html:not(.js) .is-dark{background:var(--night)}
.no-gl .chrome .sound{transform:none}
.no-gl .chrome .progress,html:not(.js) .chrome .progress,html:not(.js) .sound,html:not(.js) .lang{display:none}
html:not(.js) .chrome{opacity:1}