/* ═══════════════════════════════════════════════════════════════════
   neilcatton.com — shared stylesheet

   This file is the design system. Before this existed, every page
   carried its own copy of these rules inline: 10,122 lines of CSS
   across 33 files, 69% of it duplicated. The cost was not bytes —
   it was that `flex-wrap: wrap` got added to `.footer-links` on six
   pages and never reached the other twenty-six, leaving those pages
   scrolling sideways on mobile with eight footer links rendering
   invisible off-canvas. Four audit passes missed it.

   Rule: if a style belongs to the site rather than to one page,
   it belongs here. Page-specific CSS stays in that page's own
   scoped <style> block, which build.mjs emits.

   Contents
     1  Tokens
     2  Reset and base
     3  Focus, skip link, motion
     4  Navigation (desktop bar + mobile panel)
     5  Buttons
     6  Section primitives
     7  Page header
     8  Detail header and layout (services, briefings)
     9  Details grid
    10  FAQ
    11  Engagement CTA
    12  Forms
    13  Related content
    14  Announcements
    15  Footer
    16  Keyframes
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────────── */

:root {
  /* Ink and paper. Deliberately not #000 on #fff — the off-white
     ground is easier for light-sensitive and dyslexic readers. */
  --ink:        #1a1714;
  --ink-mid:    #3d3935;
  --ink-light:  #5c5652;
  --paper:      #f5f2ee;
  --paper-mid:  #ede9e3;
  --accent:     #2b4a6f;
  --accent-mid: #3d6494;   /* light grounds only — 5.46:1 on paper, 1.49:1 on accent */
  --accent-lift:#6a94c4;   /* the accent's readable form on dark grounds — 5.65:1 on ink */
  --rule:       #d4cfc9;
  --marker:     #7f7c79;   /* decorative numerals — 3.4:1 on paper, passes as large text */

  /* Book signature colours (Practice Library, Pattern Map) */
  --book-1: #2b4a6f;
  --book-2: #6b3fa0;
  --book-3: #b03a2e;

  /* Translucent paper on dark grounds. Below 0.55 on --ink and 0.78
     on --accent these stop clearing 4.5:1 — do not lower them. */
  --on-dark:        rgba(245,242,238,0.78);
  --on-dark-strong: rgba(245,242,238,0.92);
  --on-dark-rule:   rgba(245,242,238,0.35);

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Source Sans 3", Helvetica, Arial, sans-serif;

  --col-pad:   clamp(1.5rem, 5vw, 4rem);
  --max-wide:  1080px;
  --max-prose: 680px;

  --nav-h: 4.25rem;          /* height of the fixed bar */
  --nav-clear: 5.5rem;       /* nav height + breathing room, for scroll-padding */
  --nav-break: 1080px;       /* below this the mobile panel takes over */
}

/* ── 2. RESET AND BASE ─────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* The nav is position:fixed and ~68px tall. Without this, every
     in-page anchor — including the skip link — lands underneath it.
     WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum). */
  scroll-padding-top: var(--nav-clear);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Nothing on this site is wider than the viewport by design.
     If something ever is, this stops it silently breaking the page. */
  overflow-x: hidden;
}

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

/* ── 3. FOCUS, SKIP LINK, MOTION ───────────────────────────────── */

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* On dark grounds the ink-blue outline disappears. */
.site-footer :focus-visible,
.page-header :focus-visible,
.detail-header :focus-visible,
.engagement-cta :focus-visible,
.subscribe-section :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute;
  top: -100%; left: 1rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  z-index: 9999;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* Utility: visible to screen readers only. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── 4. NAVIGATION ─────────────────────────────────────────────── */
/* One <ul class="nav-links"> serves both the desktop bar and the
   mobile panel — no duplicated DOM, so aria-current can never
   disagree between the two.

   Dropdown parents are <button>, not <a>. That makes them work on
   touch (a link parent navigates instead of opening the menu), gives
   them a real aria-expanded state, and removes the adjacent-duplicate-
   link problem: the section index is the first item inside the menu
   instead of being a second link to the same place. */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--col-pad);
  background: rgba(245,242,238,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow 0.3s ease;
}
.site-nav.scrolled { box-shadow: 0 2px 20px rgba(26,23,20,0.08); }

/* backdrop-filter makes .site-nav the containing block for any
   position:fixed descendant, which would trap the mobile panel inside
   the 80px bar instead of letting it fill the viewport. Drop it while
   the panel is open, and make the bar fully opaque so nothing shows
   through it. */
.site-nav[data-nav-open="true"] {
  backdrop-filter: none;
  background: var(--paper);
}

.nav-wordmark {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.nav-wordmark:hover { text-decoration: underline; }

.nav-panel { display: flex; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links > li { display: flex; align-items: center; }

.nav-links a,
.nav-dropdown-toggle {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  /* WCAG 2.2 SC 2.5.8 Target Size — 24px minimum in both axes. */
  min-height: 24px;
  padding: 0.35rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-links a::after,
.nav-dropdown-toggle::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width 0.25s ease;
}
.nav-links a:hover, .nav-dropdown-toggle:hover { color: var(--accent); }
.nav-links a:hover::after, .nav-dropdown-toggle:hover::after { width: 100%; }

.nav-links a[aria-current="page"],
.nav-dropdown-toggle[data-section-current] { color: var(--accent); }
.nav-links a[aria-current="page"]::after,
.nav-dropdown-toggle[data-section-current]::after { width: 100%; }

.nav-dropdown-toggle .caret {
  font-size: 0.55rem;
  display: inline-block;
  transition: transform 0.2s ease;
}
.nav-dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.btn-nav {
  border: 1.5px solid var(--ink);
  padding: 0.45rem 0.9rem;
  transition: background 0.2s, color 0.2s;
}
.btn-nav::after { display: none !important; }
.btn-nav:hover { background: var(--ink); color: var(--paper) !important; }

/* Search trigger, injected by search.js */
.search-trigger-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 24px; min-height: 24px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-mid); padding: 0; transition: color 0.2s;
}
.search-trigger-btn:hover { color: var(--accent); }
.search-trigger-btn svg { width: 18px; height: 18px; display: block; }

/* ── Dropdown menus ─────────────────────────────────────────────
   Click, not hover. Hover-only menus are unusable on touch and give
   assistive technology no state to report. */

.nav-dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem); left: -1.4rem;
  min-width: 260px;
  padding: 0.55rem 0;
  background: rgba(245,242,238,0.99);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  box-shadow: 0 14px 30px rgba(26,23,20,0.12);
  list-style: none;
  z-index: 200;
  display: none;
}
.nav-dropdown-toggle[aria-expanded="true"] + .dropdown-menu { display: block; }

.dropdown-menu li a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0.5rem 1.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
  width: 100%;
}
.dropdown-menu li a::after { display: none; }
.dropdown-menu li a:hover { background: var(--paper-mid); }
.dropdown-menu li a[aria-current="page"] { color: var(--accent); }
.dropdown-divider { border-top: 1px solid var(--rule); margin: 0.45rem 0; }

/* ── Mobile menu button ─────────────────────────────────────────
   Hidden above --nav-break, where the full bar fits. */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  min-height: 44px;
  cursor: pointer;
}
.nav-toggle-bars {
  display: inline-block;
  width: 16px; height: 11px;
  position: relative;
}
.nav-toggle-bars span {
  position: absolute; left: 0;
  display: block; width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ── Below the breakpoint: the panel becomes a drawer ──────────── */

@media (max-width: 1079.98px) {
  .nav-toggle { display: inline-flex; }

  .nav-panel {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem var(--col-pad) 4rem;
    display: none;
  }
  .site-nav[data-nav-open="true"] .nav-panel { display: block; }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    max-width: var(--max-wide);
    margin: 0 auto;
  }
  .nav-links > li {
    display: block;
    border-bottom: 1px solid var(--rule);
  }
  .nav-links > li:last-child { border-bottom: none; }

  .nav-links > li > a,
  .nav-dropdown-toggle {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    min-height: 52px;
    padding: 0.85rem 0;
    font-size: 0.85rem;
  }
  .nav-links a::after, .nav-dropdown-toggle::after { display: none; }
  .nav-links a[aria-current="page"],
  .nav-dropdown-toggle[data-section-current] {
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: 0.85rem;
  }

  .dropdown-menu {
    position: static;
    min-width: 0;
    border: none;
    border-top: 1px solid var(--rule);
    box-shadow: none;
    background: var(--paper-mid);
    margin-bottom: 0.85rem;
    padding: 0.35rem 0;
  }
  .dropdown-menu li a {
    min-height: 48px;
    padding: 0.7rem 1.25rem;
    font-size: 0.8rem;
    white-space: normal;
  }
  .dropdown-divider { margin: 0.35rem 1.25rem; }

  /* Search and "Book a call" sit at the foot of the panel rather than
     disappearing with the bar, which is what used to happen. */
  .nav-links > li.nav-cta,
  .nav-links > li.nav-search-item {
    border-bottom: none;
    padding-top: 1.25rem;
  }
  .nav-links > li.nav-cta .btn-nav {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    padding: 0.9rem 1rem;
    background: var(--ink);
    color: var(--paper);
    border: 2px solid var(--ink);
  }
  .nav-links > li.nav-cta .btn-nav:hover { background: var(--accent); border-color: var(--accent); }
  .search-trigger-btn {
    width: auto; justify-content: flex-start;
    min-height: 48px; gap: 0.6rem;
    font-family: var(--sans); font-size: 0.85rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-mid);
  }
  .search-trigger-btn .search-trigger-label { display: inline; }

  body[data-nav-open="true"] { overflow: hidden; }
}

@media (min-width: 1080px) {
  .search-trigger-btn .search-trigger-label { display: none; }
}

/* ── 5. BUTTONS ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.875rem 1.75rem;
  min-height: 44px;
  min-width: 44px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary   { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }

.btn-secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* Paper button — for use on --accent or --ink grounds. */
.btn-paper {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.875rem 1.75rem; min-height: 44px;
  background: var(--paper); color: var(--accent);
  border: 2px solid var(--paper);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  margin: 0 0.5rem 0.75rem;
}
.btn-paper:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn-ghost-light {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  padding: 0.875rem 1.75rem; min-height: 44px;
  background: transparent; color: var(--on-dark);
  border: 2px solid var(--on-dark-rule);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  margin: 0 0.5rem 0.75rem;
}
.btn-ghost-light:hover {
  border-color: rgba(245,242,238,0.8);
  background: rgba(245,242,238,0.12);
  color: var(--paper);
}

/* Inline "read more" link. Sized to clear the 24px target minimum —
   these are standalone links, so the SC 2.5.8 inline exception
   does not apply to them. */
.btn-ghost, .link-cta {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.25rem 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
}
.btn-ghost::after, .link-cta::after { content: " \2192"; margin-left: 0.35em; }
.btn-ghost:hover, .link-cta:hover { color: var(--ink); text-decoration: underline; }

/* ── 6. SECTION PRIMITIVES ─────────────────────────────────────── */

.section       { padding: 5rem var(--col-pad); }
.section-inner { max-width: var(--max-wide); margin: 0 auto; }

/* The rule-topped accent label used on detail and FAQ sections. */
.section-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Eyebrow label above a section heading, no rule. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 1rem;
  display: block;
}

.section-heading {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.section-rule {
  width: 48px; height: 2px;
  background: var(--accent);
  border: none;
  margin-bottom: 2.5rem;
}

/* Decorative numerals (Roman numerals on book cards, numbered
   service boxes). --marker clears 3:1 as large text; never use it
   below 24px or for anything that carries meaning. */
.marker-numeral {
  font-family: var(--serif);
  color: var(--marker);
  font-style: italic;
  line-height: 1;
}

/* ── 7. PAGE HEADER ────────────────────────────────────────────── */

.page-header { padding-top: 7rem; background: var(--ink); }

.page-header-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 3rem var(--col-pad) 3.5rem;
}

.page-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.2s forwards;
}
.page-label::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--accent-lift);
  flex-shrink: 0;
}

.page-title {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.35s forwards;
}
.page-title em { font-style: italic; color: var(--rule); }

.page-standfirst {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--on-dark);
  opacity: 0;
  animation: fadeInUp 0.6s ease 0.5s forwards;
}

/* Light variant — used by the policy pages. */
.page-header--light {
  padding: 9rem var(--col-pad) 3rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.page-header--light .page-header-inner { padding: 0; }
.page-header--light .page-label { color: var(--ink-light); }
.page-header--light .page-label::before { background: var(--accent); }
.page-header--light .page-title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-header--light .page-title em { color: var(--accent); }
.page-header--light .page-standfirst { color: var(--ink-mid); max-width: 620px; }

/* ── 8. DETAIL HEADER AND LAYOUT ───────────────────────────────── */
/* Used by the twelve service pages and the four briefings. The
   header sits INSIDE <main>, so the page has one banner landmark
   and the skip link does not jump past the h1. */

.breadcrumb { margin-bottom: 1.5rem; opacity: 0; animation: fadeInUp 0.6s ease 0.1s forwards; }
.breadcrumb ol {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin: 0 0.6rem; color: var(--on-dark); }
.breadcrumb a {
  color: var(--on-dark); text-decoration: none;
  padding: 0.25rem 0; min-height: 24px;
  display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.breadcrumb a:hover { color: var(--paper); border-color: rgba(245,242,238,0.5); }
.breadcrumb [aria-current="page"] { color: var(--on-dark-strong); }

.detail-header { padding-top: 7rem; background: var(--ink); }
.detail-header-inner { max-width: var(--max-wide); margin: 0 auto; padding: 3rem var(--col-pad) 3.25rem; }

.detail-label {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
  opacity: 0; animation: fadeInUp 0.6s ease 0.2s forwards;
}
.detail-label::before { content: ""; width: 24px; height: 1px; background: var(--accent-lift); flex-shrink: 0; }

.detail-title {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.5vw, 3.9rem);
  font-weight: 400; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--paper); margin-bottom: 1.5rem; max-width: 820px;
  opacity: 0; animation: fadeInUp 0.6s ease 0.35s forwards;
}

.detail-standfirst {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 400; line-height: 1.6;
  color: var(--on-dark); max-width: 620px;
  opacity: 0; animation: fadeInUp 0.6s ease 0.5s forwards;
}

.detail-main  { max-width: var(--max-wide); margin: 0 auto; padding: 4rem var(--col-pad) 4.5rem; }
.detail-prose { max-width: var(--max-prose); }

.detail-section { margin-bottom: 2.75rem; }
.detail-section p { color: var(--ink-mid); margin-bottom: 0.85rem; }
.detail-section p:last-child { margin-bottom: 0; }
.detail-section strong { color: var(--ink); font-weight: 600; }

/* Section headings inside a detail page. These used to be
   <div class="section-label"> — visually a heading, semantically
   nothing, so a screen reader user navigating by heading jumped
   straight from the h1 to the FAQ. WCAG 1.3.1. */
.detail-section-heading {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-bottom: 0.75rem;
}

/* ── 9. DETAILS GRID ───────────────────────────────────────────── */

.details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper-mid);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 0.5rem;
}
.details-grid .cell { padding: 1.4rem 1.5rem; border-left: 1px solid var(--rule); }
.details-grid .cell:first-child { border-left: none; }
.details-grid .k {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-light); margin-bottom: 0.3rem;
}
.details-grid .v { font-size: 0.95rem; color: var(--ink); line-height: 1.45; }

/* ── 10. FAQ ───────────────────────────────────────────────────── */

.faq-section { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--col-pad) 4.5rem; }
.faq-heading {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400; color: var(--ink); margin-bottom: 1.75rem; max-width: var(--max-prose);
}
.faq-list { max-width: 720px; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-item summary {
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  color: var(--ink); padding: 1.1rem 2.25rem 1.1rem 0;
  cursor: pointer; list-style: none; position: relative;
  min-height: 44px; display: flex; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%;
  transform: translateY(-50%); font-family: var(--serif);
  font-size: 1.5rem; line-height: 1; color: var(--accent); font-weight: 400;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq-item p { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.75; padding: 0 2.25rem 1.25rem 0; margin: 0; }

/* ── 11. ENGAGEMENT CTA ────────────────────────────────────────── */

.engagement-cta { background: var(--accent); padding: 5rem var(--col-pad); text-align: center; }
.engagement-cta-inner { max-width: 600px; margin: 0 auto; }
.engagement-cta-heading {
  font-family: var(--serif); font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 400; color: var(--paper); line-height: 1.2; margin-bottom: 1rem;
}
.engagement-cta-sub {
  font-size: 1rem; font-weight: 300;
  color: var(--on-dark); line-height: 1.75; margin-bottom: 2.5rem;
}

/* ── 12. FORMS ─────────────────────────────────────────────────── */

.form-field { margin-bottom: 1.25rem; }
.form-label {
  display: block; font-size: 0.9rem; font-weight: 600;
  color: var(--ink); margin-bottom: 0.5rem;
}
.form-input {
  width: 100%;
  font-family: var(--sans); font-size: 1rem;
  padding: 0.875rem 1rem;
  background: var(--paper);
  border: 2px solid var(--ink-mid);
  color: var(--ink);
  outline: none;
  min-height: 44px;
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(43,74,111,0.12); }
.form-input::placeholder { color: var(--ink-light); }
textarea.form-input { resize: vertical; min-height: 140px; line-height: 1.6; }

/* Honeypot — off-screen rather than display:none so that bots which
   check computed style still fill it in. Never announced: aria-hidden
   plus tabindex="-1" on the input itself. */
.form-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.form-success {
  background: var(--paper-mid);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.form-success h3 {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  color: var(--ink); margin-bottom: 0.5rem;
}
.form-success p { font-size: 0.95rem; color: var(--ink-mid); }

/* Inline error panel. Replaces the alert() the forms used to throw,
   which is unstyleable, jarring, and silently suppressed by some
   mobile browsers — so a failed send looked like nothing happening. */
.form-error {
  background: #fbf0ee;
  border: 1px solid #b03a2e;
  border-left: 4px solid #b03a2e;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  color: #7d271e;
  font-size: 0.95rem;
  line-height: 1.7;
}
.form-error a { color: #7d271e; }

/* ── 13. RELATED CONTENT ───────────────────────────────────────── */

.related { background: var(--paper-mid); border-top: 1px solid var(--rule); padding: 4rem var(--col-pad); }
.related-inner { max-width: var(--max-wide); margin: 0 auto; }
.related-heading {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 400; color: var(--ink); margin-bottom: 0.5rem;
}
.related-sub { font-size: 0.95rem; color: var(--ink-light); margin-bottom: 2rem; max-width: var(--max-prose); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.related-item { border-top: 2px solid var(--rule); padding-top: 1.25rem; transition: border-color 0.2s; }
.related-item:hover { border-color: var(--accent); }
.related-kind {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-light); margin-bottom: 0.6rem;
}
.related-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; line-height: 1.35; margin-bottom: 0.5rem; }
.related-title a {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
  border-bottom: 1px solid transparent;
}
.related-title a:hover { color: var(--accent); border-color: var(--accent); }
.related-note { font-size: 0.9rem; color: var(--ink-mid); line-height: 1.6; }

/* ── 14. ANNOUNCEMENTS ─────────────────────────────────────────── */

.announce-bar { max-width: var(--max-wide); margin: 0 auto; padding: 1rem var(--col-pad) 0; }
.announce-bar[hidden] { display: none; }
.announce-item {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  background: var(--accent); color: var(--paper);
  margin-bottom: 0.6rem;
}
.announce-item:last-child { margin-bottom: 0; }
.announce-tag {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(245,242,238,0.22); padding: 0.28rem 0.6rem; flex-shrink: 0;
}
.announce-text { font-size: 0.92rem; font-weight: 300; flex: 1; min-width: 200px; }
.announce-cta {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper); text-decoration: none;
  border-bottom: 1px solid rgba(245,242,238,0.5);
  padding: 0.25rem 0; min-height: 24px;
  display: inline-flex; align-items: center;
  white-space: nowrap; transition: border-color 0.2s;
}
.announce-cta:hover { border-color: var(--paper); }

/* ── 15. FOOTER ────────────────────────────────────────────────── */

.site-footer { background: var(--ink); padding: 2.75rem var(--col-pad); }

.site-footer { padding: 3.5rem var(--col-pad) 2.5rem; }

.footer-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.5rem 3rem;
}

.footer-brand { flex: 0 0 auto; min-width: 200px; }

.footer-wordmark {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 400;
  color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer-wordmark:hover { text-decoration: underline; }

.footer-tagline {
  font-size: 0.85rem; font-weight: 300;
  color: var(--on-dark); margin-top: 0.4rem; max-width: 16rem;
}

.footer-nav {
  flex: 1 1 32rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem;
}

.footer-col-heading {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper); margin-bottom: 0.9rem;
}

/* flex-wrap is not optional. Twelve links in a nowrap flex row are
   1093px wide, which forced 1117px of horizontal scroll at a 375px
   viewport on 26 of the site's 33 pages and pushed eight of the
   links onto the paper background at 1.06:1 contrast. */
.footer-links {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}
.footer-links a {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(245,242,238,0.72);   /* 8.1:1 on --ink */
  text-decoration: none;
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.footer-links a:hover { color: var(--paper); border-color: rgba(245,242,238,0.6); }

.footer-copy {
  font-size: 0.8rem; color: var(--on-dark); width: 100%;
  border-top: 1px solid rgba(245,242,238,0.18);
  padding-top: 1.5rem; margin-top: 0.5rem;
}
.footer-copy a {
  color: var(--on-dark);
  display: inline-flex; align-items: center; min-height: 24px;
}
.footer-copy a:hover { color: var(--paper); }

@media (max-width: 580px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-nav { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
}
@media (max-width: 380px) {
  .footer-nav { grid-template-columns: 1fr; }
}

/* ── 16. KEYFRAMES ─────────────────────────────────────────────── */

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp   { from { opacity: 0; transform: translateY(14px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes photoRise  { from { opacity: 0; transform: translateY(18px); }  to { opacity: 1; transform: translateY(0); } }

/* ── RESPONSIVE ────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .details-grid { grid-template-columns: 1fr 1fr; }
  .details-grid .cell:nth-child(odd) { border-left: none; }
  .details-grid .cell:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .related-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 580px) {
  .details-grid { grid-template-columns: 1fr; }
  .details-grid .cell { border-left: none; }
  .details-grid .cell:nth-child(n+2) { border-top: 1px solid var(--rule); }
  .section { padding: 3.5rem var(--col-pad); }
}

/* ── 17. SEARCH OVERLAY ────────────────────────────────────────── */
/* Behaviour lives in search.js; the trigger button styling is in the
   nav section above so that the trigger survives into the mobile
   panel instead of disappearing with the desktop bar. */

.search-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(26,23,20,0.92);
  display: none; align-items: flex-start; justify-content: center;
  padding: 8vh 1.5rem 2rem;
  overflow-y: auto;
}
.search-overlay.open { display: flex; }

.search-panel {
  width: 100%; max-width: 640px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

.search-input-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.search-input-row svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-light); }
.search-input {
  flex: 1; border: none; background: transparent; outline: none;
  font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
  min-height: 44px;
}
.search-input::placeholder { color: var(--ink-light); }
.search-close-btn {
  border: 1px solid var(--rule); background: none; cursor: pointer; color: var(--ink-light);
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem 0.7rem; min-height: 32px; min-width: 44px;
}
.search-close-btn:hover { color: var(--ink); border-color: var(--ink-light); }

.search-results { max-height: 60vh; overflow-y: auto; }
.search-section-label {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-light);
  padding: 0.9rem 1.25rem 0.4rem;
}
.search-result {
  display: block; padding: 0.75rem 1.25rem;
  text-decoration: none; border-left: 3px solid transparent;
  min-height: 44px;
}
.search-result:hover, .search-result.active {
  background: var(--paper-mid); border-left-color: var(--accent);
}
.search-result-title {
  font-family: var(--serif); font-size: 1rem; font-weight: 400;
  color: var(--ink); margin-bottom: 0.2rem;
}
.search-result-excerpt {
  font-family: var(--sans); font-size: 0.875rem; color: var(--ink-light);
  line-height: 1.5;
}
.search-empty, .search-hint, .search-loading {
  padding: 2rem 1.25rem; text-align: center;
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-light);
}
.search-kbd {
  display: inline-block; border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 3px; padding: 0.05rem 0.4rem; font-size: 0.78rem; font-family: monospace;
  margin: 0 0.15rem;
}

/* Details grid gets its own spacing when it follows the prose column. */
.detail-section--grid { margin-top: 3rem; margin-bottom: 0; max-width: none; }

/* Feed fallback — what a visitor sees when the Substack feed cannot be
   reached, or with JavaScript off. Previously a hardcoded list of three
   articles which would be presented as current however old it got. */
.feed-fallback {
  background: var(--paper-mid);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  padding: 2rem;
  max-width: var(--max-prose);
}
.feed-fallback-body { font-size: 0.95rem; color: var(--ink-mid); line-height: 1.7; margin-bottom: 1.5rem; }

/* ── 18. TARGET SIZE FOR STANDALONE LINKS ──────────────────────── */
/* WCAG 2.2 SC 2.5.8 needs 24×24 CSS pixels. The exception for links
   inline in a sentence does not cover a link that is the whole of its
   line — a card title, a "download" link, a row in a list. These are
   the ones the audit found sitting at 19–23px. */

.instance-title a,
.library-card-title,
.briefing-card-title,
.briefing-card-link,
.related-title a,
.book-key-title a,
.direct-links a,
.footer-copy a,
.sitemap-list a,
.tool-card-cta {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* A link that is the whole of a list item is a standalone target,
   not an inline one — SC 2.5.8 applies. */
li > a:only-child { display: inline-flex; align-items: center; min-height: 24px; }
.press-card-link, .org-link { display: inline-flex; align-items: center; min-height: 24px; }

/* Inline prose links. Underlined by default so they are distinguishable
   from surrounding text by more than colour alone (WCAG 1.4.1). */
.prose-link, .detail-section p a, .board-prose p a, .pack-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.prose-link:hover, .detail-section p a:hover, .board-prose p a:hover { color: var(--ink); }