/* ═══════════════════════════════════════════════════════════
   ATRIUM · Recovery Sanctuary
   The daylight house with glowing rooms.
   Fraunces (display) · Newsreader (body) · Karla (labels)
   ═══════════════════════════════════════════════════════════ */

:root{
  /* daylight */
  --plaster:#F3F2EF;
  --plaster-2:#FAF9F7;
  --stone:#E3E0DB;
  --stone-deep:#CDC8C1;
  --ink:#1F1E1D;
  --ink-soft:#3E3B39;
  --ink-mute:#5C5854;
  --copper:#6B6560;
  --copper-deep:#55504C;
  --green:#3E5A47;
  --rule:rgba(31,30,29,.15);
  --rule-2:rgba(31,30,29,.32);
  --rule-ctl:rgba(31,30,29,.5);   /* interactive borders; --rule-2 stays decorative */
  --copper-lit:#B9B3AC;          /* copper that clears 4.5:1 on the espresso footer */
  --hero-em:#E8E3DC;

  /* light pockets · each scoped to its own chapter */
  --amber:#D99A52;
  --amber-ink:#55504C;
  --teal:#7FB8C4;
  --red:#D8352B;
  --red-lit:#F0685E;

  /* pocket grounds */
  --ink-sauna:#1B1109;
  --ink-water:#0F1A1F;
  --ink-red:#150A09;
  --ink-deep:#2B2927;
  --on-dark:#EEECE8;
  --on-dark-dim:#ABA59F;
  --rule-dark:rgba(238,236,232,.17);

  --ease:cubic-bezier(.22,1,.36,1);
  --f-display:"Fraunces",Georgia,serif;
  --f-body:"Newsreader",Georgia,serif;
  --f-label:"Karla",Verdana,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* armed by JS after load, so an arriving #hash still gets the browser's instant jump */
html.smooth{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html.smooth{scroll-behavior:auto}}

body{
  background:var(--plaster);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.15rem;
  line-height:1.72;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  -webkit-tap-highlight-color:rgba(107,101,96,.14);
}
a{color:inherit;touch-action:manipulation}
button{touch-action:manipulation;font:inherit}
img{display:block;width:100%;height:auto}
em{font-style:italic}
strong{font-weight:560}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:360;line-height:1.02;letter-spacing:-.014em}
::selection{background:var(--copper);color:var(--plaster)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:2px}
.pocket :focus-visible{outline-color:var(--on-dark)}

.skip{
  position:fixed;top:-4rem;left:1rem;z-index:100;
  background:var(--ink);color:var(--plaster);
  font-family:var(--f-label);font-size:.8rem;letter-spacing:.08em;
  padding:.85rem 1.25rem;text-decoration:none;transition:top .3s var(--ease);
}
.skip:focus{top:1rem}

/* ── scaffolding ───────────────────────────────────────── */
.wrap{max-width:86rem;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4.5rem)}
[id]{scroll-margin-top:5.5rem}

.h-lg{font-size:clamp(2.9rem,7vw,6.2rem);font-variation-settings:"opsz" 144,"SOFT" 28;line-height:.96}
.h-md{font-size:clamp(2.25rem,4.6vw,3.9rem);font-variation-settings:"opsz" 144;line-height:1}
.h-sm{font-size:clamp(1.6rem,2.9vw,2.35rem);font-variation-settings:"opsz" 72;font-weight:400;line-height:1.12}
.lede{font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.55;font-weight:340;color:var(--ink);text-wrap:pretty}
p{text-wrap:pretty}

.eyebrow{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--f-label);font-size:.71rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--copper-deep);
}
/* botanical green lives here only · the daylight eyebrows' arch glyphs.
   The light-pocket eyebrows carry no glyph, so their scoped accents stay pure. */
.eyebrow .glyph{flex:0 0 auto;color:var(--green);opacity:.9}
.eyebrow--lit{color:rgba(243,242,239,.9)}
/* doubled class (0-2-0) so section body-copy rules like `.red-copy p` (0-1-1)
   can never outrank a chapter's scoped accent */
.eyebrow.eyebrow--amber{color:var(--amber)}
.eyebrow.eyebrow--teal{color:var(--teal)}
.eyebrow.eyebrow--red{color:var(--red-lit)}
.eyebrow--foot{color:var(--copper-lit);margin-bottom:.85rem}

.sig{margin-top:2.4rem;font-family:var(--f-display);font-style:italic;font-size:1.45rem;color:var(--copper-deep)}

.u{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease),background-image .35s var(--ease);
  padding-bottom:2px;
}
.u:hover,.u:focus-visible{
  background-image:linear-gradient(var(--copper-deep),var(--copper-deep));
  background-size:100% 2px;
}
.foot .u:hover,.foot .u:focus-visible{background-image:linear-gradient(var(--copper-lit),var(--copper-lit))}
/* D8: standalone links need a real target · the underline rides with the padding */
.foot-cols .u,.practical .u,.fv-body .u,.book-note .u{
  display:inline-block;padding-block:.6rem;background-position:0 calc(100% - .45rem);
}
.micro-book a{display:inline-block;padding-block:.8rem;background-position:0 calc(100% - .65rem)}

/* maps link: the address carries the underline, the cue names the action */
.dirs{display:inline-block;text-decoration:none}
/* the address stays inline so both of its lines keep the underline */
.dirs .u{display:inline;padding-block:0 2px;background-position:0 100%}
.dirs-cue{
  display:block;width:max-content;margin-top:.55rem;
  font-family:var(--f-label);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copper-deep);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  padding-bottom:.35rem;
}
.foot .dirs-cue{color:var(--copper-lit)}

/* ── photography: frames, arches, grain ────────────────── */
.ph{position:relative;overflow:hidden;background:var(--stone-deep);isolation:isolate}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--arch{aspect-ratio:3/4;border-radius:50% 50% 3px 3px / 37.5% 37.5% 0 0}
.ph--narrow{aspect-ratio:2/3;border-radius:50% 50% 3px 3px / 33.33% 33.33% 0 0}

.grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.09;mix-blend-mode:overlay;
}

figcaption{
  font-size:.92rem;font-style:italic;color:var(--ink-mute);
  padding-top:.9rem;max-width:40ch;
}
.pocket figcaption{color:var(--on-dark-dim)}
/* placeholder must match its ground: a light slab flashing inside a dark chapter reads as a fault */
.pocket .ph{background:var(--ink-water)}

/* ── header ────────────────────────────────────────────── */
.head{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem clamp(1.25rem,4.5vw,3.25rem);
  color:var(--plaster);
  transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease),padding .4s var(--ease);
}
.head.is-solid{
  background:rgba(243,242,239,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ink);box-shadow:0 1px 0 var(--rule);
  padding-block:.8rem;
}
.mark{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;white-space:nowrap;
  min-height:44px;
  font-family:var(--f-display);font-size:1.1rem;font-weight:470;letter-spacing:.005em;
}
.mark-arch{color:var(--plaster);transition:color .5s var(--ease)}
.head.is-solid .mark-arch{color:var(--green)}
.nav{display:flex;gap:clamp(1rem,2.4vw,2.1rem)}
.nav a{
  font-family:var(--f-label);font-size:.73rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding-block:.95rem;min-height:44px;display:inline-flex;align-items:center;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;background-position:0 calc(100% - .5rem);background-repeat:no-repeat;
  transition:background-size .5s var(--ease);
}
.nav a:hover,.nav a:focus-visible{background-size:100% 1px}
.head-cta{
  font-family:var(--f-label);font-size:.73rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border:1px solid currentColor;border-radius:2px;
  padding:.72rem 1.3rem;white-space:nowrap;min-height:44px;
  display:inline-flex;align-items:center;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.head-cta:hover,.head-cta:focus-visible{background:var(--copper);border-color:var(--copper);color:var(--plaster)}
/* a light-pocket chapter is filling the viewport behind the bar */
.head.is-dark{
  background:rgba(43,41,39,.93);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--on-dark);box-shadow:0 1px 0 var(--rule-dark);
}
.head.is-dark .mark-arch{color:var(--plaster)}
.cta-short{display:none}
@media (max-width:560px){
  .cta-long{display:none}
  .cta-short{display:inline}
  .mark{font-size:1rem}
  .eb-brand{display:none}
}
.navbar{display:none}
.nav a{white-space:nowrap}
@media (max-width:1240px){
  .nav{display:none}
  .head{flex-wrap:wrap;row-gap:.15rem;padding-bottom:.35rem}
  .navbar{
    display:flex;order:3;flex:1 0 100%;gap:.15rem;
    overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(1.25rem,4.5vw,3.25rem));
    padding-inline:clamp(1.25rem,4.5vw,3.25rem);
    /* the row scrolls: fade the right edge so the crop reads as more, not as a bug */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent);
  }
  .navbar::-webkit-scrollbar{display:none}
  .navbar::after{content:"";flex:0 0 1.5rem}
  .navbar a{
    flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
    padding:0 .7rem;text-decoration:none;white-space:nowrap;
    font-family:var(--f-label);font-size:.68rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;opacity:.82;
  }
  .navbar a:hover,.navbar a:focus-visible{opacity:1}
  [id]{scroll-margin-top:7.5rem}
}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  color:var(--plaster);isolation:isolate;
  padding-bottom:clamp(1.75rem,5vh,3rem);
}
.hero-ph{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink-sauna)}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(26,25,24,.55) 0%,rgba(26,25,24,.12) 30%,rgba(26,25,24,.30) 58%,rgba(26,25,24,.86) 100%),
    linear-gradient(to right,rgba(26,25,24,.62) 0%,rgba(26,25,24,.06) 52%);
}
.hero .grain{opacity:.07}
.hero-in{
  margin-top:auto;
  padding-inline:clamp(1.25rem,5vw,4.5rem);
  max-width:86rem;width:100%;margin-inline:auto;
  padding-bottom:clamp(2.5rem,8vh,5rem);
}
.hero-in .eyebrow{margin-bottom:clamp(1rem,2.6vh,1.7rem)}
.hero-h{
  font-size:clamp(3.1rem,9vw,8.2rem);
  font-weight:330;line-height:.93;letter-spacing:-.02em;
  font-variation-settings:"opsz" 144,"SOFT" 42,"WONK" 1;
  text-shadow:0 2px 46px rgba(26,25,24,.4);
}
.hero-h em{font-weight:300;color:var(--hero-em)}
.hero-sub{
  margin-top:clamp(1.3rem,3.2vh,2.1rem);
  max-width:46ch;font-size:clamp(1.02rem,1.35vw,1.2rem);
  color:rgba(243,242,239,.88);
}
.hero-micro{display:flex;flex-direction:column;gap:.4rem}
.micro-book{
  font-family:var(--f-label);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(243,242,239,.88);
}
.hero-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(2rem,5vw,4rem);
  padding-inline:clamp(1.25rem,5vw,4.5rem);
  max-width:86rem;width:100%;margin-inline:auto;
}
.cue{
  display:inline-flex;flex-direction:column;align-items:flex-end;gap:.75rem;
  font-family:var(--f-label);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  color:rgba(243,242,239,.86);padding:.4rem .2rem;min-height:44px;
}
.cue svg{animation:drift 3s var(--ease) infinite}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(6px);opacity:.42}}
.coords{
  font-family:var(--f-label);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;color:rgba(243,242,239,.72);
  font-variant-numeric:tabular-nums;
}

/* ── the house (daylight welcome) ──────────────────────── */
.house{
  position:relative;z-index:2;
  padding-bottom:clamp(6rem,16vh,11rem);
}
.house-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);
}
.house-fig{grid-column:1/6;margin-top:calc(-1 * clamp(5rem,16vh,12rem))}
.house-fig .ph{box-shadow:0 40px 80px -46px rgba(31,30,29,.6)}
.house-copy{grid-column:6/13;grid-row:1/span 2;padding-top:clamp(4rem,13vh,9rem)}
.house-h{margin:1.5rem 0 2.2rem;max-width:16ch}
.house-h em{color:var(--copper-deep)}
.house-copy p{max-width:62ch}
.house-copy .lede{max-width:44ch}
.house-copy p+p{margin-top:1.5rem}
.house-copy .lede+p{margin-top:1.8rem;color:var(--ink-soft)}
.house-real{margin-top:1.5rem;color:var(--ink-soft)}
.house-note{
  grid-column:1/6;margin-top:2.6rem;
  border-top:1px solid var(--rule);padding-top:1.1rem;
  font-size:.98rem;font-style:italic;color:var(--ink-mute);max-width:34ch;
}
.house-note p+p{margin-top:.9rem}
.house-who{display:block;margin-top:.35rem;font-style:normal;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute)}
.house-copy .eyebrow+.lede{margin-top:1.5rem}
.house-quote{margin:2.2rem 0 0;padding-left:1.2rem;border-left:1px solid var(--stone-deep);max-width:52ch;font-style:italic;color:var(--ink-soft)}
.house-quote p{margin:0}

/* ── sessions / price plate ────────────────────────────── */
.sessions{padding-block:clamp(4rem,10vh,7.5rem) clamp(6rem,16vh,11rem)}
.sessions-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:start;
}
.sessions-head{grid-column:1/5;position:sticky;top:7rem}
.sessions-head .h-md{margin:1.4rem 0 1.5rem}
.sessions-head .h-md em{color:var(--copper-deep)}
.sessions-note{font-size:1rem;color:var(--ink-mute);max-width:32ch}

.plate-wrap{grid-column:6/13}
.plate{
  list-style:none;
  background:var(--stone);
  padding:clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.6rem);
}
.lr{
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) auto auto;
  align-items:baseline;gap:0 clamp(.9rem,2vw,1.8rem);
  padding:1.4rem 0;
  border-bottom:1px solid rgba(31,30,29,.16);
  transition:padding-left .45s var(--ease);
}
.lr:last-child{border-bottom:0;padding-bottom:.4rem}
.lr:first-child{padding-top:.4rem}
@media (hover:hover){.lr:hover{padding-left:.6rem}}
.lr-no{
  font-family:var(--f-label);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  color:var(--copper-deep);font-variant-numeric:tabular-nums;
}
.lr-name h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:420}
.lr-name p{font-size:.9rem;font-style:italic;color:var(--ink-mute);margin-top:.25rem;line-height:1.4}
.lr-dur{
  font-family:var(--f-label);font-size:.7rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-mute);white-space:nowrap;
}
.lr-fig{
  font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:350;
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:4.4ch;text-align:right;
}
.lr-book{
  display:inline-flex;align-items:center;min-height:44px;
  grid-column:2/3;grid-row:2;justify-self:start;
  margin-top:.2rem;background:none;border:0;padding:.75rem 0;
  font-family:var(--f-label);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper-deep);cursor:pointer;text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 calc(100% - .75rem);background-repeat:no-repeat;
  transition:background-size .35s var(--ease);
}
@media (hover:hover){.lr-book:hover{background-size:0 1px}}
.lr-book:focus-visible{background-size:0 1px}
.plate-note{
  margin-top:1.4rem;font-size:.95rem;font-style:italic;color:var(--ink-mute);max-width:60ch;
}
.lr--single .lr-fig{color:var(--copper-deep)}
.lr--single .lr-name p{color:var(--copper-deep);font-style:normal;letter-spacing:.01em}

/* ── light pockets (shared) ────────────────────────────── */
.pocket{position:relative;color:var(--on-dark);overflow:hidden}
.pocket .wrap{position:relative;z-index:1}

/* ── grove fringes: the house plants at the chapter edges ──
   Client-approved from the demo round. They live BEHIND the content
   (z-0 vs the wraps' z-1): production chapters end in CTAs and staggered
   figures, so the ferns read as part of the ground, never over text. */
.fringe{position:absolute;left:0;right:0;z-index:0;pointer-events:none}
.fringe img{display:block;width:100%;height:auto;min-height:13rem;object-fit:cover}
.fringe--foot{bottom:0;mix-blend-mode:screen}
.fringe--foot img{object-position:bottom;opacity:.5}
.red .fringe--foot img{opacity:.38}
/* a plant just out of frame: its shadow on the plaster, nothing more */
.fringe--shade{top:0;right:0;left:auto;width:min(52vw,780px)}
.fringe--shade img{min-height:0;height:auto;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .fringe--shade img{transform-origin:50% 0;animation:fringe-sway 19s ease-in-out infinite alternate}
  .fringe--foot img{transform-origin:50% 100%;animation:fringe-sway 21s ease-in-out infinite alternate}
  .red-glow{animation:glow-breathe 18s ease-in-out infinite alternate}
}
@keyframes fringe-sway{
  from{transform:rotate(-.25deg) scale(1.02)}
  to{transform:rotate(.25deg) scale(1.02)}
}
@keyframes glow-breathe{
  from{opacity:.82}
  to{opacity:1}
}

/* ── chapter one: the sauna lounge (amber → teal) ──────── */
.lounge{
  background:linear-gradient(180deg,var(--ink-sauna) 0%,#1A1209 34%,#161610 56%,#111A1C 78%,var(--ink-water) 100%);
  padding-block:clamp(6rem,16vh,11rem) clamp(5rem,13vh,9rem);
}
.lounge-head{margin-bottom:clamp(2.5rem,7vh,4.5rem)}
.lounge-head .h-lg{margin-top:1.3rem}
.lounge-head .h-lg em{color:var(--amber)}

.band{position:relative;margin-inline:0}
.band .ph{height:100svh;background:var(--ink-sauna)}
.card{
  position:absolute;z-index:3;
  left:calc(max(0px,(100vw - 86rem)/2) + clamp(1.25rem,5vw,4.5rem));
  bottom:clamp(2rem,7vw,4rem);
  max-width:min(34rem,72%);
  background:rgba(243,242,239,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-top:2px solid var(--amber);
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.2rem,2.4vw,1.9rem);
  color:var(--ink);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.75);
}
.card-k{
  font-family:var(--f-label);font-size:.68rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber-ink)!important;margin-bottom:.6rem;
}

.lounge-body{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);
  padding-top:clamp(2.5rem,6vh,4.5rem);
}
.lounge-copy{grid-column:1/6;grid-row:1;align-self:start;color:var(--on-dark)}
.lounge-head .includes{
  margin-top:1.6rem;font-family:var(--f-label);font-size:.78rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark);
}

.water-stack{
  grid-column:7/13;grid-row:1;
  display:grid;grid-template-columns:repeat(8,1fr);row-gap:2.75rem;
}
.wf{margin:0}
/* reading order: the plunge before the jacuzzi */
.wf--wide{grid-column:1/7;grid-row:1}
.wf--tall{grid-column:4/9;grid-row:2}
.wf--tall .ph{aspect-ratio:4/5}
.wf img{filter:saturate(.82) hue-rotate(-8deg) brightness(1.05)}
.wf--wide .ph{
  aspect-ratio:3/2;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.85);
  outline:1px solid rgba(238,236,232,.14);outline-offset:-1px;
}
/* each water picture names itself, in the sauna card's label voice on the teal accent */
.pocket figcaption .card-k{display:block;color:var(--teal)!important;margin-bottom:.4rem;font-style:normal}
/* the sauna card is pale: its label keeps the dark amber ink, and is the card's only line */
.pocket .band .card .card-k{color:var(--amber-ink)!important;margin-bottom:0}

/* ── upstairs (white room daylight) ──────────────── */
.down{position:relative;overflow:hidden;padding-block:clamp(6rem,16vh,11rem)}
.down .wrap{position:relative;z-index:1}
.down-intro{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:center;
  margin-bottom:clamp(4rem,12vh,8rem);
}
.stair-fig{grid-column:1/4}
.down-copy{grid-column:5/12}
.down-copy .h-md{margin:1.4rem 0 1.8rem}
.down-copy .h-md em{color:var(--copper-deep)}

.room-row{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:center;
  margin-bottom:clamp(3.5rem,10vh,7rem);
}
.room-row:last-child{margin-bottom:0}
.room-fig{grid-column:1/8}
.room-fig .ph{aspect-ratio:3/2}
.room-copy{grid-column:8/13;border-top:1px solid var(--rule-2);padding-top:1.5rem}
.room-copy .eyebrow{letter-spacing:.2em}
.room-copy .h-sm{margin:1rem 0 1.1rem}
.room-copy p{color:var(--ink-soft);font-size:1.05rem}
/* the water moves: a quiet loop over the still, which stays as poster + fallback */
.wf-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
}
.wf-vid.is-playing{opacity:1}

.room-detail{margin-top:1.8rem}
.room-detail .ph{aspect-ratio:3/2}
.room-row--flip .room-fig{grid-column:6/13;grid-row:1}
.room-row--flip .room-copy{grid-column:1/6;grid-row:1}

/* ── chapter two: red light ────────────────────────────── */
.red{
  /* ground graded from the photograph rather than a flat fill */
  background:
    radial-gradient(120% 80% at 50% 45%,#2A100D 0%,#1A0A08 45%,var(--ink-red) 100%);
  padding-block:clamp(6rem,16vh,11rem);
  overflow:hidden;
}
.red-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(46% 46% at 52% 52%,rgba(216,53,43,.42),transparent 68%),
    radial-gradient(80% 60% at 52% 62%,rgba(120,20,16,.35),transparent 72%);
}
.red-grid{
  position:relative;
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:center;
  min-height:100svh;
}
.red-copy{grid-column:1/5}
.red-copy .h-lg{margin:1.4rem 0 1.9rem}
.red-copy .h-lg em{color:var(--red-lit)}
.red-copy p{color:var(--on-dark)}
.red-fig{grid-column:6/11}
.red-fig .ph{background:var(--ink-red);box-shadow:0 0 140px -10px rgba(216,53,43,.55)}
.red-margin{
  grid-column:11/13;align-self:center;
  font-size:.95rem;font-style:italic;color:var(--on-dark-dim)!important;
  border-top:1px solid var(--rule-dark);padding-top:1rem;
}

/* ── chapter three: the chamber ────────────────────────── */
.chamber{
  background:var(--stone);
  padding-block:clamp(6rem,16vh,11rem);
  border-top:1px solid rgba(31,30,29,.08);
}
.chamber-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:center;
}
.chamber-copy{grid-column:1/7}
.chamber-copy h2{margin:1.4rem 0 1.9rem}
.chamber-copy h2 em{color:var(--copper-deep)}
.chamber-copy>p{color:var(--ink-soft)}
.chamber-fig{grid-column:8/13}
.chamber-fig .ph{aspect-ratio:3/2}
.chamber-copy .btn{margin-top:2.2rem}

/* ── session facts: one plain sentence, then a hairline spec list ── */
p.spec-lead{
  font-size:clamp(1.15rem,1.45vw,1.3rem);line-height:1.5;color:var(--ink);
  max-width:36ch;margin-bottom:1.5rem;
}
.spec{border-top:1px solid var(--rule-2);max-width:34rem}
.spec>div{
  display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1.25rem;
  padding:.8rem 0;border-bottom:1px solid var(--rule);
}
.spec dt{
  font-family:var(--f-label);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-mute);padding-top:.3rem;
}
.spec dd{font-family:var(--f-body);font-size:1.05rem;line-height:1.5;color:var(--ink)}
.spec>.spec-multi dd{grid-column:2}
.spec>.spec-multi dd+dd{margin-top:-.75rem}
p.spec-note{margin-top:1rem;font-size:.95rem;font-style:italic;color:var(--ink-mute);max-width:40ch}
.pocket p.spec-lead,.pocket .spec dd{color:var(--on-dark)}
.pocket .spec{border-top-color:rgba(238,236,232,.32)}
.pocket .spec>div{border-bottom-color:var(--rule-dark)}
.pocket .spec dt,.pocket p.spec-note{color:var(--on-dark-dim)}

/* ── ethos ────────────────────────────────────────────── */
.ethos{padding-block:clamp(5rem,14vh,9rem);border-top:1px solid var(--rule)}
.ethos-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:start;
}
.ethos-head{grid-column:1/8}
.ethos-head .h-md{margin-top:1.3rem;text-wrap:balance}
.ethos-head .h-md em{color:var(--copper-deep)}
.ethos-body{grid-column:9/13;font-size:1.08rem;color:var(--ink-soft);align-self:end}

/* ── first visit ───────────────────────────────────────── */
.firstvisit{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:start;
  margin-bottom:clamp(3rem,8vh,5rem);
}
.fv-head{grid-column:1/6}
.fv-head .h-md{margin-top:1.2rem}
.fv-head .h-md em{color:var(--copper-deep)}
.fv-body{grid-column:6/13;font-size:1.08rem;color:var(--ink-soft)}

/* ── questions ─────────────────────────────────────────── */
.asked{padding-bottom:clamp(5rem,13vh,8rem)}
.panel{background:var(--stone);padding:clamp(1.75rem,4.5vw,3.5rem)}
.asked-head{margin-bottom:clamp(2rem,5vh,3rem)}
.asked-head .h-md{margin-top:1.1rem}
.asked-head .h-md em{color:var(--copper-deep)}
.faq{border-top:1px solid var(--rule-2)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:44px;padding:.9rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:1.2rem;font-weight:440;line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;width:.5rem;height:.5rem;margin-bottom:.25rem;
  border-right:1px solid var(--ink-mute);border-bottom:1px solid var(--ink-mute);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-bottom:-.1rem}
.faq p{color:var(--ink-soft);font-size:1rem;line-height:1.62;padding-bottom:1.2rem;max-width:60ch}
.final-book{margin-top:clamp(2rem,5vh,3rem)}

/* ── buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-label);font-size:.76rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  border-radius:2px;padding:1.05rem 2rem;min-height:44px;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.btn--ghost{border:1px solid var(--rule-ctl);color:var(--ink);background:transparent}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--plaster)}
.btn--solid{background:var(--ink);border:1px solid var(--ink);color:var(--plaster)}
.btn--solid:hover,.btn--solid:focus-visible{background:var(--copper-deep);border-color:var(--copper-deep)}

/* every chapter closes on the same quiet action */
.chapter-cta{position:relative;margin-top:clamp(2rem,5vh,3rem)}
.chapter-cta .lr-book{grid-column:auto;grid-row:auto}
.pocket .chapter-cta .lr-book{color:var(--on-dark)}

/* ── visit ─────────────────────────────────────────────── */
.visit{padding-block:clamp(6rem,16vh,11rem)}
.visit-top{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1.25rem,2.8vw,3rem);align-items:center;
  margin-bottom:clamp(4rem,11vh,7.5rem);
}
.visit-fig{grid-column:1/5}
.visit-copy{grid-column:6/13}
.visit-copy .h-md{margin:1.4rem 0 2.2rem}
.visit-copy .h-md em{color:var(--copper-deep)}
.practical{border-top:1px solid var(--rule-2)}
.practical>div{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.5rem;
  padding:1.15rem 0;border-bottom:1px solid var(--rule);
}
.practical dt{
  font-family:var(--f-label);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-mute);padding-top:.35rem;
}
.practical dd{font-size:1.05rem;line-height:1.55}

.hours-note{
  display:block;margin-top:.5rem;
  font-size:.82rem;font-style:italic;color:var(--ink-mute);
}
.hours-note--foot{color:var(--on-dark-dim)}

/* ── booking band ──────────────────────────────────────── */
.booker{background:var(--stone);padding:clamp(1.75rem,4.5vw,3.5rem)}
.booker-head{margin-bottom:clamp(1.5rem,3.5vh,2.2rem);max-width:44ch}
.booker-head .h-sm em{color:var(--copper-deep)}

.book-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem 2rem;flex-wrap:wrap;
  border-top:1px solid var(--rule-2);padding-top:1.6rem;
}
.book-sum{font-style:italic;color:var(--ink-mute);max-width:46ch}
.book-act{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.book-note{font-size:.85rem;font-style:italic;color:var(--ink-mute);text-align:right;max-width:32ch}

/* ── footer ────────────────────────────────────────────── */
.foot{background:var(--ink-deep);color:var(--on-dark);padding-block:clamp(4rem,10vh,6.5rem) 2.5rem}
.foot-mark{display:flex;align-items:center;gap:1.1rem;margin-bottom:clamp(2.5rem,7vh,4.5rem);color:var(--copper)}
.foot-word{
  font-family:var(--f-display);font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:360;
  letter-spacing:-.01em;color:var(--on-dark);
}
.foot-cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;
  padding-bottom:2.8rem;border-bottom:1px solid var(--rule-dark);
}
.foot-cols p{font-size:1rem;color:var(--on-dark-dim);line-height:1.75}
.foot-cols a{color:var(--on-dark)}
.foot-base{
  display:flex;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap;padding-top:1.7rem;
  font-size:.9rem;font-style:italic;color:var(--on-dark-dim);
}

/* ── reveals (JS adds .js) ─────────────────────────────── */
.anim .reveal-arch .ph{clip-path:inset(6% 27% 0 27% round 50% 50% 0 0 / 30% 30% 0 0)}
.anim .reveal-arch.is-in .ph{
  clip-path:inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0);
  transition:clip-path 1.35s var(--ease);
}
.anim .reveal-img .ph{clip-path:inset(0 0 100% 0)}
.anim .reveal-img.is-in .ph{clip-path:inset(0 0 0 0);transition:clip-path 1.15s var(--ease)}
.anim .reveal-img .ph img,.anim .reveal-arch .ph img{transform:scale(1.07);transition:transform 1.6s var(--ease)}
.anim .reveal-img.is-in .ph img,.anim .reveal-arch.is-in .ph img{transform:scale(1)}

.rise{opacity:0;transform:translateY(26px)}
.rise.is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1100px){
  .sessions-head{position:static}
  .red-copy{grid-column:1/6}
  .red-fig{grid-column:7/12}
  .red-margin{grid-column:1/6;align-self:start;margin-top:2rem;padding-bottom:0}
}

@media (max-width:940px){
  .house-grid,.sessions-grid,.lounge-body,.down-intro,.room-row,.red-grid,.chamber-grid,.visit-top{
    display:block;
  }
  .house-fig{max-width:26rem;margin-top:calc(-1 * clamp(3rem,10vh,7rem))}
  .house-copy{padding-top:2.8rem}
  .house-note{max-width:40ch;margin-top:2.2rem}
  .plate-wrap{margin-top:2.5rem}
  .lounge-copy{max-width:60ch}
  .water-stack{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:2.5rem;padding-bottom:0}
  .wf--tall,.wf--wide{grid-column:1;grid-row:auto;align-self:auto;margin-bottom:0}
  .red-grid{min-height:0}
  .stair-fig{max-width:17rem;margin-bottom:2.5rem}
  .room-fig{margin-bottom:1.8rem}
  .room-row--flip .room-fig,.room-row--flip .room-copy{grid-column:auto;grid-row:auto}
  .room-copy{max-width:56ch}
  .house-h{max-width:none}
  .red-fig{max-width:24rem;margin:2.8rem 0}
  .red-margin{max-width:40ch;margin-top:0}
  .chamber-fig{margin-top:2.6rem}
  .visit-fig{max-width:22rem;margin-bottom:2.8rem}
  .foot-cols{grid-template-columns:1fr;gap:2rem}
  .ethos-grid,.firstvisit{display:block}
  .ethos-body,.fv-body{margin-top:1.8rem;max-width:60ch}
}

@media (max-width:720px){
  body{font-size:1.08rem}
  .card{
    position:static;max-width:none;
    margin-top:0;border-top-width:2px;
  }
  .hero-foot .coords{display:none}
  .hero-ph img{object-position:30% 42%}
  .veil{
    background:
      linear-gradient(to bottom,rgba(26,25,24,.55) 0%,rgba(26,25,24,.12) 26%,rgba(26,25,24,.28) 56%,rgba(26,25,24,.88) 100%),
      linear-gradient(to right,rgba(26,25,24,.55) 0%,rgba(26,25,24,.12) 70%);
  }
  .house-fig{margin-top:0}
  .house{padding-top:clamp(3rem,9vh,5rem)}
  .band .ph{height:65svh}
  /* facts before the action: name, note, duration, price, then Book this */
  .lr{position:relative;grid-template-columns:2.1rem minmax(0,1fr) auto;row-gap:.35rem}
  .lr-dur{grid-column:2/3;grid-row:2}
  .lr-fig{grid-column:3/4;grid-row:1/3;align-self:center}
  .lr .lr-book{grid-column:2/4;grid-row:3;justify-self:start;margin-top:0}
  .lr .lr-book::after{content:"";position:absolute;inset:0}
  /* label floor: nothing interactive under 12.5px */
  .lr-book:not(.btn),.lr-dur,.micro-book{font-size:.79rem;letter-spacing:.16em}
  .navbar a,.head-cta{font-size:.8rem;letter-spacing:.16em}
  .practical>div{grid-template-columns:1fr;gap:.35rem}
  .spec>div{grid-template-columns:5.6rem minmax(0,1fr);gap:1rem}
  .book-foot .btn,.final-book .btn{width:100%}
  .book-act{align-items:stretch;width:100%}
  .book-note{text-align:left;max-width:none}
  .lounge,.red{padding-block:clamp(4rem,9vh,6rem)}
  .booker{padding:clamp(1.5rem,4vw,2rem) clamp(1rem,3.5vw,1.75rem)}
  .foot-base{flex-direction:column}
}

@media (max-width:420px){
  .hero-h{font-size:clamp(2.6rem,12vw,3.4rem)}
}

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
  .cue svg{animation:none}
  .anim .reveal-arch .ph,.anim .reveal-img .ph{clip-path:none}
  .anim .reveal-arch .ph img,.anim .reveal-img .ph img{transform:none}
  .rise{opacity:1;transform:none}
}

/* ── granite preview: the reception's marble wall and its plants ── */
.ethos{
  background:linear-gradient(rgba(38,36,34,.72),rgba(38,36,34,.8)),url(../assets/marble.webp) center/720px repeat;
  border-top:0;color:var(--on-dark);
}
.ethos .eyebrow,.ethos-head .h-md em{color:var(--copper-lit)}
.ethos-body{color:var(--on-dark-dim)}
.foot{background:linear-gradient(rgba(43,41,39,.86),rgba(43,41,39,.9)),url(../assets/marble.webp) center/720px repeat}
.plate,.booker{background:linear-gradient(rgba(227,224,219,.8),rgba(227,224,219,.8)),url(../assets/marble.webp) center/600px repeat}

.sessions,.asked{position:relative;overflow:hidden}
.sessions > .wrap,.asked > .wrap{position:relative;z-index:1}
.plant{position:absolute;bottom:0;z-index:0;pointer-events:none;width:clamp(11rem,24vw,22rem)}
.plant img{display:block;width:100%;height:auto}
.plant--l{left:clamp(-5rem,-3vw,-1rem)}
.plant--r{right:clamp(-5rem,-3vw,-1rem)}
@media (max-width:760px){.plant{width:36vw}.plant--l{left:-8vw}.plant--r{right:-8vw}.sessions,.asked{padding-bottom:58vw}}
@media (prefers-reduced-motion:no-preference){
  .plant img{transform-origin:50% 100%;animation:fringe-sway 20s ease-in-out infinite alternate}
  .plant--top img{transform-origin:50% 0}
}

/* more of Ben's greenery through the middle chapters: palms, a pothos, a rubber plant */
.chamber{position:relative;overflow:hidden}
.house{overflow-x:clip}
.chamber > .wrap,.red .chapter-cta{position:relative;z-index:1}
.sessions .plant{width:clamp(12rem,27vw,25rem)}
.plant--top{top:0;bottom:auto}
.plant--flip{transform:scaleX(-1)}
.plant--house{width:clamp(10rem,16vw,15rem);right:clamp(-2rem,-1vw,0rem)}
/* house and prices share one ground: fade the fronds out instead of a hard crop line */
.plant--house img{-webkit-mask-image:linear-gradient(to top,transparent,#000 35%);mask-image:linear-gradient(to top,transparent,#000 35%)}
.plant--down{width:clamp(9rem,15vw,14rem);right:clamp(1rem,4vw,4rem)}
.plant--red{width:clamp(11rem,17vw,16rem);right:clamp(-2rem,-1vw,0rem)}
.plant--red img{filter:brightness(.62) saturate(.85)}
.plant--chamber{width:clamp(11rem,19vw,18rem);right:clamp(-2rem,-1vw,0rem)}
.plant--visit{width:clamp(8rem,12vw,11rem);left:clamp(-2rem,-1vw,0rem)}
.visit{position:relative;overflow:hidden}
.visit > .wrap{position:relative;z-index:1}
@media (max-width:760px){
  .sessions .plant{width:46vw}.sessions{padding-bottom:74vw}
  .plant--house,.plant--red{display:none}
  .plant--down{width:28vw;right:-4vw}
  .plant--chamber{width:38vw;right:-2vw}.chamber{padding-bottom:58vw}
  .plant--visit{display:none}
}