/* Neuronomy Lab — public site
   Brand: Ink Navy #14213D · Signal Teal #12B8B0 · Spark Amber #F2A93B
   Dark-first with a light theme; no build step, edit this file directly. */
/* ============================================================
   NEURONOMY LAB — design tokens
   Brand: Ink Navy #14213D · Signal Teal #12B8B0 · Spark Amber #F2A93B
   Dark-first. Light palette overrides below.
   ============================================================ */
:root{
  color-scheme: dark;

  --void:#0A1120;
  --panel:#101B31;
  --panel-2:#16243E;
  --panel-3:#1D2E4D;
  --ink:#14213D;

  --line:#223253;
  --line-soft:#1A2743;
  --line-strong:#38496F;

  --teal:#12B8B0;
  --teal-2:#3DCBC4;
  --teal-deep:#0A6B66;
  --teal-wash:rgba(18,184,176,.12);
  --amber:#F2A93B;
  --amber-solid:#F2A93B;   /* brand Spark Amber — never darkened */
  --on-amber:#2A1B02;
  --amber-deep:#8A5A08;
  --amber-wash:rgba(242,169,59,.13);

  --tx:#EDF1F8;
  --tx2:#A9B6CC;
  --tx3:#76849D;
  --on-accent:#05201D;

  /* categorical series — validated for this surface (OKLCH band, CVD ΔE, contrast) */
  --c1:#16A89F; --c2:#C88300; --c3:#9B72F0; --c4:#E85C5C; --c5:#3E96DC; --c6:#3FA862;

  --ok:#3FA862; --warn:#C88300; --crit:#E85C5C;

  --grid:rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4), 0 22px 48px -16px rgba(0,0,0,.7);

  --fd:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --fb:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --fm:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw:84rem;
  --r:8px; --r-lg:14px; --r-pill:999px;
  --dur:260ms; --ease:cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --void:#F4F2EC;
    --panel:#FFFFFF;
    --panel-2:#FAFAF8;
    --panel-3:#F1EEE4;
    --line:#E2DED1;
    --line-soft:#EDEAE0;
    --line-strong:#CFC9B8;
    --teal:#0A6B66;
    --teal-2:#0E8F89;
    --teal-deep:#0A6B66;
    --teal-wash:rgba(10,107,102,.09);
    --amber:#8A5A08;
    --amber-solid:#F2A93B;
    --on-amber:#2A1B02;
    --amber-deep:#8A5A08;
    --amber-wash:rgba(242,169,59,.18);
    --tx:#14213D;
    --tx2:#4A5468;
    --tx3:#6E7A90;
    --on-accent:#FFFFFF;
    --c1:#00A096; --c2:#9A6400; --c3:#6B45C4; --c4:#C33F3F; --c5:#2A6FA8; --c6:#2C7F49;
    --ok:#2C7F49; --warn:#9A6400; --crit:#C33F3F;
    --grid:rgba(20,33,61,.08);
    --shadow:0 1px 2px rgba(20,33,61,.06), 0 10px 28px -14px rgba(20,33,61,.22);
    --shadow-lift:0 2px 6px rgba(20,33,61,.08), 0 20px 44px -18px rgba(20,33,61,.3);
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --void:#F4F2EC; --panel:#FFFFFF; --panel-2:#FAFAF8; --panel-3:#F1EEE4;
  --line:#E2DED1; --line-soft:#EDEAE0; --line-strong:#CFC9B8;
  --teal:#0A6B66; --teal-2:#0E8F89; --teal-deep:#0A6B66; --teal-wash:rgba(10,107,102,.09);
  --amber:#8A5A08; --amber-solid:#F2A93B; --on-amber:#2A1B02;
  --amber-deep:#8A5A08; --amber-wash:rgba(242,169,59,.18);
  --tx:#14213D; --tx2:#4A5468; --tx3:#6E7A90; --on-accent:#FFFFFF;
  --c1:#00A096; --c2:#9A6400; --c3:#6B45C4; --c4:#C33F3F; --c5:#2A6FA8; --c6:#2C7F49;
  --ok:#2C7F49; --warn:#9A6400; --crit:#C33F3F;
  --grid:rgba(20,33,61,.08);
  --shadow:0 1px 2px rgba(20,33,61,.06), 0 10px 28px -14px rgba(20,33,61,.22);
  --shadow-lift:0 2px 6px rgba(20,33,61,.08), 0 20px 44px -18px rgba(20,33,61,.3);
}

/* ---------------- base ---------------- */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--void);
  color:var(--tx);
  font-family:var(--fb);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--teal-2);text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(16px,4vw,44px)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:var(--fm)}
.tnum{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:16px;top:-70px;z-index:400;background:var(--teal);color:var(--on-accent);
  padding:12px 18px;border-radius:var(--r);font-weight:600;transition:top var(--dur) var(--ease)}
.skip:focus{top:14px}

/* ============================================================
   LOADING SEQUENCE — the logo draws, ignites, and orbits
   ============================================================ */
#boot{
  position:fixed; inset:0; z-index:500;
  background:
    radial-gradient(120% 90% at 50% 42%, #16243E 0%, #0C1424 48%, #070C17 100%);
  display:grid; place-items:center;
  transition:opacity 620ms var(--ease), visibility 620ms;
}
#boot[hidden]{display:none!important}
/* set by the inline head script, before first paint, on every page after the
   first one in a session — otherwise the intro flashes on every navigation */
html.booted #boot{display:none!important}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-inner{display:flex;flex-direction:column;align-items:center;gap:34px;padding-inline:20px}
.boot-stage{position:relative;width:min(300px,64vw);aspect-ratio:1;display:grid;place-items:center}

.orbit{position:absolute;inset:0;pointer-events:none}
.orbit circle.path{fill:none;stroke:rgba(18,184,176,.18);stroke-width:.6}
.orbit .sat{transform-box:fill-box;transform-origin:center}
.orbit-g{transform-origin:50% 50%;animation:spin 7s linear infinite}
.orbit-g.rev{animation:spin 11s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}

.mark{width:54%;height:54%;overflow:visible}
.mark .stroke{fill:none;stroke:var(--teal);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:trace 1100ms var(--ease) forwards}
.mark .node{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:pop 520ms var(--ease) forwards}
.mark .core{fill:var(--amber-solid);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:pop 620ms var(--ease) 1250ms forwards, corePulse 2s ease-in-out 1900ms infinite}
.mark-spin{animation:markSpin 2600ms var(--ease) 1400ms forwards}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.28)}100%{opacity:1;transform:scale(1)}}
@keyframes corePulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px rgba(242,169,59,.5))}
  50%{transform:scale(1.16);filter:drop-shadow(0 0 14px rgba(242,169,59,.85))}}
@keyframes markSpin{
  0%{transform:rotate(0deg) scale(1)}
  55%{transform:rotate(300deg) scale(1.04)}
  100%{transform:rotate(360deg) scale(1)}
}

.boot-word{font-family:var(--fd);font-weight:700;font-size:clamp(26px,6vw,40px);letter-spacing:-.02em;
  color:#F2F5FA;display:flex;gap:.34em;align-items:baseline}
.boot-word b{font-weight:500;color:var(--teal-2)}
.boot-word span{display:inline-block;opacity:0;transform:translateY(14px);
  animation:rise 560ms var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.boot-meta{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(380px,80vw)}
.boot-line{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:#7E8DA8;text-transform:uppercase}
.boot-track{width:100%;height:2px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden}
.boot-fill{height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--amber-solid));border-radius:2px;
  transition:width 180ms linear}
.boot-pct{font-family:var(--fm);font-size:11px;color:var(--amber-solid);letter-spacing:.1em}
.boot-status{display:flex;justify-content:space-between;width:100%;gap:12px}

/* ============================================================
   COMMAND BAR
   ============================================================ */
header.cmd{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:120;
  background:color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.cmd-bar{display:flex;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{width:34px;height:34px;flex-shrink:0}
.brand-mark .s{fill:none;stroke:var(--tx);stroke-width:9;stroke-linecap:round}
.brand-mark .n{fill:var(--tx)}
.brand-mark .c{fill:var(--amber-solid)}
.brand:hover .brand-mark{animation:markNudge 900ms var(--ease)}
@keyframes markNudge{50%{transform:rotate(-8deg) scale(1.06)}100%{transform:rotate(0) scale(1)}}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--tx)}
.brand-name i{font-style:normal;font-weight:500;color:var(--teal-2)}
.brand-sub{font-family:var(--fm);font-size:9.5px;letter-spacing:.11em;color:var(--tx3);margin-top:4px}

/* margin-left:auto alone lets the nav slide right up against the wordmark
   once the items get wide — padding-left guarantees a gap. */
nav.routes{margin-left:auto;padding-left:clamp(20px,3vw,44px);display:flex;gap:2px;align-items:center}
/* inline-flex, not the default inline: the dropdown chevron is a sibling of
   the label, so without it the caret wraps onto its own line the moment the
   padding tightens. nowrap keeps two-word labels on one line too. */
nav.routes a{
  position:relative;display:inline-flex;align-items:center;white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--tx2);
  padding:8px 13px;border-radius:var(--r);transition:color var(--dur),background var(--dur);
}
nav.routes a:hover{color:var(--tx);background:var(--panel-2)}
nav.routes a.on{color:var(--teal-2)}
nav.routes a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--teal);border-radius:2px}

.cmd-tools{display:flex;align-items:center;gap:8px;flex-shrink:0}
.dash-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--amber-solid);color:var(--on-amber);font-weight:600;font-size:14px;
  padding:9px 16px;border-radius:var(--r);border:0;cursor:pointer;
  box-shadow:0 0 0 0 var(--amber-wash);
  transition:box-shadow var(--dur),transform var(--dur),filter var(--dur);
}
.dash-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 0 0 5px var(--amber-wash)}
.dash-btn .pip{width:7px;height:7px;border-radius:50%;background:var(--on-amber);animation:blip 1.8s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;background:transparent;
  border:1px solid var(--line);border-radius:var(--r);cursor:pointer;color:var(--tx2);
  transition:background var(--dur),color var(--dur),border-color var(--dur)}
.icon-btn:hover{background:var(--panel-2);color:var(--tx);border-color:var(--line-strong)}
.burger{display:none}
.drawer{display:none;border-top:1px solid var(--line-soft);padding:8px 0 18px}
.drawer.open{display:block}
.drawer a{display:block;padding:13px 4px;color:var(--tx2);font-size:16px;border-bottom:1px solid var(--line-soft)}
.drawer a.on{color:var(--teal-2)}

/* live status strip under the bar */
.ticker{border-bottom:1px solid var(--line-soft);background:var(--panel);overflow:hidden}
.ticker-in{display:flex;align-items:center;gap:0;height:38px;max-width:var(--maxw);margin:0 auto;
  padding-inline:clamp(16px,4vw,44px)}
.ticker-tag{font-family:var(--fm);font-size:10px;letter-spacing:.14em;color:var(--amber);
  border:1px solid var(--amber-wash);background:var(--amber-wash);border-radius:var(--r-pill);
  padding:3px 10px;margin-right:16px;flex-shrink:0;white-space:nowrap}
.ticker-view{flex:1;overflow:hidden;position:relative;height:38px}
.ticker-rail{display:flex;gap:44px;align-items:center;height:38px;white-space:nowrap;
  animation:slide 46s linear infinite;width:max-content}
.ticker-view:hover .ticker-rail{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{font-size:13px;color:var(--tx2);display:inline-flex;align-items:center;gap:9px}
.ticker-item b{font-family:var(--fm);font-size:10.5px;color:var(--teal-2);font-weight:500;letter-spacing:.06em}

/* ============================================================
   VIEW SYSTEM
   ============================================================ */
main{display:block;min-height:70vh}
.panel-in{animation:panelIn 520ms var(--ease) backwards}
@keyframes panelIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

section.block{padding-block:clamp(40px,6vw,74px)}
section.block.tight{padding-block:clamp(28px,4vw,46px)}
.alt{background:var(--panel);border-block:1px solid var(--line-soft)}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(22px,3vw,34px)}
.sec-head .lead{max-width:62ch}
.sec-idx{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--teal-2);
  display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sec-idx::after{content:"";height:1px;width:52px;background:var(--line-strong)}
.sec-head h2{font-size:clamp(1.55rem,1.1rem+1.7vw,2.5rem);margin-bottom:12px}
.sec-head p{color:var(--tx2);font-size:1.01rem}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(100deg, var(--void) 8%, color-mix(in srgb,var(--void) 62%, transparent) 46%, color-mix(in srgb,var(--void) 24%, transparent) 100%)}
.hero-in{position:relative;padding-block:clamp(44px,6.5vw,86px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,60px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.15em;color:var(--teal-2);border:1px solid var(--line);background:var(--panel);
  padding:6px 13px;border-radius:var(--r-pill);margin-bottom:22px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blip 2.2s ease-in-out infinite}
h1.hero-h{font-size:clamp(2.2rem,1.2rem+4vw,4.1rem);margin-bottom:20px;letter-spacing:-.033em}
h1.hero-h em{font-style:normal;color:var(--teal-2);position:relative;white-space:nowrap}
.rotator{display:inline-block;min-width:1ch}
.rotator span{display:inline-block;animation:flipIn 420ms var(--ease)}
@keyframes flipIn{from{opacity:0;transform:translateY(-.35em) rotateX(45deg)}to{opacity:1;transform:none}}
.hero-lede{font-size:clamp(1rem,.95rem+.3vw,1.16rem);color:var(--tx2);max-width:50ch;margin-bottom:18px}
.hero-rule{border-left:2px solid var(--amber);padding-left:14px;color:var(--tx);font-size:.96rem;
  max-width:46ch;margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:var(--r);
  font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:transform var(--dur),background var(--dur),border-color var(--dur),color var(--dur)}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:var(--teal);color:var(--on-accent)}
.btn-p:hover{background:var(--teal-2)}
.btn-g{border-color:var(--line-strong);color:var(--tx);background:transparent}
.btn-g:hover{background:var(--panel-2);border-color:var(--teal)}
.btn-a{background:var(--amber-solid);color:var(--on-amber)}

/* hero stat rail */
.stat-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(28px,4vw,44px)}
.stat{background:var(--panel);padding:20px 22px;position:relative;overflow:hidden}
.stat .k{font-family:var(--fm);font-size:10px;letter-spacing:.13em;color:var(--tx3);text-transform:uppercase}
.stat .v{font-family:var(--fd);font-weight:700;font-size:clamp(1.7rem,1.2rem+1.6vw,2.4rem);
  line-height:1.05;margin-top:8px;font-variant-numeric:tabular-nums}
.stat .u{font-size:.86rem;color:var(--tx2);margin-top:4px}
.stat .spark{position:absolute;right:0;bottom:0;width:70%;height:38%;opacity:.5}
.stat:nth-child(1) .v{color:var(--teal-2)}
.stat:nth-child(2) .v{color:var(--tx)}
.stat:nth-child(3) .v{color:var(--tx)}
.stat:nth-child(4) .v{color:var(--amber)}

/* ---------------- panels & cards ---------------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  position:relative;overflow:hidden;transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card h3{font-size:1.18rem;margin-bottom:10px}
.card p{color:var(--tx2);font-size:.945rem}
.card .ico{width:42px;height:42px;margin-bottom:16px;color:var(--teal-2)}
.card-sweep::before{content:"";position:absolute;inset:0;background:
  radial-gradient(90% 70% at 100% 0%, var(--teal-wash), transparent 60%);opacity:0;transition:opacity var(--dur)}
.card-sweep:hover::before{opacity:1}
.card > *{position:relative}
.tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag{font-family:var(--fm);font-size:10px;letter-spacing:.07em;color:var(--tx2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 10px;background:var(--panel-2)}
.tag.teal{color:var(--teal-2);border-color:var(--teal-wash);background:var(--teal-wash)}
.tag.amber{color:var(--amber);border-color:var(--amber-wash);background:var(--amber-wash)}

/* placeholder chip — marks a record the lab still has to supply */
.ph{font-family:var(--fm);font-size:.82em;color:var(--tx3);border:1px dashed var(--line-strong);
  border-radius:4px;padding:1px 7px;background:transparent;white-space:nowrap}
.notice{display:flex;gap:14px;align-items:flex-start;background:var(--amber-wash);
  border:1px solid color-mix(in srgb,var(--amber) 34%, transparent);border-radius:var(--r-lg);padding:16px 18px}
.notice svg{flex-shrink:0;color:var(--amber);margin-top:2px}
.notice p{font-size:.92rem;color:var(--tx)}
.notice b{font-family:var(--fm);font-size:.82rem;letter-spacing:.06em;color:var(--amber);display:block;margin-bottom:3px}

/* ---------------- pipeline ---------------- */
.pipe{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.step{background:var(--panel);padding:clamp(22px,3vw,32px);position:relative}
.step .n{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--tx3)}
.step h3{font-size:1.1rem;margin:14px 0 9px;display:flex;align-items:center;gap:10px}
.step h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0}
.step:nth-child(3) h3::before{background:var(--amber)}
.step p{color:var(--tx2);font-size:.93rem}
.step::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--teal);
  transition:width 700ms var(--ease)}
.step:nth-child(3)::after{background:var(--amber)}
.pipe:hover .step::after{width:100%}
.pipe:hover .step:nth-child(2)::after{transition-delay:160ms}
.pipe:hover .step:nth-child(3)::after{transition-delay:320ms}

/* ---------------- people ---------------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{font-size:13px;font-weight:500;color:var(--tx2);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 15px;cursor:pointer;transition:all var(--dur)}
.chip:hover{border-color:var(--line-strong);color:var(--tx)}
.chip.on{background:var(--teal);border-color:var(--teal);color:var(--on-accent)}
.chip .ct{font-family:var(--fm);font-size:10px;opacity:.75;margin-left:6px}

.person{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;
  display:flex;flex-direction:column;gap:13px;transition:border-color var(--dur),transform var(--dur)}
.person:hover{border-color:var(--teal);transform:translateY(-3px)}
.avatar{width:100px;height:100px;border-radius:var(--r-lg);display:grid;place-items:center;
  background:var(--panel-3);border:1px solid var(--line);font-family:var(--fd);font-weight:700;
  font-size:22px;color:var(--teal-2);flex-shrink:0;position:relative;overflow:hidden}
.avatar.lead{width:180px;height:180px;font-size:54px}
.avatar::after{content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 60%, var(--teal-wash) 75%, transparent 90%);
  animation:spin 6s linear infinite;opacity:0}
.person:hover .avatar::after{opacity:1}
.p-name{font-family:var(--fd);font-weight:600;font-size:1.06rem;line-height:1.3}
.p-role{font-size:.83rem;color:var(--teal-2);font-weight:500}
.p-focus{font-size:.9rem;color:var(--tx2)}
.p-meta{font-family:var(--fm);font-size:10.5px;color:var(--tx3);letter-spacing:.05em;
  border-top:1px solid var(--line-soft);padding-top:11px;display:flex;justify-content:space-between;gap:10px;margin-top:auto}

.pi-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.pi-card h3{font-size:1.45rem;margin-bottom:6px}
.pi-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pi-links a{font-family:var(--fm);font-size:11px;letter-spacing:.06em;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:5px 12px;color:var(--tx2);transition:all var(--dur)}
.pi-links a:hover{border-color:var(--teal);color:var(--teal-2)}

/* advisory board */
/* ADVISORY BOARD
   The old row was a flex line whose text column had no min-width, so a long
   expertise tag refused to shrink and crushed the name to one word per line.
   These are proper profile cards instead, at the director's photo size. */
.adv-card{position:relative;overflow:hidden;display:flex;gap:22px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.adv-card:hover{border-color:var(--accent-c);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.adv-card .avatar{flex-shrink:0}

/* A colour wash that drifts in from the corner on hover. */
.adv-wash{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 80% at 100% 0%,
    color-mix(in srgb,var(--accent-c) 18%,transparent),transparent 62%);
  transition:opacity 420ms var(--ease)}
.adv-card:hover .adv-wash{opacity:1}
.adv-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-c);
  transform:scaleY(0);transform-origin:top;transition:transform 420ms cubic-bezier(.2,.9,.25,1)}
.adv-card:hover:before{transform:scaleY(1)}

/* min-width:0 is the actual fix: without it a long tag wins the width fight. */
.adv-body{min-width:0;position:relative;flex:1}
.adv-card .a-n{font-family:var(--fd);font-weight:700;font-size:1.12rem;line-height:1.25;margin:8px 0 5px}
.adv-card .a-a{font-size:.88rem;color:var(--tx2);line-height:1.5}
.adv-card .tagrow{margin-top:12px}
.adv-card .tag{white-space:normal}

@media (max-width:560px){
  .adv-card{flex-direction:column;gap:16px}
  .adv-card .avatar.lead{width:104px;height:104px;font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  .adv-card,.adv-wash,.adv-card:before{transition:none}
  .adv-card:hover{transform:none}
}

/* ---------------- publications ---------------- */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:0 13px}
.search input{flex:1;background:transparent;border:0;outline:none;color:var(--tx);font-size:14px;
  padding:11px 0;font-family:var(--fb)}
.search input::placeholder{color:var(--tx3)}
.search svg{color:var(--tx3);flex-shrink:0}
select.sel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);color:var(--tx);
  padding:11px 13px;font-size:14px;font-family:var(--fb);cursor:pointer}

.pub{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:18px;align-items:start;
  padding:19px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  transition:border-color var(--dur),background var(--dur)}
.pub:hover{border-color:var(--line-strong);background:var(--panel-2)}
.pub-yr{font-family:var(--fm);font-size:13px;color:var(--tx3);letter-spacing:.04em;padding-top:2px}
.pub-yr .ty{display:block;margin-top:7px;font-size:9.5px;letter-spacing:.11em;padding:2px 7px;
  border-radius:3px;text-align:center}
.ty.jrnl{background:var(--teal-wash);color:var(--teal-2)}
.ty.conf{background:color-mix(in srgb,var(--c3) 18%,transparent);color:var(--c3)}
.ty.prep{background:var(--amber-wash);color:var(--amber)}
.pub-t{font-family:var(--fd);font-weight:600;font-size:1.02rem;line-height:1.35;margin-bottom:7px}
.pub-a{font-size:.88rem;color:var(--tx2)}
.pub-a u{text-decoration:none;color:var(--teal-2);font-weight:600}
.pub-v{font-size:.85rem;color:var(--tx3);margin-top:5px;font-style:italic}
.pub-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.mini{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--line);
  border-radius:var(--r);padding:5px 10px;background:transparent;cursor:pointer;color:var(--tx2);
  transition:all var(--dur);white-space:nowrap}
.mini:hover{border-color:var(--teal);color:var(--teal-2)}
.cites{font-family:var(--fm);font-size:10.5px;color:var(--tx3);white-space:nowrap}

/* ---------------- news ---------------- */
.tl{position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--teal),var(--line-soft))}
.tl-item{position:relative;padding-bottom:26px}
.tl-item::before{content:"";position:absolute;left:-30px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--panel);border:2px solid var(--teal)}
.tl-item.hi::before{border-color:var(--amber);background:var(--amber)}
.tl-d{font-family:var(--fm);font-size:11px;letter-spacing:.09em;color:var(--tx3);text-transform:uppercase}
.tl-t{font-family:var(--fd);font-weight:600;font-size:1.05rem;margin:6px 0 6px}
.tl-p{font-size:.93rem;color:var(--tx2);max-width:68ch}
.ev{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.ev-cal{background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r);text-align:center;padding:8px 0}
.ev-cal .m{font-family:var(--fm);font-size:10px;letter-spacing:.11em;color:var(--amber)}
.ev-cal .d{font-family:var(--fd);font-weight:700;font-size:22px;line-height:1.1}

/* ---------------- openings ---------------- */
.open-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;
  border-left:3px solid var(--line-strong)}
.open-row.live{border-left-color:var(--ok)}
.open-row.soon{border-left-color:var(--warn)}
.open-row.shut{border-left-color:var(--line-strong);opacity:.72}
.state{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.09em;border-radius:var(--r-pill);padding:5px 12px;border:1px solid}
.state.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent);
  background:color-mix(in srgb,var(--ok) 13%,transparent)}
.state.soon{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,transparent);
  background:color-mix(in srgb,var(--warn) 13%,transparent)}
.state.shut{color:var(--tx3);border-color:var(--line-strong)}
.state .sd{width:6px;height:6px;border-radius:50%;background:currentColor}
.state.live .sd{animation:blip 1.6s ease-in-out infinite}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash-head{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;justify-content:space-between;
  padding-block:clamp(26px,4vw,40px);border-bottom:1px solid var(--line-soft)}
.dash-title{display:flex;align-items:center;gap:14px}
.dash-title h2{font-size:clamp(1.5rem,1.1rem+1.5vw,2.2rem)}
.badge-sample{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--amber);
  border:1px dashed color-mix(in srgb,var(--amber) 50%,transparent);border-radius:var(--r-pill);
  padding:4px 11px;white-space:nowrap}
.dash-when{font-family:var(--fm);font-size:11px;color:var(--tx3);letter-spacing:.06em}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-block:24px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.kpi .kl{font-family:var(--fm);font-size:10px;letter-spacing:.12em;color:var(--tx3);text-transform:uppercase}
.kpi .kv{font-family:var(--fd);font-weight:700;font-size:2rem;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi .kd{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px}
.kpi .kd.up{color:var(--ok)} .kpi .kd.flat{color:var(--tx3)} .kpi .kd.dn{color:var(--crit)}
.kpi .kspark{margin-top:6px}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accentbar,var(--teal))}

.charts{display:grid;gap:16px;grid-template-columns:repeat(12,1fr)}
.pan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px 16px;
  min-width:0;display:flex;flex-direction:column}
.span7{grid-column:span 7} .span5{grid-column:span 5}
.span6{grid-column:span 6} .span4{grid-column:span 4} .span8{grid-column:span 8} .span12{grid-column:span 12}
.pan-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:4px}
.pan-h h3{font-size:1.02rem}
.pan-h .sub{font-size:.83rem;color:var(--tx3)}
.pan-note{font-size:.82rem;color:var(--tx3);margin-top:10px}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--tx2)}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex-shrink:0}
.chart-wrap{position:relative;margin-top:14px;overflow-x:auto}
.chart-wrap svg{display:block;width:100%;height:auto;min-width:260px}
.ax{stroke:var(--grid);stroke-width:1}
.axl{fill:var(--tx3);font-family:var(--fm);font-size:10px}
.axl.mid{text-anchor:middle} .axl.end{text-anchor:end}
.barlbl{fill:var(--tx2);font-family:var(--fm);font-size:10px;text-anchor:middle;font-variant-numeric:tabular-nums}
.dot-end{stroke:var(--panel);stroke-width:2}
.tip{position:absolute;pointer-events:none;background:var(--panel-3);border:1px solid var(--line-strong);
  border-radius:var(--r);padding:8px 11px;font-size:12px;color:var(--tx);box-shadow:var(--shadow);
  opacity:0;transition:opacity 120ms;z-index:20;white-space:nowrap}
.tip b{font-family:var(--fm);font-size:11px;color:var(--teal-2);display:block;margin-bottom:2px}
.hit{fill:transparent;cursor:pointer}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px}
table.tbl th{font-family:var(--fm);font-size:10px;letter-spacing:.11em;color:var(--tx3);text-transform:uppercase;
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line-soft);color:var(--tx2)}
table.tbl td:first-child{color:var(--tx);font-weight:500}
table.tbl td.num{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums}
.meter{height:6px;border-radius:3px;background:var(--panel-3);overflow:hidden;min-width:70px}
.meter i{display:block;height:100%;border-radius:3px}

.feed{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.feed-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 4px;border-bottom:1px solid var(--line-soft)}
.feed-row:last-child{border-bottom:0}
.feed-dot{width:8px;height:8px;border-radius:50%}
.feed-t{font-size:.9rem;color:var(--tx2)}
.feed-t b{color:var(--tx);font-weight:600}
.feed-w{font-family:var(--fm);font-size:10.5px;color:var(--tx3);white-space:nowrap}

/* ---------------- footer ---------------- */
footer{background:var(--panel);border-top:1px solid var(--line);padding-block:clamp(28px,3.2vw,40px) 18px;margin-top:10px}
.f-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:22px 32px;margin-bottom:22px}
.f-mark{width:30px;height:30px;margin-bottom:9px}
.f-name{font-family:var(--fd);font-weight:700;font-size:16px;margin-bottom:6px}
.f-name i{font-style:normal;font-weight:500;color:var(--teal-2)}
.f-desc{font-size:12.5px;color:var(--tx2);line-height:1.55;max-width:34ch}
/* The address is the part that says WHERE — department and institution are
   already in the Institution column, so they are not repeated here. */
/* An icon in front of each contact line: the shape is recognised before the
   text is read, which is the whole point of a footer. */
.f-row{display:flex;gap:9px;align-items:flex-start;margin-top:11px}
.f-ico{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--teal-2)}
.f-addr{font-style:normal;font-size:12.5px;color:var(--tx2);line-height:1.6}
.f-link{color:var(--teal-2);font-size:12px}
.f-link:hover{text-decoration:underline}

.f-qr{display:flex;align-items:center;gap:12px;margin-top:16px}
.qr-mini{width:70px;height:70px;flex-shrink:0;border-radius:10px;background:#fff;padding:6px;
  border:1px solid var(--line);color:#14213D;
  transition:transform 300ms var(--ease),box-shadow 300ms var(--ease)}
.qr-mini:hover{transform:scale(1.07) rotate(-3deg);box-shadow:var(--shadow-lift)}
.qr-mini img{width:100%;height:100%;display:block}
.f-qr p{font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;color:var(--tx3);
  text-transform:uppercase;line-height:1.7}
.f-qr b{font-family:var(--fd);font-size:13px;letter-spacing:0;color:var(--tx);text-transform:none}

/* Institution, funder and partner marks. Muted so they read as provenance
   rather than competing with the lab's own identity, full colour on hover. */
.f-logos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,38px);
  padding:18px 0;border-top:1px solid var(--line-soft)}
.f-logos a,.f-logos span{display:block;line-height:0}
.f-logos img{height:clamp(26px,3.4vw,38px);width:auto;max-width:170px;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.5;transition:filter 260ms var(--ease),opacity 260ms var(--ease),transform 260ms var(--ease)}
.f-logos a:hover img{filter:none;opacity:1;transform:translateY(-2px)}
:root:not([data-theme="light"]) .f-logos img{filter:grayscale(1) brightness(1.9)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .f-logos img{filter:grayscale(1)}
}
:root[data-theme="dark"] .f-logos img{filter:grayscale(1) brightness(1.9)}
@media (prefers-reduced-motion:reduce){
  .f-logos img,.qr-mini{transition:none}
  .f-logos a:hover img,.qr-mini:hover{transform:none}
}
footer h4{font-family:var(--fb);font-size:10.5px;font-weight:600;letter-spacing:.11em;color:var(--tx);
  text-transform:uppercase;margin-bottom:10px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:6px}
footer li a,footer li button{font-size:12.5px;color:var(--tx2);background:none;border:0;padding:0;
  cursor:pointer;text-align:left;transition:color var(--dur)}
footer li a:hover,footer li button:hover{color:var(--teal-2)}
.f-bot{border-top:1px solid var(--line-soft);padding-top:16px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center}
.f-bot p{font-size:12.5px;color:var(--tx3)}
.copyable{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:12.5px;color:var(--tx2)}
.copyable button{background:none;border:1px solid var(--line);border-radius:4px;padding:2px 7px;
  font-size:10px;cursor:pointer;color:var(--tx3);font-family:var(--fm)}
.copyable button:hover{border-color:var(--teal);color:var(--teal-2)}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .span7,.span5,.span6,.span4,.span8{grid-column:span 12}
  .charts{grid-template-columns:1fr}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .pipe{grid-template-columns:1fr}
  .stat-rail{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:620px){
  .cmd-bar{height:62px;gap:10px}
  .dash-btn{padding:9px 12px}
  .dash-btn .lbl{display:none}
  .stat-rail{grid-template-columns:1fr}
  .pub{grid-template-columns:1fr;gap:12px}
  .pub-yr{display:flex;gap:10px;align-items:center}
  .pub-yr .ty{margin-top:0}
  .pub-act{flex-direction:row;align-items:center}
  .pi-card{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .open-row{grid-template-columns:1fr;gap:14px}
  .ticker-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;scroll-behavior:auto!important}
  .mark .stroke{stroke-dashoffset:0!important}
  .mark .node,.mark .core{opacity:1!important}
  .boot-word span{opacity:1!important;transform:none!important}
  .ticker-rail{animation:none!important}
}

/* ============================================================
   EMPTY STATES · DASHBOARD TABS · CONTENT MANAGER
   ============================================================ */
.empty{border:1px dashed var(--line-strong);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);
  text-align:center;background:var(--panel)}
.empty .ei{width:38px;height:38px;color:var(--tx3);margin-bottom:14px}
.empty h3{font-size:1.06rem;margin-bottom:8px}
.empty p{color:var(--tx2);font-size:.93rem;max-width:46ch;margin:0 auto}
.empty .mini{margin-top:18px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-block:22px 0;overflow-x:auto}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--tx2);white-space:nowrap;transition:color var(--dur),border-color var(--dur)}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--teal-2);border-bottom-color:var(--teal)}

.mgr{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;margin-top:24px;align-items:start}
.mgr-nav{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:8px}
.mgr-nav button{background:none;border:0;text-align:left;padding:9px 12px;border-radius:var(--r);cursor:pointer;
  font-size:13.5px;color:var(--tx2);display:flex;justify-content:space-between;gap:10px;align-items:center;
  transition:background var(--dur),color var(--dur)}
.mgr-nav button:hover{background:var(--panel-2);color:var(--tx)}
.mgr-nav button.on{background:var(--teal-wash);color:var(--teal-2);font-weight:600}
.mgr-nav .n{font-family:var(--fm);font-size:10.5px;color:var(--tx3)}
.mgr-nav button.on .n{color:var(--teal-2)}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.wide{grid-column:1/-1}
.field label{font-family:var(--fm);font-size:10px;letter-spacing:.11em;color:var(--tx3);text-transform:uppercase}
.field input,.field textarea,.field select{background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r);color:var(--tx);font-family:var(--fb);font-size:14px;padding:10px 12px;outline:none;
  transition:border-color var(--dur);width:100%}
.field textarea{resize:vertical;min-height:78px;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--teal)}
.field .hint{font-size:11.5px;color:var(--tx3)}
.form-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line-soft);padding-top:16px;margin-top:2px}

.rec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:13px 15px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);margin-bottom:8px}
.rec-t{font-size:.93rem;color:var(--tx);font-weight:500;overflow-wrap:anywhere}
.rec-s{font-family:var(--fm);font-size:10.5px;color:var(--tx3);letter-spacing:.05em;margin-top:3px}
.rec-act{display:flex;gap:6px;flex-shrink:0}
.mini.danger{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 40%,transparent)}
.mini.danger:hover{background:color-mix(in srgb,var(--crit) 12%,transparent);border-color:var(--crit);color:var(--crit)}
.mini.go{background:var(--teal);border-color:var(--teal);color:var(--on-accent);font-weight:600}
.mini.go:hover{filter:brightness(1.1);color:var(--on-accent)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:300;
  background:var(--panel-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:10px 20px;font-size:13.5px;color:var(--tx);box-shadow:var(--shadow-lift);
  opacity:0;pointer-events:none;transition:opacity 200ms,transform 200ms}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:var(--crit);color:var(--crit)}

.store-state{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.08em;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;color:var(--tx3)}
.store-state .sd{width:6px;height:6px;border-radius:50%;background:var(--tx3)}
.store-state.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.store-state.on .sd{background:var(--ok);animation:blip 2s ease-in-out infinite}
.store-state.ro{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.store-state.ro .sd{background:var(--warn)}

@media (max-width:820px){ .mgr{grid-template-columns:1fr} .mgr-nav{flex-direction:row;overflow-x:auto} }

/* ============================================================
   HERO PIPELINE DIAGRAM
   ============================================================ */
.hp{width:100%;height:auto}
.hp .tr{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round}
.hp .fl{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);animation:hpDraw 6.4s ease-in-out infinite}
.hp .nd{fill:var(--panel-2);stroke:var(--line-strong);stroke-width:1.4}
.hp .on{fill:var(--teal);opacity:0;animation:hpLite 6.4s ease-in-out infinite}
.hp .dc{fill:var(--amber);opacity:0;animation:hpFlare 6.4s ease-in-out infinite}
.hp .halo{fill:none;stroke:var(--amber);stroke-width:1.4;opacity:0;animation:hpRing 6.4s ease-in-out infinite}
.hp .lb{fill:var(--tx3);font-family:var(--fm);font-size:8.4px;letter-spacing:.09em}
.hp .lb.a{fill:var(--amber)}
@keyframes hpDraw{0%{stroke-dashoffset:var(--l);opacity:0}5%{opacity:1}40%{stroke-dashoffset:0;opacity:1}
  74%{opacity:1}90%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hpLite{0%,4%{opacity:0}12%{opacity:1}72%{opacity:1}88%{opacity:0}100%{opacity:0}}
@keyframes hpFlare{0%,54%{opacity:0}62%{opacity:1}78%{opacity:1}90%{opacity:0}100%{opacity:0}}
@keyframes hpRing{0%,56%{opacity:0;r:11}66%{opacity:.8;r:16}80%{opacity:0;r:22}100%{opacity:0;r:11}}

/* pagination */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:28px;flex-wrap:wrap}
.pager a,.pager span{font-family:var(--fm);font-size:12px;padding:8px 13px;border-radius:var(--r);
  border:1px solid var(--line);color:var(--tx2);background:var(--panel)}
.pager a:hover{border-color:var(--teal);color:var(--teal-2)}
.pager .cur{background:var(--teal);border-color:var(--teal);color:var(--on-accent);font-weight:600}
.pager .off{opacity:.4}

@media (prefers-reduced-motion:reduce){
  .hp .fl{stroke-dashoffset:0!important;opacity:1!important}
  .hp .on,.hp .dc{opacity:1!important}
  .hp .halo{opacity:0!important}
}

/* ============================================================================
   COLOUR SYSTEM EXTENSIONS
   Each section of the site owns an accent, so navigation, cards and page
   headers all agree on what colour a thing is.
   ============================================================================ */
:root{
  --nav-home:var(--teal);       --nav-research:var(--c3);   --nav-people:var(--c5);
  --nav-publications:var(--c1); --nav-courses:var(--amber); --nav-blog:var(--c4);
  --nav-gallery:var(--c6);      --nav-news:var(--c2);       --nav-openings:var(--teal-2);
  --nav-about:var(--c2);
  --mesh-1:rgba(18,184,176,.20); --mesh-2:rgba(242,169,59,.16); --mesh-3:rgba(155,114,240,.18);
}
:root[data-theme="light"], :root:not([data-theme="dark"]){
  --mesh-1:rgba(10,107,102,.13); --mesh-2:rgba(242,169,59,.20); --mesh-3:rgba(107,69,196,.12);
}

/* ---------------------------------------------------------------- scroll progress */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:transparent}
.progress i{display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--teal) 0%,var(--c5) 28%,var(--c3) 54%,var(--amber) 78%,var(--c4) 100%);
  box-shadow:0 0 12px color-mix(in srgb,var(--teal) 60%,transparent);transition:width 90ms linear}

/* ---------------------------------------------------------------- mega navigation */
header.cmd{overflow:visible}
.cmd::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--teal),var(--c5),var(--c3),var(--amber),var(--c4),var(--c6),var(--teal));
  background-size:300% 100%;animation:hue 14s linear infinite;opacity:.85}
@keyframes hue{to{background-position:300% 0}}

nav.routes{position:relative}
nav.routes a{position:relative;overflow:hidden;--ink:var(--teal)}
nav.routes a::before{content:"";position:absolute;inset:0;border-radius:var(--r);
  background:color-mix(in srgb,var(--ink) 16%,transparent);opacity:0;transform:scale(.86);
  transition:opacity 220ms var(--ease),transform 220ms var(--ease);z-index:-1}
nav.routes a:hover::before,nav.routes a:focus-visible::before{opacity:1;transform:scale(1)}
nav.routes a:hover,nav.routes a[aria-expanded="true"]{color:var(--ink);background:transparent}
nav.routes a.on{color:var(--ink)}
nav.routes a.on::after{background:var(--ink);box-shadow:0 0 10px color-mix(in srgb,var(--ink) 70%,transparent)}
nav.routes a .cap{display:inline-block;transition:transform 220ms var(--ease)}
nav.routes a:hover .cap{transform:translateY(-1px)}
nav.routes a .chev{width:9px;height:9px;margin-left:5px;flex-shrink:0;opacity:.6;
  transition:transform 220ms var(--ease)}
nav.routes a[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:1}

.mega{
  position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,-8px);
  width:min(880px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:22px;z-index:130;
  opacity:0;visibility:hidden;transition:opacity 200ms var(--ease),transform 200ms var(--ease),visibility 200ms;
}
.mega.open{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6))}
.mega-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:var(--r);
  transition:background 180ms var(--ease),transform 180ms var(--ease)}
.mega-item:hover{background:var(--panel-2);transform:translateX(3px);text-decoration:none}
.mega-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px}
.mega-item b{display:block;font-family:var(--fd);font-weight:600;font-size:.94rem;color:var(--tx);line-height:1.3}
.mega-item span{display:block;font-family:var(--fm);font-size:10.5px;color:var(--tx3);margin-top:3px;letter-spacing:.05em}
.mega-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.mega-foot p{font-size:.86rem;color:var(--tx2)}

.drawer a{position:relative;padding-left:18px}
.drawer.open a{animation:drawerIn 380ms var(--ease) backwards}
.drawer a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--ink,var(--teal))}
@keyframes drawerIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- reveal layer */
/* Elements start visible. JS only marks what is below the fold, so a page with
   no JS — or a screenshot of the first frame — is complete at rest. */
.reveal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .reveal.pending{opacity:0;transform:translateY(22px)}
  .reveal.shown{opacity:1;transform:none;transition:opacity 640ms var(--ease),transform 640ms var(--ease)}
}

/* ---------------------------------------------------------------- hero mesh */
.mesh{position:absolute;inset:-20%;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 46% at 18% 28%, var(--mesh-1), transparent 62%),
    radial-gradient(34% 40% at 82% 22%, var(--mesh-3), transparent 60%),
    radial-gradient(40% 44% at 62% 82%, var(--mesh-2), transparent 62%);
  filter:blur(16px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.8%,0) scale(1.06)}
  100%{transform:translate3d(2.2%,-2%,0) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){.mesh{animation:none}}

/* ---------------------------------------------------------------- carousel */
.carousel{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--panel)}
.car-track{display:flex;transition:transform 620ms var(--ease);will-change:transform}
/* Capped so it never eats the whole first screen. The ratio is back to 16:8;
   with object-fit:contain below, a shorter frame no longer means a tighter
   crop — it just means the picture is drawn smaller. */
.car-slide{min-width:100%;position:relative;aspect-ratio:16/8;
  max-height:min(58vh,470px);display:grid;overflow:hidden;background:var(--panel-3)}
.car-slide > *{grid-area:1/1}
/* contain, not cover: the whole photograph is always visible, whatever shape
   it is. The blurred copy behind fills the leftover space so there are no
   dead bars down the sides.

   These are positioned, NOT grid children with height:100%. In a grid cell
   whose row height is indefinite that percentage does not resolve, the image
   falls back to its own aspect ratio, overflows the slide and gets clipped —
   which looks exactly like the crop we are trying to avoid. Absolute
   positioning resolves the height against .car-slide, which has one. */
.car-slide > img{position:absolute;inset:0;width:100%;height:100%}
.car-img{object-fit:contain;z-index:1}
.car-bg{object-fit:cover;filter:blur(30px) saturate(1.35) brightness(.72);transform:scale(1.15)}
.car-slide > .car-pattern{position:absolute;inset:0;width:100%;height:100%}
.car-cap{align-self:end;position:relative;z-index:2;padding:clamp(18px,3vw,34px);
  /* Weaker and later than before: with the whole photograph on show, a heavy
     gradient was dimming faces in the lower third of it. */
  background:linear-gradient(180deg,transparent 0%,rgba(6,12,24,.42) 42%,rgba(6,12,24,.88) 100%);
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.car-cap .k{display:inline-flex;align-items:center;gap:7px;font-family:var(--fm);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.34);
  border-radius:var(--r-pill);padding:4px 11px;margin-bottom:12px;backdrop-filter:blur(4px)}
.car-cap h3{font-size:clamp(1.1rem,.9rem+1.1vw,1.8rem);color:#fff;margin-bottom:8px;max-width:30ch}
.car-cap p{font-size:.93rem;color:#D6DCE8;max-width:58ch}
.car-cap .meta{font-family:var(--fm);font-size:11px;color:#A9B6CC;margin-top:10px;letter-spacing:.05em}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:rgba(10,17,32,.55);border:1px solid rgba(255,255,255,.26);color:#fff;display:grid;place-items:center;
  cursor:pointer;backdrop-filter:blur(6px);transition:background 200ms,transform 200ms;z-index:3}
.car-btn:hover{background:rgba(10,17,32,.82);transform:translateY(-50%) scale(1.08)}
.car-prev{left:14px} .car-next{right:14px}
.car-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:3}
.car-dots button{width:26px;height:4px;border-radius:3px;border:0;background:rgba(255,255,255,.34);cursor:pointer;
  padding:0;transition:background 200ms,width 200ms}
.car-dots button[aria-current="true"]{background:var(--amber-solid);width:40px}
.car-rail{position:absolute;left:0;bottom:0;height:3px;background:var(--amber-solid);width:0;z-index:3}

/* ---------------------------------------------------------------- course cards */
.course-card{position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;
  transition:transform 320ms var(--ease),border-color 320ms var(--ease),box-shadow 320ms var(--ease)}
.course-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent-c,var(--teal));
  transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease)}
.course-card:hover{transform:translateY(-5px);border-color:var(--accent-c,var(--teal));box-shadow:var(--shadow-lift)}
.course-card:hover::before{transform:scaleX(1)}
.course-code{font-family:var(--fm);font-size:11px;letter-spacing:.13em;color:var(--accent-c,var(--teal));
  display:inline-flex;align-items:center;gap:8px}
.course-code::after{content:"";height:1px;width:26px;background:currentColor;opacity:.45}
.course-card h3{font-size:1.14rem;line-height:1.3}
.course-card p{color:var(--tx2);font-size:.93rem}
.course-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.course-go{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;font-weight:600;
  color:var(--accent-c,var(--teal));margin-top:4px}
.course-go svg{transition:transform 260ms var(--ease)}
.course-card:hover .course-go svg{transform:translateX(4px)}

/* course page */
.course-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);
  background:var(--panel)}
.course-hero .wash{position:absolute;inset:0;opacity:.20;
  background:radial-gradient(60% 120% at 12% 0%, var(--accent-c), transparent 65%)}
.course-hero .wrap{position:relative;padding-block:clamp(36px,5vw,66px)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;margin-top:26px}
.kv div{background:var(--panel);padding:15px 18px}
.kv .k{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;color:var(--tx3);text-transform:uppercase}
.kv .v{font-family:var(--fd);font-weight:600;font-size:1rem;margin-top:6px}

.outcome{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.outcome:last-child{border-bottom:0}
.outcome .n{flex-shrink:0;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--fm);font-size:11px;font-weight:600;
  background:color-mix(in srgb,var(--accent-c,var(--teal)) 18%,transparent);color:var(--accent-c,var(--teal))}
.outcome p{font-size:.95rem;color:var(--tx2)}

.week{display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:16px 0;
  border-bottom:1px solid var(--line-soft);position:relative}
.week:last-child{border-bottom:0}
.week .w{font-family:var(--fm);font-size:11px;letter-spacing:.09em;color:var(--accent-c,var(--teal));padding-top:2px}
.week h4{font-size:1rem;margin-bottom:5px}
.week p{font-size:.92rem;color:var(--tx2)}

/* ---------------------------------------------------------------- blog */
.post-card{display:flex;flex-direction:column;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform 320ms var(--ease),border-color 320ms var(--ease),box-shadow 320ms var(--ease)}
.post-card:hover{transform:translateY(-5px);border-color:var(--accent-c,var(--teal));box-shadow:var(--shadow-lift)}
/* Shorter than 16:9. Safe to do now — with object-fit:contain a flatter
   frame draws the picture smaller rather than cropping it. */
.post-cover{aspect-ratio:16/7;max-height:300px;overflow:hidden;position:relative;background:var(--panel-3)}
/* Same treatment as the carousel: the whole picture on a blurred copy of
   itself. Absolutely positioned for the same reason — height:100% does not
   resolve against a parent whose height comes from aspect-ratio alone. */
.post-cover > img,.post-cover > svg{position:absolute;inset:0;width:100%;height:100%}
.cover-bg{object-fit:cover;filter:blur(24px) saturate(1.3) brightness(.78);transform:scale(1.16)}
.cover-shot{object-fit:contain;z-index:1;transition:transform 620ms var(--ease)}
.post-card:hover .cover-shot{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .cover-shot{transition:none}
  .post-card:hover .cover-shot{transform:none}
}
.post-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-body h3{font-size:1.1rem;line-height:1.32}
.post-body p{color:var(--tx2);font-size:.92rem}
.post-meta{display:flex;gap:12px;align-items:center;font-family:var(--fm);font-size:10.5px;
  color:var(--tx3);letter-spacing:.05em;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft)}

.prose{max-width:70ch}
.prose p{font-size:1.02rem;color:var(--tx2);margin-bottom:18px;line-height:1.75}
.prose h2{font-size:1.32rem;margin:34px 0 12px}
.prose ul{margin:0 0 18px;padding-left:22px;color:var(--tx2)}
.prose li{margin-bottom:8px;font-size:1rem}
.prose a{border-bottom:1px solid color-mix(in srgb,var(--teal-2) 45%,transparent)}

/* ---------------------------------------------------------------- gallery */
/* A GRID, not CSS multi-column. Columns are a masonry layout — staggering the
   boxes is what they are for — so equal-height cards were never possible with
   them. auto-fill + height:100% gives a tidy, even wall. */
.gal{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.gal-item{display:flex;flex-direction:column;height:100%;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--panel);position:relative;
  transition:transform 320ms var(--ease),border-color 320ms var(--ease),box-shadow 320ms var(--ease)}
.gal-item:hover{transform:translateY(-4px) rotate(-.35deg);border-color:var(--accent-c,var(--teal));
  box-shadow:var(--shadow-lift)}
.gal-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--panel-3)}
.gal-media a{position:absolute;inset:0;display:block}
.gal-media img,.gal-media > svg{position:absolute;inset:0;width:100%;height:100%}
.gal-media .cover-shot{transition:transform 620ms var(--ease)}
.gal-item:hover .gal-media .cover-shot{transform:scale(1.05)}
.gal-body{padding:16px 18px;display:flex;flex-direction:column;flex:1}
.gal-body .meta{margin-top:auto;padding-top:10px}
.gal-body h3{font-size:1rem;line-height:1.35;margin-bottom:6px}
.gal-body p{font-size:.88rem;color:var(--tx2)}
.gal-body .meta{font-family:var(--fm);font-size:10px;letter-spacing:.09em;color:var(--tx3);margin-top:10px}
/* above the image layers, which are absolutely positioned and come later */
.gal-badge{position:absolute;z-index:2;left:12px;top:12px;font-family:var(--fm);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(10,17,32,.62);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill);padding:4px 10px;backdrop-filter:blur(5px)}

.lightbox{position:fixed;inset:0;z-index:300;background:rgba(6,11,20,.92);display:grid;place-items:center;
  padding:24px;opacity:0;visibility:hidden;transition:opacity 240ms var(--ease),visibility 240ms}
.lightbox.open{opacity:1;visibility:visible}
.lightbox figure{margin:0;max-width:min(1100px,94vw);max-height:88vh;display:flex;flex-direction:column;gap:14px}
.lightbox img{max-width:100%;max-height:74vh;object-fit:contain;border-radius:var(--r-lg)}
.lightbox figcaption{color:#D6DCE8;font-size:.93rem;text-align:center}
.lightbox figcaption b{display:block;font-family:var(--fd);font-size:1.05rem;color:#fff;margin-bottom:5px}
.lb-close{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.26);color:#fff;cursor:pointer}

/* ---------------------------------------------------------------- section rhythm */
.rainbow-rule{height:3px;border:0;margin:0;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));opacity:.7}
.sec-idx.tinted{color:var(--accent-c,var(--teal-2))}
.sec-idx.tinted::after{background:color-mix(in srgb,var(--accent-c,var(--teal)) 45%,transparent)}

.chipbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chipbar a{font-size:13px;font-weight:500;color:var(--tx2);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 15px;transition:all 200ms var(--ease)}
.chipbar a:hover{border-color:var(--accent-c,var(--teal));color:var(--tx);transform:translateY(-1px);text-decoration:none}
.chipbar a.on{background:var(--accent-c,var(--teal));border-color:var(--accent-c,var(--teal));color:var(--on-accent)}

/* ---------------------------------------------------------------- footer QR */
/* The tall QR block was replaced by .qr-mini in the footer contact row. */

@media (max-width:920px){ .mega{display:none} }
@media (max-width:620px){ .car-btn{width:34px;height:34px} .car-cap{padding:16px} }

/* Nine sections plus a wordmark, a theme switch and a call to action is more
   than a row can hold. Tighten once, then hand over to the drawer well before
   the items reach the brand — cramped is worse than tucked away. */
@media (max-width:1320px){
  nav.routes a{padding:8px 9px;font-size:13.5px}
  .brand-sub{display:none}
}
@media (max-width:1180px){
  nav.routes{display:none}
  .burger{display:grid}
  .dash-btn .lbl{display:none}
  /* nav.routes carried the margin-left:auto that pushed everything right.
     With it hidden, the tools have to take that job or they bunch up
     against the wordmark with the whole right side empty. */
  .cmd-tools{margin-left:auto}
}

/* ============================================================================
   THEME SWITCH — three modes: Light · System · Dark
   The CSS already supports all three (bare :root = dark, a prefers-colour-scheme
   block for light, and explicit [data-theme] overrides in both directions);
   this is the control that drives them.
   ========================================================================== */
.theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pill);flex-shrink:0}
.theme-switch button{width:30px;height:28px;border:0;border-radius:var(--r-pill);background:transparent;
  color:var(--tx3);cursor:pointer;display:grid;place-items:center;padding:0;
  transition:color 200ms var(--ease),background 200ms var(--ease),transform 200ms var(--ease)}
.theme-switch button:hover{color:var(--tx);background:var(--panel-2)}
.theme-switch button[aria-checked="true"]{background:var(--teal-wash);color:var(--teal-2)}
.theme-switch button[aria-checked="true"] svg{transform:scale(1.06)}
.theme-switch button svg{width:15px;height:15px;transition:transform 260ms var(--ease)}
.theme-switch button:active{transform:scale(.92)}

@media (max-width:420px){
  .theme-switch button{width:26px;height:25px}
  .theme-switch button svg{width:13px;height:13px}
}

/* ==========================================================================
   404 — the page a search engine reaches most often after a URL changes.
   It carries real navigation rather than a dead end, so a lost visitor and a
   crawler both find their way to something that exists.
   ========================================================================== */
.err-block{position:relative;overflow:hidden;min-height:68vh;display:grid;align-items:center}
.err-card{position:relative;max-width:70ch}
.err-code{font-family:var(--fd);font-size:clamp(5rem,4rem+12vw,13rem);line-height:.82;
  letter-spacing:-.05em;margin:6px 0 18px;
  background:linear-gradient(115deg,var(--teal-2) 0%,var(--violet) 46%,var(--amber-solid) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;opacity:.9;user-select:none}

.err-links{display:grid;gap:10px;margin-top:40px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,248px),1fr))}
.err-links a{display:flex;flex-direction:column;gap:3px;padding:15px 17px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  text-decoration:none;position:relative;overflow:hidden;
  transition:border-color 240ms var(--ease),transform 240ms var(--ease),background 240ms var(--ease)}
.err-links a:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--teal-2),var(--violet));
  transform:scaleY(0);transform-origin:top;transition:transform 300ms var(--ease)}
.err-links a:hover{border-color:var(--teal-2);background:var(--panel-2);transform:translateY(-2px)}
.err-links a:hover:before{transform:scaleY(1)}
.err-links a span{font-family:var(--fd);font-weight:700;font-size:1rem;color:var(--tx)}
.err-links a em{font-style:normal;font-size:.85rem;color:var(--tx2);line-height:1.45}

@media (prefers-reduced-motion:reduce){
  .err-links a,.err-links a:before{transition:none}
  .err-links a:hover{transform:none}
}

/* Portrait photographs. The .avatar box already clips and sizes itself, so a
   photo just fills it; the initials styling and the hover sweep are suppressed
   because neither belongs on top of a face. */
.avatar.has-photo{background:var(--panel-2);font-size:0}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.has-photo::after{display:none}
/* Portraits are usually shot with headroom, so bias the crop upward. */
.avatar.has-photo img{object-position:center 20%}
@media (max-width:640px){
  .avatar{width:84px;height:84px}
  .avatar.lead{width:132px;height:132px;font-size:38px}
}

/* ==========================================================================
   AREA CARD — an area is a destination now, so the whole card is the link.
   ========================================================================== */
/* height:100% is what makes a row of cards line up: the grid stretches each
   card to the tallest in the row, and margin-top:auto on .p-meta then pins the
   counts and the call to action to the bottom of every one of them. */
.area-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.area-card > p{margin-bottom:2px}
.area-card h3{color:var(--tx)}
.area-card:hover{border-color:var(--accent-c,var(--line-strong))}
/* The tags take the slack, so the counts and the call to action below them
   land on the same line across the whole row however long the summary runs. */
.area-card .tagrow{margin-bottom:auto}
.area-card .p-meta{margin-top:0;padding-top:18px}
.area-card .course-go{margin-top:12px}
.area-card:hover .course-go svg{transform:translateX(4px)}
.area-card .ico{width:44px;height:44px;margin-bottom:16px;transition:transform 300ms var(--ease)}
.area-card:hover .ico{transform:scale(1.08) rotate(-3deg)}

@media (prefers-reduced-motion:reduce){
  .area-card .ico,.area-card:hover .ico,.area-card:hover .course-go svg{transform:none;transition:none}
}

/* ==========================================================================
   COLLABORATOR WALL — who the lab works with, read at a glance rather than
   scanned as table rows. A tile with no uploaded logo shows a lettermark, so
   the grid stays even whether or not a file exists for every partner.
   ========================================================================== */
.logo-wall{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.logo-tile{display:flex;flex-direction:column;gap:2px;height:100%;padding:18px;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.logo-tile:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:var(--accent-c,var(--teal));transform:scaleX(0);transform-origin:left;
  transition:transform 340ms var(--ease)}
a.logo-tile:hover{border-color:var(--accent-c,var(--teal));transform:translateY(-3px);box-shadow:var(--shadow-lift)}
a.logo-tile:hover:before{transform:scaleX(1)}

/* Fixed-height face keeps wildly different logo proportions on one baseline. */
.logo-face{height:62px;display:grid;place-items:center;margin-bottom:12px}
.logo-face img{max-height:100%;max-width:100%;width:auto;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.62;transition:filter 260ms var(--ease),opacity 260ms var(--ease)}
a.logo-tile:hover .logo-face img{filter:none;opacity:1}
:root:not([data-theme="light"]) .logo-face img{filter:grayscale(1) brightness(1.85)}
:root[data-theme="dark"] .logo-face img{filter:grayscale(1) brightness(1.85)}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .logo-face img{filter:grayscale(1)}
}

.logo-mark{font-family:var(--fd);font-weight:700;font-size:30px;letter-spacing:-.02em;
  color:var(--accent-c,var(--teal));opacity:.85}
/* height:100% plus the name taking the slack puts the location and the joint
   count on one baseline across the row, whatever length the names run to. */
.logo-name{font-size:.9rem;font-weight:600;line-height:1.35;color:var(--tx);margin-bottom:auto}
/* Stacked rather than inline: with a row, a short location sat beside the
   count on some tiles and wrapped below it on others, which read as a bug. */
.logo-meta{display:flex;flex-direction:column;gap:3px;align-items:flex-start;margin-top:8px;
  font-family:var(--fm);font-size:10.5px;letter-spacing:.05em;color:var(--tx3);line-height:1.5}
.logo-meta b{color:var(--accent-c,var(--teal));font-weight:600}

@media (prefers-reduced-motion:reduce){
  .logo-tile,.logo-tile:before,.logo-face img{transition:none}
  a.logo-tile:hover{transform:none}
}

/* ==========================================================================
   PROFILE LINKS — where to find a person's work.
   Resting state is quiet so a row of them never competes with the name; the
   colour, the lift and the label all arrive on hover or keyboard focus.
   ========================================================================== */
.plinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

.plink{position:relative;display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
  border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--tx3);
  text-decoration:none;isolation:isolate;
  transition:color 260ms var(--ease),border-color 260ms var(--ease),
             transform 320ms var(--ease),box-shadow 320ms var(--ease)}

/* The accent washes up from the bottom rather than switching on. */
.plink::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pl) 16%,transparent),
                                     color-mix(in srgb,var(--pl) 30%,transparent));
  transform:scaleY(0);transform-origin:bottom;
  transition:transform 340ms cubic-bezier(.2,.9,.25,1)}

.plink svg{width:17px;height:17px;transition:transform 340ms cubic-bezier(.2,.9,.25,1)}

.plink:hover,.plink:focus-visible{color:var(--pl);border-color:var(--pl);
  transform:translateY(-3px);box-shadow:0 6px 18px -8px var(--pl)}
.plink:hover::before,.plink:focus-visible::before{transform:scaleY(1)}
.plink:hover svg,.plink:focus-visible svg{transform:scale(1.12) rotate(-6deg)}
.plink:active{transform:translateY(-1px) scale(.96)}

/* The label rises into place instead of appearing. */
.plink-tip{position:absolute;bottom:calc(100% + 8px);left:50%;
  padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;
  font-family:var(--fm);font-size:10px;letter-spacing:.06em;
  background:var(--tx);color:var(--void);
  opacity:0;transform:translate(-50%,6px) scale(.9);
  transition:opacity 220ms var(--ease),transform 300ms cubic-bezier(.2,.9,.25,1)}
.plink:hover .plink-tip,.plink:focus-visible .plink-tip{opacity:1;transform:translate(-50%,0) scale(1)}

/* Staggered entrance, so a row deals itself out rather than snapping in. */
.reveal.on .plink,.panel-in .plink{animation:plinkIn 460ms var(--ease) backwards;
  animation-delay:calc(var(--i) * 70ms + 120ms)}
@keyframes plinkIn{
  from{opacity:0;transform:translateY(8px) scale(.85)}
  to{opacity:1;transform:none}
}

/* Larger treatment for the director's block. */
.plinks.lead .plink{width:44px;height:44px;border-radius:14px}
.plinks.lead .plink svg{width:19px;height:19px}

@media (prefers-reduced-motion:reduce){
  .plink,.plink::before,.plink svg,.plink-tip{transition-duration:1ms}
  .plink:hover,.plink:focus-visible{transform:none;box-shadow:none}
  .plink:hover svg,.plink:focus-visible svg{transform:none}
  .reveal.on .plink,.panel-in .plink{animation:none}
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,86px) clamp(34px,5vw,54px);
  border-bottom:1px solid var(--line-soft);background:var(--panel)}

/* Three slow drifting colour fields. Cheap (transform only) and it stops the
   header being a flat block behind the headline. */
.aurora{position:absolute;inset:-25%;pointer-events:none;filter:blur(70px);opacity:.5}
.aurora i{position:absolute;display:block;width:46%;padding-top:46%;border-radius:50%}
.aurora i:nth-child(1){background:var(--c1);left:2%;top:6%;animation:drift1 26s ease-in-out infinite}
.aurora i:nth-child(2){background:var(--c3);right:4%;top:0;animation:drift2 32s ease-in-out infinite}
.aurora i:nth-child(3){background:var(--c2);left:38%;bottom:-18%;animation:drift3 29s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:none}50%{transform:translate3d(18%,12%,0) scale(1.15)}}
@keyframes drift2{0%,100%{transform:none}50%{transform:translate3d(-14%,16%,0) scale(.88)}}
@keyframes drift3{0%,100%{transform:none}50%{transform:translate3d(10%,-14%,0) scale(1.12)}}
:root:not([data-theme="light"]) .aurora{opacity:.32}
:root[data-theme="dark"] .aurora{opacity:.32}

.about-h1{position:relative;font-size:clamp(2rem,1.2rem+3.4vw,3.6rem);line-height:1.05;max-width:18ch;margin-top:14px}
/* Each word rises on its own beat. */
.about-h1 span{display:inline-block;margin-right:.28em;
  animation:wordUp 720ms cubic-bezier(.2,.9,.25,1) backwards;
  animation-delay:calc(var(--w) * 90ms + 120ms)}
@keyframes wordUp{from{opacity:0;transform:translateY(24px) rotate(2deg)}to{opacity:1;transform:none}}
.about-lede{position:relative;font-size:1.08rem;color:var(--tx2);max-width:62ch;margin-top:18px;line-height:1.7}

.stat-strip{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.stat-cell{flex:1 1 130px;padding:14px 16px;border-radius:var(--r-lg);background:var(--panel-2);
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:border-color var(--dur),transform var(--dur)}
.stat-cell:before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--sc);
  transform:scaleX(0);transform-origin:left;transition:transform 520ms cubic-bezier(.2,.9,.25,1)}
.stat-cell:hover{border-color:var(--sc);transform:translateY(-3px)}
.stat-cell:hover:before{transform:scaleX(1)}
.stat-cell b{display:block;font-family:var(--fd);font-size:clamp(1.5rem,1.1rem+1.3vw,2.1rem);
  line-height:1;color:var(--sc)}
.stat-cell span{display:block;margin-top:6px;font-family:var(--fm);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx3)}

/* ---- mission / vision ---- */
.mv-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.mv-card:hover{border-color:var(--accent-c);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.mv-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 460ms var(--ease);
  background:radial-gradient(60% 70% at 100% 0%,color-mix(in srgb,var(--accent-c) 20%,transparent),transparent 65%)}
.mv-card:hover .mv-glow{opacity:1}
.mv-ico{position:relative;width:46px;height:46px;color:var(--accent-c);margin-bottom:16px;
  transition:transform 620ms cubic-bezier(.2,.9,.25,1)}
.mv-card:hover .mv-ico{transform:rotate(90deg)}
.mv-card h2{position:relative;font-size:1.4rem;margin:8px 0 14px}
.mv-card .prose{position:relative}

/* ---- goals ---- */
.goal-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr))}
.goal{position:relative;overflow:hidden;padding:24px 22px 26px;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);
  transition:border-color var(--dur),transform var(--dur)}
.goal:hover{border-color:var(--accent-c);transform:translateY(-3px)}
.goal-n{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--accent-c)}
.goal h3{font-size:1.08rem;margin:10px 0 8px}
.goal p{font-size:.93rem;color:var(--tx2);line-height:1.6}
.goal-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent-c);
  transform:scaleX(0);transform-origin:left;transition:transform 560ms cubic-bezier(.2,.9,.25,1)}
.goal:hover .goal-bar{transform:scaleX(1)}

/* ---- equipment ---- */
.kit-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,288px),1fr))}
.kit{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:var(--r-lg);
  background:var(--panel);border:1px solid var(--line);
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.kit:hover{border-color:var(--accent-c);transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.kit-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel-3)}
.kit-media img,.kit-media svg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 720ms cubic-bezier(.2,.9,.25,1)}
.kit:hover .kit-media img{transform:scale(1.07)}
.kit-kind{position:absolute;left:12px;top:12px;font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent-c) 88%,black 12%);color:#fff}
.kit-body{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.kit-body h3{font-size:1.04rem}
.kit-spec{font-family:var(--fm);font-size:11.5px;color:var(--accent-c);letter-spacing:.03em}
.kit-desc{font-size:.9rem;color:var(--tx2);line-height:1.55}
.kit-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:12px;
  font-family:var(--fm);font-size:10px;letter-spacing:.07em;color:var(--tx3);text-transform:uppercase}

/* ---- lab life ---- */
.life-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.life{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;
  border:1px solid var(--line);transition:transform var(--dur),box-shadow var(--dur)}
.life:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.life img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 760ms cubic-bezier(.2,.9,.25,1),filter 460ms var(--ease)}
.life:hover img{transform:scale(1.08)}
.life-cap{position:absolute;inset:auto 0 0 0;padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(9,14,26,.86));color:#fff;
  transform:translateY(8px);opacity:0;transition:transform 380ms var(--ease),opacity 380ms var(--ease)}
.life:hover .life-cap{transform:none;opacity:1}
.life-cap b{display:block;font-family:var(--fd);font-size:.92rem}
.life-cap i{display:block;font-style:normal;font-size:.78rem;opacity:.82;margin-top:2px}

@media (prefers-reduced-motion:reduce){
  .aurora i{animation:none}
  .about-h1 span{animation:none}
  .stat-cell,.mv-card,.mv-ico,.goal,.kit,.kit-media img,.life,.life img,.life-cap{transition:none}
  .stat-cell:hover,.mv-card:hover,.goal:hover,.kit:hover,.life:hover{transform:none}
  .mv-card:hover .mv-ico,.kit:hover .kit-media img,.life:hover img{transform:none}
}

/* ==========================================================================
   VIDEO — poster plus a play button; the player only exists once asked for.
   ========================================================================== */
.vid-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.vid{margin:0;display:flex;flex-direction:column;height:100%}

.vid-frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel-3);
  cursor:pointer;transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)}
.vid-frame:hover{border-color:var(--accent-c);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.vid-poster,.vid-frame > svg{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 760ms cubic-bezier(.2,.9,.25,1),filter 420ms var(--ease)}
.vid-frame:hover .vid-poster{transform:scale(1.05);filter:brightness(.88)}

/* play button */
.vid-play{position:absolute;inset:0;margin:auto;width:66px;height:66px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;color:var(--void);
  background:var(--accent-c);box-shadow:0 10px 30px -10px rgba(0,0,0,.55);
  transition:transform 340ms cubic-bezier(.2,.9,.25,1),background 260ms var(--ease)}
.vid-play svg{width:26px;height:26px;margin-left:3px;position:relative}
.vid-frame:hover .vid-play{transform:scale(1.1)}
.vid-play:active{transform:scale(.94)}
.vid-play:focus-visible{outline:3px solid var(--tx);outline-offset:4px}

/* a ring that pulses outward, so the button reads as "press me" */
.vid-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent-c);
  animation:vidPulse 2.6s var(--ease) infinite}
@keyframes vidPulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

.vid-badge,.vid-time{position:absolute;font-family:var(--fm);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(9,14,26,.72);color:#fff;backdrop-filter:blur(6px)}
.vid-badge{left:12px;top:12px}
.vid-time{right:12px;bottom:12px;letter-spacing:.04em;text-transform:none}

/* once playing, the poster furniture gets out of the way */
.vid-frame.playing{cursor:default;transform:none}
.vid-frame.playing .vid-poster,
.vid-frame.playing > svg,
.vid-frame.playing .vid-play,
.vid-frame.playing .vid-badge,
.vid-frame.playing .vid-time{display:none}
.vid-player{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}

.vid-cap{padding:14px 2px 0}
.vid-cap h3{font-size:1.02rem;line-height:1.35}
.vid-cap p{font-size:.9rem;color:var(--tx2);margin-top:5px;line-height:1.55}

@media (prefers-reduced-motion:reduce){
  .vid-ring{animation:none}
  .vid-frame,.vid-poster,.vid-play{transition:none}
  .vid-frame:hover{transform:none}
  .vid-frame:hover .vid-poster,.vid-frame:hover .vid-play{transform:none}
}

/* ==========================================================================
   ARTICLE PROSE — a research write-up needs structure, not a wall of text.
   ========================================================================== */
.prose.article{font-size:1.04rem;line-height:1.78;color:var(--tx2);max-width:72ch}
.prose.article > * + *{margin-top:1.15em}

/* the opening paragraph carries a little more weight */
.prose.article .lead-p{font-size:1.16rem;line-height:1.7;color:var(--tx);font-weight:450}

.prose.article h2,.prose.article h3,.prose.article h4{color:var(--tx);position:relative}
.prose.article h2{font-size:clamp(1.3rem,1.1rem+.9vw,1.75rem);margin-top:2.1em;padding-top:.7em;
  line-height:1.25;border-top:1px solid var(--line-soft)}
/* a short coloured tick above each section, so the eye finds them scrolling */
.prose.article h2::before{content:"";position:absolute;top:-1px;left:0;width:46px;height:3px;
  border-radius:2px;background:linear-gradient(90deg,var(--accent-c,var(--teal)),transparent)}
.prose.article h3{font-size:1.16rem;margin-top:1.8em;color:var(--teal-2)}
.prose.article h4{font-size:1.02rem;margin-top:1.5em;font-family:var(--fm);letter-spacing:.02em;
  text-transform:uppercase;font-size:.82rem;color:var(--tx3)}

.prose.article strong{color:var(--tx);font-weight:650}
.prose.article em{font-style:italic}
.prose.article a{color:var(--teal-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--teal-2) 40%,transparent);
  transition:text-decoration-color 200ms var(--ease)}
.prose.article a:hover{text-decoration-color:var(--teal-2)}

.prose.article ul,.prose.article ol{padding-left:0;list-style:none}
.prose.article li{position:relative;padding-left:26px;margin-top:.55em}
.prose.article ul li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--accent-c,var(--teal));transform:rotate(45deg)}
.prose.article ol{counter-reset:pl}
.prose.article ol li{counter-increment:pl}
.prose.article ol li::before{content:counter(pl);position:absolute;left:0;top:.06em;
  font-family:var(--fm);font-size:.76em;font-weight:600;color:var(--accent-c,var(--teal))}

/* a quotation should look like one */
.prose.article blockquote{position:relative;margin-top:1.8em;padding:22px 26px 22px 30px;
  border-left:3px solid var(--accent-c,var(--teal));border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:var(--panel-2);overflow:hidden}
.prose.article blockquote::before{content:"\201C";position:absolute;right:14px;top:-14px;
  font-family:var(--fd);font-size:92px;line-height:1;color:var(--accent-c,var(--teal));opacity:.14}
.prose.article blockquote p{position:relative;font-size:1.1rem;line-height:1.6;color:var(--tx);
  font-style:italic;margin:0}
.prose.article blockquote cite{display:block;margin-top:12px;font-style:normal;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.07em;color:var(--tx3)}
.prose.article blockquote cite::before{content:"— "}

.prose.article code{font-family:var(--fm);font-size:.87em;padding:2px 6px;border-radius:5px;
  background:var(--panel-3);border:1px solid var(--line-soft);color:var(--teal-2)}
.prose.article pre{margin-top:1.5em;padding:18px 20px;border-radius:var(--r-lg);overflow-x:auto;
  background:var(--panel-3);border:1px solid var(--line)}
.prose.article pre code{padding:0;border:0;background:none;color:var(--tx);font-size:.86rem;line-height:1.65}

.prose.article figure{margin-top:1.9em}
.prose.article figure img{width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line)}
.prose.article figcaption{margin-top:9px;font-size:.85rem;color:var(--tx3);text-align:center}

.prose.article hr{border:0;height:1px;margin:2.4em 0;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}

/* The article's feature image, shown at its own proportions. */
.post-hero-img{display:block;width:100%;height:auto;
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg)}

/* Safety net. An <img> with a height attribute but only `width` in CSS gets
   stretched to that attribute's height — which is how the article hero came
   to be squashed. Anything the author supplies keeps its own ratio unless a
   rule deliberately sizes both axes (object-fit covers do). */
.prose.article img,.post-hero-img,.about-hero ~ .wrap img{height:auto}

/* ==========================================================================
   ABOUT — HISTORY. A narrative panel rather than a bare column of text:
   a sticky label on one side, a tinted rail and a drop cap on the other.
   ========================================================================== */
.story-block{position:relative;overflow:hidden}
.story-wash{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 12% 0%,var(--teal-wash),transparent 60%),
             radial-gradient(50% 60% at 88% 100%,color-mix(in srgb,var(--c3) 12%,transparent),transparent 62%)}
.story{position:relative;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(24px,5vw,60px);align-items:start}

.story-side{position:sticky;top:96px}
.story-side h2{font-size:clamp(1.3rem,1.1rem+.9vw,1.8rem);margin-top:10px;line-height:1.2}
.story-mark{width:52px;height:52px;margin-top:22px;color:var(--teal-2);opacity:.85}
.story-since{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.story-since b{display:block;font-family:var(--fd);font-size:2rem;line-height:1;color:var(--amber)}
.story-since span{display:block;margin-top:6px;font-family:var(--fm);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx3)}

.story-text{position:relative;padding-left:clamp(20px,2.5vw,30px);max-width:66ch}
.story-text::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--teal-2),var(--c3) 55%,var(--amber))}

/* a drop cap on the opening paragraph */
.story-text .lead-p::first-letter{float:left;font-family:var(--fd);font-weight:700;
  font-size:3.4em;line-height:.82;padding:4px 12px 0 0;color:var(--teal-2)}

@media (max-width:820px){
  .story{grid-template-columns:1fr;gap:22px}
  .story-side{position:static}
  .story-mark{display:none}
}
@media (prefers-reduced-motion:reduce){ .story-side{position:static} }