/* ================================================================
   Nico Weigandt — portfolio stylesheet
   ----------------------------------------------------------------
   Table of contents (use Ctrl+F / Cmd+F to jump):

     1) DESIGN TOKENS         — colors, fonts, sizes (edit here first)
     2) DARK MODE TOKENS
     3) RESET & BASE
     4) BACKDROP (orbs + grid)
     5) LAYOUT (container, sections, headings)
     6) NAV
     7) HERO
     8) ABOUT
     9) EXPERIENCE (timeline)
    10) RESEARCH
    11) SKILLS
    12) EDUCATION
    13) DOCUMENTS
    14) CONTACT & FOOTER
    15) IMAGE PLACEHOLDERS  ← all .ph classes
    16) REVEAL ANIMATIONS
    17) RESPONSIVE BREAKPOINTS
    18) PRINT
   ================================================================ */


/* ============================================================
   1) DESIGN TOKENS  —  change brand colors, fonts here
   ============================================================ */
:root {
  /* Brand color (the deep medical blue). Try a different hex to rebrand. */
  --brand-50:  #eef5fb;
  --brand-100: #d8e7f3;
  --brand-200: #b3cce5;
  --brand-300: #82add4;
  --brand-400: #4f8cc1;
  --brand-500: #2a6fae;
  --brand-600: #0b3b5f;
  --brand-700: #082c47;
  --brand-800: #061f33;

  /* Accent color (deep clinical teal — replaces the default startup-green) */
  --accent:    #0c7a6e;

  /* Third accent: the warm "bone" family. Carries the Education section's paper
     ground and the contact panel's highlight. Declared here with the others so a
     rebrand is one place, not three. */
  --bone:      #f7f2ea;
  --bone-line: rgba(99, 76, 41, 0.10);
  --bone-hi:   #ffe9ad;

  /* Brand blue for FILLED surfaces that carry white text (nav mark, CTA pill,
     contact panel). Deliberately NOT re-ramped in dark mode, unlike
     --brand-500, which is tuned for use as text on a dark ground. */
  --brand-fill: #2a6fae;
  /* Foreground for a filled --accent chip; flips with the theme. */
  --on-accent: #ffffff;

  /* Surfaces (page backgrounds) */
  --bg:        #f7f8fb;
  --bg-2:      #ffffff;
  --bg-3:      #eef0f4;
  --surface:   rgba(255, 255, 255, 0.72);
  --surface-hi:rgba(255, 255, 255, 0.92);

  /* Lines / borders */
  --line:      rgba(11, 30, 50, 0.08);
  --line-2:    rgba(11, 30, 50, 0.14);

  /* Text */
  --text:      #0b1320;
  --text-2:    #3a4456;
  --text-3:    #5c6675;
  --text-4:    #99a2b3;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(11, 30, 50, .04), 0 1px 1px rgba(11, 30, 50, .03);
  --shadow:    0 4px 14px rgba(11, 30, 50, .06), 0 2px 4px rgba(11, 30, 50, .04);
  --shadow-lg: 0 24px 60px -20px rgba(11, 30, 50, .18), 0 8px 18px -12px rgba(11, 30, 50, .1);

  /* Glass blur strength */
  --blur:      saturate(140%) blur(11px);

  /* Corner radius scale (bigger number = more rounded) */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 36px;

  /* Fonts */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif:   "Newsreader", "Times New Roman", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Type scale — 8 steps, and they are actually used: every font-size in this
     file resolves to one of them. Values were chosen to match what the design
     already did, so adopting the scale moved nothing by more than 1.5px.
     Collapsed 23 ad-hoc px values (including half-pixels) down to these 8.

       3xs  micro labels, mono eyebrows, tags
       2xs  meta, dates, captions
       xs   small UI text, nav
       sm   card body, list items
       md   lead-in text
       base body copy
       lg   card titles, sub-headings
       xl   block headings

     Display type (section headings, the hero, ch01) stays on bespoke clamp()
     values — that is art direction, not a scale, and is deliberately not folded
     in here. The @media block near the foot of section 17 raises the bottom of
     this scale on phones so nothing renders below 12px. */
  --fs-3xs:  11px;
  --fs-2xs:  12px;
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs-md:   15px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   21px;

  /* Easing curves (motion) */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Stacking order. Local layering inside components still uses 0-5; these are
     the page-level layers, named so the order is readable instead of guessed. */
  --z-nav:      80;
  --z-menu:     90;
  --z-progress: 100;
  --z-toast:    200;
  --z-vignette: 9998;
  --z-grain:    9999;
  --z-skip:     10000;

  /* Anchor landing offset. The fixed nav is 96px tall; this keeps a jumped-to
     section clear of it. It used to work only because section padding happened
     to exceed the nav height by 33px. */
  --nav-height: 96px;
}


/* ============================================================
   2) DARK MODE TOKENS
   ============================================================ */
[data-theme="dark"] {
  --bg:        #0b0d10;
  --bg-2:      #11141a;
  --bg-3:      #161a22;
  --surface:   rgba(20, 24, 32, 0.62);
  --surface-hi:rgba(28, 33, 42, 0.86);
  --line:      rgba(255, 255, 255, 0.07);
  --line-2:    rgba(255, 255, 255, 0.14);

  --text:      #f1f4f9;
  --text-2:    #cbd2dd;
  --text-3:    #8b94a4;
  --text-4:    #5f6878;

  --brand-50:  #0e1a26;
  --brand-100: #14253a;
  /* Brand and accent are re-ramped for the dark ground: the light-mode values
     land at 3.7:1 and 4.1:1 as text on #0b0d10, under the 4.5:1 floor. This
     also lifts the :focus-visible ring, which reads --brand-500. */
  --brand-500: #4f8cc1;
  --accent:    #19a894;
  --on-accent: #0b0d10;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 6px 20px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 32px 80px -20px rgba(0,0,0,.65), 0 12px 24px -10px rgba(0,0,0,.4);
}


/* ============================================================
   3) RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(16.5px, 1.05vw, 19px);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Skip rendering off-screen sections — big paint/compositing win on this long,
   glass-heavy page. Safe now that the chapter eyebrows are no longer sticky
   (content-visibility:auto breaks position:sticky descendants in Chromium). */
@supports (content-visibility: auto) {
  /* Selector tracks the <main> landmark — these are no longer body children. */
  main > section:not(.hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 1800px;
  }
  /* Per-section estimates measured at 1440x900. A single 900px placeholder made
     the document grow ~6,000px as you scrolled, so the scrollbar thumb resized
     under the cursor. The `auto` keyword still lets the browser substitute the
     real size once a section has been rendered. */
  #about      { contain-intrinsic-size: auto 1300px; }
  #experience { contain-intrinsic-size: auto 4900px; }
  #education  { contain-intrinsic-size: auto 1900px; }
  #research   { contain-intrinsic-size: auto 2300px; }
  #skills     { contain-intrinsic-size: auto 1850px; }
  #documents  { contain-intrinsic-size: auto 900px; }
  #contact    { contain-intrinsic-size: auto 1300px; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand-fill); color: #fff; }

/* Respect "reduced motion" accessibility setting */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    transition-duration: .001s !important;
    animation-iteration-count: 1 !important;
  }
  html { scroll-behavior: auto; }
  .paper-card-v2:hover .paper-card-img { transform: none; }
}


/* ============================================================
   4) BACKDROP — soft orbs + faint grid behind everything
   ============================================================ */
/* Particle mesh canvas */
#particleMesh {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.backdrop::before,
.backdrop::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
}
.backdrop::before {
  width: 50vw; height: 50vw;
  top: -10vw; left: -8vw;
  background: radial-gradient(circle at 30% 30%, #c9def0, transparent 60%);
}
.backdrop::after {
  width: 45vw; height: 45vw;
  top: 18vw; right: -8vw;
  background: radial-gradient(circle at 60% 40%, #e9eef6, transparent 60%);
}
[data-theme="dark"] .backdrop::before {
  background: radial-gradient(circle at 30% 30%, rgba(42,111,174,.45), transparent 60%);
  opacity: .35;
}
[data-theme="dark"] .backdrop::after {
  background: radial-gradient(circle at 60% 40%, rgba(13,130,117,.18), transparent 60%);
  opacity: .35;
}
.backdrop-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at top, black 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 25%, transparent 70%);
  opacity: .55;
}


/* ============================================================
   5) LAYOUT — containers, sections, headings
   ============================================================ */
.container {
  width: 100%;
  max-width: clamp(1200px, 78vw, 1760px);
  margin: 0 auto;
  padding: 0 clamp(32px, 3vw, 56px);
}

section { position: relative; padding: clamp(96px, 8.5vw, 160px) 0; }

/* Tighten the Education → Research junction — Education ends on a compact awards
   list, so the default twin padding left a dead band. */
#education { padding-bottom: clamp(64px, 5vw, 104px); }
#research  { padding: clamp(64px, 5vw, 96px) 0 clamp(72px, 6vw, 112px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(13, 130, 117, .15);
}

h1, h2, h3, h4 { color: var(--text); letter-spacing: -.02em; line-height: 1.08; margin: 0 0 .4em; font-optical-sizing: auto; text-wrap: balance; }
.h-display { font-family: var(--font-display); font-size: clamp(46px, 7.8vw, 128px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.h-display em {
  font-style: italic; font-family: var(--font-serif); font-weight: 500;
  letter-spacing: 0; color: var(--brand-500);
}
.h-section { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 68px); font-weight: 700; letter-spacing: -.028em; line-height: 1.06; margin-bottom: .18em; }
.h-section em { font-style: italic; font-family: var(--font-serif); font-weight: 500; color: var(--brand-500); letter-spacing: -.015em; }

.section-head {
  max-width: clamp(760px, 56vw, 980px);
  margin-bottom: clamp(56px, 5vw, 88px);
}
.section-head .eyebrow { margin-bottom: 16px; }
.section-lede {
  font-size: clamp(18px, 1.2vw, 22px);
  color: var(--text-2);
  margin: 16px 0 0;
  max-width: 64ch;
}

/* ============================================================
   CHAPTER 01 — unified opener + body
   ============================================================ */
.ch01 { position: relative; }

.ch01-head {
  max-width: clamp(760px, 62vw, 1100px);
  margin: 0 auto clamp(64px, 6vw, 104px);
  text-align: center;
  position: relative;
}

/* Decorative chapter marker — top, "Chapter I" between hairlines */
.ch01-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
  color: var(--text-3);
}
.ch01-marker-rule {
  height: 1px;
  width: clamp(40px, 8vw, 96px);
  background: linear-gradient(to right, transparent, var(--line-2), transparent);
}
.ch01-marker-text {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .42em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-2);
  padding-left: .42em;
}
.ch01-marker-text em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 4px;
}

/* Eyebrow under marker */
.ch01-head .eyebrow,
.ch01-head .ch01-eyebrow {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 28px;
  position: static;
}

/* Decorative flourish under title */
.ch01-flourish {
  display: flex;
  justify-content: center;
  margin: 28px auto 28px;
  color: var(--text-4);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity 1s var(--ease) .35s, transform 1.1s var(--ease) .35s;
}
.ch01-flourish svg {
  width: clamp(80px, 12vw, 140px);
  height: 12px;
}
.reveal.in .ch01-flourish {
  opacity: .9;
  transform: scaleX(1);
}
.ch01-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.4vw, 108px);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  letter-spacing: -.018em;
  line-height: 1.05;
  margin: 0 0 32px;
  color: var(--text);
  text-wrap: balance;
  font-feature-settings: "ss01", "lnum", "kern";
}
.ch01-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  color: var(--brand-500);
  letter-spacing: -.02em;
  display: inline-block;
  position: relative;
}
.ch01-title em::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 0.06em;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity .9s var(--ease), transform 1.1s var(--ease);
}
.ch01-head.in .ch01-title em::after,
.reveal.in .ch01-title em::after { opacity: .85; transform: scaleX(1); }
.ch01-lede {
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
  margin: 0 auto;
}

/* Body grid — text + carousel */
.ch01-body {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 4vw, 72px);
  align-items: start;
}

.ch01-text { max-width: 64ch; }
.ch01-text p {
  color: var(--text-2);
  font-size: var(--fs-lg);
  line-height: 1.7;
  margin: 0 0 20px;
  text-align: left;
}
.ch01-text p strong { color: var(--text); font-weight: 600; }

/* Lead paragraph — sans, slightly larger, full contrast */
.ch01-text .ch01-pull {
  font-family: var(--font-sans);
  font-size: clamp(19px, 1.35vw, 21px);
  line-height: 1.6;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 28px;
  padding-left: 0;
  border-left: 0;
}
.ch01-text .ch01-pull em {
  display: block;
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--brand-500);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-500);
  font-size: var(--fs-lg);
  line-height: 1.55;
  letter-spacing: 0;
}

/* Middle paragraph — serif body for textural contrast */
.ch01-text p:nth-of-type(2) {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.ch01-text p:nth-of-type(2) strong {
  font-family: var(--font-serif);
  font-weight: 600;
}

/* Closing paragraph — sans, settled, slightly muted */
.ch01-text p:nth-of-type(3) {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--text-2);
  font-weight: 400;
}

/* Carousel — story-driven editorial */
.ch01-media {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.story-carousel {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--brand-800);
  box-shadow:
    0 30px 80px -28px rgba(11, 30, 50, .35),
    0 12px 28px -16px rgba(11, 30, 50, .22),
    0 0 0 1px rgba(11, 30, 50, .06) inset;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  outline: none;
}
.story-carousel:focus-visible {
  box-shadow:
    0 0 0 3px var(--brand-300),
    0 30px 80px -28px rgba(11, 30, 50, .35);
}

.story-track {
  position: absolute;
  inset: 0;
}

.story-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1),
              transform 1.4s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.story-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.story-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.96) contrast(1.02);
}
.story-image-surgery { object-position: center 45%; }
.story-image-rehabilitation { object-position: center 52%; }
.story-image-return { object-position: center 45%; }

/* Placeholder slides — awaiting image */
.story-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(42, 111, 174, .28), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(13, 130, 117, .18), transparent 50%),
    linear-gradient(160deg, var(--brand-700) 0%, var(--brand-800) 100%);
  color: rgba(255, 255, 255, .82);
  text-align: center;
  padding: 24px;
  overflow: hidden;
}
.story-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 75%);
  pointer-events: none;
}
.story-placeholder-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 12px;
  border: 1px solid rgba(13, 130, 117, .35);
  border-radius: 999px;
  background: rgba(13, 130, 117, .08);
  z-index: 1;
}
.story-placeholder-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  color: #fff;
  letter-spacing: -.01em;
  z-index: 1;
}
.story-placeholder-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  z-index: 1;
}

/* Editorial placeholder — typographic quote card */
.story-placeholder-editorial {
  background:
    radial-gradient(circle at 25% 20%, rgba(42, 111, 174, .22), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(13, 130, 117, .12), transparent 50%),
    linear-gradient(160deg, var(--brand-700) 0%, #0a1e2e 100%);
}
.story-placeholder-quote {
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 1;
}
.story-placeholder-quote em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.story-placeholder-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  z-index: 1;
  margin-top: 8px;
}

.story-slide.is-placeholder::after {
  background: linear-gradient(to top, rgba(6, 31, 51, .85) 0%, rgba(6, 31, 51, .35) 30%, rgba(6, 31, 51, 0) 60%);
}

/* Vignette gradient over photo */
.story-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 31, 51, .92) 0%, rgba(6, 31, 51, .55) 32%, rgba(6, 31, 51, 0) 58%),
    linear-gradient(to bottom, rgba(6, 31, 51, .35) 0%, rgba(6, 31, 51, 0) 25%);
  pointer-events: none;
}

.story-slide figcaption {
  position: absolute;
  left: clamp(20px, 2.2vw, 32px);
  right: clamp(20px, 2.2vw, 32px);
  bottom: clamp(62px, 6vw, 82px);
  z-index: 2;
  color: #fff;
  max-width: 32ch;
}
.story-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  margin-bottom: 14px;
}
.story-slide figcaption strong {
  display: block;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin-bottom: 8px;
  text-wrap: balance;
}
.story-slide figcaption em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}

/* Progress bar (autoplay) */
.story-progress {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: rgba(255, 255, 255, .14);
  z-index: 4;
  overflow: hidden;
}
.story-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--accent), #5dd6b2);
  transition: width .08s linear;
}
.story-carousel.is-paused .story-progress-bar { opacity: .35; }

/* Nav buttons */
.story-btn {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-700);
  border: 1px solid rgba(11, 30, 50, .06);
  cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(11, 30, 50, .35);
  transition: transform .25s var(--ease, ease), background .25s var(--ease, ease), opacity .25s var(--ease, ease);
  opacity: 0;
}
.story-carousel:hover .story-btn,
.story-carousel:focus-within .story-btn { opacity: 1; }
.story-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.story-btn svg { width: 20px; height: 20px; }
.story-prev { left: 16px; }
.story-next { right: 16px; }

/* Meta row — counter + dots */
.story-meta {
  position: absolute;
  left: clamp(20px, 2.2vw, 32px);
  right: clamp(20px, 2.2vw, 32px);
  bottom: clamp(20px, 2.2vw, 28px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}
.story-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.story-counter strong {
  color: #fff;
  font-weight: 600;
  margin-right: 2px;
}
.story-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.story-dots button {
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: grid;
  align-items: center;
  transition: width .35s var(--ease, ease);
}
/* The 3px bar is the mark; the button around it is the target. */
.story-dots button::before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
  transition: background .35s var(--ease, ease);
}
.story-dots button.is-active { width: 44px; }
.story-dots button.is-active::before { background: var(--accent); }
.story-dots button:hover::before { background: rgba(255, 255, 255, .6); }

.ch01-caption-fineprint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ch01-caption-fineprint .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(13, 130, 117, .15);
}

/* Responsive */
@media (max-width: 1200px) {
  .ch01-body { grid-template-columns: 1fr; gap: 48px; }
  .ch01-media { position: static; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 768px) {
  .ch01-head { margin-bottom: 56px; }
  .ch01-title { font-size: clamp(30px, 8vw, 44px); }
  .ch01-text .ch01-pull { font-size: var(--fs-lg); padding-left: 16px; }
  .story-slide figcaption {
    bottom: 66px;
    left: 18px;
    right: 18px;
  }
  .story-slide figcaption strong { font-size: var(--fs-xl); }
  .story-btn { width: 40px; height: 40px; opacity: 1; }
  .story-prev { left: 10px; }
  .story-next { right: 10px; }
}

[data-theme="dark"] .story-carousel {
  box-shadow:
    0 30px 80px -28px rgba(0, 0, 0, .6),
    0 12px 28px -16px rgba(0, 0, 0, .4),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
}


/* ============================================================
   6) NAV  (editorial glass bar — matches page sections)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; justify-content: center;
  pointer-events: none;
  padding: 18px 32px;
  transition: padding .3s var(--ease);
}
.nav.scrolled { padding: 12px 32px; }

.nav-inner {
  pointer-events: auto;
  display: flex; align-items: stretch;
  width: 100%; max-width: clamp(1200px, 78vw, 1760px);
  background: var(--surface-hi);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.nav.scrolled .nav-inner {
  box-shadow: var(--shadow-lg);
  border-color: var(--line-2);
}
.nav-inner::before {
  content: "";
  position: absolute; top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-300), transparent);
  opacity: .5;
  pointer-events: none;
}

.nav-brand {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap;
  padding: 12px 22px 12px 16px;
  border-right: 1px solid var(--line);
  position: relative;
}
.nav-brand .nav-name em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-500);
  letter-spacing: -.005em;
  margin-left: 2px;
}
.nav-mark {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-fill));
  color: #fff; font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .06em;
  font-family: var(--font-mono);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(11,59,95,.25);
  position: relative;
}
.nav-mark::after {
  content: "";
  position: absolute;
  top: -2px; right: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px rgba(13,130,117,.18);
  animation: pulse 2.4s infinite;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  padding: 0 12px;
  position: relative;
}
.nav-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-3);
  padding: 12px 14px;
  letter-spacing: -.005em;
  border-radius: 8px;
  transition: color .25s var(--ease), background .25s var(--ease);
  position: relative;
  z-index: 1;
}
.nav-links a .nav-num {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--text-3);
  transition: color .25s var(--ease);
}
.nav-links a .nav-label {
  position: relative;
}
.nav-links a:hover {
  color: var(--text);
}
.nav-links a:hover .nav-num { color: var(--accent); }
.nav-links a.active {
  color: var(--text);
}
.nav-links a.active .nav-num { color: var(--accent); }

/* Sliding indicator pill */
.nav-indicator {
  position: absolute;
  top: 50%;
  height: 32px;
  transform: translateY(-50%);
  border-radius: 8px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: left .45s cubic-bezier(.4, 1, .3, 1),
              width .45s cubic-bezier(.4, 1, .3, 1),
              opacity .35s var(--ease);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  left: 0;
  width: 0;
}
.nav-indicator.is-ready { opacity: 1; }
[data-theme="dark"] .nav-indicator {
  background: rgba(42, 111, 174, .15);
  border-color: rgba(42, 111, 174, .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.nav-actions {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px 8px 10px;
  border-left: 1px solid var(--line);
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: transparent; color: var(--text-3);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover { background: var(--bg-3); color: var(--text); }
.icon-btn svg { width: 15px; height: 15px; }

.cta-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-fill));
  color: #fff;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: -.005em;
  margin-left: 4px;
  box-shadow: 0 4px 12px -2px rgba(11,59,95,.35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.cta-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(11,59,95,.42);
  filter: saturate(1.08);
}
.cta-pill svg { width: 13px; height: 13px; }
.cta-pill--secondary {
  background: var(--bg-2);
  color: var(--brand-600);
  border: 1px solid var(--brand-200);
  box-shadow: none;
}
.cta-pill--secondary:hover {
  background: var(--brand-50);
  box-shadow: 0 6px 16px -6px rgba(11,59,95,.28);
}
[data-theme="dark"] .cta-pill--secondary {
  background: rgba(255,255,255,.04);
  color: var(--brand-200);
  border-color: rgba(130,173,212,.3);
}

.nav-menu-btn { display: none; }

/* Dark-mode brand mark adjustment */
[data-theme="dark"] .nav-mark {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.5);
}
[data-theme="dark"] .nav-links a.active {
  color: var(--brand-200);
  background: var(--brand-100);
}
[data-theme="dark"] .nav-links a.active::before {
  background: var(--brand-300);
}


/* Mobile menu (drawer) */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--bg);
  display: none;
  flex-direction: column;
  padding: 80px 28px 32px;
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 28px; font-weight: 600; letter-spacing: -.02em;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  color: var(--text);
  display: flex; align-items: center; justify-content: space-between;
  transition: color .2s var(--ease);
}
.mobile-menu a:hover { color: var(--brand-500); }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a .num {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-3);
  font-weight: 400;
  letter-spacing: .14em;
}
.mobile-menu-close {
  position: absolute; top: 22px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-3);
  color: var(--text-2);
}


/* ============================================================
   7) SHARED BUTTONS
   ============================================================ */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13,130,117,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(13,130,117,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,130,117,0); }
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* Generic buttons used everywhere */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 500;
  letter-spacing: -.005em;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--text); color: var(--bg-2); box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-secondary {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  color: var(--text);
}
.btn-secondary:hover { transform: translateY(-2px); background: var(--surface-hi); }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg.arrow { transform: translateX(3px); }

/* Scrolling marquee */
.marquee {
  margin-top: 96px;
  overflow: hidden;
  position: relative;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: inline-flex; gap: 56px;
  white-space: nowrap;
  animation: marquee 50s linear infinite;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
}
.marquee-track .dot { color: var(--accent); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ============================================================
   7) HERO — Fade Triptych
   ============================================================ */

/* --- full-viewport container --- */
.hero {
  --panel-rgb: 8, 34, 54;
  --panel-accent-rgb: 79, 140, 193;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 500px;
  overflow: hidden;
  background: #060a10;
}

/* --- image slides (stacked, crossfade) --- */
.hero-slides {
  position: absolute;
  inset: 0;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity, transform;
}
.hero-slide.is-active { opacity: 1; }

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.28) brightness(0.6) contrast(1.08);
}

/* center on the subject per image */
.hero-slide:nth-child(1) img { object-position: center center; } /* professional portrait */
.hero-slide:nth-child(2) img { object-position: center 35%; }   /* soccer — crops more bottom */
.hero-slide:nth-child(3) img { object-position: center 25%; }   /* surgery — upper body */

/* --- Split panel: portrait images on left, text on right --- */
.hero--split .hero-slides {
  width: 72%;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero--split .hero-slide--portrait img {
  object-position: center 30%;
}
.hero--split .hero-slide:nth-child(1) img {
  object-position: center center;
}
.hero--split .hero-slide:nth-child(2) img {
  object-position: center 8%;
}
.hero--split .hero-overlay {
  background:
    linear-gradient(90deg,
      rgba(var(--panel-rgb), 0.0)   0%,
      rgba(var(--panel-rgb), 0.0)   27%,
      rgba(var(--panel-rgb), 0.015) 32%,
      rgba(var(--panel-rgb), 0.045) 37%,
      rgba(var(--panel-rgb), 0.1)   42%,
      rgba(var(--panel-rgb), 0.18)  47%,
      rgba(var(--panel-rgb), 0.29)  52%,
      rgba(var(--panel-rgb), 0.43)  57%,
      rgba(var(--panel-rgb), 0.58)  61%,
      rgba(var(--panel-rgb), 0.72)  65%,
      rgba(var(--panel-rgb), 0.84)  68%,
      rgba(var(--panel-rgb), 0.93)  70%,
      rgba(var(--panel-rgb), 0.98)  71.5%,
      rgba(var(--panel-rgb), 1)     72%,
      rgba(var(--panel-rgb), 1)     100%
    ),
    linear-gradient(180deg,
      rgba(6,10,16, 0.0)   0%,
      rgba(6,10,16, 0.0)   70%,
      rgba(6,10,16, 0.3)   100%
    );
}
.hero--split .hero-content {
  left: 64.5%;
  right: clamp(24px, 2.5vw, 48px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              top 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              bottom 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero--split .hero-dots {
  right: 45%;
  transition: right 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Atmospheric right panel (surgical precision aesthetic) --- */
.hero-atmosphere {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 52%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background:
    linear-gradient(135deg,
      rgba(var(--panel-accent-rgb), 0.08),
      transparent 42%);
  transition: opacity 1.2s ease, background-color 1.2s ease;
}
.hero--split .hero-atmosphere { opacity: 1; }

.hero[data-hero-slide="0"] {
  --panel-rgb: 7, 29, 47;
  --panel-accent-rgb: 79, 140, 193;
}
.hero[data-hero-slide="1"] {
  --panel-rgb: 8, 31, 42;
  --panel-accent-rgb: 13, 130, 117;
}
.hero[data-hero-slide="2"] {
  --panel-rgb: 22, 25, 35;
  --panel-accent-rgb: 130, 173, 212;
}

.hero-atmo-grid {
  position: absolute;
  inset: -24px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 59px,
      rgba(255,255,255, 0.055) 59px,
      rgba(255,255,255, 0.055) 60px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 59px,
      rgba(255,255,255, 0.055) 59px,
      rgba(255,255,255, 0.055) 60px
    );
  mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.02) 14%,
      rgba(0,0,0,.08) 26%,
      rgba(0,0,0,.2) 38%,
      rgba(0,0,0,.38) 50%,
      rgba(0,0,0,.6) 62%,
      rgba(0,0,0,.82) 74%,
      black 90%,
      black 100%
    ),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.35) 8%,
      black 22%,
      black 78%,
      rgba(0,0,0,.35) 92%,
      transparent 100%
    );
  -webkit-mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.02) 14%,
      rgba(0,0,0,.08) 26%,
      rgba(0,0,0,.2) 38%,
      rgba(0,0,0,.38) 50%,
      rgba(0,0,0,.6) 62%,
      rgba(0,0,0,.82) 74%,
      black 90%,
      black 100%
    ),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.35) 8%,
      black 22%,
      black 78%,
      rgba(0,0,0,.35) 92%,
      transparent 100%
    );
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.hero-atmo-scan { display: none; }
.hero-atmo-glow { display: none; }

.hero-atmo-reticle {
  position: absolute;
  top: 50%;
  left: 30%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  color: rgba(255,255,255, 0.6);
  animation: heroReticleSpin 30s linear infinite;
}

@keyframes heroReticleSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 768px) {
  .hero--split .hero-slides { width: 100%; }
  .hero--split .hero-content {
    left: clamp(20px, 4vw, 40px);
    right: clamp(20px, 4vw, 40px);
    top: auto;
    bottom: clamp(36px, 5vh, 72px);
    transform: none;
  }
  .hero--split .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(6,10,16, 0.0)  0%,
        rgba(6,10,16, 0.0)  45%,
        rgba(6,10,16, 0.25) 60%,
        rgba(6,10,16, 0.55) 78%,
        rgba(6,10,16, 0.82) 100%
      );
  }
  .hero--split .hero-dots { right: 20px; }
  .hero-atmosphere { display: none; }
}

/* Ken Burns — each slide gets a distinct slow drift */
.hero-slide:nth-child(1) img { animation: heroKB_A 20s ease-in-out infinite alternate; }
.hero-slide:nth-child(2) img { animation: heroKB_B 22s ease-in-out infinite alternate; }
.hero-slide:nth-child(3) img { animation: heroKB_C 18s ease-in-out infinite alternate; }
.hero-slide img { animation-play-state: paused; }
.hero-slide.is-active img { animation-play-state: running; }
.hero:not(.is-in-view) .hero-slide img,
.hero:not(.is-in-view) .hero-atmo-reticle {
  animation-play-state: paused;
}

@keyframes heroKB_A {
  0%   { transform: scale(1.11) translate(0.3%, 2.2%); }
  100% { transform: scale(1.20) translate(-1.8%, 3.9%); }
}
@keyframes heroKB_B {
  0%   { transform: scale(1.07) translate(1.2%, 4.8%); }
  100% { transform: scale(1.15) translate(-1.3%, 6.4%); }
}
@keyframes heroKB_C {
  0%   { transform: scale(1.00) translate(0.8%, 0.3%); }
  100% { transform: scale(1.09) translate(-1.1%, -1.2%); }
}

/* --- gradient overlay — only bottom 40% --- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(6,10,16, 0.0)  0%,
      rgba(6,10,16, 0.0)  45%,
      rgba(6,10,16, 0.25) 60%,
      rgba(6,10,16, 0.55) 78%,
      rgba(6,10,16, 0.82) 100%
    );
  pointer-events: none;
  transition: background 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- bottom-left anchored text --- */
.hero-content {
  position: absolute;
  bottom: clamp(48px, 6vh, 96px);
  left: clamp(28px, 4vw, 72px);
  z-index: 3;
  text-align: left;
  color: #fff;
  transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              top 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              bottom 1.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.60);
  margin-bottom: clamp(10px, 1.2vw, 18px);
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-out) 0.25s forwards;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 120px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.hero-line {
  display: block;
  overflow: hidden;
}
.hero-line:nth-child(2) {
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  animation: heroReveal 1.1s var(--ease-out) forwards;
}
.hero-line:nth-child(1) .hero-word { animation-delay: 0.45s; }
.hero-line:nth-child(2) .hero-word { animation-delay: 0.65s; }

.hero-word--em {
  font-style: italic;
  font-family: var(--font-display);
  color: rgba(255,255,255,0.90);
}

@keyframes heroReveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.15vw, 19px);
  color: rgba(255,255,255,0.55);
  text-shadow: 0 1px 20px rgba(0,0,0,0.3);
  margin: clamp(14px, 1.8vw, 30px) 0 0;
  letter-spacing: 0.015em;
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-out) 1s forwards;
}

/* Outcome line for the scanning recruiter — final entrance beat */
.hero-outcome {
  font-family: var(--font-sans);
  font-size: clamp(12px, 0.92vw, 15px);
  font-weight: 500;
  color: rgba(255,255,255,0.80);
  max-width: 34ch;
  margin: clamp(12px, 1.4vw, 20px) 0 0;
  line-height: 1.5;
  text-shadow: 0 1px 16px rgba(0,0,0,0.4);
  opacity: 0;
  animation: heroFadeUp 1s var(--ease-out) 1.2s forwards;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- frame dots (right edge, vertical) --- */
.hero-dots {
  position: absolute;
  right: clamp(18px, 2.8vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* 24x24 hit box, 9px visible dot — the target grows, the design does not. */
.hero-dot {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.hero-dot span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.30);
  background: transparent;
  transition: border-color .5s ease, background .45s var(--ease-out);
}
.hero-dot.is-active span {
  border-color: rgba(255,255,255,0.75);
  background: #fff;
}

/* A-01: the stop control WCAG 2.2.2 asks for on auto-advancing content. */
.hero-pause {
  width: 30px;
  height: 30px;
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  background: rgba(0,0,0,0.28);
  color: rgba(255,255,255,0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.hero-pause:hover { border-color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.45); }
.hero-pause svg { width: 11px; height: 11px; display: block; }
.hero-pause .icon-play { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }

/* --- progress bar (bottom edge) --- */
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.06);
  z-index: 3;
}
.hero-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-400), var(--accent));
  /* JS restarts this each cycle */
}

/* --- responsive --- */
@media (max-width: 768px) {

  /* The dots stay hidden so the phone hero keeps its clean edge, but the stop
     control WCAG 2.2.2 asks for has to stay reachable — it moves to the bottom
     corner and takes a full 44px touch target. */
  .hero-dots,
  .hero--split .hero-dots {
    flex-direction: row;
    top: auto;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    left: auto;
    transform: none;
  }
  .hero-dots .hero-dot { display: none; }
  .hero-pause { margin-top: 0; width: 44px; height: 44px; }
  .hero-pause svg { width: 13px; height: 13px; }
}


/* ============================================================
   8) ABOUT
   ============================================================ */
.about-layout {
  display: grid; grid-template-columns: 1fr;
  gap: 56px; align-items: center;
  justify-items: center;
}
.about-media { max-width: 480px; width: 100%; }

.about-text p { color: var(--text-2); font-size: var(--fs-lg); margin: 0 0 18px; }
.about-text p strong { color: var(--text); font-weight: 600; }
.about-text .lede {
  font-size: var(--fs-xl); line-height: 1.5;
  color: var(--text); font-weight: 400; margin-bottom: 28px;
}
.about-text .lede em { font-family: var(--font-serif); font-style: italic; color: var(--brand-500); }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pill {
  font-size: var(--fs-xs); padding: 7px 14px; border-radius: 999px;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: all .25s var(--ease);
}
.pill:hover { border-color: var(--brand-300); color: var(--brand-600); transform: translateY(-1px); }
[data-theme="dark"] .pill:hover { color: var(--brand-300); }

.about-media { position: relative; }

.photo-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  isolation: isolate;
}
.carousel-track,
.carousel-slide {
  position: absolute;
  inset: 0;
}
.carousel-slide {
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .65s var(--ease-out), transform .85s var(--ease-out);
  pointer-events: none;
}
.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-slide::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to top, rgba(6, 31, 51, .78), transparent);
  pointer-events: none;
}
.carousel-slide figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 72px;
  z-index: 2;
  color: #fff;
}
.carousel-slide figcaption span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 8px;
}
.carousel-slide figcaption strong {
  display: block;
  max-width: 18ch;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.carousel-btn {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.86);
  color: var(--brand-700);
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.carousel-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.04);
}
.carousel-btn svg { width: 19px; height: 19px; }
.carousel-prev { left: 18px; }
.carousel-next { right: 18px; }
.carousel-dots {
  position: absolute;
  z-index: 3;
  left: 28px;
  bottom: 28px;
  display: flex;
  gap: 8px;
}
.carousel-dots button {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  transition: width .25s var(--ease), background .25s var(--ease);
}
.carousel-dots button.active {
  width: 52px;
  background: #fff;
}

.focus-grid {
  margin-top: 64px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.focus-card {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.focus-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
}
.focus-ic {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
  margin-bottom: 14px;
}
[data-theme="dark"] .focus-ic { background: var(--brand-100); color: #fff; }
.focus-ic svg { width: 20px; height: 20px; }
.focus-card h4 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 4px; }
.focus-card p { font-size: var(--fs-xs); color: var(--text-3); margin: 0; line-height: 1.45; }


/* ============================================================
   9) EXPERIENCE — timeline + sticky photo aside
   ============================================================ */
.exp-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; }

.exp-aside {
  position: sticky; top: 110px;
  display: grid; gap: 18px;
  align-self: start;
}
.exp-aside .caption {
  font-size: var(--fs-xs); color: var(--text-3); padding: 0 4px; margin: 0;
  font-family: var(--font-mono); letter-spacing: .05em;
}
.exp-student-photo img {
  object-position: center 18%;
}

.timeline {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.timeline::before {
  content: ""; position: absolute;
  top: 14px; bottom: 14px; left: 19px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line-2), var(--line-2), transparent);
}
.tl-item { position: relative; padding-left: 60px; padding-bottom: 36px; }
.tl-item::before {
  content: ""; position: absolute;
  left: 14px; top: 18px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--brand-500);
  box-shadow: 0 0 0 5px var(--bg);
  z-index: 1;
}
.tl-item.is-current::before { background: var(--accent); border-color: var(--accent); }

.tl-card {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }

.tl-head {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 10px;
}
.tl-head h3 { font-size: var(--fs-lg); font-weight: 600; margin: 6px 0 4px; letter-spacing: -.015em; }
.tl-org { font-size: var(--fs-xs); color: var(--text-3); margin: 0; }
.tl-date {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .08em; color: var(--text-3);
  white-space: nowrap; text-transform: uppercase;
}
.tl-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-3xs); font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--brand-50); color: var(--brand-600);
}
[data-theme="dark"] .tl-tag { background: var(--brand-100); color: var(--brand-200); }
.tl-tag.tag-current { background: rgba(13,130,117,.12); color: #008267; }
[data-theme="dark"] .tl-tag.tag-current { background: rgba(13,130,117,.16); color: #2bd6b0; }
.tl-tag.tag-soft { background: var(--bg-3); color: var(--text-2); }

.tl-card p.summary { font-size: var(--fs-md); color: var(--text-2); margin: 0 0 12px; }
.tl-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.tl-card ul li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-md); color: var(--text-2); line-height: 1.55;
}
.tl-card ul li::before {
  content: ""; position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 1px;
  background: var(--brand-400);
}
.tl-card ul li strong { color: var(--text); font-weight: 600; }


/* ============================================================
   10) UPCOMING RESEARCH
   ============================================================ */
.research-upcoming {
  min-height: clamp(240px, 32vw, 420px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: clamp(28px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(42, 111, 174, .08), transparent 55%),
    var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  position: relative;
  overflow: hidden;
}
.research-upcoming::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom right, rgba(0,0,0,.6), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom right, rgba(0,0,0,.6), transparent 72%);
  opacity: .45;
  pointer-events: none;
}
.research-upcoming-status,
.research-upcoming p {
  position: relative;
  z-index: 1;
}
.research-upcoming-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-500);
}
.research-upcoming-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(13, 130, 117, .12);
}
.research-upcoming p {
  max-width: 34ch;
  margin: 0;
  color: var(--text-2);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.35;
}

/* Legacy research-library styles retained for future publication cards. */
.paper-feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-bottom: 32px;
}
.paper-feature {
  position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.paper-feature::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.paper-feature:hover {
  transform: translateY(-5px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
.paper-feature:hover::before { transform: scaleX(1); }
.paper-num { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--text-3); letter-spacing: .1em; }
.paper-feature h3 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.paper-sub { font-size: var(--fs-xs); color: var(--brand-500); font-weight: 500; margin: -4px 0 4px; }
.paper-desc { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55; margin: 0; flex-grow: 1; }
.paper-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.paper-tags span { font-size: var(--fs-3xs); padding: 3px 10px; border-radius: 999px; background: var(--bg-3); color: var(--text-3); }
.paper-dl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  padding-top: 12px; border-top: 1px solid var(--line);
  transition: gap .25s var(--ease);
}
.paper-dl:hover { gap: 12px; }
.paper-dl svg { width: 14px; height: 14px; }

.research-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: flex-start;
  margin-bottom: 24px;
}
.filter-btn {
  font-size: var(--fs-xs); padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: all .25s var(--ease);
}
.filter-btn:hover { color: var(--text); border-color: var(--line-2); }
.filter-btn.active {
  background: var(--text); color: var(--bg-2); border-color: var(--text);
}

.research-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}

/* ---- Paper carousel (gallery4-style) ---- */
.paper-carousel {
  position: relative;
}
.paper-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  text-align: left;
}
.paper-carousel-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
}
.paper-carousel-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-500);
}
.paper-carousel-desc {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
/* Research section tiers (featured manuscript vs. coursework) */
.research-tier { margin: 0 0 22px; }
.research-subhead {
  margin: clamp(52px, 5.5vw, 88px) 0 26px;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
  max-width: 720px;
}
.research-subhead .eyebrow { margin-bottom: 14px; }
.research-subhead h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 .4em;
}
.research-subhead p {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.paper-carousel-nav {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}
.paper-nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line-2);
  color: var(--text);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
  cursor: pointer;
}
.paper-nav-btn:hover:not(:disabled) {
  background: var(--text);
  color: var(--bg-2);
  border-color: var(--text);
  transform: translateY(-1px);
}
.paper-nav-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.paper-nav-btn svg { width: 18px; height: 18px; }

.paper-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  margin: 0 calc(-1 * clamp(32px, 3vw, 56px));
  padding: 4px 0 16px;
}
.paper-carousel-viewport.is-dragging { cursor: grabbing; }
.paper-carousel-viewport::-webkit-scrollbar { display: none; }

.paper-carousel-track {
  display: flex;
  gap: 20px;
  padding: 0 clamp(32px, 3vw, 56px);
  width: max-content;
}

.paper-card-v2 {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 24vw, 380px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-align: left;
  background: var(--bg-3);
  box-shadow: var(--shadow);
  border: 1px solid transparent;
  padding: 0;
  appearance: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
}
.paper-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.paper-card-v2:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-500) 55%, transparent);
  outline-offset: 4px;
}
.paper-card-v2.is-selected {
  border-color: color-mix(in srgb, var(--brand-500) 72%, white);
  box-shadow: 0 20px 54px rgba(8, 42, 68, .2);
}

/* Placeholder image area — colored by category */
.paper-card-img {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(135deg, var(--brand-700), var(--brand-fill));
  color: rgba(255,255,255,.6);
  transition: transform .6s var(--ease-out);
}
.paper-card-v2:hover .paper-card-img { transform: scale(1.05); }

/* Category-tinted placeholders */
.paper-card-img[data-cat="rehabilitation"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #08344f, #2a6fae);
}
.paper-card-img[data-cat="orthopedics"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #0c2a3f, #0d6a7e);
}
.paper-card-img[data-cat="biomechanics"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #0b3b5f, #0a8a6f);
}
.paper-card-img[data-cat="sports-medicine"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #1a3a52, #3a8fbc);
}
.paper-card-img[data-cat="medical-devices"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg, #0d2840, #00876d);
}
.paper-card-img[data-cat="healthcare-tech"] {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.2), transparent 55%),
    linear-gradient(135deg, #082c47, #14c2a0);
}

.paper-card-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.paper-card-topic,
.paper-card-number {
  position: absolute;
  z-index: 1;
  font-family: var(--font-mono);
  text-transform: uppercase;
  pointer-events: none;
}
.paper-card-topic {
  left: 22px;
  top: 76px;
  max-width: 14ch;
  font-size: var(--fs-2xs);
  letter-spacing: .16em;
  line-height: 1.5;
  text-align: left;
  color: rgba(255,255,255,.78);
}
.paper-card-number {
  right: 18px;
  top: 62px;
  font-family: var(--font-display);
  font-size: clamp(54px, 6vw, 92px);
  letter-spacing: -.06em;
  color: rgba(255,255,255,.12);
}
.paper-card-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.paper-card-glyph {
  width: 64px; height: 64px;
  color: rgba(255,255,255,.55);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.35));
}
.paper-card-corner {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.paper-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
  background: linear-gradient(180deg, rgba(7,19,31,0) 10%, rgba(7,19,31,.5) 42%, rgba(7,19,31,.93) 100%);
  pointer-events: none;
}
.paper-card-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 10px;
}
.paper-card-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.012em;
  color: #fff;
  margin: 0 0 8px;
}
.paper-card-desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.paper-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: #fff;
  transition: gap .25s var(--ease);
}
.paper-card-cta svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.paper-card-v2:hover .paper-card-cta { gap: 12px; }
.paper-card-v2:hover .paper-card-cta svg { transform: translateX(3px); }

/* Redesigned card: coursework badge, school line, download button */
.paper-card-badge {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}
.paper-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.paper-card-school {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0 0 14px;
}
.paper-card-overlay a,
.paper-card-overlay .paper-card-download { pointer-events: auto; }
.paper-card-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-700);
  background: #fff;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.paper-card-download svg { width: 15px; height: 15px; }
.paper-card-download:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.paper-card-download:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-500) 60%, white);
  outline-offset: 3px;
}
.paper-card-download.is-disabled {
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.72);
  cursor: default;
}

.paper-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.paper-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width .25s var(--ease), background .25s var(--ease);
}
.paper-dot.active {
  width: 28px;
  border-radius: 999px;
  background: var(--brand-500);
}
.paper-carousel-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .12em;
  color: var(--text-3);
}
.paper-carousel-empty {
  width: min(680px, calc(100vw - 40px));
  padding: 40px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-lg);
  color: var(--text-3);
  background: var(--surface);
}

.paper-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(190px, .32fr);
  gap: clamp(24px, 4vw, 56px);
  margin-top: 36px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.paper-detail.is-updating {
  opacity: .35;
  transform: translateY(5px);
}
.paper-detail-index {
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 72px);
  line-height: .9;
  color: var(--brand-500);
}
.paper-detail-kicker,
.paper-detail-aside > span {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.paper-detail h3 {
  max-width: 28ch;
  margin: 12px 0;
  font-size: clamp(24px, 3vw, 42px);
}
.paper-detail-meta {
  color: var(--brand-500);
  font-size: var(--fs-xs);
}
.paper-detail-abstract {
  margin: 24px 0;
  max-width: 78ch;
  color: var(--text-2);
  line-height: 1.72;
}
.paper-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.paper-detail-tags span {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-3xs);
  color: var(--text-3);
}
.paper-detail-aside {
  align-self: stretch;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.paper-detail-aside strong {
  display: block;
  margin: 12px 0 8px;
  color: var(--text);
}
.paper-detail-aside p,
.paper-detail-empty {
  margin: 0;
  color: var(--text-3);
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.paper-detail-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  text-decoration: none;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.paper-detail-pdf:hover {
  border-color: var(--brand-200);
  color: var(--brand-200);
  transform: translateY(-1px);
}
.paper-detail-pdf svg { width: 14px; height: 14px; }

/* Hide legacy paper card style if rendered */
.research-grid > .paper-card { display: none; }
.paper-card {
  position: relative;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.paper-card[hidden] { display: none !important; }
.paper-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
}
.paper-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .08em; color: var(--text-3);
  text-transform: uppercase;
}
.paper-card h4 { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; letter-spacing: -.012em; margin: 0; }
.paper-card .cat {
  display: inline-block;
  font-size: var(--fs-3xs); padding: 3px 8px; border-radius: 4px;
  background: var(--brand-50); color: var(--brand-600);
  letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
  align-self: flex-start;
}
[data-theme="dark"] .paper-card .cat { background: var(--brand-100); color: var(--brand-200); }
.paper-card .dl-line {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-2xs); color: var(--text-3);
  margin-top: 6px;
  transition: color .25s var(--ease);
}
.paper-card:hover .dl-line { color: var(--text); }
.paper-card .dl-line svg { width: 12px; height: 12px; }


/* ============================================================
   10b) RESEARCH — PUBLICATION SHOWCASE
        Featured "under review" manuscript + numbered ledger
   ============================================================ */

/* Warm "pending / under review" accent (distinct from the green pulse) */
:root        { --review: #c4791f; --review-soft: rgba(196, 121, 31, .12); }
[data-theme="dark"] { --review: #e6a24a; --review-soft: rgba(230, 162, 74, .14); }

/* ---- Featured manuscript (the paper under review) ---- */
.featured-paper {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 60px);
  margin-bottom: clamp(40px, 4.5vw, 72px);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--review-soft), transparent 46%),
    linear-gradient(135deg, rgba(42, 111, 174, .10), transparent 52%),
    var(--surface-hi);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow-lg);
}
.featured-paper-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at 78% 0%, black 8%, transparent 62%);
  -webkit-mask-image: radial-gradient(ellipse at 78% 0%, black 8%, transparent 62%);
  opacity: .6;
  pointer-events: none;
}
.featured-paper-watermark {
  position: absolute;
  top: clamp(-14px, -1vw, -6px); right: clamp(10px, 2vw, 36px);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(110px, 17vw, 280px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
  opacity: .04;
  pointer-events: none;
  user-select: none;
}
.featured-paper-body { position: relative; z-index: 1; max-width: 70ch; }
.featured-paper-top {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
  margin-bottom: 22px;
}
.featured-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--review);
  padding: 6px 13px 6px 11px;
  border: 1px solid color-mix(in srgb, var(--review) 38%, transparent);
  border-radius: 999px;
  background: var(--review-soft);
}
.featured-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--review);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--review) 60%, transparent);
  animation: featured-pulse 2.2s var(--ease) infinite;
}
@keyframes featured-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--review) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--review) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--review) 0%, transparent); }
}
.featured-paper-code {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.featured-paper-title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  color: var(--text);
}
.featured-paper-meta {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--text-2);
  margin: 0 0 18px;
}
.featured-paper-meta em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--review);
}
.featured-paper-abstract {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  color: var(--text-2);
  margin: 0 0 26px;
}
/* Structured teaser: research question / approach / contribution */
.featured-paper-points {
  margin: 0 0 26px;
  display: grid;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--brand-500) 5%, transparent);
}
.featured-paper-points div {
  display: grid;
  grid-template-columns: clamp(120px, 12vw, 160px) 1fr;
  gap: 8px 22px;
  align-items: baseline;
}
.featured-paper-points dt {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-500);
}
.featured-paper-points dd {
  margin: 0;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  color: var(--text-2);
}
/* Focus-area chips */
.featured-paper-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.featured-paper-chips span {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
/* At-a-glance stat strip */
.featured-paper-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0 0 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.featured-paper-stats span {
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.featured-paper-stats strong { color: var(--text); font-weight: 650; }
@media (max-width: 480px) {
  .featured-paper-points div { grid-template-columns: 1fr; gap: 4px; }
}
/* Submission tracker — Submitted → Under review → Decision */
.featured-tracker {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.featured-tracker li {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-4);
}
.featured-tracker-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--line-2);
  background: var(--bg-2);
}
.featured-tracker li.is-done    { color: var(--text-2); }
.featured-tracker li.is-done    .featured-tracker-dot { background: var(--accent); border-color: var(--accent); }
.featured-tracker li.is-active  { color: var(--review); }
.featured-tracker li.is-active  .featured-tracker-dot {
  background: var(--review); border-color: var(--review);
  box-shadow: 0 0 0 4px var(--review-soft);
}
.featured-paper-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.featured-paper-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text);
  background: var(--bg-2);
  transition: transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.featured-paper-btn svg { width: 16px; height: 16px; }
.featured-paper-btn.is-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--review);
  color: var(--review);
}
.featured-paper-btn.is-disabled {
  color: var(--text-4);
  background: transparent;
  border-style: dashed;
  cursor: not-allowed;
}

/* ---- Stats ribbon ---- */
.research-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 0 clamp(34px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
}
.research-stat {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 6px;
}
.research-stat-num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand-500);
}
.research-stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}

/* ---- Numbered publication ledger ---- */
.research-ledger {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.ledger-row {
  position: relative;
  border-bottom: 1px solid var(--line);
  --row-accent: var(--brand-500);
}
.ledger-head {
  width: 100%;
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 84px) 1fr auto;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
  padding: clamp(20px, 2.4vw, 30px) 8px clamp(20px, 2.4vw, 30px) clamp(14px, 2vw, 26px);
  text-align: left;
  background: none;
  transition: background .35s var(--ease);
}
.ledger-bar {
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 3px;
  border-radius: 3px;
  background: var(--row-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .4s var(--ease-out);
}
.ledger-row:hover  .ledger-bar,
.ledger-row.is-open .ledger-bar { transform: scaleY(1); }
.ledger-row:hover .ledger-head { background: var(--surface); }

.ledger-no {
  font-family: var(--font-mono);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: .02em;
  transition: color .3s var(--ease);
}
.ledger-row:hover  .ledger-no,
.ledger-row.is-open .ledger-no { color: var(--row-accent); }

.ledger-main { min-width: 0; }
.ledger-cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.ledger-cat::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--row-accent);
}
.ledger-title {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: clamp(18px, 1.85vw, 27px);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--text);
  transition: color .3s var(--ease);
  text-wrap: balance;
}
.ledger-row:hover .ledger-title { color: var(--brand-500); }
.ledger-byline {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.ledger-byline em { font-style: normal; color: var(--text-2); }

.ledger-side {
  display: inline-flex; align-items: center; gap: clamp(12px, 1.6vw, 22px);
  justify-self: end;
}
.ledger-year {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: .06em;
  color: var(--text-3);
}
.ledger-chevron {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--text-2);
  flex-shrink: 0;
  transition: transform .4s var(--ease), border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.ledger-chevron svg { width: 15px; height: 15px; }
.ledger-row:hover .ledger-chevron { border-color: var(--row-accent); color: var(--row-accent); }
.ledger-row.is-open .ledger-chevron {
  transform: rotate(180deg);
  background: var(--row-accent);
  border-color: var(--row-accent);
  color: #fff;
}

/* Expanding abstract panel (grid-rows technique) */
.ledger-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.ledger-row.is-open .ledger-panel { grid-template-rows: 1fr; }
.ledger-panel-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity .45s var(--ease) .05s;
}
.ledger-row.is-open .ledger-panel-inner { opacity: 1; }
.ledger-panel-body {
  padding: 2px clamp(14px, 2vw, 26px) clamp(26px, 3vw, 36px) calc(clamp(48px, 5vw, 84px) + clamp(14px, 2vw, 26px) + clamp(14px, 2vw, 34px));
  max-width: 88ch;
}
@media (max-width: 768px) {
  .ledger-panel-body { padding-left: clamp(14px, 2vw, 26px); }
}
.ledger-abstract {
  margin: 0 0 18px;
  font-size: var(--fs-md); line-height: 1.62;
  color: var(--text-2);
}
.ledger-abstract::first-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1em;
  line-height: .8;
  float: left;
  margin: 6px 10px 0 0;
  color: var(--row-accent);
}
.ledger-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.ledger-tags span {
  font-size: var(--fs-3xs); padding: 4px 11px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-3);
  border: 1px solid var(--line);
}
.ledger-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ledger-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); font-weight: 500;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text);
  background: var(--bg-2);
  transition: transform .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.ledger-link svg { width: 14px; height: 14px; }
.ledger-link:hover {
  transform: translateY(-2px);
  border-color: var(--row-accent);
  color: var(--row-accent);
}

/* Empty state when a filter matches nothing */
.ledger-empty {
  padding: 48px 8px;
  text-align: center;
  color: var(--text-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
}

@media (max-width: 768px) {
  .research-stats { grid-template-columns: repeat(2, 1fr); }
  .ledger-head {
    grid-template-columns: clamp(38px, 11vw, 52px) 1fr;
    grid-template-areas: "no main" "side side";
    row-gap: 14px;
  }
  .ledger-no  { grid-area: no; }
  .ledger-main { grid-area: main; }
  .ledger-side { grid-area: side; justify-self: start; gap: 16px; }
}


/* ============================================================
   11) SKILLS
   ============================================================ */
.skills-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
/* 7th card (Student-Athlete Foundation) spans the full row instead of orphaning */
.skills-grid > .skill-card:last-child { grid-column: 1 / -1; }
.skill-card {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  position: relative; overflow: hidden;
}
.skill-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: var(--shadow-lg);
}
.skill-num { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--text-3); letter-spacing: .1em; }
.skill-card h3 { font-size: var(--fs-lg); font-weight: 600; margin: 10px 0; letter-spacing: -.015em; }
.skill-card p { font-size: var(--fs-md); color: var(--text-2); margin: 0 0 18px; line-height: 1.55; }
.skill-subhead {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 10px;
  padding: 0;
}
.skill-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-tags span {
  font-size: var(--fs-2xs); padding: 5px 11px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-2);
  border: 1px solid var(--line);
  transition: all .25s var(--ease);
}
.skill-card:hover .skill-tags span { background: var(--bg-2); }


/* ============================================================
   12) EDUCATION
   ============================================================ */
.edu-grid {
  display: grid; grid-template-columns: .6fr 1.4fr; gap: 48px; align-items: start;
}
.edu-media .ph,
.edu-media .img { position: sticky; top: 110px; }

.edu-stack { display: grid; gap: 18px; }
.edu-card {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.edu-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.edu-when {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .08em; color: var(--text-3); text-transform: uppercase;
}
.edu-when strong {
  color: var(--text); font-weight: 600;
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm); letter-spacing: -.005em; text-transform: none;
  margin-top: 6px;
}
.edu-card h3 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 6px; letter-spacing: -.015em; }
.edu-where { color: var(--text-3); font-size: var(--fs-sm); margin: 0 0 14px; }
.edu-body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.edu-body ul li {
  position: relative; padding-left: 18px;
  font-size: var(--fs-sm); color: var(--text-2);
}
.edu-body ul li::before {
  content: ""; position: absolute;
  left: 0; top: 9px; width: 8px; height: 1px;
  background: var(--brand-400);
}

.awards-block { margin-top: 36px; }
.awards-block h3 { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 18px; letter-spacing: -.02em; }

/* Featured award cards (with image placeholder) */
.awards-feature {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin-bottom: 28px;
}
.award-card {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.award-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.award-card .ph,
.award-card .img { width: 100%; }
.award-card-body { padding: 0 6px 8px; }
.award-card-yr {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-500); margin-bottom: 6px;
}
.award-card-body h4 {
  font-size: var(--fs-base); font-weight: 600;
  letter-spacing: -.012em; margin: 0 0 8px;
  line-height: 1.3;
}
.award-card-body p {
  font-size: var(--fs-sm); color: var(--text-2);
  margin: 0; line-height: 1.5;
}

.awards-list { display: grid; gap: 0; }
.award-row {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.award-row:last-child { border-bottom: 0; }
.award-yr {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--text-3); letter-spacing: .08em; padding-top: 2px;
}
.award-body strong { color: var(--text); font-weight: 600; }
.award-body { font-size: var(--fs-sm); color: var(--text-2); }


/* ============================================================
   13) DOCUMENTS
   ============================================================ */
.tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-3);
  border-radius: 999px;
  margin-bottom: 28px;
}
.tab-btn {
  padding: 8px 18px;
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-3);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s var(--ease);
}
.flag {
  font-family: var(--font-mono); font-size: var(--fs-3xs); font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-2); color: var(--text-2);
}
.tab-btn.active { background: var(--bg-2); color: var(--text); box-shadow: var(--shadow-sm); }
.tab-btn.active .flag { background: var(--text); color: var(--bg-2); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .4s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.tab-info {
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.tab-info .label {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .12em; color: var(--text-3);
  text-transform: uppercase; margin-bottom: 4px;
}
.tab-info p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }

.file-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.file-card {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 18px;
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.file-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow);
}
.file-ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-50), var(--bg-3));
  color: var(--brand-600);
}
[data-theme="dark"] .file-ic { background: linear-gradient(135deg, var(--brand-100), var(--bg-3)); color: var(--brand-200); }
.file-ic svg { width: 22px; height: 22px; }
.file-info { display: flex; flex-direction: column; gap: 2px; }
.file-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.file-meta { font-size: var(--fs-xs); color: var(--text-3); }
.file-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--text);
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-3);
  transition: background .25s var(--ease);
}
.file-card:hover .file-go { background: var(--text); color: var(--bg-2); }
.file-go svg { width: 12px; height: 12px; }


/* ============================================================
   14) CONTACT & FOOTER
   ============================================================ */
.contact-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  align-items: stretch;
  gap: clamp(36px, 5vw, 80px);
  background: linear-gradient(135deg, var(--brand-700), var(--brand-fill));
  border-radius: var(--radius-lg);
  padding: clamp(48px, 5vw, 80px) clamp(32px, 4vw, 56px);
  color: #fff;
  overflow: hidden;
  margin-bottom: 56px;
}
.contact-cta::before {
  content: ""; position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(13,130,117,.5), transparent 60%);
  top: -100px; right: -80px; filter: blur(40px);
  pointer-events: none;
}
.contact-cta-copy {
  position: relative;
  z-index: 2;
  align-self: center;
}
.contact-cta .eyebrow { color: rgba(255,255,255,.7); }
.contact-cta .eyebrow::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(13,130,117,.25); }
.contact-cta h2 { color: #fff; max-width: 22ch; }
.contact-cta h2 em { color: var(--bone-hi); }
.contact-cta p { color: rgba(255,255,255,.78); font-size: var(--fs-lg); max-width: 56ch; }
.contact-cta .btn-primary { background: #fff; color: var(--brand-700); }
.contact-cta .btn-secondary {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.contact-cta .btn-secondary:hover { background: rgba(255,255,255,.16); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.contact-portrait {
  position: relative;
  z-index: 1;
  min-height: 420px;
  margin: -20px -12px -48px 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: calc(var(--radius-lg) - 6px) calc(var(--radius-lg) - 6px) 0 0;
  background: rgba(4,24,42,.28);
  box-shadow:
    0 28px 56px rgba(3,18,31,.28),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.contact-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 58%, rgba(5,29,48,.74) 100%),
    linear-gradient(90deg, rgba(7,42,68,.18), transparent 38%);
}
.contact-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: saturate(.84) contrast(1.03);
  transition: transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.contact-cta:hover .contact-portrait img {
  transform: scale(1.025);
  filter: saturate(.96) contrast(1.03);
}
.contact-portrait-caption {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.contact-portrait-caption em {
  font-style: normal;
  color: color-mix(in srgb, var(--bone-hi) 90%, transparent);
}

/* Contact details align with the full-width callout above. */
.contact-panel {
  width: 100%;
}

.contact-rows {
  display: grid; gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.contact-row {
  display: grid; grid-template-columns: 160px 1fr auto;
  gap: 24px; align-items: center;
  padding: 20px 28px;
  background: var(--bg-2);
  transition: background .25s var(--ease);
}
a.contact-row:hover { background: var(--bg); }
.contact-k { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; }
.contact-v { font-size: var(--fs-md); color: var(--text); font-weight: 500; }
.contact-go { color: var(--text-3); font-size: var(--fs-sm); }
a.contact-row:hover .contact-go { color: var(--text); }

footer {
  padding: 56px 0 40px;
  border-top: 1px solid var(--line);
  margin-top: 80px;
}
/* Three groups, each on its own alignment: identity reads from the left edge,
   the section list is a two-column index rather than a wrapping run of links,
   and the social buttons close the row on the right. Previously all three
   cells were centred inside a 2fr/2fr/1fr grid, so nothing lined up with
   anything and the nav wrapped unevenly. */
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
  text-align: left;
}
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.foot-mark {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-400));
  color: #fff; font-weight: 700; font-size: var(--fs-2xs); letter-spacing: .04em;
}
.foot p { margin: 0; font-size: var(--fs-sm); color: var(--text-3); max-width: 42ch; }
.foot nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  align-content: start;
}
.foot nav a { font-size: var(--fs-sm); color: var(--text-2); }
.foot nav a:hover { color: var(--text); }
.foot-socials { display: flex; gap: 8px; justify-content: flex-end; align-self: center; }
.foot-socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--text-2);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.foot-socials a:hover { background: var(--text); color: var(--bg-2); transform: translateY(-2px); }
.foot-socials a svg { width: 16px; height: 16px; }
.foot-base {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3);
  flex-wrap: wrap; gap: 12px;
}


/* ============================================================
   15) IMAGE PLACEHOLDERS  —  the .ph blocks
   ----------------------------------------------------------------
   Each placeholder is a styled box with a label and dashed border.
   Swap any placeholder for a real image by:
     - changing the class from "ph" to "img"
     - putting <img src="assets/images/your-file.jpg" alt="..." />
       inside it
   ============================================================ */
.ph {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, var(--bg-3) 0 12px, var(--bg-2) 12px 24px);
  border: 1.5px dashed var(--line-2);
  display: grid; place-items: center;
  text-align: center;
  color: var(--text-3);
  box-shadow: var(--shadow-sm);
}
.ph::after {
  content: attr(data-label);
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--text); color: var(--bg-2);
  padding: 4px 10px; border-radius: 999px;
}
.ph-inner { padding: 24px; display: grid; gap: 6px; }
.ph-tag {
  font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.ph-name { font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.ph-meta { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--font-mono); }

/* Shape variants */
.ph-portrait  { aspect-ratio: 4 / 5; }
.ph-landscape { aspect-ratio: 4 / 3; }
.ph-square    { aspect-ratio: 1 / 1; }
.ph-wide      { aspect-ratio: 16 / 9; }

/* Accent overlap on About */
.about-media .ph { width: 100%; }
.about-media .ph-accent {
  position: absolute;
  bottom: -36px; right: -16px;
  width: 46%;
  border: 4px solid var(--bg-2);
  aspect-ratio: 4 / 5;
}

/* Real image style (used after you swap a placeholder) */
.img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: var(--shadow-lg);
}
.img img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================
   16) REVEAL ANIMATIONS (script.js adds .in when in view)
       Gated on html.js — set by the inline boot script — so that a failed or
       blocked script leaves every section visible rather than at opacity 0.
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }



/* ============================================================
   17a) PREMIUM SHELL — grain, scroll-progress, toast, clock,
                        magnetic CTA, theme-icon swap
   ============================================================ */

/* Body grain — single SVG noise layer */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  opacity: .055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
[data-theme="dark"] .grain { opacity: .075; mix-blend-mode: soft-light; }

/* Top scroll-progress */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: var(--z-progress);
  background: transparent;
  pointer-events: none;
}
.scroll-progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-500), var(--accent));
  box-shadow: 0 0 10px rgba(13,130,117,.45);
  transition: width .12s linear;
}

/* Nav — clock */
.nav-clock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .12em;
  color: var(--text-3);
  border-right: 1px solid var(--line);
  margin-right: 4px;
}
.nav-clock-city {
  color: var(--accent);
  font-weight: 500;
}
.nav-clock-time {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
}
@media (max-width: 1200px) { .nav-clock { display: none; } }

/* Nav — drop brand name on desktop, keep mark only */
@media (min-width: 1200px) {
  .nav-brand .nav-name { display: none; }
  .nav-brand { padding: 12px 16px; }
}

/* Theme icon morph */
#themeToggle { position: relative; }
#themeToggle svg {
  position: absolute;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
#themeToggle .icon-sun { opacity: 1; transform: rotate(0); }
#themeToggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(.6); }
[data-theme="dark"] #themeToggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(.6); }
[data-theme="dark"] #themeToggle .icon-moon { opacity: 1; transform: rotate(0); }

/* CTA pill */
.cta-pill-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Toast — copy email */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 40px);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--brand-700);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 20px 50px -20px rgba(11,30,50,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.toast svg { width: 14px; height: 14px; color: var(--accent); }


/* ============================================================
   17c) POLISH PASS — typography, surfaces, microinteractions
   ============================================================ */

/* ---- Display font: Inter Tight 700 for big section headings (Swiss Lab) ---- */
.h-section,
.ch01-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.028em;
}
.h-section em,
.ch01-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.015em;
}
/* Hanging tracking on large display sizes */
@media (min-width: 768px) {
  .h-section, .ch01-title { letter-spacing: -.034em; }
}

/* ---- Minimal luxury opener: hairline timestamp + serif lede ---- */
.ch01-text .ch01-pull-marker {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brand-500);
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: transparent;
}
.ch01-text .ch01-pull-marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--brand-500) 45%, transparent),
    transparent
  );
}

/* ---- Underline-grow on prose links ---- */
.ch01-text a,
.tl-card a,
.edu-card a,
.about-text a {
  position: relative;
  color: var(--brand-600);
  font-weight: 500;
  display: inline-block;
}
.ch01-text a::after,
.tl-card a::after,
.edu-card a::after,
.about-text a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s cubic-bezier(.4, 1, .3, 1);
}
.ch01-text a:hover::after,
.tl-card a:hover::after,
.edu-card a:hover::after,
.about-text a:hover::after { transform: scaleX(1); }
[data-theme="dark"] .ch01-text a,
[data-theme="dark"] .tl-card a,
[data-theme="dark"] .edu-card a,
[data-theme="dark"] .about-text a { color: var(--brand-300); }

/* ---- Staggered reveal children ---- */
.js .reveal.cascade > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.cascade.in > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Pill row magnetic spread (CSS only) ---- */
.pill-row .pill {
  transition: transform .35s cubic-bezier(.4, 1, .3, 1),
              border-color .25s var(--ease),
              color .25s var(--ease);
}
.pill-row:hover .pill { transform: translateX(-6px); }
.pill-row .pill:hover { transform: translateX(0) translateY(-2px) scale(1.04); }
.pill-row .pill:hover ~ .pill { transform: translateX(6px); }

/* ---- Image grain on hover (story carousel) ---- */
.story-slide.is-active img {
  transition: filter .6s var(--ease), transform 1.4s var(--ease);
}
.story-carousel:hover .story-slide.is-active img {
  filter: saturate(.92) contrast(1.06) brightness(.96);
}
.story-slide.is-active::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.story-carousel:hover .story-slide.is-active::before { opacity: .25; }

/* ---- Section eyebrow — scrolls away with the section (not pinned) ---- */
.sticky-eyebrow {
  position: static;
  margin-bottom: 16px;
}

/* ---- Paper card 3D tilt (CSS-only, on hover) ---- */
.paper-card-v2 {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1),
              box-shadow .45s var(--ease);
}
.paper-card-v2:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
}
.paper-card-v2 > * { transform: translateZ(0); }
.paper-card-v2:hover .paper-card-img { transform: translateZ(20px) scale(1.05); }

/* ---- Timeline scroll progress fill ---- */
.timeline { --tl-progress: 0%; }
.timeline::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 19px;
  width: 1px;
  height: var(--tl-progress);
  background: linear-gradient(to bottom, var(--brand-500), var(--accent));
  box-shadow: 0 0 8px rgba(13, 130, 117, .35);
  transition: height .15s linear;
  z-index: 0;
}
.tl-item::after {
  content: "";
  position: absolute;
  left: 22px; top: 24px;
  width: 0; height: 0;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: width .35s var(--ease), height .35s var(--ease), opacity .35s var(--ease);
}
.tl-item.is-passed::after {
  width: 4px; height: 4px;
  opacity: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(13, 130, 117, .15);
}

/* ---- Inner light hairline on glass cards ---- */
.tl-card,
.edu-card,
.skill-card,
.paper-card-v2,
.glass-card,
.focus-card,
.pill,
.contact-row,
.contact-cta {
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
[data-theme="dark"] .tl-card,
[data-theme="dark"] .edu-card,
[data-theme="dark"] .skill-card,
[data-theme="dark"] .paper-card-v2,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .focus-card,
[data-theme="dark"] .pill,
[data-theme="dark"] .contact-row,
[data-theme="dark"] .contact-cta {
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---- Edge bleed vignette on body ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-vignette);
  background:
    radial-gradient(ellipse at 0% 100%, rgba(11, 59, 95, .12), transparent 35%),
    radial-gradient(ellipse at 100% 100%, rgba(13, 130, 117, .06), transparent 30%);
  opacity: .85;
}
[data-theme="dark"] body::after {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(0, 0, 0, .55), transparent 38%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 0, 0, .4), transparent 35%);
  opacity: 1;
}

/* ---- Education: warm bone surface ---- */
[data-theme="dark"] { --bone: #1a1612; --bone-line: rgba(255, 220, 170, 0.08); --bone-hi: #ffe9ad; }

#education {
  background:
    radial-gradient(ellipse at 80% 0%, rgba(217, 184, 124, .12), transparent 50%),
    var(--bone);
  border-top: 1px solid var(--bone-line);
  border-bottom: 1px solid var(--bone-line);
}
#education .edu-card,
#education .award-card {
  background: rgba(255, 255, 255, .55);
  border-color: var(--bone-line);
}
[data-theme="dark"] #education .edu-card,
[data-theme="dark"] #education .award-card {
  background: rgba(255, 255, 255, .03);
}

/* ---- Number ticker target styling ---- */
[data-count] {
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   17a) MOBILE TYPE FLOOR
   ------------------------------------------------------------
   The phone build (/m/) loads this stylesheet and then a 369-line
   override that sets no font sizes at all, so phones used to inherit
   the desktop scale wholesale — 95 elements rendered under 12px, the
   smallest at 9.5px. Raising the bottom of the scale here fixes all of
   them at once, and covers narrow desktop windows too.

   Nothing below 12px. Body copy stays at 16px.
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --fs-3xs:  12px;
    --fs-2xs:  12.5px;
    --fs-xs:   13.5px;
    --fs-sm:   14.5px;
    --fs-md:   15.5px;
    --fs-base: 16px;
    --fs-lg:   18px;
    --fs-xl:   21px;
  }
}


/* ============================================================
   17) RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------
   The site uses a desktop-first approach. These rules
   simplify the layout for tablets and phones, and add room
   on large/ultrawide monitors.
   ============================================================ */

/* Ultrawide / 4K — let content breathe but cap line lengths */
@media (min-width: 1920px) {
  .about-text p,
  .about-text .lede,
  .tl-card p.summary,
  .paper-desc,
  .skill-card p,
  .edu-body ul li {
    max-width: 68ch;
  }
  .focus-grid { gap: 22px; }
  .research-grid { gap: 16px; }
  .skills-grid { gap: 24px; }
  .paper-feature-grid { gap: 22px; }
}

/* Large desktops — bump research grid to 4 columns */
@media (min-width: 1600px) {
  .research-grid { grid-template-columns: repeat(4, 1fr); }
  .focus-grid { gap: 20px; }
}

/* Tablet & small laptops */
@media (max-width: 1200px) {
  .about-layout { grid-template-columns: 1fr; gap: 56px; }
  .exp-layout { grid-template-columns: 1fr; gap: 40px; }
  .exp-aside { position: static; grid-template-columns: 1fr 1fr; }
  .edu-grid { grid-template-columns: 1fr; gap: 32px; }
  .edu-media .ph { position: static; max-width: 320px; }
  .paper-feature-grid { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: 1fr 1fr; }
}

/* Tablet portrait */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: grid; }
  .nav-inner { padding: 0; }
  .nav-name { display: none; }
}

@media (max-width: 768px) {
  #particleMesh,
  body::after {
    display: none;
  }
  .backdrop::before,
  .backdrop::after {
    filter: blur(42px);
    transform: none;
    will-change: auto;
  }
  .nav-inner,
  .glass-card,
  .tl-card,
  .edu-card,
  .award-card,
  .skill-card,
  .paper-card-v2,
  .paper-feature,
  .contact-row,
  .tab-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .story-slide.is-active::before {
    display: none;
  }
  .ekg-track {
    animation-duration: 16s;
  }
  .cta-pill { display: none; }
  .focus-grid { grid-template-columns: 1fr 1fr; }
  .skills-grid { grid-template-columns: 1fr; }
  .edu-card { grid-template-columns: 1fr; gap: 14px; }
  .paper-card-v2 { width: min(72vw, 340px); }
  .paper-detail {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .paper-detail-aside {
    grid-column: 1 / -1;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Phones */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  section { padding: 80px 0; }
  .contact-cta {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 28px 0;
    border-radius: var(--radius-lg);
  }
  .contact-portrait {
    min-height: 420px;
    margin: 0 -28px;
    border-width: 1px 0 0;
    border-radius: 0;
  }
  /* Crop started below his hairline, so the top of his head was cut off. */
  .contact-portrait img { object-position: center 10%; }
  .contact-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px; }
  .contact-row .contact-go { display: none; }
  .ekg-track {
    animation: none;
    transform: translateX(-12%);
  }
  .file-grid { grid-template-columns: 1fr; }
  .tab-info { grid-template-columns: 1fr; }
  .research-grid { grid-template-columns: 1fr; }
  .awards-feature { grid-template-columns: 1fr; }
  .exp-aside { grid-template-columns: 1fr; }
  /* One column, one alignment, hairline between each group — the phone version
     used to centre the brand and nav but left-align the socials, and the nav
     wrapped 4 + 2 across the width. */
  .foot {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: left;
  }
  .foot > div:first-child { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
  .foot nav {
    gap: 0 20px;
    padding: 8px 0 14px;
    border-bottom: 1px solid var(--line);
  }
  .foot-socials { justify-content: flex-start; padding-top: 18px; }
  .foot-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 26px;
  }
  /* The knee shares the socials' row instead of opening its own band between
     the socials and the legal line. It is a sibling of .foot, not of
     .foot-socials, so .foot goes display:contents at this width and its
     children become grid items of the footer container alongside the knee —
     which lets the two sit on one row without moving anything in the markup
     (desktop still gets the knee centred below the whole block). */
  footer .container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .foot { display: contents; }
  .foot > div:first-child,
  .foot nav,
  .foot-base { grid-column: 1 / -1; }
  .foot-socials { grid-column: 1; }
  /* §22 declares .knee-assembly at 80x120 further down the file, so the phone
     size is written at container strength to win on specificity rather than
     source order. */
  footer .container .knee-assembly {
    grid-column: 2;
    width: 44px; height: 66px;
    margin: 0;
    align-self: center;
    justify-self: end;
  }
  .chapter-rule { margin-left: 0; }
  .chapter-lede { padding-left: 0; }
  .chapter-num { display: none; }
  .research-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    margin-inline: -20px;
    padding: 0 20px 10px;
    scrollbar-width: none;
  }
  .research-filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; }
  .paper-carousel-head { align-items: flex-start; }
  .paper-carousel-nav { display: none; }
  .paper-carousel-viewport { margin-inline: -20px; }
  .paper-carousel-track {
    gap: 14px;
    padding-inline: 20px;
  }
  .paper-card-v2 {
    width: min(82vw, 330px) !important;
    max-width: none;
    aspect-ratio: 4 / 5;
  }
  .paper-detail {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 22px;
  }
  .paper-detail-index { font-size: 44px; }
  .paper-detail-aside {
    grid-column: auto;
  }

  /* ---- Mobile card-stack swipe: Experience ---- */
  .exp-layout { display: block; }
  .exp-aside { display: none; }
  .timeline { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; padding: 0 20px 20px 0; scrollbar-width: none; }
  .timeline::-webkit-scrollbar { display: none; }
  .timeline::before { display: none; }
  .tl-item { flex: 0 0 85vw; max-width: 340px; scroll-snap-align: start; padding: 0; }
  .tl-item::before, .tl-item::after { display: none; }
  .tl-card { height: 100%; }

  /* ---- Mobile card-stack swipe: Skills ---- */
  .skills-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 16px; padding-bottom: 20px; scrollbar-width: none; }
  .skills-grid::-webkit-scrollbar { display: none; }
  .skill-card { flex: 0 0 82vw; max-width: 320px; scroll-snap-align: start; }

  /* ---- Mobile: Research carousel touch-optimized ---- */
  .paper-carousel-viewport { scroll-snap-type: x mandatory; }
  .paper-card-v2 { scroll-snap-align: start; }
  .paper-carousel-nav { display: none; }
  .paper-carousel-dots { display: flex; }

  /* ---- Mobile swipe hint ---- */
  .timeline::after,
  .skills-grid::after {
    content: '';
    display: block;
    flex: 0 0 1px;
  }
}


/* ============================================================
   19) MICRO-INTERACTIONS — orthopedic MedTech premium layer
   ============================================================ */


/* ---- 3. Interference Screw Decorations ---- */
.section-screw {
  display: flex; justify-content: center;
  padding: 8px 0; pointer-events: none;
}
/* Extra breathing room where two heavy sections meet (Skills → Documents) */
.section-screw--gap { margin: clamp(28px, 4.5vw, 64px) 0; }
.section-screw svg {
  width: 32px; height: 32px; color: var(--text-4); opacity: 0;
  transition: opacity .6s var(--ease);
}
.section-screw.is-visible svg {
  opacity: .4;
  animation: screwIn 1.4s var(--ease) forwards;
}
@keyframes screwIn {
  0% { transform: rotate(0deg) translateY(-6px) scale(.7); opacity: 0; }
  100% { transform: rotate(720deg) translateY(0) scale(1); opacity: .4; }
}

/* ---- 4. Live EKG Monitor Divider — full-width ---- */
.ekg-wrap {
  position: relative;
  width: 100%;
  padding: 16px 0;
  overflow: hidden;
}
.ekg-full {
  mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 2%, black 98%, transparent);
}
.ekg-track {
  display: flex;
  width: max-content;
  /* One uninterrupted eight-beat path; the second half repeats the first. */
  animation: ekgScroll 8s linear infinite;
  animation-play-state: paused;
}
.ekg-wrap.is-in-view .ekg-track { animation-play-state: running; }
.ekg-track .ekg-divider {
  display: block;
  width: clamp(2730px, 274vw, 3780px);
  height: 56px;
  flex-shrink: 0;
  overflow: visible;
}
.ekg-track .ekg-divider path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .68;
  filter: drop-shadow(0 0 5px rgba(13,130,117,.4)) drop-shadow(0 0 13px rgba(13,130,117,.16));
}
@keyframes ekgScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   MICROINTERACTIONS — CTA loading, carousel pause, cite, counters
   ============================================================ */

/* --- Resume / download CTA: "Preparing…" → check --- */
.cta-spinner {
  width: 15px; height: 15px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  display: inline-block;
  animation: cta-spin .6s linear infinite;
}
@keyframes cta-spin { to { transform: rotate(360deg); } }
.cta-busy-label { white-space: nowrap; }
a.btn.cta-busy, a.btn.cta-ready,
a.file-card.cta-busy, a.file-card.cta-ready {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
a.file-card.cta-busy, a.file-card.cta-ready { min-height: 66px; }
.cta-ready { color: var(--accent) !important; border-color: var(--accent) !important; }
.cta-ready svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .cta-spinner { animation: none; } }

/* --- Hero: first-slide "arrival" as the final entrance beat --- */
.hero-slides { animation: heroSlidesIn 1.3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes heroSlidesIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Carousel progress: feel "alive" + glow when paused on hover --- */
.hero.is-paused .hero-progress-bar,
.story-carousel.is-paused .story-progress-bar {
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 1;
}
.hero.is-paused .hero-progress::after {
  content: "❚❚";
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--fs-3xs); letter-spacing: 1px;
  color: color-mix(in srgb, var(--accent) 85%, white);
  opacity: .9;
}

/* --- Ledger Cite: "Copied ✓" swap on the button itself --- */
.ledger-cite.is-copied {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)) !important;
}

/* --- Stat counters: digit-roll easing + underline-draw on the label --- */
.research-stat-num { transition: filter .35s var(--ease); }
.research-stat-num.is-counting { filter: blur(.45px); }
.research-stat-label { position: relative; display: inline-flex; width: fit-content; }
.research-stat-label::after {
  content: ""; position: absolute; left: 0; bottom: -5px;
  height: 1.5px; width: 100%;
  background: color-mix(in srgb, var(--brand-500) 55%, transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .65s var(--ease-out);
}
.research-stat.is-counted .research-stat-label::after { transform: scaleX(1); }

/* --- Demoted "student-athlete" aside below the skills grid --- */
.skills-aside {
  margin-top: 18px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px;
  padding: 20px clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5;
}
.skills-aside-label {
  font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.skills-aside-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); }
.skills-aside p { margin: 0; flex: 1 1 320px; }
.skills-aside strong { color: var(--text); font-weight: 600; }
.skills-aside-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skills-aside-tags span {
  font-size: var(--fs-2xs); padding: 4px 10px; border-radius: 999px;
  background: var(--bg-3); color: var(--text-3); border: 1px solid var(--line);
}

/* ---- 7. Timeline spine ----
   The spine runs on the brand ramp (see "Timeline scroll progress fill").
   An earlier red→orange→yellow ossification gradient lived here; it imported
   three saturated hues that appear nowhere else and needed !important twice. */
[data-theme="dark"] .timeline::after {
  background: linear-gradient(to bottom, var(--brand-400), var(--accent));
}


/* ---- 9. Paper Featured 3D Shadow Cascade ---- */
.paper-feature { transform-style: preserve-3d; }
.paper-feature:hover {
  box-shadow:
    0 32px 64px -24px rgba(11,30,50,.18),
    0 16px 32px -16px rgba(11,30,50,.12),
    0 6px 12px -6px rgba(11,30,50,.06),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}
[data-theme="dark"] .paper-feature:hover {
  box-shadow:
    0 32px 64px -24px rgba(0,0,0,.45),
    0 16px 32px -16px rgba(0,0,0,.3),
    0 6px 12px -6px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* ---- 10. Knee Assembly Scroll ---- */
.knee-assembly {
  width: 80px; height: 120px; margin: 0 auto 24px;
  color: var(--text-4); opacity: .55;
}
.knee-assembly svg { width: 100%; height: 100%; overflow: visible; }
.knee-part {
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
.knee-part.is-visible { opacity: 1; transform: translateY(0); }
.knee-assembly.is-complete svg { animation: kneeFloat 5s ease-in-out infinite; }
@keyframes kneeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}


/* ============================================================
   17B) RESEARCH SECTION
   Hybrid: feature card (manuscript under review) + grid of
   academic coursework cards. Reuses tl-card grammar, .tl-tag
   color logic, and the section-head pattern.
   ============================================================ */
/* --- Feature card: GenAI manuscript under peer review ----- */
.research-feature {
  position: relative;
  margin-top: 28px;
  padding: 36px 40px 32px;
  background: var(--surface-hi);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.research-feature::before {
  /* very subtle brand→accent ambient wash. Single signature device. */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(11,59,95,.05) 0%, transparent 55%),
    radial-gradient(80% 60% at 100% 100%, rgba(13,130,117,.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.research-feature > * { position: relative; z-index: 1; }
.research-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-2);
}

.research-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.research-feature-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Status pill — reuses tl-tag look but earns its own modifier. */
.research-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(13,130,117,.10);
  color: #008267;
}
[data-theme="dark"] .research-status {
  background: rgba(13,130,117,.18);
  color: #2bd6b0;
}
.research-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
  .research-status-dot {
    animation: researchStatusPulse 2s ease-in-out infinite;
  }
}
@keyframes researchStatusPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

.research-feature-body {
  display: grid;
  gap: 12px;
  max-width: 64ch;
}
.research-feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.04;
  letter-spacing: -.028em;
  margin: 0;
  color: var(--text);
}
.research-feature-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--brand-500);
  margin: 0;
}
[data-theme="dark"] .research-feature-italic { color: #2bd6b0; }
.research-feature-summary {
  font-size: var(--fs-md);
  line-height: 1.62;
  color: var(--text-2);
  margin: 4px 0 0;
}

/* Collapsible abstract */
.research-feature-abstract {
  margin: 14px 0 0;
}
.research-feature-abstract > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-500);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 35%, transparent);
  width: fit-content;
  user-select: none;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.research-feature-abstract > summary::-webkit-details-marker { display: none; }
.research-feature-abstract > summary:hover {
  color: var(--brand-600, var(--brand-500));
  border-bottom-color: var(--brand-500);
}
.research-feature-abstract-icon {
  width: 12px;
  height: 12px;
  transition: transform .3s var(--ease);
}
.research-feature-abstract[open] > summary .research-feature-abstract-icon {
  transform: rotate(180deg);
}
.research-feature-abstract[open] > summary .research-feature-abstract-label::before {
  content: "Hide abstract";
}
.research-feature-abstract[open] > summary .research-feature-abstract-label {
  font-size: 0;
}
.research-feature-abstract[open] > summary .research-feature-abstract-label::before {
  font-size: var(--fs-3xs);
}
.research-feature-abstract-body {
  margin: 16px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--text-2);
  max-width: 72ch;
  animation: abstractFade .35s var(--ease);
}
@keyframes abstractFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.research-feature-foot {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.research-feature-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.research-feature-pill-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.research-feature-pill-value {
  font-size: var(--fs-sm);
  color: var(--text);
  font-weight: 500;
  letter-spacing: -.005em;
}

@media (max-width: 768px) {
  .research-feature { padding: 28px 22px 26px; }
  .research-feature-foot { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 480px) {
  .research-feature-foot { grid-template-columns: 1fr; }
}

/* --- Academic coursework block --------------------------- */
.research-academic { margin-top: 56px; }
.research-academic-head { margin-bottom: 22px; }
.research-academic-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.research-academic-lede {
  margin: 8px 0 0;
  font-size: var(--fs-md);
  color: var(--text-2);
  max-width: 56ch;
}

.research-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 1200px) { .research-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .research-grid { grid-template-columns: 1fr; } }

/* Card — luxury minimal: hairline cells, generous whitespace, no shadow */
.research-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color .35s var(--ease),
    transform .4s var(--ease),
    color .3s var(--ease);
}
.research-card-index {
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-3);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
  pointer-events: none;
}
.research-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-500);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s var(--ease);
  pointer-events: none;
}
.research-card:hover .research-card-accent,
.research-card:focus-visible .research-card-accent {
  transform: scaleY(1);
}
.research-card:hover .research-card-index,
.research-card:focus-visible .research-card-index {
  opacity: 1;
  transform: translateY(0);
  color: var(--brand-500);
}
.research-card:hover .research-card-title,
.research-card:focus-visible .research-card-title {
  color: var(--brand-500);
  -webkit-line-clamp: unset;
}
.research-card:hover .research-card-summary,
.research-card:focus-visible .research-card-summary {
  -webkit-line-clamp: unset;
  color: var(--text);
}
.research-card:hover .research-card-cta svg,
.research-card:focus-visible .research-card-cta svg {
  transform: translate(3px, -3px);
}
.research-grid > .research-card:nth-child(3n) { border-right: 0; }
@media (max-width: 1200px) {
  .research-grid > .research-card { border-right: 1px solid var(--line); }
  .research-grid > .research-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .research-grid > .research-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 768px) {
  .research-grid > .research-card { border-right: 0 !important; }
}
.research-card:hover,
.research-card:focus-visible {
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--brand-500) 3%, transparent);
}
.research-card:focus-visible {
  outline: 1px solid var(--brand-500);
  outline-offset: -1px;
}

.research-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
}
.research-card-year {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-3xs);
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--brand-500);
}
[data-theme="dark"] .research-card-year { color: var(--brand-300); }

.research-card-code {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
}
[data-theme="dark"] .research-card-code { background: transparent; }

.research-card-status {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.research-card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.research-card-summary {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.research-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 6px;
}
.research-card-tags span {
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-3);
}
[data-theme="dark"] .research-card-tags span { background: transparent; color: var(--text-3); }

.research-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-500);
  margin-top: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 30%, transparent);
  align-self: flex-start;
  transition: border-color .25s var(--ease);
}
.research-card:hover .research-card-cta {
  border-bottom-color: var(--brand-500);
}
.research-card-cta svg {
  width: 12px; height: 12px;
  transition: transform .3s var(--ease);
}
.research-card:hover .research-card-cta svg { transform: translate(2px, -2px); }

/* Print: keep section visible, expand summaries */
@media print {
  .research-feature { box-shadow: none; border: 1px solid #ccc; padding: 16px; }
  .research-feature::before { display: none; }
  .research-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .research-card { box-shadow: none; border: 1px solid #ccc; padding: 12px; }
  .research-card-summary { -webkit-line-clamp: unset; }
}


/* ============================================================
   19) CH01 EDITORIAL REFRESH — uniform editorial type
   Scoped to #about .ch01. Every line (title, lede, year, body)
   shares the SAME font + size + weight + line-height. Justified.
   ============================================================ */
#about .ch01 {
  --ch01-font: var(--font-serif);
  --ch01-size: 17px;
  --ch01-leading: 1.8;
}

/* Title + eyebrow + section-lede keep their global defaults
   (matches the other section headers). Only the body block
   below gets unified editorial type. */

#about .ch01 .ch01-text--editorial,
#about .ch01 .ch01-text--editorial p,
#about .ch01 .ch01-text--editorial .ch01-lede-editorial,
#about .ch01 .ch01-yearmark__years {
  font-family: var(--ch01-font);
  font-size: var(--ch01-size);
  line-height: var(--ch01-leading);
  font-weight: 400;
  letter-spacing: 0.003em;
  color: var(--text-2);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  font-style: normal;
}

/* Body block */
#about .ch01 .ch01-text--editorial { max-width: 64ch; }
#about .ch01 .ch01-text--editorial p { margin: 0 0 24px; }
#about .ch01 .ch01-text--editorial p:last-child { margin-bottom: 0; }
#about .ch01 .ch01-text--editorial p strong {
  font-weight: 600;
  color: var(--text);
}

/* Year mark — same font + size, italic + brand-blue */
#about .ch01 .ch01-yearmark {
  display: block;
  margin: 0 0 18px;
}
#about .ch01 .ch01-yearmark__rule { display: none; }
#about .ch01 .ch01-yearmark__years {
  font-style: italic;
  color: var(--brand-500);
}

/* Lede inside body — also same size now */
#about .ch01 .ch01-text--editorial .ch01-lede-editorial {
  margin: 0 0 24px;
  color: var(--text);
}

@media (max-width: 768px) {
  #about .ch01 { --ch01-size: 16px; --ch01-leading: 1.78; }
}

/* Typewriter caret on the currently-typing paragraph */
#about .ch01 .ch01-text--editorial .is-typing-pending::after,
#about .ch01 .ch01-text--editorial .is-typing::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--brand-500);
  opacity: .8;
  animation: ch01-caret-blink 0.9s steps(2, start) infinite;
}
#about .ch01 .ch01-text--editorial .is-typing-pending { opacity: 0; }
#about .ch01 .ch01-text--editorial .is-typing-pending::after { opacity: 0; }

@keyframes ch01-caret-blink {
  to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  #about .ch01 .ch01-text--editorial .is-typing::after,
  #about .ch01 .ch01-text--editorial .is-typing-pending::after {
    display: none;
  }
}

/* ============================================================
   18) PRINT — make it readable on paper
   ============================================================ */
@media print {
  .nav, .backdrop, .mobile-menu, .contact-cta { display: none !important; }
  body { background: #fff; color: #000; }
  section { padding: 24px 0; }
}

/* ---------------------------------------------------------------------------
   Skip link (UX-3)
   Hidden until keyboard-focused, then pinned to the top-left so a keyboard or
   screen-reader visitor can jump past the nav on every page load.
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent, #0b3b5f);
  color: var(--on-accent, #fff);
  font: 600 14px/1 var(--font-ui, system-ui, sans-serif);
  text-decoration: none;
  transition: top .16s ease;
}
.skip-link:focus-visible,
.skip-link:focus {
  top: calc(8px + env(safe-area-inset-top, 0px));
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#hero:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}


/* ============================================================
   20) MOBILE TOUCH TARGETS
   ------------------------------------------------------------
   iOS guidance is 44pt, Android 48dp; the WCAG web floor is 24px.
   Desktop keeps its tighter 38px controls — this is phones only.
   Lives at the end of the file deliberately: these have to win over
   base rules declared thousands of lines earlier.
   ============================================================ */
@media (max-width: 768px) {
  .icon-btn { width: 44px; height: 44px; }
  .story-btn { width: 44px; height: 44px; }
  .foot nav a { display: inline-block; padding: 11px 0; }
  .research-feature-abstract > summary { padding: 13px 0; }
  .foot-socials a { width: 44px; height: 44px; }
  .skip-link { padding: 15px 18px; }
}


/* Switched-off content: kept in the HTML, never rendered (see HIDDEN notes in index.html). */
.nw-off { display: none !important; }