@charset "UTF-8";
/* ==========================================================================
   phillipkingston.com — editorial / academic-press design system
   Self-contained, no build step, no dependencies.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

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

/* --- Tokens --------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --paper: #faf8f4;
  --paper-raised: #fffdfa;
  --paper-sunk: #f3efe7;
  --ink: #17150f;
  --ink-2: #423d33;
  --ink-3: #6e675a;
  --rule: #dfd9cd;
  --rule-strong: #c8c0af;
  --accent: #7e2c18;
  --accent-soft: #f0e4de;
  --shadow: 0 1px 2px rgb(23 21 15 / 4%), 0 8px 24px -12px rgb(23 21 15 / 12%);

  --serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, Cambria,
    "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, monospace;

  --measure: 66ch;
  --measure-wide: 34rem;
  --shell: 78rem;
  --rail: 12.5rem;
  /* The site bar's occupied height: min-height plus its bottom rule. The
     rail is offset by this, so the two never overlap. */
  --sitenav-h: calc(3rem + 1px);
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --step-eyebrow: 0.6875rem;
  --step-meta: 0.75rem;
  --step-body: 1.0625rem;
  --step-h3: 1.0625rem;
  --step-lede: clamp(1.1875rem, 0.95rem + 0.85vw, 1.5rem);
  --step-h2: clamp(1.5rem, 1.05rem + 1.5vw, 2.125rem);
  --step-h1: clamp(2.625rem, 1.3rem + 5.6vw, 4.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12110f;
    --paper-raised: #1a1815;
    --paper-sunk: #0c0b0a;
    --ink: #efeae0;
    --ink-2: #c9c2b4;
    --ink-3: #9a9284;
    --rule: #2e2a24;
    --rule-strong: #433d34;
    --accent: #e0785c;
    --accent-soft: #2a1e19;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px -14px rgb(0 0 0 / 60%);
  }
}
:root[data-theme="dark"] {
  --paper: #12110f;
  --paper-raised: #1a1815;
  --paper-sunk: #0c0b0a;
  --ink: #efeae0;
  --ink-2: #c9c2b4;
  --ink-3: #9a9284;
  --rule: #2e2a24;
  --rule-strong: #433d34;
  --accent: #e0785c;
  --accent-soft: #2a1e19;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px -14px rgb(0 0 0 / 60%);
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 2.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--step-body);
  line-height: 1.72;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

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

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

/* --- Utilities ------------------------------------------------------------ */

.skip {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--step-meta);
  text-decoration: none;
  border-radius: 3px;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.progress > i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--accent);
  opacity: 0.85;
}

/* --- Site navigation ------------------------------------------------------ */
/* Before this, the home page was the only hub: /videos/ linked back to it and
   nowhere else, and no section could reach a sibling without going through the
   root. Worse on a phone, where the contents rail is static rather than sticky,
   so on a 38-screen page every control was gone after the first 2% of it.

   So: three links, on every page, that do not scroll away. It is deliberately
   the quietest bar that still reads as navigation -- the site's own mono
   eyebrow, a hairline under it, no shadow until the page moves beneath it.

   The reading-progress line is fixed above this at a higher z-index, so it
   draws along the bar's top edge rather than disappearing behind it. */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.sitenav__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  /* The gap closes as the bar narrows so six labels stay on one row for as
     long as the type allows; it is back to the full 1.5rem by 750px. */
  gap: 0.35rem clamp(0.85rem, 3.2vw, 1.5rem);
  flex-wrap: wrap;
  min-height: 3rem;
}
.sitenav a {
  display: inline-flex;
  align-items: center;
  /* 44px of target even though the type is 11px: this is the one control a
     reader reaches for on a long page, and on a phone it is reached by thumb. */
  min-height: 2.75rem;
  padding: 0 0.1rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.sitenav a:hover,
.sitenav a:focus-visible { color: var(--accent); }
.sitenav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* The page links sit in a wrapper so that a phone can fold them into a menu.
   Above 512px the wrapper is display: contents, which puts its links back in
   the bar's own flex row, so the wide bar renders exactly as it did before
   the wrapper existed. The menu button is not drawn at all up there. */
.sitenav__menu { display: contents; }
.sitenav__toggle { display: none; }

/* Six labels hold one row down to 512px and below that they cannot: on a
   390px phone the labels alone measure 377px against 351px of room inside the
   gutters, so no gap or tracking that keeps 11px type legible brings them back.
   Wrapping to a second row costs a bar that never scrolls away 95px of a phone
   screen, and dropping links left a phone reader no route to Connect.

   So the bar keeps one 49px row and holds two things: a Menu button and
   Connect, which is the link a visitor most often came for and stays in reach
   rather than behind a tap. The other five links open beneath the bar as a
   panel.

   The panel is a native popover, so it opens, closes on Escape or a tap
   outside it, and reports its expanded state to a screen reader with no
   script at all. A browser without popovers never matches the @supports test
   and gets the plain flex row, wrapping, which is a worse bar but never a
   missing one. (Widths measured in Chromium at the shipped font.) */
@media (max-width: 31.99rem) {
  @supports selector(:popover-open) {
    .sitenav__inner {
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    .sitenav__toggle {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      min-height: 2.75rem;
      margin: 0;
      padding: 0 0.1rem;
      border: 0;
      background: none;
      font-family: var(--mono);
      font-weight: 500;
      font-size: var(--step-eyebrow);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-3);
      cursor: pointer;
      transition: color 0.18s;
    }
    .sitenav__toggle:hover,
    .sitenav__toggle:focus-visible { color: var(--accent); }

    /* Three strokes that fold into a cross while the panel is open. The
       outer two travel 4px, the distance to the middle stroke, before they
       turn. */
    .sitenav__icon {
      width: 1rem;
      height: 1rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
    }
    .sitenav__icon path {
      transform-box: fill-box;
      transform-origin: center;
      transition: transform 0.18s, opacity 0.18s;
    }
    .sitenav__inner:has(.sitenav__menu:popover-open) .sitenav__toggle { color: var(--ink); }
    .sitenav__inner:has(.sitenav__menu:popover-open) .sitenav__bar-t { transform: translateY(4px) rotate(45deg); }
    .sitenav__inner:has(.sitenav__menu:popover-open) .sitenav__bar-m { opacity: 0; }
    .sitenav__inner:has(.sitenav__menu:popover-open) .sitenav__bar-b { transform: translateY(-4px) rotate(-45deg); }

    /* Closed, the popover is hidden again: the display: contents above is an
       author rule and would otherwise outrank the browser's own hiding. */
    .sitenav__menu { display: none; }
    /* Open, it sits in the top layer, pinned to the bar's lower edge. The bar
       is sticky at the top of the page, so that edge is always at
       --sitenav-h, scrolled or not. Every margin, border and inset below
       undoes one the browser gives a popover by default. */
    .sitenav__menu:popover-open {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: fixed;
      inset: var(--sitenav-h) 0 auto 0;
      width: auto;
      height: auto;
      max-height: calc(100vh - var(--sitenav-h));
      margin: 0;
      padding: 0.25rem var(--gutter) 0.75rem;
      overflow-y: auto;
      border: 0;
      border-bottom: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink);
    }
    /* A dropped panel over body text needs an edge the eye can find, and the
       hairline alone reads as one more rule in the page. A shadow rather than
       a ::backdrop, because a backdrop would dim the bar above it too and sit
       over the Menu button the reader taps to close. */
    .sitenav__menu:popover-open { box-shadow: 0 1rem 1.5rem -1rem rgb(0 0 0 / 0.3); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav__toggle,
  .sitenav__icon path { transition: none; }
}

/* --- Breadcrumbs ---------------------------------------------------------- */
/* Replaces a lone back arrow. Every level is clickable, so a page two deep no
   longer offers one step up as its only exit, and the trail says where the
   reader actually is. The current page is the last crumb and is not a link. */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6ch;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: var(--step-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumbs a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.crumbs a:hover,
.crumbs a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }
.crumbs__sep { color: var(--rule-strong); }
.crumbs [aria-current="page"] { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .sitenav a { transition: none; }
}

@media print {
  .sitenav { display: none !important; }
}

/* --- Shell ---------------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Masthead ------------------------------------------------------------- */

.masthead {
  position: relative;
  padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}

.masthead__grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 48rem) {
  .masthead__grid {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.masthead__text { max-width: 46rem; }

.masthead h1 {
  margin: 0.5rem 0 0;
  font-size: var(--step-h1);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.masthead .lede { margin-top: clamp(1rem, 2vw, 1.5rem); }

.portrait {
  order: -1;
  width: 9.75rem;
  flex: none;
}
@media (min-width: 48rem) {
  .portrait {
    order: 0;
    /* 50% up on the previous step. The source is 512px square, so the 16.5rem
       cap is still under 2x device pixels on a retina screen. */
    width: clamp(12rem, 19.5vw, 16.5rem);
    margin-top: 0.4rem;
  }
}
.portrait img {
  width: 100%;
  border-radius: 50%;
  background: var(--paper-raised);
  box-shadow: 0 0 0 1px var(--rule), 0 0 0 12px var(--paper);
}
:root[data-theme="dark"] .portrait img { filter: grayscale(1) brightness(0.92) contrast(1.02); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portrait img {
    filter: grayscale(1) brightness(0.92) contrast(1.02);
  }
}

.ids {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}
.ids a {
  display: inline-flex;
  gap: 0.5ch;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: var(--step-meta);
  color: var(--ink-3);
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s;
}
.ids a b {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9em;
  align-self: center;
}
.ids a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.theme {
  display: inline-flex;
  margin-top: 0.6rem;
  align-items: center;
  gap: 0.5ch;
  padding: 0.4rem 0.7rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.theme:hover { border-color: var(--accent); color: var(--accent); }
.theme[hidden] { display: none; }

/* --- Layout: rail + main -------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(1.75rem, 4vw, 3rem) 0;
}

.rail__title {
  display: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.85rem;
}

.rail__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.rail__list a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: var(--step-meta);
  line-height: 1.3;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}
.rail__list a:hover { color: var(--accent); border-color: var(--accent); }
.rail__list a[aria-current] {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}
.rail__list .num { display: none; }

main { min-width: 0; }

@media (min-width: 68rem) {
  .layout {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    align-items: start;
  }
  .rail {
    position: sticky;
    /* Clears the site bar rather than parking under it: the old flat 2.75rem
       was set when nothing was pinned above, and left the rail title 5px
       behind the bar once the page scrolled. */
    top: calc(var(--sitenav-h) + 1.25rem);
    max-height: calc(100vh - var(--sitenav-h) - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .rail__title { display: block; }
  .rail__list { display: block; }
  .rail__list li + li { margin-top: 0.1rem; }
  .rail__list a {
    display: grid;
    grid-template-columns: 1.9em 1fr;
    gap: 0.25rem;
    padding: 0.3rem 0.45rem 0.3rem 0.2rem;
    border: 0;
    border-left: 1px solid transparent;
    border-radius: 0;
    font-size: 0.78rem;
    letter-spacing: 0.005em;
  }
  .rail__list a:hover { border-color: transparent; background: var(--paper-sunk); }
  .rail__list a[aria-current] {
    background: transparent;
    border-left-color: var(--accent);
    color: var(--ink);
    font-weight: 500;
  }
  .rail__list .num {
    display: block;
    font-size: 0.68rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .rail__list a[aria-current] .num { color: var(--accent); }
}

/* --- Prose --------------------------------------------------------------- */

.lede {
  font-size: var(--step-lede);
  line-height: 1.46;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
  max-width: 50ch;
}
.lede--wide { max-width: 58ch; }

.overview {
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.overview .eyebrow { margin-bottom: 0.85rem; }
.overview .lede {
  max-width: 62ch;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* --- Sections ------------------------------------------------------------ */

.section {
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 1.5rem;
}

.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.section__num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.section h2 {
  font-size: var(--step-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.016em;
  color: var(--ink);
  max-width: 32ch;
  text-wrap: balance;
}

/* --- Claims (the 24 research bullets) ----------------------------------- */

.claim {
  display: grid;
  gap: 0.5rem clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(1.35rem, 2.5vw, 1.85rem);
  border-top: 1px solid var(--rule);
}
.claim:first-child { border-top: 0; padding-top: 0; }

.claim h3 {
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}

.claim__body { max-width: var(--measure); }
.claim__body p + p { margin-top: 0.9em; }

@media (min-width: 56rem) {
  .claim {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 2fr);
  }
  .claim__head { position: relative; }
  .claim h3 { padding-top: 0.15em; }
}

/* --- Figure asides (statistics pulled from the prose) ------------------- */

.stat {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  box-shadow: var(--shadow);
}
.stat__fig {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-3);
}

/* One of the five liftouts is a door: the Lean development it names is
   published, so the box that claims it opens it. At rest it is the same box as
   its four neighbours, because a figure that looked like a link would leave the
   others looking broken; the line underneath says where it goes, and the border
   picks up the accent on hover. */
.stat--link {
  display: block;
  text-decoration: none;
  transition: border-color 0.18s, background-color 0.18s;
}
.stat--link:hover,
.stat--link:focus-visible {
  border-color: var(--accent);
  background: var(--paper);
}
.stat__cta {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.stat--link:hover .stat__cta,
.stat--link:focus-visible .stat__cta { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .stat--link { transition: none; }
}

/* --- Heritage (the block on the home page) -------------------------------- */
/* The four setts are the only pictures the heritage pages have that read at a
   glance, so the block is the tartans themselves rather than a screenshot of a
   page. The whole band is one link: four swatches are one idea, and four links
   into the same page would be four ways of asking the reader the same
   question. The names beside them carry the meaning, so the swatches take an
   empty alt rather than reading four threadcount descriptions inside a link
   that already says Maclaine, McFadyen, Ross and Anderson.

   The setts rest slightly desaturated, like every other image on the site, and
   come up to full colour together on hover. */

.heritage {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.4rem);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color 0.18s;
}
.heritage:hover,
.heritage:focus-visible { border-color: var(--accent); }

.heritage__setts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1.5vw, 0.9rem);
}
@media (min-width: 34rem) {
  .heritage__setts { grid-template-columns: repeat(4, 1fr); }
}
.heritage__sett { display: grid; gap: 0.5rem; min-width: 0; }
.heritage__sett img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  filter: saturate(0.85);
  transition: filter 0.25s;
}
.heritage:hover .heritage__sett img,
.heritage:focus-visible .heritage__sett img { filter: none; }
.heritage__name {
  font-family: var(--mono);
  font-size: var(--step-meta);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-3);
  text-align: center;
  text-wrap: balance;
}

.heritage__text { display: grid; gap: 0.4rem; min-width: 0; }
.heritage__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.heritage:hover .heritage__title { color: var(--accent); }
.heritage__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.heritage__cta {
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.heritage:hover .heritage__cta,
.heritage:focus-visible .heritage__cta { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .heritage,
  .heritage__sett img { transition: none; }
}

/* --- Coda ---------------------------------------------------------------- */

.coda {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule-strong);
}
.coda p {
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 54ch;
  text-wrap: pretty;
}
.coda p::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--accent);
}

/* --- Ventures ------------------------------------------------------------ */

.ventures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.venture {
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--paper-raised);
}
.venture h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.venture a {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  color: var(--accent);
}
.venture p {
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Papers -------------------------------------------------------------- */

.papers__year {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 0.5rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.papers__year:first-of-type { margin-top: 0; }

.paper a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding: 0.95rem 0.65rem 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background-color 0.18s, padding-left 0.18s;
}
.paper a:hover,
.paper a:focus-visible {
  background: var(--paper-raised);
  padding-left: 0.65rem;
}
.paper__title {
  grid-column: 1;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}
.paper a:hover .paper__title { color: var(--accent); }
.paper__date {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--mono);
  font-size: var(--step-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.paper__cta {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  color: var(--ink-3);
  white-space: nowrap;
}
.paper a:hover .paper__cta { color: var(--accent); }

@media (min-width: 44rem) {
  .paper a {
    grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    align-items: baseline;
  }
  .paper__date { grid-column: 1; grid-row: 1; }
  .paper__title { grid-column: 2; grid-row: 1; }
  .paper__cta { grid-column: 3; grid-row: 1; align-self: baseline; }
}

/* --- Watch (the videos block on the home page) --------------------------- */
/* One tile per entry on /videos/, each a link to that entry's place on the
   page rather than a player: the home page plays nothing and asks YouTube for
   nothing. The posters are the 640-wide files /videos/ already serves to
   phones, so a reader who follows a tile arrives with the frame cached. On a
   phone each tile is a row, frame beside caption, so six of them stay a short
   list instead of six screens of pictures; from 34rem they become cards. */

.watch {
  display: grid;
  gap: 1rem;
}
.watch a {
  display: grid;
  grid-template-columns: minmax(7.5rem, 40%) minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}
.watch__frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.watch__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.02);
  transition: filter 0.25s, transform 0.4s;
}
.watch a:hover .watch__frame img,
.watch a:focus-visible .watch__frame img {
  filter: none;
  transform: scale(1.03);
}
.watch__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 1.9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(250 248 244 / 92%);
  color: var(--accent);
  box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
  transition: scale 0.2s;
}
.watch__play svg { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; }
.watch a:hover .watch__play,
.watch a:focus-visible .watch__play { scale: 1.08; }

.watch__text { display: grid; gap: 0.2rem; min-width: 0; }
.watch__kind {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.watch__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.watch a:hover .watch__title { color: var(--accent); }
.watch__meta {
  font-family: var(--mono);
  font-size: var(--step-meta);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (min-width: 34rem) {
  .watch {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
  }
  .watch a {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
  }
  .watch__play { width: 2.75rem; }
}

.watch__all {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.watch__all a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.watch__all a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .watch__frame img,
  .watch__play { transition: none; }
  .watch a:hover .watch__frame img,
  .watch a:focus-visible .watch__frame img { transform: none; }
  .watch a:hover .watch__play,
  .watch a:focus-visible .watch__play { scale: none; }
}

/* --- Connect ------------------------------------------------------------- */

.link-groups {
  columns: 1;
  column-gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 46rem) { .link-groups { columns: 2; } }

.link-group {
  break-inside: avoid;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.link-group:last-child { margin-bottom: 0; }
.link-group h3 {
  padding-bottom: 0.55rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.4rem 0.5rem 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: background-color 0.18s, padding-left 0.18s;
}
.links a:hover,
.links a:focus-visible {
  background: var(--paper-raised);
  padding-left: 0.4rem;
}
.links__name {
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
}
.links a:hover .links__name { color: var(--accent); }
/* A row carrying a second link: the entry keeps the full width it had and a
   small feed mark is pinned after it. Qualified by the element so the base
   .links a rules, including the hover padding shift, do not move the mark. */
.links__pair { display: flex; align-items: stretch; }
.links__pair > a:first-child { flex: 1 1 auto; min-width: 0; }
.links a.links__feed {
  flex: none;
  display: grid;
  place-items: center;
  /* Padding, not the mark, carries the hit area past the 24px WCAG minimum. */
  padding: 0.5rem 0.3rem 0.5rem 0.55rem;
  color: var(--ink-3);
}
.links a.links__feed:hover,
.links a.links__feed:focus-visible {
  padding-left: 0.55rem;
  color: var(--accent);
}
.links__feed svg { width: 0.72rem; height: 0.72rem; fill: currentColor; }

.links__host {
  font-family: var(--mono);
  font-size: 0.6875rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  text-align: right;
}

/* --- Footer -------------------------------------------------------------- */

.footer {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--rule-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-family: var(--mono);
  font-size: var(--step-meta);
  color: var(--ink-3);
}
.footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}
.footer a:hover { color: var(--accent); border-color: var(--accent); }
.footer__ids { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }

/* --- Print --------------------------------------------------------------- */

@media print {
  :root {
    --paper: #fff;
    --paper-raised: #fff;
    --paper-sunk: #fff;
    --ink: #000;
    --ink-2: #1a1a1a;
    --ink-3: #444;
    --rule: #bbb;
    --rule-strong: #000;
    --accent: #000;
    --shadow: none;
  }
  .rail, .theme, .progress, .skip { display: none !important; }
  .layout { display: block; }
  body { font-size: 10.5pt; line-height: 1.5; }
  .section, .claim, .paper a, .watch a { break-inside: avoid; }
  .paper a[href]::after { content: ""; }
  .watch__play { display: none; }
  .watch__frame img { filter: grayscale(1); }
}