/* ===========================================================================
   Villa Sarva — villasarva.com
   Palette "Ember" and the Reindeer identity, per the Villa Sarva design system.
   Hard rules carried over from the palette sheet:
     · Brass acts, Madder means — if a guest can click it, it is Brass (#C29A5C
       on dark, #7A5423 on light). Madder (#622619) is never interactive.
     · Aurora is earned — green and violet live in the photography only.
     · Hairlines before shadow. Shadow is firelight, never elevation.
   =========================================================================== */

/* --- 1. Fonts (self-hosted: no third-party origin, no GDPR surface) -------- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ------------------------------------------------------------ */

:root {
  /* Ember — warm dark grounds */
  --ember-900: #160E09;
  --ember-800: #2A1710;
  --ember-700: #3C2017;
  --ember-600: #50361E;
  /* Hearth — warm ink */
  --hearth-900: #2E1B12;
  --hearth-700: #6B4932;
  --hearth-500: #896F62;
  --hearth-300: #A49694;
  /* Parchment */
  --parchment-050: #F9F3E7;
  --parchment-100: #F4EAD9;
  --parchment-200: #EFE1CB;
  --parchment-400: #D2BE9E;
  /* Madder — emphasis, never interactive */
  --madder-600: #622619;
  --madder-500: #7D3220;
  --madder-300: #A85A42;
  /* Brass — the only interactive accent */
  --brass-600: #7A5423;
  --brass-500: #956B28;
  --brass-400: #9D6A32;
  --brass-300: #C29A5C;
  --brass-200: #D3B283;
  /* Night & Dusk & Snow */
  --night-800: #122953;
  --night-700: #16315D;
  --dusk-400: #555A7C;
  --dusk-200: #949EC1;
  --dusk-100: #B9C9ED;
  --snow-050: #F2F7FE;
  /* Rowan — error only */
  --rowan-600: #A3122E;
  --rowan-300: #E5A0A8;

  /* Semantic aliases — components read these, never the ramps */
  --surface-page: var(--snow-050);
  --surface-card: #FFFFFF;
  --surface-dark: var(--ember-800);
  --surface-night: var(--night-800);
  --surface-structure: var(--madder-600);
  --text-body: var(--hearth-900);
  --text-muted: var(--hearth-700);
  --text-faint: var(--hearth-500);
  --text-accent: var(--brass-600);
  --accent: var(--brass-300);
  --accent-ink: var(--ember-900);
  --border-hairline: var(--dusk-100);
  --focus-ring: var(--brass-600);

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The 2px seam between tiles is a signature of the system — keep it. */
  --seam: 2px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.75rem);
  --measure: 1360px;
  --header-h: 82px;
}

/* --- 3. Base -------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchored sections must clear the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
picture { display: block; max-width: 100%; }

img {
  height: auto;
  /* Missing or still-loading photography degrades to timber, not to white. */
  background-color: var(--ember-800);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  text-wrap: pretty;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color 140ms ease;
}
a:hover { color: var(--brass-400); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
/* Brass is legible on parchment; on the dark grounds the ring lifts to Brass 300. */
.ground-dark :focus-visible,
.ground-night :focus-visible,
.ground-madder :focus-visible,
.site-header :focus-visible {
  outline-color: var(--brass-300);
}

::selection {
  background: var(--brass-200);
  color: var(--ember-900);
}

/* --- 4. Utilities --------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--brass-300);
  color: var(--ember-900);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.5rem;
  transition: transform 160ms ease;
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--ember-900);
}

.section { padding: clamp(3.5rem, 2rem + 5vw, 5.25rem) var(--gutter); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 4.75rem); }
.wrap { max-width: var(--measure); margin-inline: auto; }
.stack { display: grid; }

.ground-page   { background: var(--surface-page); color: var(--text-body); }
.ground-dark   { background: var(--surface-dark); color: var(--parchment-200); }
.ground-night  { background: var(--surface-night); color: var(--snow-050); }
.ground-madder { background: var(--surface-structure); color: var(--parchment-050); }

/* Section rule — small caps label with a hairline running to the margin. */
.rule {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}
.rule > h2,
.rule > .rule__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}
.rule > span[aria-hidden] { flex: 1; height: 1px; }
.ground-page .rule > h2,
.ground-page .rule > .rule__label { color: var(--madder-600); }
.ground-page .rule > span[aria-hidden] { background: var(--dusk-100); }
.ground-dark .rule > h2,
.ground-dark .rule > .rule__label { color: var(--brass-300); }
.ground-dark .rule > span[aria-hidden] { background: var(--ember-600); }
.ground-night .rule > h2,
.ground-night .rule > .rule__label { color: var(--dusk-100); }
.ground-night .rule > span[aria-hidden] { background: var(--night-700); }

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-accent);
}
.ground-dark .eyebrow { color: var(--brass-300); }

/* Display type */
.display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.375rem, 1.35rem + 4.4vw, 3.625rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.125rem);
  line-height: 1.08;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 2.875rem);
  line-height: 1.08;
}
.display-sm {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  line-height: 1.12;
}

.lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 48ch;
}

.prose { font-size: 1.0625rem; line-height: 1.75; color: var(--text-muted); max-width: 52ch; }
.ground-dark .prose { color: var(--brass-200); }
.ground-night .prose { color: var(--dusk-100); }

/* --- 5. Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 1rem 1.75rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn--brass {
  background: var(--brass-300);
  color: var(--ember-900);
}
.btn--brass:hover,
.btn--brass:focus-visible { background: var(--brass-200); color: var(--ember-900); }

.btn--madder {
  /* Madder means, Brass acts — this fill is a lockup ground, and it carries a
     Brass hairline on hover so the interactive signal is still Brass. */
  background: var(--madder-600);
  color: var(--parchment-050);
}
.btn--madder:hover,
.btn--madder:focus-visible {
  background: var(--madder-500);
  color: var(--parchment-050);
  border-color: var(--brass-300);
}

.btn--ghost {
  background: transparent;
  border-color: var(--brass-500);
  color: var(--brass-200);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--brass-500);
  color: var(--ember-900);
}

.btn--sm {
  min-height: 46px;
  padding: 0.875rem 1.5rem;
  font-size: 0.75rem;
}

/* --- 6. Header ------------------------------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 1rem var(--gutter);
  min-height: var(--header-h);
  background: transparent;
  transition: background-color 240ms ease, box-shadow 240ms ease, min-height 240ms ease;
}
/* Scrim so the wordmark and nav hold over the hero photograph.
   The hero is sunlit snow, close to white under the header band, and cream text
   on it measures 1.1:1 with nothing behind it. The scrim has to stay near 0.7
   for the whole depth the header occupies, not just at the very top, or the
   12px nav links fall below 4.5:1. Measured, not guessed — see "Contrast over
   the hero" in the README for how to re-measure if the hero changes. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 240px;
  background: linear-gradient(180deg,
    rgba(22, 14, 9, 0.80) 0%,
    rgba(22, 14, 9, 0.70) 30%,
    rgba(22, 14, 9, 0.38) 62%,
    rgba(22, 14, 9, 0) 100%);
  pointer-events: none;
  transition: opacity 240ms ease;
}
.site-header.is-stuck {
  background: var(--ember-900);
  min-height: 68px;
}
.site-header.is-stuck::before { opacity: 0; }

/* The brand and the toggle sit above the mobile nav panel, which is fixed and
   comes later in the DOM — without this it would paint over both, taking the
   close button with it. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  color: var(--parchment-050);
}
.site-header.is-stuck .brand__mark { width: 38px; height: 38px; }
.brand:hover { color: var(--parchment-050); }
.brand__mark { width: 46px; height: 46px; flex: 0 0 auto; color: var(--parchment-200); }
.brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.8125rem);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--parchment-050);
}

.site-nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  margin-left: auto;
  position: relative;
  z-index: 1;
}
/* Opaque bar behind the wordmark while the panel is down. */
.site-header.is-nav-open { background: var(--ember-900); }
.site-header.is-nav-open::before { opacity: 0; }
.site-nav a {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment-200);
  font-weight: 600;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--brass-300); }
.site-nav .btn { margin-left: 0.5rem; }
.site-nav .btn:hover { color: var(--ember-900); }

.nav-toggle {
  display: none;
  margin-left: auto;
  position: relative;
  z-index: 3;
  align-items: center;
  gap: 0.625rem;
  min-height: 46px;
  padding: 0.625rem 0.25rem;
  background: none;
  border: 0;
  color: var(--parchment-200);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  display: grid;
  gap: 5px;
  width: 22px;
}
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- 7. Hero -------------------------------------------------------------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  max-height: 1080px;
  overflow: hidden;
  background: var(--ember-900);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* --- 7a. Falling snow ------------------------------------------------------
   Three fields of flakes at different depths, drifting at slightly different
   angles and speeds. No canvas, no script, no DOM node per flake: each layer is
   one element carrying a tiled field of radial-gradient dots, moved with the
   `translate` property so the whole thing composites on the GPU.

   The loop is seamless because each layer extends one tile above and below the
   hero and travels exactly one tile per cycle — the tile that was overhead ends
   up where the last one started. The wind comes from `rotate` on the layer, so
   the flakes fall straight down in local space and land at an angle on screen.

   Kept deliberately sparse. The photograph is already a snow scene; this is
   weather passing in front of it, not a snow globe. */

.snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.snow__layer {
  position: absolute;
  inset: calc(-1 * var(--tile)) -30%;
  background-repeat: repeat;
  background-size: var(--tile) var(--tile);
  animation: sarva-snow var(--speed) linear infinite;
  will-change: translate;
}

@keyframes sarva-snow {
  from { translate: 0 0; }
  to   { translate: 0 var(--tile); }
}

/* Far — small, faint, slow. Reads as depth rather than as flakes. */
.snow__layer--far {
  --tile: 170px;
  --speed: 34s;
  rotate: -7deg;
  scale: 1.25;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 47% 6%,  #fff 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 79% 31%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 26% 58%, #fff 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 91% 71%, #fff 0 1px, transparent 1.4px),
    radial-gradient(circle at 61% 86%, #fff 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 35% 38%, #fff 0 0.9px, transparent 1.3px),
    radial-gradient(circle at 5% 92%,  #fff 0 1px, transparent 1.4px);
}

/* Mid — the body of the fall. */
.snow__layer--mid {
  --tile: 230px;
  --speed: 22s;
  rotate: -10deg;
  scale: 1.25;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 22% 9%,  #fff 0 1.7px, rgba(22,14,9,0.22) 2.1px, transparent 3px),
    radial-gradient(circle at 68% 24%, #fff 0 1.5px, rgba(22,14,9,0.22) 1.9px, transparent 2.7px),
    radial-gradient(circle at 8% 47%,  #fff 0 1.6px, rgba(22,14,9,0.22) 2px, transparent 2.9px),
    radial-gradient(circle at 84% 61%, #fff 0 1.7px, rgba(22,14,9,0.22) 2.1px, transparent 3px),
    radial-gradient(circle at 41% 79%, #fff 0 1.5px, rgba(22,14,9,0.22) 1.9px, transparent 2.7px),
    radial-gradient(circle at 55% 40%, #fff 0 1.5px, rgba(22,14,9,0.22) 1.9px, transparent 2.7px),
    radial-gradient(circle at 30% 95%, #fff 0 1.6px, rgba(22,14,9,0.22) 2px, transparent 2.9px);
}

/* Near — a few larger flakes, close to the lens and quick. */
.snow__layer--near {
  --tile: 320px;
  --speed: 14s;
  rotate: -13deg;
  scale: 1.3;
  opacity: 0.7;
  background-image:
    radial-gradient(circle at 31% 14%, #fff 0 2.5px, rgba(22,14,9,0.22) 3px, transparent 4.2px),
    radial-gradient(circle at 77% 45%, #fff 0 2.3px, rgba(22,14,9,0.22) 2.8px, transparent 4px),
    radial-gradient(circle at 14% 72%, #fff 0 2.7px, rgba(22,14,9,0.22) 3.2px, transparent 4.4px),
    radial-gradient(circle at 58% 91%, #fff 0 2.3px, rgba(22,14,9,0.22) 2.8px, transparent 4px),
    radial-gradient(circle at 89% 20%, #fff 0 2.4px, rgba(22,14,9,0.22) 2.9px, transparent 4.1px),
    radial-gradient(circle at 46% 57%, #fff 0 2.2px, rgba(22,14,9,0.22) 2.7px, transparent 3.9px);
}

/* Weather is exactly the kind of drifting motion that makes people unwell.
   Asked to reduce motion, it stops falling and gets out of the way. */
@media (prefers-reduced-motion: reduce) {
  .snow { display: none; }
}

/* --- 7b. The scroll cue: reindeer tracks -----------------------------------
   A reindeer has walked down out of the frame. Four cloven prints press into
   the snow in sequence, leading the eye to the fold — and the whole trail is a
   link, so it works by keyboard and actually goes somewhere.
   Each print carries a hairline in Ember rather than a drop shadow, which is
   what keeps it legible over bright snow and over dark timber alike. */

.tracks {
  position: absolute;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 20px 8px;
  color: var(--brass-300);
  z-index: 2;
}
.tracks__print {
  display: block;
  width: 26px;
  opacity: 0;
  animation: sarva-track 3.6s cubic-bezier(0.33, 0, 0.2, 1) infinite;
}
.tracks__print svg {
  width: 100%;
  height: auto;
  overflow: visible;
  fill: currentColor;
  stroke: rgba(22, 14, 9, 0.5);
  stroke-width: 1.5;
  paint-order: stroke fill;
}

/* The gait: each print falls slightly to one side of the last, and the trail
   narrows as it walks away from you. */
.tracks__print:nth-child(2) { transform: translateX(-7px) rotate(-8deg); }
.tracks__print:nth-child(3) { transform: translateX(7px)  rotate(6deg);  width: 24px; }
.tracks__print:nth-child(4) { transform: translateX(-6px) rotate(-5deg); width: 22px; }
.tracks__print:nth-child(5) { transform: translateX(6px)  rotate(4deg);  width: 20px; }

.tracks__print:nth-child(2) { animation-delay: 0s; }
.tracks__print:nth-child(3) { animation-delay: 0.26s; }
.tracks__print:nth-child(4) { animation-delay: 0.52s; }
.tracks__print:nth-child(5) { animation-delay: 0.78s; }

@keyframes sarva-track {
  0%            { opacity: 0; }
  8%            { opacity: 1; }          /* pressed in */
  55%           { opacity: 1; }
  80%, 100%     { opacity: 0; }          /* and filled by fresh snow */
}

.tracks:hover .tracks__print,
.tracks:focus-visible .tracks__print {
  color: var(--brass-200);
  animation-play-state: paused;
  opacity: 1;
}
.tracks:focus-visible { outline-offset: 0; }

/* Standing still, the whole trail is simply there. */
@media (prefers-reduced-motion: reduce) {
  .tracks__print { opacity: 1; animation: none; }
}

/* --- 8. Opening ----------------------------------------------------------- */

.opening .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3.5rem;
  align-items: end;
}
.opening__text { display: grid; gap: 1rem; }
.opening__text h1 { max-width: 24ch; color: var(--text-body); }
.opening__aside {
  display: grid;
  gap: 0.875rem;
  justify-items: end;
  text-align: right;
}
.opening__aside p {
  font-size: 0.875rem;
  color: var(--dusk-400);
  line-height: 1.6;
  max-width: 26ch;
}

/* --- 9. Facts ------------------------------------------------------------- */

.facts .wrap { display: grid; gap: 2.75rem; }
.facts__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.facts__intro h3 { color: var(--parchment-050); max-width: 20ch; }
.facts__intro .stack { gap: 1.25rem; }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--seam);
  list-style: none;
}
.fact {
  background: var(--ember-700);
  padding: 2rem 1.875rem 2.125rem;
  display: grid;
  gap: 0.625rem;
  align-content: start;
}
.fact__figure {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--brass-300);
}
.fact__label {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-050);
  font-weight: 600;
}
.fact__note { font-size: 0.9375rem; line-height: 1.6; color: var(--brass-200); }

/* --- 10. Living ----------------------------------------------------------- */

.living .wrap { display: grid; gap: 2.25rem; }
.split-end {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
}
.split-end h2,
.split-end h3 { max-width: 22ch; }

/* The row height drives both columns, so the stacked pair on the right always
   ends level with the tall tile on the left whatever the photographs' ratios. */
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-auto-rows: 600px;
  gap: var(--seam);
}
.mosaic__lead { width: 100%; height: 100%; object-fit: cover; }
.mosaic__pair {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--seam);
}
.mosaic__pair img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }

/* --- 11. Quote ------------------------------------------------------------ */

.quote .wrap {
  max-width: 1000px;
  display: grid;
  gap: 1.625rem;
  justify-items: start;
}
.quote__mark { width: 64px; height: 64px; color: var(--brass-200); }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.625rem, 1.05rem + 2.4vw, 2.5rem);
  line-height: 1.32;
}
/* The rule lives inside the caption: a figure may only take figcaption as its
   first or last child, so a trailing sibling would be invalid. */
.quote figcaption {
  display: grid;
  gap: 1.625rem;
  justify-items: start;
  font-size: 0.9375rem;
  color: var(--dusk-100);
}
.quote__underline {
  display: block;
  height: 2px;
  width: 90px;
  background: var(--madder-300);
}

/* --- 12. Sleeping --------------------------------------------------------- */

.sleeping .wrap { display: grid; gap: 2.375rem; }
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--seam);
  list-style: none;
}
.room { margin: 0; display: grid; }
.room img { width: 100%; height: 360px; object-fit: cover; }
.room figcaption {
  background: var(--night-800);
  padding: 1.625rem 1.75rem 1.875rem;
  display: grid;
  gap: 0.5rem;
  height: 100%;
  align-content: start;
}
.room__name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--snow-050);
  line-height: 1.2;
}
.room__beds {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dusk-200);
  font-weight: 600;
}
.room__note { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.65; color: var(--dusk-100); }

/* One bedroom is not photographed yet — the interior reshoot follows the
   furnishing. The card carries the room rather than borrowing another room's
   photograph, and centring the text is what stops the gap reading as a
   missing image. Remove the modifier when the photograph exists. */
.room--plain figcaption { align-content: center; min-height: 320px; }

/* --- 13. Sauna ------------------------------------------------------------ */

.sauna {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.sauna__img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; }
.sauna__body {
  padding: clamp(3rem, 2rem + 4vw, 5.25rem) clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  display: grid;
  gap: 1.375rem;
  align-content: center;
  max-width: 720px;
}
.sauna__body h2 { color: var(--parchment-050); }

.tick-list {
  list-style: none;
  margin: 0.375rem 0 0;
  padding: 1.375rem 0 0;
  border-top: 1px solid var(--ember-600);
  display: grid;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--brass-200);
}
.tick-list li { display: flex; gap: 0.875rem; align-items: baseline; }
.tick-list li::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--brass-300);
  flex: 0 0 18px;
  transform: translateY(-4px);
}

/* --- 14. Forest ----------------------------------------------------------- */

.forest .wrap { display: grid; gap: 2.75rem; }
.forest__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 4rem;
  align-items: start;
}
.forest__body .stack { gap: 1.25rem; }

.distances {
  display: grid;
  gap: 1px;
  background: var(--night-700);
  border-top: 1px solid var(--night-700);
  border-bottom: 1px solid var(--night-700);
  list-style: none;
}
.distances li {
  background: var(--night-800);
  padding: 1.125rem 0.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: baseline;
}
.distances .place { font-size: 1.0625rem; color: var(--snow-050); }
.distances .away {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--dusk-200);
  white-space: nowrap;
}

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--seam);
}
.trio img { width: 100%; height: 300px; object-fit: cover; }

/* --- 15. Rates ------------------------------------------------------------ */

.rates .wrap { display: grid; gap: 2.5rem; }
.rates__body {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}
.rate-list { display: grid; gap: var(--seam); list-style: none; }
.rate {
  background: var(--surface-card);
  border: 1px solid var(--dusk-100);
  padding: 1.875rem 2.125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
}
.rate__season {
  display: grid;
  gap: 0.375rem;
  flex: 1 1 240px;
  min-width: 220px;
}
.rate__season b {
  font-family: var(--font-display);
  font-size: 1.6875rem;
  font-weight: 400;
  color: var(--text-body);
}
.rate__season span { font-size: 0.875rem; color: var(--dusk-400); }
.rate__min { font-size: 0.875rem; color: var(--text-muted); white-space: nowrap; }
.rate__price {
  font-family: var(--font-display);
  font-size: 2.125rem;
  color: var(--madder-500);
  line-height: 1;
  margin-left: auto;
  white-space: nowrap;
}
.rates__note {
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--dusk-400);
  max-width: 70ch;
}

.enquire-card {
  background: var(--surface-dark);
  padding: 2.75rem 2.5rem;
  display: grid;
  gap: 1.125rem;
  align-content: start;
  color: var(--parchment-200);
}
.enquire-card h3 { color: var(--parchment-050); }
.enquire-card p { font-size: 1rem; line-height: 1.7; color: var(--brass-200); }
.enquire-card .btn { width: 100%; }
.enquire-card .btn:first-of-type { margin-top: 0.375rem; }

/* --- 16. FAQ -------------------------------------------------------------- */

/* Rates and questions share the same ground; one padding between them is enough. */
.rates + .faq { padding-top: 0; }
.faq .wrap { display: grid; gap: 2.5rem; }
.faq__list {
  display: grid;
  gap: var(--seam);
  list-style: none;
}
.faq__item {
  background: var(--surface-card);
  border: 1px solid var(--dusk-100);
}
.faq__item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-body);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker { content: ''; }
.faq__item > summary:hover { color: var(--text-accent); }
/* The question is a real heading; it takes the summary's type, not the h3 default. */
.faq__q { font: inherit; margin: 0; }
.faq__sign {
  flex: 0 0 auto;
  position: relative;
  width: 14px;
  height: 14px;
  align-self: center;
}
.faq__sign::before,
.faq__sign::after {
  content: '';
  position: absolute;
  background: var(--brass-500);
  transition: transform 200ms ease, opacity 200ms ease;
}
.faq__sign::before { inset: 6px 0 auto 0; height: 1.5px; }
.faq__sign::after  { inset: 0 6px 0 auto; width: 1.5px; }
.faq__item[open] .faq__sign::after { transform: scaleY(0); opacity: 0; }
.faq__answer {
  padding: 0 1.75rem 1.75rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 78ch;
}
.faq__answer p + p { margin-top: 0.875rem; }

/* --- 17. Enquiry form ----------------------------------------------------- */

.enquire .wrap { display: grid; gap: 2.5rem; }
.enquire__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 4rem;
  align-items: start;
}
.enquire__aside { display: grid; gap: 1.25rem; align-content: start; }
.enquire__aside h2 { color: var(--parchment-050); }
.contact-list {
  list-style: none;
  display: grid;
  gap: 0.875rem;
  padding-top: 1.375rem;
  border-top: 1px solid var(--ember-600);
  font-size: 1rem;
  color: var(--brass-200);
}
.contact-list a { color: var(--brass-300); text-decoration: underline; text-underline-offset: 4px; }
.contact-list a:hover { color: var(--brass-200); }
.contact-list dt {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hearth-300);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.contact-list dd { margin: 0 0 0.875rem; }
.contact-list dd:last-child { margin-bottom: 0; }

.form {
  background: var(--ember-700);
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  display: grid;
  gap: 1.25rem;
}
.field { display: grid; gap: 0.5rem; }
.field label {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brass-200);
}
.field .hint { font-size: 0.8125rem; color: var(--hearth-300); letter-spacing: 0; text-transform: none; }
.field input,
.field select,
.field textarea {
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--parchment-050);
  background: var(--ember-900);
  border: 1px solid var(--ember-600);
  border-radius: 0;
  padding: 0.875rem 1rem;
  min-height: 50px;
  width: 100%;
  transition: border-color 150ms ease;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--hearth-300); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--brass-500); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--brass-300); }
.field input:user-invalid,
.field textarea:user-invalid { border-color: var(--rowan-600); }
/* Keep the native date/select controls legible on the dark ground. */
.field input[type='date'] { color-scheme: dark; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass-300) 50%),
                    linear-gradient(135deg, var(--brass-300) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.field select option { background: var(--ember-900); color: var(--parchment-050); }

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
}

.consent {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--brass-200);
}
.consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 3px;
  accent-color: var(--brass-300);
}
.consent a { color: var(--brass-300); text-decoration: underline; text-underline-offset: 3px; }

/* Honeypot — off-screen, never focusable, never announced. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 0.875rem 1rem;
  border-left: 2px solid var(--brass-300);
  background: rgba(194, 154, 92, 0.09);
  color: var(--brass-200);
}
.form__status[hidden] { display: none; }
.form__status--static { display: block; }
.form__status[data-state='error'] {
  border-left-color: var(--rowan-300);
  background: rgba(163, 18, 46, 0.16);
  color: var(--rowan-300);
}
.form__status[data-state='ok'] {
  border-left-color: var(--brass-300);
  color: var(--parchment-050);
}
.btn[aria-disabled='true'] { opacity: 0.6; pointer-events: none; }

/* --- 18. Footer ----------------------------------------------------------- */

.site-footer {
  background: var(--ember-900);
  padding: 4.5rem var(--gutter) 3.5rem;
  color: var(--brass-200);
}
.site-footer .wrap { display: grid; gap: 2.75rem; }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3.5rem;
  align-items: start;
}
.footer__brand { display: grid; gap: 1.125rem; justify-items: start; }
.footer__brand .brand__mark { color: var(--brass-300); }
.footer__address {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--hearth-300);
  font-style: normal;
  max-width: 36ch;
}
.footer__address a { color: var(--brass-200); }
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.875rem 4rem;
  list-style: none;
}
.footer__nav a { font-size: 0.875rem; color: var(--brass-200); }
.footer__nav a:hover { color: var(--brass-300); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ember-600);
  font-size: 0.8125rem;
  color: var(--hearth-300);
}
.footer__base a { color: var(--hearth-300); text-decoration: underline; text-underline-offset: 3px; }
.footer__base a:hover { color: var(--brass-200); }

/* --- 19. Simple document pages (privacy, 404) ----------------------------- */

.doc { padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 4.5rem)); }
.doc .wrap { max-width: 74ch; display: grid; gap: 1.5rem; }
.doc h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.625rem; margin-top: 1.5rem; }
.doc p, .doc li { font-size: 1.0625rem; line-height: 1.75; color: var(--text-muted); }
.doc ul { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.doc a { text-decoration: underline; text-underline-offset: 3px; }
/* On a document page the header has no hero to sit over. */
.site-header--solid { background: var(--ember-900); position: sticky; }
.site-header--solid::before { display: none; }

/* --- 20. Responsive ------------------------------------------------------- */

@media (max-width: 1080px) {
  .site-nav { gap: 1.125rem; }
  .site-nav a { font-size: 0.6875rem; letter-spacing: 0.14em; }
  .mosaic { grid-auto-rows: 460px; }
  .facts__intro,
  .forest__body { gap: 2.5rem; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }

  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2rem;
    background: var(--ember-900);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    max-height: 100svh;
    overflow-y: auto;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 260ms ease, visibility 260ms;
  }
  .site-nav.is-open { transform: translateY(0); visibility: visible; }

  /* Document pages carry a single CTA rather than a menu — it stays in the bar. */
  .site-nav--bare {
    position: static;
    transform: none;
    visibility: visible;
    background: none;
    padding: 0;
    margin-left: auto;
    flex-direction: row;
    max-height: none;
    overflow: visible;
  }
  .site-nav--bare .btn { margin: 0; width: auto; }

  .site-nav a:not(.btn) {
    padding: 1.125rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--ember-600);
  }
  .site-nav .btn { margin: 1.5rem 0 0; width: 100%; }

  .opening .wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .opening__aside { justify-items: start; text-align: left; }
  .opening__aside .btn { width: auto; }

  .facts__intro,
  .split-end,
  .forest__body,
  .rates__body,
  .enquire__body { grid-template-columns: minmax(0, 1fr); gap: 2rem; }

  .mosaic { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .mosaic__lead { height: clamp(260px, 55vw, 420px); }
  .mosaic__pair { grid-template-rows: auto auto; }
  .mosaic__pair img { height: clamp(180px, 34vw, 260px); }

  .sauna { grid-template-columns: minmax(0, 1fr); }
  .sauna__img { min-height: 0; height: clamp(260px, 58vw, 440px); }
  .sauna__body { max-width: none; padding-inline: var(--gutter); }

  .trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .trio img { height: clamp(160px, 28vw, 240px); }
  .trio img:first-child { grid-column: 1 / -1; height: clamp(220px, 44vw, 300px); }

  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.5rem; }
  /* Thumbs, not cursors: give the standalone links a 30px+ target. */
  .footer__nav a,
  .contact-list dd > a { display: inline-block; padding-block: 0.375rem; }
}

@media (max-width: 620px) {
  .hero { min-height: 560px; }
  .fact-grid { grid-template-columns: minmax(0, 1fr); }
  .room-grid { grid-template-columns: minmax(0, 1fr); }
  .room img { height: clamp(220px, 56vw, 320px); }

  .rate { padding: 1.5rem 1.25rem; gap: 0.875rem 1rem; }
  .rate__min { flex: 1 1 100%; text-align: left; }
  .rate__price { margin-left: 0; }

  .distances li { flex-direction: column; gap: 0.25rem; }

  .faq__item > summary { padding: 1.25rem 1.125rem; gap: 1rem; }
  .faq__answer { padding: 0 1.125rem 1.25rem; }

  .enquire-card { padding: 2rem 1.5rem; }
  .footer__base { justify-content: flex-start; }
}

@media (max-width: 400px) {
  .brand__mark { width: 36px; height: 36px; }
  /* The word goes, the button keeps its name — hidden from sight, not from
     the accessibility tree. */
  .nav-toggle [data-nav-label] {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- 21. Motion, print, forced colours ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .site-header, .tracks, .nav-toggle, .form, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .ground-dark, .ground-night, .ground-madder, .site-footer { background: #fff !important; color: #000 !important; }
  .ground-dark *, .ground-night *, .ground-madder *, .site-footer * { color: #000 !important; }
  .faq__answer { display: block !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

@media (forced-colors: active) {
  .btn { border: 1px solid currentColor; }
  .faq__sign::before, .faq__sign::after { background: currentColor; }
}