@charset "utf-8";

/* ==========================================================================
   Blue Boar Inn — one stylesheet.
   Layer order is the whole specificity strategy: nothing here needs !important.
   ========================================================================== */

@layer tokens, base, layout, components, motion, utilities;

/* --------------------------------------------------------------------------
   Fonts. Self-hosted, Latin subset, no third-party request.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer tokens {
  :root {
    /* --- Colour ---------------------------------------------------------
       Deep forest, moss, lake water, stone, warm paper, one warm accent.
       Six families, nothing else. */
    --forest-900: #0e1712;
    --forest-800: #14201a;
    --forest-700: #1d3025;
    --forest-600: #294232;
    --forest-500: #3a5942;

    --moss-500: #5d6d4e;
    --moss-400: #7d8a6b;
    --moss-300: #9ca88a;

    --lake-800: #16343a;
    --lake-700: #1f4a52;
    --lake-600: #2d6670;
    --lake-500: #47838c;

    --stone-600: #6d6a62;
    --stone-500: #8b877c;
    --stone-400: #a8a397;
    --stone-300: #c6c1b4;
    --stone-200: #ddd8cb;

    --paper-100: #f2eee5;
    --paper-050: #f9f6f0;
    --paper-000: #fdfbf7;

    --ember-700: #7d4326;
    --ember-600: #96502e;
    --ember-500: #b26139;
    --ember-400: #c87c55;

    /* --- Semantic ------------------------------------------------------- */
    --bg: var(--paper-050);
    --bg-alt: var(--paper-100);
    --bg-deep: var(--forest-900);
    --bg-lake: var(--lake-800);

    --ink: var(--forest-900);
    --ink-muted: #4c554d;
    --ink-soft: var(--stone-600);
    --ink-invert: var(--paper-050);
    --ink-invert-muted: #c3ccc2;

    --rule: color-mix(in srgb, var(--forest-900) 16%, transparent);
    --rule-strong: color-mix(in srgb, var(--forest-900) 34%, transparent);
    --rule-invert: color-mix(in srgb, var(--paper-050) 24%, transparent);

    --accent: var(--ember-500);          /* rules and underlines only: 4.18:1, decorative */
    --accent-strong: var(--ember-600);   /* anything carrying text: 5.6:1 on paper */
    --accent-hover: var(--ember-700);
    --focus: var(--lake-600);

    /* --- Type ------------------------------------------------------------
       Newsreader carries the editorial voice; Archivo carries everything a
       guest has to read quickly or act on. */
    --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Fluid scale, 360px to 1600px viewport */
    --step--2: clamp(0.72rem, 0.70rem + 0.09vw, 0.78rem);
    --step--1: clamp(0.84rem, 0.81rem + 0.13vw, 0.92rem);
    --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
    --step-1:  clamp(1.19rem, 1.12rem + 0.32vw, 1.38rem);
    --step-2:  clamp(1.41rem, 1.29rem + 0.55vw, 1.75rem);
    --step-3:  clamp(1.68rem, 1.47rem + 0.92vw, 2.21rem);
    --step-4:  clamp(2rem, 1.67rem + 1.46vw, 2.80rem);
    --step-5:  clamp(2.37rem, 1.87rem + 2.24vw, 3.55rem);
    --step-6:  clamp(2.82rem, 2.06rem + 3.36vw, 4.50rem);
    --step-7:  clamp(3.35rem, 2.22rem + 4.97vw, 5.70rem);

    --lh-tight: 1.04;
    --lh-display: 1.08;
    --lh-heading: 1.18;
    --lh-body: 1.62;
    --measure: 34rem;
    --measure-wide: 46rem;

    /* --- Space ----------------------------------------------------------- */
    --sp-3xs: 0.25rem;
    --sp-2xs: 0.5rem;
    --sp-xs: 0.75rem;
    --sp-s: 1rem;
    --sp-m: 1.5rem;
    --sp-l: 2.25rem;
    --sp-xl: 3.5rem;
    --sp-2xl: clamp(4rem, 3rem + 4vw, 7rem);
    --sp-3xl: clamp(5.5rem, 3.8rem + 6.5vw, 10.5rem);

    --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.5rem);
    --wrap: 82.5rem;
    --wrap-narrow: 58rem;

    /* --- Motion ----------------------------------------------------------
       Nothing snaps, nothing bounces. Everything drifts and settles. */
    --ease-settle: cubic-bezier(0.22, 0.61, 0.24, 1);
    --ease-drift: cubic-bezier(0.33, 0, 0.15, 1);
    --dur-fast: 150ms;
    --dur-mid: 400ms;
    --dur-slow: 700ms;
    --dur-hero: 1400ms;

    --radius: 2px;
    --header-h: 4.5rem;
  }

  @media (min-width: 60rem) {
    :root { --header-h: 5.5rem; }
  }
}

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

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

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--lh-body);
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--lh-heading);
    letter-spacing: -0.011em;
    margin: 0;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-6); line-height: var(--lh-display); letter-spacing: -0.02em; }
  h2 { font-size: var(--step-4); letter-spacing: -0.016em; }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }

  p { margin: 0 0 var(--sp-s); max-width: var(--measure); text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }

  a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: from-font; }
  a:hover { text-decoration-color: var(--accent); }

  ul, ol { margin: 0 0 var(--sp-s); padding-left: 1.15em; }
  li { margin-bottom: 0.35em; }
  li::marker { color: var(--stone-500); }

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

  address { font-style: normal; }
  strong, b { font-weight: 600; }
  em, i { font-style: italic; }
  small { font-size: var(--step--1); }

  hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--sp-xl) 0;
  }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 1px;
  }

  ::selection { background: color-mix(in srgb, var(--moss-300) 55%, transparent); }

  table { border-collapse: collapse; width: 100%; }
  th, td { text-align: left; }

  button { font: inherit; color: inherit; }

  [hidden] { display: none !important; }
}

@layer layout {
  .wrap {
    width: min(100% - (var(--gutter) * 2), var(--wrap));
    margin-inline: auto;
  }
  .wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); }
  .wrap--flush { width: 100%; padding-inline: var(--gutter); }

  .section { padding-block: var(--sp-3xl); }
  .section--tight { padding-block: var(--sp-2xl); }
  .section--flush-top { padding-block-start: 0; }

  .section--deep { background: var(--bg-deep); color: var(--ink-invert); }
  .section--lake { background: var(--bg-lake); color: var(--ink-invert); }
  .section--alt { background: var(--bg-alt); }


  /* Editorial split: type on one side, photography on the other, never 50/50. */
  .split {
    display: grid;
    gap: var(--sp-l) var(--sp-xl);
    align-items: center;
  }
  @media (min-width: 56rem) {
    .split { grid-template-columns: 7fr 5fr; gap: var(--sp-2xl); }
    .split--reverse { grid-template-columns: 5fr 7fr; }
    .split--reverse > :first-child { order: 2; }
    .split--wide-media { grid-template-columns: 5fr 7fr; }
    .split--top { align-items: start; }
  }

  .split > *, .grid > *, .feature-row > *, .room-list > * { min-width: 0; }
  .table-scroll { min-width: 0; }

  .stack > * + * { margin-top: var(--flow, var(--sp-s)); }
  .stack--l { --flow: var(--sp-l); }
  .stack--m { --flow: var(--sp-m); }

  .grid { display: grid; gap: var(--sp-l); }
  @media (min-width: 44rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 44rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
}

@layer components {

  /* --- Skip link ------------------------------------------------------- */
  .skip-link {
    position: absolute;
    left: var(--sp-s);
    top: var(--sp-s);
    z-index: 200;
    padding: 0.7em 1.1em;
    background: var(--forest-900);
    color: var(--ink-invert);
    font: 600 var(--step--1)/1 var(--font-sans);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: translateY(calc(-100% - var(--sp-l)));
    transition: transform var(--dur-fast) var(--ease-settle);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  /* --- Header ----------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--paper-050) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: background var(--dur-mid) var(--ease-settle),
                border-color var(--dur-mid) var(--ease-settle);
  }
  .site-header[data-scrolled="true"] {
    background: color-mix(in srgb, var(--paper-050) 96%, transparent);
    border-bottom-color: var(--rule);
  }
  .site-header[data-over-hero="true"]:not([data-scrolled="true"]) {
    background: transparent;
    backdrop-filter: none;
    color: var(--ink-invert);
  }
  .site-header[data-over-hero="true"]:not([data-scrolled="true"]) .btn--ghost {
    border-color: var(--rule-invert);
  }

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

  .wordmark {
    font-family: var(--font-display);
    font-size: var(--step-1);
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    gap: 0.28em;
  }
  .wordmark__sub {
    font-family: var(--font-sans);
    font-size: clamp(0.52rem, 0.44rem + 0.35vw, 0.62rem);
    white-space: nowrap;
    letter-spacing: clamp(0.12em, 0.06em + 0.3vw, 0.22em);
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
  }
  .site-header[data-over-hero="true"]:not([data-scrolled="true"]) .wordmark__sub { color: var(--ink-invert-muted); }

  .nav { display: none; }
  @media (min-width: 64rem) {
    .nav { display: flex; align-items: center; gap: clamp(1rem, 1.6vw, 2rem); }
  }
  .nav__link {
    font-size: var(--step--1);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    padding-block: 0.4em;
    position: relative;
    white-space: nowrap;
  }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: 0;
    border-bottom: 1px solid currentColor;
    transition: right var(--dur-mid) var(--ease-settle);
  }
  .nav__link:hover::after, .nav__link:focus-visible::after { right: 0; }
  .nav__link[aria-current="page"]::after { right: 0; border-bottom-color: var(--accent); }

  .header__actions { display: flex; align-items: center; gap: var(--sp-s); }
  .header__phone {
    display: none;
    font-size: var(--step--1);
    letter-spacing: 0.03em;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  @media (min-width: 76rem) { .header__phone { display: inline-block; } }

  /* --- Mobile navigation ------------------------------------------------ */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-height: 2.75rem;
    background: none;
    border: 0;
    padding: 0.55em 0;
    cursor: pointer;
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
  }
  @media (min-width: 64rem) { .nav-toggle { display: none; } }
  .nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
  .nav-toggle__bars span {
    height: 1px;
    background: currentColor;
    transition: transform var(--dur-mid) var(--ease-settle), opacity var(--dur-fast) linear;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(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(-5px) rotate(-45deg); }

  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--forest-900);
    color: var(--ink-invert);
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: var(--sp-s) var(--gutter) var(--sp-xl);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition: opacity var(--dur-mid) var(--ease-settle),
                transform var(--dur-mid) var(--ease-settle),
                visibility 0s linear var(--dur-mid);
  }
  .mobile-nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); }
  .mobile-nav__list { list-style: none; margin: var(--sp-xl) 0 0; padding: 0; }
  .mobile-nav__list li { border-bottom: 1px solid var(--rule-invert); margin: 0; }
  .mobile-nav__link {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-3);
    padding: 0.55em 0;
    text-decoration: none;
  }
  .mobile-nav__foot { display: grid; gap: var(--sp-s); margin-top: var(--sp-xl); }
  .mobile-nav__foot a { font-size: var(--step--1); letter-spacing: 0.04em; }

  /* --- Buttons ---------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 2.9rem;
    padding: 0.85em 1.5em;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: 600 var(--step--1)/1 var(--font-sans);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    background: var(--forest-800);
    color: var(--ink-invert);
    transition: background var(--dur-fast) var(--ease-settle),
                transform var(--dur-fast) var(--ease-settle),
                border-color var(--dur-fast) var(--ease-settle),
                color var(--dur-fast) var(--ease-settle);
  }
  .btn:hover { background: var(--forest-900); transform: translateY(1px); }
  .btn--book { background: var(--accent-strong); }
  .btn--book:hover { background: var(--accent-hover); }
  .btn--ghost { background: transparent; color: inherit; border-color: var(--rule-strong); }
  .btn--ghost:hover { background: color-mix(in srgb, var(--forest-900) 7%, transparent); }
  .section--deep .btn--ghost:hover, .section--lake .btn--ghost:hover { background: color-mix(in srgb, var(--paper-050) 10%, transparent); }
  /* 2.75rem keeps every button above the 44px target the brief asks for,
     on every input type, without a pointer media query that a desktop
     touchscreen would miss. */
  .btn--small { min-height: 2.75rem; padding: 0.6em 1.15em; font-size: var(--step--2); }

  /* A quiet inline link that still reads as an action. */
  .link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    padding-block: 0.35em;
    border-bottom: 1px solid var(--rule-strong);
    transition: border-color var(--dur-fast) var(--ease-settle), gap var(--dur-mid) var(--ease-settle);
  }
  .link-arrow::after { content: "\2192"; transition: transform var(--dur-mid) var(--ease-settle); }
  .link-arrow:hover { border-bottom-color: var(--accent); }
  .link-arrow:hover::after { transform: translateX(0.28em); }
  .section--deep .link-arrow, .section--lake .link-arrow { border-bottom-color: var(--rule-invert); }

  /* --- Type helpers ----------------------------------------------------- */
  .eyebrow {
    display: block;
    font-size: var(--step--2);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--stone-600);
    margin-bottom: var(--sp-m);
  }
  .lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-muted);
    max-width: var(--measure-wide);
  }
  .display { font-family: var(--font-display); font-size: var(--step-5); line-height: var(--lh-display); letter-spacing: -0.018em; }
  .brand-line {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--step-2);
    color: var(--ink-muted);
  }
  .prose { max-width: var(--measure); }
  .prose h3 { margin-top: var(--sp-l); }

  /* Inverted sections. These must live in this layer, after the light defaults
     above, or the light colours win the cascade and the text fails contrast. */
  .section--deep :is(h1, h2, h3, h4),
  .section--lake :is(h1, h2, h3, h4) { color: var(--ink-invert); }
  .section--deep .lede,
  .section--lake .lede { color: var(--ink-invert-muted); }
  .section--deep .eyebrow,
  .section--lake .eyebrow { color: var(--moss-300); }
  .section--deep .figure__caption,
  .section--lake .figure__caption { color: var(--ink-invert-muted); }
  .section--deep hr,
  .section--lake hr { border-color: var(--rule-invert); }
  .section--deep .note,
  .section--lake .note { color: var(--ink-invert-muted); }
  .section--deep .data-table th,
  .section--lake .data-table th,
  .section--deep .data-table td,
  .section--lake .data-table td { border-bottom-color: var(--rule-invert); }
  .section--deep .data-table thead th,
  .section--lake .data-table thead th { color: var(--ink-invert-muted); }

  /* --- Media ------------------------------------------------------------ */
  .water-shimmer { position: relative; overflow: hidden; }
  .media {
    position: relative;
    aspect-ratio: var(--ratio, 3 / 2);
    overflow: hidden;
    background: var(--stone-200);
    border-radius: var(--radius);
  }
  .media > picture, .media img { width: 100%; height: 100%; object-fit: cover; }

  .media__shell {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 22% 12%, color-mix(in srgb, var(--paper-100) 34%, transparent), transparent 62%),
      linear-gradient(158deg, var(--forest-600), var(--forest-800) 55%, var(--lake-800));
  }
  .media[data-shell="2"] .media__shell {
    background:
      radial-gradient(120% 90% at 78% 14%, color-mix(in srgb, var(--paper-100) 26%, transparent), transparent 60%),
      linear-gradient(160deg, var(--lake-600), var(--lake-800) 60%, var(--forest-800));
  }
  .media[data-shell="3"] .media__shell {
    background:
      radial-gradient(110% 80% at 30% 82%, color-mix(in srgb, var(--moss-300) 40%, transparent), transparent 60%),
      linear-gradient(150deg, var(--moss-500), var(--forest-700) 70%);
  }
  .media[data-shell="4"] .media__shell {
    background:
      radial-gradient(110% 90% at 70% 20%, color-mix(in srgb, var(--stone-300) 45%, transparent), transparent 62%),
      linear-gradient(165deg, var(--stone-600), var(--forest-700));
  }
  /* Review aid. Suppressed in production by the template, not by CSS. */
  .media__shell-note {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 0.9em 1.1em;
    font-size: 0.7rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--paper-050) 78%, transparent);
    background: linear-gradient(to top, color-mix(in srgb, #000 42%, transparent), transparent);
  }

  .figure { margin: 0; }
  .figure__caption {
    margin-top: var(--sp-xs);
    font-size: var(--step--1);
    color: var(--ink-soft);
    max-width: var(--measure);
  }

  /* --- Hero ------------------------------------------------------------- */
  .hero {
    position: relative;
    overflow: hidden;
    min-height: min(46rem, 88svh);
    display: grid;
    align-items: end;
    color: var(--ink-invert);
    isolation: isolate;
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);
  }
  .hero__media { position: absolute; inset: 0; z-index: -2; }
  .hero__media .media { height: 100%; aspect-ratio: auto; border-radius: 0; }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top, color-mix(in srgb, var(--forest-900) 82%, transparent) 0%,
                              color-mix(in srgb, var(--forest-900) 34%, transparent) 42%,
                              color-mix(in srgb, var(--forest-900) 46%, transparent) 100%);
  }
  .hero__body { padding-block: var(--sp-2xl); }
  .hero__title { max-width: 18ch; }
  .hero__brand { margin-top: var(--sp-m); color: var(--ink-invert-muted); }
  .hero__orient {
    margin-top: var(--sp-m);
    max-width: 46ch;
    color: var(--ink-invert-muted);
    font-size: var(--step-0);
  }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-l); }

  /* Page header for interior pages: type-led, image below.
     The site header is sticky, not overlaid, so it already occupies flow space
     here — adding --header-h again would double-count it. Only the homepage
     hero pulls up underneath the header. */
  .page-head { padding-block: var(--sp-xl); }
  .page-head__title { max-width: 20ch; }
  .page-head .lede { margin-top: var(--sp-m); }

  /* --- Value strip ------------------------------------------------------ */
  .strip {
    border-block: 1px solid var(--rule);
    background: var(--bg-alt);
  }
  .strip__list {
    list-style: none;
    margin: 0;
    padding: var(--sp-m) 0;
    display: grid;
    gap: var(--sp-xs) var(--sp-l);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 44rem) { .strip__list { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 72rem) { .strip__list { grid-template-columns: repeat(6, 1fr); padding-block: var(--sp-l); } }
  .strip__list li {
    margin: 0;
    font-size: var(--step--1);
    line-height: 1.4;
    color: var(--ink-muted);
    padding-left: var(--sp-s);
    border-left: 1px solid var(--rule);
  }
  .strip__list li b { display: block; color: var(--ink); font-weight: 600; }
  .strip--compact .strip__list {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  /* --- Room cards ------------------------------------------------------- */
  .room-list { display: grid; gap: var(--sp-xl) var(--sp-l); }
  @media (min-width: 48rem) { .room-list { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 72rem) { .room-list--3 { grid-template-columns: repeat(3, 1fr); } }

  .room-card { position: relative; display: flex; flex-direction: column; }
  .room-card__media { overflow: hidden; }
  .room-card__media .media { transition: transform var(--dur-slow) var(--ease-drift); }
  .room-card:hover .room-card__media .media { transform: scale(1.03); }
  .room-card__body { padding-top: var(--sp-m); }
  .room-card__name {
    font-size: var(--step-2);
    display: inline-block;
    position: relative;
  }
  .room-card__name a { text-decoration: none; }
  /* No stretched link on room cards: they carry real buttons now. */
  .room-card__name::after {
    content: "";
    display: block;
    margin-top: 0.22em;
    border-bottom: 1px solid var(--accent);
    width: 0;
    transition: width var(--dur-slow) var(--ease-settle);
  }
  .room-card:hover .room-card__name::after { width: 100%; }
  .room-card__meta {
    margin-top: var(--sp-2xs);
    font-size: var(--step--1);
    color: var(--ink-soft);
    letter-spacing: 0.02em;
  }
  .room-card__meta span + span::before { content: " · "; }
  .room-card__note { margin-top: var(--sp-xs); color: var(--ink-muted); font-size: var(--step--1); max-width: 40ch; }
  .room-card__rate {
    margin-top: var(--sp-xs);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* --- Feature rows: the property experience ---------------------------- */
  .feature-row { display: grid; gap: var(--sp-m); align-items: start; }
  @media (min-width: 56rem) {
    .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2xl); }
    .feature-row + .feature-row { margin-top: var(--sp-2xl); }
    .feature-row:nth-child(even) > :first-child { order: 2; }
  }
  .feature-row__title { font-size: var(--step-3); }
  .feature-row__text { margin-top: var(--sp-s); color: var(--ink-muted); }

  /* --- Editorial index list (used by Explore and Good to know) ---------- */
  .index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .index-list > li { margin: 0; border-bottom: 1px solid var(--rule); }
  .index-item {
    display: grid;
    gap: var(--sp-2xs) var(--sp-l);
    padding-block: var(--sp-m);
    text-decoration: none;
    position: relative;
    transition: padding-inline-start var(--dur-mid) var(--ease-settle);
  }
  @media (min-width: 56rem) {
    .index-item { grid-template-columns: 14rem minmax(0, 1fr) auto; align-items: baseline; }
  }
  a.index-item:hover { padding-inline-start: var(--sp-xs); }
  .index-item__label { font-family: var(--font-display); font-size: var(--step-2); }
  .index-item__text { color: var(--ink-muted); font-size: var(--step--1); max-width: 52ch; }
  @media (min-width: 56rem) {
    .index-list--timeline .index-item { grid-template-columns: 9rem 14rem minmax(0, 1fr); }
    .index-list--timeline .index-item__meta { order: -1; }
  }
  .index-item__meta {
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }

  /* --- Tables ----------------------------------------------------------- */
  .table-scroll { overflow-x: auto; }
  .table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
  .data-table { font-size: var(--step--1); min-width: 34rem; }
  .data-table caption { text-align: left; color: var(--ink-soft); font-size: var(--step--1); padding-bottom: var(--sp-s); }
  .data-table th, .data-table td { padding: 0.85em 1em 0.85em 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
  .data-table thead th {
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
    border-bottom-color: var(--rule-strong);
  }
  .data-table td:last-child, .data-table th:last-child { padding-right: 0; }
  .data-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* --- Accordion / FAQ -------------------------------------------------- */
  .faq { border-top: 1px solid var(--rule); }
  .faq__item { border-bottom: 1px solid var(--rule); }
  .faq__q {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-m);
    padding: var(--sp-m) 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.35;
  }
  .faq__icon { flex: none; width: 0.9em; height: 0.9em; position: relative; align-self: center; }
  .faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    border-top: 1px solid currentColor;
    transition: transform var(--dur-mid) var(--ease-settle), opacity var(--dur-fast) linear;
  }
  .faq__icon::after { transform: rotate(90deg); }
  .faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); opacity: 0; }
  .faq__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-mid) var(--ease-settle);
  }
  .faq__panel[data-open="true"] { grid-template-rows: 1fr; }
  .faq__panel > div { overflow: hidden; }
  .faq__panel p { padding-bottom: var(--sp-m); color: var(--ink-muted); max-width: var(--measure-wide); }

  /* --- Booking bar and embed ------------------------------------------- */
  .booking-bar {
    background: var(--forest-800);
    color: var(--ink-invert);
    border-radius: var(--radius);
    padding: var(--sp-m);
  }
  .booking-bar__form {
    display: grid;
    gap: var(--sp-s);
    grid-template-columns: 1fr;
    align-items: end;
  }
  @media (min-width: 48rem) {
    .booking-bar__form { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--sp-m); }
  }
  .field { display: grid; gap: 0.4em; }
  .field > label {
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-invert-muted);
  }
  .field input, .field select, .field textarea {
    font: 400 var(--step-0)/1.3 var(--font-sans);
    padding: 0.72em 0.8em;
    min-height: 2.9rem;
    border: 1px solid var(--rule-invert);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--paper-050) 8%, transparent);
    color: var(--ink-invert);
    width: 100%;
  }
  .field input::placeholder { color: color-mix(in srgb, var(--paper-050) 55%, transparent); }
  .booking-bar__note {
    margin-top: var(--sp-s);
    font-size: var(--step--2);
    color: var(--ink-invert-muted);
    max-width: 62ch;
  }

  /* Light variant, used inside pale sections and forms. */
  .booking-bar.form-light {
    background: var(--paper-000);
    border: 1px solid var(--rule);
    color: var(--ink);
  }
  .booking-bar.form-light .booking-bar__note { color: var(--ink-soft); }
  .form-light .field > label { color: var(--ink-soft); }
  .form-light .field input, .form-light .field select, .form-light .field textarea {
    border-color: var(--rule-strong);
    background: var(--paper-000);
    color: var(--ink);
  }
  .form-light .field input::placeholder { color: var(--stone-500); }

  .booking-embed {
    min-height: var(--embed-min-height, 620px);
    background: var(--paper-000);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: var(--sp-s);
  }
  .booking-embed__frame { width: 100%; border: 0; display: block; }
  .booking-embed__fallback { padding: var(--sp-l); }

  .sticky-book {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 90;
    padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--forest-900) 96%, transparent);
    border-top: 1px solid var(--rule-invert);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-s);
    transform: translateY(110%);
    transition: transform var(--dur-mid) var(--ease-settle);
  }
  .sticky-book[data-visible="true"] { transform: none; }
  .sticky-book__label { color: var(--ink-invert); font-size: var(--step--1); line-height: 1.25; }
  .sticky-book__label b { display: block; font-family: var(--font-display); font-size: var(--step-0); font-weight: 400; }
  @media (min-width: 64rem) { .sticky-book { display: none; } }

  /* --- Callouts and notes ---------------------------------------------- */
  .note {
    border-left: 2px solid var(--accent);
    padding: var(--sp-2xs) 0 var(--sp-2xs) var(--sp-m);
    color: var(--ink-muted);
    max-width: var(--measure-wide);
  }
  .note--spaced { margin-block: var(--sp-m); }
  .pull {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.3;
    letter-spacing: -0.012em;
    max-width: 22ch;
  }

  /* --- Breadcrumbs ------------------------------------------------------ */
  .breadcrumbs { font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
  .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0; padding: 0; }
  .breadcrumbs li { margin: 0; }
  .breadcrumbs li + li::before { content: "/"; margin-right: 0.5em; color: var(--stone-400); }
  .breadcrumbs a { text-decoration: none; }
  .breadcrumbs a:hover { text-decoration: underline; }

  /* --- Map -------------------------------------------------------------- */
  .map-embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--forest-700);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--ink-invert);
    padding: var(--sp-l);
  }
  .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .map-embed .btn--ghost { border-color: var(--rule-invert); }
  .map-embed .btn--ghost:hover { background: color-mix(in srgb, var(--paper-050) 12%, transparent); }

  /* --- Gallery and lightbox --------------------------------------------- */
  .gallery { display: grid; gap: var(--sp-s); }
  @media (min-width: 44rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
  .gallery-item {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    width: 100%;
    text-align: left;
  }
  .gallery-item .media { transition: transform var(--dur-slow) var(--ease-drift); }
  .gallery-item:hover .media { transform: scale(1.02); }

  .lightbox {
    border: 0;
    padding: 0;
    max-width: min(100vw, 1400px);
    max-height: 100svh;
    width: 100%;
    height: 100%;
    background: var(--forest-900);
    color: var(--ink-invert);
  }
  .lightbox::backdrop { background: rgba(8, 14, 11, 0.92); }
  .lightbox[open] { display: grid; grid-template-rows: 1fr auto; }
  .lightbox__stage {
    display: grid;
    place-items: center;
    padding: var(--sp-m);
    min-height: 0;
  }
  .lightbox__stage .media {
    aspect-ratio: auto;
    max-height: 78svh;
    width: auto;
    max-width: 100%;
    background: none;
  }
  .lightbox__stage .media img { max-height: 78svh; width: auto; object-fit: contain; }
  .lightbox__stage .media__shell-note { display: none; }
  .lightbox__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-s);
    padding: var(--sp-s) var(--gutter) calc(var(--sp-s) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rule-invert);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
  }
  .lightbox__bar .btn--ghost { border-color: var(--rule-invert); }
  .lightbox__bar .btn--ghost:hover { background: color-mix(in srgb, var(--paper-050) 12%, transparent); }

  /* --- Compact label list ----------------------------------------------- */
  .tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35em var(--sp-m);
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }
  .tag-list li {
    margin: 0;
    padding-left: 0.9em;
    position: relative;
    font-size: var(--step--1);
    color: var(--ink-muted);
  }
  .tag-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.4em;
    border-top: 1px solid var(--stone-400);
  }

  /* --- Footer ----------------------------------------------------------- */
  .site-footer {
    background: var(--forest-900);
    color: var(--ink-invert-muted);
    padding-block: var(--sp-2xl) var(--sp-xl);
    font-size: var(--step--1);
  }
  .site-footer a { text-decoration: none; }
  .site-footer a:hover { text-decoration: underline; }
  .site-footer__top {
    display: grid;
    gap: var(--sp-xl);
    padding-bottom: var(--sp-xl);
    border-bottom: 1px solid var(--rule-invert);
  }
  @media (min-width: 56rem) { .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
  .site-footer .wordmark { color: var(--ink-invert); }
  .site-footer .wordmark__sub { color: var(--moss-300); }
  .site-footer h2 {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--moss-300);
    margin-bottom: var(--sp-s);
  }
  .site-footer ul { list-style: none; margin: 0; padding: 0; }
  .site-footer li { margin-bottom: 0.5em; }
  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-s) var(--sp-m);
    justify-content: space-between;
    padding-top: var(--sp-m);
    font-size: var(--step--2);
    color: var(--stone-500);
  }
  .site-footer__nap { color: var(--ink-invert); font-style: normal; }
  .site-footer__nap a { color: inherit; }
}

@layer motion {
  /* Everything is visible at rest. Motion only ever refines an already
     complete page, so the first painted frame is the whole thing. */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      --reveal-shift: 24px;
      clip-path: inset(0 0 0 0);
    }
    .js [data-reveal="mask"]:not([data-revealed]) {
      clip-path: inset(12% 0 0 0);
      transform: translateY(var(--reveal-shift));
      opacity: 0.001;
    }
    [data-reveal="mask"] {
      transition: clip-path var(--dur-slow) var(--ease-drift),
                  transform var(--dur-slow) var(--ease-drift),
                  opacity var(--dur-mid) linear;
    }
    .js [data-reveal="rise"]:not([data-revealed]) {
      transform: translateY(16px);
      opacity: 0.001;
    }
    [data-reveal="rise"] {
      transition: transform var(--dur-mid) var(--ease-settle),
                  opacity var(--dur-mid) linear;
      transition-delay: var(--reveal-delay, 0ms);
    }
    .js [data-reveal="slide"]:not([data-revealed]) { transform: translateX(40px); opacity: 0.001; }
    [data-reveal="slide"] {
      transition: transform var(--dur-slow) var(--ease-drift), opacity var(--dur-mid) linear;
    }
    [data-revealed] { transform: none; opacity: 1; clip-path: inset(0 0 0 0); }

    /* Hero settle: one orchestrated sequence, once, on load. */
    .js .hero[data-settle] .hero__media .media { transform: scale(1.06); transition: transform var(--dur-hero) var(--ease-drift); }
    .hero[data-settle] .hero__media .media { transition: transform var(--dur-hero) var(--ease-drift); }
    .hero[data-settle="done"] .hero__media .media { transform: scale(1); }
    .js .hero[data-settle]:not([data-settle="done"]) .hero__title,
    .js .hero[data-settle]:not([data-settle="done"]) .hero__brand,
    .js .hero[data-settle]:not([data-settle="done"]) .hero__orient,
    .js .hero[data-settle]:not([data-settle="done"]) .hero__actions {
      transform: translateY(16px);
      opacity: 0.001;
    }
    .hero[data-settle] .hero__title,
    .hero[data-settle] .hero__brand,
    .hero[data-settle] .hero__orient,
    .hero[data-settle] .hero__actions {
      transition: transform 700ms var(--ease-settle), opacity 500ms linear;
    }
    .hero[data-settle="done"] .hero__title,
    .hero[data-settle="done"] .hero__brand,
    .hero[data-settle="done"] .hero__orient,
    .hero[data-settle="done"] .hero__actions { transform: none; opacity: 1; }
    .hero[data-settle] .hero__brand { transition-delay: 120ms; }
    .hero[data-settle] .hero__orient { transition-delay: 200ms; }
    .hero[data-settle] .hero__actions { transition-delay: 280ms; }

    /* Parallax: transform only, capped, desktop only. Driven by --parallax. */
    @media (min-width: 56.25rem) {
      [data-parallax] .media { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); }
      .hero[data-parallax] .hero__media { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); }

      /* The one indulgence: a very slow drift across the lake image. */
      .water-shimmer { position: relative; overflow: hidden; }
      .water-shimmer::after {
        content: "";
        position: absolute;
        inset: -10% -30%;
        pointer-events: none;
        background: linear-gradient(104deg,
          transparent 34%,
          color-mix(in srgb, var(--paper-000) 11%, transparent) 47%,
          transparent 60%);
        animation: water-drift 12s linear infinite;
      }
      @keyframes water-drift {
        from { transform: translate3d(-16%, 0, 0); }
        to   { transform: translate3d(16%, 0, 0); }
      }
    }
  }

  @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;
    }
  }
}

@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .text-center { text-align: center; }
  .mt-l { margin-top: var(--sp-l); }
  .mt-xl { margin-top: var(--sp-xl); }
  .mb-l { margin-bottom: var(--sp-l); }
  .no-wrap { white-space: nowrap; }
  .full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
}

/* ==========================================================================
   Phase 2 correction — photographic layer.

   The first pass leaned on a repeated two-column split with an eyebrow, a
   serif heading and a paragraph, over alternating cream and green blocks.
   With no photographs built, that read as a magazine concept rather than a
   hotel. What follows is the compositional vocabulary the photography needs:
   full-bleed frames, mosaics, horizontal room showcases and overlaid
   statements, plus softer, more obvious calls to action.

   Nothing above this comment was deleted. This layer only adds and overrides.
   ========================================================================== */

@layer tokens {
  :root {
    --radius: 3px;
    --radius-soft: 10px;
    --radius-pill: 999px;
    /* One warm brass note for CTAs. Darker than --ember-500 so white type on
       it clears AA at body size: 4.9:1. */
    --cta: #8f5730;
    --cta-hover: #6f4223;
    --shadow-lift: 0 1px 2px rgba(14, 23, 18, 0.06), 0 12px 32px -12px rgba(14, 23, 18, 0.28);
  }
}

@layer components {

  /* --- Calls to action --------------------------------------------------
     Softly rounded, larger, and unmistakably a button. The primary action is
     the brass fill; the secondary is a bordered pill that survives being
     placed over a photograph. */
  .btn {
    border-radius: var(--radius-pill);
    padding: 0.95em 1.75em;
    min-height: 3.05rem;
    letter-spacing: 0.06em;
  }
  .btn--book,
  .btn--primary { background: var(--cta); border-color: var(--cta); color: #fff; }
  .btn--book:hover,
  .btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
  .btn--ghost { border-width: 1px; }
  .btn--small { min-height: 2.75rem; padding: 0.65em 1.25em; }
  /* Over photography a ghost button needs its own contrast, not the page's. */
  .on-media .btn--ghost,
  .hero .btn--ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(12, 18, 14, 0.18);
    backdrop-filter: blur(3px);
  }
  .on-media .btn--ghost:hover,
  .hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }

  /* --- Hero -------------------------------------------------------------
     Near-full viewport, photograph first, the property's name as the largest
     thing on the screen. */
  .hero--brand {
    min-height: min(52rem, 94svh);
    align-items: end;
  }
  .hero--brand::after {
    background:
      linear-gradient(to top,
        color-mix(in srgb, var(--forest-900) 88%, transparent) 0%,
        color-mix(in srgb, var(--forest-900) 44%, transparent) 38%,
        color-mix(in srgb, var(--forest-900) 12%, transparent) 68%,
        color-mix(in srgb, var(--forest-900) 42%, transparent) 100%);
  }
  .hero__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 var(--sp-s);
  }
  .hero__brandname {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.9rem, 1.5rem + 6.4vw, 7.2rem);
    line-height: 0.94;
    letter-spacing: -0.028em;
    margin: 0;
    color: #fff;
    text-wrap: balance;
    text-shadow: 0 2px 40px rgba(10, 16, 12, 0.45);
  }
  .hero__rule {
    width: 3.5rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
    margin: var(--sp-m) 0;
  }
  .hero__line {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.3;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.94);
    max-width: 24ch;
    margin: 0;
  }
  .hero__sub {
    margin-top: var(--sp-s);
    max-width: 42ch;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--step-0);
  }
  .hero__scroll {
    position: absolute;
    bottom: var(--sp-m);
    right: var(--gutter);
    display: none;
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
  }
  @media (min-width: 64rem) { .hero__scroll { display: block; } }
  .hero__scroll::after {
    content: "";
    display: block;
    width: 1px;
    height: 2.6rem;
    margin: 0.6rem auto 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  }

  /* --- Full-bleed photographic panel ------------------------------------
     An edge-to-edge frame that breaks up the page and lets one photograph
     carry a whole screen. Text over it is optional and deliberately short. */
  .band {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: clamp(22rem, 56vh, 40rem);
    color: var(--ink-invert);
  }
  .band .media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--forest-900) 82%, transparent) 0%,
      color-mix(in srgb, var(--forest-900) 26%, transparent) 52%,
      transparent 100%);
  }
  .band--center { align-items: center; text-align: center; }
  .band--center::after {
    background: linear-gradient(to top,
      color-mix(in srgb, var(--forest-900) 62%, transparent),
      color-mix(in srgb, var(--forest-900) 44%, transparent));
  }
  .band__body { padding-block: var(--sp-2xl); }
  .band__body > * { color: #fff; }
  .band--center .band__body { margin-inline: auto; max-width: 46rem; }
  .band__title {
    font-size: var(--step-5);
    line-height: 1.1;
    color: #fff;
    max-width: 20ch;
  }
  .band--center .band__title { max-width: none; }
  .band__text {
    margin-top: var(--sp-m);
    max-width: 44ch;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--step-1);
    line-height: 1.5;
  }
  .band--center .band__text { margin-inline: auto; }
  .band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-s); margin-top: var(--sp-l); }
  .band--center .band__actions { justify-content: center; }
  .band__actions.actions--center { justify-content: center; }

  /* --- Mosaic ------------------------------------------------------------
     An asymmetric grid: one tall frame, two shorter ones, sizes that do not
     repeat. Used where a list of features would otherwise become four
     identical rows. */
  .mosaic { display: grid; gap: var(--sp-s); }
  @media (min-width: 48rem) {
    .mosaic {
      grid-template-columns: repeat(6, 1fr);
      gap: var(--sp-m);
    }
    .mosaic__item--tall  { grid-column: span 3; grid-row: span 2; }
    .mosaic__item--wide  { grid-column: span 3; }
    .mosaic__item--half  { grid-column: span 3; }
    .mosaic__item--third { grid-column: span 2; }
    .mosaic__item--two-thirds { grid-column: span 4; }
  }
  .mosaic__item { position: relative; overflow: hidden; border-radius: var(--radius-soft); }
  .mosaic__item .media { border-radius: 0; height: 100%; }
  .mosaic__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--sp-l) var(--sp-m) var(--sp-m);
    background: linear-gradient(to top, rgba(12, 20, 15, 0.82), transparent);
    color: #fff;
    pointer-events: none;
  }
  .mosaic__caption b {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-1);
    line-height: 1.2;
  }
  .mosaic__caption span {
    display: block;
    margin-top: 0.25em;
    font-size: var(--step--1);
    color: rgba(255, 255, 255, 0.82);
    max-width: 34ch;
  }

  /* --- Room showcase -----------------------------------------------------
     Large alternating room presentations. Photography leads, the facts are
     short, and both calls to action are visible without a hover. */
  .showcase { display: grid; gap: var(--sp-2xl); }
  .showcase__row { display: grid; gap: var(--sp-m); align-items: center; }
  @media (min-width: 56rem) {
    .showcase__row { grid-template-columns: 1.35fr 1fr; gap: var(--sp-2xl); }
    .showcase__row:nth-child(even) > :first-child { order: 2; }
    .showcase__row:nth-child(even) .showcase__body { padding-left: 0; }
  }
  .showcase__media { overflow: hidden; border-radius: var(--radius-soft); }
  .showcase__media .media { border-radius: 0; transition: transform 900ms var(--ease-drift); }
  .showcase__row:hover .showcase__media .media { transform: scale(1.025); }
  .showcase__name { font-size: var(--step-4); line-height: 1.1; }
  .showcase__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    margin: var(--sp-s) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--1);
    letter-spacing: 0.03em;
    color: var(--ink-muted);
  }
  .showcase__facts li { margin: 0; }
  .showcase__facts li + li::before { content: "· "; color: var(--stone-400); }
  .showcase__text { margin-top: var(--sp-m); color: var(--ink-muted); max-width: 40ch; }
  .showcase__actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: var(--sp-l); }

  /* --- Room cards, photographic ----------------------------------------- */
  .room-card__media { border-radius: var(--radius-soft); }
  .room-card__media .media { border-radius: 0; }
  .room-card__name { font-size: var(--step-2); }

  /* --- Statement ---------------------------------------------------------
     One large line, used sparingly, where the page needs a breath rather than
     another paragraph. */
  .statement {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--step-4);
    line-height: 1.26;
    letter-spacing: -0.015em;
    max-width: 26ch;
    text-wrap: balance;
    margin: 0;
  }
  .statement--wide { max-width: 34ch; }

  /* --- Facts strip, quieter --------------------------------------------- */
  .strip { border-block: 1px solid var(--rule); background: transparent; }
  .strip__list li { border: 0; padding-block: var(--sp-xs); }
  .strip__list li b {
    font-family: var(--font-sans);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  /* --- Pending photography ----------------------------------------------
     Where a shot genuinely does not exist yet, say so plainly rather than
     letting a tonal panel pass for a design decision. */
  .media__pending {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.5em;
    padding: var(--sp-m);
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }
  .media__pending::before {
    content: "";
    justify-self: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
  }

  /* --- Section rhythm ----------------------------------------------------
     Contrast now comes from photography, so the tonal blocks step back. */
  .section--alt { background: var(--paper-000); }
  .section--paper { background: var(--bg); }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .js [data-reveal="zoom"]:not([data-revealed]) { transform: scale(1.04); opacity: 0.001; }
    [data-reveal="zoom"] {
      transition: transform var(--dur-slow) var(--ease-drift), opacity var(--dur-slow) var(--ease-settle);
    }
    [data-reveal="zoom"][data-revealed] { transform: none; opacity: 1; }

    .js .hero--brand[data-settle]:not([data-settle="done"]) :is(.hero__eyebrow, .hero__brandname, .hero__rule, .hero__line, .hero__sub) {
      transform: translateY(18px);
      opacity: 0.001;
    }
    .hero--brand[data-settle] :is(.hero__eyebrow, .hero__brandname, .hero__rule, .hero__line, .hero__sub) {
      transition: transform var(--dur-slow) var(--ease-settle), opacity var(--dur-slow) var(--ease-settle);
    }
    .hero--brand[data-settle="done"] :is(.hero__eyebrow, .hero__brandname, .hero__rule, .hero__line, .hero__sub) {
      transform: none;
      opacity: 1;
    }
    .hero--brand[data-settle] .hero__brandname { transition-delay: 90ms; }
    .hero--brand[data-settle] .hero__rule { transition-delay: 190ms; }
    .hero--brand[data-settle] .hero__line { transition-delay: 250ms; }
    .hero--brand[data-settle] .hero__sub { transition-delay: 320ms; }
  }
}

@layer layout {
  /* The 44rem two-column rule for .grid--3 was declared after the 60rem
     three-column rule, so above 960px both matched and source order handed the
     win to the two-column one. Restated here, last, in the right order. */
  @media (min-width: 44rem)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 60rem)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

  /* An even split where the right-hand column carries a table rather than a
     paragraph, so nothing is clipped at the gutter. */
  @media (min-width: 56rem) {
    .split--even { grid-template-columns: 1fr 1fr; }
  }
}

@layer components {
  /* Even showcase rows swap sides. Order alone left the photograph in the
     narrow column, so the second room rendered visibly smaller than the first. */
  @media (min-width: 56rem) {
    .showcase__row:nth-child(even) { grid-template-columns: 1fr 1.35fr; }
  }

  /* A photograph that is standing in for one we do not have yet, or a slot
     reserved for a shot still to be taken. Labelled, so nobody reviewing the
     prototype mistakes a gap for a decision. */
  .pending-note {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: var(--sp-m);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
  }
  .pending-note::before {
    content: "";
    width: 0.42em;
    height: 0.42em;
    border-radius: 50%;
    background: currentColor;
  }
  .pending-note--ink { color: var(--ink-soft); }

  /* A reserved slot rendered as a designed panel rather than an empty box. */
  .reserved {
    position: relative;
    display: grid;
    place-content: center;
    text-align: center;
    gap: var(--sp-s);
    padding: var(--sp-xl) var(--sp-l);
    aspect-ratio: var(--ratio, 3 / 2);
    border-radius: var(--radius-soft);
    color: var(--ink-invert);
    background:
      radial-gradient(120% 90% at 30% 10%, color-mix(in srgb, var(--moss-300) 22%, transparent), transparent 62%),
      linear-gradient(158deg, var(--forest-600), var(--forest-800) 58%, var(--lake-800));
  }
  .reserved__label {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }
  .reserved__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.2;
    color: #fff;
    max-width: 18ch;
    margin-inline: auto;
  }

  /* The mosaic sits directly under the section above it; it does not need a
     second full section's worth of air before the rooms. */
  .section--flush-top { padding-block-start: 0; }
  .section--flush-bottom { padding-block-end: var(--sp-xl); }
}

@layer components {
  /* --- Room page ---------------------------------------------------------
     A booking page, not an article: the photograph is the first thing, the
     name sits on it, and the two actions are visible before any prose. */
  .roomhero {
    position: relative;
    min-height: min(42rem, 82svh);
    display: grid;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    color: var(--ink-invert);
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);
  }
  .roomhero .media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .roomhero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top,
      color-mix(in srgb, var(--forest-900) 86%, transparent) 0%,
      color-mix(in srgb, var(--forest-900) 30%, transparent) 46%,
      color-mix(in srgb, var(--forest-900) 20%, transparent) 100%);
  }
  .roomhero__body { padding-block: var(--sp-xl) var(--sp-2xl); }
  .roomhero__name {
    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem);
    line-height: 1.02;
    color: #fff;
    margin: var(--sp-s) 0 0;
  }
  .roomhero .breadcrumbs,
  .roomhero .breadcrumbs a { color: rgba(255, 255, 255, 0.75); }
  .roomhero .breadcrumbs li + li::before { color: rgba(255, 255, 255, 0.45); }

  /* Key facts, side by side, immediately under the photograph. */
  .factbar { border-bottom: 1px solid var(--rule); }
  .factbar__list {
    list-style: none;
    margin: 0;
    padding: var(--sp-m) 0;
    display: grid;
    gap: var(--sp-s) var(--sp-l);
    grid-template-columns: repeat(2, 1fr);
  }
  @media (min-width: 44rem) { .factbar__list { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 64rem) { .factbar__list { grid-template-columns: repeat(5, 1fr); } }
  .factbar__list li { margin: 0; }
  .factbar__list dt,
  .factbar__key {
    font-size: var(--step--2);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .factbar__val {
    display: block;
    margin-top: 0.35em;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.25;
  }

  /* A booking rail that stays beside the description on wide screens. */
  .bookrail {
    border: 1px solid var(--rule);
    border-radius: var(--radius-soft);
    padding: var(--sp-l);
    background: var(--paper-000);
  }
  @media (min-width: 64rem) { .bookrail { position: sticky; top: calc(var(--header-h) + var(--sp-m)); } }
  .bookrail__rate {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.2;
    margin: 0 0 var(--sp-s);
  }
  .bookrail .btn { width: 100%; }
  .bookrail__actions { display: grid; gap: var(--sp-xs); }
  .bookrail__note { margin-top: var(--sp-m); font-size: var(--step--1); color: var(--ink-soft); }

  /* Amenities as a plain, scannable set rather than a paragraph. */
  .amenities {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-xs) var(--sp-l);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  .amenities li {
    margin: 0;
    padding-left: 1.4em;
    position: relative;
    font-size: var(--step--1);
  }
  .amenities li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--moss-400);
  }

  /* Gallery: one large frame and two smaller, not three identical squares. */
  .gallery--room { grid-template-columns: 1fr; gap: var(--sp-s); }
  @media (min-width: 48rem) {
    .gallery--room { grid-template-columns: repeat(4, 1fr); gap: var(--sp-m); }
    .gallery--room > :first-child { grid-column: span 4; }
    .gallery--room > :nth-child(2),
    .gallery--room > :nth-child(3) { grid-column: span 2; }
    .gallery--room > :nth-child(n+4) { grid-column: span 2; }
  }
  .gallery--room .media { border-radius: var(--radius-soft); }
}

@layer components {
  /* On a narrow screen a 16:9 hero is cropped hard to the centre, which on this
     photograph is mostly canopy. Shift the framing towards the building. */
  @media (max-width: 48rem) {
    .hero--brand .media img { object-position: 64% 58%; }
    .roomhero .media img { object-position: 50% 45%; }
  }

  /* The interpunct separators are fine on one line and look like a typo at the
     start of a wrapped one. Below the point where the facts fit across, space
     them instead. */
  .showcase__facts { gap: 0.35rem 1.35rem; }
  .showcase__facts li + li::before { content: none; }
  @media (min-width: 64rem) {
    .showcase__facts li + li::before { content: "· "; color: var(--stone-400); }
  }
  .room-card__meta span + span::before { content: none; }
  .room-card__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
  @media (min-width: 64rem) {
    .room-card__meta { display: block; }
    .room-card__meta span + span::before { content: " · "; }
  }
}

@layer components {
  /* A centred intro needs its statement centred too, and its measure widened
     so two lines do not become five. */
  .text-center .statement { text-align: center; }
  .text-center .lede, .text-center p { margin-inline: auto; }
  .text-center .statement--wide { max-width: 22ch; }
}

@layer components {
  /* A feature row with no photograph yet reads as a two-column entry with a
     hole in it. Give it the full measure instead. */
  @media (min-width: 56rem) {
    .feature-row--textonly { grid-template-columns: minmax(0, 1fr); }
    .feature-row--textonly .stack { max-width: var(--measure-wide); }
  }
}

/* ==========================================================================
   Phase 2.2 — VISUAL AMPLIFICATION.

   The Phase 2 correction fixed the photography and the copy but left the page
   quiet: an editorial rhythm of text, photograph, text, photograph, all inside
   one wrap, on one cream ground. Read against the live site it lost, because
   the live site — for all its faults — fills the screen with pictures.

   This layer changes the loudness, not the taste:

     · a cinematic full-screen hero that cycles photographs and can take video
     · the brand crest, which existed all along and was never used
     · a booking dock that overlaps the hero
     · a dark room theatre with a real, custom, accessible slider
     · full-bleed compositions with overlap and parallax rather than boxed rows
     · one genuine wow moment at the lake
     · motion with enough travel to be felt

   Nothing above is deleted. Everything here only adds or overrides.
   ========================================================================== */

@layer tokens {
  :root {
    /* The crest is #0f3b52. It has been the brand mark all along; the palette
       never contained it. Now it carries the header, the room theatre and the
       lake. */
    --navy-950: #071d29;
    --navy-900: #0b2c3e;
    --navy-800: #0f3b52;
    --navy-700: #17516d;

    /* One thin gold note, for keylines and eyebrows on dark ground only —
       never for text that has to be read at body size. */
    --brass-300: #c9a06c;
    --brass-200: #ddc0a0;

    --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

    /* Instrument Serif is a display face: high contrast, generous width, and
       weak below about 1.4rem. Anything smaller than a section heading is set
       in Archivo, which is what makes the pairing usable rather than pretty. */
    --shadow-dock: 0 2px 4px rgba(7, 29, 41, 0.08), 0 28px 60px -24px rgba(7, 29, 41, 0.42);
    --dur-cine: 1800ms;
    --header-h: 4.75rem;
  }
}

@layer base {
  /* Instrument Serif sits optically larger and lighter than Newsreader, so the
     display sizes come down slightly and the tracking opens up. */
  h1, h2, .display, .statement, .band__title, .hero__brandname { letter-spacing: -0.012em; }
  h3, h4, h5 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.005em; }
}

@layer components {

  /* ------------------------------------------------------------------ *
   * The crest.                                                          *
   * ------------------------------------------------------------------ */
  .crest { display: block; width: auto; }
  .crest--header { height: 2.9rem; }
  .crest--hero { height: clamp(4.2rem, 7vw, 6rem); margin: 0 auto var(--sp-m); }
  @media (min-width: 56rem) { .crest--header { height: 3.35rem; } }

  /* ------------------------------------------------------------------ *
   * Header. Transparent over a hero, navy once it leaves it.            *
   * ------------------------------------------------------------------ */
  /* Still sticky, not fixed: a hero pulls itself up underneath the header
     with a negative margin, and every other page relies on the header
     occupying its own space in flow. Only the colour behaviour changes. */
  .site-header {
    background: transparent;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    transition:
      background var(--dur-mid) var(--ease-settle),
      border-color var(--dur-mid) var(--ease-settle);
  }
  .site-header__inner { display: flex; align-items: center; gap: var(--sp-m); }
  .site-header[data-over-hero="true"] {
    background: linear-gradient(to bottom, rgba(7, 29, 41, 0.55), rgba(7, 29, 41, 0));
    border-bottom-color: transparent;
  }
  .site-header[data-over-hero="false"] {
    background: color-mix(in srgb, var(--navy-900) 95%, transparent);
    border-bottom-color: rgba(201, 160, 108, 0.22);
    backdrop-filter: saturate(140%) blur(10px);
  }
  /* Pages without a hero start solid rather than flashing transparent. */
  .site-header:not([data-over-hero]) {
    background: var(--navy-900);
    border-bottom-color: rgba(201, 160, 108, 0.22);
  }
  .site-header .wordmark,
  .site-header .nav__link,
  .site-header .header__phone,
  .site-header .nav-toggle { color: #fff; }
  .site-header .wordmark__sub { color: rgba(255, 255, 255, 0.62); }
  .site-header .nav__link {
    font-size: var(--step--2);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    padding-block: 0.4rem;
  }
  .site-header .nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--brass-300);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-mid) var(--ease-settle);
  }
  .site-header .nav__link:hover::after,
  .site-header .nav__link[aria-current]::after { transform: scaleX(1); }
  .site-header .header__phone { font-size: var(--step--2); letter-spacing: 0.06em; opacity: 0.85; }
  .brandlock { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
  .brandlock__text { display: grid; line-height: 1.1; }
  .brandlock__name {
    font-family: var(--font-display);
    font-size: 1.32rem;
    letter-spacing: 0.005em;
    color: #fff;
  }
  .brandlock__sub {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 0.18rem;
  }
  @media (max-width: 32rem) { .brandlock__text { display: none; } }
  .site-header .btn--book {
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
  }

  /* ------------------------------------------------------------------ *
   * Cinematic hero.                                                     *
   * ------------------------------------------------------------------ */
  .hero--cine {
    position: relative;
    min-height: min(56rem, 100svh);
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy-950);
    color: #fff;
  }
  .hero--cine .hero__stage { position: absolute; inset: 0; z-index: -2; }
  .hero__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-cine) linear;
    will-change: opacity;
  }
  .hero__frame[data-active] { opacity: 1; }
  .hero__frame .media,
  .hero__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
  }
  .hero__frame .media img { object-position: var(--focus, 50% 50%); }
  .hero--cine::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to bottom, rgba(7, 29, 41, 0.66) 0%, rgba(7, 29, 41, 0) 24%),
      linear-gradient(to top, rgba(7, 22, 15, 0.88) 0%, rgba(7, 22, 15, 0.42) 40%, rgba(7, 22, 15, 0.24) 62%, rgba(7, 22, 15, 0.30) 100%),
      radial-gradient(78% 58% at 50% 62%, rgba(6, 18, 26, 0.42), transparent 72%);
  }
  .hero--cine .hero__body {
    padding-block: calc(var(--header-h) + var(--sp-2xl)) var(--sp-2xl);
    text-align: center;
    display: grid;
    justify-items: center;
  }
  .hero__place {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 var(--sp-m);
    display: flex;
    align-items: center;
    gap: 0.9em;
  }
  .hero__place::before,
  .hero__place::after {
    content: "";
    width: clamp(1.4rem, 5vw, 3.2rem);
    height: 1px;
    background: rgba(201, 160, 108, 0.7);
  }
  /* Once the place name wraps, the rules end up stranded at the screen edges. */
  @media (max-width: 30rem) {
    .hero__place { display: block; }
    .hero__place::before, .hero__place::after { content: none; }
  }
  .hero--cine .hero__brandname {
    font-size: clamp(3.3rem, 1.1rem + 9.6vw, 9.5rem);
    line-height: 0.9;
    letter-spacing: -0.015em;
    text-shadow: 0 3px 60px rgba(4, 12, 8, 0.5);
    margin: 0;
  }
  .hero__promise {
    font-family: var(--font-sans);
    font-weight: 300;
    font-size: clamp(1.02rem, 0.9rem + 0.55vw, 1.3rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    max-width: 40ch;
    margin: var(--sp-m) auto 0;
    text-wrap: balance;
  }
  .hero--cine .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-s);
    justify-content: center;
    margin-top: var(--sp-xl);
  }
  .hero--cine .btn { box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.85); }

  /* Frame indicators. Four hairlines, not a row of dots. */
  /* In flow beneath the buttons by default, which is the only place they fit
     on a phone. On a wide screen they lift out to the bottom right, clear of
     the booking dock below and of the call to action above. */
  .hero__ticks {
    margin: var(--sp-l) 0 0;
    display: flex;
    gap: 0.55rem;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .hero__ticks > li { margin: 0; }
  .hero__tick {
    appearance: none;
    border: 0;
    padding: 0.55rem 0;
    background: none;
    cursor: pointer;
    width: clamp(1.6rem, 4vw, 2.6rem);
  }
  .hero__tick::before {
    content: "";
    display: block;
    height: 2px;
    background: rgba(255, 255, 255, 0.34);
    transition: background var(--dur-mid) var(--ease-settle);
  }
  .hero__tick[aria-current="true"]::before { background: var(--brass-200); }
  .hero__tick:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  @media (min-width: 48rem) {
    .hero__ticks { position: absolute; right: var(--gutter); bottom: 5.4rem; margin: 0; }
  }

  .hero--cine .hero__scroll {
    left: var(--gutter);
    right: auto;
    bottom: 5.25rem;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.24em;
  }

  /* ------------------------------------------------------------------ *
   * Booking dock. Overlaps the hero; the first thing below the fold.    *
   * ------------------------------------------------------------------ */
  .dock { position: relative; z-index: 5; }
  .dock__inner {
    background: var(--paper-000);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-dock);
    padding: var(--sp-m) var(--sp-l) var(--sp-l);
    margin-top: -3.25rem;
    border-top: 3px solid var(--cta);
  }
  @media (min-width: 56rem) {
    .dock__inner { margin-top: -4.25rem; padding: var(--sp-l) var(--sp-xl); }
  }
  .dock__title {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 var(--sp-s);
    text-align: center;
  }
  .dock .booking-bar { background: transparent; padding: 0; border: 0; }
  .dock .booking-bar__form { align-items: end; }
  @media (min-width: 56rem) {
    .dock .booking-bar__form {
      display: grid;
      grid-template-columns: 1fr 1fr 0.8fr auto;
      gap: var(--sp-m);
    }
  }
  .dock .field > label {
    color: var(--ink-soft);
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .dock .field input,
  .dock .field select {
    background: transparent;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    padding-inline: 0;
    font-size: var(--step-0);
    min-height: 3rem;
  }
  .dock .field input:focus-visible,
  .dock .field select:focus-visible { outline-offset: 4px; }
  .dock .btn { width: 100%; }
  @media (min-width: 56rem) { .dock .btn { width: auto; } }
  .dock .booking-bar__note {
    margin-top: var(--sp-m);
    font-size: var(--step--2);
    color: var(--ink-soft);
    text-align: center;
  }

  /* ------------------------------------------------------------------ *
   * Overlap composition. Two photographs and a panel that crosses them. *
   * ------------------------------------------------------------------ */
  .overlap { position: relative; display: grid; gap: var(--sp-m); }
  .overlap__main { position: relative; overflow: hidden; border-radius: var(--radius-soft); }
  .overlap__aside { position: relative; overflow: hidden; border-radius: var(--radius-soft); }
  /* Below the two-column layout the aside is a detail, not a second hero:
     it steps in from the right and tucks under the lead frame. */
  @media (max-width: 55.99rem) {
    .overlap__aside { width: 60%; justify-self: end; margin-top: calc(var(--sp-xl) * -1); box-shadow: 0 0 0 6px var(--bg); }
  }
  .overlap__body { align-self: center; }
  @media (min-width: 56rem) {
    .overlap {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
      column-gap: var(--sp-2xl);
      align-items: center;
    }
    .overlap:has(.overlap__aside) { padding-bottom: 5rem; }
    .overlap__main { grid-column: 1; grid-row: 1; }
    .overlap__body { grid-column: 2; grid-row: 1; }
    .overlap__aside {
      position: absolute;
      z-index: 2;
      /* Sized and placed to cross the lead frame's outer edge and stop short
         of the text column, so it reads as depth rather than an obstruction. */
      width: 26%;
      max-width: 18rem;
      left: 30%;
      bottom: 0;
      box-shadow: var(--shadow-dock);
      border: 6px solid var(--bg);
      border-radius: 4px;
    }
    .overlap--flip .overlap__main { grid-column: 2; }
    .overlap--flip .overlap__body { grid-column: 1; }
    .overlap--flip .overlap__aside { left: auto; right: 30%; }
  }

  /* ------------------------------------------------------------------ *
   * Room theatre. A dark stage, and a real slider.                      *
   * ------------------------------------------------------------------ */
  .theatre {
    background: var(--navy-900);
    color: var(--ink-invert);
    padding-block: var(--sp-3xl) var(--sp-2xl);
    position: relative;
    overflow: hidden;
  }
  .theatre::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201, 160, 108, 0.45), transparent);
  }
  .theatre :is(h2, h3) { color: #fff; }
  .theatre .eyebrow, .theatre .hero__eyebrow { color: var(--brass-300); }
  .theatre__head {
    display: grid;
    gap: var(--sp-m);
    align-items: end;
    margin-bottom: var(--sp-xl);
  }
  @media (min-width: 56rem) {
    .theatre__head { grid-template-columns: minmax(0, 1fr) auto; }
  }
  .theatre__title { font-size: var(--step-5); line-height: 1.05; margin: 0; }
  .theatre__lede { color: rgba(255, 255, 255, 0.72); max-width: 46ch; margin-top: var(--sp-s); }

  .slider { position: relative; }
  .slider__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the viewport edge so the next slide is visibly cut off — that
       cut edge is what tells a guest there is more to see. */
    margin-inline: calc(50% - 50vw);
    padding-inline: max(var(--gutter), calc(50vw - var(--wrap) / 2));
    /* Without this the snap points sit at the container edge and the first
       slide scrolls out from under its own gutter on load. */
    scroll-padding-inline: max(var(--gutter), calc(50vw - var(--wrap) / 2));
  }
  .slider__viewport::-webkit-scrollbar { display: none; }
  .slider__viewport:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 6px; }
  .slider__track {
    display: flex;
    gap: var(--sp-m);
    padding: 0.25rem 0;
    margin: 0;
    list-style: none;
  }
  .slider__track > li { margin: 0; }
  .slider__slide {
    flex: 0 0 auto;
    width: min(82vw, 24rem);
    scroll-snap-align: start;
  }
  @media (min-width: 56rem) { .slider__slide { width: 30rem; } }
  @media (min-width: 90rem) { .slider__slide { width: 33rem; } }
  .slider[data-dragging] .slider__viewport { scroll-behavior: auto; cursor: grabbing; }
  .slider[data-dragging] a { pointer-events: none; }

  .slider__controls {
    display: flex;
    gap: var(--sp-2xs);
    align-items: center;
  }
  .slider__btn {
    appearance: none;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: transparent;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-settle),
                border-color var(--dur-fast) var(--ease-settle),
                opacity var(--dur-fast) linear;
  }
  .slider__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--brass-300); }
  .slider__btn[disabled] { opacity: 0.3; cursor: default; }
  .slider__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .slider__progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.16);
    margin-top: var(--sp-l);
    position: relative;
    overflow: hidden;
  }
  .slider__progress::after {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 0;
    width: var(--slider-thumb, 30%);
    transform: translateX(var(--slider-pos, 0%));
    background: var(--brass-300);
    transition: transform 220ms var(--ease-settle);
  }

  /* A room, as a slide. */
  .roomslide { display: block; text-decoration: none; color: inherit; position: relative; }
  .roomslide__media {
    overflow: hidden;
    border-radius: var(--radius-soft);
    position: relative;
  }
  .roomslide__media .media {
    border-radius: 0;
    transition: transform 1200ms var(--ease-drift), filter 600ms var(--ease-settle);
  }
  .roomslide:hover .roomslide__media .media,
  .roomslide:focus-visible .roomslide__media .media { transform: scale(1.05); }
  .roomslide__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 29, 41, 0.72), rgba(7, 29, 41, 0) 46%);
    opacity: 0;
    transition: opacity var(--dur-mid) var(--ease-settle);
  }
  .roomslide:hover .roomslide__media::after,
  .roomslide:focus-visible .roomslide__media::after { opacity: 1; }
  .roomslide__body { padding-top: var(--sp-m); display: grid; gap: 0.4rem; }
  .roomslide__name {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.1;
    color: #fff;
    margin: 0;
  }
  .roomslide__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--2);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
  }
  .roomslide__facts li { margin: 0; }
  .roomslide__cue {
    margin-top: 0.35rem;
    font-size: var(--step--2);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-300);
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  .roomslide__cue::after {
    content: "";
    width: 1.4rem;
    height: 1px;
    background: currentColor;
    transition: width var(--dur-mid) var(--ease-settle);
  }
  .roomslide:hover .roomslide__cue::after,
  .roomslide:focus-visible .roomslide__cue::after { width: 2.6rem; }
  .roomslide:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 8px; border-radius: 4px; }

  /* The last slide: everything the six do not show. */
  .roomslide--all .roomslide__media {
    display: grid;
    place-content: center;
    text-align: center;
    aspect-ratio: 3 / 2;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(23, 81, 109, 0.55), transparent 70%),
      var(--navy-950);
    padding: var(--sp-l);
  }
  .roomslide--all .roomslide__media::after { content: none; }
  .roomslide--all b {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-4);
    color: #fff;
    line-height: 1;
  }
  .roomslide--all span {
    display: block;
    margin-top: var(--sp-s);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--step--1);
    max-width: 28ch;
    margin-inline: auto;
  }

  /* ------------------------------------------------------------------ *
   * Collage. Full-bleed, near-viewport, with real parallax.             *
   * ------------------------------------------------------------------ */
  .collage { display: grid; gap: var(--sp-s); }
  .collage__frame { position: relative; overflow: hidden; border-radius: var(--radius-soft); }
  .collage__frame .media { border-radius: 0; height: 100%; }
  @media (min-width: 56rem) {
    .collage {
      grid-template-columns: 1.5fr 1fr;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: var(--sp-m);
      height: clamp(34rem, 82vh, 52rem);
    }
    .collage__frame--lead { grid-row: span 2; }
    .collage__frame .media { position: absolute; inset: 0; aspect-ratio: auto; }
  }
  .collage__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--sp-2xl) var(--sp-m) var(--sp-m);
    background: linear-gradient(to top, rgba(8, 18, 13, 0.86), transparent);
    color: #fff;
    pointer-events: none;
  }
  .collage__label b {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-2);
    line-height: 1.1;
  }
  .collage__label span {
    display: block;
    margin-top: 0.3em;
    font-size: var(--step--1);
    color: rgba(255, 255, 255, 0.8);
    max-width: 32ch;
  }

  /* ------------------------------------------------------------------ *
   * The lake. The one section built to stop a scroll.                   *
   * ------------------------------------------------------------------ */
  .lake {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    background: var(--navy-950);
    color: #fff;
    isolation: isolate;
    overflow: hidden;
  }
  .lake__lead {
    text-align: center;
    padding-block: var(--sp-3xl) var(--sp-2xl);
    position: relative;
    z-index: 2;
  }
  .lake__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass-300);
    margin: 0 0 var(--sp-m);
  }
  .lake__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6rem);
    line-height: 0.98;
    margin: 0 auto;
    max-width: 16ch;
    color: #fff;
  }
  .lake__text {
    margin: var(--sp-l) auto 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.78);
    font-size: var(--step-1);
    line-height: 1.55;
  }
  .lake__actions { margin-top: var(--sp-xl); display: flex; justify-content: center; gap: var(--sp-s); flex-wrap: wrap; }
  .lake__stage {
    position: relative;
    height: clamp(22rem, 62vh, 44rem);
    overflow: hidden;
  }
  .lake__stage .media {
    position: absolute;
    inset: -8%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .lake__stage .media img { height: 100%; width: 100%; object-fit: cover; }
  .lake__stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(7, 29, 41, 0.9) 0%, rgba(7, 29, 41, 0.12) 34%, rgba(7, 29, 41, 0.1) 66%, rgba(7, 29, 41, 0.72) 100%);
  }
  .lake__facts {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--sp-m);
    padding-block: var(--sp-2xl);
    border-top: 1px solid rgba(201, 160, 108, 0.28);
    margin-top: 0;
  }
  @media (min-width: 48rem) { .lake__facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); } }
  .lake__fact b {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-3);
    color: #fff;
    line-height: 1;
  }
  .lake__fact span {
    display: block;
    margin-top: 0.5em;
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--step--1);
    line-height: 1.5;
  }

  /* ------------------------------------------------------------------ *
   * Warm band. Used for dining, where the page should get warmer.       *
   * ------------------------------------------------------------------ */
  .warm {
    background:
      radial-gradient(90% 120% at 12% 0%, #f6ece0 0%, transparent 62%),
      linear-gradient(to bottom, #f5eadd, #f1e4d5);
  }
  .warm .eyebrow { color: var(--cta); }

  /* ------------------------------------------------------------------ *
   * Good to know. One quiet row, not a whole section of caveats.        *
   * ------------------------------------------------------------------ */
  .knowrow {
    display: grid;
    gap: var(--sp-m);
    align-items: center;
    padding: var(--sp-l) 0;
    border-block: 1px solid var(--rule);
  }
  @media (min-width: 56rem) {
    .knowrow { grid-template-columns: minmax(0, 1fr) auto; }
  }
  .knowrow__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--ink-muted);
    font-size: var(--step--1);
  }
  .knowrow__list li { margin: 0; }
  .knowrow__list b { color: var(--ink); font-weight: 600; }

  /* Value strip, on navy, immediately under the dock. */
  .strip--dark {
    background: var(--navy-950);
    color: rgba(255, 255, 255, 0.86);
    border: 0;
  }
  .strip--dark .strip__list li b { color: #fff; }
  .strip--dark .strip__list li { color: rgba(255, 255, 255, 0.62); }

  /* Section that runs edge to edge without a wrap. */
  .bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
}

/* ==========================================================================
   Motion. Larger travel, coordinated sequences, and a hero that moves.
   ========================================================================== */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {

    /* Reveal travel roughly doubles. The old 30px rise was invisible at any
       realistic scroll speed. */
    .js [data-reveal="rise"]:not([data-revealed]) { transform: translateY(56px); opacity: 0.001; }
    .js [data-reveal="slide"]:not([data-revealed]) { transform: translateX(72px); opacity: 0.001; }
    .js [data-reveal="slide-left"]:not([data-revealed]) { transform: translateX(-72px); opacity: 0.001; }
    .js [data-reveal="zoom"]:not([data-revealed]) { transform: scale(1.09); opacity: 0.001; }
    .js [data-reveal="mask"]:not([data-revealed]) { clip-path: inset(0 0 100% 0); }
    .js [data-reveal="mask-left"]:not([data-revealed]) { clip-path: inset(0 100% 0 0); }
    .js [data-reveal="mask-left"] {
      clip-path: inset(0 0 0 0);
      transition: clip-path 1200ms var(--ease-drift) var(--reveal-delay, 0ms);
    }

    /* A sequence: children animate in a declared order, not all at once. */
    .js [data-seq] > * { --reveal-delay: 0ms; }

    /* Ken Burns on the active hero frame. Each frame drifts for its whole
       time on screen, so the picture is never still. */
    .hero__frame .media { transform: scale(1.0); }
    .hero__frame[data-active] .media {
      animation: bb-kenburns 11000ms var(--ease-drift) forwards;
    }
    .hero__frame[data-active][data-kb="2"] .media { animation-name: bb-kenburns-2; }
    .hero__frame[data-active][data-kb="3"] .media { animation-name: bb-kenburns-3; }

    @keyframes bb-kenburns {
      from { transform: scale(1.02) translate3d(0, 0, 0); }
      to   { transform: scale(1.12) translate3d(-1.2%, -1%, 0); }
    }
    @keyframes bb-kenburns-2 {
      from { transform: scale(1.12) translate3d(1%, 0.8%, 0); }
      to   { transform: scale(1.02) translate3d(0, 0, 0); }
    }
    @keyframes bb-kenburns-3 {
      from { transform: scale(1.03) translate3d(1.4%, 0, 0); }
      to   { transform: scale(1.13) translate3d(-0.6%, -1.4%, 0); }
    }

    /* Hero entrance. Staged, and slower than a UI animation would be. */
    .js .hero--cine[data-settle]:not([data-settle="done"]) :is(.crest--hero, .hero__place, .hero__brandname, .hero__promise, .hero__actions) {
      opacity: 0.001;
      transform: translateY(26px);
    }
    .hero--cine[data-settle] :is(.crest--hero, .hero__place, .hero__brandname, .hero__promise, .hero__actions) {
      transition: opacity 1100ms var(--ease-settle), transform 1100ms var(--ease-settle);
    }
    .hero--cine[data-settle="done"] :is(.crest--hero, .hero__place, .hero__brandname, .hero__promise, .hero__actions) {
      opacity: 1;
      transform: none;
    }
    .hero--cine[data-settle] .hero__place      { transition-delay: 160ms; }
    .hero--cine[data-settle] .hero__brandname  { transition-delay: 280ms; }
    .hero--cine[data-settle] .hero__promise    { transition-delay: 460ms; }
    .hero--cine[data-settle] .hero__actions    { transition-delay: 620ms; }

    /* Lake: the photograph scales as it is scrolled through. */
    .lake__stage .media { transform: scale(var(--lake-scale, 1.06)); transition: none; }

    /* Parallax targets translate rather than reflow. */
    [data-parallax-media] .media img,
    [data-parallax-media] > .media { transform: translate3d(0, var(--parallax, 0px), 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__frame { transition: none; }
    .slider__viewport { scroll-behavior: auto; }
  }
}

@layer utilities {
  .u-flush { padding-block: 0; }
  .u-tight-top { padding-block-start: var(--sp-xl); }
  .measure-wide { max-width: var(--measure-wide); }
}

@layer components {

  /* --- Quiet interlude ---------------------------------------------------
     Warm ground, the crest at low opacity behind the type, and nothing to
     look at but the sentence. Used where the page should breathe between two
     photographic peaks — and where honest photography does not exist yet. */
  .interlude { position: relative; overflow: hidden; isolation: isolate; }
  .interlude__mark {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: clamp(18rem, 34vw, 30rem);
    opacity: 0.055;
    pointer-events: none;
  }
  .interlude__mark img { width: 100%; height: auto; display: block; }
  .interlude__body { position: relative; }
  .interlude::before,
  .interlude::after {
    content: "";
    position: absolute;
    inset-inline: 20%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(143, 87, 48, 0.35), transparent);
  }
  .interlude::before { top: 0; }
  .interlude::after { bottom: 0; }

  /* A band tall enough to count as a stop rather than a divider. */
  .band--tall { min-height: clamp(28rem, 72vh, 46rem); }

  /* The warm ground has to be visibly warmer than the paper either side of
     it, or the section reads as one more cream block. */
  .warm {
    background:
      radial-gradient(100% 130% at 15% 0%, #f8ead9 0%, transparent 60%),
      linear-gradient(to bottom, #f4e6d4, #efdfca);
  }

  /* The lake lead was carrying more empty navy than it needed. */
  .lake__lead { padding-block: var(--sp-2xl) var(--sp-xl); }
}

@layer components {
  /* --- Corrections found by looking at the rendered page ----------------- */

  /* Base sets a reading measure on every paragraph, which quietly stopped
     centred band copy from actually centring. */
  .band--center .band__body > * { margin-inline: auto; }
  .dock .booking-bar__note { margin-inline: auto; max-width: 56ch; }

  /* The overlap composition read as one very tall portrait with the text
     stranded beside it. Giving the lead frame a real height turns it back
     into a composition. */
  @media (min-width: 56rem) {
    .overlap__main {
      height: clamp(30rem, 64vh, 42rem);
    }
    .overlap__main .media {
      height: 100%;
      aspect-ratio: auto;
    }
  }

  /* Dead ground, trimmed: navy under the lake facts, and cream between the
     glance strip and the first composition. */
  .lake__facts { padding-block: var(--sp-xl) var(--sp-2xl); }
  .page-home #inn { padding-block: var(--sp-2xl); }
  .interlude { padding-block: var(--sp-2xl); }
}

@layer components {
  /* --- Photographic page hero -------------------------------------------
     The interior-page counterpart of the homepage hero: one photograph, the
     title over it, and nothing else. Shorter than the homepage, because these
     pages are being read rather than sold to. */
  .pagehero {
    position: relative;
    display: grid;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(24rem, 58svh, 36rem);
    margin-top: calc(var(--header-h) * -1);
    padding-top: var(--header-h);
    background: var(--navy-950);
    color: #fff;
  }
  .pagehero--tall { min-height: clamp(28rem, 74svh, 46rem); }
  .pagehero > .media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .pagehero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to bottom, rgba(7, 29, 41, 0.62) 0%, rgba(7, 29, 41, 0) 26%),
      linear-gradient(to top, rgba(7, 22, 15, 0.88) 0%, rgba(7, 22, 15, 0.32) 46%, rgba(7, 22, 15, 0.06) 74%);
  }
  .pagehero__body { padding-block: var(--sp-2xl) var(--sp-xl); }
  .pagehero__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--step--2);
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--brass-200);
    margin: 0 0 var(--sp-s);
  }
  .pagehero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
    line-height: 0.98;
    color: #fff;
    margin: 0;
    max-width: 18ch;
    text-shadow: 0 2px 44px rgba(6, 14, 10, 0.45);
  }
  .pagehero__lede {
    margin-top: var(--sp-m);
    max-width: 52ch;
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--step-1);
    line-height: 1.5;
  }
  .pagehero .breadcrumbs,
  .pagehero .breadcrumbs a { color: rgba(255, 255, 255, 0.72); }
  .pagehero .breadcrumbs li + li::before { color: rgba(255, 255, 255, 0.4); }
  .pagehero .breadcrumbs { margin-bottom: var(--sp-m); }

  @media (prefers-reduced-motion: no-preference) {
    .js .pagehero[data-settle]:not([data-settle="done"]) :is(.pagehero__eyebrow, .pagehero__title, .pagehero__lede) {
      opacity: 0.001;
      transform: translateY(22px);
    }
    .pagehero[data-settle] :is(.pagehero__eyebrow, .pagehero__title, .pagehero__lede) {
      transition: opacity 900ms var(--ease-settle), transform 900ms var(--ease-settle);
    }
    .pagehero[data-settle="done"] :is(.pagehero__eyebrow, .pagehero__title, .pagehero__lede) {
      opacity: 1;
      transform: none;
    }
    .pagehero[data-settle] .pagehero__title { transition-delay: 110ms; }
    .pagehero[data-settle] .pagehero__lede  { transition-delay: 230ms; }
    .pagehero[data-settle] .media { transform: scale(1.05); transition: transform 2400ms var(--ease-drift); }
    .pagehero[data-settle="done"] .media { transform: scale(1); }
  }
}

@layer components {
  /* --- Rooms index grid -------------------------------------------------
     Two large frames per row rather than three small ones. Six suites is not
     a catalogue that needs compressing; it is six photographs that should be
     big enough to choose from. */
  @media (min-width: 48rem) { .room-list--3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 72rem) { .room-list--3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2xl) var(--sp-xl); } }
  .room-card__media { border-radius: var(--radius-soft); }
  .room-card:hover .room-card__media .media { transform: scale(1.045); }
  .room-card__rate { color: var(--cta); }
}

/* ==========================================================================
   Phase 2.3 — content organisation.

   The visual system from 2.2 is unchanged. What follows is the small amount of
   new layout the reorganised content needs: a place card for the local guide,
   a category head, and a preview grid for the homepage.
   ========================================================================== */

@layer components {

  /* --- Category head ----------------------------------------------------- */
  .cat__head {
    display: grid;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-xl);
    max-width: var(--measure-wide);
  }
  .cat__intro { color: var(--ink-muted); font-size: var(--step-1); line-height: 1.5; }

  /* --- Place card -------------------------------------------------------
     A guest reading this wants four things: what it is, how far, why bother,
     and how long it takes. The card is built in that order and nothing else
     is allowed in. */
  .placelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-l);
  }
  @media (min-width: 44rem) { .placelist { grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl) var(--sp-l); } }
  @media (min-width: 76rem) { .placelist { grid-template-columns: repeat(3, 1fr); } }

  .place {
    margin: 0;
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding-top: var(--sp-m);
    border-top: 1px solid var(--rule);
  }
  .place__head { display: grid; gap: 0.15rem; }
  .place__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-2);
    line-height: 1.12;
    margin: 0;
  }
  .place__kind {
    margin: 0;
    font-size: var(--step--2);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .place__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin: 0.2rem 0 0;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--cta);
    max-width: none;
  }
  .place__meta span + span::before { content: "· "; color: var(--stone-400); font-weight: 400; }
  .place__text { margin: 0; color: var(--ink-muted); max-width: none; }
  .place__note {
    margin: 0;
    font-size: var(--step--1);
    color: var(--ink-soft);
    padding-left: var(--sp-s);
    border-left: 2px solid var(--rule);
    max-width: none;
  }
  .place .link-arrow { justify-self: start; margin-top: 0.2rem; }

  .section--alt .place { border-top-color: color-mix(in srgb, var(--forest-900) 12%, transparent); }

  /* --- Preview tiles ----------------------------------------------------
     The homepage tease for Explore. Photograph where one exists, a titled
     panel where one does not, and the same card either way. */
  .previews {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-m);
  }
  @media (min-width: 40rem) { .previews { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem) { .previews { grid-template-columns: repeat(3, 1fr); } }
  .previews > li { margin: 0; }
  .preview {
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    border-radius: var(--radius-soft);
    isolation: isolate;
  }
  .preview .media { border-radius: 0; transition: transform 1100ms var(--ease-drift); }
  .preview:hover .media,
  .preview:focus-visible .media { transform: scale(1.06); }
  .preview__fill {
    aspect-ratio: 4 / 3;
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(23, 81, 109, 0.5), transparent 70%),
      var(--navy-900);
  }
  .preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 22, 15, 0.86) 0%, rgba(7, 22, 15, 0.18) 52%, transparent 78%);
  }
  .preview__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--sp-m);
    color: #fff;
  }
  .preview__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-2);
    line-height: 1.1;
    margin: 0;
    color: #fff;
  }
  .preview__meta {
    margin: 0.3rem 0 0;
    font-size: var(--step--2);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass-200);
    max-width: none;
  }
  .preview:focus-visible { outline: 2px solid var(--brass-300); outline-offset: 4px; }
}

@layer components {
  .room-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2xs);
    margin-top: var(--sp-m);
  }
}

@layer components {
  /* A room with no photograph yet, presented as a card rather than a footnote. */
  .room-card__panel {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-soft);
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--sp-l);
    background:
      radial-gradient(120% 100% at 50% 0%, rgba(23, 81, 109, 0.55), transparent 72%),
      var(--navy-900);
  }
  .room-card__panel span {
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1;
    color: rgba(255, 255, 255, 0.92);
  }
}