/* Generated by wordpress/tools/build-theme.mjs from styles/. Do not edit: change styles/ and rebuild. */
/* The single entry point for the site's CSS.
   Every stylesheet is imported here and nowhere else: importing CSS from a
   component makes the final order a property of the module graph rather than
   something we chose, and Next gives no guarantee about it.

   Order is stated once, as cascade layers, so it no longer depends on this
   import list either. Later layers win. Anything left unlayered outranks all
   of them, which is the escape hatch, so keep it to the handful of rules at
   the bottom of this file. */
@layer tokens, base, primitives, components;

/* Fonts, self-hosted from the theme (public/fonts in the repo). */
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { --font-newsreader: "Newsreader"; --font-archivo: "Archivo"; }


/* styles/tokens/colors.css */
@layer tokens {
  :root {
    /* ── Wine (from the logo mark) ─────────────────────────────── */
    --wine-900: #4A1416;
    --wine-800: #63191C;
    --wine-700: #7C2226; /* brand primary — the logo red */
    --wine-600: #8F3A35;
    --wine-300: #D9B4B0;
    --wine-100: #EFE0DE;
    --wine-50:  #F8EEEC;

    /* ── Charcoal (from the logo wordmark) ─────────────────────── */
    --char-900: #1E1F20;
    --char-800: #2B2D2E;
    --char-700: #37393A; /* brand ink */
    --char-500: #5E6162;
    --char-300: #9A9D9E;
    --char-200: #C7C9C9;
    --char-100: #E4E3E0;

    /* ── Warm paper neutrals ──────────────────────────────────── */
    --sand-50:  #FBF9F5;
    --sand-100: #F7F4EE; /* page background */
    --sand-200: #EFEAE0;
    --white:    #FFFFFF;

    /* ── Mergel (the soft yellow marl of Valkenburg and the farms around it) ── */
    --mergel-100: #F1E8CF;
    --mergel-200: #E6D8AE;
    --mergel-700: #6E5B22; /* text on mergel: 5.4:1 on --mergel-100 */

    /* ── Mauve (quiet label tone, wine desaturated) ───────────── */
    --mauve-600: #806061; /* darkened from #8A6A6B: 4.39:1 on paper, below the 4.5 floor */

    /* ── Semantic: text ───────────────────────────────────────── */
    --text-strong: var(--char-700);
    --text-body: #4B4E4F;
    --text-muted: #666A6B; /* darkened from #6E7172: 4.48:1 on paper, a hair under the floor */
    --text-label: var(--mauve-600);
    --text-accent: var(--wine-700);
    --text-on-dark: var(--sand-100);
    --text-on-dark-muted: rgba(247, 244, 238, 0.74);
    --text-label-on-dark: var(--wine-300);

    /* ── Semantic: surfaces ───────────────────────────────────── */
    --surface-page: var(--sand-100);
    --surface-card: var(--white);
    --surface-blush: var(--wine-100);
    --surface-mergel: var(--mergel-100);
    /* What a photo's box shows until the photo arrives: paper, never a colour that reads as a design choice. */
    --surface-placeholder: var(--sand-200);
    --surface-ink: var(--char-700);
    --surface-ink-deep: var(--char-900);
    --surface-accent: var(--wine-700);

    /* ── Semantic: lines, scrims, focus ───────────────────────── */
    --border-hairline: rgba(55, 57, 58, 0.14);
    --border-strong: rgba(55, 57, 58, 0.26);
    --border-on-dark: rgba(247, 244, 238, 0.16);
    --border-accent: rgba(124, 34, 38, 0.40);
    --scrim-hero: linear-gradient(180deg, rgba(30,31,32,0.42) 0%, rgba(30,31,32,0.08) 38%, rgba(30,31,32,0.84) 100%);
    --scrim-page-header: linear-gradient(180deg, rgba(30,31,32,0.30) 0%, rgba(30,31,32,0.74) 100%);
    --scrim-modal: rgba(30, 31, 32, 0.55);
    --focus-ring: var(--wine-700);
  /* Wine is ~1.2:1 against charcoal, so dark surfaces need their own ring. */
  --focus-ring-on-dark: var(--sand-100);

    /* ── Semantic: interaction ────────────────────────────────── */
    --action-primary-bg: var(--wine-700);
    --action-primary-fg: var(--sand-100);
    --action-primary-bg-hover: var(--char-700);
    --action-secondary-border: var(--border-strong);
    --action-secondary-fg: var(--char-700);
    --action-on-dark-bg: var(--sand-100);
    --action-on-dark-fg: var(--char-700);
  }
}


/* styles/tokens/typography.css */
@layer tokens {
  :root {
    /* ── Families ─────────────────────────────────────────────── */
    --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
    --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* ── Weights ──────────────────────────────────────────────── */
    --weight-display-hero: 200;   /* only for very large serif */
    --weight-display: 300;        /* the hero headline */
    --weight-display-mid: 350;    /* section headings. Newsreader is loaded through
                                     next/font as a variable face (200-800), so this
                                     is a real weight, not a snap to 300 or 400. */
    --weight-display-solid: 400;  /* small serif headings, card titles */
    --weight-body: 400;
    --weight-body-medium: 500;
    --weight-body-strong: 600;

    /* ── Display scale (fluid, serif) ─────────────────────────── */
    /* These carry the sizes the site actually renders. They used to be
       redeclared in editorial.css, with a second set inside a 760px media
       query, which is what produced the 700-760px band where type was phone
       sized inside a desktop layout. Each clamp now absorbs its own mobile
       step, so the media query is gone and there is one source for each size. */
    --text-hero: clamp(46px, 28px + 4.1vw, 88px);
    --text-page-title: clamp(46px, 28px + 4.1vw, 88px);
    --text-section: clamp(36px, 4.5vw, 60px);
    --text-subsection: clamp(28px, 3vw, 38px);
    --text-intro: clamp(25px, 2.6vw, 34px);
    --text-quote: clamp(22px, 2.6vw, 34px);
    --text-stat: 28px;          /* the host signature, a fact numeral */
    --text-card-title: 22px;    /* small serif headings: room cards, notices, related links */
    --text-dish: 18px;

    /* ── Body scale (sans) ────────────────────────────────────── */
    --text-lead: 17px;
    --text-body-lg: 16.5px;
    /* Named --text-body-md, not --text-body: tokens/colors.css already defines
       --text-body as the body ink colour. Sharing one name made whichever file
       was imported second win, so --interior-muted resolved to a length and every
       declaration using it was dropped at computed-value time. The design system
       bundle in project/tokens/ still carries the collision; this is a deliberate
       divergence from it. */
    --text-body-md: 15px;
    --text-body-sm: 14.5px;
    --text-caption: 13px;
    --text-fine: 12px;
    --text-eyebrow: 10px;
    --text-field-label: 9.5px;

    /* ── Line heights ─────────────────────────────────────────── */
    /* Eight steps, one per job. The site had twenty-three values, with
       1.6/1.62/1.65/1.7 and 1.75/1.78/1.8/1.85 as indistinguishable clusters. */
    --leading-none: 1;            /* buttons and other single-line controls */
    --leading-hero: 0.96;         /* the largest display: hero and page titles */
    --leading-display: 1.06;      /* section and card headings */
    --leading-intro: 1.22;        /* large intro paragraphs */
    --leading-quote: 1.45;        /* lead paragraphs and pull quotes */
    --leading-ui: 1.5;            /* labels, dense meta, controls */
    --leading-body-tight: 1.62;   /* dense body copy */
    --leading-body: 1.74;         /* running copy */

    /* ── Letter spacing ──────────────────────────────────────── */
    /* The negative steps carry what the display type actually renders; the
       original token values were looser than any heading on the site used. */
    --tracking-hero: -0.045em;
    --tracking-display: -0.035em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-eyebrow: 0.30em;       /* the uppercase eyebrow */
    --tracking-meta: 0.24em;          /* meta labels */
    --tracking-field-label: 0.20em;   /* form labels and dates */
    --tracking-label: 0.12em;         /* numerals and small captions */
    --tracking-caption: 0.06em;       /* photo captions */

    /* ── Measure ─────────────────────────────────────────────── */
    /* Eighteen different max-widths were in use (42, 48, 50, 54, 58, 61, 62,
       63, 68, 70ch and so on), so a paragraph changed width from section to
       section. Eight steps, by the job the text is doing. */
    --measure-heading: 13ch;   /* a two or three word display line */
    --measure-hero: 16ch;
    --measure-title: 20ch;
    --measure-quote: 26ch;
    --measure-narrow: 40ch;    /* a column beside something else */
    --measure-lead: 50ch;      /* intro paragraphs */
    --measure-body: 62ch;      /* running copy */
    --measure-wide: 70ch;      /* a full-width note */
  }
}


/* styles/tokens/spacing.css */
@layer tokens {
  :root {
    /* Base 4px rhythm, with the loose editorial steps the site actually uses. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;

    /* Fluid vertical rhythm. Thirty-seven distinct clamps were doing this job,
       so no two sections were separated by the same amount. These are the only
       ones: anything between sections, inside a band or between columns uses a
       step from here. */
    --section-gap-lg: clamp(88px, 10vw, 152px);    /* between major page sections */
    --section-gap: clamp(68px, 8vw, 112px);        /* the default */
    --section-gap-tight: clamp(56px, 7vw, 96px);   /* between related blocks */
    --band-padding: clamp(72px, 9vw, 120px);       /* inside a full-width band */
    --column-gap: clamp(36px, 5vw, 72px);          /* between columns */
    --column-gap-tight: clamp(24px, 4vw, 44px);
    --card-padding: clamp(24px, 3vw, 44px);        /* inside a white card */

    /* Page frame */
    --container-max: 1260px;
    --gutter: clamp(18px, 3vw, 28px);

    /* Two-column proportions. The site had eleven different ratios, so no two
       rows divided the page at the same point. These are the only two, each
       used in both directions:
         major/minor  running copy beside a photograph
         wide/aside   a page's content beside a narrow aside or fact list
       Both are applied with flex, not grid tracks, so a row reflows on its own
       at --grid-min-column without needing a breakpoint. Unitless, because they
       are flex-grow proportions from a zero basis: as percentage bases they and
       the column gap would add up to more than the row and wrap immediately. */
    --split-major: 58;
    --split-minor: 42;
    --split-wide: 68;
    --split-aside: 32;

    /* Grid minimums — every grid is repeat(auto-fit, minmax(<min>, 1fr)) */
    --grid-min-card: 262px;
    --grid-min-column: 320px;
    --grid-min-stat: 184px;
    --grid-min-field: 150px;

    /* Fixed UI sizes */
    --header-height: 84px;
    --touch-target: 44px;
    --touch-target-lg: 48px;
    --drawer-width: 480px;
    --hero-height: min(84vh, 780px);
    --page-header-height: clamp(280px, 46vh, 460px);
  }
}


/* styles/tokens/elevation.css */
@layer tokens {
  :root {
    /* Hotel Salden is a square-cornered brand: no rounded cards, no pills.
       The only radius in the system is the browser default on native controls. */
    --radius-none: 0;

    --border-width-hairline: 1px;
    --border-hairline-rule: 1px solid var(--border-hairline);
    --border-strong-rule: 1px solid var(--border-strong);
    --border-on-dark-rule: 1px solid var(--border-on-dark);

    /* Two shadows only, both long, low-opacity and warm-black. Everything else
       separates with a hairline rule instead of elevation. */
    --shadow-float: 0 26px 60px -34px rgba(30, 31, 32, 0.55); /* booking bar over hero */
    --shadow-drawer: -30px 0 70px -30px rgba(30, 31, 32, 0.60);

    --backdrop-blur: blur(14px);
    --header-bg-blurred: rgba(247, 244, 238, 0.96);
  }
}


/* styles/tokens/motion.css */
@layer tokens {
  :root {
    /* Slow, calm, no bounce. Nothing in the brand scales, springs or slides. */
    --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --duration-hover: 160ms;
    --duration-ui: 240ms;
    --duration-crossfade: 420ms;   /* gallery image swap */
    --duration-hero: 1400ms;       /* hero slideshow crossfade */
    --interval-hero: 6500ms;       /* hero dwell per photo */

    --transition-hover: color var(--duration-hover) var(--ease-standard),
                        background-color var(--duration-hover) var(--ease-standard),
                        border-color var(--duration-hover) var(--ease-standard);
    --transition-crossfade: opacity var(--duration-crossfade) var(--ease-standard);
    --transition-hero: opacity var(--duration-hero) var(--ease-standard);
  }
}


/* styles/app-tokens.css */
/**
 * Tones the site uses that the shared token set expresses only as solid
 * approximations. The design draws its greys as charcoal at an alpha over warm
 * paper, which reads slightly warmer than a flat hex, so the exact alphas from
 * the design live here rather than being rounded to the nearest token.
 */
@layer tokens {
  :root {
    /* Charcoal ink on paper. The ramp stops at 0.76: below that, charcoal over
       warm paper drops under the 4.5:1 contrast floor for body copy. */
    --ink-82: rgba(55, 57, 58, 0.82);
    --ink-80: rgba(55, 57, 58, 0.8);
    --ink-76: rgba(55, 57, 58, 0.76);

    /* Hairlines, lightest to strongest */
    --rule-10: rgba(55, 57, 58, 0.1);
    --rule-12: rgba(55, 57, 58, 0.12);
    --rule-14: rgba(55, 57, 58, 0.14);
    --rule-16: rgba(55, 57, 58, 0.16);
    --rule-22: rgba(55, 57, 58, 0.22);
    --rule-24: rgba(55, 57, 58, 0.24);
    --rule-26: rgba(55, 57, 58, 0.26);

    /* Sand on charcoal */
    --sand-88: rgba(247, 244, 238, 0.88);
    --sand-82: rgba(247, 244, 238, 0.82);
    --sand-80: rgba(247, 244, 238, 0.8);
    --sand-75: rgba(247, 244, 238, 0.75);
    --sand-74: rgba(247, 244, 238, 0.74);
    --sand-62: rgba(247, 244, 238, 0.62);
    --sand-36: rgba(247, 244, 238, 0.36);
    --sand-18: rgba(247, 244, 238, 0.18);
    --sand-16: rgba(247, 244, 238, 0.16);

    /* The one breakpoint in the system: below this the nine-item nav collapses. */
    --nav-breakpoint: 1080px;
  }
}


/* styles/tokens/base.css */
/* Consumer reset. Linking styles.css gives you these defaults, so a page that
   sets nothing still looks like Hotel Salden. Written only against tokens that
   exist in this system. */

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

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: var(--surface-page);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--text-body-lg);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
  }

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

  a {
    color: var(--text-accent);
    text-decoration: none;
    transition: var(--transition-hover);
  }
  a:hover { color: var(--text-strong); }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    color: var(--text-strong);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    margin: 0;
    text-wrap: pretty;
  }

  p { margin: 0; }

  blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-display);
    margin: 0;
  }

  input, select, button, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    max-width: 100%;
    border-radius: var(--radius-none);
  }

  ::selection { background: var(--surface-blush); }

  hr {
    border: 0;
    border-top: var(--border-hairline-rule);
    margin: 0;
  }
}


/* styles/primitives.css */
/* Shared building blocks: the page frame, the type roles, buttons, links and
   the two card kinds. Nothing here is rounded; --radius-none is the only radius
   in the brand. */

@layer primitives {
  /* Two-column rows. .split is the default and is symmetric; the modifiers take
     the one asymmetric ratio, in either direction. Flex rather than grid tracks,
     because grid cannot reflow unequal tracks without a media query and the
     system has exactly one breakpoint. */
  .split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--column-gap);
  }
  .split > * { flex: 1 1 0; min-width: min(100%, var(--grid-min-column)); }
  .split--lead  > :first-child { flex-grow: var(--split-major); }
  .split--lead  > :last-child  { flex-grow: var(--split-minor); }
  .split--trail > :first-child { flex-grow: var(--split-minor); }
  .split--trail > :last-child  { flex-grow: var(--split-major); }
  .split--aside > :first-child { flex-grow: var(--split-wide); }
  .split--aside > :last-child  { flex-grow: var(--split-aside); }

  /* A full-bleed band whose copy still lands on the container's content edge.
     The two middle tracks together are exactly the container's content width,
     so a heading inside .bleed-grid__copy shares its left edge with a heading
     in any .container section above or below it, at every viewport. The media
     track runs on to the edge of the page.

     --bleed-split is the share of the content width the copy takes. */
  .bleed-grid {
    --bleed-content: calc(var(--container-max) - var(--gutter) * 2);
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] minmax(0, calc(var(--bleed-content) * var(--bleed-split, 0.46)))
      [content-split] minmax(0, calc(var(--bleed-content) * (1 - var(--bleed-split, 0.46))))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
  }
  .bleed-grid__copy { grid-column: content-start / content-split; }
  .bleed-grid__media { grid-column: content-split / full-end; }

  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-inline: var(--gutter);
  }

  /* ── Type roles ──────────────────────────────────────────────────────────── */

  .eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--text-accent);
  }
  .eyebrow--on-ink { color: var(--text-label-on-dark); }
  .eyebrow--on-photo { color: var(--sand-75); }

  .meta-label {
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-meta);
    text-transform: uppercase;
    color: var(--text-label);
  }
  .meta-label--on-ink { color: var(--text-label-on-dark); }

  .hero-title {
    font-family: var(--font-display);
    font-weight: var(--weight-display-hero);
    font-size: var(--text-hero);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-hero);
    max-width: var(--measure-hero);
    text-wrap: pretty;
  }

  .page-title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-page-title);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-display);
    text-wrap: pretty;
  }

  .lead {
    font-size: var(--text-lead);
    line-height: var(--leading-body);
    color: var(--ink-80);
  }

  .body-text {
    font-size: var(--text-body-lg);
    line-height: var(--leading-body);
    color: var(--ink-80);
  }
  .body-text + .body-text { margin-top: var(--space-4); }

  /* ── Actions ─────────────────────────────────────────────────────────────── */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-none);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    line-height: var(--leading-none);
    text-align: center;
    cursor: pointer;
    min-height: var(--touch-target);
    padding: var(--space-3) var(--space-6);
    transition: var(--transition-hover);
  }

  /* Wine, going charcoal on hover. The site's one primary action. */
  .btn--primary {
    background: var(--action-primary-bg);
    color: var(--action-primary-fg);
  }
  .btn--primary:hover {
    background: var(--action-primary-bg-hover);
    color: var(--action-primary-fg);
  }

  /* Outlined on paper, filling wine on hover. */
  .btn--ghost:hover {
    background: var(--action-primary-bg);
    border-color: var(--action-primary-bg);
    color: var(--action-primary-fg);
  }

  /* Sand on the charcoal band, going wine on hover. */
  .btn--on-ink {
    background: var(--action-on-dark-bg);
    color: var(--action-on-dark-fg);
    padding: var(--space-4) 28px;
  }
  .btn--on-ink:hover {
    background: var(--action-primary-bg);
    color: var(--action-primary-fg);
  }

  /* Outlined on the charcoal band. */
  .btn--on-ink-ghost:hover {
    border-color: var(--text-on-dark);
    color: var(--text-on-dark);
  }

  .btn--lg {
    padding: var(--space-4) 28px;
    font-size: var(--text-caption);
    min-height: var(--touch-target-lg);
  }

  .btn--block {
    display: flex;
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-body-sm);
    min-height: var(--touch-target-lg);
  }

  /* Wayfinding is typographic in this brand: a word, a hairline and an arrow. */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    font-size: var(--text-body-sm);
    color: var(--text-accent);
    border-bottom: 1px solid var(--border-accent);
    padding-bottom: 3px;
    cursor: pointer;
    transition: var(--transition-hover);
  }
  .link-arrow:hover {
    color: var(--text-strong);
    border-bottom-color: var(--border-strong);
  }

  /* ── Cards ───────────────────────────────────────────────────────────────── */

  /* White means "something to read closely or fill in". Hairline, never a shadow. */

  /* A row of label/value facts inside a card. */

  /* A plain hairline-separated list of single strings. */

  .plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ── Sections ────────────────────────────────────────────────────────────── */

  /* Heading on the left, "see all" link on the right, over a hairline. */

  /* Two-column editorial row: text beside photography, never text beside text. */

  /* Photographs are square-cornered and fill their box; the photo is the card. */
  .photo {
    position: relative;
    overflow: hidden;
    background: var(--surface-placeholder);
  }
  .photo img { object-fit: cover; }

  /* The first thing a keyboard user reaches. Off screen until focused, so it
     is out of the way for everyone else. */
  .skip-link {
    position: absolute;
    z-index: 100;
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-ink);
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    transform: translateY(-200%);
  }
  .skip-link:focus-visible {
    transform: none;
  }

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

  .cover-img { object-fit: cover; }

  /* The reset colours headings explicitly, which beats inheriting from a dark
     container, so headings that sit on photography or on the charcoal band say
     so themselves. */
  .hero__inner h1,
  .page-header__inner h1,
  .ink-band h2 { color: var(--text-on-dark); }
}


/* styles/shell.css */
/* The pieces that wrap every page: contact bar, sticky header, footer, and the
   request drawer. */

@layer components {
  /* ── Contact bar ─────────────────────────────────────────────────────────── */

  .topbar {
    background: var(--surface-ink);
    color: var(--sand-82);
    font-size: var(--text-fine);
  }
  .topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    padding-block: var(--space-2);
  }
  .topbar a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: inherit;
  }
  .topbar a:hover { color: var(--text-on-dark); }
  .topbar__sep { opacity: 0.4; }

  .topbar__langs {
    display: flex;
    gap: 3px;
    margin-left: auto;
  }
  .lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-fine);
    letter-spacing: var(--tracking-label);
    color: var(--sand-62);
    background: transparent;
    transition: var(--transition-hover);
  }
  .lang:hover { color: var(--text-on-dark); }
  .lang--active {
    background: var(--sand-18);
    color: var(--text-on-dark);
  }

  /* ── Header ──────────────────────────────────────────────────────────────── */

  /* The only transparency and blur in the system: photography scrolls under the
     navigation without muddying it. */
  .header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--header-bg-blurred);
    backdrop-filter: var(--backdrop-blur);
    border-bottom: 1px solid var(--rule-12);
  }
  .header__inner {
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }
  .header__logo {
    display: flex;
    align-items: center;
    min-height: var(--touch-target);
    flex-shrink: 0;
    height: clamp(40px, 6vw, 52px);
  }
  .header__logo img {
    height: 100%;
    width: auto;
  }

  .header__nav {
    display: flex;
    gap: var(--space-4);
    row-gap: var(--space-2);
    margin-left: auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Wayfinding here is words, so these are text links rather than buttons; they
     still have to be reachable with a thumb. */
  .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-size: var(--text-caption);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    color: var(--ink-76);
    transition: var(--transition-hover);
  }
  .nav-link:hover { color: var(--text-accent); }
  .nav-link--active {
    color: var(--text-accent);
    border-bottom-color: var(--text-accent);
  }
  .header__nav .btn { margin-left: var(--space-2); }

  .header__mobile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
  }
  .header__mobile .btn { padding: var(--space-3) var(--space-4); }

  .hamburger {
    background: transparent;
    border: 1px solid var(--rule-24);
    width: 52px;
    min-height: 52px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    flex-shrink: 0;
  }
  .hamburger > span:not(.hamburger__label) {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text-strong);
  }
  .hamburger__label {
    margin-top: 1px;
    font-size: var(--text-eyebrow);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-caption);
    text-transform: uppercase;
    color: var(--text-strong);
  }

  .mobile-nav {
    border-top: 1px solid var(--rule-12);
    background: var(--surface-page);
    padding: var(--space-2) var(--gutter) var(--space-5);
    display: flex;
    flex-direction: column;
  }
  .mobile-nav__link {
    font-size: var(--text-body-lg);
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule-10);
    color: var(--ink-76);
  }
  .mobile-nav__link--active { color: var(--text-accent); }

  /* Nine navigation items do not fit below this width, so they become a menu.
     This is the only breakpoint in the system; everything else reflows on its own. */
  /* The links and the request button sit together on the right, so the button
     lines up with the language switch above it. Kept on one line: a second row
     of links reads as a mistake. */
  .header__desktop-only { flex-wrap: nowrap; }
  @media (max-width: 1239px) {
    .header__nav { gap: var(--space-3); }
  }
  @media (max-width: 1079px) {
    .header__desktop-only { display: none; }
  }
  @media (min-width: 1080px) {
    .header__mobile { display: none; }
    .mobile-nav { display: none; }
  }

  /* ── Footer ──────────────────────────────────────────────────────────────── */

  .footer {
    margin-top: var(--section-gap);
    background: var(--surface-ink);
    color: var(--sand-74);
  }
  .footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: var(--column-gap-tight);
    padding-top: var(--column-gap);
    padding-bottom: var(--space-7);
  }
  /* The reversed mark sits straight on the charcoal, with no panel behind it. */
  .footer__logo {
    height: 46px;
    width: auto;
  }
  .footer__blurb {
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
    margin-top: var(--space-4);
    max-width: var(--measure-narrow);
  }
  .footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    font-size: var(--text-body-sm);
  }
  .footer__list a,
  .footer__list .footer__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    color: var(--sand-74);
    transition: var(--transition-hover);
  }
  .footer__list a:hover,
  .footer__list .footer__link:hover { color: var(--text-on-dark); }
  .footer__link { text-align: left; }

  /* The 44px target is for thumbs. Nine of them in the footer's page list made
     that column twice the height of the ones beside it on a desktop, where a
     pointer is precise and WCAG asks for 24px. So the floor is the full target
     wherever the input is coarse, and a comfortable 32px where it is not. This
     is a capability query, not a width breakpoint. */
  @media (pointer: fine) {
    .footer__list a,
    .footer__list .footer__link { min-height: 32px; }
  }

  .footer__legal {
    border-top: 1px solid var(--sand-16);
    padding-top: var(--space-4);
    padding-bottom: 36px;
    font-size: var(--text-fine);
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  .footer__legal span[aria-hidden] { opacity: 0.5; }

  /* ── Booking form ──────────────────────────────────────────────────────── */
  .reservation-widget {
    display: block;
    width: 100%;
    min-height: 0;
    margin-top: var(--space-5);
    border: 0;
    background: var(--surface-card);
  }

  /* Shown while the third-party widget loads, and holding its own height, since
     .reservation-widget collapses to nothing until the iframe reports a size.
     A static block rather than a shimmer: prefers-reduced-motion disables every
     animation on this site, and it still has to read as a placeholder then. */
  .widget-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    margin-top: var(--space-5);
    border: var(--border-hairline-rule);
    background: var(--surface-card);
    color: var(--text-muted);
    font-size: var(--text-body-sm);
  }

  .widget-unavailable {
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: var(--border-hairline-rule);
    background: var(--surface-card);
    color: var(--text-muted);
  }

  /* ── Form fields ─────────────────────────────────────────────────────────── */

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .field__label {
    font-size: var(--text-field-label);
    letter-spacing: var(--tracking-field-label);
    text-transform: uppercase;
    color: var(--text-label);
  }
  .field__control {
    border: 1px solid var(--rule-22);
    background: var(--surface-card);
    padding: var(--space-3);
    font-size: var(--text-body-sm);
    outline: none;
    min-height: 48px;
    transition: var(--transition-hover);
  }
  /* Focus turns the border wine. No glow, no offset ring. */
  .field__control:focus { border-color: var(--focus-ring); }
  textarea.field__control { resize: vertical; }

  /* A visible focus state is essential when a sticky header is present. */

  .field-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-field)), 1fr));
    gap: var(--space-3);
  }

  .field__error {
    font-size: var(--text-fine);
    color: var(--text-accent);
  }
  .field__control[aria-invalid="true"] { border-color: var(--focus-ring); }

  .sent-card {
    margin-top: var(--space-6);
    background: var(--surface-card);
    border: var(--border-hairline-rule);
    padding: var(--space-6);
  }
  .sent-card__title {
    font-family: var(--font-display);
    font-size: var(--text-card-title);
    font-weight: var(--weight-display);
  }
  .sent-card__body {
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
    color: rgba(55, 57, 58, 0.75);
    margin-top: var(--space-3);
  }
  .sent-card__summary {
    margin-top: var(--space-4);
    border-top: 1px solid var(--rule-12);
    padding-top: var(--space-4);
    font-size: var(--text-caption);
    line-height: var(--leading-body);
    color: var(--ink-76);
  }

  /* Keep the reservation flow on the same paper surface as the website. */
  .reservation-widget { background: transparent; min-width: 0; }
  .mobile-nav { max-height: calc(100dvh - 90px); overflow-y: auto; }
  @media (max-width: 700px) {
    .header__inner { gap: var(--space-3); min-height: 76px; }
    .header__logo { height: 38px; }
    .header__mobile { gap: var(--space-2); }
    .header__mobile .btn { padding-inline: var(--space-3); }
    .topbar__inner { gap: var(--space-2) var(--space-2); }
    .topbar__langs { margin-left: 0; }
    .lang { padding-inline: var(--space-3); }
  .field__control, .request-bar__control { font-size: var(--text-body-lg); min-width: 0; width: 100%; }
  }
  /* Booking belongs to the document flow: no modal, fixed height or inner scroller. */
  .booking-page { padding-top: var(--section-gap-tight); padding-bottom: 56px; }
  .booking-page__back { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); margin-bottom:28px; }
  .booking-page h1 { font-size:var(--text-page-title); line-height: var(--leading-display); margin-bottom:var(--space-5); }
  .booking-page__intro { max-width: var(--measure-lead); margin-bottom:var(--space-7); line-height: var(--leading-body-tight); }
  .booking-page__help a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  .booking-page__help { max-width: 820px; padding-top:var(--space-6); margin-top:var(--space-6); border-top:1px solid var(--rule-24); line-height: var(--leading-body-tight); }
  /* The widget keeps a reading width; the page itself stays on the grid. The
     placeholder matches it so the layout does not jump when the widget lands. */
  .booking-page .reservation-widget,
  .booking-page .widget-loading { max-width: 820px; }
  .booking-page .reservation-widget, .booking-page iframe { display:block; width:100%; max-height:none; overflow:visible; }
  .request-bar__details,
  .request-bar__error {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--text-fine);
    line-height: var(--leading-ui);
  }
  .request-bar__details { color: var(--text-muted); }
  .request-bar__error { color: var(--text-accent); }
  .booking-page :is(h1, [role="alert"], .widget-unavailable) { scroll-margin-top: calc(var(--sticky-top, 88px) + var(--space-6)); }

  /* The 404, the one page still outside the shared templates. */
  .page-main { padding-top: var(--section-gap-tight); }
  .page-main .page-title {
    margin-top: var(--space-4);
    max-width: var(--measure-title);
  }
  .page-intro {
    max-width: var(--measure-body);
    margin-top: var(--space-5);
  }
}


/* styles/announcements.css */
/* Time-bound notices share the site's paper, wine and hairline vocabulary. */
@layer components {
  .closure-notices {
    position: relative;
    z-index: 30;
    border-bottom: 1px solid var(--border-strong);
    background: var(--surface-mergel);
    color: var(--surface-ink);
  }

  .closure-notices__inner {
    display: grid;
    grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr);
    gap: var(--column-gap-tight);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .closure-notices__label,
  .closure-notice__date,
  .seasonal-offer__eyebrow,
  .seasonal-offer__date {
    margin: 0;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-body-strong);
    line-height: var(--leading-ui);
    letter-spacing: var(--tracking-field-label);
    text-transform: uppercase;
  }

  .closure-notices__label { padding-top: 3px; color: var(--wine-700); }
  .closure-notices__list { display: grid; gap: var(--space-4); }

  .closure-notice {
    display: grid;
    grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr) auto;
    gap: var(--space-6);
    align-items: start;
  }

  .closure-notice + .closure-notice {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-hairline);
  }

  .closure-notice__date { padding-top: var(--space-1); color: var(--text-label); }
  .closure-notice__title { margin: 0; font-family: var(--font-display); font-size: var(--text-card-title); font-weight: var(--weight-display-solid); line-height: var(--leading-intro); }
  .closure-notice__copy p { max-width: var(--measure-wide); margin: var(--space-1) 0 0; color: var(--text-body); font-size: var(--text-caption); line-height: var(--leading-ui); }
  .closure-notice__action { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding: var(--space-1) 0 3px; border-bottom: 1px solid currentColor; color: var(--wine-700); font-size: var(--text-fine); white-space: nowrap; }

  .seasonal-announcements { color: var(--text-body); background: var(--surface-page); }
  .seasonal-announcements--home { padding: 0 0 var(--section-gap-lg); }
  .seasonal-announcements--arrangements { padding: var(--section-gap) 0 0; }
  .seasonal-announcements__list { display: grid; gap: var(--column-gap); }

  .seasonal-offer {
    min-height: 470px;
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
  }

  .seasonal-offer__photo { min-height: 470px; }
  .seasonal-offer__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: var(--column-gap); background: var(--sand-50); }
  .seasonal-offer__eyebrow { color: var(--wine-700); }
  .seasonal-offer__date { margin-top: var(--space-6); color: var(--text-label); }
  .seasonal-offer__copy h2 { margin-top: var(--space-3); color: var(--wine-700); font-family: var(--font-display); font-size: var(--text-section); font-weight: var(--weight-display-mid); line-height: var(--leading-hero); letter-spacing: var(--tracking-display); }
  .seasonal-offer__summary { max-width: var(--measure-lead); margin: var(--space-6) 0 0; color: var(--text-body); font-size: var(--text-body-md); line-height: var(--leading-body); }
  .seasonal-offer__copy .btn { margin-top: 28px; }

  .seasonal-announcements--arrangements .seasonal-offer { min-height: 390px; }
  /* The arrangements page leads with the photograph. */
  .seasonal-announcements--arrangements .seasonal-offer > :first-child { flex-grow: var(--split-minor); }
  .seasonal-announcements--arrangements .seasonal-offer > :last-child { flex-grow: var(--split-major); }
  .seasonal-announcements--arrangements .seasonal-offer__photo { min-height: 390px; }

  @media (max-width: 700px) {
    .closure-notices__inner,
    .closure-notice { grid-template-columns: 1fr; gap: var(--space-2); }
    .closure-notices__inner { padding-top: var(--space-4); padding-bottom: var(--space-4); }
    .closure-notices__list { gap: var(--space-4); }
    .closure-notice__date { padding-top: 0; }
    .closure-notice__action { justify-self: start; margin-top: 3px; }
    .seasonal-announcements--home { padding-bottom: 84px; }
    .seasonal-announcements--arrangements { padding-top: 68px; }
    .seasonal-offer,
    .seasonal-announcements--arrangements .seasonal-offer { grid-template-columns: 1fr; min-height: 0; }
    .seasonal-offer__photo,
    .seasonal-announcements--arrangements .seasonal-offer__photo { min-height: 0; height: 310px; }
    .seasonal-offer__copy { padding: 36px var(--space-6) var(--space-8); }
  }
}


/* styles/home.css */
/* Home page: hero slideshow, the request bar overlapping it, the welcome split,
   the fact strip, room cards, the charcoal restaurant band, the "also with us"
   cards and the award quote. */

@layer components {
  .hero {
    position: relative;
    height: var(--hero-height);
    min-height: 480px;
    overflow: hidden;
    background: var(--surface-ink);
  }
  /* Three photographs, crossfading only. Nothing in this brand moves in space. */
  .hero__photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: var(--transition-hero);
  }
  .hero__photo--active { opacity: 1; }
  .hero__photo img {
    object-fit: cover;
  }
  .hero__scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim-hero);
  }
  .hero__inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--section-gap-tight);
    color: var(--text-on-dark);
  }
  .hero__sub {
    max-width: var(--measure-lead);
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: var(--leading-body-tight);
    color: var(--sand-88);
    margin-top: var(--space-5);
  }

  /* ── Request bar ─────────────────────────────────────────────────────────── */

  /* Overlaps the hero. One of the only two shadows in the system. */
  .request-bar {
    position: relative;
    z-index: 5;
    margin-top: clamp(-44px, -3vw, -20px);
  }
  .request-bar__card {
    background: var(--surface-card);
    border: 1px solid var(--rule-12);
    box-shadow: var(--shadow-float);
    padding: var(--card-padding);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
    gap: var(--space-4);
    align-items: end;
  }
  .request-bar__label {
    font-size: var(--text-field-label);
    letter-spacing: var(--tracking-field-label);
    text-transform: uppercase;
    color: var(--text-label);
  }
  /* Underlined rather than boxed, so the bar reads as one line of enquiry. */
  .request-bar__control {
    border: 0;
    border-bottom: 1px solid var(--rule-24);
    background: transparent;
    padding: var(--space-2) 0;
    font-size: var(--text-body-md);
    outline: none;
    min-height: var(--touch-target);
    transition: var(--transition-hover);
  }
  .request-bar__control:focus { border-bottom-color: var(--focus-ring); }

  /* ── Welcome ─────────────────────────────────────────────────────────────── */

  /* ── Fact strip ──────────────────────────────────────────────────────────── */

  /* Hairlines drawn as grid gaps, so the strip reads as one ruled block. */

  /* ── Room cards ──────────────────────────────────────────────────────────── */

  /* Photo cards: no container, no border, no shadow. The photograph is the card. */
  .room-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-card)), 1fr));
    gap: var(--space-6);
    margin-top: var(--space-7);
  }
  .room-card__photo { height: clamp(220px, 22vw, 262px); }
  .room-card__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
    align-items: baseline;
  }
  .room-card__blurb {
    font-size: var(--text-body-sm);
    line-height: var(--leading-body-tight);
    color: var(--ink-76);
    margin-top: var(--space-2);
  }
  .room-card:hover .room-card__name { color: var(--text-accent); }
  .room-card__name { transition: var(--transition-hover); }

  /* ── Restaurant band ─────────────────────────────────────────────────────── */

  /* One dark band per page, maximum. This is the home page's. */

  /* ── Also with us ────────────────────────────────────────────────────────── */
  .more-card:hover .more-card__title { color: var(--text-accent); }

  /* ── Award quote ─────────────────────────────────────────────────────────── */

  /* Spacing the design sets on individual headings and links. */
  .welcome__body { margin-top: var(--space-6); }

  /* The "see all" link beside a section heading: no hairline, unlike a link in
     running text, because the rule under the section head already sits below it. */
  .section-head__link:hover { color: var(--text-strong); }

  @media (max-width: 700px) {
    .hero { height: auto; min-height: 440px; }
    .hero__inner { min-height: 440px; padding-top: 52px; padding-bottom: var(--space-9); }
    .hero-title { font-size: clamp(36px, 9vw, 52px); line-height: var(--leading-display); }
    .hero__sub { margin-top: var(--space-4); max-width: var(--measure-narrow); }
    .request-bar__card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
    .request-bar__card .btn { grid-column: 1 / -1; width: 100%; }
    .room-card__row { flex-wrap: wrap; gap: var(--space-2); }
  }
}


/* styles/interiors.css */
/* Premium interior pages for Hotel Salden.
   Photography stays rectangular; the shared double roofline is used as a
   transition between a photograph and the warm paper surface. */

@layer components {

  /* Moved from pages.css, the older interior layer that has now gone. The room
     gallery is the only part of it still in use. Kept ahead of the rules below
     that also target .gallery, which is where pages.css used to sit. */
  .gallery {
    position: relative;
    margin-top: 36px;
    height: clamp(260px, 42vw, 520px);
    background: var(--surface-placeholder);
    overflow: hidden;
  }
  .gallery__photo--active { opacity: 1; }

  .gallery__thumbs {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
  }
  /* Hover is a colour change only: 0.45 to 1 opacity, no lift and no scale. */
  .gallery__thumb {
    display: block;
    width: clamp(64px, 9vw, 104px);
    height: clamp(46px, 6vw, 70px);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity var(--duration-hover) var(--ease-standard);
  }
  .gallery__thumb:hover,
  .gallery__thumb--active { opacity: 1; }

  .interior-page {
    color: var(--text-strong);
    background: var(--surface-page);
  }


  /* Shared photographic masthead */
  .interior-hero {
    position: relative;
    min-height: clamp(470px, 61svh, 690px);
    overflow: hidden;
    isolation: isolate;
    background: var(--surface-ink-deep);
  }

  .interior-hero__media,
  .interior-hero__scrim {
    position: absolute;
    inset: 0;
  }

  .interior-hero__media img {
    object-fit: cover;
    object-position: center 48%;
  }

  /* The scrim is the only thing guaranteeing contrast for type on a photograph,
     and the photographs vary, so it is built for the brightest one rather than
     for the library as it stands. The content is bottom-aligned and the title
     spans roughly 17-48% up from the base, so the vertical stop holds most of
     its weight to 55% and only releases above 75%. */
  .interior-hero__scrim {
    background:
      linear-gradient(90deg, rgba(30, 31, 32, .78), rgba(30, 31, 32, .44) 46%, rgba(30, 31, 32, .1) 80%),
      linear-gradient(0deg,
        rgba(30, 31, 32, .8) 0%,
        rgba(30, 31, 32, .72) 30%,
        rgba(30, 31, 32, .52) 55%,
        rgba(30, 31, 32, .2) 75%,
        transparent 92%);
  }

  .interior-hero__content {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: var(--space-11);
    padding-bottom: var(--section-gap-tight);
    color: var(--sand-50);
  }

  .interior-hero__content .eyebrow {
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
  }

  .interior-hero__title {
    max-width: var(--measure-hero);
    margin-top: var(--space-6);
    font-family: var(--font-display);
    color: var(--sand-50);
    font-size: var(--text-page-title);
    font-weight: var(--weight-display-mid);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .editorial-page--over .interior-hero__media img { object-position: center top; }
  .interior-hero--hotel .interior-hero__media img { object-position: center 57%; }
  .interior-hero--restaurant .interior-hero__media img { object-position: center 52%; }
  .interior-hero--contact .interior-hero__media img { object-position: center 48%; }

  /* Editorial pages: one reading flow and a related fact ledger. */
  .editorial-flow {
    align-items: start;
    padding-top: var(--section-gap);
  }

  .editorial-flow__copy {
    max-width: var(--measure-body);
    padding-top: var(--card-padding);
  }

  .editorial-flow__copy .body-text {
    color: var(--text-body);
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: var(--leading-body);
  }

  .editorial-flow__copy .body-text:first-child {
    color: var(--text-strong);
    font-family: var(--font-display);
    font-size: var(--text-intro);
    font-weight: var(--weight-display-solid);
    line-height: var(--leading-quote);
    letter-spacing: var(--tracking-tight);
  }

  .editorial-flow__copy .body-text + .body-text { margin-top: var(--space-6); }
  .editorial-flow__copy .btn { margin-top: var(--space-7); }
  /* The menu card uploaded in PractiPitality, under the table button. */
  .restaurant-menu { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4); margin-top: var(--space-6); }
  .restaurant-menu__meta { color: var(--text-label); font-size: var(--text-fine); }
  /* A price the platform shares with a room or an add-on. */
  .catalog-price { margin-top: var(--space-2); color: var(--text-label); font-size: var(--text-fine); letter-spacing: var(--tracking-label); }
  .catalog-extras .room-cards { margin-top: var(--space-7); }

  .editorial-flow__photo { width: 100%; aspect-ratio: 4 / 3; align-self: center; }
  .editorial-page--over .editorial-flow__photo img { object-fit: contain; }
  .editorial-practical { padding-top: var(--section-gap-tight); padding-bottom: var(--section-gap-tight); }
  .editorial-ledger { border-top: 1px solid var(--border-hairline); padding-top: var(--space-7); }
  .editorial-ledger__head { margin-bottom: 28px; }
  .editorial-ledger__head h2 { margin-top: var(--space-3); font-family: var(--font-display); color: var(--wine-700); font-size: var(--text-section); line-height: var(--leading-display); font-weight: var(--weight-display-solid); }
  .editorial-ledger__rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-stat)), 1fr));
    gap: 28px;
    margin: 0;
  }
  .editorial-ledger__row { border-top: 1px solid var(--border-hairline); padding-top: var(--space-4); }
  .editorial-ledger dt { color: var(--wine-700); font-size: var(--text-fine); letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: var(--leading-ui); }
  .editorial-ledger dd { margin: var(--space-3) 0 0; font-size: var(--text-body-lg); line-height: var(--leading-body-tight); }
  /* A single joined photographic story, with different selections per page. */

  /* Hotel rooms: room choices are presented as variants of the same stay. */
  .hotel-introduction { padding-top: var(--section-gap); }

  .hotel-introduction__lead {
    max-width: var(--measure-narrow);
    color: var(--wine-700);
    font-family: var(--font-display);
    font-size: var(--text-intro);
    font-weight: var(--weight-display-solid);
    line-height: var(--leading-intro);
    letter-spacing: var(--tracking-tight);
  }

  .hotel-introduction__rule {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--column-gap);
    color: var(--text-label);
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-field-label);
    text-transform: uppercase;
  }

  .hotel-introduction__rule::before,
  .hotel-introduction__rule::after {
    content: "";
    height: 1px;
    background: var(--border-strong);
  }

  .hotel-introduction__rule::before { width: 58px; }
  .hotel-introduction__rule::after { flex: 1; }

  .hotel-gallery {
    padding-top: 28px;
    padding-bottom: var(--section-gap);
  }

  .interior-page .gallery {
    height: clamp(350px, 50vw, 660px);
    margin-top: 0;
    clip-path: none;
    border: 9px solid var(--sand-50);
    outline: 1px solid var(--border-hairline);
    background: var(--wine-700);
  }

  .hotel-gallery .gallery__thumbs {
    flex-wrap: nowrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .hotel-gallery .gallery__thumb {
    width: clamp(72px, 10vw, 118px);
    height: clamp(50px, 7vw, 76px);
    flex: 0 0 auto;
  }

  .hotel-rooms {
    padding-block: var(--band-padding);
    color: var(--wine-700);
    background: var(--surface-page);
    border-top: 1px solid var(--border-hairline);
  }

  .hotel-rooms__head { max-width: 780px; }

  .hotel-rooms__head h2 {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    color: var(--wine-700);
    font-size: var(--text-section);
    font-weight: var(--weight-display-mid);
    line-height: var(--leading-hero);
  }

  .hotel-rooms__head p {
    max-width: var(--measure-body);
    margin-top: var(--space-6);
    color: var(--text-body);
    font-size: var(--text-body-md);
    line-height: var(--leading-body);
  }

  .hotel-rooms__comparison {
    align-items: start;
    margin-top: var(--column-gap);
  }

  .hotel-room-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--column-gap-tight);
    align-items: center;
    padding: var(--card-padding) 0;
    border-top: 1px solid var(--border-hairline);
  }

  .hotel-room-option:last-child { border-bottom: 1px solid var(--border-hairline); }

  .hotel-room-option__number {
    color: var(--text-body);
    font-size: var(--text-fine);
    letter-spacing: var(--tracking-label);
  }

  .hotel-room-option h3 {
    font-family: var(--font-display);
    color: var(--wine-700);
    font-size: var(--text-subsection);
    font-weight: var(--weight-display-solid);
    line-height: var(--leading-display);
  }

  .hotel-room-option p {
    max-width: var(--measure-lead);
    margin-top: var(--space-2);
    color: var(--text-body);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
  }

  .hotel-amenities {
    padding-block: var(--column-gap-tight);
    color: var(--text-strong);
    background: transparent;
    border-top: 1px solid var(--border-hairline);
  }

  .hotel-amenities h2 {
    color: var(--wine-700);
    font-family: var(--font-display);
    font-size: var(--text-subsection);
    font-weight: var(--weight-display-solid);
  }

  .hotel-amenities ul { margin-top: var(--space-6); }

  .hotel-amenities li {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--rule-12);
    color: var(--text-body);
    font-size: var(--text-body-sm);
  }

  .hotel-amenities .btn { margin-top: var(--space-6); }

  /* Restaurant: copy, opening hours and plates read as one visit. */

  /* Contact: address, opening hours and request action share one service sheet. */
  .contact-introduction { padding-top: var(--section-gap); }

  .contact-introduction p {
    max-width: var(--measure-narrow);
    color: var(--wine-700);
    font-family: var(--font-display);
    font-size: var(--text-intro);
    line-height: var(--leading-intro);
  }

  .contact-sheet {
    align-items: stretch;
    padding-top: var(--section-gap-tight);
    padding-bottom: var(--space-5);
  }

  .contact-sheet__details {
    padding: var(--space-7) 0;
    border-top: 1px solid var(--wine-700);
    color: var(--wine-700);
    background: transparent;
  }

  .contact-sheet__head h2 {
    margin-top: var(--space-4);
    font-family: var(--font-display);
    color: var(--wine-700);
    font-size: var(--text-section);
    font-weight: var(--weight-display-solid);
  }

  .contact-sheet__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--column-gap);
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--border-hairline);
  }

  .contact-sheet__address,
  .contact-sheet__hours {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-body-lg);
    font-style: normal;
    line-height: var(--leading-ui);
  }

  .contact-sheet__address a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target); color: var(--wine-700); }

  .contact-sheet__address a:first-of-type {
    margin-top: var(--space-3);
    font-size: var(--text-dish);
  }

  .contact-sheet__hours .meta-label { margin-bottom: var(--space-2); }

  .contact-sheet__route {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    gap: var(--space-4);
    margin-top: var(--space-8);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-strong);
    color: var(--wine-700);
    font-size: var(--text-caption);
  }

  .contact-request {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-7) 0;
    background: transparent;
    border-top: 1px solid var(--wine-700);
  }

  .contact-request h2 {
    margin-top: var(--space-4);
    color: var(--wine-700);
    font-family: var(--font-display);
    font-size: var(--text-subsection);
    font-weight: var(--weight-display-solid);
    line-height: var(--leading-display);
  }

  .contact-request p {
    margin-top: var(--space-5);
    color: var(--text-body);
    font-size: var(--text-caption);
    line-height: var(--leading-body);
  }

  .contact-request .btn { margin-top: 28px; }

  @media (max-width: 700px) {
    .editorial-flow__copy {
      padding-right: 0;
      padding-bottom: 52px;
    }

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

    .editorial-ledger,
    .hotel-amenities,
    .contact-request {
      width: min(100%, 620px);
    }
  }

  @media (max-width: 700px) {
    .interior-hero { min-height: 410px; }

    .interior-hero__content {
      padding-top: 56px;
      padding-bottom: var(--space-10);
    }

    .interior-hero__title {
      max-width: var(--measure-heading);
      margin-top: var(--space-4);
      font-size: var(--text-page-title);
    }


    .editorial-flow__copy .body-text:first-child {
      font-size: var(--text-intro);
      line-height: var(--leading-quote);
    }

    .editorial-ledger,
    .restaurant-hours {
      width: 100%;
    }

  .hotel-introduction__lead { font-size: var(--text-intro); }
    .interior-page .gallery { height: 340px; border-width: 6px; }

    .hotel-room-option {
      grid-template-columns: auto minmax(0, 1fr);
    }

    .hotel-room-option .btn {
      grid-column: 2;
      justify-self: start;
    }

    .hotel-amenities { justify-self: stretch; }
    .contact-sheet__columns { grid-template-columns: 1fr; }
    .contact-request { width: 100%; }
  }

  .restaurant-schedule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .restaurant-schedule li { border-top: 1px solid var(--border-hairline); padding-top: var(--space-4); font-size: var(--text-body-lg); line-height: var(--leading-body-tight); }
  .restaurant-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); padding-bottom: var(--space-10); }
  .restaurant-details figure { margin: 0; }
  .restaurant-details .photo { aspect-ratio: 4 / 3; }
  .restaurant-details figcaption { padding-top: var(--space-4); color: var(--text-body); font-size: var(--text-body-sm); }
  @media (max-width: 700px) { .restaurant-schedule, .restaurant-details { grid-template-columns: 1fr; } .restaurant-details { padding-bottom: 56px; } }
  /* Shared photographic captions and guest-controlled room gallery. */
  .editorial-figure { margin: 0; align-self: center; }
  .editorial-figure figcaption,
  .room-photo-gallery figcaption { color: var(--text-body); font-size: var(--text-body-sm); line-height: var(--leading-body-tight); }
  .editorial-figure figcaption { padding-top: var(--space-4); }
  .room-photo-gallery { margin: 0; }
  .room-photo-gallery__toolbar { display: flex; justify-content: space-between; gap: var(--space-5); align-items: center; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); }
  .room-photo-gallery__count { color: var(--wine-700); white-space: nowrap; margin-right: var(--space-4); font-variant-numeric: tabular-nums; }
  .room-photo-gallery__controls { display: flex; gap: var(--space-2); flex-shrink: 0; }
  .room-photo-gallery__controls button { width: 48px; height: 48px; border: 1px solid var(--border-hairline); background: transparent; color: var(--wine-700); font-size: var(--text-card-title); cursor: pointer; }
  .room-photo-gallery__controls button:hover { background: var(--sand-50); }
  .contact-sheet { align-items: start; gap: var(--column-gap); }
  .contact-sheet__details { color: var(--text-strong); }
  .contact-request { justify-content: flex-start; }
  @media (max-width: 700px) {
    .editorial-flow__copy { padding-bottom: 0; }
  }
  @media (max-width: 700px) {
    .room-photo-gallery__toolbar { align-items: flex-start; gap: var(--space-3); }
    .room-photo-gallery__count { display: block; }
  }

  .related-pages { padding-top: var(--space-7); padding-bottom: var(--section-gap-tight); }
  .related-pages > p { margin: 0; padding-top: 28px; border-top: 1px solid var(--border-hairline); font-size: var(--text-body-sm); color: var(--text-body); }
  .related-pages ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
  .related-pages a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 48px; font-family: var(--font-display); font-size: var(--text-subsection); color: var(--wine-700); text-decoration: none; }
  .related-pages a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .related-pages a span { font-family: var(--font-body); font-size: var(--text-card-title); }
  #room-gallery-caption { margin: 0; color: var(--text-body); font-size: var(--text-body-sm); line-height: var(--leading-body-tight); }
  @media (max-width: 700px) { .related-pages ul { grid-template-columns: 1fr; gap: var(--space-3); } .related-pages a { border-bottom: 1px solid var(--border-hairline); padding: var(--space-2) 0; } }
}


/* styles/editorial.css */
/* Hotel Salden — burgundy ink, warm paper and the double roofline from the mark. */
@layer components {

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--sticky-top, 88px) + var(--space-6));
  }

  body {
    background: var(--surface-page);
  }

  .topbar {
    background: var(--surface-ink);
    color: var(--sand-80);
  }

  .topbar .lang--active {
    background: var(--sand-18);
  }

  .header {
    background: var(--header-bg-blurred);
    border-bottom-color: var(--rule-12);
  }

  .header__inner {
    min-height: 86px;
  }

  .footer {
    background: var(--surface-ink);
    border-top: 1px solid var(--border-on-dark);
  }

  .home-page {
    color: var(--text-body);
  }

  .home-page h2 {
    color: var(--wine-700);
    font-family: var(--font-display);
    font-size: var(--text-section);
    font-weight: var(--weight-display-mid);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-display);
    white-space: pre-line;
    text-wrap: balance;
  }

  .home-page p {
    line-height: var(--leading-body);
  }

  /* Used by the interior pages; the home page keeps photography rectangular. */
  .salden-roofline {
    display: block;
    pointer-events: none;
    overflow: visible;
  }

  .salden-roofline__fill {
    fill: var(--roof-fill, var(--surface-page));
  }

  .salden-roofline__line {
    fill: none;
    stroke: var(--roof-line, var(--wine-700));
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
  }

  .salden-roofline__line--inner {
    opacity: 0.7;
  }

  /* Hero */
  .home-page .hero {
    position: relative;
    isolation: isolate;
    height: min(800px, 82svh);
    min-height: 650px;
    overflow: hidden;
    background: var(--surface-ink);
  }

  .home-page .hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .home-page .hero__photo {
    inset: 0;
    opacity: 1;
    transition: none;
  }

  .home-page .hero__photo img {
    object-position: 50% 46%;
  }

  /* Same reasoning as the interior hero: the scrim is the only guarantee of
     contrast for type on a photograph, and it has to hold for the brightest
     one, not just the ones in the library today. */
  .home-page .hero__scrim {
    background:
      linear-gradient(90deg, rgba(30, 31, 32, 0.84) 0%, rgba(30, 31, 32, 0.5) 48%, rgba(30, 31, 32, 0.12) 80%),
      linear-gradient(0deg,
        rgba(30, 31, 32, 0.82) 0%,
        rgba(30, 31, 32, 0.7) 26%,
        rgba(30, 31, 32, 0.46) 52%,
        rgba(30, 31, 32, 0.18) 74%,
        transparent 92%);
  }

  .home-page .hero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--space-7);
    padding-bottom: 156px;
    color: var(--text-on-dark);
  }

  .home-page .hero__inner .eyebrow {
    margin-bottom: var(--space-6);
  }

  .home-page .hero .hero-title {
    max-width: var(--measure-heading);
    color: var(--text-on-dark);
    font-size: var(--text-page-title);
    font-weight: var(--weight-display);
    line-height: var(--leading-hero);
    letter-spacing: var(--tracking-hero);
  }

  .home-page .hero-title span,
  .home-page .hero-title em {
    display: block;
  }

  .home-page .hero-title em {
    margin-top: 0.08em;
    font-weight: var(--weight-display);
  }

  .home-page .hero__sub {
    max-width: var(--measure-lead);
    margin-top: 28px;
    color: var(--sand-88);
    font-size: var(--text-body-lg);
    line-height: var(--leading-body);
  }

  .home-page .hero__discover {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: 28px;
    color: var(--text-on-dark);
    font-size: var(--text-caption);
  }

  .home-page .hero__discover > span {
    display: inline-grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--sand-62);
  }

  .home-page .hero__caption {
    position: absolute;
    z-index: 3;
    right: max(88px, calc((100vw - 1260px) / 2 + var(--gutter) + 62px));
    bottom: 146px;
    margin: 0;
    color: var(--sand-75);
    font-size: var(--text-fine);
    letter-spacing: var(--tracking-caption);
  }

  /* Availability */
  .home-page .request-bar {
    position: relative;
    z-index: 5;
  }

  /* A card of its own over the hero's lower edge, with room inside so the fields never touch its sides. */
  .home-page .request-bar__card {
    padding: var(--space-6) var(--card-padding) 28px;
    border: 1px solid var(--border-hairline);
    background: var(--surface-card);
  }

  .home-page .request-bar__label {
    color: var(--text-label);
  }

  .home-page .request-bar__control {
    border-bottom-color: var(--border-strong);
  }

  /* Family welcome */
  .salden-welcome {
    align-items: center;
    padding-top: var(--section-gap-lg);
    padding-bottom: var(--section-gap-lg);
  }

  .salden-welcome__copy {
    max-width: 560px;
  }

  .salden-welcome__mark {
    --roof-fill: transparent;
    --roof-line: var(--wine-700);
    width: 72px;
    height: 14px;
    margin-bottom: var(--space-4);
  }

  .salden-welcome h2 {
    margin-top: var(--space-6);
  }

  .salden-welcome__body {
    margin-top: 28px;
  }

  .salden-welcome__body p {
    color: var(--text-body);
    font-size: var(--text-body-lg);
  }

  .salden-welcome__body p + p {
    margin-top: var(--space-4);
  }

  .salden-welcome__copy .link-arrow {
    margin-top: 28px;
  }

  .salden-hosts {
    --host-photo-height: clamp(390px, 42vw, 545px);
    position: relative;
    margin: 0;
    background: var(--surface-ink);
  }

  .salden-hosts__photo {
    height: var(--host-photo-height);
  }

  .salden-hosts__photo img {
    object-position: 50% 42%;
  }

  .salden-hosts figcaption {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 104px;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-5) 28px var(--space-6);
    color: var(--text-on-dark);
  }

  .salden-hosts figcaption span:first-child {
    font-family: var(--font-display);
    font-size: var(--text-stat);
    font-style: italic;
  }

  .salden-hosts figcaption span:last-child {
    color: var(--text-on-dark-muted);
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }

  /* Dining */
  .salden-table {
    min-height: 650px;
    background: var(--surface-ink);
    color: var(--text-on-dark);
  }
  .salden-table__copy { grid-column: content-start / content-split; }
  .salden-table__image { grid-column: content-split / full-end; }

  .salden-table__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-block: var(--band-padding);
    padding-right: var(--column-gap);
  }

  .salden-table__copy .eyebrow {
    color: var(--text-label-on-dark);
  }

  .salden-table h2 {
    max-width: var(--measure-heading);
    margin-top: var(--space-6);
    color: var(--text-on-dark);
  }

  .salden-table__copy > p {
    max-width: var(--measure-lead);
    margin-top: 28px;
    color: var(--sand-82);
    font-size: var(--text-body-lg);
  }

  .salden-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    margin-top: var(--space-7);
  }

  .salden-table__tel,
  .salden-table__actions > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--sand-36);
    color: var(--text-on-dark);
    font-size: var(--text-caption);
  }

  .salden-table__image {
    position: relative;
    min-width: 0;
    min-height: 650px;
    margin: 0;
  }

  .salden-table__image img {
    object-position: 48% 50%;
  }

  .salden-table__image figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--ink-82);
    color: var(--sand-82);
    font-size: var(--text-eyebrow);
    letter-spacing: var(--tracking-caption);
  }

  /* Rooms */
  .salden-stay {
    padding-top: var(--section-gap-lg);
    padding-bottom: var(--section-gap-lg);
  }

  .salden-section-intro {
    max-width: 760px;
  }

  .salden-section-intro h2 {
    max-width: var(--measure-hero);
    margin-top: var(--space-6);
  }

  .salden-section-intro p {
    max-width: var(--measure-body);
    margin-top: var(--space-6);
    color: var(--text-body);
    font-size: var(--text-body-lg);
  }

  .salden-stay__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: var(--space-8) 0 0;
    padding: 0;
    border-top: 1px solid var(--border-hairline);
    border-bottom: 1px solid var(--border-hairline);
    list-style: none;
  }

  .salden-stay__facts li {
    display: grid;
    min-height: 96px;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--space-6) var(--space-6);
    color: var(--text-body);
    font-size: var(--text-caption);
    line-height: var(--leading-ui);
  }

  .salden-stay__facts li + li {
    border-left: 1px solid var(--border-hairline);
  }

  .salden-stay__facts span {
    color: var(--wine-700);
    font-family: var(--font-display);
    font-size: var(--text-dish);
    font-style: italic;
  }

  .home-page .room-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--column-gap-tight);
    margin-top: 56px;
  }

  .home-page .room-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-width: 0;
  }

  .home-page .room-card__photo {
    height: clamp(310px, 31vw, 430px);
  }

  .home-page .room-card:hover .room-card__name {
    color: var(--surface-ink);
  }

  .home-page .room-card__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    align-items: baseline;
    margin-top: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-hairline);
  }

  .home-page .room-card__name {
    color: var(--wine-700);
    font-family: var(--font-display);
    font-size: var(--text-subsection);
    font-weight: var(--weight-display-solid);
  }

  .home-page .room-card__row > span {
    color: var(--wine-700);
    font-size: var(--text-card-title);
  }

  .home-page .room-card__blurb {
    max-width: var(--measure-lead);
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-body-sm);
  }

  .salden-stay__link {
    margin-top: var(--space-7);
  }

  /* Landscape */
  .salden-landscape {
    position: relative;
    display: flex;
    min-height: 720px;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
  }

  /* The scrim does the work, so the type sits on the photograph itself. The
     brand allows no solid capsule behind white type on an image. */
  .salden-landscape::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(30, 31, 32, 0.86) 0%, rgba(30, 31, 32, 0.74) 34%, rgba(30, 31, 32, 0.56) 50%, rgba(30, 31, 32, 0.2) 70%, transparent 84%),
      linear-gradient(0deg, rgba(30, 31, 32, 0.52), transparent 55%);
    content: "";
  }

  .salden-landscape__photo {
    position: absolute;
    z-index: -2;
    inset: 0;
  }

  .salden-landscape__photo img {
    object-position: 50% 34%;
  }

  .salden-landscape__inner {
    width: 100%;
    padding-top: var(--space-11);
    padding-bottom: 144px;
  }

  .salden-landscape__card {
    max-width: 515px;
    color: var(--text-on-dark);
  }

  .salden-landscape__card .eyebrow {
    color: var(--text-label-on-dark);
  }

  .salden-landscape h2 {
    margin-top: var(--space-6);
    color: var(--text-on-dark);
  }

  .salden-landscape__card p {
    margin-top: var(--space-6);
    color: var(--sand-82);
    font-size: var(--text-body-md);
  }

  .salden-landscape__card .link-arrow {
    margin-top: 28px;
    border-bottom-color: var(--text-on-dark);
    color: var(--text-on-dark);
  }

  /* Closing invitation */
  .salden-farewell {
    max-width: 920px;
    padding-top: 56px;
    padding-bottom: var(--section-gap);
    text-align: center;
  }

  .salden-farewell h2 {
    margin-top: var(--space-5);
  }

  .salden-farewell p {
    max-width: var(--measure-lead);
    margin: var(--space-6) auto 28px;
    color: var(--text-muted);
    font-size: var(--text-body-lg);
  }

  .home-page + .footer {
    margin-top: 0;
  }

  @media (max-width: 700px) {

    /* Stacked: the copy keeps the content width, the photograph goes full bleed.
       --bleed-split: 1 collapses the media track, so content-split lands on
       content-end and the two children fall onto separate rows. */
    .salden-table {
      --bleed-split: 1;
    }

    .salden-table__copy {
      grid-column: content-start / content-end;
      min-height: 520px;
    }

    .salden-table__image {
      grid-column: full-start / full-end;
    }

    .salden-table__image {
      min-height: 470px;
    }
  }

  @media (max-width: 700px) {
    .topbar__inner > span {
      display: none;
    }

    .topbar__inner {
      flex-wrap: nowrap;
      padding-block: 2px;
    }

    .topbar__langs {
      margin-left: auto;
    }

    .home-page .hero {
      height: auto;
      min-height: 620px;
    }

    .home-page .hero__photo img {
      object-position: 50% 46%;
    }

    .home-page .hero__inner {
      min-height: 620px;
      justify-content: center;
      padding-top: var(--space-8);
      padding-bottom: 108px;
    }

    .home-page .hero .hero-title {
      max-width: var(--measure-heading);
      font-size: var(--text-page-title);
      line-height: var(--leading-hero);
    }

    .home-page .hero__sub {
      max-width: var(--measure-narrow);
      margin-top: var(--space-6);
      font-size: var(--text-body-sm);
    }

    .home-page .hero__discover {
    min-height: var(--touch-target);
      margin-top: var(--space-6);
    }

    .home-page .hero__caption {
      display: none;
    }

    .home-page .request-bar__card {
      padding-top: var(--space-6);
    }

    .salden-welcome {
      padding-top: var(--space-11);
      padding-bottom: 84px;
    }

    .salden-welcome h2,
    .salden-table h2,
    .salden-landscape h2,
    .salden-farewell h2 {
      font-size: var(--text-section);
    }

    .salden-hosts {
      --host-photo-height: 390px;
    }

    .salden-table__copy {
      min-height: 0;
      padding-block: var(--space-10) 68px;
      padding-right: 0;
    }

    .salden-table__image {
      min-height: 350px;
    }

    .salden-stay {
      padding-top: var(--space-11);
      padding-bottom: 92px;
    }

    .salden-stay__facts {
      grid-template-columns: 1fr;
      margin-top: var(--space-7);
    }

    .salden-stay__facts li {
      min-height: 0;
      padding: var(--space-5) var(--space-2);
    }

    .salden-stay__facts li + li {
      border-top: 1px solid var(--border-hairline);
      border-left: 0;
    }

    .home-page .room-cards {
      grid-template-columns: 1fr;
      gap: 44px;
      margin-top: var(--space-8);
    }

    .home-page .room-card__photo {
      height: 310px;
    }

    .salden-landscape {
      min-height: 670px;
      align-items: flex-end;
    }

    .salden-landscape::after {
      background: linear-gradient(0deg, rgba(30, 31, 32, 0.45), transparent 72%);
    }

    .salden-landscape__photo img {
      object-position: 52% 35%;
    }

    .salden-landscape__inner {
      padding-top: 220px;
      padding-bottom: 88px;
    }

    .salden-landscape__card {
      max-width: none;
      padding-block: var(--space-7) 36px;
    }

    .salden-farewell {
      padding-top: var(--space-9);
    }
  }

  /* The roof belongs to the edge of the colour band, not to every heading.
     A shallow inset gable keeps the entire transition inside its own space. */
  .footer {
    position: relative;
    border-top: 0;
    padding-top: var(--card-padding);
  }
  .footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(24px, 3.5vw, 48px);
    background: var(--surface-page);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 100%, 50% 0, 34% 100%, 0 100%);
    pointer-events: none;
  }
  .salden-table {
    position: relative;
    padding-top: var(--card-padding);
  }
  .salden-table::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(24px, 3.5vw, 48px);
    background: var(--surface-page);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 100%, 50% 0, 34% 100%, 0 100%);
    pointer-events: none;
  }
}


/* styles/stay.css */
/* The second design round (October 2026): parts that only exist on the WordPress site.
   - Daylight mastheads: the rooms and the restaurant are shown in full colour, title beside the photo.
   - The day at Salden: one ordinary day along a line that rises and falls like the hills, on mergel.
   - Guest voices: scores and dated quotes, copied word for word from public reviews.
   - Walks from the front door: distance and walking time from Tolhuisstraat.
   - Room facts: what guests compare, on the hotel page and under the room cards.
   The third round (October 2026):
   - The walks drawn on a small map, numbered like the list.
   - Goed om te weten: the questions guests phone about, on the hotel page.
   - Who makes what we pour and serve, on the restaurant page.
   - One next step at the foot of a page instead of a row of links.
   - The awards as a timeline, a quiet line for a season that is not promoted, and
     a shorter first screen and readable landscape band on a phone. */

@layer components {

  /* ── Daylight masthead ─────────────────────────────────────────────────────
     The dark scrim suits a landscape, not a room: it makes a light room look
     dim. Here the copy sits on the paper and the photo keeps its own light. */
  .interior-hero--hotel,
  .interior-hero--restaurant {
    --bleed-content: calc(var(--container-max) - var(--gutter) * 2);
    min-height: 0;
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] minmax(0, calc(var(--bleed-content) * 0.42))
      [content-split] minmax(0, calc(var(--bleed-content) * 0.58))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-hairline);
  }

  .interior-hero--hotel .interior-hero__scrim,
  .interior-hero--restaurant .interior-hero__scrim { display: none; }

  .interior-hero--hotel .interior-hero__media,
  .interior-hero--restaurant .interior-hero__media {
    position: relative;
    inset: auto;
    grid-column: content-split / full-end;
    grid-row: 1;
    min-height: clamp(460px, 56svh, 640px);
    background: var(--surface-placeholder);
  }

  .interior-hero--hotel .interior-hero__media img,
  .interior-hero--restaurant .interior-hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .interior-hero--hotel .interior-hero__content,
  .interior-hero--restaurant .interior-hero__content {
    grid-column: content-start / content-split;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: var(--space-10) var(--column-gap-tight) var(--space-10) 0;
    justify-content: center;
    color: var(--text-strong);
  }

  .interior-hero--hotel .eyebrow--on-photo,
  .interior-hero--restaurant .eyebrow--on-photo { color: var(--text-label); }

  .interior-hero--hotel .interior-hero__title,
  .interior-hero--restaurant .interior-hero__title {
    color: var(--wine-700);
    font-size: clamp(42px, 24px + 3vw, 68px);
  }

  .interior-hero__lead {
    max-width: var(--measure-lead);
    margin-top: var(--space-6);
    color: var(--text-body);
    font-size: var(--text-body-lg);
    line-height: var(--leading-body);
  }

  .interior-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-7);
  }

  /* ── Room facts ───────────────────────────────────────────────────────────── */
  .room-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-7);
    margin: var(--space-8) 0 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-strong);
  }

  .room-facts div { min-width: 0; }

  .room-facts dt {
    order: 2;
    margin-top: var(--space-1);
    color: var(--text-body);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
  }

  .room-facts dd {
    margin: 0;
    font-family: var(--font-display);
    color: var(--text-strong);
    font-size: 23px;
    line-height: 1.15;
  }

  .room-facts div { display: flex; flex-direction: column; }

  .room-facts__note {
    margin-top: var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-fine);
    line-height: var(--leading-body);
  }

  /* The room list on the hotel page: the facts replace the old 01 / 02 numbers. */
  .hotel-room-option { grid-template-columns: minmax(0, 1fr) auto; scroll-margin-top: calc(var(--sticky-top, 88px) + var(--space-6)); }

  .hotel-room-option__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-strong);
    font-size: var(--text-body-sm);
  }

  .hotel-room-option__facts li { position: relative; }
  .hotel-room-option__facts li + li::before {
    content: "";
    position: absolute;
    left: calc(var(--space-5) / -2 - 2px);
    top: 0.62em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--wine-300);
  }

  .home-page .room-card__facts {
    margin-top: var(--space-3);
    color: var(--text-strong);
    font-size: var(--text-body-sm);
  }

  /* One light grade for the room photographs, which were taken in different years and lights. */
  .interior-hero--hotel .interior-hero__media img,
  .room-photo-gallery img,
  .home-page .room-card__photo img {
    filter: brightness(1.04) saturate(0.94) contrast(1.02);
  }

  /* ── The day at Salden ─────────────────────────────────────────────────── */
  .salden-day {
    background: var(--surface-mergel);
    padding-block: var(--section-gap);
  }

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

  .salden-day__intro h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: var(--weight-display-mid);
    color: var(--text-strong);
    font-size: clamp(34px, 22px + 2vw, 50px);
    line-height: 1.05;
  }

  .salden-day__intro p {
    margin-top: var(--space-4);
    color: var(--text-body);
    font-size: var(--text-body-lg);
  }

  .salden-day__hill {
    position: relative;
    height: 96px;
    margin-top: var(--space-9);
  }

  .salden-day__hill svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .salden-day__hill path {
    fill: none;
    stroke: var(--wine-700);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
  }

  .salden-day__dot {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 50%);
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: var(--wine-700);
    box-shadow: 0 0 0 4px var(--surface-mergel);
  }

  .salden-day__stops {
    display: grid;
    grid-template-columns: repeat(var(--stops, 6), minmax(0, 1fr));
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
  }

  .salden-day__stops li {
    min-width: 0;
    padding: var(--space-4) var(--space-5) 0 0;
    border-top: 1px solid var(--border-strong);
  }

  .salden-day__time {
    display: block;
    font-family: var(--font-display);
    color: var(--wine-700);
    font-size: 30px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .salden-day__stops h3 {
    margin-top: var(--space-3);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    font-weight: var(--weight-body-strong);
  }

  .salden-day__stops p {
    margin-top: var(--space-1);
    color: var(--text-body);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
  }

  /* ── Guest voices ──────────────────────────────────────────────────────── */
  .guest-voices {
    background: var(--surface-ink);
    color: var(--text-on-dark);
    padding-block: var(--section-gap);
  }

  .guest-voices__scores {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-7) var(--space-10);
    margin: 0;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-on-dark);
  }

  .guest-voices__score { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

  .guest-voices__score dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(46px, 30px + 2.4vw, 68px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .guest-voices__score dt {
    margin-top: var(--space-2);
    max-width: 22ch;
    color: var(--text-on-dark-muted);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
  }

  .guest-voices__score a { color: inherit; text-underline-offset: 3px; }

  .guest-voices__quotes {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-8) var(--column-gap-tight);
    margin-top: var(--space-8);
  }

  .guest-voice { margin: 0; }

  .guest-voice blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.4;
  }

  .guest-voice:first-child blockquote {
    font-style: italic;
    font-size: clamp(24px, 18px + 0.9vw, 30px);
    line-height: 1.3;
  }

  .guest-voice figcaption {
    margin-top: var(--space-4);
    color: var(--text-label-on-dark);
    font-size: var(--text-fine);
    letter-spacing: 0.04em;
  }

  .guest-voice figcaption a { color: inherit; text-underline-offset: 3px; }

  .guest-voices__note {
    margin-top: var(--space-8);
    color: var(--text-on-dark-muted);
    font-size: var(--text-fine);
  }

  /* The short version under the request bar on the home page: one quote and one score. */
  .guest-voices--strip {
    background: transparent;
    color: var(--text-strong);
    padding-block: var(--space-9) 0;
  }

  .guest-voices--strip .container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4) var(--column-gap-tight);
    align-items: baseline;
  }

  .guest-voices--strip .guest-voices__scores { padding: 0; border: 0; }
  .guest-voices--strip .guest-voices__score dd { color: var(--wine-700); font-size: 44px; }
  .guest-voices--strip .guest-voices__score dt { color: var(--text-body); }
  .guest-voices--strip .guest-voices__quotes { display: block; margin: 0; }
  .guest-voices--strip .guest-voice blockquote { font-size: clamp(20px, 16px + 0.6vw, 24px); color: var(--text-strong); }
  .guest-voices--strip .guest-voice figcaption { color: var(--text-label); }

  /* ── Walks from the front door ─────────────────────────────────────────── */
  .walks { padding-block: var(--section-gap); }

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

  .walks__intro h2 {
    font-family: var(--font-display);
    color: var(--wine-700);
    font-size: var(--text-section, clamp(36px, 24px + 2vw, 54px));
    font-weight: var(--weight-display-mid);
    line-height: 1.05;
  }

  .walks__intro p { margin-top: var(--space-4); color: var(--text-body); font-size: var(--text-body-lg); }

  .walks__list {
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-strong);
  }

  .walk {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr) 15rem;
    gap: var(--space-2) var(--column-gap-tight);
    align-items: baseline;
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--border-hairline);
  }

  .walks .walk__distance {
    font-family: var(--font-display);
    color: var(--wine-700);
    font-size: 30px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .walks .walk__distance small {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--text-fine);
  }

  .walk h3 {
    font-family: var(--font-display);
    color: var(--text-strong);
    font-size: 24px;
    font-weight: var(--weight-display-mid);
    line-height: 1.2;
  }

  .walks .walk div p {
    max-width: var(--measure-lead);
    margin-top: var(--space-2);
    color: var(--text-body);
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
  }

  .walk__link {
    justify-self: end;
    color: var(--text-accent);
    font-size: var(--text-body-sm);
    white-space: nowrap;
    text-underline-offset: 3px;
  }

  .walks__note { margin-top: var(--space-5); color: var(--text-muted); font-size: var(--text-fine); }

  /* ── Sign-off at the foot of the home page ────────────────────────────── */
  .salden-farewell__signoff {
    margin-top: var(--space-8);
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-strong);
    font-size: 26px;
    line-height: 1.3;
  }

  .salden-farewell__signoff span {
    display: block;
    color: var(--text-label);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-fine);
    letter-spacing: 0.04em;
  }

  @media (max-width: 900px) {
    .interior-hero--hotel,
    .interior-hero--restaurant { grid-template-columns: 1fr; }

    .interior-hero--hotel .interior-hero__media,
    .interior-hero--restaurant .interior-hero__media {
      grid-column: 1;
      grid-row: 1;
      min-height: 0;
      aspect-ratio: 4 / 3;
      max-height: 62svh;
    }

    .interior-hero--hotel .interior-hero__content,
    .interior-hero--restaurant .interior-hero__content {
      grid-column: 1;
      grid-row: 2;
      padding: var(--space-8) var(--gutter) var(--space-9);
    }

    .salden-day__hill { display: none; }

    .salden-day__stops {
      grid-template-columns: 1fr;
      margin-top: var(--space-8);
      padding-left: var(--space-6);
      border-left: 1px solid var(--border-strong);
    }

    .salden-day__stops li {
      position: relative;
      padding: 0 0 var(--space-6);
      border-top: 0;
    }

    .salden-day__stops li:last-child { padding-bottom: 0; }

    .salden-day__stops li::before {
      content: "";
      position: absolute;
      left: calc(var(--space-6) * -1 - 6px);
      top: 9px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--wine-700);
    }

    .salden-day__time { font-size: 26px; }

    .guest-voices__quotes { grid-template-columns: 1fr; }
    .guest-voices--strip .container { grid-template-columns: 1fr; }

    .hotel-room-option { grid-template-columns: minmax(0, 1fr); }
    .hotel-room-option .btn { grid-column: 1; justify-self: start; }

    .walk { grid-template-columns: minmax(0, 1fr); }
    .walk__link { justify-self: start; }
  }

  @media (max-width: 520px) {
    .room-facts { gap: var(--space-4) var(--space-5); }
    .room-facts dd { font-size: 20px; }
  }
  /* ── The walks on a map ────────────────────────────────────────────────── */
  .walks--map {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--column-gap);
    align-items: start;
  }

  .walks--map .walks__intro { grid-column: 1 / -1; }
  .walks--map .walks__list,
  .walks--map .walks__note { grid-column: 2; }

  .walk-map {
    grid-column: 1;
    grid-row: 2 / span 2;
    position: sticky;
    top: calc(var(--sticky-top, 88px) + var(--space-5));
    margin: var(--space-8) 0 0;
    padding: var(--space-5) var(--space-5) var(--space-4);
    background: var(--mergel-100);
  }

  /* On a short screen the map would not fit below the header, so it scrolls with the page. */
  @media (max-height: 680px) {
    .walk-map { position: static; }
  }

  .walk-map svg { display: block; width: 100%; height: auto; overflow: hidden; }
  .walk-map figcaption { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-fine); }

  .walk-map__river { fill: none; stroke: #7FA6B5; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  .walk-map__rail { fill: none; stroke: var(--char-700); stroke-width: 1.5; stroke-dasharray: 7 4; opacity: 0.45; }
  .walk-map__leg { stroke: var(--wine-700); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; }
  .walk-map__hotel path { fill: var(--char-700); }
  .walk-map__pin circle { fill: var(--wine-700); stroke: var(--mergel-100); stroke-width: 2; }
  .walk-map__pin text { fill: #fff; font: 600 12px/1 var(--font-body); text-anchor: middle; }
  .walk-map__label { font: 12px/1 var(--font-body); fill: var(--char-700); }
  .walk-map__label--hotel { font-weight: 700; }
  .walk-map__label--river { fill: #4D7686; font-style: italic; }
  .walk-map__scale path { fill: none; stroke: var(--char-700); stroke-width: 1.2; }
  .walk-map__scale text,
  .walk-map__north { font: 11px/1 var(--font-body); fill: var(--text-muted); }
  .walk-map__north,
  .walk-map__label--hotel { text-anchor: end; }
  .walk-map__label--rail { fill: var(--text-muted); font-size: 11px; }
  .walk-map__label--pin { font-weight: 600; fill: var(--wine-700); paint-order: stroke; stroke: var(--mergel-100); stroke-width: 4px; stroke-linejoin: round; }

  .walk__pin {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: var(--space-3);
    border-radius: 50%;
    background: var(--wine-700);
    color: #fff;
    font: 600 12px/1 var(--font-body);
    vertical-align: 4px;
  }

  .walks--map .walk { grid-template-columns: 7rem minmax(0, 1fr); }
  .walks--map .walk__link { grid-column: 2; justify-self: start; }

  /* ── Goed om te weten ──────────────────────────────────────────────────── */
  .stay-info { padding-block: var(--section-gap-tight); }

  .stay-info__intro h2 {
    font-family: var(--font-display);
    color: var(--wine-700);
    font-size: var(--text-section);
    font-weight: var(--weight-display-mid);
    line-height: 1.05;
  }

  .stay-info__intro p { margin-top: var(--space-3); color: var(--text-body); font-size: var(--text-body-lg); }

  .stay-info__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--column-gap);
    margin: var(--space-8) 0 0;
  }

  .stay-info__item { padding-block: var(--space-5); border-top: 1px solid var(--border-hairline); }

  .stay-info__item dt {
    font-family: var(--font-display);
    color: var(--text-strong);
    font-size: 22px;
    line-height: 1.3;
  }

  .stay-info__item dd {
    max-width: var(--measure-lead);
    margin: var(--space-2) 0 0;
    color: var(--text-body);
    font-size: var(--text-body-md);
    line-height: var(--leading-body);
  }

  /* ── Wat we schenken en serveren ──────────────────────────────────────── */
  .makers {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--column-gap);
    align-items: center;
    padding-block: var(--section-gap-tight);
  }

  .makers__photo { aspect-ratio: 4 / 3; }

  .makers__copy h2 {
    font-family: var(--font-display);
    color: var(--text-strong);
    font-size: var(--text-section);
    font-weight: var(--weight-display-mid);
    line-height: 1.05;
  }

  .makers__copy > p { margin-top: var(--space-3); color: var(--text-body); font-size: var(--text-body-lg); }

  .makers__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin: var(--space-7) 0 0;
    border-top: 1px solid var(--border-strong);
  }

  .makers__list div { padding-top: var(--space-5); }
  .makers__list dt { font-family: var(--font-display); color: var(--text-accent); font-size: 22px; line-height: 1.25; }
  .makers__list dd { margin: var(--space-2) 0 0; color: var(--text-body); font-size: var(--text-body-sm); line-height: var(--leading-body); }

  /* ── One next step ─────────────────────────────────────────────────────── */
  .next-step {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
    margin-block: var(--space-9) var(--section-gap-tight);
    padding: 28px;
    background: var(--mergel-100);
  }

  .next-step--text { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-8); }
  .next-step__photo { height: 180px; }

  .next-step h2 {
    font-family: var(--font-display);
    color: var(--text-strong);
    font-size: 34px;
    font-weight: var(--weight-display-mid);
    line-height: 1.15;
  }

  .next-step p { max-width: 46ch; margin-top: var(--space-3); color: var(--text-body); font-size: var(--text-body-md); line-height: var(--leading-body); }
  .next-step .btn { white-space: nowrap; }

  /* ── Awards as a timeline ──────────────────────────────────────────────── */
  .editorial-ledger--timeline .editorial-ledger__rows {
    position: relative;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .editorial-ledger--timeline .editorial-ledger__rows::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
    border-top: 1px solid var(--border-strong);
  }

  .editorial-ledger--timeline .editorial-ledger__row {
    position: relative;
    padding-top: var(--space-7);
    border-top: 0;
  }

  .editorial-ledger--timeline .editorial-ledger__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border: 1px solid var(--mergel-700);
    border-radius: 50%;
    background: var(--mergel-200);
  }

  .editorial-ledger--timeline dt { font-family: var(--font-display); font-size: 40px; letter-spacing: 0; text-transform: none; color: var(--text-accent); line-height: 1; }

  /* ── A season that is not promoted: one quiet line ─────────────────────── */
  .restaurant-menu--quiet { color: var(--text-muted); font-size: var(--text-body-sm); gap: var(--space-2); }
  .restaurant-menu--quiet a { color: var(--text-accent); text-underline-offset: 3px; }

  /* ── Contact without the empty request card ───────────────────────────── */
  .contact-sheet__request { display: flex; width: fit-content; margin-top: var(--space-7); }

  @media (max-width: 900px) {
    .walks--map { display: block; }
    .walk-map { position: static; margin-top: var(--space-7); }
    /* The map is drawn at about four-fifths size on a phone; the names stay readable. */
    .walk-map__label--pin { font-size: 15px; }
    .walk-map__label--hotel { font-size: 14px; }
    .walks--map .walk { grid-template-columns: minmax(0, 1fr); }
    .walks--map .walk__link { grid-column: 1; }

    .stay-info__list { grid-template-columns: 1fr; }

    .makers { grid-template-columns: 1fr; }
    .makers__list { grid-template-columns: 1fr; gap: 0; }
    .makers__list div { padding-block: var(--space-4); border-bottom: 1px solid var(--border-hairline); }

    .next-step,
    .next-step--text { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5); }
    .next-step__photo { height: 200px; }
    .next-step h2 { font-size: 28px; }
    .next-step .btn { justify-self: start; }
  }

  @media (max-width: 700px) {
    /* The first screen on a phone: a shorter hero, so the request bar and the score are in view. */
    .home-page .hero { min-height: 0; }
    .home-page .hero__inner { min-height: 0; padding-top: 96px; padding-bottom: 84px; }
    .home-page .hero__discover,
    .home-page .hero__caption { display: none; }
    .home-page .hero__sub { margin-top: var(--space-4); font-size: 16px; line-height: 1.5; }
    .home-page .request-bar { margin-top: -56px; }
    .home-page .request-bar__card { gap: var(--space-3); padding: var(--space-4); }
    .home-page .request-bar__card .btn { grid-column: auto; }
    .home-page .request-bar__label { font-size: 10px; }
    .home-page .request-bar__details { grid-column: 1 / -1; margin: 0; font-size: 12px; }
    .home-page .guest-voices--strip { padding-top: var(--space-5); }

    /* The landscape band: the photograph above, the words on dark below, so white type never sits on a bright sky. */
    .salden-landscape { flex-direction: column; align-items: stretch; min-height: 0; background: var(--char-700); }
    .salden-landscape::after { display: none; }
    .salden-landscape__photo { position: relative; z-index: 0; inset: auto; height: 300px; flex: none; }
    .salden-landscape__inner { padding-top: var(--space-7); padding-bottom: var(--space-9); }
    .salden-landscape__card { padding: 0; }

    .editorial-ledger--timeline dt { font-size: 32px; }
  }
}


/* next/font provides the families; the token keeps the fallback stack. */
:root {
  --font-display: var(--font-newsreader), "Iowan Old Style", Georgia, serif;
  --font-body: var(--font-archivo), system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { overflow-x: hidden; }

/* Buttons used as plain interactive text (nav items, language switch, cards). */
.as-text {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

/* One focus treatment for the whole site. The ring is wine, which reads well on
   paper but is barely distinguishable from charcoal, so every dark surface
   switches it to sand. Declared here, unlayered, so nothing overrides it. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.topbar :focus-visible,
.footer :focus-visible,
.salden-table :focus-visible,
.salden-landscape :focus-visible,
.interior-hero :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

/* Calm is the point: honour a request for reduced motion by not crossfading. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}