/* ============================================================
   VISUAL LANGUAGE ASSOCIATES — "Aurora Ink"
   Tokens and core components come from aurora-ink-design-system.html
   (the canonical spec). Layout, header/footer, reveal motion, and
   page patterns extend it without introducing new colors or fonts.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS (verbatim from the design system)
   ------------------------------------------------------------ */
:root {
  /* Surfaces */
  --bg:            #131019;
  --surface:       #1a1523;
  --surface-2:     #221b2e;

  /* Ink (text on dark) */
  --cream:         #f5f1e8;
  --cream-70:      rgba(245, 241, 232, 0.70);
  --cream-55:      rgba(245, 241, 232, 0.55);
  --cream-45:      rgba(245, 241, 232, 0.45);

  /* Hairlines */
  --line:          rgba(245, 241, 232, 0.14);
  --line-strong:   rgba(245, 241, 232, 0.22);

  /* Accent family — garnish only */
  --violet:        #9d86ff;
  --blurple:       #635bff;
  --magenta:       #c2477f;
  --pink:          #ff8fc0;
  --amber:         #ffba27;
  --amber-soft:    #ffd98a;

  /* Gradients */
  --grad-thread:   linear-gradient(90deg, var(--blurple), var(--magenta));
  --grad-text:     linear-gradient(90deg, var(--violet), var(--pink), var(--amber-soft));
  --grad-chip-1:   linear-gradient(135deg, #635bff, #8f7bff);
  --grad-chip-2:   linear-gradient(135deg, #c2477f, #ff7eb3);
  --grad-chip-3:   linear-gradient(135deg, #e8a020, #ffc45c);

  /* Type */
  --font-display:  "Playfair Display", Georgia, serif;
  --font-body:     "Source Serif 4", Georgia, serif;
  --font-ui:       Inter, system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --max:           1120px;
  --measure:       640px;
  --pad-x:         40px;
  --header-h:      76px;

  /* Motion */
  --ease:          cubic-bezier(0.25, 0.6, 0.3, 1);
  --t-fast:        0.25s;
  --t-slow:        0.6s;

  /* Chrome (scrolled header / mobile nav panel) */
  --header-bg:     rgba(19, 16, 25, 0.86);
  --nav-panel-bg:  rgba(19, 16, 25, 0.97);
}
html { color-scheme: dark; }

/* ------------------------------------------------------------
   1b. LIGHT MODE — the same system on muted stone paper. Flipped
   via the header toggle (script.js persists the choice); dark
   stays the default. The ground sits below white and sheds the
   yellow cast; structure comes from contrast BETWEEN elements:
   surfaces step up toward white (surface-2 = most elevated, same
   semantics as dark), hairlines and ink run stronger, and cards
   get a soft shadow (§1c). Accents run as saturated jewel inks:
   deep enough to hold contrast, rich enough not to go muddy on
   the near-white surfaces.
   ------------------------------------------------------------ */
html[data-theme="light"] {
  color-scheme: light;

  --bg:            #eae7e0;
  --surface:       #f6f4ef;
  --surface-2:     #fdfcf8;

  --cream:         #242029;
  --cream-70:      rgba(36, 32, 41, 0.80);
  --cream-55:      rgba(36, 32, 41, 0.68);
  --cream-45:      rgba(36, 32, 41, 0.56);

  --line:          rgba(36, 32, 41, 0.20);
  --line-strong:   rgba(36, 32, 41, 0.36);

  --violet:        #6247c4;
  --blurple:       #5b3df0;
  --magenta:       #c23a7f;
  --pink:          #b83a76;
  --amber:         #b06d10;
  --amber-soft:    #c77b16;

  /* Display gradient gets hotter stops than the text accents so it
     keeps the dark theme's luminous character on paper (links stay
     on the calmer --violet). */
  --grad-text:     linear-gradient(90deg, #5b3df0, #d6367f, #c77b16);

  --grad-chip-1:   linear-gradient(135deg, #5b3df0, #8a70ef);
  --grad-chip-2:   linear-gradient(135deg, #c93a82, #e56ba8);
  --grad-chip-3:   linear-gradient(135deg, #cf8615, #e8ab4a);

  --header-bg:     rgba(234, 231, 224, 0.90);
  --nav-panel-bg:  rgba(234, 231, 224, 0.97);
}
/* On paper the aurora reads as watercolor: the BRIGHT accent hues at
   real alphas. (Deep inks at low alpha just look like stains.) */
html[data-theme="light"] .aurora {
  background:
    radial-gradient(760px 500px at 14% -6%, rgba(99, 91, 255, 0.24), transparent 68%),
    radial-gradient(700px 460px at 86% -4%, rgba(255, 126, 179, 0.24), transparent 68%),
    radial-gradient(560px 420px at 52% -14%, rgba(255, 196, 92, 0.18), transparent 62%);
}
html[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23242029' stroke-opacity='0.6' stroke-width='1.5'/%3E%3C/svg%3E");
}
html[data-theme="light"] .tile:hover .chip { box-shadow: 0 0 18px rgba(98, 71, 196, 0.32); }

/* ------------------------------------------------------------
   1c. LIGHT MODE SURFACES — dark mode separates planes with
   lighter fills and glow; on paper that job falls to soft
   diffuse shadows under the raised near-white surfaces.
   ------------------------------------------------------------ */
html[data-theme="light"] .cite-card,
html[data-theme="light"] .cta-panel {
  box-shadow: 0 1px 2px rgba(36, 32, 41, 0.04), 0 10px 26px rgba(36, 32, 41, 0.07);
}
html[data-theme="light"] .cite-card:hover,
html[data-theme="light"] .cta-panel:hover {
  box-shadow: 0 2px 4px rgba(36, 32, 41, 0.05), 0 16px 34px rgba(36, 32, 41, 0.10);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; cursor: pointer; }
img { max-width: 100%; display: block; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Accessibility baseline: every focusable element gets a visible ring */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 300;
  background: var(--surface-2); color: var(--cream);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  padding: 11px 18px; border: 1px solid var(--line-strong); border-radius: 3px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 14px; }

/* ------------------------------------------------------------
   3. THE AURORA — once per page, behind nav + hero
   ------------------------------------------------------------ */
.aurora {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 380px at 18% 0%, rgba(99, 91, 255, 0.30), transparent 65%),
    radial-gradient(520px 360px at 82% 0%, rgba(194, 71, 127, 0.22), transparent 65%),
    radial-gradient(420px 320px at 55% -12%, rgba(255, 186, 39, 0.10), transparent 60%);
  animation: aurora-breathe 9s ease-in-out infinite alternate;
}
@keyframes aurora-breathe {
  from { opacity: 0.78; }
  to   { opacity: 1; }
}
/* ------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------ */
.t-display {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.1; color: var(--cream);
}
.t-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.18; color: var(--cream); }
.t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 21px; line-height: 1.3; color: var(--cream); }
.t-body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--cream-70); max-width: var(--measure); }
.t-body-sm { font-family: var(--font-body); font-size: 14px; line-height: 1.65; color: var(--cream-70); }
.t-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-55);
}
.t-cite { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--cream-55); }
.t-italic { font-family: var(--font-body); font-style: italic; }

/* Gradient text — one phrase per page maximum */
.t-grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Blur-to-focus. Sharp by default (no-JS, reduced-motion, non-hero uses).
   With JS: starts blurred, sharpens once shortly after load (.is-focused
   added by script.js) and stays sharp — the moment plays exactly once. */
.focus-blur { display: inline-block; }
html.js .focus-blur { filter: blur(6px); transition: filter var(--t-slow) ease; }
html.js .focus-scope.is-focused .focus-blur { filter: blur(0); }

/* ------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------ */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }

main { padding-bottom: 40px; }
.section { padding-top: 104px; }
.section--tight { padding-top: 72px; }
.section-head { margin-bottom: 42px; }
.section-head .t-h2 { margin-top: 16px; max-width: 720px; }
.section-head .lede { margin-top: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.row-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }

/* ------------------------------------------------------------
   6. HEADER / NAV
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.site-header.scrolled {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: var(--line);
}
.header-in {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x);
  height: var(--header-h);
  display: flex; align-items: center; gap: 30px;
}
.wordmark {
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
  color: var(--cream); white-space: nowrap;
  position: relative; padding-bottom: 4px;
  display: inline-flex; align-items: center; gap: 10px;
}
/* Hand mark beside the wordmark */
.brand-mark { display: block; width: 15px; height: auto; }
.wordmark::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: var(--grad-thread); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.wordmark:hover::after { transform: scaleX(1); }

.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-link {
  font-family: var(--font-ui); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cream-55); position: relative; padding-bottom: 4px;
  transition: color var(--t-fast) ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px;
  background: var(--grad-thread); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--cream); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

.theme-toggle, .nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; color: var(--cream-55);
  border: 1px solid var(--line-strong); border-radius: 3px; cursor: pointer;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.theme-toggle:hover, .nav-toggle:hover { color: var(--cream); border-color: var(--cream-45); }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Hamburger (mobile only) — two bars that cross into an X */
.nav-toggle { display: none; flex-direction: column; gap: 5px; color: var(--cream); }
.nav-toggle .bar {
  display: block; width: 16px; height: 1.6px; border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
body.nav-open .nav-toggle .bar:first-child { transform: translateY(3.3px) rotate(45deg); }
body.nav-open .nav-toggle .bar:last-child { transform: translateY(-3.3px) rotate(-45deg); }

@media (max-width: 980px) {
  html.js .nav-toggle { display: inline-flex; }
  .header-actions { margin-left: auto; }
  /* The nav becomes a panel that slides down from under the header,
     fading and settling rather than popping. */
  html.js .site-nav {
    position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 99;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--nav-panel-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    padding: 16px var(--pad-x) 30px;
    visibility: hidden; opacity: 0; transform: translateY(-14px); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  html.js body.nav-open .site-nav {
    visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.35s var(--ease);
  }
  body.nav-open .site-header {
    background: var(--nav-panel-bg);
    border-bottom-color: var(--line);
  }
  html.js .site-nav .nav-link { font-size: 14px; padding: 11px 0 12px; }
  /* Without JS the buttons do nothing: hide them and let the nav wrap inline */
  html:not(.js) .header-actions { display: none; }
  html:not(.js) .header-in { height: auto; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
}

/* ------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------ */
/* Pulled up behind the transparent sticky header so the aurora
   glows behind the nav, per the spec ("behind nav + hero"). */
.hero-wrap {
  position: relative; overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  border-bottom: 1px solid var(--line);
}
/* Vertical padding only — horizontal padding comes from .container,
   so hero content lines up exactly with the header and sections. */
.hero-in { position: relative; padding-top: 92px; padding-bottom: 96px; }
.hero-in--tall { padding-top: 116px; padding-bottom: 118px; }
.hero-in .t-display { margin-top: 20px; max-width: 880px; }
.hero-in .thread { margin-top: 28px; }
.hero-lede { margin-top: 26px; }
.hero-lede + .hero-lede { margin-top: 16px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-55); margin-top: 18px; }

/* Person hero (consultant pages) */
.hero-person-grid { display: grid; grid-template-columns: 1fr 250px; gap: 56px; align-items: start; }
@media (max-width: 760px) { .hero-person-grid { grid-template-columns: 1fr; } .hero-person-grid .portrait { max-width: 230px; } }

/* ------------------------------------------------------------
   7b. HERO ART. The animated, cursor-reactive signature piece
   holding the right side of each marketing hero. hero-art.js
   picks the concept per page (data-fx on .hero-art) and draws
   with the site's accent tokens, so the art re-inks itself in
   light mode. The canvas is transparent (the aurora glows
   through it) and the mask feathers it toward the copy, so the
   text always wins on the left. hero-art.js renders a still
   frame under reduced motion and pauses offscreen heroes.
   ------------------------------------------------------------ */
.hero-art {
  position: absolute; top: 0; bottom: 0; right: 0;
  width: min(76vw, 1180px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(97deg, transparent 2%, rgba(0, 0, 0, 0.45) 32%, #000 62%);
  mask-image: linear-gradient(97deg, transparent 2%, rgba(0, 0, 0, 0.45) 32%, #000 62%);
}
.hero-art canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
html[data-theme="light"] .hero-art { opacity: 0.95; }

/* Narrow screens: the art becomes a faint full-bleed wash behind
   the hero text so readability never contends with it. */
@media (max-width: 960px) {
  .hero-art, html[data-theme="light"] .hero-art {
    left: 0; right: 0; width: auto; opacity: 0.32;
    -webkit-mask-image: linear-gradient(97deg, transparent 0%, #000 52%);
    mask-image: linear-gradient(97deg, transparent 0%, #000 52%);
  }
}

/* ------------------------------------------------------------
   8. COMPONENTS (spec) + EXTENSIONS
   ------------------------------------------------------------ */

/* Gradient thread rule */
.thread { width: 72px; height: 2px; background: var(--grad-thread); border: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--cream-45); color: var(--cream); background: transparent;
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.btn:hover { background: var(--cream); color: var(--bg); border-color: var(--cream); }
.btn--primary { border-color: var(--cream); }
.btn--gradient:hover { background: var(--grad-thread); border-color: transparent; color: #fff; }

/* Text link */
.link {
  font-family: var(--font-body); font-style: italic; color: var(--violet);
  border-bottom: 1px solid transparent; transition: border-color var(--t-fast) ease;
}
.link:hover { border-color: var(--violet); }

/* Index rows — the core list pattern */
.index-row {
  display: flex; align-items: baseline; gap: 22px; padding: 17px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--cream);
  transition: padding-left var(--t-fast) ease;
}
.index-row .n { font-family: var(--font-mono); font-size: 11px; color: var(--cream-45); transition: color var(--t-fast) ease; }
.index-row .meta { font-family: var(--font-mono); font-size: 11px; color: var(--cream-45); margin-left: auto; text-align: right; }
.index-row .go { margin-left: 12px; font-size: 15px; color: var(--pink); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
.index-row .meta + .go { margin-left: 0; }
.index-row:hover { padding-left: 14px; }
.index-row:hover .n { color: var(--violet); }
.index-row:hover .go { opacity: 1; transform: translateX(0); }
.index-row--compact { font-size: 18px; padding: 15px 4px; }

/* Service tiles */
.tile { display: block; border-top: 1px solid var(--line-strong); padding-top: 18px; }
.tile .chip { width: 26px; height: 26px; border-radius: 6px; transition: box-shadow 0.3s ease; }
.tile h3, .tile h4 { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.35; color: var(--cream); margin-top: 14px; transition: color 0.3s ease; }
.tile p { font-family: var(--font-ui); font-size: 13px; line-height: 1.6; color: var(--cream-55); margin-top: 8px; }
.tile .go { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
.tile:hover h3, .tile:hover h4 { color: var(--violet); }
.tile:hover .chip { box-shadow: 0 0 20px rgba(157, 134, 255, 0.55); }
.tile:hover .go { opacity: 1; transform: translateX(0); }

/* Citation / journal cards */
.cite-card {
  display: block; padding: 22px 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px;
  transition: transform 0.28s var(--ease), border-color 0.28s ease, background 0.28s ease;
}
.cite-card h3, .cite-card h5 { font-family: var(--font-display); font-weight: 500; font-size: 17px; line-height: 1.35; color: var(--cream); transition: color 0.28s ease; }
.cite-card .t-cite { margin-top: 10px; display: block; }
.cite-card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--surface-2); }

/* People rows */
.person { display: flex; align-items: baseline; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; transition: padding-left var(--t-fast) ease; }
.person .n { font-family: var(--font-mono); font-size: 11px; color: var(--cream-45); transition: color var(--t-fast) ease; }
.person .name { font-family: var(--font-display); font-size: 19px; font-weight: 500; transition: color var(--t-fast) ease; }
.person .creds { font-family: var(--font-mono); font-size: 11px; color: var(--cream-45); }
.person .field { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--pink); margin-left: auto; opacity: 0; transform: translateX(-6px); transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; }
/* Hover matches .index-row: slide in, number glows, title stays cream */
.person:hover { padding-left: 14px; }
.person:hover .n { color: var(--violet); }
.person:hover .field { opacity: 1; transform: translateX(0); }
@media (max-width: 700px) {
  .person .field { margin-left: 0; width: 100%; opacity: 1; transform: none; padding-left: 26px; }
}

/* Forms */
.field-label {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-55); margin-bottom: 8px;
}
.input, .textarea, .select {
  width: 100%; padding: 13px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--font-ui); font-size: 14.5px; color: var(--cream);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--cream-45); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--line-strong); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--violet); background: var(--surface-2); outline: none; }
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f5f1e8' stroke-opacity='0.55' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px;
}
.select option { background: var(--surface); color: var(--cream); }

.form { max-width: 780px; margin-top: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-grid .form-field--full { grid-column: 1 / -1; }
.form-actions { margin-top: 30px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.form-note { font-family: var(--font-ui); font-size: 12.5px; color: var(--cream-55); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

/* Detail lists (research areas, pricing factors, settings) */
.detail-list { list-style: none; max-width: var(--measure); }
.detail-list li {
  position: relative; padding: 11px 0 11px 26px;
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.6; color: var(--cream-70);
  border-bottom: 1px solid var(--line);
  transition: color var(--t-fast) ease;
}
.detail-list li::before {
  content: "—"; position: absolute; left: 0; top: 11px;
  font-family: var(--font-mono); font-size: 12px; color: var(--cream-45);
  transition: color var(--t-fast) ease;
}
.detail-list li:hover { color: var(--cream); }
.detail-list li:hover::before { color: var(--violet); }

/* Publication lists — the academic signature */
.pub-list { list-style: none; counter-reset: pub; max-width: 780px; }
.pub-list li {
  counter-increment: pub; position: relative;
  padding: 15px 4px 15px 46px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: var(--cream-55);
  transition: color var(--t-fast) ease, padding-left var(--t-fast) ease;
}
.pub-list li::before {
  content: counter(pub, decimal-leading-zero);
  position: absolute; left: 2px; top: 16px;
  font-size: 11px; color: var(--cream-45);
  transition: color var(--t-fast) ease;
}
.pub-list li:hover { color: var(--cream-70); }
.pub-list li:hover::before { color: var(--violet); }
.pub-list em { font-style: italic; color: var(--cream-70); }

/* Portraits — desaturated at rest; color returns on hover */
.portrait {
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  background: var(--surface);
  transition: border-color 0.3s ease;
}
.portrait img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  filter: grayscale(0.55) contrast(1.02);
  transition: filter 0.45s ease, transform 0.6s var(--ease);
}
.portrait:hover { border-color: var(--line-strong); }
.portrait:hover img { filter: grayscale(0); transform: scale(1.035); }

/* Directors */
.director { display: grid; grid-template-columns: 240px 1fr; gap: 52px; align-items: start; padding: 60px 0; border-bottom: 1px solid var(--line); }
.director:first-of-type { border-top: 1px solid var(--line-strong); }
.director .role { margin-top: 6px; }
.director h3 { margin-top: 14px; font-size: clamp(22px, 2.6vw, 27px); }
.director .t-body { margin-top: 18px; }
.director .t-body + .t-body { margin-top: 14px; }
.director .more { display: inline-block; margin-top: 20px; }
@media (max-width: 820px) { .director { grid-template-columns: 1fr; gap: 30px; } .director .portrait { max-width: 240px; } }

/* CTA panels (dual-audience band) */
.cta-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
  padding: 32px 34px 22px;
  transition: border-color 0.28s ease, transform 0.28s var(--ease);
}
.cta-panel:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.cta-panel .t-h3 { margin-top: 12px; }
.cta-panel .t-body-sm { margin-top: 10px; }
.cta-panel .panel-rows { margin-top: 18px; }
.cta-panel .index-row { font-size: 17px; padding: 14px 2px; gap: 14px; }

/* Journal post body */
.post-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-55); }
.post-body { max-width: var(--measure); }
.post-body p { font-family: var(--font-body); font-size: 17px; line-height: 1.8; color: var(--cream-70); margin-top: 24px; }
.post-body > p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 500; font-size: 56px; line-height: 0.85;
  float: left; padding: 8px 12px 0 0; color: var(--cream);
}
.post-body h2 { font-family: var(--font-display); font-weight: 500; font-size: 23px; line-height: 1.3; color: var(--cream); margin-top: 52px; }
.post-body blockquote {
  margin: 38px 0 8px; padding: 4px 0 4px 24px;
  border-left: 2px solid; border-image: var(--grad-thread) 1;
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 21px; line-height: 1.5; color: var(--cream);
}
.post-body blockquote footer { margin-top: 12px; }
.post-refs { margin-top: 64px; }
.post-refs .grid-2 { margin-top: 24px; }
.back-link {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-55);
  transition: color var(--t-fast) ease, transform var(--t-fast) ease;
}
.back-link:hover { color: var(--violet); transform: translateX(-4px); }

/* Mission feature */
.mission-feature {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(21px, 2.8vw, 28px); line-height: 1.5; color: var(--cream);
  max-width: 880px; margin-top: 26px;
}
.philosophy-lead { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(19px, 2.3vw, 24px); line-height: 1.55; color: var(--cream); max-width: 760px; }
.philosophy-lead + .philosophy-lead { margin-top: 18px; }

/* ------------------------------------------------------------
   8b. COLOR ACCENTS — the chip language from the home tiles,
   echoed across the site: gradient marks on section kickers,
   a gradient edge on CTA panels, chip bars on citation cards,
   and accent ink on list markers. Garnish, never ground.
   ------------------------------------------------------------ */

/* Section kickers open with a small gradient chip; the three chip
   gradients rotate per section so long pages stay varied. */
.section-head .t-kicker::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 2.5px; margin-right: 10px; vertical-align: -1px;
  background: var(--grad-chip-1);
}
.section:nth-of-type(3n+2) .section-head .t-kicker::before { background: var(--grad-chip-2); }
.section:nth-of-type(3n) .section-head .t-kicker::before { background: var(--grad-chip-3); }

/* CTA panels carry the gradient thread along their top edge */
.cta-panel { position: relative; overflow: hidden; }
.cta-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-thread); opacity: 0.9;
}

/* Citation / journal cards open with a chip bar, cycling like the tiles */
.cite-card::before {
  content: ""; display: block; width: 22px; height: 6px; border-radius: 3px;
  margin-bottom: 14px; background: var(--grad-chip-1);
}
.grid-3 .cite-card:nth-child(3n+2)::before,
.grid-2 .cite-card:nth-child(2n)::before { background: var(--grad-chip-2); }
.grid-3 .cite-card:nth-child(3n)::before { background: var(--grad-chip-3); }

/* List markers wear accent ink at rest (they used to wait for hover) */
.index-row .n, .person .n { color: var(--violet); }
.index-row:hover .n, .person:hover .n { color: var(--pink); }
.detail-list li::before { color: var(--violet); }
.detail-list li:hover::before { color: var(--magenta); }

/* ------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------ */
.site-footer { border-top: 1px solid var(--line-strong); margin-top: 120px; padding: 68px 0 42px; }
/* Brand row: hand mark + wordmark text */
.footer-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.footer-logo { display: block; width: 18px; height: auto; opacity: 0.9; }
.footer-brand-name { font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--cream); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 0.7fr 1fr; gap: 56px; }
.footer-grid .t-body-sm { margin-top: 16px; max-width: 480px; }
.footer-col ul { list-style: none; margin-top: 16px; }
.footer-col li { padding: 4px 0; }
.footer-link { font-family: var(--font-ui); font-size: 13px; color: var(--cream-55); transition: color var(--t-fast) ease; }
a.footer-link:hover { color: var(--violet); }
.footer-bottom {
  margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.footer-tagline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-55); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ------------------------------------------------------------
   10. SCROLL / LOAD REVEAL
   Elements marked data-reveal rise into place when they enter
   the viewport (script.js). Stagger with inline --d delays.
   After the entrance finishes, script.js removes the attribute
   so component hover transitions take back over.
   ------------------------------------------------------------ */
html.js [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   11. MOTION RULES — mandatory reduced-motion fallback
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .focus-blur { filter: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   12. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; gap: 26px; }
  .grid-2 { grid-template-columns: 1fr; gap: 26px; }
  .row-cols { grid-template-columns: 1fr; column-gap: 0; }
  .section { padding-top: 80px; }
}
@media (max-width: 760px) {
  :root { --pad-x: 24px; }
  .wordmark { font-size: 16px; }
  .header-in { gap: 16px; }
  .hero-in { padding-top: 72px; padding-bottom: 76px; }
  .hero-in--tall { padding-top: 84px; padding-bottom: 88px; }
  .index-row { font-size: 18px; gap: 16px; }
  .index-row .meta { display: none; }
  .site-footer { margin-top: 88px; }
}