:root{
  --sans:'Helvetica Neue',Helvetica,Arial,sans-serif;--serif:'Newsreader',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,.75,.2,1);
  --mono:0;
  --bgc:#1b1610;--inkc:#f4ede3;--softc:#cfc3b2;--accentc:#e2b98a;--line:rgba(244,237,227,.22);
  --bgm:#141414;--inkm:#f0f0f0;--softm:#bdbdbd;--accentm:#d6d6d6;
}
body{--m:calc(var(--mono) * 100%);
  --bg:color-mix(in srgb,var(--bgc),var(--bgm) var(--m));--ink:color-mix(in srgb,var(--inkc),var(--inkm) var(--m));
  --soft:color-mix(in srgb,var(--softc),var(--softm) var(--m));--accent:color-mix(in srgb,var(--accentc),var(--accentm) var(--m))}
body[data-tone=heat]{--bgc:#efe5d6;--inkc:#2a1d12;--softc:#6d5a47;--accentc:#a65a2a;--bgm:#e8e7e4;--inkm:#191919;--softm:#5c5c5c;--accentm:#3a3a3a;--line:rgba(30,30,30,.18)}
body[data-tone=cold]{--bgc:#dde3e5;--inkc:#18252c;--softc:#566771;--accentc:#4f6b7b;--bgm:#dcdcda;--inkm:#151515;--softm:#5a5a5a;--accentm:#3d3d3d;--line:rgba(21,21,21,.18)}
body[data-tone=rest]{--bgc:#f3e9da;--inkc:#2a1d12;--softc:#6d5a47;--accentc:#a65a2a;--bgm:#eceae6;--inkm:#191919;--softm:#5c5c5c;--accentm:#3a3a3a;--line:rgba(42,29,18,.18)}
body[data-tone=night]{--bgc:#ead9c4;--inkc:#2a1d12;--softc:#6a5642;--accentc:#9c4f22;--bgm:#e4e2de;--inkm:#191919;--softm:#5c5c5c;--accentm:#3a3a3a;--line:rgba(42,29,18,.2)}
*{box-sizing:border-box}
html{background:#1b1610}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;transition:background-color 1.2s var(--ease),color 1.2s var(--ease)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin:0}
em{font-style:italic}

/* top bar */
.top{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;color:var(--ink);transition:color .8s var(--ease)}
body[data-tone=hero] .top{color:#fff}
.mark{color:inherit;text-decoration:none;font-weight:300;font-size:18px;letter-spacing:-.04em}
.mark span{opacity:.7}
.top-line{display:none;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;opacity:.8}
.top-reserve{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;padding:9px 0;border-bottom:1px solid currentColor}

/* temperature rail */
.rail{position:fixed;z-index:19;left:20px;bottom:22px;display:flex;align-items:baseline;gap:10px;color:var(--accent);transition:color .8s var(--ease),opacity .6s}
body[data-tone=hero] .rail{opacity:0}
.rail-num{font-weight:200;font-size:38px;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.rail-label{font-size:8px;letter-spacing:1.8px;font-weight:500}
.rail-line{display:none}

/* ---------- the dive: steam, glass, depth ---------- */
.dive{position:relative}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;overflow:clip;background:#2b2116}
.frame{position:absolute;left:0;top:0;width:1500px;height:1000px;transform-origin:0 0;will-change:transform}
.layer{position:absolute;inset:0;width:100%;height:100%}
.steam-zone{position:absolute;left:4%;top:28%;width:62%;height:44%;transform-origin:50% 100%;pointer-events:none}
.steam-zone.near{left:0;top:30%;width:70%;height:50%}
.s{position:absolute;left:0;bottom:0;width:100%;height:auto;mix-blend-mode:screen;opacity:0;
  filter:sepia(.6) saturate(1.6) hue-rotate(-8deg) brightness(.85) blur(1.5px);
  -webkit-mask-image:radial-gradient(ellipse 48% 46% at 50% 58%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 48% 46% at 50% 58%,#000 10%,transparent 70%);
  animation:rise 13s linear infinite;will-change:transform,opacity}
.s1{width:80%;left:10%;animation-duration:12s}
.s2{width:70%;left:28%;animation-duration:15s;animation-delay:-5s}
.s3{width:55%;left:4%;animation-duration:17s;animation-delay:-9s}
.s4{width:90%;left:0;animation-duration:19s;animation-delay:-13s}
.s5{width:60%;left:20%;animation-duration:16s;animation-delay:-3s;filter:sepia(.5) saturate(1.4) brightness(.7) blur(3px)}
@keyframes rise{
  0%{opacity:0;transform:translate3d(0,22%,0) scale(.9)}
  20%{opacity:var(--so,.34)}
  60%{opacity:calc(var(--so,.34) * .6)}
  100%{opacity:0;transform:translate3d(7%,-40%,0) scale(1.35)}
}
.glass{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.hero-type{position:absolute;left:20px;right:20px;top:78px;color:#fff;pointer-events:none;text-shadow:0 2px 40px rgba(60,35,10,.35)}
.hero-type h1{font-weight:200;font-size:clamp(80px,23vw,330px);letter-spacing:-.085em;line-height:.9;margin-left:-.04em}
.hero-type h1 span{font-size:.55em}
.hero-sub{font-family:var(--serif);font-weight:300;font-size:clamp(24px,6.4vw,46px);line-height:1.12;letter-spacing:-.02em;margin-top:18px}
.wipe-hint{position:absolute;left:20px;bottom:86px;display:flex;align-items:center;gap:12px;color:#fff;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;opacity:.9;pointer-events:none;transition:opacity .8s}
.wipe-hint.gone{opacity:0}
.wipe-line{display:block;width:44px;height:1px;background:#fff;transform-origin:0 50%;animation:wipe 2.4s var(--ease) infinite}
@keyframes wipe{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.scroll-hint{position:absolute;right:20px;bottom:30px;color:#fff;font-family:var(--serif);font-style:italic;font-size:16px;opacity:.85}

/* ---------- chapters ---------- */
.chapter{position:relative;padding:110px 20px 120px}
.chapter-head{display:grid;grid-template-columns:44px 1fr auto;align-items:end;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:46px;transition:border-color 1.2s}
.ch-n{font-family:var(--serif);font-style:italic;font-size:22px}
.ch-name{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:500;padding-bottom:3px}
.ch-t{display:none}
.chapter h2{font-family:var(--serif);font-weight:300;font-size:clamp(38px,9.5vw,108px);line-height:1.02;letter-spacing:-.035em}
.chapter h2 em{color:var(--accent)}
.chapter p{font-size:16px;line-height:1.65;font-weight:300}
figure{margin:0;position:relative}
figure img{width:100%;height:100%;object-fit:cover}
figcaption{display:flex;justify-content:space-between;gap:12px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--soft);margin-top:10px}

/* photos with live steam on top */
.live{overflow:hidden}
.live>img{height:auto}
.steam-over{position:absolute;inset:0 0 28px 0;pointer-events:none;overflow:hidden}
.steam-over img{position:absolute;left:-10%;width:120%;bottom:30%;mix-blend-mode:screen;opacity:0;filter:sepia(.35) brightness(.85);
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 30%,transparent 72%);mask-image:radial-gradient(ellipse 50% 50% at 50% 55%,#000 30%,transparent 72%);animation:rise 14s linear infinite}
.steam-over img+img{animation-duration:18s;animation-delay:-8s;left:5%;width:90%}
.steam-over.low img{bottom:10%;width:110%;left:-5%}

/* heat */
.heat-grid,.cold-grid,.rest-grid{display:grid;gap:34px}
.heat-grid,.cold-grid,.rest-grid,.cabins{grid-template-columns:minmax(0,1fr)}
.heat-a img{aspect-ratio:2/3}
.heat-copy{display:grid;gap:16px;max-width:32em}
.heat-b img{aspect-ratio:4/3}
.heat-c{width:56%}
.heat-c img{aspect-ratio:2/3}

/* cold */
.cold h2{margin-bottom:44px}
.pier{margin:0 -20px;height:78vh;min-height:420px;overflow:hidden}
.pier figcaption{padding:0 20px}
.pier>img{height:100%}
.drift{position:absolute;inset:0 0 34px 0;pointer-events:none;overflow:hidden}
.drift img{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none;mix-blend-mode:screen;opacity:.42;animation:drift 70s linear infinite;filter:grayscale(1) brightness(1.1)}
@keyframes drift{from{transform:translateX(-35%)}to{transform:translateX(0)}}
.cold-grid{margin-top:56px}
.cold-a img{aspect-ratio:2/3}
.cold-copy{display:grid;gap:22px;max-width:30em}
.cold-steps{display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--serif);font-style:italic;font-size:19px!important}
.cold-steps span:not(:last-child):after{content:'→';font-style:normal;margin:0 10px;color:var(--accent)}
.cold-b{width:100%}
.cold-b img{aspect-ratio:3/2}
.cold-c img{aspect-ratio:3/2}

/* rest */
.rest-a img{aspect-ratio:4/5;object-position:50% 78%}
.round{border-top:1px solid var(--line);max-width:420px}
.round-title{display:block;font-size:9px;letter-spacing:2px;font-weight:500;padding:16px 0 6px;color:var(--soft)}
.round p{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding:13px 0}
.round b{font-weight:200;font-size:30px;letter-spacing:-.04em}
.round span{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--soft)}
.rest-b img{aspect-ratio:3/2}
.rest-c{width:70%;margin-left:auto}
.rest-c img{aspect-ratio:3/4}

/* night */
.night h2{margin-bottom:50px}
.cabins{display:grid;gap:60px}
.cabin figure img{aspect-ratio:4/5}
.cabin figure img.low{object-position:50% 88%}
.mornings{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;margin-top:70px}
.m-a img,.m-d img{aspect-ratio:3/2}
.m-b img,.m-c img{aspect-ratio:2/3}
.m-b{width:64%}
.m-c{width:64%;margin-left:auto}
.m-d{width:82%}
.cabin-text{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;margin-top:20px}
.cabin-n{grid-row:span 3;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--accent)}
.cabin h3{font-weight:300;font-size:26px;letter-spacing:-.6px}
.cabin-text p{color:var(--soft);max-width:28em}
.cabin-price{font-size:12px!important;letter-spacing:1.3px;text-transform:uppercase;color:var(--accent)!important;margin-top:6px}
.last{margin-top:120px;border-top:1px solid var(--line);padding-top:36px}
.last p{font-family:var(--serif);font-weight:300;font-size:clamp(36px,9vw,104px)!important;line-height:1.04!important;letter-spacing:-.035em}
.last em{color:var(--accent)}
.last button{margin-top:30px;font-size:18px;font-weight:300;padding:12px 0;border-bottom:1px solid var(--accent);display:inline-flex;gap:40px}

/* footer */
.foot{background:#0b0b0b;color:#e9e6e0;padding:40px 20px max(30px,env(safe-area-inset-bottom))}
.foot-mark{display:block;color:inherit;text-decoration:none;font-weight:200;font-size:clamp(74px,21.5vw,300px);letter-spacing:-.085em;line-height:.95;margin-left:-.04em}
.foot-mark span{font-size:.55em}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;border-top:1px solid rgba(233,230,224,.18);padding-top:18px}
.foot nav a,.foot nav button{color:inherit;text-decoration:none;font-size:15px;font-weight:300}
.foot-note{margin-top:30px;font-size:12px;color:#9a978f}
.foot-sign{display:inline-flex;align-items:center;gap:8px;margin-top:28px;color:#8f8b82;text-decoration:none;font-family:var(--serif);font-style:italic;font-size:14px}
.foot-sign img{opacity:.75}

/* reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ---------- booking: light and warm, the cabin in full view ---------- */
.booking{--b-bg:#f6f0e6;--b-ink:#241a11;--b-soft:#6f6152;--b-faint:#9c8f7d;--b-line:#dbd0bf;--b-acc:#a8572a;
  position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:auto 1fr;background:var(--b-bg);color:var(--b-ink);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .6s var(--ease)}
.booking.open{opacity:1}
.booking[hidden]{display:none}
.b-key{position:relative;height:38vh;min-height:250px;overflow:hidden;background:#d9c9b2}
.b-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s var(--ease)}
.b-key:after{content:'';position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(30,18,8,.45));pointer-events:none}
.key{position:absolute;z-index:1;right:22px;bottom:14px;width:74px;aspect-ratio:268/640;background-size:contain;background-position:50% 50%;background-repeat:no-repeat;filter:drop-shadow(0 14px 18px rgba(30,15,5,.45));transform:rotate(6deg)}
.key-tag{position:absolute;z-index:1;left:20px;bottom:16px;font-size:9px;letter-spacing:2px;color:#fff}
.b-panel{padding:26px 20px max(24px,env(safe-area-inset-bottom));max-width:600px;width:100%;justify-self:center}
.b-head{display:flex;justify-content:space-between;align-items:flex-start}
.b-eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--b-acc)}
.b-head h2{font-family:var(--serif);font-weight:300;font-size:34px;letter-spacing:-.03em;margin:8px 0 18px}
.b-head h2:focus{outline:none}
.b-close{font-weight:200;font-size:32px;width:44px;height:44px;margin:-8px -10px 0 0}
.b-steps{list-style:none;display:flex;gap:18px;margin:0 0 20px;padding:0 0 12px;border-bottom:1px solid var(--b-line);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--b-faint)}
.b-steps li.on{color:var(--b-ink)}
.b-steps li.done{color:var(--b-acc);cursor:pointer}
.b-steps[hidden]{display:none}
.b-dates{display:grid;grid-template-columns:1fr 26px 1fr;align-items:center;margin-bottom:16px;color:var(--b-faint)}
.date-choice{text-align:left;border-bottom:1px solid var(--b-line);padding:0 0 12px;min-height:56px}
.date-choice>span{display:block;font-size:8px;letter-spacing:1.4px;color:var(--b-soft)}
.date-choice strong{display:block;font-size:18px;font-weight:300;margin-top:9px;color:var(--b-ink)}
.date-choice.active{border-color:var(--b-acc)}
.date-choice.active>span{color:var(--b-acc)}
.cal-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.cal-head button{width:44px;height:40px;font-size:22px;font-weight:200}
.cal-head button:disabled{opacity:.2}
.weekdays,.calendar{display:grid;grid-template-columns:repeat(7,1fr)}
.weekdays{height:26px;align-items:center;text-align:center;font-size:8px;color:var(--b-soft)}
.calendar button,.calendar>span{height:50px;min-width:0;font-size:13px;position:relative}
.calendar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1}
.calendar .pr{font-size:9px;color:var(--b-soft);min-height:9px}
.calendar button:disabled{color:#c2b7a6}
.calendar button:disabled .pr{color:#c9bfaf}
.calendar button:not(:disabled):hover{background:#ece2d1}
.calendar button.selected,.calendar button.selected:not(:disabled):hover{background:var(--b-ink);color:var(--b-bg)}
.calendar button.selected .pr{color:#d8c9b3}
.calendar button.between{background:#e8dcc8}
.calendar button.full .d{text-decoration:line-through}
.calendar button.today:after{content:'';position:absolute;bottom:4px;left:50%;width:3px;height:3px;background:currentColor}
.cal-note{font-size:10px;line-height:1.5;color:var(--b-soft);margin-top:10px}
.b-bottom{border-top:1px solid var(--b-line);margin-top:16px;padding-top:12px}
.b-bottom p{font-size:12px;color:var(--b-soft);margin-bottom:12px;min-height:12px}
.b-bottom>button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:var(--b-ink);color:var(--b-bg);font-size:15px}
.b-bottom>button:disabled{background:transparent;color:var(--b-faint);border:1px solid var(--b-line)}
#pay b{font-weight:400;margin-left:6px}
.cabin-option{display:grid;grid-template-columns:104px 1fr;gap:6px 16px;align-items:start;width:100%;text-align:left;padding:16px 0;border-bottom:1px solid var(--b-line);position:relative}
.cabin-option img{grid-row:span 2;width:104px;height:130px;object-fit:cover}
.cabin-option:last-child img{object-position:50% 88%}
.cabin-option[aria-checked=true]:before{content:'';position:absolute;left:-20px;top:16px;bottom:16px;width:3px;background:var(--b-acc)}
.cabin-option[aria-checked=true] .co-body strong{color:var(--b-acc)}
.cabin-option:disabled{opacity:.42}
.co-body strong{display:block;font-size:20px;font-weight:300;letter-spacing:-.3px}
.co-body span{display:block;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--b-soft);margin-top:6px;line-height:1.35}
.co-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;align-self:end}
.co-price strong{font-size:16px;font-weight:400}
.co-price span{font-size:9px;letter-spacing:1px;color:var(--b-soft);text-transform:uppercase}
.co-price em{font-style:normal;font-size:9px;letter-spacing:1px;color:var(--b-acc);text-transform:uppercase}
.summary{margin:0}
.summary div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--b-line);font-size:14px}
.summary dt{color:var(--b-soft);font-weight:300}
.summary dd{margin:0;text-align:right}
.summary .total{border-bottom:0;padding-top:16px;font-size:22px;font-weight:300}
.summary .total dt{color:var(--b-ink)}
.summary .deposit{border-top:1px solid var(--b-ink);color:var(--b-acc)}
.summary .deposit dt{color:var(--b-acc)}
.fields{display:grid;gap:12px;margin:22px 0 14px}
.fields label>span{display:block;font-size:8px;letter-spacing:1.5px;color:var(--b-soft);margin-bottom:6px}
.fields input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--b-line);color:var(--b-ink);font:300 16px var(--sans);padding:6px 0 10px;border-radius:0;outline:none}
.fields input:focus{border-color:var(--b-acc)}
.fields input::placeholder{color:#b3a794}
.fields label.miss>span{color:var(--b-acc)}
.fields label.miss input{border-color:var(--b-acc)}
.pay-note{font-size:12px;line-height:1.55;color:var(--b-soft)}
.booked-ref{font-size:13px;color:var(--b-acc);margin:4px 0 18px}
.booked-copy{font-family:var(--serif);font-size:24px;line-height:1.38;font-weight:300}
.concept-note{font-size:11px;line-height:1.55;color:var(--b-faint);margin-top:22px;padding-top:14px;border-top:1px solid var(--b-line)}

@media(min-width:800px){
  .top{padding:24px 4vw}
  .top-line{display:block}
  .rail{left:4vw;bottom:auto;top:50%;transform:translateY(-50%);flex-direction:column;align-items:flex-start;gap:8px}
  .rail-num{font-size:64px}
  .rail-line{display:block;position:relative;width:1px;height:120px;background:currentColor;opacity:.35;margin-top:10px}
  .rail-line i{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:currentColor;top:calc(var(--rail,0) * 113px);transition:top 1s var(--ease)}
  .hero-type{left:4vw;right:4vw;top:96px}
  .hero-type h1{font-size:clamp(140px,19vw,330px)}
  .hero-sub{margin-left:calc(19vw * .66)}
  .wipe-hint{left:4vw;bottom:44px}
  .scroll-hint{right:4vw;bottom:40px}
  .chapter{padding:150px 4vw 170px 15vw}
  .chapter-head{grid-template-columns:80px 1fr auto;margin-bottom:80px}
  .ch-t{font-size:72px}
  .chapter p{font-size:17px}
  .heat-grid,.cold-grid,.rest-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:70px;align-items:start}
  .heat-grid h2{grid-column:1/9}
  .heat-a{grid-column:1/6;grid-row:2/4}
  .heat-copy{grid-column:7/12;grid-row:2;align-self:end}
  .heat-b{grid-column:7/13;grid-row:3}
  .heat-c{grid-column:3/6;grid-row:4;width:auto}
  .pier{margin:0 -4vw 0 -15vw;height:92vh}
  .pier figcaption{padding:0 4vw 0 15vw}
  .cold-grid{margin-top:90px}
  .cold-a{grid-column:1/5;grid-row:1/3}
  .cold-copy{grid-column:6/11;grid-row:1;align-self:center}
  .cold-b{grid-column:5/11;grid-row:2;width:auto;margin:0}
  .cold-c{grid-column:11/13;grid-row:2;align-self:end}
  .rest-grid h2{grid-column:1/8}
  .rest-a{grid-column:8/13;grid-row:1/3}
  .round{grid-column:1/5;grid-row:2;align-self:end}
  .rest-b{grid-column:1/8;grid-row:3}
  .rest-c{grid-column:9/12;grid-row:3;width:auto;margin:16vh 0 0}
  .cabins{grid-template-columns:repeat(2,minmax(0,1fr));gap:3vw}
  .cabins .cabin:nth-child(2){margin-top:14vh}
  .mornings{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:70px;margin-top:130px;align-items:start}
  .m-a{grid-column:1/7;grid-row:1}
  .m-b{grid-column:8/10;grid-row:1;width:auto;margin-top:10vh}
  .m-c{grid-column:10/13;grid-row:1;width:auto}
  .m-d{grid-column:4/8;grid-row:2;width:auto}
    .last{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;column-gap:2vw}
  .last p{grid-column:1/10}
  .last button{grid-column:10/13;justify-self:end}
  .foot{padding:60px 4vw 40px 15vw}
  .booking{grid-template-rows:none;grid-template-columns:1.1fr 1fr}
  .b-key{height:auto;min-height:100vh;position:sticky;top:0}
  .key{width:118px;right:44px;bottom:34px}
  .key-tag{left:36px;bottom:30px;font-size:10px}
  .b-panel{padding:60px 5vw;justify-self:start;align-self:center}
}
@media(prefers-reduced-motion:reduce){
  .s,.steam-over img,.drift img,.wipe-line{animation:none!important;opacity:.35}
  .js .rv{opacity:1;transform:none;transition:none}
}

/* ---------- colour drains into cinema black and white ---------- */
.frame .layer,.chapter figure>img,.cabin img,.cabin-option img,.b-photo{filter:grayscale(var(--mono)) contrast(calc(1 + .12 * var(--mono))) brightness(calc(1 + .06 * var(--mono)))}
.s{filter:sepia(calc(.6 * (1 - var(--mono)))) saturate(calc(1.6 - .6 * var(--mono))) grayscale(var(--mono)) brightness(.85) blur(1.5px)}
.s5{filter:sepia(calc(.5 * (1 - var(--mono)))) grayscale(var(--mono)) brightness(.7) blur(3px)}
.steam-over img{filter:sepia(calc(.35 * (1 - var(--mono)))) grayscale(var(--mono)) brightness(.85)}
.glass{filter:grayscale(var(--mono))}
.grain{position:fixed;inset:0;z-index:30;pointer-events:none;background:url(assets/grain.png);background-size:256px 256px;mix-blend-mode:overlay;opacity:calc(.04 + .07 * var(--mono))}


/* small screens: the temperature rides in the top bar, and the bar gets a veil so text never collides */
body:not([data-tone=hero]) .top{background:linear-gradient(var(--bg) 50%,transparent)}
@media(max-width:799px){
  .rail{left:50%;bottom:auto;top:15px;transform:translateX(-50%);z-index:21;gap:7px}
  .rail-num{font-size:20px;letter-spacing:-.04em}
  .rail-label{font-size:7px;letter-spacing:1.4px}
  }