/* =========================================================================
   Du Hangyu — academic profile
   Built against the apple-design principles:
   §1 response · §7 spatial consistency · §11 compositor-only motion
   §12 materials & depth · §14 reduced motion · §15 typography · §16 craft
   ========================================================================= */

:root {
  /* Surfaces */
  --surface:      #fffdfd;
  --surface-tint: #f8f2f6;
  --card:         rgba(255, 255, 255, 0.88);
  --card-raised:  #ffffff;

  /* Ink — three levels, never more */
  --ink:    #1d1d1f;
  --ink-2:  #6e6e73;
  --ink-3:  #86868b;

  --hairline: rgba(0, 0, 0, 0.10);
  --accent:   #9b1649;
  --accent-2: #761038;

  /* §12 chrome material */
  --chrome:      rgba(255, 248, 251, 0.76);
  --chrome-blur: saturate(180%) blur(20px);

  /* Depth: small surfaces cast a light shadow, large ones a deeper one */
  --lift-1: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.05);
  --lift-2: 0 2px 6px rgba(0,0,0,.06), 0 18px 44px rgba(0,0,0,.09);

  /* Fixed dark tokens — used by hero/contact in both colour schemes */
  --dark-bg:  #241323;
  --dark-ink: #f5f5f7;
  --dark-ink-2: rgba(245, 245, 247, 0.66);
  --dark-hairline: rgba(255, 255, 255, 0.16);

  /* §15 — default to the platform font; it already ships optical sizing */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
          "PingFang SC", "PingFang TC", "Hiragino Sans GB", "Microsoft YaHei",
          "Microsoft JhengHei", "Apple SD Gothic Neo", "Malgun Gothic",
          "Noto Sans KR", "Noto Sans TC", sans-serif;

  --wrap: 1080px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion — mirrored curves for reversible transitions (§7) */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:  cubic-bezier(0.64, 0.39, 0.78, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:      #171018;
    --surface-tint: #211421;
    --card:         rgba(45, 29, 46, 0.88);
    --card-raised:  #352237;
    --ink:   #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #86868b;
    --hairline: rgba(255, 255, 255, 0.14);
    --accent:   #f06a9b;
    --accent-2: #ff8cb5;
    --chrome:   rgba(31, 19, 32, 0.78);
    --lift-1: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4);
    --lift-2: 0 2px 6px rgba(0,0,0,.55), 0 18px 44px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background:
    radial-gradient(90rem 55rem at 8% -10%, rgba(166, 36, 86, 0.08), transparent 62%),
    radial-gradient(70rem 48rem at 96% 12%, rgba(67, 89, 167, 0.08), transparent 64%),
    var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  /* §15 — body at 17px, comfortable leading, tracking left alone */
  font: 400 1.0625rem/1.6 var(--sans);
  letter-spacing: 0;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

.skip-link {
  position: fixed; z-index: 100; top: 0.5rem; left: 50%;
  padding: 0.6rem 1.1rem; border-radius: 980px;
  background: var(--ink); color: var(--surface);
  font-size: 0.875rem; font-weight: 500;
  transform: translate(-50%, -160%);
  transition: transform 0.24s var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* -------------------------------------------------------------------------
   §15 Typography — tracking is size-specific, never one value for all sizes
   ------------------------------------------------------------------------- */
.display {
  font-size: clamp(2.75rem, 7.4vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.032em;   /* large text needs negative tracking */
  font-weight: 600;
}
.display-sm { font-size: clamp(2.25rem, 5.4vw, 4rem); letter-spacing: -0.028em; }

.headline {
  font-size: clamp(1.875rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.021em;
  font-weight: 600;
}

.eyebrow {
  margin-bottom: 0.9rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.055em;     /* small text reads better opened up */
  text-transform: uppercase;
}

.kicker {
  color: var(--ink-3);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.lede { font-size: clamp(1.25rem, 2.1vw, 1.5rem); line-height: 1.42; letter-spacing: -0.012em; color: var(--ink); }
.section-lede { max-width: 46ch; margin-top: 1.1rem; color: var(--ink-2); font-size: 1.1875rem; }
.soft { color: var(--dark-ink-2); }

/* -------------------------------------------------------------------------
   Buttons — §1 feedback lives on the press, and it is instant
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0 1.4rem;
  border: 1px solid transparent; border-radius: 980px;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.22s var(--ease-out), transform 0.1s ease-out, border-color 0.22s var(--ease-out);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-quiet {
  color: var(--dark-ink);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.btn-quiet:hover { background: rgba(255, 255, 255, 0.24); }
.btn:active { transform: scale(0.97); }          /* §1 — on pointer-down, 100ms */

.round {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; padding: 0;
  border: 1px solid var(--hairline); border-radius: 50%;
  background: var(--card); color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.1s ease-out, opacity 0.2s var(--ease-out);
}
.round svg { width: 0.75rem; height: 1.25rem; }
.round:hover { background: var(--surface-tint); }
.round:active { transform: scale(0.92); }
.round[disabled] { opacity: 0.32; cursor: default; transform: none; }

/* -------------------------------------------------------------------------
   §12 Navigation — a translucent material with content scrolling underneath,
   plus a scroll edge effect instead of a hard 1px divider
   ------------------------------------------------------------------------- */
.nav {
  position: fixed; z-index: 60; inset: 0 0 auto;
  height: 3.25rem;
  transition: background-color 0.3s var(--ease-out);
}
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--chrome);
  -webkit-backdrop-filter: var(--chrome-blur); backdrop-filter: var(--chrome-blur);
  /* the edge fades out rather than terminating in a line */
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent);
  mask-image: linear-gradient(to bottom, #000 68%, transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.nav.is-scrolled::after { opacity: 1; }
.nav:not(.is-scrolled) { color: #fff; }
.nav:not(.is-scrolled) .nav-monogram {
  background: rgba(255, 255, 255, 0.92);
  color: #711339;
}
.nav:not(.is-scrolled) .nav-links a { color: rgba(255, 255, 255, 0.74); }
.nav:not(.is-scrolled) .nav-links a:hover,
.nav:not(.is-scrolled) .nav-links a.is-current { color: #fff; }
.nav:not(.is-scrolled) .segmented { background: rgba(255, 255, 255, 0.16); }
.nav:not(.is-scrolled) .segmented-thumb { background: rgba(255, 255, 255, 0.94); }
.nav:not(.is-scrolled) .segmented button { color: rgba(255, 255, 255, 0.72); }
.nav:not(.is-scrolled) .segmented button[aria-pressed="true"] { color: #711339; }
.nav:not(.is-scrolled) .nav-toggle { background: rgba(255, 255, 255, 0.16); }
.nav:not(.is-scrolled) .nav-toggle span { background: #fff; }

.nav-inner {
  width: min(calc(var(--wrap) + 6rem), calc(100% - 2 * var(--gutter)));
  height: 100%; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}

.nav-brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.nav-monogram {
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 0.5rem;
  background: var(--ink); color: var(--surface);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em;
}
.nav-name { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.005em; }

.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.75rem); }
.nav-links a {
  position: relative;
  color: var(--ink-2);
  font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.005em;
  transition: color 0.2s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-current { color: var(--ink); font-weight: 500; }

.nav-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Segmented control — the thumb slides, it does not blink between states */
.segmented {
  position: relative;
  display: flex; align-items: center;
  padding: 2px; border-radius: 980px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.segmented-thumb {
  position: absolute; z-index: 0; top: 2px; left: 0;
  height: calc(100% - 4px);
  border-radius: 980px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
  transition: transform 0.34s var(--ease-out), width 0.34s var(--ease-out);
}
.segmented button {
  position: relative; z-index: 1;
  padding: 0.3rem 0.6rem; border: 0; border-radius: 980px;
  background: none; color: var(--ink-2);
  font-size: 0.6875rem; font-weight: 600; line-height: 1.2;
  cursor: pointer;
  transition: color 0.24s var(--ease-out), transform 0.1s ease-out;
}
.segmented button:active { transform: scale(0.94); }
.segmented button[aria-pressed="true"] { color: var(--ink); }

.nav-toggle {
  display: none; place-items: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 0.875rem; height: 1.2px; margin: 2.5px 0;
  background: var(--ink);
  transition: transform 0.32s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

/* §7 the sheet emerges from the button that opened it, and leaves the same way
   §12 it materialises — blur and scale animate together, not a plain fade */
.sheet {
  position: fixed; z-index: 55; inset: 3.25rem 0 auto;
  padding: 1.25rem var(--gutter) 2rem;
  background: var(--chrome);
  -webkit-backdrop-filter: saturate(180%) blur(0px); backdrop-filter: saturate(180%) blur(0px);
  border-bottom: 1px solid var(--hairline);
  transform-origin: top right;
  transform: scale(0.94) translateY(-0.75rem);
  opacity: 0; visibility: hidden;
  transition:
    opacity 0.26s var(--ease-in),
    transform 0.26s var(--ease-in),
    backdrop-filter 0.26s var(--ease-in),
    visibility 0s linear 0.26s;
}
.sheet.is-open {
  opacity: 1; visibility: visible;
  transform: scale(1) translateY(0);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  transition:
    opacity 0.3s var(--ease-out),
    transform 0.3s var(--ease-out),
    backdrop-filter 0.3s var(--ease-out),
    visibility 0s;
}
.sheet-links { display: grid; gap: 0.25rem; }
.sheet-links a {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 1.375rem; font-weight: 500; letter-spacing: -0.018em;
}
.sheet-links a:last-child { border-bottom: 0; }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8rem 0 4.5rem;
  background: linear-gradient(135deg, #5e1838 0%, #2d234c 52%, #20435c 100%);
  color: var(--dark-ink);
  overflow: hidden;
}
/* The poster is a CSS background so the hero has an image the moment paint
   happens — and still does under reduced motion, where no video is loaded. */
.hero-media {
  position: absolute; inset: 0; z-index: -3;
  /* the flat wash matches the video's brightness filter, so the poster and the
     film that replaces it sit at the same exposure — no flash on load */
  background:
    linear-gradient(rgba(77, 19, 48, 0.22), rgba(26, 35, 65, 0.28)),
    url("./assets/campus-film-poster.jpg") center / cover no-repeat,
    #3a2447;
}
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0; pointer-events: none;
  transform: scale(1.025);
  filter: saturate(1.16) contrast(0.94) brightness(0.78);
}
.hero-veil {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(75% 70% at 12% 18%, rgba(181, 34, 85, 0.58), transparent 66%),
    radial-gradient(70% 72% at 88% 18%, rgba(55, 88, 164, 0.48), transparent 68%),
    radial-gradient(68% 62% at 72% 94%, rgba(224, 145, 65, 0.28), transparent 70%),
    linear-gradient(104deg, rgba(43, 11, 32, 0.72) 0%, rgba(45, 28, 75, 0.42) 48%, rgba(24, 49, 66, 0.26) 100%),
    linear-gradient(0deg, rgba(39, 15, 36, 0.70) 0%, transparent 44%);
  -webkit-backdrop-filter: saturate(118%) blur(1.5px);
  backdrop-filter: saturate(118%) blur(1.5px);
}
.hero-body { position: relative; }
.hero-eyebrow {
  margin-bottom: 1.25rem;
  color: var(--dark-ink-2);
  font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.hero h1 { max-width: 16ch; }
.hero-lede {
  max-width: 52ch; margin-top: 1.6rem;
  color: var(--dark-ink-2);
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem); line-height: 1.5;
}
.hero-role {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 1.5rem; margin-top: 1.4rem;
  color: var(--dark-ink-2); font-size: 0.9375rem;
}
.live-dot {
  width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
  background: #30d158; box-shadow: 0 0 0 4px rgba(48,209,88,.16);
}
.role-rotator { transition: opacity 0.26s var(--ease-out); }
.role-rotator.is-swapping { opacity: 0; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-affil {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--dark-hairline);
  color: var(--dark-ink-2); font-size: 0.875rem;
}

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.75rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--dark-ink-2);
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  transform: translateX(-50%);
}
.hero-scroll svg { width: 0.75rem; height: 1.1rem; animation: nudge 2.6s var(--ease-out) infinite; }
@keyframes nudge {
  0%, 62%, 100% { transform: translateY(0); opacity: .55; }
  30%           { transform: translateY(4px); opacity: 1; }
}

/* -------------------------------------------------------------------------
   Bands
   ------------------------------------------------------------------------- */
.band { padding: clamp(5rem, 11vw, 8.5rem) 0; }
.band-plain {
  background:
    radial-gradient(55rem 32rem at 0% 0%, rgba(161, 35, 85, 0.045), transparent 66%),
    var(--surface);
}
.band-tint {
  background:
    radial-gradient(50rem 34rem at 92% 12%, rgba(61, 93, 173, 0.075), transparent 68%),
    radial-gradient(45rem 30rem at 8% 92%, rgba(182, 45, 94, 0.07), transparent 70%),
    var(--surface-tint);
}
.band-dark {
  background:
    radial-gradient(60rem 40rem at 12% 18%, rgba(176, 36, 83, 0.60), transparent 64%),
    radial-gradient(52rem 38rem at 90% 25%, rgba(53, 89, 160, 0.50), transparent 66%),
    radial-gradient(48rem 34rem at 65% 110%, rgba(226, 147, 67, 0.26), transparent 70%),
    linear-gradient(135deg, #3b1634 0%, #282243 54%, #173c50 100%);
  color: var(--dark-ink);
}

.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.split-body { display: grid; gap: 1.4rem; }
.split-body p:not(.lede) { color: var(--ink-2); }
.split-sticky { position: sticky; top: 7rem; display: grid; gap: 1.1rem; }
.split-sticky p { color: var(--ink-2); }

.meta-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0.75rem; padding-top: 1.75rem; border-top: 1px solid var(--hairline); }
.meta-pairs dt { margin-bottom: 0.3rem; color: var(--ink-3); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.meta-pairs dd { font-size: 0.9375rem; font-weight: 500; }

.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: clamp(3rem, 7vw, 5rem);
  border: 1px solid var(--hairline); border-radius: 1.125rem;
  background: var(--hairline); overflow: hidden;
}
.stat-row li {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
  min-height: 9.5rem; padding: 1.5rem;
  background: var(--surface);
}
.stat-row strong {
  display: flex; align-items: baseline;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 600; letter-spacing: -0.03em;
}
.stat-row strong > span[aria-hidden="true"] { margin-left: 0.08em; font-size: 0.45em; letter-spacing: 0; }
.stat-row li > span:last-child { color: var(--ink-2); font-size: 0.875rem; line-height: 1.45; }

/* Bento tiles */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tile {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline); border-radius: 1.25rem;
  background: var(--card);
  box-shadow: var(--lift-1);
  transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out);
  will-change: transform;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.tile-index {
  position: absolute; top: 1.25rem; right: 1.5rem;
  color: var(--ink-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
}
.tile h3 { max-width: 18ch; font-size: clamp(1.25rem, 2.1vw, 1.625rem); letter-spacing: -0.018em; }
.tile p { margin-top: 0.75rem; color: var(--ink-2); font-size: 0.9375rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.chips li {
  padding: 0.28rem 0.65rem;
  border-radius: 980px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-2);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
}

/* Feature project */
.feature {
  display: grid; grid-template-columns: 1.05fr 1fr;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: 1.5rem; overflow: hidden;
  background: linear-gradient(135deg, #3b1734 0%, #272544 58%, #174154 100%);
  color: var(--dark-ink);
  box-shadow: var(--lift-2);
}
.feature-visual {
  position: relative; min-height: 22rem; overflow: hidden;
  background:
    radial-gradient(90% 70% at 28% 38%, rgba(231, 78, 128, 0.46), transparent 60%),
    radial-gradient(72% 82% at 82% 18%, rgba(66, 122, 194, 0.42), transparent 66%),
    radial-gradient(58% 62% at 68% 88%, rgba(226, 151, 72, 0.28), transparent 68%),
    linear-gradient(150deg, #6f2347, #27375f 58%, #17394b);
}
.feature-visual::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(80% 80% at 40% 45%, #000, transparent);
  mask-image: radial-gradient(80% 80% at 40% 45%, #000, transparent);
}
.feature-visual svg {
  position: absolute; inset: auto 0 0; width: 100%; height: 68%;
  stroke: #5ac8fa; stroke-width: 2; opacity: .8;
}
.feature-visual svg path:last-child { stroke: #0a84ff; opacity: .5; }
.pulse { position: absolute; border: 1px solid rgba(90,200,250,.42); border-radius: 50%; animation: breathe 6s var(--ease-out) infinite; }
.pulse-a { width: 11rem; height: 11rem; left: 22%; top: 22%; }
.pulse-b { width: 19rem; height: 19rem; left: 8%; top: 6%; animation-delay: -2.4s; }
@keyframes breathe { 50% { transform: scale(1.05); opacity: .4; } }
.node { position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #5ac8fa; box-shadow: 0 0 14px #5ac8fa; }
.node-a { left: 38%; top: 44%; } .node-b { left: 66%; top: 58%; } .node-c { left: 74%; top: 28%; }

.feature-body { padding: clamp(1.75rem, 3.6vw, 3rem); display: grid; align-content: center; gap: 0.85rem; }
.feature-body .kicker { color: rgba(245,245,247,.6); }
.feature-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.14; letter-spacing: -0.022em; }
.feature-body > p:not(.kicker):not(.feature-note) { color: var(--dark-ink-2); font-size: 1rem; }
.feature-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 0.75rem; padding-top: 1.4rem; border-top: 1px solid var(--dark-hairline); }
.feature-metrics strong { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; }
.feature-metrics span { color: var(--dark-ink-2); font-size: 0.8125rem; }
.feature-note { color: rgba(245,245,247,.5); font-size: 0.8125rem; }

.card-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.card {
  display: grid; align-content: start; gap: 0.7rem;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--hairline); border-radius: 1.25rem;
  background: var(--card);
  box-shadow: var(--lift-1);
  transition: transform 0.34s var(--ease-out), box-shadow 0.34s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }
.card h3 { font-size: 1.25rem; letter-spacing: -0.016em; }
.card p:not(.kicker) { color: var(--ink-2); font-size: 0.9375rem; }

/* -------------------------------------------------------------------------
   Publication rail — gesture-driven, so all motion lives in JS springs (§3)
   ------------------------------------------------------------------------- */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.rail-controls { display: flex; gap: 0.5rem; }

.rail {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;                 /* vertical scroll still belongs to the page */
  -webkit-user-select: none; user-select: none;
}
.rail.is-dragging { cursor: grabbing; }
.rail-track { display: flex; gap: 1.25rem; will-change: transform; }

.paper {
  flex: 0 0 clamp(17rem, 30vw, 22rem);
  display: grid; align-content: start; gap: 0.7rem;
  padding: 1.75rem;
  border: 1px solid var(--hairline); border-radius: 1.25rem;
  background: var(--card);
  box-shadow: var(--lift-1);
}
.paper-year { color: var(--accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.045em; }
.paper h3 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.paper-venue { color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; }
.paper-note {
  align-self: end; margin-top: 0.4rem; padding-top: 0.85rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-3); font-size: 0.8125rem;
}
.paper-note.is-award { color: var(--accent); font-weight: 500; }
.rail-hint { margin-top: 1.25rem; color: var(--ink-3); font-size: 0.8125rem; }

/* Timeline */
.track { position: relative; display: grid; gap: 2.25rem; padding-left: 1.75rem; }
.track::before {
  content: ""; position: absolute; left: 0.3125rem; top: 0.5rem; bottom: 0.5rem;
  width: 1px; background: linear-gradient(var(--accent), var(--hairline) 55%);
}
.stop { position: relative; display: grid; gap: 0.4rem; }
.stop::before {
  content: ""; position: absolute; left: -1.75rem; top: 0.45rem;
  width: 0.6875rem; height: 0.6875rem; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--surface);
}
.stop-date { color: var(--ink-3); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; }
.stop h3 { font-size: 1.1875rem; letter-spacing: -0.014em; }
.stop-org { color: var(--accent); font-size: 0.875rem; font-weight: 500; }
.stop p:last-child { color: var(--ink-2); font-size: 0.9375rem; }

/* Recognition */
.honor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.honor {
  display: grid; align-content: start; gap: 0.55rem;
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border: 1px solid var(--hairline); border-radius: 1.25rem;
  background: var(--card);
}
.honor-year { color: var(--ink-3); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; }
.honor h3 { font-size: 1.1875rem; line-height: 1.28; letter-spacing: -0.014em; }
.honor p:last-child { color: var(--ink-2); font-size: 0.9375rem; }

/* Contact */
.contact-wrap { text-align: center; display: grid; justify-items: center; }
.contact-wrap .eyebrow { color: #ffd3e2; }
.contact-lede { max-width: 54ch; margin-top: 1.4rem; color: var(--dark-ink-2); font-size: 1.125rem; }
.contact-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 3rem; text-align: left; }
.contact-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 4.75rem; padding: 1.1rem 1.4rem;
  border: 1px solid var(--dark-hairline); border-radius: 1rem;
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
  transition: background-color 0.26s var(--ease-out), transform 0.26s var(--ease-out), border-color 0.26s var(--ease-out);
}
.contact-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.contact-card:active { transform: scale(0.985); transition-duration: 0.1s; }
.contact-card span { color: var(--dark-ink-2); font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; }
.contact-card strong { font-size: 0.9375rem; font-weight: 500; text-align: right; word-break: break-word; }
.contact-foot { margin-top: 2.5rem; color: rgba(245,245,247,.45); font-size: 0.875rem; }

.foot { padding: 1.75rem 0; background: var(--surface); border-top: 1px solid var(--hairline); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--ink-3); font-size: 0.8125rem; }
.foot-inner a { transition: color 0.2s var(--ease-out); }
.foot-inner a:hover { color: var(--ink); }

/* Entrance — non-gesture, so a plain transition is fine.
   Scoped to .js: without the script there is nothing to add .is-in, and the
   page must never be stranded invisible. */
.js .rise { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.js .rise.is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   Adaptation
   ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .split { grid-template-columns: 1fr; }
  .split-sticky { position: static; }
  .feature { grid-template-columns: 1fr; }
  .card-row { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav-name { display: none; }
  .segmented button { padding: 0.3rem 0.45rem; font-size: 0.625rem; }
  .hero { padding-top: 7rem; }
  .hero-scroll { display: none; }
  .bento, .honor-grid, .contact-grid, .meta-pairs { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-row li { min-height: 0; }
  .feature-metrics { grid-template-columns: 1fr; }
  .rail-head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .foot-inner { flex-direction: column; }
}

/* §14 — reduced motion means a gentler equivalent, not the absence of feedback */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.14s !important;
  }
  .rise { transform: none; }                    /* cross-fade only, no travel */
  .tile:hover, .card:hover, .contact-card:hover { transform: none; }
  .sheet { transform: none; }
  .sheet.is-open { transform: none; }
  .hero-media { display: none; }                 /* no full-viewport moving background */
}

/* §14 — frostier, not transparent */
@media (prefers-reduced-transparency: reduce) {
  .nav::after { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; -webkit-mask-image: none; mask-image: none; border-bottom: 1px solid var(--hairline); }
  .nav:not(.is-scrolled) { color: var(--ink); }
  .nav:not(.is-scrolled) .nav-monogram { background: var(--ink); color: var(--surface); }
  .nav:not(.is-scrolled) .nav-links a,
  .nav:not(.is-scrolled) .segmented button { color: var(--ink-2); }
  .nav:not(.is-scrolled) .nav-links a:hover,
  .nav:not(.is-scrolled) .nav-links a.is-current,
  .nav:not(.is-scrolled) .segmented button[aria-pressed="true"] { color: var(--ink); }
  .nav:not(.is-scrolled) .segmented,
  .nav:not(.is-scrolled) .nav-toggle { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .nav:not(.is-scrolled) .segmented-thumb { background: var(--card); }
  .nav:not(.is-scrolled) .nav-toggle span { background: var(--ink); }
  .sheet { background: var(--surface); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .btn-quiet { background: rgba(255,255,255,.2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-veil, .contact-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* §14 — near-solid backgrounds with a defined, contrasting border */
@media (prefers-contrast: more) {
  :root { --hairline: rgba(0,0,0,.4); --ink-2: #3a3a3c; --ink-3: #4a4a4d; }
  .tile, .card, .honor, .paper, .stat-row { border-width: 1.5px; }
  .nav-links a { color: var(--ink); }
}