/* hahellyer.com
   Type: Bespoke Serif (display), Sentient (reading), Switzer (interface); Fontshare, FFL, self-hosted.
   Grid: 12 columns, one gap; vertical rhythm on a 0.4rem step derived from the body line height.
   Motion: Emil Kowalski's rules. Transform, opacity and clip-path only; strong ease-out; UI under 300ms;
   hover motion gated to fine pointers; reduced motion keeps fades only. Square corners. */

@font-face { font-family: "Bespoke Serif"; src: url("../assets/fonts/BespokeSerif-Variable.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Bespoke Serif"; src: url("../assets/fonts/BespokeSerif-VariableItalic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("../assets/fonts/Sentient-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Sentient"; src: url("../assets/fonts/Sentient-VariableItalic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../assets/fonts/Switzer-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* color */
  --paper: oklch(98.3% 0.006 85);
  --paper-2: oklch(95.6% 0.011 85);
  --ink: oklch(19% 0.03 250);
  --ink-2: oklch(36% 0.025 250);
  --ink-3: oklch(47% 0.02 250);
  --rule: oklch(86.5% 0.012 85);
  --brass: oklch(62% 0.085 75);
  --brass-soft: oklch(84% 0.05 80);
  --field: oklch(72% 0.012 240);
  --petrol: oklch(38% 0.07 205);
  --petrol-deep: oklch(27% 0.05 210);
  --petrol-ink: oklch(22% 0.04 212);
  --petrol-wash: oklch(94.5% 0.022 200);
  /* the page grid: a faint dot field everywhere, a finer line grid behind the cards */
  --grid-dot: oklch(47% 0.02 250 / 0.13);
  --grid-line: oklch(86.5% 0.012 85 / 0.45);
  --dots: radial-gradient(circle, var(--grid-dot) 0.7px, transparent 1.05px);
  --on-dark: oklch(96% 0.012 200);
  --on-dark-2: oklch(82% 0.02 200);
  --danger: oklch(50% 0.16 28);

  /* type families */
  --display: "Bespoke Serif", "Iowan Old Style", Georgia, serif;
  --serif: "Sentient", "Iowan Old Style", Georgia, serif;
  --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;

  /* type scale: minor third (1.2) for text, perfect fourth for display steps */
  --t-xs: 0.8125rem;   /* 13px meta, captions */
  --t-sm: 0.9rem;      /* 14.4px interface */
  --t-md: 1.0625rem;   /* 17px body */
  --t-lg: 1.2rem;      /* 19.2px article */
  --t-xl: 1.44rem;     /* 23px h3, lede on mobile */
  --t-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2rem);
  --t-3xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --t-4xl: clamp(2.6rem, 1.6rem + 4vw, 4.4rem);
  --t-5xl: clamp(3.2rem, 1.6rem + 4.6vw, 5.75rem);

  /* rhythm: one step = 0.4rem, so 4 steps = one body line (1.7rem at 17px x 1.6) */
  --s1: 0.4rem; --s2: 0.8rem; --s3: 1.2rem; --s4: 1.6rem; --s5: 2.4rem; --s6: 3.2rem; --s7: 4.8rem; --s8: 6.4rem;
  --section: clamp(var(--s6), 8vw, var(--s8));

  /* grid */
  --wrap: 78rem;
  --gutter: clamp(1.1rem, 4vw, 3rem);
  --gap: clamp(1.25rem, 3.5vw, 3rem);
  --measure: 66ch;

  /* motion (Emil Kowalski) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press: 160ms;
  --quick: 200ms;

  /* transitions-dev tokens used here (number pop-in, modal, error shake, success check, avatar group hover) */
  --digit-dur: 500ms; --digit-distance: 8px; --digit-stagger: 70ms; --digit-blur: 2px; --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --modal-open-dur: 250ms; --modal-close-dur: 150ms; --modal-scale: 0.96; --modal-scale-close: 0.96; --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shake-distance: 6px; --shake-overshoot: 4px; --shake-dur-a: 80ms; --shake-dur-b: 60ms; --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --check-opacity-dur: 550ms; --check-rotate-dur: 550ms; --check-rotate-from: 80deg; --check-path-dur: 550ms; --check-path-delay: 80ms; --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-lift: -4px; --avatar-dur: 320ms; --avatar-scale: 1.05; --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
}

/* reset and base */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; hanging-punctuation: first allow-end last; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-md)/1.6 var(--serif); font-kerning: normal; font-optical-sizing: auto; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--petrol); text-decoration-line: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.2em; text-decoration-skip-ink: auto; transition: color var(--quick) ease; }
a:not(.btn):hover { color: var(--petrol-deep); }
:focus-visible { outline: 2px solid var(--petrol); outline-offset: 3px; }
::selection { background: var(--petrol); color: var(--on-dark); }
input, select, button, textarea { font: inherit; color: inherit; }
abbr[title] { text-decoration: none; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--petrol); color: var(--on-dark); padding: var(--s2) var(--s3); z-index: 60; font-family: var(--sans); }
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.i { width: 1.1em; height: 1.1em; flex: none; }
.print-head { display: none; }

/* the 12-column grid: every two-part layout uses it, so edges line up page to page */
.grid-12, .hero .wrap, .ph-grid, .read-grid, .req-grid, .sp-grid, .foot > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); }

/* typography */
h1, h2, h3 { font-family: var(--display); font-weight: 550; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; margin: 0; font-feature-settings: "kern", "liga", "lnum"; }
h1 { font-size: var(--t-4xl); line-height: 0.96; letter-spacing: -0.026em; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.012em; }
@supports (text-box: trim-both cap alphabetic) { h1, h2 { text-box: trim-both cap alphabetic; } }
/* trimmed headings need explicit space before what follows them */
h2:not(:last-child), h3:not(:last-child) { margin-bottom: var(--s3); }
h2.h-sm:not(:last-child) { margin-bottom: var(--s3); }
:where(.cards3, .card, .books, .related, .lead-item) h3:not(:last-child), :where(.books) h2:not(:last-child) { margin-bottom: var(--s2); }
.h-sm { font: 600 var(--t-md)/1.3 var(--sans); letter-spacing: 0; margin-bottom: var(--s3); }
p { margin: 0 0 var(--s3); text-wrap: pretty; }
.lede { font: 400 clamp(var(--t-lg), 1rem + 0.8vw, 1.45rem)/1.45 var(--serif); color: var(--ink-2); max-width: 38ch; margin: var(--s4) 0 0; text-wrap: pretty; }
.meta { font: 450 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); margin: 0 0 var(--s1); display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.meta b { color: var(--ink-2); font-weight: 600; }
.caption { font: 400 var(--t-sm)/1.5 var(--sans); color: var(--ink-3); margin: var(--s4) 0 0; max-width: 62ch; }
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--t-2xl); margin: var(--s6) 0 var(--s3); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; margin: 0 0 var(--s3); } .prose li { margin-bottom: var(--s1); } .prose li::marker { color: var(--petrol); }
.fav { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; }
.fav-md { width: 22px; height: 22px; }

/* drop caps: a three-line initial. The float box is sized in the initial's own em so it always
   covers exactly three lines of its paragraph (3 x 1.7 / 6.1 = 3 x 1.6 / 5.75 = 0.836em); the glyph
   sits with its cap top on the first line's cap height and its baseline on the third line's baseline.
   The rest of the first line runs in small caps. */
.lead-words { font-variant-caps: small-caps; letter-spacing: 0.03em; }
.opener::first-letter { float: left; font-family: var(--display); font-weight: 400; color: var(--petrol); font-size: 5.6em; line-height: 0.76; height: 0.76em; margin: 0.045em 0.07em 0 -0.03em; font-variant-numeric: lining-nums; }
.body .opener::first-letter { font-size: 5.95em; }


/* buttons and links */
.btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.9rem; padding: 0.7rem 1.2rem; font: 600 0.95rem/1.1 var(--sans); text-decoration: none; border: 1.5px solid var(--petrol); background: var(--petrol); color: var(--on-dark); cursor: pointer; transition: background-color var(--quick) ease, color var(--quick) ease, border-color var(--quick) ease, transform var(--press) var(--ease-out); }
.btn:hover { background: var(--petrol-deep); border-color: var(--petrol-deep); color: var(--on-dark); }
.btn:active, .copy:active, .share a:active, .share button:active, .iconbtn:active, .menu summary:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--petrol); }
.btn.ghost:hover { background: var(--petrol-wash); color: var(--petrol-deep); }
.btn-sm { min-height: 2.6rem; padding: 0.55rem 1rem; font-size: var(--t-sm); }
.btn-light { background: var(--on-dark); color: var(--petrol-ink); border-color: var(--on-dark); }
.btn-light:hover { background: #fff; color: var(--petrol-ink); border-color: #fff; }
.btn .i { width: 1.05em; height: 1.05em; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.3rem; font: 600 0.95rem/1.2 var(--sans); text-decoration: none; color: var(--petrol); padding-block: var(--s2); }
.link-arrow .i { width: 0.95em; height: 0.95em; transition: transform var(--quick) var(--ease-out); }
.linkbtn { background: none; border: 0; padding: var(--s1) 0.2rem; font: 500 var(--t-sm)/1 var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; }
.linkbtn:hover { color: var(--petrol); }
.cta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-top: var(--s5); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .i, .card-link:hover .link-arrow .i { transform: translate(2px, -2px); }
}

/* masthead */
.mast { position: sticky; top: 0; z-index: 40; background: color-mix(in oklch, var(--paper) 94%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--rule); }
@supports (animation-timeline: scroll()) {
  .mast { animation: mast-in linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  @keyframes mast-in { from { border-bottom-color: transparent; background-color: color-mix(in oklch, var(--paper) 0%, transparent); } }
}
.mast .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 4.4rem; }
.brand { font: 650 1.45rem/1 var(--display); color: var(--ink); text-decoration: none; margin-right: auto; white-space: nowrap; }
.brand:hover { color: var(--petrol); }
.nav { display: flex; gap: var(--s4); font: 500 var(--t-sm)/1 var(--sans); }
.nav a { color: var(--ink-2); text-decoration: none; padding: var(--s2) 0; background: linear-gradient(var(--petrol), var(--petrol)) no-repeat left bottom / 0 2px; transition: background-size var(--quick) var(--ease-out), color var(--quick) ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background-size: 100% 2px; }
.tools { display: flex; align-items: center; gap: var(--s2); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.75rem; color: var(--ink-2); transition: color var(--quick) ease, background-color var(--quick) ease, transform var(--press) var(--ease-out); }
.iconbtn:hover { color: var(--petrol); background: var(--paper-2); }
.soc { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.soc a { display: inline-flex; width: 2.5rem; height: 2.75rem; align-items: center; justify-content: center; color: var(--ink-3); }
.soc a:hover { color: var(--petrol); }
.soc .i { width: 1.05rem; height: 1.05rem; }
.tools > .iconbtn { width: 2.4rem; }
.tools > .iconbtn .i { width: 1.05rem; height: 1.05rem; }
.soc-lg { margin-top: var(--s4); gap: var(--s2); }
.soc-lg a { width: 2.9rem; height: 2.9rem; border: 1px solid var(--rule); color: var(--ink-2); transition: border-color var(--quick) ease, color var(--quick) ease; }
.soc-lg a:hover { border-color: var(--petrol); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--rule); transition: background-color var(--quick) ease, color var(--quick) ease, transform var(--press) var(--ease-out); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.menu nav { position: fixed; left: 0; right: 0; top: 4.4rem; background: var(--paper); border-bottom: 1px solid var(--rule); display: grid; padding: var(--s1) var(--gutter) var(--s4); transform-origin: top right; }
.menu[open] nav { opacity: 1; transform: translateY(0); transition: opacity var(--quick) var(--ease-out), transform var(--quick) var(--ease-out); }
@starting-style { .menu[open] nav { opacity: 0; transform: translateY(-6px); } }
.menu nav > a { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font: 500 var(--t-md)/1 var(--sans); color: var(--ink); text-decoration: none; }
@media (max-width: 64rem) { .nav { display: none; } .menu { display: block; } .mast .wrap { gap: var(--s2); } }
@media (max-width: 30rem) { .brand { font-size: 1.25rem; } .tools .iconbtn { display: none; } }

/* one-shot home entrance: the name rises line by line out of a mask, then the rest follows in a
   decelerating wave (gaps 120, 90, 70, 50ms) while the portrait settles and the globe fills in */
.split { display: block; }
/* each line is masked for the rise; the padding leaves room for descenders (y, g, p) at the hero's tight leading */
.split .ln { display: block; overflow: hidden; padding-bottom: 0.24em; margin-bottom: -0.24em; }
.split .ln > span { display: inline-block; }
.js .split .ln > span { animation: line-up 1000ms var(--ease-out) both; animation-delay: calc(80ms + var(--i) * 110ms); }
@keyframes line-up { from { transform: translateY(135%); } }
.js .enter > :not(h1) { animation: rise 700ms var(--ease-out) both; }
.js .enter > :nth-child(2) { animation-delay: 380ms; }
.js .enter > :nth-child(3) { animation-delay: 500ms; }
.js .enter > :nth-child(4) { animation-delay: 590ms; }
.js .enter > :nth-child(5) { animation-delay: 660ms; }
.js .enter > :nth-child(6) { animation-delay: 710ms; --rise: 4px; }
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise, 10px)); } }
.js .hero-portrait .cutout { animation: settle 1300ms var(--ease-out) both 200ms; }
@keyframes settle { from { opacity: 0; transform: translateY(28px) scale(0.985); } }
.js .hero-portrait .globe { animation: fade 1200ms ease both; }
@keyframes fade { from { opacity: 0; } }

/* scroll-linked reveals: tied to scroll position (no timers, nothing hidden without support) */
@supports (animation-timeline: view()) {
  .sec-head h2, .acard, .regions li, .shelf li, .topics li { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  @keyframes reveal { from { opacity: 0.001; transform: translateY(22px); } }
}

/* hero: the name and offer on the left; on the right the cut-out portrait stands in front of the globe */
.hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(var(--s3), 2.2vw, var(--s5)) 0 0; }
.hero .wrap { align-items: end; }
.hero-text { grid-column: 1 / span 7; padding-bottom: var(--s2); position: relative; z-index: 1; }
.hero h1 { font-size: var(--t-5xl); font-weight: 500; line-height: 0.88; letter-spacing: -0.034em; }
.hero .lede { max-width: 34ch; margin-top: var(--s3); font-size: clamp(var(--t-lg), 1rem + 0.6vw, 1.38rem); line-height: 1.4; }
.hero-portrait { grid-column: 8 / span 5; position: relative; margin: 0 calc(-1 * var(--gutter)) 0 0; aspect-ratio: 1660 / 1400; align-self: end; max-height: min(36rem, calc(100svh - 11rem)); }
/* the canvas reaches well above the portrait so the whole sphere and its arcs fit inside it */
.hero-portrait .globe { position: absolute; left: -6%; top: -26%; width: 112%; height: 126%; cursor: grab; touch-action: pan-y; }
.hero-portrait .globe.is-dragging { cursor: grabbing; }
/* the portrait stands on the hero's bottom rule: shoulders run off the frame, so the head never floats */
.hero-portrait .cutout { position: relative; display: block; width: auto; height: 100%; max-width: 100%; margin-left: auto; object-fit: contain; object-position: bottom; pointer-events: none; filter: saturate(0.96) contrast(1.02); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); z-index: 2; }
/* affiliations: two side by side, logo above the title, so a square logo and a wide one leave no odd gap */
.affil { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--s2) var(--s6); }
.affil a { display: grid; justify-items: start; gap: var(--s1); text-decoration: none; color: var(--ink-3); font: 400 var(--t-sm)/1.35 var(--sans); padding: var(--s1) 0; }
.affil img { height: 28px; width: auto; max-width: 7rem; object-fit: contain; object-position: left; }
.affil b { display: block; color: var(--ink); font: 600 0.95rem/1.3 var(--sans); }
.affil a:hover b { color: var(--petrol); }
@media (max-width: 40rem) { .affil { gap: var(--s2) var(--s4); } }
@media (max-width: 22rem) { .affil { grid-template-columns: minmax(0, 1fr); } }
.press-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); font: 500 var(--t-sm)/1.3 var(--sans); color: var(--ink-3); }
.press-line .email { margin: 0; }
.press-line .link-arrow { margin-left: auto; }
.hero .cta { margin-top: var(--s4); }
@media (max-width: 62rem) { .hero-text { grid-column: 1 / span 7; } .hero-portrait { grid-column: 8 / span 5; } }
/* small screens: name first, then the portrait standing on the hero's bottom rule */
@media (max-width: 52rem) { .hero .wrap { align-items: start; } .hero-text, .hero-portrait { grid-column: 1 / -1; } .hero-portrait { max-width: 26rem; margin: var(--s5) auto 0; width: 92%; max-height: none; } .hero-portrait .cutout { width: 100%; height: auto; } .hero-text { padding-bottom: 0; } .press-line .link-arrow { margin-left: 0; } }

/* logo wall */
.wall { background: var(--paper-2); border-block: 1px solid var(--rule); padding: var(--s6) 0; }
.wall .h-sm { color: var(--ink-3); }
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.logos a { position: relative; display: flex; align-items: center; justify-content: center; height: 6rem; padding: var(--s3) var(--s4); background: var(--paper-2); transition: background-color var(--quick) ease; }
.logos img { max-height: 2.4rem; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1) contrast(1.08); opacity: 0.92; mix-blend-mode: multiply; transition: filter 260ms ease, opacity 260ms ease, transform 260ms var(--ease-out); }
.logos .n { position: absolute; top: var(--s1); right: var(--s2); font: 600 0.72rem/1 var(--sans); color: var(--ink-3); opacity: 0; transition: opacity var(--quick) ease; font-variant-numeric: tabular-nums; }
.logos a:focus-visible { background: var(--paper); }
.logos a:focus-visible img { filter: none; opacity: 1; }
.logos a:focus-visible .n { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .logos a:hover { background: var(--paper); }
  .logos a:hover img { filter: none; opacity: 1; transform: scale(1.04); }
  .logos a:hover .n { opacity: 1; }
}
@media (max-width: 62rem) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .logos a { height: 4.8rem; padding: var(--s2); } .logos li.m-hide { display: none; } .logos img { max-height: 2rem; } }

/* sections */
.section { padding-block: var(--section); }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); flex-wrap: wrap; }
/* latest analysis: every card is one box on a fine line grid, so the quote or still, the outlet and date, the
   title and its Read or Watch link read as one piece */
.sec-head .links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.latest { position: relative; isolation: isolate; }
.latest::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 32px 32px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 45%, transparent 100%); pointer-events: none; }
.acards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.acards-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--gap); }
.acard { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); transition: border-color var(--quick) ease; }
.c-media { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); border-bottom: 1px solid var(--rule); }
.c-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
/* article cards: the opening line as a pull quote on paper; the outlet is named once, in the line below */
.c-paper { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s2); padding: clamp(var(--s3), 2vw, var(--s4)); background: var(--paper-2); }
.c-paper::before { content: "\201C"; font: 500 3.4rem/0.7 var(--display); color: var(--brass); height: 0.5em; }
.c-paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--petrol); transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease-out); }
.c-open { font: italic 400 clamp(1.02rem, 0.9rem + 0.35vw, 1.2rem)/1.4 var(--display); color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; text-wrap: pretty; }
.c-body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; padding: var(--s3) var(--s3) 0; }
.acard .meta { margin: 0; }
.acard .meta .i { width: 0.9em; height: 0.9em; color: var(--petrol); fill: currentColor; }
/* clamped titles: a little bottom padding so the last line's descenders are never cut by the clamp */
.c-t { font: 600 1.3rem/1.15 var(--display); text-wrap: balance; padding-bottom: 0.1em; overflow-wrap: break-word; }
.acard-big .c-t { font-size: var(--t-2xl); line-height: 1.1; }
.acard-big .c-open { font-size: clamp(1.15rem, 0.9rem + 0.7vw, 1.45rem); -webkit-line-clamp: 5; }
.acard-big .c-body { padding: var(--s4) var(--s4) 0; }
.c-go { display: flex; align-items: center; gap: 0.3rem; margin: auto calc(-1 * var(--s3)) 0; padding: var(--s2) var(--s3); border-top: 1px solid var(--rule); font: 600 var(--t-xs)/1.2 var(--sans); color: var(--petrol); }
.acard-big .c-go { margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); }
.c-go .i { width: 0.85em; height: 0.85em; transition: transform var(--quick) var(--ease-out); }
.acard .vid-play { left: var(--s2); bottom: var(--s2); }
@media (hover: hover) and (pointer: fine) {
  .acard:hover { border-color: color-mix(in oklch, var(--petrol) 55%, var(--rule)); }
  .acard:hover .c-t { color: var(--petrol); }
  .acard:hover .c-go .i { transform: translate(2px, -2px); }
  .acard:hover .c-media > img { transform: scale(1.035); }
  .acard:hover .c-paper::after { transform: scaleX(1); }
  .acard:hover .vid-play { background: var(--petrol); color: var(--on-dark); }
}
.acard:focus-visible { outline: 2px solid var(--petrol); outline-offset: 2px; }
@media (max-width: 62rem) { .acards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .acards, .acards-lead { grid-template-columns: 1fr; } .acard-big .c-t { font-size: var(--t-xl); } .acard-big .c-body { padding: var(--s3) var(--s3) 0; } .acard-big .c-go { margin-inline: calc(-1 * var(--s3)); padding-inline: var(--s3); } }

.onair { background: var(--petrol-ink); color: var(--on-dark); }
.onair .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: var(--gap); padding: 0 var(--gutter) 0 0; max-width: none; }
.onair figure { margin: 0; height: 100%; }
.onair figure img { width: 100%; height: 100%; max-height: 36rem; object-fit: cover; object-position: 50% 30%; }
.onair figcaption { font: 400 var(--t-xs)/1.3 var(--sans); color: var(--on-dark-2); padding: var(--s1) var(--gutter); }
.onair-text { padding-block: var(--s7); max-width: 34rem; }
.onair h2 { color: #fff; }
.onair p { color: var(--on-dark-2); font-size: var(--t-lg); line-height: 1.55; margin-top: var(--s3); }
.ticks { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); display: grid; gap: var(--s2); font: 450 var(--t-md)/1.35 var(--sans); }
.ticks li { display: flex; gap: var(--s2); align-items: center; }
.ticks .i { color: var(--petrol); width: 1.2rem; height: 1.2rem; }
.onair .ticks .i { color: oklch(78% 0.07 195); }
@media (max-width: 52rem) { .onair .wrap { grid-template-columns: 1fr; padding: 0; } .onair-text { padding: var(--s5) var(--gutter) var(--s6); } .onair figure img { max-height: 24rem; } }

.regions { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
@media (max-width: 62rem) { .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.regions a { display: grid; text-decoration: none; background: var(--paper); border: 1px solid var(--rule); transition: border-color var(--quick) ease; overflow: hidden; }
.regions .map { display: block; width: 100%; aspect-ratio: 8 / 5; height: auto; object-fit: cover; background: var(--paper-2); border-bottom: 1px solid var(--rule); transition: filter var(--quick) ease; }
.regions li { display: flex; }
.regions a { flex: 1; grid-template-rows: auto 1fr; }
.regions .rl { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); min-height: 3.4rem; }
.regions b { font: 600 clamp(1.02rem, 0.8rem + 0.45vw, 1.25rem)/1.1 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regions .rl > span { font: 500 var(--t-xs)/1 var(--sans); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.regions a:hover { border-color: var(--petrol); }
.regions a:hover .map { filter: brightness(0.94) saturate(1.15); }
.regions a:hover b { color: var(--petrol); }
.books-band { background: var(--paper-2); border-block: 1px solid var(--rule); }
/* a reading list: three columns of cover, title and credit, so long titles get the width to break well;
   two columns on tablets, one on phones */
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--rule); }
@media (max-width: 62rem) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .shelf { grid-template-columns: minmax(0, 1fr); } }
.shelf li { border-bottom: 1px solid var(--rule); }
.shelf a { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--s3); align-items: center; padding: var(--s3) 0; text-decoration: none; color: var(--ink); }
.shelf img, .books .cover img, .book img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; outline: 1px solid color-mix(in oklch, var(--ink) 12%, transparent); outline-offset: -1px; transition: transform 300ms var(--ease-out); }
.sh-x { display: grid; gap: var(--s1); min-width: 0; }
.shelf .t { display: block; font: 600 1.14rem/1.16 var(--display); letter-spacing: -0.01em; text-wrap: balance; hyphens: manual; padding-bottom: 0.05em; }
.shelf .y { display: block; font: 450 var(--t-xs)/1.35 var(--sans); color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .shelf a:hover img, .books .cover:hover img { transform: translateY(-4px); }
  .shelf a:hover .t { color: var(--petrol); }
}

.endorse { margin: var(--s6) 0 0; max-width: 40rem; position: relative; padding-top: var(--s6); border-top: 1px solid var(--rule); }
.endorse::before { content: "\201C"; position: absolute; top: var(--s2); left: -0.04em; font: 500 4.2rem/1 var(--display); color: var(--brass); }
.endorse blockquote { margin: 0; }
.endorse p { font: italic 400 1.28rem/1.45 var(--display); margin: 0; text-wrap: pretty; }
.endorse figcaption { display: grid; gap: 0.2rem; margin-top: var(--s3); font: 400 var(--t-xs)/1.35 var(--sans); color: var(--ink-3); }
.endorse figcaption b { font: 600 var(--t-sm)/1.2 var(--sans); color: var(--ink); }

/* newsletter: one contained card on the paper, so it no longer stacks a second dark band onto the footer */
.newsletter { padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.nl-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3) var(--s5); padding: var(--s4) var(--s5); background: var(--paper); border: 1px solid var(--rule); }
.nl-mark { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; background: var(--petrol); color: #fff; }
.nl-mark .i { width: 1.35rem; height: 1.35rem; }
.nl-text h2 { font-size: var(--t-2xl); line-height: 1.05; margin: 0; }
.nl-text p { margin: var(--s1) 0 0; color: var(--ink-2); max-width: 60ch; }
.nl-act { display: grid; justify-items: end; gap: var(--s1); }
.nl-note { font: 450 var(--t-xs)/1.2 var(--sans); color: var(--ink-3); }
@media (max-width: 52rem) { .nl-box { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4); } .nl-mark { width: 2.6rem; height: 2.6rem; } .nl-act { justify-items: start; } }

/* page hero and two-part layouts */
.page-hero { padding: var(--s7) 0 var(--s5); border-bottom: 1px solid var(--rule); }
.ph-grid { align-items: center; }
.ph-grid > :first-child { grid-column: 1 / span 8; }
.ph-photo { grid-column: 10 / span 3; margin: 0; }
.ph-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; }
.read-grid > :first-child, .req-grid > :first-child { grid-column: 1 / span 8; }
.read-grid > .side, .req-grid > .side { grid-column: 9 / span 4; }
.read-grid, .req-grid { align-items: start; }
.side { display: grid; gap: var(--s3); position: sticky; top: 6rem; }
.side-box { border: 1px solid var(--rule); background: var(--paper); padding: var(--s3); font: 400 0.95rem/1.5 var(--sans); color: var(--ink-2); }
.side-box p { margin-bottom: var(--s2); }
@media (max-width: 62rem) { .read-grid > :first-child, .req-grid > :first-child, .read-grid > .side, .req-grid > .side { grid-column: 1 / -1; } .side { position: static; } }
@media (max-width: 52rem) { .ph-grid > :first-child, .ph-photo { grid-column: 1 / -1; } .ph-photo { max-width: 16rem; order: -1; } }

.copy { display: inline-flex; align-items: center; gap: var(--s1); min-height: 2.6rem; padding: 0.45rem 0.8rem; border: 1px solid var(--rule); background: var(--paper); font: 500 var(--t-sm)/1 var(--sans); color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: border-color var(--quick) ease, color var(--quick) ease, background-color var(--quick) ease, transform var(--press) var(--ease-out); }
.copy:hover { border-color: var(--petrol); color: var(--petrol); }
.copy[data-done] { border-color: var(--petrol); color: var(--petrol); background: var(--petrol-wash); }
.email { margin: var(--s1) 0 0; }
.email .addr { display: inline-flex; align-items: center; gap: var(--s1); font: 600 1.05rem/1.3 var(--sans); color: var(--ink); text-decoration-color: var(--rule); padding-block: var(--s1); }
.email .addr .i { color: var(--petrol); }
.email .addr:hover { color: var(--petrol); text-decoration-color: currentColor; }
/* cards */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-block: var(--s5); }
.card { border: 1px solid var(--rule); padding: var(--s4); background: var(--paper); text-decoration: none; color: var(--ink-2); font: 400 0.98rem/1.5 var(--sans); display: flex; flex-direction: column; gap: var(--s2); }
.card > .i { width: 1.5rem; height: 1.5rem; color: var(--petrol); }
.card h3 { color: var(--ink); }
.card p { margin: 0; }
.card-link { transition: border-color var(--quick) ease, background-color var(--quick) ease; }
.card-link:hover { border-color: var(--petrol); background: var(--petrol-wash); color: var(--ink-2); }
.card-link .link-arrow { margin-top: auto; }
@media (max-width: 52rem) { .cards3 { grid-template-columns: 1fr; } }

/* forms */
.form-band { background: var(--paper-2); border-top: 1px solid var(--rule); }
.form { display: grid; gap: var(--s3); margin-top: var(--s4); font-family: var(--sans); }
.form label { display: grid; gap: var(--s1); font: 550 var(--t-sm)/1.2 var(--sans); color: var(--ink); }
.form input:not([type=radio]):not([type=checkbox]), .form select, .form textarea { border: 1px solid var(--field); background: var(--paper); padding: 0.75rem 0.85rem; font: 400 1rem/1.4 var(--sans); color: var(--ink); width: 100%; min-height: 3rem; transition: border-color var(--quick) ease; }
.form textarea { min-height: 8rem; resize: vertical; }
.form-note { font: 450 var(--t-sm)/1.4 var(--sans); color: var(--ink-3); margin: 0; }
.form label > span > .opt, .opt { font-weight: 400; color: var(--ink-3); margin-left: 0.3em; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--petrol); outline-offset: 0; border-color: var(--petrol); }
.form ::placeholder { color: var(--ink-3); opacity: 0.8; }
.form [aria-invalid="true"] { border-color: var(--danger) !important; }
.form [data-for] { transition: opacity var(--quick) var(--ease-out), transform var(--quick) var(--ease-out); }
@starting-style { .form [data-for]:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 40rem) { .grid2 { grid-template-columns: 1fr; } }
.kind { border: 0; padding: 0; margin: 0 0 var(--s1); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.kind legend { font: 600 0.95rem/1.2 var(--sans); margin-bottom: var(--s2); padding: 0; }
.kind label { position: relative; cursor: pointer; }
.kind input { position: absolute; opacity: 0; inset: 0; }
.kind span { display: grid; gap: 0.25rem; padding: var(--s3); border: 1px solid oklch(80% 0.012 240); background: var(--paper); height: 100%; transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease, transform var(--press) var(--ease-out); }
.kind label:active span { transform: scale(0.98); }
.kind span .i { width: 1.3rem; height: 1.3rem; color: var(--petrol); margin-bottom: var(--s1); }
.kind b { font: 600 0.98rem/1.2 var(--sans); }
.kind small { font: 400 var(--t-xs)/1.3 var(--sans); color: var(--ink-3); }
.kind input:checked + span { border-color: var(--petrol); background: var(--petrol-wash); box-shadow: inset 0 0 0 1px var(--petrol); }
.kind input:focus-visible + span { outline: 2px solid var(--petrol); outline-offset: 2px; }
@media (max-width: 40rem) { .kind { grid-template-columns: 1fr; } }
.form .check { display: flex; align-items: center; gap: var(--s2); font-weight: 450; min-height: 2.75rem; }
.form .check input { width: 1.2rem; height: 1.2rem; accent-color: var(--petrol); }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.note { font: 400 var(--t-xs)/1.45 var(--sans); color: var(--ink-3); margin: 0; max-width: 46ch; }
.form-msg { border: 1px solid color-mix(in oklch, var(--petrol) 30%, transparent); background: var(--petrol-wash); padding: var(--s2) var(--s3); font: 500 0.95rem/1.5 var(--sans); margin: 0; animation: fade 200ms ease both; }
.urgent { display: flex; gap: var(--s2); align-items: flex-start; background: var(--petrol-wash); border: 1px solid color-mix(in oklch, var(--petrol) 30%, transparent); padding: var(--s3); margin: var(--s4) 0 var(--s1); font: 400 0.95rem/1.5 var(--sans); color: var(--ink-2); }
.urgent > .i { color: var(--petrol); width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; }
.urgent b { color: var(--ink); }
.clocks { display: grid; gap: var(--s2); }
.clocks > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: var(--s1); }
.clocks .city { font: 500 0.95rem/1.2 var(--sans); color: var(--ink); }
.clocks .time { font: 600 1.35rem/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.clocks .day { grid-column: 1 / -1; font: 400 var(--t-xs)/1.2 var(--sans); color: var(--ink-3); }
.topics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.topics li { padding: var(--s2) var(--s3); border: 1px solid var(--rule); background: var(--paper); font: 500 0.95rem/1.2 var(--sans); }
.speaking { background: var(--paper-2); border-top: 1px solid var(--rule); }
.sp-grid { align-items: start; }
.sp-grid > figure { grid-column: 1 / span 6; margin: 0; }
.sp-grid > div { grid-column: 7 / span 6; }
.sp-grid figcaption { font: 400 var(--t-xs)/1.3 var(--sans); color: var(--ink-3); margin-top: var(--s1); }
.sp-grid p { max-width: 52ch; }
.plain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.plain-list .meta { display: inline; }
@media (max-width: 52rem) { .sp-grid > figure, .sp-grid > div { grid-column: 1 / -1; } }

/* archive */
.page-hero-tight { padding: var(--s6) 0 var(--s4); }
/* sidebar of filters beside the results; the form uses display: contents so its parts sit in the grid */
.archive { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); grid-template-areas: "side bar" "side main"; column-gap: var(--gap); align-items: start; padding-top: var(--s4); }
.finder { display: contents; }
.searchbar { grid-area: bar; position: sticky; top: 4.4rem; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding-block: var(--s2); background: color-mix(in oklch, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.archive-main { grid-area: main; min-width: 0; }
.facets { grid-area: side; position: sticky; top: 5rem; max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; padding: var(--s2) var(--s1) var(--s5) 0; }
.facets > summary { display: none; }
.facet { border: 0; margin: 0 0 var(--s4); padding: 0; }
.facet legend { font: 600 var(--t-xs)/1 var(--sans); color: var(--ink); padding: 0 0 var(--s2); }
.f-opt { position: relative; display: flex; align-items: center; gap: var(--s1); min-height: 2.1rem; padding: 0 var(--s1); cursor: pointer; font: 450 var(--t-sm)/1.2 var(--sans); color: var(--ink-2); border-left: 2px solid transparent; transition: color var(--quick) ease, background-color var(--quick) ease, border-color var(--quick) ease; }
.f-opt input, .f-y input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.f-l { display: flex; align-items: center; gap: var(--s1); min-width: 0; flex: 1; }
.f-l .fav { flex: none; }
.f-n { font: 500 0.75rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.f-opt:hover { color: var(--ink); background: var(--paper-2); }
.f-opt:has(input:checked) { color: var(--petrol-deep); background: var(--petrol-wash); border-left-color: var(--petrol); font-weight: 600; }
.f-opt:has(input:focus-visible), .f-y:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: -2px; }
.f-opt.is-zero { opacity: 0.45; }
.f-all { color: var(--ink-3); }
.f-years { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: var(--s1); }
.f-y { position: relative; display: flex; align-items: center; justify-content: center; min-height: 2rem; font: 500 0.78rem/1 var(--sans); color: var(--ink-2); background: var(--paper-2); cursor: pointer; transition: background-color var(--quick) ease, color var(--quick) ease; }
.f-y:hover { background: var(--rule); color: var(--ink); }
.f-y:has(input:checked) { background: var(--petrol); color: var(--on-dark); }
.f-more > summary { cursor: pointer; font: 600 var(--t-xs)/1 var(--sans); color: var(--petrol); padding: var(--s2) var(--s1); list-style: none; }
.f-more > summary::-webkit-details-marker { display: none; }
.f-more > summary::after { content: " +"; }
.f-more[open] > summary::after { content: " \2212"; }
.fav-blank { background: var(--paper-2); outline: 1px solid var(--rule); outline-offset: -1px; }
.searchbar .q { position: relative; display: block; flex: 1 1 18rem; min-width: 12rem; }
.searchbar .q .i { position: absolute; left: 0.85rem; top: 50%; translate: 0 -50%; color: var(--ink-3); width: 1.05rem; height: 1.05rem; }
.searchbar input[type=search] { width: 100%; height: 2.9rem; padding: 0 0.9rem 0 2.5rem; border: 1px solid var(--field); background: var(--paper); font: 400 1rem/1 var(--sans); color: var(--ink); }
.searchbar input[type=search]:focus { outline: 2px solid var(--petrol); outline-offset: 0; border-color: var(--petrol); }
.count { font: 500 var(--t-sm)/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.count:empty { display: none; }
.searching { font: 500 var(--t-sm)/1 var(--sans); color: var(--petrol); }
.searching::after { content: "\2026"; }
@media (max-width: 56rem) {
  .archive { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "side" "main"; }
  .searchbar { top: 4.4rem; }
  .facets { position: static; max-height: none; overflow: visible; padding: 0; border-bottom: 1px solid var(--rule); }
  .facets > summary { display: flex; align-items: center; gap: var(--s1); min-height: 2.9rem; cursor: pointer; list-style: none; font: 600 var(--t-sm)/1 var(--sans); color: var(--ink); }
  .facets > summary::-webkit-details-marker { display: none; }
  .facets-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); column-gap: var(--s4); padding-bottom: var(--s3); }
}
.more-wrap { display: flex; justify-content: center; padding: var(--s5) 0; }
.ylist h2 { display: flex; justify-content: space-between; align-items: baseline; font: 600 var(--t-2xl)/1 var(--display); margin: var(--s6) 0 0; padding-bottom: var(--s2); border-bottom: 2px solid var(--ink); }
.ylist .yc { font: 500 var(--t-xs)/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ylist section[hidden], .row[hidden] { display: none; }
.js .ylist:not(.ready) [data-late] { display: none; }
.row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.row time { font: 450 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row .t > a:first-child { display: block; font: 600 1.25rem/1.2 var(--display); color: var(--ink); text-decoration: none; }
.row .t > a:first-child:hover { color: var(--petrol); }
.row .o { display: inline-flex; align-items: center; gap: var(--s1); font: 500 var(--t-xs)/1.4 var(--sans); color: var(--ink-2); margin-top: var(--s1); text-decoration: none; padding-block: 0.15rem; }
.row a.o:hover { color: var(--petrol); }
.row a.o .i { width: 0.85em; height: 0.85em; color: var(--ink-3); transition: transform var(--quick) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .row a.o:hover .i { transform: translate(1px, -1px); color: var(--petrol); } }
.results { margin-top: var(--s5); border-top: 2px solid var(--ink); }
.results .x { display: block; font: 400 0.98rem/1.55 var(--serif); color: var(--ink-2); margin-top: var(--s1); }
.results mark { background: var(--petrol-wash); color: var(--ink); }
.results p { margin-top: var(--s3); }
.empty { padding: var(--s6) 0; font: 400 1rem/1.5 var(--sans); color: var(--ink-2); }
@media (max-width: 40rem) { .row { grid-template-columns: 1fr; row-gap: 0.2rem; } }

/* article */
.item-head { padding: var(--s7) 0 var(--s5); }
.crumb { font: 500 var(--t-sm)/1.4 var(--sans); color: var(--ink-3); margin-bottom: var(--s4); }
.crumb a { color: var(--ink-2); text-decoration: none; } .crumb a:hover { color: var(--petrol); text-decoration: underline; }
.item h1 { font-size: var(--t-4xl); line-height: 1; }
.source { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); font-family: var(--sans); }
.pub { display: flex; align-items: center; gap: var(--s1); font: 600 1rem/1 var(--sans); }
.pub-logo { height: 1.7rem; width: auto; max-width: 11rem; object-fit: contain; }
.when { margin: 0; font: 450 0.95rem/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.orig { margin: 0 0 0 auto; display: flex; align-items: center; gap: var(--s1) var(--s3); flex-wrap: wrap; }
.gone { font: 400 var(--t-xs)/1.3 var(--sans); color: var(--ink-3); }
@media (max-width: 40rem) { .orig { margin-left: 0; } }
.note-box { border: 1px solid var(--rule); background: var(--paper-2); padding: var(--s2) var(--s3); font: 400 0.95rem/1.5 var(--sans); color: var(--ink-2); margin: 0 0 var(--s5); }
.body { font-size: var(--t-lg); line-height: 1.7; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; font-variant-numeric: oldstyle-nums proportional-nums; }
.body p { margin-bottom: 1.1em; orphans: 2; widows: 2; }
.body a { overflow-wrap: anywhere; }
.body img { margin: var(--s5) 0; }
.body blockquote { margin: var(--s5) 0; padding-left: var(--s3); border-left: 2px solid var(--petrol); color: var(--ink-2); font-style: italic; }
.body iframe { max-width: 100%; }
.body hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }
.body h2, .body h3, .body h4 { margin: var(--s6) 0 var(--s2); font-size: var(--t-xl); }
.body table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; font-variant-numeric: tabular-nums lining-nums; }
.body td, .body th { border: 1px solid var(--rule); padding: var(--s1) var(--s2); }
.item[dir="rtl"] .body { direction: rtl; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s6) 0 0; padding-top: var(--s3); border-top: 1px solid var(--rule); font: 500 var(--t-sm)/1 var(--sans); color: var(--ink-2); }
.share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.share a, .share button:not(.copy) { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--rule); color: var(--ink-2); background: var(--paper); cursor: pointer; transition: border-color var(--quick) ease, color var(--quick) ease, transform var(--press) var(--ease-out); }
.share a:hover, .share button:not(.copy):hover { border-color: var(--petrol); color: var(--petrol); }
.share button[data-done]:not(.copy) { border-color: var(--petrol); color: var(--petrol); background: var(--petrol-wash); }
.share .cite { margin-left: auto; min-height: 2.75rem; }
@media (max-width: 40rem) { .share > span:first-child { flex-basis: 100%; } .share .cite { margin-left: 0; flex-basis: 100%; justify-content: center; } }
.related { margin-top: var(--s7); padding: var(--s6) 0; background: var(--paper-2); border-top: 1px solid var(--rule); }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.related a { font: 600 1.3rem/1.15 var(--display); color: var(--ink); text-decoration: none; }
.related a:hover { color: var(--petrol); }
@media (max-width: 52rem) { .related ul { grid-template-columns: 1fr; } }

/* books */
.books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s6) var(--gap); }
.books li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s3); align-items: start; scroll-margin-top: 6rem; }
.books h2 { font-size: var(--t-xl); line-height: 1.15; }
.books h2 a { color: var(--ink); text-decoration: none; } .books h2 a:hover { color: var(--petrol); }
.books .sub { font: 400 1rem/1.35 var(--serif); color: var(--ink-2); margin: var(--s1) 0 var(--s2); }
.rec { font: 450 var(--t-sm)/1.5 var(--sans); color: var(--ink-3); }
.book { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); padding-block: var(--s7); align-items: start; }
.book > figure { grid-column: 1 / span 4; margin: 0; }
.book > div { grid-column: 6 / span 7; }
.book .rec { margin-top: var(--s3); }
.buy { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 52rem) { .book > figure, .book > div { grid-column: 1 / -1; } .book > figure { max-width: 14rem; } }

/* footer */
.foot { background: var(--petrol-ink); color: var(--on-dark-2); font: 400 0.95rem/1.55 var(--sans); overflow: hidden; }
.foot > .wrap { padding-block: var(--s6) var(--s5); }
.foot-cta { border-bottom: 1px solid oklch(32% 0.04 210); }
.foot-cta .wrap { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4) var(--s6); padding-block: var(--s7) var(--s6); }
.foot .foot-cta h2 { font: 500 var(--t-4xl)/1 var(--display); color: #fff; max-width: 15ch; margin: 0; letter-spacing: -0.015em; text-wrap: balance; }
.foot-cta .cta { margin: 0; }
.foot .btn-light { color: var(--petrol-ink); }
.btn-line { background: transparent; color: #fff; border-color: oklch(55% 0.04 210); }
.btn-line:hover { background: oklch(30% 0.04 212); border-color: #fff; color: #fff; }
.addr-lg { display: inline-flex; align-items: center; gap: var(--s1); font: 600 1.05rem/1.2 var(--sans); color: #fff; text-decoration-color: oklch(50% 0.04 210); text-underline-offset: 0.25em; padding: var(--s2) 0; }
.addr-lg .i { color: var(--on-dark-2); }
.wordmark { margin: 0; padding: 0 var(--gutter); font: 500 clamp(3.2rem, 13.2vw, 13.5rem)/0.8 var(--display); letter-spacing: -0.035em; color: oklch(30% 0.042 212); white-space: nowrap; overflow: hidden; text-align: center; user-select: none; margin-bottom: -0.14em; }
.foot > .wrap > :nth-child(1) { grid-column: 1 / span 4; }
.foot > .wrap > :nth-child(2) { grid-column: 5 / span 3; }
.foot > .wrap > :nth-child(3) { grid-column: 8 / span 2; }
.foot > .wrap > :nth-child(4) { grid-column: 10 / span 3; }
@media (max-width: 64rem) and (min-width: 52.01rem) { .foot > .wrap > :nth-child(1) { grid-column: 1 / span 6; } .foot > .wrap > :nth-child(2) { grid-column: 7 / span 6; } .foot > .wrap > :nth-child(3) { grid-column: 1 / span 6; } .foot > .wrap > :nth-child(4) { grid-column: 7 / span 6; } }
.foot h2 { font: 600 0.95rem/1.2 var(--sans); color: #fff; margin: 0 0 var(--s3); }
.foot a { color: var(--on-dark); }
.foot a:hover { color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; }
.foot ul a { display: inline-block; padding: var(--s1) 0; text-decoration: none; }
.foot .name { font: 600 1.8rem/1.1 var(--display); color: #fff; margin: 0 0 var(--s2); }
/* social row: icon boxes are 2.75rem; pull the row left by the box padding so the first glyph sits on the text edge */
.foot ul.soc { display: flex; gap: 0; margin: var(--s3) 0 0 calc((1.05rem - 2.75rem) / 2); }
.foot .soc a { width: 2.75rem; height: 2.75rem; padding: 0; color: var(--on-dark-2); display: inline-flex; }
.foot .soc a:hover { color: #fff; }
.foot .email .addr { color: #fff; text-decoration-color: oklch(45% 0.04 210); }
.foot .email .addr .i { color: var(--on-dark-2); }
.foot .copy { background: transparent; color: var(--on-dark); border-color: oklch(45% 0.04 210); }
.foot .copy:hover { border-color: #fff; color: #fff; }
.foot .legal { grid-column: 1 / -1 !important; border-top: 1px solid oklch(35% 0.04 210); padding-top: var(--s3); font-size: var(--t-xs); margin: 0; }
@media (max-width: 52rem) { .foot > .wrap > * { grid-column: 1 / -1 !important; } }

/* reduced motion: keep fades, drop movement (Emil) */
/* ------------------------------------------------------------------ globe (src/js/globe.js) */
.globe { display: block; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero-sub { font: 400 var(--t-sm)/1.5 var(--sans); color: var(--ink-3); margin: var(--s1) 0 0; max-width: 46ch; }

/* ------------------------------------------------------------------ header sketches (src/js/viz.js)
   One per page, in the globe's dot language: petrol and ink dots, brass accents, paper. Each canvas has its
   final shape in CSS before the script runs, so nothing shifts when it starts. */
.viz-hero { padding: var(--s6) 0 var(--s5); }
.viz-hero .ph-grid { align-items: center; }
.viz-hero .ph-grid > :first-child { grid-column: 1 / span 5; }
.ph-viz { grid-column: 7 / span 6; margin: 0; position: relative; min-width: 0; }
.ph-viz canvas { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.vsketch-voice canvas { aspect-ratio: 25 / 11; }
.vsketch-ripple canvas { aspect-ratio: 25 / 13; cursor: pointer; touch-action: manipulation; }
.vsketch-portrait canvas { aspect-ratio: 25 / 23; max-height: 440px; }
.vsketch-envelope { max-width: 34rem; width: 100%; justify-self: end; }
.vsketch-envelope canvas { aspect-ratio: 5 / 3; }
@media (max-width: 52rem) { .viz-hero .ph-grid > :first-child, .ph-viz { grid-column: 1 / -1; } }
.side-photo { margin: 0; }
.side-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 25%; }

/* article locator: a small globe beside the source line, or out in the right margin on wide screens */
.where { margin: var(--s4) 0 0; display: flex; align-items: center; gap: var(--s3); }
.where-globe { flex: none; width: 6.5rem; height: 6.5rem; cursor: grab; }
.where figcaption { display: flex; flex-wrap: wrap; gap: 0.3rem var(--s3); font: 500 var(--t-sm)/1.3 var(--sans); }
.where figcaption a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.where figcaption a:hover { color: var(--petrol); border-color: var(--petrol); }
@media (min-width: 86rem) {
  .item-head .narrow { position: relative; }
  .where { position: absolute; top: 0; left: calc(100% + var(--s5)); width: 12rem; margin: 0; flex-direction: column; align-items: flex-start; }
  .where-globe { width: 12rem; height: 12rem; }
}

/* ------------------------------------------------------------------ regions: arrow instead of counts */
.regions .rl .i { width: 1rem; height: 1rem; color: var(--ink-3); transition: transform var(--quick) var(--ease-out), color var(--quick) ease; }
.regions a:hover .rl .i { transform: translate(2px, -2px); color: var(--petrol); }

/* ------------------------------------------------------------------ broadcasters (avatar group hover from transitions-dev) */
.onair-strip { border-block: 1px solid var(--rule); background: var(--paper); padding: var(--s4) 0; }
.onair-strip .wrap { display: flex; align-items: center; gap: var(--s3) var(--s5); flex-wrap: wrap; }
.onair-strip .h-sm { margin: 0; color: var(--ink-3); font-weight: 500; }
/* same quiet treatment as the home logo wall: gray at rest, the broadcaster's colors on hover */
.t-avatars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s4); flex: 1; }
.t-avatar { transform-origin: center; transform: translateY(var(--shift, 0px)) scale(var(--scale-active, 1)); transition: transform var(--avatar-dur) var(--avatar-ease-in); will-change: transform; }
.t-avatar img[data-src] { visibility: hidden; display: block; }
html:not(.js) .t-avatar img[data-src] { display: none; }
.t-avatar img { height: 1.5rem; width: auto; max-width: 6.5rem; object-fit: contain; filter: grayscale(1) contrast(1.15); opacity: 0.66; mix-blend-mode: multiply; transition: filter 260ms ease, opacity 260ms ease; }
@media (hover: hover) and (pointer: fine) { .t-avatar:hover img { filter: none; opacity: 1; } }
@media (max-width: 40rem) { .onair-strip .wrap { display: block; } .t-avatars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: var(--s4) var(--s3); margin-top: var(--s3); } }

/* lazy images fade in once decoded (site.js marks them); the placeholder is the frame's own color */
.js .c-media img[loading=lazy], .js .vid-img img, .js .shelf img, .js .books .cover img[loading=lazy] { opacity: 0; transition: opacity 500ms ease, transform 700ms var(--ease-out); }
.js .c-media img.is-in, .js .vid-img img.is-in, .js .shelf img.is-in, .js .books .cover img.is-in { opacity: 1; }
.shelf a, .books .cover { background: var(--paper-2); }

/* ------------------------------------------------------------------ videos */
/* interviews: a lead still with two beside it, then rows of four, all on the 12-column grid */
.vids { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s5) var(--gap); }
.vids-feat { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.vids-feat > .vid-cell { grid-column: span 3; }
.vids-feat > .vid-cell:nth-child(1) { grid-column: 1 / span 8; grid-row: span 2; }
.vids-feat > .vid-cell:nth-child(2), .vids-feat > .vid-cell:nth-child(3) { grid-column: 9 / span 4; }
@media (max-width: 62rem) { .vids-feat > .vid-cell, .vids-feat > .vid-cell:nth-child(2), .vids-feat > .vid-cell:nth-child(3) { grid-column: span 6; } .vids-feat > .vid-cell:nth-child(1) { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 34rem) { .vids-feat > .vid-cell, .vids-feat > .vid-cell:nth-child(2), .vids-feat > .vid-cell:nth-child(3) { grid-column: 1 / -1; } }
.vid { display: grid; gap: var(--s1); text-decoration: none; color: var(--ink); }
.vid-img { position: relative; display: block; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
/* stills sit in one quiet, warm tone so loud broadcast graphics don't compete; color returns on hover and focus */
.vid-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.82) sepia(0.14) contrast(0.98); transition: transform 500ms var(--ease-out), opacity var(--quick) ease, filter 400ms ease; }
.vid-img::after { content: ""; position: absolute; inset: 0; background: var(--paper-2); mix-blend-mode: multiply; opacity: 0.35; transition: opacity 400ms ease; pointer-events: none; }
.vid:focus-visible .vid-img img { filter: none; }
.vid:focus-visible .vid-img::after { opacity: 0; }
.vid-play { position: absolute; z-index: 1; left: var(--s2); bottom: var(--s2); display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; background: var(--paper); color: var(--ink); transition: background-color var(--quick) ease, color var(--quick) ease, transform var(--quick) var(--ease-out); }
.vid-play .i { width: 1rem; height: 1rem; fill: currentColor; }
.vid-t { font: 600 1.12rem/1.18 var(--display); letter-spacing: -0.01em; margin-top: var(--s1); text-wrap: balance; padding-bottom: 0.1em; overflow-wrap: break-word; }
.vid-m { font: 450 var(--t-xs)/1.3 var(--sans); color: var(--ink-3); }
.vid-big .vid-t { font-size: var(--t-2xl); line-height: 1.1; letter-spacing: -0.02em; max-width: 34ch; }
.vid-big .vid-play { width: 3.4rem; height: 3.4rem; }
@media (max-width: 52rem) { .vid-big .vid-t { font-size: var(--t-xl); } }
@media (hover: hover) and (pointer: fine) {
  .vid:hover .vid-img img { transform: scale(1.03); filter: none; }
  .vid:hover .vid-img::after { opacity: 0; }
  .vid:hover .vid-play { background: var(--petrol); color: var(--on-dark); }
  .vid:hover .vid-t { color: var(--petrol); }
}
.vid:active .vid-play { transform: scale(0.94); }

/* video player: native dialog with the transitions-dev modal open/close */
.t-modal { transform-origin: center; transform: scale(var(--modal-scale)); opacity: 0; pointer-events: none; transition: transform var(--modal-open-dur) var(--modal-ease), opacity var(--modal-open-dur) var(--modal-ease); will-change: transform, opacity; }
.t-modal.is-open { transform: scale(1); opacity: 1; pointer-events: auto; }
.t-modal.is-closing { transform: scale(var(--modal-scale-close)); opacity: 0; pointer-events: none; transition: transform var(--modal-close-dur) var(--modal-ease), opacity var(--modal-close-dur) var(--modal-ease); }
.player { border: 0; padding: 0; background: transparent; width: min(64rem, 100vw - 2 * var(--gutter)); max-width: none; max-height: none; overflow: visible; }
.player::backdrop { background: oklch(15% 0.02 230 / 0.82); backdrop-filter: blur(4px); }
.player-box { position: relative; background: var(--ink); color: var(--on-dark); }
.player-frame { aspect-ratio: 16 / 9; background: #000; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player-cap { display: grid; gap: 0.2rem; margin: 0; padding: var(--s2) var(--s3) 0; font: 400 var(--t-xs)/1.35 var(--sans); color: var(--on-dark-2); }
.player-cap b { font: 600 1.05rem/1.25 var(--display); color: #fff; }
.player-note { margin: 0; padding: var(--s1) var(--s3) var(--s2); font: 400 0.72rem/1.3 var(--sans); color: var(--on-dark-2); opacity: 0.7; }
.player-x { position: absolute; top: calc(-1 * var(--s1) - 2.75rem); right: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; }
.player-x:hover { background: #fff; }
.player-x:active { transform: scale(0.95); }

/* press photo lightbox: same dialog motion as the player */
.lightbox { border: 0; padding: 0; background: transparent; width: min(60rem, 100vw - 2 * var(--gutter)); max-width: none; max-height: none; overflow: visible; }
.lightbox::backdrop { background: oklch(15% 0.02 230 / 0.82); backdrop-filter: blur(4px); }
.lb-box { position: relative; background: var(--paper); padding: 10px 10px 0; }
.lb-img img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 10rem); object-fit: contain; background: var(--paper-2); }
.lb-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0; padding: var(--s2) 0; font: 500 var(--t-sm)/1.3 var(--sans); color: var(--ink-2); }
.lb-cap b { color: var(--ink); }
.lb-cap .dl { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--petrol); }
.lb-cap .dl .i { width: 1em; height: 1em; }
.lb-x { position: absolute; top: calc(-1 * var(--s1) - 2.75rem); right: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; }
.lb-x:hover { background: #fff; }

/* tooltips: say where a link to a filtered list goes */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 30; transform: translate(-50%, 4px); padding: 0.45rem 0.65rem; background: var(--petrol-ink); color: var(--on-dark); font: 500 0.75rem/1.2 var(--sans); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 160ms ease, transform 160ms var(--ease-out); }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { [data-tip]::after { display: none; } }
.pub { text-decoration: none; color: var(--ink); }
.pub:hover b { color: var(--petrol); }

/* ------------------------------------------------------------------ press list, topics, profiles */
.news { background: var(--paper-2); border-block: 1px solid var(--rule); }
/* in the news: two columns of clippings, outlet and date above the headline */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--ink); }
.news-list li { display: grid; align-content: start; gap: var(--s1); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.news-list .meta { margin: 0; }
.news-list .fav { filter: grayscale(1); opacity: 0.8; transition: filter 260ms ease, opacity 260ms ease; }
.news-list li:hover .fav { filter: none; opacity: 1; }
.news-list a { font: 500 1.1rem/1.28 var(--display); letter-spacing: -0.005em; color: var(--ink); text-decoration: none; text-wrap: pretty; }
.news-list a .i { display: inline; width: 0.8em; height: 0.8em; margin-left: 0.25em; vertical-align: -0.05em; color: var(--ink-3); }
.news-list a:hover { color: var(--petrol); }
@media (max-width: 52rem) { .news-list { grid-template-columns: 1fr; } }
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 var(--gap); }
.topics li { display: grid; gap: var(--s1); padding: var(--s3) 0 var(--s4); border: 0; border-top: 1px solid var(--brass-soft); background: none; }
.topics b { font: 600 1.25rem/1.15 var(--display); color: var(--ink); }
.topics span { font: 400 var(--t-sm)/1.5 var(--sans); color: var(--ink-2); }
.profiles { list-style: none; margin: 0; padding: 0; display: grid; }
.profiles a { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) 0; min-height: 2.4rem; text-decoration: none; color: var(--ink-2); font: 500 var(--t-sm)/1.2 var(--sans); }
.profiles a .i { width: 0.85em; height: 0.85em; margin-left: auto; color: var(--ink-3); }
.profiles a:hover { color: var(--petrol); }
.foot ul.profiles-foot a { display: flex; align-items: center; gap: var(--s2); color: var(--on-dark); min-height: 2rem; padding: 0.25rem 0; }
.profiles-foot a .i { margin-left: 0.2rem; color: var(--on-dark-2); }
.profiles-foot .fav-blank { background: oklch(35% 0.04 210); outline: 0; }

/* ------------------------------------------------------------------ item source row and pointer box */
.source { display: grid; gap: var(--s3); }
.src-id { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.orig { margin: 0; justify-content: flex-start; }
.stub-box { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3); margin: var(--s4) 0; padding: var(--s4); background: var(--paper-2); border: 1px solid var(--rule); }
.stub-box p { margin: 0; font: 400 1rem/1.5 var(--sans); color: var(--ink-2); }
.stub-box .btn { grid-column: 1 / -1; justify-self: start; }
.stub-box > :first-child:not(img) { grid-column: 1 / -1; }

.photos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.photos li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: var(--s2); align-items: center; }
.photos img { width: 3.6rem; height: 3.6rem; object-fit: cover; object-position: 50% 25%; }
.photos span { display: grid; gap: 0.15rem; }
.photos b { font: 600 var(--t-sm)/1.2 var(--sans); }
.ph-thumb { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.ph-thumb img { transition: transform var(--quick) var(--ease-out); }
.ph-thumb:hover img { transform: scale(1.05); }
.photos .dl { display: inline-flex; align-items: center; gap: 0.3rem; font: 450 var(--t-xs)/1.2 var(--sans); color: var(--ink-3); text-decoration: none; }
.photos .dl:hover { color: var(--petrol); }
.photos .dl .i { width: 0.9em; height: 0.9em; }

/* ------------------------------------------------------------------ book pages */
.buy { display: block; margin-top: var(--s5); }
.buy .h-sm { margin-bottom: var(--s2); }
.buy-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.book-cover img { box-shadow: 0 1px 0 var(--rule), 0 24px 40px -24px oklch(20% 0.03 250 / 0.45); }
.book-next { margin: var(--s7) 0 var(--s6); border-top: 1px solid var(--rule); }
.book-next a { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s4) 0; text-decoration: none; color: var(--ink); }
.book-next span { font: 500 var(--t-xs)/1 var(--sans); color: var(--ink-3); }
.book-next b { font: 600 var(--t-xl)/1.15 var(--display); }
.book-next .i { margin-left: auto; color: var(--ink-3); transition: transform var(--quick) var(--ease-out); }
.book-next a:hover b { color: var(--petrol); }
.book-next a:hover .i { transform: translate(2px, -2px); color: var(--petrol); }
.side-box .link-arrow .i:first-child { margin-right: 0.2rem; }

/* ------------------------------------------------------------------ number pop-in, error shake, success check (transitions-dev) */
@keyframes t-digit-pop-in { 0% { transform: translate(0, var(--digit-distance)); opacity: 0; filter: blur(var(--digit-blur)); } 100% { transform: translate(0, 0); opacity: 1; filter: blur(0); } }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.count.is-animating .t-digit { animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both; animation-delay: calc(var(--d, 0) * var(--digit-stagger)); }
.form .is-shaking { animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear; }
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100% { transform: translateX(0); }
}
.form-msg { display: flex; gap: var(--s2); align-items: flex-start; }
.t-success-check { display: inline-block; flex: none; width: 1.3rem; height: 1.3rem; color: var(--petrol); transform-origin: center; opacity: 0; will-change: transform, opacity; }
.t-success-check svg { display: block; overflow: visible; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.t-success-check svg path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.t-success-check[data-state="in"] { animation: t-check-fade var(--check-opacity-dur) var(--check-ease-out) forwards, t-check-rotate var(--check-rotate-dur) var(--check-ease-out) forwards; }
.t-success-check[data-state="in"] svg path { animation: t-check-draw var(--check-path-dur) var(--check-ease-out) var(--check-path-delay) forwards; }
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ page transitions and reading progress */
@supports (animation-timeline: scroll()) {
  .item::before { content: ""; position: fixed; top: 4.4rem; left: 0; right: 0; height: 2px; background: var(--brass); transform-origin: 0 50%; transform: scaleX(0); animation: progress linear both; animation-timeline: scroll(root); z-index: 41; pointer-events: none; }
  @keyframes progress { to { transform: scaleX(1); } }
}
.clocks .time small { font-size: 0.72em; font-weight: 500; color: var(--ink-3); margin-left: 0.1em; }

/* the page grid: dots on every paper surface (body, and the bands that set their own paper) */
body, .wall, .books-band, .news, .form-band { background-image: var(--dots); background-size: 24px 24px; }
/* long reading stays on plain paper: articles, and the About and Privacy text */
.item, .section:has(> .read-grid) { background-color: var(--paper); }

/* rubber band at the end of the page (site.js): pulling past the bottom lifts the page a little and the rest
   of the footer wordmark comes into view; it springs back when the pull stops. The browser's own bounce is
   turned off where this runs, and below the page the footer's color continues, never a pale gap. */
html.has-rubber { overscroll-behavior-y: none; }
html.at-end { background: var(--petrol-ink); }
.rb-move { transition: transform 620ms cubic-bezier(0.2, 1, 0.3, 1); }
/* the footer's color continues below it, for the gap a pull opens (a shadow adds no scroll height) */
.foot.rb-move { box-shadow: 0 160px 0 var(--petrol-ink); }
html.is-pulling .rb-move { transition: none; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .js .enter > :not(h1), .js .split .ln > span, .js .hero-portrait .cutout { animation: fade 300ms ease both; animation-delay: 0ms; }
  .js [data-reveal][data-visible] .logos li img { animation: fade 300ms ease backwards; animation-delay: 0ms; }
  .js .onair[data-reveal] figure img { clip-path: none; transition: none; }
  .btn:active, .copy:active, .share a:active, .share button:active, .iconbtn:active, .menu summary:active, .kind label:active span { transform: none; }
  .menu[open] nav { transform: none; }
  .link-arrow .i, .shelf img, .books .cover img, .logos img { transition: none; }
  .sec-head h2, .acard, .regions li, .shelf li, .topics li { animation: none !important; }
  .t-avatar, .t-modal, .vid-img img, .c-media > img, .ph-thumb img { transition: none !important; transform: none !important; }
  .vid-img::after, [data-tip]::after, .t-avatar img, .news-list .fav, .c-paper::after { transition: none !important; }
  .count .t-digit, .form .is-shaking { animation: none !important; }
  .t-success-check { animation: none !important; opacity: 1; } .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .item::before { display: none; }
}

/* print: an article prints as a clean document with its source; bios and press kit print plainly */
@page { size: auto; margin: 18mm 16mm 20mm; }
@media print {
  :root { --paper: #fff; --ink: #000; --ink-2: #222; --ink-3: #444; --petrol: #000; }
  html { scroll-padding: 0; }
  body { background: #fff; color: #000; font: 400 10.5pt/1.5 var(--serif); }
  .mast, .foot, .finder, .share, .related, .menu, .skip, .cta, .press-line, .tools, .wall, .onair, .newsletter, .books-band .link-arrow, form, .urgent, .copy, .soc, .iconbtn, .side .copy, .clocks, video, iframe { display: none !important; }
  .print-head { display: block; font: 500 8pt/1.2 var(--sans); color: #555; border-bottom: 0.5pt solid #999; padding-bottom: 3mm; margin: 0 0 6mm; }
  .wrap, .narrow { max-width: none; padding: 0; }
  .section, .page-hero, .item-head, .hero { padding: 0 0 6mm; border: 0; background: none; }
  h1 { font-size: 24pt; } h2 { font-size: 15pt; } h3 { font-size: 12pt; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  p, li, blockquote { orphans: 3; widows: 3; }
  img, figure, blockquote, .card, .side-box { break-inside: avoid; }
  .hero-portrait, .ph-photo { max-width: 45mm; }
  .globe, .ph-viz, .where { display: none; }
  .sec-head h2, .acard, .regions li, .shelf li, .topics li { animation: none !important; }
  .js .enter > *, .js .split .ln > span, .js .hero-portrait .cutout { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .body { font-size: 10.5pt; line-height: 1.55; hyphens: auto; }
  .body a, .prose a { color: #000; text-decoration: none; }
  .source { border-top: 0.5pt solid #999; }
  .orig { display: block; margin: 2mm 0 0; }
  .orig .btn { display: inline; border: 0; padding: 0; min-height: 0; background: none; color: #000; font: 500 9pt var(--sans); }
  .orig .btn::after { content: ": " attr(href); font-weight: 400; overflow-wrap: anywhere; }
  .orig .btn .i, .orig .linkbtn { display: none; }
  .opener::first-letter { color: #000; }
  .grid-12, .hero .wrap, .ph-grid, .read-grid, .req-grid, .sp-grid { display: block; }
  .side { position: static; margin-top: 6mm; }
  .side-box { border: 0.5pt solid #999; padding: 4mm; }
  .logos img { filter: none; mix-blend-mode: normal; }
  .row { break-inside: avoid; padding: 2mm 0; }
}

/* ==========================================================================
   Round 12: Dr Hellyer's comments of 9 Nov 2026
   Four affiliations, four contact routes, Arcs & Dis-Order in four places, the country atlas,
   book endorsements in place of press quotes, no email address anywhere, British spelling.
   ========================================================================== */

/* masthead: search, Subscribe, Media requests */
.tools { gap: var(--s1); }
.tools .search-btn { order: -2; }
.sub-link { font: 500 var(--t-sm)/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: var(--s2) var(--s1); background: linear-gradient(var(--petrol), var(--petrol)) no-repeat left bottom / 0 2px; transition: background-size var(--quick) var(--ease-out), color var(--quick) ease; }
.sub-link:hover { color: var(--ink); background-size: 100% 2px; }
@media (max-width: 56rem) { .sub-link { display: none; } }
@media (max-width: 40rem) { .tools .btn { padding: 0.5rem 0.7rem; } .tools .btn .i { display: none; } }

/* hero (round 12): the name, the headline line and the welcome on the left, the portrait on the right standing
   on a rule; under the rule, the four affiliations in one row, then the first row of outlets. Same rhythm as
   round 11, with the extra content set smaller instead of crowding the column. */
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.hero-text { grid-column: 1 / span 7; padding-bottom: var(--s5); }
.hero-text > * { max-width: 40rem; }
.hero h1 { font-size: clamp(2.7rem, 1.5rem + 3vw, 4.4rem); line-height: 0.92; }
.hero h1 .ln { display: inline-block; }
.hero h1.split { display: flex; flex-wrap: wrap; column-gap: 0.22em; } /* the two name parts share a line when they fit, with no indent when they wrap */
.hero-line { margin-top: var(--s3); font-family: var(--display); font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.34rem); line-height: 1.32; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.hero-line .hl-a { display: block; color: var(--petrol); }
.hero-welcome { margin-top: var(--s3); font: 400 var(--t-md)/1.6 var(--serif); color: var(--ink-2); }
.hero .cta-4 { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero .cta-4 .btn { min-height: 2.6rem; padding: 0.55rem 0.95rem; font-size: 0.875rem; }
.hero-nl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.hero-nl-label { margin: 0; display: grid; gap: 0.15rem; font: 400 var(--t-xs)/1.3 var(--sans); color: var(--ink-3); }
.hero-nl-label b { font: 600 var(--t-sm)/1.2 var(--sans); color: var(--ink); }
.hero-nl .nl-line { flex: 1 1 18rem; }
.hero-portrait { grid-column: 7 / span 6; max-height: min(37rem, calc(100svh - 14rem)); }
.hero-foot { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding: var(--s3) 0 var(--s3); position: relative; z-index: 3; background: var(--paper); }
.affil-4 { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--gap); }
.affil-4 a, .affil-4 li > div { display: grid; justify-items: start; align-content: start; gap: 0.4rem; text-decoration: none; padding: 0; }
.affil-4 img { height: 24px; width: auto; max-width: 6.5rem; object-fit: contain; object-position: left; }
.affil .af-r { display: block; font: 400 var(--t-xs)/1.35 var(--sans); color: var(--ink-3); }
.affil .af-t b { display: block; font: 600 0.8rem/1.35 var(--sans); color: var(--ink); }
.affil a:hover .af-t b { color: var(--petrol); }
.hero-foot .prev-line { margin: var(--s2) 0 0; font: 400 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); }
.hero-foot .pub-row { margin-top: var(--s3); }
@media (max-width: 62rem) {
  .hero .wrap.hero-grid { display: block; }
  .hero-text { padding-bottom: 0; }
  .hero-portrait { max-width: 26rem; width: 92%; margin: var(--s5) auto 0; max-height: none; }
  .hero-portrait .cutout { width: 100%; height: auto; }
  .affil-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .hero h1 .ln { display: block; }
  .hero h1 .ln + .ln { margin-left: 0; }
  .hero h1.split { display: block; }
  .hero .cta-4 { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero .cta-4 .btn { justify-content: center; min-height: 2.9rem; }
  .affil-4 { grid-template-columns: minmax(0, 1fr); }
  .logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall.is-expanded .logos li { display: block; }
  .wall .see-all { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s3); }
  .wall.is-expanded .see-all { display: none; }
}
.nl-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); margin: 0; }
.nl-line input { height: 2.9rem; min-width: 13rem; flex: 1 1 12rem; padding: 0 var(--s2); border: 1px solid var(--field); background: var(--paper); font: 400 var(--t-sm)/1 var(--sans); color: var(--ink); }
.nl-line input:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; border-color: var(--petrol); }
.nl-line .btn { height: 2.9rem; }
.nl-privacy { font: 400 var(--t-xs)/1.4 var(--sans); flex-basis: 100%; width: fit-content; }
.nl-line-foot .nl-privacy, .nl-line-dark .nl-privacy { color: var(--on-dark-2); }
.soc-head a { width: 2rem; }
@media (max-width: 78rem) { .soc-head { display: none; } }
.soc-menu { margin-top: var(--s2); }
.book-description { font: 400 var(--t-sm)/1.55 var(--sans); margin-top: var(--s2); }
.book-buy { font-size: var(--t-sm); margin-top: var(--s2); }
.book-edition { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s2); }
.recent-interviews { margin-bottom: var(--s6); }
.recent-interviews .meta { margin-bottom: var(--s1); }
.date-pending { font-size: var(--t-xs); color: var(--ink-3); }
.nl-note { font: 400 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); }
.affil-block { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); margin: var(--s4) 0 0; }
.affil-block li { display: flex; }
.affil-block a, .affil-block li > div { display: flex; align-items: center; gap: var(--s2); padding: 0; }
.affil-block img { height: 32px; width: 5.6rem; max-width: 5.6rem; flex: none; object-fit: contain; object-position: left; }
.affil-block span { font: 500 var(--t-sm)/1.4 var(--sans); color: var(--ink); }
.prev-line { margin-top: var(--s3); font: 400 var(--t-sm)/1.4 var(--sans); color: var(--ink-3); }
.pub-row { border-top: 1px solid var(--rule); padding-top: var(--s1); display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.pub-row .h-sm { color: var(--ink-3); margin: 0; flex: none; }
.logos-row { grid-template-columns: repeat(8, minmax(0, 1fr)); border: 0; background: none; gap: var(--s1); flex: 1 1 20rem; }
.logos-row a { height: 2.2rem; padding: 0 var(--s1); background: none; }
.logos-row img { max-height: 1.4rem; }
.wall .see-all { display: none; }
.wall-note { margin-top: var(--s3); font: 400 var(--t-xs)/1.5 var(--sans); color: var(--ink-3); }

/* endorsements of the books, one per break, static */
.endorse-band { background: var(--paper-2); background-image: var(--dots); background-size: 24px 24px; border-block: 1px solid var(--rule); padding: var(--s6) 0; }
.endorse-band.endorse-tight { padding: var(--s5) 0; }
.endorse-band .endorse { margin: 0; max-width: 54rem; }
.endorse-band .endorse blockquote { margin: 0; }
.endorse-band .endorse blockquote p { font: 400 clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem)/1.42 var(--serif); color: var(--ink); text-wrap: pretty; }
.endorse-band .endorse figcaption { margin-top: var(--s3); display: grid; gap: 0.15rem; font: 400 var(--t-sm)/1.35 var(--sans); color: var(--ink-3); }
.endorse-band .endorse figcaption b { color: var(--ink); font-weight: 600; }
.endorse-band .endorse figcaption a { color: var(--petrol); text-decoration: none; font-weight: 500; justify-self: start; border-bottom: 1px solid currentColor; }
.endorse-band .endorse-sm blockquote p { font-size: var(--t-sm); line-height: 1.5; }

/* Arcs & Dis-Order: the band after the latest work, and the sign-up at the foot of every item */
.nl-band { background: var(--petrol-ink); color: var(--on-dark); padding: var(--s7) 0; }
.nl-band .nl-box { background: transparent; border: 0; padding: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: start; }
.nl-box { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s4); align-items: center; }
.nl-mark { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border: 1px solid currentColor; color: var(--on-dark-2); }
.nl-mark .i { width: 1.2rem; height: 1.2rem; }
.nl-text h2 { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.05 var(--display); margin: 0; }
.nl-text p { margin-top: var(--s2); max-width: 52ch; color: var(--on-dark-2); }
.nl-issues { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s1); }
.nl-issues a { color: var(--on-dark); text-decoration: none; font: 500 var(--t-sm)/1.35 var(--sans); border-bottom: 1px solid color-mix(in oklch, var(--on-dark) 35%, transparent); }
.nl-issues a:hover { border-bottom-color: var(--on-dark); }
.nl-issues time { font: 400 var(--t-xs)/1 var(--sans); color: var(--on-dark-2); }
.nl-act { display: grid; gap: var(--s2); justify-items: start; }
.nl-line-dark input { background: transparent; color: var(--on-dark); border-color: color-mix(in oklch, var(--on-dark) 45%, transparent); }
.nl-line-dark input::placeholder { color: var(--on-dark-2); }
.nl-line-dark .btn { background: var(--on-dark); color: var(--petrol-ink); }
.nl-line-dark .btn:hover { background: var(--paper); }
.nl-band .nl-note { color: var(--on-dark-2); }
@media (max-width: 62rem) { .nl-band .nl-box, .nl-box { grid-template-columns: minmax(0, 1fr); } .nl-mark { display: none; } }

/* the atlas of countries covered */
.lede-sm { max-width: 58ch; color: var(--ink-2); margin-top: calc(-1 * var(--s2)); }
.atlas-wrap { position: relative; margin-top: var(--s5); border: 1px solid var(--rule); background: var(--paper-2); padding: var(--s3); }
.atlas-map { display: block; width: 100%; height: auto; }
.atlas-slot { aspect-ratio: 760 / 358; }
.atlas-map .atlas-land { fill: oklch(91% 0.008 230); stroke: oklch(87% 0.01 230); stroke-width: 0.4; }
.atlas-map .cty path { stroke: var(--paper-2); stroke-width: 0.35; transition: fill 180ms ease, opacity 180ms ease; }
.atlas-map .s1 path { fill: oklch(87% 0.035 195); }
.atlas-map .s2 path { fill: oklch(66% 0.06 200); }
.atlas-map .s3 path { fill: oklch(38% 0.07 205); }
.atlas-map .cty:hover path, .atlas-map .cty:focus-visible path { fill: var(--brass); }
.atlas-map .cty-hit { fill: transparent; pointer-events: all; }
.atlas-map .cty-dot { stroke: var(--paper-2); stroke-width: 0.6; pointer-events: none; }
.atlas-map .s1 .cty-dot { fill: oklch(87% 0.035 195); }
.atlas-map .s2 .cty-dot { fill: oklch(66% 0.06 200); }
.atlas-map .s3 .cty-dot { fill: oklch(38% 0.07 205); }
.atlas-map .cty:hover .cty-dot, .atlas-map .cty:focus-visible .cty-dot { fill: var(--brass); }
.atlas-map .cty:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; }
.atlas-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--ink); color: var(--paper); font: 500 var(--t-xs)/1.2 var(--sans); padding: 0.35rem 0.5rem; white-space: nowrap; transform: translate(-50%, -130%); }
.leg { list-style: none; margin: var(--s3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font: 400 var(--t-xs)/1.3 var(--sans); color: var(--ink-2); }
.leg li { display: inline-flex; align-items: center; gap: var(--s1); }
.leg b { font-weight: 600; color: var(--ink); }
.leg .n { color: var(--ink-3); }
.sw { width: 0.85rem; height: 0.85rem; display: inline-block; border: 1px solid var(--rule); }
.sw.s0 { background: oklch(91% 0.008 230); }
.sw.s1 { background: oklch(87% 0.035 195); }
.sw.s2 { background: oklch(66% 0.06 200); }
.sw.s3 { background: oklch(38% 0.07 205); }
.clist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--gap); margin-top: var(--s5); }
.clist ul { list-style: none; margin: var(--s2) 0 0; padding: 0; columns: 2; column-gap: var(--s4); font: 400 var(--t-sm)/1.8 var(--sans); }
.clist a { color: var(--ink-2); text-decoration: none; }
.clist a:hover { color: var(--petrol); }
.clist .tnum { color: var(--ink-3); font-size: var(--t-xs); }
@media (max-width: 62rem) { .clist { grid-template-columns: minmax(0, 1fr); } .clist ul { columns: 2; } }
@media (max-width: 34rem) { .clist ul { columns: 1; } }

/* books strip: the newest book is labelled, covers keep their own proportions */
.shelf .cov-wrap { position: relative; display: block; background: var(--paper-2); }
.shelf img { object-fit: contain; }
.tag { display: inline-block; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.02em; padding: 0.28rem 0.4rem; background: var(--petrol); color: var(--paper); vertical-align: middle; }
.shelf .tag { position: absolute; top: var(--s1); left: var(--s1); z-index: 1; }
.books .cover img { object-fit: contain; background: var(--paper-2); }
.shelf-end { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
@media (max-width: 62rem) { .shelf-end { grid-template-columns: minmax(0, 1fr); } }
.excerpted { margin-top: var(--s2); font: 400 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); }

/* footer: four affiliations as lines, institution logos, the latest piece */
.affil-lines { display: grid; gap: 0.15rem; font: 400 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); }
.affil-foot { color: var(--on-dark-2); }
.affil-lines-sm { font-size: 0.78rem; color: var(--ink-3); margin-top: var(--s2); }
.foot-id .affil-lines { margin-top: var(--s2); }
.foot .inst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.foot .inst li { display: flex; align-items: center; }
.foot .inst img { height: 30px; width: auto; max-width: 6.4rem; object-fit: contain; opacity: 0.95; }
.foot-get { margin-top: var(--s3); font: 600 var(--t-sm)/1.3 var(--sans); color: var(--on-dark); }
.nl-line-foot input { border-color: color-mix(in oklch, var(--on-dark) 35%, transparent); color: var(--on-dark); background: transparent; }
.nl-line-foot input::placeholder { color: var(--on-dark-2); }
.nl-line-foot .btn { background: var(--on-dark); color: var(--petrol-ink); }
.foot-latest { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid color-mix(in oklch, var(--on-dark) 20%, transparent); font: 400 var(--t-xs)/1.45 var(--sans); color: var(--on-dark-2); display: grid; gap: 0.2rem; }
.foot-latest span { color: var(--on-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; }
.foot-latest a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid color-mix(in oklch, var(--on-dark) 30%, transparent); }
.foot-latest a:hover { border-bottom-color: var(--on-dark); }

/* contact: four routes on one page, one visible at a time */
.route-tabs { display: flex; flex-wrap: wrap; gap: var(--s1); border-bottom: 1px solid var(--rule); margin-bottom: var(--s5); }
.route-tabs a { padding: var(--s3) var(--s3); font: 600 var(--t-sm)/1 var(--sans); color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.route-tabs a:hover { color: var(--ink); }
.route-tabs a.is-on { color: var(--ink); border-bottom-color: var(--petrol); }
.route-panel { max-width: 46rem; }
.route-panel h2 { font: 600 clamp(1.4rem, 1.1rem + 1vw, 1.9rem)/1.1 var(--display); margin: 0 0 var(--s2); }
.route-panel[hidden] { display: none; }
.route-head { border: 0; margin: 0; padding: 0; }
.route-blurb { font: 400 var(--t-md)/1.5 var(--serif); color: var(--ink-2); }

/* about: three bios, facts lists, shared bits */
.side-note { font: 400 var(--t-xs)/1.5 var(--sans); color: var(--ink-3); margin-top: var(--s2); }
.bio { border-top: 1px solid var(--rule); padding-top: var(--s2); margin-top: var(--s2); }
.bio:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.bio-label { font: 600 0.72rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); margin-bottom: var(--s1); }
.bio p:not(.bio-label) { font: 400 var(--t-sm)/1.55 var(--serif); color: var(--ink-2); white-space: pre-line; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s3); margin: var(--s3) 0 0; font: 400 var(--t-sm)/1.4 var(--sans); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); }
.note-sm { font: 400 var(--t-xs)/1.5 var(--sans); color: var(--ink-3); margin-top: var(--s2); }
.topics a { display: grid; gap: var(--s1); text-decoration: none; color: inherit; }
.topics a:hover b { color: var(--petrol); }

/* item pages: byline, subscription label, excerpt box, citation styles, newsletter at the foot */
.byline { margin-top: var(--s2); font: 400 var(--t-sm)/1.4 var(--sans); color: var(--ink-2); }
.paywall { display: inline-block; font: 600 0.66rem/1 var(--sans); letter-spacing: 0.02em; text-transform: uppercase; padding: 0.22rem 0.34rem; border: 1px solid var(--rule); color: var(--ink-3); vertical-align: 0.08em; }
.excerpt-box { margin: var(--s4) 0; padding: var(--s4); border-left: 2px solid var(--petrol); background: var(--paper-2); }
.excerpt-box p { font: 400 var(--t-md)/1.6 var(--serif); color: var(--ink); }
.cites { margin-top: var(--s5); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.cite-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--s2); align-items: start; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.cite-style { font: 600 0.72rem/1.6 var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.cite-row p { font: 400 var(--t-sm)/1.55 var(--sans); color: var(--ink-2); margin: 0; }
.item-nl { margin-top: var(--s6); padding: var(--s4); border: 1px solid var(--rule); background: var(--paper-2); display: grid; gap: var(--s3); }
.item-nl p { font: 400 var(--t-sm)/1.5 var(--sans); color: var(--ink-2); margin-top: var(--s1); }
@media (max-width: 40rem) { .cite-row { grid-template-columns: minmax(0, 1fr) auto; } .cite-style { grid-column: 1 / -1; } }

/* phones: the first row of outlets is the one that matters, the full wall is one tap away */
.see-all { display: none; font: 600 var(--t-xs)/1 var(--sans); color: var(--petrol); text-decoration: none; }
.see-all .i { width: 0.85em; height: 0.85em; vertical-align: -0.05em; }
@media (max-width: 34rem) { .pub-row .see-all { display: inline-flex; align-items: center; gap: 0.2rem; } }

.row-type { font: 600 0.66rem/1 var(--sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); border: 1px solid var(--rule); padding: 0.2rem 0.3rem; margin-left: var(--s2); white-space: nowrap; }

/* very wide wordmarks take two or three cells, so a 20:1 logo is not a 7-pixel strip */
.logos li.span-2 { grid-column: span 2; }
.logos li.span-3 { grid-column: span 3; }
@media (max-width: 34rem) { .logos li.span-3 { grid-column: span 2; } }
.logos img.tall { max-height: 3.2rem; filter: grayscale(1) contrast(1.45); }
.logos-row li.span-2, .logos-row li.span-3 { grid-column: span 2; }

@media (max-width: 52rem) { .vsketch-envelope { display: none; } }

/* masthead (round 12): six items, search, social icons, Subscribe and Media requests on one line */
.nav { flex: none; gap: var(--s3); }
.nav a { white-space: nowrap; }
.mast .wrap { gap: var(--s3); }
.tools { flex: none; }
.soc-head a { width: 1.9rem; height: 2.4rem; }
.soc-head .i { width: 0.95rem; height: 0.95rem; }
.tools .btn-sm { white-space: nowrap; }
@media (max-width: 84rem) { .soc-head { display: none; } }
/* newsletter line: privacy link on the same line where there is room */
.nl-line .nl-privacy { flex-basis: auto; }
.nl-line-foot .nl-privacy { flex-basis: 100%; }
/* footer wordmark: decorative text drawn from an attribute, so it is not read or contrast-checked as content */
.wordmark::before { content: attr(data-text); }
/* institutions in the footer sit on light tiles so dark marks stay visible */
.foot .inst a, .foot .inst li > img { display: inline-flex; }
.foot .inst li { background: var(--paper); padding: 0.45rem 0.6rem; }
.foot .inst img { height: 24px; max-width: 5.6rem; }
/* book grid: a two-line description and the publisher link */
.books .book-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--ink-2); }
.books .book-buy { display: inline-flex; gap: 0.3rem; align-items: center; }
.logos { grid-auto-flow: row dense; }
@media (max-width: 62rem) { .logos-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 34rem) {
  .logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos-row li:nth-child(n+7) { display: none; }
  .wall .see-all { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s3); }
  .wall.is-expanded .logos li.m-hide { display: block; }
  .wall.is-expanded .see-all { display: none; }
}
.book-reviews { margin-top: var(--s6); }
.reviews { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.reviews li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font: 400 var(--t-sm)/1.55 var(--serif); color: var(--ink-2); }
.reviews a { color: var(--ink-2); text-decoration: none; }
.reviews a:hover { color: var(--petrol); }
/* About: the three biographies side by side under the narrative */
.bios-band { border-top: 1px solid var(--rule); background: var(--paper-2); }
.bios-band .sec-head { align-items: baseline; }
.bios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.bios .bio, .bios .bio:first-of-type { margin: 0; padding: var(--s4); border: 1px solid var(--rule); background: var(--paper); }
.bio-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3); }
.bio-top .bio-label { margin: 0; }
.bio-label span { font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-left: 0.3rem; }
.bios .bio p:not(.bio-label) { font: 400 var(--t-sm)/1.6 var(--serif); color: var(--ink-2); margin: 0; white-space: pre-line; }
@media (max-width: 62rem) { .bios { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 62.01rem) {
  .hero-text { grid-row: 1; }
  .hero-portrait { grid-row: 1; }
  .hero-text > .cta-4 { max-width: none; }
  .hero .cta-4 { flex-wrap: nowrap; }
  .hero .cta-4 .btn { padding: 0.5rem 0.8rem; font-size: 0.84rem; white-space: nowrap; }
}
.hero-grid { row-gap: 0; }
@media (min-width: 62.01rem) { .hero-portrait { grid-column: 8 / span 5; } }
/* atlas country lists flow as text, not tall columns */
.clist ul { columns: auto; display: flex; flex-wrap: wrap; gap: 0.15rem var(--s3); line-height: 1.7; }
.clist li { white-space: nowrap; }
.nl-issues-h { margin: var(--s3) 0 0; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-2); }
.nl-issues-h + .nl-issues { margin-top: var(--s1); }
.side .inst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.side .inst img { height: 28px; width: auto; max-width: 6.5rem; object-fit: contain; display: block; }
.speaking h3.h-sm { margin-top: var(--s5); }
.books .book-buy { display: inline; }
.books .book-buy .i { display: inline-block; vertical-align: -0.1em; margin-left: 0.2rem; }
.buy-jump { margin-top: var(--s3); font-size: var(--t-sm); }

/* hero, calmer (round 12, second pass): one statement, one primary action, a quiet line of other routes,
   a slim newsletter line. More air between the groups, less inside them. */
@media (min-width: 62.01rem) { .hero-text { padding-bottom: var(--s6); } }
.hero-text > * { max-width: 36rem; }
.hero h1 { margin-bottom: 0; }
.hero-line { margin-top: var(--s4); font-size: clamp(1.12rem, 0.98rem + 0.4vw, 1.32rem); line-height: 1.38; }
.hero-welcome { margin-top: var(--s3); max-width: 34rem; font: 400 1rem/1.65 var(--serif); color: var(--ink-3); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); max-width: none; }
.hero-actions .btn { min-height: 2.75rem; padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.hero-actions .btn .i { width: 1rem; height: 1rem; }
.route-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.route-links a { display: inline-flex; align-items: center; gap: 0.25rem; padding: var(--s1) 0; font: 600 0.875rem/1.2 var(--sans); color: var(--petrol); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px; transition: background-size var(--quick) var(--ease-out), color var(--quick) ease; }
.route-links a:hover { color: var(--petrol-deep); background-size: 100% 1px; }
.route-links .i { width: 0.8em; height: 0.8em; opacity: 0.7; }
.hero-nl { margin-top: var(--s5); padding-top: 0; border-top: 0; gap: var(--s1) var(--s3); max-width: 32rem; }
.hero-nl .nl-line { flex: 1 1 16rem; }
.hero-nl .nl-line input, .hero-nl .nl-line .btn { height: 2.5rem; }
.hero-nl .nl-line .btn { background: transparent; color: var(--petrol); border-color: var(--petrol); }
.hero-nl .nl-line .btn:hover { background: var(--petrol); color: var(--on-dark); }
.hero-nl .nl-line input { min-width: 0; }
@media (max-width: 34rem) {
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .hero-actions .btn { justify-content: center; min-height: 2.9rem; }
  .route-links { flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
  .route-links a { width: 100%; justify-content: space-between; padding: var(--s3) 0; border-bottom: 1px solid var(--rule); background: none; }
}
/* the portrait stands on the rule above the affiliations; the first screen fits a laptop */
.hero .wrap.hero-grid { row-gap: 0; }
@media (min-width: 62.01rem) { .hero-text { padding-bottom: var(--s4); } }
.hero-line { margin-top: var(--s3); }
.hero-actions { margin-top: var(--s4); gap: var(--s2) var(--s5); }
.hero-nl { margin-top: var(--s4); max-width: 40rem; }
.hero-nl .nl-line { flex-wrap: nowrap; }
@media (max-width: 34rem) { .hero-nl .nl-line { flex-wrap: wrap; } }
/* Media: Dr Hellyer's own words under each news headline */
.news-q { margin: var(--s1) 0 0; padding-left: var(--s2); border-left: 2px solid var(--brass); }
.news-q p { margin: 0; font: italic 400 var(--t-sm)/1.5 var(--display); color: var(--ink-2); }
.news-q p::before { content: "“"; } .news-q p::after { content: "”"; }
.item-quote { margin: var(--s5) 0; padding-left: var(--s3); border-left: 2px solid var(--brass); }
.item-quote p { font: italic 400 var(--t-lg)/1.5 var(--display); margin: 0; }
.item-quote p::before { content: "“"; } .item-quote p::after { content: "”"; }
.item-quote figcaption { margin-top: var(--s2); font: 400 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); }
/* About: current and previous institutions */
.roles-h { margin: var(--s4) 0 var(--s2); color: var(--ink-3); }
.prev-inst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.prev-inst a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.prev-inst img { height: 28px; width: auto; max-width: 9rem; object-fit: contain; filter: grayscale(1); opacity: 0.85; }
.prev-inst a:hover img { filter: none; opacity: 1; }
.prev-name { font: 500 var(--t-sm)/1.3 var(--sans); color: var(--ink-2); max-width: 14rem; }
.rights-note { margin: var(--s4) 0 0; font: 500 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); letter-spacing: 0.01em; }
.endorse-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s5) var(--gap); }
.endorse-row .endorse { margin: 0; max-width: none; }
.endorse-band .endorse-sm blockquote p { font-size: var(--t-md); line-height: 1.5; }
.prev-inst img.inv { filter: invert(1) grayscale(1); }
.lead-img { margin: var(--s5) 0 0; }
.lead-img img { width: 100%; height: auto; max-height: 28rem; object-fit: cover; background: var(--paper-2); }
.old-embeds { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.lead-img-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s2); } .lead-img-set img { max-height: 16rem; }

/* round 13 polish: archive rows, the hero newsletter line, the header tools */
/* archive rows: one quiet line under the title, outlet first, then the type in small capitals */
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; margin: 0.4rem 0 0; font: 500 var(--t-xs)/1.4 var(--sans); color: var(--ink-3); }
.row-meta .o { margin: 0; padding: 0; gap: 0.4rem; color: var(--ink-2); }
.row-meta .o .fav { vertical-align: 0; }
.row-meta .row-type { border: 0; padding: 0; margin: 0; font: 600 0.68rem/1.4 var(--sans); letter-spacing: 0.07em; color: var(--ink-3); }
.row-meta > * + *::before { content: "·"; margin-right: 0.5rem; color: var(--rule-strong, var(--ink-3)); font-weight: 400; letter-spacing: 0; }
.row-meta .paywall { margin-left: 0.15rem; }
/* hero newsletter: one joined control, field and button the same height and weight */
.hero-nl { align-items: center; gap: var(--s2) var(--s4); }
.hero-nl-label span a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; }
.hero-nl-label span a:hover { color: var(--petrol); text-decoration-color: currentColor; }
.hero-nl .nl-privacy { display: none; }
.hero-nl .nl-line { gap: 0; flex-wrap: nowrap; max-width: 26rem; }
.hero-nl .nl-line input, .hero-nl .nl-line .btn { height: 2.75rem; }
.hero-nl .nl-line input { border-right: 0; min-width: 0; }
.hero-nl .nl-line .btn { border: 1px solid var(--petrol); background: var(--petrol); color: var(--on-dark); padding: 0 1.1rem; font-size: 0.875rem; }
.hero-nl .nl-line .btn:hover { background: var(--petrol-deep); border-color: var(--petrol-deep); color: var(--on-dark); }
/* header: navigation, then a quiet tools group set off by hairlines, then the main action */
.mast .tools { gap: var(--s2); }
.tools .soc-head { display: flex; align-items: center; gap: 0; padding: 0 var(--s1); margin: 0 var(--s1); border-inline: 1px solid var(--rule); height: 1.6rem; }
.tools .soc-head a { width: 1.85rem; height: 2.4rem; color: var(--ink-3); }
.tools .soc-head a:hover { color: var(--petrol); }
.tools .soc-head .i { width: 0.9rem; height: 0.9rem; }
.tools > .search-btn .i { width: 1.1rem; height: 1.1rem; }
@media (max-width: 84rem) { .tools .soc-head { display: none; } }

/* round 14: page-top drawings give way to content on phones; the form confirmation reads clearly */
@media (max-width: 52rem) { .viz-hero .ph-viz { display: none; } .viz-hero { padding-bottom: var(--s4); } }
.form-msg { color: var(--ink); background: var(--paper-2); border-color: var(--petrol); opacity: 1; animation: none; }
.book-author { font: 400 var(--t-md)/1.4 var(--serif); color: var(--ink-2); margin: var(--s1) 0 0; }
.nl-issues .nl-sub { color: var(--on-dark-2); font: 400 var(--t-xs)/1.3 var(--sans); }

/* Page speed (round 15): sections below the first screen skip layout until they come near it, so their fonts and
   images do not compete with the first screen. contain-intrinsic-size keeps the scrollbar steady. */
.hero ~ section, .page-hero ~ section ~ section:not(#request):not(#routes), .ylist > section + section, .foot { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.books > li:nth-child(n+2) { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* Round 16: earlier institutions under the "Previously at" line, smaller and lighter than the four current logos */
.prev-logos { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.prev-logos a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.prev-logos img { height: 18px; width: auto; max-width: 7rem; object-fit: contain; filter: grayscale(1); opacity: 0.5; transition: opacity 200ms ease; }
.prev-logos img.inv { filter: invert(1) grayscale(1); }
.prev-logos a:hover img, .prev-logos a:focus-visible img { opacity: 0.85; }

/* Launch forms: the honeypot field is off screen for people (bots fill it); Turnstile sits above the send button */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: var(--s3) 0 0; min-height: 65px; }