/* ==========================================================================
   Concept B — calm
   One idea: a single serif (Newsreader) used at its two optical extremes —
   the 72-pt display cut for the name, section titles and the featured research title,
   the text cut for reading — with every date, fact and number set in
   DM Mono marginalia on one 12-column grid.
   ========================================================================== */

/* ---------- Fonts (vendored from @fontsource 5.3.0; arrows are drawn, see .xa / .arr) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url(fonts/newsreader-opsz-normal.woff2) format("woff2-variations"),
       url(fonts/newsreader-opsz-normal.woff2) format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url(fonts/newsreader-opsz-italic.woff2) format("woff2-variations"),
       url(fonts/newsreader-opsz-italic.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url(fonts/dm-mono-400.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  src: url(fonts/dm-mono-500.woff2) format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* metric-matched fallbacks so the swap to Newsreader barely moves anything
   (size-adjust = Newsreader avg glyph width / fallback avg width; overrides = Newsreader ascent/descent ÷ size-adjust) */
@font-face { font-family: "NR Fallback Georgia"; src: local("Georgia"); size-adjust: 88.4%; ascent-override: 83.7%; descent-override: 30.5%; line-gap-override: 0%; }
@font-face { font-family: "NR Fallback Times"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 98.4%; ascent-override: 75.2%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: "NR Fallback DejaVu"; src: local("DejaVu Serif"); size-adjust: 77.9%; ascent-override: 95%; descent-override: 34.7%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --paper:   oklch(97.2% 0.008 82);
  --paper-2: oklch(94.8% 0.010 82);
  --ink:     oklch(22% 0.010 65);
  --ink-2:   oklch(34% 0.010 65);
  --muted:   oklch(48% 0.012 65);
  --rule:    oklch(87% 0.010 80);
  --rule-2:  oklch(78% 0.012 78);
  --accent:  oklch(46% 0.085 255);
  --ph:      oklch(50% 0.030 75);
  --ph-bg:   oklch(93% 0.018 82);

  --serif: "Newsreader", "NR Fallback Georgia", "NR Fallback Times", "NR Fallback DejaVu", Georgia, serif;
  --mono:  "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* fluid type, 360 → 1440 */
  --t-meta:  clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);   /* 13 → 14 mono */
  --t-body:  clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);   /* 17 → 19 */
  --t-h3:    clamp(1.1875rem, 1.12rem + 0.33vw, 1.375rem);   /* 19 → 22 */
  --t-lede:  clamp(1.25rem, 1.08rem + 0.8vw, 1.75rem);       /* 20 → 28 */
  --t-work:  clamp(1.625rem, 1.2rem + 1.75vw, 2.625rem);     /* 26 → 42 */
  --t-sec:   clamp(2.25rem, 1.7rem + 2.0vw, 3.25rem);        /* 36 → 52 */
  --t-name:  clamp(4.25rem, 1.2rem + 7.6vw, 7.75rem);        /* 68 → 124 */

  --gut: clamp(20px, 5vw, 48px);
  --gap: clamp(16px, 2vw, 28px);
  --nav-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:   oklch(18.5% 0.006 70);
    --paper-2: oklch(22% 0.007 70);
    --ink:     oklch(92.5% 0.008 85);
    --ink-2:   oklch(84% 0.008 85);
    --muted:   oklch(72% 0.010 80);
    --rule:    oklch(31% 0.008 70);
    --rule-2:  oklch(42% 0.010 72);
    --accent:  oklch(78% 0.075 250);
    --ph:      oklch(72% 0.030 75);
    --ph-bg:   oklch(24% 0.012 75);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:   oklch(18.5% 0.006 70);
  --paper-2: oklch(22% 0.007 70);
  --ink:     oklch(92.5% 0.008 85);
  --ink-2:   oklch(84% 0.008 85);
  --muted:   oklch(72% 0.010 80);
  --rule:    oklch(31% 0.008 70);
  --rule-2:  oklch(42% 0.010 72);
  --accent:  oklch(78% 0.075 250);
  --ph:      oklch(72% 0.030 75);
  --ph-bg:   oklch(24% 0.012 75);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: color-mix(in oklch, var(--accent) 22%, var(--paper)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.mono {
  font-family: var(--mono);
  font-size: var(--t-meta);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}
.sep { color: var(--rule-2); padding-inline: 0.15em; }
.wrap { width: min(100% - 2 * var(--gut), 1200px); margin-inline: auto; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* the display cut: used ONLY for name, section titles and research titles */
.display {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-optical-sizing: none;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}

/* links: hairline underline that firms up on hover */
.ln {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
  transition: text-decoration-color 180ms var(--ease-ui), color 180ms var(--ease-ui);
}
.ln:hover { text-decoration-color: currentColor; color: var(--accent); }
.nw { white-space: nowrap; }
/* arrows are drawn, not typed: DM Mono has no arrow glyphs, so a font arrow would come from
   whatever system face is around. The glyph stays in the DOM (copy/paste, AT) but is not painted;
   a hairline drawing at the mono stroke width is painted in its place. */
.xa, .arr {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  -webkit-text-fill-color: transparent;
  background-color: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
          mask: var(--glyph) center / contain no-repeat;
}
.xa {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4.25 2.5H9.5v5.25'/%3E%3C/svg%3E");
  width: 0.6em; height: 0.6em;
  margin-left: 0.3em;
  font-family: var(--mono);
  font-size: 1em;
  font-style: normal;
  color: var(--muted);
  vertical-align: 0.02em;
  transition: transform 180ms var(--ease-ui), color 180ms var(--ease-ui);
}
.arr {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h13.5M10.5 1.25 14.5 5l-4 3.75'/%3E%3C/svg%3E");
  width: 1.05em; height: 0.66em;
  vertical-align: -0.02em;
}
.arr-up {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13V1.5M1.25 5.25 5 1.5l3.75 3.75'/%3E%3C/svg%3E");
  width: 0.5em; height: 0.7em;
  vertical-align: -0.04em;
}
.ln.ext:hover .xa { transform: translate(2px, -2px); color: var(--accent); }

/* placeholders: visible but discreet */
.ph {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--ph);
  background: var(--ph-bg);
  padding: 0.1em 0.45em;
  border-radius: 3px;
  white-space: nowrap;
}

/* small-caps labels */
.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.skip-link {
  position: absolute; left: var(--gut); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 0.875rem;
  padding: 12px 16px; border-radius: 3px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease-ui);
}
.past-hero .nav { border-bottom-color: var(--rule); }
.nav-in {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
}
.nav-name {
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: opacity 260ms var(--ease-ui), transform 260ms var(--ease-ui);
}
.js .nav-name { opacity: 0; transform: translateY(4px); pointer-events: none; }
.js.past-hero .nav-name, .js .nav-name:focus-visible { opacity: 1; transform: none; pointer-events: auto; }

.nav-links ul { display: flex; gap: clamp(16px, 2.2vw, 32px); }
.nav-links a, .menu summary {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em;
  text-decoration: none; color: var(--ink-2);
  display: inline-flex; align-items: center; min-height: 44px; position: relative;
  transition: color 180ms var(--ease-ui);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a::before {
  content: ""; position: absolute; left: 50%; bottom: 6px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--accent); opacity: 0; transform: scale(0.4);
  transition: opacity 220ms var(--ease-ui), transform 220ms var(--ease-ui);
}
.nav-links a[aria-current="true"] { color: var(--ink); }
.nav-links a[aria-current="true"]::before { opacity: 1; transform: none; }

.nav-tools { display: flex; align-items: center; gap: 4px; }
.theme-btn {
  appearance: none; border: 0; background: none; color: var(--ink-2);
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; margin-right: -12px;
  transition: color 180ms var(--ease-ui), transform 300ms var(--ease-out);
}
.theme-btn:hover { color: var(--accent); }
.theme-btn svg { transition: transform 500ms var(--ease-out); }
[data-theme="dark"] .theme-btn svg { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn svg { transform: rotate(180deg); } }

.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; padding-left: 12px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: inline-flex; align-items: center; gap: 8px; }
.menu .menu-close { display: none; }
.menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: inline-flex; }
.menu summary span::after {
  content: ""; width: 14px; height: 7px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transition: transform 220ms var(--ease-ui);
}
.menu[open] summary span::after { transform: scaleY(0.15); }
.menu nav {
  position: fixed; left: 0; right: 0; top: var(--nav-h);
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: 8px var(--gut) 20px;
}
.menu nav a {
  display: flex; align-items: center; min-height: 52px;
  font-size: 1.375rem; font-weight: 400; text-decoration: none;
  border-top: 1px solid var(--rule);
}
.menu nav li:first-child a { border-top: 0; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .menu { display: block; }
  .theme-btn { margin-right: 0; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(36px, 4.5vw, 64px); padding-bottom: clamp(20px, 2.5vw, 32px); }
.name {
  font-size: var(--t-name);
  letter-spacing: -0.04em;
  line-height: 0.92;
  margin-left: -0.05em;          /* optical alignment of the M stem to the grid edge */
  text-wrap: nowrap;
}
.hero-grid { margin-top: clamp(28px, 3.4vw, 48px); align-items: start; }
.portrait { grid-column: 1 / span 3; grid-row: 1 / span 2; max-width: 200px; }
.portrait picture { display: block; position: relative; }
.portrait img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 2px;
  filter: saturate(0.88) contrast(1.02);
}
.portrait picture::after {
  content: ""; position: absolute; inset: 0; border-radius: 2px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 14%, transparent);
  pointer-events: none;
}
:root[data-theme="dark"] .portrait img { filter: saturate(0.85) brightness(0.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .portrait img { filter: saturate(0.85) brightness(0.88); } }
.portrait figcaption { color: var(--muted); margin-top: 10px; }

.hero-text { grid-column: 4 / -1; max-width: 46rem; }
.role { color: var(--ink-2); letter-spacing: 0.01em; }
.lede {
  margin-top: 16px;
  font-size: var(--t-lede);
  line-height: 1.3;
  font-weight: 350;
  letter-spacing: -0.008em;
  text-wrap: pretty;
  max-width: 34ch;
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(20px, 2vw, 28px); margin-top: 24px; }
.cta .ln {
  font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.02em; line-height: 1.4;
  display: inline-block; padding-block: 12px; min-height: 44px;
}
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 18px; border-radius: 3px;
  font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.02em;
  background: var(--ink); color: var(--paper); text-decoration: none;
}
.btn-pending { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); cursor: default; }
.btn-pending .ph { font-size: 0.75rem; }

.now { grid-column: 4 / -1; margin-top: 32px; max-width: 46rem; }
.now .label { margin-bottom: 8px; }
.now li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px;
  align-items: baseline;
  padding: 11px 0 12px; border-top: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.45;
}
.now li:last-child { border-bottom: 1px solid var(--rule); }
.now-what { grid-column: 1 / -1; justify-self: start; }
.now-org { grid-column: 1; grid-row: 2; color: var(--muted); font-style: italic; }
.now-when { grid-column: 2; grid-row: 2; color: var(--muted); text-align: right; }
/* wide: photo | statement | now — a three-part masthead */
@media (min-width: 1100px) {
  .hero-text { grid-column: 4 / span 6; }
  .now { grid-column: 10 / -1; grid-row: 1; margin-top: 0; padding-top: 0.1em; }
  .now li { grid-template-columns: minmax(0, 1fr); padding: 12px 0 12px; }
  /* the masthead is one rectangle: portrait top = role line = NOW label, and
     portrait bottom = CTA bottom = the last Now rule (caption hangs below, out of flow) */
  .hero { padding-bottom: clamp(48px, 4.5vw, 64px); }
  .portrait { grid-row: 1; position: relative; }
  .portrait figcaption { position: absolute; top: 100%; left: 0; }
  .hero-text { align-self: stretch; display: flex; flex-direction: column; }
  .hero-text .cta { margin-top: auto; padding-top: 24px; }
  .now-what, .now-org, .now-when { grid-column: 1; grid-row: auto; text-align: left; }
  .now-when { margin-top: 2px; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 104px); border-top: 1px solid var(--rule); }
.hero + .section { border-top: 0; }
.hero + .section .grid { border-top: 1px solid var(--rule); padding-top: clamp(24px, 2.6vw, 36px); }
.hero + .section { padding-top: clamp(20px, 3vw, 40px); }
.section-last { padding-bottom: clamp(80px, 10vw, 144px); }

.sec-title {
  grid-column: 1 / span 3;
  font-size: var(--t-sec);
  align-self: start;
  position: sticky; top: calc(var(--nav-h) + 28px);
  padding-bottom: 24px;
}
.sec-body { grid-column: 4 / -1; min-width: 0; }

/* ---------- Research ---------- */
.work + .work { margin-top: clamp(64px, 8vw, 112px); }
.status { color: var(--muted); }
.work-title {
  font-size: var(--t-work);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-top: 12px;
  max-width: 24ch;
  overflow-wrap: break-word;
}
.fig { margin-top: clamp(24px, 3vw, 36px); }

/* research items live on the same subgrid as the entries */
#research .sec-body { display: grid; grid-template-columns: subgrid; align-content: start; }
#research .work { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
#research .work > * { grid-column: 1 / -1; }
/* the research entries' bullets (as the experience bullets, below), and the paper's status note under its figure */
.work .bullets { margin-top: clamp(14px, 1.8vw, 20px); }
.work-note { margin-top: clamp(28px, 3.4vw, 40px); }

.work + .work-minor { margin-top: clamp(48px, 6vw, 80px); }
/* the short entries under the featured one read as one tier: a tighter step between them */
.work-minor + .work-minor { margin-top: clamp(32px, 3.6vw, 48px); }
.work-minor { padding-top: 0; }
.work-minor-title { font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.005em; margin-top: 6px; line-height: 1.3; }

/* ---------- Entries (experience, education, awards) ---------- */
.entries { display: grid; grid-template-columns: subgrid; grid-column: 4 / -1; }
.entry, .entries > .row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.entry + .entry { margin-top: clamp(36px, 4vw, 52px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.org {
  grid-column: 3 / -1;
  font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.008em; line-height: 1.3;
}
.row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.entry .row { margin-top: 10px; }
.entry .row + .row { margin-top: 22px; }
.meta { grid-column: 1 / span 2; color: var(--muted); padding-top: 0.28em; }
.meta .when { display: block; color: var(--ink-2); }
/* in DM Mono the en dash is hyphen-length; date ranges get a drawn hairline instead (the dash stays in the text) */
.rng {
  display: inline-block; width: 0.62em; height: 1px; overflow: hidden;
  vertical-align: 0.34em;
  -webkit-text-fill-color: transparent; background: currentColor;
}
/* numeric ranges with no spaces (0.85–0.97, 2016–2019): one mono cell, line inset from the digits */
.rng-tight { width: 0.6em; margin-inline: 0.04em; vertical-align: 0.3em; }
.meta .where { display: block; }
.body { grid-column: 3 / -1; min-width: 0; }
.position { font-style: italic; color: var(--ink); }
.bullets { margin-top: 10px; max-width: 62ch; }
.bullets li { position: relative; padding-left: 1.1em; color: var(--ink-2); text-wrap: pretty; }
.bullets li + li { margin-top: 8px; }
.bullets li::before { content: "–"; position: absolute; left: 0; color: var(--muted); }
.lines { margin-top: 6px; color: var(--ink-2); }
.lines li + li { margin-top: 4px; }


/* awards */
.awards .row { padding: 14px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.awards .row:first-child { border-top: 0; }
.awards .meta { padding-top: 0; }
.awards .body { color: var(--ink-2); }

/* certifications */
.certs { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.sec-body:has(> .certs) { display: grid; grid-template-columns: subgrid; }
.sec-body:has(> .certs) > .entries { grid-column: 1 / -1; }
.certs .label { grid-column: 1 / span 2; padding-top: 0.5em; }
.certs ul { grid-column: 3 / -1; }
.certs li { border-top: 1px solid var(--rule); }
.certs li:last-child { border-bottom: 1px solid var(--rule); }
.certs .ln { display: block; padding: 12px 0; text-decoration-color: transparent; color: var(--ink-2); }
.certs .ln:hover { text-decoration-color: currentColor; }

/* contact */
.contact .ph-block { display: inline-block; white-space: normal; font-size: 0.8125rem; }
.contact-mail {
  margin-top: 20px;
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.75rem);
  font-weight: 350; letter-spacing: -0.02em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.contact-mail .ln { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* The Copy button gets clear space below the underline when it wraps under the address (phones; Myron, 15 Oct). The gap only applies on wrap. */
.contact-mail { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 14px; }
.contact-mail .copy-mail { margin-left: 0; }
.contact .cta { margin-top: 24px; }

/* footer */
.foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 28px 0 40px; border-top: 1px solid var(--rule); color: var(--muted);
}
.foot .ln { text-decoration-color: transparent; display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; }
.foot .ln:hover { text-decoration-color: currentColor; }

/* ---------- Phone / narrow ---------- */
@media (max-width: 899px) {
  .sec-title { grid-column: 1 / -1; position: static; padding-bottom: 0; margin-bottom: clamp(24px, 5vw, 40px); }
  .sec-body, .entries { grid-column: 1 / -1; }
  .portrait { grid-column: 1 / span 3; }
  .hero-text { grid-column: 4 / -1; }
}
/* below the sticky-title breakpoint the date rail stacks above each entry (dates never wrap mid-range) */
@media (max-width: 899px) {
  .role .seg { display: block; }
  .role .sep { display: none; }
  .entries, .entry, .row, .certs, .sec-body:has(> .certs) { display: block; }
  .org { margin-bottom: 4px; }
  .meta { display: flex; flex-wrap: wrap; gap: 0 12px; padding-top: 0; margin-bottom: 4px; }
  .meta .when, .meta .where { display: inline; }
  .awards .meta { margin-bottom: 2px; }
  .certs .label { margin-bottom: 8px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 56px; }
  .name { font-size: clamp(3.5rem, 18.5vw, 5.25rem); line-height: 0.9; text-wrap: wrap; }
  .name span { display: block; }
  .hero-grid { grid-template-columns: 92px minmax(0, 1fr); column-gap: 18px; row-gap: 22px; }
  .portrait { grid-column: 1; grid-row: 1; max-width: none; }
  .portrait figcaption { font-size: 0.75rem; margin-top: 8px; white-space: nowrap; }
  .hero-text { display: contents; }
  .role { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 30px; line-height: 1.6; font-size: 0.78125rem; letter-spacing: 0; }
  .role .seg { display: block; }
  .role .sep { display: none; }
  .lede, .cta, .now { grid-column: 1 / -1; }
  .lede { margin-top: 0; max-width: none; }
  .cta { margin-top: -6px; gap: 0 22px; }
  .hero .cta li:first-child { flex-basis: 100%; margin-bottom: 4px; }
  .now { margin-top: 8px; }
  .now a.now-what { padding-block: 10px; margin-block: -10px; }
  .now li:last-child { border-bottom: 0; }
  .status .sep { display: block; height: 0; overflow: hidden; }
}

/* ---------- Motion (all optional) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 40ms); }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 16%;
    }
  }
  html.io .reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); }
  html.io .reveal.in { opacity: 1; transform: none; }

  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; animation-timing-function: var(--ease-ui); }
}
@keyframes rise   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Reduced motion: nothing animates at all, including the small state transitions (nav name, current-section mark, link colours) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Low-power devices (html.lowfx: set in the head for a low-end device or data saver, or by a watchdog that saw dropped frames):
   the same end state as reduced motion: no scroll reveals, no figure draw-ins, no smooth scroll. Nothing is stored. ---------- */
html.lowfx { scroll-behavior: auto; }
html.lowfx .rise, html.lowfx .reveal { animation: none !important; }
html.lowfx.io .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.lowfx .nav, html.lowfx .nav *, html.lowfx .nav *::before { transition: none !important; }
html.lowfx::view-transition-old(root), html.lowfx::view-transition-new(root) { animation: none !important; }

@media print {
  @page { margin: 14mm 16mm; }
  :root { --paper: #fff; --ink: #000; --ink-2: #1a1a1a; --muted: #444; --rule: #ccc; --rule-2: #999; --accent: #000; }
  .nav, .skip-link, .theme-btn, .menu, .foot p:last-child, .ph { display: none !important; }
  .rise, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .sec-title { position: static; }
  .section { padding-block: 24px; break-inside: auto; }
  .entry, .work { break-inside: avoid; }
  .ln { text-decoration: none; }
  /* drawn glyphs rely on background colour, which print may drop: fall back to the real characters */
  .xa, .arr, .rng { -webkit-text-fill-color: currentColor; background: none; -webkit-mask: none; mask: none; width: auto; height: auto; overflow: visible; vertical-align: baseline; }
}

/* ---------- Figures: the separator (version c), ELI (version b), their 'illustrative' tag and replay button.
   Commented source: pipeline-v2/cv-calm-figures.src.css in the site tools (kept out of here for page weight). ---------- */
.sepfig {
  container-type: inline-size;
  --sep-pico: oklch(53% 0.13 38);
  --sep-mid: clamp(44px, 5cqi + 18px, 60px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sepfig { --sep-pico: oklch(75% 0.105 50); }
}
:root[data-theme="dark"] .sepfig { --sep-pico: oklch(75% 0.105 50); }
.sep-plot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted);
}
.sep-lbl, .sep-lblrow { align-self: end; padding-bottom: 4px; color: var(--ink-2); white-space: nowrap; }
.sep-lblrow { display: flex; justify-content: space-between; gap: 12px; }
.sep-time { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.sep-time svg { width: 6px; height: 10px; overflow: visible; }
.sep-time path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.sep-band { position: relative; min-width: 0; }
.sep-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.sep-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.sep-l-pico { stroke: var(--sep-pico); stroke-width: 1.35; }
.sep-l-nano { stroke: var(--accent); stroke-width: 1.5; }
.sep-tag {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(7px, -50%);
  white-space: nowrap; color: var(--muted);
}
.sep-tag::before {
  content: ""; display: inline-block; width: 12px; height: 0;
  border-top: 1.5px solid var(--sep-pico);
  vertical-align: middle; margin: 0 6px 2px 0;
}
.sep-tag-nano::before { border-top-color: var(--accent); }
.sep-mid { position: relative; color: var(--ink-2); }
.sep-arrow { position: absolute; left: 50%; top: 6px; bottom: 4px; width: 10px; margin-left: -5px; }
.sep-arrow-line {
  position: absolute; left: 4.5px; top: 0; bottom: 1px; width: 1px;
  background: currentColor; transform-origin: 50% 0;
}
.sep-arrow-head { position: absolute; left: 0; bottom: -3px; width: 10px; height: 10px; overflow: visible; }
.sep-arrow-head path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.sep-arrow-lbl { position: absolute; left: calc(50% + 14px); top: 50%; transform: translateY(-50%); white-space: nowrap; }
.sep-axis { width: 100%; height: 6px; max-width: none; overflow: visible; }
.sep-l-base { stroke: var(--rule-2); stroke-width: 1; }
.sep-l-tick { stroke: var(--rule-2); stroke-width: 1; stroke-linecap: butt; }
.sep-ticks { position: relative; }
.sep-ticks span { position: absolute; left: var(--x); top: 3px; transform: translateX(-50%); }
.sep-xtitle { align-self: end; justify-self: center; white-space: nowrap; }
.sep-xtitle sup { font-size: 0.8em; line-height: 0; vertical-align: 0.4em; }
.sep-map { position: relative; min-width: 0; box-shadow: 0 0 0 1px var(--rule); }
.sep-mask {
  position: absolute; inset: 0; display: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@supports (-webkit-mask-image: none) or (mask-image: none) { .sep-mask { display: block; } }
html.js .sepfig:not(.near) .sep-mask { -webkit-mask-image: none; mask-image: none; visibility: hidden; }
.sep-m-ink { background: var(--ink); -webkit-mask-image: url(img/sep-map-in.webp); mask-image: url(img/sep-map-in.webp); }
.sep-m-pico { background: var(--sep-pico); -webkit-mask-image: url(img/sep-map-pico.webp); mask-image: url(img/sep-map-pico.webp); }
@media print {
  html.js .sepfig:not(.near) .sep-m-ink { -webkit-mask-image: url(img/sep-map-in.webp); mask-image: url(img/sep-map-in.webp); visibility: visible; }
  html.js .sepfig:not(.near) .sep-m-pico { -webkit-mask-image: url(img/sep-map-pico.webp); mask-image: url(img/sep-map-pico.webp); visibility: visible; }
  .sepfig { --sep-pico: #a04628; }
  .sep-plot { break-inside: avoid; }
}
.sepfig-c { --c-park: 2175ms; }
.sepfig-c .sep-plot {
  --map-h: clamp(96px, 14cqi + 40px, 168px);
  --c-band: clamp(84px, 11cqi + 12px, 124px);
  grid-template-rows: 22px var(--map-h) 6px var(--sep-mid) var(--c-band) 6px 24px;
}
.sepfig-c .sep-lblrow { grid-row: 1; }
.sepfig-c .sep-map { grid-row: 2; }
.sepfig-c .sep-axis-map { grid-row: 3; }
.sepfig-c .sep-mid { grid-row: 4; }
.sepfig-c .sep-band { grid-row: 5; }
.sepfig-c .sep-axis-band { grid-row: 6; }
.sepfig-c .sep-xtitle { grid-row: 7; }
.sepfig-c .sep-cursor {
  position: absolute; left: -5px; right: -5px; top: 0; height: 100%;
  border-top: 1px solid var(--muted);
  transform: translateY(var(--row)); pointer-events: none;
}
.sep-live { opacity: 0; }
@media screen and (prefers-reduced-motion: no-preference) {
  html.fx:not(.lowfx) .sepfig-c.sep-ready:not(.sep-done) .sep-cursor { transform: none; }
  html.fx:not(.lowfx) .sepfig-c.sep-ready:not(.sep-done) :is(.sep-nano, .sep-c-pico) { opacity: 0; }
  html.fx:not(.lowfx) .sepfig-c.sep-ready:not(.sep-done) .sep-live { opacity: 1; }
  html.fx:not(.lowfx) .sepfig-c.sep-play .sep-cursor { animation: sep-c-cursor calc(var(--c-park) - 375ms) linear 375ms backwards; }
}
html.lowfx .sepfig * { animation: none !important; }
@keyframes sep-c-cursor { from { transform: none; } to { transform: translateY(var(--row)); } }
.fig.eli-fig { margin-top: clamp(14px, 1.6vw, 22px); max-width: 26rem; }
.eli-stage {
  position: relative;
  padding-block: 18px;
  font-family: var(--mono); font-size: 0.75rem; line-height: 18px; font-weight: 400;
  color: var(--muted);
}
.eli-plot { position: relative; height: 64px; overflow: hidden; }
.eli-l { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.eli-space { position: absolute; inset: 0; }
.eli-l path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.eli-ax { stroke: var(--rule); stroke-width: 1; }
.eli-probe { stroke: var(--rule-2); stroke-width: 1; stroke-linecap: butt; }
.eli-hit { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: butt; opacity: 0; }
.eli-env { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 3; }
.eli-ez { stroke: var(--accent); stroke-width: 1; opacity: 0.4; }
.eli-ey { stroke: var(--accent); stroke-width: 1.5; }
.eli-slab { fill: var(--ink); opacity: 0.13; }
.eli-dots { stroke: var(--ink); stroke-width: 3.2; }
.eli-bw { stroke: var(--accent); stroke-width: 1.35; }
.eli-bclip { clip-path: inset(0 82.500% 0 0); }
.eli-lab { position: absolute; white-space: nowrap; color: var(--muted); }
.eli-top { top: 0; }
.eli-bot { bottom: 0; }
.eli-anim { opacity: 0; }
.eli-l-p0 { left: 17.857%; transform: translateX(-50%); }
.eli-l-w0 { right: calc(16.429% - 3px); }
.eli-l-cr { left: 4.821%; }
@keyframes eli-mv { from { transform: var(--mv0); } to { transform: var(--mv1, none); } }
@keyframes eli-emit { from { transform: translateX(13.036%); } to { transform: none; } }
@keyframes eli-kick {
  0%, 100% { transform: none; }
  14% { transform: translateY(-1.5px); } 30% { transform: translateY(2.5px); } 47% { transform: translateY(-3px); }
  64% { transform: translateY(2.5px); } 81% { transform: translateY(-1.5px); }
}
@keyframes eli-glow { 0%, 100% { opacity: 0.13; } 50% { opacity: 0.4; } }
@keyframes eli-out { from { opacity: 1; translate: none; } to { opacity: 0; translate: var(--dx, 0px) 0; } }
@keyframes eli-in { from { opacity: 0; translate: var(--dx, 0px) 0; } to { opacity: 1; translate: none; } }
@keyframes eli-fade { from { opacity: 0; } to { opacity: 1; } }
@media screen and (prefers-reduced-motion: no-preference) {
  html.fx:not(.lowfx) .eli-fig:not(.drawn) .eli-pulse { transform: translateX(-65.714%); }
  html.fx:not(.lowfx) .eli-fig:not(.drawn) .eli-wall { transform: translateX(65.714%); }
  html.fx:not(.lowfx) .eli-fig:not(.drawn) .eli-burst { transform: translateX(13.036%); }
  html.fx:not(.lowfx) .eli-fig:not(.drawn) :is(.eli-l-p0, .eli-l-w0) { opacity: 1; }
  html.fx:not(.lowfx) .eli-fig.drawn .eli-pulse { --mv0: translateX(-65.714%); }
  html.fx:not(.lowfx) .eli-fig.drawn .eli-wall { --mv0: translateX(65.714%); }
}
@media print {
  .eli-fig .eli-anim { display: none !important; }
  .eli-stage { break-inside: avoid; }
}
.eli-b .eli-space { opacity: 0; }
.eli-sax { stroke: var(--rule-2); stroke-width: 1; }
.eli-th { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.85; }
.eli-sp { stroke: var(--accent); stroke-width: 1.2; }
.eli-arrow { position: absolute; left: 29.107%; width: 6.429%; top: 50%; height: 10px; margin-top: -5px; color: var(--muted); }
.eli-arrow-line { position: absolute; left: 0; right: 1px; top: 4.5px; height: 1px; background: currentColor; transform-origin: 0 50%; }
.eli-arrow-head { position: absolute; right: 0; top: 0; width: 8px; height: 10px; overflow: visible; }
.eli-arrow-head path, .eli-xarr path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.eli-l-probe { left: 1.429%; }
.eli-l-four { left: 32.321%; transform: translateX(-50%); }
.eli-l-spec { left: 38.571%; }
.eli-l-freq { right: 0; display: inline-flex; align-items: center; gap: 5px; }
.eli-xarr { width: 14px; height: 8px; overflow: visible; }
.eli-sig { transform-origin: 3.571% 50%; }
@keyframes eli-hit { 0%, 100% { opacity: 0; } 30% { opacity: 1; } }
@keyframes eli-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes eli-sig { from { opacity: 0; transform: scaleX(0.575); } to { opacity: 1; transform: none; } }
@keyframes eli-wipe { from { clip-path: inset(0 62.143% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes eli-b-space { 0%, 86.0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eli-b-cr { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media screen and (prefers-reduced-motion: no-preference) {
  html.fx:not(.lowfx) .eli-b:not(.drawn) .eli-space { opacity: 1; }
  html.fx:not(.lowfx) .eli-b:not(.drawn) :is(.eli-sig, .eli-arrow, .eli-spec-ax, .eli-spec-th, .eli-spec, .eli-l-probe, .eli-l-four, .eli-l-spec, .eli-l-freq) { opacity: 0; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-space { animation: eli-b-space 2863ms linear backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-pulse { --mv1: translateX(14.804%); }
  html.fx:not(.lowfx) .eli-b.drawn .eli-wall { --mv1: translateX(-14.804%); }
  html.fx:not(.lowfx) .eli-b.drawn :is(.eli-pulse, .eli-wall) { animation: eli-mv 2700ms linear 150ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-sheet { animation: eli-kick 419ms linear 1042ms; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-slab { animation: eli-glow 419ms ease-in-out 1042ms; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-burst { animation: eli-emit 479ms cubic-bezier(0.45, 0, 0.55, 1) 1042ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-hit { animation: eli-hit 560ms ease-out 2383ms; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-l-p0 { --dx: 8px; animation: eli-out 300ms ease-in 700ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-l-w0 { --dx: -8px; animation: eli-out 300ms ease-in 700ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-l-cr { animation: eli-b-cr 1250ms linear 1580ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-sig { animation: eli-sig 640ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 2563ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-l-probe { animation: eli-fade 450ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 2823ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-arrow-line { animation: eli-grow 420ms cubic-bezier(0.65, 0, 0.35, 1) 3003ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-arrow-head { animation: eli-fade 220ms ease-out 3343ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-l-four { animation: eli-fade 420ms ease-out 3003ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-spec-ax { animation: eli-fade 360ms ease-out 3203ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-spec { animation: eli-wipe 980ms cubic-bezier(0.45, 0, 0.4, 1) 3303ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-spec-th { animation: eli-fade 450ms ease-out 3943ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-l-spec { --dx: -6px; animation: eli-in 520ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 3443ms backwards; }
  html.fx:not(.lowfx) .eli-b.drawn .eli-l-freq { --dx: -6px; animation: eli-in 520ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 3693ms backwards; }
}
html.lowfx .eli-fig * { animation: none !important; }
.sepfig, .eli-fig { padding-top: 16px; }
.fig-tag { position: absolute; top: 0; right: 0; font-family: var(--mono); font-size: 0.6875rem; line-height: 16px; letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }
.sepfig, .eli-fig { position: relative; }
.fig-replay {
  position: absolute; right: 0; z-index: 1; display: none; place-items: center;
  width: 24px; height: 24px; padding: 0; margin: 0;
  border: 1px solid var(--rule-2); border-radius: 50%; background: var(--paper); color: var(--muted); cursor: pointer;
  transition: color 180ms var(--ease-ui), border-color 180ms var(--ease-ui);
}
html.fx:not(.lowfx) .fig-replay { display: grid; }
.fig-replay::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.fig-replay:hover { color: var(--accent); border-color: currentColor; }
.fig-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fig-replay svg { width: 12px; height: 12px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sepfig .fig-replay { margin-top: -24px; }
.eli-fig { padding-bottom: 30px; }
.eli-fig .fig-replay { top: auto; bottom: 0; }
@media (prefers-reduced-motion: reduce) { html .fig-replay { display: none; } }
@media print { .fig-replay { display: none !important; } }

/* Desktop figure widths (Myron, 15 Oct: they reached too far right; then 10% bigger, and all three share the same left and
   right edges). ELI sits in its .row, not in .body, so it starts at the org/date edge like the research figures; each figure
   takes 88% of that full width. The pipeline is zoomed to 0.88 so its cards keep their layout. The separator and ELI keep
   their text size: the separator's heights follow its width (cqi), and ELI's plots keep their 416:64 shape. Phones keep full width. */
.row > .fig { grid-column: 1 / -1; }
@media (min-width: 761px) {
  .fig.pb { width: 88%; zoom: 0.88; }
  .fig.sepfig { width: 88%; }
  .fig.eli-fig { width: 88%; max-width: none; }
  .eli-plot { height: auto; aspect-ratio: 416 / 64; }
}

/* ==========================================================================
   The Innovation Game figure (Experience entry "The Innovation Game"), generated by tig-fig/gen.py (staging).
   Shared part for versions a and b. Calm tokens only (--paper --paper-2 --ink --ink-2 --muted --rule --rule-2 --accent
   --mono; --ease-out with a fallback); one accent. Default state = final state. Motion exists only under
     @media screen and (prefers-reduced-motion: no-preference)  +  html.fx:not(.lowfx) .tig-fig.drawn
   (html.fx and .drawn come from the site's app.js: once, when the figure is 35 % in view, 2.5 s fallback), and every
   animation fills backwards only, so JS off, reduced motion, low-power, print and reader views all show the complete
   figure. Animated properties: transform, opacity, clip-path.
   ========================================================================== */
.fig.tig-fig { position: relative; padding-top: 16px; margin-top: clamp(14px, 1.6vw, 22px); max-width: 26rem; }   /* 16 px: the tag's strip, as on the separator and ELI figures */
/* The "illustrative" tag (.fig-tag) and the Replay button (.fig-replay, made by app.js) are the site's own: styled in
   cv-calm/style.css ("Figure tag and replay"). Only their places are set here, per version. */
.tig-stage {
  position: relative;
  font-family: var(--mono); font-size: 0.75rem; line-height: 18px; font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--muted);
}
.tig-l { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.tig-l path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tig-lab { position: absolute; white-space: nowrap; color: var(--muted); }
.tig-top { top: 0; }
.tig-bot { bottom: 0; }
.tig-anim { opacity: 0; }                                  /* animation-only */

@media print {
  .tig-fig .tig-anim { display: none !important; }
  .tig-stage { break-inside: avoid; }
}
html.lowfx .tig-fig * { animation: none !important; }

/* Desktop width (Myron, 15 Oct): like the pipeline, separator and ELI figures, the figure sits in its entry's .row (after .body,
   spanning the row: site rule .row > .fig { grid-column: 1 / -1 }) and takes 59.8 % of it (~534 px at 1440); phones: full width. */
@media (min-width: 761px) {
  .fig.tig-fig { width: 59.8%; max-width: none; }
}
/* The Innovation Game figure, version a: "Verified, checkpoint by checkpoint" (generated by gen.py). Needs tig-fig-base.css.
   Proof-of-learning style verification, zoomed in on the last stretch of the valley: the benchmarker (solid) and the verifier
   (dashed) take noisy, SGD-like update steps from one start down to the minimum. At every checkpoint the runs wait while the pair
   is checked: a ring of radius delta round the verifier's checkpoint, the benchmarker's inside it, the gap measured, and
   ||theta - theta'|| < delta. At the last checkpoint, on the minimum: verified, with a green check. No numbers. */
.tig-a { --tig-ok: oklch(55% 0.13 150); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tig-a { --tig-ok: oklch(75% 0.12 150); } }
:root[data-theme="dark"] .tig-a { --tig-ok: oklch(75% 0.12 150); }
.tig-a .tig-stage { padding-block: 18px 32px; }
.tig-plot { position: relative; aspect-ratio: 832 / 320; }
.tig-cont { overflow: hidden; }
.tig-cont path { stroke: var(--rule-2); stroke-width: 1; }
.tig-cont .tig-c0, .tig-cont .tig-c1, .tig-cont .tig-c2 { stroke: color-mix(in oklch, var(--rule-2) 55%, var(--muted)); }
.tig-cont :is(.tig-c3, .tig-c4, .tig-c5, .tig-c6, .tig-c7) { stroke: var(--rule-2); }
.tig-cont .tig-c8, .tig-cont .tig-c9, .tig-cont .tig-c10 { stroke: var(--rule); }
.tig-ben  { stroke: var(--accent); stroke-width: 2; }
.tig-ver  { stroke: var(--ink-2); stroke-width: 1.3; stroke-dasharray: 4 4; }
.tig-bdot { stroke: var(--accent); stroke-width: 5; }
.tig-vdot { stroke: var(--ink-2); stroke-width: 4.5; }
.tig-ckb  { stroke: var(--accent); stroke-width: 8; }
.tig-ckv  { stroke: var(--ink-2); stroke-width: 7; }
.tig-ring { stroke: var(--ink-2); stroke-width: 12; }
.tig-hole { stroke: var(--paper); stroke-width: 10; }
.tig-hd   { stroke-width: 8; }
.tig-hd-b { stroke: var(--accent); }
.tig-hd-v { stroke: var(--ink-2); }
.tig-ring-d { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.tig-gapl { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: butt; }

/* labels */
.tig-l-land { left: 0; }
.tig-keys { position: absolute; left: 0; display: flex; gap: 0 18px; white-space: nowrap; }
.tig-a .fig-replay { top: auto; bottom: 4px; }
.tig-a .tig-bot { bottom: 7px; }
.tig-key::before { content: ""; display: inline-block; width: 14px; height: 0; margin: 0 6px 3px 0; vertical-align: middle; border-top: 2px solid var(--accent); }
.tig-k-v::before { border-top: 1.5px dashed var(--ink-2); }
.tig-l-ck { margin: 0; transform: translate(-100%, 0); }    /* under the first pair's ring, to its left: clear of both runs */
@media (max-width: 380px) { .tig-l-ck { white-space: normal; width: 10.5ch; text-align: right; } }   /* "checkpoint pair" wraps on very narrow phones instead of leaving the figure */
.tig-l-f  { left: clamp(0px, calc(var(--x) - 64px), calc(100% - 140px)); transform: translateY(calc(-100% - 4px));
  display: inline-flex; align-items: center; gap: 6px; color: var(--ink);
  font-family: var(--serif); font-style: italic; font-size: 1rem; line-height: 1.2; letter-spacing: 0.01em; }
.tig-l-f:not(.tig-f2) { opacity: 0; }         /* static: the formula sits at the last pair */
.tig-l-ok { left: clamp(0px, calc(var(--x) - 40px), calc(100% - 84px)); margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.tig-okm { width: 10px; height: 8px; overflow: visible; flex: none; }
.tig-okm path { fill: none; stroke: var(--tig-ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@keyframes tig-wb { 0% { clip-path: inset(0 100% 0 0); } 8.411% { clip-path: inset(0 85.012% 0 0); } 16.822% { clip-path: inset(0 75.798% 0 0); } 25.234% { clip-path: inset(0 65.257% 0 0); } 37.383% { clip-path: inset(0 65.257% 0 0); } 45.794% { clip-path: inset(0 54.242% 0 0); } 54.206% { clip-path: inset(0 43.99% 0 0); } 62.617% { clip-path: inset(0 32.844% 0 0); } 74.766% { clip-path: inset(0 32.844% 0 0); } 83.178% { clip-path: inset(0 22.296% 0 0); } 91.589% { clip-path: inset(0 13.087% 0 0); } 100% { clip-path: inset(0 7.719% 0 0); } }
@keyframes tig-wv { 0% { clip-path: inset(0 100% 0 0); } 8.411% { clip-path: inset(0 86.119% 0 0); } 16.822% { clip-path: inset(0 76.227% 0 0); } 25.234% { clip-path: inset(0 66.809% 0 0); } 37.383% { clip-path: inset(0 66.809% 0 0); } 45.794% { clip-path: inset(0 54.986% 0 0); } 54.206% { clip-path: inset(0 45.99% 0 0); } 62.617% { clip-path: inset(0 35.008% 0 0); } 74.766% { clip-path: inset(0 35.008% 0 0); } 83.178% { clip-path: inset(0 24.727% 0 0); } 91.589% { clip-path: inset(0 14.267% 0 0); } 100% { clip-path: inset(0 5.714% 0 0); } }
@keyframes tig-hb { 0% { transform: translate(-87.273%, -34.095%); } 8.411% { transform: translate(-77.293%, -30.041%); } 16.822% { transform: translate(-68.079%, -13.195%); } 25.234% { transform: translate(-57.538%, -8.776%); } 37.383% { transform: translate(-57.538%, -8.776%); } 45.794% { transform: translate(-46.523%, -3.021%); } 54.206% { transform: translate(-36.271%, -0.907%); } 62.617% { transform: translate(-25.125%, -3.098%); } 74.766% { transform: translate(-25.125%, -3.098%); } 83.178% { transform: translate(-14.577%, -1.913%); } 91.589% { transform: translate(-5.367%, -4.995%); } 100% { transform: none; } }
@keyframes tig-hv { 0% { transform: translate(-89.278%, -31.618%); } 8.411% { transform: translate(-80.405%, -22.632%); } 16.822% { transform: translate(-70.513%, -14.255%); } 25.234% { transform: translate(-61.095%, -11.899%); } 37.383% { transform: translate(-61.095%, -11.899%); } 45.794% { transform: translate(-49.272%, -3.538%); } 54.206% { transform: translate(-40.276%, -0.09%); } 62.617% { transform: translate(-29.294%, -2.779%); } 74.766% { transform: translate(-29.294%, -2.779%); } 83.178% { transform: translate(-19.013%, -2.475%); } 91.589% { transform: translate(-8.552%, -7.539%); } 100% { transform: none; } }
@keyframes tig-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tig-pop  { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes tig-f0 { 0% { opacity: 0; } 14.423% { opacity: 1; } 87.5% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tig-f1 { 0% { opacity: 0; } 14.423% { opacity: 1; } 87.5% { opacity: 1; } 100% { opacity: 0; } }

@media screen and (prefers-reduced-motion: no-preference) {
  /* waiting below the fold: both runs on the start, nothing drawn or checked yet */
  html.fx:not(.lowfx) .tig-a:not(.drawn) :is(.tig-wb, .tig-wv) { clip-path: inset(0 100% 0 0); }
  html.fx:not(.lowfx) .tig-a:not(.drawn) .tig-hb { transform: translate(-87.273%, -34.095%); }
  html.fx:not(.lowfx) .tig-a:not(.drawn) .tig-hv { transform: translate(-89.278%, -31.618%); }
  html.fx:not(.lowfx) .tig-a:not(.drawn) :is(.tig-pair, .tig-l-f, .tig-l-ck, .tig-l-ok) { opacity: 0; }
  /* the runs, step by step (450 ms a step, waiting 650 ms at each checkpoint) */
  html.fx:not(.lowfx) .tig-a.drawn .tig-wb { animation: tig-wb 5350ms cubic-bezier(0.45, 0, 0.55, 1) 250ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-hb { animation: tig-hb 5350ms cubic-bezier(0.45, 0, 0.55, 1) 250ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-wv { animation: tig-wv 5350ms cubic-bezier(0.45, 0, 0.55, 1) 250ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-hv { animation: tig-hv 5350ms cubic-bezier(0.45, 0, 0.55, 1) 250ms backwards; }
  /* each pair checked as the runs reach it: ring, gap and points (they stay), the formula (it moves on to the next pair) */
  html.fx:not(.lowfx) .tig-a.drawn .tig-p0 { transform-origin: 32.349% 52.052%; animation: tig-pop 460ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 1660ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-p1 { transform-origin: 64.151% 61.172%; animation: tig-pop 460ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 3660ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-p2 { transform-origin: 93.445% 63.951%; animation: tig-pop 460ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 5660ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-f0 { animation: tig-f0 2080ms linear 1780ms; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-f1 { animation: tig-f1 2080ms linear 3780ms; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-f2 { animation: tig-fade 360ms ease-out 5780ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-l-ck { animation: tig-fade 360ms ease-out 1840ms backwards; }
  html.fx:not(.lowfx) .tig-a.drawn .tig-l-ok { animation: tig-fade 500ms ease-out 5820ms backwards; }
}

/* TIG figure smaller than the other figures on desktop (Myron, 15 Oct): 0.8 x 0.85 x 88% of the row, same left edge. Phones keep full width. */
@media (min-width: 761px) { .fig.tig-fig { width: 59.8%; } }

/* Tablets (761-1179px, e.g. iPad Pro portrait): the column is under 800px, so at 88% the pipeline fell back to its stacked
   phone layout. Here the figures use the full column, and the pipeline's zoom is set so its cards keep the left-to-right
   layout (inner width stays >= 810px). TIG keeps its 0.68 relative size. (Myron, 15 Oct) */
@media (min-width: 761px) and (max-width: 1179.98px) {
  .fig.sepfig, .fig.eli-fig { width: 100%; }
  .fig.tig-fig { width: 68%; }
  .fig.pb { width: 100%; zoom: 0.85; }
}
@media (min-width: 761px) and (max-width: 899.98px) { .fig.pb { zoom: 0.84; } }
@media (min-width: 900px) and (max-width: 1023.98px) { .fig.pb { zoom: 0.74; } }

/* Paper entry: the paper's abstract instead of the CV bullets (Myron, 15 Oct; preview) */
.abstract p { color: var(--ink-2); text-wrap: pretty; }
.abstract p + p { margin-top: 0.7em; }
.abs-label { font-weight: 600; color: var(--ink); }