:root { --ink:#e9f3f5; --dim:rgba(233,243,245,.88); --line:rgba(233,243,245,.3); --sea:#0d2a35; }
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { background:var(--sea); color:var(--ink); font-family:"Zen Kaku Gothic New",system-ui,sans-serif; -webkit-text-size-adjust:100%; }
body { background:var(--sea); -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.mono { font:11px/1.6 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:fixed; z-index:20; left:16px; top:-60px; padding:10px 14px; background:var(--ink); color:var(--sea); border-radius:6px; font-size:13px; }
.skip:focus { top:12px; }
#sea { position:fixed; inset:0; width:100%; height:100%; height:100lvh; display:block; z-index:0; }
body.static #sea { display:none; }
.still { display:none; }
body.static .still { display:block; position:absolute; inset:0; }
.still img { width:100%; height:100%; object-fit:cover; display:block; }
.still-off { opacity:0; transition:opacity .4s; } body.dark .still-off { opacity:1; }

.nav { position:fixed; z-index:10; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:baseline; padding:22px 32px; font:12px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; text-shadow:0 1px 10px rgba(0,10,16,.5); }
.brand { font:600 15px/1 "Fraunces",serif; letter-spacing:.16em; color:var(--ink); text-decoration:none; }
.lang { text-decoration:none; padding:12px 6px; margin:-12px -6px; }
.brand:focus-visible, .lang:focus-visible, .rail a:focus-visible, .note a:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }

section, article { position:relative; z-index:1; }
.pin { position:relative; height:100vh; height:100svh; overflow:hidden; }
.step .pin, .close .pin { position:sticky; top:0; }
.hero { height:100vh; height:100svh; }
.step { height:170vh; } .close { height:150vh; }

/* HERO */
.frame { position:absolute; inset:64px 32px 32px; border:1px solid var(--line); border-radius:4px; pointer-events:none; }
.hero .copy { position:absolute; left:64px; top:14vh; max-width:600px; text-shadow:0 2px 20px rgba(0,10,16,.55); }
.h { font-family:"Shippori Mincho",serif; font-weight:700; font-size:clamp(46px,5.6vw,86px); line-height:1.25; letter-spacing:.06em; margin-top:12px; }
.h span, .h2 span, .h3 span { white-space:nowrap; }
.en .h { font-family:"Fraunces",serif; font-weight:600; letter-spacing:0; line-height:1.05; }
.p { margin-top:20px; font-size:14px; line-height:2; color:var(--dim); max-width:30em; }
.en .p { font-size:15px; line-height:1.6; }
.facts { display:flex; gap:28px; margin-top:24px; opacity:0; transform:translateY(6px); transition:opacity 1.2s, transform 1.2s; }
body.seen .facts { opacity:1; transform:none; } body:not(.seen) .facts { transition:opacity .25s, transform .25s; }
.facts div { border-top:1px solid var(--line); padding-top:10px; min-width:120px; }
.facts dt { font:600 22px/1 "Fraunces",serif; margin-bottom:6px; } .facts dd { font-size:12px; color:var(--dim); }
.switch { position:absolute; left:64px; bottom:64px; display:flex; align-items:center; gap:16px; background:none; border:0; color:inherit; cursor:pointer; padding:8px; margin:-8px; min-height:44px; font:inherit; }
.switch:focus-visible { outline:2px solid var(--ink); outline-offset:6px; border-radius:24px; }
.sw { width:64px; height:34px; border-radius:20px; border:1px solid var(--ink); position:relative; background:rgba(233,243,245,.12); transition:background .4s, border-color .4s; }
.sw i { position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:#f4f0e2; box-shadow:0 0 18px rgba(255,240,200,.7); transition:left .35s, background .35s, box-shadow .35s; }
.switch[aria-pressed="false"] .sw { background:transparent; border-color:var(--line); }
.switch[aria-pressed="false"] .sw i { left:34px; background:#2b4b55; box-shadow:none; }
.status { position:absolute; right:64px; bottom:66px; text-align:right; }
.foot { position:absolute; left:64px; right:64px; bottom:10px; font-size:10px; letter-spacing:.06em; text-transform:none; opacity:.85; }

/* 02 OBSERVATION */
.rail { position:fixed; z-index:6; left:32px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .5s; pointer-events:none; }
body.in-obs .rail { opacity:1; pointer-events:auto; }
.rail ol { list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:4px; }
.rail a { display:flex; gap:10px; align-items:center; text-decoration:none; padding:8px 0; opacity:.5; min-height:32px; }
.rail a::before { content:''; width:22px; height:1px; background:currentColor; }
.rail a[aria-current="step"] { opacity:1; }
.cap { position:absolute; max-width:440px; text-shadow:0 2px 18px rgba(0,10,16,.65); }
.h3 { font:700 clamp(34px,3.6vw,54px)/1.3 "Shippori Mincho",serif; letter-spacing:.05em; margin-top:10px; }
.en .h3 { font:600 clamp(34px,3.6vw,52px)/1.08 "Fraunces",serif; letter-spacing:0; }
.cap .p { margin-top:16px; }
/* three scenes, three placements (not one repeated layout) */
.step-arm .cap { left:120px; bottom:12vh; }
.step-eye .cap { left:120px; top:16vh; }
.step-under .cap { right:64px; bottom:12vh; text-align:right; } .step-under .cap .p { margin-left:auto; }

/* 03 CLOSING */
.close .chap { position:absolute; left:0; right:0; top:16vh; text-align:center; }
.h2 { font:500 clamp(28px,3vw,44px)/1.5 "Shippori Mincho",serif; letter-spacing:.06em; }
.en .h2 { font:500 clamp(28px,3vw,42px)/1.2 "Fraunces",serif; letter-spacing:0; }
.close .h2 { position:absolute; left:0; right:0; top:21vh; text-align:center; padding:0 24px; text-shadow:0 2px 18px rgba(0,10,16,.6); }
.note { position:absolute; left:50%; bottom:40px; transform:translateX(-50%); width:min(660px,calc(100% - 48px)); font-size:13px; line-height:1.9; color:var(--dim); text-align:center; text-shadow:0 1px 10px rgba(0,10,16,.6); }
.en .note { line-height:1.6; }
.note .credit { margin-top:12px; font-size:10.5px; } .note a { text-underline-offset:4px; padding:10px 2px; white-space:nowrap; }

/* 404 */
.nf { min-height:100vh; } .nf-main { position:fixed; inset:0; display:grid; place-items:center; }
.nf-plate { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.8); }
.nf-copy { position:relative; text-align:center; padding:24px; text-shadow:0 2px 16px rgba(0,10,16,.6); }
.nf-en { margin-top:12px; font:500 20px "Fraunces",serif; } .nf-links { margin-top:24px; } .nf-links a { padding:10px 4px; }

@media (prefers-reduced-motion:reduce) { .facts, .still-off, .sw, .sw i, .rail { transition:none; } }
@media (max-width:699px), (max-aspect-ratio:4/5) {
  .nav { padding:16px 18px; } .nav .where { display:none; }
  .frame { inset:52px 12px 34px; }
  .hero .copy { position:absolute; left:30px; right:30px; top:9vh; bottom:150px; max-width:none; display:flex; flex-direction:column; text-align:left; }
  .hero .chap, .hero .h { align-self:flex-end; text-align:right; }
  .ja .h { writing-mode:vertical-rl; height:30vh; font-size:34px; }
  .en .h { font-size:36px; }
  .facts { order:3; margin-top:auto; gap:14px; } .facts div { min-width:0; flex:1; } .facts dt { font-size:18px; }
  .hero .p { order:4; margin-top:16px; font-size:13px; line-height:1.85; max-width:none; }
  .en .hero .p { font-size:13.5px; line-height:1.6; }
  .switch { left:30px; bottom:52px; } .status { left:30px; right:30px; bottom:108px; text-align:left; }
  .foot { left:18px; right:18px; bottom:12px; font-size:10px; line-height:1.4; }
  .rail { left:18px; top:62px; transform:none; } .rail ol { flex-direction:row; gap:10px; margin-top:4px; } .rail a { gap:8px; white-space:nowrap; } .rail a::before { width:14px; } .rail p { display:none; }
  .rail a:not([aria-current]) span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }   /* phones: only the current part is named */
  .cap, .step-arm .cap, .step-eye .cap, .step-under .cap { left:22px; right:22px; top:auto; bottom:6vh; max-width:none; }
  .step-under .cap { text-align:right; } .step-eye .cap { text-align:left; }
  .h3 { font-size:30px; } .en .h3 { font-size:29px; } .cap .p { font-size:13px; line-height:1.85; } .en .cap .p { font-size:13.5px; line-height:1.6; }
  .close .chap { top:12vh; } .close .h2 { top:16vh; font-size:25px; } .en .close .h2 { font-size:26px; }
  .note { bottom:24px; font-size:13.5px; line-height:1.75; }
  /* closing flows on phones: the long disclaimer is never cut off (ChatGPT P0: 13–14 px, the section may grow) */
  .close { height:auto; } .close .pin { position:relative; height:auto; min-height:140vh; min-height:140svh; padding:12vh 22px 32px; display:flex; flex-direction:column; align-items:center; }
  .close .chap, .close .h2, .note { position:static; transform:none; }
  .close .h2 { margin-top:10px; padding:0; } .note { margin-top:auto; width:100%; }
}
@media (max-width:699px) and (max-height:700px) { .ja .h { font-size:28px; height:24vh; } .en .h { font-size:30px; } .hero .copy { top:8vh; bottom:152px; } .hero .p, .en .hero .p { font-size:12px; line-height:1.6; } .facts dt { font-size:16px; } .switch { bottom:60px; } .status { bottom:112px; } .h3 { font-size:25px; } }
@media (min-width:700px) and (max-aspect-ratio:4/5) { .hero .copy { left:64px; right:64px; } .switch, .status { left:64px; } .ja .h { font-size:52px; } .en .h { font-size:56px; } .hero .p { max-width:34em; } .cap, .step-arm .cap, .step-eye .cap, .step-under .cap { left:64px; right:64px; } }