/* ==========================================================================
   NelvaBio — site.css
   Single accent. No hardcoded colour outside :root (see §1).
   Contrast rules are load-bearing, not stylistic — see §2.
   ========================================================================== */

/* §1 — Tokens ------------------------------------------------------------ */
:root{
  /* the five brand colours, per CLAUDE.md */
  --ink:#0A0A0A;
  --paper:#FFFFFF;
  --pale:#F1F1EF;
  --magenta:#E5006D;
  --gray:#6E7377;

  /* channel triplets so hairlines derive from the tokens above
     instead of re-stating a colour value */
  --ink-rgb:10,10,10;
  --paper-rgb:255,255,255;

  --rule:rgba(var(--ink-rgb),.16);
  --rule-soft:rgba(var(--ink-rgb),.06);
  --rule-inv:rgba(var(--paper-rgb),.22);
  --rule-inv-soft:rgba(var(--paper-rgb),.09);

  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --maxw:1320px;
  --gutter:clamp(20px,4vw,40px);
  --sec-y:clamp(56px,7.5vw,104px);
  --nav-h:64px;
}

/* §2 — Contrast contract -------------------------------------------------
   Measured against WCAG 2.1 AA, small text = 4.5:1, large = 3:1.

     magenta on paper  4.61  PASS small
     magenta on ink    4.29  FAIL small / PASS large
     magenta on pale   4.08  FAIL small / PASS large
     gray    on paper  4.79  PASS small
     gray    on ink    4.13  FAIL small
     gray    on pale   4.24  FAIL small
     pale    on ink   17.51  PASS
     ink     on pale  17.51  PASS

   Therefore, without introducing a second accent:
     - on INK  grounds: small text is --pale or --paper. Never gray, never magenta.
     - on PALE grounds: small text is --ink. Never gray, never magenta.
     - magenta small text appears on --paper only.
     - magenta at display size (>=24px, or >=18.66px bold) is allowed anywhere.
   ------------------------------------------------------------------------ */

/* §3 — Self-hosted faces -------------------------------------------------
   Archivo and Inter are fetched by get-fonts.command in the Website folder,
   which pulls the exact latin / latin-ext woff2 files Google serves a modern
   browser. Until they exist the stacks in Sec 1 carry the page. Never swap in a
   hosted font service - CLAUDE.md hard rule 5 forbids third-party requests. */
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/archivo-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('../assets/fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/jetbrains-mono-400.woff2') format('woff2');
}

/* §4 — Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  font-family:var(--body);font-size:16px;line-height:1.55;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  font-family:var(--mono);font-size:12px;padding:12px 18px;
  background:var(--magenta);color:var(--paper);
}
.skip:focus{left:0}
.vh{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* §5 — Grid -------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
header,main,footer{position:relative;z-index:1}

/* §6 — Section furniture ------------------------------------------------- */
.sec{border-top:1px solid var(--rule);padding-block:var(--sec-y)}
.sec-head{margin-bottom:clamp(28px,4vw,48px)}
.sec-num{
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--magenta);                 /* paper ground — 4.61:1, passes */
  padding-top:14px;border-top:2px solid var(--magenta);
  display:inline-block;margin-bottom:22px;
}
.sec h2,.sec h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(26px,3.4vw,44px);line-height:1.04;letter-spacing:-.025em;
  max-width:24ch;
}
.lede{font-size:clamp(16px,1.5vw,18px);max-width:62ch;margin-top:20px}
.body-col p+p{margin-top:16px}
.body-col{max-width:64ch}

/* ground variants */
.on-ink{background:var(--ink);color:var(--paper)}
.on-ink .sec-num{color:var(--pale);border-top-color:var(--magenta)}   /* §2 */
.on-ink .rule{background:var(--rule-inv)}
.on-pale{background:var(--pale)}
/* §2 — on pale, small text is ink only. Magenta (4.08) and gray (4.24) both
   fail there. The magenta rule above the heading stays: it is a non-text
   element and clears the 3:1 bar. */
.on-pale .muted,
.on-pale .sec-num,
.on-pale .principal .role,
.on-pale .pkg .n,
.on-pale .pkg .d,
.on-pale .col-label{color:var(--ink)}
.muted{color:var(--gray)}                /* paper ground only */

/* §7 — Header ------------------------------------------------------------ */
.site-head{
  position:sticky;top:0;z-index:40;
  background:var(--paper);border-bottom:1px solid var(--ink);
}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h)}
.wordmark{display:flex;align-items:baseline;gap:2px;font-family:var(--display);
  font-weight:800;font-size:20px;letter-spacing:-.03em}
/* on-paper variant of the mark, sitting in the sticky header */
.wordmark img{height:22px;width:auto;align-self:center;margin-right:10px}
.wordmark .bio{color:var(--magenta)}
.wordmark .sub{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gray);margin-left:12px;
}
.nav-list{display:flex}
.nav-list a{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:0 clamp(10px,1.2vw,18px);line-height:var(--nav-h);
  border-left:1px solid var(--rule);
}
.nav-list a:hover,.nav-list a:focus-visible{background:var(--magenta);color:var(--paper)}
.burger{
  display:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;background:none;border:1px solid var(--ink);
  padding:9px 14px;cursor:pointer;color:var(--ink);
}
.mobile-nav{display:none}

/* §8 — Hero -------------------------------------------------------------- */
.hero{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink)}
.hero{position:relative;overflow:hidden;--hero-img:min(50vw,820px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  padding-block:clamp(48px,7vw,92px);
  /* Reserved space and image width must come from the same value, or the
     headline ends up underneath the picture. Slightly wider than the image
     so there is always a gap, never an overlap. */
  padding-right:min(52vw,900px);
}
.hero .mark{width:clamp(84px,9vw,124px);margin-bottom:clamp(24px,3vw,36px)}
.hero .lockup{font-family:var(--display);font-weight:800;
  font-size:clamp(34px,4.4vw,56px);letter-spacing:-.035em;line-height:1}
.hero .lockup .bio{color:var(--magenta)}
.hero .lockup-sub{
  font-family:var(--mono);font-size:clamp(9px,1vw,11px);letter-spacing:.36em;
  text-transform:uppercase;color:var(--pale);margin-top:12px;   /* §2 */
}
.hero h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4.2vw,54px);line-height:1.03;letter-spacing:-.03em;
  margin-top:clamp(30px,4vw,48px);max-width:18ch;
}
.hero h1 .sig{color:var(--magenta)}      /* display size — §2 permits on ink */
.hero .descriptor{
  font-family:var(--mono);font-size:12px;line-height:2;letter-spacing:.06em;
  text-transform:uppercase;color:var(--pale);                    /* §2 */
  margin-top:clamp(24px,3vw,34px);padding-top:20px;
  border-top:1px solid var(--rule-inv);max-width:52ch;
}
/* The still bleeds off the right edge of the section. No border, no panel —
   its left edge is already faded to --ink in the file itself, so it dissolves
   into the ground rather than ending on a line. */
.hero-media{position:absolute;top:0;right:0;height:100%;
  width:var(--hero-img);pointer-events:none}
/* contain, not cover: the image is wider than the panel, and cover would crop
   the reference cell off the edge. The file's own ground is already --ink, so
   the space above and below it is invisible. */
.hero-media img{width:100%;height:100%;object-fit:contain;object-position:right center}
.slot{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:20px;line-height:2;
}
.slot-ink{color:var(--pale)}
.slot-pale{background:var(--pale);color:var(--ink);border:1px solid var(--rule)}

/* §9 — Reusable pieces --------------------------------------------------- */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
/* Gutter is applied once per side, not twice to the second column — otherwise
   its content box is narrower than the first and the portraits mismatch. */
.two-col>*{padding-block:clamp(24px,3vw,36px)}
.two-col>*:first-child{padding-right:clamp(24px,3vw,36px)}
.two-col>*+*{border-left:1px solid var(--rule);padding-left:clamp(24px,3vw,36px)}
/* Written as .sec .col-label so it out-specifies ".sec h2" — these labels are
   h2 elements for document structure, but they are labels, not display type. */
.sec .col-label,.col-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:10px;line-height:1.6;max-width:none;
}
.on-ink .col-label,.on-pale .col-label{color:var(--ink)}
.on-ink .col-label{color:var(--pale)}
.col h3{font-family:var(--display);font-weight:800;font-size:clamp(18px,2vw,24px);
  letter-spacing:-.02em;line-height:1.12;margin-bottom:6px}
.who{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:20px;
}
.list li{padding:12px 0;border-top:1px solid var(--rule);font-size:15px}

/* Full-width lists run to ~130 characters a line at 1440, which is well past
   readable. Two columns keeps the hairline rules and halves the measure. */
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,3.5vw,56px)}
@media (max-width:900px){ .cols2{grid-template-columns:1fr} }

.pkg-group+.pkg-group{margin-top:clamp(32px,4vw,52px)}
.pkg-group h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--ink);
}
.pkg{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:clamp(16px,2vw,32px);
  padding:20px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.pkg .n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--magenta)}
.pkg .t{font-family:var(--display);font-weight:800;font-size:clamp(16px,1.7vw,20px);
  letter-spacing:-.015em;line-height:1.2}
.pkg .d{font-size:14.5px;color:var(--gray);margin-top:7px;max-width:70ch}

.principal .portrait{
  aspect-ratio:1/1;background:var(--pale);margin-bottom:22px;overflow:hidden;
}
.principal .portrait img{width:100%;height:100%;object-fit:cover}
.principal .role{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta);margin-bottom:8px;
}
.principal h3{font-family:var(--display);font-weight:800;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em;margin-bottom:14px}

.eng li{padding:18px 0;border-top:1px solid var(--rule)}
.eng strong{font-weight:600}

.contact-block{max-width:62ch}
.talk{
  display:inline-block;margin-top:clamp(28px,4vw,44px);
  font-family:var(--display);font-weight:800;
  font-size:clamp(40px,7vw,92px);line-height:.95;letter-spacing:-.04em;
  color:var(--magenta);              /* display size — clears 3:1 on ink */
  border-bottom:4px solid var(--magenta);padding-bottom:.06em;
  transition:color .15s,border-color .15s;
}
.talk:hover,.talk:focus-visible{color:var(--paper);border-bottom-color:var(--paper)}
.talk .arrow{display:inline-block;transition:transform .18s}
.talk:hover .arrow{transform:translateX(.12em)}

/* Hero call to action. Small text on an ink ground, so per §2 the type is
   --paper and the magenta lives in the rule underneath it, never in the
   glyphs. Mono at descriptor size so it reads as part of the label system
   rather than a shrunken copy of the display .talk. */
.hero .talk-sm{
  display:inline-block;margin-top:clamp(22px,2.6vw,30px);
  font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper);
  border-bottom:2px solid var(--magenta);padding-bottom:9px;
  transition:border-color .15s;
}
.hero .talk-sm:hover,.hero .talk-sm:focus-visible{border-bottom-color:var(--paper)}
.hero .talk-sm .arrow{display:inline-block;transition:transform .18s}
.hero .talk-sm:hover .arrow{transform:translateX(.2em)}

.refs{border-top:1px solid var(--rule)}
.refs div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.refs dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink)}
.refs dd{font-size:14px;word-break:break-word}
.refs dd a{border-bottom:1px solid var(--rule)}
.refs dd a:hover{border-bottom-color:var(--magenta)}

/* TODO markers — deliberately visible, per CLAUDE.md */
.todo{
  display:block;font-family:var(--mono);font-size:11px;line-height:1.7;
  letter-spacing:.04em;padding:12px 14px;margin-top:14px;
  border:1px dashed var(--magenta);color:var(--ink);background:var(--paper);
}
.on-ink .todo{background:var(--ink);color:var(--pale)}

/* §10 — Footer ----------------------------------------------------------- */
.site-foot{background:var(--ink);color:var(--paper);padding-block:clamp(40px,5vw,64px)}
.foot-grid{display:flex;flex-wrap:wrap;gap:20px 48px;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pale)}
.motto{font-family:var(--display);font-weight:800;font-size:clamp(18px,2.4vw,28px);
  letter-spacing:-.025em;text-transform:none;max-width:22ch;color:var(--paper);
  margin-bottom:clamp(28px,3.5vw,44px)}

/* §11 — Motion ----------------------------------------------------------- */
.rv{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

/* §12 — Breakpoints ------------------------------------------------------ */
@media (max-width:900px){
    .nav-list{display:none}
  .burger{display:block}
  .mobile-nav{display:block;border-top:1px solid var(--rule)}
  .mobile-nav[hidden]{display:none}
  .mobile-nav a{display:block;font-family:var(--mono);font-size:12px;
    letter-spacing:.16em;text-transform:uppercase;padding:16px var(--gutter);
    border-bottom:1px solid var(--rule)}
  .mobile-nav a:hover,.mobile-nav a:focus-visible{background:var(--magenta);color:var(--paper)}
  .hero-grid{padding-right:0}
  .hero-media{position:static;width:100%;height:auto;aspect-ratio:848/703;
    margin-top:clamp(28px,5vw,40px)}
  .two-col{grid-template-columns:1fr}
  .two-col>*:first-child{padding-right:0}
  .two-col>*+*{border-left:0;padding-left:0;border-top:1px solid var(--rule)}
  .refs div{grid-template-columns:1fr;gap:4px}
  }
@media (max-width:520px){
  .pkg{grid-template-columns:1fr;gap:6px}
  .wordmark .sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media print{.site-head,.hero-media{display:none}}


/* Sec 13 - Jobs ------------------------------------------------------------- */
.job-search{display:flex;align-items:center;gap:14px;max-width:44rem;
  border:1px solid var(--ink);padding:0 18px;background:var(--paper)}
.job-search:focus-within{outline:2px solid var(--magenta);outline-offset:2px}
.job-search svg{flex:none;width:17px;height:17px;stroke:var(--gray);
  fill:none;stroke-width:2}
.job-search input{
  flex:1;border:0;outline:0;background:none;font-family:var(--body);
  font-size:16px;color:var(--ink);padding:17px 0;min-width:0;
}
.job-search input::placeholder{color:var(--gray)}
.job-count{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray);margin-top:16px}

.job-list{margin-top:clamp(28px,4vw,44px);border-top:1px solid var(--rule)}
/* with no roles the list draws a rule above the empty state's own rule --
   two hairlines with nothing between them */
.job-list:empty{margin-top:0;border-top:0}
.job{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;
  align-items:start;padding:26px 0;border-bottom:1px solid var(--rule)}
.job h2{font-family:var(--display);font-weight:800;
  font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;line-height:1.15}
.job .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);margin-top:9px}
.job .d{font-size:14.5px;color:var(--gray);margin-top:10px;max-width:66ch}
.job a.apply{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--ink);padding:12px 18px;
  white-space:nowrap}
.job a.apply:hover,.job a.apply:focus-visible{background:var(--magenta);
  color:var(--paper);border-color:var(--magenta)}

.job-empty{border-top:1px solid var(--ink);margin-top:clamp(28px,4vw,44px);
  padding:clamp(44px,7vw,84px) 0}
.job-empty h2{font-family:var(--display);font-weight:800;
  font-size:clamp(24px,3.4vw,40px);letter-spacing:-.03em;line-height:1.05;
  max-width:20ch}
.job-empty p{font-size:16px;color:var(--gray);max-width:56ch;margin-top:18px}
.job-empty .cta{display:inline-block;margin-top:26px;font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--magenta);padding-bottom:5px;color:var(--ink)}
.job-empty .cta:hover,.job-empty .cta:focus-visible{color:var(--magenta)}
@media (max-width:640px){
  .job{grid-template-columns:1fr}
  .job a.apply{justify-self:start}
}

/* §13 — 2026 layer -------------------------------------------------------
   Everything here is native CSS. No library, no polyfill, and the reveal
   block below lets site.js drop its IntersectionObserver entirely, so this
   section is net-negative on JavaScript.
   ------------------------------------------------------------------------ */

/* Cross-document view transitions. Two declarations do what a client-side
   router would otherwise be imported to do. The wordmark is named, so it
   persists across the navigation instead of fading out and back in — the
   page changes underneath a mark that never moves. */
@view-transition{navigation:auto}
.wordmark{view-transition-name:wordmark}
::view-transition-group(*){animation-duration:.34s}

/* Typographic finish. balance stops a 54px headline dropping a single
   orphan word onto its last line; pretty does the same for body copy. */
h1,h2,h3,.talk,.fold-t{text-wrap:balance}
p,li,figcaption,dd{text-wrap:pretty}

/* Scroll progress. The header is already sticky; this gives it a hairline
   that reports position in an 8,000px document. Driven by the document's own
   scroll timeline — no listener, no rAF, nothing on the main thread. */
@supports (animation-timeline:scroll()){
  .site-head::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--magenta);transform:scaleX(0);transform-origin:0 50%;
    animation:scroll-progress linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes scroll-progress{to{transform:scaleX(1)}}
}

/* Reveals, natively. Same effect as the observer in site.js, driven by each
   element's own view timeline and run on the compositor. */
@supports (animation-timeline:view()){
  .rv{animation:rv-in linear both;animation-timeline:view();
      animation-range:entry 4% entry 46%;transition:none}
  @keyframes rv-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* Package rows. Eleven items are scanned, not read. The rule is a scanning
   aid and nothing else moves, so it never reads as a click affordance. */
.pkg{transition:border-color .2s}
.pkg:hover{border-bottom-color:var(--magenta)}

/* Portraits. Two photographs taken at different times in different light,
   put into one tonal system. Neutral monochrome, no tint: the accent stays
   scarce and the pictures stay honest. */
.principal .portrait{background:var(--ink)}
.principal .portrait img{filter:grayscale(1) contrast(1.06) brightness(1.01)}

/* Grain. 850 bytes of tiled noise at 2.5% over the two black fields — the
   difference between screen black and printed ink. */
.hero,.figures,.sec.on-ink,.site-foot{position:relative}
.hero::after,.figures::after,.sec.on-ink::after,.site-foot::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAADGUlEQVR42q1ZSYLDIAxD/P/PmkM7CWB5S5rDTBcKxMiy5IBDXBwYHPi+ij/V1z7inGX5D37ejHRKb+r6L+X4+f0PM+z/73lh8PqGA9cvWdqA2ew8FnWGHZNAjEN437xWwH6D8woqwlDb+HQufFfgEsUlAkhPOg4jyxuEffcPQox3l4/6c2OwGGAxzCyDCxLKWNBzgBAG/ZDpw9KGuM2BMKe+R5CfeyfD+V0UFWSBmgWH4a73OJEbmUvgKTJ9LKF8F50zUt/1wGc4rx/azv2sZQHFazh3kpMQl4VxzE8VAZ3THQw0xk7B2jqn0aBllNAwxhichqcgB5rQuSWnWg0/o3EeQS14XKgL7i9Lc80geCwHm4ZN86hxJyImJ/eUilIIT7E4zd+ciliCI6MjyFQBiyppBCBOilGHVvE88/fxMxGjlPcKV+nSPRxq8E7xMYwuYChSEJIzRHFmVo5/XnQ7VIyWGGMg3lCZoQ/Cp6XnNnbbZ7MsJLIUY/IbCG7EWozUAkoDePcLh8xpZtq2MQN+1xmvF9Ax2IMOgRB4GODvqCauLE9kOZuGHFkaUhAKg2JcM+QMXNIyu25QvCGjpnacR5uh4vUjWq4J9eWmp+vsYlUH5xuEZp224kzpbOv9opy44BZxDD7TA8hbT0/1gMRpYMFpWlX1pk27GD31hq1yzKQuKKr92QYoq/ynK0g3SfGga7blmX8Euhqw3VHV3ol3l4zNNp1vU1HKiOM25hZEq2BZtBpc9AASVb3NEWVBpSe+F6cH1XQKkOUC6/QIlGa0xKGxPdc2fIjuv45BISYeCN/ScwbV6/VMeh69vgdd73gX64Pa7v4Afkevl+rzO0zXd7Y/0H0AE7UjEZj8TQ+whF06es9WBhwG1zbBoVRx5H3pIr9Dys4zI9/TY9vxWYCyZwo0nsmWLlaNSd+oMGl6baKUaRMS8hMGUlbJU25GFbcewAYVLGkUaeXT98GKbilP4SkiJNIboS3X+omZnrgxED3tHe2Oebm16W2gyv3vTNxYOySljk7aL+x0WqCtmd81PZ8rZcWKAVqu6w/9JqUUS/S8RgAAAABJRU5ErkJggg==");
  background-size:128px 128px;opacity:.025;
}

/* §14 — The handover ----------------------------------------------------
   One line is the programme; the four rings are the points at which it
   changes hands. Positions are even, not chronological — the copy's claim is
   that these are the same event, not a sequence, and the drawing must not
   quietly say otherwise. Rules and type only, so it stays sharp at any
   density and reads as the ordered list and sentence it already is. */
.diagram{margin-top:clamp(36px,4.5vw,58px);max-width:62rem}
.tl-ends{display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gray);margin-bottom:12px}
.tl{list-style:none;position:relative;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(12px,1.6vw,26px);
  border-top:1px solid var(--ink)}
.tl-i{position:relative;padding-right:10px}

/* Each point is a control, not an ornament: it names a handover and opens the
   packages that answer it. A button so it is reachable by keyboard, focusable,
   and announced as pressable — the ring is only its visible part. */
.tl-btn{position:relative;display:block;width:100%;padding:32px 10px 0 0;
  background:none;border:0;text-align:left;font:inherit;color:inherit;
  cursor:pointer;-webkit-appearance:none;appearance:none}
.tl-btn::before{content:"";position:absolute;left:6px;top:11px;
  width:1px;height:15px;background:var(--rule);transition:background .18s}
.tl-btn:hover::before,.tl-btn.on::before{background:var(--magenta)}
.tl-btn:focus-visible{outline:2px solid var(--magenta);outline-offset:6px}
.tl-dot{position:absolute;top:-7.5px;left:0;width:13px;height:13px;
  border-radius:50%;border:2px solid var(--magenta);background:var(--paper);
  box-shadow:0 0 0 5px rgba(229,0,109,.09);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.tl-btn:hover .tl-dot,.tl-btn:focus-visible .tl-dot{
  transform:scale(1.5);box-shadow:0 0 0 8px rgba(229,0,109,.13)}
.tl-btn.on .tl-dot{transform:scale(1.5);background:var(--magenta);
  box-shadow:0 0 0 8px rgba(229,0,109,.17)}
.tl-t{transition:color .18s}
.tl-btn:hover .tl-t,.tl-btn:focus-visible .tl-t,.tl-btn.on .tl-t{color:var(--magenta)}

/* The panel holds its height from the start, so opening a point never shoves
   the rest of the section down the page. */
/* Reserve about a row so selecting a point does not shove the fold below it
   down the page — but not the full three rows, which left a visible hole
   under the hint once the pull-quote came out. */
.tl-panel{margin-top:clamp(28px,3.2vw,38px);padding-top:20px;
  border-top:1px solid var(--ink);min-height:92px}
.tl-hint,.tl-panel-h{font-family:var(--mono);font-size:10px;line-height:1.8;
  letter-spacing:.18em;text-transform:uppercase}
.tl-hint{color:var(--gray)}
.tl-panel-h{color:var(--magenta);margin-bottom:4px}
.tl-link{display:grid;grid-template-columns:40px minmax(0,1fr) 22px;gap:14px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule);
  transition:border-color .18s}
.tl-link:hover,.tl-link:focus-visible{border-bottom-color:var(--magenta)}
.tl-link:focus-visible{outline:2px solid var(--magenta);outline-offset:4px}
.tl-link-n{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--magenta)}
.tl-link-t{font-family:var(--display);font-weight:800;
  font-size:clamp(15px,1.6vw,18px);letter-spacing:-.015em;line-height:1.25}
.tl-link-a{display:inline-block;justify-self:end;font-size:14px;color:var(--gray);
  transition:transform .18s,color .18s}
.tl-link:hover .tl-link-a{color:var(--magenta);transform:translateX(3px)}

/* Arriving at a package row from the line: the row says so, briefly. */
@keyframes pkg-flash{0%,100%{background:transparent}
  16%{background:rgba(229,0,109,.075)}}
.pkg.flash{animation:pkg-flash 1.9s ease;border-bottom-color:var(--magenta)}
.tl-t{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;line-height:1.65;text-transform:uppercase;color:var(--ink)}
.diagram figcaption{display:block;margin-top:clamp(26px,3vw,36px);
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--rule)}
.tl-cap{display:block;font-family:var(--mono);font-size:10px;line-height:1.8;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);max-width:56ch}
@media (max-width:820px){
  /* Horizontal runs out of room long before the labels do, so the axis
     stands up and the rings hang off it. */
  .tl{grid-template-columns:1fr;gap:20px 0;padding-left:30px;
      margin-left:6px;border-top:0;border-left:1px solid var(--ink)}
  .tl-i{padding-right:0}
  .tl-btn{padding:0 0 0 0}
  .tl-dot{top:1px;left:-36.5px}
  .tl-panel{min-height:0}
  .tl-btn::before{display:none}
  .tl-ends{display:none}
}

/* Reduced motion. A view-timeline animation ignores animation-duration, so
   the global duration override upstream cannot reach it — the reveal has to
   be switched off by name. */
@media (prefers-reduced-motion:reduce){
  .rv{animation:none!important;opacity:1;transform:none}
  .tl-dot{transition:none}
  .pkg.flash{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none!important}
}

/* §16 — Folds ------------------------------------------------------------
   Native <details>. No library, no state to manage, keyboard and screen
   reader support for free, and the content sits in the DOM whether it is
   open or not — so it is indexed and findable either way.

   interpolate-size lets height animate to and from `auto`, which is what
   makes a disclosure feel built rather than bolted on. Browsers without
   ::details-content simply open and close instantly; nothing breaks. */
:root{interpolate-size:allow-keywords}

.fold{margin-top:clamp(34px,4.2vw,54px)}
.fold>summary{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:clamp(16px,2.4vw,40px);padding:clamp(15px,1.7vw,21px) 0;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);
  transition:border-bottom-color .2s;
}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::marker{content:""}
.fold>summary:hover{border-bottom-color:var(--magenta)}
.fold>summary:focus-visible{outline:2px solid var(--magenta);outline-offset:5px}
.fold-h{display:block;min-width:0}
.fold-t{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,2.1vw,26px);line-height:1.1;letter-spacing:-.024em;
  color:var(--ink);max-width:26ch}
.fold-m{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;
  line-height:1.7;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}

/* A plus that becomes a minus: two rules, one of which collapses. The same
   hairline vocabulary the rest of the page is drawn with. */
.fold-i{position:relative;display:block;width:16px;height:16px;flex:none}
.fold-i::before,.fold-i::after{content:"";position:absolute;background:var(--ink);
  transition:transform .34s cubic-bezier(.22,.61,.36,1),background .2s}
.fold-i::before{left:0;top:7.25px;width:16px;height:1.5px}
.fold-i::after{left:7.25px;top:0;width:1.5px;height:16px}
.fold[open] .fold-i::after{transform:scaleY(0)}
.fold>summary:hover .fold-i::before,
.fold>summary:hover .fold-i::after{background:var(--magenta)}

.fold-body{padding-top:clamp(20px,2.4vw,30px)}
.fold::details-content{
  height:0;overflow:clip;content-visibility:hidden;
  transition:height .44s cubic-bezier(.22,.61,.36,1),
             content-visibility .44s allow-discrete;
}
.fold[open]::details-content{height:auto;content-visibility:visible}

@media (prefers-reduced-motion:reduce){
  .fold::details-content{transition:none}
  .fold-i::before,.fold-i::after{transition:none}
}

/* Eleven packages stacked one per row is a long scroll for what is really a
   menu. Two columns halve the height without deleting a word — and the words
   are where every ICH, USP and CTD reference on the site lives. Numbering
   still reads left to right, then down. A group holding a single package
   (the lifecycle one) spans both columns rather than sitting half-width. */
@media (min-width:1024px){
  .fold-body .pkg-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(30px,3.4vw,56px)}
  .fold-body .pkg-group>h3{grid-column:1/-1}
  .fold-body .pkg-group>.pkg:nth-child(2):last-child{grid-column:1/-1}
  .fold-body .pkg .d{max-width:56ch}
}

/* §17 — Records list on an ink ground -------------------------------------
   .refs was built for paper: its terms are --ink and its rules are ink-based,
   both of which vanish on black. The /call page uses it on ink. */
.on-ink .refs,
.on-ink .refs div{border-color:var(--rule-inv)}
.on-ink .refs dt{color:var(--pale)}                       /* §2: pale on ink */
.on-ink .refs dd a{border-bottom-color:var(--rule-inv)}
.on-ink .refs dd a:hover,
.on-ink .refs dd a:focus-visible{border-bottom-color:var(--magenta)}

/* §18 — Footer note -------------------------------------------------------
   A standing claim about the site, so it sits under the footer grid on every
   page and links to the policy that substantiates it. Pale on ink per §2. */
.foot-note{margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(16px,2vw,22px);
  border-top:1px solid var(--rule-inv-soft);
  font-family:var(--mono);font-size:10px;line-height:1.8;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pale)}
.foot-note a{border-bottom:1px solid var(--rule-inv);padding-bottom:2px}
.foot-note a:hover,.foot-note a:focus-visible{border-bottom-color:var(--magenta)}

/* §19 — Two actions in the hero -------------------------------------------
   The booking link keeps the magenta rule; the mail link drops to a quiet one
   so the pair reads as primary and alternative rather than as a choice. */
.talk-row{display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:clamp(18px,2.4vw,38px)}
.hero .talk-sm-alt{border-bottom-color:var(--rule-inv)}
.hero .talk-sm-alt:hover,
.hero .talk-sm-alt:focus-visible{border-bottom-color:var(--paper)}
.talk-under{margin-top:clamp(22px,2.6vw,30px)}
.talk-under a{font-family:var(--mono);font-size:11px;line-height:1.6;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pale);
  border-bottom:1px solid var(--rule-inv);padding-bottom:7px;
  transition:border-color .15s}
.talk-under a:hover,.talk-under a:focus-visible{border-bottom-color:var(--magenta)}
.talk-under .arrow{display:inline-block;transition:transform .18s}
.talk-under a:hover .arrow{transform:translateX(.2em)}