:root { --ink:#f6efe6; --heat:#e8b07a; --cold:#a9c6cf; --bg:#14110e; }
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { background:var(--bg); color:var(--ink); font-family:"Inter",system-ui,sans-serif; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { min-height:100%; background:var(--bg); -webkit-tap-highlight-color:transparent; }
/* one-finger vertical scroll always belongs to the page; a sideways drag is free for wiping */
body.live { touch-action:pan-y pinch-zoom; }
body.live .scene { -webkit-user-select:none; user-select:none; }
a { color:inherit; }
#fog { position:fixed; inset:0; width:100%; height:100%; height:100lvh; display:block; z-index:0; }
body.static #fog { display:none; }

.nav { position:fixed; z-index:10; top:0; left:0; right:0; display:flex; align-items:baseline; gap:28px; padding:22px 32px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.brand { font-family:"Noto Serif JP",serif; font-weight:700; font-size:18px; letter-spacing:.12em; text-decoration:none; text-transform:none; }
.brand small { font-family:"Inter",sans-serif; font-weight:400; font-size:10px; letter-spacing:.22em; opacity:.75; margin-left:6px; }
.nav nav { margin-left:auto; }
.steps { list-style:none; display:flex; gap:22px; }
.steps a { text-decoration:none; opacity:.7; padding:14px 4px; display:inline-block; min-width:44px; text-align:center; transition:opacity .3s; text-underline-offset:7px; text-decoration-thickness:1px; }
.steps a[aria-current="step"] { opacity:1; text-decoration:underline; }
.lang { text-decoration:none; opacity:.8; padding:14px 6px; margin:-14px -6px; min-width:44px; text-align:center; }
.skip { position:fixed; z-index:20; left:16px; top:-60px; padding:10px 14px; background:#f6efe6; color:#14110e; font-size:13px; border-radius:6px; }
.skip:focus { top:12px; }
.t-touch { display:none; } @media (hover:none) and (pointer:coarse) { .t-touch { display:inline; } .t-pointer { display:none; } }
.note { position:absolute; z-index:3; left:48px; bottom:104px; max-width:32em; font-size:12px; line-height:1.7; opacity:.9; text-shadow:0 1px 10px rgba(0,0,0,.6); }

.scene { position:relative; z-index:1; height:230vh; }
.scene.air { height:190vh; }
.pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.plate { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.static .plate { display:block; }
body.static .pin::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,8,6,.5), transparent 60%); pointer-events:none; }
body.static .air .pin::after { background:linear-gradient(180deg, rgba(18,26,40,.38), transparent 42%), linear-gradient(0deg, rgba(20,14,8,.55), transparent 40%); }

.copy { position:absolute; z-index:2; left:48px; top:21vh; max-width:600px; text-shadow:0 1px 18px rgba(0,0,0,.4); }
.chap { font-size:12px; letter-spacing:.2em; text-transform:uppercase; opacity:.88; }
.h { font-family:"Noto Serif JP",serif; font-weight:700; font-size:clamp(44px,5.4vw,84px); line-height:1.2; letter-spacing:.04em; margin-top:18px; }
.h span { white-space:nowrap; }
.en .h { font-family:"Cormorant Garamond",serif; font-weight:500; letter-spacing:0; line-height:1.02; }
.body { font-size:15px; line-height:2; margin-top:22px; max-width:30em; opacity:.94; }
.en .body { line-height:1.6; font-size:16px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.act { position:absolute; z-index:3; left:48px; bottom:46px; display:flex; gap:18px; align-items:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.hint { display:flex; gap:12px; align-items:center; text-shadow:0 1px 12px rgba(0,0,0,.4); }
.hint svg { width:44px; height:44px; flex:none; }
.clear { min-height:44px; white-space:nowrap; font:inherit; letter-spacing:.12em; color:inherit; background:rgba(20,14,10,.28); border:1px solid rgba(246,239,230,.55); border-radius:999px; padding:11px 18px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.clear:hover { background:rgba(20,14,10,.45); }
.clear:focus-visible, .steps a:focus-visible, .lang:focus-visible, .brand:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
body.static .clear, body.static .heat .hint, body.static .cold .hint { display:none; }
.temp { position:absolute; z-index:2; right:40px; bottom:42px; text-align:right; font-family:"Cormorant Garamond",serif; font-size:64px; line-height:1; text-shadow:0 1px 14px rgba(0,0,0,.35); }
.temp sup { font-size:.42em; vertical-align:top; margin-left:2px; position:relative; top:.25em; }
.temp small { display:block; font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-top:8px; opacity:.82; }
.tag { position:absolute; z-index:2; right:32px; top:78px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.62; }

/* AIR: the headline sits in the open sky over a light top shade (review P0: off the bright fence); the text below sits on the deck shade */
.shade { position:absolute; inset:0; z-index:1; pointer-events:none; }
body.static .air .shade, .sky-shade { background:linear-gradient(180deg, rgba(12,22,42,.5), rgba(12,22,42,.22) 22%, transparent 40%), linear-gradient(0deg, rgba(20,14,8,.62), transparent 38%); }
.sky-shade { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--air,0); }
body.static .sky-shade { display:none; }
.air .copy { position:static; }
.air .head { position:absolute; z-index:2; right:6vw; top:8.5vh; text-align:right; text-shadow:0 1px 22px rgba(16,26,44,.7), 0 0 3px rgba(16,26,44,.5), 0 0 12px rgba(16,26,44,.35); }
.air .h { font-size:clamp(34px,3.7vw,56px); margin-top:10px; }
.air .h br { display:none; } /* one line in the sky band, above the fence */
.air .body { position:absolute; z-index:2; left:48px; bottom:112px; margin:0; text-shadow:0 1px 14px rgba(0,0,0,.45); }
.closing { position:relative; z-index:2; min-height:70vh; background:linear-gradient(180deg, transparent, rgba(14,11,9,.55) 45%, rgba(14,11,9,.82)); display:flex; align-items:flex-end; padding:0 48px 48px; }
.closing { flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:10px; }
.closing .credit { font-size:11px; letter-spacing:.08em; opacity:.6; }
.closing p { max-width:46em; font-size:12px; line-height:1.9; letter-spacing:.04em; opacity:.9; text-shadow:0 1px 10px rgba(0,0,0,.5); }

@media (max-width:699px) {
  .nav { padding:16px 20px; gap:16px; } .nav nav { display:none; } .lang { margin-left:auto; }
  .copy, .air .copy { position:absolute; left:20px; right:20px; top:11vh; bottom:104px; max-width:none; display:flex; flex-direction:column; justify-content:space-between; }
  .h { font-size:40px; }
  .ja .h { writing-mode:vertical-rl; height:50vh; width:fit-content; align-self:flex-start; font-size:42px; line-height:1.5; }
  .body, .air .body { position:static; font-size:14px; line-height:1.9; margin:0; text-shadow:0 1px 14px rgba(0,0,0,.55); }
  .air .head { position:static; text-align:start; padding-left:44%; }
  .air .h { font-size:30px; letter-spacing:.02em; margin-top:12px; height:auto; } .en .air .h { font-size:36px; } .air .h br { display:inline; }
  .en .air .head { padding-left:0; text-align:right; }
  .act { left:20px; right:20px; bottom:30px; justify-content:space-between; }
  .hint svg { width:36px; height:36px; }
  .temp { right:20px; top:60px; bottom:auto; font-size:40px; } .temp small { font-size:9.5px; }
  .tag { display:none; }
  .en .hint { font-size:10.5px; letter-spacing:.1em; } .act { gap:12px; }
  .air .temp { top:auto; bottom:26px; }
  body.static .air .shade, .sky-shade { background:linear-gradient(180deg, rgba(12,22,42,.5), rgba(12,22,42,.3) 30%, transparent 52%), linear-gradient(0deg, rgba(20,14,8,.62), transparent 38%); }
  .closing { padding:0 20px 40px; }
}

/* 404 */
.nf-main { position:fixed; inset:0; display:grid; place-items:center; overflow:hidden; }
.nf-plate { position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); object-fit:cover; filter:blur(22px) saturate(.9) brightness(.8); }
.nf-copy { position:relative; padding:24px; max-width:640px; text-shadow:0 1px 18px rgba(0,0,0,.45); }
.nf-copy .h { font-size:clamp(28px,4vw,48px); } .nf-en { margin-top:14px; font-family:"Cormorant Garamond",serif; font-size:22px; }
.nf-links { margin-top:28px; font-size:13px; letter-spacing:.08em; } .nf-links a { text-underline-offset:4px; }
@media (max-width:699px) { .note { left:20px; right:20px; bottom:30px; } }
/* short phones (e.g. 320×568): the vertical headline must stop above the text */
@media (max-width:699px) and (max-height:700px) {
  .ja .h { font-size:32px; height:40vh; } .ja .air .h { font-size:26px; height:auto; }
  .en .h { font-size:32px; } .copy, .air .copy { top:10vh; bottom:96px; } .en .copy, .en .air .copy { top:112px; }
  .body, .air .body { font-size:13px; line-height:1.75; }
  .temp { font-size:32px; top:54px; }
}
@media (max-width:359px) { .en .hint { font-size:9.5px; letter-spacing:.06em; max-width:11em; } .clear { padding:10px 14px; } }
@media (max-width:699px) { body.static .heat .copy { bottom:128px; } }