/* ============================================================================
   HORIZON SPACES — design system
   Cream paper, olive and charcoal bands, butter accent. Oversized editorial
   display type over large photography; UI decoration kept to almost nothing.
   One stylesheet for every page: horizonspaces home, Horizon House, apply.
   ========================================================================= */

:root{
  /* brand surfaces */
  --charcoal:#29291E; --olive:#707153; --butter:#F5F59A;
  --cream:#F4F2E9;    --white:#FFFFFF;
  --olive-deep:#5B5C43; --cream-warm:#EDEADF;

  /* semantic */
  --paper:var(--cream); --card:var(--cream-warm); --ink:var(--charcoal);
  --ink-soft:#6A6A57; --line:#D6D2C2; --accent:var(--olive-deep);
  --accent-ink:var(--cream); --flag:#8A6B2B;

  --display:"Archivo","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --body:"Archivo","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;

  --fs-2xs:.75rem; --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-md:1.125rem;
  --measure:64ch;
  --gut:24px;
  color-scheme:light;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:var(--fs-base);line-height:1.65;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--charcoal);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;
  scroll-behavior:auto!important}}

/* --- language switching (preserved from the original build) --- */
:root .ja,:root .en{display:none}
:root .ja{font-size:.95em;line-height:1.75}
:root[data-lang="ja"] .ja{display:revert}
:root[data-lang="en"] .en{display:revert}
:root:not([data-lang]) .en{display:revert}

.wrap{max-width:78rem;margin:0 auto;padding-inline:var(--gut)}
.col{max-width:var(--measure)}
@media(min-width:60rem){.offset-r{margin-left:auto}}

/* ---------------------------------------------------------------- type --- */
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-size:clamp(2.5rem,1.2rem + 5.9vw,6.4rem);font-weight:700;letter-spacing:-.04em;
  line-height:.92;text-wrap:balance}
h2{font-size:clamp(1.85rem,1.15rem + 2.9vw,3.6rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.0}
/* the one or two places a statement should carry a whole screen */
.display{font-size:clamp(2.2rem,1.1rem + 4.4vw,5rem);letter-spacing:-.04em;line-height:.98;
  max-width:19ch;text-wrap:balance}
:root[data-lang="ja"] .display{letter-spacing:-.01em;line-height:1.24;max-width:22ch}
h3{font-size:var(--fs-md);font-weight:600;letter-spacing:-.01em;line-height:1.3}
:root[data-lang="ja"] h1{letter-spacing:-.01em;line-height:1.12}
:root[data-lang="ja"] h2{letter-spacing:-.005em;line-height:1.2}
p{margin:0}
.eyebrow{font-size:var(--fs-2xs);letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);margin:0}
.lede{font-size:var(--fs-md);color:var(--ink-soft);line-height:1.6}
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-s{display:flex;flex-direction:column;gap:.5rem}
.num{font-variant-numeric:tabular-nums}

section{padding-block:clamp(3rem,6vw,6rem);border-top:1px solid var(--line)}
section:first-of-type{border-top:0}
.sec-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}
@media(min-width:60rem){
  .sec-head:has(.lede){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:4rem;align-items:start;max-width:none}
  .sec-head:has(.lede) .eyebrow{grid-column:1;grid-row:1}
  .sec-head:has(.lede) :is(h1,h2){grid-column:1;grid-row:2;margin:0}
  .sec-head:has(.lede) .lede{grid-column:2;grid-row:1/span 2;margin:0;padding-top:.6rem}
}

/* --------------------------------------------------------------- bands --- */
.band{background:var(--olive);color:var(--white);border-top:0}
.band .eyebrow{color:var(--white)}
.band h2,.band h1{color:var(--cream)}
.band .lede{color:var(--white)}
.band-dark{background:var(--charcoal);color:var(--cream)}
.band-dark .eyebrow{color:var(--butter)}
.band-dark h2{color:var(--cream)}
.band-dark .lede{color:rgba(244,242,233,.8)}
.band-butter{background:var(--butter);color:var(--charcoal)}
.band-butter .eyebrow{color:var(--olive-deep)}

/* -------------------------------------------------------------- header --- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;
  background:color-mix(in srgb,var(--cream) 90%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;padding-block:.8rem;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;line-height:1}
.mark svg{width:26px;height:26px;flex:none}
.mark b{font-family:var(--display);font-weight:700;font-size:var(--fs-sm);letter-spacing:.14em;
  text-transform:uppercase}
.mark small{display:block;font-weight:500;font-size:var(--fs-2xs);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.15rem}
.nav{display:flex;gap:.2rem 1.4rem;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);
  padding-block:.2rem;transition:color .18s ease}
.nav a:hover,.nav a[aria-current]:not(.btn-nav){color:var(--ink)}
.nav a[aria-current]:not(.btn-nav){text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1.5px}
/* the Apply pill keeps its own colours when it is the current page: the generic
   current-page rule was repainting its label charcoal-on-charcoal */
.nav .btn-nav[aria-current]{background:var(--olive-deep);border-color:var(--olive-deep);
  color:var(--cream)}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.langs button{font:inherit;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.1em;
  padding:.26rem .62rem;background:transparent;color:var(--ink-soft);border:0;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--charcoal);color:var(--cream)}
.nav .btn-nav{background:var(--charcoal);color:var(--cream);border:1px solid var(--charcoal);
  padding:.4rem .95rem;border-radius:999px;font-size:var(--fs-sm);font-weight:600}
.nav .btn-nav:hover{background:var(--olive-deep);border-color:var(--olive-deep);color:var(--cream)}
/* phone: keep the sticky bar to two rows. #about and #contact are homepage
   anchors and are repeated in the footer, so they stand down here. */
@media(max-width:40rem){
  .site-head .wrap{gap:.6rem;padding-block:.5rem}
  .nav{gap:.2rem .9rem}
  .nav a[href*="#about"],.nav a[href*="#contact"]{display:none}
  /* two rows, not three: the mark and the language toggle share the first row,
     the links take the second */
  .mark{order:0}
  .langs{order:1;margin-left:auto}
  .nav{order:2;flex-basis:100%;margin-left:0}
  /* touch targets: the links measured 29px and the language toggle 26px */
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .langs button{min-height:40px;display:inline-flex;align-items:center;padding-inline:.85rem}
  .mark{min-height:44px}
  summary{min-height:44px;align-items:center}
  footer a{display:inline-flex;align-items:center;min-height:40px}
  footer .wrap{gap:1.2rem}
}
/* any touch device, including tablets wider than the phone breakpoint */
@media(hover:none){
  .nav a{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
  .langs button{min-height:40px;display:inline-flex;align-items:center}
  .mark{min-height:44px}
  summary{min-height:44px;align-items:center}
  footer a{display:inline-flex;align-items:center;min-height:40px}
}

/* -------------------------------------------------------------- buttons --- */
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-block;text-decoration:none;font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.01em;padding:.75rem 1.5rem;border-radius:999px;
  border:1px solid var(--charcoal);background:var(--charcoal);color:var(--cream);
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn:hover{background:var(--olive-deep);border-color:var(--olive-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}
.btn-light{background:var(--butter);border-color:var(--butter);color:var(--charcoal)}
.btn-light:hover{background:var(--white);border-color:var(--white);color:var(--charcoal)}
.btn-clear{background:transparent;border-color:rgba(255,255,255,.7);color:var(--white)}
.btn-clear:hover{background:rgba(255,255,255,.14);border-color:var(--white)}

/* ----------------------------------------------------------------- hero --- */
.hs-hero{position:relative;isolation:isolate;border-top:0;padding:0;overflow:clip;
  min-height:clamp(30rem,86vh,52rem);display:flex;align-items:flex-end;background:var(--charcoal)}
.hs-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hs-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(26,26,18,.88) 0%,rgba(26,26,18,.5) 48%,rgba(26,26,18,.24) 100%),
             linear-gradient(to right,rgba(26,26,18,.62) 0%,rgba(26,26,18,.22) 52%,rgba(26,26,18,0) 100%)}
.hs-hero .wrap{width:100%;padding-block:clamp(2.4rem,5vw,4.5rem)}
.hs-hero h1{color:var(--white);max-width:16ch}
.hs-hero .eyebrow{color:var(--butter)}
.hs-hero .lede{color:rgba(255,255,255,.92);max-width:44ch;font-size:clamp(1rem,.9rem + .5vw,1.35rem)}
.hs-hero .stack{gap:1.4rem}
.hero-foot{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;
  border-top:1px solid rgba(255,255,255,.28);margin-top:1.6rem;padding-top:1.2rem;
  color:rgba(255,255,255,.95);font-size:var(--fs-sm)}

/* -------------------------------------------------------------- figures --- */
figure{margin:0}
.shot img{width:100%;height:auto;display:block;background:var(--card)}
.shot figcaption{font-size:var(--fs-xs);color:var(--ink-soft);padding-top:.5rem;line-height:1.5}
.band .shot figcaption{color:var(--white)}
.band-dark .shot figcaption{color:rgba(244,242,233,.82)}
.wide{margin-block:0}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem;
  align-items:start}
.figs-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.figs .shot figcaption{min-height:2.6em}
/* justified row: every photo is shown whole. Each figure grows in proportion to its
   own aspect ratio (--ar), so mixed portrait and landscape land on one height. */
.row-h{display:flex;flex-wrap:wrap;gap:1rem}
.row-h figure{flex:var(--ar,1) 1 0;min-width:10rem}
.row-h img{width:100%;height:auto;display:block;background:var(--card)}
.row-h figcaption{min-height:2.7em}
/* Phone: a row of photos becomes a swipe strip rather than a tall stack.
   Native scroll-snap, no library. The next photo's edge shows there is more,
   and the strip bleeds to the screen edge so the cue is unmistakable. */
@media(max-width:40rem){
  .row-h,.figs-2{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;gap:.8rem;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    padding-bottom:.5rem;scroll-padding-inline:var(--gut);
    scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  /* Slides share a width, so every photo is large. Nothing is cropped: a tall
     photo is capped by max-height and letterboxed, a short one is centred, and
     the captions line up along the bottom of the strip. */
  .row-h > figure,.figs-2 > figure{flex:0 0 82%;scroll-snap-align:start;min-width:0;
    display:flex;flex-direction:column}
  .row-h > figure img,.figs-2 > figure img{width:100%;height:auto;max-height:54vh;
    object-fit:contain;margin-block:auto}
  .row-h figcaption,.figs .shot figcaption,.row-h .shot figcaption{min-height:0}
  .swipe-hint{display:block}
}
.swipe-hint{display:none;font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);margin-top:.5rem}
.band .swipe-hint,.band-dark .swipe-hint{color:rgba(255,255,255,.75)}
.bleed{width:100%}
.bleed img{width:100%;height:clamp(18rem,52vh,34rem);object-fit:cover}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line)}
@media(min-width:48rem){.strip{grid-template-columns:repeat(4,1fr)}}
.strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;background:var(--card)}

/* legacy hero (Horizon House page) */
.hero-split{padding-block:2.4rem 2.6rem;border-top:0}
.hero-split .wrap{display:grid;grid-template-columns:1fr;gap:1.8rem;align-items:center}
@media(min-width:54rem){.hero-split{padding-block:3.4rem 3rem}
  .hero-split .wrap{grid-template-columns:1.05fr .95fr;gap:3.2rem}}
.hero-split .stack{gap:1.2rem;min-width:0}
.hero-portrait{margin:0;order:-1}
@media(min-width:54rem){.hero-portrait{order:0}}
.hero-portrait img{width:100%;height:auto}
.hero{padding-block:3.6rem 3rem;border-top:0}
/* a text-only hero: nothing sits beside the headline to carry the width,
   so it steps down from the full display size */
.hero .sec-head h1{font-size:clamp(2.3rem,1.4rem + 3.2vw,4.2rem)}
.hero .sec-head{margin-bottom:1.6rem}
.meta-row{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:var(--fs-sm);color:var(--ink-soft)}
.meta-row > span{display:inline-flex;align-items:center;gap:.45rem}
.meta-row > span::before{content:"";width:5px;height:5px;background:var(--olive);flex:none}

/* ------------------------------------------------------- spaces / cards --- */
.space{display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center}
@media(min-width:54rem){.space{grid-template-columns:1.1fr .9fr;gap:3rem}}
.space-meta{display:flex;flex-direction:column;gap:1rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.4rem;font-size:var(--fs-sm);
  border-top:1px solid var(--line);padding-top:1rem}
.kv dt{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.14em;font-size:var(--fs-2xs);
  padding-top:.2rem}
.kv dd{margin:0;font-variant-numeric:tabular-nums}

/* --------------------------------------------------- three-up cards --- */
.cards3{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);counter-reset:c}
@media(min-width:54rem){.cards3{grid-template-columns:repeat(3,1fr)}}
.cards3 > div{background:var(--paper);padding:1.6rem 1.4rem;display:flex;flex-direction:column;
  gap:.5rem;counter-increment:c}
.cards3 > div::before{content:counter(c,decimal-leading-zero);font-family:var(--display);
  font-weight:700;font-size:var(--fs-sm);color:var(--olive);font-variant-numeric:tabular-nums}
.cards3 h3{font-size:var(--fs-md)}
.cards3 p{font-size:var(--fs-sm);color:var(--ink-soft);line-height:1.6}

/* ------------------------------------------------- embedded form --- */
/* A third-party form cannot be framed inside the Claude artifact preview, and some
   browsers block it too. The iframe starts collapsed and invisible; it is only shown
   once it is confirmed to have loaded cross-origin. Otherwise the panel shows the
   fallback, so a blocked embed never appears as a grey void. */
.embed{position:relative;border:1px solid var(--line);background:var(--card)}
.embed iframe{width:100%;height:0;border:0;display:block;opacity:0;background:var(--cream)}
.embed.is-live iframe{height:900px;opacity:1}
.embed.is-live .embed-note{display:none}
.embed-note{padding:2.2rem 1.4rem;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:.9rem}
.embed-note p{font-size:var(--fs-sm);color:var(--ink-soft);max-width:44ch;line-height:1.6}

/* -------------------------------------------- asymmetric photo set --- */
.feature{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:54rem){
  .feature{grid-template-columns:1.32fr 1fr;align-items:start;gap:1.2rem}
}
.feature .feature-side{display:grid;gap:1rem;align-content:start}
.feature img{width:100%;height:auto;display:block;background:var(--card)}
.feature figcaption{font-size:var(--fs-xs);color:var(--ink-soft);padding-top:.5rem;line-height:1.5}
.band .feature figcaption,.band-dark .feature figcaption{color:rgba(255,255,255,.9)}

/* ------------------------------------------------------- spec list --- */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:1.6rem 2rem;margin:0}
.spec div{min-width:0}
.spec dt{font-size:var(--fs-2xs);letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--butter);margin-bottom:.35rem}
.spec dd{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.2;font-variant-numeric:tabular-nums;
  color:var(--cream)}
.spec dd small{display:block;font-family:var(--body);font-weight:400;font-size:var(--fs-sm);
  letter-spacing:0;color:rgba(244,242,233,.72);margin-top:.2rem}

/* ---------------------------------------------------- bigger button --- */
.btn-lg{padding:1rem 2.1rem;font-size:var(--fs-md)}
.band .kv{border-color:rgba(255,255,255,.3)}
.band .kv dt{color:var(--white)}

/* --------------------------------------------------------- house blocks --- */
.house{display:grid;grid-template-columns:1fr;gap:1.4rem;padding-block:1.8rem;
  border-top:1px solid var(--line)}
.house:first-of-type{border-top:0;padding-top:0}
/* the two houses should read as two chapters, not two bullet lists */
.house h3{font-size:clamp(1.45rem,1.1rem + 1.1vw,2.1rem);letter-spacing:-.025em;font-weight:700;
  line-height:1.1;margin-bottom:.2rem}
.house h3 .ja{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--ink-soft);
  letter-spacing:.02em;margin-top:.25rem}
:root[data-lang="ja"] .house h3 .ja{display:block}
@media(min-width:48rem){.house{padding-block:2.6rem}}
@media(min-width:48rem){.house{grid-template-columns:1fr 1.1fr;gap:2.4rem;align-items:start}}
.rooms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rooms li{display:flex;gap:1rem;padding-block:.7rem;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);min-width:0;flex-wrap:wrap}
@media(min-width:60rem){.rooms li{font-size:var(--fs-base);padding-block:.8rem}
  .rooms .nm{min-width:11rem}}
.rooms li:last-child{border-bottom:0}
.rooms .nm{font-weight:600;min-width:8rem}
.rooms .de{color:var(--ink-soft);min-width:0;flex:1}
.tag{font-size:var(--fs-2xs);letter-spacing:.08em;padding:.12rem .5rem;border:1px solid var(--line);
  border-radius:999px;color:var(--ink-soft);white-space:nowrap;align-self:center}

/* ------------------------------------------------------------- process --- */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  column-gap:1rem;row-gap:.2rem;padding-block:1.2rem;border-top:1px solid var(--line);min-width:0}
.steps li > *{grid-column:2;min-width:0}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:700;
  font-size:var(--fs-sm);color:var(--olive);padding-top:.25rem;grid-column:1;grid-row:1;
  font-variant-numeric:tabular-nums}
.steps h3{margin-bottom:.3rem}
.steps p{font-size:var(--fs-sm);color:var(--ink-soft)}
@media(min-width:60rem){
  .steps{display:block;columns:2;column-gap:4rem;max-width:none}
  .steps li{break-inside:avoid;padding-block:1.1rem}
  .steps li:first-child{border-top:1px solid var(--line)}
}
.who{font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--flag);
  display:block;margin-top:.35rem;font-weight:600}

/* ----------------------------------------------------- notes / callouts --- */
.note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--olive);
  padding:1.1rem 1.2rem;font-size:var(--fs-sm);display:flex;flex-direction:column;gap:.55rem}
.note h3{font-size:var(--fs-base)}
.todo{border-left-color:var(--flag)}
.todo .eyebrow{color:var(--flag)}
.disclose{border-bottom:1px solid var(--line);margin-block:.6rem}
.disclose>summary{padding-block:.4rem}
.disclose>*:not(summary){margin-top:1.1rem}
.disclose .note p{font-size:var(--fs-sm);padding-left:0}
.disclose>p{padding-left:0}

/* ---------------------------------------------------------- availability --- */
.avail{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.avail article{background:var(--paper);padding:1.2rem 1.25rem;display:flex;flex-direction:column;
  gap:.5rem;min-width:0}
.avail h3{font-size:var(--fs-base);font-weight:700}
.avail .when{font-size:var(--fs-sm);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.pill{align-self:flex-start;font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
  padding:.18rem .55rem;border-radius:999px;border:1px solid currentColor;font-weight:600}
.pill.now{color:var(--olive-deep)}
.pill.soon{color:var(--flag)}
.asof{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:1rem;font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------- facts grid --- */
/* borders on the cells rather than a painted grid background, so a row that
   does not fill its tracks leaves no coloured gap at the end */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.facts div{background:var(--paper);padding:1.1rem;min-width:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts dd small{display:block;font-size:var(--fs-sm);font-weight:400;letter-spacing:0;
  color:var(--ink-soft);margin-top:.2rem}
.facts dt{font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:.35rem;font-weight:600}
.facts dd{margin:0;font-size:var(--fs-base);font-variant-numeric:tabular-nums}
.band .facts,.band-dark .facts{border-color:rgba(255,255,255,.28)}
.band .facts div{background:var(--olive);border-color:rgba(255,255,255,.28)}
.band-dark .facts div{background:var(--charcoal);border-color:rgba(255,255,255,.28)}
.band .facts dd small,.band-dark .facts dd small{color:rgba(244,242,233,.72)}
.band .facts dt{color:var(--white)}
.band-dark .facts dt{color:var(--butter)}

/* ----------------------------------------------------------------- faq --- */
details{border-top:1px solid var(--line);padding-block:.95rem}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:var(--fs-base);list-style:none;
  display:flex;gap:.8rem;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--olive);font-family:var(--display);font-weight:700}
details[open] summary::before{content:"\2013"}
details p{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:.7rem;padding-left:1.6rem}

/* ----------------------------------------------------------- form mount --- */
.mount{border:1px solid var(--line);background:var(--card);overflow:hidden}
.mount-note{padding:2.6rem 1.2rem;text-align:center;display:flex;flex-direction:column;
  gap:.5rem;align-items:center}
.mount-note p{font-size:var(--fs-sm);color:var(--ink-soft);max-width:38ch}
.mount iframe{width:100%;min-height:900px;border:0;display:block;background:var(--card)}

/* -------------------------------------------------------------- footer --- */
footer{background:var(--charcoal);color:rgba(244,242,233,.78);padding-block:3rem 3.4rem;
  font-size:var(--fs-sm)}
footer .wrap{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--butter)}
footer .mark b,footer strong{color:var(--cream)}
/* click-to-select values. The cream colour was written for the dark footer and
   made the same values invisible on a light page, so it is scoped now. */
.sel{user-select:all;font-weight:600}
footer .sel,.band .sel,.band-dark .sel{color:var(--cream)}

/* ------------------------------------------------- section sub-navigation --- */
/* A reference page earns a way to jump around it. Sticks under the header,
   whose height the script measures into --head-h. Scrolls sideways on a phone. */
.subnav{position:sticky;top:var(--head-h,64px);z-index:20;
  background:color-mix(in srgb,var(--cream-warm) 94%,transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:1.4rem;overflow-x:auto;scrollbar-width:none;
  padding-block:.7rem}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none;text-decoration:none;color:var(--ink-soft);font-size:var(--fs-sm);
  font-weight:500;white-space:nowrap;padding-block:.15rem;
  border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current]{color:var(--ink);border-bottom-color:var(--olive)}
@media(hover:none){.subnav a{min-height:40px;display:inline-flex;align-items:center}}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:calc(var(--head-h,64px) + 3.4rem)}

/* a list that is long enough to deserve two columns on a wide screen */
@media(min-width:62rem){
  .rooms-2{display:block;columns:2;column-gap:3.2rem}
  .rooms-2 li{break-inside:avoid}
  .rooms-2 li:first-child{border-top:1px solid var(--line)}
  .note-2 .stack-cols,.note-2 > p:nth-of-type(n+2){}
  .note-2{max-width:none}
  .note-2 > p{columns:2;column-gap:3rem}
}