/* ==========================================================================
   Tingholm Fjord Resort & Casino — style.css
   Design system "Ink & Parchment" (BRIEF §2).
   One stylesheet, numbered blocks. No preprocessors, no inline styles:
   the CSP (style-src 'self') forbids style="" attributes in the markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS ↔ JS state contract (BRIEF §3.4) — JS only toggles these
   --------------------------------------------------------------------------
   Header after 80px ........ .site-header.is-scrolled
   Menu panel ............... .site-nav.is-open, [aria-expanded] on .nav-toggle
   Scroll lock .............. html.is-scroll-locked
   Clause index ............. .clause-index__link.is-active
   Hero ..................... .hero__slide.is-active, [aria-current] on dots,
                              [aria-pressed] on pause
   Marginalia ............... [aria-expanded] on .note-marker, .note.is-open
   Chambers register ........ [aria-expanded] on .register__row,
                              .register__visual.is-active
   Archive filters .......... [aria-pressed] on .filter, [hidden] on cards
   Horizontal strips ........ [disabled] on .strip__prev / .strip__next
   FAQ and footer ........... [aria-expanded]
   Map labels ............... --x / --y set via style.setProperty(),
                              then .map__labels.is-placed
   Form errors .............. [aria-invalid] on fields, .field__error (JS-made)
   JS present ............... html.js (set first thing in init())
   Clause index built ....... html.has-clause-index (home, ≥ 1200px)
   Menu backdrop (JS-made) .. .nav-backdrop inside .site-header
   -------------------------------------------------------------------------- */


/* ==========================================================================
   01. Fonts (@font-face)
   Self-hosted from fonts/ (CSP: font-src 'self'). Variable woff2 files,
   split by unicode-range so browsers only fetch the subsets they need.
   Cyrillic is only needed for the Ukrainian owner line in the footer.
   ========================================================================== */

/* Newsreader — roman */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Newsreader — italic (glosses, quotes, marginalia sources) */
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans — roman */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/plex-sans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* ==========================================================================
   02. Tokens (:root custom properties)
   ========================================================================== */

:root {
  /* --- Palette (BRIEF §2.1) --- */
  --c-parchment:  #F3EDE1;  /* main background */
  --c-vellum:     #E8DFCC;  /* alternating sections */
  --c-vellum-2:   #DCD1B8;  /* cards, rules on light */
  --c-ink:        #14171A;  /* body text, footer */
  --c-ink-2:      #1E2226;  /* cards on dark */
  --c-ink-dim:    rgba(20, 23, 26, .68);  /* secondary text */
  --c-court:      #1E3A32;  /* court green: dark sections, felt */
  --c-court-soft: #2C5247;  /* cards on green */
  --c-seal:       #8E2B2B;  /* wax seal: accent, used sparingly */
  --c-seal-deep:  #6E1F1F;  /* seal for text on light */
  --c-seal-light: #D98A8A;  /* seal for text on dark */
  --c-pewter:     #6F7A80;  /* pewter: chip borders, non-text details */
  --c-paper:      #EFE9DD;  /* text on dark */
  --c-line:       rgba(20, 23, 26, .16);
  --c-line-dark:  rgba(239, 233, 221, .18);

  /*
    Contrast corrections (checked with WCAG 2.x formula, see stage 2 report):
    --c-pewter #6F7A80 is only 3.77:1 on parchment, 3.32:1 on vellum and
    2.80:1 on court green — not enough for small text. Clause numbers and
    captions therefore use these text variants instead.
  */
  --c-pewter-ink:   #525C62;  /* on parchment 5.87 · vellum 5.17 · vellum-2 4.52 */
  --c-pewter-light: #B3BCC0;  /* on court 6.37 · court-soft 4.52 · ink 9.31 */
  --c-paper-dim:    rgba(239, 233, 221, .78);  /* on court 6.87 · court-soft 5.12 · ink 9.38 */

  /* --- Surface variables (swapped by .section--vellum / --court / --ink) --- */
  --bg:        var(--c-parchment);
  --text:      var(--c-ink);
  --text-dim:  var(--c-ink-dim);
  --accent:    var(--c-seal-deep);   /* focus ring, card hover, links */
  --clause:    var(--c-pewter-ink);  /* § numbers, captions */
  --line:      var(--c-line);
  --card:      var(--c-vellum);
  --btn-bg:    var(--c-ink);
  --btn-text:  var(--c-parchment);

  /* --- Type --- */
  --ff-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ff-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-h1:   clamp(2.6rem, 5.4vw, 4.6rem);
  --fs-h2:   clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3:   clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: clamp(1rem, 1.05vw, 1.08rem);
  --fs-lead: clamp(1.1rem, 1.35vw, 1.25rem);
  --fs-small: .875rem;
  --fs-note:  .8rem;
  --fs-clause: .72rem;
  --fs-chip:  .66rem;

  /* --- Layout (BRIEF §2.4) ---
     Breakpoints: 480 / 768 / 1024 / 1200 / 1440 (custom properties cannot be
     used inside @media, so the values are written out in each query). */
  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 60ch;
  --margin-col: 220px;
  --section-y: clamp(4rem, 8vw, 8rem);
  --header-h: 4.5rem;
  --index-w: 11rem;   /* clause index column, home ≥ 1200px */

  /* --- Motion --- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .18s;
  --t-med: .35s;
  --t-fade: 1.2s;

  /* --- Paper texture (BRIEF §2.3) ---
     Grain: SVG feTurbulence tile 400×400, opacity .04 (img-src allows data:).
     Ruling: horizontal hairline every 32px, alpha .02. */
  --tx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  --tx-ruling: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    rgba(20, 23, 26, .02) 31px,
    rgba(20, 23, 26, .02) 32px
  );
  --tx-grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}


/* ==========================================================================
   03. Reset and base (BRIEF §2.5)
   ========================================================================== */

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

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

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

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

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

body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image: var(--tx-grain), var(--tx-ruling);
  color: var(--text);
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

[hidden] {
  display: none !important;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

::selection {
  background: var(--c-court);
  color: var(--c-paper);
}

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

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

main:focus {
  outline: none;
}


/* ==========================================================================
   04. Typography (BRIEF §2.2)
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 { font-size: 1.125rem; font-weight: 500; }

h1 em,
h2 em {
  font-style: italic;
}

p {
  text-wrap: pretty;
}

p + p {
  margin-top: 1em;
}

strong,
b {
  font-weight: 500;
}

small,
.text-small {
  font-size: var(--fs-small);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
}

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

/* Italic gloss under a heading — Newsreader italic */
.gloss {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--text-dim);
}

/* Clause number "§ 03" — Plex Sans 500, .72rem, tracking .18em */
.clause-num,
.eyebrow {
  font-family: var(--ff-sans);
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--clause);
}

/* Footnote-style marker <sup> tying text to a margin note */
sup,
.note-marker {
  font-size: .68em;
  line-height: 0;
  vertical-align: super;
  font-variant-numeric: tabular-nums;
}

.note-marker {
  display: inline;
  padding: 0 .15em;
  border: 0;
  background: none;
  font-family: var(--ff-sans);
  font-weight: 500;
  color: var(--accent);
}

/* Prose defaults inside text columns */
.prose > * + * {
  margin-top: 1em;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: .75em;
}

.prose ul:not([class]),
.prose ol:not([class]) {
  padding-left: 1.25em;
}

.prose li + li {
  margin-top: .35em;
}


/* ==========================================================================
   05. Layout: container, sections, surfaces, grid (BRIEF §2.4)
   ========================================================================== */

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

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

/* Light surfaces: grain + ruled sheet */
.section,
.section--vellum {
  background-image: var(--tx-grain), var(--tx-ruling);
}

.section--vellum {
  --bg: var(--c-vellum);
  --card: var(--c-parchment);
}

/* Court green: grain only, no ruling */
.section--court {
  --bg: var(--c-court);
  --text: var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent: var(--c-seal-light);
  --clause: var(--c-pewter-light);
  --line: var(--c-line-dark);
  --card: var(--c-court-soft);
  --btn-bg: var(--c-paper);
  --btn-text: var(--c-ink);
  background-image: var(--tx-grain-dark);
}

/* Ink: footer, 404 and other dark bands */
.section--ink {
  --bg: var(--c-ink);
  --text: var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent: var(--c-seal-light);
  --clause: var(--c-pewter-light);
  --line: var(--c-line-dark);
  --card: var(--c-ink-2);
  --btn-bg: var(--c-paper);
  --btn-text: var(--c-ink);
  background-image: var(--tx-grain-dark);
}

.section--court ::selection,
.section--ink ::selection {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* Clause header: "§ 03" · full-width hairline · title (BRIEF §2.3) */
.clause {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.clause__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.clause__title {
  font-family: var(--ff-sans);
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Section heading block */
.section__head {
  max-width: 48rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section__head > * + * {
  margin-top: 1rem;
}

/* 12-column grid */
.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-6 { grid-column: span 6; }
  .span-7 { grid-column: span 7; }
  .span-5 { grid-column: span 5; }
}

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

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

/* Text column with margin notes (BRIEF §2.3, §2.4).
   Default and no-JS: notes are ordinary <aside> blocks under the paragraph.
   ≥ 1200px: notes sit in a 220px margin column to the right. */
.annotated {
  display: grid;
  gap: 1.5rem;
}

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

@media (min-width: 1200px) {
  .annotated {
    grid-template-columns: minmax(0, var(--measure)) var(--margin-col);
    column-gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }

  .annotated__margin {
    display: grid;
    gap: 1.5rem;
    padding-top: .4rem;
  }
}

/* A single margin note */
.note {
  font-family: var(--ff-sans);
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--text-dim);
  padding-left: .85rem;
  border-left: 1px solid var(--line);
}

.note__num {
  font-weight: 500;
  color: var(--accent);
  margin-right: .35em;
  font-variant-numeric: tabular-nums;
}

.note__source {
  display: block;
  margin-top: .35rem;
  font-style: italic;
}

/* < 1200px with JS: notes collapse under the paragraph until opened */
@media (max-width: 1199.98px) {
  html.js .note {
    margin-top: .75rem;
  }

  html.js .note:not(.is-open) {
    display: none;
  }
}


/* ==========================================================================
   06. Utilities: skip link, visually hidden
   ========================================================================== */

.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1000;
  padding: .65rem 1rem;
  background: var(--c-ink);
  color: var(--c-parchment);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--c-seal);
  outline-offset: 2px;
}

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

.nowrap {
  white-space: nowrap;
}


/* ==========================================================================
   07. Components: buttons, chip, seal, frames, cards, quotes (BRIEF §2.3)
   ========================================================================== */

/* --- Buttons --- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--ff-sans);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    text-decoration-thickness var(--t-fast) var(--ease);
}

/* Primary: ink fill; on hover the button shifts 2px down-right and leaves a
   2px seal-red "imprint" where it stood */
.button--primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}

.button--primary:hover {
  transform: translate(2px, 2px);
  box-shadow: -2px -2px 0 var(--c-seal);
  text-decoration: none;
}

.button--primary:active {
  transform: translate(1px, 1px);
  box-shadow: -1px -1px 0 var(--c-seal);
}

/* Secondary: underlined text, 1px → 2px on hover */
.button--secondary {
  min-height: 3rem;
  padding-inline: .25rem;
  background: none;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
}

.button--secondary:hover {
  text-decoration-thickness: 2px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
}

/* --- Seal: 8px wax dot with a thin pressed ring. Use sparingly:
       menu, "Charter", the CTA --- */
.seal-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-seal);
  box-shadow:
    inset 0 0 0 1.5px var(--c-seal),
    inset 0 0 0 2.5px rgba(20, 23, 26, .28);
  vertical-align: middle;
}

.list--seal > li {
  position: relative;
  padding-left: 1.4rem;
}

.list--seal > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-seal);
  box-shadow:
    inset 0 0 0 1.5px var(--c-seal),
    inset 0 0 0 2.5px rgba(20, 23, 26, .28);
}

.list--seal > li + li {
  margin-top: .6rem;
}

/* --- "Planned" chip --- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: .3rem .6rem;
  border: 1px solid var(--c-pewter);
  font-family: var(--ff-sans);
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--clause);
  white-space: nowrap;
}

.section--court .chip,
.section--ink .chip {
  border-color: var(--c-pewter-light);
}

/* --- Document frame: square image in a double hairline frame
       (outer 1px, 6px gap, inner 1px) --- */
.frame {
  padding: 6px;
  border: 1px solid var(--line);
}

.frame__img {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
}

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

.frame__caption {
  margin-top: .65rem;
  font-size: var(--fs-note);
  color: var(--text-dim);
}

/* Fixed ratios so images never cause layout shift */
.ratio-21x9 { aspect-ratio: 21 / 9; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-1x1  { aspect-ratio: 1 / 1; }

/* Panoramas turn into a thin strip on phones; crop them taller there */
@media (max-width: 767.98px) {
  .ratio-21x9 { aspect-ratio: 4 / 3; }
}

/* --- Card: 1px border, no shadow. Hover: border takes the accent,
       caption shifts 2px. No scaling. --- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease);
}

.card__body {
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.card__body > * + * {
  margin-top: .6rem;
}

.card__title {
  font-size: var(--fs-h3);
  transition: transform var(--t-fast) var(--ease);
}

.card:hover,
.card:focus-within {
  border-color: var(--accent);
}

.card:hover .card__title,
.card:focus-within .card__title {
  transform: translateX(2px);
}

/* --- Quote: no quote-mark graphics; left indent, seal rule,
       Newsreader italic --- */
.quote {
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--c-seal);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.quote cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-note);
  font-style: normal;
  color: var(--text-dim);
}

/* --- Hairline rule --- */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

/* --- Disclaimer line ("Artist's impressions…") --- */
.disclaimer {
  font-size: var(--fs-note);
  font-style: italic;
  color: var(--text-dim);
}


/* ==========================================================================
   08. Header, navigation, clause index (BRIEF §3.1)
   ========================================================================== */

/* --- Header shell ---
   The translucent parchment + blur lives on ::before, not on the header:
   backdrop-filter on the header itself would become the containing block
   for the fixed mobile panel inside it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  color: var(--c-ink);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(243, 237, 225, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-line);
  transition:
    background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    box-shadow var(--t-med) var(--ease);
}

/* Phones: no blur (cheap to paint on low-end Android), near-opaque instead */
@media (max-width: 767.98px) {
  .site-header::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header.is-scrolled::before,
  .page--inner .site-header::before,
  .page--404 .site-header::before {
    background: rgba(243, 237, 225, .97);
  }
}

/* Home, over the hero: lighter underlay, no rule. The hero frames are dusk
   scenes, so a semi-transparent parchment underlay keeps dark text legible. */
.page--home .site-header:not(.is-scrolled)::before {
  background: rgba(243, 237, 225, .72);
  border-bottom-color: transparent;
}

/* After 80px: rule + soft shadow */
.site-header.is-scrolled::before {
  background: rgba(243, 237, 225, .94);
  border-bottom-color: var(--c-line);
  box-shadow: 0 6px 18px -12px rgba(20, 23, 26, .35);
}

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

/* --- Brand: seal + TINGHOLM --- */
.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--c-ink);
  text-decoration: none;
}

.brand__seal {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--c-seal);
  box-shadow:
    inset 0 0 0 3px var(--c-seal),
    inset 0 0 0 4px rgba(243, 237, 225, .45);
  color: var(--c-parchment);
  font-family: var(--ff-serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1;
}

.brand__name {
  font-family: var(--ff-sans);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

/* --- Burger --- */
.nav-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .5rem 0 .5rem .5rem;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color var(--t-med) var(--ease);
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--t-med) var(--ease), background-color var(--t-fast);
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__icon::before { transform: translateY(-6px); }
.nav-toggle__icon::after  { transform: translateY(6px); }

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

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after  { transform: rotate(-45deg); }

/* --- Menu links (shared) --- */
.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
}

/* Active item: seal before the text */
.site-nav__link[aria-current]::before,
.site-nav__link.is-active::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-seal);
  box-shadow:
    inset 0 0 0 1.5px var(--c-seal),
    inset 0 0 0 2.5px rgba(20, 23, 26, .28);
}

/* --- Below 1200px: full-height panel on the right --- */
@media (max-width: 1199.98px) {
  .site-nav {
    --btn-bg: var(--c-paper);
    --btn-text: var(--c-ink);
    --accent: var(--c-seal-light);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(26rem, 100%);
    padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-ink);
    color: var(--c-paper);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--t-med) var(--ease),
      visibility 0s linear var(--t-med);
  }

  .site-nav.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--t-med) var(--ease);
  }

  .site-nav__list > li {
    border-bottom: 1px solid var(--c-line-dark);
  }

  .site-nav__link {
    display: flex;
    padding: .7rem 0;
    font-family: var(--ff-serif);
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    line-height: 1.2;
  }

  .site-nav__link:hover {
    color: var(--c-seal-light);
  }

  .site-nav__cta {
    margin-top: auto;
    width: 100%;
  }

  .site-nav__list {
    margin-bottom: 2rem;
  }

  /* Backdrop created by MobileNav (stage 6); click closes the panel */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: rgba(20, 23, 26, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }

  .site-nav.is-open ~ .nav-backdrop,
  .nav-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--t-med) var(--ease);
  }

  /* No JS: no burger; the menu is a scrollable second row instead */
  html:not(.js) .nav-toggle {
    display: none;
  }

  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  html:not(.js) .site-nav {
    position: static;
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: auto;
    padding: 0 0 .75rem;
    overflow-x: auto;
    background: none;
    color: var(--c-ink);
    transform: none;
    visibility: visible;
  }

  html:not(.js) .site-nav__list {
    display: flex;
    gap: 1.1rem;
    margin: 0;
  }

  html:not(.js) .site-nav__list > li {
    border: 0;
  }

  html:not(.js) .site-nav__link {
    padding: .25rem 0;
    font-family: var(--ff-sans);
    font-size: .85rem;
    white-space: nowrap;
  }

  html:not(.js) .site-nav__cta {
    --btn-bg: var(--c-ink);
    --btn-text: var(--c-parchment);
    width: auto;
    margin: 0;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    white-space: nowrap;
  }
}

/* --- Desktop ≥ 1200px: inline menu + CTA --- */
@media (min-width: 1200px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2vw, 2.25rem);
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 1.6vw, 1.75rem);
  }

  .site-nav__link {
    padding-block: .5rem;
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
  }

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

  .site-nav__link[aria-current]::after,
  .site-nav__link.is-active::after {
    left: calc(8px + .55rem);
  }

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

  .site-nav__cta {
    min-height: 2.6rem;
    padding: .6rem 1.15rem;
    font-size: .84rem;
    white-space: nowrap;
  }

  .nav-backdrop {
    display: none;
  }
}

/* --- Clause index: the "table of contents" of the home page.
       Built by ClauseIndex (stage 6), home only, ≥ 1200px only. --- */
.clause-index {
  display: none;
}

@media (min-width: 1200px) {
  .clause-index {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    z-index: 5;
    display: block;
    width: var(--index-w);
    padding: 2rem 1rem 2rem 1.5rem;
    overflow-y: auto;
    border-right: 1px solid var(--c-line);
    background: var(--c-parchment);
    scrollbar-width: none;
  }

  .clause-index::-webkit-scrollbar {
    display: none;
  }

  .clause-index__title {
    margin-bottom: 1rem;
    font-size: var(--fs-chip);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-pewter-ink);
  }

  .clause-index__list > li + li {
    margin-top: .1rem;
  }

  .clause-index__link {
    position: relative;
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    align-items: baseline;
    padding: .3rem 0;
    color: var(--c-ink-dim);
    font-size: .76rem;
    line-height: 1.35;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease);
  }

  .clause-index__num {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    color: var(--c-pewter-ink);
  }

  .clause-index__link:hover,
  .clause-index__link.is-active {
    color: var(--c-ink);
  }

  .clause-index__link.is-active .clause-index__num {
    color: var(--c-seal-deep);
  }

  /* Seal marks the active clause, hanging in the left margin */
  .clause-index__link.is-active::before {
    content: "";
    position: absolute;
    left: -.9rem;
    top: .72rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-seal);
  }

  /* Reserve the column so the index never covers content */
  html.has-clause-index .page--home main {
    padding-left: var(--index-w);
  }
}



/* ==========================================================================
   09. Footer (BRIEF §3.2)
   Sits above the fixed clause index (z-index) so the index slides under it.
   ========================================================================== */

.site-footer {
  --bg: var(--c-ink);
  --text: var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent: var(--c-seal-light);
  --clause: var(--c-pewter-light);
  --line: var(--c-line-dark);
  position: relative;
  z-index: 10;
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  background-color: var(--bg);
  background-image: var(--tx-grain-dark);
  color: var(--text);
  font-size: .92rem;
  line-height: 1.65;
}

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

.site-footer a:hover {
  color: var(--c-seal-light);
  text-decoration-color: currentColor;
}

.site-footer__inner {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

.footer__col > * + * {
  margin-top: .9rem;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}

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

/* Column headings: clause-style label; a <button> for the phone accordion */
.footer__heading {
  font-family: var(--ff-sans);
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--clause);
}

.footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: default;
}

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

.footer__list a {
  text-decoration: none;
}

.footer__list a:hover {
  text-decoration: underline;
}

.footer__clause {
  display: inline-block;
  min-width: 2.6rem;
  font-size: .72rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--c-pewter-light);
}

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

.footer__more {
  font-weight: 500;
}

.footer__list--mail > li {
  display: flex;
  flex-wrap: wrap;
  column-gap: .6rem;
}

.footer__label {
  min-width: 4rem;
  color: var(--text-dim);
}

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

/* --- Phone accordion (< 768px). Collapsed state is driven by
       aria-expanded="false" on the toggle; height via grid-template-rows. --- */
.footer__panel {
  display: grid;
  grid-template-rows: 1fr;
}

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

@media (max-width: 767.98px) {
  .site-footer__inner {
    gap: 0;
  }

  .footer__col--brand {
    padding-bottom: 2rem;
  }

  .footer__col:not(.footer__col--brand) {
    border-top: 1px solid var(--line);
  }

  .footer__col:not(.footer__col--brand) > * + * {
    margin-top: 0;
  }

  .footer__toggle {
    min-height: 3.25rem;
    cursor: pointer;
  }

  .footer__toggle::after {
    content: "";
    flex: none;
    width: .5rem;
    height: .5rem;
    margin-right: .25rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform var(--t-med) var(--ease);
  }

  .footer__toggle[aria-expanded="true"]::after {
    transform: translateY(25%) rotate(-135deg);
  }

  .footer__panel {
    transition:
      grid-template-rows var(--t-med) var(--ease),
      visibility 0s linear 0s;
  }

  .footer__panel-inner {
    padding-bottom: 1.25rem;
  }

  .footer__col:has(.footer__toggle[aria-expanded="false"]) .footer__panel {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
      grid-template-rows var(--t-med) var(--ease),
      visibility 0s linear var(--t-med);
  }

  .footer__col:has(.footer__toggle[aria-expanded="false"]) .footer__panel-inner {
    padding-bottom: 0;
  }
}

/* --- Bottom strip --- */
.site-footer__bottom {
  display: grid;
  gap: .75rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--text-dim);
}

.footer__play {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 62rem;
}

.badge-18 {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .3rem;
  border: 1px solid var(--c-seal-light);
  border-radius: 50%;
  color: var(--c-seal-light);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
}

.footer__notlaw {
  color: var(--text);
}

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



/* ==========================================================================
   10. Home sections § 01 – § 07 (BRIEF §4)
   ========================================================================== */

/* --- Shared bits used across the home sections --- */
.section__disclaimer {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Data table (Summit rooms, Gatherings capacities). On small screens the
   table scrolls inside its own container, never the page. */
.table-wrap {
  /* Containing block for .visually-hidden cells, so overflow-x clips them
     instead of letting them widen the page on phones */
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

.data-table caption {
  padding-bottom: .75rem;
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  text-align: left;
  text-transform: uppercase;
  color: var(--clause);
}

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

.data-table thead th {
  border-bottom-color: var(--text);
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--text-dim);
}

.data-table tbody th {
  font-family: var(--ff-serif);
  font-size: 1.1rem;
  font-weight: 400;
}


/* --- § 01 Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 2rem) 0 clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-paper);
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--t-fade) ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

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

/* Ink gradient from the bottom (.65) so the title block always reads */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 23, 26, .65) 0%,
    rgba(20, 23, 26, .45) 40%,
    rgba(20, 23, 26, 0) 75%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* Title block framed like the title page of a document */
.hero__content {
  --text: var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent: var(--c-seal-light);
  --clause: var(--c-pewter-light);
  --btn-bg: var(--c-paper);
  --btn-text: var(--c-ink);
  max-width: 44rem;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border: 1px solid rgba(239, 233, 221, .32);
  outline: 1px solid rgba(239, 233, 221, .16);
  outline-offset: 5px;
  /* .75 keeps all panel text, the dimmer disclaimer included, ≥ 4.5:1 even
     over pure white (worst case 5.19:1), whatever the hero frame */
  background: rgba(20, 23, 26, .75);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.hero__content > * + * {
  margin-top: clamp(.75rem, 1.6vh, 1.1rem);
}

.hero__eyebrow {
  color: var(--c-paper);
}

.hero__title {
  color: var(--c-paper);
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
}

.hero__lead {
  max-width: 36rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-paper);
}

.hero .button-row {
  padding-top: .25rem;
}

.hero .button--secondary {
  color: var(--c-paper);
}

.hero__disclaimer {
  color: rgba(239, 233, 221, .88);
}

/* Dots + pause, created by HeroFade (stage 6) */
.hero__controls {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1rem;
}

.hero__dot {
  width: 2.25rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  position: relative;
}

.hero__dot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(239, 233, 221, .45);
  transition: background-color var(--t-fast) var(--ease);
}

.hero__dot[aria-current="true"]::before {
  background: var(--c-paper);
}

.hero__pause {
  margin-left: .5rem;
  padding: .25rem .5rem;
  border: 1px solid rgba(239, 233, 221, .45);
  background: none;
  color: var(--c-paper);
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Short phone screens (390×664): keep H1, buttons and disclaimer on screen */
@media (max-width: 767.98px) {
  .hero__content {
    padding: 1.1rem;
    outline: 0;
  }

  .hero__lead {
    font-size: 1rem;
  }

  .hero .button-row {
    gap: .5rem 1.25rem;
  }

  .hero .button {
    min-height: 2.75rem;
  }
}

@media (max-width: 767.98px) and (max-height: 700px) {
  .hero__title {
    font-size: 1.95rem;
  }

  .hero__lead {
    font-size: .92rem;
    line-height: 1.5;
  }
}


/* --- § 02 The estate ------------------------------------------------------ */
.estate__layout {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

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

.estate__margin {
  display: grid;
  gap: 1.25rem;
}

.estate__detail {
  max-width: 22rem;
}

@media (min-width: 1024px) {
  .estate__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "text   main"
      "text   detail"
      "margin detail";
    align-items: start;
    column-gap: clamp(2.5rem, 4vw, 4rem);
  }

  .estate__text   { grid-area: text; }
  .estate__margin { grid-area: margin; }
  .estate__main   { grid-area: main; }
  /* Smaller detail frame sits under the main image, pushed to the right */
  .estate__detail { grid-area: detail; justify-self: end; width: 58%; max-width: none; }
}

@media (min-width: 1200px) {
  .estate__layout {
    grid-template-columns: minmax(0, 1fr) var(--margin-col) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "text margin main"
      "text margin detail";
  }

  .estate__margin {
    padding-top: 5.5rem;
  }
}

/* Planned figures strip */
.figures {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.figures__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: 1.5rem;
}

.figures__note {
  font-size: var(--fs-note);
  color: var(--text-dim);
}

.figures__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

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

.figures__item {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.figures__num {
  font-family: var(--ff-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.figures__unit {
  font-size: .5em;
}

.figures__label {
  margin-top: .4rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}


/* --- § 03 The Ting -------------------------------------------------------- */
.ting__pair {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* 3:2 next to 4:5 at equal heights: widths in the ratio 1.875 : 1 */
@media (min-width: 768px) {
  .ting__pair {
    grid-template-columns: 1.875fr 1fr;
    align-items: start;
  }
}

.ting__body {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.points {
  counter-reset: point;
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

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

  /* inside the annotated column at ≥ 1200 the text column is narrow */
  .annotated__text .points {
    grid-template-columns: 1fr;
  }
}

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

.points__item {
  counter-increment: point;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.points__title {
  font-size: 1.25rem;
}

.points__title::before {
  content: counter(point, upper-roman) ". ";
  color: var(--accent);
}

.points__item p {
  margin-top: .5rem;
  color: var(--text-dim);
}

.ting .annotated__text {
  max-width: none;
}

@media (min-width: 1200px) {
  .ting .annotated {
    grid-template-columns: minmax(0, 1fr) var(--margin-col);
  }

  .ting .annotated__text .points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ting .lead {
    max-width: 62ch;
  }
}


/* --- § 04 The Summit Wing ------------------------------------------------- */
.summit__intro {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

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

.summit__gallery {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* 4:5, 4:5 and 4:3 at equal heights: widths 1 : 1 : 1.667 */
.summit__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.summit__row > :last-child {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  .summit__row {
    grid-template-columns: 1fr 1fr 1.667fr;
  }

  .summit__row > :last-child {
    grid-column: auto;
  }
}

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

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

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

.intent .card__title {
  font-size: 1.3rem;
}

.intent p {
  font-size: .95rem;
  color: var(--text-dim);
}

.summit__caveat {
  max-width: 60ch;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: 1rem;
  border-left: 2px solid var(--c-seal);
  font-size: .95rem;
}


/* --- § 05 Chambers: the register ----------------------------------------- */
.register {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

.register__visuals {
  display: none;
}

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

  /* Sticky image with a fixed ratio so the crossfade never shifts layout */
  .register__visuals {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    display: block;
    aspect-ratio: 3 / 2;
    padding: 6px;
    border: 1px solid var(--line);
  }

  .register__visual {
    position: absolute;
    inset: 6px;
    border: 1px solid var(--line);
    overflow: hidden;
    opacity: 0;
    transition: opacity .6s var(--ease);
  }

  .register__visual.is-active {
    opacity: 1;
  }

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

  .register__mobile-visual {
    display: none;
  }
}

.register__labels {
  display: none;
}

@media (min-width: 768px) {
  .register__labels {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 7rem 7rem;
    gap: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--text);
    font-size: var(--fs-chip);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--clause);
  }
}

.register__item {
  border-bottom: 1px solid var(--line);
}

.register__heading {
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
}

.register__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: .25rem 1rem;
  width: 100%;
  padding: 1.1rem 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}

.register__no {
  grid-row: span 2;
  padding-top: .3rem;
  font-family: var(--ff-serif);
  font-size: 1rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.register__name {
  display: block;
  font-family: var(--ff-serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.2;
  transition: transform var(--t-fast) var(--ease);
}

.register__row:hover .register__name {
  transform: translateX(2px);
}

.register__char {
  display: block;
  margin-top: .25rem;
  font-family: var(--ff-sans);
  font-size: .9rem;
  color: var(--text-dim);
}

.register__area,
.register__guests {
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.register__area {
  grid-column: 2;
}

.register__guests {
  grid-column: 2;
}

@media (max-width: 767.98px) {
  .register__area,
  .register__guests {
    display: inline;
  }
}

@media (min-width: 768px) {
  .register__row {
    grid-template-columns: 3rem minmax(0, 1fr) 7rem 7rem;
    align-items: baseline;
  }

  .register__no {
    grid-row: auto;
    padding-top: 0;
  }

  .register__area,
  .register__guests {
    grid-column: auto;
  }

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

.register__row[aria-expanded="true"] .register__name {
  color: var(--text);
}

/* Panel height via grid-template-rows; closed = aria-expanded="false" */
.register__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-med) var(--ease), visibility 0s linear 0s;
}

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

.register__item:has(.register__row[aria-expanded="false"]) .register__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}

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

.register__panel-inner {
  padding-left: 0;
}

@media (min-width: 768px) {
  .register__panel-inner {
    padding-left: 4rem;
  }
}

.register__panel-inner > :last-child {
  margin-bottom: 1.75rem;
}

.register__amenities {
  font-size: .95rem;
}

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

.register__thumb {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 3px;
  border: 1px solid var(--line);
  transition: border-color var(--t-fast) var(--ease);
}

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

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


/* --- § 06 Dining ---------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.split + .split {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.split__text > h2,
.split__text > h3 {
  margin-bottom: 1.25rem;
}

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

  .split--reverse {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  .split--reverse .split__media {
    order: 2;
  }

  .split--reverse .split__text {
    justify-self: end;
    max-width: 34rem;
  }
}

.split__media--narrow {
  max-width: 26rem;
}

.dishes {
  display: grid;
  gap: 1rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}

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

.dish .frame__img {
  margin: 6px 6px 0;
}

.dish .card__title {
  font-size: 1.3rem;
}

.dish p:last-child {
  font-size: .95rem;
  color: var(--text-dim);
}

.cellar {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

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

.cellar__text h3 {
  margin-bottom: 1rem;
}


/* --- § 07 The entertainment and gaming lounge ----------------------------- */
.lounge__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lounge__lead {
  max-width: 62ch;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.lounge__lead > * + * {
  margin-top: 1rem;
}

.lounge__lead p:not(.lead) {
  color: var(--text-dim);
}

.lounge__separate {
  max-width: 62ch;
  margin-top: 2rem;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lead);
}

.lounge__info {
  display: grid;
  gap: 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .lounge__info {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

.lounge__info h3 {
  margin-bottom: 1rem;
}

/* Horizontal strip (Strip, stage 6): scroll-snap, ‹ › buttons */
.strip {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.strip__controls {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-bottom: 1rem;
}

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

.strip__prev,
.strip__next {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  font-family: var(--ff-serif);
  font-size: 1.4rem;
  line-height: 1;
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast);
}

.strip__prev:hover:not(:disabled),
.strip__next:hover:not(:disabled) {
  border-color: var(--accent);
}

.strip__prev:disabled,
.strip__next:disabled {
  opacity: .35;
}

.strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 78%);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: .75rem;
}

@media (min-width: 768px) {
  .strip__track {
    grid-auto-columns: calc((100% - 2rem) / 3);
  }
}

@media (min-width: 1200px) {
  .strip__track {
    grid-auto-columns: calc((100% - 3rem) / 3.4);
  }
}

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

.strip__item .frame__img {
  margin: 6px 6px 0;
}

.strip__item .card__title {
  font-size: 1.25rem;
}

.strip__item p {
  font-size: .92rem;
  color: var(--text-dim);
}


/* ==========================================================================
   11. Home sections § 08 – § 14 (BRIEF §5)
   ========================================================================== */

/* --- § 08 The Baths ------------------------------------------------------- */
/* Phone: horizontal strip. ≥ 768px: 2×2 grid of tall cards, no controls.
   ≥ 1024px: heading on the left (sticky), the grid on the right. */
@media (min-width: 768px) {
  .strip--baths .strip__controls {
    display: none;
  }

  .strip--baths .strip__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

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

  .baths .clause,
  .baths .rhythm,
  .baths .baths__note {
    grid-column: 1 / -1;
  }

  .baths .section__head {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    margin-bottom: 0;
  }

  .baths .strip {
    margin-top: 0;
  }
}

.rhythm {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

.rhythm__title {
  margin-bottom: 1.5rem;
}

.rhythm__steps {
  display: grid;
  gap: 1.5rem;
}

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

.rhythm__step {
  position: relative;
  padding-top: 1.5rem;
}

/* A hairline runs from each seal to the next */
.rhythm__step::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 1.25rem;
  right: 0;
  height: 1px;
  background: var(--line);
}

.rhythm__step:last-child::before {
  display: none;
}

.rhythm__step .seal-dot {
  position: absolute;
  top: 0;
  left: 0;
}

.rhythm__step h4 {
  font-size: 1.35rem;
  font-weight: 400;
}

.rhythm__step p {
  margin-top: .4rem;
  color: var(--text-dim);
}

.baths__note {
  max-width: 62ch;
  margin-top: clamp(2rem, 4vw, 3rem);
}


/* --- § 09 Gatherings ------------------------------------------------------ */
.gatherings__intro {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

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

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

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

@media (min-width: 1024px) {
  /* Tall 4:5 cards laid out image-beside-text to keep the section compact */
  .gathering {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

.gathering .frame__img {
  margin: 6px;
}

.gathering p:last-child {
  font-size: .95rem;
  color: var(--text-dim);
}

.data-table--numeric td {
  text-align: right;
  padding-right: 0;
  padding-left: 1rem;
}

.data-table--numeric thead th:not(:first-child) {
  text-align: right;
  padding-right: 0;
  padding-left: 1rem;
}

.gatherings__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.gatherings__cta p {
  max-width: 52ch;
}


/* --- § 10 The charter ----------------------------------------------------- */
.charter__layout {
  display: grid;
  gap: 2rem;
}

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

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

.charter__head h2 {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.charter__head h2 .seal-dot {
  width: 12px;
  height: 12px;
}

.charter__head .gloss {
  margin-top: 1rem;
}

.charter__item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
}

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

.charter__num {
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--accent);
}

.charter__item h3 {
  font-size: 1.3rem;
}

.charter__item p {
  margin-top: .35rem;
  color: var(--text-dim);
}

.charter__small {
  margin-top: 2rem;
  font-size: var(--fs-note);
  color: var(--text-dim);
}


/* --- § 11 Archive --------------------------------------------------------- */
.archive__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Filters need JS; without it every card is simply shown */
html:not(.js) .archive__bar {
  display: none;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.filter {
  min-height: 2.5rem;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  background: none;
  color: var(--text);
  font-size: var(--fs-small);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

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

.filter[aria-pressed="true"] {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: var(--c-parchment);
}

.archive__status {
  font-size: var(--fs-note);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Card-catalogue masonry: 3 / 2 / 1 columns. Each image has a fixed ratio,
   so loading never shifts the grid. */
.archive__grid {
  columns: 1;
  column-gap: 1.25rem;
}

@media (min-width: 768px) {
  .archive__grid { columns: 2; }
}

@media (min-width: 1024px) {
  .archive__grid { columns: 3; }
}

.archive__card {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.archive__link {
  display: block;
}

.archive__link .frame__img {
  display: block;
}

.archive__link:hover .frame__img,
.archive__link:focus-visible .frame__img {
  border-color: var(--accent);
}

.archive__caption {
  margin-top: .6rem;
  font-size: var(--fs-note);
  color: var(--text-dim);
}

.archive__code {
  display: block;
  margin-bottom: .15rem;
  font-size: var(--fs-chip);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clause);
}


/* --- § 12 The region ------------------------------------------------------ */
.region__cards {
  display: grid;
  gap: 1rem;
}

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

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

.region-card .frame__img {
  margin: 6px 6px 0;
}

.region-card p {
  font-size: .95rem;
  color: var(--text-dim);
}

.region__lower {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.region .region__lower {
  margin-top: clamp(3rem, 6vw, 5rem);
}

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

.getting-here > * + * {
  margin-top: 1rem;
}

/* Map with text labels. Positions come from data-x / data-y via MapLabels
   (stage 6), which sets --x / --y and then adds .is-placed.
   Before that (and without JS) the labels are a plain legend. */
.map__canvas {
  position: relative;
}

.map__labels {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  padding: .75rem .25rem .25rem;
  font-size: var(--fs-note);
}

.map__label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.map__label--point::before,
.map__label--project::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ink);
}

.map__label--project::before {
  width: 10px;
  height: 10px;
  background: var(--c-seal);
  box-shadow: 0 0 0 3px rgba(243, 237, 225, .9);
}

.map__labels.is-placed {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  pointer-events: none;
}

.map__labels.is-placed .map__label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  max-width: 13rem;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--c-ink);
  transform: translate(-50%, -50%);
}

.map__labels.is-placed .map__label[data-align="right"] {
  /* dot centre on the point: tag padding (.4rem) + half the dot */
  transform: translate(calc(-.4rem - 3.5px), -50%);
}

.map__labels.is-placed .map__label[data-align="left"] {
  flex-direction: row-reverse;
  text-align: right;
  transform: translate(calc(-100% + .4rem + 5px), -50%);
}

.map__labels.is-placed .map__label--place,
.map__labels.is-placed .map__label--area {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .95rem;
}

.map__labels.is-placed .map__label--area {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .72rem;
  font-style: normal;
  font-family: var(--ff-sans);
  color: #1f2a30;
}

.map__labels.is-placed .map__label--project {
  font-weight: 500;
}

/* Solid parchment tag behind each label: the drawn coastlines under the text
   are dark, so contrast is measured against the tag, never the map */
.map__labels.is-placed .map__label {
  padding: .1rem .4rem;
  background: rgba(243, 237, 225, .94);
  box-shadow: 0 0 0 1px rgba(20, 23, 26, .12);
}

@media (max-width: 479.98px) {
  .map__labels.is-placed .map__label {
    max-width: 8.5rem;
    font-size: .68rem;
  }

  .map__labels.is-placed .map__label--place {
    font-size: .8rem;
  }

  .map__labels.is-placed .map__label--area {
    max-width: 4.5rem;
    font-size: .6rem;
    text-align: center;
  }
}


/* --- § 13 FAQ ------------------------------------------------------------- */
.faq__layout {
  display: grid;
  gap: 2rem;
}

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

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

.faq__head p {
  margin-top: 1rem;
  color: var(--text-dim);
}

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

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

.faq__q {
  font-size: 1.15rem;
  font-weight: 400;
}

.faq__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.1rem 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--ff-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.35;
  text-align: left;
}

/* Plus / minus drawn with two hairlines */
.faq__toggle::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: .45em;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 14px no-repeat;
  transition: transform var(--t-med) var(--ease);
}

.faq__toggle[aria-expanded="true"]::after {
  background: linear-gradient(currentColor, currentColor) center / 14px 1px no-repeat;
}

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

.faq__a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-med) var(--ease), visibility 0s linear 0s;
}

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

.faq__a-inner p {
  max-width: 62ch;
  padding-bottom: 1.25rem;
  color: var(--text-dim);
}

.faq__item:has(.faq__toggle[aria-expanded="false"]) .faq__a {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}


/* --- § 14 Interest list band ---------------------------------------------- */
.cta-band {
  --text: var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent: var(--c-seal-light);
  --clause: var(--c-pewter-light);
  --btn-bg: var(--c-paper);
  --btn-text: var(--c-ink);
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 60vh, 38rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--c-ink);
  color: var(--c-paper);
}

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

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

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(20, 23, 26, .82) 0%,
    rgba(20, 23, 26, .7) 55%,
    rgba(20, 23, 26, .3) 100%
  );
}

.cta-band__inner {
  position: relative;
  z-index: 1;
}

.cta-band__inner > * + * {
  margin-top: 1rem;
}

.cta-band h2 {
  max-width: 18ch;
  color: var(--c-paper);
}

.cta-band__sub {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--c-paper);
}

.cta-band .button {
  margin-top: 1.5rem;
}

.cta-band .button .seal-dot {
  box-shadow:
    inset 0 0 0 1.5px var(--c-seal),
    inset 0 0 0 2.5px rgba(243, 237, 225, .35);
}


/* ==========================================================================
   12. Inner page intro, breadcrumbs, contact page and interest list form
   ========================================================================== */

.page-intro {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
}

.page-intro h1 {
  max-width: 18ch;
  margin-top: 1.25rem;
}

.page-intro__lead {
  max-width: 60ch;
  margin-top: 1.5rem;
}

.page-intro__notlaw {
  max-width: 60ch;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--c-seal);
  font-size: .95rem;
}

/* Breadcrumbs (contact and legal pages) */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .5rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-note);
  color: var(--text-dim);
}

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

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

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

/* --- Contact layout --- */
.contact__layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

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

.contact__form > h2 {
  margin-bottom: 1.5rem;
  font-size: var(--fs-h3);
}

.interest-form {
  display: grid;
  gap: 1.25rem;
  max-width: 40rem;
}

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

.field__label {
  font-size: var(--fs-small);
  font-weight: 500;
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(20, 23, 26, .45);   /* 3.3:1 on vellum — visible field edge */
  border-radius: 0;
  background: var(--c-parchment);
  color: var(--c-ink);
  transition: border-color var(--t-fast) var(--ease);
}

.field__input:hover {
  border-color: var(--c-ink);
}

.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--c-ink);
}

.field__select {
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 50%,
    calc(100% - .8rem) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

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

.field__checkbox {
  width: 1.25rem;
  height: 1.25rem;
  margin: .2rem 0 0;
  accent-color: var(--c-ink);
}

.field__check-label {
  font-size: .92rem;
  line-height: 1.55;
}

/* Error state — messages are created by MailtoForm (stage 6) */
.field__input[aria-invalid="true"],
.field__checkbox[aria-invalid="true"] {
  border-color: var(--c-seal-deep);
  outline: 1px solid var(--c-seal-deep);
}

.field__error {
  font-size: var(--fs-note);
  font-weight: 500;
  color: var(--c-seal-deep);
}

.field--check .field__error {
  grid-column: 2;
}

.interest-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: .5rem;
}

.interest-form__hint {
  max-width: 28ch;
  font-size: var(--fs-note);
  color: var(--text-dim);
}

.contact__fallback,
.contact__noscript {
  max-width: 40rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.contact__noscript {
  padding: 1rem;
  border: 1px solid var(--c-seal-deep);
}

.contact__small {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: var(--fs-note);
  color: var(--text-dim);
}

/* --- Aside: department addresses --- */
.contact__aside {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: var(--c-parchment);
}

.contact__aside-title {
  margin-bottom: 1rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clause);
}

.contact__mail > div + div {
  margin-top: 1rem;
}

.contact__mail dt {
  font-size: var(--fs-note);
  color: var(--text-dim);
}

.contact__mail dd {
  margin: 0;
  overflow-wrap: anywhere;
}

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


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

/* --- 404 --- */
.notfound {
  min-height: 60vh;
}

.notfound h1 {
  max-width: 16ch;
}

.notfound__actions {
  margin-top: 2rem;
}

.notfound__nav {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.notfound__title {
  margin-bottom: 1rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clause);
}

.notfound__list {
  display: grid;
  gap: .5rem 2rem;
}

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

.notfound .page-intro__notlaw {
  margin-top: 2.5rem;
}

/* --- Legal pages (BRIEF §9): contents + numbered sections, 720px column --- */
.legal-meta {
  margin-top: 1rem;
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clause);
}

.legal {
  padding-top: 0;
}

.legal__layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1200px) {
  .legal__layout {
    grid-template-columns: 15rem minmax(0, 720px);
    column-gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
  }
}

.legal__toc {
  max-width: 720px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  background: var(--c-vellum);
}

.legal__toc-title {
  margin-bottom: .75rem;
  font-family: var(--ff-sans);
  font-size: var(--fs-clause);
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--clause);
}

.legal__toc-list {
  counter-reset: toc;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.legal__toc-list li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
}

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

.legal__toc-list li::before {
  content: counter(toc) ".";
  font-variant-numeric: tabular-nums;
  color: var(--clause);
}

.legal__toc-list a {
  color: var(--text);
  text-decoration: none;
}

.legal__toc-list a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.legal__body {
  max-width: 720px;
  min-width: 0;
}

.legal__section {
  padding-top: 2rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.legal__section + .legal__section {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
}

.legal__section:first-child {
  padding-top: 0;
}

.legal__section h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 500;
}

.legal__num {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.legal__section h3 {
  margin: 1.5rem 0 .5rem;
  font-size: 1.1rem;
}

.legal__section > * + * {
  margin-top: .9rem;
}

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

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

.legal__section code {
  font-size: .9em;
  overflow-wrap: anywhere;
}

.legal__section .table-wrap {
  margin-top: 1rem;
}

.legal__section .data-table {
  min-width: 36rem;
  font-size: .9rem;
}

.legal__section .data-table tbody th {
  font-family: var(--ff-sans);
  font-size: .9rem;
  font-weight: 500;
}

.legal__related {
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
}

.legal__related ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}


/* ==========================================================================
   14. Components created by JS: sentinels, reveal, lightbox, back to top,
       form status (BRIEF §6)
   ========================================================================== */

/* IntersectionObserver targets — never visible, never focusable */
.js-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  visibility: hidden;
  pointer-events: none;
}

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

/* Reveal: only elements below the first screen get .reveal from JS */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Margin-note marker turned into a disclosure button (< 1200px) */
.note-marker[role="button"] {
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.note-marker[aria-expanded="true"] {
  background: var(--c-seal-deep);
  color: var(--c-parchment);
}

.section--court .note-marker[aria-expanded="true"] {
  background: var(--c-seal-light);
  color: var(--c-ink);
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: clamp(3.5rem, 8vh, 5rem) clamp(1rem, 6vw, 5rem);
  background: rgba(20, 23, 26, .94);
  color: var(--c-paper);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: .75rem;
  max-width: 100%;
}

.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 1200px);
  max-height: calc(100vh - 10rem);
  max-height: calc(100svh - 10rem);
  object-fit: contain;
  border: 1px solid rgba(239, 233, 221, .25);
  padding: 4px;
}

.lightbox__caption {
  max-width: 60ch;
  font-size: var(--fs-small);
  text-align: center;
  color: var(--c-paper);
}

.lightbox__counter {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  font-size: var(--fs-note);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--c-paper-dim);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(239, 233, 221, .35);
  background: rgba(20, 23, 26, .6);
  color: var(--c-paper);
  font-family: var(--ff-serif);
  font-size: 1.6rem;
  line-height: 1;
  transition: border-color var(--t-fast) var(--ease);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover {
  border-color: var(--c-paper);
}

.lightbox :focus-visible {
  outline-color: var(--c-seal-light);
}

.lightbox__close { top: .75rem; right: .75rem; }
.lightbox__prev  { left: .75rem;  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: .75rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 767.98px) {
  .lightbox__prev,
  .lightbox__next {
    top: auto;
    bottom: .75rem;
    transform: none;
  }
}

/* --- Back to top --- */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--c-line);
  background: var(--c-parchment);
  color: var(--c-ink);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 4px 14px -8px rgba(20, 23, 26, .5);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.back-to-top:hover {
  transform: translate(2px, 2px);
  box-shadow: -2px -2px 0 var(--c-seal);
}

.back-to-top[hidden] {
  display: none;
}

/* --- Interest form status line (role="status") --- */
.interest-form__status:empty {
  display: none;
}

.interest-form__status {
  padding: .75rem 1rem;
  border-left: 2px solid var(--c-court);
  background: var(--c-parchment);
  font-size: var(--fs-small);
}


/* ==========================================================================
   15. Reduced motion
   Disables smooth scroll, every transition and animation, and the hero
   crossfade (slides switch instantly; autoplay is also disabled in JS).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .hero__slide {
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .button--primary:hover,
  .button--primary:active {
    transform: none;
  }
}