/* ==========================================================================
   Oren Tirschwell — site styles (direction 01 · Every Data Point, Slate palette)
   From designs/01-original/style.css (itself a port of prototype/assets/styles.css
   onto the shared palette tokens). Colours come only from assets/tokens.css.
   Concept: "Every data point is a person."
   Warm paper, deep ink, a coral "person" accent and a teal "data" accent.
   Rationale: designs/01-original/NOTES.md and prototype/DESIGN.md. Editing: site-notes/README.md.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* The original's own role names, re-expressed through the --c-* palette tokens
   defined in assets/tokens.css (the Slate palette). Components use these role names. */
:root {
  /* Light surfaces + text */
  --paper: var(--c-bg);              /* page background */
  --paper-2: var(--c-bg-alt);        /* tinted sections, card wells */
  --paper-3: var(--c-line);          /* hairlines on tinted bg, portrait silhouette */
  --card: var(--c-surface);          /* raised surfaces */
  --ink: var(--c-text);              /* primary text; also solid fills for primary buttons */
  --ink-soft: var(--c-text-soft);    /* secondary text */
  --muted: var(--c-text-muted);      /* meta text */
  --line: var(--c-line);             /* hairlines */

  /* "People" accent */
  --coral: var(--c-accent);          /* decoration, large shapes only */
  --coral-ink: var(--c-accent-ink);  /* coral as text/links on light surfaces */
  --coral-soft: var(--c-accent-soft);
  --coral-large: color-mix(in srgb, var(--c-accent) 65%, var(--c-accent-ink)); /* large decorative numerals: keeps 3:1 in every palette */
  --on-coral: var(--c-on-accent);    /* text on a solid coral-ink fill */

  /* "Data" accent */
  --teal: var(--c-accent2);          /* decoration: data points, rules */
  --teal-ink: var(--c-accent2-ink);  /* teal as text */
  --teal-soft: var(--c-accent2-soft);

  /* Highlighter */
  --sun: var(--c-highlight);         /* fill behind .focus words */
  --on-sun: var(--c-on-highlight);   /* text on the highlighter */
  --sun-soft: color-mix(in srgb, var(--c-highlight) 35%, var(--c-bg));
  --sun-line: color-mix(in srgb, var(--c-highlight) 70%, var(--c-bg));
  --sun-ink: color-mix(in srgb, color-mix(in srgb, var(--c-highlight) 50%, var(--c-accent-ink)) 55%, var(--c-text)); /* amber-brown text on --sun-soft */

  /* Inverse ("ink") band: dark sections, footer, music block */
  --band: var(--c-inverse-bg);
  --band-2: var(--c-inverse-surface);
  --on-band: var(--c-inverse-text);
  --on-band-soft: color-mix(in srgb, var(--c-inverse-text) 80%, var(--c-inverse-soft)); /* body copy on the band */
  --mist: var(--c-inverse-soft);     /* secondary text on the band */
  --coral-on-dark: var(--c-inverse-accent);
  --teal-on-dark: var(--c-inverse-accent2);
  --sun-on-dark: var(--c-inverse-highlight);
  --band-edge: var(--c-line);        /* 1px edge so the band still reads in Night */

  /* Data series on the band (share bar) */
  /* Base accent blended with its inverse twin: in Paper this lands on the original's
     validated share-bar series (see NOTES.md); in every palette it stays >= 3:1 on the band. */
  --coral-band: color-mix(in srgb, var(--c-accent) 50%, var(--c-inverse-accent)); /* coral graphics on the band */
  --viz-band-1: var(--coral-band);
  --viz-band-2: color-mix(in srgb, var(--c-accent2) 50%, var(--c-inverse-accent2));
  --viz-band-3: color-mix(in srgb, var(--c-viz-3) 70%, var(--c-inverse-highlight));

  /* Focus rings */
  --focus: var(--c-focus);
  --focus-band: var(--c-inverse-focus);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.18rem, 1.1rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.85rem, 1.55rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.9rem + 2.5vw, 3.8rem);
  --step-5: clamp(3rem, 2.1rem + 4.6vw, 6.2rem);

  /* Space (8pt-ish, fluid at the top end) */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4rem;
  --s-section: clamp(4rem, 3rem + 5vw, 7.5rem);

  --wrap: 72rem;
  --wrap-narrow: 44rem;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgb(var(--c-shadow-rgb) / .06), 0 8px 24px -12px rgb(var(--c-shadow-rgb) / .18);
  --shadow-lift: 0 2px 4px rgb(var(--c-shadow-rgb) / .06), 0 18px 40px -16px rgb(var(--c-shadow-rgb) / .28);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; margin: 0 0 var(--s-4); letter-spacing: -0.015em; font-variation-settings: "SOFT" 50, "opsz" 72; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); letter-spacing: 0; font-weight: 700; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
a { color: var(--coral-ink); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
strong { font-weight: 700; }
::selection { background: var(--sun-soft); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.section--ink :focus-visible, .music :focus-visible, .site-footer :focus-visible { outline-color: var(--focus-band); }
.cta-band :focus-visible { outline-color: var(--on-coral); }

.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s-2) var(--s-4);
  border-radius: var(--radius-pill); font-weight: 600; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s-3); color: var(--paper); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--s-section); position: relative; }
.section--tight { padding-block: calc(var(--s-section) * .6); }
.section--tint { background: var(--paper-2); }
.section--ink { background: var(--band); color: var(--on-band); border-block: 1px solid var(--band-edge); }
.section--ink .section-title, .section--ink h3 { color: var(--on-band); }
.section--ink p { color: var(--on-band-soft); }
.section--ink a { color: var(--coral-on-dark); }
.section--ink a:hover { color: var(--on-band); }
.stack > * + * { margin-top: var(--s-5); }
.grid-2 { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Prose: long-form copy */
.prose { max-width: 40rem; }
.prose p { font-size: var(--step-0); color: var(--ink-soft); }
.prose > p:first-child, .lede { font-size: var(--step-1); color: var(--ink); line-height: 1.55; }

/* ---------- 4. Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.25rem; }
.brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.brand__mark { width: 2.1rem; height: 2.1rem; flex: none; }
.brand:hover { color: var(--ink); }
.nav__list { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav__link {
  display: inline-block; padding: .45rem .85rem; border-radius: var(--radius-pill);
  color: var(--ink-soft); font-weight: 500; text-decoration: none; font-size: .975rem;
  transition: background .15s, color .15s;
}
.nav__link:hover { background: var(--paper-2); color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); background: var(--paper-2); box-shadow: inset 0 -2px 0 var(--coral); }
.nav__cta { margin-left: var(--s-2); }
.nav-toggle {
  display: none; align-items: center; gap: .5rem;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: var(--radius-pill); padding: .4rem .9rem; font: 600 .9rem var(--font-body); cursor: pointer;
}
.nav-toggle__bars { width: 1rem; height: 10px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s var(--ease), top .2s var(--ease);
}
.nav-toggle__bars::before { top: 1px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 4px; transform: rotate(-45deg); }

@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; inset: 100% 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; padding: var(--s-3) 1.25rem var(--s-5); gap: var(--s-1); }
  .nav__link { display: block; padding: .75rem 1rem; font-size: 1.05rem; }
  .nav__cta { margin: var(--s-2) 0 0; }
  .nav__cta .btn { width: 100%; justify-content: center; }
}
@media (min-width: 761px) { .nav { display: block !important; } }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.35rem; border-radius: var(--radius-pill);
  font: 600 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .15s var(--ease), background .15s, color .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--ink); color: var(--paper); box-shadow: 0 6px 18px -8px rgb(var(--c-shadow-rgb) / .6); }
.btn--primary:hover { background: var(--coral-ink); color: var(--on-coral); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: .5rem 1rem; font-size: .925rem; }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--sun); color: var(--on-sun); }
.btn__icon { width: 1.1em; height: 1.1em; flex: none; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 6. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(4rem, 3rem + 5vw, 7rem); isolation: isolate; }
.hero__field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: var(--teal); opacity: .9; pointer-events: none; }
.hero__inner { display: grid; gap: var(--s-7); align-items: center; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.hero__hello { font-family: var(--font-mono); font-size: var(--step--1); color: var(--coral-ink); letter-spacing: .04em; margin-bottom: var(--s-4); display: inline-flex; align-items: center; gap: .6rem; }
.hero__hello::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px var(--coral-soft); }
.hero__name {
  font-size: var(--step-5); line-height: .95; letter-spacing: -0.035em; margin-bottom: var(--s-5);
  font-weight: 650; font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1;
}
.hero__name span { display: block; }
.hero__name span:last-child { color: var(--coral-ink); font-style: italic; font-weight: 500; }
.hero__roles {
  font-size: var(--step-2); font-family: var(--font-display); font-weight: 500; line-height: 1.3;
  margin: 0 0 var(--s-5); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; row-gap: .2em;
}
.hero__roles .dot { color: var(--coral); font-weight: 700; }
.hero__sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 34rem; margin-bottom: var(--s-6); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Cycling word */
.rotator { position: relative; display: inline-grid; color: var(--teal-ink); font-style: italic; }
.rotator__word {
  grid-area: 1 / 1; white-space: nowrap;
  background-image: linear-gradient(transparent 62%, var(--sun-soft) 62%, var(--sun-soft) 92%, transparent 92%);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.rotator__word.is-out { opacity: 0; transform: translateY(.45em); }
.rotator__word.is-in { opacity: 0; transform: translateY(-.45em); }

/* Portrait / headshot placeholder */
.portrait { position: relative; width: min(100%, 22rem); aspect-ratio: 1; margin-inline: auto; }
.portrait__frame {
  position: absolute; inset: 9%; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, var(--paper-3) 0 18%, transparent 18.5%),
    radial-gradient(ellipse 34% 26% at 50% 86%, var(--paper-3) 0 99%, transparent 100%),
    var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift);
  display: grid; place-items: end center;
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait__label { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); background: var(--card); padding: .2rem .55rem; border-radius: var(--radius-pill); margin-bottom: 9%; letter-spacing: .03em; }
.portrait__orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait__badge {
  position: absolute; right: 2%; bottom: 12%;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: .6rem .85rem; font-size: .85rem; line-height: 1.3; display: flex; gap: .55rem; align-items: center; max-width: 13rem;
}
.portrait__badge b { display: block; font-family: var(--font-display); font-size: 1rem; }
.portrait__badge .pulse { width: .55rem; height: .55rem; border-radius: 50%; background: var(--teal); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 50%, transparent); animation: pulse 2.4s infinite; }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero__media { order: -1; }
  .portrait { width: min(70%, 15rem); }
  .portrait__badge { right: -12%; bottom: 4%; }
}

/* ---------- 7. Section header: eyebrow + focus phrase ---------- */
.section-head { max-width: 46rem; margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em;
  color: var(--teal-ink); margin-bottom: var(--s-4);
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: currentColor; border-radius: 2px; }
.section-head--center .eyebrow::after { content: ""; width: 1.6rem; height: 2px; background: currentColor; border-radius: 2px; }
.section--ink .eyebrow { color: var(--sun-on-dark); }
.section-title { font-size: var(--step-4); margin-bottom: var(--s-4); }
.section-title--md { font-size: var(--step-3); }
.section-head p { font-size: var(--step-1); color: var(--ink-soft); }
.section--ink .section-head p { color: var(--mist); }

/* The signature: bold focus words with a highlighter swipe */
.focus {
  font-weight: 700; color: var(--on-sun);
  background-image: linear-gradient(100deg, transparent 0 1%, var(--sun) 1% 99%, transparent 99%);
  background-size: 100% .42em; background-position: 0 88%; background-repeat: no-repeat;
  padding-inline: .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
h1 .focus, h2 .focus, h3 .focus { font-weight: inherit; font-style: italic; }
.focus--coral { color: var(--ink); background-image: linear-gradient(100deg, transparent 0 1%, var(--coral-soft) 1% 99%, transparent 99%); background-size: 100% .5em; }
.focus--teal { color: var(--ink); background-image: linear-gradient(100deg, transparent 0 1%, var(--teal-soft) 1% 99%, transparent 99%); background-size: 100% .5em; }
.section--ink .focus { color: var(--sun-on-dark); background: none; }

/* ---------- 8. Blurb (home intro, in Oren's voice) ---------- */
.blurb { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
.blurb__aside { position: sticky; top: 6rem; }
.blurb__text p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.4; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; font-variation-settings: "SOFT" 50, "opsz" 36; }
.blurb__text p + p { margin-top: var(--s-5); }
.blurb__turn { color: var(--coral-ink); font-style: italic; }
.blurb__sign { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); margin-top: var(--s-5); }
@media (max-width: 860px) { .blurb { grid-template-columns: 1fr; gap: var(--s-5); } .blurb__aside { position: static; } }

/* "people in the data" motif graphic */
.people-plot { width: 100%; max-width: 20rem; color: var(--teal); }
.people-plot__ring { fill: none; stroke: var(--coral); stroke-width: 1.5; opacity: .55; }
.people-plot__caption { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-top: var(--s-3); letter-spacing: .02em; }

/* ---------- 9. Stat callout ---------- */
.stat-callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 4vw, 4.5rem); align-items: center;
}
.stat-callout__dial { position: relative; width: clamp(11rem, 8rem + 12vw, 17rem); aspect-ratio: 1; }
.stat-callout__dial svg { width: 100%; height: 100%; }
.stat-callout__dial .track { stroke: color-mix(in srgb, var(--on-band) 12%, transparent); }
.stat-callout__dial .sweep { stroke: var(--coral-band); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 0 999; animation: sweep 6s var(--ease) infinite; }
.stat-callout__dial .tick { stroke: color-mix(in srgb, var(--on-band) 35%, transparent); }
.stat-callout__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.stat-callout__num b { font-family: var(--font-display); font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem); line-height: .9; font-weight: 600; color: var(--on-band); font-variation-settings: "SOFT" 100, "opsz" 144; }
.stat-callout__num span { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.stat-callout__lead { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.2; color: var(--on-band); margin-bottom: var(--s-5); font-weight: 500; }
.stat-callout__list { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-3); }
.stat-callout__list li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .75rem; color: var(--on-band-soft); }
.stat-callout__list li::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--coral-band); margin-top: .5em; box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral-band) 25%, transparent); }
.stat-callout__source { font-family: var(--font-mono); font-size: .75rem; color: var(--mist); }
.stat-callout--light .stat-callout__num b, .stat-callout--light .stat-callout__lead { color: var(--ink); }
@media (max-width: 700px) { .stat-callout { grid-template-columns: 1fr; justify-items: start; } }

/* ---------- 10. Cards (shared) ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
a.card, .card--link { text-decoration: none; color: inherit; display: block; }
a.card:hover, .card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--paper-3); color: inherit; }

/* Research-area cards */
.area-card { display: flex; flex-direction: column; gap: var(--s-3); position: relative; overflow: hidden; }
.area-card__icon { width: 3.25rem; height: 3.25rem; border-radius: 14px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-ink); margin-bottom: var(--s-2); }
.area-card__icon svg { width: 1.9rem; height: 1.9rem; }
.area-card--coral .area-card__icon { background: var(--coral-soft); color: var(--coral-ink); }
.area-card--sun .area-card__icon { background: var(--sun-soft); color: var(--sun-ink); }
.area-card__kicker { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.area-card h3 { font-size: var(--step-2); margin: 0; }
.area-card p { color: var(--ink-soft); margin: 0; }
.area-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: var(--s-3); list-style: none; padding-left: 0; }
.area-card__tags li { font-size: .8rem; padding: .2rem .6rem; border-radius: var(--radius-pill); background: var(--paper-2); color: var(--ink-soft); }
.area-card .link-arrow { margin-top: var(--s-2); color: var(--coral-ink); }
.area-card--small { padding: 1.1rem 1.25rem; box-shadow: none; background: transparent; border-style: dashed; }

/* ---------- 11. Research sub-theme block ---------- */
.theme { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-7); border-top: 1px solid var(--line); }
.theme:first-of-type { border-top: 0; padding-top: 0; }
.theme__num { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--coral-large); font-style: italic; font-weight: 500; }
.theme__title { font-size: var(--step-3); }
.theme__body { max-width: 42rem; }
.theme__body > p { color: var(--ink-soft); }
@media (max-width: 640px) { .theme { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ---------- 12. Paper list + status pills ---------- */
.paper-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.paper { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); align-items: start; }
.paper__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; line-height: 1.3; margin: 0 0 .35rem; }
.paper__title a { color: var(--ink); text-decoration-color: var(--coral); }
.paper__title a:hover { color: var(--coral-ink); }
.paper__authors { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.paper__authors .me { font-weight: 700; color: var(--ink); }
.paper__meta { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin: .4rem 0 0; }
.paper__blurb { font-size: .95rem; color: var(--ink-soft); margin: .5rem 0 0; max-width: 38rem; }
.paper__status { justify-self: end; }
@media (max-width: 640px) { .paper { grid-template-columns: 1fr; } .paper__status { justify-self: start; grid-row: 1; } }

.pill {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: var(--radius-pill); border: 1px solid currentColor;
}
.pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.pill--review { color: var(--sun-ink); background: var(--sun-soft); border-color: var(--sun-line); }
.pill--working { color: var(--teal-ink); background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 35%, var(--teal-soft)); }
.pill--published { color: var(--on-band); background: var(--band); border-color: var(--band); }
.pill--published::before { background: var(--sun-on-dark); }
.pill--support { color: var(--ink-soft); background: transparent; border-color: var(--line); }
.pill--upcoming { color: var(--coral-ink); background: var(--coral-soft); border-color: color-mix(in srgb, var(--coral) 35%, var(--coral-soft)); }
.pill--upcoming::before { animation: pulse-dot 2s infinite; }
.pill--award { color: var(--sun-ink); background: color-mix(in srgb, var(--sun) 18%, var(--card)); border-color: var(--sun-line); }
.pill--award::before { content: "★"; width: auto; height: auto; background: none; font-size: .8rem; }

/* ---------- 13. Project cards (freelance) ---------- */
.project-card { display: flex; flex-direction: column; gap: var(--s-3); }
.project-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.project-card__when { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); }
.project-card h3 { font-size: var(--step-1); font-family: var(--font-display); margin: 0; }
.project-card p { color: var(--ink-soft); margin: 0; font-size: .97rem; }
.project-card__flow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .75rem; margin-top: auto; padding-top: var(--s-3); list-style: none; padding-left: 0; }
.project-card__flow li { padding: .2rem .55rem; border-radius: 6px; background: var(--paper-2); color: var(--ink); }
.project-card__flow li + li::before { content: "→"; color: var(--coral); margin: 0 .35rem 0 -.1rem; }
.project-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; background: linear-gradient(135deg, var(--card), var(--teal-soft)); }
@media (max-width: 760px) { .project-card--feature { grid-template-columns: 1fr; } }

/* Freelance numbers row */
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0; border-block: 1px solid var(--line); }
.numbers__item { padding: var(--s-5) var(--s-4); border-left: 1px solid var(--line); }
.numbers__item:first-child { border-left: 0; padding-left: 0; }
.numbers__value { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; font-weight: 600; letter-spacing: -0.03em; display: block; font-variation-settings: "SOFT" 100, "opsz" 144; }
.numbers__value small { font-size: .45em; color: var(--coral-ink); font-weight: 600; margin-left: .1em; }
.numbers__label { font-size: .9rem; color: var(--ink-soft); display: block; margin-top: var(--s-2); }
@media (max-width: 560px) { .numbers__item { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } .numbers__item:first-child { border-top: 0; } }

/* ---------- 14. Testimonials ---------- */
.testimonial { margin: 0; position: relative; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.testimonial::before {
  content: "\201C"; position: absolute; top: -.35em; left: .35em;
  font-family: var(--font-display); font-size: 5rem; line-height: 1; color: var(--coral); font-weight: 700;
}
.testimonial blockquote { margin: 0 0 var(--s-4); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; color: var(--ink); font-variation-settings: "SOFT" 50, "opsz" 24; }
.testimonial figcaption { margin-top: auto; font-size: .875rem; color: var(--muted); display: flex; flex-direction: column; gap: .1rem; }
.testimonial figcaption b { color: var(--ink); font-weight: 600; }
.testimonial--big { padding: var(--s-7) clamp(1.5rem, 1rem + 3vw, 3.5rem) var(--s-6); background: var(--paper-2); border: 0; box-shadow: none; }
.testimonial--big blockquote { font-size: var(--step-3); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; }
.testimonial--big::before { font-size: 8rem; left: .2em; }
.testimonial-grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); padding-top: var(--s-4); }

/* ---------- 15. Upcoming appearance / event card ---------- */
.event-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: start; padding: var(--s-5); border-radius: var(--radius-lg); background: var(--card); border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--coral); }
.event-card__date { width: 5.25rem; text-align: center; border-radius: var(--radius); overflow: hidden; border: 1.5px solid var(--ink); background: var(--paper); flex: none; }
.event-card__month { display: block; background: var(--coral-ink); color: var(--on-coral); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: .3rem 0; }
.event-card__day { display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; line-height: 1.1; padding-top: .2rem; }
.event-card__dow { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); padding-bottom: .4rem; text-transform: uppercase; letter-spacing: .1em; }
.event-card__title { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; margin: .5rem 0 .4rem; font-weight: 600; }
.event-card__meta { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .9rem; color: var(--ink-soft); }
.event-card__meta li { display: inline-flex; align-items: center; gap: .35rem; }
.event-card__meta svg { width: 1rem; height: 1rem; color: var(--teal-ink); }
.event-card p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 560px) { .event-card { grid-template-columns: 1fr; box-shadow: 4px 4px 0 var(--coral); } }

/* Talks list (compact) */
.talk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.talk-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px dashed var(--line); }
.talk-list time { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); padding-top: .2rem; }
@media (max-width: 520px) { .talk-list li { grid-template-columns: 1fr; gap: 0; } }

/* ---------- 16. Role strip (current role) ---------- */
.role-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); padding: var(--s-5) var(--s-6); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.role-strip__label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); display: inline-flex; align-items: center; gap: .5rem; }
.role-strip__label::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--teal); animation: pulse 2.4s infinite; }
.role-strip__title { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; margin: 0; flex: 1 1 22rem; line-height: 1.35; }
.role-strip__where { font-size: .9rem; color: var(--muted); }

/* ---------- 17. Timeline (About) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7.5rem; top: .6rem; bottom: .6rem; width: 2px; background: repeating-linear-gradient(to bottom, var(--paper-3) 0 6px, transparent 6px 12px); }
.timeline__item { display: grid; grid-template-columns: 6.5rem 2rem minmax(0, 1fr); gap: 0 var(--s-3); padding-bottom: var(--s-6); position: relative; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__when { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); text-align: right; padding-top: .3rem; }
.timeline__dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--teal); margin: .35rem auto 0; position: relative; z-index: 1; }
.timeline__item--key .timeline__dot { background: var(--coral); border-color: var(--coral); box-shadow: 0 0 0 5px var(--coral-soft); }
.timeline__body h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.timeline__body p { color: var(--ink-soft); font-size: .97rem; }
.timeline__quote { font-family: var(--font-display); font-style: italic; color: var(--ink); border-left: 3px solid var(--coral); padding-left: var(--s-4); margin: var(--s-3) 0 0; font-size: var(--step-1); line-height: 1.4; }
@media (max-width: 600px) {
  .timeline::before { left: .45rem; }
  .timeline__item { grid-template-columns: 1rem minmax(0, 1fr); gap: .25rem var(--s-4); }
  .timeline__when { grid-column: 2; text-align: left; padding: 0; order: -1; }
  .timeline__dot { grid-column: 1; grid-row: 1 / span 2; margin: .3rem 0 0; }
  .timeline__body { grid-column: 2; }
}

/* ---------- 18. Music block ---------- */
.music { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; background: var(--band); color: var(--on-band); border: 1px solid var(--band-edge); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1rem + 4vw, 4rem); position: relative; overflow: hidden; }
.music__art { color: var(--coral-on-dark); width: 100%; max-width: 22rem; }
.music__art .string { stroke: var(--mist); opacity: .55; }
.music__art .wave { stroke: var(--sun-on-dark); fill: none; stroke-width: 2; stroke-linecap: round; animation: wave 3.5s ease-in-out infinite alternate; transform-origin: center; }
.music h2, .music h3 { color: var(--on-band); }
.music p { color: var(--on-band-soft); }
.music .eyebrow { color: var(--sun-on-dark); }
.music__facts { list-style: none; padding: 0; margin: var(--s-5) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s-3); }
.music__facts li { padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--band-2); font-size: .92rem; color: var(--mist); line-height: 1.4; }
.music__facts b { display: block; color: var(--on-band); font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.music a { color: var(--coral-on-dark); }
@media (max-width: 800px) { .music { grid-template-columns: 1fr; } .music__art { max-width: 14rem; } }

/* ---------- 19. CTA band ---------- */
.cta-band { background: var(--coral-ink); color: var(--on-coral); border-radius: var(--radius-lg); padding: clamp(2rem, 1.5rem + 3vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(color-mix(in srgb, var(--on-coral) 18%, transparent) 1.5px, transparent 1.6px); background-size: 22px 22px; mask-image: linear-gradient(100deg, transparent 35%, black 90%); -webkit-mask-image: linear-gradient(100deg, transparent 35%, black 90%); }
.cta-band h2 { font-size: var(--step-3); color: var(--on-coral); margin-bottom: var(--s-2); }
.cta-band p { color: color-mix(in srgb, var(--on-coral) 88%, var(--coral-ink)); margin: 0; font-size: var(--step-1); max-width: 34rem; }
.cta-band .focus { color: var(--on-coral); background-image: linear-gradient(100deg, transparent 0 1%, color-mix(in srgb, var(--sun) 40%, transparent) 1% 99%, transparent 99%); } /* 40%, not the original's 60%: keeps --c-on-accent text >= 3:1 on the swipe in every palette (3.4:1 or more). Uses the page highlighter (--sun), not --sun-on-dark: in Slate the pale-yellow inverse highlight over the blue band mixed to a grey smear. Identical in Paper and Signal, where the two tokens match. */
.cta-band__email { font-family: var(--font-mono); font-size: .85rem; color: color-mix(in srgb, var(--on-coral) 88%, var(--coral-ink)); margin-top: var(--s-3); display: block; }
@media (max-width: 700px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------- 20. Footer ---------- */
.site-footer { background: var(--band); color: var(--mist); border-top: 1px solid var(--band-edge); padding-block: var(--s-8) var(--s-6); margin-top: var(--s-section); font-size: .93rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.site-footer .brand { color: var(--on-band); }
.site-footer__tag { margin-top: var(--s-3); max-width: 22rem; }
.site-footer h2 { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sun-on-dark); margin-bottom: var(--s-3); font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.site-footer a { color: var(--on-band); text-decoration: none; }
.site-footer a:hover { color: var(--coral-on-dark); text-decoration: underline; }
.site-footer__bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid color-mix(in srgb, var(--on-band) 10%, transparent); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: .82rem; }
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__grid > :first-child { grid-column: 1 / -1; } }

/* ---------- 21. Placeholders ---------- */

/* .ph: visible placeholder for content still to confirm/fill. */
.ph {
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--coral) 8%, transparent) 0 8px, color-mix(in srgb, var(--coral) 2%, transparent) 8px 16px);
  outline: 1.5px dashed color-mix(in srgb, var(--coral-ink) 45%, transparent); outline-offset: 1px; border-radius: 4px;
  color: var(--coral-ink); padding: 0 .25em; font-style: normal;
}
.section--ink .ph, .music .ph { color: var(--coral-on-dark); outline-color: color-mix(in srgb, var(--coral-on-dark) 60%, transparent); }
div.ph, figure.ph { display: grid; place-items: center; min-height: 8rem; padding: var(--s-4); font: 500 .85rem var(--font-mono); text-align: center; }

/* ---------- 22. Reveal-on-scroll (progressive; JS adds .reveal-ready) ---------- */
.reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 23. Motif: data-point people ---------- */
.motif-dot { fill: currentColor; opacity: .18; }
.motif-person { fill: var(--coral); }
.motif-halo { fill: none; stroke: var(--coral); stroke-width: 1.5; opacity: .45; transform-box: fill-box; transform-origin: center; animation: halo 3.2s var(--ease) infinite; }
.motif-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .55; stroke-dasharray: 4 6; }
.motif-divider { display: block; width: 100%; height: 28px; color: var(--teal); margin-block: var(--s-6); }

/* Gallery-only helpers (template page) */
.gallery-label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-pill); padding: .2rem .7rem; display: inline-block; margin-bottom: var(--s-4); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-3); }
.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); font: .75rem/1.4 var(--font-mono); background: var(--card); }
.swatch i { display: block; height: 4rem; }
.swatch span { display: block; padding: .5rem .6rem; }

/* ---------- 24. Animation ---------- */
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 50%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pulse-dot { 50% { opacity: .35; } }
@keyframes halo { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes sweep { 0% { stroke-dasharray: 0 999; } 85%, 100% { stroke-dasharray: 289 999; } }
@keyframes wave { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes float { 50% { transform: translateY(-6px); } }
.portrait__badge { animation: float 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .stat-callout__dial .sweep { stroke-dasharray: 289 999; }
  .motif-halo { display: none; }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}

/* ---------- 25. Print ---------- */
@media print {
  .site-header, .nav-toggle, .hero__field, .cta-band::after { display: none !important; }
  body { background: none; }
  .section--ink, .music, .site-footer { background: none; color: var(--ink); }
}

/* ==========================================================================
   26. Page-level additions (inner pages)
   ========================================================================== */

/* Inner-page hero */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); isolation: isolate; border-bottom: 1px solid var(--line); }
.page-hero .hero__field { opacity: .7; }
.page-hero__title { font-size: var(--step-5); line-height: .98; letter-spacing: -0.03em; font-weight: 650; margin-bottom: var(--s-5); font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1; max-width: 16ch; }
.page-hero__title--long { font-size: var(--step-4); max-width: 20ch; }
.page-hero__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 42rem; line-height: 1.6; }
.page-hero__lede + .page-hero__lede { margin-top: var(--s-4); }
.page-hero .hero__actions { margin-top: var(--s-6); }
.page-hero__jump { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.page-hero__jump a { display: inline-block; padding: .4rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; }
.page-hero__jump a:hover { border-color: var(--ink); }

/* Gun-death share bar (part-to-whole; colors validated on --ink surface) */
.share-bar { margin: var(--s-5) 0 var(--s-4); max-width: 34rem; }
.share-bar__title { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); margin-bottom: var(--s-2); }
.share-bar__track { display: flex; gap: 2px; height: 18px; }
.share-bar__seg { position: relative; height: 100%; border-radius: 2px; outline-offset: 2px; cursor: default; }
.share-bar__seg:first-child { border-radius: 4px 2px 2px 4px; }
.share-bar__seg:last-child { border-radius: 2px 4px 4px 2px; }
.share-bar__seg--sui, .share-bar__key--sui { background: var(--viz-band-1); }
.share-bar__seg--hom, .share-bar__key--hom { background: var(--viz-band-2); }
.share-bar__seg--oth, .share-bar__key--oth { background: var(--viz-band-3); }
.share-bar__seg[data-tip]:hover::after, .share-bar__seg[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--card); color: var(--ink); font: 500 .78rem/1.3 var(--font-body); padding: .4rem .6rem; border-radius: 8px; white-space: nowrap; box-shadow: var(--shadow-lift); z-index: 2;
}
.share-bar__seg--oth[data-tip]:hover::after, .share-bar__seg--oth[data-tip]:focus-visible::after { left: auto; right: 0; transform: none; }
.share-bar__legend { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; list-style: none; padding: 0; margin: var(--s-3) 0 0; font-size: .875rem; color: var(--on-band-soft); }
.share-bar__legend li { display: inline-flex; align-items: center; gap: .45rem; }
.share-bar__legend i { width: .75rem; height: .75rem; border-radius: 3px; display: inline-block; }
.share-bar__legend b { color: var(--on-band); font-variant-numeric: tabular-nums; }

/* Crisis line callout (wherever suicide is discussed) */
.crisis-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; border-radius: var(--radius); background: var(--teal-soft); border-left: 4px solid var(--teal); color: var(--ink); font-size: .97rem; }
.crisis-line__num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 650; color: var(--teal-ink); line-height: 1; }
.crisis-line p { margin: 0; color: var(--ink) !important; }
.crisis-line a { color: var(--teal-ink); font-weight: 700; }

/* Small citations under prose */
.cite { font-size: .85rem; color: var(--muted); }
.cite a { color: var(--ink-soft); }

/* Pull line (short punchy one-liners in the narrative) */
.pull { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; color: var(--ink); font-weight: 500; margin: var(--s-6) 0; padding-left: var(--s-5); border-left: 4px solid var(--coral); max-width: 36rem; }
.section--ink .pull { color: var(--on-band); }

/* Prose wide variant inside themes */
.theme__body p { max-width: 42rem; }
.theme__body .paper-list { margin-top: var(--s-5); }
.theme--compact { grid-template-columns: 4.5rem minmax(0, 1fr); padding-block: var(--s-6); }

/* Paper groups */
.paper-group + .paper-group { margin-top: var(--s-7); }
.paper-group__title { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); font-weight: 500; margin-bottom: var(--s-3); }

/* Principles (how I work / working together) */
.principles { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); list-style: none; padding: 0; margin: 0; counter-reset: pr; }
.principles li { counter-increment: pr; padding-top: var(--s-4); border-top: 2px solid var(--ink); position: relative; }
.principles li::before { content: "0" counter(pr); font-family: var(--font-mono); font-size: .75rem; color: var(--coral-ink); display: block; margin-bottom: var(--s-2); letter-spacing: .1em; }
.principles h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.principles p { color: var(--ink-soft); font-size: .97rem; margin: 0; }
.principles--plain li::before { content: none; }

/* Simple list cards (who I work with) */
.who { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.who li { padding: var(--s-5); border-radius: var(--radius-lg); background: var(--card); border: 1px solid var(--line); }
.who b { display: block; font-family: var(--font-display); font-size: var(--step-1); margin-bottom: var(--s-2); }
.who span { color: var(--ink-soft); font-size: .97rem; }

/* Honors */
.honors { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.honors li { padding: .45rem .9rem; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--line); font-size: .92rem; font-weight: 500; }
.honors li:first-child, .honors li:nth-child(2) { background: var(--band); color: var(--on-band); border-color: var(--band); }

/* Timeline with longer prose bodies */
.timeline--story .timeline__body p { font-size: var(--step-0); }
.timeline--story .timeline__body h3 { font-size: var(--step-2); }

/* Fine print line */
.fineprint { font-size: .9rem; color: var(--muted); border-top: 1px dashed var(--line); padding-top: var(--s-4); margin-top: var(--s-6); }

/* Two-column split: heading left, content right */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: var(--s-7); align-items: start; }
.split > :first-child { position: sticky; top: 6rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--s-4); } .split > :first-child { position: static; } }

/* Track record list on freelance (no animation) */
.numbers__value--word { font-size: var(--step-3); }

/* Feature card stacked event inside */
.project-card--feature .event-card { margin-top: var(--s-5); box-shadow: 4px 4px 0 var(--coral); }
.project-card--stack { grid-template-columns: 1fr; }

/* ---------- 27. Fixes after visual QA (2026-10-10) ---------- */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); }
.hero__inner { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.hero__roles { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); }
.hero__roles .roles-tail { white-space: nowrap; display: inline-flex; align-items: baseline; gap: .55em; }
.portrait__frame { place-items: center; }
.portrait__label { white-space: normal; max-width: 62%; text-align: center; font-size: .66rem; margin: 18% 0 0; }
.grid-2 .testimonial--big blockquote { font-size: var(--step-2); }
.grid-2 .testimonial--big { padding-top: var(--s-7); }
@media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; } }
.section-head .eyebrow { font-size: .8rem; color: var(--teal-ink); }
.section--ink .section-head .eyebrow { color: var(--sun-on-dark); }
.focus--coral { background-image: linear-gradient(100deg, transparent 0 1%, color-mix(in srgb, var(--coral) 25%, var(--coral-soft)) 1% 99%, transparent 99%); }
.focus--teal { background-image: linear-gradient(100deg, transparent 0 1%, color-mix(in srgb, var(--teal) 20%, var(--teal-soft)) 1% 99%, transparent 99%); }
.theme__body { max-width: 46rem; }
.theme__body p { max-width: 46rem; }
@media (max-width: 560px) {
  .hero__roles .roles-tail { flex-basis: 100%; }
  .hero__roles .roles-tail .dot { display: none; }
  .hero__field { opacity: .45; }
  .portrait__badge { right: -18%; }
}

/* ==========================================================================
   28. Round-1 review fixes (v2, 2026-10-10)
   ========================================================================== */
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
cite { font-style: italic; color: var(--ink); }

/* Specificity fix: pull/lede inside .prose */
.prose .pull { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; color: var(--ink); font-weight: 500; }
.prose .lede { font-size: var(--step-1); color: var(--ink); line-height: 1.55; }
.pull--close { border-left-color: var(--teal); }

/* Focus words on dark surfaces: color the text, no muddy fill */
.section--ink .focus, .music .focus { background: none; color: var(--sun-on-dark); }

/* Rotator: out goes up, in comes from below */
.rotator__word.is-out { transform: translateY(-.45em); }
.rotator__word.is-in { transform: translateY(.45em); }

/* Calmer motion */
.stat-callout__dial .sweep { animation: sweep 2.4s var(--ease) .3s 1 forwards; }
.portrait__badge { animation: none; }
.pill--upcoming::before { animation: none; }
.motif-halo { animation-iteration-count: 3; }
.role-strip__label::before { animation: none; }

/* Nav active state: tint pill, no curved underline */
.nav__link[aria-current="page"] { box-shadow: none; background: var(--paper-2); font-weight: 600; color: var(--ink); }

/* Hero: mobile shows the name first; field recedes */
.hero__sub strong { font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .hero__media { order: 0; }
  .portrait, .page-hero .portrait { width: min(46%, 11rem) !important; margin-inline: 0; }
  .hero__field { opacity: .25; }
  .hero__field .motif-halo, .hero__field .motif-person { display: none; }
}

/* Blurb: the turn is the visual peak */
.blurb__turn { font-size: var(--step-3) !important; line-height: 1.2 !important; }

/* Area cards: lead line, stretched link, wide variant, "and more" line */
.area-card { position: relative; }
.area-card h3 { margin-bottom: .25rem; }
.area-card h3 a, .card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.card__link:focus-visible { outline: none; }
.card__link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 3px; }
.area-card:has(.card__link):hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.area-card__lead { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; color: var(--ink); font-weight: 500; margin: 0; }
.area-card--wide { grid-column: 1 / -1; }
@media (min-width: 900px) { .area-card--wide { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-3) var(--s-6); align-items: start; } .area-card--wide .area-card__icon { grid-row: 1 / span 3; } .area-card--wide .area-card__body { grid-column: 3; grid-row: 1 / span 3; } }
.more-line { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border: 1px dashed var(--paper-3); border-radius: var(--radius); color: var(--ink-soft); }
.more-line strong { color: var(--ink); }
.more-line a { font-weight: 600; white-space: nowrap; }

/* Role strip: calmer */
.role-strip { border-left: 4px solid var(--teal); }

/* Status chip (moved from the hero badge) */
.status-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--line); font-size: .875rem; font-weight: 600; margin-bottom: var(--s-4); }
.status-chip::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--teal); }

/* Testimonial quote mark on mobile */
@media (max-width: 760px) {
  .testimonial--big::before { font-size: 5rem; top: -.3em; }
  .grid-2 > .testimonial { margin-top: var(--s-6); }
}

/* Pills: one meaning each */
.pill--tool { color: var(--ink); background: var(--sun-soft); border-color: var(--sun-line); }
.pill--neutral { color: var(--ink-soft); background: var(--card); border-color: var(--line); }

/* Card titles + flow chips */
.project-card h3 { margin-bottom: .25rem; }
.project-card__flow { gap: .4rem 1.4rem; }
.project-card__flow li { position: relative; }
.project-card__flow li + li::before { content: none; }
/* Arrow trails each step (not leads), so when the chips wrap it ends a line instead of dangling before one */
.project-card__flow li:not(:last-child)::after { content: "→"; color: var(--coral); position: absolute; right: -1.05rem; top: 50%; transform: translateY(-50%); }

/* Feature card: single column */
.project-card--feature { display: flex; flex-direction: column; }
.project-card--feature .project-card__cols { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.inline-event { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--coral); }
.inline-event p { margin: 0 0 var(--s-2); }

/* Numbers: mobile 2x2 without stray rules; hero stack variant */
@media (max-width: 560px) {
  .numbers { grid-template-columns: 1fr 1fr; }
  .numbers__item { border-top: 1px solid var(--line); padding-left: 0; }
  .numbers__item:nth-child(-n+2) { border-top: 0; }
  .numbers__item:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--line); }
}
.numbers--stack { grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); padding: 0 var(--s-5); }
.numbers--stack .numbers__item { padding: var(--s-5) var(--s-4); border-left: 0; border-top: 1px solid var(--line); }
.numbers--stack .numbers__item:nth-child(-n+2) { border-top: 0; }
.numbers--stack .numbers__item:nth-child(even) { border-left: 1px solid var(--line); }
.numbers--stack .numbers__value--stars { font-size: var(--step-2); letter-spacing: .05em; color: var(--coral-ink); padding-block: .45em; }
@media (max-width: 560px) { .numbers--stack { padding: 0 var(--s-3); } .numbers--stack .numbers__item { padding: var(--s-4) var(--s-3); } }

/* Research: sticky section nav */
.section-nav { position: sticky; top: 4.25rem; z-index: 40; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.section-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: .5rem 0; overflow-x: auto; scrollbar-width: none; }
.section-nav ul::-webkit-scrollbar { display: none; }
.section-nav a { display: block; white-space: nowrap; padding: .35rem .8rem; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.section-nav a:hover { background: var(--paper-2); color: var(--ink); }
.section-nav a[aria-current="true"] { background: var(--ink); color: var(--paper); }
html:has(.section-nav) { scroll-padding-top: 7.5rem; }
@media (max-width: 760px) { .section-nav ul { -webkit-mask-image: linear-gradient(90deg, black 85%, transparent); mask-image: linear-gradient(90deg, black 85%, transparent); } }

/* Research: stat block as page opener */
.stat-callout__lead--h1 { font-size: var(--step-4); }
.section--opener { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* Research themes: project sub-blocks */
.theme__intro { font-size: var(--step-1); color: var(--ink) !important; line-height: 1.55; }
.theme__body h4 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; margin: var(--s-6) 0 var(--s-2); letter-spacing: -0.01em; }
.theme__body h4 + p { margin-top: 0; }

/* About: music photo slot */
.music { align-items: start; }
.music__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); min-height: 0 !important; width: 100%; max-width: 22rem; color: var(--coral-on-dark); outline-color: color-mix(in srgb, var(--coral-on-dark) 60%, transparent); background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--on-band) 5%, transparent) 0 8px, transparent 8px 16px); }
@media (max-width: 800px) { .music__photo { aspect-ratio: 16 / 10; max-width: none; } }
/* The cello photo (2026-10-17) fills the slot. It's a 3:4 portrait, so the slot stays portrait on
   phones too (the 16:10 placeholder shape would crop it to a strip), and the slot matches the
   photo's 3:4 so nothing is cropped (4:5 cut off the bow hand). The striped placeholder fill and
   dashed outline go. */
.music__photo:has(img) { aspect-ratio: 3 / 4; background: var(--band-2); outline: none; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-band) 10%, transparent), 0 18px 40px -20px rgb(var(--c-shadow-rgb) / .45); }
.music__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
@media (max-width: 800px) { .music__photo:has(img) { aspect-ratio: 3 / 4; max-width: 24rem; } }

.project-card--feature { align-items: stretch; }
@media (max-width: 700px) {
  .stat-callout { gap: var(--s-5); }
  .stat-callout__dial { width: 7.5rem; }
  .stat-callout__num b { font-size: 2.6rem; }
  .stat-callout__num span { font-size: .65rem; }
}

/* ---------- 29. Design-system port (designs/01-original) ---------- */
/* QA polish: keep short phrases together */
.nowrap { white-space: nowrap; }
.hero__sub .focus { white-space: nowrap; } /* "help people" never splits across lines */

/* ---------- 30. Standalone site (site/) ---------- */

/* Footer "Pages" list marks the current page, like the header nav */
.site-footer a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--coral-on-dark); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* Inner-page heroes (Freelance, About): their ledes run wider than Home's, so the scatter's
   "people" halos sat under the text ("…properly. I'm taking new clients"). Fade the field out
   under the text column; the right-hand half is unchanged. */
.page-hero .hero__field {
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, black 72%), linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
  mask-image: linear-gradient(90deg, transparent 38%, black 72%), linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
/* QA (site/QA.md): on desktop the fade starts later, so no "person" halo sits in the text column at any
   width (one still showed under "I'm taking" on Freelance at 1440, and beside the About chips at 1024).
   The vertical fade stops the short About hero from slicing halos in half at its top and bottom edges. */
@media (min-width: 861px) {
  .page-hero .hero__field {
    -webkit-mask-image: linear-gradient(90deg, transparent 48%, black 78%), linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
    mask-image: linear-gradient(90deg, transparent 48%, black 78%), linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
  }
}

/* Phones: the standalone big testimonial (Freelance "What clients say") ran ~17 lines at --step-3.
   Use the size it already has inside .grid-2 on Home. */
@media (max-width: 560px) { .testimonial--big blockquote { font-size: var(--step-2); } }

/* QA (site/QA.md): Freelance's closing CTA sits inside its last content section ("Working together"),
   so the page ended with a full section's bottom padding (+48px at 1440) where the other three pages,
   whose CTA has its own .section--tight, end with the tight padding. Match them. */
main > .section:last-child:not(.section--tight):has(> .wrap > .cta-band:last-child) { padding-bottom: calc(var(--s-section) * .6); }

/* QA: on Freelance the big testimonial follows a section heading directly (on Home it sits beside
   text), and its 8rem hanging quote mark crowded "What clients say". Give it room to hang. */
.section-head + .testimonial--big { margin-top: calc(var(--s-7) + var(--s-6)); } /* collapses with the head's 3rem margin, so this adds 2rem */

/* QA: the first Research theme (#evidence) has no top padding, and the scroll-to-anchor is computed
   while .reveal still holds it 18px low, so "01 Evidence vs. belief" landed under the sticky section
   nav. Give it the same 3rem lead-in the other themes get from their padding. */
.theme:first-of-type[id] { scroll-margin-top: var(--s-7); }

/* ==========================================================================
   31. Headshot (2026-10-11)
   Each page has one headshot in a circular, square frame: cover fills the width and
   crops the height, and object-position picks the vertical slice. For the outdoor
   photo (1200x1600, 3:4), 25% keeps the whole head in the circle with a little
   headroom, eyes near the middle, and a band of the teal shirt at the bottom. The face
   sits slightly right of centre in the original, which balances the ear and hair on the
   left. Neither photo is mirrored.
   The img is absolutely positioned to fill the frame: as a grid item, its auto row grew
   to the photo's 3:4 height, so it overflowed the circle, was clipped from the top, and
   object-position had no effect (QA 2026-10-11).
   ========================================================================== */
/* With a photo in, drop the placeholder's grey silhouette, which otherwise shows until the
   image decodes; the plain tint is all that's visible for that moment. */
.portrait__frame:has(> .portrait__photo) { background: var(--paper-2); }
.portrait__frame img.portrait__photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 25%; }
/* Per-photo crops (2026-10-11; photos placed 2026-10-18: Home has the wood-panel photo, About the
   outdoor one). The outdoor photo (1200x1600, 3:4) uses the 50% 25% above as its base crop.
   The wood-panel photo (1200x1800, 2:3) is taller and his head is smaller in the frame (about a
   third of its width, against two thirds outdoors), so a plain cover crop showed a small face over
   a lot of shirt. It's zoomed a little (1.25x; 2026-10-17, eased from 1.35x at Oren's request to show more of the
   shirt), with the crop window lowered so the face sits higher in the circle. The transform-origin
   (45.1%) is chosen so the top edge matches the 1.22x/50% crop Oren approved: 0.451 - 0.451/1.25
   = 0.5 - 0.5/1.22, so the extra zoom only trims from the bottom. */
.portrait__frame img.portrait__photo--wood { object-position: 50% 33%; transform: scale(1.25); transform-origin: 50% 45.1%; }
/* About shows ~3% more shirt than Home (Oren, 2026-10-17). The outdoor photo fills the circle by
   width, so rather than zooming out, the view slides down (25% -> 34% moves it 3% of the frame). */
.page-about .portrait__frame img.portrait__photo { object-position: 50% 34%; }

/* ==========================================================================
   32. Draft copy ports (draft 3, 2026-10-17; draft 4, 2026-10-18)
   Small additions for elements the drafts introduced. Colours only via tokens.
   ========================================================================== */
/* Placeholders on dark/coloured surfaces (footer, CTA band), like .section--ink .ph */
.site-footer .ph { color: var(--coral-on-dark); outline-color: color-mix(in srgb, var(--coral-on-dark) 60%, transparent); }
.cta-band .ph { color: var(--on-coral); outline-color: color-mix(in srgb, var(--on-coral) 60%, transparent); }

/* Home hero: a second sub-line sits closer to the first */
.hero__sub:has(+ .hero__sub) { margin-bottom: var(--s-4); }

/* Home blurb: the NeighborShare quote, in the "turn" style */
.blurb__quote { margin: var(--s-5) 0 0; }
.blurb__quote + p { margin-top: var(--s-5); }

/* Freelance "What I build": a client quote inside a card */
.card-quote { margin: var(--s-2) 0 0; }
.card-quote .timeline__quote { margin: 0 0 var(--s-2); font-size: 1.05rem; }

/* Research papers: collapsed author list (OARS) */
.paper__more summary { cursor: pointer; }
.paper__more > p { margin-top: .35rem; }

/* ==========================================================================
   33. Hero polish (2026-10-18, Oren's direct edits)
   ========================================================================== */
/* Greeting dot: the outer halo pulses gently */
.hero__hello::before { animation: hello-halo 2.6s ease-in-out infinite; }
@keyframes hello-halo {
  0%, 100% { box-shadow: 0 0 0 4px var(--coral-soft); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--coral-soft) 55%, transparent); }
}
/* Rotator: the container's width follows the current word, so the highlight fits it */
.rotator.is-sized { display: inline-block; white-space: nowrap; transition: width .36s var(--ease); }
.rotator.is-sized .rotator__word { display: inline-block; transition-duration: .36s; }
.rotator__meter { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__hello::before { animation: none; }
  .rotator.is-sized { transition: none; }
}

/* ==========================================================================
   34. Layout polish (2026-10-18, Oren's direct edits)
   ========================================================================== */
/* Card links sit on the same baseline across a row */
.area-card > .link-arrow:last-child { margin-top: auto; padding-top: var(--s-2); }
/* A half-paragraph break between paragraphs inside a card body */
.area-card__body p + p { margin-top: .6em; }
/* "(a few examples)" after a section title */
.section-title__aside { font-size: .5em; font-weight: 400; font-style: italic; color: var(--ink-soft); letter-spacing: 0; white-space: nowrap; }
/* Music: show the whole photo (no crop), filling the left column, and let it
   ride along a little while the longer text column scrolls past. */
.music { overflow: clip; }
@media (min-width: 801px) {
  .music__photo, .music__photo:has(img) { max-width: none; aspect-ratio: auto; position: sticky; top: calc(var(--s-6) + 4.5rem); align-self: start; max-height: calc(100vh - 7rem); }
  .music__photo img { height: auto; max-height: calc(100vh - 7rem); object-fit: contain; }
  .music { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr); } /* photo height ≈ text height */
}




/* ==========================================================================
   35. Research page rebuild (2026-10-18): two-line hero, homicide guessing game
   Colours only via the existing role variables.
   ========================================================================== */
/* Hero h1 on two lines ("Gun violence prevention" / "Education that's equitable") */
.page-hero__title--lines { max-width: none; }
.page-hero__line { display: block; }

/* Guessing game: form (shown only when JS runs) */
.guess { margin-top: var(--s-6); }
.guess__form[hidden] { display: none; }
.guess__form { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.guess__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.guess__label { font-weight: 600; color: var(--ink); }
.guess__input { width: 6.5rem; padding: .55rem .75rem; font: 600 1.1rem/1.2 var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink-soft); border-radius: 10px; }
.guess__input[aria-invalid="true"] { border-color: var(--coral-ink); }
.guess .guess__hint { font-size: .875rem; color: var(--muted); margin: var(--s-2) 0 0; }
.guess .guess__hint.is-error { color: var(--coral-ink); font-weight: 600; }
.guess__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.guess__chip { font: 500 .9rem/1 var(--font-mono); min-height: 2.75rem; min-width: 2.75rem; padding: .45rem .9rem; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); cursor: pointer; }
@media (hover: hover) { .guess__chip:hover { border-color: var(--ink); } }
.guess__form > .guess__skip-row { margin: var(--s-3) 0 0; }
.guess.is-revealed .guess__skip-row { display: none; } /* focus moves to the answer headline on skip */
.guess__skip { font: inherit; font-size: .95rem; min-height: 2.75rem; padding: .5rem 0; border: 0; background: none; color: var(--coral-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; cursor: pointer; }
.guess__skip:hover { color: var(--ink); }
/* Reaction: after the answer headline, calm body weight */
.prose .guess__lead > .guess__result { margin: var(--s-2) 0 0; font-size: var(--step-0); color: var(--ink); }
.prose .guess__lead > .guess__result:empty { display: none; }
.guess__answer > .tally { margin-top: var(--s-5); }

/* Answer: hidden only once JS arms the game, until reveal */
.guess.is-armed:not(.is-revealed) .guess__answer { display: none; }
.guess__answer { margin-top: var(--s-5); }
.guess__answer > * + * { margin-top: var(--s-5); }
.prose .guess__reveal-line { margin: 0; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; font-weight: 600; color: var(--ink); }

/* Tally: 10 vs 75 person icons, grouped in tens */
.tally { margin: 0; }
.tally__group + .tally__group { margin-top: var(--s-5); }
.prose .tally__label { display: flex; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: .95rem; color: var(--ink-soft); }
.tally__count { font-family: var(--font-display); font-size: var(--step-2); font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.tally__icons { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.tally__ten { display: inline-flex; gap: 3px; }
.tally__icon { width: 13px; height: 21px; fill: currentColor; }
.tally__group--stranger { color: var(--muted); }
.tally__group--stranger .tally__count { color: var(--ink-soft); }
.tally__group--argument { color: var(--coral); }
.tally__group--argument .tally__count { color: var(--coral-ink); }
/* Reveal: each group fades in as a whole, quietly; the second slightly after the first */
.is-animating .tally__group { animation: tally-in .3s var(--ease) both; }
.is-animating .tally__group + .tally__group { animation-delay: .15s; }
@keyframes tally-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-animating .tally__group { animation: none; } }

/* Source disclosure under the tally */
.tally__source { margin-top: var(--s-4); font-size: .85rem; color: var(--muted); }
.tally__source summary { cursor: pointer; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tally__source details > p { margin: var(--s-2) 0 0; font-size: .85rem; }

/* A prose block whose long first paragraph keeps body size (Education) */
.prose--even > p:first-child { font-size: var(--step-0); color: var(--ink-soft); line-height: 1.65; }

/* ==========================================================================
   36. Research topics, status groups and sticky sub-headings (2026-10-18)
   Scoped to research.html (body.page-research) or to new class names.
   Topic colour system, colours only via the role variables (tokens.css):
     .topic-gun    gun violence  -> the blue "people" accent (--coral / --coral-ink)
     .topic-edu    education     -> the teal "data" accent   (--teal / --teal-ink)
     .topic-other  other         -> neutral slate            (--ink-soft / --muted)
   Each topic class only sets three custom properties; components read them:
     --topic-ink   text-safe (AA on --paper, --paper-2, --card and the tag fill)
     --topic-mark  decorative rules and dots (>= 3:1 on the backgrounds)
     --topic-soft  pale fill behind --topic-ink / --ink
   Sticky stack (top to bottom): .site-header (top 0, 4.25rem), .section-nav
   (top 4.25rem, 51px tall, bottom edge at 120px), then the sub-headings at --rs-stick.
   ========================================================================== */
.topic-gun   { --topic-ink: var(--coral-ink); --topic-mark: var(--coral); --topic-soft: var(--coral-soft); }
.topic-edu   { --topic-ink: var(--teal-ink);  --topic-mark: var(--teal);  --topic-soft: var(--teal-soft); }
.topic-other { --topic-ink: var(--muted);     --topic-mark: color-mix(in srgb, var(--ink-soft) 70%, var(--line)); --topic-soft: var(--paper-2); }

html:has(.page-research) { --rs-stick: 7.55rem; } /* just below the sticky section nav (on html so scroll-padding can read it) */
/* scroll-padding clears the sticky stack for every jump and focus scroll; anchor targets add a little air */
html:has(.page-research) { scroll-padding-top: var(--rs-stick); }
/* Sections: land with the previous section fully under the sticky stack and the eyebrow
   a little below it (the top padding is pulled back); on desktop this matches the sticky heading slot */
.page-research main section[id] { scroll-margin-top: calc(var(--s-5) - var(--s-section)); }
.page-research .paper-group[id] { scroll-margin-top: 0; } /* lands with its heading exactly in its sticky slot */

/* Hero: "prevention" in the gun colour, "equitable" in the education colour */
.page-research .page-hero__title .focus.topic-gun,
.page-research .page-hero__title .focus.topic-edu {
  color: var(--ink);
  background-image: linear-gradient(100deg, transparent 0 1%, color-mix(in srgb, var(--topic-mark) 28%, var(--topic-soft)) 1% 99%, transparent 99%);
  background-size: 100% .42em;
}

/* Section nav: a topic dot on the topic links; the current link fills in its topic colour */
.page-research .section-nav a.topic-gun, .page-research .section-nav a.topic-edu { display: inline-flex; align-items: center; gap: .45rem; }
.page-research .section-nav a.topic-gun::before, .page-research .section-nav a.topic-edu::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--topic-mark); flex: none; }
.page-research .section-nav a.topic-gun[aria-current="true"], .page-research .section-nav a.topic-edu[aria-current="true"] { background: var(--topic-ink); color: var(--on-coral); }
.page-research .section-nav a.topic-gun[aria-current="true"]::before, .page-research .section-nav a.topic-edu[aria-current="true"]::before { background: currentColor; }

/* Prose topic sections: coloured eyebrow, thin topic rule beside the copy */
.rs-topic .section-head .eyebrow { color: var(--topic-ink); }
.rs-topic .prose { border-left: 2px solid color-mix(in srgb, var(--topic-mark) 55%, transparent); padding-left: clamp(var(--s-4), 2vw, var(--s-6)); }
/* Sticky sub-heading (desktop): the eyebrow + h2 column rides below the section nav, not under it */
@media (min-width: 861px) {
  .rs-topic .split > :first-child { top: calc(var(--rs-stick) + var(--s-5)); }
}

/* Topic tag (papers, talks) */
.topic-tag {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
  color: var(--topic-ink);
}
.topic-tag::before { content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--topic-mark); flex: none; }

/* Papers: status groups, topic order inside each (gun violence, education, other) */
.page-research .paper__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-2); }
.page-research .paper { grid-template-columns: minmax(0, 1fr); position: relative; padding-left: var(--s-5); }
.page-research .paper::before { content: ""; position: absolute; left: 0; top: var(--s-5); bottom: var(--s-5); width: 2px; border-radius: 2px; background: var(--topic-mark); }
.page-research .paper__blurb, .page-research .paper__meta { max-width: 46rem; }
.page-research .paper__title { max-width: 50ch; }
/* Status pills go neutral here, so colour on the Papers list always means topic */
.page-research .paper .pill { color: var(--ink-soft); background: var(--card); border-color: var(--line); font-size: .68rem; padding: .2rem .6rem; }
.page-research .paper .pill::before { background: var(--muted); }

.page-research .paper-group + .paper-group { margin-top: var(--s-7); }
.page-research .paper-group__title {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: .8rem; color: var(--ink); font-weight: 600; margin: 0;
  padding: var(--s-3) 0;
}
.page-research .paper-group__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.page-research .paper-group__title + .paper-list { border-top: 0; }
/* Sticky group headings: each sticks below the section nav while its group scrolls past */
.page-research .paper-group__title {
  position: sticky; top: var(--rs-stick); z-index: 30;
  background: var(--paper-2);
  box-shadow: 0 1px 0 var(--line), 0 -2px 0 var(--paper-2); /* the top shadow seals the sub-pixel gap under the section nav */
}
.page-research .paper-group__title::after { content: none; }

/* Talks: topic tag above each talk */
.talk-list--topics .talk__tag { display: flex; width: max-content; margin-bottom: var(--s-1); }

/* ==========================================================================
   37. Inline prose links (2026-10-18)
   Oren: links shouldn't be the same blue as the gun violence topic. Inline links
   in body copy (paragraphs, talk entries, paper meta lines) are now ink-coloured
   text with a thin slate underline; the underline darkens to ink and thickens on
   hover. Colour on the page now means topic (blue = gun violence, teal = education),
   never "this is a link". Buttons, nav, section-nav, jump chips, .link-arrow, card
   links and the footer keep their own styles (they all carry a class or live
   outside these containers). The 988 crisis line keeps its teal link.
   Contrast (Slate): link text 17.9:1 on --paper, 16.3:1 on --paper-2. The underline
   is the link cue, so it clears 3:1 against both the background (3.3:1 / 3.1:1) and
   the surrounding text (5.3:1 vs --ink, 3.1:1 vs --ink-soft). On the dark band: text
   17.1:1; underline 3.9:1 on --band, 4.1:1 vs the band's body copy. Visited matches
   default; focus uses the global :focus-visible ring (--focus-band on the band).
   ========================================================================== */
:root {
  --link-line: color-mix(in srgb, var(--muted) 66%, var(--line));        /* underline on light surfaces */
  --link-line-band: color-mix(in srgb, var(--mist) 50%, var(--band));    /* underline on the dark band */
}
main :is(p, li > span) a:not([class], .crisis-line a) {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--link-line);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
main :is(p, li > span) a:not([class], .crisis-line a):hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
  text-decoration-thickness: 2px;
}
/* Dark surfaces: the music block and any inverse band */
main :is(.music, .section--ink) :is(p, li > span) a:not([class]) {
  color: var(--on-band);
  text-decoration-color: var(--link-line-band);
}
main :is(.music, .section--ink) :is(p, li > span) a:not([class]):hover {
  color: var(--on-band);
  text-decoration-color: var(--on-band);
}