/* Wat's House — modern, quiet, bilingual.
   Layout: wide margins, a 12-col grid, big photographs, hairlines.
   The house survives as a line-drawn floor plan; rooms open into sheets that stack deeper. */
:root{
  --bg:#f2f3ef; --surface:#ffffff; --ink:#121613; --muted:#5a635c; --line:#d8dcd4; --soft:#e7e9e3;
  --accent:#3b6a3a; --accent-ink:#ffffff; --lamp:#b97a1f; --lamp-soft:#f3dfb8; --night:#0d110f; --on-night:#eef1ea; --on-night-muted:#a4ada5;
  --rain:rgba(40,60,52,.22);
  --f-display:"Instrument Serif","Noto Serif Thai",Georgia,serif;
  --f-body:"IBM Plex Sans Thai","IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:120px;
  --r:10px; --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d110f;--surface:#151a17;--ink:#e9ece6;--muted:#9ba69d;--line:#262f29;--soft:#1b221e;
  --accent:#8fc27f;--accent-ink:#0d110f;--lamp:#e3ac52;--lamp-soft:#3a2e18;--rain:rgba(200,215,205,.14);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0d110f;--surface:#151a17;--ink:#e9ece6;--muted:#9ba69d;--line:#262f29;--soft:#1b221e;
  --accent:#8fc27f;--accent-ink:#0d110f;--lamp:#e3ac52;--lamp-soft:#3a2e18;--rain:rgba(200,215,205,.14);color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.7;font-weight:400}
[hidden]{display:none!important}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
:lang(th) h1,:lang(th) h2,:lang(th) h3,html[data-lang="th"] h1,html[data-lang="th"] h2,html[data-lang="th"] h3{line-height:1.35;font-weight:300}
p{margin:0}
.mono,.when{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
html[data-lang="th"] .eyebrow{letter-spacing:.04em;text-transform:none;font-family:var(--f-body)}

/* language switch: both languages live in the page; one is hidden */
html[data-lang="en"] [lang="th"]:not(.both),html[data-lang="th"] [lang="en"]:not(.both){display:none!important}
html[data-lang="th"] body{font-size:16.5px}

.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}

/* ---------- header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .3s}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--bg)}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--s5);padding-block:14px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;white-space:nowrap}
.logo b{font-family:var(--f-display);font-weight:400;font-size:22px}
.logo small{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:14px;color:var(--muted);padding:6px 10px;border-radius:99px;transition:color .2s,background .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink);background:var(--soft)}
.tools{display:flex;gap:6px;align-items:center}
.pill{font:inherit;font-size:13px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:99px;padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:background .2s,border-color .2s}
.pill:hover{border-color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:2px}
.lang button{font:inherit;font-size:12.5px;border:0;background:transparent;color:var(--muted);padding:4px 10px;border-radius:99px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.menu-btn{display:none}
@media (max-width:980px){
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;padding:8px max(20px,env(safe-area-inset-left,0px)) 16px}
  .nav.open{display:flex}
  .nav a{font-size:17px;padding:10px 0;border-radius:0}
  .menu-btn{display:inline-flex}
  .tools{margin-left:auto}
}
@media (max-width:420px){.logo small{display:none}}
@media (max-width:560px){.hide-sm{display:none}}

/* ---------- buttons ---------- */
.btn{font:inherit;font-size:15px;display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:99px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- hero (porch) ---------- */
.hero{position:relative;min-height:min(88vh,860px);display:grid;align-items:end;color:var(--on-night);overflow:hidden;background:var(--night);isolation:isolate}
.hero .ph{position:absolute;inset:-4%;background:var(--img) center 45%/cover;transform:scale(1.06) translate3d(calc(var(--mx,0)*-12px),calc(var(--my,0)*-8px),0);animation:drift 30s ease-in-out infinite alternate;filter:saturate(.9)}
@keyframes drift{to{background-position:center 55%}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,10,.25),rgba(8,12,10,.15) 35%,rgba(8,12,10,.82));z-index:0}
.hero .wrap{position:relative;z-index:2;padding-block:var(--s9) var(--s7);width:100%}
.hero .eyebrow{color:var(--on-night-muted)}
.hero h1{font-size:clamp(52px,9vw,128px);margin-top:var(--s3);color:#fff}
.hero .th-name{font-family:"Noto Serif Thai",serif;font-weight:300;font-size:clamp(24px,3.4vw,40px);color:#dfe6dc;margin-top:6px}
.hero .meta{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-top:var(--s6);align-items:end;justify-content:space-between}
.hero .lede{max-width:34em;color:#d6ddd3;font-size:17px}
.hero .cap{position:absolute;right:max(20px,env(safe-area-inset-right,0px));bottom:12px;z-index:2;font-size:11.5px;color:var(--on-night-muted)}
#rain{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* ---------- sections ---------- */
section.block{padding-block:var(--s9) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--s6);align-items:end;margin-bottom:var(--s7)}
.sec-head h2{font-size:clamp(36px,5vw,64px)}
.sec-head p{color:var(--muted);max-width:36em}
@media (max-width:800px){.sec-head{grid-template-columns:1fr}}
.rv{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.rv.pre{transform:translateY(22px);opacity:.35}

/* ---------- floor plan ---------- */
.plan{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s7);align-items:stretch}
@media (max-width:900px){.plan{grid-template-columns:1fr}}
.plan svg{width:100%;height:auto;display:block;overflow:visible}
.plan .wall{fill:none;stroke:var(--ink);stroke-width:3}
.plan .thin{fill:none;stroke:var(--muted);stroke-width:1}
.plan .room rect{fill:var(--surface);stroke:none;transition:fill .5s}
.plan .room .glow{fill:url(#lamp);opacity:0;transition:opacity .5s}
.plan .room text{font-family:var(--f-display);font-size:26px;fill:var(--ink);pointer-events:none}
.plan .room text.sub{font-family:var(--f-mono);font-size:11px;fill:var(--muted);letter-spacing:.08em}
.plan .room:hover rect,.plan .room:focus-visible rect,.plan .room.on rect{fill:var(--lamp-soft)}
.plan .room:hover .glow,.plan .room:focus-visible .glow,.plan .room.on .glow{opacity:1}
.plan .room{cursor:pointer;outline:none}
.plan .door{stroke:var(--muted);stroke-width:1;fill:none;stroke-dasharray:3 3}
.plan .bamboo circle{fill:var(--accent);opacity:.22}
.preview{position:relative;border-radius:var(--r);overflow:hidden;background:var(--night);min-height:380px;color:var(--on-night)}
.preview .pv{position:absolute;inset:0;background:var(--img) center/cover;opacity:0;transform:scale(1.04);transition:opacity .7s,transform 1.4s var(--ease)}
.preview .pv.on{opacity:1;transform:scale(1)}
.preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,12,10,.85))}
.preview .txt{position:absolute;left:var(--s6);right:var(--s6);bottom:var(--s6);z-index:2}
.preview h3{font-size:clamp(32px,4vw,46px);color:#fff}
.preview p{color:#d6ddd3;margin-top:6px}
.room-list{display:none}
@media (max-width:900px){.preview{display:none}}

/* cards used by the room list on phones and on other pages */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s5)}
.card{display:grid;gap:var(--s3);text-decoration:none;color:inherit}
.card .ph{aspect-ratio:4/3;border-radius:var(--r);background:var(--img,var(--soft)) center/cover;transition:transform .8s var(--ease),box-shadow .6s;box-shadow:0 0 0 rgba(0,0,0,0)}
.card:hover .ph{transform:translateY(-4px) scale(1.01);box-shadow:0 30px 40px -28px rgba(0,0,0,.45)}
.card h3{font-size:28px}
.card p{color:var(--muted);font-size:15px}

/* ---------- room pages ---------- */
.room-hero{position:relative;min-height:62vh;display:grid;align-items:end;color:#fff;overflow:hidden;background:var(--night)}
.room-hero .ph{position:absolute;inset:0;background:var(--img) var(--pos,center)/cover;transform:scale(1.05);animation:settle 2.2s var(--ease) forwards}
@keyframes settle{to{transform:scale(1)}}
.room-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,10,.2),rgba(8,12,10,.86))}
.room-hero .wrap{position:relative;z-index:2;padding-block:var(--s9) var(--s7);width:100%}
.room-hero .eyebrow{color:#c3cbc2}
.room-hero h1{font-size:clamp(48px,8vw,104px);margin-top:var(--s3)}
.room-hero p{max-width:36em;color:#d6ddd3;margin-top:var(--s4);font-size:17px}
.crumbs{font-size:13px;color:#c3cbc2;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:#fff}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--s8)}
@media (max-width:860px){.cols{grid-template-columns:1fr;gap:var(--s6)}}
.prose{display:grid;gap:var(--s4);max-width:38em}
.prose p{font-size:17px}
.facts{margin:0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:10em minmax(0,1fr);gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{margin:0;font-size:15px}
@media (max-width:520px){.facts div{grid-template-columns:1fr;gap:2px}}
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5)}
.quote{border-top:1px solid var(--ink);padding-top:var(--s4)}
.quote p{font-family:var(--f-display);font-size:24px;line-height:1.35}
html[data-lang="th"] .quote p{font-family:"Noto Serif Thai",serif;font-weight:300;font-size:21px;line-height:1.6}
.quote cite{display:block;margin-top:var(--s3);font-style:normal;font-size:13px;color:var(--muted)}

/* photo prints keep a little relief */
.print{background:var(--surface);padding:10px 10px 36px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 24px 40px -26px rgba(0,0,0,.45);transform:rotate(var(--r,0deg));transition:transform .6s var(--ease)}
.print:hover{transform:rotate(0) translateY(-4px)}
.print img{width:100%}
.print figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s6)}
.chip{font:inherit;font-size:13.5px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:99px;padding:6px 14px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .n{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-left:4px}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}

/* ---------- books ---------- */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s6) var(--s5)}
.book{font:inherit;text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer;display:grid;gap:10px;perspective:900px}
.book .cv{aspect-ratio:2/3;border-radius:2px 6px 6px 2px;position:relative;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;
  background:var(--c);box-shadow:inset 5px 0 0 rgba(0,0,0,.18),inset 7px 0 0 rgba(255,255,255,.06),0 18px 26px -18px rgba(0,0,0,.6);transform-origin:left center;transition:transform .7s var(--ease),box-shadow .7s}
.book:hover .cv,.book:focus-visible .cv{transform:rotateY(-18deg) translateX(4px);box-shadow:inset 5px 0 0 rgba(0,0,0,.18),16px 24px 30px -18px rgba(0,0,0,.6)}
.book .cv b{font-family:"Noto Serif Thai",serif;font-weight:400;font-size:19px;line-height:1.3}
.book .cv i{font-style:normal;font-family:var(--f-display);font-size:15px;opacity:.85}
.book .cv.img{background:var(--img) center/cover}
.book .cv.img b,.book .cv.img i{display:none}
.book .t{font-size:14.5px;line-height:1.4}
.book .y{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.c1{--c:#2f4a33}.c2{--c:#6b4528}.c3{--c:#1d2420}.c4{--c:#9a6a1f}.c5{--c:#4a5b3a}.c6{--c:#5c2f27}.c7{--c:#33424b}

/* ---------- media (YouTube, click to play) ---------- */
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s6) var(--s5)}
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#1a201c center/cover;border:0;padding:0;cursor:pointer;width:100%;display:block;color:#fff}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.yt:hover img{transform:scale(1.04)}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55))}
.yt .play{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;align-items:center;gap:10px;font-size:14px}
.yt .play i{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:transform .3s var(--ease)}
.yt:hover .play i{transform:scale(1.08)}
.yt .play i::before{content:"";border-left:13px solid #111;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.item{display:grid;gap:10px}
.item h3{font-size:24px}
.item .by{font-size:13px;color:var(--muted)}
.item p{font-size:15px;color:var(--muted)}
.out{font-size:13px}
.tracks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tracks li{border-bottom:1px solid var(--line)}
.tracks button{font:inherit;width:100%;text-align:left;background:none;border:0;color:inherit;display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:14px 4px;cursor:pointer}
.tracks button:hover{background:var(--soft)}
.tracks .n{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.tracks b{font-weight:500;display:block}
.tracks span{font-size:13px;color:var(--muted)}
.tracks .d{font-family:var(--f-mono);font-size:12px;color:var(--muted)}

/* ---------- sheets: panels that open deeper and deeper ---------- */
.sheets{position:fixed;inset:0;z-index:80;pointer-events:none}
.scrim{position:absolute;inset:0;background:rgba(8,12,10,.5);opacity:0;transition:opacity .4s;pointer-events:none}
.sheets.open .scrim{opacity:1;pointer-events:auto}
.sheet{position:absolute;top:0;right:0;bottom:0;width:min(640px,100%);background:var(--bg);color:var(--ink);pointer-events:auto;overflow:auto;
  transform:translateX(104%);transition:transform .6s var(--ease),filter .6s,opacity .6s;box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);
  padding:max(18px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 48px 32px}
.sheet.in{transform:translateX(0)}
.sheet.back{transform:translateX(-46px) scale(.96);filter:brightness(.82);opacity:.9}
.sheet .bar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);position:sticky;top:0;background:var(--bg);padding-block:8px 12px;z-index:2}
.sheet .crumb{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet h2{font-size:clamp(34px,5vw,52px);margin-top:var(--s3)}
.sheet .body{display:grid;gap:var(--s5);margin-top:var(--s5)}
.sheet .body p{font-size:16.5px}
.sheet .ctx{font-size:14.5px;color:var(--muted);border-left:2px solid var(--accent);padding-left:var(--s4)}
.sheet .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.sheet .gallery figure{margin:0}
.sheet .gallery img{border-radius:6px;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in}
.sheet .gallery figcaption{font-size:12.5px;color:var(--muted);margin-top:6px}
.sheet .bigcover{max-width:260px;box-shadow:0 30px 40px -24px rgba(0,0,0,.6);border-radius:2px 6px 6px 2px;transform:perspective(900px) rotateY(-14deg);transform-origin:left;animation:openBook 1s var(--ease)}
@keyframes openBook{from{transform:perspective(900px) rotateY(-70deg)}}
@media (max-width:640px){.sheet{padding-left:20px}.sheet .gallery{grid-template-columns:1fr}}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(8,12,10,.92);display:grid;place-items:center;padding:24px;cursor:zoom-out}
.lightbox img{max-height:86vh;width:auto;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.lightbox p{color:#d6ddd3;font-size:14px;margin-top:12px;text-align:center}

/* ---------- the journey map ---------- */
.mapstage{position:relative;background:var(--night);color:var(--on-night);overflow:hidden}
.mapstage .wrap{position:relative}
.map{width:100%;height:min(78vh,760px);display:block;touch-action:none}
.map .sea{fill:#0f1613}
.map .land{fill:#1b2420;stroke:none}
.map .cty{fill:#25302a;stroke:#3a4840;stroke-width:.6;vector-effect:non-scaling-stroke;transition:fill .6s}
.map .cty.hl{fill:#2e3d33}
.map .cty.on{fill:#3c5240}
.map .lbl{font-family:var(--f-mono);fill:#7f8c83;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.map .route{fill:none;stroke:var(--lamp);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round}
.map .route.ghost{stroke:#56645b;stroke-dasharray:2 6}
.map .stop{cursor:pointer}
.map .stop circle.dot{fill:#0d110f;stroke:var(--lamp);stroke-width:2;vector-effect:non-scaling-stroke;transition:fill .3s}
.map .stop circle.pulse{fill:var(--lamp);opacity:0}
.map .stop.on circle.dot{fill:var(--lamp)}
.map .stop.on circle.pulse{animation:pulse 2s infinite}
@keyframes pulse{from{opacity:.5;r:4}to{opacity:0;r:22}}
.map .stop.approx circle.dot{stroke-dasharray:3 2}
.map.far .stop text,.map.far .lbl.minor{display:none}
.map .stop text{font-family:var(--f-body);fill:#e9ece6;paint-order:stroke;stroke:#0d110f;stroke-width:3px;stroke-linejoin:round}
.mapui{position:absolute;left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));bottom:20px;display:flex;flex-wrap:wrap;gap:var(--s3);align-items:end;justify-content:space-between;pointer-events:none}
.mapui > *{pointer-events:auto}
.mapcard{background:rgba(13,17,15,.86);backdrop-filter:blur(10px);border:1px solid #2a342e;border-radius:var(--r);padding:16px 18px;max-width:440px;min-width:0}
.mapcard .when{color:var(--lamp)}
.mapcard h3{font-size:28px;color:#fff;margin-top:4px}
.mapcard p{font-size:14.5px;color:#c9d1c7;margin-top:6px}
.mapcard .row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mapbtns{display:flex;gap:8px;flex-wrap:wrap}
.mbtn{font:inherit;font-size:13px;background:rgba(13,17,15,.86);color:#e9ece6;border:1px solid #2f3a33;border-radius:99px;padding:8px 14px;cursor:pointer;backdrop-filter:blur(10px)}
.mbtn:hover{border-color:var(--lamp)}
.mbtn.primary{background:var(--lamp);color:#111;border-color:var(--lamp)}
.mapnote{font-size:12px;color:#7f8c83;padding:10px 0 18px}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.steps button{font:inherit;font-family:var(--f-mono);font-size:11px;width:26px;height:26px;border-radius:50%;border:1px solid #3a4840;background:transparent;color:#a4ada5;cursor:pointer}
.steps button[aria-current="true"]{background:var(--lamp);color:#111;border-color:var(--lamp)}

/* timeline under the map */
.timeline{list-style:none;margin:0;padding:0;display:grid}
.timeline li{display:grid;grid-template-columns:11em minmax(0,1fr);gap:var(--s5);padding:var(--s6) 0;border-top:1px solid var(--line)}
.timeline h3{font-size:30px}
.timeline p{color:var(--muted);margin-top:6px;max-width:42em}
.timeline .open{margin-top:var(--s3)}
@media (max-width:700px){.timeline li{grid-template-columns:1fr;gap:4px}}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s6) var(--s5)}
.person{text-decoration:none;color:inherit;display:grid;gap:12px}
.person .ph{aspect-ratio:3/4;border-radius:var(--r);background:var(--img,var(--soft)) center/cover;position:relative;overflow:hidden;transition:transform .8s var(--ease)}
.person:hover .ph{transform:translateY(-4px)}
.person .ph.empty{display:grid;place-items:center;font-family:var(--f-display);font-size:64px;color:var(--muted);background:var(--soft)}
.person h3{font-size:28px}
.person .role{font-size:13px;color:var(--muted)}
.person p{font-size:15px;color:var(--muted)}
.soon{display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--muted)}
.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.list li{display:grid;grid-template-columns:6em minmax(0,1fr);gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.list h3{font-size:24px}
.list .sub{font-size:13px;color:var(--muted);margin-top:2px}
.list p{font-size:15px;color:var(--muted);margin-top:6px}
@media (max-width:560px){.list li{grid-template-columns:1fr;gap:2px}}
.links{display:grid;gap:8px}
.links a{display:flex;justify-content:space-between;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none}
.links a:hover{color:var(--accent)}

/* ---------- footer ---------- */
.foot{margin-top:var(--s9);padding-block:var(--s8);border-top:1px solid var(--line)}
.foot .grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:var(--s6)}
@media (max-width:760px){.foot .grid{grid-template-columns:1fr}}
.foot h2{font-size:30px}
.foot p,.foot li{font-size:14px;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .fine{font-size:12px;margin-top:var(--s5)}

/* ---------- door transition: a seam of lamplight opening ---------- */
.door{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;grid-template-columns:1fr 1fr}
.door i{background:var(--night);transition:transform .7s var(--ease)}
.door i:first-child{transform:translateX(-101%);box-shadow:inset -1px 0 0 var(--lamp)}
.door i:last-child{transform:translateX(101%);box-shadow:inset 1px 0 0 var(--lamp)}
.door.shut i{transform:translateX(0)}
.door.boot i{transition:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv.pre{transform:none;opacity:1}html{scroll-behavior:auto}}