/* Bavantha Udugama, bavanthau.github.io
   A research instrument, not a template. No framework and no external requests. */

:root {
  color-scheme: light;
  --paper: #eef3f2;
  --surface: #f9fbfa;
  --surface-2: #e1e9e7;
  --ink: #0b1719;
  --ink-2: #506064;
  --accent: #006f6b;
  --accent-hover: #005653;
  --accent-soft: rgba(0, 111, 107, 0.1);
  --signal: #945500;
  --signal-soft: rgba(168, 100, 0, 0.1);
  --rule: #c6d1cf;
  --rule-strong: #9cacaa;
  --stage: #071113;
  --stage-ink: #eaf3f2;
  --stage-muted: #91a5a7;
  --shadow: 0 1.5rem 4rem rgba(9, 31, 33, 0.1);
  --display: "Inter Tight", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
  --measure: 68ch;
  --max: 82rem;
  --radius: 0.45rem;
  --radius-lg: 1rem;

  /* Editorial scale. Display type is set in viewport units so a heading fills the
     measure it was composed against at any width, not just at 1440. */
  --t-micro: 0.68rem;
  --t-mono: 0.75rem;
  --t-sm: 0.86rem;
  --t-body: 1.02rem;
  --t-lede: clamp(1.1rem, 0.96rem + 0.6vw, 1.38rem);
  --t-h3: clamp(1.25rem, 1.02rem + 0.9vw, 1.7rem);
  --t-h2: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  --t-h1: clamp(2.6rem, 1.1rem + 6.1vw, 5.6rem);
  --t-display: clamp(2.9rem, 0.35rem + 8.6vw, 7.6rem);
  --t-figure: clamp(2.6rem, 1.4rem + 4.4vw, 5.2rem);

  /* Vertical rhythm. Chapters are spaced by one token so pacing can be tuned in one place. */
  --chapter: clamp(5.5rem, 9vw, 11rem);
  --chapter-tight: clamp(3rem, 5vw, 5.5rem);

  /* Tracking. Display type is set tight, technical metadata is set open. */
  --track-display: -0.033em;
  --track-mono: 0.09em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #071113;
    --surface: #0d1a1d;
    --surface-2: #142427;
    --ink: #e9f1f0;
    --ink-2: #a6b5b7;
    --accent: #5ad1ca;
    --accent-hover: #8fe8e3;
    --accent-soft: rgba(90, 209, 202, 0.11);
    --signal: #ffbd4a;
    --signal-soft: rgba(255, 189, 74, 0.11);
    --rule: #263639;
    --rule-strong: #46595c;
    --stage: #040b0d;
    --stage-ink: #edf7f6;
    --stage-muted: #8ca2a4;
    --shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.34);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #071113;
  --surface: #0d1a1d;
  --surface-2: #142427;
  --ink: #e9f1f0;
  --ink-2: #a6b5b7;
  --accent: #5ad1ca;
  --accent-hover: #8fe8e3;
  --accent-soft: rgba(90, 209, 202, 0.11);
  --signal: #ffbd4a;
  --signal-soft: rgba(255, 189, 74, 0.11);
  --rule: #263639;
  --rule-strong: #46595c;
  --stage: #040b0d;
  --stage-ink: #edf7f6;
  --stage-muted: #8ca2a4;
  --shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.34);
}

:root[data-theme="light"] { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--rule-strong) var(--paper);
}

body {
  min-width: 20rem;
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background-image: radial-gradient(circle at center, var(--rule) 0.7px, transparent 0.8px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 46rem);
}

::selection { color: var(--ink); background: var(--accent-soft); }
img, video { max-width: 100%; }

.wrap { width: min(100%, var(--max)); margin-inline: auto; padding-inline: clamp(1.1rem, 3vw, 2.5rem); }

.skip {
  position: fixed;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 200;
  translate: 0 -160%;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-decoration: none;
}

.skip:focus { translate: 0; }

/* Shell */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid color-mix(in srgb, var(--rule), transparent 20%);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
}

.masthead-inner {
  min-height: 4.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 750;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--accent); }

.wordmark-mark {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--rule-strong);
  background:
    linear-gradient(90deg, transparent 48%, var(--rule) 49%, var(--rule) 51%, transparent 52%),
    linear-gradient(transparent 48%, var(--rule) 49%, var(--rule) 51%, transparent 52%);
  color: var(--ink);
  font: 700 0.62rem/1 var(--mono);
  letter-spacing: -0.08em;
}

.masthead-id {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  min-width: 0;
}
.orcid {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  color: var(--ink-2);
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.orcid:hover { color: var(--accent); }
.orcid:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.orcid-glyph { width: 0.95rem; height: 0.95rem; flex: none; }

.nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.2vw, 1.65rem);
  min-width: 0;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav a {
  position: relative;
  padding-block: 0.55rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  scale: 0 1;
  transform-origin: right;
  background: var(--accent);
  transition: scale 180ms ease;
}

.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { scale: 1; transform-origin: left; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: 500 0.65rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); }
.theme-toggle[hidden] { display: none; }
.theme-toggle-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--ink); }

.site-main { min-height: 65vh; }
.page-content { padding-top: clamp(3rem, 7vw, 6.75rem); }

.foot {
  position: relative;
  margin-top: clamp(5rem, 10vw, 9rem);
  padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.foot::before {
  content: "END OF TRANSMISSION";
  position: absolute;
  top: -0.65rem;
  left: max(calc((100vw - var(--max)) / 2 + 2.5rem), 1.1rem);
  padding-inline: 0.55rem;
  background: var(--paper);
  color: var(--ink-2);
  font: 500 0.62rem/1.2 var(--mono);
  letter-spacing: 0.13em;
}

.foot-inner { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(0, 1.5fr); gap: 2rem 4rem; align-items: end; }
.foot-signoff { display: flex; gap: 0.85rem; align-items: flex-start; }
.foot-signoff p { color: var(--ink-2); }
.foot strong { color: var(--ink); font-family: var(--body); font-size: 0.9rem; }
.foot ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.foot p { margin: 0; max-width: none; }
.foot a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.foot a:hover { color: var(--accent); }

/* Type */

h1, h2, h3, h4 {
  margin: 0 0 0.8rem;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 660;
  letter-spacing: var(--track-display);
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 0.94; }
h2 { margin-top: var(--chapter-tight); font-size: var(--t-h2); }
h3 { margin-top: 2.75rem; font-size: var(--t-h3); line-height: 1.12; }

/* Long-form pages read in a column, and their sections are separated by a rule rather than
   by a jump in size. Evidence still breaks out of the column with .bleed. */
.page-research .site-main .wrap,
.page-publications .site-main .wrap,
.page-contact .site-main .wrap { max-width: 68rem; }
.page-research .page-content > h2,
.page-publications .page-content > h2,
.page-cv .page-content > h2 {
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  max-width: 24ch;
}
p, li { max-width: var(--measure); }
/* structural list items are layout, not prose: the measure cap belongs to their text */

p { margin: 0 0 1.15rem; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.mono, .affil { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.eyebrow, .media-label, .wipe-title {
  margin: 0 0 0.75rem;
  color: var(--accent);
  font: 650 0.68rem/1.4 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.standfirst { max-width: 52ch; margin-top: 1.2rem; color: var(--ink-2); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem); line-height: 1.58; }
.lede { max-width: 49ch; color: var(--ink-2); font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.4rem); line-height: 1.58; }
.section-intro { max-width: 62ch; color: var(--ink-2); font-size: 1.02rem; }
.prose { max-width: 43rem; }
.prose p { max-width: none; }

.tag {
  display: inline-block;
  translate: 0 -0.2em;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: 600 0.62rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag-progress, .tag-review { border-color: var(--accent); color: var(--accent); }

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

/* Buttons */

.action { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 2.8rem; padding: 0.65rem 1rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); font: 600 0.73rem/1 var(--mono); text-decoration: none; transition: border-color 160ms ease, color 160ms ease, background 160ms ease; }
.action::after { content: "↗"; font-size: 0.95rem; }
.action:hover { border-color: var(--accent); color: var(--accent); }
.action-primary { border-color: var(--accent); background: var(--accent); color: var(--paper); }
.action-primary:hover { background: var(--accent-hover); color: var(--paper); }

/* Routes */

.routes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(4rem, 8vw, 7rem); border-block: 1px solid var(--rule); }
.route { position: relative; min-width: 0; padding: 1.5rem 1.2rem 1.5rem 0; color: var(--ink); text-decoration: none; }
.route + .route { padding-left: 1.2rem; border-left: 1px solid var(--rule); }
.route::after { content: "↗"; position: absolute; top: 1.4rem; right: 0.8rem; color: var(--accent); }
.route span { display: block; padding-right: 1.3rem; font-family: var(--display); font-size: 1.05rem; font-weight: 700; }
.route small { display: block; margin-top: 0.65rem; color: var(--ink-2); font-size: 0.72rem; line-height: 1.55; }
.route:hover { background: var(--accent-soft); color: var(--accent); }

/* Images and videos */

figure { margin: 2.5rem 0; }
figure picture { display: block; }
figure img, figure video { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
figcaption { max-width: 84ch; margin-top: 0.75rem; color: var(--ink-2); font: 0.71rem/1.65 var(--mono); }

/* Figures are eased back a little against a dark page ground. Anything sitting on the
   instrument ground is exempt: that ground is dark in both themes, so a theme-dependent
   filter there would render the same predicted depth or semantics two different ways. */
:root[data-theme="dark"] figure:not(.hero-map) img,
:root[data-theme="dark"] figure video { filter: brightness(0.92) contrast(0.97); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) figure:not(.hero-map) img,
  :root:not([data-theme="light"]) figure video { filter: brightness(0.92) contrast(0.97); }
}
.ground-dark figure img, .ground-dark figure video,
.ground-dark .pxm-pane img { filter: none !important; }

.v-figure { margin: 2.25rem 0; }
.v-wrap, .v-gate { position: relative; overflow: hidden; border-radius: var(--radius); }
.v-toggle, .v-play { border: 1px solid color-mix(in srgb, var(--stage-ink), transparent 55%); border-radius: 999px; background: rgba(4, 11, 13, 0.82); color: var(--stage-ink); font: 600 0.66rem/1 var(--mono); letter-spacing: 0.05em; cursor: pointer; backdrop-filter: blur(8px); }
.v-toggle { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.5rem 0.8rem; }
.v-toggle:hover, .v-play:hover { border-color: #5ad1ca; color: #8fe8e3; }
.v-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0.75rem 1.1rem; }
.v-size { color: var(--stage-muted); margin-left: 0.35rem; }
.v-figure.is-portrait .v-wrap, .v-figure.is-portrait .v-gate { max-width: 25rem; margin-inline: auto; }
.v-figure.is-portrait video, .v-figure.is-portrait img { max-height: 38rem; object-fit: contain; background: var(--stage); }
.v-figure.is-portrait figcaption { max-width: 44rem; margin-inline: auto; }
.media-label { margin: 2rem 0 0.7rem; color: var(--ink-2); }
.media-label + .v-figure { margin-top: 0; }

/* Wipe */

.wipe { margin: 2.5rem 0; }
.wipe-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.wipe-pane { position: relative; min-width: 0; }
.wipe-pane img { border-radius: 0; border: 1px solid var(--rule); }
.wipe-label { position: absolute; left: 0.55rem; bottom: 0.55rem; padding: 0.22rem 0.45rem; border: 1px solid rgba(255,255,255,0.32); border-radius: 999px; background: rgba(4, 11, 13, 0.82); color: var(--stage-ink); font: 600 0.58rem/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.wipe.is-interactive .wipe-stage { display: grid; grid-template-columns: 1fr; }
.wipe.is-interactive .wipe-pane { grid-area: 1 / 1; transition: opacity 80ms linear; }
.wipe.is-interactive .wipe-pane[data-pane="0"] { position: relative; }
.wipe.is-interactive .wipe-label { opacity: 0; }
.wipe.is-interactive .wipe-pane[style*="opacity: 1"] .wipe-label { opacity: 1; }
.wipe-control { display: block; margin-top: 0.85rem; }
.wipe-control::before { content: "RGB"; color: var(--ink-2); font: 0.58rem/1 var(--mono); }
.wipe-control::after { content: "SEMANTICS"; float: right; color: var(--ink-2); font: 0.58rem/1 var(--mono); }
.wipe-control input[type="range"] { width: 100%; height: 1rem; accent-color: var(--accent); cursor: ew-resize; opacity: 0.75; }
.wipe-control input[type="range"]:hover { opacity: 1; }

/* Platform composition */

.showcase, .gallery { margin: 2rem 0 2.5rem; }
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.showcase-grid .ps-lead { grid-column: 1 / -1; }
.showcase img, .showcase video, .gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.ps-lead img { aspect-ratio: 16 / 9; }
.ps-small img { aspect-ratio: 4 / 3; }
.ps-clip { position: relative; min-height: 0; }
.ps-clip video { aspect-ratio: 9 / 16; }
.gallery-grid { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
.gallery-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.g-lead, .g-thumb { position: relative; aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; border-radius: var(--radius); }
.g-lead img, .g-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Descent */

/* The measurement is the section, not an object inside it. */

@media (prefers-reduced-motion: no-preference) {

}

@keyframes fade-up { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Cards and result units */

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; margin: 1.75rem 0 3rem; border-top: 1px solid var(--rule); list-style: none; }
.card { position: relative; min-width: 0; max-width: none; padding: clamp(1.4rem, 3vw, 2.25rem); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 68%, transparent); transition: background 180ms ease; }
.card:nth-child(2n) { border-right: 0; }
.card:hover { background: var(--surface); }
.card h3 { margin: 0.25rem 0 0.75rem; padding-right: 1.5rem; font-size: clamp(1.18rem, 1.6vw, 1.55rem); line-height: 1.2; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a::after { content: "↗"; position: absolute; right: 1.25rem; top: 1.25rem; color: var(--accent); font: 500 0.9rem/1 var(--mono); }
.card h3 a:hover { color: var(--accent); }
.card p { max-width: none; font-size: 0.9rem; }
.card .eyebrow { padding-right: 2rem; color: var(--ink-2); }
.card-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-bottom: 0 !important; color: var(--ink-2); font: 0.66rem/1.4 var(--mono); }

.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin: 1.75rem 0 2.5rem; border-block: 1px solid var(--rule); list-style: none; }
.result { min-width: 0; max-width: none; padding: 1.5rem 1.25rem 1.5rem 0; }
.result + .result { padding-left: 1.25rem; border-left: 1px solid var(--rule); }
.result .value { display: block; color: var(--accent); font: 650 clamp(1.45rem, 2.4vw, 2.2rem)/1.1 var(--mono); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.result .what { display: block; margin-top: 0.45rem; font-size: 0.9rem; }
.result .conditions { display: block; margin-top: 0.5rem; color: var(--ink-2); font: 0.68rem/1.55 var(--mono); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 3rem; }
.act { padding: 1.5rem; border: 1px solid var(--rule); background: var(--surface); }
.act-no { color: var(--accent); font: 650 0.65rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.act h3 { margin: 0.5rem 0 0.7rem; font-size: 1.35rem; }
.act p { font-size: 0.9rem; }

/* Publications and long-form pages */

.page:not(.page-home) .page-content > h1:first-child { max-width: 12ch; margin-bottom: 1rem; }
.publist { padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--rule); list-style: none; counter-reset: publication; }
.pub { position: relative; display: grid; grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr); gap: 1rem 3rem; max-width: none; padding: 2rem 0; border-bottom: 1px solid var(--rule); counter-increment: publication; }
.pub::before { content: "0" counter(publication); position: absolute; right: 0; top: 2rem; color: var(--rule-strong); font: 500 0.62rem/1 var(--mono); }
.pub h3 { grid-column: 1; margin: 0; padding-right: 2rem; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.2; }
.pub h3 a { color: var(--ink); text-decoration: none; }
.pub h3 a:hover { color: var(--accent); }
.pub > :not(h3) { grid-column: 2; }
.pub p { max-width: 66ch; margin-bottom: 0.55rem; }
.pub-authors { color: var(--ink); font-size: 0.88rem; }
.pub-authors .self { font-weight: 750; }
.pub-venue { color: var(--ink-2); font: 0.72rem/1.55 var(--mono); }

.linkrow { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.85rem; }
.linkrow a { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.25rem 0.65rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--accent); font: 600 0.65rem/1 var(--mono); text-decoration: none; }
.linkrow a:hover { border-color: var(--accent); }
.limits { max-width: 48rem; padding-left: 1.2rem; margin: 0 0 1.75rem; }
.limits li { margin-bottom: 0.7rem; padding-left: 0.25rem; }
.limits li::marker { color: var(--accent); }
.role-press { margin-top: 0; }
.role-press li { font-size: 0.89rem; line-height: 1.62; }
.role-press .press-note { display: block; margin-top: 0.15rem; color: var(--ink-2); font-size: 0.84rem; }

.note { max-width: 53rem; margin: 2rem 0; padding: 1.2rem 1.3rem; border-left: 2px solid var(--accent); background: var(--accent-soft); }
.note p { margin: 0; font-size: 0.9rem; }
.note p + p { margin-top: 0.7rem; }
.note-label { display: block; margin-bottom: 0.45rem; color: var(--accent); font: 650 0.65rem/1.3 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; }
.method { max-width: 52rem; margin: 1.5rem 0 2.5rem; border-top: 1px solid var(--rule); }
.method-item { display: grid; grid-template-columns: minmax(9rem, 0.55fr) minmax(0, 1.45fr); gap: 1.5rem; max-width: none; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.method-item h3 { margin: 0; font-size: 1.05rem; }
.method-item p { margin: 0; }
.hypothesis { max-width: 48rem; margin: 2rem 0; padding: 1.5rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); background: var(--surface); }
.hypothesis p { margin: 0; font: 550 clamp(1.05rem, 1rem + 0.4vw, 1.3rem)/1.55 var(--display); }

/* Tables */

.table-scroll { overflow-x: auto; margin: 2rem 0; border-top: 1px solid var(--rule); }
table { width: 100%; min-width: 38rem; border-collapse: collapse; font: 0.75rem/1.45 var(--mono); font-variant-numeric: tabular-nums; }
th, td { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { color: var(--ink-2); font-size: 0.62rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
tr.embedded td { color: var(--signal); background: var(--signal-soft); }

/* CV */

.timeline { padding: 0; margin: 2rem 0; border-top: 1px solid var(--rule); list-style: none; }
.tl-item { position: relative; display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem; max-width: none; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.tl-item::before { content: ""; position: absolute; left: 9.94rem; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.tl-item::after { content: ""; position: absolute; left: calc(9.94rem - 0.24rem); top: 1.8rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); }
.tl-when { padding-right: 1rem; color: var(--ink-2); font: 0.72rem/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.tl-what { padding-left: 1rem; }
.tl-what h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.tl-org { margin: 0 0 0.45rem; color: var(--accent); font: 0.7rem/1.4 var(--mono); }
.tl-what p { margin: 0; font-size: 0.9rem; }
.tl-media { margin-top: 1.25rem; }
.tl-media .media-label { margin-top: 0; text-transform: none; letter-spacing: 0.02em; font-size: 0.75rem; }
.tl-media .v-figure { margin-top: 0.8rem; }

/* Progressive components */

.switch { margin: 1.5rem 0 2.5rem; }
.switch-tabs { display: inline-flex; gap: 0.2rem; margin-bottom: 1rem; padding: 0.25rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); }
.switch-tabs button { padding: 0.4rem 0.75rem; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 0.66rem/1 var(--mono); cursor: pointer; }
.switch-tabs button:hover { color: var(--ink); }
.switch-tabs button[aria-selected="true"] { background: var(--accent); color: var(--paper); }
.switch-panel[hidden] { display: none; }
.yt { margin: 2.5rem 0; }
.yt-btn { position: relative; display: block; width: 100%; max-width: 48rem; padding: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.yt-btn img { border: 0; border-radius: 0; }
.yt-btn:hover { border-color: var(--accent); }
.yt-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 3.8rem; height: 2.65rem; border-radius: 999px; background: rgba(4,11,13,.82); }
.yt-play::after { content: ""; position: absolute; left: 53%; top: 50%; translate: -50% -50%; border-style: solid; border-width: 0.48rem 0 0.48rem 0.8rem; border-color: transparent transparent transparent white; }
.yt-frame { width: 100%; max-width: 48rem; aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: var(--radius); }
.onward { max-width: none; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--ink-2); font: 0.72rem/1.5 var(--mono); }

/* Responsive */

@media (min-width: 60em) {
  .showcase-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.62fr); grid-template-rows: auto auto; }
  .showcase-grid .ps-lead { grid-column: 1 / 3; grid-row: 1; }
  .showcase-grid .ps-small:nth-of-type(2) { grid-column: 1; grid-row: 2; }
  .showcase-grid .ps-small:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .showcase-grid .ps-clip { grid-column: 3; grid-row: 1 / -1; }
  .ps-clip video { height: 100%; aspect-ratio: auto; }
  .gallery-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
  .gallery-side { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .tl-media { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
  .tl-media .media-label { grid-column: 1 / -1; }
  .tl-media .v-figure.is-portrait { max-width: 15rem; }
}

@media (max-width: 70em) {

  .routes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route:nth-child(4) { border-left: 0; }
  .route:nth-child(n+4) { border-top: 1px solid var(--rule); }
}

@media (max-width: 52em) {
  .masthead-inner { grid-template-columns: 1fr auto; padding-block: 0.75rem; }
  .nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; overflow-x: auto; padding: 0.2rem 0 0.35rem; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }

  .chapter-heading { grid-template-columns: 1fr; }

  .pub { grid-template-columns: 1fr; gap: 0.7rem; }
  .pub > :not(h3) { grid-column: 1; }
  .method-item { grid-template-columns: 1fr; gap: 0.5rem; }
}

@media (max-width: 43.99em) {
  body { line-height: 1.65; }
  .page-content { padding-top: 2.75rem; }
  .nav { gap: 0.7rem; font-size: 0.61rem; }
  .wordmark-name { display: none; }
  .orcid-num { display: none; }
  .theme-toggle [data-theme-label] { display: none; }
  .theme-toggle { width: 2rem; justify-content: center; padding-inline: 0; }

  .hero-layers { display: none; }

  .subsection-heading { grid-template-columns: 1fr; gap: 0.7rem; }
  .subsection-heading > span { padding: 0; }
  .wipe-stage { grid-template-columns: 1fr; }
  .wipe-pane + .wipe-pane { margin-top: 0.5rem; }
  .wipe.is-interactive .wipe-pane + .wipe-pane { margin-top: 0; }

  .cards, .results, .acts { grid-template-columns: 1fr; }
  .card { border-right: 0; }
  .result { padding: 1.25rem 0; }
  .result + .result { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .routes { grid-template-columns: 1fr; }
  .route, .route + .route { padding: 1.2rem 2.2rem 1.2rem 0; border-left: 0; border-top: 1px solid var(--rule); }
  .route:first-child { border-top: 0; }
  .route::after { right: 0; }
  .tl-item { grid-template-columns: 1fr; gap: 0.3rem; padding-left: 1.2rem; }
  .tl-item::before { left: 0; }
  .tl-item::after { left: -0.24rem; }
  .tl-what { padding-left: 0; }
  .foot-inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .wipe.is-interactive .wipe-pane { transition: none; }
}

@media print {
  .masthead, .foot, .theme-toggle, .v-toggle, .v-play { display: none !important; }
  body { background: white; color: black; }
  body::before { display: none; }
  .page-content { padding-top: 0; }
  a { color: inherit; }
}

/* ------------------------------------------------------------------
   Design pass: narrative beats, compact prediction viewer, motion.
   ------------------------------------------------------------------ */

/* Reading progress, pinned under the masthead rule */
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--accent), var(--signal)); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* Reveal on scroll */
.will-reveal { opacity: 0; transform: translateY(0.9rem); }
.will-reveal.is-revealed { opacity: 1; transform: none; transition: opacity 620ms cubic-bezier(.2,.7,.2,1), transform 620ms cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .will-reveal { opacity: 1; transform: none; } }

/* Narrative beats: copy beside its clip, alternating side */

.beat-index::before { content: ""; display: inline-block; width: 1.6rem; height: 1px; margin-right: 0.6rem; vertical-align: 0.28em; background: currentColor; }

.beat-link a::after { content: " →"; }

/* Prediction viewer: two frames on one row, compact, semantics first */
.wipe-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; margin-top: 1.75rem; }
.wipe-pair .wipe + .wipe { margin-top: 0; }
/* The comparison is evidence, not a widget in a tray: rules and the frames themselves. */
.wipe-compact { margin: 0; padding: 0; border: 0; background: none; }
.wipe-compact .wipe-title { margin: 0 0 0.6rem; }
.wipe-compact figcaption { margin-top: 0.6rem; font-size: 0.65rem; line-height: 1.6; }
.wipe-compact .wipe-pane img { max-height: 15rem; object-fit: cover; }

/* Segmented layer control */
.wipe-steps { display: flex; gap: 0; margin-top: 0.75rem; border-top: 1px solid var(--rule); }
.wipe-step { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.4rem; border: 0; border-top: 2px solid transparent; margin-top: -1px; border-radius: 0; background: transparent; color: var(--ink-2); font: 600 0.6rem/1.1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.wipe-step:hover { color: var(--ink); }
.wipe-step[aria-pressed="true"] { border-top-color: var(--accent); color: var(--ink); }

.wipe-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wipe-compact .wipe-control { margin-top: 0.5rem; }
.wipe-compact .wipe-control::before { content: "Blend"; }
.wipe-compact .wipe-control::after { content: ""; }
.wipe-compact .wipe-control input[type="range"] { height: 1rem; }

/* Publication and project media get room to breathe */
.pub-figures .wipe-compact, .proj-media .wipe-compact { margin-bottom: 1.5rem; }

@media (max-width: 60em) {

  .wipe-pair { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Curriculum vitae
   ------------------------------------------------------------------ */

.cv-head { max-width: none; padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.cv-head h1 { margin: 0.4rem 0 0; }
.cv-head .standfirst { max-width: 62ch; font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.28rem); }

.cv-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--rule); }
.cv-facts dt { color: var(--ink-2); font: 650 0.6rem/1.3 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; }
.cv-facts dd { margin: 0.35rem 0 0; font-size: 0.9rem; line-height: 1.5; }

.cv-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; }
.cv-actions .action { cursor: pointer; font: inherit; }

.cv-layout { display: grid; grid-template-columns: clamp(12rem, 15vw, 16rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.cv-main { min-width: 0; }

/* Sticky section rail with scrollspy */
.cv-toc { position: sticky; top: 5.5rem; align-self: start; display: flex; flex-direction: column; gap: 0.15rem; padding-left: 1.1rem; border-left: 1px solid var(--rule); }
.cv-toc a { position: relative; padding: 0.5rem 0; color: var(--ink-2); font: 600 0.82rem/1.35 var(--body); text-decoration: none; transition: color 160ms ease; }
.cv-toc a::before { content: ""; position: absolute; left: -0.95rem; top: 50%; width: 2px; height: 0; translate: 0 -50%; background: var(--accent); transition: height 200ms ease; }
.cv-toc a:hover { color: var(--ink); }
.cv-toc a[aria-current="true"] { color: var(--accent); }
.cv-toc a[aria-current="true"]::before { height: 1.1rem; }

/* The loop this PhD closes, as clips inside the role itself. Two up, because the role
   body is narrower than the page and four across leaves the frames unreadable. */
.role-loop { margin-top: 1.5rem; }

/* Uniform frames: the drone clip is portrait and the rest are wide, so crop to one ratio. */

@media (max-width: 46em) { .loopstrip { grid-template-columns: 1fr; } }
@media print { .role-loop { display: none; } }

.cv-section { padding-top: clamp(2.5rem, 5vw, 3.5rem); scroll-margin-top: 6rem; }
.cv-section:first-child { padding-top: 0; }
.cv-section > h2 { margin: 0 0 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); }
.cv-section .section-intro { margin-top: -0.4rem; }

/* At a glance: four measurements on one rule, each keeping its own conditions. */
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin: 1.75rem 0 0; }
.glance-item { padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.glance-item dt { font-size: clamp(1.4rem, 0.95rem + 1.15vw, 1.95rem); }
@media (max-width: 68em) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34em) { .glance { grid-template-columns: 1fr; } }

/* Roles and education entries */
.roles { display: grid; gap: 0; }
.role { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.75rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rule); }
.role:last-child { border-bottom: 0; }
.role-when span { display: block; position: sticky; top: 6rem; color: var(--ink-2); font: 0.7rem/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.role-body { min-width: 0; }
.role-body h3 { margin: 0 0 0.3rem; font-size: 1.08rem; letter-spacing: -0.01em; }
.role-org { margin: 0 0 0.7rem; color: var(--accent); font: 650 0.72rem/1.5 var(--mono); }
.role-org span { color: var(--ink-2); font-weight: 400; }
.role-org span::before { content: " · "; }
.role-note { margin: 0 0 0.8rem; max-width: 62ch; font-size: 0.88rem; color: var(--ink-2); }
.role-result { margin: 0 0 0.4rem; font-size: 0.85rem; font-weight: 600; }
.role-points { margin: 0; padding-left: 1.1rem; max-width: 70ch; }
.role-points li { margin-bottom: 0.55rem; font-size: 0.89rem; line-height: 1.62; }
.role-points li::marker { color: var(--accent); }
.role-edu .role-body p:last-child { margin: 0; font-size: 0.88rem; color: var(--ink-2); max-width: 62ch; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
.chips:empty { display: none; }
.chip { padding: 0.25rem 0.55rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 600 0.62rem/1.3 var(--mono); letter-spacing: 0.03em; }

/* Publications list */
.cv-pubs { list-style: none; margin: 1.25rem 0 1rem; padding: 0; }
.cv-pub { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.cv-pub:first-child { border-top: 0; }
.cv-pub-year { color: var(--ink-2); font: 0.72rem/1.7 var(--mono); font-variant-numeric: tabular-nums; }
.cv-pub-body a { font-weight: 600; font-size: 0.92rem; line-height: 1.5; }
.cv-pub-meta { display: block; margin-top: 0.3rem; color: var(--ink-2); font: 0.7rem/1.6 var(--mono); }

/* Teaching, awards, skills */
.teach { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.75rem; padding: 0.5rem 0; }
.teach p { margin: 0; max-width: 66ch; font-size: 0.9rem; }
.teach-when { color: var(--ink-2); font: 0.7rem/1.7 var(--mono); }
.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; }
.award { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); font-size: 0.85rem; line-height: 1.5; }
.award-year { color: var(--accent); font: 650 0.72rem/1.5 var(--mono); }
.skills { display: grid; gap: 1.4rem; }
.skill-head { margin: 0 0 0.55rem; font: 650 0.78rem/1.4 var(--body); }
.skill-head span { margin-left: 0.5rem; color: var(--ink-2); font: 0.62rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.skill .chips { margin-top: 0; }

.tl-milestone .tl-what h3::after { content: "milestone"; margin-left: 0.6rem; padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 650 0.55rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.16em; }

@media (max-width: 62em) {
  .cv-layout { grid-template-columns: 1fr; }
  .cv-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .cv-toc a { padding: 0.35rem 0.7rem; border: 1px solid var(--rule); border-radius: 999px; }
  .cv-toc a::before { display: none; }
  .cv-toc a[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .role, .teach, .cv-pub { grid-template-columns: 1fr; gap: 0.45rem; }
  .role-when span { position: static; }
}

/* Print: a real one-page-per-section CV, no chrome, no video */
@media print {
  :root { --paper: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; --ink-2: #333; --accent: #005a56; --rule: #bbb; }
  .masthead, .site-footer, .routes, .cv-actions, .cv-toc, .theme-toggle, .skip, .v-toggle, .tl-media, .crumbs { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .wrap, .page-content { max-width: none; padding: 0; margin: 0; }
  .cv-layout { display: block; }
  .cv-section { padding-top: 1.2rem; break-inside: avoid; }
  .cv-section > h2 { break-after: avoid; }
  .role, .cv-pub, .award, .skill { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .cv-pub-body a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
  .will-reveal { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------
   Clips: hover elevation, and a larger frame on demand
   ------------------------------------------------------------------ */

.v-wrap { transition: transform 260ms cubic-bezier(.2,.7,.2,1), box-shadow 260ms cubic-bezier(.2,.7,.2,1); }
.v-wrap:hover, .v-wrap:focus-within { transform: translateY(-3px) scale(1.006); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--accent), transparent 62%); }
.ps-clip.v-wrap:hover, .ps-clip.v-wrap:focus-within { transform: translateY(-3px); }

.v-expand { position: absolute; right: 0.75rem; bottom: 0.75rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border: 1px solid color-mix(in srgb, var(--stage-ink), transparent 55%); border-radius: 999px; background: rgba(4, 11, 13, 0.82); color: var(--stage-ink); font: 600 0.66rem/1 var(--mono); letter-spacing: 0.05em; cursor: pointer; opacity: 0; translate: 0 0.35rem; transition: opacity 200ms ease, translate 200ms ease, border-color 160ms ease, color 160ms ease; backdrop-filter: blur(8px); }
.v-wrap:hover .v-expand, .v-wrap:focus-within .v-expand { opacity: 1; translate: 0 0; }
.v-expand:hover { border-color: var(--accent-hover); color: #8fe8e3; }
.v-expand:focus-visible { opacity: 1; translate: 0 0; outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .v-expand { opacity: 1; translate: 0 0; } }

.v-lightbox { width: min(96vw, 100rem); max-width: none; max-height: 96vh; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--stage-ink); }
.v-lightbox::backdrop { background: rgba(3, 9, 11, 0.82); backdrop-filter: blur(6px); }
.v-lightbox[open] { animation: lb-in 220ms cubic-bezier(.2,.7,.2,1); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.v-lightbox-figure { margin: 0; display: grid; justify-items: center; gap: 0.9rem; }
.v-lightbox-stage { display: flex; justify-content: center; width: 100%; }
.v-lightbox-video { width: auto; max-width: 100%; max-height: 82vh; border: 1px solid color-mix(in srgb, var(--stage-ink), transparent 78%); border-radius: var(--radius-lg); background: #000; box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.55); }
.v-lightbox-video.is-portrait { max-height: 84vh; }
.v-lightbox figcaption { max-width: 74ch; margin: 0; color: #cfe0df; font: 0.72rem/1.65 var(--mono); text-align: center; }
.v-close { position: absolute; top: -2.6rem; right: 0; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid color-mix(in srgb, var(--stage-ink), transparent 60%); border-radius: 999px; background: rgba(4, 11, 13, 0.7); color: var(--stage-ink); font-size: 0.8rem; cursor: pointer; }
.v-close:hover { border-color: var(--accent-hover); color: #8fe8e3; }
.v-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 40em) {
  .v-lightbox { width: 100vw; max-height: 100vh; }
  .v-close { top: 0.6rem; right: 0.6rem; z-index: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .v-wrap, .v-expand { transition: none; }
  .v-wrap:hover, .v-wrap:focus-within { transform: none; }
  .v-lightbox[open] { animation: none; }
}

@media print { .v-lightbox, .v-expand { display: none !important; } }

/* ------------------------------------------------------------------
   The loop diagram, and the then-and-now pair
   ------------------------------------------------------------------ */

/* Then and now sit side by side on one rule. Two boxes would have made the comparison
   look like two products rather than one question asked twice. */
.thenow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); margin-top: 2rem; align-items: start; border-top: 1px solid var(--rule); }
.thenow-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.4rem 0 0; border: 0; background: none; }
.thenow-now { box-shadow: inset 0 2px 0 0 var(--accent); }
.thenow-when { margin: 0; color: var(--accent); font: 650 0.64rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.thenow-card h4 { margin: 0; font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.02em; }
.thenow-card > p { margin: 0; max-width: 52ch; color: var(--ink-2); font-size: 0.95rem; line-height: 1.68; }
.thenow-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: auto !important; padding-top: 0.3rem; }
.thenow-links a { font: 600 0.75rem/1.4 var(--body); text-decoration: none; }
.thenow-links a::after { content: " ↗"; }
.thenow-note { color: var(--ink-2) !important; font: 0.66rem/1.6 var(--mono) !important; }
.thenow-figure { margin: 0.3rem 0 0; }
.thenow-figure img { border-radius: 0; border: 1px solid var(--rule); }

@media (max-width: 52em) {
  .thenow { grid-template-columns: 1fr; }
}

.thenow { align-items: stretch; }
.thenow-card { height: 100%; }
.thenow-play { margin: 0.2rem 0 0 !important; }
.thenow-play a { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.9rem 0.55rem 0.6rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); font: 600 0.72rem/1 var(--body); text-decoration: none; transition: border-color 160ms ease, color 160ms ease; }
.thenow-play a:hover { border-color: var(--accent); color: var(--accent); }
.thenow-play-mark { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); }
.thenow-play-mark::before { content: ""; border-style: solid; border-width: 0.3rem 0 0.3rem 0.5rem; border-color: transparent transparent transparent var(--paper); margin-left: 0.12rem; }
.thenow-play a::after { content: "↗"; color: var(--ink-2); }

/* ------------------------------------------------------------------
   Watch pages: one clip, its chapters, and what it shows
   ------------------------------------------------------------------ */

/* The clip is the reason the page exists, so the heading is sized to get out of its way
   rather than to the display scale the argument pages use. */
.page-videos .page-content { padding-top: clamp(2.25rem, 5vw, 4rem); }
.page-videos .page-content > h1 { max-width: 24ch; font-size: clamp(1.95rem, 4.2vw, 3.4rem); line-height: 1.06; }
.page-videos .standfirst { max-width: 60ch; font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.28rem); }
.page-videos h2 { margin-top: clamp(2.75rem, 5vw, 4.25rem); font-size: clamp(1.5rem, 2.6vw, 2.3rem); }

.watch-stage { position: relative; isolation: isolate; margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; padding: 0.85rem; border: 1px solid #213337; border-radius: var(--radius-lg); background: var(--stage); color: var(--stage-ink); box-shadow: var(--shadow); overflow: hidden; }
.watch-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(90, 209, 202, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(90, 209, 202, 0.05) 1px, transparent 1px); background-size: 2rem 2rem; }
.watch-stage-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0.25rem 0.6rem; color: var(--stage-muted); font: 600 0.6rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.watch-stage-head span:first-child::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-right: 0.45rem; border-radius: 50%; background: #5ad1ca; box-shadow: 0 0 0 0.24rem rgba(90, 209, 202, 0.12); }
.watch-player { border-radius: var(--radius); overflow: hidden; background: #000; }
.watch-player video { display: block; width: 100%; height: auto; }
.watch-caption { max-width: 84ch; margin: 0.9rem 0 0; color: var(--ink-2); font: 0.72rem/1.7 var(--mono); }

.chapters { max-width: 54rem; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--rule); list-style: none; }
.chapters li { max-width: none; border-bottom: 1px solid var(--rule); }
.chapter-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 1rem; align-items: baseline; width: 100%; padding: 0.85rem 0.7rem 0.85rem 0; text-align: left; }
button.chapter-row { border: 0; border-radius: var(--radius); background: none; color: inherit; font: inherit; cursor: pointer; transition: background 140ms ease, color 140ms ease; }
button.chapter-row:hover { background: var(--accent-soft); color: var(--accent); }
button.chapter-row[aria-current="true"] { background: var(--accent-soft); }
.chapter-time { color: var(--accent); font: 650 0.72rem/1.6 var(--mono); font-variant-numeric: tabular-nums; }
.chapter-name { font-size: 0.94rem; line-height: 1.5; }

.watch-notes { max-width: 54rem; margin: 1.4rem 0 0; border-top: 1px solid var(--rule); }
.watch-note { display: grid; grid-template-columns: minmax(9rem, 0.55fr) minmax(0, 1.45fr); gap: 1.5rem; max-width: none; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.watch-note h3 { margin: 0; font-size: 1.05rem; }
.watch-note p { margin: 0; }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; margin: 1.4rem 0 0; border-top: 1px solid var(--rule); }
.specs > div { display: grid; grid-template-columns: minmax(6rem, 0.5fr) minmax(0, 1fr); gap: 1rem; padding: 0.8rem 1.4rem 0.8rem 0; border-bottom: 1px solid var(--rule); }
.specs dt { color: var(--ink-2); font: 650 0.6rem/1.75 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.specs dd { margin: 0; color: var(--ink); font: 0.8rem/1.65 var(--mono); font-variant-numeric: tabular-nums; }

/* One measured result beside its conditions, not a third of a three-up row */
.results.is-single { grid-template-columns: minmax(0, 38rem); }

/* The link back to the watch page, wherever the clip is embedded */
.watch-link { display: inline-block; margin-left: 0.45rem; color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.watch-link::after { content: " →"; }
.watch-link:hover { border-bottom-color: currentColor; }

@media (max-width: 52em) {
  .watch-note { grid-template-columns: 1fr; gap: 0.6rem; }
  .specs { grid-template-columns: 1fr; }
  .chapter-row { grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.8rem; }
}

@media print {
  .watch-stage, .chapters { display: none !important; }
}
.cards.is-single { grid-template-columns: minmax(0, 38rem); }

/* The CV loop strip hides its captions, so the clip's title carries the watch-page link */

/* ==================================================================
   EDITORIAL LAYER — 2026 redesign
   Primitives shared by every page. The rule here is that structure is
   made with rules, scale and space, not with boxes. A card is only used
   where the thing really is a discrete object you can pick up.
   ================================================================== */

/* Break a block out of the reading column to the full viewport. body already
   clips overflow-x, so the scrollbar width never produces a horizontal scroll. */
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.bleed-inner { width: min(100%, var(--max)); margin-inline: auto; padding-inline: clamp(1.1rem, 3vw, 2.5rem); }
.bleed-wide { width: min(100%, 108rem); margin-inline: auto; padding-inline: clamp(1.1rem, 3vw, 2.5rem); }

/* A dark full-bleed ground for sequences that read as instrument output.
   It keeps its own colours in both themes: perception output was authored on black. */
.ground-dark {
  background: var(--stage);
  color: var(--stage-ink);
  --ink: var(--stage-ink);
  --ink-2: var(--stage-muted);
  --rule: #1d2f32;
  --rule-strong: #34494d;
  --paper: var(--stage);
  --surface: #0c1719;
  --accent: #5ad1ca;
  --accent-hover: #8fe8e3;
  --signal: #ffbd4a;
}

/* Technical metadata. Everywhere on the site, a mono line under a title carries
   the conditions: dataset, resolution, hardware, status. */
.spec {
  margin: 0;
  max-width: none;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.spec-lg { font-size: var(--t-sm); text-transform: none; letter-spacing: 0.04em; }
.spec a { color: inherit; }

/* The chapter head: a hairline, an index, a title. No box. */
.chapter { margin-block: var(--chapter); }
.chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
}
.chapter-head > .spec { display: flex; justify-content: space-between; gap: 0.35rem 1rem; }
/* on a narrow screen the two halves of a chapter line stack rather than each wrapping
   inside a column too narrow to hold it */
@media (max-width: 46em) {
  .chapter-head > .spec { flex-direction: column; }
}
.chapter-title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 640;
  line-height: 0.98;
  letter-spacing: var(--track-display);
}
.chapter-lede {
  margin: 0;
  max-width: 54ch;
  color: var(--ink-2);
  font-size: var(--t-lede);
  line-height: 1.55;
}
@media (min-width: 58em) {
  .chapter-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; column-gap: clamp(2rem, 5vw, 5rem); }
  .chapter-head > .spec { grid-column: 1 / -1; }
  .chapter-lede { padding-top: 0.5rem; }
}

/* A measured figure: the number is the composition, the conditions travel with it. */
.readout { display: block; }
.readout dt,
.readout-value {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-figure);
  font-weight: 640;
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.readout-emb dt, .readout-value.is-emb { color: var(--signal); }
.readout dd { margin: 0.7rem 0 0; }
.readout-label {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}
.readout-note { display: block; margin-top: 0.35rem; max-width: 34ch; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }

/* The editorial index: numbered entries separated by rules. Replaces card grids. */
.index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.index > li { max-width: none; }
.index > li { border-bottom: 1px solid var(--rule); }
.index-row {
  display: grid;
  gap: 0.75rem 1.5rem;
  padding-block: clamp(1.5rem, 3vw, 2.6rem);
  text-decoration: none;
  color: inherit;
}
.index-num { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: var(--track-mono); color: var(--ink-2); }
.index-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 640;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.index-text { margin: 0; max-width: 58ch; color: var(--ink-2); line-height: 1.6; }
@media (min-width: 52em) {
  .index-row { grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr) minmax(0, 12rem); align-items: start; }
}
a.index-row:hover .index-title, a.index-row:focus-visible .index-title { color: var(--accent); }
a.index-row { transition: background-color 0.18s ease; }
a.index-row:hover { background: var(--accent-soft); }

/* Media that is allowed to be bigger than the prose it belongs to. */
.plate { margin: 0; }
.plate img, .plate video { display: block; width: 100%; height: auto; }
.plate figcaption { margin-top: 0.8rem; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; max-width: 62ch; }
.plate-frame { position: relative; overflow: hidden; background: var(--stage); border: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Wide figures keep their own horizontal scroll rather than shrinking until the axis labels
   collide. Below the width where they fit, the clipped edge is marked so it is clear there
   is more of the figure to reach. */
@media (max-width: 46em) {

}