/* ==========================================================================
   Little Hooves Resort & Casino — littlehoovesrescue.com
   One stylesheet, mobile-first. Design system "Linen & Tar".
   Breakpoints: 480 / 768 / 1024 / 1200 / 1440

   CSS <-> JS state contract (JS sets exactly these names):
     Header after 80px ........ .site-header.is-scrolled
     Menu panel ............... .site-nav.is-open
     Burger ................... [aria-expanded] on .nav-toggle
     Scroll lock .............. html.is-scroll-locked
     Scroll-spy ............... .site-nav__link.is-active
     Mobile footer ............ [aria-expanded] on .site-footer__toggle
     Hero ..................... .hero__frame.is-active, [aria-current] on dots,
                                [aria-pressed] on pause
     Rooms .................... [aria-expanded] on .rooms__trigger,
                                .rooms__visual.is-active
     Horizontal strips ........ [disabled] on .strip__prev / .strip__next at the ends
     FAQ ...................... [aria-expanded]
     JS is running ............ html.js (reveals the burger; without JS the
                                footer lists are the fallback navigation)
     Reveal on scroll ......... [data-reveal] → .is-revealed
     Lightbox ................. .lightbox (+ [hidden]) → .lightbox.is-open
     Back to top .............. .back-to-top.is-visible
     Scroll sentinels ......... .sentinel--header (0–80px), .sentinel--top (0–120vh)
     Form ..................... [aria-invalid] on fields, .form__error, .form__status
   ========================================================================== */


/* ==========================================================================
   1. Fonts (@font-face, self-hosted from fonts/)
   Both families are variable. Fraunces has no Cyrillic, so the Ukrainian
   owner block in the footer is set in Manrope.
   ========================================================================== */

/* Fraunces — weight 100–900 + optical size axis */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-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: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-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;
}

/* Manrope — weight 200–800 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* ==========================================================================
   2. Design tokens (palette, type scale, spacing, surface variables)

   Contrast (WCAG 2.x, measured):
     Light surfaces                    linen   oat    oat-2
       --c-tar           text          15.16   13.14  11.49
       --c-tar-dim       text           5.99    5.61   5.21
       --c-dun-deep      text / focus   5.49    4.76   4.16  <- fails on oat-2
       --c-moss          text / chip    6.47    5.60   4.90
       --c-dun           (decor only)   2.45    2.12   1.86  <- never text
     Dark surfaces                     tar     tar-2
       --c-mist          text          14.45   12.50
       --c-mist-dim      text           8.01    7.18
       --c-dun-light     text / focus   8.84    7.65
       --c-moss          chip outline   2.34    2.03  <- fails, dun-light used
     Buttons: linen on tar 15.16 · tar on dun-light 8.84

   Rules that follow from the numbers:
     - --c-oat-2 is for borders only; accent text never sits on it.
     - Cards take --card: oat on linen sections, linen on oat sections.
     - On dark sections the Planned chip outline switches to --c-dun-light.
   ========================================================================== */

:root {
  /* Palette */
  --c-linen:      #F4EFE6;  /* main background */
  --c-oat:        #E8DFCF;  /* alternating sections */
  --c-oat-2:      #DCD1BD;  /* borders on light (not a text background) */
  --c-dun:        #B8946A;  /* fjord dun — decorative accent, NOT text on light */
  --c-dun-deep:   #7A5A34;  /* accent for text and links on light */
  --c-dun-light:  #D4B48A;  /* accent on dark */
  --c-tar:        #1C1A17;  /* dark sections, main text on light */
  --c-tar-2:      #2A2622;  /* cards on dark */
  --c-tar-dim:    rgba(28, 26, 23, .70);    /* secondary text on light */
  --c-moss:       #4A5A43;  /* secondary accent: Planned chips, icons */
  --c-barn:       #8C3B2A;  /* red barn — sparingly, never for CTAs */
  --c-mist:       #EDEAE3;  /* main text on dark */
  --c-mist-dim:   rgba(237, 234, 227, .72); /* secondary text on dark */
  --c-line:       rgba(28, 26, 23, .14);
  --c-line-dark:  rgba(212, 180, 138, .24);

  /* Type */
  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-h1: clamp(2.5rem, 5.6vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 3.8vw, 3.2rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.8rem);
  --fs-body: clamp(1rem, 1.05vw, 1.1rem);
  --fs-small: .875rem;
  --fs-eyebrow: .74rem;
  --fs-chip: .68rem;
  --fw-display: 360;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 64ch;
  --section-space: clamp(4rem, 8vw, 8rem);
  --header-h: 4rem;         /* sticky header height, used for scroll offset */
  --status-h: 2rem;         /* status bar height on one line */

  /* Shape and motion */
  --radius: 2px;            /* cards and images; buttons are square */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 200ms;
  --dur: 400ms;
  --dur-slow: 900ms;

  /* Surface variables — light (linen) by default.
     .section--oat and .section--tar override these; components only read them. */
  --bg: var(--c-linen);
  --text: var(--c-tar);
  --text-dim: var(--c-tar-dim);
  --accent: var(--c-dun-deep);
  --line: var(--c-line);
  --card: var(--c-oat);
  --chip-line: var(--c-moss);
  --chip-text: var(--c-moss);
  --mane-light: var(--c-dun);
  --mane-dark: var(--c-tar);
  --btn-bg: var(--c-tar);
  --btn-text: var(--c-linen);
}

@media (min-width: 768px) {
  :root {
    --header-h: 4.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --header-h: 5.25rem;
  }
}


/* ==========================================================================
   3. Base and reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  scrollbar-gutter: stable;
}

/* Anything hidden with the attribute stays hidden, whatever its display */
[hidden] {
  display: none !important;
}

html.is-scroll-locked {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--c-linen);
  color: var(--c-tar);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  font-synthesis-weight: none;
  /* Manrope's standard ligatures turn "(c)" into ©, which breaks legal references
     such as "Article 6(1)(c)"; display type below keeps its ligatures */
  font-variant-ligatures: no-common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Keeps the footer at the bottom of short pages */
.site-main {
  flex: 1 0 auto;
}

.site-main:focus {
  outline: none;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Headings: Fraunces, optical size follows the font size automatically */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  line-height: 1.12;
  text-wrap: balance;
}

/* Fraunces keeps its ligatures (fi, fj …) wherever it is used */
h1, h2, h3, h4,
blockquote,
.faq__trigger,
.rooms__name,
.figure-num,
.logo__mark,
.map__label--nordfjord,
.capacity caption,
.capacity td,
.site-footer__col--brand p:first-of-type {
  font-variant-ligatures: normal;
}

/* Legal h2/h3 in Manrope must not ligate either */
.legal__toc-title,
.legal__body h3 {
  font-variant-ligatures: no-common-ligatures;
}

h1 { font-size: var(--fs-h1); line-height: 1.04; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

/* Italic Fraunces: only for one or two accent words inside H1/H2 */
h1 em,
h2 em {
  font-style: italic;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--dur-fast) ease;
}

a:hover {
  color: var(--text);
}

::selection {
  background: var(--c-dun-light);
  color: var(--c-tar);
}

/* Focus: 2px accent outline, 3px offset (≥ 3:1 on every surface, see block 2) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--c-tar);
  color: var(--c-linen);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--c-linen);
  outline-color: var(--c-dun-light);
}


/* ==========================================================================
   4. Layout helpers (container, text column, section rhythm)
   Page rhythm: light → oat → dark.
   Dark sections: rescue, gaming lounge, CTA band, footer.
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.measure {
  max-width: var(--measure);
}

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-space);
  background-color: var(--bg);
  color: var(--text);
}

/* The footer is a dark surface too; its layout is in block 9 */
.site-footer {
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  color: var(--text);
}

/* Section content sits above the texture layer (block 5) */
.section > *,
.site-footer > * {
  position: relative;
  z-index: 1;
}

.section__head {
  display: grid;
  gap: 1rem;
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section__lead {
  color: var(--text-dim);
  font-size: calc(var(--fs-body) * 1.08);
}

.flow > * + * {
  margin-top: 1.1em;
}

/* Surfaces: only variables change, never component rules */
.section--linen {
  --bg: var(--c-linen);
}

.section--oat {
  --bg: var(--c-oat);
  --card: var(--c-linen);
  /* --accent stays dun-deep: 4.76:1 on oat */
}

.section--tar,
.site-footer {
  --bg: var(--c-tar);
  --text: var(--c-mist);
  --text-dim: var(--c-mist-dim);
  --accent: var(--c-dun-light);
  --line: var(--c-line-dark);
  --card: var(--c-tar-2);
  --chip-line: var(--c-dun-light);
  --chip-text: var(--c-dun-light);
  --mane-light: var(--c-dun-light);
  --mane-dark: #5A4A38;
  --btn-bg: var(--c-dun-light);
  --btn-text: var(--c-tar);
}


/* ==========================================================================
   5. Brand details (mane divider, stabbur frame, linen and tar textures)
   ========================================================================== */

/* 5.1 Mane divider — thin line with a two-tone 22×11 crescent in the middle.
   The crescent is a half-disc with an elliptical bite taken out of its base. */
.divider {
  position: relative;
  border: 0;
  height: 11px;
  margin-block: clamp(2.5rem, 5vw, 4rem);
  background:
    linear-gradient(var(--line), var(--line)) left center / calc(50% - 20px) 1px no-repeat,
    linear-gradient(var(--line), var(--line)) right center / calc(50% - 20px) 1px no-repeat;
}

.divider::after,
.mane,
.logo__mark::before,
.hero__dot::before {
  content: "";
  display: block;
  width: 22px;
  height: 11px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--mane-light) 50%, var(--mane-dark) 50%);
  /* bite = ellipse at 50% of the width and 55% of the height, so the shape scales */
  -webkit-mask: radial-gradient(ellipse 50% 55% at 50% 100%, transparent 96%, #000 100%);
  mask: radial-gradient(ellipse 50% 55% at 50% 100%, transparent 96%, #000 100%);
}

.divider::after {
  position: absolute;
  top: 0;
  left: calc(50% - 11px);
}

/* 5.2 Stabbur frame — gable-roof silhouette for accent images
   (hero, estate-main, rescue-stable, dining-bar). One per screen at most.
   Keep the key subject of the frame out of the top 12% corners. */
.frame-stabbur {
  clip-path: polygon(50% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
}

/* 5.3 Texture layer — shared pseudo-element under section content.
   Textures live on ::before (z-index 0), content is z-index 1 (block 4).
   No mix-blend-mode on containers: Safari pulls text into the blend. */
.section::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Linen: fine 3px weave, horizontal + vertical, opacity ≤ .025 */
.section--linen::before,
.section--oat::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(28, 26, 23, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(28, 26, 23, .016) 0 1px, transparent 1px 3px);
}

/* Tarred wood: vertical boards (~120px, ≤ 2% brightness difference)
   plus a 400×400 grain tile. Only the tile is filtered, never the viewport.

   Grain tile source (URL-encoded below, one SVG element per line):
     <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
       <filter id="g">
         <feTurbulence type="fractalNoise" baseFrequency=".85" numOctaves="3" stitchTiles="stitch"/>
         <feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0"/>
       </filter>
       <rect width="100%" height="100%" filter="url(#g)" opacity=".04"/>
     </svg>
   The grain opacity (.04) is set on the rect so the boards keep full strength. */
:root {
  --tar-texture:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E\
%3Cfilter id='g'%3E\
%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E\
%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E\
%3C/filter%3E\
%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.04'/%3E\
%3C/svg%3E"),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .012) 0 58px,
      transparent 58px 119px,
      rgba(0, 0, 0, .14) 119px 120px);
}

.section--tar::before,
.site-footer::before {
  background-image: var(--tar-texture);
  background-size: 400px 400px, auto;
}


/* ==========================================================================
   6. Components (buttons, eyebrow, Planned chip, cards, figures)
   ========================================================================== */

/* 6.1 Buttons — square corners. Primary: tar fill on light, dun-light on dark. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--ff-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.btn--primary {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn--primary:hover {
  background-color: transparent;
  border-color: var(--btn-bg);
  color: var(--text);
}

.btn--small {
  min-height: 2.5rem;
  padding: .55rem 1.1rem;
  font-size: .85rem;
}

/* Secondary: text link whose underline grows from left to right */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-block: .35rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
  position: relative;
}

.btn-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.btn-link:hover {
  color: var(--text);
}

.btn-link:hover::after,
.btn-link:focus-visible::after {
  transform: scaleX(1);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* 6.2 Eyebrow — 24px rule before the text */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--accent);
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: 0 0 24px;
  height: 1px;
  background: currentColor;
}

/* 6.3 Planned chip — next to project figures and planned spaces */
.chip {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border: 1px solid var(--chip-line);
  border-radius: var(--radius);
  color: var(--chip-text);
  font-family: var(--ff-body);
  font-size: var(--fs-chip);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* Inside column layouts the chip keeps its own width */
.card > .chip,
.card__body > .chip,
.section__head > .chip {
  align-self: start;
  justify-self: start;
}

/* 6.4 Project figures — Fraunces with lining, tabular numerals */
.figure-num {
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
}

/* A project figure inside running text: same size, Fraunces, a touch heavier */
p .figure-num {
  color: var(--text);
  font-size: 1.08em;
  font-weight: 460;
  line-height: inherit;
}

.capacity caption .chip {
  margin-left: .6rem;
}

.figure-label {
  color: var(--text-dim);
  font-size: var(--fs-small);
}

/* 6.5 Media — rounded 2px, fixed aspect ratios to avoid layout shift */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--card);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-21x9 { aspect-ratio: 21 / 9; }

/* 6.6 Cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text);
}

.card--filled {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--radius);
  background-color: var(--card);
}

.card__body {
  display: grid;
  gap: .5rem;
  transition: transform var(--dur-slow) var(--ease);
}

.card__title {
  font-size: var(--fs-h3);
}

.card__text {
  color: var(--text-dim);
}

/* Accent line under the card, revealed on hover */
.card--hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.75rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}

.card--hover .media img {
  transition: object-position var(--dur-slow) var(--ease);
}

/* Hover only on devices that really hover; no scale */
@media (hover: hover) and (pointer: fine) {
  .card--hover:hover .media img {
    object-position: 54% 50%;
  }

  .card--hover:hover .card__body {
    transform: translateY(-4px);
  }

  .card--hover:hover::after {
    transform: scaleX(1);
  }
}

/* 6.7 Artist's impression line and notes */
.disclaimer {
  margin-top: 1.25rem;
  color: var(--text-dim);
  font-size: .8rem;
  font-style: italic;
  line-height: 1.5;
}

.note {
  padding: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--accent);
  background-color: var(--card);
  border-radius: 0 var(--radius) var(--radius) 0;
}


/* ==========================================================================
   7. Status bar and header
   ========================================================================== */

/* 7.1 Status bar — normal flow, scrolls away, cannot be dismissed */
.status-bar {
  padding: .4rem var(--gutter);   /* one line = .4 + 1.2 + .4 = --status-h */
  background-color: var(--c-tar);
  color: var(--c-mist);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2rem;
  text-align: center;
}

/* 7.2 Header — sticky under the status bar.
   The translucent linen and blur sit on ::before: backdrop-filter on the
   header itself would become the containing block for the fixed menu panel. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--dur) ease;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(244, 239, 230, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 24px -18px rgba(28, 26, 23, .45);
}

.site-header.is-scrolled::before {
  border-bottom-color: var(--c-line);
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* 7.3 Logo — LH monogram in a circle with the mane crescent above it */
.logo {
  --logo-mark: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--text);
  text-decoration: none;
}

.logo:hover {
  color: var(--text);
}

.logo__mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 var(--logo-mark);
  width: var(--logo-mark);
  height: var(--logo-mark);
  padding-top: .45rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--ff-display);
  font-size: 1rem;
  font-weight: 420;
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  line-height: 1;
}

.logo__mark::before {
  position: absolute;
  top: .42rem;
  left: calc(50% - 7px);
  width: 14px;
  height: 7px;
}

.logo__word {
  display: none;
  font-family: var(--ff-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Below 480px only the monogram shows; the link keeps its aria-label */
@media (min-width: 480px) {
  .logo__word {
    display: inline;
  }
}

/* 7.4 Nav links — accent line under the active and hovered item */
.site-nav__link {
  position: relative;
  display: inline-block;
  color: var(--text);
  text-decoration: none;
}

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.3rem;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.site-nav__link:hover {
  color: var(--text);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* 7.5 Desktop ≥ 1200px — symmetric header: links | logo | links + CTA.
   The nav is a three-column grid; the middle column reserves the logo's
   width, and the logo is centred over it. */
@media (min-width: 1200px) {
  .site-header__inner {
    --logo-w: 13.5rem;
    display: block;
  }

  .site-header .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    justify-content: center;
    width: var(--logo-w);
    transform: translate(-50%, -50%);
  }

  .site-header .logo {
    --logo-mark: 3rem;
  }

  .site-nav {
    display: grid;
    grid-template-columns: 1fr var(--logo-w) 1fr;
    align-items: center;
    column-gap: 1.5rem;
    min-height: var(--header-h);
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }

  .site-nav__list--start {
    grid-column: 1;
    justify-self: start;
  }

  .site-nav__end {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }

  .site-nav__link {
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  .site-nav__cta {
    white-space: nowrap;
  }
}


/* ==========================================================================
   8. Mobile navigation panel (< 1200px)
   Slides in from the right, full height (full width on phones).
   Closed: visibility hidden, so nothing inside is reachable by keyboard.
   ========================================================================== */

/* 8.1 Burger — morphs into a cross when aria-expanded="true" */
.nav-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.75rem;
  margin-right: -.5rem;
  padding: .5rem;
  border: 0;
  background: none;
  color: var(--c-tar);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color var(--dur) ease;
}

/* The desktop header has no burger */
@media (min-width: 1200px) {
  .nav-toggle {
    display: none;
  }
}

/* Without JS the burger cannot work: keep its space, hide it */
html:not(.js) .nav-toggle {
  visibility: hidden;
}

.nav-toggle__icon {
  position: relative;
  width: 1.5rem;
  height: 1rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  transition: background-size var(--dur-fast) ease;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}

.nav-toggle__icon::before { top: 0; }
.nav-toggle__icon::after  { top: calc(100% - 1.5px); }

.nav-toggle[aria-expanded="true"] {
  color: var(--c-mist);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background-size: 0 1.5px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  top: calc(50% - .75px);
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  top: calc(50% - .75px);
  transform: rotate(-45deg);
}

@media (max-width: 1199.98px) {
  /* 8.2 Panel surface: tarred wood, dark-surface variables */
  .site-nav {
    --bg: var(--c-tar);
    --text: var(--c-mist);
    --text-dim: var(--c-mist-dim);
    --accent: var(--c-dun-light);
    --line: var(--c-line-dark);
    --btn-bg: var(--c-dun-light);
    --btn-text: var(--c-tar);

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: calc(var(--header-h) + 3.5rem) var(--gutter) 2.5rem;  /* room for the status bar */
    overflow-y: auto;
    overscroll-behavior: contain;
    isolation: isolate;
    background-color: var(--bg);
    color: var(--text);
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 500ms var(--ease),
      visibility 0s linear 500ms,
      box-shadow 500ms ease;
  }

  .site-nav.is-open {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform 500ms var(--ease),
      visibility 0s linear 0s,
      box-shadow 500ms ease;
  }

  /* Wood texture: same layer as .section--tar (block 5) */
  .site-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--tar-texture);
    background-size: 400px 400px, auto;
  }

  /* 8.3 Items: large Fraunces, appear one after another */
  .site-nav__end {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1 0 auto;
  }

  .site-nav__list {
    display: grid;
    gap: .35rem;
  }

  .site-nav__list--end {
    padding-top: .35rem;
    border-top: 1px solid var(--line);
  }

  .site-nav__link {
    padding-block: .3rem;
    font-family: var(--ff-display);
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    font-weight: var(--fw-display);
    font-optical-sizing: auto;
    letter-spacing: -.01em;
    line-height: 1.15;
  }

  .site-nav__link::after {
    bottom: .15rem;
  }

  .site-nav__list li,
  .site-nav__cta {
    opacity: 0;
    transform: translateX(1.5rem);
    transition: opacity 400ms ease, transform 500ms var(--ease);
  }

  .site-nav.is-open .site-nav__list li,
  .site-nav.is-open .site-nav__cta {
    opacity: 1;
    transform: none;
  }

  .site-nav.is-open .site-nav__list--start li:nth-child(1) { transition-delay: 120ms; }
  .site-nav.is-open .site-nav__list--start li:nth-child(2) { transition-delay: 170ms; }
  .site-nav.is-open .site-nav__list--start li:nth-child(3) { transition-delay: 220ms; }
  .site-nav.is-open .site-nav__list--start li:nth-child(4) { transition-delay: 270ms; }
  .site-nav.is-open .site-nav__list--end li:nth-child(1)   { transition-delay: 320ms; }
  .site-nav.is-open .site-nav__list--end li:nth-child(2)   { transition-delay: 370ms; }
  .site-nav.is-open .site-nav__list--end li:nth-child(3)   { transition-delay: 420ms; }
  .site-nav.is-open .site-nav__cta                         { transition-delay: 480ms; }

  /* The CTA lives only in the panel here: one CTA on screen at a time */
  .site-nav__cta {
    align-self: flex-start;
    margin-top: auto;
  }

  /* 8.4 Tablet: panel from the right with a dimmed page behind it */
  @media (min-width: 768px) {
    .site-nav {
      width: min(28rem, 100%);
    }

    .site-nav.is-open {
      box-shadow: 0 0 0 100vmax rgba(28, 26, 23, .45);
    }
  }
}


/* ==========================================================================
   9. Footer
   Dark surface (variables in block 4, texture in block 5).
   Phone: accordion (brand column always open). Tablet: 2 columns.
   Desktop: 4 columns. JS disables the toggles from 768px up.
   ========================================================================== */

.site-footer__inner {
  padding-block: clamp(3.5rem, 7vw, 6rem) 5rem;  /* room for the back-to-top button */
}

@media (min-width: 768px) {
  .site-footer__inner {
    padding-bottom: 2rem;
  }
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.site-footer p {
  color: var(--text-dim);
}

.site-footer a {
  color: var(--text);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a[aria-current="page"] {
  color: var(--accent);
}

.site-footer p a {
  text-decoration: underline;
  text-decoration-color: var(--line);
}

/* 9.1 Brand column */
.site-footer__col--brand {
  display: grid;
  align-content: start;
  gap: .9rem;
  padding-bottom: 2rem;
  font-size: .95rem;
}

.site-footer__col--brand .logo {
  margin-bottom: .5rem;
}

.site-footer__col--brand p:first-of-type {
  max-width: 26ch;
  color: var(--text);
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  line-height: 1.3;
}

/* 9.2 Column headings and toggles */
.site-footer__heading {
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.1rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  color: var(--accent);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

/* Plus that turns into a minus */
.site-footer__toggle::after {
  content: "";
  flex: 0 0 .75rem;
  height: .75rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: background-size var(--dur) var(--ease);
}

.site-footer__toggle[aria-expanded="true"]::after {
  background-size: 100% 1.5px, 1.5px 0;
}

/* 9.3 Panels — height animated with grid-template-rows */
.site-footer__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--dur) var(--ease),
    visibility 0s linear 0s;
}

.site-footer__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.site-footer__panel-inner > * + * {
  margin-top: 1rem;
}

.site-footer__heading:has(> [aria-expanded="false"]) + .site-footer__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}

.site-footer__list {
  display: grid;
  gap: .55rem;
  padding-bottom: 1.5rem;
  font-size: .95rem;
}

.site-footer__list--mail li {
  display: grid;
}

.site-footer__list--mail span {
  color: var(--text-dim);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.site-footer__list--mail a {
  overflow-wrap: anywhere;
}

/* 9.4 Tablet and desktop: columns, toggles become plain headings */
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
  }

  .site-footer__col--brand {
    padding-bottom: 0;
  }

  .site-footer__toggle {
    padding: 0 0 1.1rem;
    border-top: 0;
    pointer-events: none;
    cursor: default;
  }

  .site-footer__toggle::after {
    display: none;
  }

  /* Always open here, whatever the stored mobile state */
  .site-footer__heading:has(> [aria-expanded="false"]) + .site-footer__panel {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  .site-footer__list {
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr);
  }
}

/* 9.5 Bottom line */
.site-footer__bottom {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
  line-height: 1.6;
}

.site-footer__notices {
  display: grid;
  gap: .6rem;
  max-width: 72ch;
}

.badge-18 {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  margin-right: .5rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 0;
  vertical-align: middle;
}

/* Owner block */
.footer__owner {
  font-family: var(--ff-body);
}

@media (min-width: 1024px) {
  .site-footer__bottom {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }

  .footer__owner {
    text-align: right;
  }
}


/* ==========================================================================
   10. Home: hero (S1)
   Mobile: image on top (4:3), text below, not full height.
   Desktop ≥ 1024: text ≈ 45% | image ≈ 55% in the stabbur frame,
   filling the viewport under the status bar and header.
   ========================================================================== */

.hero {
  --hero-h: calc(100svh - var(--header-h) - var(--status-h));
  padding-block: .25rem 3rem;
}

.hero__inner {
  display: grid;
  gap: .9rem;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}

.hero h1 {
  line-height: 1;
}

/* Mobile: H1 and the main button must fit the first 390×664 screen,
   so the buttons come straight after the heading and the lead follows.
   Only the buttons are focusable, so keyboard order is unaffected. */
@media (max-width: 1023.98px) {
  .hero__actions    { order: 1; }
  .hero__lead       { order: 2; }
  .hero__disclaimer { order: 3; }
}

/* Phones: the status bar and the hero eyebrow wrap to two lines — keep them compact */
@media (max-width: 479.98px) {
  .status-bar {
    padding-block: .25rem;
    line-height: 1.1rem;
  }

  .hero .eyebrow {
    line-height: 1.25;
  }

  .hero__inner {
    gap: .75rem;
  }
}

.hero__lead {
  max-width: 36rem;
  color: var(--text-dim);
}

.hero__actions {
  margin-top: .1rem;
}

.hero__disclaimer {
  margin-top: .25rem;
}

/* Image column comes first on mobile */
.hero__media {
  position: relative;
  order: -1;
}

.hero__frames {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background-color: var(--card);
}

/* Crossfade: the outgoing frame keeps its zoom until it has faded out */
.hero__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}

.hero__frame.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.2s ease, visibility 0s linear 0s;
}

.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0s linear 1.2s;
}

/* Slow push-in over the time a frame is shown (7 s + 1.2 s fade) */
.hero__frame.is-active img {
  transform: scale(1.03);
  transition: transform 8.2s linear;
}

/* Controls created by JS: crescent dots and a pause button.
   Phones: compact panel over the sky, top left, below the gable cut, so it never
   covers the lodge or the horses and costs no height on the first screen.
   Desktop: in a band reserved under the image (see the 1024px block). */
.hero__controls {
  position: absolute;
  left: .5rem;
  top: calc(12% + .4rem);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .2rem;
  background-color: rgba(28, 26, 23, .8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-mist);
}

.hero__dot,
.hero__pause {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  --mane-light: var(--c-dun-light);
  --mane-dark: var(--c-mist);
}

.hero__dot:focus-visible,
.hero__pause:focus-visible {
  outline-color: var(--c-dun-light);
  outline-offset: -2px;
}

/* Inactive dots: plain mist crescent (≥ 3:1 on the panel);
   the current one turns two-tone dun */
.hero__dot::before {
  --mane-light: var(--c-mist);
  --mane-dark: var(--c-mist);
  opacity: .8;
  transition: opacity var(--dur) ease;
}

.hero__dot:hover::before {
  opacity: 1;
}

.hero__dot[aria-current="true"]::before {
  --mane-light: var(--c-dun-light);
  --mane-dark: var(--c-mist);
  opacity: 1;
}

/* Pause: two bars; when paused (aria-pressed="true") a play triangle */
.hero__pause::before {
  content: "";
  width: .7rem;
  height: .8rem;
  background:
    linear-gradient(currentColor, currentColor) left / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 2px 100% no-repeat;
}

.hero__pause[aria-pressed="true"]::before {
  width: .7rem;
  height: .8rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 0;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    min-height: var(--hero-h);
    padding-block: clamp(1.25rem, 3vh, 2.5rem);
  }

  .hero__text {
    gap: 1.1rem;
  }

  .hero h1 {
    line-height: 1.04;
  }

  .hero__actions {
    margin-top: .35rem;
  }

  .hero__media {
    order: 0;
    display: flex;
    justify-content: flex-end;
    height: calc(var(--hero-h) - 2 * clamp(1.25rem, 3vh, 2.5rem));
    max-height: 60rem;
  }

  /* The bottom 2.75rem of the column is reserved for the controls,
     with or without JS, so nothing moves when they appear */
  .hero__frames {
    aspect-ratio: 4 / 5;
    height: calc(100% - 2.75rem);
    max-width: 100%;
  }

  .hero__media {
    align-items: flex-start;
  }

  .hero__controls {
    top: auto;
    left: auto;
    right: 0;
    bottom: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--c-tar);
  }

  .hero__dot,
  .hero__pause {
    width: 2.25rem;
    height: 2.25rem;
  }

  .hero__dot:focus-visible,
  .hero__pause:focus-visible {
    outline-color: var(--c-dun-deep);
  }

  /* On linen: inactive = tar at 70 % (6:1), current = dun + tar */
  .hero__dot::before {
    --mane-light: var(--c-tar);
    --mane-dark: var(--c-tar);
    opacity: .7;
  }

  .hero__dot[aria-current="true"]::before {
    --mane-light: var(--c-dun);
    --mane-dark: var(--c-tar);
    opacity: 1;
  }
}


/* ==========================================================================
   11. Home: estate, rescue, rooms, dining (S2–S5)
   ========================================================================== */

/* Shared 12-column rhythm for editorial rows */
@media (min-width: 1024px) {
  .estate__layout,
  .dining__row,
  .dining__cellar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* 11.1 S2 Estate — sticky main image (7 cols), text (5 cols),
   detail image under the text, overlapping the main image's edge */
.estate__layout {
  display: grid;
  gap: 2rem;
}

.estate__text .eyebrow {
  margin-bottom: 1rem;
}

.estate__text h2 {
  margin-bottom: 1.5rem;
}

.estate__detail {
  width: min(55%, 18rem);
  justify-self: end;
  margin-top: -5rem;
  margin-right: .5rem;
  box-shadow: 0 0 0 .5rem var(--bg);
}

/* Below 1024 the detail overlaps the main image, and the text follows */
@media (max-width: 1023.98px) {
  .estate__text {
    order: 3;
  }
}

@media (min-width: 1024px) {
  .estate__main {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .estate__text {
    grid-column: 8 / span 5;
    grid-row: 1;
  }

  .estate__detail {
    grid-column: 7 / span 4;
    grid-row: 2;
    z-index: 2;
    width: auto;
    justify-self: stretch;
    margin-top: 2.5rem;
    margin-right: 0;
  }
}

/* Planned figures strip */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}

.figures__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .6rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.figures__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  color: var(--text-dim);
  font-size: var(--fs-small);
}

.figures__num {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 4rem);
}

.figures__unit {
  font-size: .45em;
  letter-spacing: 0;
}

@media (min-width: 1024px) {
  .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 11.2 S3 Rescue */
.rescue__wide {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.rescue__lead {
  max-width: 68ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.rescue__cards {
  display: grid;
  gap: 3rem 2rem;
  align-items: start;
}

@media (min-width: 768px) {
  .rescue__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rescue__cards > :nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .rescue__cards {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  .rescue__cards > :nth-child(1) { grid-column: 1 / span 4; }
  .rescue__cards > :nth-child(2) { grid-column: 5 / span 4; margin-top: 4rem; }
  .rescue__cards > :nth-child(3) { grid-column: 9 / span 4; margin-top: 8rem; }
}

.rescue__note {
  max-width: 48rem;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  color: var(--text);
}

.rescue__note strong {
  color: var(--accent);
}

/* 11.3 S4 Rooms — sticky visual + list (JS contract:
   [aria-expanded] on .rooms__trigger, .rooms__visual.is-active) */
.rooms__layout {
  display: grid;
  gap: 2rem;
}

.rooms__stage {
  display: none;
}

.rooms__visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms ease, visibility 0s linear 800ms;
}

.rooms__visual.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 800ms ease, visibility 0s linear 0s;
}

.rooms__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .rooms__layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }

  .rooms__stage {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    aspect-ratio: 3 / 2;
  }

  /* The sticky stage shows the main image on desktop */
  .rooms__main {
    display: none;
  }
}

.rooms__item {
  border-top: 1px solid var(--line);
}

.rooms__item:last-child {
  border-bottom: 1px solid var(--line);
}

.rooms__heading {
  font-size: inherit;
  line-height: inherit;
}

.rooms__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 1.2rem 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}

.rooms__name {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  letter-spacing: -.01em;
  line-height: 1.2;
  transition: color var(--dur-fast) ease;
}

.rooms__trigger:hover .rooms__name {
  color: var(--accent);
}

.rooms__meta {
  color: var(--text-dim);
  font-family: var(--ff-body);
  font-size: .82rem;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

/* Plus / minus (rooms list and FAQ) */
.rooms__trigger::after,
.faq__trigger::after {
  content: "";
  align-self: center;
  width: .8rem;
  height: .8rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 100% no-repeat;
  transition: background-size var(--dur) var(--ease);
}

.rooms__trigger[aria-expanded="true"]::after,
.faq__trigger[aria-expanded="true"]::after {
  background-size: 100% 1.5px, 1.5px 0;
}

.rooms__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 500ms var(--ease),
    visibility 0s linear 0s;
}

.rooms__heading:has(> [aria-expanded="false"]) + .rooms__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 500ms var(--ease),
    visibility 0s linear 500ms;
}

.rooms__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.rooms__panel-inner > * + * {
  margin-top: 1.25rem;
}

.rooms__panel-inner > :last-child {
  margin-bottom: 2rem;
}

.rooms__panel-inner > p {
  color: var(--text-dim);
}

.rooms__amenities {
  display: grid;
  gap: .4rem;
  font-size: var(--fs-small);
}

.rooms__amenities li,
.tick-list li {
  position: relative;
  padding-left: 1.4rem;
}

.rooms__amenities li::before,
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .8em;
  width: .7rem;
  height: 1px;
  background: var(--accent);
}

@media (min-width: 480px) {
  .rooms__amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

.rooms__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.rooms__facts dt {
  color: var(--text-dim);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rooms__facts dd {
  margin: .25rem 0 0;
  font-size: 1.6rem;
}

.rooms__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}

.rooms__thumb {
  display: block;
  cursor: zoom-in;
}

.rooms__thumb img {
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) ease;
}

@media (hover: hover) and (pointer: fine) {
  .rooms__thumb:hover img {
    opacity: .85;
  }
}

/* 11.4 S5 Dining */
.dining__row {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.dining__copy {
  display: grid;
  gap: .9rem;
  max-width: 34rem;
}

.dining__copy p {
  color: var(--text-dim);
}

.dining__bar-media {
  width: min(100%, 26rem);
}

@media (min-width: 1024px) {
  .dining__row--restaurant > .media { grid-column: 1 / span 7; }
  .dining__row--restaurant > .dining__copy { grid-column: 9 / span 4; }

  .dining__row--bar > .dining__copy { grid-column: 2 / span 4; grid-row: 1; }
  .dining__row--bar > .media { grid-column: 7 / span 5; grid-row: 1; width: auto; }
}

.dining__subhead {
  margin-bottom: 1.75rem;
}

.dining__dishes {
  display: grid;
  gap: 3rem 1.75rem;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.dining__dishes .card__title {
  font-size: calc(var(--fs-h3) * .9);
}

@media (min-width: 768px) {
  .dining__dishes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dining__cellar {
  display: grid;
  gap: 1.5rem;
  align-items: end;
}

.dining__chef {
  width: min(70%, 20rem);
}

@media (min-width: 1024px) {
  .dining__cellar-copy { grid-column: 1 / span 4; align-self: center; }
  .dining__chef        { grid-column: 5 / span 3; width: auto; margin-bottom: 4rem; }
  .dining__cellar-media { grid-column: 8 / span 5; }
}


/* ==========================================================================
   12. Home: lounge, spa, events (S6–S8)
   ========================================================================== */

/* 12.1 S6 Lounge */
.lounge__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.chip--strong {
  padding: .35rem .75rem;
  font-size: .74rem;
}

.lounge__wide {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.lounge__intro {
  max-width: 68ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lounge__intro p:not(.section__lead) {
  color: var(--text-dim);
}

.lounge__info {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.lounge__info .card__title {
  display: flex;
  align-items: center;
  font-size: calc(var(--fs-h3) * .85);
}

.tick-list {
  display: grid;
  gap: .5rem;
  color: var(--text-dim);
}

@media (min-width: 768px) {
  .lounge__info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 12.2 Horizontal strips (lounge, spa)
   JS contract: [disabled] on .strip__prev / .strip__next at the ends.
   Native scrolling and snapping always work; buttons need JS. */
.strip__controls {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

html:not(.js) .strip__controls {
  display: none;
}

.strip__btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--text);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.strip__btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.strip__btn:disabled {
  opacity: .35;
  cursor: default;
}

.strip__track {
  --strip-gap: 1rem;
  --strip-visible: 1.25;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--strip-visible) - 1) * var(--strip-gap) - 1px) / var(--strip-visible));
  gap: var(--strip-gap);
  margin: 0;
  padding: 0 0 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.strip__track:focus-visible {
  outline-offset: 4px;
}

.strip__item {
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .strip__track {
    --strip-gap: 1.5rem;
    --strip-visible: 2.3;
  }
}

@media (min-width: 1024px) {
  .strip__track {
    --strip-gap: 1.75rem;
    --strip-visible: 3.3;
  }
}

/* 12.3 S7 Spa */
.spa__foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--text-dim);
}

.spa__foot strong {
  color: var(--text);
  font-size: 1.15em;
}

/* 12.4 S8 Events */
.events__wide {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.events__cards {
  display: grid;
  gap: 3rem 1.75rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

@media (min-width: 768px) {
  .events__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Capacity table scrolls inside its own box on narrow screens */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.table-scroll:focus-visible {
  outline-offset: 2px;
}

.capacity {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

/* caption stays a table-caption: display:flex would move it below thead in Chrome */
.capacity caption {
  caption-side: top;
  padding-bottom: 1rem;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  text-align: left;
}

.capacity th,
.capacity td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}

.capacity thead th {
  color: var(--text-dim);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.capacity th:first-child {
  padding-left: 0;
  text-align: left;
}

.capacity tbody th {
  font-weight: 600;
}

.capacity td {
  font-family: var(--ff-display);
  font-size: 1.3rem;
  font-weight: var(--fw-display);
}

.capacity__note {
  margin-top: .75rem;
  color: var(--text-dim);
  font-size: .8rem;
}

.events__cta {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius);
  background-color: var(--card);
}

.events__cta h3 {
  margin-bottom: .5rem;
}

.events__cta p {
  max-width: 52ch;
  color: var(--text-dim);
}

.events__cta .btn {
  justify-self: start;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .events__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3rem;
  }
}


/* ==========================================================================
   13. Home: gallery, region, vision, FAQ, CTA band (S9–S13)
   ========================================================================== */

/* 13.1 S9 Gallery — bento grid, no empty cells at any width.
   Rows are sized from the container width so a cell is always 3:2
   (1 row = column width / 1.5): 3:2 images span 2×2, 4:5 span 1×2.
   Phone and tablet: 2 columns, gallery-1 and gallery-5 full width.
   Desktop: 4 columns, 5 rows (20 cells). With three 2×2, four 1×2 and two
   1×1 items the brief's spans cannot tile 4 columns exactly, so gallery-8
   (a wide landscape) takes a 2×1 panoramic cell there. */
.gallery .container {
  container-type: inline-size;
}

.gallery__grid {
  --g: .6rem;
  --cols: 2;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--g)) / var(--cols) / 1.5);
  gap: var(--g);
  grid-template-areas:
    "g1 g1"
    "g1 g1"
    "g2 g3"
    "g2 g3"
    "g8 g4"
    "g7 g4"
    "g5 g5"
    "g5 g5"
    "g6 g9"
    "g6 g9";
}

.gallery__item--1 { grid-area: g1; }
.gallery__item--2 { grid-area: g2; }
.gallery__item--3 { grid-area: g3; }
.gallery__item--4 { grid-area: g4; }
.gallery__item--5 { grid-area: g5; }
.gallery__item--6 { grid-area: g6; }
.gallery__item--7 { grid-area: g7; }
.gallery__item--8 { grid-area: g8; }
.gallery__item--9 { grid-area: g9; }

.gallery__link {
  display: block;
  height: 100%;
  cursor: zoom-in;
}

.gallery__link img {
  transition: opacity var(--dur) ease, object-position var(--dur-slow) var(--ease);
}

.gallery__item--8 img {
  object-position: 50% 60%;
}

@media (hover: hover) and (pointer: fine) {
  .gallery__link:hover img {
    opacity: .88;
  }
}

@media (min-width: 768px) {
  .gallery__grid {
    --g: .9rem;
  }
}

@media (min-width: 1024px) {
  .gallery__grid {
    --g: 1rem;
    --cols: 4;
    grid-template-areas:
      "g1 g1 g2 g3"
      "g1 g1 g2 g3"
      "g4 g7 g8 g8"
      "g5 g5 g6 g9"
      "g5 g5 g6 g9";
  }
}

/* 13.2 S10 Region */
.region__cards {
  display: grid;
  gap: 2.5rem 1.5rem;
}

@media (min-width: 600px) {
  .region__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .region__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .region__cards .card__title {
    font-size: calc(var(--fs-h3) * .85);
  }
}

.region__travel {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

@media (min-width: 1024px) {
  .region__travel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(2rem, 5vw, 5rem);
  }
}

.region__caption {
  margin-top: .6rem;
  color: var(--text-dim);
  font-size: .8rem;
  font-style: italic;
}

.region__getting {
  display: grid;
  gap: 1rem;
}

.region__getting p {
  color: var(--text-dim);
}

/* Map labels — HTML text over a map drawn without text.
   Each label is anchored by its dot at (--x, --y), in % of the image. */
.map__labels {
  position: absolute;
  inset: 0;
  margin: 0;
}

.map__label {
  --dot: 8px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .5rem;
  border-radius: var(--radius);
  background-color: rgba(244, 239, 230, .92);
  color: var(--c-tar);
  font-size: clamp(.64rem, 1.6vw, .78rem);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  /* dot centre on the anchor point */
  transform: translate(calc(-.5rem - var(--dot) / 2), -50%);
}

.map__label::before {
  content: "";
  flex: 0 0 var(--dot);
  width: var(--dot);
  height: var(--dot);
  border: 2px solid var(--c-linen);
  border-radius: 50%;
  background-color: var(--c-tar);
  box-shadow: 0 0 0 1px var(--c-tar);
}

/* Label text to the left of the dot */
.map__label--alesund {
  --x: 56%;
  --y: 20%;
  flex-direction: row-reverse;
  transform: translate(calc(-100% + .5rem + var(--dot) / 2), -50%);
}

/* Region name: no dot, set over the sea */
.map__label--nordfjord {
  --x: 12%;
  --y: 47%;
  padding: .15rem .5rem;
  background-color: rgba(28, 26, 23, .78);
  color: var(--c-mist);
  font-family: var(--ff-display);
  font-size: clamp(.8rem, 2vw, 1.05rem);
  font-style: italic;
  font-weight: 400;
  transform: translate(0, -50%);
}

.map__label--nordfjord::before {
  display: none;
}

.map__label--project {
  --x: 46%;
  --y: 49%;
  max-width: min(12rem, 48%);
  white-space: normal;
}

.map__label--project::before {
  background-color: var(--c-barn);
  box-shadow: 0 0 0 1px var(--c-barn), 0 0 0 5px rgba(140, 59, 42, .25);
}

.map__label--bergen {
  --x: 31%;
  --y: 86%;
}

/* 13.3 S11 Vision */
.vision__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.vision__text h2 {
  margin: 1rem 0 1.5rem;
}

.vision__text .flow {
  max-width: var(--measure);
  color: var(--text-dim);
}

.vision__quote {
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  margin: 0;
  padding-block: 2rem;
  border-block: 1px solid var(--line);
}

.vision__quote blockquote {
  margin: 0;
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-style: italic;
  font-weight: 340;
  font-optical-sizing: auto;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.vision__quote figcaption {
  color: var(--text-dim);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .vision__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* 13.4 S12 FAQ — same accordion pattern as the rooms list (block 11.3) */
.faq__inner {
  display: grid;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .faq__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .faq__head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.faq__item {
  border-top: 1px solid var(--line);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq__heading {
  font-size: inherit;
  line-height: inherit;
}

.faq__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.25rem 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  line-height: 1.3;
  text-align: left;
  transition: color var(--dur-fast) ease;
}

.faq__trigger:hover {
  color: var(--accent);
}

.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows 450ms var(--ease),
    visibility 0s linear 0s;
}

.faq__heading:has(> [aria-expanded="false"]) + .faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 450ms var(--ease),
    visibility 0s linear 450ms;
}

.faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__panel-inner p {
  max-width: var(--measure);
  padding-bottom: 1.5rem;
  color: var(--text-dim);
}

/* 13.5 S13 CTA band — photo background with a tar gradient.
   Contrast measured on the brightest pixels under the text (see report). */
.cta-band {
  display: grid;
  align-items: center;
  min-height: clamp(26rem, 60vw, 38rem);
  padding-block: clamp(4.5rem, 10vw, 8rem);
}

.cta-band .cta-band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* The gradient replaces the wood texture and sits between image and text */
.cta-band::before {
  z-index: 1;
  background-image: linear-gradient(0deg, rgba(28, 26, 23, .86) 0%, rgba(28, 26, 23, .62) 100%);
  background-size: auto;
}

.cta-band .cta-band__inner {
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 1.1rem;
}

.cta-band h2 {
  max-width: 16ch;
}

.cta-band__note {
  color: var(--text-dim);
  font-size: 1.05rem;
}

.cta-band .btn {
  margin-top: .75rem;
}

@media (min-width: 768px) {
  .cta-band::before {
    background-image: linear-gradient(90deg,
      rgba(28, 26, 23, .92) 0%,
      rgba(28, 26, 23, .82) 38%,
      rgba(28, 26, 23, .35) 68%,
      rgba(28, 26, 23, .1) 100%);
  }
}


/* ==========================================================================
   14. Contact page and interest-list form (S14)
   ========================================================================== */

/* 14.1 Page head and breadcrumbs (shared with legal pages) */
.page-head {
  padding-top: clamp(2rem, 5vw, 4rem);
}

.breadcrumbs ol {
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  margin: 0 0 1.5rem;
  color: var(--text-dim);
  font-size: .82rem;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: .5rem;
  color: var(--line);
}

.breadcrumbs a {
  color: var(--text-dim);
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text);
}

/* 14.2 Contact layout */
.contact__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}

.contact__intro {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.contact__intro > p:not(.eyebrow):not(.section__lead) {
  color: var(--text-dim);
}

.contact__panel {
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 1024px) {
  .contact__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

/* 14.3 Contacts, region and map below the form */
.contact-more__inner {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

.contact-more__col {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.contact-list {
  margin: .5rem 0 0;
}

.contact-list div {
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}

.contact-list div:first-child {
  border-top: 1px solid var(--line);
}

.contact-list dt {
  color: var(--text-dim);
  font-size: .85rem;
}

.contact-list dd {
  margin: .15rem 0 0;
  font-size: 1.05rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.contact-more__col > p:not(.eyebrow) {
  color: var(--text-dim);
}

.contact-more .region__map {
  margin: .75rem 0 .5rem;
}

@media (min-width: 1024px) {
  .contact-more__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(3rem, 6vw, 6rem);
  }
}

/* 14.4 Form — input borders ≥ 3:1 against oat and linen */
.form {
  display: grid;
  gap: 1.25rem;
}

.form__field {
  display: grid;
  gap: .4rem;
}

.form__field > label {
  font-size: .9rem;
  font-weight: 600;
}

.form input[type="text"],
.form input[type="email"],
.form select {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .9rem;
  border: 1px solid rgba(28, 26, 23, .62);   /* ≥ 3:1 against linen and oat */
  border-radius: 0;
  background-color: var(--c-linen);
  color: var(--c-tar);
  font-size: 1rem;
  transition: border-color var(--dur-fast) ease;
}

.form input:hover,
.form select:hover {
  border-color: var(--c-tar);
}

.form select {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
  /* chevron drawn with two gradients */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-tar) 50%),
    linear-gradient(135deg, var(--c-tar) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) 50%,
    calc(100% - .95rem) 50%;
  background-size: .32rem .32rem;
  background-repeat: no-repeat;
}

.form__field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
}

.form__field--check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: .2rem 0 0;
  accent-color: var(--c-tar);
}

.form__field--check label {
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.55;
}

/* Error state and messages (messages are created by JS) */
.form [aria-invalid="true"] {
  border-color: var(--c-barn);
  box-shadow: inset 0 0 0 1px var(--c-barn);
}

.form__error {
  grid-column: 1 / -1;
  color: var(--c-barn);
  font-size: .82rem;
  font-weight: 600;
}

.form__submit {
  justify-self: start;
  margin-top: .25rem;
}

.form__direct {
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.form__small {
  color: var(--text-dim);
  font-size: .8rem;
}


/* ==========================================================================
   15. Legal pages and 404
   ========================================================================== */

/* 15.1 Legal pages — narrow 720px column */
.legal .legal__inner {
  max-width: calc(45rem + 2 * var(--gutter));
}

.legal__header {
  display: grid;
  gap: .9rem;
  margin-bottom: 2.5rem;
}

.legal__header h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}

.legal__meta {
  color: var(--text-dim);
  font-size: .85rem;
}

.legal__toc {
  margin-bottom: 1rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  background-color: var(--card);
}

.legal__toc-title {
  margin-bottom: .75rem;
  color: var(--accent);
  font-family: var(--ff-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.4;
  text-transform: uppercase;
}

.legal__toc ol {
  margin: 0;
  padding-left: 1.4rem;
  font-size: .92rem;
  line-height: 1.5;
}

.legal__toc li + li {
  margin-top: .35rem;
}

@media (min-width: 600px) {
  .legal__toc ol {
    column-count: 2;
    column-gap: 2.5rem;
  }

  .legal__toc li {
    break-inside: avoid;
  }
}

.legal__body section {
  padding-top: 2.5rem;
}

.legal__body h2 {
  margin-bottom: .9rem;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

.legal__num {
  margin-right: .1em;
  color: var(--accent);
}

.legal__body h3 {
  margin: 1.5rem 0 .5rem;
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.legal__body p + p,
.legal__body ul + p,
.legal__body p + ul,
.legal__body .table-scroll + p,
.legal__body p + .table-scroll {
  margin-top: .9rem;
}

.legal__body ul {
  padding-left: 1.25rem;
}

.legal__body li + li {
  margin-top: .45rem;
}

.legal__body a {
  overflow-wrap: anywhere;
}

.legal code {
  padding: .1em .35em;
  border-radius: var(--radius);
  background-color: var(--card);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  overflow-wrap: anywhere;
}

.legal__table code {
  white-space: nowrap;
  overflow-wrap: normal;
}

.legal__table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.5;
}

.legal__table th,
.legal__table td {
  padding: .75rem .9rem .75rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal__table thead th {
  color: var(--text-dim);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal__table tbody th {
  font-weight: 600;
}

.legal__facts {
  margin: 0;
}

.legal__facts div {
  display: grid;
  gap: .15rem 1.5rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}

.legal__facts dt {
  color: var(--text-dim);
  font-size: .85rem;
}

.legal__facts dd {
  margin: 0;
  font-weight: 500;
}

@media (min-width: 600px) {
  .legal__facts div {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
}

.legal__related {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.legal__related ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}

/* 15.2 404 */
.not-found {
  display: grid;
  align-items: center;
  min-height: 60vh;
}

.not-found__inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  text-align: center;
}

.not-found .mane.not-found__mane {
  width: 66px;
  height: 33px;
  margin-bottom: .5rem;
}

.not-found .section__lead {
  max-width: 44ch;
}

.not-found .btn-row {
  justify-content: center;
  margin-top: .5rem;
}

.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
}


/* ==========================================================================
   16. Lightbox and back-to-top (elements created by JS)
   ========================================================================== */

/* 16.1 Scroll sentinels — strips from the page top; "scrolled past"
   means the strip has left the viewport, so jumps are never missed */
.sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  pointer-events: none;
}

.sentinel--header { height: 80px; }
.sentinel--top    { height: 120vh; }

/* 16.2 Reveal — only applied by JS to content below the first screen */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 800ms ease, transform 900ms var(--ease);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* 16.3 Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: 4.5rem 1rem 5rem;
  background-color: rgba(28, 26, 23, .94);
  color: var(--c-mist);
  opacity: 0;
  transition: opacity 300ms ease;
  --accent: var(--c-dun-light);
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: .9rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

/* Never upscaled: natural size at most, shrinks to fit the screen */
.lightbox__img {
  width: auto;
  height: auto;
  max-width: min(100%, 90vw);
  max-height: calc(100vh - 12rem);
  max-height: calc(100dvh - 12rem);
  border-radius: var(--radius);
  touch-action: pan-y;
  user-select: none;
}

.lightbox__caption {
  max-width: 60ch;
  color: var(--c-mist-dim);
  font-size: .85rem;
  text-align: center;
}

.lightbox__counter {
  position: absolute;
  top: 1.4rem;
  left: 1.25rem;
  color: var(--c-mist-dim);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--c-line-dark);
  border-radius: 0;
  background-color: rgba(28, 26, 23, .6);
  color: var(--c-mist);
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.lightbox__btn:hover {
  border-color: var(--c-dun-light);
  color: var(--c-dun-light);
}

.lightbox__close {
  top: .75rem;
  right: .75rem;
}

.lightbox__prev,
.lightbox__next {
  bottom: 1rem;
}

.lightbox__prev { left: calc(50% - 3.5rem); }
.lightbox__next { right: calc(50% - 3.5rem); }

@media (min-width: 768px) {
  .lightbox {
    padding-inline: 5.5rem;
  }

  .lightbox__prev,
  .lightbox__next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .lightbox__prev { left: 1.25rem; }
  .lightbox__next { right: 1.25rem; }
}

/* 16.4 Back to top */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--c-line-dark);
  border-radius: 0;
  background-color: var(--c-tar);
  color: var(--c-mist);
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  --accent: var(--c-dun-light);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease), visibility 0s linear 0s;
}

.back-to-top:hover {
  color: var(--c-dun-light);
}

@media (min-width: 768px) {
  .back-to-top {
    right: 1.5rem;
    bottom: 1.5rem;
  }
}

/* 16.5 Form status (created by JS after a valid submit) */
.form__status {
  padding: .8rem 1rem;
  border-left: 2px solid var(--c-moss);
  background-color: var(--c-linen);
  color: var(--c-tar);
  font-size: .88rem;
}


/* ==========================================================================
   17. Motion preferences (prefers-reduced-motion)
   ========================================================================== */

/* Switches off smooth scrolling, transitions, animations, the hero crossfade
   and the card image shift. JS also checks this query before autoplaying. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .card--hover:hover .media img {
    object-position: 50% 50%;
  }

  .card--hover:hover .card__body {
    transform: none;
  }

  .hero__frame img,
  .hero__frame.is-active img {
    transform: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}