/* ==========================================================================
   POSH CRISPS — design system v1.0
   Static CSS, hand-written, no build step, no framework, no external request.

   Namespace rule: every custom property is --pc-, every class is pc-.
   The only unprefixed classes are the state classes is-revealed / is-open /
   is-active, and they only ever appear as compound selectors.

   Section map
     00  Fonts (self-hosted, latin subset)
     01  Custom property manifest
     02  Reset
     03  Utilities
     04  Type classes
     05  Layout: containers, sections, rhythm
     06  Ornament: rules and the mark
     07  Demo banner
     08  Nav
     09  Hero
     10  Manifesto
     11  Index + card
     12  Map
     13  Closing + inert form
     14  Buttons
     15  Flavour page: standfirst, chapters, figures
     16  Flavour page: timeline, panel, tasting, facts, sources
     17  Pager
     18  Footer
     19  Motion: reveals and hero entrance
     20  Reduced motion, print, forced colors
   ========================================================================== */


/* ── 00. Fonts ─────────────────────────────────────────────────────────────
   Playfair Display and Source Sans 3, both SIL Open Font License, served from
   this origin as latin-subset variable woff2. No CDN, no third-party request.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/poshcrisps/fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/poshcrisps/fonts/playfair-display-latin-italic.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: "Source Sans 3";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/poshcrisps/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/poshcrisps/fonts/source-sans-3-latin-italic.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;
}


/* ── 01. Custom property manifest ───────────────────────────────────────── */

:root {
  /* Core palette */
  --pc-ink:             #1A1714;
  --pc-ink-2:           #3A342D;
  --pc-ink-muted:       #6E6459;
  --pc-green-deep:      #12301F;
  --pc-green:           #1E4630;
  --pc-green-mid:       #2F6244;
  --pc-oxblood:         #5A171C;
  --pc-oxblood-2:       #7C2A2F;
  --pc-gold-deep:       #7A5A18;
  --pc-gold:            #A9812F;
  --pc-gold-lite:       #C9A24B;
  --pc-gold-pale:       #E3C77E;
  --pc-bone:            #F6F1E6;
  --pc-parchment:       #EDE4D2;
  --pc-parchment-deep:  #E0D4BC;
  --pc-white:           #FCFAF5;
  --pc-rule:            #CBBFA8;
  --pc-rule-dark:       #4A5C4F;
  --pc-muted-dark:      #A9A093;

  /* Contextual — reset by the section modifiers */
  --pc-fg:              var(--pc-ink-2);
  --pc-fg-strong:       var(--pc-ink);
  --pc-fg-muted:        var(--pc-ink-muted);
  --pc-hairline:        var(--pc-rule);
  --pc-ground:          var(--pc-bone);

  /* Accent — reset by [data-flavour] */
  --pc-accent:          var(--pc-gold);
  --pc-accent-ink:      var(--pc-gold-deep);
  --pc-accent-pale:     var(--pc-gold-lite);
  --pc-accent-fg:       var(--pc-accent-ink);

  /* Type */
  --pc-font-display: "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif;
  --pc-font-text:    "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --pc-fs-3xs: 0.6875rem;  --pc-fs-2xs: 0.75rem;    --pc-fs-xs: 0.8125rem;
  --pc-fs-sm:  0.9375rem;  --pc-fs-base: 1.0625rem; --pc-fs-md: 1.1875rem;
  --pc-fs-lg:  1.375rem;   --pc-fs-xl: 1.75rem;     --pc-fs-2xl: 2.25rem;
  --pc-fs-3xl: 3rem;       --pc-fs-4xl: 4rem;       --pc-fs-5xl: 5.5rem;
  --pc-fs-6xl: 7.5rem;

  --pc-fs-hero-home:    clamp(2.75rem, 11vw, 7.5rem);
  --pc-fs-hero-flavour: clamp(2.5rem, 8vw, 5.5rem);
  --pc-fs-h2:           clamp(2rem, 4.5vw, 3rem);
  --pc-fs-h3:           clamp(1.5rem, 2.6vw, 2.25rem);
  --pc-fs-display-lede: clamp(1.5rem, 3vw, 2.5rem);
  --pc-fs-pull:         clamp(1.5rem, 3.2vw, 2.25rem);

  --pc-lh-tight: 1.02;  --pc-lh-display: 1.12;  --pc-lh-snug: 1.32;
  --pc-lh-body:  1.68;  --pc-lh-caption: 1.5;

  --pc-tr-hero: -0.02em;   --pc-tr-display: -0.012em;  --pc-tr-body: 0;
  --pc-tr-caps: 0.16em;    --pc-tr-caps-lg: 0.22em;

  --pc-fw-light: 300; --pc-fw-reg: 400; --pc-fw-med: 500;
  --pc-fw-semi:  600; --pc-fw-bold: 700;

  --pc-measure:        62ch;
  --pc-measure-max:    68ch;
  --pc-measure-narrow: 46ch;

  /* Space & layout */
  --pc-space-1:.25rem; --pc-space-2:.5rem;  --pc-space-3:.75rem;
  --pc-space-4:1rem;   --pc-space-5:1.5rem; --pc-space-6:2rem;
  --pc-space-7:3rem;   --pc-space-8:4rem;   --pc-space-9:6rem;
  --pc-space-10:8rem;  --pc-space-11:11rem;

  --pc-section-y:    clamp(4rem, 10vw, 8rem);
  --pc-section-y-lg: clamp(6rem, 14vw, 11rem);
  --pc-gutter:       clamp(1.25rem, 5vw, 3.5rem);
  --pc-col-gap:      clamp(1.5rem, 3vw, 2.5rem);

  --pc-container:        76rem;
  --pc-container-wide:   90rem;
  --pc-container-narrow: 40rem;
  --pc-container-text:   34rem;

  --pc-banner-h: 2.5rem;
  --pc-nav-h:    4.5rem;
  --pc-chrome-h: calc(var(--pc-banner-h) + var(--pc-nav-h));

  /* Motion */
  --pc-ease-out:   cubic-bezier(.22,.61,.36,1);
  --pc-ease-inout: cubic-bezier(.65,.05,.36,1);
  --pc-ease-soft:  cubic-bezier(.33,1,.68,1);
  --pc-dur-1:160ms; --pc-dur-2:240ms; --pc-dur-3:420ms;
  --pc-dur-4:700ms; --pc-dur-5:1100ms;
  --pc-reveal-y: 18px;
  --pc-reveal-delay: 0ms;
  --pc-stagger: 90ms;

  /* Depth — used exactly twice, deliberately */
  --pc-shadow-nav:  0 1px 0 rgba(26,23,20,.10), 0 8px 24px -18px rgba(26,23,20,.45);
  --pc-shadow-card: 0 12px 40px -20px rgba(18,48,31,.55);
  --pc-z-nav: 50;
  --pc-z-banner: 60;
  --pc-z-mapcard: 40;
}

@media (max-width: 599px) { :root { --pc-banner-h: 3.25rem; } }
@media (max-width: 899px) { :root { --pc-nav-h:    3.75rem; } }

/* Per-flavour accents. Set on <body data-flavour> for a flavour page, and on
   each card, marker, legend row and pager half on the homepage.
 *
 * Built as one family, not eight opinions. Every flavour is the same three
 * steps at a fixed perceptual lightness — OKLCH L .60 / .47 / .76 — so the
 * identity is carried by hue and chroma alone and no flavour leaps forward or
 * recedes against its neighbours. Measured, on the two grounds these are used
 * on (bone #F6F1E6 and the green plate #12301F):
 *
 *   --pc-accent       3.38–3.69 : 1 on bone AND 3.44–3.76 : 1 on green
 *   --pc-accent-ink   5.85–6.43 : 1 on bone   (body/link text)
 *   --pc-accent-pale  6.37–6.91 : 1 on green  (text and marks on the plate)
 *
 * Because accent clears 3:1 on both grounds it is safe as a non-text mark
 * anywhere in the system. Hues are spread 24–70° apart and the two pairs that
 * sit closest in hue (cheddar/yorkshire, yorkshire/norfolk) are pulled apart by
 * chroma instead — malt is deliberately the desaturated one, as is salt. The
 * closest pair in the whole set is 44 in RGB distance and ΔE_ok .071, well
 * clear of the ~30 at which two 10px dots stop being separable.
 *
 * All eight define a genuinely distinct pale step; none aliases to its accent.
 */
[data-flavour="maldon"]    { --pc-accent:#588993; --pc-accent-ink:#33636C; --pc-accent-pale:#8BBAC4; } /* sea salt — estuary grey-blue  */
[data-flavour="yorkshire"] { --pc-accent:#8B7F5F; --pc-accent-ink:#655A3C; --pc-accent-pale:#BCB091; } /* malt vinegar — muted khaki    */
[data-flavour="cheddar"]   { --pc-accent:#AF7025; --pc-accent-ink:#824C00; --pc-accent-pale:#E2A260; } /* cheddar — amber               */
[data-flavour="norfolk"]   { --pc-accent:#80872B; --pc-accent-ink:#5B6100; --pc-accent-pale:#B0B965; } /* mustard — field yellow-olive  */
[data-flavour="wiltshire"] { --pc-accent:#A7698E; --pc-accent-ink:#7E4567; --pc-accent-pale:#D99BBF; } /* the cure — cured rose         */
[data-flavour="stilton"]   { --pc-accent:#6E7BBB; --pc-accent-ink:#4A5690; --pc-accent-pale:#9EADED; } /* blue cheese — vein blue       */
[data-flavour="worcester"] { --pc-accent:#BA645C; --pc-accent-ink:#8E3E39; --pc-accent-pale:#ED968E; } /* the sauce — brick red         */
[data-flavour="kent"]      { --pc-accent:#588F61; --pc-accent-ink:#33683D; --pc-accent-pale:#8BC192; } /* Bramley — orchard green       */


/* ── 02. Reset — the only element-level selectors in the file ───────────── */

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

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

ol, ul { list-style: none; }

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

html, body { overflow-x: clip; }

body {
  background: var(--pc-bone);
  color: var(--pc-ink-2);
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-base);
  font-weight: var(--pc-fw-reg);
  line-height: var(--pc-lh-body);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

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

blockquote, cite { font-style: normal; }

:focus-visible {
  outline: 2px solid var(--pc-accent-ink);
  outline-offset: 3px;
}


/* ── 03. Utilities ─────────────────────────────────────────────────────── */

.pc-visually-hidden {
  position: absolute;
  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;
}

.pc-skip {
  position: absolute;
  left: var(--pc-space-4);
  top: -4rem;
  z-index: 70;
  background: var(--pc-bone);
  color: var(--pc-ink);
  padding: var(--pc-space-3) var(--pc-space-4);
  font-size: var(--pc-fs-sm);
  font-weight: var(--pc-fw-semi);
  border: 1px solid var(--pc-ink);
  transition: top var(--pc-dur-1) var(--pc-ease-out);
}
.pc-skip:focus { top: var(--pc-space-4); }


/* ── 04. Type classes ──────────────────────────────────────────────────── */

.pc-eyebrow {
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-fg-muted);
}
.pc-eyebrow--accent { color: var(--pc-accent-fg); }
.pc-eyebrow--onDark { color: var(--pc-muted-dark); }

.pc-lede {
  font-size: var(--pc-fs-lg);
  font-weight: var(--pc-fw-light);
  line-height: 1.5;
  color: var(--pc-fg);
  max-width: 56ch;
}

.pc-display-lede {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-reg);
  font-style: italic;
  font-size: var(--pc-fs-display-lede);
  line-height: 1.24;
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-fg-strong);
  text-wrap: balance;
}

.pc-body {
  font-size: var(--pc-fs-base);
  line-height: var(--pc-lh-body);
  color: var(--pc-fg);
  max-width: var(--pc-measure);
}
.pc-body > p + p {
  text-indent: 0;
  margin-top: 1.25em;
}

.pc-smallcaps {
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  line-height: 1.4;
}

.pc-numeral {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-reg);
  letter-spacing: .04em;
  font-variant-numeric: normal;
}

.pc-credit {
  font-size: var(--pc-fs-3xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pc-fg-muted);
  line-height: 1.4;
}

.pc-dropcap::first-letter {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-reg);
  float: left;
  font-size: 4.6em;
  line-height: .82;
  margin: .04em .12em 0 0;
  color: var(--pc-oxblood);
}


/* ── 05. Layout ────────────────────────────────────────────────────────── */

.pc-container {
  max-width: var(--pc-container);
  margin-inline: auto;
  padding-inline: var(--pc-gutter);
}
.pc-container--wide   { max-width: var(--pc-container-wide); }
.pc-container--narrow { max-width: var(--pc-container-narrow); }
.pc-container--text   { max-width: var(--pc-container-text); }

.pc-bleed {
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
  max-width: none;
}

.pc-section { padding-block: var(--pc-section-y); }
.pc-section--tall { padding-block: var(--pc-section-y-lg); }

.pc-section--bone      { background: var(--pc-bone);       color: var(--pc-ink); }
.pc-section--parchment { background: var(--pc-parchment);  color: var(--pc-ink); }
.pc-section--dark      { background: var(--pc-green-deep); color: var(--pc-parchment); }
.pc-section--oxblood   { background: var(--pc-oxblood);    color: var(--pc-parchment); }

.pc-section--dark,
.pc-section--oxblood {
  --pc-fg:        var(--pc-parchment);
  --pc-fg-strong: var(--pc-white);
  --pc-fg-muted:  var(--pc-muted-dark);
  --pc-hairline:  var(--pc-rule-dark);
  --pc-accent-fg: var(--pc-accent-pale);
}
.pc-section--bone,
.pc-section--parchment {
  --pc-fg:        var(--pc-ink-2);
  --pc-fg-strong: var(--pc-ink);
  --pc-fg-muted:  var(--pc-ink-muted);
  --pc-hairline:  var(--pc-rule);
  --pc-accent-fg: var(--pc-accent-ink);
}

/* Paper grain. Two crossed gradients at well under 4% contrast variance —
   imperceptible on a phone, just felt on a large screen. It replaces the
   texture-linen.png the spec names, so the page makes no extra request. */
.pc-section--parchment,
.pc-panel {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(26,23,20,.006) 0 1px, rgba(255,255,255,0) 1px 4px),
    repeating-linear-gradient(0deg,
      rgba(26,23,20,.005) 0 1px, rgba(255,255,255,0) 1px 5px);
  background-blend-mode: multiply;
}


/* ── 06. Ornament ──────────────────────────────────────────────────────── */

.pc-rule {
  height: 1px;
  background: var(--pc-hairline);
  border: 0;
  margin: 0;
}
.pc-rule--gold   { background: var(--pc-gold); }
.pc-rule--accent { background: var(--pc-accent); }
.pc-rule--short  { width: 4rem; }
.pc-rule--double {
  height: 4px;
  background: none;
  border-top: 1px solid var(--pc-hairline);
  border-bottom: 1px solid var(--pc-hairline);
}

.pc-mark {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--pc-gold);
  transform: rotate(45deg);
  flex: 0 0 auto;
}


/* ── 07. Demo banner ───────────────────────────────────────────────────── */

.pc-demo-banner {
  position: sticky;
  top: 0;
  z-index: var(--pc-z-banner);
  min-height: 2.5rem;
  padding: .5rem var(--pc-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-oxblood);
  color: var(--pc-parchment);
}
.pc-demo-banner__text {
  font-size: var(--pc-fs-xs);
  line-height: 1.45;
  letter-spacing: .01em;
  text-align: center;
  max-width: 78rem;
}
.pc-demo-banner__tag {
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-3xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-gold-pale);
  margin-inline-end: .6rem;
  padding-inline-end: .6rem;
  border-inline-end: 1px solid var(--pc-gold);
  white-space: nowrap;
}
.pc-demo-banner__link {
  color: var(--pc-gold-pale);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: color var(--pc-dur-1) var(--pc-ease-out);
}
.pc-demo-banner__link:hover,
.pc-demo-banner__link:focus-visible { color: var(--pc-white); }
.pc-demo-banner__link:focus-visible { outline-color: var(--pc-gold-pale); }

.pc-demo-banner__short { display: none; }
@media (max-width: 599px) {
  .pc-demo-banner { min-height: 3.25rem; }
  .pc-demo-banner__full  { display: none; }
  .pc-demo-banner__short { display: inline; }
}


/* ── 08. Nav ───────────────────────────────────────────────────────────── */

.pc-nav {
  position: sticky;
  top: var(--pc-banner-h);
  z-index: var(--pc-z-nav);
  color: var(--pc-white);
  transition: background var(--pc-dur-2) var(--pc-ease-out),
              color var(--pc-dur-2) var(--pc-ease-out),
              box-shadow var(--pc-dur-2) var(--pc-ease-out);
}
.pc-nav__inner {
  min-height: var(--pc-nav-h);
  display: flex;
  align-items: center;
  gap: var(--pc-space-5);
  position: relative;
}
.pc-nav.is-scrolled {
  background: color-mix(in srgb, var(--pc-bone) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pc-rule);
  box-shadow: var(--pc-shadow-nav);
  color: var(--pc-ink);
}

.pc-nav__mark {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-md);
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  padding-block: var(--pc-space-3);
  margin-inline-end: auto;
  white-space: nowrap;
}
@supports (font-variant-caps: all-small-caps) {
  .pc-nav__mark { font-variant-caps: all-small-caps; text-transform: none; }
}

.pc-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}
.pc-nav__link {
  display: inline-block;
  font-size: 13px;
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  padding-block: .95rem;
  background-image: linear-gradient(var(--pc-gold), var(--pc-gold));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .7rem);
  background-size: 0 1px;
  transition: background-size 220ms var(--pc-ease-out),
              color var(--pc-dur-1) var(--pc-ease-out);
}
.pc-nav__link:hover,
.pc-nav__link:focus-visible { background-size: 100% 1px; }
.pc-nav__link[aria-current="page"] { background-size: 100% 1px; }

.pc-nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-inline-start: auto;
}
.pc-nav__toggle-bar,
.pc-nav__toggle-bar::after {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--pc-gold);
  transition: transform var(--pc-dur-2) var(--pc-ease-out);
}
.pc-nav__toggle-bar { transform: translateY(-3px); }
.pc-nav__toggle-bar::after { content: ""; transform: translateY(6px); }
.pc-nav.is-open .pc-nav__toggle-bar { transform: rotate(45deg); }
.pc-nav.is-open .pc-nav__toggle-bar::after { transform: rotate(-90deg); }

/* A 1px target pinned to the foot of the hero. app.js observes it with a
   rootMargin equal to the chrome height, so the nav flips to its scrolled
   state exactly when the hero passes under it. No scroll handler anywhere. */
.pc-nav__sentinel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

@media (max-width: 819px) {
  .pc-nav__toggle { display: flex; }
  .pc-nav__drawer {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pc-green-deep);
    border-top: 1px solid var(--pc-rule-dark);
    display: none;
  }
  .pc-nav.is-open .pc-nav__drawer { display: block; }
  .pc-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--pc-space-4) var(--pc-gutter) var(--pc-space-6);
  }
  .pc-nav__link {
    font-family: var(--pc-font-display);
    font-size: var(--pc-fs-xl);
    font-weight: var(--pc-fw-med);
    text-transform: none;
    letter-spacing: var(--pc-tr-display);
    color: var(--pc-parchment);
    padding-block: var(--pc-space-3);
    background-position: 0 calc(100% - .5rem);
  }
}


/* ── 09. Hero ──────────────────────────────────────────────────────────── */

.pc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--pc-green-deep);
  color: var(--pc-white);
  margin-top: calc(var(--pc-nav-h) * -1);
}
.pc-hero--home {
  min-height: 36rem;
  min-height: max(36rem, calc(100vh - var(--pc-banner-h)));
  min-height: max(36rem, calc(100svh - var(--pc-banner-h)));
}
.pc-hero--flavour {
  min-height: 32rem;
  min-height: min(88vh, 52rem);
  min-height: min(88svh, 52rem);
}

.pc-hero__media { position: absolute; inset: 0; z-index: 0; }
.pc-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.pc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(18,48,31,.62) 0%,
    rgba(18,48,31,.30) 34%,
    rgba(18,48,31,.78) 78%,
    rgba(18,48,31,.92) 100%);
}
.pc-hero--flavour .pc-hero__scrim {
  background-image:
    linear-gradient(180deg,
      rgba(18,48,31,.30) 0%,
      rgba(18,48,31,.55) 55%,
      rgba(18,48,31,.90) 100%),
    linear-gradient(180deg, transparent 40%,
      color-mix(in srgb, var(--pc-accent) 22%, transparent) 100%);
}

.pc-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: inherit;
  padding-block: calc(var(--pc-space-9) + var(--pc-nav-h)) var(--pc-space-8);
}

.pc-hero__eyebrow {
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps-lg);
  color: var(--pc-gold-pale);
  margin-bottom: var(--pc-space-5);
  line-height: 1.4;
}
.pc-hero--flavour .pc-hero__eyebrow { color: var(--pc-accent-pale); }

.pc-hero__title {
  font-family: var(--pc-font-display);
  color: var(--pc-white);
  line-height: var(--pc-lh-tight);
  text-wrap: balance;
  margin: 0;
}
.pc-hero--home .pc-hero__title {
  font-weight: var(--pc-fw-bold);
  font-size: var(--pc-fs-hero-home);
  text-transform: uppercase;
  letter-spacing: .035em;
}
.pc-hero--flavour .pc-hero__title {
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-hero-flavour);
  letter-spacing: var(--pc-tr-hero);
  line-height: 1.06;
}

.pc-hero__rule {
  width: 4rem;
  margin-block: var(--pc-space-5);
  transform-origin: left;
}

.pc-hero__standfirst {
  font-weight: var(--pc-fw-light);
  font-size: var(--pc-fs-lg);
  line-height: 1.5;
  color: var(--pc-parchment);
  max-width: var(--pc-measure-narrow);
}

.pc-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pc-space-4);
  margin-top: var(--pc-space-6);
  color: var(--pc-parchment);
}
.pc-hero__meta-item {
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  padding-inline-end: var(--pc-space-4);
  border-inline-end: 1px solid var(--pc-rule-dark);
  line-height: 1.4;
}
.pc-hero__meta-item:last-child { border-inline-end: 0; padding-inline-end: 0; }
/* Once the row wraps, the rules dangle at the end of a line. Below the small
   breakpoint the gap does the separating on its own. */
@media (max-width: 599px) {
  .pc-hero__meta { gap: var(--pc-space-2) var(--pc-space-5); }
  .pc-hero__meta-item { border-inline-end: 0; padding-inline-end: 0; }
}

.pc-hero__cta { margin-top: var(--pc-space-7); }

.pc-hero__index {
  position: absolute;
  top: calc(var(--pc-nav-h) + var(--pc-space-4));
  right: var(--pc-gutter);
  z-index: 1;
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-reg);
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--pc-accent) 55%, transparent);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 719px) { .pc-hero__index { display: none; } }

.pc-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--pc-space-5);
  transform: translateX(-50%);
  width: 2.75rem;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  text-decoration: none;
}
.pc-hero__scroll::before {
  content: "";
  width: 1px;
  height: 3.5rem;
  background: var(--pc-gold);
}
.pc-hero__scroll-dot {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc-gold-pale);
  animation: pc-scroll-dot 2.4s var(--pc-ease-inout) infinite;
}
@keyframes pc-scroll-dot {
  0%   { transform: translateY(0);      opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(3.5rem); opacity: 0; }
}
@media (max-width: 719px) { .pc-hero__scroll { display: none; } }


/* ── 10. Manifesto ─────────────────────────────────────────────────────── */

.pc-manifesto__inner { text-align: left; }
.pc-manifesto__numeral {
  display: block;
  font-size: var(--pc-fs-xl);
  color: var(--pc-gold-deep);
  margin-bottom: var(--pc-space-5);
}
.pc-manifesto__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-h2);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-ink);
  margin-block: var(--pc-space-4) var(--pc-space-6);
  text-wrap: balance;
}
.pc-manifesto__lede {
  max-width: 28ch;
  margin-bottom: var(--pc-space-7);
}
.pc-manifesto__body { max-width: none; }
.pc-manifesto__body > p + p { margin-top: 1.25em; }
.pc-manifesto__rule { margin-block: var(--pc-space-8) var(--pc-space-5); }
.pc-manifesto__colophon {
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-ink-muted);
}


/* ── 11. Index and card ────────────────────────────────────────────────── */

.pc-index__head { margin-bottom: var(--pc-space-8); }
.pc-index__numeral {
  display: block;
  font-size: var(--pc-fs-xl);
  color: var(--pc-gold-deep);
  margin-bottom: var(--pc-space-4);
}
.pc-index__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-h2);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-ink);
  margin-bottom: var(--pc-space-5);
  text-wrap: balance;
}
.pc-index__lede { max-width: 60ch; }

.pc-index__grid {
  display: grid;
  gap: var(--pc-space-8) var(--pc-col-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .pc-index__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) {
  .pc-index__grid { grid-template-columns: repeat(4, 1fr); }
  .pc-index__grid > :nth-child(4n+1),
  .pc-index__grid > :nth-child(4n) { margin-block-start: var(--pc-space-7); }
}

.pc-card__link {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--pc-space-4);
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.pc-card__link:focus-visible {
  outline: 2px solid var(--pc-accent-ink);
  outline-offset: 6px;
}

.pc-card__index {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: var(--pc-fs-sm);
  color: var(--pc-accent-ink);
  line-height: 1;
}
.pc-card__index::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--pc-accent);
}

.pc-card__figure {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pc-parchment-deep);
}
.pc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92);
  transition: transform var(--pc-dur-4) var(--pc-ease-out),
              filter var(--pc-dur-4) var(--pc-ease-out);
}
.pc-card__accent {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--pc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pc-dur-3) var(--pc-ease-out);
}

.pc-card__body { display: block; }
.pc-card__county {
  display: block;
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-accent-ink);
  margin-bottom: var(--pc-space-2);
}
.pc-card__name {
  display: block;
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-xl);
  line-height: var(--pc-lh-snug);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-ink);
  text-wrap: balance;
  transition: color var(--pc-dur-2) var(--pc-ease-out);
}
.pc-card__note {
  display: block;
  font-size: var(--pc-fs-sm);
  line-height: 1.5;
  color: var(--pc-ink-muted);
  max-width: 34ch;
  margin-top: var(--pc-space-3);
}
.pc-card__cue {
  display: block;
  margin-top: var(--pc-space-4);
  font-size: var(--pc-fs-3xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-ink-muted);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--pc-dur-3) var(--pc-ease-out),
              transform var(--pc-dur-3) var(--pc-ease-out);
}

.pc-card__link:hover .pc-card__img,
.pc-card__link:focus-visible .pc-card__img { transform: scale(1.035); filter: saturate(1); }
.pc-card__link:hover .pc-card__accent,
.pc-card__link:focus-visible .pc-card__accent { transform: scaleX(1); }
.pc-card__link:hover .pc-card__name,
.pc-card__link:focus-visible .pc-card__name { color: var(--pc-accent-ink); }
.pc-card__link:hover .pc-card__cue,
.pc-card__link:focus-visible .pc-card__cue { opacity: 1; transform: none; }


/* ── 12. Map ───────────────────────────────────────────────────────────── */

.pc-map__head { margin-bottom: var(--pc-space-8); }
.pc-map__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-h2);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-white);
  margin-block: var(--pc-space-4) var(--pc-space-5);
  text-wrap: balance;
}
.pc-map__head .pc-numeral {
  display: block;
  font-size: var(--pc-fs-xl);
  color: var(--pc-gold-lite);
}
.pc-map__lede { max-width: 60ch; }

.pc-map__figure {
  display: grid;
  gap: var(--pc-space-8);
  align-items: start;
}
@media (min-width: 1200px) {
  .pc-map__figure { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--pc-space-9); }
}

.pc-map__plate {
  position: relative;
  aspect-ratio: 600 / 780;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.pc-map__svg { width: 100%; height: 100%; }
.pc-map__outline {
  fill: rgba(246,241,230,.045);
  stroke: var(--pc-rule-dark);
  stroke-width: 1.25;
  stroke-linejoin: round;
  filter: url(#pc-map-grain);
}
/* The engraved-plate wobble is static, but it is a real paint cost. Drop it on
   small screens and under reduced motion; the outline is identical without it. */
@media (max-width: 600px) { .pc-map__outline { filter: none; } }
@media (prefers-reduced-motion: reduce) { .pc-map__outline { filter: none; } }

.pc-map__marker {
  position: absolute;
  left: var(--pc-mx);
  top: var(--pc-my);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: .5rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  z-index: 3;
}
/* The dot and the legend swatch are the map's whole job: eight counties told
   apart by colour, on the deep green plate. They take the pale step, not the
   base accent — pale is the ramp built for this ground (6.37–6.91:1, against
   the 3:1 WCAG asks of a non-text mark) and is already what the legend county
   text beside them uses. */
.pc-map__dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pc-accent-pale);
  box-shadow: 0 0 0 1px rgba(18,48,31,.9),
              0 0 0 6px color-mix(in srgb, var(--pc-accent-pale) 22%, transparent);
  transition: box-shadow 220ms var(--pc-ease-out);
}
.pc-map__marker:hover .pc-map__dot,
.pc-map__marker:focus-visible .pc-map__dot,
.pc-map__marker[aria-expanded="true"] .pc-map__dot {
  box-shadow: 0 0 0 1px rgba(18,48,31,.9),
              0 0 0 10px color-mix(in srgb, var(--pc-accent-pale) 22%, transparent);
}
.pc-map__label {
  font-size: var(--pc-fs-3xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-muted-dark);
  line-height: 1;
  white-space: nowrap;
}
.pc-map__marker:focus-visible {
  outline: 2px solid var(--pc-gold-pale);
  outline-offset: 4px;
}
.pc-map__num { display: none; }
@media (max-width: 719px) {
  .pc-map__label { display: none; }
  .pc-map__num {
    display: block;
    font-family: var(--pc-font-display);
    font-size: var(--pc-fs-3xs);
    color: var(--pc-muted-dark);
    line-height: 1;
  }
}

.pc-map__card {
  display: none;
  position: absolute;
  left: var(--pc-mx);
  top: var(--pc-my);
  transform: translate(1.25rem, -50%);
  z-index: var(--pc-z-mapcard);
  width: 18rem;
  max-width: min(18rem, 70vw);
  background: var(--pc-bone);
  color: var(--pc-ink);
  border: 1px solid var(--pc-rule);
  border-top: 4px solid var(--pc-accent);
  box-shadow: var(--pc-shadow-card);
  padding: var(--pc-space-4);
  text-align: left;
}
.pc-map__card[data-flip="left"] { transform: translate(calc(-100% - 1.25rem), -50%); }
/* Below the two-column breakpoint an 18rem card cannot sit beside a marker
   without leaving the plate, so it docks to the foot of the plate instead. */
@media (max-width: 719px) {
  .pc-map__card,
  .pc-map__card[data-flip="left"] {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    transform: none;
  }
}
.pc-map__card-county {
  display: block;
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-accent-ink);
}
.pc-map__card-name {
  display: block;
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-md);
  line-height: var(--pc-lh-snug);
  color: var(--pc-ink);
  margin-top: var(--pc-space-2);
}
.pc-map__card-line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--pc-ink-muted);
  margin-top: var(--pc-space-3);
}
.pc-map__card-cta {
  display: inline-block;
  margin-top: var(--pc-space-3);
  font-size: var(--pc-fs-3xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-accent-ink);
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}

/* Hover and focus reveal. Touch uses aria-expanded, toggled in app.js. */
.pc-map__marker:hover + .pc-map__card,
.pc-map__marker:focus-visible + .pc-map__card,
.pc-map__marker[aria-expanded="true"] + .pc-map__card { display: block; }

.pc-map__legend {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--pc-rule-dark);
}
.pc-map__legend-item { border-bottom: 1px solid var(--pc-rule-dark); }
.pc-map__legend-link {
  display: grid;
  grid-template-columns: 1.75rem .75rem 1fr;
  align-items: start;
  gap: var(--pc-space-3);
  padding-block: var(--pc-space-4);
  min-height: 44px;
  text-decoration: none;
  color: var(--pc-parchment);
  transition: color var(--pc-dur-1) var(--pc-ease-out);
}
.pc-map__legend-num {
  font-family: var(--pc-font-display);
  font-size: var(--pc-fs-sm);
  color: var(--pc-muted-dark);
  line-height: 1.5;
}
.pc-map__legend-swatch {
  width: 10px;
  height: 10px;
  margin-top: .45rem;
  background: var(--pc-accent-pale);   /* matches its dot; see .pc-map__dot */
}
.pc-map__legend-link:hover,
.pc-map__legend-link:focus-visible { color: var(--pc-accent-pale); }
.pc-map__legend-link:focus-visible { outline-color: var(--pc-gold-pale); }
.pc-map__legend-county {
  display: block;
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-accent-pale);
  line-height: 1.6;
}
.pc-map__legend-name {
  display: block;
  font-family: var(--pc-font-display);
  font-size: var(--pc-fs-md);
  line-height: var(--pc-lh-snug);
  margin-top: .15rem;
}


/* ── 13. Closing and the inert demonstration form ──────────────────────── */

.pc-closing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pc-space-5);
}
.pc-closing__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-bold);
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-parchment);
  text-wrap: balance;
}
.pc-closing__body {
  color: var(--pc-parchment);
  max-width: 56ch;
}
.pc-closing__cta { margin-top: var(--pc-space-4); }

.pc-inert {
  width: 100%;
  max-width: 30rem;
  margin-top: var(--pc-space-6);
  padding: var(--pc-space-5);
  border: 1px dashed var(--pc-gold);
  text-align: left;
}
.pc-inert__label {
  display: block;
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-gold-pale);
  margin-bottom: var(--pc-space-3);
}
.pc-inert__row { display: grid; gap: var(--pc-space-3); }
@media (min-width: 480px) { .pc-inert__row { grid-template-columns: 1fr auto; } }
.pc-inert__field,
.pc-inert__button {
  font-family: var(--pc-font-text);
  font-size: 16px;
  padding: .85rem 1rem;
  border-radius: 0;
  border: 1px solid var(--pc-rule-dark);
  background: rgba(26,23,20,.28);
  color: var(--pc-muted-dark);
  cursor: not-allowed;
  opacity: 1;
  -webkit-text-fill-color: var(--pc-muted-dark);
}
.pc-inert__button {
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  white-space: nowrap;
}
.pc-inert__note {
  margin-top: var(--pc-space-3);
  font-size: var(--pc-fs-xs);
  line-height: 1.5;
  color: var(--pc-parchment);
}


/* ── 14. Buttons ───────────────────────────────────────────────────────── */

.pc-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  font-family: var(--pc-font-text);
  font-size: 12px;
  font-weight: var(--pc-fw-semi);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 0;
  background: none;
  min-height: 44px;
  transition: background var(--pc-dur-2) var(--pc-ease-out),
              color var(--pc-dur-2) var(--pc-ease-out);
}
.pc-btn--ghost { color: var(--pc-gold-pale); }
.pc-btn--ghost:hover,
.pc-btn--ghost:focus-visible { background: var(--pc-gold-pale); color: var(--pc-oxblood); }
.pc-btn--ghost:focus-visible { outline-color: var(--pc-gold-pale); }
.pc-btn--ink { color: var(--pc-ink); }
.pc-btn--ink:hover,
.pc-btn--ink:focus-visible { background: var(--pc-ink); color: var(--pc-bone); }


/* ── 15. Flavour page: standfirst, chapters, figures ───────────────────── */

/* The standfirst hands straight over to chapter I, whose own padding supplies
   the air. Doubling both leaves a hole. */
.pc-standfirst { padding-bottom: 0; }
.pc-standfirst__lede { margin-bottom: var(--pc-space-6); }
.pc-standfirst__body { margin-bottom: var(--pc-space-7); }

.pc-chapters {
  background: var(--pc-bone);
  color: var(--pc-ink);
  padding-bottom: var(--pc-space-8);
}

.pc-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: var(--pc-container-wide);
  margin-inline: auto;
  padding: var(--pc-section-y) var(--pc-gutter);
}
@media (min-width: 900px) {
  .pc-chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pc-chapter--reverse .pc-chapter__text   { order: 2; }
  .pc-chapter--reverse .pc-chapter__figure { order: 1; }
  /* `width`, not `max-width`. With max-width the block shrink-wrapped to its
     own content, so `margin-inline-start:auto` right-aligned a box whose size
     was set by the length of that chapter's headline — the body column's left
     edge then moved up to 48px between chapters on one page as the reader
     scrolled. A determinate width pins the edge to the grid column. */
  .pc-chapter__text { width: min(34rem, 100%); margin-inline-start: auto; }
  .pc-chapter--reverse .pc-chapter__text { margin-inline-start: 0; margin-inline-end: auto; }
}
@media (min-width: 1200px) { .pc-chapter { gap: clamp(3rem, 6vw, 6rem); } }

.pc-chapter__numeral {
  display: block;
  font-size: var(--pc-fs-xl);
  color: var(--pc-accent-ink);
  line-height: 1;
}
.pc-chapter__numeral::after {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--pc-accent);
  margin-top: var(--pc-space-3);
}
.pc-chapter__kicker { margin-top: var(--pc-space-5); }
.pc-chapter__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-h3);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-fg-strong);
  text-wrap: balance;
  margin-block: var(--pc-space-4) var(--pc-space-5);
}
.pc-chapter__body { max-width: var(--pc-measure); }

.pc-chapter__pull {
  border-inline-start: 2px solid var(--pc-accent);
  padding-inline-start: var(--pc-space-5);
  margin-top: var(--pc-space-7);
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-reg);
  font-style: italic;
  font-size: var(--pc-fs-pull);
  line-height: var(--pc-lh-snug);
  color: var(--pc-fg-strong);
}
.pc-chapter__pull cite {
  display: block;
  margin-top: var(--pc-space-4);
  font-family: var(--pc-font-text);
  font-style: normal;
  font-size: var(--pc-fs-3xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pc-fg-muted);
}

.pc-figure { margin: 0; }
.pc-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--pc-parchment-deep);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-ink) 12%, transparent);
}
.pc-figure--wide   .pc-figure__img { aspect-ratio: 3 / 2; }
.pc-figure--tall   .pc-figure__img { aspect-ratio: 2 / 3; }
.pc-figure--square .pc-figure__img { aspect-ratio: 1 / 1; }
.pc-figure--bleed  .pc-figure__img {
  aspect-ratio: auto;
  height: clamp(20rem, 52vw, 40rem);
}
@media (min-width: 720px) { .pc-figure--bleed .pc-figure__img { height: clamp(24rem, 52vw, 40rem); } }

.pc-figure__caption {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  align-items: baseline;
  margin-top: var(--pc-space-3);
  padding-top: var(--pc-space-3);
  border-top: 1px solid var(--pc-hairline);
}
.pc-figure--bleed .pc-figure__caption {
  max-width: var(--pc-container);
  margin-inline: auto;
  padding-inline: var(--pc-gutter);
  margin-top: var(--pc-space-4);
}
.pc-figure__num {
  font-size: var(--pc-fs-3xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-accent-ink);
}
.pc-figure__text {
  font-size: var(--pc-fs-sm);
  line-height: var(--pc-lh-caption);
  color: var(--pc-fg-muted);
  flex: 1 1 14rem;
}
.pc-figure__credit {
  font-size: var(--pc-fs-3xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--pc-fg-muted);
  margin-inline-start: auto;
  opacity: .85;
}


/* ── 16. Timeline, panel, tasting, facts, sources ──────────────────────────
   The timeline, facts and sources components are extensions of the published
   spec: the flavour JSON carries those fields and every field has to be
   rendered. They follow the same tokens and the same BEM-lite naming.
   ------------------------------------------------------------------------ */

.pc-sec-head { margin-bottom: var(--pc-space-7); }
.pc-sec-head .pc-numeral {
  display: block;
  font-size: var(--pc-fs-xl);
  color: var(--pc-accent-fg);
  margin-bottom: var(--pc-space-3);
}
.pc-sec-head__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-h3);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-fg-strong);
  text-wrap: balance;
}

.pc-timeline { border-top: 1px solid var(--pc-hairline); }
.pc-timeline__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-space-2);
  padding-block: var(--pc-space-5);
  border-bottom: 1px solid var(--pc-hairline);
}
@media (min-width: 720px) {
  .pc-timeline__item { grid-template-columns: 11rem 1fr; gap: var(--pc-space-5); }
}
.pc-timeline__year {
  font-family: var(--pc-font-display);
  font-size: var(--pc-fs-md);
  color: var(--pc-accent-fg);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.4;
}
.pc-timeline__event {
  font-size: var(--pc-fs-base);
  line-height: var(--pc-lh-body);
  color: var(--pc-fg);
  max-width: var(--pc-measure);
}

.pc-panel {
  background-color: var(--pc-parchment-deep);
  border: 1px solid var(--pc-rule);
  box-shadow:
    inset 0 0 0 1px var(--pc-parchment-deep),
    inset 0 0 0 5px var(--pc-parchment-deep),
    inset 0 0 0 6px color-mix(in srgb, var(--pc-accent) 45%, transparent);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.pc-panel__head {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-3);
  margin-bottom: var(--pc-space-5);
}
.pc-panel__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-xl);
  line-height: var(--pc-lh-display);
  color: var(--pc-ink);
}
.pc-panel__sub {
  font-size: var(--pc-fs-sm);
  color: var(--pc-ink-muted);
  line-height: var(--pc-lh-caption);
}
.pc-panel__list { display: grid; grid-template-columns: 1fr; }
.pc-panel__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-space-1);
  padding-block: var(--pc-space-3);
  border-top: 1px solid var(--pc-rule);
}
.pc-panel__row:first-child { border-top: 0; }
@media (min-width: 520px) {
  .pc-panel__row { grid-template-columns: 9rem 1fr; gap: var(--pc-space-4); }
}
@media (min-width: 1200px) {
  .pc-panel__row { grid-template-columns: 11rem 1fr; }
}
.pc-panel__term {
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-ink-muted);
  align-self: baseline;
  line-height: 1.8;
}
.pc-panel__value {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-reg);
  font-size: var(--pc-fs-md);
  line-height: 1.45;
  color: var(--pc-ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.pc-panel__foot {
  display: flex;
  align-items: center;
  gap: var(--pc-space-4);
  margin-top: var(--pc-space-6);
  padding-top: var(--pc-space-5);
  border-top: 1px solid var(--pc-rule);
}
.pc-panel__seal {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--pc-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pc-font-display);
  font-size: var(--pc-fs-md);
  color: var(--pc-accent-ink);
  flex: 0 0 auto;
}

.pc-tasting__head { margin-bottom: var(--pc-space-6); }
.pc-tasting__title {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-h3);
  line-height: var(--pc-lh-display);
  letter-spacing: var(--pc-tr-display);
  color: var(--pc-white);
  margin-top: var(--pc-space-3);
}
.pc-tasting__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-space-2);
  padding-block: var(--pc-space-5);
  border-top: 1px solid var(--pc-rule-dark);
}
@media (min-width: 720px) {
  .pc-tasting__item { grid-template-columns: 7rem 1fr; gap: var(--pc-space-5); }
}
.pc-tasting__label {
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-accent-pale);
  line-height: 2;
}
/* Roman numerals are set in the display face, not in letterspaced sans —
   "II" at 12px with .16em tracking reads as a rendering fault. */
.pc-tasting__label--numeral {
  font-family: var(--pc-font-display);
  font-size: var(--pc-fs-md);
  font-weight: var(--pc-fw-reg);
  text-transform: none;
  letter-spacing: .04em;
  line-height: 1.5;
}
.pc-tasting__text {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-reg);
  font-style: italic;
  font-size: var(--pc-fs-md);
  line-height: 1.5;
  color: var(--pc-parchment);
}
.pc-tasting__scales { margin-top: var(--pc-space-6); display: grid; gap: var(--pc-space-4); }
.pc-tasting__scale {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--pc-space-5);
  align-items: center;
}
.pc-tasting__meter {
  display: block;
  position: relative;
  width: 12rem;
  max-width: 100%;
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 calc(20% - 1px), var(--pc-rule-dark) calc(20% - 1px) 20%),
    linear-gradient(var(--pc-rule-dark), var(--pc-rule-dark)) 0 50% / 100% 1px no-repeat;
}
.pc-tasting__meter::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px;
  width: calc(var(--pc-level) * 100%);
  background: var(--pc-accent-pale);
}

.pc-facts__list { display: grid; gap: var(--pc-space-6); }
.pc-facts__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-space-2);
  padding-top: var(--pc-space-5);
  border-top: 1px solid var(--pc-hairline);
}
@media (min-width: 720px) {
  .pc-facts__item { grid-template-columns: 4rem 1fr; gap: var(--pc-space-5); }
}
.pc-facts__numeral {
  font-family: var(--pc-font-display);
  font-size: var(--pc-fs-xl);
  line-height: 1;
  color: var(--pc-accent-fg);
}
.pc-facts__text {
  font-size: var(--pc-fs-base);
  line-height: var(--pc-lh-body);
  color: var(--pc-fg);
  max-width: var(--pc-measure);
}

.pc-sources__list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--pc-hairline);
  max-width: var(--pc-measure-max);
}
.pc-sources__item { border-bottom: 1px solid var(--pc-hairline); }
.pc-sources__link {
  display: block;
  padding-block: var(--pc-space-3);
  min-height: 44px;
  font-size: var(--pc-fs-sm);
  line-height: 1.5;
  color: var(--pc-fg);
  text-decoration: underline;
  text-decoration-color: var(--pc-hairline);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  transition: color var(--pc-dur-1) var(--pc-ease-out),
              text-decoration-color var(--pc-dur-1) var(--pc-ease-out);
}
.pc-sources__link:hover,
.pc-sources__link:focus-visible {
  color: var(--pc-accent-ink);
  text-decoration-color: var(--pc-accent);
}
.pc-sources__note { margin-top: var(--pc-space-5); max-width: var(--pc-measure); }


/* ── 17. Pager ─────────────────────────────────────────────────────────── */

.pc-pager {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--pc-ink);
  color: var(--pc-white);
}
@media (min-width: 720px) { .pc-pager { grid-template-columns: 1fr 1fr; } }

.pc-pager__link {
  position: relative;
  display: block;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pc-gutter);
  text-decoration: none;
  border-bottom: 1px solid var(--pc-rule-dark);
  transition: background 260ms var(--pc-ease-out);
}
@media (min-width: 720px) {
  .pc-pager__link { border-bottom: 0; }
  .pc-pager__prev { border-inline-end: 1px solid var(--pc-rule-dark); }
  .pc-pager__next { text-align: right; }
}
.pc-pager__link::before {
  content: "";
  position: absolute;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--pc-accent);
  transition: width var(--pc-dur-3) var(--pc-ease-out);
}
.pc-pager__prev::before { left: 0; }
.pc-pager__next::before { right: 0; }
.pc-pager__link:hover,
.pc-pager__link:focus-visible {
  background: color-mix(in srgb, var(--pc-accent) 14%, var(--pc-ink));
}
.pc-pager__link:hover::before,
.pc-pager__link:focus-visible::before { width: 100%; }
.pc-pager__link:focus-visible { outline-color: var(--pc-gold-pale); outline-offset: -4px; }

.pc-pager__dir {
  display: block;
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-muted-dark);
}
.pc-pager__county {
  display: block;
  margin-top: var(--pc-space-3);
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-accent-pale);
}
.pc-pager__name {
  display: block;
  margin-top: var(--pc-space-2);
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-xl);
  line-height: var(--pc-lh-snug);
  color: var(--pc-white);
}


/* ── 18. Footer ────────────────────────────────────────────────────────── */

.pc-footer {
  background: var(--pc-green-deep);
  color: var(--pc-parchment);
  --pc-fg:        var(--pc-parchment);
  --pc-fg-strong: var(--pc-white);
  --pc-fg-muted:  var(--pc-muted-dark);
  --pc-hairline:  var(--pc-rule-dark);
}
.pc-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pc-space-8);
  padding-block: var(--pc-space-9);
}
@media (min-width: 820px) {
  .pc-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.pc-footer__brand { display: grid; gap: var(--pc-space-4); justify-items: start; }
.pc-footer__mark {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-fw-med);
  font-size: var(--pc-fs-2xl);
  line-height: var(--pc-lh-display);
  color: var(--pc-parchment);
}
.pc-footer__line {
  font-size: var(--pc-fs-sm);
  line-height: 1.6;
  color: var(--pc-muted-dark);
  max-width: 34ch;
}
.pc-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pc-space-7);
}
@media (min-width: 600px) { .pc-footer__cols { grid-template-columns: 2fr 1fr; } }
.pc-footer__heading {
  font-family: var(--pc-font-text);
  font-size: var(--pc-fs-2xs);
  font-weight: var(--pc-fw-semi);
  text-transform: uppercase;
  letter-spacing: var(--pc-tr-caps);
  color: var(--pc-gold-lite);
  margin-bottom: var(--pc-space-4);
}
.pc-footer__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 600px) { .pc-footer__col--eight .pc-footer__list { grid-template-columns: 1fr 1fr; gap: 0 var(--pc-space-5); } }
.pc-footer__link {
  display: block;
  padding-block: .7rem;
  min-height: 44px;
  font-size: var(--pc-fs-sm);
  line-height: 1.6;
  color: var(--pc-muted-dark);
  text-decoration: none;
  background-image: linear-gradient(var(--pc-accent), var(--pc-accent));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - .65rem);
  background-size: 0 1px;
  transition: color var(--pc-dur-1) var(--pc-ease-out),
              background-size 220ms var(--pc-ease-out);
}
.pc-footer__link:hover,
.pc-footer__link:focus-visible { color: var(--pc-parchment); background-size: 100% 1px; }
.pc-footer__link:focus-visible { outline-color: var(--pc-gold-pale); }

.pc-footer__legal {
  border-top: 1px solid var(--pc-rule-dark);
  padding-block: var(--pc-space-6);
  display: flex;
  justify-content: space-between;
  gap: var(--pc-space-5);
  flex-wrap: wrap;
  align-items: baseline;
}
.pc-footer__disclaimer {
  font-size: var(--pc-fs-xs);
  line-height: 1.6;
  color: var(--pc-muted-dark);
  max-width: 62ch;
}


/* ── 19. Motion ────────────────────────────────────────────────────────── */

.pc-reveal {
  opacity: 0;
  transform: translateY(var(--pc-reveal-y));
  transition:
    opacity var(--pc-dur-4) var(--pc-ease-out),
    transform var(--pc-dur-4) var(--pc-ease-out);
  transition-delay: var(--pc-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.pc-reveal.is-revealed { opacity: 1; transform: none; }
.pc-reveal--fade { transform: none; }
.pc-reveal--rule { transform: scaleX(0); transform-origin: left; opacity: 1; }
.pc-reveal--rule.is-revealed { transform: scaleX(1); }

/* Hero entrance — home hero only, once, on load. */
@keyframes pc-rise-12 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pc-rise-16 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pc-grow-x  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pc-ken     { from { transform: scale(1.06); } to { transform: scale(1); } }

.pc-hero--home .pc-hero__eyebrow    { animation: pc-rise-12 900ms var(--pc-ease-out) 120ms both; }
.pc-hero--home .pc-hero__title      { animation: pc-rise-16 var(--pc-dur-5) var(--pc-ease-out) 220ms both; }
.pc-hero--home .pc-hero__rule       { animation: pc-grow-x 900ms var(--pc-ease-out) 620ms both; }
.pc-hero--home .pc-hero__standfirst { animation: pc-rise-12 900ms var(--pc-ease-out) 760ms both; }
.pc-hero--home .pc-hero__cta        { animation: pc-rise-12 900ms var(--pc-ease-out) 900ms both; }
.pc-hero--home .pc-hero__img        { animation: pc-ken 2400ms var(--pc-ease-soft) both; }


/* ── 20. Reduced motion, print, forced colors ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .pc-reveal { opacity: 1 !important; transform: none !important; }
  .pc-hero__img { transform: none !important; }
  .pc-hero__scroll .pc-hero__scroll-dot { animation: none !important; top: 0; }
  .pc-card__img { transform: none !important; }
  .pc-card__link:hover .pc-card__img,
  .pc-card__link:focus-visible .pc-card__img { transform: none !important; }
  .pc-card__cue { transform: none !important; }
}

@media print {
  .pc-nav, .pc-pager, .pc-hero__scroll, .pc-inert { display: none !important; }
  .pc-demo-banner {
    position: static;
    background: none !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
    justify-content: flex-start;
  }
  .pc-demo-banner__tag, .pc-demo-banner__link { color: #000 !important; }
  .pc-section--dark, .pc-section--oxblood, .pc-footer, .pc-chapters, .pc-hero {
    background: #fff !important;
    color: #000 !important;
    --pc-fg: #000; --pc-fg-strong: #000; --pc-fg-muted: #333;
    --pc-hairline: #999;
  }
  .pc-hero__scrim { display: none; }
  .pc-hero__title, .pc-map__title, .pc-tasting__title,
  .pc-closing__title, .pc-footer__mark, .pc-pager__name { color: #000 !important; }
  .pc-reveal { opacity: 1 !important; transform: none !important; }
  .pc-figure { break-inside: avoid; }
  .pc-footer__disclaimer { color: #000 !important; }
}

@media (forced-colors: active) {
  .pc-panel { box-shadow: none; border: 2px solid; }
  .pc-figure__img { box-shadow: none; border: 1px solid; }
  .pc-card__accent, .pc-map__legend-swatch { forced-color-adjust: none; }
  .pc-map__dot { box-shadow: none; border: 1px solid; forced-color-adjust: none; }
  .pc-map__card { border: 2px solid; }
}