/* Leave a Light On — single-page site.
   Palette = the game's four canonical time-slot boards + lamp gold.
   Motion contract: everything below is enhancement; the page reads fully
   with JS off and with prefers-reduced-motion. */

:root{
  --night:#0b1220; --ink:#1F2C3D; --paper:#F5EDE2; --paper-dim:#E8DCC4;
  --gold:#C9A227; --amber:#E8A15C; --daygrey:#DDE3E8; --rust:#B4532A;
  --text-on-dark:#EDE6D8; --text-dim:rgba(237,230,216,.72);
  --serif:'Iowan Old Style',Palatino,'Palatino Linotype','Songti SC','Noto Serif CJK SC','Hiragino Mincho ProN','Yu Mincho',Georgia,serif;
  --maxw:1080px;
}
html[lang="ja"]{ --serif:'Hiragino Mincho ProN','Yu Mincho','Noto Serif CJK JP',Georgia,serif; }
html[lang^="zh"]{ --serif:'Songti SC','Noto Serif CJK SC','PMingLiU',Georgia,serif; }

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--night); color:var(--text-on-dark);
  font-family:var(--serif); line-height:1.7; font-size:17px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
h2{font-size:clamp(26px,4vw,38px);font-weight:600;letter-spacing:.04em}
section{padding:96px 20px}

/* ── header ─────────────────────────── */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;gap:22px;padding:14px 22px;
  background:linear-gradient(to bottom,rgba(11,18,32,.85),rgba(11,18,32,0));
  backdrop-filter:blur(2px);
}
.brand{display:flex;align-items:center;gap:9px;color:var(--gold)}
.brand-lamp{width:26px;height:26px}
[data-lamp="on"] .brand-halo{animation:halo 4.5s ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.14}50%{opacity:.3}}
.brand-name{font-size:15px;letter-spacing:.08em;color:var(--text-on-dark)}
.site-nav{display:flex;gap:18px;margin-left:auto}
.site-nav a{font-size:13.5px;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase}
.site-nav a:hover{color:var(--gold);text-decoration:none}
.head-tools{display:flex;align-items:center;gap:14px}
.lamp-toggle{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  background:none;border:1px solid rgba(201,162,39,.35);border-radius:999px;
  color:var(--text-dim);font:inherit;font-size:12px;padding:5px 12px;letter-spacing:.06em;
}
.lamp-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px rgba(201,162,39,.6)}
[data-lamp="off"] .lamp-dot{background:#5a5346;box-shadow:none}
.lang-switch{display:flex;gap:2px;border:1px solid rgba(237,230,216,.2);border-radius:999px;padding:2px}
.lang-switch button{
  background:none;border:0;border-radius:999px;cursor:pointer;
  color:var(--text-dim);font:inherit;font-size:11.5px;padding:4px 10px;
}
.lang-switch button[aria-pressed="true"]{background:rgba(201,162,39,.22);color:var(--gold)}
@media (max-width:820px){ .site-nav{display:none} .site-head{gap:10px} }
@media (max-width:520px){
  .site-head{padding:10px 12px}
  .brand-name{display:none}
  .head-tools{margin-left:auto;gap:8px}
  .lamp-toggle{font-size:11px;padding:4px 9px}
  .lang-switch button{padding:4px 7px;font-size:11px;white-space:nowrap}
}

/* ── hero ───────────────────────────── */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:0;overflow:hidden}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-lamp="on"] .hero-bg img{animation:heroBreathe 14s ease-in-out infinite}
@keyframes heroBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.hero-veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 42%,rgba(11,18,32,.08) 0%,rgba(11,18,32,.66) 78%,rgba(11,18,32,.94) 100%)}
.hero-glow{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(300px 300px at var(--mx,62%) var(--my,38%),rgba(232,161,92,.28),rgba(201,162,39,.10) 45%,transparent 70%);
  transition:background-position .2s;
}
[data-lamp="off"] .hero-glow{opacity:.35}
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{position:relative;text-align:center;padding:0 20px;z-index:2}
.hero-kicker{font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--amber);opacity:0;animation:rise 1.1s .2s ease forwards}
.hero-title{margin:14px 0 10px;font-weight:600;line-height:1.08;
  font-size:clamp(40px,7.5vw,84px);letter-spacing:.02em;
  text-shadow:0 2px 40px rgba(11,18,32,.8);opacity:0;animation:rise 1.1s .45s ease forwards}
.hero-title-cjk{display:block;font-size:.42em;letter-spacing:.6em;margin-top:10px;color:var(--gold)}
.hero-tag{font-size:clamp(16px,2.2vw,21px);color:var(--text-dim);letter-spacing:.06em;opacity:0;animation:rise 1.1s .7s ease forwards}
.hero-cta{margin-top:34px;opacity:0;animation:rise 1.1s .95s ease forwards}
.cta-soon{
  display:inline-block;border:1px solid rgba(201,162,39,.55);border-radius:999px;
  padding:11px 26px;font-size:14.5px;letter-spacing:.12em;color:var(--gold);
  box-shadow:0 0 24px rgba(201,162,39,.15) inset,0 0 30px rgba(201,162,39,.12);
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* hero content fades out over the first 60vh of scroll — native scroll-driven
   animation (resize/jump-proof); no-op where unsupported or reduced motion */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    .hero-inner{animation:heroFade linear both;
      animation-timeline:scroll();animation-range:0 60vh}
    @keyframes heroFade{0%{opacity:1;transform:none}60%{opacity:1}100%{opacity:0;transform:translateY(-46px)}}
  }
}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:24px;height:40px;
  border:1.5px solid rgba(237,230,216,.4);border-radius:12px;z-index:2}
.scroll-cue span{position:absolute;top:7px;left:50%;width:3px;height:8px;margin-left:-1.5px;
  border-radius:2px;background:var(--gold)}
[data-lamp="on"] .scroll-cue span{animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ── story / the will (paper) ───────── */
.story{background:
  radial-gradient(140% 100% at 50% 0%,#141d2e 0%,var(--night) 70%);
  display:grid;place-items:center;padding:130px 20px}
.paper{
  max-width:660px;width:100%;position:relative;
  background:linear-gradient(168deg,var(--paper) 0%,var(--paper-dim) 100%);
  color:#3a3226;border-radius:6px;padding:58px 54px 48px;
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.5) inset;
}
.paper::before{ /* stitched top edge, like a will folder */
  content:"";position:absolute;inset:16px 16px auto;height:1px;
  background:repeating-linear-gradient(90deg,rgba(58,50,38,.35) 0 8px,transparent 8px 16px);
}
.ms-kicker{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#8a7a5c;margin-bottom:26px}
.will{list-style:none;counter-reset:cl}
.will li{
  counter-increment:cl;position:relative;padding:14px 0 14px 54px;
  font-size:clamp(16px,2vw,19px);line-height:1.75;
  border-bottom:1px solid rgba(58,50,38,.12);
}
.will li::before{
  content:counter(cl,upper-roman);position:absolute;left:0;top:14px;
  font-size:15px;color:var(--rust);letter-spacing:.05em;
}
.ms-note{margin-top:24px;font-size:14.5px;color:#6b5f49;font-style:italic}
.ms-last{margin-top:38px;text-align:center;font-size:clamp(19px,2.6vw,24px);line-height:1.6;color:#2c2417}
.ms-src{margin-top:10px;text-align:right;font-size:13px;color:#8a7a5c}

/* reveal-on-scroll: visible by default; JS adds .js-armed to arm the effect */
.js-armed .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.js-armed .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-armed .reveal{opacity:1;transform:none;transition:none}
}

/* ── a day at the lodge ─────────────── */
.day{padding:110px 0 60px;position:relative}
.day-heading{text-align:center;margin-bottom:70px;padding:0 20px}
.day-track{position:relative}
.slot{position:relative;min-height:92svh;display:grid;align-items:center;overflow:hidden}
.slot-bg,.slot-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot::after{content:"";position:absolute;inset:0;pointer-events:none}
/* time-slot color washes (canonical palettes) */
.slot[data-slot="dawn"]::after{background:linear-gradient(100deg,rgba(245,237,226,.32) 0%,rgba(11,18,32,.55) 72%)}
.slot[data-slot="noon"]::after{background:linear-gradient(100deg,rgba(221,227,232,.30) 0%,rgba(31,44,61,.62) 72%)}
.slot[data-slot="dusk"]::after{background:linear-gradient(100deg,rgba(232,161,92,.26) 0%,rgba(11,18,32,.60) 72%)}
.slot[data-slot="night"]::after{background:linear-gradient(100deg,rgba(31,44,61,.45) 0%,rgba(11,18,32,.72) 72%)}
.slot-inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);
  align-items:end;gap:20px;padding:60px 24px 0;
}
.slot-text{padding-bottom:70px}
.slot-time{
  font-size:15px;letter-spacing:.3em;color:var(--gold);
  border:1px solid rgba(201,162,39,.5);display:inline-block;padding:4px 14px;border-radius:999px;
  background:rgba(11,18,32,.35);backdrop-filter:blur(2px);
}
.slot-name{font-size:clamp(30px,4.6vw,46px);margin:18px 0 10px;letter-spacing:.05em;
  text-shadow:0 2px 26px rgba(11,18,32,.75)}
.slot-role{max-width:44ch;color:var(--text-on-dark);font-size:16px;
  text-shadow:0 1px 14px rgba(11,18,32,.8)}
.slot-quote{
  margin-top:22px;max-width:46ch;font-size:clamp(15.5px,1.9vw,18px);line-height:1.85;
  color:#fff;text-shadow:0 1px 18px rgba(11,18,32,.9);
  border-left:2px solid var(--gold);padding-left:18px;font-style:italic;
}
.slot-ch{
  align-self:end;justify-self:center;max-height:82svh;width:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.day-coda{
  text-align:center;padding:90px 20px 40px;
  font-size:clamp(19px,2.8vw,26px);letter-spacing:.08em;color:var(--amber);
}
@media (max-width:760px){
  .slot-inner{grid-template-columns:1fr;align-items:end;padding-top:30px}
  .slot-ch{order:-1;max-height:52svh;margin-top:40px}
  .slot-text{padding-bottom:54px}
}

/* ── promises ───────────────────────── */
.promises{max-width:var(--maxw);margin:0 auto;text-align:center}
.pr-sub{color:var(--text-dim);margin:12px 0 46px}
.pr-grid{
  list-style:none;display:grid;gap:18px;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.pr-grid li{
  border:1px solid rgba(201,162,39,.28);border-radius:10px;
  padding:26px 24px;background:linear-gradient(165deg,rgba(31,44,61,.55),rgba(11,18,32,.35));
  transition:border-color .35s,box-shadow .35s,transform .35s;
}
.pr-grid li:hover{
  border-color:rgba(201,162,39,.7);
  box-shadow:0 0 34px rgba(201,162,39,.14),0 14px 30px rgba(0,0,0,.35);
  transform:translateY(-3px);
}
.pr-grid h3{font-size:18px;color:var(--gold);margin-bottom:8px;letter-spacing:.03em}
.pr-grid p{font-size:14.5px;color:var(--text-dim);line-height:1.7}
.pr-link{display:inline-block;margin-top:10px;font-size:13.5px}

/* ── spec table (JP official-site convention) ── */
.spec{max-width:720px;margin:0 auto}
.spec h2{text-align:center;margin-bottom:36px}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{
  padding:13px 16px;border-bottom:1px solid rgba(237,230,216,.14);
  text-align:left;vertical-align:top;
}
.spec-table th{width:32%;color:var(--amber);font-weight:500;letter-spacing:.05em;white-space:nowrap}
.spec-table td{color:var(--text-on-dark)}

/* ── studio ─────────────────────────── */
.studio{max-width:720px;margin:0 auto}
.studio h2{text-align:center;margin-bottom:26px}
.st-lead{text-align:center;color:var(--text-on-dark);font-size:clamp(16px,2vw,18.5px);line-height:1.9}
.st-disclosure{
  margin:38px 0 0;border:1px solid rgba(201,162,39,.3);border-radius:10px;
  background:rgba(31,44,61,.35);overflow:hidden;
}
.st-disclosure summary{
  cursor:pointer;padding:18px 22px;color:var(--gold);font-size:15.5px;letter-spacing:.03em;
  list-style:none;position:relative;
}
.st-disclosure summary::after{content:"+";position:absolute;right:22px;top:14px;font-size:20px;color:var(--amber)}
.st-disclosure[open] summary::after{content:"−"}
.st-disc-body{padding:4px 24px 24px;font-size:14.5px;color:var(--text-dim);line-height:1.85;white-space:pre-line}
.st-links{margin-top:26px;text-align:center;font-size:14.5px;color:var(--text-dim)}
.st-soon{color:var(--amber)}

/* ── news ───────────────────────────── */
.news{max-width:720px;margin:0 auto}
.news h2{text-align:center;letter-spacing:.3em;margin-bottom:30px}
.news-list{list-style:none}
.news-list li{
  display:flex;gap:22px;padding:15px 4px;border-bottom:1px solid rgba(237,230,216,.12);
  font-size:15px;
}
.news-list time{color:var(--gold);letter-spacing:.06em;white-space:nowrap}

/* ── footer ─────────────────────────── */
.site-foot{
  margin-top:60px;padding:70px 20px 46px;text-align:center;
  background:linear-gradient(to bottom,transparent,#070c16 55%);
}
.foot-links,.foot-mail{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin-bottom:16px}
.foot-links a,.foot-mail a{font-size:13.5px;color:var(--text-dim)}
.foot-links a:hover,.foot-mail a:hover{color:var(--gold)}
.foot-line{margin:22px 0 8px;color:var(--amber);font-size:15px;letter-spacing:.06em}
.foot-copy{font-size:12.5px;color:rgba(237,230,216,.45)}