/* formats/booking/format.css - Nyholt Bathhouse, the booking-first demo. Brand truth: BRAND.md.
   Every selector is prefixed .fmt-booking. Layout, tiles, rows, chips and the assistant come from
   shared.css; this file sets the brand hooks, the display face, the cedar and warm light grounds,
   the hero panel (assistant over the week), the slot grid, the steps, rooms, plunge band, the
   coming back cards, the two houses, the questions and the confirmation tile.

   CLASS INVENTORY for the html agent (page order; shared recipes in brackets, ids as the bible names them)
   body.fmt-booking data-format="booking"
   .f-nav > .container.f-nav-in > a.f-brand (i.f-mark holds inline mark.svg) + nav.f-tabs + .f-nav-acts > a.pill.pill-ink.sm Start
   #top main
   section#book.hero-f.bk-hero > .container.bk-split.bk-panel (the positioned ancestor for the Flip chip)
       .bk-copy   children IN THIS ORDER: span.k | h1.h1#hero-h | p.lead | .row (a.pill.pill-ink.lg Start, a.pill.pill-ghost.lg Open) | p.micro
       .bk-cal > p.tile-k.bk-cal-k (span + span.ex Example) + ul.bk-week#bk-week + p.bk-cal-f
           li.bk-day(.is-shut) > p.bk-dn > abbr ; .bk-slots > button.bk-slot.is-open[data-day][data-time] | span.bk-slot.is-off > text + span.visually-hidden
       .bk-tile.bk-stack (.is-lit once a time is taken) > figure.bk-layer.bk-l-shore (picture nyholt-shore)
           + figure.bk-layer.bk-l-room (picture nyholt-steam poster + video.bk-video + span.bk-ember)
           + .bk-layer.bk-l-chat > .chat.bk-chat.on-dark[data-chat=static] > .chat-head + .chat-log#bk-log + .chat-foot > span.typing#bk-typing[hidden]
       p.visually-hidden#bk-live[role=status][aria-live=polite]
       p.booked(.is-in) is the chip format.js drops into #bk-log; add .is-flying while Flip moves it (opacity 1, no transition)
   section#how ... ul.bk-steps > li > picture.bk-step-fig (4:5, lazy) + b + span ; the rule above each step draws in on reveal
   section#plunge ... figure.band[data-parallax] > picture + span.bk-mist (empty; its ::before and ::after are the mist, running while .bk-plunge.is-live) + figcaption
   section#coming-back ... .two-col.bk-back-head > .sec-h + .tile.tile-16x9.bk-back-fig.bk-media[data-reveal] > picture
   section#questions ... .sec-h.bk-q-head > span.k h2.h2 + .tile.tile-4x3.bk-q-fig.bk-media[data-reveal] > picture
   section#passage.bk-passage > figure.band.bk-media[data-reveal] > picture (21:9 band, lazy, no caption)
   section#how.bk-how.bk-lines > .container > h2.visually-hidden + ul.bk-steps > li > b + span
   section#rooms.ground-light.bk-rooms > .container > .sec-h (span.k h2.h2 p.lead) + .grid.g-3.bk-rooms-grid
       article.hcard.bk-room > picture > img (4:3, lazy) ; h3.hcard-t ; p.hcard-p ; p.bk-room-a > a.pill.pill-ink.sm Start
   section#plunge.bk-plunge > figure.band > picture > img (21:9 band, lazy) + figcaption.figcap(.plate optional) > span
   section#coming-back.bk-back > .container > .sec-h + .grid.g-3.bk-back-grid + p.bk-note
       article.hcard.bk-say > p.tile-k > span + span.ex Example ; p.bk-say-q (the example line)
   section#houses.ground-light.bk-houses > .container > .sec-h + .grid.g-2.bk-locs
       article.bk-loc > .tile.tile-16x9[data-tile] > picture > img + .tile-scrim + .tile-copy.on-dark > p.tile-k (span + span.ex) + p.tile-t + p.tile-s
                        ul.rows > li > b + span (Where, When, Ask for) ; p.bk-loc-a > a.pill.pill-ink.sm Start
   section#questions.bk-questions.bk-lines > .container > .two-col.bk-q-grid > .sec-h.bk-q-head (span.k h2.h2 p.lead) + .bk-faq > details > summary + .bk-faq-b > p
   section#confirm.bk-cta.sec-flush > .container > .tile.bk-cta-tile[data-tile] > .shader[data-shader=metaballs] (no data-palette-fixed) + .bk-cta-in > span.k h2.h2 p.lead a.pill.pill-ink.lg
   footer.f-foot > .container.f-foot-in > a.f-brand + p */

/* ---------- face: Instrument Serif, roman 400 only (verbatim from assets/fonts/BRANDS.md) ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-display.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif Fallback';src:local('Times New Roman'),local('TimesNewRomanPSMT');size-adjust:83.6%;ascent-override:118.4%;descent-override:37.1%;line-gap-override:0%}

/* ---------- brand hooks (palette from BRAND.md; ground2 here is lifted cedar, the --bg-2 role on the dark page;
   the two warm light sections take .ground-light and the --b-light-* hooks below) ---------- */
.fmt-booking{--b-ground:#171311;--b-ground2:#221B17;--b-ground3:#2C231E;--b-ink:#F7F2EC;--b-text2:#CFC6BC;--b-text3:#9FB3B5;
  --b-accent:#C8703A;--b-accent-tint:#372418;--b-on-accent:#171311;--b-line:rgba(247,242,236,.14);--b-line-control:rgba(247,242,236,.34);
  --b-surface:var(--b-ground2);--b-cta:var(--b-accent);--b-on-cta:var(--b-on-accent);--b-focus:var(--b-accent);--b-tab-rule:var(--b-accent);
  --b-glass:rgba(23,19,17,.74);--b-glass-line:rgba(247,242,236,.16);--b-dot:var(--b-accent);
  --b-scrim:rgba(23,19,17,.62);--b-scrim-ink:#F7F2EC;--b-scrim-solid:#171311;
  --b-scrim-grad:linear-gradient(180deg,rgba(23,19,17,.08) 0%,rgba(23,19,17,.62) 52%,rgba(23,19,17,.86) 100%);
  --b-light:#F7F2EC;--b-light2:#EDE4D8;--b-light-ink:#171311;--b-light-text2:#5C524A;--b-light-text3:#5C524A;--b-light-accent:#171311;--b-light-accent-tint:#EDD8C7;
  --b-display:'Instrument Serif','Instrument Serif Fallback','Times New Roman',serif;--b-display-weight:400}
.fmt-booking .f-nav,.fmt-booking main,.fmt-booking .f-foot{--text-2:var(--b-text2);--text-3:var(--b-text3);--bg-3:var(--b-ground3);--line-control:var(--b-line-control)}
.fmt-booking main ::selection,.fmt-booking .f-nav ::selection{background:var(--b-accent);color:var(--b-on-accent)}
.fmt-booking .ground-light{--b-focus:#171311;--line-control:rgba(23,19,17,.4);--bg-3:#E4DACC}
.fmt-booking .ground-light ::selection{background:var(--b-accent);color:var(--b-on-accent)}

/* ---------- display type: one weight, never synthesised ---------- */
.fmt-booking .f-brand,.fmt-booking main .h1,.fmt-booking main .h2,.fmt-booking main .hcard-t,.fmt-booking main .tile-t,.fmt-booking .booked,.fmt-booking .figcap b{
  font-family:var(--b-display);font-weight:400}
.fmt-booking .f-brand{font-size:21px;letter-spacing:-.01em;gap:10px;white-space:nowrap}
.fmt-booking .f-brand .f-mark{width:22px;height:22px}
@media (max-width:820px){.fmt-booking .f-brand{font-size:19px;gap:8px}.fmt-booking .f-brand .f-mark{width:20px;height:20px}}
.fmt-booking main .h1{font-size:clamp(52px,8.2vw,120px);letter-spacing:-.015em;line-height:1.02;max-width:none;padding-right:.04em}
/* on a phone the stacked panel's room photograph is a wide box near the fold; the headline is set larger there
   (still the same two sentences, balanced) so it stays the largest paint without shrinking the room */
@media (max-width:600px){.fmt-booking main .h1{font-size:clamp(52px,18.5vw,84px);line-height:.98;text-wrap:balance}}
.fmt-booking main .h2{font-size:clamp(36px,4vw,60px);letter-spacing:-.008em;line-height:1.08;max-width:16ch;margin-bottom:16px}
.fmt-booking main .lead{color:var(--text-2)}

/* ---------- controls and chrome on cedar ---------- */
.fmt-booking main .pill-ghost,.fmt-booking .f-nav .pill-ghost{background:transparent;border-color:var(--line-control);color:var(--ink)}
.fmt-booking main .pill-ghost:hover{background:var(--bg-2);border-color:var(--ink)}
.fmt-booking .pill-ink:hover{background:#D7834D}
.fmt-booking main .pill,.fmt-booking .f-nav .pill{transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.fmt-booking main .pill:hover,.fmt-booking .f-nav .pill:hover{transform:translateY(-1px)}
.fmt-booking main .pill:active,.fmt-booking .f-nav .pill:active{transform:scale(.98)}
/* the tab rule wipes: it grows from the left under the section you are in and leaves to the right */
.fmt-booking .f-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--b-tab-rule);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.fmt-booking .f-tabs a.is-on::after,.fmt-booking .f-tabs a[aria-current]::after,.fmt-booking .f-tabs a:hover::after{transform:scaleX(1);transform-origin:left}
.fmt-booking .f-tabs a{opacity:.72}
.fmt-booking .f-foot{padding-top:40px}
.fmt-booking .f-foot p{color:var(--text-3)}
.fmt-booking .f-foot .f-brand{font-size:18px}

/* ---------- hero: a split with a stack ----------
   Left: the words, the actions and, under them, the week, so a time is one press from the first screen.
   Right: three layers of the house on one another, never a cover: the shore house at blue hour at the back
   (top right), the steam room moving in front of it (lower left), and the assistant card in front of both
   (bottom right). They settle in once on arrival and drift apart at three speeds as the page scrolls, on a CSS
   scroll timeline where the browser has one. The grid itself is .bk-panel: the positioned ancestor Flip flies
   the booked chip across, slot to log. Each layer stays under the h1's area at 1440 and 390. */
.fmt-booking .bk-hero{padding-top:clamp(22px,2.6vw,40px);padding-bottom:clamp(48px,6vw,96px)}
.fmt-booking .bk-split{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);grid-template-areas:"copy stack" "cal stack";
  column-gap:clamp(32px,4.4vw,72px);row-gap:clamp(22px,2.4vw,32px);align-items:start}
.fmt-booking .bk-copy{grid-area:copy}
.fmt-booking .bk-copy>.k{margin-bottom:clamp(14px,1.6vw,22px)}
.fmt-booking .bk-copy>.h1{margin-bottom:clamp(16px,1.8vw,24px);font-size:clamp(52px,6.9vw,104px);line-height:.96}
.fmt-booking .bk-copy>.lead{margin-bottom:clamp(18px,2vw,24px);max-width:40ch}
.fmt-booking .bk-copy>.micro{margin-top:14px;font-size:14px;color:var(--text-2)}
.fmt-booking .bk-split>.bk-cal{grid-area:cal;align-self:end}

.fmt-booking .bk-stack{grid-area:stack;position:relative;align-self:stretch;min-height:clamp(500px,41vw,596px)}
.fmt-booking .bk-layer{position:absolute;margin:0}
.fmt-booking .bk-layer picture,.fmt-booking .bk-layer img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.fmt-booking .bk-l-shore{right:0;top:0;width:74%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#221B17;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
.fmt-booking .bk-l-shore img{object-position:36% 60%}
.fmt-booking .bk-l-room{left:0;top:32%;width:46%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#221B17;
  box-shadow:0 36px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(247,242,236,.08)}
.fmt-booking .bk-l-room img{object-position:62% 50%}
.fmt-booking .bk-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block;opacity:0;transition:opacity .9s var(--ease)}
.fmt-booking .bk-video.is-live{opacity:1}
.fmt-booking .bk-video.is-off{opacity:0;visibility:hidden}
/* the stove throws its ember into the room once a time is taken */
.fmt-booking .bk-ember{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(70% 50% at 60% 62%,rgba(200,112,58,.46),rgba(200,112,58,0) 72%);transition:opacity 1.2s var(--ease)}
.fmt-booking .bk-tile.is-lit .bk-ember{opacity:1;animation:bk-breathe 6s ease-in-out infinite}
@keyframes bk-breathe{0%,100%{opacity:.72}50%{opacity:1}}
.fmt-booking .bk-l-chat{right:0;bottom:0;width:min(60%,360px);z-index:2}
.fmt-booking .bk-l-chat .chat{padding:14px 14px 8px}
.fmt-booking .bk-l-chat .bub{font-size:14px;line-height:1.38;padding:9px 13px}

@media (prefers-reduced-motion:no-preference){
  .fmt-booking .bk-l-shore{animation:bk-settle 1.3s var(--ease) .05s both}
  .fmt-booking .bk-l-room{animation:bk-settle 1.3s var(--ease) .2s both}
  .fmt-booking .bk-l-chat{animation:bk-settle 1.1s var(--ease) .4s both}
  .fmt-booking .bk-split>.bk-cal{animation:bk-rise .9s var(--ease) .3s both}
  @supports (animation-timeline:view()){
    .fmt-booking .bk-stack{view-timeline-name:--bk-stack}
    .fmt-booking .bk-l-shore>picture{animation:bk-drift-a linear both;animation-timeline:--bk-stack;animation-range:exit 0% exit 100%}
    .fmt-booking .bk-l-room>picture,.fmt-booking .bk-l-room>.bk-video{animation:bk-drift-b linear both;animation-timeline:--bk-stack;animation-range:exit 0% exit 100%}
  }
}
@keyframes bk-settle{from{opacity:0;transform:translate3d(0,34px,0) scale(.98)}to{opacity:1;transform:none}}
@keyframes bk-rise{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes bk-drift-a{from{transform:scale(1.08) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(0,-7%,0)}}
@keyframes bk-drift-b{from{transform:scale(1.1) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(0,6%,0)}}

/* the assistant card: warm dark glass, in the flow, over the steam */
.fmt-booking .bk-tile .chat{position:relative;left:auto;bottom:auto;width:auto;margin:0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.fmt-booking .bk-chat,.fmt-booking .bk-chat.on-dark{--ink:var(--b-ink);--text-2:var(--b-text2);--text-3:var(--b-text3);--line:rgba(247,242,236,.16);--b-surface:rgba(247,242,236,.07);
  background:var(--b-glass);border-color:var(--b-glass-line);color:var(--ink);box-shadow:0 24px 48px -32px rgba(0,0,0,.7);border-radius:18px}
.fmt-booking .bk-chat .bub.in{background:var(--b-surface);border-color:var(--line);color:var(--ink)}
.fmt-booking .bk-chat .bub.out{background:var(--b-accent);color:var(--b-on-accent)}
.fmt-booking .bk-chat .chat-log{min-height:0;gap:8px}
.fmt-booking .bk-chat .chat-head .dot{background:var(--b-accent);box-shadow:0 0 0 3px rgba(200,112,58,.22)}
.fmt-booking .booked{align-self:flex-start;font-size:17px;line-height:1.2;color:var(--b-on-accent);background:var(--b-accent);
  padding:6px 14px;border-radius:var(--r-pill);opacity:0;transition:opacity .45s var(--ease)}
.fmt-booking .booked.is-in,.fmt-booking .booked.is-flying{opacity:1}
.fmt-booking .booked.is-flying{transition:none;z-index:5;white-space:nowrap}

/* ---------- the week ---------- */
.fmt-booking .bk-cal{background:rgba(34,27,23,.94);border:1px solid rgba(247,242,236,.12);border-radius:var(--r-card);padding:clamp(14px,1.8vw,20px)}
.fmt-booking .bk-cal-k{margin-bottom:12px}
.fmt-booking .bk-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:stretch}
.fmt-booking .bk-day{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0}
.fmt-booking .bk-dn{font-size:12px;color:var(--text-3);text-align:center;letter-spacing:.02em;margin:0}
.fmt-booking .bk-dn abbr{text-decoration:none;border:0}
.fmt-booking .bk-slots{display:grid;gap:6px;min-width:0;align-content:start}
.fmt-booking .bk-slot{display:flex;align-items:center;justify-content:center;height:36px;padding:0 2px;border:1px solid transparent;border-radius:10px;
  background:rgba(247,242,236,.05);font:inherit;font-weight:500;font-size:clamp(11px,.95vw,13px);line-height:1;color:var(--text-3);text-align:center;white-space:nowrap;overflow:hidden}
.fmt-booking .bk-day.is-shut .bk-slots{align-content:stretch}
.fmt-booking .bk-day.is-shut .bk-slot{height:100%;min-height:36px;background:transparent;border:1px dashed rgba(247,242,236,.18)}

/* the three open times are the only things you can press: ember tint, ember rule, ink text */
.fmt-booking button.bk-slot{cursor:pointer;color:var(--ink);background:var(--b-accent-tint);border-color:var(--b-accent);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease)}
.fmt-booking button.bk-slot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--b-accent);margin-right:6px;flex:none}
.fmt-booking button.bk-slot:hover{background:var(--b-accent);color:var(--b-on-accent)}
.fmt-booking button.bk-slot:hover::before{background:var(--b-on-accent)}
.fmt-booking button.bk-slot:hover{transform:translateY(-1px)}
.fmt-booking button.bk-slot:active{transform:scale(.98)}
.fmt-booking button.bk-slot.is-booked{background:var(--b-accent);color:var(--b-on-accent);border-color:var(--b-accent);cursor:default;transform:none}
/* Booked is a longer word than a time, so the dot steps aside to keep it on one line in a narrow day */
.fmt-booking button.bk-slot.is-booked::before{display:none}
.fmt-booking .bk-cal-f{margin:14px 0 0;font-size:13px;color:var(--text-2);line-height:1.45;max-width:44ch}

@media (max-width:1100px){
  .fmt-booking .bk-split{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "cal" "stack"}
  .fmt-booking .bk-split>.bk-cal{align-self:start;max-width:640px}
  .fmt-booking .bk-stack{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:12px;max-width:640px;align-items:start}
  .fmt-booking .bk-layer{position:relative;inset:auto}
  .fmt-booking .bk-l-shore{width:auto;grid-column:1 / -1}
  .fmt-booking .bk-l-room{top:auto;width:auto;grid-column:1;grid-row:2}
  .fmt-booking .bk-l-chat{width:auto;grid-column:1 / -1;grid-row:3}
}
@media (max-width:420px){
  .fmt-booking .bk-week{gap:4px}
  .fmt-booking .bk-slot{height:32px;border-radius:8px}
  .fmt-booking button.bk-slot::before{margin-right:3px;width:5px;height:5px}
}

/* ---------- cedar with a hairline grid: how and questions ---------- */
.fmt-booking .bk-lines{position:relative;isolation:isolate;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fmt-booking .bk-lines::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(247,242,236,.055) 1px,transparent 1px),linear-gradient(180deg,rgba(247,242,236,.055) 1px,transparent 1px);
  background-size:96px 96px;background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 60%,rgba(0,0,0,.25) 100%)}

/* ---------- how a visit goes: three steps, a rule above each ---------- */
.fmt-booking .bk-how{padding:clamp(40px,5vw,72px) 0}
.fmt-booking .bk-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:repeat(3,minmax(0,1fr))}
.fmt-booking .bk-steps li{position:relative;display:grid;gap:8px;align-content:start;padding-top:18px}
.fmt-booking .bk-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--b-line-control);transform-origin:left}
/* a photograph above each step: 4:5 in the three columns, a wider crop once they stack */
.fmt-booking .bk-step-fig{display:block;margin:0 0 6px;border-radius:var(--r-card);overflow:hidden;background:var(--b-ground2);transform:translateZ(0)}
.fmt-booking .bk-step-fig>img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .9s var(--ease)}
.fmt-booking .bk-steps li:hover .bk-step-fig>img{transform:scale(1.03)}
.fmt-booking .bk-step-fig:active>img{transform:scale(.98)}
@media (max-width:900px){.fmt-booking .bk-step-fig>img{aspect-ratio:16/10}}
.fmt-booking .bk-steps b{font-weight:500;font-size:clamp(18px,1.5vw,21px);letter-spacing:-.01em;line-height:1.25}
.fmt-booking .bk-steps span{font-size:15px;color:var(--text-2);line-height:1.5;max-width:34ch}
@media (max-width:900px){.fmt-booking .bk-steps{grid-template-columns:1fr}}

/* ---------- rooms: warm light, three photographs, no card border ---------- */
.fmt-booking .bk-rooms .sec-h .lead{margin-bottom:0}
.fmt-booking .bk-rooms-grid{gap:clamp(20px,3vw,40px)}
.fmt-booking .bk-room{background:transparent;border:0;border-radius:0;padding:0;gap:0;overflow:visible;box-shadow:none}
.fmt-booking .bk-room>picture{display:block;border:0;border-radius:var(--r-tile);overflow:hidden;background:var(--bg-3);transform:translateZ(0);transition:transform .35s var(--ease)}
.fmt-booking .bk-room:hover>picture{transform:translate3d(0,-1px,0)}
.fmt-booking .bk-room>picture:active{transform:scale(.98)}
.fmt-booking .bk-room>picture>img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .8s var(--ease)}
.fmt-booking .bk-room:hover>picture>img{transform:scale(1.03)}
.fmt-booking .bk-room>.hcard-t{padding:20px 0 0;font-size:clamp(26px,2.2vw,32px);letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.fmt-booking .bk-room>.hcard-p{padding:10px 0 0;font-size:16px;color:var(--text-2);line-height:1.5;max-width:36ch}
.fmt-booking .bk-room-a{margin-top:16px}

/* ---------- the plunge: the one full bleed band ---------- */
.fmt-booking .bk-plunge{padding:0;background:var(--b-ground)}
.fmt-booking .bk-plunge .band{background:var(--b-ground3)}
.fmt-booking .bk-plunge .band{--band-max:min(64vh,720px)}
/* the signature: mist drifting low over the cold water. Two tiled gradient layers (the pseudo elements, so no element
   ever reaches past the viewport) slide in opposite directions on transform only; the pattern repeats every half width
   so the loop is seamless. It runs only while the band is on screen (.is-live from format.js) and never under reduced motion. */
.fmt-booking .bk-mist{position:absolute;left:0;top:0;width:100%;z-index:1;aspect-ratio:21/9;max-height:var(--band-max);overflow:hidden;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease)}
.fmt-booking .bk-plunge.is-live .bk-mist{opacity:1}
.fmt-booking .bk-mist::before,.fmt-booking .bk-mist::after{content:"";position:absolute;left:0;top:34%;width:200%;height:66%;
  background-image:radial-gradient(38% 58% at 18% 72%,rgba(159,179,181,.30),transparent 70%),radial-gradient(26% 44% at 52% 84%,rgba(247,242,236,.16),transparent 70%),radial-gradient(34% 52% at 82% 66%,rgba(159,179,181,.24),transparent 70%);
  background-size:50% 100%;background-repeat:repeat-x;
  animation:bk-drift 46s linear infinite;animation-play-state:paused;will-change:transform}
.fmt-booking .bk-mist::after{top:44%;height:56%;opacity:.7;animation-duration:64s;animation-direction:reverse}
.fmt-booking .bk-plunge.is-live .bk-mist::before,.fmt-booking .bk-plunge.is-live .bk-mist::after{animation-play-state:running}
@keyframes bk-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:620px){.fmt-booking .bk-mist{min-height:220px}}
.fmt-booking .bk-plunge .figcap{margin-top:0;padding-top:16px;padding-bottom:clamp(20px,2.6vw,32px);font-size:15px;color:var(--text-2);max-width:none}
.fmt-booking .bk-plunge .figcap>span{display:block;max-width:var(--maxw);margin:0 auto;width:100%}
.fmt-booking .bk-plunge .figcap.plate{padding:16px var(--gutter);background:var(--b-accent-tint);color:var(--ink)}

/* ---------- passage: the second band, the way between the rooms, before the close ---------- */
.fmt-booking .bk-passage{padding:0;background:var(--b-ground)}
.fmt-booking .bk-passage .band{background:var(--b-ground3);--band-max:min(56vh,640px)}

/* ---------- coming back: example lines on lifted cedar, none attributed ---------- */
.fmt-booking .bk-back{border-top:1px solid var(--line)}
.fmt-booking .bk-back .sec-h .lead{margin-bottom:0}
.fmt-booking .bk-back-head{align-items:end;margin-bottom:clamp(28px,3.5vw,48px)}
.fmt-booking .bk-back-head .sec-h{margin-bottom:0}
.fmt-booking .bk-back-fig,.fmt-booking .bk-q-fig{background:var(--b-ground3);box-shadow:0 30px 60px -44px rgba(0,0,0,.7)}
.fmt-booking .bk-back-fig>picture>img,.fmt-booking .bk-q-fig>picture>img{transition:transform .9s var(--ease)}
.fmt-booking .bk-back-fig:hover>picture>img,.fmt-booking .bk-q-fig:hover>picture>img{transform:scale(1.03)}
.fmt-booking .bk-back-fig:active>picture>img,.fmt-booking .bk-q-fig:active>picture>img{transform:scale(.98)}
@media (max-width:900px){.fmt-booking .bk-back-head{gap:24px}}
.fmt-booking .bk-back-grid{gap:clamp(14px,1.6vw,20px)}
.fmt-booking .bk-say{gap:14px;padding:clamp(22px,2.4vw,32px);background:var(--b-ground2);border-color:var(--line);border-radius:var(--r-card);margin:0}
.fmt-booking .bk-say>.tile-k{margin:0;justify-content:flex-start}
.fmt-booking .bk-say-q{margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.45;letter-spacing:-.005em;color:var(--ink);max-width:34ch}
.fmt-booking .bk-say{transition:border-color .25s var(--ease),background .25s var(--ease)}
.fmt-booking .bk-say:hover{border-color:var(--b-line-control);background:var(--b-ground3)}
.fmt-booking .bk-say-q::before{content:"";display:block;width:28px;height:1px;background:var(--b-accent);margin-bottom:14px;transform-origin:left;transition:transform .5s var(--ease)}
.fmt-booking .bk-say:hover .bk-say-q::before{transform:scaleX(1.6)}
.fmt-booking .bk-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--text-3);max-width:60ch}

/* ---------- houses: warm light, two placeless locations ---------- */
.fmt-booking .bk-houses .sec-h .lead{margin-bottom:0}
.fmt-booking .bk-locs{gap:clamp(24px,3vw,48px)}
.fmt-booking .bk-loc{display:grid;gap:18px;align-content:start}
.fmt-booking .bk-loc .tile{background:var(--bg-3);box-shadow:0 30px 60px -44px rgba(23,19,17,.6);transition:transform .35s var(--ease)}
.fmt-booking .bk-loc:hover .tile{transform:translate3d(0,-1px,0)}
.fmt-booking .bk-loc .tile:active{transform:scale(.98)}
.fmt-booking .bk-loc .tile>picture>img{transition:transform .8s var(--ease)}
.fmt-booking .bk-loc:hover .tile>picture>img{transform:scale(1.03)}
.fmt-booking .bk-loc .tile-copy .tile-k{color:rgba(247,242,236,.78);margin-bottom:10px}
.fmt-booking .bk-loc .tile-copy .ex{background:transparent;border-color:currentColor;color:inherit;opacity:.85}
.fmt-booking .bk-loc .tile-t{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.01em;line-height:1.05;color:#F7F2EC}
.fmt-booking .bk-loc .tile-s{color:rgba(247,242,236,.84);font-size:16px;margin-top:8px}
.fmt-booking .bk-loc .rows{margin:0}
.fmt-booking .bk-loc .rows li{padding:13px 0;gap:20px;align-items:start}
.fmt-booking .bk-loc .rows b{font-weight:500;flex:none;min-width:7ch}
.fmt-booking .bk-loc .rows span{text-align:right;max-width:30ch}
.fmt-booking .bk-loc-a{margin-top:2px}

/* ---------- questions: head on the left, five details on the right ---------- */
.fmt-booking .bk-questions{padding:clamp(64px,8vw,120px) 0}
.fmt-booking .bk-q-grid{align-items:start;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.fmt-booking .bk-q-head{margin-bottom:0;position:sticky;top:calc(var(--demo-bar-h) + var(--fnav-h) + 32px)}
.fmt-booking .bk-q-head .lead{margin-bottom:0}
.fmt-booking .bk-q-fig{margin-top:clamp(24px,3vw,40px);max-width:520px}
@media (max-width:900px){.fmt-booking .bk-q-fig{max-width:none;margin-bottom:8px}}
.fmt-booking .bk-faq{display:grid;border-top:1px solid var(--b-line-control)}
.fmt-booking .bk-faq details{border-bottom:1px solid var(--line);background:transparent}
.fmt-booking .bk-faq summary{list-style:none;cursor:pointer;display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  padding:20px 2px;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em;line-height:1.35;color:var(--ink);transition:color .2s var(--ease)}
.fmt-booking .bk-faq summary::-webkit-details-marker{display:none}
.fmt-booking .bk-faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:6px;border-right:1px solid var(--b-accent);border-bottom:1px solid var(--b-accent);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.fmt-booking .bk-faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.fmt-booking .bk-faq summary:hover{color:var(--text-2)}
.fmt-booking .bk-faq summary:focus-visible{outline-offset:-2px;border-radius:8px}
.fmt-booking .bk-faq-b{padding:0 2px 22px;max-width:56ch}
.fmt-booking .bk-faq-b p{font-size:16px;color:var(--text-2);line-height:1.55}
@media (max-width:900px){
  .fmt-booking .bk-q-grid{grid-template-columns:1fr}
  .fmt-booking .bk-q-head{position:static}
}

/* ---------- this week: the close, the only live shader, open to ?palette= ---------- */
.fmt-booking .bk-cta{padding:clamp(48px,6vw,96px) 0 var(--sec)}
.fmt-booking .bk-cta-tile{aspect-ratio:auto;display:grid;place-items:center;min-height:min(60vh,540px);padding:clamp(28px,5vw,72px) var(--gutter);
  background:var(--b-ground2);border:1px solid var(--b-glass-line)}
.fmt-booking .bk-cta-tile>.shader{opacity:.92}
.fmt-booking .bk-cta-in{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;max-width:600px;width:100%;
  padding:clamp(28px,3.6vw,48px) clamp(20px,3vw,44px);border-radius:20px;background:var(--b-glass);border:1px solid var(--b-glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
.fmt-booking .bk-cta-in .k{margin-bottom:16px;color:var(--b-text2)}
.fmt-booking .bk-cta-in .h2{margin-bottom:14px;max-width:none}
.fmt-booking .bk-cta-in .lead{margin-bottom:26px;max-width:38ch}

/* ---------- reveals that belong to this page (shared.js adds .is-in; html.fmt-reveal means motion is allowed) ---------- */
html.fmt-reveal .fmt-booking .bk-media[data-reveal]{transform:translateY(18px) scale(.985)}
html.fmt-reveal .fmt-booking .bk-media[data-reveal].is-in{transform:none}
html.fmt-reveal .fmt-booking .bk-steps li::before{transform:scaleX(0);transition-property:transform;transition-duration:.9s;transition-timing-function:var(--ease);transition-delay:inherit}
html.fmt-reveal .fmt-booking .bk-steps li.is-in::before{transform:scaleX(1)}
html.fmt-reveal .fmt-booking .bk-say .bk-say-q::before{transform:scaleX(0);transition-duration:.8s;transition-delay:inherit}
html.fmt-reveal .fmt-booking .bk-say.is-in .bk-say-q::before{transform:scaleX(1);transition-delay:0s}
html.fmt-reveal .fmt-booking .bk-say.is-in:hover .bk-say-q::before{transform:scaleX(1.6)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fmt-booking .bk-faq summary::after,.fmt-booking .bk-faq summary,.fmt-booking button.bk-slot,
  .fmt-booking .bk-room>picture>img,.fmt-booking .bk-loc .tile>picture>img{transition:none}
  .fmt-booking .bk-room:hover>picture>img,.fmt-booking .bk-loc:hover .tile>picture>img{transform:none}
  .fmt-booking .booked{opacity:1;transition:none}
  .fmt-booking .bk-video{display:none}
  .fmt-booking .bk-mist{display:none}
  .fmt-booking .f-tabs a::after{transition:none}
  .fmt-booking main .pill,.fmt-booking .f-nav .pill,.fmt-booking .bk-room>picture,.fmt-booking .bk-loc .tile,.fmt-booking .bk-step-fig>img,
  .fmt-booking .bk-back-fig>picture>img,.fmt-booking .bk-q-fig>picture>img,.fmt-booking .bk-say,.fmt-booking .bk-say-q::before{transition:none}
  .fmt-booking main .pill:hover,.fmt-booking .f-nav .pill:hover,.fmt-booking main .pill:active,.fmt-booking .f-nav .pill:active,
  .fmt-booking button.bk-slot:hover,.fmt-booking .bk-room:hover>picture,.fmt-booking .bk-loc:hover .tile,.fmt-booking .bk-steps li:hover .bk-step-fig>img,
  .fmt-booking .bk-back-fig:hover>picture>img,.fmt-booking .bk-q-fig:hover>picture>img,.fmt-booking .bk-say:hover .bk-say-q::before{transform:none}
  .fmt-booking .bk-room>picture{transform:translateZ(0)}
}

/* reduced motion: the room still changes when a time is taken, it just changes at once and does not breathe */
@media (prefers-reduced-motion:reduce){
  .fmt-booking .bk-ember{transition:none}
  .fmt-booking .bk-tile.is-lit .bk-ember{animation:none}
}