@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/SpaceGrotesk.woff2) format('woff2');
}

:root {
  --bg: #FCFCFD;
  --bg-card: #FFFFFF;
  --bg-alt: #EEF1F5;
  --ink: #0A1620;
  --ink-soft: #36465A;
  --ink-faint: #6B7686;
  --rule: #DDE2E8;
  --rule-strong: #B4BBC5;
  --accent: #1F5A8A;
  --accent-deep: #103D62;
  --accent-pale: #E6EFF7;
  --accent-2: #E8745C;
  --accent-2-deep: #C25A45;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--ink); text-decoration: none; }
.mono { font-family: 'JetBrains Mono', monospace; }

/* ─── Sticky top bar (from v1) ─── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.topbar .inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.4rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar .mark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
}
.topbar nav {
  display: flex; gap: 2.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.topbar nav a:hover { color: var(--accent); }

/* ─── Page container — generous whitespace ─── */
.container {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ─── Section. Uses a single vertical rhythm so the gap between any
   two adjacent sections (with or without the Vision band in between)
   is consistent. No dotted dividers — whitespace separates. ─── */
.section {
  padding: 14vh 0;
}
/* v4 pattern: h2 on the left, small label on the right, body full-width below. */
.section .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.section .head .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 22ch;
}

/* ─── Hero ─── */
.hero {
  padding: 8rem 0 8rem;
  min-height: 80vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* Hero is now full-bleed (sits outside .container); the inner
   .container constrains only the text, keeping it aligned with the
   rest of the page. width: 100% is needed because .hero is a flex
   column and `margin: 0 auto` disables cross-axis stretch — without
   it, .container shrinks to its intrinsic content width and ends up
   offset right of the standard content area below. */
.hero > .container {
  width: 100%;
  position: relative;
  z-index: 1;
}
.hero-text {
  position: relative;
  z-index: 1;
}
/* Figure is anchored to the right edge of the viewport so the flow
   reaches the viewport corner without clipping. Width is viewport-
   relative so it scales with screen size. */
.hero-figure {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 65vw;
  pointer-events: none;
  z-index: 0;
}
.hero-figure canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.8rem, 7vw, 6rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: 0;
}
.hero h1 strong {
  font-weight: 400;
  color: var(--accent-2);
}

/* ─── Frontmatter — Research/Practice/Lab triplet that used to live
   inside the hero. Now its own band right below, with a top rule
   that visually separates it from the hero. Full-paragraph copy
   (not the abbreviated single-line version we tried before). ─── */
.frontmatter {
  padding: 3rem 0 6rem;
  border-top: 1px solid var(--rule);
}
.frontmatter .meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  padding-top: 2.5rem;
}
.frontmatter .meta .col .key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.frontmatter .meta .col p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 28ch;
}
.frontmatter .meta .col p strong { color: var(--ink); font-weight: 500; }

/* ─── Editorial sections (unboxed, dotted dividers between them) ─── */
.editorial .body {
  max-width: 56rem;
}
.editorial .body p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  max-width: 38ch;
}
.editorial .body p strong { color: var(--ink); font-weight: 500; }

/* v4 split pattern — title on the left, prose on the right.
   Used for prose-heavy sections (What we make). Named .split to
   avoid colliding with the .statement <p> inside .vision-band. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.split h2 {
  max-width: 14ch;
}
.split .body {
  max-width: 38rem;
  padding-top: 0.5rem;
}
.split .body p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  max-width: 40ch;
}
.split .body p strong { color: var(--ink); font-weight: 500; }
.split .body .read {
  display: inline-block;
  margin-top: 1.2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.split .body .read:hover { color: var(--accent); border-color: currentColor; }

/* ─── Vision (full-bleed pastel band, lives on its own).
   v4 pattern: label stacked above the big statement, both centred
   in a constrained inner width. Padding matches .section's rhythm
   so the gap between Vision↔neighbour matches section↔section. ─── */
.vision-band {
  background: var(--accent-pale);
  padding: 14vh 0;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.vision-band .inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
}
.vision-band .label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
}
.vision-band .statement {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 26ch;
}
.vision-band .statement strong {
  color: var(--accent-2);
  font-weight: 400;
}

/* ─── Built for: clean numbered list, no boxes (it's a description, not a link) ─── */
.built-list {
  margin-top: 0;
  border-top: 1px solid var(--ink);
}
.built-list .row {
  display: grid;
  grid-template-columns: 3rem 13rem 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.18s ease;
}
.built-list .row:hover { padding-left: 0.6rem; }
.built-list .row .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.built-list .row h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.built-list .row p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ─── Research (cards, since each links out) ─── */
.research .featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule-strong);
  background: var(--bg-card);
  overflow: hidden;
}
.research .featured .figure {
  background: var(--bg-alt);
  position: relative;
  min-height: 18rem;
  overflow: hidden;
}
.research .featured .figure canvas {
  width: 100%; height: 100%; display: block;
}
.research .featured .copy {
  padding: 2.6rem 2.4rem 2.2rem;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.8rem;
}
.research .featured .copy .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.research .featured .copy h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.22;
  margin: 0.8rem 0 1.2rem;
  max-width: 28ch;
}
.research .featured .copy h3 a:hover { color: var(--accent); }
.research .featured .copy .abstract {
  font-size: 0.98rem;
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 48ch;
}
.research .featured .copy .read {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease;
}
.research .featured .copy .read:hover { background: var(--ink); color: var(--bg); }

.research .more {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.research .more .card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: 1.4rem 1.4rem 1.2rem;
  display: flex; flex-direction: column;
  gap: 0.7rem;
  min-height: 9rem;
  transition: border-color 0.18s ease;
  overflow: hidden;
}
.research .more .card:hover { border-color: var(--rule-strong); }
.research .more .card .figure {
  /* fill the card's width (bleed to its inner edges), moderate height —
     so the visualisation sits naturally in its container, like the
     featured card's figure pane does, instead of being forced into
     a small centred square. */
  margin: -1.4rem -1.4rem 0.7rem;
  height: 11rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  position: relative;
}
.research .more .card .figure canvas {
  width: 100%; height: 100%; display: block;
}
.research .more .card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.research .more .card h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.25;
  flex: 1;
}
.research .more .card h4 a { color: var(--ink); }
.research .more .card h4 a:hover { color: var(--accent); }
.research .more .card .arr {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-faint);
  align-self: flex-end;
}
.research .more .card:hover .arr { color: var(--accent); }

.research .all-link {
  margin-top: 1.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  display: inline-block;
  width: max-content;
}
.research .all-link:hover { color: var(--accent); border-color: currentColor; }

/* ─── How it works (3-step process, unboxed since each step is on-page
   prose, not a link out). ─── */
/* Pipeline flow visualisation that sits between the .head and the
   .steps row. Horizontal band, full container width. Soft fade at
   top/bottom/left/right edges so lines bleed out instead of being
   hard-clipped against the box. */
.how-it-works-flow {
  position: relative;
  height: 5rem;
  margin-bottom: 2rem;
}
/* Canvas extends 2rem above and below the 5rem visual band so wave
   peaks always have room to draw without clipping against a canvas
   edge — the worst-case wobble drift (≈±28 px with the current
   field) fits in 2rem of overflow. The visual band itself stays
   5rem; the extension is transparent, and lines that drift into it
   draw over the surrounding heading and step text. */
.how-it-works-flow canvas {
  position: absolute;
  left: 0; right: 0;
  top: -2rem;
  width: 100%;
  height: calc(100% + 4rem);
  display: block;
}
.how-it-works .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  align-items: start;
}
.how-it-works .step .num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 1.2rem;
  letter-spacing: -0.005em;
}
.how-it-works .step h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin-bottom: 0.6rem;
}
.how-it-works .step p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30ch;
}

/* ─── Trust & Compliance + Partners ─── */
.trust .intro {
  margin: -1rem 0 2.5rem;
  max-width: 56ch;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.trust .badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
.trust .badge h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.trust .badge p {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 30ch;
}
.trust .partners {
  margin-top: 6rem;
  padding-top: 3rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.trust .partners .label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2rem;
}
.trust .partners .logos {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 4rem;
  align-items: center;
  justify-content: center;
}
.trust .partners .partner-logo {
  height: 48px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.18s ease;
}
.trust .partners .partner-logo:hover { opacity: 0.85; }

/* ─── Platform / Models (full-bleed --bg-alt band). The three K01 product
   tiers as a card catalogue: Cohort (Public), Trajectory (By request), Lab
   (Partnership). Section is named "Models" in the page and lives under
   .platform for historical class-naming reasons. ─── */
.platform {
  background: var(--bg-alt);
}
.platform .inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.platform-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
}
.platform .demo,
.platform .card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 11rem;
}
.platform .card {
  transition: border-color 0.18s ease;
}
.platform .card:hover { border-color: var(--rule-strong); }
.platform .demo-label,
.platform .card .name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92rem;
  color: var(--ink);
}
.platform .demo-label {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.platform .code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}
.platform .code .c { color: var(--ink-faint); }
.platform .demo-note,
.platform .card p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.platform .card p { flex: 1; }
.platform .card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0.1rem 0 0.3rem;
}
.platform .card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin-top: 0.6rem;
}
.platform .card .meta .v { color: var(--accent); }

/* ─── Model tiers (catalogue inside the Platform/Models band) ─────────
   Three uniform cards naming the K01 product line. The access-tier chip
   is the fastest-scannable element on each card and uses a small pill
   treatment (accent-pale ground + accent text) — distinct from research
   card .meta (a venue label, plain text) because its job is different:
   marking the tier ladder Public -> By request -> Partnership at a glance.
   The model name carries the visual weight (no figure to anchor the card,
   unlike research cards). The section foot is a small docs/status note. */
.platform .model-tiers {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.platform .model-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 11rem;
  transition: border-color 0.2s ease;
}
.platform .model-card:hover { border-color: var(--rule-strong); }

/* Access-tier chip. Small pill, accent-pale ground, accent text. */
.platform .model-card .meta {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-pale);
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
}

/* Model name — the visual anchor, since there is no figure. */
.platform .model-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0.1rem 0 0;
}

/* Description: one short line, methods-section register. flex:1 stretches
   the description so the action sits at the foot of the card, aligning
   actions across the three cards regardless of description length. */
.platform .model-card p {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

/* Tier action: small monospace inline-link at the foot of each card.
   Patterned after the page's "Read paper / All publications" affordance,
   not a SaaS-style button. The .is-static variant is the "Coming soon"
   tier marker — a status, not an action — so no arrow, no link, no hover. */
.platform .model-action {
  align-self: flex-start;
  margin-top: 0.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.platform .model-action:hover {
  color: var(--accent-deep);
  border-bottom-color: currentColor;
}
.platform .model-action .arr {
  font-family: 'JetBrains Mono', monospace;
  transition: transform 0.18s ease;
}
.platform .model-action:hover .arr { transform: translateX(0.2rem); }
.platform .model-action.is-static {
  color: var(--ink-faint);
  cursor: default;
}
.platform .model-action.is-static:hover {
  color: var(--ink-faint);
  border-bottom-color: transparent;
}

/* Section foot: docs/status note. Reads as secondary, with a rule above
   to mark the end of the cards. */
.platform .platform-docs {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--ink-faint);
}
.platform .platform-docs a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.platform .platform-docs a:hover { border-bottom-color: var(--accent); }

/* ─── Team (unboxed — these are people on the page, not links out) ─── */
.team .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.team .person .avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rule);
  margin-bottom: 1.25rem;
  display: block;
}
.team .person h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
}
.team .person h3 a:hover { color: var(--accent); }
.team .person .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.team .person .bio {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 32ch;
  margin-bottom: 0.5rem;
}
.team .person .cred {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.team .person .cred a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.team .person .cred a:hover { color: var(--accent); }


/* ─── Footer (v4 4-column structure, inverted: dark bg, paper-on-night
   text). With the extra Process / Trust sections above, a dark footer
   closes the page more strongly than a light one. ─── */
footer {
  background: var(--ink);
  color: var(--bg);
  padding: 5rem 0 3.5rem;
  margin-top: 0;
}
footer .inner {
  max-width: 80rem; margin: 0 auto;
  padding: 0 2.5rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 3rem;
}
footer .col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--bg) 55%, transparent);
  margin-bottom: 1rem;
}
footer .col .mail {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--bg);
  letter-spacing: -0.01em;
  border-bottom: 1px solid color-mix(in srgb, var(--bg) 40%, transparent);
  padding-bottom: 1px;
  display: inline-block;
  line-height: 1.2;
}
footer .col .mail:hover { color: var(--accent-pale); border-color: currentColor; }
footer .col p {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--bg) 70%, transparent);
  line-height: 1.55;
  max-width: 22ch;
}
footer .col a {
  color: color-mix(in srgb, var(--bg) 85%, transparent);
  display: block;
  padding: 0.2rem 0;
  font-size: 0.92rem;
}
footer .col a:hover { color: var(--bg); }

@media (max-width: 900px) {
  .container { padding: 0 1.25rem; }
  .topbar .inner { padding: 1rem 1.25rem; }
  .topbar nav { gap: 1rem; font-size: 0.62rem; }
  .hero {
    padding: 4rem 0 4rem;
    min-height: 90vh;
    justify-content: flex-end;
  }
  /* On mobile the figure is rotated 90° from desktop: full-bleed
     across the top of the hero, dense at top, fading toward the
     bottom (text). Same rules as desktop, just along the y axis
     instead of x. Text overlaps the bottom of the figure (same as
     desktop where it overlaps the left of the figure). */
  .hero-figure {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    transform: none;
  }
  .frontmatter { padding: 2rem 0 4rem; }
  .frontmatter .meta { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.6rem; }
  .section .head { gap: 0.4rem; }
  .split { grid-template-columns: 1fr; gap: 1rem; }
  .vision-band { padding: 6vh 0; margin: 3vh 0; }
  .vision-band .inner { padding: 0 1.25rem; }
  .vision-band .label { margin-bottom: 1.4rem; }
  .vision-band .statement { max-width: none; }
  .built-list .row { grid-template-columns: 3rem 1fr; gap: 1rem; row-gap: 0.4rem; }
  .built-list .row p { grid-column: 2; }
  .research .featured { grid-template-columns: 1fr; }
  .research .featured .figure { min-height: 12rem; }
  .research .more { grid-template-columns: 1fr; }
  .platform-row { grid-template-columns: 1fr; }
  .platform .model-tiers { grid-template-columns: 1fr; }
  .how-it-works .steps { grid-template-columns: 1fr; gap: 2rem; }
  .trust .badges { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .trust .partners { margin-top: 3rem; padding-top: 1.5rem; }
  .team .grid { grid-template-columns: 1fr; gap: 2rem; }
  footer { padding: 3rem 0 2.5rem; }
  footer .inner { padding: 0 1.25rem; grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ─── Phone-specific. Narrower than the 900px tablet breakpoint;
   leaves desktop and tablet layout untouched. ─── */
@media (max-width: 600px) {
  .topbar .inner { flex-wrap: wrap; gap: 0.55rem 0; padding: 0.9rem 1.25rem; }
  .topbar nav { width: 100%; flex-wrap: wrap; gap: 0.55rem 0.9rem; letter-spacing: 0.1em; font-size: 0.6rem; }
  .hero { padding: 5.5rem 0 4.5rem; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.7rem); }
  .hero-text { margin-bottom: 0; }
  .frontmatter .meta { padding-top: 1.4rem; gap: 1.5rem; }
}

/* ─── Prose pages (privacy, terms, security) ─── */
/* Long-form content pages. Inherit all design tokens from :root;
   only add the narrower layout, section rhythm, and prose styling
   that the landing page doesn't need. */
.prose-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.prose-page main {
  flex: 1;
  max-width: 48rem;
  margin: 0 auto;
  padding: 6rem 2.5rem 6rem;
  width: 100%;
}
.prose-page .legal-hero {
  margin-bottom: 1rem;
}
.prose-page .legal-hero .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex; align-items: center; gap: 0.7rem;
  margin-bottom: 1.6rem;
}
.prose-page .legal-hero .eyebrow::before {
  content: ""; width: 1.6rem; height: 1px;
  background: currentColor;
}
.prose-page .legal-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 0.6rem;
  max-width: 22ch;
}
.prose-page .legal-hero .lede {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0.4rem 0 0.8rem;
}
.prose-page .legal-hero .effective {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 1.4rem 0 0;
}
.prose-page section {
  padding: 2.4rem 0;
  border-top: 1px solid var(--rule);
}
.prose-page section:last-of-type {
  border-bottom: 1px solid var(--rule);
}
.prose-page h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}
.prose-page p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
  max-width: 62ch;
}
.prose-page p:last-child { margin-bottom: 0; }
.prose-page p strong,
.prose-page li strong {
  color: var(--ink);
  font-weight: 500;
}
.prose-page main a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: border-color 0.18s ease;
}
.prose-page main a:hover {
  border-bottom-color: var(--accent);
}
.prose-page ul {
  list-style: none;
  margin: 0.6rem 0 1rem;
  padding: 0;
}
.prose-page li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}
.prose-page li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}

/* Pull-quote / call-out block */
.prose-page .highlight {
  background: var(--accent-pale);
  border-left: 3px solid var(--accent);
  padding: 1.3rem 1.5rem;
  margin: 0.6rem 0 0.4rem;
}
.prose-page .highlight p {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  max-width: none;
}

/* Data table (privacy) */
.prose-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.6rem 0 0.4rem;
  font-size: 0.94rem;
}
.prose-page th,
.prose-page td {
  text-align: left;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  color: var(--ink-soft);
  line-height: 1.55;
}
.prose-page th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  border-bottom: 1px solid var(--ink);
}
.prose-page td strong { color: var(--ink); font-weight: 500; }

/* Compliance list (security) */
.prose-page .compliance-list {
  margin: 0.6rem 0 0.4rem;
  border-top: 1px solid var(--rule);
}
.prose-page .compliance-list .row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.prose-page .compliance-list .row .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.prose-page .compliance-list .row .tag a {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.prose-page .compliance-list .row .desc {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Contact block (security) */
.prose-page .contact-section {
  padding: 3rem 0 1rem;
  text-align: left;
  border-top: 1px solid var(--rule);
}
.prose-page .contact-section h2 { margin-bottom: 0.6rem; }
.prose-page .contact-section .contact-email {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  display: inline-block;
  margin-top: 0.4rem;
}
.prose-page .contact-section .contact-email:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* Prose page footer — thin, single-line, back-to-home */
.prose-page > footer {
  background: transparent;
  color: var(--ink-faint);
  padding: 0;
  margin: 0;
}
.prose-page > footer .inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 1.4rem 2.5rem 2.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  grid-template-columns: none;
}
.prose-page > footer a {
  color: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}
.prose-page > footer a:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* 404 — centred error layout */
.error-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.error-page main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  text-align: center;
}
.error-page .error-content {
  max-width: 34rem;
}
.error-page .error-code {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(6rem, 18vw, 11rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.error-page .error-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.error-page .error-message {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 2.4rem;
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
.error-page .back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  background: var(--ink);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.18s ease;
}
.error-page .back:hover { background: var(--accent-deep); }

@media (max-width: 900px) {
  .prose-page main { padding: 4.5rem 1.25rem 4rem; }
  .prose-page > footer .inner { padding: 1.4rem 1.25rem 2rem; }
  .prose-page .compliance-list .row { grid-template-columns: 1fr; gap: 0.2rem; }
  .prose-page table { font-size: 0.88rem; }
  .prose-page th, .prose-page td { padding: 0.7rem 0.6rem; }
}

/* ─── Signup form (startup program) ─── */
.prose-page form {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 36rem;
}
.prose-page .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.prose-page .form-group label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.prose-page .form-group input,
.prose-page .form-group select,
.prose-page .form-group textarea {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.85rem 1rem;
  line-height: 1.4;
  width: 100%;
  transition: border-color 0.18s ease, background-color 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.prose-page .form-group textarea {
  min-height: 6rem;
  resize: vertical;
  font-family: 'Space Grotesk', sans-serif;
}
.prose-page .form-group select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.prose-page .form-group input:focus,
.prose-page .form-group select:focus,
.prose-page .form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg);
}
.prose-page .form-group input::placeholder,
.prose-page .form-group textarea::placeholder {
  color: var(--ink-faint);
}
.prose-page .form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--ink);
  color: var(--bg);
  padding: 1rem 1.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  align-self: flex-start;
  margin-top: 0.2rem;
  transition: background 0.18s ease;
}
.prose-page .form-submit:hover { background: var(--accent-deep); }
.prose-page .form-message {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.1rem;
  border-left: 3px solid;
  margin-top: 0.4rem;
}
.prose-page .form-message.success {
  background: var(--accent-pale);
  border-color: var(--accent);
  color: var(--ink);
}
.prose-page .form-message.error {
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  border-color: var(--accent-2);
  color: var(--ink);
}

/* ─── Contact modal (Formspree, opened from nav / K01 Lab card / footer) ─
   Native <dialog> element. Backdrop is a soft tint over the page; the
   modal itself is a restrained white card matching the page's other
   boxed surfaces (1px rule, small radius, no glass/blur). Form fields
   reuse the page's eyebrow + input vocabulary. */
.contact-modal {
  /* Native <dialog> centring: fixed positioning + inset 0 + margin auto.
     Setting `position: relative` (as I did the first pass) clobbered the
     browser-default centring and the dialog sat at top-left. */
  position: fixed;
  inset: 0;
  margin: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 2.4rem 2.2rem 2rem;
  max-width: 30rem;
  width: calc(100% - 2.5rem);
  height: fit-content;
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: 0 12px 48px rgba(15, 22, 35, 0.18);
}
.contact-modal::backdrop {
  background: rgba(15, 22, 35, 0.55);
  backdrop-filter: blur(2px);
}
.contact-modal h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.contact-modal-intro {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 1.6rem;
}
.contact-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  line-height: 1;
  transition: color 0.18s ease;
}
.contact-modal-close:hover { color: var(--ink); }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.contact-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-field input {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.98rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  background: var(--bg-card);
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.18s ease;
}
.contact-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form-submit {
  align-self: flex-start;
  margin-top: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: none;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: background 0.18s ease;
}
.contact-form-submit:hover { background: var(--accent); }
.contact-form-submit .arr { transition: transform 0.18s ease; }
.contact-form-submit:hover .arr { transform: translateX(0.2rem); }
.contact-form-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Post-submit thank-you state. Same modal shell; the form body is hidden
   and this block is revealed for ~2.2s before the modal auto-closes. */
.contact-modal-thanks {
  padding: 1.2rem 0;
}
.contact-modal-thanks h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
.contact-modal-thanks p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 600px) {
  .contact-modal { padding: 2rem 1.4rem 1.6rem; }
  .contact-modal h3 { font-size: 1.3rem; }
}

/* ─── Research pages (paper pages + publications listing) ─────────────
   Previously duplicated across five inline <style> blocks; centralised
   here so a single change propagates. Selectors are scoped (.paper-*,
   .pub-*) and won't affect the landing page.
*/
/* The .paper-hero overrides .hero's full-bleed flex layout. Paper
   heroes are shorter and let the figure sit absolutely on the right
   without forcing 80vh of empty space. */
.paper-hero {
  min-height: 0;
  display: block;
  overflow: visible;
  padding: 8rem 0 8rem;
}
.paper-hero .hero-text { margin-bottom: 3rem; }
.paper-hero .hero-figure {
  top: 2rem;
  right: -4rem;
  bottom: auto;
  left: auto;
  width: 30rem;
  height: 30rem;
}

.paper-hero h1 { max-width: 18ch; }
.paper-hero .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 2.4rem;
}
.paper-hero .eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
}
.paper-hero .authors {
  margin: 1.8rem 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.paper-hero .lede {
  margin: 1.8rem 0 0;
  max-width: 38rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.paper-hero .cta-row {
  margin-top: 2.4rem;
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.btn-primary, .btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 0.85rem 1.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); }
.btn-secondary { color: var(--ink); border: 1px solid var(--rule-strong); }
.btn-secondary:hover { border-color: var(--ink); }

.paper-article {
  max-width: 44rem;
  padding: 4rem 0 6rem;
  border-top: 1px solid var(--rule);
}
.paper-section { margin-bottom: 3.5rem; }
.paper-section h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 1.4rem;
  color: var(--ink);
}
.paper-section p {
  margin: 0 0 1.2rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.paper-section p:last-child { margin-bottom: 0; }
.paper-section p strong, .paper-section li strong { color: var(--ink); font-weight: 500; }

.findings { list-style: none; padding: 0; margin: 0; counter-reset: finding; }
.findings li {
  counter-increment: finding;
  position: relative;
  padding: 0 0 1.4rem 3rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.4rem;
}
.findings li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.findings li::before {
  content: counter(finding, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.15rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.bibtex {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.2rem 1.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
}

.paper-nav { margin: 2.5rem 0 6rem; }
.back-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* Publications listing (research/index.html) */
.pub-list {
  max-width: 56rem;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.pub-entry {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta arrow"
    "title arrow"
    "summary arrow";
  column-gap: 2rem;
  padding: 2.4rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.pub-entry:hover { background: color-mix(in srgb, var(--accent-pale) 35%, transparent); }
.pub-entry:hover .pub-title { color: var(--accent); }
.pub-entry:hover .pub-arr { transform: translateX(0.4rem); color: var(--accent); }
.pub-meta {
  grid-area: meta;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pub-title {
  grid-area: title;
  margin: 0.6rem 0 0.8rem;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 38rem;
  transition: color 0.15s ease;
}
.pub-summary {
  grid-area: summary;
  margin: 0;
  max-width: 38rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.pub-arr {
  grid-area: arrow;
  align-self: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  color: var(--ink-faint);
  transition: transform 0.15s ease, color 0.15s ease;
}

@media (max-width: 900px) {
  .paper-article { padding: 2.5rem 0 4rem; }
  .paper-section { margin-bottom: 2.5rem; }
  .findings li { padding-left: 2.4rem; }
  /* Hide the decorative hero flow vis on paper pages — it lands in
     awkward space on phone widths and the JS guard in the inline
     script ensures the canvas isn't even initialised. */
  .paper-hero .hero-figure { display: none; }
}