/* ==========================================================================
   Team Gene — design system
   Brand DNA kept from the original: forest green, clay, warm paper, the
   circled serif G. Everything else is rebuilt: fluid type, full-width grid,
   motion system, dark theme.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --paper: #f7f5ef;
  --paper-sunk: #efece3;
  --surface: #fffdf9;
  --surface-2: #faf8f2;
  --ink: #14322a;
  --ink-2: #3d5850;
  --ink-3: #5a6962; /* ≥4.5:1 on paper, sage and clay-soft backgrounds */
  --line: rgba(20, 50, 42, .11);
  --line-2: rgba(20, 50, 42, .2);

  --forest: #163f35;
  --forest-2: #1e4d41;
  --forest-deep: #0f2b24;
  --on-forest: #f3efe4;
  --on-forest-2: rgba(243, 239, 228, .7);
  --on-forest-3: rgba(243, 239, 228, .58); /* ≥4.5:1 for small labels on forest */
  --on-forest-line: rgba(243, 239, 228, .14);

  --clay: #9e4d2c; /* text accent: ≥4.5:1 on paper, sage and clay-soft chips */
  --clay-fill: #b35a34;
  --clay-fill-hover: #9d4b29;
  --clay-soft: #f4e4d8;
  --peach: #e9a882;
  --sage: #e7ece4;
  --sage-2: #d8e1d5;
  --live: #3f9b6f;

  --shadow-sm: 0 1px 2px rgba(15, 43, 36, .06), 0 1px 1px rgba(15, 43, 36, .03);
  --shadow-md: 0 14px 34px -14px rgba(15, 43, 36, .2), 0 3px 8px -3px rgba(15, 43, 36, .06);
  --shadow-lg: 0 40px 80px -28px rgba(15, 43, 36, .32), 0 10px 24px -12px rgba(15, 43, 36, .12);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --font-sans: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  /* Team Gene Serif is the site's own subset of Noto Serif SC (fonts.css); any
     character missing from it comes from the Noto Serif SC slices. */
  --font-serif: "Instrument Serif", "Team Gene Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-cn: "Team Gene Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.02rem, .98rem + .2vw, 1.125rem);
  --fs-lg: clamp(1.2rem, 1.08rem + .5vw, 1.45rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  --fs-2xl: clamp(1.95rem, 1.45rem + 2vw, 3.1rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.9rem);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --header-h: 72px;
  --header-offset: var(--header-h);

  /* Glass: translucent chrome that floats over content (header, toolbars,
     dialogs, toasts). Components use only the --glass-* names; the rgb
     channels let one definition follow both themes. Lighter blur for touch
     screens and solid fallbacks follow the dark theme below. */
  --paper-rgb: 247 245 239;
  --surface-rgb: 255 253 249;
  --ink-rgb: 20 50 42;
  --forest-deep-rgb: 15 43 36;
  --glass-bar: rgb(var(--paper-rgb) / .76);
  --glass-bar-dark: rgb(var(--forest-deep-rgb) / .74);
  --glass-panel: rgb(var(--surface-rgb) / .74);
  --glass-thick: rgb(var(--surface-rgb) / .9);
  --glass-thin: rgb(var(--surface-rgb) / .55);
  --glass-ink: rgb(var(--ink-rgb) / .84);
  --glass-line: rgb(var(--ink-rgb) / .1);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .7);
  --glass-shadow: 0 1px 1px rgb(15 43 36 / .04), 0 14px 34px -14px rgb(15 43 36 / .24), 0 36px 72px -36px rgb(15 43 36 / .22);
  --glass-shadow-sm: 0 1px 2px rgb(15 43 36 / .05), 0 10px 26px -16px rgb(15 43 36 / .3);
  --glass-blur: saturate(180%) blur(20px);
  --glass-blur-lite: saturate(160%) blur(10px);
  --glass-scrim: rgb(8 20 16 / .44);
  --glass-scrim-blur: blur(6px);
  /* Segmented controls: raised thumb on a sunken track */
  --seg-thumb-bg: var(--surface);
  --seg-thumb: 0 1px 2px rgb(15 43 36 / .08), 0 4px 12px -4px rgb(15 43 36 / .16), 0 0 0 1px rgb(15 43 36 / .04);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0c1512;
  --paper-sunk: #09110e;
  --surface: #121e1a;
  --surface-2: #16241f;
  --ink: #e8eee9;
  --ink-2: #b6c4bd;
  --ink-3: #8a9a92;
  --line: rgba(232, 238, 233, .09);
  --line-2: rgba(232, 238, 233, .17);
  --forest: #245a4b;
  --forest-2: #2b6655;
  --forest-deep: #081a15;
  --clay: #e39371;
  --clay-fill: #b55b34; /* white button text ≥4.5:1 */
  --clay-fill-hover: #a5522f;
  --clay-soft: rgba(227, 147, 113, .14);
  --sage: #14231e;
  --sage-2: #1b2e28;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 14px 34px -14px rgba(0, 0, 0, .6), 0 3px 8px -3px rgba(0, 0, 0, .3);
  --shadow-lg: 0 40px 80px -28px rgba(0, 0, 0, .75);
  --paper-rgb: 12 21 18;
  --surface-rgb: 18 30 26;
  --ink-rgb: 232 238 233;
  --forest-deep-rgb: 8 26 21;
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .06);
  --glass-shadow: 0 1px 1px rgb(0 0 0 / .3), 0 14px 34px -14px rgb(0 0 0 / .62), 0 36px 72px -36px rgb(0 0 0 / .5);
  --glass-shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 10px 26px -14px rgb(0 0 0 / .55);
  --glass-scrim: rgb(0 0 0 / .5);
  --seg-thumb-bg: rgb(255 255 255 / .1);
  --seg-thumb: 0 1px 2px rgb(0 0 0 / .35), 0 4px 12px -4px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0c1512;
    --paper-sunk: #09110e;
    --surface: #121e1a;
    --surface-2: #16241f;
    --ink: #e8eee9;
    --ink-2: #b6c4bd;
    --ink-3: #8a9a92;
    --line: rgba(232, 238, 233, .09);
    --line-2: rgba(232, 238, 233, .17);
    --forest: #245a4b;
    --forest-2: #2b6655;
    --forest-deep: #081a15;
    --clay: #e39371;
    --clay-fill: #b55b34; /* white button text ≥4.5:1 */
    --clay-fill-hover: #a5522f;
    --clay-soft: rgba(227, 147, 113, .14);
    --sage: #14231e;
    --sage-2: #1b2e28;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 14px 34px -14px rgba(0, 0, 0, .6), 0 3px 8px -3px rgba(0, 0, 0, .3);
    --shadow-lg: 0 40px 80px -28px rgba(0, 0, 0, .75);
    --paper-rgb: 12 21 18;
    --surface-rgb: 18 30 26;
    --ink-rgb: 232 238 233;
    --forest-deep-rgb: 8 26 21;
    --glass-edge: inset 0 1px 0 rgb(255 255 255 / .06);
    --glass-shadow: 0 1px 1px rgb(0 0 0 / .3), 0 14px 34px -14px rgb(0 0 0 / .62), 0 36px 72px -36px rgb(0 0 0 / .5);
    --glass-shadow-sm: 0 1px 2px rgb(0 0 0 / .3), 0 10px 26px -14px rgb(0 0 0 / .55);
    --glass-scrim: rgb(0 0 0 / .5);
    --seg-thumb-bg: rgb(255 255 255 / .1);
    --seg-thumb: 0 1px 2px rgb(0 0 0 / .35), 0 4px 12px -4px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .06);
  }
}

/* Phones and touch screens: denser tint, lighter blur, no blur behind
   dialogs. */
@media (max-width: 760px), (pointer: coarse) {
  :root {
    --glass-bar: rgb(var(--paper-rgb) / .86);
    --glass-bar-dark: rgb(var(--forest-deep-rgb) / .86);
    --glass-panel: rgb(var(--surface-rgb) / .88);
    --glass-thick: rgb(var(--surface-rgb) / .96);
    --glass-blur: saturate(150%) blur(12px);
    --glass-blur-lite: saturate(140%) blur(8px);
    --glass-scrim-blur: none;
  }
}
/* No backdrop blur available: solid surfaces keep text readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bar: rgb(var(--paper-rgb) / .97);
    --glass-bar-dark: var(--forest-deep);
    --glass-panel: var(--surface);
    --glass-thick: var(--surface);
    --glass-thin: var(--surface);
    --glass-ink: var(--ink);
    --glass-scrim: rgb(8 20 16 / .6);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bar: var(--paper);
    --glass-bar-dark: var(--forest-deep);
    --glass-panel: var(--surface);
    --glass-thick: var(--surface);
    --glass-thin: var(--surface);
    --glass-ink: var(--ink);
    --glass-scrim: rgb(8 20 16 / .6);
    --glass-blur: none;
    --glass-blur-lite: none;
    --glass-scrim-blur: none;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 28px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-autospace: normal;
  overflow-x: clip;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}

/* Paper grain — one fixed layer, no repaint on scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .035; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .035; } }

main { flex: 1; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; text-wrap: balance; }
p { text-wrap: pretty; }
/* Chinese headings and labels break only where the templates put <wbr>
   (between words); overflow-wrap still wraps a run longer than the line. */
[data-ph] { word-break: keep-all; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

::selection { background: var(--clay-soft); color: var(--ink); }

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  transform: translateY(-160%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

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

/* ---------- Layout primitives ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2 * var(--gutter), 860px); margin-inline: auto; }

.section { padding-block: clamp(72px, 9vw, 136px); }
.section + .section { padding-top: 0; }
.section.section--tint { background: var(--sage); padding-top: clamp(72px, 9vw, 136px); }
.section--tint + .section { padding-top: clamp(72px, 9vw, 136px); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 40px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  letter-spacing: .01em;
  font-synthesis: none;
}
.section-head__aside {
  max-width: 30em;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-align: right;
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head__aside { text-align: left; }
}

/* ---------- Atoms ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--clay);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
}
.eyebrow--plain::before { display: none; }
/* Chinese text in the label style (a teacher's title): the mono 11.5px caps are for English. */
.eyebrow--cn { font-family: var(--font-sans); font-size: 13px; letter-spacing: .12em; }
.eyebrow .sep { opacity: .45; }

.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn {
  --btn-bg: var(--forest);
  --btn-fg: var(--on-forest);
  --btn-bd: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out), transform .5s var(--ease-spring), box-shadow .3s var(--ease-out);
}
.btn .icon { font-size: 17px; transition: transform .45s var(--ease-out); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn:hover .icon--right { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn--clay { --btn-bg: var(--clay-fill); --btn-fg: #fff; box-shadow: 0 10px 24px -12px rgba(179, 90, 52, .7); }
.btn--clay:hover { --btn-bg: var(--clay-fill-hover); }
.btn--forest:hover { --btn-bg: var(--forest-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--surface); --btn-bd: var(--ink-3); }
.btn--ghost-light {
  --btn-bg: rgb(243 239 228 / .06);
  --btn-fg: var(--on-forest);
  --btn-bd: var(--on-forest-line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
}
.btn--ghost-light:hover { --btn-bg: rgb(243 239 228 / .12); --btn-bd: var(--on-forest-3); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 14px; gap: 8px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  background: linear-gradient(currentColor 0 0) left bottom / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .45s var(--ease-out), color .3s;
}
.link-arrow .icon { transition: transform .45s var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; color: var(--clay); }
.link-arrow:hover .icon { transform: translateX(4px); }
/* Touch screens: short text links get a ~44px hit area without moving the layout. */
@media (pointer: coarse) {
  .link-arrow, .crumbs a, .footer-bottom a, .footer-bottom button { position: relative; }
  .link-arrow::after, .crumbs a::after, .footer-bottom a::after, .footer-bottom button::after { content: ""; position: absolute; inset: -11px -8px; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}
.chip--clay { background: var(--clay-soft); color: var(--clay); }
.chip--line { background: transparent; border: 1px solid var(--line-2); }
.chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.live-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  flex: none;
}
.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--glass-edge);
}

/* Spotlight that follows the pointer (set --mx/--my from JS) */
.spot { isolation: isolate; }
.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--clay) 11%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
}
.spot:hover::after { opacity: 1; }

/* Image frames with graceful fallback to initials */
.frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--sage-2), var(--sage));
}
.frame::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-family: var(--font-cn);
  font-size: 1.6em;
}
.frame img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease-out), transform 1s var(--ease-out), filter .7s var(--ease-out);
}
.frame img.is-loaded { opacity: 1; }
.frame img.is-broken { display: none; }
/* No photo yet: the monogram tones of the members page and a faint brand orbit,
   rather than a flat tile. */
.frame--empty {
  --a: #d8e1d5; --b: #eef2ea; --c: #163f35;
  --orbit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='.45'%3E%3Ccircle cx='50' cy='50' r='33'/%3E%3Cellipse cx='50' cy='50' rx='47' ry='15' transform='rotate(-28 50 50)'/%3E%3Ccircle cx='50' cy='50' r='21' stroke-dasharray='1 2.4'/%3E%3C/svg%3E");
  background: radial-gradient(120% 95% at 28% 12%, var(--b), var(--a));
}
.frame--empty.t1 { --a: #f0d6c6; --b: #fbeee5; --c: #8f4222; }
.frame--empty.t2 { --a: #cfdcd6; --b: #eaf1ed; --c: #1e4d41; }
.frame--empty.t3 { --a: #e3dcc9; --b: #f6f2e7; --c: #5a4a2b; }
:root[data-theme="dark"] .frame--empty { --a: #1f3a31; --b: #2a4a3f; --c: #cfe2d7; }
:root[data-theme="dark"] .frame--empty.t1 { --a: #4a2c1f; --b: #5d3a29; --c: #f2c8b2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .frame--empty { --a: #1f3a31; --b: #2a4a3f; --c: #cfe2d7; }
  :root:not([data-theme="light"]) .frame--empty.t1 { --a: #4a2c1f; --b: #5d3a29; --c: #f2c8b2; }
}
.frame--empty::before { z-index: 1; color: var(--c); font-weight: 600; letter-spacing: .06em; }
.frame--empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  opacity: .14;
  -webkit-mask: var(--orbit) center / 88% no-repeat;
  mask: var(--orbit) center / 88% no-repeat;
}
html:not(.js) .frame img { opacity: 1; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--ink);
  view-transition-name: site-header;
  /* The blur sits on the header itself: view-transition-name makes the header a
     backdrop root, so a blur on ::before would only see the header's own content. */
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform .5s var(--ease-out), color .4s var(--ease-out), -webkit-backdrop-filter .4s var(--ease-out), backdrop-filter .4s var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glass-bar);
  border-bottom: 1px solid transparent;
  transition: opacity .4s var(--ease-out), border-color .4s var(--ease-out), background-color .4s, box-shadow .4s var(--ease-out);
}
.site-header.is-scrolled::before { border-color: var(--glass-line); box-shadow: 0 12px 32px -24px rgb(0 0 0 / .35); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.on-dark { color: var(--on-forest); }
.site-header.on-dark:not(.is-scrolled) { -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.on-dark::before { opacity: 0; }
/* Scrolling within the dark hero: a dark glass bar keeps the header legible over the hero content. */
.site-header.on-dark.is-scrolled::before { opacity: 1; background: var(--glass-bar-dark); border-color: var(--on-forest-line); box-shadow: none; }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  flex: none;
}
.brand__mark { width: 38px; height: 38px; flex: none; overflow: visible; }
.brand__mark .ring { stroke: currentColor; opacity: .55; }
.brand__mark .orbit {
  stroke: var(--clay);
  transform-origin: 20px 20px;
  transition: transform 1.2s var(--ease-out);
}
.site-header.on-dark .brand__mark .orbit { stroke: var(--peach); }
.brand:hover .brand__mark .orbit { transform: rotate(180deg); }
.brand__mark text { font-family: "Instrument Serif", Georgia, serif; font-style: italic; fill: currentColor; }
.brand__text { display: grid; line-height: 1.15; }
.brand__name { font-size: 16px; font-weight: 600; letter-spacing: .16em; }
.brand__sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  opacity: .7;
}

.nav { position: relative; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 36px;
  width: 0;
  border-radius: 999px;
  background: var(--glass-thin);
  box-shadow: inset 0 0 0 1px var(--glass-line), var(--glass-edge);
  opacity: 0;
  transform: translateY(-50%);
  transition: left .45s var(--ease-out), width .45s var(--ease-out), opacity .3s, background-color .3s;
  pointer-events: none;
}
.site-header.on-dark .nav__pill { background: rgb(243 239 228 / .1); box-shadow: inset 0 0 0 1px rgb(243 239 228 / .08), inset 0 1px 0 rgb(255 255 255 / .1); }
.nav__link {
  position: relative;
  z-index: 1;
  display: block;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 14.5px;
  line-height: 22px;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: .72;
  transition: opacity .3s;
}
.nav__link:hover, .nav__link[aria-current="page"] { opacity: 1; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--clay);
}
.site-header.on-dark .nav__link[aria-current="page"]::after { background: var(--peach); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.site-header .btn--mail {
  --btn-bg: var(--glass-thin);
  --btn-fg: currentColor;
  --btn-bd: var(--line-2);
}
.site-header .btn--ghost { --btn-bg: var(--glass-thin); }
.site-header .btn--mail, .site-header .btn--ghost { box-shadow: var(--glass-edge); }
.site-header .btn--mail:hover, .site-header .btn--ghost:hover { --btn-bg: var(--surface); }
.site-header.on-dark .btn--mail { --btn-bg: rgb(243 239 228 / .06); --btn-bd: var(--on-forest-line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.site-header.on-dark .btn--mail:hover { --btn-bg: rgb(243 239 228 / .12); }
.site-header .btn--mail[aria-current="page"] {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  /* --glass-edge is a bright top line; on this filled pill it reads as the fill sinking below a gap. */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--glass-thin);
  box-shadow: var(--glass-edge);
  transition: background-color .3s, border-color .3s, box-shadow .3s, transform .5s var(--ease-spring);
}
.site-header.on-dark .icon-btn { border-color: var(--on-forest-line); background: rgb(243 239 228 / .06); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.icon-btn:hover { background: var(--surface); }
.site-header.on-dark .icon-btn:hover { background: rgb(243 239 228 / .12); }
.icon-btn:active { transform: scale(.92); }
.icon-btn .icon { font-size: 18px; }

.theme-toggle .icon { position: absolute; transition: transform .6s var(--ease-out), opacity .4s; }
.theme-toggle .i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { opacity: 1; transform: none; }
}

.menu-toggle { display: none; }
.menu-toggle span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  margin-left: -8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-open .menu-toggle span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { top: 19px; transform: rotate(-45deg); }

@media (max-width: 1180px) {
  .nav, .site-header .btn--mail { display: none; }
  .menu-toggle { display: grid; }
}
@media (max-width: 420px), (min-width: 1181px) and (max-width: 1360px) {
  .brand__sub { display: none; }
}

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  background: var(--forest-deep);
  color: var(--on-forest);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .7s var(--ease-out), visibility 0s .7s;
}
.menu-open .menu {
  clip-path: inset(0);
  visibility: visible;
  transition: clip-path .7s var(--ease-out), visibility 0s;
}
.menu__list { display: grid; gap: 2px; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--on-forest-line);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: 0s;
}
.menu-open .menu__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(120ms + var(--i) * 45ms);
}
.menu__num { font-family: var(--font-mono); font-size: 11px; color: var(--on-forest-3); width: 22px; }
.menu__label { font-family: var(--font-cn); font-size: clamp(24px, 6.5vw, 34px); font-weight: 600; }
.menu__en { margin-left: auto; font-family: "Instrument Serif", serif; font-style: italic; font-size: 17px; color: var(--on-forest-3); }
.menu__link[aria-current="page"] .menu__label { color: var(--peach); }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 32px;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.menu-open .menu__foot { opacity: 1; transition-delay: .5s; }
.menu-open { overflow: hidden; }
@media (min-width: 1181px) { .menu { display: none; } }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  min-height: min(calc(100svh - 56px), 900px);
  display: grid;
  grid-template-rows: 1fr auto;
  background:
    radial-gradient(60% 70% at 88% 92%, rgba(201, 110, 70, .22), transparent 70%),
    radial-gradient(50% 60% at 8% 0%, rgba(120, 170, 145, .16), transparent 70%),
    var(--forest-deep);
  color: var(--on-forest);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--on-forest-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--on-forest-line) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: -1px -1px;
  opacity: .35;
  mask-image: radial-gradient(80% 70% at 70% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 70% at 70% 45%, #000 20%, transparent 75%);
}
.hero__canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 56%;
  height: 100%;
  mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 78%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 78%, transparent 96%);
}
.hero__inner {
  display: grid;
  align-content: center;
  padding-block: clamp(56px, 8vw, 96px) clamp(96px, 10vw, 140px);
}
.hero__content { max-width: 640px; }
.hero .eyebrow { color: var(--peach); }
.hero__title {
  font-family: var(--font-cn);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: .03em;
  margin-bottom: 28px;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.14em; }
.hero__title .line > span { display: inline-block; }
.hero__title em {
  position: relative;
  font-style: normal;
  color: var(--peach);
}
.hero__title em svg {
  position: absolute;
  left: -4%;
  bottom: -.12em;
  width: 108%;
  height: .32em;
  overflow: visible;
}
.hero__title em path {
  fill: none;
  stroke: var(--peach);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: .8;
}
.hero__lede {
  max-width: 32em;
  margin-bottom: 36px;
  color: var(--on-forest-2);
  font-size: var(--fs-md);
  line-height: 1.95;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 22px;
  border-top: 1px solid var(--on-forest-line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--on-forest-3);
}
.hero__words { display: flex; gap: 14px; }
.hero__words span { transition: color .6s var(--ease-out); }
.hero__words span.is-on { color: var(--on-forest); }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; }
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 28px;
  overflow: hidden;
  background: var(--on-forest-line);
}
.scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 50%;
  background: var(--peach);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
.hero--overlap .hero__bar { padding-bottom: 88px; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

@media (max-width: 1023px) {
  .hero__canvas { width: 100%; opacity: .32; }
  .hero { min-height: min(100svh, 820px); }
}
@media (max-width: 560px) {
  .hero__words span:not(.is-on) { display: none; }
  .hero__ctas .btn { flex: 1 1 auto; }
}
/* Smallest phones: keep “让好奇心生根，” on one line instead of breaking inside 好奇心. */
@media (max-width: 360px) { .hero__title { font-size: 2.25rem; letter-spacing: .02em; } }

/* Hero entrance (JS adds .is-ready on <html>) */
.js .hero [data-hero] { opacity: 0; transform: translateY(20px); }
.js .hero__title .line > span { transform: translateY(105%); }
.js .hero__title em path { stroke-dashoffset: 1; }
.js.is-ready .hero [data-hero] {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms + 200ms);
}
.js.is-ready .hero__title .line > span {
  transform: none;
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms + 120ms);
}
.js.is-ready .hero__title em path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--ease-in-out) 1.1s;
}

/* ---------- Stats strip ---------- */
.stats {
  position: relative;
  z-index: 2;
  margin-top: -58px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--glass-edge);
}
.js .stats { opacity: 0; transform: translateY(28px); }
.js.is-ready .stats { opacity: 1; transform: none; transition: opacity 1s var(--ease-out) .75s, transform 1.2s var(--ease-out) .75s; }
.stat {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 28px 30px 26px;
  transition: background-color .35s var(--ease-out);
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat:hover { background: rgb(var(--surface-rgb) / .7); }
.stat__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(44px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-family: var(--font-sans); font-size: 13px; color: var(--ink-3); }
.stat__label { display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); font-size: var(--fs-sm); }
.stat__label .icon { opacity: 0; transform: translate(-6px, 6px); transition: opacity .35s, transform .5s var(--ease-out); color: var(--clay); }
.stat:hover .stat__label .icon { opacity: 1; transform: none; }
@media (max-width: 820px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat { padding: 22px 20px; }
}

/* ---------- Focus areas ---------- */
.focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .focus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .focus-grid { grid-template-columns: 1fr; } }

.focus-card {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 26px 26px 28px;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s;
}
.focus-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.focus-card__top { display: flex; align-items: center; justify-content: space-between; }
.focus-card__num { font-family: var(--font-mono); font-size: 12px; color: var(--clay); letter-spacing: .08em; }
.arrow-dot {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  transition: background-color .4s, color .4s, border-color .4s, transform .6s var(--ease-out);
}
.arrow-dot .icon { font-size: 15px; }
a:hover > * > .arrow-dot, a:hover > .arrow-dot, .focus-card:hover .arrow-dot {
  background: var(--clay-fill);
  border-color: var(--clay-fill);
  color: #fff;
  transform: rotate(45deg);
}
.focus-card__glyph { width: 76px; height: 76px; margin: 34px 0 auto; color: var(--forest); }
:root[data-theme="dark"] .focus-card__glyph { color: var(--sage-2); color: #9cc3b0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .focus-card__glyph { color: #9cc3b0; } }
.focus-card h3 { margin-top: 28px; font-family: var(--font-cn); font-size: var(--fs-lg); }
.focus-card__en { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 17px; color: var(--ink-3); margin-top: 2px; }
.focus-card p { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.8; }
/* Phones: icon beside the text instead of above it, so the four directions
   take about half the scrolling they did as tall single-column cards. */
@media (max-width: 600px) {
  .focus-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "glyph top" "glyph title" "glyph en" "glyph desc";
    column-gap: 18px;
    min-height: 0;
    padding: 20px 20px 22px;
  }
  .focus-card__top { grid-area: top; }
  .focus-card__glyph { grid-area: glyph; width: 56px; height: 56px; margin: 4px 0 0; }
  .focus-card h3 { grid-area: title; margin-top: 8px; }
  .focus-card__en { grid-area: en; }
  .focus-card > p:last-child { grid-area: desc; margin-top: 8px; }
}

/* glyph micro-animations */
.glyph .accent { stroke: var(--clay); }
.glyph .fill-accent { fill: var(--clay); stroke: none; }
.glyph .node { transition: transform .5s var(--ease-spring); transform-box: fill-box; transform-origin: center; }
.focus-card:hover .glyph--ml .node { animation: node-pulse 1.4s var(--ease-in-out) infinite; animation-delay: calc(var(--n) * 90ms); }
@keyframes node-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }
.glyph--llm .tok { transition: transform .6s var(--ease-out); transform-box: fill-box; transform-origin: left center; }
.focus-card:hover .glyph--llm .tok { animation: tok 1.6s var(--ease-in-out) infinite; animation-delay: calc(var(--n) * 120ms); }
@keyframes tok { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.55); } }
.glyph--llm .caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.glyph--cv .iris { transition: transform .8s var(--ease-out); }
.focus-card:hover .glyph--cv .iris { animation: scan 2.4s var(--ease-in-out) infinite; }
@keyframes scan { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-7px); } 70% { transform: translateX(7px); } }
.glyph--sys .trace { stroke-dasharray: 14 86; stroke-dashoffset: 100; opacity: 0; transition: opacity .3s; }
.focus-card:hover .glyph--sys .trace { opacity: 1; animation: trace 1.4s linear infinite; }
@keyframes trace { to { stroke-dashoffset: 0; } }

/* ---------- Featured research ---------- */
.feature-paper {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  overflow: hidden;
  transition: box-shadow .6s var(--ease-out), border-color .4s;
}
.feature-paper:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.feature-paper__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--paper-sunk);
  border-right: 1px solid var(--line);
  overflow: hidden;
}
.feature-paper__media .frame {
  width: 100%;
  aspect-ratio: 889 / 421;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  background: #fff;
  transform: rotate(-1.2deg);
  transition: transform .8s var(--ease-out);
}
.feature-paper:hover .feature-paper__media .frame { transform: rotate(0) scale(1.02); }
.feature-paper__body { display: flex; flex-direction: column; padding: clamp(24px, 4vw, 48px); }
.feature-paper__body :is(h2, h3) { margin: 14px 0 10px; font-family: var(--font-cn); font-size: var(--fs-xl); }
.feature-paper__body p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
.kpi { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.kpi strong { display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.05; color: var(--clay); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; display: block; margin-top: 4px; }
.feature-paper__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.meta { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }
@media (max-width: 900px) {
  .feature-paper { grid-template-columns: 1fr; }
  .feature-paper__media { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 480px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi:last-child { grid-column: span 2; } }

/* ---------- Advisor ---------- */
.advisor {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.portrait { position: relative; max-width: 420px; }
.portrait::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--clay);
  border-radius: var(--radius-lg);
  opacity: .55;
}
.portrait .frame { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.portrait .frame img { object-position: center 18%; }
.portrait__badge {
  position: absolute;
  left: -14px;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-thick);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
  box-shadow: var(--shadow-md), var(--glass-edge);
  font-size: 13px;
  font-weight: 500;
}
.advisor__name { font-family: var(--font-cn); font-size: var(--fs-2xl); letter-spacing: .06em; }
.advisor__role { margin-top: 6px; color: var(--ink-3); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.advisor__text { margin-top: 26px; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.95; max-width: 34em; }
.pullquote {
  position: relative;
  margin: 34px 0 34px;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--clay);
  font-family: var(--font-cn);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
}
.pullquote small { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ink-3); font-weight: 400; }
@media (max-width: 860px) {
  .advisor { grid-template-columns: 1fr; }
  /* An auto-margined grid item shrinks to its content; give the portrait a width so the photo shows. */
  .portrait { width: calc(100% - 22px); max-width: 340px; margin-inline: 0 22px; }
}

/* ---------- Alumni voices marquee ---------- */
/* Far below the fold: skip its layout, animation and the serif subsets its
   quotes need until it approaches the viewport. */
/* clip, not hidden: the section must never become a sideways scroll target. */
.voices { overflow: hidden; overflow: clip; content-visibility: auto; contain-intrinsic-size: auto 950px; }
.marquee {
  --gap: 16px;
  display: flex;
  gap: var(--gap);
  width: max-content;
  padding-block: 8px;
  animation: marquee var(--dur, 90s) linear infinite;
}
.marquee--rev { animation-direction: reverse; }
.marquee-row {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row + .marquee-row { margin-top: 8px; }
.marquee-row:hover .marquee, .marquee-row:focus-within .marquee { animation-play-state: paused; }
/* Keyboard browsing: stop the loop and let the row itself scroll, so the focused quote is always in view. */
.marquee-row:has(:focus-visible) { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-block: 12px; margin-block: -12px; scroll-padding-inline: var(--gutter); }
.marquee-row:has(:focus-visible) .marquee { animation: none; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

.voice {
  display: flex;
  flex-direction: column;
  width: 360px;
  min-height: 220px;
  padding: 24px 24px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.voice:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.voice::before {
  content: "“";
  height: 30px;
  margin: -6px 0 6px -2px;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 58px;
  line-height: 1;
  color: var(--clay);
}
.voice__quote {
  flex: 1;
  font-family: var(--font-cn);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.voice__who { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.voice__who .frame { width: 38px; height: 38px; border-radius: 50%; font-size: 11px; }
.voice__who .frame img { object-position: center 20%; }
.voice__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.voice__meta { color: var(--ink-3); font-size: 12px; line-height: 1.4; }

/* ---------- News list ---------- */
.feed { border-top: 1px solid var(--line); }
.feed__item {
  position: relative;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 26px 8px;
  border-bottom: 1px solid var(--line);
  transition: background-color .4s var(--ease-out), padding .5s var(--ease-out);
}
.feed__item:hover { background: var(--surface); padding-inline: 20px; }
.date-block { display: grid; align-content: start; line-height: 1.1; }
.date-block strong { font-family: "Instrument Serif", Georgia, serif; font-size: 44px; font-weight: 400; }
.date-block span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; margin-top: 4px; }
.feed__title { font-family: var(--font-cn); font-size: var(--fs-lg); margin: 8px 0 4px; }
.feed__sub { color: var(--ink-3); font-size: var(--fs-sm); }
@media (max-width: 600px) {
  .feed__item { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .feed__item .arrow-dot { display: none; }
  .date-block strong { font-size: 34px; }
}

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: clamp(36px, 6vw, 72px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 120% at 100% 100%, rgba(201, 110, 70, .28), transparent 60%),
    var(--forest);
  color: var(--on-forest);
  overflow: hidden;
  isolation: isolate;
}
.cta h2 { font-family: var(--font-cn); font-size: var(--fs-2xl); letter-spacing: .04em; }
.cta p { margin-top: 12px; color: var(--on-forest-2); }
.cta__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cta__orbits {
  position: absolute;
  /* The monogram sits past the buttons, at the card's edge, not behind them. */
  right: -236px;
  top: 50%;
  z-index: -1;
  width: 420px;
  height: 420px;
  transform: translateY(-50%);
  opacity: .35;
}
.cta__orbits ellipse { fill: none; stroke: var(--on-forest-3); stroke-width: 1; transform-origin: 210px 210px; }
.cta__orbits ellipse:nth-child(1) { animation: spin 38s linear infinite; }
.cta__orbits ellipse:nth-child(2) { animation: spin 52s linear infinite reverse; }
.cta__orbits ellipse:nth-child(3) { animation: spin 70s linear infinite; }
.cta__orbits text { font-family: "Instrument Serif", serif; font-style: italic; fill: var(--on-forest-3); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) { .cta { grid-template-columns: 1fr; } .cta__orbits { top: 0; right: -250px; } }

/* ---------- Footer ---------- */
.site-footer {
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--on-forest);
  padding-top: clamp(56px, 7vw, 96px);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: 48px;
  padding-bottom: 56px;
}
.footer-tagline { font-family: var(--font-cn); font-size: var(--fs-2xl); line-height: 1.35; letter-spacing: .04em; }
.footer-tagline em { font-style: normal; color: var(--peach); }
.footer-note { margin-top: 18px; color: var(--on-forest-2); font-size: var(--fs-sm); max-width: 26em; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer-col h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--on-forest-3); margin-bottom: 14px; }
.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  color: var(--on-forest-2);
  font-size: var(--fs-sm);
  transition: color .3s, transform .4s var(--ease-out);
}
.footer-col a:hover { color: var(--on-forest); transform: translateX(3px); }
.footer-col a .icon { font-size: 12px; opacity: .6; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 24px 32px;
  border-top: 1px solid var(--on-forest-line);
  color: var(--on-forest-3);
  font-size: 13px;
}
.footer-bottom nav { display: flex; align-items: center; gap: 20px; }
.footer-bottom a:hover, .footer-bottom button:hover { color: var(--on-forest); }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.footer-wordmark {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(64px, 17vw, 260px);
  line-height: 1;
  height: .78em;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--on-forest-line);
  text-align: center;
  white-space: nowrap;
  user-select: none;
  overflow: hidden;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Page hero (sub pages) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__ghost {
  position: absolute;
  right: -.04em;
  bottom: -.2em;
  z-index: -1;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(110px, 20vw, 300px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px 64px;
}
.page-hero h1 {
  font-family: var(--font-cn);
  font-size: clamp(2.3rem, 1.6rem + 3vw, 4.2rem);
  letter-spacing: .04em;
  line-height: 1.15;
}
.page-hero__lede { margin-top: 18px; max-width: 34em; color: var(--ink-2); font-size: var(--fs-md); }
.page-hero__meta { display: grid; justify-items: end; gap: 8px; text-align: right; }
.page-hero__count { display: flex; align-items: baseline; gap: 8px; font-family: "Instrument Serif", Georgia, serif; font-size: clamp(56px, 6vw, 88px); line-height: .9; font-variant-numeric: tabular-nums; }
.page-hero__count small { font-family: var(--font-sans); font-size: 14px; color: var(--ink-3); }
.page-hero__status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--ink-3); }
@media (max-width: 720px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__meta { justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; justify-content: start; gap: 20px; }
}

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; color: var(--ink-3); font-size: 13px; }
.crumbs a { transition: color .3s; }
.crumbs a:hover { color: var(--clay); }
.crumbs .icon { font-size: 12px; opacity: .6; }

.block-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
  font-family: var(--font-cn);
  font-size: var(--fs-xl);
}
.block-title small { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; letter-spacing: .16em; color: var(--ink-3); }
.block-title::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; }

/* ---------- Members ---------- */
.faculty {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  overflow: hidden;
}
/* Side by side the photo fills its column and the row height. An aspect ratio
   here would turn a tall text column into a wider photo that covers the name. */
.faculty > .frame { min-width: 0; min-height: 450px; aspect-ratio: auto; border-right: 1px solid var(--line); }
.faculty > .frame img { object-position: center 15%; }
.faculty__body { padding: clamp(28px, 4vw, 56px); }
.faculty__body h3 { font-family: var(--font-cn); font-size: var(--fs-2xl); letter-spacing: .06em; }
.faculty__role { color: var(--ink-3); margin-top: 6px; }
.faculty__body p { margin-top: 18px; color: var(--ink-2); line-height: 1.95; max-width: 38em; }
.faculty__body .pullquote { font-size: var(--fs-lg); margin-bottom: 0; }
@media (max-width: 760px) {
  .faculty { grid-template-columns: 1fr; }
  .faculty > .frame { min-height: 0; aspect-ratio: 4 / 3.4; border-right: 0; border-bottom: 1px solid var(--line); }
}

.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(260px, (100% - 32px) / 3), 1fr)); gap: 16px; }
.person {
  display: flex;
  flex-direction: column;
  padding: 28px;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.person__top { display: flex; align-items: flex-start; justify-content: space-between; }
.monogram {
  --a: #d8e1d5; --b: #eef2ea; --c: #163f35;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--b), var(--a));
  color: var(--c);
  font-family: var(--font-cn);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.monogram.t1 { --a: #f0d6c6; --b: #fbeee5; --c: #8f4222; }
.monogram.t2 { --a: #cfdcd6; --b: #eaf1ed; --c: #1e4d41; }
.monogram.t3 { --a: #e3dcc9; --b: #f6f2e7; --c: #5a4a2b; }
:root[data-theme="dark"] .monogram { --a: #1f3a31; --b: #2a4a3f; --c: #cfe2d7; }
:root[data-theme="dark"] .monogram.t1 { --a: #4a2c1f; --b: #5d3a29; --c: #f2c8b2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .monogram { --a: #1f3a31; --b: #2a4a3f; --c: #cfe2d7; }
  :root:not([data-theme="light"]) .monogram.t1 { --a: #4a2c1f; --b: #5d3a29; --c: #f2c8b2; }
}
.person__idx { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.person h3 { margin-top: 22px; font-family: var(--font-cn); font-size: var(--fs-lg); }
.person__sub { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; }
.person p { margin-top: 14px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.85; }
.person .chip { margin-top: auto; align-self: flex-start; }
.person__foot { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line-2); display: flex; }

/* ---------- Alumni directory ---------- */
.toolbar {
  position: sticky;
  top: var(--header-offset);
  z-index: 20;
  margin-top: 28px;
  padding-block: 14px;
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
  transition: top .5s var(--ease-out);
}
.toolbar__row { display: flex; align-items: center; gap: 16px; }
.search {
  position: relative;
  flex: 0 1 320px;
}
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 17px; pointer-events: none; }
.search input {
  width: 100%;
  height: 42px;
  padding: 0 38px 0 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 14px;
  transition: border-color .3s, box-shadow .3s;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 4px var(--clay-soft); }
.search input::-webkit-search-cancel-button { display: none; }
.search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--ink-3);
}
.search__clear:hover { background: var(--sage); color: var(--ink); }
.search__clear .icon { position: static; transform: none; font-size: 14px; }

.chips {
  flex: 1;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  padding-right: 24px;
}
.chips::-webkit-scrollbar { display: none; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 13.5px;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color .3s, color .3s, border-color .3s, transform .4s var(--ease-spring);
}
.filter:hover { border-color: var(--ink-3); }
.filter:active { transform: scale(.95); }
.filter small { font-family: var(--font-mono); font-size: 12px; opacity: .7; }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter[aria-pressed="true"] small { opacity: .75; }
.result-count { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) { .result-count { display: none; } }
@media (max-width: 860px) {
  .toolbar__row { flex-wrap: wrap; gap: 12px; }
  .search { flex: 1 1 100%; }
  .chips { flex: 1 1 0; min-width: 0; }
}

.year-group { padding-top: clamp(40px, 5vw, 64px); }
.year-group__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.year-group__head strong { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(40px, 4.4vw, 60px); font-weight: 400; line-height: 1; }
.year-group__head span { color: var(--ink-3); font-size: var(--fs-sm); }
.year-group__head::after { content: ""; flex: 1; height: 1px; background: var(--line); align-self: center; }

.alum-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px) clamp(14px, 1.6vw, 22px); }
@media (max-width: 1100px) { .alum-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .alum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.alum { display: flex; flex-direction: column; }
.alum .frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  font-size: 22px;
  box-shadow: var(--shadow-sm);
}
.alum .frame img { object-position: center 22%; }
.alum:hover .frame img { transform: scale(1.045); }
.alum__year {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgb(15 43 36 / .62);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.alum__body { padding: 14px 2px 0; }
.alum__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-cn); font-size: 19px; font-weight: 600; line-height: 1.35; }
.alum__name .icon { font-size: 16px; color: var(--ink-3); transition: transform .5s var(--ease-out), color .3s; }
.alum:hover .alum__name .icon { transform: translate(3px, -3px); color: var(--clay); }
.alum__degree { color: var(--ink-3); font-size: 13px; margin-top: 2px; line-height: 1.5; }
.alum__now {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(56px, 8vw, 104px) 24px;
  text-align: center;
  color: var(--ink-2);
}
.empty :is(h1, h2, h3) { font-family: var(--font-cn); font-size: var(--fs-xl); color: var(--ink); }
.empty p { max-width: 28em; }
.empty__art { width: 132px; height: 132px; color: var(--clay); margin-bottom: 6px; }
.empty__art path, .empty__art circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease-in-out) forwards; animation-delay: calc(var(--n, 0) * 70ms + .2s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* 404: the page fills the screen so the footer does not dominate, with quick ways back in. */
.lost { min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; }
.empty__art .is-dotted { stroke-dasharray: .07 .09; stroke-dashoffset: 0; opacity: 0; animation: lost-trail .8s var(--ease-out) .9s forwards; }
@keyframes lost-trail { to { opacity: .75; } }
.lost__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.lost__links .chip { min-height: 36px; padding: 0 16px; font-size: 13px; color: var(--ink-2); transition: background-color .3s, border-color .3s, color .3s; }
.lost__links .chip:hover { background: var(--surface); border-color: var(--ink-3); color: var(--ink); }

/* ---------- Alumni profile ---------- */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  padding-block: clamp(32px, 5vw, 64px) 0;
}
.profile__aside { position: sticky; top: calc(var(--header-offset) + 28px); transition: top .5s var(--ease-out); }
.profile__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: 48px; }
.profile__photo img { object-position: center 20%; }
/* Phones: a small portrait beside the facts, so the name is on the first screen. */
@media (max-width: 600px) {
  .profile__aside { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; }
  .profile__photo { border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: 28px; }
  .profile__aside .facts { margin-top: 0; }
  .profile__aside .facts div { flex-direction: column; gap: 2px; padding: 9px 0; }
  .profile__aside .facts dd { text-align: left; }
}
.facts { margin-top: 24px; display: grid; border-top: 1px solid var(--line); }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.facts dt { color: var(--ink-3); }
.facts dd { text-align: right; font-weight: 500; }
.profile h1 { font-family: var(--font-cn); font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem); letter-spacing: .08em; line-height: 1.1; }
.profile__sub { margin-top: 12px; color: var(--ink-2); font-size: var(--fs-md); }
.prose-block { margin-top: clamp(40px, 5vw, 64px); }
.prose-block h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--clay);
}
.prose-block h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.prose-block p { font-size: var(--fs-md); line-height: 2; color: var(--ink-2); }
.prose-block p + p { margin-top: 1em; }

.letter {
  position: relative;
  padding: calc(clamp(28px, 4vw, 44px) + 30px) clamp(28px, 4vw, 44px) clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.letter::before {
  content: "“";
  position: absolute;
  top: clamp(18px, 2.4vw, 28px);
  left: clamp(22px, 3.4vw, 38px);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 84px;
  line-height: .8;
  color: var(--clay);
  opacity: .9;
}
.letter p { font-family: var(--font-cn); font-size: var(--fs-lg); line-height: 1.9; color: var(--ink); letter-spacing: .02em; }
.letter p + p { margin-top: .8em; }
.letter .letter__to { margin-top: 1.6em; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--clay); }
.letter .letter__to:first-child { margin-top: .6em; }
.letter .letter__to + p { margin-top: .4em; font-size: var(--fs-md); }
.letter--long p { font-size: var(--fs-md); }
.letter__sign { margin-top: 24px; text-align: right; color: var(--ink-3); font-size: var(--fs-sm); }

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(56px, 7vw, 96px);
}
.pager a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.pager a:hover { box-shadow: var(--shadow-md); border-color: var(--line-2); }
.pager a:first-child:hover { transform: translateX(-4px); }
.pager a:last-child:hover { transform: translateX(4px); }
.pager a:last-child { flex-direction: row-reverse; text-align: right; }
.pager .frame { width: 48px; height: 48px; border-radius: 50%; flex: none; font-size: 13px; }
.pager small { display: block; color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); letter-spacing: .1em; }
.pager strong { font-family: var(--font-cn); font-size: 17px; }
.pager .icon { color: var(--ink-3); font-size: 18px; flex: none; }
@media (max-width: 860px) {
  .profile { grid-template-columns: 1fr; }
  .profile__aside { position: static; max-width: 420px; }
}
@media (max-width: 520px) { .pager { grid-template-columns: 1fr; } }

/* ---------- Research ---------- */
.paper-list { display: grid; gap: 20px; }

.paper-head { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.paper-head h1 { margin-top: 18px; font-family: var(--font-cn); font-size: clamp(2rem, 1.4rem + 2.8vw, 3.6rem); letter-spacing: .03em; max-width: 18em; }
.paper-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }

.paper-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-top: clamp(40px, 5vw, 64px);
}
.paper-aside { position: sticky; top: calc(var(--header-offset) + 28px); display: grid; gap: 12px; transition: top .5s var(--ease-out); }
.paper-aside h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--ink-3); margin-bottom: 4px; }
.paper-aside .kpi strong { font-size: 40px; }
/* Without key results the column lists the publication details instead of a lone back button. */
.paper-aside .facts { margin-top: 0; }
.paper-aside .facts dt { flex: none; white-space: nowrap; }
.paper-aside .facts dd { overflow-wrap: anywhere; }
.paper-aside > .btn--forest { margin-top: 8px; }
@media (max-width: 960px) {
  .paper-layout { grid-template-columns: 1fr; }
  .paper-aside { position: static; grid-template-columns: repeat(2, 1fr); order: -1; }
  .paper-aside h2 { grid-column: 1 / -1; }
  .paper-aside > .btn { grid-column: 1 / -1; justify-self: start; }
  .paper-aside .facts { grid-column: 1 / -1; }
}

.figure {
  margin: 0 0 clamp(40px, 5vw, 56px);
  overflow: hidden;
}
.figure__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: clamp(16px, 3vw, 32px);
  background: var(--paper-sunk);
  cursor: zoom-in;
}
.figure__zoom img { margin-inline: auto; max-height: 560px; width: auto; border-radius: var(--radius-xs); background: #fff; box-shadow: var(--shadow-md); transition: transform .8s var(--ease-out); }
.figure__zoom:hover img { transform: scale(1.015); }
.figure__hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .5s var(--ease-out);
}
.figure__zoom:hover .figure__hint, .figure__zoom:focus-visible .figure__hint { opacity: 1; transform: none; }
.figure figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); }
.figure figcaption strong { flex: none; color: var(--ink); font-weight: 500; }
.figure figcaption span { min-width: 0; text-align: right; }
/* Narrow screens: the figure label, then the venue, instead of a squeezed right column. */
@media (max-width: 600px) {
  .figure figcaption { flex-direction: column; gap: 2px; padding: 12px 16px; }
  .figure figcaption span { text-align: left; font-size: 12px; }
}

.en-prose p { font-size: 17px; line-height: 1.85; color: var(--ink-2); hyphens: auto; text-align: justify; text-justify: inter-word; }
@media (max-width: 600px) { .en-prose p { text-align: start; } } /* narrow columns: ragged right reads better than word gaps */
.contrib { display: grid; gap: 14px; counter-reset: c; }
.contrib li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-2);
  hyphens: auto;
}
.contrib li::before {
  counter-increment: c;
  content: counter(c, decimal-leading-zero);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--clay);
}
.prose-block .contrib-note { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--line-2); font-size: 14.5px; line-height: 1.8; color: var(--ink-3); hyphens: auto; }

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  height: 2px;
  background: var(--clay);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* ---------- Timeline (life / news) ---------- */
.timeline { position: relative; display: grid; gap: 20px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 110px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--line-2), var(--line) 80%, transparent);
}
.t-item { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 44px; }
.t-item .date-block { padding-top: 26px; text-align: right; position: relative; padding-right: 22px; }
.t-item .date-block::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 40px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--clay);
}
.t-card { padding: clamp(24px, 3vw, 36px); scroll-margin-top: calc(var(--header-h) + 28px); }
.t-card:target { border-color: var(--clay); box-shadow: 0 0 0 4px var(--clay-soft); }
.t-card h2 { margin: 14px 0 6px; font-family: var(--font-cn); font-size: var(--fs-xl); }
.t-card__sub { color: var(--ink-3); font-size: var(--fs-sm); }
.t-card__body { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.95; }
.t-card__body p + p { margin-top: .6em; }
.t-card__note { font-size: 13px; color: var(--ink-3); }
@media (max-width: 640px) {
  .timeline::before { left: 5px; }
  .t-item { grid-template-columns: 1fr; gap: 10px; padding-left: 26px; }
  .t-item .date-block { padding: 0; text-align: left; display: flex; align-items: baseline; gap: 10px; }
  .t-item .date-block strong { font-size: 30px; }
  .t-item .date-block::after { right: auto; left: -26px; top: 10px; }
}

/* ---------- Rules ---------- */
.rules-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: calc(var(--header-offset) + 28px); transition: top .5s var(--ease-out); }
.toc h2 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; color: var(--ink-3); margin-bottom: 12px; }
.toc ol { display: grid; border-left: 1px solid var(--line); }
.toc a {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 10px 0 10px 18px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  transition: color .3s;
}
.toc a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--clay);
  transform: scaleY(0);
  transition: transform .45s var(--ease-out);
}
.toc a span { font-family: var(--font-mono); font-size: 11.5px; padding-top: 2px; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); font-weight: 500; }
.toc a.is-active::before { transform: scaleY(1); }
.rule { padding: clamp(28px, 4vw, 44px); scroll-margin-top: calc(var(--header-h) + 28px); }
.rule + .rule { margin-top: 20px; }
.rule__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.rule__num { font-family: "Instrument Serif", Georgia, serif; font-size: 56px; line-height: .85; color: var(--clay); }
.rule h2 { font-family: var(--font-cn); font-size: var(--fs-xl); }
.rule__sub { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 4px; }
.rule ol { display: grid; gap: 4px; margin-top: 18px; counter-reset: r; }
.rule li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  color: var(--ink-2);
  line-height: 1.85;
}
.rule li[data-rule-number]::before { content: attr(data-rule-number); }
.rule li::before {
  counter-increment: r;
  content: counter(r);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
}
.callout {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--clay-soft);
  color: var(--clay);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.callout .icon { font-size: 18px; margin-top: 2px; }
@media (max-width: 900px) {
  .rules-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
}
@media (max-width: 520px) {
  .rule__head { grid-template-columns: auto minmax(0, 1fr); }
  .rule__head .chip { grid-column: 2; justify-self: start; }
}

/* ---------- Mail ---------- */
.mail-hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
  background:
    radial-gradient(60% 90% at 100% 100%, rgba(201, 110, 70, .22), transparent 70%),
    var(--forest-deep);
  color: var(--on-forest);
  overflow: hidden;
  isolation: isolate;
}
.mail-hero .eyebrow { color: var(--peach); }
.mail-hero h1 { font-family: var(--font-cn); font-size: clamp(2.3rem, 1.6rem + 3vw, 4.2rem); letter-spacing: .04em; }
.mail-hero__lede { margin-top: 16px; max-width: 34em; color: var(--on-forest-2); font-size: var(--fs-md); }
.mail-hero__lede b { color: var(--on-forest); font-weight: 500; }
.mail-hero .chip { background: rgba(243, 239, 228, .08); color: var(--on-forest-2); border: 1px solid var(--on-forest-line); }
.mail-hero .page-hero__ghost { -webkit-text-stroke-color: var(--on-forest-line); }
.mail-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  margin-top: -48px;
  position: relative;
  z-index: 2;
  align-items: start;
}
.mail-grid > .card {
  background: var(--glass-panel);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
}
.mail-side { padding: clamp(24px, 3vw, 36px); }
.mail-side__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sage); color: var(--forest); font-size: 22px; margin-bottom: 20px; }
:root[data-theme="dark"] .mail-side__icon { color: #9cc3b0; }
.mail-side h2 { font-family: var(--font-cn); font-size: var(--fs-xl); }
.mail-side > p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-sm); }
.mail-side .btn { margin-top: 12px; }
.mail-side .btn:first-of-type { margin-top: 24px; }
.info-list { display: grid; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.info-list li { display: flex; gap: 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.info-list .icon { font-size: 17px; color: var(--clay); margin-top: 2px; }
.form-card { padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-lg), var(--glass-edge); }
.form-card > h2 { font-family: var(--font-cn); font-size: var(--fs-xl); }
.form-card > p { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-sm); }
.form { display: grid; gap: 22px; margin-top: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label { font-size: 14px; font-weight: 500; }
.field__hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.field__error { font-size: 12.5px; color: #c0452a; display: none; align-items: center; gap: 6px; }
:root[data-theme="dark"] .field__error { color: #f08a6c; }
.field.is-invalid .field__error { display: flex; }
.field.is-invalid .field__hint { display: none; }
.control {
  display: flex;
  align-items: stretch;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.control:focus-within { border-color: var(--clay); box-shadow: 0 0 0 4px var(--clay-soft); background: var(--surface); }
.field.is-invalid .control { border-color: #c0452a; }
.field.is-valid .control { border-color: color-mix(in oklab, var(--live) 60%, var(--line-2)); }
.control input { flex: 1; min-width: 0; padding: 0 14px; border: 0; background: none; font-size: 15px; }
.control input:focus { outline: none; }
.control input::placeholder { color: var(--ink-3); opacity: .8; }
.control__addon { display: grid; place-items: center; padding: 0 14px; border-left: 1px solid var(--line); background: var(--paper-sunk); color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; }
.control__btn { display: grid; place-items: center; width: 44px; color: var(--ink-3); transition: color .3s; }
@media (max-width: 360px) { .control__addon { padding: 0 9px; font-size: 11.5px; } }
.control__btn:hover { color: var(--ink); }
.control__btn .icon { font-size: 18px; }
.control__btn .i-eye-off { display: none; }
.control__btn[aria-pressed="true"] .i-eye { display: none; }
.control__btn[aria-pressed="true"] .i-eye-off { display: block; }
.control__ok { display: grid; place-items: center; width: 40px; color: var(--live); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .5s var(--ease-spring); }
.field.is-valid .control__ok { opacity: 1; transform: none; }
.address-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sage);
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.address-preview b { color: var(--ink); font-weight: 500; }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 2px; }
.strength span { height: 4px; border-radius: 4px; background: var(--line); transition: background-color .4s; }
.strength[data-level="1"] span:nth-child(-n+1) { background: #c0452a; }
.strength[data-level="2"] span:nth-child(-n+2) { background: #d4943a; }
.strength[data-level="3"] span:nth-child(-n+3) { background: #6aa35a; }
.strength[data-level="4"] span { background: var(--live); }
.strength-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); }
.form-foot { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.form-foot .icon { font-size: 16px; margin-top: 2px; flex: none; }
@media (max-width: 900px) { .mail-grid { grid-template-columns: 1fr; } .form-card { order: -1; } }

/* ---------- Lightbox ---------- */
.lightbox {
  margin: auto;
  max-width: min(96vw, 1200px);
  max-height: min(92vh, calc(100vh - 48px));
  max-height: min(92dvh, calc(100dvh - 48px));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: visible;
}
.lightbox::backdrop { background: rgb(8 20 16 / .72); -webkit-backdrop-filter: var(--glass-scrim-blur, blur(6px)); backdrop-filter: var(--glass-scrim-blur, blur(6px)); }
.lightbox[open] { animation: lb-in .5s var(--ease-out); }
.lightbox[open]::backdrop { animation: fade-in .4s var(--ease-out); }
.lightbox__stage {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, calc(100vh - 48px));
  max-height: min(92dvh, calc(100dvh - 48px));
  margin: 0;
}
.lightbox img { display: block; max-width: min(96vw, 1200px); max-height: calc(92vh - 52px); width: auto; margin-inline: auto; border-radius: var(--radius) var(--radius) 0 0; background: #fff; transition: opacity .3s var(--ease-out); }
.lightbox img.is-loading { opacity: .35; }
.lightbox img { min-height: 0; flex: 0 1 auto; object-fit: contain; }
.lightbox__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 52px; padding: 14px 18px; color: var(--ink-2); font-size: var(--fs-sm); }
.lightbox__caption { flex: 0 0 auto; }
.lightbox__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox__meta { display: flex; align-items: baseline; gap: 14px; flex: none; }
.lightbox__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.lightbox__original { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-size: var(--fs-xs); }
.lightbox__original .icon { font-size: 12px; }
.lightbox__nav {
  position: absolute;
  top: calc(50% - 26px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass-thick);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
  color: var(--ink);
  box-shadow: var(--shadow-md), var(--glass-edge);
  transition: transform .3s var(--ease-out);
}
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
.lightbox__nav:hover { transform: scale(1.06); }
.lightbox__nav .icon { font-size: 18px; }
.lightbox.is-single .lightbox__nav { display: none; }
/* Phones: the arrows sit in the caption bar instead of over the picture. */
@media (max-width: 760px) {
  /* The close control protrudes 14px; keep it inside even a 320px viewport. */
  .lightbox, .lightbox img { max-width: calc(100vw - 48px); }
  .lightbox:not(.is-single) { width: calc(100vw - 48px); }
  .lightbox:not(.is-single) img { max-height: calc(92vh - 88px); }
  .lightbox:not(.is-single) .lightbox__caption {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-height: 88px;
    padding: 10px 16px 8px;
  }
  .lightbox:not(.is-single) .lightbox__title { max-height: 4.2em; white-space: normal; overflow-wrap: anywhere; overflow-y: auto; line-height: 1.4; }
  .lightbox:not(.is-single) .lightbox__meta { min-height: 40px; align-items: center; padding-right: 96px; }
  .lightbox__nav { top: auto; bottom: 6px; margin-top: 0; width: 40px; height: 40px; box-shadow: none; }
  .lightbox__nav--prev { left: auto; right: 58px; }
  .lightbox__nav--next { right: 12px; }
}
/* Horizontal swipes page the gallery (interactions.js); vertical scroll and pinch zoom stay native. */
.lightbox:not(.is-single) { touch-action: pan-y pinch-zoom; }
.lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass-thick);
  -webkit-backdrop-filter: var(--glass-blur-lite);
  backdrop-filter: var(--glass-blur-lite);
  color: var(--ink);
  box-shadow: var(--shadow-md), var(--glass-edge);
}
.lightbox__close .icon { font-size: 18px; }
@keyframes lb-in { from { opacity: 0; transform: scale(.94) translateY(12px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  border-radius: 14px;
  background: var(--glass-ink);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--paper);
  font-size: 14px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgb(255 255 255 / .1);
  transform: translate(-50%, 140%);
  transition: transform .6s var(--ease-spring);
}
.toast.is-on { transform: translate(-50%, 0); }
.toast .icon { font-size: 18px; color: var(--peach); flex: none; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="scale"] { transform: scale(.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Failsafe: if site.js never runs (blocked, offline), unhide everything. */
.js:not(.is-ready) [data-reveal],
.js:not(.is-ready) .hero [data-hero],
.js:not(.is-ready) .hero__title .line > span,
.js:not(.is-ready) .stats { animation: failsafe 0s 2.5s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; } }

/* ---------- View transitions (cross-document) ---------- */
@view-transition { navigation: auto; }
/* Transition snapshots are visual layers, never pointer targets. */
::view-transition,
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) { pointer-events: none; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) both; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--ease-out); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js .hero [data-hero], .js .hero__title .line > span { opacity: 1; transform: none; }
  .marquee { animation: none; }
  .marquee-row { overflow-x: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* CMS integration: retain every uploaded attachment and profile link. */
.cms-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-block:28px}
.cms-gallery figure{min-width:0}.cms-gallery img,.cms-gallery video{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:var(--radius-sm);background:var(--paper-sunk)}
.cms-gallery figcaption{font-size:var(--fs-xs);color:var(--ink-3);overflow-wrap:anywhere;margin-top:8px}
.cms-body{overflow-wrap:anywhere;line-height:1.9}.cms-body p{margin-block:16px}
.person__avatar{width:72px;height:72px;border-radius:50%;aspect-ratio:1}.person>.link-arrow{margin-top:20px}
.profile__photo img[src$="/34a6f8e8-e47c-4cb2-97fa-16c7f73564e2.png"]{object-position:50% 25%}
#mail-result{padding:20px;border:1px solid var(--line-2);border-radius:var(--radius-sm);margin-block:20px;overflow-wrap:anywhere}
#mail-result[data-error]{border-color:var(--clay);color:var(--clay)}
#mail-result .btn{margin-top:16px}#mail-result strong{display:block}
@media(max-width:600px){.cms-gallery{grid-template-columns:1fr}}

.control__icon { display: grid; place-items: center; padding-left: 14px; color: var(--ink-3); }
.control__icon + input { padding-left: 10px; }

/* Shared states used by /mail, /forum and /admin */
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.is-spinning { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ---------- Print ---------- */
/* Papers and profiles print as plain documents: light colours whatever the
   chosen theme, no site chrome, every scroll-revealed block visible. */
@media print {
  @page { margin: 16mm 14mm; }
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]) {
    color-scheme: light;
    --paper: #fff; --paper-sunk: #fff; --surface: #fff; --surface-2: #fff;
    --ink: #14322a; --ink-2: #3d5850; --ink-3: #5a6962;
    --line: rgba(20, 50, 42, .16); --line-2: rgba(20, 50, 42, .28);
    --clay: #9e4d2c; --clay-soft: #f4e4d8; --sage: #fff; --sage-2: #fff;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    --header-h: 0px; --header-offset: 0px;
  }
  body { background: #fff; }
  body::before, body::after { display: none; }
  .skip-link, .progress, .site-header, .menu, .site-footer, .figure__hint, .lightbox, .toast, .pager,
  .paper-aside > .btn, .voices { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal], .js .hero [data-hero], .js .hero__title .line > span { opacity: 1 !important; transform: none !important; }
  .profile__aside, .paper-aside { position: static; }
  .section { padding-block: 20px; }
  .hero { min-height: 0; margin-top: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  h1, h2, h3 { break-after: avoid; }
  figure, .frame, .card, .kpi, .voice { break-inside: avoid; }
  a { color: inherit; }
}