@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Norican";
  src: url("fonts/norican.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* the brand palette, from the inn's own wordmark and notices: cream paper, deep forest green, mist, moss and sage.
     The hero photo keeps its golden light; everything around it is forest on cream. */
  --sky: #F3EEE7;
  --sun: #FAF7F1;
  --cloud: #E4DED3;
  --limestone-lit: #DCD6CA;
  --plank: #A9B59A;
  --plank-deep: #4F6146;
  --bark: #566355;
  --rock-shade: #34443A;
  --fern: #33433A;
  --gap: #25312A;

  /* roles */
  --limestone: var(--sky);
  --paper: var(--sun);
  --slot: var(--limestone-lit);
  --ink: var(--gap);
  --ink-soft: var(--bark);
  --line: rgba(37, 49, 42, 0.14);
  --field-line: rgba(37, 49, 42, 0.22);
  --mahogany: var(--rock-shade);
  --mahogany-lift: #3E4F43;
  --tile-ink: var(--sun);
  --pine: var(--cloud);
  --pine-ink: var(--gap);
  --action: var(--gap);
  --action-hover: #34443A;
  --on-dark-soft: rgba(243, 238, 231, 0.76);

  /* Cormorant Garamond, the serif of the wordmark, for headings; Montserrat, the notices' sans, for everything else */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-axes: normal;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --t-hero: clamp(37px, 4.8vw, 70px);
  --t-h2: clamp(40px, 4.8vw, 72px);
  --t-h3: clamp(29px, 2.6vw, 40px);
  --t-statement: clamp(23px, 2.3vw, 34px);
  --pad: clamp(20px, 3.4vw, 48px);
  --max: 1360px;
  --section: clamp(96px, 10vw, 168px);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
:where(*:not(dialog)) { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: 17px; } }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
::selection { background: rgba(169, 181, 154, 0.45); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
input, select, textarea, button { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
.h2 { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 500; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.01em; max-width: 17ch; text-wrap: balance; }
.h3 { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 600; font-size: var(--t-h3); line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.ch-lede { font-size: 18px; line-height: 1.6; max-width: 46ch; }
.statement { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 500; font-size: var(--t-statement); line-height: 1.25; max-width: 40ch; text-wrap: balance; }
figcaption { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin-top: 12px; }
figcaption time { color: var(--ink); font-weight: 600; margin-right: 0.35em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  background: var(--action); color: var(--sun);
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: background-color 150ms ease-out, transform 160ms ease-out;
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--action-hover); } }
.btn--small { min-height: 44px; padding: 0 18px; }
.btn--pine { background: var(--pine); color: var(--pine-ink); }
@media (hover: hover) and (pointer: fine) { .btn--pine:hover { background: #EEE9DF; } }
.btn--paper { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--paper:hover { background: #fff; } }
.ask {
  background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color 150ms ease-out, text-decoration-thickness 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .ask:hover { color: var(--ink); text-decoration-thickness: 2px; } }

/* ---------- tiles: the wall's own pieces ---------- */
.t {
  position: relative; display: inline-grid; place-items: center;
  width: var(--tile); height: var(--tile);
  background: var(--mahogany); color: var(--tile-ink);
  font-family: var(--sans); font-weight: 800; line-height: 1; letter-spacing: 0;
}
.t::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7%; background: rgba(0, 0, 0, 0.24); }
.t sub { position: absolute; right: 9%; bottom: 10%; font-size: 0.3em; font-weight: 700; line-height: 1; }
.hallmark { --tile: 26px; display: inline-flex; flex-wrap: wrap; gap: 3px; font-size: calc(var(--tile) * 0.58); }
@media (min-width: 420px) { .hallmark { --tile: 30px; } }
.ch-head > * { min-width: 0; }
.hallmark .t:nth-child(3n+1) { background-color: #405245; }
.hallmark .hm-gap { width: 12px; }
.hallmark--light .t, .hallmark--light .t:nth-child(n) { background: var(--pine); color: var(--pine-ink); }
.hallmark--light .t::after { background: rgba(37, 49, 42, 0.16); }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  min-height: calc(68px + var(--hero-inset)); padding: calc(max(10px, env(safe-area-inset-top)) + var(--hero-inset)) calc(var(--pad) + var(--hero-inset)) 10px;
  background: rgba(247, 246, 243, 0); color: var(--ink);
  transition: background-color 220ms ease-out, color 220ms ease-out;
}
.top.is-solid { background: var(--paper); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; min-height: 44px; }
/* the logo: the cup on the bridge between two pinnacles, the range rising as its steam, beside the wordmark */
.mark-logo { display: block; height: 38px; width: auto; }
.mark-logo--light, .top.on-dark .mark-logo { display: none; }
.top.on-dark .mark-logo--light { display: block; }
@media (min-width: 420px) { .mark-logo { height: 52px; } }
/* the sections sit in a frosted pill centred in the bar; a dark pill glides under the section on screen */
.top-nav {
  display: none; position: absolute; left: 50%; translate: -50% 0; gap: 2px; padding: 4px; border-radius: 999px; font-size: 15px;
  background: rgba(250, 247, 241, 0.46); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 28px rgba(37, 49, 42, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .top-nav { background: rgba(250, 247, 241, 0.94); } }
@media (prefers-reduced-transparency: reduce) { .top-nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.top-nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; text-decoration: none; transition: color 220ms ease-out, background-color 150ms ease-out; }
.top-nav a[aria-current] { color: var(--sun); }
@media (hover: hover) and (pointer: fine) { .top-nav a:not([aria-current]):hover { background: rgba(37, 49, 42, 0.07); } }
.nav-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--w, 0px); translate: var(--x, 0px) 0; border-radius: 999px; background: var(--action); opacity: 0; pointer-events: none; }
.top-nav.has-current .nav-ind { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .nav-ind { transition: translate 420ms cubic-bezier(0.2, 0.7, 0.2, 1), width 420ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease-out; }
}
@media (min-width: 1100px) { .top-nav { display: flex; } }

/* the one call to action: a white pill, caps, with an arrow out */
.cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 22px; border-radius: 999px; white-space: nowrap;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px rgba(37, 49, 42, 0.1); transition: box-shadow 150ms ease-out, scale 160ms ease-out;
}
.cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate 200ms ease-out; }
.cta:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .cta:hover { box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(37, 49, 42, 0.16); } .cta:hover svg { translate: 2px -2px; } }
@media (max-width: 419px) { .cta { padding: 0 14px 0 16px; font-size: 12px; } }
/* over the hero the bar is see-through, ink on the light golden sky */
.top:not(.is-solid) .walk-btn .board { display: none; }
/* with the tiles hidden and no room for the label, the button would be empty on phones: drop it until the bar turns solid */
@media (max-width: 639px) { .top:not(.is-solid) .walk-btn { display: none; } }
.walk-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; }
.walk-btn[hidden] { display: none; }
.walk-label { display: none; }
@media (min-width: 640px) { .walk-label { display: inline; } }
@media (hover: hover) and (pointer: fine) { .walk-btn:hover .walk-label { text-decoration: underline; text-underline-offset: 5px; } }

/* ---------- hero: the bridge at golden hour in an inset card on the cream page, the name stacked on the left in the open sky ---------- */
:root { --hero-inset: clamp(8px, 1.1vw, 16px); --hero-r: clamp(16px, 1.8vw, 28px); }
/* Two planes share one scene (the far sky, then rocks, pines and bridge cut out in front), wide enough to cover the
   stage plus slack below for the rise. --fx is where the scene centres. All the copy sits in front of both planes,
   anchored to the stage top-left, where the photo is open sky. --clear-w is the width of that sky: the tall tree starts
   --clear-x across the photo, and the name is sized so ROCK (and INN, set to the same width) ends before it. */
.hero {
  position: relative; --fx: 0.5; --scene-w: max(100vw, calc(106svh * 2560 / 1429)); --scene-h: max(106svh, calc(100vw * 1429 / 2560));
  --inset: var(--hero-inset); --card-r: var(--hero-r); --clear-x: 0.36; --clear-w: calc(50vw - var(--inset) - (var(--fx) - var(--clear-x)) * var(--scene-w));
  --rock-em: 2.8; --inn-em: 1.85; --name-size: clamp(72px, calc((var(--clear-w) - var(--pad) - 24px) / var(--rock-em)), 21svh);
  --copy-top: max(96px, 12svh); --name-h: calc(var(--name-size) * 0.8 * (1 + var(--rock-em) / var(--inn-em)));
}
.hero-stage { position: relative; height: calc(100svh - var(--inset) * 2); margin: var(--inset); border-radius: var(--card-r); overflow: hidden; isolation: isolate; background: #E9D2A6; color: var(--ink); }
.hp { position: absolute; top: 0; left: calc(50% - var(--fx) * var(--scene-w)); width: var(--scene-w); max-width: none; height: auto; aspect-ratio: 2560 / 1429; }
.hp-sky { z-index: 1; }
.hp-front { z-index: 5; }
/* ROCK over INN, INN set larger so the word runs exactly ROCK's width (the two widths in em are measured from the face) */
.hero-name {
  position: absolute; z-index: 9; left: var(--pad); top: var(--copy-top); display: grid; width: max-content;
  font-family: var(--serif); font-weight: 600; font-size: var(--name-size); line-height: 0.8; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--gap);
}
.nm--inn { font-size: calc(var(--rock-em) / var(--inn-em) * 1em); }
html.motion .hero-stage { position: sticky; top: var(--inset); }
html.motion .hero::after { content: ""; display: block; height: 20svh; }
html.motion .hp, html.motion .hero-name { will-change: transform; }

/* the line under the name and the two buttons under that, left-aligned with it */
.hero-copy {
  position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: var(--acts, 1);
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  padding: calc(var(--copy-top) + var(--name-h) + 22px) var(--pad) 0;
}
.hero-copy > * { pointer-events: auto; }
/* a soft sun haze behind the name, the line and the buttons, so they hold their contrast where the sky turns to cloud */
.hero-copy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(calc(var(--name-size) * var(--rock-em) * 0.95 + var(--pad)) calc(var(--name-h) * 0.85 + 130px) at calc(var(--pad) + var(--name-size) * var(--rock-em) * 0.4) calc(var(--copy-top) + var(--name-h) * 0.7 + 30px), rgba(248, 234, 206, 0.62), rgba(248, 234, 206, 0.3) 55%, rgba(248, 234, 206, 0) 100%);
}
.hero-sub {
  max-width: max(15em, min(21em, var(--clear-w) - var(--pad))); text-wrap: balance;
  font-size: 20px; color: var(--ink); font-weight: 700; line-height: 1.35; /* bold at 19px+ counts as large text */
}
.hero-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--ghost { background: rgba(255, 249, 238, 0.45); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(37, 49, 42, 0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: rgba(255, 249, 238, 0.75); } }
@media (prefers-reduced-transparency: reduce) { .btn--ghost { background: #F6EBD6; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.hero-stage :focus-visible { outline-color: var(--ink); }
/* the foot of the hero, as the references close theirs: three things on the farm, light on a soft dark fade,
   divided 1 | 2 | 3 by hairlines. It sits in the copy layer, so it fades out with the name and buttons. */
.hero-foot {
  position: absolute; left: 0; right: 0; bottom: 0; list-style: none; padding: clamp(72px, 12svh, 140px) var(--pad) max(24px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: linear-gradient(to top, rgba(37, 49, 42, 0.7), rgba(37, 49, 42, 0.36) 55%, rgba(37, 49, 42, 0));
  color: var(--sun);
}
.hero-foot li + li { border-left: 1px solid rgba(243, 238, 231, 0.3); }
.hero-foot a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: start; align-items: end; min-height: 44px; padding: 2px 22px; text-decoration: none; }
.hero-foot li:first-child a { padding-left: 0; }
.hero-foot svg { grid-row: span 2; align-self: center; width: 40px; height: 40px; margin: -2px -2px -4px -4px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.hero-foot strong { font-size: 15px; font-weight: 700; line-height: 1.35; }
.hero-foot span { font-size: 13px; line-height: 1.4; color: rgba(243, 238, 231, 0.82); }
.hero-foot :focus-visible { outline-color: var(--sun); }
@media (hover: hover) and (pointer: fine) { .hero-foot a:hover strong { text-decoration: underline; text-underline-offset: 4px; } }
@media (min-width: 900px) { .hero-foot { grid-template-columns: repeat(3, minmax(0, 300px)); } }
@media (max-width: 699px) {
  .hero-foot a { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding: 2px 12px; }
  .hero-foot svg { grid-row: auto; width: 30px; height: 30px; margin: 0; }
  .hero-foot span { display: none; }
}

/* the booking band: its own dark section under the hero, about half a screen tall, heading, fields and the photo note */
.plan { background: var(--gap); color: var(--sun); padding: clamp(56px, 7vw, 104px) var(--pad) clamp(20px, 2.4vw, 32px); color-scheme: dark; }
.plan > * { max-width: calc(var(--max) - var(--pad) * 2); margin-inline: auto; }
.plan-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.plan-title { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 500; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.02em; }
.plan-head p { max-width: 44ch; color: var(--on-dark-soft); }
@media (min-width: 900px) { .plan-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; } }
.bookbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.bookbar :focus-visible { outline-color: var(--cloud); }
.bookbar > * { min-width: 0; }
.bb-f { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--on-dark-soft); }
.bb-f input, .bb-f select { min-height: 50px; width: 100%; min-width: 0; padding: 8px 14px; background: #2E3B33; color: var(--sun); border: 1px solid rgba(243, 238, 231, 0.26); border-radius: 8px; font-size: 16px; font-weight: 500; transition: border-color 150ms ease-out; }
.bb-f input:focus-visible, .bb-f select:focus-visible { border-color: var(--plank); }
.bookbar .btn { grid-column: 1 / -1; min-height: 50px; }
.bookbar-note { grid-column: 1 / -1; font-size: 12px; color: var(--on-dark-soft); }
@media (min-width: 900px) {
  .bookbar { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 1fr) auto; align-items: end; }
  .bookbar .btn { grid-column: auto; }
}

/* a small picture card in the corner, as the references set one: our photo of the bridge, linking down to the rock garden */
.hero-card { display: none; }
@media (min-width: 1360px) {
  /* a trail tag, not a soft card: square, one corner cut, the dark of the gap, the photo graded to the hero's light */
  .hero-card {
    --cut: 18px;
    position: absolute; z-index: 9; right: 18px; bottom: 18px; width: 252px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 10px;
    padding: 8px 8px 12px; background: rgba(250, 247, 241, 0.95); color: var(--ink); text-decoration: none;
    clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  }
  .hero-card img { grid-column: 1 / -1; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }
  .hero-card-text { display: grid; padding-left: 4px; font-size: 13px; color: var(--ink-soft); }
  .hero-card-text strong { font-size: 15px; color: var(--ink); }
  .hero-card-go { display: grid; place-items: center; width: 36px; height: 36px; background: var(--gap); color: var(--sun); font-size: 16px; transition: transform 160ms ease-out; }
  .hero-card :focus-visible, .hero-card:focus-visible { outline-color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .hero-card:hover .hero-card-go { transform: translateX(2px); } }
}

@media (max-width: 699px) {
  /* the bridge centred, the tall tree pushed to the left edge; the name fills the width of the sky above it */
  .hero { --fx: 0.52; --name-size: 26vw; --copy-top: max(84px, 10svh); }
  .hero-copy { gap: 18px; padding-top: calc(var(--copy-top) + var(--name-h) + 16px); }
  .hero-sub { font-size: 19px; max-width: 100%; }
}

.hero-cap { margin-top: clamp(40px, 5vw, 72px); padding-top: 16px; border-top: 1px solid rgba(243, 238, 231, 0.16); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 20px; font-size: 13px; color: var(--on-dark-soft); }
.hero-pause { background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--sun); text-decoration: underline; text-underline-offset: 4px; }
.hero-pause[hidden], .clips-toggle[hidden] { display: none; }

/* ---------- intro ---------- */
.intro { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--pad) 0; display: grid; gap: 40px; align-items: center; }
.intro-title { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 500; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.01em; max-width: 14ch; text-wrap: balance; }
.intro-lede { margin-top: 20px; font-size: 18px; max-width: 40ch; }
.intro-board { width: 100%; max-width: 620px; justify-self: center; }
@media (min-width: 960px) { .intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } .intro-board { justify-self: end; } }

/* ---------- chapters ---------- */
.chapter { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--pad) 0; }
.chapter--tight { padding-top: clamp(56px, 7vw, 112px); }
.chapter--rooms { padding-top: clamp(72px, 8vw, 128px); }
.chapter--quiet { padding-top: calc(var(--section) * 1.2); }
.ch-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 4.4vw, 64px); }
.ch-head .hallmark { order: 3; }
@media (min-width: 900px) {
  .ch-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; }
  .ch-head .h2 { grid-row: 1 / span 2; }
  .ch-head .ch-lede { grid-column: 2; grid-row: 1; }
  .ch-head .hallmark { grid-column: 2; grid-row: 2; }
}

.m { width: 100%; aspect-ratio: var(--ar, 4 / 5); object-fit: cover; background: var(--slot); }
.card--arch .m { border-radius: 9999px 9999px 0 0; }
.card-cap { display: grid; gap: 4px; margin-top: 16px; color: var(--ink); font-size: 16px; }
.card-name { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: 0; }
.card-text { max-width: 36ch; }
.card-meta { display: flex; align-items: center; gap: 18px; color: var(--ink-soft); font-size: 14px; }
.card-meta time { color: var(--ink); font-weight: 600; }

/* trio and row: a thumb rail on phones, a row on wide screens */
.trio, .row3 {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 360px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 6px;
}
.trio::-webkit-scrollbar, .row3::-webkit-scrollbar { display: none; }
.trio > *, .row3 > * { scroll-snap-align: start; }
.row3 .m { --ar: 3 / 2; }
@media (min-width: 900px) {
  .trio, .row3 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: clamp(20px, 2.4vw, 36px); }
  .trio > :nth-child(2) { margin-top: 56px; }
}
.know { margin-top: clamp(32px, 4vw, 56px); font-size: 16px; color: var(--ink-soft); max-width: 70ch; }

/* split: family */
.chapter--split { display: grid; gap: 48px; }
.split-text { display: flex; flex-direction: column; gap: 18px; }
.split-text .hallmark { order: 3; }
.split-text .paw { order: 4; }
.split-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dog .m { border-radius: 9999px 9999px 0 0; --ar: 3 / 4; }
.dog-b { margin-top: 72px; }
.paw { max-width: 400px; margin-top: 12px; }
.paw figcaption { color: var(--ink); font-size: 15px; }
@media (min-width: 900px) {
  .chapter--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .split-media { gap: 28px; }
  .dog-b { margin-top: 140px; }
}

/* limestone country: three planes in an arched window, sliding apart as the window passes */
.karst { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--pad) 0; display: grid; gap: 40px; align-items: center; }
.karst > * { min-width: 0; }
.karst-text { display: grid; gap: 20px; }
.karst-fig { width: min(100%, 560px); justify-self: center; }
.karst-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 9999px 9999px 0 0; background: #9FC1EC; }
.kp { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none; }
.kp-sky { z-index: 1; }
.kp-hill { z-index: 2; }
.kp-near { z-index: 3; }
html.motion .kp { will-change: transform; }
.karst-fig figcaption a { color: var(--ink-soft); }
.karst-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.karst-strip .m { --ar: 4 / 3; }
.karst-strip figcaption a { color: var(--ink-soft); }
@media (min-width: 900px) { .karst-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .karst-strip figure:nth-child(even) { margin-top: 56px; } }
@media (min-width: 900px) {
  .karst { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); }
  .karst-fig { justify-self: end; }
}

/* pair */
.pair { display: grid; gap: 28px; align-items: start; }
.pair-wide .m { --ar: 3 / 2; }
.pair-tall .m { --ar: 3 / 4; }
@media (min-width: 900px) {
  .pair { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 44px); }
  .pair-tall { margin-top: 120px; }
  .pair--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .pair--flip .pair-tall { margin-top: 0; }
  .pair--flip .pair-wide { margin-top: 140px; }
}

/* quiet */
.quiet-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; margin: 0 auto clamp(40px, 5vw, 72px); max-width: 760px; }
.quiet-head .hallmark { order: 3; }
.quiet-head .h2 { max-width: 16ch; }
.quiet-wide .m { --ar: 21 / 9; }
.quiet-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(40px, 5vw, 72px); align-items: start; }
.quiet-pair figure:nth-child(2) { margin-top: 64px; }
@media (max-width: 699px) { .quiet-wide .m { --ar: 4 / 3; } }
@media (min-width: 900px) {
  .quiet-pair { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; }
  .quiet-pair figure:nth-child(1) { grid-column: 3 / span 4; }
  .quiet-pair figure:nth-child(2) { grid-column: 8 / span 3; margin-top: 120px; }
}

/* orchard: the fern-dark field, the green of the photo's ferns */
.orchard { background: var(--fern); color: var(--tile-ink); margin-top: var(--section); padding: clamp(80px, 10vw, 160px) var(--pad); display: grid; gap: 56px; }
.orchard > * { min-width: 0; }
.orchard-text { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }
.orchard-text .hallmark { order: 5; }
.orchard .ch-lede { color: var(--tile-ink); }
.figures { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin-top: 12px; }
.figures div { display: grid; gap: 6px; }
.figures dt { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 500; font-size: clamp(40px, 4vw, 60px); line-height: 1; font-variant-numeric: lining-nums; }
.figures dd { font-size: 14px; color: var(--on-dark-soft); max-width: 14ch; }
.season { font-size: 16px; color: var(--tile-ink); }
.season [data-season-now] { font-weight: 700; }
.orchard figcaption { color: var(--on-dark-soft); }
.orchard figcaption time { color: var(--tile-ink); }
.orchard-media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.orchard-media .m { --ar: 9 / 16; }
.o-b { margin-top: 64px; }
.o-c { grid-column: 1 / -1; }
.o-c .m { --ar: 4 / 3; }
.orchard :focus-visible { outline-color: var(--cloud); }
@media (min-width: 900px) {
  .orchard { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .orchard > * { max-width: none; }
  .orchard-media { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .o-b { margin-top: 96px; }
  .o-c { grid-column: auto; margin-top: 192px; }
  .o-c .m { --ar: 9 / 16; }
}

/* café arrival */
.cafe-door .m { --ar: 21 / 9; }
@media (max-width: 699px) { .cafe-door .m { --ar: 4 / 3; } }

/* ---------- pinned stages ---------- */
.pin { position: relative; }
.stage { position: relative; }
html.motion .pin .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.pin--full .scrub, .pin--full .scrub-still { width: 100%; height: 100svh; object-fit: cover; background: var(--slot); }
.scrub { display: none; }
html.motion .scrub { display: block; }
html.motion .scrub-still { display: none; }
.pin--full:not(:first-child) { margin-top: var(--section); }
.panel {
  position: relative; background: var(--paper); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px;
  margin: 0 var(--pad);
}
.panel .hallmark { order: 5; }
.h2--panel { font-size: clamp(30px, 3vw, 44px); }
.panel-facts { font-size: 15px; color: var(--ink-soft); }
.panel-facts time { color: var(--ink); font-weight: 600; margin-right: 0.3em; }
html.motion .panel { position: absolute; left: var(--pad); right: var(--pad); bottom: max(24px, 5vh); margin: 0; }
@media (min-width: 900px) { html.motion .panel { right: auto; width: min(480px, 40vw); } }
html.motion .cue {
  --show: clamp(0, calc((var(--p, 0) - 0.48) * 5), 1);
  opacity: var(--show);
  transform: translateY(calc((1 - var(--show)) * 20px));
}
.stage-cap { margin: 12px var(--pad) 0; font-size: 14px; color: var(--ink-soft); }
.stage-cap time { color: var(--ink); font-weight: 600; margin-right: 0.35em; }
html.motion .stage-cap { position: absolute; left: var(--pad); bottom: 20px; margin: 0; padding: 8px 12px; background: var(--paper); }

/* the round door */
.door { position: relative; }
.door-out, .door-in { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 42% 73%; background: var(--slot); }
.door-in { display: none; }
.door-copy { max-width: var(--max); margin: 28px auto 0; padding: 0 var(--pad); display: grid; gap: 14px; }
.door-meta { display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-soft); }
.door-meta time { color: var(--ink); font-weight: 600; }
html.motion .pin--door .door { position: absolute; inset: 0; }
html.motion .pin--door .door-out, html.motion .pin--door .door-in { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
html.motion .pin--door .door-in { display: block; clip-path: circle(var(--r, 0px) at 42% 73%); }
html.motion .door-copy { position: absolute; top: calc(68px + 3vh); right: var(--pad); width: min(440px, calc(100% - var(--pad) * 2)); margin: 0; padding: 26px 26px 18px; background: var(--paper); }
@media (max-width: 699px) { html.motion .door-copy { top: 76px; left: var(--pad); padding: 18px 18px 10px; } html.motion .door-copy .ch-lede { font-size: 16px; } }

/* ---------- boards (built by site.js) ---------- */
.board { position: relative; container-type: inline-size; }
.board .cell { position: absolute; perspective: 400px; }
.board .slot { position: absolute; inset: 5%; background: var(--slot); }
.board .cell .t {
  position: absolute; inset: 5%; width: auto; height: auto; font-size: var(--glyph);
  transform: rotateX(90deg); opacity: 0;
  transition: transform 460ms var(--ease-out), opacity 200ms ease-out, background-color 200ms ease-out, color 200ms ease-out;
  transition-delay: var(--d, 0ms);
}
.board .cell.on .t { transform: none; opacity: 1; }
.board .cell.cur .t { background: var(--plank); color: var(--gap); }
.board--intro, .board--dialog { width: 100%; aspect-ratio: 14 / 10; --glyph: calc(100cqw / 14 * 0.52); }
.board--intro sub, .board--dialog sub { font-size: 0.32em; }
.board--mini { width: 54px; aspect-ratio: 14 / 10; --glyph: 0px; }
.board--mini .slot { background: rgba(37, 49, 42, 0.14); inset: 8%; }
.board--mini .cell .t { inset: 8%; transition: none; }
.board--mini sub { display: none; }
.board--paw { --glyph: calc(100cqw / 8 * 0.5); width: 100%; aspect-ratio: 8 / 8.1; }
.board--paw .cell .t { transform: none; opacity: 1; }
.board .paw-mark { position: absolute; display: grid; place-items: center; background: var(--mahogany); transform: rotate(45deg); }
.board .paw-mark svg { width: 72%; height: 72%; transform: rotate(-45deg); fill: var(--tile-ink); }
.board .plaque { position: absolute; display: grid; place-items: center; background: var(--pine); color: var(--pine-ink); font-family: "Norican", cursive; font-size: calc(100cqw / 8 * 0.5); line-height: 1; }
.board .wl { position: absolute; z-index: 2; display: block; }
.board .wl:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.board .cell.hov .t { background: var(--mahogany-lift); }
.board .cell.hov:not(.on) .slot { background: #CFC8BA; }

/* ---------- the peak ---------- */
.peak { margin-top: var(--section); }
.peak .stage { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; gap: 22px; align-content: center; }
@media (min-width: 1100px) { .peak .stage { grid-template-columns: 340px minmax(0, 1fr); column-gap: 56px; align-items: center; } }
.peak-text { display: grid; gap: 14px; max-width: 42ch; font-size: 16px; }
.peak-text strong { font-weight: 750; letter-spacing: 0.02em; }
.peak-text time { font-weight: 700; }
.wall { position: relative; width: 100%; aspect-ratio: 1776 / 1458; container-type: inline-size; justify-self: start; }
@media (min-width: 700px) { .wall { width: min(100%, calc((100svh - 260px) * 1.2181)); } }
@media (min-width: 1100px) { .wall { width: min(100%, calc((100svh - 64px) * 1.2181)); } }
.wall-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.board--wall { position: absolute; inset: 0; --glyph: calc(100cqw * 0.0676 * 0.56); display: none; }
html.motion .wall-photo { opacity: var(--photo, 0); }
html.motion .board--wall { display: block; opacity: calc(1 - var(--photo, 0)); }
.board--wall .sign-t { position: absolute; display: grid; place-items: center; background: var(--pine); color: var(--pine-ink); font-weight: 800; font-size: calc(100cqw * 0.064 * 0.66); line-height: 1; opacity: 0; transform: translateY(-30%); }
.board--wall .sign-t.and { background: var(--mahogany); color: var(--tile-ink); font-family: "Norican", cursive; font-weight: 400; font-size: calc(100cqw * 0.03); }
html.motion .cue-late { opacity: var(--late, 0); transform: translateY(calc((1 - var(--late, 0)) * 12px)); }

/* ---------- inside the café ---------- */
.inside { max-width: var(--max); margin: 0 auto; padding: var(--section) var(--pad) 0; }
.inside .statement { margin-bottom: clamp(36px, 4.4vw, 64px); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.gallery .m { --ar: 4 / 5; }
.g-hall { grid-column: 1 / -1; }
.g-hall .m { --ar: 16 / 9; }
.g-door { margin-top: 48px; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; }
  .g-porch { grid-column: 1 / span 4; margin-top: 96px; }
  .g-porch .m { --ar: 4 / 5; }
  .g-hall { grid-column: 5 / span 8; }
  .g-sign { grid-column: 1 / span 3; }
  .g-shelf { grid-column: 4 / span 5; margin-top: 72px; }
  .g-shelf .m { --ar: 4 / 3; }
  .g-door { grid-column: 9 / span 4; margin-top: 24px; }
}

/* ---------- the close ---------- */
.stay { margin-top: var(--section); background: var(--gap); color: var(--tile-ink); padding: clamp(80px, 10vw, 150px) var(--pad) clamp(56px, 7vw, 96px); color-scheme: dark; }
.stay a { color: var(--tile-ink); }
.stay :focus-visible { outline-color: var(--cloud); }
.stay-grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 64px; }
@media (min-width: 960px) { .stay-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: clamp(48px, 7vw, 120px); } }
.stay-intro { margin: 16px 0 28px; max-width: 40ch; }
.carried { margin: -12px 0 24px; padding: 12px 14px; background: #2F3C34; font-size: 15px; }
#book { display: grid; gap: 18px; max-width: 640px; }
.f { display: grid; gap: 7px; font-size: 15px; font-weight: 600; }
.f-row { display: grid; gap: 18px; }
@media (min-width: 560px) { .f-row { grid-template-columns: 1fr 1fr; } }
.f input, .f select, .f textarea {
  width: 100%; min-height: 50px; padding: 11px 13px;
  background: #2E3B33; color: var(--tile-ink);
  border: 1px solid rgba(243, 238, 231, 0.3); border-radius: 0;
  font-size: 16px; font-weight: 400;
  transition: border-color 150ms ease-out;
}
.f textarea { resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: rgba(243, 238, 231, 0.64); }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { border-color: var(--plank); }
.f input[aria-invalid="true"] { border-color: #F2B8A0; }
.f-error { color: #FFD7C7; font-weight: 600; font-size: 16px; }
#book .btn { justify-self: start; }
.sample { font-size: 14px; color: var(--on-dark-soft); }
.f-done { background: #2F3C34; font-size: 16px; white-space: pre-line; }
.f-done:not(:empty) { padding: 18px 20px; }
.f-done strong { display: block; margin-bottom: 6px; }
.stay-facts { display: grid; gap: 8px; align-content: start; }
.stay-facts h3 { font-family: var(--serif); font-variation-settings: var(--serif-axes); font-weight: 600; font-size: 28px; margin-top: 24px; }
.stay-facts h3:first-child { margin-top: 0; }
.stay-facts p { max-width: 44ch; }
.stay-facts a { font-weight: 600; text-decoration: none; display: inline-block; min-height: 44px; padding-top: 6px; }

.clips-toggle { background: none; border: 0; padding: 0; min-height: 44px; margin-right: 10px; cursor: pointer; color: var(--pine-ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
video[data-loop] { cursor: pointer; }

/* ---------- the walk dialog ---------- */
.walk-close { background: none; border: 0; min-height: 44px; padding: 0 4px; cursor: pointer; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* entrances */
html.motion [data-in] { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease-out, transform 820ms var(--ease-out); transition-delay: var(--d, 0ms); }
html.motion [data-in].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .board .cell .t { transition: none; } }

/* ---------- the premium pass ----------
   Fine radii on pictures (the arches stay), time stamps as small amber caps instead of grey pills, actions as
   underlined text, hairlines over each chapter head, frosted sun-paper over footage. */
:root { --radius: 6px; --radius-lg: 12px; }

/* the nav runs edge to edge: see-through over the hero, frosted sun-paper below it */
.top.is-solid { background: rgba(250, 247, 241, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }

/* pictures and clips */
.m, .wall { border-radius: var(--radius); }
.card--arch .m, .dog .m { border-radius: 9999px 9999px var(--radius) var(--radius); }
.door-out, .door-in, .scrub-still { border-radius: var(--radius); }
.wall { overflow: hidden; }

/* a hairline over each chapter head, so the page reads as one bound book of the walk */
.ch-head, .quiet-head { border-top: 1px solid var(--line); padding-top: clamp(24px, 2.6vw, 36px); }
.quiet-head { max-width: none; }

/* time stamps: small amber caps, the planks' colour */
figcaption time, .card-meta time, .door-meta time, .stage-cap time, .panel-facts time, .hero-cap time {
  display: inline-block; margin-right: 10px; color: var(--plank-deep);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.orchard figcaption time, .hero-cap time { color: var(--cloud); }
figcaption { font-size: 14px; }

/* "Ask about this room": an underlined line with an arrow, not a pill */
.ask { color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ink); padding: 0 0 2px; min-height: 0; line-height: 1.3; }
.ask::after { content: " \2192"; }
.card-meta { min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .ask:hover { color: var(--plank-deep); border-color: var(--plank-deep); } }

/* the board and the Paw Pals wall sit on sun-paper with a hairline */
.intro-board { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(14px, 2.4vw, 30px); box-shadow: 0 0 0 1px var(--line); }
.paw { background: var(--paper); border-radius: var(--radius-lg); padding: 16px 16px 12px; box-shadow: 0 0 0 1px var(--line); }

/* full-width footage stays full bleed, like the hero */
html.motion .pin--full .scrub { border-radius: 0; }
.panel { border-radius: var(--radius-lg); }
html.motion .panel { background: rgba(250, 247, 241, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.motion .stage-cap { border-radius: 999px; padding: 8px 14px; background: rgba(250, 247, 241, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html.motion .door-copy { border-radius: var(--radius-lg); background: rgba(250, 247, 241, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
html.motion .pin--door .door-out, html.motion .pin--door .door-in { border-radius: 0; }

.f input, .f select, .f textarea { border-radius: 8px; }
.carried, .f-done { border-radius: 10px; }

/* ---------- the mountain pass ----------
   Contour lines from a height map of hills like Sagada's on the dark bands and the footer, a limestone skyline as the
   top edge of the orchard and the stay, and each chapter head marked by a dashed trail with a summit flag. */
.plan, .orchard, .stay { background-image: url("texture/topo-light.svg"); background-size: cover; background-position: center; }
.orchard, .stay { position: relative; }
.orchard::before, .stay::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(28px, 4vw, 60px); margin-bottom: -1px;
  background: url("texture/ridge-orchard.svg") bottom / 100% 100% no-repeat; pointer-events: none;
}
.stay::before { background-image: url("texture/ridge-stay.svg"); }
.ch-head, .quiet-head { position: relative; border-top: 0; background: linear-gradient(to right, rgba(37, 49, 42, 0.38) 7px, transparent 7px) 0 0 / 12px 1.5px repeat-x; }
.ch-head::before, .quiet-head::before {
  content: ""; position: absolute; left: 0; top: -13px; width: 16px; height: 13px; background: var(--plank-deep);
  clip-path: polygon(0 100%, 38% 18%, 54% 52%, 72% 0, 100% 100%);
}
.quiet-head::before { left: 50%; translate: -50% 0; }
/* phones: the taller serif name puts the line under it over the tree, so the haze behind it is thicker there */
@media (max-width: 699px) {
  .hero-copy::before { background: radial-gradient(120% calc(var(--name-h) * 0.7 + 140px) at 30% calc(var(--copy-top) + var(--name-h) + 40px), rgba(248, 234, 206, 0.8), rgba(248, 234, 206, 0.45) 60%, rgba(248, 234, 206, 0) 100%); }
}


/* ---------- pictures: one grade, film grain and the trail-tag corner ----------
   Every photo and clip gets the same warm, quieter grade and a static grain, so the rooms' bright paint sits with the
   hills; arches give way to the cut corner of the hero card, and the rooms and the dogs stand tall like the hill strip. */
.ph { position: relative; display: block; overflow: hidden; --cut: 22px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.ph::after, .hero-stage::after, .door::after, .pin--full .stage::after, .karst-frame::after, .wall::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("texture/grain.png") 0 0 / 256px 256px; mix-blend-mode: overlay; opacity: 0.34;
}
.hero-stage::after { z-index: 7; opacity: 0.22; }
.karst-frame::after, .wall::after { z-index: 4; }
.pin--full .stage::after, .door::after { z-index: 1; }
.panel, .stage-cap, .door-copy { z-index: 2; }
.stage-cap { position: relative; }
.m, .wall, .card--arch .m, .dog .m { border-radius: 0; }
.m, .scrub, .scrub-still, .door-out, .door-in, .wall-photo, .kp { filter: saturate(0.74) sepia(0.12) contrast(1.03); }
.trio .m, .dog .m, .pair-tall .m { --ar: 3 / 5; }
.row3 .m { --ar: 3 / 4; }
@media (prefers-reduced-transparency: reduce) { .ph::after { opacity: 0.2; } }
.karst-frame { border-radius: 0; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }

/* ---------- the selling sections ----------
   After the hero and the booking band: rooms as catalogue cards with the name over the photo, two split panels
   (copy and three features beside one big photo), a dark band of four numbers, and icon cards for the farm. */
.sec { max-width: var(--max); margin: 0 auto; padding: clamp(80px, 9vw, 136px) var(--pad) 0; }
.sec-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head p { max-width: 46ch; color: var(--ink-soft); }
@media (min-width: 900px) { .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; align-items: end; } }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* rooms */
.room-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.room { position: relative; display: grid; background: var(--paper); }
.room .m { --ar: 3 / 4; }
.room-over {
  position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 20px 18px; color: var(--sun); pointer-events: none;
  background: linear-gradient(to top, rgba(37, 49, 42, 0.78), rgba(37, 49, 42, 0.2) 42%, rgba(37, 49, 42, 0) 62%);
}
.room-name { font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.05; }
.room-line { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(243, 238, 231, 0.88); }
.room-line .ic { width: 17px; height: 17px; }
.room-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 16px; }
.room-rate { font-size: 14px; color: var(--ink-soft); }
.room-rate strong { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--ink); margin-right: 4px; }
.room-more { margin-top: 22px; font-size: 15px; color: var(--ink-soft); max-width: 80ch; }
.room-more a { color: var(--ink); font-weight: 600; }
.sample { display: block; margin-top: 6px; font-size: 13px; }

/* split panels: copy on cream, one big photo with a line laid over it */
.split { display: grid; margin-top: clamp(80px, 9vw, 136px); background: var(--paper); }
.split-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(40px, 6vw, 88px) var(--pad); }
.split-copy > p { max-width: 44ch; color: var(--ink-soft); }
.split-photo { position: relative; margin: 0; min-height: 420px; }
.split-photo .ph { position: absolute; inset: 0; --cut: 0px; clip-path: none; }
.split-photo .m { height: 100%; aspect-ratio: auto; }
.split-over {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; margin: 0; padding: clamp(24px, 4vw, 48px);
  color: var(--sun); background: linear-gradient(to top, rgba(37, 49, 42, 0.8), rgba(37, 49, 42, 0));
}
.split-over .over-big { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.1; max-width: 18ch; }
.split-over .over-small { font-size: 13px; color: rgba(243, 238, 231, 0.84); }
.split-over time { color: var(--plank); margin-right: 8px; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(86svh, 760px); }
  .split--flip .split-photo { order: -1; }
  .split-copy { justify-content: center; padding-inline: clamp(40px, 6vw, 96px); }
}
.feats { list-style: none; padding: 0; display: grid; gap: 14px; margin: 10px 0 6px; }
.feats li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.feats .ic { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--field-line); }
.feats strong { font-size: 15px; font-weight: 600; }
.feats span { font-size: 14px; color: var(--ink-soft); }
.go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 8px 0 22px; margin-top: 8px;
  background: var(--action); color: var(--sun); border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease-out, transform 160ms ease-out;
}
.go svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--sun); color: var(--gap); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.go:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .go:hover { background: var(--action-hover); } }

/* the farm in four numbers */
.facts {
  position: relative; margin-top: clamp(96px, 10vw, 150px); padding: clamp(56px, 7vw, 96px) var(--pad);
  background: var(--fern) url("texture/topo-light.svg") center / cover; color: var(--sun);
}
.facts::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: clamp(28px, 4vw, 60px); margin-bottom: -1px; background: url("texture/ridge-orchard.svg") bottom / 100% 100% no-repeat; }
.facts > * { max-width: calc(var(--max) - var(--pad) * 2); margin-inline: auto; }
.facts-title { color: var(--sun); margin-bottom: clamp(28px, 3.4vw, 44px); max-width: calc(var(--max) - var(--pad) * 2); }
.facts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
.facts-list div { padding: 0 20px; display: grid; gap: 8px; align-content: start; }
.facts-list div:nth-child(odd) { padding-left: 0; }
.facts-list div + div { border-left: 1px solid rgba(243, 238, 231, 0.22); }
.facts-list div:nth-child(3) { border-left: 0; }
.facts-list dt { font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 4.6vw, 68px); line-height: 1; font-variant-numeric: lining-nums; }
.facts-list dd { font-size: 14px; color: var(--on-dark-soft); max-width: 22ch; }
@media (min-width: 900px) {
  .facts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-list div:nth-child(odd) { padding-left: 20px; }
  .facts-list div:first-child { padding-left: 0; }
  .facts-list div:nth-child(3) { border-left: 1px solid rgba(243, 238, 231, 0.22); }
}

/* the header's walk button is its label now; on phones the hero's button does the job */
.walk-btn .walk-label { display: inline; }
@media (max-width: 639px) { .walk-btn { display: none; } }
.room .ask { white-space: nowrap; }
.split-over { background: linear-gradient(to top, rgba(37, 49, 42, 0.92), rgba(37, 49, 42, 0.7) 55%, rgba(37, 49, 42, 0)); padding-top: clamp(72px, 9vw, 120px); }

/* ---------- second pass on the selling sections, after Verde and CozyNest ---------- */
/* facts: no skyline edge; title on the left, four figures with small icons on the right, hairlines between */
.facts { margin-top: clamp(80px, 9vw, 136px); padding: clamp(48px, 5vw, 72px) var(--pad); }
.facts::before { content: none; }
.facts-in { max-width: calc(var(--max) - var(--pad) * 2); margin: 0 auto; display: grid; gap: 32px; }
.facts-title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.05; color: var(--sun); margin: 0; max-width: 12ch; }
.facts-head p { margin-top: 14px; font-size: 14px; color: var(--on-dark-soft); max-width: 30ch; }
.facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
.facts-list div, .facts-list div:nth-child(odd), .facts-list div:first-child { padding: 0 0 0 20px; border-left: 1px solid rgba(243, 238, 231, 0.2); }
.facts-list .ic { width: 22px; height: 22px; color: var(--plank); margin-bottom: 6px; }
.facts-list dt { font-size: clamp(38px, 3.8vw, 56px); }
.facts-list dd { font-size: 13px; }
@media (min-width: 1000px) {
  .facts-in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; column-gap: 48px; }
  .facts-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts-list div:nth-child(3) { border-left: 1px solid rgba(243, 238, 231, 0.2); }
}

/* farm cards: the heading in its own column, a swipeable row of tall photo cards beside it */
.do-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.do-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.do-head p { color: var(--ink-soft); max-width: 34ch; }
.link-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1100px) {
  .do-sec { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; align-items: start; }
  .do-head { position: sticky; top: 110px; }
}

.do-rail { min-width: 0; }
.do-track {
  list-style: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 4px; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none;
}
.do-track::-webkit-scrollbar { display: none; }
.do-track:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; border-radius: var(--radius-lg); }
@media (min-width: 640px) { .do-track { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (min-width: 1100px) {
  /* the row runs past the page column to the screen's right edge, so the next card shows */
  .do-track {
    --bleed: calc(max(0px, (100vw - var(--max)) / 2) + var(--pad));
    margin: 0 calc(var(--bleed) * -1) 0 0; padding: 0 var(--bleed) 4px 0; scroll-padding-inline: 0; grid-auto-columns: calc((100% - 28px) / 3);
  }
}
.do-card { position: relative; scroll-snap-align: start; aspect-ratio: 3 / 4.2; border-radius: var(--radius-lg); overflow: hidden; background: var(--slot); }
.do-card .ph { position: absolute; inset: 0; border-radius: 0; }
.do-card .m { height: 100%; aspect-ratio: auto; }
.do-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 27, 23, 0.92) 0%, rgba(20, 27, 23, 0.78) 30%, rgba(20, 27, 23, 0.34) 56%, rgba(20, 27, 23, 0) 76%);
}
.do-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 6px; padding: 20px 20px 22px; color: var(--sun); }
.do-where { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250, 247, 241, 0.78); }
.do-cap h3 { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.05; }
.do-cap p { font-size: 14px; line-height: 1.45; color: rgba(250, 247, 241, 0.86); }
.do-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.do-credit { font-size: 12px; color: var(--ink-soft); max-width: 46ch; }
.do-credit a { color: inherit; text-underline-offset: 3px; }
.do-nav { display: flex; gap: 8px; flex: none; }
.do-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--field-line); transition: background-color 150ms ease-out, opacity 150ms ease-out, scale 160ms ease-out;
}
.do-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.do-btn:active { scale: 0.96; }
.do-btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .do-btn:not(:disabled):hover { background: var(--cloud); } }

/* splits: shorter, the copy aligned to the page column, the three features in a row under it */
@media (min-width: 900px) {
  .split { min-height: 0; grid-template-rows: clamp(500px, 44vw, 620px); }
  .split-copy { padding-block: clamp(40px, 4vw, 64px); }
  .split:not(.split--flip) .split-copy { padding-left: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
  .split--flip .split-copy { padding-right: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
}
.split-copy > .h2 { font-size: clamp(38px, 3.8vw, 58px); }
.feats { grid-template-columns: minmax(0, 1fr); gap: 18px 22px; margin: 14px 0 4px; width: 100%; }
@media (min-width: 640px) {
  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feats li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; align-content: start; }
  .feats .ic { grid-row: auto; margin-bottom: 8px; }
}
.feats strong { font-size: 14px; }
.feats span { font-size: 13px; line-height: 1.45; }
/* the photo side: darkened as a whole, so the line over it reads on a busy picture like the wall */
.split-over { inset: 0; top: 0; align-content: end; background: linear-gradient(to top, rgba(37, 49, 42, 0.86), rgba(37, 49, 42, 0.38) 60%, rgba(37, 49, 42, 0.22)); }
.split-over .over-big { font-size: clamp(30px, 3vw, 46px); max-width: 16ch; }
.orchard::before, .stay::before, .facts::before { content: none; }

/* the close, after Elsewhere's "Plan your trip": a photo panel, the offer on the left, the form on the right */
.stay { background: none; padding: 0 var(--pad) clamp(56px, 6vw, 96px); color: var(--sun); }
.stay-panel {
  position: relative; max-width: calc(var(--max) - var(--pad) * 2); margin: 0 auto; display: grid; gap: 36px; padding: clamp(28px, 4.5vw, 64px);
  background: linear-gradient(90deg, rgba(37, 49, 42, 0.9), rgba(37, 49, 42, 0.62) 55%, rgba(37, 49, 42, 0.78)), url("photo/view.jpg") center / cover;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.stay-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("texture/grain.png") 0 0 / 256px 256px; mix-blend-mode: overlay; opacity: 0.3; }
.stay-panel > * { position: relative; z-index: 1; }
.stay-copy { display: flex; flex-direction: column; gap: 16px; }
.stay-copy .h2 { color: var(--sun); font-size: clamp(44px, 5vw, 76px); }
.stay-intro { margin: 0; max-width: 34ch; color: var(--on-dark-soft); }
.stay-facts { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 12px; }
.stay-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; font-size: 14px; color: var(--on-dark-soft); max-width: 46ch; }
.stay-facts .ic { width: 38px; height: 38px; padding: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.3); color: var(--sun); }
.stay-facts strong { display: block; font-size: 15px; color: var(--sun); margin-bottom: 2px; }
.stay-facts a { color: var(--sun); text-decoration: none; }
.stay-form { padding: clamp(20px, 2.4vw, 32px); background: rgba(37, 49, 42, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#book { gap: 14px; max-width: none; }
.stay-form .f input, .stay-form .f select, .stay-form .f textarea { background: rgba(243, 238, 231, 0.08); min-height: 46px; }
.stay-form .f textarea { min-height: 76px; }
@media (min-width: 960px) { .stay-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; } }
@media (prefers-reduced-transparency: reduce) { .stay-form { background: #2E3B33; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.stay-panel { background: linear-gradient(90deg, rgba(37, 49, 42, 0.94), rgba(37, 49, 42, 0.86) 45%, rgba(37, 49, 42, 0.6) 70%, rgba(37, 49, 42, 0.78)), url("photo/view.jpg") center / cover; }
/* phones: the rooms swipe sideways instead of stacking four tall cards */
@media (max-width: 639px) {
  .room-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 6px; }
  .room-grid::-webkit-scrollbar { display: none; }
  .room { scroll-snap-align: start; }
}

/* ---------- the hero's load-in ----------
   The sky settles from a slight zoom, the rocks and the bridge rise in front of it, then ROCK and INN rise in turn,
   the line and the buttons follow, and the strip and the card come last. Every move uses the individual translate and
   scale properties, so it never fights the transform the scroll script writes on the planes. backwards fill only, so
   nothing holds an effect after it ends (the ghost button's blur needs that). */
@media (prefers-reduced-motion: no-preference) {
  .hp-sky { animation: hero-sky 1500ms var(--ease-out) backwards; }
  .hp-front { animation: hero-front 1300ms var(--ease-out) 120ms backwards; }
  .hero-name .nm { animation: hero-rise 900ms var(--ease-out) backwards; }
  .hero-name .nm:nth-of-type(1) { animation-delay: 380ms; }
  .hero-name .nm:nth-of-type(2) { animation-delay: 520ms; }
  .hero-sub { animation: hero-up 700ms var(--ease-out) 760ms backwards; }
  .hero-acts { animation: hero-up 700ms var(--ease-out) 860ms backwards; }
  .hero-foot li { animation: hero-up 600ms var(--ease-out) backwards; }
  .hero-foot li:nth-child(1) { animation-delay: 1000ms; }
  .hero-foot li:nth-child(2) { animation-delay: 1080ms; }
  .hero-foot li:nth-child(3) { animation-delay: 1160ms; }
  .hero-card { animation: hero-card 800ms var(--ease-out) 1100ms backwards; }
  .top { animation: hero-top 600ms var(--ease-out) 200ms backwards; }
}
@keyframes hero-sky { from { opacity: 0; scale: 1.08; } }
@keyframes hero-front { from { opacity: 0; translate: 0 48px; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 0.32em; } }
@keyframes hero-up { from { opacity: 0; translate: 0 18px; } }
@keyframes hero-card { from { opacity: 0; translate: 24px 0; } }
@keyframes hero-top { from { opacity: 0; translate: 0 -12px; } }

/* ---------- no cut corners: plain rounded corners everywhere, as the references ---------- */
:root { --radius: 14px; --radius-lg: 18px; }
.ph { clip-path: none; border-radius: var(--radius); }
.split-photo .ph { border-radius: 0; }
.karst-frame, .stay-panel { clip-path: none; }
.stay-panel { border-radius: 22px; overflow: hidden; }
@media (min-width: 1360px) {
  .hero-card { clip-path: none; border-radius: 18px; }
  .hero-card img { clip-path: none; border-radius: 12px; }
  .hero-card-go { border-radius: 50%; }
}

/* rooms, after CozyNest's house cards: a shorter photo, the name and details on paper below it, price and the ask at the foot */
.room { border-radius: var(--radius-lg); overflow: hidden; align-content: start; }
.room .ph { border-radius: 0; }
.room .m { --ar: 4 / 3; }
.room-over { position: static; aspect-ratio: auto; background: none; color: var(--ink); padding: 18px 18px 4px; gap: 6px; pointer-events: auto; }
.room-name { font-size: 27px; }
.room-line { color: var(--ink-soft); font-size: 14px; align-items: flex-start; }
.room-line .ic { margin-top: 2px; }
.room-foot { margin-top: auto; padding: 12px 18px 18px; border-top: 0; }
.room .ask { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--action); color: var(--sun); font-size: 14px; }
.room .ask::after { content: " \2192"; margin-left: 6px; }
@media (hover: hover) and (pointer: fine) { .room .ask:hover { background: var(--action-hover); color: var(--sun); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-name .nm:not(.nm--inn) { animation-delay: 380ms; }
  .hero-name .nm--inn { animation-delay: 540ms; }
}
.room-rate { white-space: nowrap; }
.room-rate strong { font-size: 22px; }
.room .ask { padding: 0 14px; }
.room { display: flex; flex-direction: column; }
.room-foot { margin-top: auto; }

/* ---------- room cards open the room dialog ---------- */
.room-peek { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.peek-tag {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(250, 247, 241, 0.92); color: var(--ink);
  font-size: 13px; font-weight: 600; opacity: 0; translate: 0 6px; transition: opacity 180ms ease-out, translate 180ms ease-out;
}
@media (hover: hover) and (pointer: fine) { .room-peek:hover .peek-tag { opacity: 1; translate: 0 0; } }
.room-peek:focus-visible .peek-tag { opacity: 1; translate: 0 0; }
@media (hover: none) { .peek-tag { opacity: 1; translate: 0 0; } }

/* rooms on a mouse: at rest the card is the whole photo with only the name and guests over a soft scrim;
   on hover the photo pulls in to an inset frame and the name, price and the ask sit on paper below it.
   Touch screens keep the stacked card above, so nothing hides behind a hover that never comes. */
@media (hover: hover) and (pointer: fine) {
  .room { --zone: 132px; --foot: 62px; position: relative; }
  .room .m { --ar: 3 / 4; }
  .room-peek { clip-path: inset(0 0 0 0 round 0); }
  .room-peek::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(20, 27, 23, 0.78) 0%, rgba(20, 27, 23, 0.32) 26%, rgba(20, 27, 23, 0) 48%);
  }
  .peek-tag {
    left: auto; right: 20px; bottom: auto; top: 20px; z-index: 1; translate: 0 -6px;
    background: rgba(250, 247, 241, 0.16); color: var(--sun); box-shadow: inset 0 0 0 1px rgba(250, 247, 241, 0.34);
    -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  }
  .room-over { position: absolute; top: auto; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 18px 18px; color: var(--sun); pointer-events: none; }
  .room-over .room-line { color: rgba(250, 247, 241, 0.82); }
  .room-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 0 18px 16px; flex-wrap: wrap; row-gap: 10px; opacity: 0; translate: 0 8px; pointer-events: none; }
  .room-foot .ask { margin-left: auto; }
  .room .ask { pointer-events: none; }
  .room:is(:hover, :has(:focus-visible)) .room-peek { clip-path: inset(8px 8px var(--zone) 8px round 12px); }
  .room:is(:hover, :has(:focus-visible)) .room-peek::after { opacity: 0; }
  .room:is(:hover, :has(:focus-visible)) .peek-tag { opacity: 1; translate: 0 0; }
  .room:is(:hover, :has(:focus-visible)) .room-over { color: var(--ink); translate: 0 calc(var(--foot) * -1); }
  .room:is(:hover, :has(:focus-visible)) .room-over .room-line { color: var(--ink-soft); }
  .room:is(:hover, :has(:focus-visible)) .room-foot { opacity: 1; translate: 0 0; }
  .room:is(:hover, :has(:focus-visible)) .ask { pointer-events: auto; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .room-peek { transition: clip-path 460ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .room-peek::after { transition: opacity 300ms ease-out; }
  .room-over { transition: translate 460ms cubic-bezier(0.2, 0.7, 0.2, 1), color 300ms ease-out; }
  .room-over .room-line { transition: color 300ms ease-out; }
  .room-foot { transition: opacity 260ms ease-out 120ms, translate 360ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .room-foot, .peek-tag { translate: 0 0; }
}
.room-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 26px; }
.room-more p { max-width: 70ch; font-size: 15px; color: var(--ink-soft); }

/* the dialog */
.rooms-dlg { width: min(1180px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 0; border: 0; border-radius: 22px; background: var(--paper); color: var(--ink); overflow: auto; }
.rooms-dlg::backdrop { background: rgba(37, 49, 42, 0.62); }
.rd { padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 18px; }
.rd-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rd-body { display: grid; gap: 22px; }
.rd-view { overflow: hidden; border-radius: 16px; background: var(--slot); aspect-ratio: 16 / 10; }
.rd-video { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.74) sepia(0.12) contrast(1.03); }
.rd-detail { display: grid; gap: 14px; margin-top: 16px; }
.rd-name { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.05; }
.rd-meta { color: var(--ink-soft); font-size: 15px; margin-top: 4px; }
.rd-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rd-facts li { padding: 6px 12px; border-radius: 999px; background: var(--cloud); font-size: 13px; }
.rd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.rd-foot .sample { display: inline; margin-left: 8px; font-size: 12px; }
.rd-ask { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--action); color: var(--sun); font-size: 14px; }
.rd-ask::after { content: " \2192"; margin-left: 6px; }
.rd-list { list-style: none; padding: 0; display: grid; gap: 8px; align-content: start; }
.rd-item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 8px 14px 8px 8px;
  border: 0; border-radius: 14px; background: none; color: inherit; text-align: left; cursor: pointer; transition: background-color 150ms ease-out;
}
.rd-item img { width: 64px; height: 48px; object-fit: cover; border-radius: 9px; filter: saturate(0.74) sepia(0.12); }
.rd-item strong { display: block; font-size: 15px; }
.rd-item small { display: block; font-size: 12.5px; color: var(--ink-soft); }
.rd-item em { font-style: normal; font-family: var(--serif); font-weight: 600; font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .rd-item:hover { background: var(--sky); } }
.rd-item[aria-pressed="true"] { background: var(--gap); color: var(--sun); }
.rd-item[aria-pressed="true"] small { color: var(--on-dark-soft); }
@media (min-width: 900px) { .rd-body { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
@media (max-width: 899px) {
  .rd-list { grid-auto-flow: column; grid-auto-columns: minmax(220px, 70%); overflow-x: auto; order: -1; scrollbar-width: none; }
  .rd-list::-webkit-scrollbar { display: none; }
}

/* ---------- proof: three sample quotes ---------- */
.quotes { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quotes li { display: grid; gap: 18px; align-content: space-between; padding: 28px 26px; border-radius: var(--radius-lg); background: var(--paper); }
.quotes blockquote { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.25; }
.quotes .who { font-size: 14px; color: var(--ink-soft); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag { padding: 3px 9px; border-radius: 999px; background: var(--cloud); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- finding us: directions beside a drawn map ---------- */
.find { display: grid; gap: 32px; align-items: center; }
.find-copy { display: flex; flex-direction: column; gap: 16px; }
.find-copy > p { color: var(--ink-soft); }
.route { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 6px; }
.route li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.route .ic { width: 40px; height: 40px; padding: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--field-line); }
.route strong { display: block; font-size: 15px; }
.route span { font-size: 14px; color: var(--ink-soft); }
.find-call { font-size: 14px; }
.find-call a { color: var(--ink); font-weight: 600; }
.find-call .sample { display: inline; }
.find-map { margin: 0; border-radius: 22px; overflow: hidden; background: var(--paper) url("texture/topo-dark.svg") center / cover; }
.find-map svg { display: block; width: 100%; height: auto; font-family: var(--sans); }
.m-road { fill: none; stroke: var(--gap); stroke-width: 14; stroke-linecap: round; }
.m-road-in { fill: none; stroke: var(--paper); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 14; }
.m-span { fill: none; stroke: var(--plank-deep); stroke-width: 2; stroke-dasharray: 3 6; }
.m-dirt { fill: none; stroke: var(--bark); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 7; }
.m-inn circle { fill: var(--gap); } .m-inn path { fill: var(--sun); }
.m-town circle { fill: var(--paper); stroke: var(--gap); stroke-width: 3; } .m-town .m-town-core { fill: var(--gap); stroke: none; }
.m-label { font-family: var(--serif); font-weight: 600; font-size: 24px; fill: var(--ink); }
.m-small, .m-dist-s { font-size: 13px; fill: var(--ink-soft); }
.m-dist { font-family: var(--serif); font-weight: 600; font-size: 30px; fill: var(--plank-deep); }
.m-road-name { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink-soft); }
.m-north path { fill: var(--ink); } .m-north text { font-size: 13px; font-weight: 700; fill: var(--ink); }
.m-note { font-size: 12px; fill: var(--ink-soft); }
@media (min-width: 900px) { .find { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; } }
.m-road { stroke-width: 12; }
.m-road-in { stroke: var(--paper); stroke-width: 1.6; stroke-dasharray: 9 9; stroke-linecap: butt; }
.m-dist { font-size: 26px; }
@media (max-width: 899px) { .rd-list { grid-auto-columns: minmax(240px, 78%); } .rd-item em { display: none; } .rd-item { grid-template-columns: 56px minmax(0, 1fr); } }
/* sample notes: readable on cream, soft cream only inside the dark bands */
.sample { color: var(--ink-soft); }
.stay .sample, .plan .sample { color: var(--on-dark-soft); }

/* footer: the inn on its hill fills the band behind dark forest; a serif line and the ask beside three columns, then the wordmark across the page */
.foot { position: relative; overflow: hidden; isolation: isolate; display: grid; padding-inline: var(--pad); gap: clamp(48px, 6vw, 88px); text-align: left; padding-top: clamp(72px, 9vw, 128px); padding-bottom: 0; background: var(--gap); background-image: none; color: rgba(250, 247, 241, 0.8); }
.foot-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: saturate(0.7) sepia(0.12) contrast(1.03); }
.foot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(37, 49, 42, 0.95) 0%, rgba(37, 49, 42, 0.88) 36%, rgba(37, 49, 42, 0.5) 62%, rgba(37, 49, 42, 0.62) 84%, rgba(37, 49, 42, 0.9) 100%);
}
.foot-in, .foot-logo, .foot-base { width: 100%; max-width: calc(var(--max) - var(--pad) * 2); margin-inline: auto; }
.foot-in { display: grid; gap: 40px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-brand { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; align-content: start; max-width: 44ch; font-size: 15px; line-height: 1.6; }
.foot-tag { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; color: var(--sun); }
.foot-brand .cta { margin-top: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 15px; }
.foot-col h3 { margin-bottom: 10px; color: var(--sun); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.foot-col a, .foot-col button { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.foot-col address { font-style: normal; line-height: 1.6; margin-bottom: 6px; }
.foot-col p { line-height: 1.5; color: rgba(250, 247, 241, 0.66); margin-bottom: 4px; max-width: 26ch; }
.foot-logo { display: block; height: auto; opacity: 0.94; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 18px 0 max(22px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(250, 247, 241, 0.16); margin-top: calc(clamp(48px, 6vw, 88px) * -0.6); font-size: 13px; color: rgba(250, 247, 241, 0.6); }
.foot-base a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sun); text-decoration: none; font-weight: 600; }
.foot-base svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .foot-col a:hover, .foot-col button:hover, .foot-base a:hover { color: var(--sun); text-decoration: underline; text-underline-offset: 4px; } }
.foot :focus-visible { outline-color: var(--sun); }
@media (max-width: 959px) {
  .foot::before { background: linear-gradient(to bottom, rgba(37, 49, 42, 0.95) 0%, rgba(37, 49, 42, 0.9) 68%, rgba(37, 49, 42, 0.62) 84%, rgba(37, 49, 42, 0.92) 100%); }
  .foot-col:last-child { grid-column: 1 / -1; }
  .foot-col:last-child p { max-width: none; }
}
@media (min-width: 960px) {
  .foot-in { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); column-gap: 48px; }
  .foot-brand { grid-column: auto; }
}

/* a modal locks the page behind it: showModal() makes the page inert but still scrollable */
html:has(dialog[open]) { overflow: hidden; }
dialog { overscroll-behavior: contain; }

/* ---------- reviews: three rows drifting in alternate directions; each row repeats itself until it is wider than the screen, so the loop never shows a gap ---------- */
.proof { max-width: none; padding-inline: 0; }
.proof .sec-head { max-width: calc(var(--max) - var(--pad) * 2); margin-inline: auto; padding-inline: 0; }
@media (max-width: 1407px) { .proof .sec-head { margin-inline: var(--pad); } }
.ticker { display: grid; gap: 16px; }
.tick { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tick-track { list-style: none; padding: 0; display: flex; gap: 16px; width: max-content; }
.rv { position: relative; overflow: hidden; flex: none; width: min(380px, 82vw); display: grid; gap: 20px; align-content: space-between; padding: 26px 26px 22px; border-radius: var(--radius-lg); background: var(--paper); }
.rv-src { position: absolute; right: -6px; top: -14px; font-family: var(--serif); font-weight: 600; font-size: 92px; line-height: 1; color: var(--ink); opacity: 0.05; pointer-events: none; white-space: nowrap; }
.rv-stars { position: relative; display: flex; gap: 4px; color: var(--gap); margin-bottom: -8px; }
.rv-stars svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.rv blockquote { position: relative; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.28; }
.rv-who { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.rv-who strong { display: block; font-size: 14px; }
.rv-who small { display: block; font-size: 12.5px; color: var(--ink-soft); }
.av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.av svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.av--a { background: var(--gap); color: var(--sun); }
.av--b { background: var(--plank); color: var(--gap); }
.av--c { background: var(--cloud); color: var(--gap); }
@media (prefers-reduced-motion: no-preference) {
  .tick--left .tick-track { animation: tick-left 70s linear infinite; }
  .tick--right .tick-track { animation: tick-right 70s linear infinite; }
  .tick--slow .tick-track { animation-duration: 84s; }
  .tick:hover .tick-track, .tick:focus-within .tick-track { animation-play-state: paused; }
}
@keyframes tick-left { from { translate: 0 0; } to { translate: calc(-50% - 8px) 0; } }
@keyframes tick-right { from { translate: calc(-50% - 8px) 0; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tick { overflow-x: auto; scrollbar-width: none; } .tick-track li[aria-hidden="true"] { display: none; } }
.find-copy .go { align-self: flex-start; }
.rv { padding-bottom: 26px; }
.rv-src { top: auto; bottom: -22px; right: -8px; font-size: 84px; opacity: 0.06; }

/* ---------- the request form, one question at a time ----------
   A tracker of the six steps (done steps can be revisited), a thin progress bar, one question per screen, answers as
   picture cards, a date pair, a counter with quick picks, chips, then a review with "Change" on every row. */
.stay-form { min-height: 560px; display: flex; flex-direction: column; }
.wiz { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.wiz-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.wiz-steps button { width: 100%; display: grid; justify-items: center; gap: 6px; padding: 4px 0; background: none; border: 0; color: var(--on-dark-soft); font-size: 12px; font-weight: 600; cursor: pointer; }
.wiz-steps button:disabled { cursor: default; opacity: 0.5; }
.wiz-dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(243, 238, 231, 0.4); }
.wiz-dot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.wiz-steps .is-done .wiz-dot { background: var(--plank); box-shadow: none; color: var(--gap); }
.wiz-steps .is-done .wiz-dot svg { opacity: 1; }
.wiz-steps [aria-current="step"] { color: var(--sun); }
.wiz-steps [aria-current="step"] .wiz-dot { background: var(--sun); box-shadow: none; }
.wiz-bar { height: 3px; border-radius: 3px; background: rgba(243, 238, 231, 0.16); overflow: hidden; }
.wiz-bar span { display: block; height: 100%; background: var(--plank); transform-origin: left; transform: scaleX(0); transition: transform 320ms var(--ease-out); }
.wiz-count { font-size: 12px; color: var(--on-dark-soft); margin: -6px 0 0; }
.wiz-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.wiz-step:not([hidden]) { animation: wiz-in 280ms var(--ease-out); }
@keyframes wiz-in { from { opacity: 0; translate: 12px 0; } }
.wiz-q { padding: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; color: var(--sun); outline: none; }
.wiz-q small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 13px; color: var(--on-dark-soft); }
.wiz-note { font-size: 14px; color: var(--on-dark-soft); min-height: 1.4em; }

/* picture cards: rooms with their photo, extras with an icon; the native input stays for keyboards and screen readers */
.pick-grid { display: grid; gap: 10px; }
.pick-grid--rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 340px; overflow-y: auto; padding: 2px; }
.pick-grid--chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pick { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(243, 238, 231, 0.07); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.18); cursor: pointer; transition: background-color 150ms ease-out, box-shadow 150ms ease-out; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick img { width: 64px; height: 48px; object-fit: cover; border-radius: 9px; filter: saturate(0.74) sepia(0.12); }
.pick-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: rgba(243, 238, 231, 0.1); color: var(--sun); }
.pick-ico .ic { width: 22px; height: 22px; }
.pick-txt strong { display: block; font-size: 14px; color: var(--sun); }
.pick-txt small { display: block; font-size: 12px; color: var(--on-dark-soft); }
.pick-tick { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--plank); color: var(--gap); opacity: 0; scale: 0.6; transition: opacity 150ms ease-out, scale 150ms ease-out; }
.pick-tick .ic { width: 12px; height: 12px; stroke-width: 3; }
@media (hover: hover) and (pointer: fine) { .pick:hover { background: rgba(243, 238, 231, 0.12); } }
.pick:has(input:checked) { background: rgba(169, 181, 154, 0.2); box-shadow: inset 0 0 0 2px var(--plank); }
.pick:has(input:checked) .pick-tick { opacity: 1; scale: 1; }
.pick:has(input:focus-visible) { outline: 2px solid var(--cloud); outline-offset: 2px; }

/* dates */
.date-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.date-card { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(243, 238, 231, 0.07); box-shadow: inset 0 0 0 1px rgba(243, 238, 231, 0.18); color: var(--on-dark-soft); font-size: 13px; font-weight: 600; }
.date-card .ic { width: 22px; height: 22px; color: var(--sun); }
.date-card input { min-height: 44px; padding: 6px 10px; border-radius: 9px; border: 1px solid rgba(243, 238, 231, 0.26); background: rgba(243, 238, 231, 0.08); color: var(--sun); font-size: 16px; }
.date-card input[aria-invalid="true"] { border-color: #F2B8A0; }

/* guests */
.counter { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 18px; border-radius: 16px; background: rgba(243, 238, 231, 0.07); }
.counter-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--sun); color: var(--gap); cursor: pointer; transition: transform 160ms ease-out; }
.counter-btn:active { transform: scale(0.95); }
.counter-btn .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.counter-val { display: grid; justify-items: center; gap: 2px; color: var(--on-dark-soft); font-size: 13px; }
.counter-val .ic { width: 22px; height: 22px; color: var(--sun); }
.counter-val input { width: 3.2ch; border: 0; background: none; color: var(--sun); text-align: center; font-family: var(--serif); font-weight: 600; font-size: 48px; line-height: 1; -moz-appearance: textfield; }
.counter-val input::-webkit-outer-spin-button, .counter-val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.quick-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 0; background: rgba(243, 238, 231, 0.1); color: var(--sun); font-size: 14px; font-weight: 600; cursor: pointer; }
.quick-btn[aria-pressed="true"] { background: var(--plank); color: var(--gap); }

/* you, and the review */
.f--light { color: var(--on-dark-soft); }
.review { display: grid; gap: 2px; margin: 0; }
.review-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(243, 238, 231, 0.14); }
.review-row dt { font-size: 13px; color: var(--on-dark-soft); }
.review-row dd { margin: 0; color: var(--sun); font-size: 15px; overflow-wrap: anywhere; }
.review-edit { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(243, 238, 231, 0.1); color: var(--sun); font-size: 12.5px; font-weight: 600; cursor: pointer; }

/* back and next */
.wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.wiz-back { min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--sun); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.wiz-next { margin-left: auto; min-width: 150px; }
.f-done:not(:empty) { background: rgba(169, 181, 154, 0.16); }
@media (max-width: 559px) {
  .pick-grid--rooms, .pick-grid--chips, .date-pair { grid-template-columns: minmax(0, 1fr); }
  .wiz-lbl { display: none; }
  .pick-grid--rooms { max-height: 380px; }
}
@media (prefers-reduced-motion: reduce) { .wiz-step:not([hidden]) { animation: none; } .wiz-bar span { transition: none; } }
.wiz-step[hidden], .wiz-nav[hidden], .wiz-steps[hidden], .wiz-bar[hidden], .wiz-back[hidden] { display: none; }

/* Scrollbars: thin moss thumb on cream, sage thumb on the dark panels */
html { --sb-thumb: rgba(79, 97, 70, 0.55); --sb-thumb-hover: var(--plank-deep); scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
*:hover { scrollbar-color: var(--sb-thumb-hover) transparent; }
.stay, .stay-panel { --sb-thumb: rgba(169, 181, 154, 0.5); --sb-thumb-hover: var(--plank); }
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
}
.pick-grid--rooms { padding-right: 8px; }

/* Wizard review pass: nav sits under the answer (no dead gap), the question breathes,
   the empty status box takes no space, review rows stack on phones. */
.wiz-nav { margin-top: 4px; }
.wiz-q { margin-bottom: 18px; }
.f-done:empty { display: none; }
.f-done:focus { outline: none; }
.wiz.is-sent .sample { display: none; }
.date-card input { cursor: pointer; color-scheme: dark; }
.date-card input::-webkit-calendar-picker-indicator { filter: invert(0.92); opacity: 0.8; cursor: pointer; }
.review-row dd { overflow-wrap: break-word; }
@media (max-width: 599px) {
  .review-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; align-items: center; }
  .review-row dt { grid-column: 1; }
  .review-row dd { grid-column: 1; }
  .review-edit { grid-column: 2; grid-row: 1 / span 2; }
}
#book.wiz { align-content: start; }
#book.wiz.is-sent { align-content: center; }
.wiz.is-sent .wiz-count, .wiz.is-sent .f-error { display: none; }

/* ---------- glass pass: the plan band, the farm numbers and the photo captions sit on blurred photographs
   as frosted panels (after the Elsewhere "Plan your trip" panel and CozyNest's stats over mist) ---------- */
.plan { background: var(--limestone); color: var(--ink); padding: clamp(20px, 2.4vw, 32px) var(--pad) 0; }
.plan-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: clamp(24px, 3vw, 36px); padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-lg); color: var(--sun); color-scheme: dark; }
.plan-panel::before { content: ""; position: absolute; inset: -12px; z-index: -2; background: url("poster/nature-garden.jpg") center 45% / cover; filter: blur(3px) saturate(0.74) sepia(0.12) contrast(1.03); }
.plan-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(37, 49, 42, 0.86) 8%, rgba(37, 49, 42, 0.56) 55%, rgba(37, 49, 42, 0.42)), linear-gradient(0deg, rgba(37, 49, 42, 0.45), rgba(37, 49, 42, 0) 60%); }
.plan-head { margin: 0; }
.plan-head p { color: rgba(243, 238, 231, 0.84); }
.bookbar { gap: 0; padding: 6px; border-radius: 20px; background: rgba(37, 49, 42, 0.34); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(250, 247, 241, 0.22), 0 18px 40px rgba(20, 28, 23, 0.22); }
.bb-f { position: relative; gap: 2px; padding: 10px 16px; border-radius: 14px; font-size: 12px; letter-spacing: 0.02em; color: rgba(243, 238, 231, 0.9); transition: background-color 150ms ease-out; }
.bb-f:focus-within, .bb-f:hover { background: rgba(250, 247, 241, 0.1); }
.bb-f input, .bb-f select { min-height: 34px; padding: 0; border: 0; border-radius: 0; background: transparent; font-weight: 600; cursor: pointer; }
.bb-f select { -webkit-appearance: none; appearance: none; padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right center / 16px no-repeat; }
.bb-f select option { background: var(--gap); color: var(--sun); }
.bb-f input::-webkit-calendar-picker-indicator { filter: invert(0.92); opacity: 0.75; cursor: pointer; }
.bb-f input:focus-visible, .bb-f select:focus-visible { outline: none; }
.bb-f:focus-within { box-shadow: inset 0 0 0 1.5px var(--plank); }
.bookbar .btn { margin: 6px; min-height: 52px; }
.bookbar-note { margin: -12px 0 0; padding-left: 16px; font-size: 12px; color: rgba(243, 238, 231, 0.7); }
.plan .hero-cap { margin-top: 14px; padding: 0 4px; border-top: 0; color: var(--ink-soft); }
.plan .hero-pause { color: var(--ink); }
@media (min-width: 900px) {
  .plan-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .bookbar { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; border-radius: 999px; }
  .bb-f { border-radius: 999px; padding: 10px 22px; }
  .bb-f + .bb-f::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(250, 247, 241, 0.2); }
  .bb-f:hover::before, .bb-f:focus-within::before, .bb-f:hover + .bb-f::before, .bb-f:focus-within + .bb-f::before { opacity: 0; }
  .bookbar .btn { grid-column: auto; padding-inline: 28px; }
  .bookbar-note { padding-left: 22px; }
}

.facts { margin: clamp(80px, 9vw, 136px) auto 0; width: calc(100% - var(--pad) * 2); max-width: calc(var(--max) - var(--pad) * 2); padding: clamp(32px, 4.4vw, 64px); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; background: var(--fern); }
.facts::before { content: ""; position: absolute; inset: -12px; height: auto; margin: 0; z-index: -2; background: url("poster/nature-gate.jpg") center 55% / cover; filter: blur(3px) saturate(0.74) sepia(0.12) contrast(1.03); }
.facts::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(37, 49, 42, 0.86) 10%, rgba(37, 49, 42, 0.66) 50%, rgba(37, 49, 42, 0.58)); }
.facts-in { max-width: none; }
.facts-head p { color: rgba(243, 238, 231, 0.84); }
.facts-list dd { color: rgba(243, 238, 231, 0.84); }
.facts-list dt { white-space: nowrap; font-size: clamp(34px, 3.2vw, 52px); }
.plan .hero-cap time { color: var(--plank-deep); }

.split-over, .split--flip .split-over { top: auto; left: clamp(14px, 2vw, 24px); right: auto; bottom: clamp(14px, 2vw, 24px); max-width: min(440px, calc(100% - 28px)); padding: clamp(18px, 2vw, 26px); border-radius: 16px; background: rgba(37, 49, 42, 0.42); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(250, 247, 241, 0.2); }

@media (prefers-reduced-transparency: reduce) {
  .bookbar, .split-over { background: rgba(37, 49, 42, 0.86); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 599px) {
  .bb-f { padding: 10px 12px; }
  .bb-f input { font-size: 15px; }
  .bb-f input::-webkit-calendar-picker-indicator { width: 14px; margin: 0; padding: 0; }
}

/* the seam: the plan rises into the hero's last screen through a mist that blurs the photo into cream,
   so the panel floats up over the rock instead of starting under a hard edge */
html.motion .plan { --mist: clamp(140px, 22svh, 240px); position: relative; z-index: 3; margin-top: calc(-1 * var(--mist)); padding-top: calc(var(--mist) * 0.42); background: linear-gradient(to bottom, rgba(243, 238, 231, 0), rgba(243, 238, 231, 0.55) calc(var(--mist) * 0.35), rgba(243, 238, 231, 0.92) calc(var(--mist) * 0.7), var(--limestone) calc(var(--mist) * 0.85)); }
html.motion .plan::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--mist); pointer-events: none; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 75%); mask-image: linear-gradient(to bottom, transparent, #000 75%); }
html.motion .plan-panel { box-shadow: 0 -8px 40px rgba(37, 49, 42, 0.18); }
.facts-title { max-width: 16ch; }
html.motion .hero-card { opacity: var(--acts, 1); }

/* rooms: a line study of the rock garden (traced from the hero's own rock layer) rises from the section's
   bottom-right corner to the page edge, faded toward the cards so it never sits behind text */
#rooms { position: relative; isolation: isolate; }
#rooms::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: calc(50% - 50vw); bottom: clamp(-72px, -5vw, -32px); width: min(980px, 78vw); aspect-ratio: 1394 / 741;
  background: url("texture/rocks-line.svg") right bottom / contain no-repeat; opacity: 0.32;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent 92%), linear-gradient(to top, #000 55%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 35%, transparent 92%), linear-gradient(to top, #000 55%, transparent); mask-composite: intersect;
}
#rooms::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); top: clamp(24px, 4vw, 60px); width: min(560px, 46vw); aspect-ratio: 1394 / 741;
  background: url("texture/rocks-line.svg") left top / contain no-repeat; opacity: 0.22; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 85%), linear-gradient(to bottom, #000 30%, transparent 90%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 30%, transparent 85%), linear-gradient(to bottom, #000 30%, transparent 90%); mask-composite: intersect;
}
@media (max-width: 899px) { #rooms::before, #rooms::after { content: none; } }

/* orchard: drawn orange trees on a slope rise from the bottom-left corner under the heading column, the trunks
   banded where the farm paints them teal; same ink and fade as the rocks in the rooms section */
#orchard { position: relative; isolation: isolate; }
#orchard::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(50% - 50vw); bottom: clamp(-96px, -6vw, -40px); width: min(760px, 52vw); aspect-ratio: 1400 / 760;
  background: url("texture/orchard-line.svg") left bottom / contain no-repeat; opacity: 0.3; transform: scaleX(-1);
  -webkit-mask-image: linear-gradient(to left, #000 45%, transparent 98%); mask-image: linear-gradient(to left, #000 45%, transparent 98%);
}
@media (max-width: 899px) { #orchard::after { content: none; } }

/* finding us: the whole section sits on a blurred area map (roads, creek and contours around the farm),
   and the sharp sketch floats on it as the readable card */
#find.find { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(80px, 9vw, 136px); padding: clamp(32px, 5vw, 72px); border-radius: var(--radius-lg); width: calc(100% - var(--pad) * 2); max-width: calc(var(--max) - var(--pad) * 2); }
#find.find::before { content: ""; position: absolute; inset: -40px; z-index: -2; background: url("texture/map-area.svg") center / cover no-repeat, url("texture/topo-dark.svg") center / 900px auto, var(--paper); filter: blur(7px); transform: scale(1.06); }
#find.find::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(250, 247, 241, 0.86) 20%, rgba(250, 247, 241, 0.55) 60%, rgba(250, 247, 241, 0.3)); }
#find .find-map { box-shadow: 0 18px 50px rgba(37, 49, 42, 0.18), 0 0 0 1px rgba(37, 49, 42, 0.06); }

/* phone pass: touch devices open the date picker on a tap, so the bar drops the icon that crowded the date;
   the map's veil goes even so no blurred road runs through the text; the booking panel fits its step;
   room tiles in the pop-up share one height */
@media (pointer: coarse) { .bb-f input::-webkit-calendar-picker-indicator { display: none; } }
@media (max-width: 899px) {
  #find.find::after { background: rgba(250, 247, 241, 0.8); }
  .stay-form { min-height: 0; }
  .rd-item { height: 100%; }
  .rd-list { padding: 4px; margin: -4px; }
}

/* touch screens: the page scrolls straight under the thumb. The hero is not pinned and its layers stay put,
   the plan panel starts below it, and nothing blurs or blends live over a moving picture (solid fills instead) */
@media (hover: none), (pointer: coarse) {
  html.motion .hero-stage { position: relative; top: auto; }
  html.motion .hero::after { content: none; }
  html.motion .hp, html.motion .hero-name { will-change: auto; }
  html.motion .plan { margin-top: 0; padding-top: clamp(20px, 2.4vw, 32px); background: var(--limestone); }
  html.motion .plan::before { content: none; }
  html.motion .plan-panel { box-shadow: none; }
  .top.is-solid { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bookbar { background: rgba(37, 49, 42, 0.62); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stay-form { background: rgba(37, 49, 42, 0.86); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn--ghost { background: #F6EBD6; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ph::after, .hero-stage::after, .stay-panel::after { display: none; }
}

/* ---------- the walk: a full-screen journey, one stop per screen, smoothed by Lenis, ending on the bridge at golden hour ---------- */
html:has(.walk[open]) { overflow: hidden; }
.walk, .walk:modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--gap); color: var(--sun); overflow: hidden;
}
.walk::backdrop { background: var(--gap); }
@media (prefers-reduced-motion: no-preference) {
  .walk[open] { animation: walk-in 520ms var(--ease-out) both; }
  @keyframes walk-in { from { opacity: 0; } }
}
.walk-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: auto; scrollbar-width: none; }
.walk-scroll::-webkit-scrollbar { display: none; }
.walk-scroll:focus { outline: none; }

.walk-back {
  position: fixed; z-index: 10; top: max(16px, env(safe-area-inset-top));
  min-height: 44px; border-radius: 999px; color: var(--sun);
  background: rgba(37, 49, 42, 0.58); box-shadow: inset 0 0 0 1px rgba(250, 247, 241, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.walk-back {
  right: max(16px, env(safe-area-inset-right));
  display: inline-flex; align-items: center; gap: 8px; padding: 0 20px 0 14px; border: 0; cursor: pointer;
  font-size: 15px; font-weight: 600; transition: background-color 150ms ease-out, transform 160ms ease-out;
}
.walk-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }
.walk-back:active { transform: scale(0.97); }
.walk-back:focus-visible { outline-color: var(--sun); }
@media (hover: hover) and (pointer: fine) { .walk-back:hover { background: rgba(37, 49, 42, 0.82); } .walk-back:hover svg { transform: translateX(-3px); } }
@media (prefers-reduced-transparency: reduce) { .walk-back { background: #2E3B33; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* the opening title card */
.walk-open {
  position: relative; min-height: 100dvh; display: grid; align-content: end; gap: clamp(14px, 2vh, 22px);
  padding: 120px var(--pad) clamp(40px, 9vh, 96px);
  background: url("texture/topo-dark.svg") center / cover, radial-gradient(120% 80% at 20% 100%, #33433A, var(--gap) 70%);
}
.walk-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plank); }
.walk-title { font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 10vw, 168px); line-height: 0.92; letter-spacing: -0.02em; max-width: 9ch; }
.walk-open .walk-intro { max-width: 46ch; font-size: clamp(17px, 1.5vw, 21px); color: var(--on-dark-soft); }
.walk-cue { display: flex; align-items: center; gap: 14px; margin-top: clamp(12px, 4vh, 40px); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-dark-soft); }
.walk-cue span { position: relative; width: 1px; height: 48px; background: rgba(250, 247, 241, 0.22); overflow: hidden; }
.walk-cue span::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--sun); }
@media (prefers-reduced-motion: no-preference) {
  .walk-cue span::after { animation: walk-cue 1.8s var(--ease-out) infinite; }
  @keyframes walk-cue { from { transform: translateY(-100%); } to { transform: translateY(250%); } }
  .walk[open] .walk-open > * { animation: walk-rise 900ms var(--ease-out) both; }
  .walk[open] .walk-open > :nth-child(2) { animation-delay: 90ms; }
  .walk[open] .walk-open > :nth-child(3) { animation-delay: 180ms; }
  .walk[open] .walk-open > :nth-child(4) { animation-delay: 300ms; }
  @keyframes walk-rise { from { opacity: 0; transform: translateY(28px); } }
}

/* the stops: each pins for a screen and a bit while its picture eases back and its caption passes */
.walk-stops { list-style: none; padding: 0; }
.ws { --ar: 16 / 9; position: relative; }
.ws-stage { position: relative; height: 100dvh; overflow: hidden; display: grid; place-items: center; padding: 84px 16px 150px; }
html.motion .ws { height: 175dvh; }
html.motion .ws-stage { position: sticky; top: 0; }
.ws-bg { position: absolute; inset: -60px; width: calc(100% + 120px); max-width: none; height: calc(100% + 120px); object-fit: cover; filter: blur(32px) saturate(0.8) brightness(0.5); }
.ws-media { position: relative; z-index: 1; width: 100%; max-height: 100%; aspect-ratio: var(--ar); border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.ws--tall .ws-media { width: auto; height: 100%; max-width: 100%; }
.ws-media .m { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #1E2823; }
.ws-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("texture/grain.png") 0 0 / 256px 256px; mix-blend-mode: overlay; opacity: 0.3; }
.ws-cap { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: clamp(24px, 5vh, 64px); display: grid; gap: 10px; }
.ws-cap h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6.4vw, 108px); line-height: 0.95; letter-spacing: -0.02em; max-width: 12ch; }
.ws-n { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plank); }
html.motion .ws-media { transform: translateY(calc((0.5 - var(--p, 0.5)) * 7vh)) scale(calc(1.06 - var(--p, 0.5) * 0.08)); will-change: transform; }
html.motion .ws-cap { opacity: var(--o, 1); transform: translateY(calc((1 - var(--o, 1)) * 32px)); }

/* wide screens: landscape footage runs edge to edge, tall pictures sit framed to the right of the caption */
@media (min-width: 900px) and (min-aspect-ratio: 1 / 1) {
  .ws:not(.ws--tall) .ws-stage { padding: 0; }
  .ws:not(.ws--tall) .ws-media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .ws:not(.ws--tall) .ws-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(20, 27, 23, 0.82), rgba(20, 27, 23, 0.25) 42%, rgba(20, 27, 23, 0) 62%), linear-gradient(to bottom, rgba(20, 27, 23, 0.45), rgba(20, 27, 23, 0) 22%); }
  html.motion .ws:not(.ws--tall) .ws-media { transform: scale(calc(1.14 - var(--p, 0.5) * 0.14)); }
  .ws--tall .ws-stage { place-items: center end; padding: 96px calc(var(--pad) + 4vw) 96px var(--pad); }
  .ws--tall .ws-media { height: min(100%, 78dvh); }
  .ws--tall .ws-cap { right: auto; max-width: 44vw; bottom: 50%; transform: translateY(50%); }
  html.motion .ws--tall .ws-cap { transform: translateY(calc(50% + (1 - var(--o, 1)) * 32px)); }
}

/* the end: the bridge at golden hour rises out of the dark, its two planes drifting apart */
.walk-end { position: relative; }
html.motion .walk-end { height: 260dvh; }
.we-stage { position: relative; height: 100dvh; overflow: hidden; }
html.motion .we-stage { position: sticky; top: 0; }
.we-sky, .we-front { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 38% 50%; }
.we-front { z-index: 1; }
@media (max-aspect-ratio: 1 / 1) { .we-sky, .we-front { object-position: 56% 50%; } }
.we-veil { position: absolute; inset: 0; z-index: 2; background: var(--gap); opacity: var(--ev, 0); pointer-events: none; }
.we-copy {
  position: absolute; z-index: 3; inset: auto 0 0; display: grid; justify-items: start; gap: clamp(10px, 1.6vh, 18px);
  padding: 30vh var(--pad) max(clamp(40px, 9vh, 96px), env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(20, 27, 23, 0.86), rgba(20, 27, 23, 0.5) 55%, rgba(20, 27, 23, 0));
}
.we-name { font-family: var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(64px, 13vw, 220px); line-height: 0.86; letter-spacing: -0.02em; }
.we-line { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 40px); line-height: 1.15; }
.we-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.we-again { background: rgba(250, 247, 241, 0.14); box-shadow: inset 0 0 0 1px rgba(250, 247, 241, 0.32); }
@media (hover: hover) and (pointer: fine) { .we-again:hover { background: rgba(250, 247, 241, 0.24); } }
html.motion .we-sky { transform: scale(calc(1.22 - var(--e, 1) * 0.22)); }
html.motion .we-front { transform: translateY(calc((1 - var(--e, 1)) * 22%)) scale(calc(1.1 - var(--e, 1) * 0.1)); }
html.motion .we-copy > * { opacity: var(--ec, 1); transform: translateY(calc((1 - var(--ec, 1)) * 40px)); }
html.motion .we-copy { opacity: min(1, calc(var(--ec, 1) * 3)); }

/* scrolled header: no bar. The sections and the walk float as frosted pills, the logo on its own, the call to action as a white one */
.top.is-solid { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.top .walk-btn { transition: background-color 220ms ease-out, box-shadow 220ms ease-out, padding 220ms ease-out; border-radius: 999px; }
.top.is-solid .walk-btn {
  padding: 0 16px; background: rgba(250, 247, 241, 0.46); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 8px 28px rgba(37, 49, 42, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
}
@media (prefers-reduced-transparency: reduce) {
  .top.is-solid .walk-btn { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* mid widths (small laptops, a browser with side panels): keep the 1440 layout instead of falling back to the tablet one.
   The pill nav shows from 960px. Below 1280 it sits in the bar's flow between the logo and the actions, with a smaller logo
   and tighter links, and the header's walk button steps aside (the walk opens from the hero and the page). */
@media (min-width: 960px) { .top-nav { display: flex; } .top-nav a { padding-inline: clamp(10px, 1.25vw, 18px); } }
@media (min-width: 960px) { .mark-logo { height: clamp(44px, calc(2.5vw + 20px), 52px); } }
@media (min-width: 960px) and (max-width: 1279px) {
  .top-nav { position: relative; left: auto; translate: none; margin-inline: auto; font-size: 14px; }
  .mark { margin-right: 0; }
}
@media (min-width: 960px) and (max-width: 1199px) { .top .walk-btn { display: none; } }
/* rooms: four across from 960px so a small laptop gets the same row as a wide screen; the name steps down to fit */
@media (min-width: 960px) {
  .room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
  .room-name { font-size: clamp(22px, 1.9vw, 27px); }
}
/* the price and the ask wrap onto two lines on a narrow four-up card instead of running off its edge */
@media (min-width: 960px) { .room-foot { flex-wrap: wrap; row-gap: 10px; } .room-foot .ask { margin-left: auto; } }
/* on a mouse, the narrower four-up card stands taller, so the photo still shows above the name, price and ask when it opens */
@media (hover: hover) and (pointer: fine) and (min-width: 960px) and (max-width: 1279px) { .room .m { --ar: 2 / 3; } }
/* four-up on a small laptop: a tighter foot so the price and "Ask" share one line */
@media (min-width: 960px) and (max-width: 1199px) {
  .room-grid .room-foot { column-gap: 8px; padding-inline: 14px; }
  .room-grid .room-rate strong { font-size: 20px; }
  .room-grid .ask { padding: 0 12px; }
  .room-grid .ask::after { margin-left: 4px; }
}