/* ==========================================================================
   Artcestry: base layer (tokens, reset, shared components)
   Design source: Figma full-page SVG export "Actry.xml" (1440 x 8143).
   ========================================================================== */

/* Fonts: self-hosted WOFF2 (latin and latin-ext subsets, downloaded once from Google Fonts; SIL Open
   Font License). No request leaves the site for type. The URLs are relative to styles.css at the root.
   Noto Sans and Noto Serif are variable fonts: one file per subset covers 400 to 700. To update a face,
   save the new file under the next -vN name so caches never serve a stale file under the old URL. */
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/noto-sans-latin-ext-v1.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: "Noto Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/noto-sans-latin-v1.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: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/noto-sans-italic-latin-ext-v1.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: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/noto-sans-italic-latin-v1.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: "Noto Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/noto-serif-latin-ext-v1.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: "Noto Serif"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/noto-serif-latin-v1.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: "Noto Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/noto-serif-italic-latin-ext-v1.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: "Noto Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/noto-serif-italic-latin-v1.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: "Noto Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/noto-serif-display-latin-ext-v1.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: "Noto Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/noto-serif-display-latin-v1.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/poppins-500-latin-ext-v1.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: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/poppins-500-latin-v1.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/poppins-600-latin-ext-v1.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: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/poppins-600-latin-v1.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/poppins-700-latin-ext-v1.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: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/poppins-700-latin-v1.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; }

:root {
  /* Colour (all sampled from the design file) */
  --ink: #201F1D;          /* dark surfaces: hero, provenance card */
  --ink-2: #2A2622;        /* headings on cream */
  --ink-3: #201E1D;        /* FAQ questions */
  --text: #4A443B;         /* body copy on cream */
  --muted: #6B6252;        /* secondary copy on cream */
  --cream: #FBF3DC;        /* page background */
  --paper: #F4EAD1;        /* cards on cream */
  --paper-2: #F3EAD1;      /* story frame */
  --paper-3: #E3D9B8;      /* record badge */
  --warm-white: #FFFBF0;   /* inputs, raised cards */
  --line: #E3D6B5;         /* card borders */
  --line-2: #D9CBA8;       /* list rules on cream */
  --chip: #C9B98F;         /* chip borders, outline icons */
  --stone: #BFB49A;        /* muted copy on dark */
  --stone-2: #A89A78;      /* dashed borders, muted numerals */
  --olive: #415426;        /* brand green */
  --gold: #B8912E;         /* brand gold (display type) */
  --gold-2: #B8902E;       /* brand gold (rules, fills) */
  --gold-light: #E4C470;   /* gold on dark */
  --gold-mid: #D9B25A;     /* numerals on dark */
  --gold-dark: #8A6A1F;    /* active numerals on cream */
  --sand: #E9DDBE;         /* body copy on dark */
  --sand-2: #D6CCB0;       /* secondary copy on green */
  --hero-title: #F2EEE3;
  --hero-copy: #E9E7E1;
  --on-dark: #FBF3DC;

  /* Type */
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display-sans: "Poppins", "Noto Sans", system-ui, sans-serif;

  /* Section heading scale (h2). The design sets why, explore, stories and news at 44px, provenance
     at 48, FAQ at 52 and membership at 58. One fluid base (44px from 1421px up, 30px from 684px
     down) and three steps in the same proportion keep that order at every width from 481 up.
     Parts add only their line-break guards (em max-width, column caps) and 480px-and-below rules. */
  --h2-fluid: calc(1.9vw + 17px);
  --h2: clamp(30px, var(--h2-fluid), 44px);
  --h2-lg: clamp(32.73px, calc(var(--h2-fluid) * 48 / 44), 48px);
  --h2-xl: clamp(35.45px, calc(var(--h2-fluid) * 52 / 44), 52px);
  --h2-xxl: clamp(39.55px, calc(var(--h2-fluid) * 58 / 44), 58px);

  /* Layout */
  --page-max: 1440px;
  --gutter: 64px;          /* side margin at 1440 */
  --content: 1312px;       /* 1440 - 2 x 64 */
  --section-y: 100px;

  /* Motion defaults (the motion layer reads these) */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

@media (max-width: 1200px) { :root { --gutter: 40px; } }
@media (max-width: 768px)  { :root { --gutter: 24px; --section-y: 72px; } }
@media (max-width: 480px)  { :root { --gutter: 20px; --section-y: 64px; } }

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top keeps anchor jumps and keyboard focus scrolling clear of the fixed header
   (68px scrolled, 60px at 768 and below) plus the 2px focus ring and its 3px offset (WCAG 2.4.11).
   It replaces the old section scroll-margin-top: the two would add up on anchor jumps. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (max-width: 768px) { html { scroll-padding-top: 76px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* Accessibility ---------------------------------------------------------- */
/* Focus ring: olive on light surfaces (gold is under 3:1 on cream), light gold on dark and olive surfaces */
:focus-visible { outline: 2px solid var(--focus, var(--olive)); outline-offset: 3px; }
.skip-link, .site-header, .hero, .stories, .provenance__card, .membership, .site-footer { --focus: var(--gold-light); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  padding: 12px 18px; background: var(--olive); color: var(--on-dark);
  font: 700 12px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* Layout ----------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Eyebrow: small caps label followed (or flanked) by a short rule --------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(14px - .185em);   /* the tracking after the last letter supplies the rest of the design's 14px */
  font: 700 11px/1 var(--sans);
  letter-spacing: .185em;
  text-transform: uppercase;
  color: var(--olive);
}
.eyebrow::after {
  content: "";
  flex: none;
  width: 56px;
  height: 1px;
  background: currentColor;
}
.eyebrow--gold-rule::after { background: var(--gold-2); }
.eyebrow--on-dark { color: var(--sand); }

/* Display type accents --------------------------------------------------- */
.accent { color: var(--gold); }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid transparent;
  font: 700 12px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.btn--olive { background: var(--olive); color: var(--on-dark); }
.btn--olive:hover { background: #4d6430; }
.btn--cream { background: var(--cream); color: var(--ink-2); }
.btn--cream:hover { background: #fff8e6; }
.btn--outline-light { border-color: var(--on-dark); color: var(--on-dark); }
.btn--outline-light:hover { background: rgba(251, 243, 220, .08); }
.btn--display { font-family: var(--display-sans); font-weight: 600; font-size: 11px; letter-spacing: .19em; }

/* Text link with trailing arrow (READ THE STORIES ->) --------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 700 12px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--olive);
}
.link-arrow .icon-arrow { transition: transform .25s var(--ease-out); }
.link-arrow:hover .icon-arrow, .btn:hover .icon-arrow { transform: translateX(4px); }

/* Icons (inline SVG, stroke = currentColor) ------------------------------ */
.icon { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.icon-arrow { width: 10px; height: 9px; stroke-width: 1.17; }
.icon-arrow-ne { width: 9px; height: 9px; stroke-width: 1.35; }

/* Extra pages (privacy, 404, thanks) ------------------------------------- */
/* assemble.py wraps each page body from parts/pages/ in a plain header (logo to /), <main class="page">
   and the shared footer. The home page never uses these classes. */
.page-header { background: var(--ink); color: var(--on-dark); --focus: var(--gold-light); }
.page-header__inner { display: flex; align-items: center; min-height: 80px; }
.page-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 24px/1 var(--sans);
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color .2s var(--ease-out);
}
.page-header__logo:hover { color: var(--gold-light); }
.page { padding-block: var(--section-y); }

/* 404 and thanks: one short message and a way home */
.notice { max-width: 680px; }
.notice__title { margin-top: 22px; font: 500 var(--h2-lg)/1.15 var(--serif); color: var(--ink-2); }
.notice__text { margin-top: 20px; font-size: 18px; line-height: 1.6; }
.notice__btn { margin-top: 36px; }

/* Privacy notice (body in parts/pages/privacy.html) */
.legal { max-width: 760px; }
.legal__header { padding-bottom: 28px; border-bottom: 1px solid var(--line-2); }
.legal__version { white-space: nowrap; }
.legal__title { font: 500 var(--h2-lg)/1.15 var(--serif); color: var(--ink-2); }
.legal__meta { margin-top: 14px; font-size: 14px; color: var(--muted); }
.legal__section { margin-top: 48px; }
.legal__heading { font: 500 26px/1.25 var(--serif); color: var(--ink-2); }
.legal__subheading { margin-top: 28px; font: 700 16px/1.4 var(--sans); color: var(--ink-2); }
.legal__text, .legal__list { margin-top: 14px; }
.legal__heading + .legal__text, .legal__heading + .legal__list, .legal__subheading + .legal__text { margin-top: 10px; }
.legal__list { padding-left: 1.25em; }
.legal__item + .legal__item { margin-top: 10px; }
.legal strong { font-weight: 700; color: var(--ink-2); }
.legal__key {
  padding: 1px 5px;
  background: var(--paper);
  font: 400 .9em/1.4 Consolas, "SFMono-Regular", Menlo, monospace;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.legal__link, .legal__button {
  color: var(--olive);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal__link { overflow-wrap: anywhere; }
.legal__button { font-weight: 600; }
.legal__link:hover, .legal__button:hover { color: var(--ink-2); }

@media (max-width: 768px) {
  .page-header__inner { min-height: 64px; }
  .page-header__logo { font-size: 20px; }
  .notice__text { font-size: 16px; }
  .legal__heading { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-header__logo { transition: none; }
}

/* Print ------------------------------------------------------------------ */
/* Browsers drop backgrounds in print by default, which would leave cream text on white on the
   olive buttons. Each dark section sets the same in its own part. */
@media print {
  .btn--olive { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .skip-link { display: none; }
  .page-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Brand mark (the A on its cream tile) before the ARTCESTRY wordmark in the site and page headers */
.site-header__logo, .page-header__logo { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { flex: none; display: block; width: 36px; height: 36px; }
@media (max-width: 768px) {
  .site-header__logo, .page-header__logo { gap: 10px; }
  .brand-mark { width: 30px; height: 30px; }
}
@media print { .brand-mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ==========================================================================
   01-hero: site header + hero with world map layer (design y 0 to 1240)
   Type fitted with tools/fit.py; see notes/01-hero.md.
   ========================================================================== */

/* Site header --------------------------------------------------------------- */
.site-header {
  position: absolute;          /* no JS: scrolls away with the hero */
  inset: 0 0 auto 0;
  z-index: 100;
  height: 80px;
  color: var(--on-dark);
  transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out), height .25s var(--ease-out);
}
html.js .site-header, .site-header--js { position: fixed; }   /* html.js is set in <head> before first paint: no shift when main.js arrives */
.site-header--scrolled {
  height: 68px;
  background: rgba(32, 31, 29, .95);   /* .88 let the cream sections wash the bar out to #3B3934 */
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(233, 221, 190, .1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.site-header__logo {
  flex: none;
  font: 700 24px/1 var(--sans);
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color .2s var(--ease-out);
}
.site-header__logo:hover { color: var(--gold-light); }

.site-header__nav { position: relative; top: -1.5px; }   /* design nav caps sit 2px above the bar centre */
.site-header__list { display: flex; align-items: center; gap: 35px; }
.site-header__link {
  position: relative;
  display: block;
  padding: 10px 0;
  font: 600 12px/1 var(--sans);
  letter-spacing: .123em;
  text-transform: uppercase;
  color: var(--on-dark);
  transition: color .2s var(--ease-out);
}
.site-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: .123em;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ease-out);
}
.site-header__link:hover { color: var(--gold-light); }
.site-header__link:hover::after,
.site-header__link:focus-visible::after { transform: scaleX(1); }
.site-header__nav-cta { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.site-header__cta { padding: 1px 26px 0 27.5px; letter-spacing: .124em; }

.site-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--on-dark);
}
.site-header__menu-icon { position: relative; display: block; width: 22px; height: 14px; }
.site-header__menu-icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease-out), opacity .2s var(--ease-out);
}
.site-header__menu-icon span:nth-child(1) { top: 0; }
.site-header__menu-icon span:nth-child(2) { top: 6.25px; }
.site-header__menu-icon span:nth-child(3) { top: 12.5px; }
.site-header--menu-open .site-header__menu-icon span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.site-header--menu-open .site-header__menu-icon span:nth-child(2) { opacity: 0; }
.site-header--menu-open .site-header__menu-icon span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* Hero ---------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 1240px;
  overflow: hidden;
  background: var(--ink);
  color: var(--hero-copy);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: .2;
}

/* Map layer: one SVG in design coordinates, 1:1 at >= 1200px, scaled below; the motion layer (.hero-fx) shares its box */
.hero-map, .hero-fx {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: clamp(720px, 120vw, 1440px);
  max-width: none;
  height: auto;
  aspect-ratio: 1440 / 1240;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}
.hero-map { opacity: var(--hero-map-opacity, .2); }
.hero-fx { display: none; }   /* shown only by motion.css (every width, motion on, pause control present) */

/* Shift, so the buttons clear Europe (MAP-MOTION-SPEC 2; fix pass in notes/map-motion.md): 73.5 design px from 1013px.
   From 940 to 1012 the scaled copy sits lower on the map, so the shift grows to 96.25 at 940 (390px - 31.25vw): Europe's
   ring stays 9.6px or more under Explore and Latin America stays clear of the strip. Below 940 the map is as v11. */
.hero { --hero-map-shift: 0px; }
@media (min-width: 940px) { .hero { --hero-map-shift: max(73.5px, calc(390px - 31.25vw)); } }
.hero-map__stage { transform: translateY(var(--hero-map-shift)); }
.hero-map__route {
  fill: none;
  stroke: var(--gold-2);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 3 6;
}
.hero-map__marker-core { transform-box: fill-box; transform-origin: center; }
.hero-map__halo { fill: url(#hero-map-glow); }
.hero-map__ring { fill: var(--gold-light); fill-opacity: .22; }
.hero-map__ring--outer { fill-opacity: .08; }
.hero-map__dot { fill: var(--gold-light); }
.hero-map__tick { fill: var(--gold-2); }
.hero-map__num { font: 700 10px var(--sans); letter-spacing: .18em; fill: var(--gold-mid); }
.hero-map__name { font: 400 20px var(--serif); fill: var(--on-dark); }
.hero-map__sub { font: 400 11px var(--sans); fill: var(--stone); }
.hero-map__label--left text { text-anchor: end; }

/* Motion layer look (MAP-MOTION-SPEC 4.2); everything rests invisible until its animation runs */
.hero-fx__wake { fill: none; stroke: #F4DE9C; stroke-width: 1; stroke-linecap: round; opacity: .34; }
.hero-fx__seg, .hero-fx__head, .hero-fx__ping, .hero-fx__coda { opacity: 0; }
.hero-fx__glow { fill: url(#hero-fx-glow); }
.hero-fx__core { fill: var(--on-dark); }
.hero-fx__ping, .hero-fx__coda { fill: none; stroke: var(--gold-light); transform-box: fill-box; transform-origin: center; }
.hero-fx__ping { stroke-width: 1; }
.hero-fx__coda { stroke-width: .8; }
/* Below 1200 the copy sits closer to the scaled map (Europe under Explore, Latin America over the strip at 940 to
   1024): smaller arrival and ripple rings. Where CSS r is not supported the attribute sizes (22, 26) stay. */
@media (max-width: 1199px) {
  .hero-fx__ping { r: 16px; }
  .hero-fx__coda { r: 18px; }
}
/* Below 940 the map is drawn at 0.5 to 0.65 (tablets, phones): heads 1.5x and wakes 1.6 design px, so on screen they
   stay at or under their desktop size (head 0.75 to 0.98x, wake 0.8 to 1px) but do not vanish into a 1px speck. */
@media (max-width: 939px) {
  .hero-fx__head { transform: scale(1.5); transform-box: fill-box; transform-origin: center; }
  .hero-fx__wake { stroke-width: 1.6; }
}

/* Below 940 (unshifted) the map stays as v11: the Figma routes clip, no link routes (MAP-MOTION-SPEC 3). The two
   travellers (.hero-fx) still run here: their wakes draw their own arcs where the dashed routes are hidden. */
@media (max-width: 939px) {
  .hero-map__routes { clip-path: url(#hero-map-routes-clip); }
  .hero-map__route--link { display: none; }
}

/* Content */
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  padding-top: 286.8px;         /* eyebrow baseline at design y 297.5 */
  padding-bottom: 121.3px;      /* strip baseline at design y 1116.9 */
  text-align: center;
}
.hero__content { display: flex; flex-direction: column; align-items: center; width: 100%; }

.hero__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .207em; }
.hero__eyebrow::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--gold-2); }   /* leading rule (base draws only ::after) */
.hero__eyebrow::after { width: 40px; }
.hero__eyebrow > span { margin-right: -.207em; white-space: nowrap; }   /* cancel trailing tracking so both rules sit 14px from the ink */

.hero__title {
  max-width: 16.6em;            /* above 768: breaks after "Engage" (at 768 and below text-wrap: balance takes over) */
  margin-top: 25.2px;
  font: 600 clamp(40px, 5.6vw, 72px)/1.0417 var(--serif);
  letter-spacing: -.02em;
  color: var(--hero-title);
}
.hero__title-accent { display: block; font-weight: 400; color: var(--gold); }
/* The trailing no-break space after "Global" copies Figma's centring of line 2 at 1440 (see
   notes/01-hero.md). Below 1200 the lines break differently and it would only push the
   second-to-last line off centre, so it is dropped there. */
@media (max-width: 1199px) { .hero__title-nbsp { display: none; } }

.hero__lede {
  width: 750px;
  max-width: 100%;
  margin-top: 24.4px;
  padding-top: 23.9px;
  border-top: 1px solid rgba(184, 145, 46, .6);
}
.hero__lede p {
  max-width: 540px;
  margin-inline: auto;
  font: 400 18px/26.5px var(--sans);
  letter-spacing: .04em;
  color: var(--hero-copy);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 29.6px;
}
.hero__btn { min-height: 48px; padding: 0 29.4px 2px 31.4px; font-weight: 700; font-size: 10.7px; letter-spacing: .195em; }

.hero__strip {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
  font: 600 12px/1 var(--sans);
  letter-spacing: .207em;
  text-transform: uppercase;
  color: var(--stone);
}
.hero__strip::before,
.hero__strip::after { content: ""; flex: none; width: 64px; height: 1px; background: var(--gold-2); transform: translateY(-.6px); }   /* design rule at y1111.4 */
.hero__strip-text { margin-right: -.207em; white-space: nowrap; }
.hero__strip-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-2); transform: translateY(-.6px); }   /* design dot y1109.4 to 1114.4 */

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1199px) {
  .hero { min-height: 103.33vw; }          /* map height at 120vw wide */
  .hero__inner { padding-top: 23.9vw; padding-bottom: 10.15vw; }
}

@media (max-width: 1080px) {
  .hero-map__label { display: none; }   /* the 120vw map drifts North America under JOIN and Europe under the lede from 1040 down */
}

@media (max-width: 1024px) {
  .site-header__list { gap: 28px; }
}

@media (max-width: 768px) {
  .site-header { height: 64px; }
  .site-header--scrolled { height: 60px; }
  .site-header__logo { display: inline-flex; align-items: center; min-height: 44px; font-size: 20px; }   /* 44px tap target */
  .site-header__cta { min-height: 44px; padding: 0 16px 0 18px; font-size: 11px; }
  .hero__btn { font-size: 11px; }   /* SPEC rule 5: 11px floor for caps labels on mobile (10.7px is the 1440 fit) */

  /* no JS: nav stays visible as a second row */
  .site-header:not(.site-header--js) { height: auto; padding-block: 12px; }
  .site-header:not(.site-header--js) .site-header__inner { flex-wrap: wrap; row-gap: 4px; }
  .site-header:not(.site-header--js) .site-header__nav { order: 3; width: 100%; top: 0; }
  .site-header:not(.site-header--js) .site-header__list { gap: 24px; }
  .site-header:not(.site-header--js) .site-header__link { padding: 16px 0; }

  /* JS: collapsible panel */
  .site-header--js .site-header__menu-btn { display: inline-flex; }
  .site-header--js .site-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--ink);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .35);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
  }
  .site-header--menu-open { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header--menu-open .site-header__nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s var(--ease-out), transform .25s var(--ease-out), visibility 0s;
  }
  .site-header--js .site-header__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-header--js .site-header__list > li { border-bottom: 1px solid rgba(233, 221, 190, .14); }
  .site-header--js .site-header__link { padding: 17px 0; font-size: 13px; }
  .site-header--js .site-header__link::after { display: none; }

  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__inner { padding-top: 120px; padding-bottom: 40px; }
  .hero__title { line-height: 1.1; text-wrap: balance; }   /* no word left alone on a line (e.g. "Global" at 481 to 543) */
  .hero__lede p { font-size: 17px; line-height: 1.55; }
  /* content centred in the space above the strip (no dead band on tall portrait screens); 56px minimum gap */
  .hero__content { margin-block: auto; padding-bottom: 56px; }
  .hero__strip { margin-top: 0; }
}

@media (max-width: 560px) {
  /* stack before the two buttons wrap on their own (at 532) so they never sit at unequal widths */
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; gap: 12px; margin-top: 28px; }
  .hero__btn { padding-inline: 20px; }
}

@media (max-width: 480px) {
  .site-header__cta { display: none; }
  .site-header--js .site-header__nav-cta { display: block; border-bottom: 0; padding-top: 20px; }
  .site-header--js .site-header__nav-cta .btn { width: 100%; min-height: 48px; }

  /* no JS: the header joins the flow (its rows can wrap without covering the hero) and the CTA shows under the links */
  html:not(.js) .site-header:not(.site-header--js) { position: relative; background: var(--ink); }
  .site-header:not(.site-header--js) .site-header__list { flex-wrap: wrap; row-gap: 0; }
  .site-header:not(.site-header--js) .site-header__nav-cta { display: block; flex-basis: 100%; padding-bottom: 4px; }
  .site-header:not(.site-header--js) .site-header__nav-cta .btn { width: 100%; min-height: 48px; }

  .hero__inner { padding-top: 112px; }
  .hero__eyebrow { gap: 12px; letter-spacing: .19em; }
  .hero__eyebrow > span { margin-right: -.19em; }
  .hero__eyebrow::before,
  .hero__eyebrow::after { width: 24px; }
  .hero__title { margin-top: 20px; font-size: clamp(34px, 11.1vw, 40px); }   /* 40px from 360 up; below, "With The Global" still fits one line */
  .hero__lede { margin-top: 22px; padding-top: 20px; }
  .hero__lede p { font-size: 16px; letter-spacing: .03em; }
  .hero__strip { gap: 10px; letter-spacing: .18em; }
  .hero__strip-text { margin-right: -.18em; }
  .hero__strip::before,
  .hero__strip::after { width: 20px; }
}

@media (max-width: 360px) {
  .hero__eyebrow { gap: 8px; letter-spacing: .16em; }
  .hero__eyebrow > span { margin-right: -.16em; }
  .hero__eyebrow::before,
  .hero__eyebrow::after { width: 16px; }
  .hero__strip { letter-spacing: .16em; }
  .hero__strip-text { margin-right: -.16em; }
  .hero__strip::before,
  .hero__strip::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__nav,
  .site-header__menu-icon span,
  .site-header__link::after { transition: none !important; }
}

/* Print ----------------------------------------------------------------------- */
@media print {
  /* the header prints as a static bar (motion.css): no menu toggle, the nav as a plain row */
  .site-header, .hero { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .site-header { height: auto; }
  .site-header__inner { flex-wrap: wrap; padding-block: 16px; }
  .site-header__menu-btn { display: none !important; }
  .site-header--js .site-header__nav {
    position: static; order: 3; width: 100%; padding: 0;
    visibility: visible; opacity: 1; transform: none; background: none; box-shadow: none;
  }
  .site-header--js .site-header__list { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 24px; }
  .site-header--js .site-header__list > li { border-bottom: 0; }
  .site-header__nav-cta { display: none !important; }
  /* the hero is 1240px / 100svh on screen: in print it takes only the height of its content,
     so page 1 is not left holding the header alone */
  .hero { min-height: 0; break-inside: avoid; }
  .hero__inner { padding-top: 96px; padding-bottom: 48px; }
  .hero__strip { margin-top: 64px; }
}


/* ==========================================================================
   02-why: "Why Artcestry" bento grid (design y 1240 to 2326)
   Fitted type (tools/fit.py): h2 Noto Serif 500 44/51.5; card titles Noto Serif 500
   38/43, 30, 24, 22/26; body Noto Sans 400 15/25, 14, 13/20; kickers = base .eyebrow.
   ========================================================================== */

.why {
  background: var(--cream);
  padding: 98px 0 96px;
}

/* Header row: title block left, lede right (bottoms aligned) -------------- */
.why__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: end;
  column-gap: 24px;
  margin-bottom: 47.4px;
}
.why__intro { display: flex; flex-direction: column; align-items: flex-start; }
.why__eyebrow { gap: 12px; }
.why__title {
  margin-top: 18.6px;
  max-width: 15em;
  font: 500 var(--h2)/1.17 var(--serif);   /* shared h2 scale (00-base.css) */
  letter-spacing: 0;
  color: var(--ink-2);
}
.why__lede {
  margin-bottom: .6px;
  font: 400 15px/24px var(--sans);
  color: var(--text);
}

/* Bento grid ------------------------------------------------------------- */
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 532.667fr) minmax(0, 421.333fr) 310px;
  grid-template-rows: minmax(344px, auto) minmax(344px, auto);
  gap: 24px;
}
.why__cell { display: flex; min-width: 0; }
.why__cell--engage { grid-column: 1; grid-row: 1 / span 2; }
.why__cell--understand { grid-column: 2 / span 2; grid-row: 1; }
.why__cell--discover { grid-column: 2; grid-row: 2; }
.why__cell--provenance { grid-column: 3; grid-row: 2; }

.why__card {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.why__body { display: flex; flex-direction: column; align-items: flex-start; }
.why__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .28s var(--ease-out);
}
.why__figure { position: relative; overflow: hidden; }

/* Shared card type ------------------------------------------------------- */
.why__kicker::after { display: none; }
.why__card-title {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-2);
}
.why__card-title--xl { margin-top: 16.5px; font-size: clamp(28px, 1.4vw + 18px, 38px); line-height: 1.134; }
.why__card-title--lg { margin-top: 17.4px; font-size: clamp(24px, .8vw + 18.5px, 30px); line-height: 1.2; }
.why__card-title--md { margin-top: 13.1px; font-size: 24px; line-height: 1.2; }
.why__card-title--sm { margin-top: 9.8px; font-size: 22px; line-height: 26px; }
.why__text { font-family: var(--sans); font-weight: 400; color: var(--text); }
.why__link { position: relative; gap: 11px; transition: color .2s var(--ease-out); }
/* Arrow: Figma sets the shaft 1.2px higher and 0.6px left of a centred 9px icon.
   Relative offsets leave the base hover translateX(4px) working. */
.why__link .icon-arrow { position: relative; top: -1.2px; left: -0.6px; }
/* Hover on paper: ink (12.5:1 on #F4EAD1). --gold-dark was only 4.21:1 for 12px text. */
.why__link:hover { color: var(--ink-2); }
.why__link--light { color: var(--on-dark); }
/* Card D link: the design's #B8902E is 2.80:1 on olive, so it uses #E4C470 (4.93:1),
   the same gold as the card's kicker. Hover goes to cream (7.5:1). */
.why__link--gold { color: var(--gold-light); }
.why__link--light:hover { color: var(--gold-light); }
.why__link--gold:hover { color: var(--on-dark); }
/* Focus rings: the base #B8902E is 2.48:1 on paper and too faint on olive (WCAG 1.4.11 wants 3:1) */
.why__card--understand :focus-visible, .why__card--discover :focus-visible { outline-color: var(--olive); }
.why__card--engage :focus-visible, .why__card--provenance :focus-visible { outline-color: var(--gold-light); }
/* Tablet and desktop: grow the 12px-tall link hit area to 44px without moving layout.
   (768 and below the link itself gets min-height: 44px.) */
@media (min-width: 769px) {
  .why__link::before { content: ""; position: absolute; inset: -16px -8px; }
}

/* A: dark photo card ----------------------------------------------------- */
.why__card--engage { background: var(--ink); justify-content: flex-end; }
.why__media--engage { position: absolute; inset: 0; }
.why__body--engage {
  position: relative;
  z-index: 1;
  padding: 187.3px 40px 40.6px;
  background: linear-gradient(to bottom, rgba(32, 31, 29, 0) 0%, rgba(32, 31, 29, .78) 55%, rgba(32, 31, 29, .94) 100%);
}
.why__card--engage .why__kicker { color: var(--gold-light); }
.why__card--engage .why__card-title { color: var(--on-dark); }
.why__text--engage { margin-top: 14.2px; max-width: 420px; font-size: 15px; line-height: 25px; color: var(--sand); }
.why__card--engage .why__link { margin-top: 23.6px; }

/* B: understand (text left, photo right) -------------------------------- */
.why__card--understand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 47.76%;
  background: var(--paper);
  border: 1px solid var(--line);
}
.why__body--understand { padding: 42px 24px 40.5px; }
.why__text--understand { margin-top: 11.5px; max-width: 310px; font-size: 15px; line-height: 25px; }
.why__figure--understand .why__media { position: absolute; inset: 0; }
.why__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 7.2px;
  max-width: 320px;
  margin-top: 23.1px;
  margin-bottom: 30.3px;
}
.why__chip {
  display: inline-flex;
  align-items: center;
  height: 29.6px;
  /* Figma's labels sit lower and 0.6px left of a centred label in the same box. 1.7px top
     padding is the value where Chrome's whole-pixel baseline snap lands both rows within 0.5px. */
  padding: 1.7px 12.8px 0 11.6px;
  border: 1px solid var(--chip);
  font: 400 12px/1 var(--sans);
  color: var(--text);
  white-space: nowrap;
}
.why__card--understand .why__link { margin-top: auto; }

/* C: discover (photo top) ----------------------------------------------- */
.why__card--discover { background: var(--paper); border: 1px solid var(--line); }
.why__figure--discover { flex: none; height: 176px; }
.why__body--discover { flex: 1 1 auto; padding: 26px 28px 24.3px; }
.why__text--discover { margin-top: 9.7px; margin-bottom: 16px; font-size: 14px; line-height: 21px; }
.why__card--discover .why__link { margin-top: auto; }

/* D: provenance (olive, mini artwork record) ---------------------------- */
.why__card--provenance { background: var(--olive); padding: 26px 24px 24.7px; }
.why__record-head { display: flex; align-items: flex-start; gap: 16px; }
.why__thumb {
  flex: none;
  margin-left: 2px;
  width: 90px;
  height: 62px;
  object-fit: cover;
  outline: 4px solid var(--gold-2);
  outline-offset: -2px;
}
.why__record-meta { min-width: 0; padding-top: 6px; }
.why__record-label {
  font: 700 10px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.why__record-title {
  margin-top: 6.6px;
  max-width: 132px;
  font: 400 14px/18px var(--serif);
  color: var(--on-dark);
}
.why__timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 20.9px;
}
.why__timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  height: 1px;
  background: rgba(233, 221, 190, .4);
  transform: scaleX(var(--why-line, 1)); /* motion hook: 0 to 1 draws the line */
  transform-origin: left center;
}
.why__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9.7px;
}
.why__step[data-step="2"] { align-items: center; }
.why__step[data-step="3"] { align-items: flex-end; }
.why__step-dot {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-light);
}
.why__step[data-step="2"] .why__step-dot { background: var(--on-dark); }
.why__step[data-step="3"] .why__step-dot { background: var(--olive); border: 1px solid var(--on-dark); }
.why__step-label { font: 400 11px/1 var(--sans); color: var(--sand); }
/* Text block is anchored to the card bottom (like C's link): when the row is taller than
   D's content (1280, and 769 to 1024 where C sets the height), the spare space opens
   above the kicker instead of between the text and the link. At 1440 spare is ~0. */
.why__body--provenance { flex: none; margin-top: auto; padding-top: 19.4px; }
.why__card--provenance .why__kicker { color: var(--gold-light); }
.why__card--provenance .why__card-title { color: var(--on-dark); }
.why__text--provenance { margin-top: 8.45px; margin-bottom: 25.1px; font-size: 13px; line-height: 20px; color: var(--sand); }

/* Hover: slow photo push, driven by the card's only interactive element (the link),
   so the zoom never promises a click target the photo does not have. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .why__card:has(.why__link:hover) .why__media { transform: scale(1.03); }
}
@media (prefers-reduced-motion: no-preference) {
  .why__card:has(.why__link:focus-visible) .why__media { transform: scale(1.03); }
}

/* Responsive ------------------------------------------------------------- */
/* Below the design width, avoid one-word last lines (1440 keeps the design breaks). */
@media (max-width: 1400px) {
  .why__text, .why__lede { text-wrap: pretty; }
}

@media (max-width: 1200px) {
  .why__figure--discover { height: 160px; }
}

@media (max-width: 1024px) {
  .why__head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin-bottom: 40px; }
  .why__lede { max-width: 420px; }
  .why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .why__cell--engage { grid-column: 1 / -1; grid-row: auto; }
  .why__cell--understand { grid-column: 1 / -1; grid-row: auto; }
  .why__cell--discover { grid-column: 1; grid-row: auto; }
  .why__cell--provenance { grid-column: 2; grid-row: auto; }
  .why__card--engage { min-height: 480px; }
  .why__media--engage { object-position: center 35%; }
  .why__body--engage { padding-top: 140px; }
  .why__figure--discover { height: 180px; }
  /* Tablets: lift the small record labels to the mobile sizes (12px floor, 11px caps) */
  .why__record-label { font-size: 11px; }
  .why__step-label { font-size: 12px; }
}

@media (max-width: 768px) {
  .why { padding: var(--section-y) 0; }
  .why__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .why__cell--engage,
  .why__cell--understand,
  .why__cell--discover,
  .why__cell--provenance { grid-column: 1; }
  .why__card--engage { min-height: 500px; }
  .why__card--understand { grid-template-columns: minmax(0, 1fr); }
  .why__figure--understand { order: -1; aspect-ratio: 2 / 1; }
  .why__body--understand { padding: 32px 24px; }
  .why__figure--discover { height: auto; aspect-ratio: 3 / 1; }
  .why__body--discover { padding: 24px 24px 20px; }
  .why__text--understand { max-width: 30em; }
  .why__title, .why__card-title { text-wrap: balance; }
  .why__link { min-height: 44px; }
  .why__text--discover, .why__text--provenance { margin-bottom: 4px; }
  .why__card--engage .why__link { margin-top: 10px; }
  .why__body--engage { padding-bottom: 26px; }
  .why__chips { margin-bottom: 18px; }
  .why__card--provenance { padding-bottom: 14px; }
}

@media (max-width: 480px) {
  .why__figure--understand { aspect-ratio: 16 / 10; }
  .why__figure--discover { aspect-ratio: 5 / 2; }
  /* The kicker sits higher in the gradient here, over the light garment: darken sooner */
  .why__body--engage {
    padding: 120px 24px 20px;
    background: linear-gradient(to bottom, rgba(32, 31, 29, 0) 0%, rgba(32, 31, 29, .7) 22%, rgba(32, 31, 29, .86) 50%, rgba(32, 31, 29, .94) 100%);
  }
  .why__card--engage { min-height: 460px; }
  .why__body--understand { padding: 28px 20px; }
  .why__body--discover { padding: 22px 20px 16px; }
  .why__card--provenance { padding: 24px 20px 14px; }
}

/* Print ------------------------------------------------------------------ */
@media print {
  .why__card { break-inside: avoid; }
  .why__card--engage, .why__card--provenance { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   03-explore: artwork cards (design y 2326 to 3130, elements 4341 to 4367)
   ========================================================================== */

.explore {
  background: var(--cream);
  padding-block: 98px 96px;
}

/* Heading row: intro at left, "more artworks" badge bottom-aligned at right */
.explore__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
}
.explore__intro { min-width: 0; }
.explore__eyebrow { display: flex; width: max-content; gap: 12px; }   /* block-level: avoids the 24px strut line of an inline-flex */

.explore__title {
  margin-top: 19px;
  max-width: 14em;                       /* keeps the design break after "Meet the" */
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--h2);                  /* shared h2 scale (00-base.css) */
  line-height: 1.16;                     /* 51px pitch at 44px */
  letter-spacing: 0;
  color: var(--ink-2);
}

/* Dashed "coming soon" badge: not a control. Dashes are drawn with gradients so the
   pattern matches the design's stroke-dasharray "3 2" (a CSS dashed border cannot). */
.explore__soon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 222px;
  height: 45px;
  --dash: var(--stone-2);
  background:
    repeating-linear-gradient(90deg, var(--dash) 0 3px, transparent 3px 5px) left top / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--dash) 0 3px, transparent 3px 5px) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--dash) 0 3px, transparent 3px 5px) left top / 1px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--dash) 0 3px, transparent 3px 5px) right top / 1px 100% no-repeat;
  padding-top: 2px;                      /* optical: the design sits the caps 1px below centre */
  font: 600 12px/1 var(--sans);
  letter-spacing: .125em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}
.explore__soon > span[aria-hidden] { margin-right: -.125em; }   /* cancel the trailing tracking so the label centres */
.explore__soon > .sr-only { text-transform: none; }   /* Chromium exposes CSS-uppercased text to screen readers; keep the spoken label in sentence case */

/* Card grid: 4 x 310px with 24px gaps fills the 1312px container exactly */
.explore__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.explore__item { display: flex; min-width: 0; }

.explore__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 7px 7px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.explore__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 294 / 340;
  background: #e8dcbc;                   /* placeholder tone while the image loads */
}
.explore__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;              /* the design crops every artwork centred */
  transition: transform .28s var(--ease-out);
}

.explore__body { padding: 16.5px 4px 23.5px; }
.explore__name {
  font: 700 12px/16px var(--sans);
  letter-spacing: .125em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.explore__by {
  margin-top: 5px;
  font: 400 14.5px/20px "Noto Serif Display", var(--serif);   /* design face; falls back to the fitted Noto Serif */
  letter-spacing: 0;
  color: var(--text);
}

@media (hover: hover) {
  .explore__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(58, 42, 16, .12);
  }
  .explore__card:hover .explore__img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .explore__card, .explore__img { transition: none; }
  .explore__card:hover, .explore__card:hover .explore__img { transform: none; }
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .explore { padding-block: var(--section-y); }
  .explore__head { flex-direction: column; align-items: flex-start; }
  .explore__title { margin-top: 16px; }
  .explore__grid { gap: 16px; margin-top: 40px; }
}
/* 1 column only at 480 and below: the content box is then at most 440px, so the
   single column fills it and stays flush with the left-aligned heading. From 481 to 768
   the 2 columns hold (cards 208 to 352px wide; every title still fits on one line). */
@media (max-width: 480px) {
  .explore__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* Print ---------------------------------------------------------------------- */
@media print {
  .explore__card { break-inside: avoid; }
  .explore__soon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* its dashes are gradients */
}

/* ==========================================================================
   04-stories: "Read art more closely." photo frame + theme list
   Design y 3130.2 to 4219.3 (1089.1 tall), elements 4368 to 4430.
   ========================================================================== */

.stories {
  --stories-rule: rgba(233, 221, 190, .22);
  --stories-ring: rgba(233, 221, 190, .45);
  /* Design accent #B8912E is 2.83:1 on olive (fails WCAG 3:1 for large text). This is the
     same gold lightened just enough to pass (3.14:1); the shift is not visible side by side. */
  --stories-accent: #C09A36;
  background: var(--olive);
  color: var(--sand);
  /* 114.3 top: the section starts at y3130 in the assembled page (design 3130.2), so the
     extra .3 puts the content on the design's pixel rows; height 1089.3 ends at 4219.3 */
  padding: 114.3px 0 112px;
}

/* Base gold focus ring is 2.8:1 on olive; the light gold passes 3:1 (4.9:1) */
.stories :focus-visible { outline-color: var(--gold-light); }

/* Head: eyebrow + h2 left, lede right ------------------------------------ */
.stories__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 48px;
}
.stories__intro { flex: none; }  /* the lede gives way first, so the h2 stays on one line */
.stories__eyebrow { display: flex; width: max-content; gap: 12.4px; }  /* rule at x256 */
.stories__title {
  margin-top: 24px;
  font: 500 var(--h2)/1.15 var(--serif);   /* shared h2 scale (00-base.css) */
  letter-spacing: 0;
  color: var(--on-dark);
}
.stories__title .accent { color: var(--stories-accent); }
.stories__lede {
  flex: 0 1 320px;
  min-width: 220px;
  margin-top: 43px;
  font: 400 15px/24px var(--sans);
  color: var(--sand);
  text-wrap: pretty;
}

/* Grid: frame (500) | gap 72 | list (740) at 1440 ------------------------- */
.stories__grid {
  display: grid;
  grid-template-columns: minmax(0, 500fr) minmax(0, 740fr);
  column-gap: 72px;
  align-items: start;
  margin-top: 56px;
}

/* Photo frame + overlapping caption card ---------------------------------- */
.stories__figure {
  position: relative;
  padding-bottom: 84px;          /* the design's clip is 716 tall: frame 632 + 84 */
}
.stories__frame {
  background: var(--paper-2);
  border: 1px solid rgba(32, 30, 29, .18);
  padding: 15.8px;               /* photo inset 16.8 from the outer edge */
}
.stories__photo {
  position: relative;            /* hook: a later stage layers an animated cut-out here */
  overflow: hidden;
  aspect-ratio: 466.4 / 598.4;
}
.stories__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.stories__caption {
  position: absolute;
  right: 0;
  bottom: 16.57px;
  display: flex;
  flex-direction: column;
  width: 289px;
  max-width: calc(100% - 24px);
  padding: 23.6px 24px 22.1px;
  background: var(--paper-2);
}
.stories__caption-kicker {
  font: 700 11px/11px var(--sans);
  letter-spacing: .185em;
  text-transform: uppercase;
  color: var(--olive);
}
.stories__caption-title {
  margin-top: 10.8px;
  font: 400 22px/28px var(--serif);
  color: var(--ink-2);
}
.stories__caption-by {
  margin-top: 8.5px;
  font: 400 13px/18px var(--sans);
  color: var(--text);
}

/* Theme list -------------------------------------------------------------- */
.stories__list { border-bottom: 1px solid var(--stories-rule); }
.stories__item { border-top: 1px solid var(--stories-rule); }
.stories__link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 44px;
  align-items: center;
  padding: 22.3px 0 23.15px;     /* row pitch 106.1 incl. the 1px rule (106.09 after layout rounding) */
  color: var(--on-dark);
}
.stories__num {
  margin-top: 1.5px;
  font: 400 13px/13px var(--sans);
  color: var(--gold-light);      /* design #D9B25A is 4.15:1; the design's gold-on-dark passes (4.93:1) */
}
.stories__body { padding-right: 24px; }
.stories__name {
  font: 400 clamp(21px, calc(17.6px + .72vw), 28px)/1.2 var(--serif);
  letter-spacing: 0;
  color: var(--on-dark);
  text-wrap: balance;
  transition: color .25s var(--ease-out);
}
.stories__desc {
  margin-top: 6.1px;
  font: 400 14px/20px var(--sans);
  color: var(--sand-2);
  text-wrap: pretty;
}
.stories__circle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: .8px;              /* ring and arrow land on the design pixel rows */
  border: 1px solid var(--stories-ring);
  border-radius: 50%;
  color: var(--on-dark);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.stories__circle .icon-arrow-ne { stroke-width: 1.33; transition: transform .25s var(--ease-out); }

/* Active row (03 by default; JS moves it on hover/focus). Without JS, hovering a row
   previews the same style. */
.stories__link.is-active .stories__name,
.stories__list:not(.stories__list--js) .stories__link:hover .stories__name { color: var(--gold-light); }
.stories__link.is-active .stories__circle,
.stories__list:not(.stories__list--js) .stories__link:hover .stories__circle {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--ink);
}
/* Without JS, the hard-coded 03 steps back while another row is hovered (one highlight).
   Kept as its own rule: a browser without :has() drops only this rule. */
.stories__list:not(.stories__list--js):has(.stories__link:hover) .stories__link.is-active:not(:hover) .stories__name { color: var(--on-dark); }
.stories__list:not(.stories__list--js):has(.stories__link:hover) .stories__link.is-active:not(:hover) .stories__circle {
  background: transparent;
  border-color: var(--stories-ring);
  color: var(--on-dark);
}
.stories__link:hover .icon-arrow-ne,
.stories__link:focus-visible .icon-arrow-ne { transform: translate(1.5px, -1.5px); }

.stories__cta {
  margin-top: 26.4px;
  min-height: 52px;
  padding: 2.4px 29.1px 0 27.1px; /* + base 1px border = 212 x 52; text 0.7px below centre as designed */
  gap: 11.3px;
  letter-spacing: .126em;
}
.stories__cta .icon-arrow { position: relative; top: -.8px; }  /* arrow paints on the design's pixel row */

@media (prefers-reduced-motion: reduce) {
  .stories__name, .stories__circle, .stories__circle .icon-arrow-ne { transition: none; }
  .stories__link:hover .icon-arrow-ne, .stories__link:focus-visible .icon-arrow-ne { transform: none; }
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1200px) {
  .stories { padding: 96px 0 96px; }
  .stories__grid { column-gap: 56px; }
}

@media (max-width: 1024px) {
  .stories__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    margin-top: 48px;
  }
  .stories__figure {
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .stories { padding: var(--section-y) 0; }
  .stories__head { flex-direction: column; }
  .stories__title { margin-top: 20px; }
  .stories__lede { flex: none; max-width: 420px; margin-top: 0; }
  .stories__grid { margin-top: 40px; row-gap: 40px; }
  .stories__link {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    padding: 20px 0 22px;
  }
  .stories__body { padding-right: 16px; }
  /* multi-line rows: number sits on the title's first baseline, circle stays centred */
  .stories__num, .stories__body { align-self: baseline; }
  .stories__num { margin-top: 0; }
}

@media (max-width: 480px) {
  .stories__figure { padding-bottom: 72px; }
  .stories__frame { padding: 11px; }
  .stories__caption { bottom: 12px; padding: 18px 18px 16px; }
  .stories__caption-kicker { line-height: 15px; letter-spacing: .16em; }
  .stories__caption-title { margin-top: 6px; font-size: 20px; line-height: 26px; }
  .stories__caption-by { margin-top: 6px; }
  .stories__link { grid-template-columns: 34px minmax(0, 1fr) 44px; padding: 18px 0 20px; }
  .stories__body { padding-right: 12px; }
  .stories__cta { width: 100%; }
}

/* Print ------------------------------------------------------------------ */
@media print {
  .stories { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stories__figure, .stories__item { break-inside: avoid; }
}

/* ==========================================================================
   05-news: "Art news" feature carousel + list (design y 4219 to 5168)
   ========================================================================== */

.news {
  position: relative;
  padding: 130px 0 0;
  /* The design cuts the card and frame shadows off at the section's bottom
     edge (y5168, where the provenance background starts). Clip vertically
     only, so nothing is cut at the sides. */
  overflow-x: visible;
  overflow-y: clip;
}

/* Head: eyebrow + h2 left, lede right ----------------------------------- */
.news__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
  column-gap: 40px;
  margin-bottom: 51.6px;
}
.news__eyebrow { display: flex; width: max-content; gap: 12px; } /* design rule sits 14px after the ink (trailing tracking excluded) */
.news__title {
  margin-top: 14px;
  max-width: 11em;                 /* breaks after "in" like the design */
  font: 500 var(--h2)/1.389 var(--serif);   /* shared h2 scale (00-base.css) */
  color: var(--ink-2);
}
/* The design's space before the gold span is ~3px wider than a normal space.
   Widening the space itself (not a margin on the span) means no indent when
   "art world." starts a line. */
.news__gap { word-spacing: .07em; }
.news__lede {
  margin-bottom: 4.2px;
  font: 400 15px/24px var(--sans);
  color: var(--text);
}

/* Body: feature (left) + list (right) ----------------------------------- */
.news__body {
  display: grid;
  grid-template-columns: minmax(0, 554fr) minmax(0, 644fr);
  column-gap: clamp(48px, 7.92vw, 114px);
  align-items: start;
}

/* Feature frame --------------------------------------------------------- */
.news__feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.news__frame {
  width: 100%;
  aspect-ratio: 554 / 514;
  padding: 14px;
  background: var(--gold-2);
  box-shadow: 0 30px 60px rgba(58, 42, 16, .28);
}
.news__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2a2016;
}
.news__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity .28s var(--ease-out);
}
.news__img.is-active { z-index: 2; opacity: 1; }
.news__img.is-prev { z-index: 1; opacity: 1; transition: none; }

/* "Now showing" card, overlapping the frame's bottom-right --------------- */
.news__now {
  position: relative;
  z-index: 3;
  align-self: flex-end;
  width: 292px;
  max-width: 100%;
  margin: -46.8px -26px 0 0;
  padding: 23px 24px 22px;
  background: var(--warm-white);
  box-shadow: 0 16px 34px rgba(58, 42, 16, .22);
}
.news__now-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11.8px;
  border-bottom: 1px solid var(--ink-2);
  line-height: 14px;
}
.news__now-label {
  font: 700 10px/14px var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--olive);
}
.news__count {
  font: 400 13px/14px var(--serif);
  color: var(--gold-dark);
  white-space: nowrap;
}
.news__now-cat {
  margin-top: 10.1px;
  font: 700 11px/16px var(--sans);
  letter-spacing: .136em;
  text-transform: uppercase;
  color: var(--muted);
}
.news__now-title {
  margin-top: 8.1px;
  font: 400 20px/28px var(--serif);
  color: var(--ink-2);
}
.news__bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14.8px;
}
.news__bar {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--line);
  transition: background-color .25s var(--ease-out);
}
.news__bar-fill {
  position: absolute;
  inset: 0;
  background: var(--gold-2);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
/* At rest (no JS, reduced motion, paused, hovered, focused, out of view) the
   active bar is the design's solid #B8902E bar. */
.news__bar.is-active .news__bar-fill { transform: scaleX(1); }

/* Autoplay progress: JS sets .is-playing only while autoplay is allowed and
   the section is in view, not hovered/focused and not html.motion-paused.
   The fill then grows over 6s on a mid-gold track (animationend advances).
   Removing .is-playing drops the animation, so the bar returns to solid and
   the 6s fill restarts from zero when playback resumes. */
.news.is-playing .news__bar.is-active { background: rgba(184, 144, 46, .55); }
.news.is-playing .news__bar.is-active .news__bar-fill { animation: news-fill 6s linear both; }
html.motion-paused .news.is-playing .news__bar.is-active .news__bar-fill { animation: none; }
@keyframes news-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* List ------------------------------------------------------------------- */
.news__list { min-width: 0; }
/* The design's row rules are 0.8px #D9CBA8 strokes; a 1px line at 80% of
   that colour over the cream (#E0D3B2) renders the same weight. */
.news__item { border-top: 1px solid #E0D3B2; }
.news__item:last-child { border-bottom: 1px solid #E0D3B2; }
.news__row {
  display: grid;
  grid-template-columns: 60px 76px minmax(0, 1fr) 48px;
  align-items: center;
  width: 100%;
  min-height: 143.8px;
  text-align: left;
}
/* Olive ring (7.5:1 on cream) instead of the base gold (2.7:1, under the
   3:1 non-text minimum), kept inside the row. */
.news__row:focus-visible { outline-color: var(--olive); outline-offset: -2px; }
/* Without JS (or if main.js never runs) the rows cannot switch the feature: the markup ships them
   disabled and 05-news.js enables them and adds .is-enhanced, so until then they read as content */
.news__row:disabled { cursor: default; }
:root:not(.js) .news:not(.is-enhanced) .news__go { visibility: hidden; }
.news__num {
  font: 400 18px/1 var(--serif);
  color: var(--muted);   /* design #A89A78 is 2.51:1 on cream (WCAG 1.4.3); --muted is 5.43:1, still quieter than the active gold */
  position: relative;
  top: -0.8px;
  transition: color .25s var(--ease-out);
}
.news__thumb {
  width: 76px;
  height: 92px;
  object-fit: cover;
}
.news__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 20px 0 24px;
}
.news__cat {
  font: 700 11px/16px var(--sans);
  letter-spacing: .136em;
  text-transform: uppercase;
  color: var(--olive);
}
.news__headline {
  margin-top: 7.8px;
  font: 400 26px/34px var(--serif);
  color: var(--muted);
  text-wrap: balance;
  transition: color .25s var(--ease-out);
}
.news__go {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--chip);
  border-radius: 50%;
  color: var(--olive);
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.news__go .icon-arrow-ne { width: 10.125px; height: 10.125px; stroke-width: 1.333; transition: transform .25s var(--ease-out); }

.news__row:hover .news__go { border-color: var(--gold-2); }
.news__row:hover .news__go .icon-arrow-ne,
.news__row:focus-visible .news__go .icon-arrow-ne { transform: translate(1px, -1px); }

/* Active row */
.news__row.is-active .news__num { color: var(--gold-dark); }
.news__row.is-active .news__headline { color: var(--ink-2); }
.news__row.is-active .news__go { background: var(--gold-2); border-color: var(--gold-2); color: var(--warm-white); }

/* In the design, row 1's category sits 3.2px higher than rows 2 to 4 (row
   top + 45.2 vs + 48.4). Reproduced in the two-column layout without moving
   anything else, so the active state never shifts layout. */
@media (min-width: 1025px) {
  .news__item:first-child .news__cat { position: relative; top: -3.2px; }
}

@media (prefers-reduced-motion: reduce) {
  .news__img, .news__bar, .news__num, .news__headline, .news__go, .news__go .icon-arrow-ne { transition: none; }
  .news.is-playing .news__bar.is-active .news__bar-fill { animation: none; } /* same specificity, later: wins */
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .news { padding-top: 112px; }
  .news__headline { font-size: clamp(21px, .8vw + 13.5px, 23px); line-height: 30px; } /* one line down to 1025 */
  .news__row { grid-template-columns: 48px 70px minmax(0, 1fr) 48px; }
  .news__thumb { width: 70px; height: 85px; }
}

@media (max-width: 1024px) {
  .news { padding: 96px 0 72px; }
  .news__head { margin-bottom: 44px; }
  .news__body { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .news__frame { aspect-ratio: 16 / 10; }
  .news__now { margin-right: -12px; margin-top: -64px; }
  .news__headline { font-size: 26px; line-height: 34px; }
  .news__row { grid-template-columns: 60px 76px minmax(0, 1fr) 48px; }
  .news__thumb { width: 76px; height: 92px; }
}

@media (max-width: 768px) {
  .news { padding: var(--section-y) 0 56px; }
  .news__head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin-bottom: 36px; }
  .news__lede { max-width: 320px; margin-bottom: 0; text-wrap: pretty; } /* design measure: breaks after "and" */
  .news__frame { padding: 10px; aspect-ratio: 4 / 3; }
  .news__now { margin-right: 0; margin-top: -56px; width: min(300px, calc(100% - 24px)); }
  .news__now-label { font-size: 11px; letter-spacing: .14em; }
  .news__row { grid-template-columns: 44px 64px minmax(0, 1fr) 44px; min-height: 120px; padding: 14px 0; }
  .news__thumb { width: 64px; height: 78px; }
  .news__text { padding: 0 14px 0 16px; }
  .news__headline { margin-top: 6px; font-size: 22px; line-height: 28px; }
  .news__go { width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .news__title { font-size: clamp(26px, 10vw - 5px, var(--h2)); } /* keeps "What's happening in" on one line down to 320 */
  .news__frame { padding: 8px; }
  .news__now { width: calc(100% - 20px); padding: 18px 18px 18px; margin-top: -44px; }
  .news__now-title { font-size: 18px; line-height: 25px; }
  .news__row { grid-template-columns: 30px 56px minmax(0, 1fr) 40px; min-height: 108px; }
  .news__num { font-size: 16px; }
  .news__thumb { width: 56px; height: 68px; }
  .news__text { padding: 0 8px 0 12px; }
  .news__cat { letter-spacing: .11em; line-height: 15px; text-wrap: balance; }   /* 320: "Gallery / opening · [City]", not "[City]" alone; balance only picks among real breaks, so a long city name still wraps */
  .news__headline { margin-top: 5px; font-size: 18px; line-height: 24px; }
  .news__go { width: 40px; height: 40px; }
}

/* Print ------------------------------------------------------------------ */
@media print {
  .news__feature, .news__item { break-inside: avoid; }
  .news__frame, .news__go, .news__bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }   /* gold frame, active circle and bar */
}

/* ==========================================================================
   06-provenance: dark card with intro copy + artwork and its record card
   Design: section y 5168 to 6008 (840 tall), card x64 y5296.2 1312x584.
   ========================================================================== */

.provenance {
  background: var(--cream);
  padding-block: clamp(64px, 8.9vw, 128px);
}

/* Dark card: 72px inner padding, text left, artwork right, both centred vertically.
   Columns keep the design's 504:600 split (1104px at 1440), so both shrink together
   below 1440 instead of the copy absorbing all the lost width. */
.provenance__card {
  display: grid;
  grid-template-columns: minmax(0, 504fr) minmax(0, 600fr);
  column-gap: 64px;
  align-items: center;
  padding: 72px;
  background: var(--ink);
}

/* Text column ------------------------------------------------------------ */
.provenance__text { margin-top: 2px; }   /* design column centre sits 1px below the card centre */

.provenance__eyebrow { display: flex; width: fit-content; letter-spacing: .18em; color: var(--gold-mid); }
.provenance__eyebrow::after { display: none; }

.provenance__title {
  margin-top: 22.5px;
  max-width: 8.75em;                     /* keeps the design's 3-line break at every size */
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--h2-lg);               /* shared h2 scale (00-base.css): 48px at 1440 */
  line-height: 1.1042;                   /* 53px at 48px: design baseline pitch */
  letter-spacing: 0;
  color: var(--on-dark);
}
/* The gold word is set smaller in the design (Noto Serif 500 at ~44px against 48px) */
.provenance__accent {
  position: relative;
  top: -2px;                             /* design baseline sits ~2px above the 53px line grid */
  font-size: .917em;
}

.provenance__lede {
  margin-top: 23px;
  max-width: 488px;
  font-size: 17px;
  line-height: 28px;
  color: var(--sand);
}

.provenance__btn {
  gap: 12px;
  margin-top: 27px;
  min-height: 52px;
  padding: 2px 31px 0 29px;              /* 2px top: design label sits 1px below centre */
  letter-spacing: .123em;
}
/* Design arrow ink sits 1px higher; `top` rather than transform (hover uses translateX) */
.provenance__btn .icon-arrow { position: relative; top: -1px; }

/* Artwork + record card --------------------------------------------------
   Every offset is a percentage of the visual's width, so the record card covers
   the same share of the artwork at every size (design: 43% of its width, 42% of
   its height) and leaves the boat right of centre clear.
   At 1440 the visual is 600 wide: artwork indent 60, record 290, overlap 152.6. */
.provenance__visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.provenance__art {
  align-self: stretch;
  margin-left: 10%;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
}
.provenance__img {
  width: 100%;
  aspect-ratio: 540 / 367;
  object-fit: cover;
}

.provenance__record {
  position: relative;                    /* stays above the artwork even if the motion stage transforms it */
  width: clamp(220px, 48.4%, 290px);
  margin: -25.4333% 0 -2.21px;           /* 152.6px up into the artwork at 1440; bottom sits 2.2px into the card padding */
  padding: 22px 24px 16.9px;
  background: var(--paper);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
}

.provenance__badge {
  width: fit-content;
  height: 20px;
  padding: 0 7.5px 0 8px;
  background: var(--paper-3);
  font: 700 10px/20px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.provenance__record-title {
  margin: 9.5px 0 0 .5px;
  font: 400 18px/23.4px var(--serif);
  letter-spacing: -.04px;
  color: var(--ink-2);
}
/* When the card narrows, the title breaks as in the why section's card D: "Gilded Sakura Lake / in Mist" */
.provenance__nowrap { white-space: nowrap; }

.provenance__events {
  margin-top: 24px;
}
.provenance__event {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  font-size: 13px;
  line-height: 28px;
}
.provenance__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--olive);
}
.provenance__event--origin .provenance__dot { background: var(--gold-2); }
.provenance__event--latest .provenance__dot { background: transparent; border: 1px solid var(--olive); }
.provenance__event-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink-2);
}
.provenance__event-year {
  flex: none;
  color: var(--muted);
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .provenance__card { column-gap: 48px; padding: 56px; }
}

/* Stack: copy above the artwork; the record card keeps overlapping the artwork's bottom-left */
@media (max-width: 1024px) {
  .provenance__card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
    padding: 56px 48px;
    overflow: clip;                       /* keeps the record card's shadow inside the dark card */
  }
  .provenance__lede { max-width: 600px; } /* wider measure: 2 lines, ends near the visual's right edge */
  .provenance__visual { max-width: 640px; }
  .provenance__record { margin-bottom: 0; }
}

@media (max-width: 768px) {
  .provenance__card { row-gap: 48px; padding: 48px 32px; }
  .provenance__record { width: clamp(210px, 48.4%, 290px); padding: 20px 20px 15px; }
  .provenance__badge { font-size: 11px; }  /* mobile floor: 11px for caps labels */
}

/* Phones: the record card spans the width, so it overlaps only the artwork's bottom edge
   (11% of the visual = about 17% of the artwork's height, clear of the boat) */
@media (max-width: 480px) {
  .provenance__card { row-gap: 40px; padding: 40px 20px; }
  .provenance__title { font-size: min(var(--h2-lg), 9.3vw); }   /* keeps the 3-line break down to 320px */
  .provenance__lede { font-size: 16px; line-height: 26px; }
  .provenance__art { margin-left: 24px; }
  .provenance__record {
    align-self: stretch;
    width: auto;
    margin: -11% 24px 0 0;
    padding: 20px 20px 14px;
  }
}

/* Print ------------------------------------------------------------------ */
@media print {
  .provenance__card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .provenance__visual, .provenance__record { break-inside: avoid; }
}

/* ==========================================================================
   07-faq: intro, help box and accordion (design y 6008 to 6908)
   Measurements in comments are design px at 1440.
   ========================================================================== */

.faq {
  --faq-dur: .25s;
  background: var(--cream);
  padding: 122px 0 169.4px;                 /* eyebrow box top 6130.3; accordion ends 6738.8, section ends 6908.2 */
}

.faq__inner {                               /* also .container (base): width, max-width, centring */
  padding-inline: calc(var(--gutter) + 32px); /* content runs x96 to x1344 */
  display: grid;
  /* 420 | 110 | 718 at 1440; below that both columns shrink in proportion, so the
     accordion never gets squeezed while the intro holds its maximum width */
  grid-template-columns: minmax(0, 420fr) minmax(0, 718fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro list" "help list";
  /* 110 at 1440, narrowing faster than the columns down to 61 at 1201: the intro column then stays
     wide enough for the h2 cap (12.42cqi) to keep the FAQ heading above provenance's (h2-lg) */
  column-gap: clamp(48px, calc(21vw - 192px), 110px);
  align-items: start;
}

/* Intro ------------------------------------------------------------------ */
.faq__intro { grid-area: intro; container-type: inline-size; }   /* the h2 cap below reads this column's width */

.faq__eyebrow { display: flex; width: fit-content; gap: 12px; } /* 14px minus the trailing tracking: rule at x190 */

.faq__title {
  margin-top: 23.1px;                        /* line 1 baseline 6213.5 */
  max-width: 8.1em;                          /* keeps the design break: "Frequently" / "asked questions." */
  /* shared h2 scale (00-base.css), capped at the intro column / 8.05 (12.42cqi) so that
     "asked questions." (7.87em as rendered) always fits line 2 and "Frequently asked" never
     does; 52px at 1440 and above */
  font: 500 min(var(--h2-xl), 12.42cqi)/1.096 var(--serif);
  letter-spacing: 0;
  color: var(--ink-2);
}
.faq__title .accent { font-weight: 400; }

.faq__lede {
  margin-top: 27.5px;                        /* line 1 baseline 6325.3 */
  max-width: 390px;
  font: 400 16px/26.5px var(--sans);
  color: var(--text);
}

/* Help box --------------------------------------------------------------- */
.faq__help {
  grid-area: help;
  margin-top: 37.7px;                        /* box outer top 6423.0 */
  width: 100%;
  max-width: 420px;
  padding: 29px 28px 27.3px;                 /* outer box 420 x 208.6 like the design */
  background: var(--paper);
  border: 1px solid var(--line);
}
.faq__help-title {
  font: 400 22px/28px var(--serif);
  color: var(--ink-2);
}
.faq__help-text {
  margin-top: 15.9px;
  font: 400 14px/22px var(--sans);
  color: var(--text);
}
.faq__help-btn {
  margin-top: 18.4px;
  padding: 1px 20px 0 21px;                  /* 132 x 44 box, text ink x147.5 y6577.2 */
  letter-spacing: .123em;
}
.faq__help-btn:focus-visible { outline-color: var(--olive); } /* base gold ring is under 3:1 on paper */

/* Accordion -------------------------------------------------------------- */
.faq__list {
  grid-area: list;
  margin-top: 6px;                           /* first item top 6136.2 */
}

.faq__item {
  --faq-num: 64px;                           /* number slot: question starts x690 (closed) */
  border-top: 1px solid rgba(32, 30, 29, .19);/* design: 0.8px at 25% */
  padding-inline: 0;
  transition: background-color var(--faq-dur) var(--ease-out), border-color var(--faq-dur) var(--ease-out),
              padding var(--faq-dur) var(--ease-out);
}
.faq__item.is-open {
  --faq-num: 52px;                           /* open: number x654, question x706 */
  background: var(--paper);
  border-top: 2px solid rgba(184, 145, 46, .76); /* design: 1.6px #B8912E */
  padding-inline: 28px;
}

.faq__heading { font: inherit; }

.faq__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 21.9px 0;
  text-align: left;
  color: var(--ink-3);
  font: 400 22px/28px var(--sans);
  transition: padding var(--faq-dur) var(--ease-out);
}
.faq__item.is-open .faq__trigger { padding: 25.6px 0 15.41px; }
.faq__trigger:focus-visible { outline-color: var(--olive); outline-offset: 2px; } /* gold ring is under 3:1 on cream */

.faq__num {
  flex: 0 0 var(--faq-num);
  position: relative;
  top: 1.2px;                                /* digits sit 0.9px below the icon centre */
  font: 400 12px/16px var(--sans);
  color: var(--olive);
  transition: flex-basis var(--faq-dur) var(--ease-out);
}

.faq__q {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 480px;                          /* design wraps question 05 after "the" */
  margin-right: 24px;
  padding-block: .5px 1.5px;                 /* two-line rows: 102px tall like the design */
  transition: color .2s var(--ease-out);
}
.faq__item.is-open .faq__q { font-weight: 700; color: var(--olive); }

.faq__icon {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--olive);
  border-radius: 50%;
  color: var(--olive);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.faq__icon svg {
  position: absolute;
  inset: -1px;
  width: 40px;
  height: 40px;
  max-width: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke-width var(--faq-dur) var(--ease-out);
}
.faq__icon path {
  transform-origin: 20px 20px;
  transition: transform var(--faq-dur) var(--ease-out);
}
@media (hover: hover) {                     /* no sticky hover colour after a tap on touch screens */
  .faq__trigger:hover .faq__q { color: var(--olive); }
  .faq__trigger:hover .faq__icon { background: rgba(65, 84, 38, .08); }
}

/* Open icon: filled olive, cream minus (the vertical bar turns flat) */
.faq__item.is-open .faq__icon { background: var(--olive); color: var(--on-dark); }
.faq__item.is-open .faq__icon svg { stroke-width: 1.2; }
.faq__item.is-open .faq__icon-h { transform: scaleX(.934); }
.faq__item.is-open .faq__icon-v { transform: rotate(90deg) scaleY(.934); }

/* Without JS every answer shows and the triggers do nothing, so no icon suggests a toggle
   (aria-expanded is also added by the script, not the markup) */
:root:not(.js) .faq:not(.is-enhanced) .faq__icon { visibility: hidden; }
:root:not(.js) .faq:not(.is-enhanced) .faq__trigger { cursor: default; }

/* Panel: visible without JS; JS adds .is-enhanced to collapse closed items */
.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--faq-dur) var(--ease-out);
}
.faq__panel-inner { min-height: 0; overflow: hidden; }
/* html.js (set in <head> by the page, optional) collapses before this script runs: no layout jump.
   visibility: hidden sits on the panel itself (the element with role="region"), so closed panels
   leave the accessibility tree and are not announced as empty landmarks. It flips after the
   collapse transition; opening removes it at once. Screen only: print shows every answer. */
@media screen {
  .faq.is-enhanced .faq__item:not(.is-open) .faq__panel,
  :root.js .faq__item:not(.is-open) .faq__panel {
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--faq-dur) var(--ease-out), visibility 0s linear var(--faq-dur);
  }
}

.faq__answer {
  max-width: calc(var(--faq-num) + 560px);
  padding: 0 0 24px var(--faq-num);
  font: 400 15px/25px var(--sans);
  color: var(--text);
  transition: padding var(--faq-dur) var(--ease-out);
}
.faq__item.is-open .faq__answer { padding-bottom: 27.58px; }

@media (prefers-reduced-motion: reduce) {
  .faq { --faq-dur: .01ms; }
  .faq__q, .faq__icon { transition: none; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .faq__inner { padding-inline: var(--gutter); column-gap: clamp(48px, 7.4vw, 110px); }   /* 75.9 at 1025: same reason */
  .faq__lede, .faq__help-text, .faq__q, .faq__answer { text-wrap: pretty; }
}

@media (max-width: 1024px) {
  .faq { padding: 96px 0 104px; }
  .faq__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "intro" "list" "help";
  }
  .faq__lede { max-width: 34em; }
  .faq__q { max-width: 640px; }
  .faq__answer { max-width: calc(var(--faq-num) + 640px); }
  .faq__list { margin-top: 48px; }
  .faq__help { margin-top: 48px; max-width: 560px; }
}

@media (max-width: 768px) {
  .faq { padding: var(--section-y) 0; }
  .faq__list { margin-top: 40px; }
  .faq__help { margin-top: 40px; max-width: none; }
  .faq__item { --faq-num: 48px; }
  .faq__item.is-open { --faq-num: 44px; padding-inline: 20px; }
  .faq__trigger { padding: 20px 0; font-size: 19px; line-height: 26px; }
  .faq__item.is-open .faq__trigger { padding: 22px 0 12px; }
  .faq__q { margin-right: 16px; }
  .faq__answer { padding-bottom: 22px; line-height: 24px; }
  .faq__item.is-open .faq__answer { padding-bottom: 24px; }
}

@media (max-width: 480px) {
  .faq__title { font-size: clamp(32px, 10.5vw, var(--h2-xl)); } /* keeps two lines at 320 */
  .faq__item { --faq-num: 36px; }
  .faq__item.is-open { --faq-num: 32px; padding-inline: 16px; }
  .faq__trigger { font-size: 17px; line-height: 24px; }
  .faq__q { text-wrap: balance; }   /* pretty still left "member?" alone at 320: balance gives "Who can become / a member?" */
  .faq__help { padding: 24px 20px; }
  .faq__help-title { font-size: 20px; }
}

/* Print: every answer is open (the collapse above is screen only); no toggle icons */
@media print {
  .faq__icon { display: none; }
  .faq__item { break-inside: avoid; }
  .faq__help { break-inside: avoid; }
}

/* ==========================================================================
   08-membership (#join): benefits strip, membership copy, join form
   Design y 6908 to 7993 (1085 tall at 1440). Fitted type: notes/08-membership.md
   ========================================================================== */

.membership {
  /* Part-local colours (proposed as base tokens in notes/08-membership.md) */
  --membership-error: #9b2c1f;        /* 6.83:1 on the cream card */
  /* Field and chip edges: the design's #A89A78 is 2.51:1 on the card (WCAG 1.4.11 needs 3:1, and the
     field fill is only 1.07:1 against the card, so the border is its only edge). #8A7C5C is 3.70:1. */
  --membership-field-border: #8a7c5c;
  --membership-field-hover: var(--muted);  /* input border on hover (5.43:1) */
  --membership-placeholder: #737373;  /* design #757575 is 4.46:1 on #FFFBF0; this is 4.59:1 */

  background: var(--olive);
  color: var(--on-dark);
  padding: 80px 0 86.5px;
}

/* Benefits strip ---------------------------------------------------------- */
.membership .membership__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 24px;
  margin: 0;
  padding: 36px 79px 36px;
  border: 1px solid rgba(233, 221, 190, .3);
}
.membership__benefit-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 700 16px/22px var(--sans);
  color: var(--on-dark);
}
.membership__benefit-title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--on-dark);
}
.membership__benefit-text {
  max-width: 346px;
  margin-top: 11px;
  font: 400 14px/22px var(--sans);
  color: var(--sand-2);
}

/* Two-column layout: intro + list on the left, form card on the right ------ */
.membership__layout {
  display: grid;
  /* Card 540 at 1440, easing to 480 at 1280, so the columns change without steps */
  grid-template-columns: minmax(0, 1fr) clamp(480px, 37.5vw, 540px);
  grid-template-areas:
    "intro card"
    "list  card";
  grid-template-rows: auto 1fr;
  column-gap: 60px;
  align-items: start;
  margin-top: 144px;
  /* 56px at 1440, easing to 0 at 1200, where the 1200 query takes over */
  padding-inline: clamp(0px, calc((100vw - 1200px) / 4.2857), 56px);
}
.membership__intro { grid-area: intro; padding-top: 2px; container-type: inline-size; }
.membership .membership__eyebrow { display: flex; width: max-content; gap: 12px; }
.membership__title {
  /* 11em sits between line 1 (10.13em) and line 1 + "the" (about 11.8em), so the
     design's break "Become a member of / the Artcestry / community." holds at any size. */
  max-width: 11em;
  margin-top: 23.8px;
  font: 400 var(--h2-xxl)/1.078 var(--serif);   /* shared h2 scale (00-base.css) */
  letter-spacing: 0;
  color: var(--on-dark);
}
/* 58px at 1440 on the shared scale. The column term (9.667cqi = 58px in the design's 600px
   column) keeps "Become a member of" on line 1 wherever the column is the tighter limit
   (1025 to about 1100, a classic scrollbar, and phones), so the size never steps at a breakpoint. */
@supports (font-size: 1cqi) {
  .membership__title { font-size: max(28px, min(var(--h2-xxl), 9.667cqi)); }
}
.membership__lede {
  max-width: 500px;
  margin-top: 21.3px;
  font: 400 17px/27px var(--sans);
  color: var(--sand);
}

/* Numbered list (duplicates the strip, as in the design) ------------------ */
.membership__list {
  grid-area: list;
  max-width: 500px;
  margin-top: 39.5px;
}
.membership__item {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 19.8px 0 19.8px;
}
.membership__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(448px, 100%);
  height: 1px;
  background: rgba(233, 221, 190, .22);
}
.membership__num {
  grid-row: 1 / span 2;
  font: 400 16px/25px var(--serif);
  color: var(--gold-light);
}
.membership__item-title {
  padding-top: 1.8px;
  font: 400 20px/28px var(--serif);
  color: var(--on-dark);
}
.membership__item-text {
  grid-column: 2;
  margin-top: 3.4px;
  font: 400 14px/22px var(--sans);
  color: var(--sand-2);
}

/* Form card --------------------------------------------------------------- */
.membership__card {
  grid-area: card;
  padding: 39.5px 40px 38.1px;
  background: var(--cream);
  color: var(--ink-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
/* The base gold ring is 2.68:1 on cream; olive is 7.52:1 (WCAG 1.4.11 needs 3:1). */
.membership__card :focus-visible { outline-color: var(--olive); }
.membership__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2.5px;
}
.membership__card-title {
  font: 400 30px/36px var(--serif);
  color: var(--ink-2);
}
.membership__card-tag {
  margin-right: -1.5px;
  font: 700 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
  white-space: nowrap;
}
.membership__form { margin-top: 22.6px; }
.membership__label {
  display: block;
  font: 600 13px/18px var(--sans);
  color: var(--ink-2);
}
.membership__input {
  display: block;
  width: 100%;
  height: 51.6px;
  margin-top: 7.9px;
  padding: 0 16px;
  border: 1px solid var(--membership-field-border);
  border-radius: 0;
  background: var(--warm-white);
  font: 400 16px/normal var(--sans);
  color: var(--ink-2);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.membership__input::placeholder { color: var(--membership-placeholder); opacity: 1; }
.membership__input:hover { border-color: var(--membership-field-hover); }
.membership__input:focus { border-color: var(--olive); }
.membership__input:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.membership__input[aria-invalid="true"] {
  border-color: var(--membership-error);
  box-shadow: inset 0 0 0 1px var(--membership-error);
}
/* Always rendered (never display: none) so the role="alert" region is in the
   accessibility tree before its first message. Empty, it takes no space. */
.membership__error {
  padding-top: 8px;
  font: 500 13px/18px var(--sans);
  color: var(--membership-error);
}
.membership__error:empty { padding-top: 0; }
/* No-JS failure: the subscribe function redirects a failed post to /?join=error#join-failed, and this
   static copy shows only as the fragment target. With JS the script writes the message instead. */
.membership__nojs-error { display: none; }
html:not(.js) .membership__nojs-error:target { display: block; }

.membership__fieldset {
  position: relative;
  min-width: 0;
  margin: 20.1px 0 0;
  padding: 0;
  border: 0;
}
.membership__legend {
  padding: 0;
  font: 600 13px/18px var(--sans);
  color: var(--ink-2);
}
.membership__legend-note { font-weight: 400; color: var(--muted); }
.membership__chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9.9px;
}
.membership__chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  /* 16.15px at the design's 460px row, easing to 12px by 1260 as the card narrows from 540 to 480.
     The seven chips wrap onto more rows as needed; a label never breaks inside its chip. */
  flex: none;
  padding: 0 clamp(12px, calc(4.6875vw - 48px), 16.15px);
  white-space: nowrap;
  border: 1px solid var(--membership-field-border);
  font: 400 13px/normal var(--sans);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.membership__chip:hover { border-color: var(--olive); background: rgba(65, 84, 38, .06); }
.membership__radio:checked + .membership__chip {
  border-color: var(--olive);
  background: var(--olive);
  color: var(--on-dark);
}
.membership__radio:focus-visible + .membership__chip { outline: 2px solid var(--olive); outline-offset: 2px; }

/* "Clear choice": shown by 08-membership.js once a chip is chosen; sits on the
   legend's line, so revealing it moves nothing. An abspos child of a fieldset is
   placed in the fieldset's content box, which starts under the rendered legend,
   so -18px (the legend's line height) lifts it onto the legend's line. */
.membership__clear {
  position: absolute;
  top: -18px;
  right: 0;
  font: 400 12px/18px var(--sans);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.membership__clear::after { content: ""; position: absolute; inset: -20px -8px -6px; } /* 44px tall hit area */
.membership__clear:hover { color: var(--ink-2); }

.membership__submit {
  width: 100%;
  height: 54px;
  margin-top: 20px;
  padding: 3.5px 16px 0;
  font-size: 13px;
  letter-spacing: .115em;
}
.membership__fine {
  margin-top: 20.3px;
  font: 400 12px/18px var(--sans);
  color: var(--muted);
  text-wrap: pretty;
}
.membership__fine-link {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.membership__fine-link:hover { color: var(--olive); }

/* Honeypot wrapper: off-screen rather than display: none, because some bots skip hidden inputs.
   aria-hidden plus tabindex -1 keep it out of reach for screen reader and keyboard users. */
.membership__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sending state: the button stays in place and readable; aria-busy on the form carries the state. */
.membership__submit[aria-disabled="true"] { cursor: progress; opacity: .75; }

/* Success state (filled by 08-membership.js) ------------------------------ */
.membership__success:not(:empty) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin-top: 22.6px;
}
.membership__success:focus { outline: none; }
.membership__success:focus-visible { outline: 2px solid var(--olive); outline-offset: 6px; }
.membership__success-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--on-dark);
}
.membership__success-icon svg { width: 18px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.membership__success-text {
  max-width: 380px;
  font: 400 22px/1.35 var(--serif);
  color: var(--ink-2);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1200px) {
  .membership__layout {
    column-gap: 48px;
    margin-top: 112px;
    padding-inline: 0;
  }
  .membership .membership__benefits { padding-inline: 48px; }
}

/* 1024 and below: the heading spans the width, then the list and the card sit
   side by side (the card keeps the right-hand place it has on desktop). */
@media (max-width: 1024px) {
  .membership { padding: 72px 0 80px; }
  .membership .membership__benefits { padding: 32px 32px 34px; column-gap: 32px; }
  .membership__benefit-text { max-width: none; text-wrap: balance; }
  .membership__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-areas:
      "intro intro"
      "list  card";
    grid-template-rows: auto auto;
    column-gap: 40px;
    row-gap: 48px;
    margin-top: 88px;
  }
  .membership__intro { padding-top: 0; }
  .membership__lede { max-width: 560px; }
  .membership__card { padding: 32px 32px 30px; }
  .membership__chip { height: 44px; padding-inline: 14px; }
  .membership__list { max-width: none; margin-top: 0; }
  .membership__item::before { width: 100%; }
}

@media (max-width: 768px) {
  .membership { padding: 64px 0 72px; }
  .membership .membership__benefits { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; }
  .membership__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "card"
      "list";
    row-gap: 40px;
    margin-top: 64px;
  }
  .membership__lede { font-size: 16px; line-height: 26px; }
  .membership__card { padding: 32px 24px 28px; box-shadow: 0 20px 40px rgba(0, 0, 0, .22); }
  .membership__list { margin-top: 8px; }
}

@media (max-width: 480px) {
  .membership .membership__benefits { padding: 24px 20px; }
  .membership__card { padding: 28px 20px 24px; }
  .membership__card-head { flex-wrap: wrap; row-gap: 6px; }
  .membership__card-title { font-size: 28px; line-height: 34px; }
  .membership__item { grid-template-columns: 40px minmax(0, 1fr); }
}

/* Touch screens wider than 1024 (large tablets in landscape) get 44px chips too */
@media (pointer: coarse) {
  .membership__chip { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .membership__input, .membership__chip { transition: none; }
}

/* Print ------------------------------------------------------------------- */
@media print {
  .membership { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .membership__benefits, .membership__card, .membership__item { break-inside: avoid; }
}

/* ==========================================================================
   09-footer: design y 7993 to 8143 (150 tall at 1440), inner margin 108px
   ========================================================================== */

.site-footer {
  background: var(--olive);
  border-top: 1px solid rgba(242, 238, 227, .12);
  color: rgba(251, 243, 220, .7);
}
/* The base gold ring is 2.80:1 on olive; --gold-light is 4.93:1 (WCAG 1.4.11 needs 3:1). */
.site-footer :focus-visible { outline-color: var(--gold-light); }
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--page-max);
  min-height: 149px;
  margin-inline: auto;
  padding: 0 114px 1px 108px;
}
.site-footer__logo {
  font: 700 24px/1 var(--sans);
  letter-spacing: .055em;
  text-transform: uppercase;   /* source text in sentence case, like the header logo */
  color: var(--gold);
  transition: color .2s var(--ease-out);
}
.site-footer__logo:hover { color: var(--gold-light); }
.site-footer__nav { margin-right: 4px; }
.site-footer__links {
  display: flex;
  align-items: center;
  gap: 35px;
}
.site-footer__links > li { display: flex; }
/* The Cookie settings button ships hidden (it needs JavaScript); consent.js reveals it. Collapse its item meanwhile so it leaves no gap. */
.site-footer__links > li:has(> [hidden]) { display: none; }
.site-footer__link {
  display: inline-block;
  font: 400 14px/normal var(--sans);
  color: rgba(251, 243, 220, .7);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
}
.site-footer__link:hover { color: var(--on-dark); text-decoration-color: rgba(251, 243, 220, .5); }
/* The copyright never wraps or shrinks: between 769 and about 820px the wrapping link row would
   otherwise squeeze it onto two lines. */
.site-footer__copy { flex: none; white-space: nowrap; font: 400 13px/normal var(--sans); }
/* Company disclosure (GVOC LTD runs the site). A quiet strip under the design row, so the row itself
   keeps the design's 149px. --sand-2 on olive is 5.2:1. */
.site-footer__legal {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 114px 32px 108px;
  font: 400 12px/18px var(--sans);
  color: var(--sand-2);
  text-wrap: pretty;
}

@media (max-width: 1200px) {
  .site-footer__inner { padding-inline: var(--gutter); }
  .site-footer__legal { padding-inline: var(--gutter); }
}

/* Five links plus logo and copyright stop fitting one row below about 1024: the links wrap,
   right-aligned, until the 768 stacked layout takes over. */
@media (max-width: 1024px) {
  .site-footer__nav { flex: 1 1 auto; min-width: 0; }
  .site-footer__links { flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; }
}

@media (max-width: 768px) {
  .site-footer__inner {
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    min-height: 0;
    padding-block: 48px 40px;
    text-align: center;
  }
  .site-footer__links { flex-wrap: wrap; justify-content: center; gap: 4px 28px; }
  .site-footer__link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .site-footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__legal { padding-bottom: 40px; text-align: center; }
  .site-footer__inner { padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__logo, .site-footer__link { transition: none; }
}

/* Print ------------------------------------------------------------------- */
@media print {
  .site-footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
}