@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;
  gap: 0.35rem 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);
}

/* Five labels measure 341.5px against 320px of available width at 360px, so
   below 487px the bar wraps to two rows and costs 95px of a phone screen.
   The two home-page anchors step out there; the three page links, which are
   the only way between sections, stay. Both remain in the page's own rail. */
@media (max-width: 30.375rem) {
  /* Qualified by the element: .sitenav a sets display, and at (0,1,1) it
     outranks a bare class. */
  .sitenav a.sitenav__anchor { display: 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); }
.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); }
}