/* We Were Not Orphans: site.css
   One stylesheet for every page. Consolidated from the approved 01c comps (base.css, style.css, interior.css +
   interior-c/-d/-f). Cascade layers, lowest to highest:
     reset, tokens, base, layout, components, pages
   Responsive overrides live at the end of the layer that owns the rule they change.
   No inline styles are used anywhere on the site (CSP), so per-page variation is done with classes defined here. */
@layer reset, tokens, base, layout, components, pages;

/* ================================================================ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  h1, h2, h3, p, figure, blockquote, ul, ol, address { margin: 0; padding: 0; }
  address { font-style: normal; }
  img { display: block; max-width: 100%; height: auto; }
  button { font: inherit; }
}

/* ================================================================ tokens + fonts */
@layer tokens {
  /* Subset WOFF2 (bin/subset-fonts.sh). Size-adjusted local fallbacks keep the swap from shifting layout (CLS 0). */
  @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
  @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic-var.woff2") format("woff2"); font-weight: 340 700; font-style: italic; font-display: swap; }
  @font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
  @font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia"); size-adjust: 101.7%; ascent-override: 101.9%; descent-override: 32.9%; line-gap-override: 0%; }
  @font-face { font-family: "Jost Fallback"; src: local("Arial"); size-adjust: 95.4%; ascent-override: 112.1%; descent-override: 39.3%; line-gap-override: 0%; }

  :root {
    /* type */
    --font-serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, "Times New Roman", serif;
    --font-sans: "Jost", "Jost Fallback", Futura, "Century Gothic", sans-serif;

    /* ink + paper */
    --ink: #231f20;            /* logo ink: 13.25:1 on paper */
    --paper: #eae8dc;
    --paper-50: #f5f3ea;
    --paper-deep: #dcd9c8;
    --white: #ffffff;

    /* blues */
    --blue: #3f5f6e;           /* link/text blue on paper: 5.56:1; white on it 6.83:1 */
    --logo-blue: #4d6f7e;      /* the logo's own blue: large type and decorative use only */
    --blue-pale: #9fb4bc;      /* links on dark: 6.72:1 on --night */
    --blue-mist: #d3dcdd;      /* body text on dark */
    --night: #1f2b31;

    /* sepia */
    --sepia: #6b5f4e;          /* text-safe on paper */
    --sepia-200: #cfc6b3;

    /* lines + states */
    --line: #6f8590;           /* UI borders, 3.1:1 on paper */
    --line-soft: #c9c8bb;      /* decorative hairlines only */
    --focus: #3f5f6e;

    /* layout */
    --gutter: clamp(20px, 3.2vw, 56px);
    --hdr: 64px;
  }
}

/* ================================================================ base */
@layer base {
  html { scroll-behavior: smooth; accent-color: var(--blue); scroll-padding-top: calc(var(--hdr) + 16px); }
  body {
    background: var(--paper); color: var(--ink); font-family: var(--font-serif); font-size: 19px; line-height: 1.6;
    overflow-wrap: break-word;
  }
  a { color: var(--blue); }
  ::selection { background: var(--blue); color: var(--paper); }
  [id] { scroll-margin-top: calc(var(--hdr) + 24px); }
  /* sections that receive focus after a same-page menu link (nav.js) are not controls: no ring around the whole block */
  section[tabindex="-1"]:focus, div[tabindex="-1"]:focus { outline: none; }

  /* WCAG 2.2: visible focus, never removed */
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .on-dark :focus-visible, .site-header :focus-visible { outline-color: var(--blue-pale); }
  #main:focus { outline: 0; } /* skip-link target only; not in the tab order */

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--ink); color: var(--white); padding: .75rem 1rem; font-family: var(--font-sans); }
  .skip-link:focus { top: 1rem; }

  .interior a { text-underline-offset: 0.28em; text-decoration-thickness: 1px; }
  .interior a:hover { text-decoration-thickness: 2px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
  @media (max-width: 599px) { body { font-size: 18px; } }
}

/* ================================================================ layout: header, nav, footer, page grid, rail */
@layer layout {
  /* ---------- Header + primary nav ---------- */
  .site-header { position: sticky; top: 0; z-index: 50; background: var(--night); color: var(--white); }
  .site-header__bar { display: flex; align-items: center; gap: clamp(16px, 2vw, 40px); height: var(--hdr); padding: 0 var(--gutter); }

  /* The logo lockup, built from logo.png's proportions (wordmark = 600 units: tagline caps flush right at ~83% of the
     wordmark's width, 12 units under the descenders). --W is the wordmark's ink width.
     On dark: wordmark white, tagline --blue-pale (6.72:1 on night). */
  .brand, .foot-wm { display: inline-flex; flex-direction: column; align-items: flex-end; flex: none; color: var(--white); text-decoration: none; line-height: 1; }
  .brand { --W: 250px; }
  .foot-wm { --W: clamp(240px, 19vw, 330px); margin: 0; white-space: nowrap; }
  .brand__wm, .foot-wm__wm {
    font-family: var(--font-serif); font-size: calc(var(--W) / 9.183); font-weight: 430; font-variation-settings: "opsz" 24;
    letter-spacing: -0.01em; line-height: 1; white-space: nowrap; text-box: trim-both cap alphabetic;
  }
  .brand__sub, .foot-wm__sub {
    margin: calc(var(--W) * 0.0483) -0.03em 0 0; font-family: var(--font-sans); font-weight: 520; font-size: calc(var(--W) * 0.042);
    line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--blue-pale); white-space: nowrap; text-box: trim-both cap alphabetic;
  }

  .menu-btn { display: none; }
  .nav { margin-left: auto; }
  .nav__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
  .nav__item { position: relative; display: flex; align-items: center; }
  .nav__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
    font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1;
    letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
    color: var(--blue-mist); text-decoration: none; position: relative;
  }
  .nav__link:hover, .nav__link[aria-current] { color: var(--white); }
  .nav__link[aria-current]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; background: var(--blue-pale); }
  .has-sub .nav__link { padding-right: 2px; }
  .nav__toggle {
    display: grid; place-items: center; width: 26px; height: 44px; padding: 0; border: 0; background: none;
    color: var(--blue-pale); cursor: pointer;
  }
  .nav__toggle:hover { color: var(--white); }
  .nav__toggle .chev { transition: transform .2s; }
  .nav__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

  .nav__sub {
    position: absolute; top: calc(100% - 2px); left: 0; z-index: 60; min-width: 230px; margin: 0; padding: 8px 0;
    list-style: none; background: var(--night); border-top: 3px solid var(--blue-pale);
  }
  .nav__sub[hidden] { display: none; }
  .nav__item:nth-last-child(-n+3) .nav__sub { left: auto; right: 0; }
  .nav__sub a {
    display: block; padding: 13px 22px; font-family: var(--font-sans); font-weight: 500; font-size: 12px;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-mist); text-decoration: none;
  }
  .nav__sub a:hover { background: #2c3f49; color: var(--white); }
  .nav__sub a[aria-current] { color: var(--white); text-decoration: underline; text-decoration-color: var(--blue-pale); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }

  .nav__item--buy { margin: 0 0 0 clamp(10px, 1vw, 18px); } /* last item: the bar's right gutter is its edge */
  .nav__item--buy .nav__link { min-height: 40px; padding: 0 18px; background: var(--paper); color: var(--ink); }
  .nav__item--buy .nav__link:hover { background: var(--white); color: var(--ink); }
  .nav__item--buy .nav__link[aria-current]::after { display: none; }

  @media (max-width: 1360px) {
    .nav__link { padding: 0 6px; font-size: 11.5px; letter-spacing: 0.07em; }
    .has-sub .nav__link { padding-right: 2px; }
    .site-header__bar { gap: 14px; }
    .nav__item--buy { margin: 0 0 0 8px; }
    .nav__item--buy .nav__link { padding: 0 14px; }
  }

  /* Below the width the nav needs, it becomes a disclosure menu (nav.js toggles .is-open). The dropdowns turn into
     nested lists that are always visible inside the panel. Without JS the menu stays closed and the footer sitemap
     is the way around the site. */
  @media (max-width: 1279px) {
    .site-header__bar { gap: 12px; }
    .brand { --W: clamp(190px, 58vw, 250px); }
    .menu-btn {
      display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 0 14px;
      background: none; border: 1px solid var(--blue-pale); color: var(--white); cursor: pointer;
      font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    }
    .menu-btn:hover { background: #2c3f49; }
    .menu-btn__t { text-box: trim-both cap alphabetic; line-height: 1; }
    .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 16px; height: 2px; background: currentColor; }
    .menu-btn__bars { position: relative; }
    .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
    .menu-btn__bars::before { top: -5px; }
    .menu-btn__bars::after { top: 5px; }
    .menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
    .menu-btn[aria-expanded="true"] .menu-btn__bars::before { top: 0; transform: rotate(45deg); }
    .menu-btn[aria-expanded="true"] .menu-btn__bars::after { top: 0; transform: rotate(-45deg); }

    .nav {
      display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; max-height: calc(100svh - var(--hdr));
      overflow-y: auto; overscroll-behavior: contain; background: var(--night); border-top: 1px solid rgba(159,180,188,.3);
      padding: 8px var(--gutter) 24px; box-shadow: 0 18px 28px -16px rgba(0,0,0,.5);
    }
    .nav.is-open { display: block; }
    .nav__list { display: block; }
    .nav__item { display: block; border-bottom: 1px solid rgba(159,180,188,.2); }
    .nav__link { display: flex; min-height: 48px; padding: 6px 0; font-size: 13px; line-height: 1.6; letter-spacing: 0.1em; }
    .has-sub .nav__link { padding-right: 0; }
    .nav__link[aria-current]::after { display: none; }
    .nav__link[aria-current], .nav__sub a[aria-current] {
      color: var(--white); text-decoration: underline; text-decoration-color: var(--blue-pale); text-decoration-thickness: 2px; text-underline-offset: 0.36em;
    }
    .nav__item--buy .nav__link[aria-current] { color: var(--ink); text-decoration: none; }
    .nav__toggle { display: none; }
    .nav__sub, .nav__sub[hidden] {
      display: block; position: static; min-width: 0; padding: 0 0 10px 16px; border-top: 0; background: none;
    }
    .nav__sub a { padding: 6px 0; font-size: 12px; line-height: 1.6; min-height: 40px; display: flex; align-items: center; }
    .nav__sub a:hover { background: none; color: var(--white); text-decoration: underline; }
    .nav__item--buy { margin: 16px 0 0; border-bottom: 0; }
    .nav__item--buy .nav__link { justify-content: center; min-height: 48px; padding: 0 18px; }
  }
  @media (max-height: 34rem) { .site-header { position: static; } }

  /* ---------- Footer ---------- */
  .site-footer {
    display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 40px;
    padding: clamp(56px, 5vw, 88px) var(--gutter); background: var(--night); color: var(--blue-mist);
  }
  .site-footer__brand { grid-column: 1 / 4; }
  .site-footer__map { grid-column: 4 / 8; }
  .site-footer__contact { grid-column: 8 / 11; }
  .site-footer__pub { grid-column: 11 / 13; }
  .site-footer__map ul { list-style: none; columns: 2; column-gap: 32px; }
  .site-footer__map > ul > li { break-inside: avoid; margin-bottom: 14px; }
  .site-footer a { color: var(--blue-pale); }
  .site-footer__map a { display: inline-block; padding: 3px 0; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
  .site-footer__map li li a { font-weight: 400; color: var(--blue-mist); }
  .site-footer__map li ul { columns: 1; margin-left: 14px; }
  .site-footer a:hover { color: var(--white); text-decoration: underline; }
  .foot-h { margin-bottom: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sepia-200); }
  .site-footer p + .foot-h { margin-top: 28px; }
  .site-footer__contact p, .site-footer__pub p { font-size: 16px; line-height: 1.55; }
  .site-footer__pub .button { margin-top: 28px; }
  .site-footer .button--paper, .site-footer .button--paper:hover { color: var(--ink); text-decoration: none; }
  .site-footer a { text-underline-offset: 0.3em; }

  @media (max-width: 1099px) {
    .site-footer__brand { grid-column: 1 / -1; }
    .site-footer__map { grid-column: 1 / 8; }
    .site-footer__contact { grid-column: 8 / -1; }
    .site-footer__pub { grid-column: 1 / -1; }
  }
  /* Phones: one tight column. The sitemap packs into two columns, the press links run on one line, and Buy spans the width. */
  @media (max-width: 719px) {
    .site-footer { display: block; padding-top: 44px; padding-bottom: 40px; }
    .site-footer > * + * { margin-top: 32px; }
    .site-footer__map > ul > li { margin-bottom: 8px; }
    .site-footer__map a { padding: 5px 0; }
    .site-footer__map li ul { margin-left: 12px; }
    .site-footer__contact, .site-footer__pub { padding-top: 24px; border-top: 1px solid rgba(159,180,188,.22); }
    .site-footer__pub { margin-top: 24px; }
    .site-footer p + .foot-h { margin-top: 18px; }
    .site-footer__contact p:last-child br { display: none; }
    .site-footer__contact p:last-child a ~ a { margin-left: 18px; }
    .site-footer__pub .button { display: flex; width: 100%; margin-top: 20px; }
  }
  @media (max-width: 479px) { .site-footer__map ul { column-gap: 16px; } }

  /* ---------- Interior page grid: main (cols 1-9) + rail on the right (cols 10-12) ---------- */
  .page {
    display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start;
    padding: clamp(40px, 3.4vw, 60px) var(--gutter) clamp(72px, 7vw, 128px);
  }
  .rail { grid-column: 10 / -1; grid-row: 1; position: sticky; top: calc(var(--hdr) + 24px); padding-left: clamp(0px, 1vw, 16px); }
  /* trimmed to cap height: its top meets the first section heading's cap top (that h2 is trimmed too) */
  .rail__h { margin: 0 0 18px; text-box: trim-both cap alphabetic; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sepia); }
  .rail__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-soft); }
  .rail__list li { position: relative; }
  .rail__list a {
    display: block; padding: 8px 0 8px 16px; font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; line-height: 1.75;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); text-decoration: none;
  }
  /* line-height 1.75 + a 3px offset keeps the underline clear of the next line when a label wraps */
  .rail__list a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .rail__list a[aria-current="true"] { color: var(--ink); }
  .rail__list a[aria-current="true"]::before { content: ""; position: absolute; left: -1.5px; top: 6px; bottom: 6px; width: 2px; background: var(--ink); }
  .rail__book { margin-top: 36px; }
  .rail__nav + .rail__book { margin-top: 36px; }
  .rail__book:first-child { margin-top: 0; }
  .rail__cover { display: block; width: 100%; box-shadow: 0 1px 0 rgba(31,43,49,.4), 0 18px 28px -18px rgba(31,43,49,.6); background: var(--night); }
  .rail__cover img { width: 100%; }
  .rail__book .button { margin-top: 22px; width: 100%; }
  /* with the full-width cover the rail is about 780px tall; on short windows let it scroll with the page so Buy the Book is never stuck off-screen */
  @media (max-height: 860px) { .rail { position: static; } }

  .body { grid-column: 1 / 10; grid-row: 1; min-width: 0; }

  /* Below 900px: title panel, then "On this page" as a wrapped index of hairline tabs, the content, and the book as a
     slim strip (thumbnail + Buy) at the end instead of a full-size cover. */
  @media (max-width: 899px) {
    .page { display: flex; flex-direction: column; align-items: stretch; padding: 20px var(--gutter) 56px; }
    .rail { display: contents; }
    .rail__nav { order: 1; margin-bottom: 28px; }
    .body { order: 2; width: 100%; }
    .rail .rail__book { /* .rail .rail__book beats .rail__book:first-child (pages with no "On this page") */
      order: 3; display: block; width: 100%; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-soft);
    }
    .rail__cover { width: 100%; box-shadow: none; } /* flat on phones, like the home cover */
    .rail .rail__book:not(:has(.button)) { display: none; } /* /buy/: its own content sells the book; no repeat cover there */
    .rail__book .button { display: flex; width: 100%; margin-top: 16px; }
    .rail__h { margin-bottom: 10px; }
    .rail__list { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
    .rail__list a {
      display: flex; align-items: center; min-height: 36px; padding: 0 11px; border: 1px solid var(--line-soft);
      font-size: 11.5px; line-height: 1.25; letter-spacing: 0.08em; background: var(--paper);
    }
    .rail__list a[aria-current="true"] { border-color: var(--ink); }
    .rail__list a[aria-current="true"]::before { display: none; }
  }
}

/* ================================================================ components */
@layer components {
  /* ---------- Buttons and links ---------- */
  .button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px;
    font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--white); background: var(--blue); text-decoration: none; border: 2px solid var(--blue); text-align: center;
  }
  .button:hover { background: var(--night); border-color: var(--night); }
  .button--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  /* secondary: the same button drawn in line, for "continue to the next page" links */
  .button--line { gap: 12px; background: none; color: var(--blue); border-color: var(--blue); }
  .button--line:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
  .button .arrow { flex: none; transition: transform .2s; }
  .button:hover .arrow { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .button .arrow { transition: none; } }
  .next-page { margin: clamp(48px, 4.4vw, 72px) 0 0; }
  @media (max-width: 899px) { .next-page .button { display: flex; width: 100%; } }
  .button--paper:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

  .text-link {
    display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-sans); font-weight: 500;
    font-size: 12px; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.42em;
  }
  .text-link:hover { color: var(--ink); }
  .on-dark .text-link, .on-dark a { color: var(--blue-pale); }
  .on-dark .text-link:hover, .on-dark a:hover { color: var(--white); }
  .on-dark a.button { color: var(--white); text-decoration: none; }
  .on-dark a.button--paper, .on-dark a.button--paper:hover { color: var(--ink); }

  .label {
    margin-bottom: 28px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.2;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--sepia);
  }
  .label a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; border-bottom: 2px solid currentColor; }
  .label a:hover { color: var(--ink); }
  .on-dark .label { color: var(--blue-pale); }
  .on-dark .label a:hover { color: var(--white); }

  /* ---------- Headings, meta, action links (interior) ---------- */
  .block { padding-top: clamp(56px, 5vw, 88px); border-top: 1px solid var(--line-soft); }
  .block--first { padding-top: 0; border-top: 0; }
  .h2 {
    margin: 0 0 clamp(22px, 2vw, 32px); font-family: var(--font-serif); font-weight: 420; font-variation-settings: "opsz" 40;
    font-size: clamp(32px, 2.8vw, 42px); line-height: 1.1; letter-spacing: -0.012em; color: var(--ink); text-wrap: balance;
  }
  .h2--sm { font-size: clamp(22px, 1.8vw, 27px); line-height: 1.18; margin-bottom: 20px; }
  /* the first section opens close under the title panel: trimmed to cap height so the gap is true ink-to-edge */
  .block--first > .h2 { text-box: trim-both cap alphabetic; margin-bottom: clamp(24px, 2.2vw, 34px); }
  .meta { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sepia); font-variant-numeric: tabular-nums; }
  .act {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; line-height: 1.6;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.34em;
  }
  .act:hover { color: var(--ink); text-decoration-thickness: 2px; }
  .ext { flex: none; }
  .prose p + p { margin-top: 1em; }
  .prose { text-wrap: pretty; }

  /* ---------- Press contacts ---------- */
  .contacts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .contact { padding-top: 18px; border-top: 1px solid var(--line); }
  .contact p { margin: 0; }
  .contact__role { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sepia); }
  .contact .contact__name { margin-top: 10px; font-size: clamp(25px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: "opsz" 36; }
  .contact .contact__lines { margin-top: 10px; font-size: 17px; line-height: 1.5; color: var(--ink); }
  .contact .contact__via { margin-top: 16px; font-size: 19px; line-height: 1.7; font-variant-numeric: tabular-nums; }
  .contact__via a { color: var(--blue); }
  .contact__via a:hover { color: var(--ink); }

  /* ---------- Downloads shelf ----------
     One grid for all groups: heading row, then one row per document, shared across the columns (subgrid), so every
     rule, title and download line sits at the same height whatever wraps. */
  .resources { margin-top: clamp(56px, 5vw, 88px); }
  .resources > .block { margin-top: clamp(56px, 5vw, 88px); }
  .shelf { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto repeat(2, auto); column-gap: 24px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
  .shelf__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .shelf__col .h2--sm { align-self: end; }
  .docs { display: contents; list-style: none; }
  .docs li { display: grid; grid-template-rows: 1fr auto auto; padding: 16px 0 14px; border-top: 1px solid var(--line-soft); }
  .docs li:last-child { border-bottom: 1px solid var(--line-soft); }
  .doc__t { grid-column: 1 / -1; align-self: start; margin-bottom: 6px; font-size: 19px; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
  .docs .act { justify-self: start; min-height: 40px; }
  .docs .meta { margin-top: -6px; }

  /* ---------- Video rows ---------- */
  .films { display: grid; grid-template-columns: clamp(180px, 14vw, 260px) minmax(0, 1fr) max-content max-content; column-gap: 24px; list-style: none; margin: 0; padding: 0; }
  .film { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: 14px 0; border-top: 1px solid var(--line-soft); }
  .film:last-child { border-bottom: 1px solid var(--line-soft); }
  /* modern interviews keep their own tone (only the archive is printed sepia); the still is a link to the stream */
  .film__media { position: relative; display: block; overflow: hidden; background: var(--night); }
  .film__still { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .film__media::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .1; transition: opacity .25s; pointer-events: none; }
  .film__media:hover::after, .film:has(.act:hover) .film__media::after { opacity: 0; }
  .film__t { margin: 0; font-family: var(--font-serif); font-weight: 420; font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -0.008em; font-variation-settings: "opsz" 30; text-wrap: balance; }
  /* the size sits on its own line under the link but hangs out of flow, so both links stay level with the title */
  .film__act { position: relative; white-space: nowrap; }
  .film__act .meta { position: absolute; left: 0; top: calc(100% - 8px); }
  .broadcast { margin: 24px 0 0; font-size: 19px; }

  /* ---------- Photographs: justified rows, edge to edge ---------- */
  .gallery { --row: clamp(180px, 14vw, 270px); display: flex; flex-wrap: wrap; gap: 28px 8px; list-style: none; margin: 0; padding: 0; }
  .gallery::after { content: ""; flex: 100 1 0; } /* keeps the last row at row height instead of stretching it */
  .ph { flex: var(--ar) 1 calc(var(--ar) * var(--row)); min-width: 0; }
  .ph a { display: block; color: var(--ink); text-decoration: none; }
  .ph__img { position: relative; display: block; overflow: hidden; background: var(--night); }
  .ph__img img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
  .ph__img::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .16; transition: opacity .25s; pointer-events: none; }
  .ph a:hover .ph__img::after, .ph a:focus-visible .ph__img::after { opacity: 0; }
  .ph a:focus-visible { outline-offset: 4px; }
  .cap { display: block; margin-top: 10px; font-size: 15px; line-height: 1.35; color: var(--ink); overflow-wrap: break-word; hyphens: auto; text-wrap: pretty; }
  .cap__n { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; color: var(--sepia); font-variant-numeric: tabular-nums; }
  .cap__ref { color: var(--sepia); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .ph a:hover .cap__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

  /* ---------- Media badges: one small ink-on-paper square, bottom right of a still or photograph.
     Hover/focus only; icon ink on paper is 13:1; inverts on hover. Decorative: the link text names the action. */
  .badge {
    position: absolute; right: 10px; bottom: 10px; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px;
    background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(35,31,32,.35); opacity: 0; transition: background .2s, color .2s, opacity .2s;
  }
  .film__media:hover .badge, .film:has(.act:hover) .badge, .film:has(.act:focus-visible) .badge,
  .ph a:hover .badge, .ph a:focus-visible .badge { opacity: 1; }
  .film__media:hover .badge, .film:has(.act:hover) .badge, .ph a:hover .badge, .ph a:focus-visible .badge { background: var(--ink); color: var(--paper); }
  @media (prefers-reduced-motion: reduce) { .badge { transition: none; } }

  /* ---------- Audio table ---------- */
  .audio-wrap { overflow-x: auto; }
  .audio { width: 100%; border-collapse: collapse; }
  .audio th, .audio td { text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line-soft); }
  .audio thead th {
    padding: 0 16px 12px 0; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sepia);
    border-bottom: 1px solid var(--line);
  }
  .audio tbody th { width: 34%; min-height: 56px; padding: 10px 16px 10px 0; font-weight: 420; font-size: 20px; line-height: 1.25; font-variation-settings: "opsz" 30; }
  .audio td { padding: 6px 16px 6px 0; }
  .audio td .act { display: inline-flex; min-height: 40px; white-space: nowrap; }
  .audio td .meta { display: block; margin: -6px 0 6px; white-space: nowrap; }

  /* ---------- Home: record rows + names ---------- */
  .rows { list-style: none; }
  .rows li { display: grid; grid-template-columns: 8.2em 1fr; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line-soft); line-height: 1.4; }
  .rows li:last-child { border-bottom: 1px solid var(--line-soft); }
  .rows__k { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sepia); padding-top: 3px; font-variant-numeric: tabular-nums; }
  .rows__v { font-size: 17px; }
  .rows__v em { display: block; margin-top: 3px; color: var(--ink); }
  .names { list-style: none; }
  .names li { border-top: 1px solid var(--line-soft); }
  .names li:last-child { border-bottom: 1px solid var(--line-soft); }
  .names a {
    display: flex; align-items: center; min-height: 56px; font-size: 26px; font-style: italic; letter-spacing: -0.01em;
    color: var(--ink); text-decoration: none;
  }
  .names a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

  @media (max-width: 1099px) {
    .shelf { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; }
    .shelf__col { display: block; grid-row: auto; }
    .docs { display: block; }
    .contacts { grid-template-columns: 1fr; row-gap: 28px; }
  }
  @media (max-width: 899px) {
    .films { display: block; }
    .film { grid-template-columns: clamp(112px, 30vw, 200px) minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: start; padding: 12px 0; }
    .film__media { grid-row: 1 / span 3; }
    .film__t { font-size: 19px; padding-top: 2px; }
    .film__act { grid-column: 2; white-space: normal; }
    /* the link wraps as text, its arrow riding the last word, instead of an inline-flex box that strands the icon */
    .film__act .act { display: block; min-height: 0; padding: 8px 0; font-size: 12px; letter-spacing: 0.08em; line-height: 1.7; }
    .film__act .act .ext { display: inline-block; margin-left: 6px; vertical-align: -1px; }
    .film__act .meta { position: static; display: block; margin: -6px 0 2px; }
    .gallery { --row: 120px; gap: 22px 8px; }
    .audio { min-width: 560px; }
    .rows li { grid-template-columns: 1fr; gap: 2px; }
  }
}

/* ================================================================ pages: home, interior band, page head */
@layer pages {
  /* ---------- Home hero: the photograph is the page ----------
     The photo is baked into a split-tone sepia print (bin/images.py), so no SVG/CSS filter is needed. The print is
     dodged toward paper in the top right under the right-set lockup, which carries the logo in its own colours. */
  .hero { position: relative; height: calc(100svh - var(--hdr)); min-height: 600px; background: var(--paper); }
  .hero__photo { position: absolute; inset: 0; overflow: hidden; background: var(--paper); }
  .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
  .hero__photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, rgba(234,232,220,.95) 0, rgba(234,232,220,.93) 26%, rgba(234,232,220,.55) 34%, rgba(234,232,220,0) 46%);
    -webkit-mask-image: linear-gradient(to left, #000 0, #000 66%, transparent 92%);
    mask-image: linear-gradient(to left, #000 0, #000 66%, transparent 92%);
  }
  .hero__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(38,30,24,.55) 0, rgba(38,30,24,0) 16%); }
  /* one-pixel frame, 14px in, after the cover's hairline border; slate blue so it holds on both the paper fade and the print */
  .hero::after { content: ""; position: absolute; inset: 14px; z-index: 3; border: 1px solid #728d94; pointer-events: none; }

  .hero__title {
    /* --W is the wordmark's ink width; every size and gap in the lockup is a fraction of it, taken from the
       old site's logo.png (602x93) and subhead.png (324x49) with the wordmark = 600 units */
    --W: clamp(560px, 48vw, 1000px);
    position: absolute; z-index: 4; top: calc(14px + var(--gutter) * 0.55); right: calc(14px + var(--gutter) * 0.9);
    display: inline-flex; flex-direction: column; align-items: flex-end; text-align: right; color: var(--ink);
  }
  .wordmark { display: flex; flex-direction: column; align-items: flex-end; font-weight: 400; }
  .wordmark__wm, .wordmark__sub, .hero__by { text-box: trim-both cap alphabetic; }
  .wordmark__wm {
    /* Source Serif 4 at weight 430, opsz 24 sets "We were not orphans" at 9.183em wide, so this is exactly --W */
    font-family: var(--font-serif); font-size: calc(var(--W) / 9.183); line-height: 1;
    letter-spacing: -0.01em; font-weight: 430; font-variation-settings: "opsz" 24; white-space: nowrap;
  }
  .wordmark__sub {
    margin-top: calc(var(--W) * 0.0483); margin-right: -0.03em; font-family: var(--font-sans); font-weight: 520;
    font-size: max(24px, calc(var(--W) * 0.042)); /* never under 24px: large text, so the logo blue needs 3:1 */
    line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--logo-blue); white-space: nowrap;
  }
  .hero__by { margin-top: calc(var(--W) * 0.0667); font-size: calc(var(--W) * 0.0376); line-height: 1.242; font-weight: 400; font-variation-settings: "opsz" 20; color: var(--ink); }
  .hero__by span { display: block; white-space: nowrap; }
  .hero__caption {
    position: absolute; z-index: 4; left: 14px; bottom: 14px; margin: 0; padding: 9px 16px 8px 18px; background: var(--paper);
    font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  }

  /* ---------- Home: foreword band ---------- */
  .foreword { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--gutter) clamp(64px, 6vw, 110px); }
  .foreword__text { grid-column: 1 / 8; padding-top: clamp(56px, 5.4vw, 96px); }
  .pull blockquote p {
    font-style: italic; font-weight: 360; font-size: clamp(30px, 3.2vw, 56px); line-height: 1.14; letter-spacing: -0.012em;
    font-variation-settings: "opsz" 48; text-wrap: balance; color: var(--ink);
  }
  .pull figcaption { margin-top: 22px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sepia); }
  .lede { margin-top: clamp(32px, 3vw, 52px); font-size: clamp(19px, 1.45vw, 23px); line-height: 1.55; text-wrap: pretty; }
  .foreword__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-top: 28px; }
  .credits { font-family: var(--font-sans); font-size: 12px; line-height: 1.9; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sepia); text-align: right; }
  .credits a { color: var(--blue); }
  .foreword__book { grid-column: 9 / 13; position: relative; z-index: 5; margin-top: clamp(-70px, -4.4vw, -44px); }
  .cover { display: block; transform: rotate(2.4deg); transform-origin: 50% 100%; box-shadow: 0 1px 0 rgba(31,43,49,.4), 0 28px 44px -26px rgba(31,43,49,.65); background: var(--night); }
  .cover img { width: 100%; }
  .foreword__book .button { margin-top: 36px; width: 100%; }
  .specs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 0; padding: 0; list-style: none; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sepia); }

  /* ---------- Home: praise ---------- */
  .praise { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: clamp(64px, 6vw, 112px) var(--gutter); background: var(--night); color: var(--paper); }
  .praise .label { grid-column: 1 / -1; }
  .praise__lead { grid-column: 1 / 8; padding-right: clamp(0px, 3vw, 56px); }
  .praise__lead blockquote p {
    font-style: italic; font-weight: 340; font-size: clamp(34px, 3.9vw, 68px); line-height: 1.1; letter-spacing: -0.015em;
    font-variation-settings: "opsz" 60; text-wrap: balance;
  }
  .praise__lead figcaption, .praise__rail figcaption {
    margin-top: 20px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.6; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-pale);
  }
  .praise__rail { grid-column: 9 / 13; border-left: 1px solid rgba(159,180,188,.4); padding-left: 24px; }
  .praise__rail figure + figure { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(159,180,188,.3); }
  .praise__rail blockquote p { font-size: clamp(19px, 1.5vw, 24px); line-height: 1.4; text-wrap: pretty; }
  .praise__rail figcaption { margin-top: 14px; }

  /* ---------- Home: author + story ---------- */
  .people { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; padding: clamp(64px, 6vw, 112px) var(--gutter); }
  .portrait { grid-column: 1 / 4; }
  .portrait img { width: 100%; height: auto; } /* the source is cropped (bin/images.json) so headroom = the space at her right */
  .people__author { grid-column: 4 / 9; padding-right: clamp(0px, 2.4vw, 48px); }
  .people__story { grid-column: 9 / 13; border-left: 1px solid var(--line-soft); padding-left: 24px; }
  .kicker { margin-bottom: 22px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
  .kicker span { color: var(--sepia); margin-left: 10px; }
  .people__big { font-size: clamp(22px, 2.1vw, 34px); line-height: 1.32; letter-spacing: -0.005em; text-wrap: pretty; font-variation-settings: "opsz" 36; }
  .people__small { font-size: 18px; line-height: 1.6; text-wrap: pretty; }
  .people__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 18px; }

  /* ---------- Home: media strip (edge to edge; blue-gray tone baked into the images) ---------- */
  .strip-wrap { background: var(--paper); }
  .label--bar { padding: 0 var(--gutter); margin-bottom: 18px; }
  .strip { display: flex; gap: 2px; height: clamp(260px, 25vw, 400px); background: var(--paper); }
  .strip figure { position: relative; min-width: 0; overflow: hidden; background: var(--night); }
  .strip__a { flex: 1.81 1 0; } .strip__b { flex: 1.43 1 0; } .strip__c { flex: 0.8 1 0; } .strip__d { flex: 1.25 1 0; }
  .strip img { width: 100%; height: 100%; object-fit: cover; }
  .strip a { display: block; height: 100%; }
  .strip a:focus-visible { outline-offset: -4px; }
  .strip img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  .strip a:hover img, .strip a:focus-visible img { transform: scale(1.03); }
  .strip a:hover .badge, .strip a:focus-visible .badge { opacity: 1; background: var(--ink); color: var(--paper); }
  @media (prefers-reduced-motion: reduce) { .strip img { transition: none; } .strip a:hover img, .strip a:focus-visible img { transform: none; } }
  .strip figcaption {
    position: absolute; z-index: 2; left: 0; bottom: 0; padding: 8px 14px 7px; background: var(--night);
    font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-mist);
  }

  /* ---------- Home: events / news / alumni ---------- */
  .record { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-top: 2px; padding: clamp(64px, 6vw, 104px) var(--gutter); background: var(--paper-50); }
  .record__col:nth-child(1) { grid-column: 1 / 5; }
  .record__col:nth-child(2) { grid-column: 5 / 10; }
  .record__col:nth-child(3) { grid-column: 10 / 13; }
  .record__col + .record__col { border-left: 1px solid var(--line-soft); padding-left: 24px; }
  .record__lead { font-size: 17px; line-height: 1.5; margin-bottom: 18px; }

  /* ---------- Interior band: the home hero's little sibling (photograph, frame, caption plate; no title on the photo) ---------- */
  .ihero { position: relative; height: clamp(300px, 27vw, 480px); background: var(--paper); }
  .ihero::after { content: ""; position: absolute; inset: 14px; z-index: 3; border: 1px solid #728d94; pointer-events: none; }
  .ihero .hero__photo::before { display: none; }
  .ihero .hero__caption { left: auto; right: 14px; }
  /* crop-aware focal points (no inline styles allowed): pick the one that keeps the subject in the band. On a 1440-1920 wide
     screen the band shows ar(photo)/3.85 of the photo's height; pos-p puts the window's top at p% of the hidden height. */
  .pos-0 img { object-position: 50% 0%; } .pos-5 img { object-position: 50% 5%; } .pos-10 img { object-position: 50% 10%; } .pos-15 img { object-position: 50% 15%; } .pos-20 img { object-position: 50% 20%; }
  .pos-25 img { object-position: 50% 25%; } .pos-30 img { object-position: 50% 30%; } .pos-35 img { object-position: 50% 35%; } .pos-40 img { object-position: 50% 40%; } .pos-45 img { object-position: 50% 45%; }
  .pos-52 img { object-position: 50% 52%; } .pos-55 img { object-position: 50% 55%; } .pos-60 img { object-position: 50% 60%; } .pos-65 img { object-position: 50% 65%; } .pos-70 img { object-position: 50% 70%; }
  .pos-75 img { object-position: 50% 75%; } .pos-80 img { object-position: 50% 80%; } .pos-85 img { object-position: 50% 85%; } .pos-90 img { object-position: 50% 90%; } .pos-95 img { object-position: 50% 95%; } .pos-100 img { object-position: 50% 100%; }

  /* ---------- Interior title stripe (workshop variant I): full-bleed --paper-deep under the band; the breadcrumb and h1 start
     on the logo's left edge (--gutter), the same line as the content column below ---------- */
  .stripe {
    /* the breadcrumb's share of the stripe: one 24px crumb row + its gap to the h1 */
    --crumb-h: calc(24px + clamp(18px, 1.6vw, 26px));
    padding: clamp(26px, 2.4vw, 40px) var(--gutter) clamp(30px, 2.8vw, 46px); background: var(--paper-deep);
  }
  /* top-level pages (no breadcrumb): the same stripe height, the crumb row's space split above and below the title */
  .stripe:not(:has(.crumbs)) {
    padding-top: calc(clamp(26px, 2.4vw, 40px) + var(--crumb-h) / 2);
    padding-bottom: calc(clamp(30px, 2.8vw, 46px) + var(--crumb-h) / 2);
  }
  .stripe__h1 {
    margin: 0; font-family: var(--font-serif); font-weight: 430; font-variation-settings: "opsz" 24; color: var(--ink);
    font-size: clamp(64px, 5.6vw, 116px); line-height: 1; letter-spacing: -0.015em; text-box: trim-both cap alphabetic; text-wrap: balance;
  }
  /* breadcrumb (child pages): ancestors only, Jost caps in the AA blue with a faint underline, each followed by a hairline
     sepia slash; the last slash points at the h1, so the title reads as the final crumb instead of being repeated */
  .crumbs { margin-bottom: clamp(18px, 1.6vw, 26px); }
  .crumbs__list { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin: 0; padding: 0; list-style: none; }
  .crumbs__list li { display: inline-flex; align-items: center; }
  .crumbs__list li::after { content: ""; flex: none; width: 1px; height: 15px; margin: 0 14px; background: var(--sepia); transform: rotate(22deg); }
  .crumbs a {
    display: inline-flex; align-items: center; min-height: 24px;
    font-family: var(--font-sans); font-weight: 500; font-size: 12px; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--blue); text-decoration: underline; text-decoration-color: rgb(63 95 110 / .35); text-decoration-thickness: 1px; text-underline-offset: 0.34em;
  }
  .crumbs a:hover { color: var(--ink); text-decoration-color: currentColor; }

  /* ---------- Responsive: home ---------- */
  @media (max-width: 1099px) {
    .praise__lead, .people__author { grid-column: 1 / -1; }
    /* the book keeps its place beside the text (and its overlap into the hero) down to 900px, one column narrower */
    .foreword__text { grid-column: 1 / 9; padding-top: 56px; }
    .foreword__book { grid-column: 9 / 13; }
    .foreword__foot { flex-direction: column; gap: 12px; }
    .credits { text-align: left; }
    .praise__rail { grid-column: 1 / -1; border-left: 0; padding-left: 0; margin-top: 48px; border-top: 1px solid rgba(159,180,188,.4); padding-top: 32px; }
    .praise__lead { padding-right: 0; }
    .portrait { grid-column: 1 / 5; }
    .people__author { grid-column: 5 / -1; padding-right: 0; }
    .people__story { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--line-soft); padding-top: 32px; margin-top: 48px; }
    .record__col:nth-child(n) { grid-column: 1 / -1; }
    .record__col + .record__col { border-left: 0; padding-left: 0; margin-top: 56px; }
  }
  @media (max-width: 899px) {
    /* the lockup leaves the photo and sits under it on paper: ink and the AA blue need no photo-contrast measurement */
    .hero { height: auto; min-height: 0; display: flex; flex-direction: column; }
    .hero::after { display: none; }
    .hero > .hero__photo { position: relative; inset: auto; height: auto; aspect-ratio: 5 / 4; }
    .hero > .hero__photo::before { inset: 14px; z-index: 3; background: none; -webkit-mask-image: none; mask-image: none; border: 1px solid #728d94; }
    .hero > .hero__photo img { position: absolute; inset: 0; }
    .hero__title {
      --W: min(calc(100vw - 2 * var(--gutter)), 460px);
      position: static; align-self: stretch; padding: 32px var(--gutter) 36px;
    }
    .wordmark__sub { font-size: calc(var(--W) * 0.042); color: var(--blue); } /* small text here, so the AA blue */
    .hero__by span { white-space: normal; }
    .strip { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
    .strip figure { aspect-ratio: 4 / 3; }
    /* below 900 the book becomes one compact unit under the text: the tilted cover beside Buy and the specs */
    .foreword { padding-bottom: 56px; }
    .foreword__text { grid-column: 1 / -1; }
    .foreword__book { grid-column: 1 / -1; margin-top: 40px; }
    .foreword__book .cover { transform: none; box-shadow: none; }
    .foreword__book .button { display: flex; width: 100%; margin-top: 16px; }
    .specs { margin-top: 14px; gap: 4px 16px; }
    .portrait { grid-column: 1 / -1; }
    .people__author { grid-column: 1 / -1; margin-top: 32px; }
    .ihero { height: clamp(200px, 52vw, 300px); }
  }
  @media (max-width: 479px) {
    .foreword__text { padding-top: 40px; }
    .names a { font-size: 24px; }
  }
  @media (max-width: 899px) {
    .stripe { --crumb-h: 38px; padding: 22px var(--gutter) 24px; }
    .stripe:not(:has(.crumbs)) { padding-top: calc(22px + var(--crumb-h) / 2); padding-bottom: calc(24px + var(--crumb-h) / 2); }
    .stripe__h1 { font-size: clamp(42px, 12.5vw, 72px); }
    .crumbs { margin-bottom: 14px; }
    .crumbs__list li::after { height: 13px; margin: 0 10px; }
    .crumbs a { font-size: 11px; letter-spacing: 0.1em; }
  }
}

/* photo aspect ratios for the justified gallery (width / height of each photograph) */
@layer pages {
  .ph-1 { --ar: 1.8109; } .ph-2 { --ar: 1.8711; } .ph-3 { --ar: 1.2346; } .ph-4 { --ar: 1.2295; } .ph-5 { --ar: 1.2483; }
  .ph-6 { --ar: 1.0830; } .ph-7 { --ar: 1.6698; } .ph-8 { --ar: 0.5867; } .ph-9 { --ar: 1.7751; } .ph-10 { --ar: 1.3761; }
  .ph-11 { --ar: 1.4263; } .ph-12 { --ar: 1.2500; } .ph-13 { --ar: 0.8867; } .ph-14 { --ar: 0.6533; } .ph-15 { --ar: 0.6789; }
  .ph-16 { --ar: 1.5625; } .ph-17 { --ar: 1.4950; } .ph-18 { --ar: 0.7089; } .ph-19 { --ar: 1.4516; } .ph-20 { --ar: 1.2448; }
  .ph-21 { --ar: 1.2245; } .ph-22 { --ar: 0.6644; } .ph-23 { --ar: 0.6822; } .ph-24 { --ar: 1.4706; } .ph-25 { --ar: 1.0078; }
  .ph-26 { --ar: 1.8947; } .ph-27 { --ar: 1.4851; } .ph-28 { --ar: 1.5411; } .ph-29 { --ar: 0.5578; } .ph-30 { --ar: 0.7278; }
  .ph-31 { --ar: 0.6744; } .ph-32 { --ar: 0.6056; } .ph-33 { --ar: 1.4151; }
}

/* ================================================================ ruled rows (components/ledger.php), shared by News and Events
   date / optional second column / main. Hairline rules, Jost caps dates. Page files add only their own variations. */
@layer components {
  .ledger { list-style: none; margin: 0; padding: 0; }
  .ledger__row {
    display: grid; grid-template-columns: 9em minmax(0, 1fr); column-gap: clamp(20px, 2vw, 32px); align-items: baseline;
    padding: 17px 0 16px; border-top: 1px solid var(--line-soft); line-height: 1.4;
  }
  .ledger__row:last-child { border-bottom: 1px solid var(--line-soft); }
  .ledger__row--3 { grid-template-columns: 9em minmax(0, 15em) minmax(0, 1fr); }
  .ledger__date {
    font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5;
    color: var(--sepia); font-variant-numeric: tabular-nums;
  }
  .ledger__col { font-size: 17px; color: var(--ink); text-wrap: pretty; }
  .ledger__main { min-width: 0; }
  .ledger__main p { margin: 0; }
  .ledger__link { display: inline-block; padding: 2px 0; font-size: 19px; color: var(--blue); text-wrap: pretty; overflow-wrap: anywhere; }
  .ledger__link:hover { color: var(--ink); }
  .ledger__meta { margin-left: 10px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sepia); white-space: nowrap; font-variant-numeric: tabular-nums; }
  @media (max-width: 799px) {
    .ledger__row, .ledger__row--3 { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 16px 0 15px; }
    .ledger__col { font-size: 16px; color: var(--sepia); }
  }
}
@layer components {
  @media (max-width: 899px) {
    .film__act .act { justify-self: start; }
    .block { padding-top: 44px; }
    .resources, .resources > .block { margin-top: 44px; }
    .h2 { margin-bottom: 18px; font-size: clamp(28px, 8vw, 34px); }
    .shelf { padding-top: 20px; row-gap: 28px; }
    .docs li { padding: 12px 0 10px; }
    .doc__t { font-size: 18px; margin-bottom: 2px; }
    .broadcast { font-size: 17px; }
  }
  /* Audio as stacked cards: the interview name, then its three files side by side (label / format link / size) */
  .audio__k { display: none; }
  @media (max-width: 699px) {
    .audio-wrap { overflow: visible; }
    .audio, .audio tbody, .audio tr, .audio th, .audio td { display: block; }
    .audio { min-width: 0; }
    .audio thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .audio tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; padding: 14px 0 10px; border-top: 1px solid var(--line-soft); }
    .audio tbody tr:last-child { border-bottom: 1px solid var(--line-soft); }
    .audio th, .audio td { border-bottom: 0; }
    .audio tbody th { grid-column: 1 / -1; width: auto; min-height: 0; padding: 0 0 6px; font-size: 19px; }
    .audio td { padding: 0; }
    .audio__k { display: block; padding-top: 4px; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sepia); white-space: nowrap; }
    .audio__dl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .audio td .act { min-height: 36px; font-size: 13px; }
    .audio td .meta { margin: -6px 0 0; font-size: 11px; letter-spacing: 0.08em; }
  }
  @media (max-width: 399px) {
    .lb .lb__bar { padding-left: 16px; }
    .lb .lb__tools { gap: 8px; }
    .lb .lb__dl { padding: 0 12px; letter-spacing: 0.08em; }
  }
}

/* ================================================================ photo lightbox (js/lightbox.js: Photos, Media) */
@layer components {
  html.lb-open { overflow: hidden; }
  .lb {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: var(--night); color: var(--white); overflow: hidden;
  }
  .lb::backdrop { background: var(--night); }
  .lb[open] { display: grid; grid-template: "bar bar bar" auto "prev fig next" minmax(0, 1fr) / 80px minmax(0, 1fr) 80px; }
  .lb :focus-visible { outline-color: var(--blue-pale); }
  .lb__bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0 var(--gutter); }
  .lb__count { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-mist); font-variant-numeric: tabular-nums; }
  .lb__btn {
    display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: none; color: var(--white);
    border: 1px solid rgba(159, 180, 188, 0.55); cursor: pointer;
  }
  .lb__btn:hover { background: #2c3f49; border-color: var(--blue-pale); }
  .lb__prev { grid-area: prev; justify-self: center; align-self: center; }
  .lb__next { grid-area: next; justify-self: center; align-self: center; }
  .lb__fig { grid-area: fig; margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding-bottom: 20px; }
  .lb__img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; background: #162026; }
  .lb__cap { max-width: 62ch; margin: 0; padding: 0 12px; font-size: 16px; line-height: 1.45; text-align: center; color: var(--blue-mist); text-wrap: pretty; }
  @media (max-width: 699px) {
    .lb[open] { grid-template: "bar bar" auto "fig fig" minmax(0, 1fr) "prev next" auto / 1fr 1fr; }
    .lb__prev, .lb__next { align-self: end; margin: 0 0 16px; }
    .lb__prev { justify-self: start; margin-left: 16px; }
    .lb__next { justify-self: end; margin-right: 16px; }
    .lb__img { max-height: calc(100dvh - 230px); }
  }
  .lb__tools { display: flex; align-items: center; gap: 12px; }
  .lb__dl {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid rgba(159, 180, 188, 0.55);
    font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--white); text-decoration: none;
  }
  .lb__dl:hover { background: #2c3f49; border-color: var(--blue-pale); }
}

/* ================================================================ error pages (403, 404, 500: templates/pages/error.php)
   The page's one sentence set as a lede, then three photo links across the content column (the home strip's photos). */
@layer pages {
  .error__lede { font-size: clamp(22px, 1.75vw, 28px); line-height: 1.5; font-variation-settings: "opsz" 28; text-wrap: pretty; }
  .error__lede p { text-box: trim-start cap alphabetic; }
  .error__h {
    margin: clamp(48px, 4.4vw, 72px) 0 clamp(20px, 1.8vw, 28px); font-family: var(--font-sans); font-weight: 500; font-size: 13px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--sepia); text-box: trim-both cap alphabetic;
  }
  .error__next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; }
  .error__next a { display: block; color: var(--ink); text-decoration: none; }
  .error__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
  .error__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
  .error__t {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 14px; border-bottom: 1px solid var(--line);
    font-size: clamp(21px, 1.6vw, 25px); line-height: 1.25; font-variation-settings: "opsz" 28;
  }
  .error__t .arrow { flex: none; color: var(--blue); transition: transform .2s; }
  .error__next a:hover .error__img img, .error__next a:focus-visible .error__img img { transform: scale(1.03); }
  .error__next a:hover .error__t { color: var(--blue); border-bottom-color: var(--blue); }
  .error__next a:hover .arrow { transform: translateX(3px); }
  .error__next a:focus-visible { outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) { .error__img img, .error__t .arrow { transition: none; } .error__next a:hover .error__img img { transform: none; } }
  /* phones: compact rows, thumbnail then label, one rule between rows */
  @media (max-width: 699px) {
    .error__next { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
    .error__next a { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
    .error__t { padding: 0; border: 0; }
    .error__next a:hover .error__t { border: 0; }
  }
}

/* ================================================================ small phones (<=399px): one cohesive layer for 320-399
   Everything reflows down to 320 with no sideways scroll; below 320 the page hands over to .too-narrow. */
@layer pages {
  .too-narrow { display: none; }
  @media (max-width: 399px) {
    :root { --gutter: 16px; }
    body { font-size: 17px; }
    html { scroll-padding-top: 16px; }
    [id] { scroll-margin-top: 16px; }

    /* header: the lockup centred on its own line, Menu centred under it; it scrolls away (no 110px sticky bar on a small screen) */
    .site-header { position: relative; }
    .site-header__bar { flex-direction: column; justify-content: center; gap: 10px; height: auto; padding: 14px var(--gutter) 12px; }
    .brand { --W: min(calc(100vw - 2 * var(--gutter)), 264px); align-self: center; }
    .menu-btn { align-self: center; justify-content: center; margin-left: 0; min-width: 132px; }
    .nav { max-height: none; }

    /* photo captions: smaller plate so the long ones stay on one line */
    .hero__caption { padding: 7px 10px 6px 12px; font-size: 10px; letter-spacing: 0.1em; max-width: calc(100% - 28px); }
    .ihero { height: clamp(176px, 52vw, 200px); }

    /* interior head + index */
    .page { padding-top: 16px; }
    .stripe { padding: 18px var(--gutter) 20px; }
    .stripe:not(:has(.crumbs)) { padding-top: calc(18px + var(--crumb-h) / 2); padding-bottom: calc(20px + var(--crumb-h) / 2); }
    .stripe__h1 { font-size: clamp(38px, 12.5vw, 48px); }
    .rail__list { gap: 5px; }
    .rail__list a { padding: 0 9px; min-height: 34px; font-size: 11px; letter-spacing: 0.06em; }
    .h2 { font-size: 28px; }
    .block { padding-top: 36px; }
    .resources, .resources > .block { margin-top: 36px; }

    /* home */
    .hero__title { padding: 26px var(--gutter) 28px; }
    .pull blockquote p { font-size: 28px; }
    .lede { font-size: 18px; }
    .foreword__book { margin-top: 32px; }
    .strip figcaption { padding: 6px 10px 5px; font-size: 10px; letter-spacing: 0.1em; }
    .names a { font-size: 22px; min-height: 48px; }

    /* media components */
    .contact .contact__name { font-size: 23px; }
    .contact .contact__via { font-size: 17px; }
    .contact__via a, .ledger__link { overflow-wrap: anywhere; }
    .audio tbody tr { column-gap: 8px; }
    .audio__k { font-size: 10.5px; letter-spacing: 0.06em; }
    .gallery { --row: 104px; gap: 18px 6px; }
    .cap { font-size: 14px; }
  }

  /* below 320 the layout is not designed to hold: show a calm notice instead of a broken page */
  @media (max-width: 319.98px) {
    body > :not(.too-narrow) { display: none !important; }
    .too-narrow {
      display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 100svh; padding: 24px 14px;
      background: var(--night); color: var(--blue-mist); text-align: center;
    }
    .too-narrow__wm { margin: 0 0 6px; font-family: var(--font-serif); font-size: 24px; line-height: 1.1; color: var(--white); }
    .too-narrow__h { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-pale); }
    .too-narrow__p { margin: 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
  }
}