/* ───────────────────────────────────────────────────────────────────────────
   CECSC / CESCS homepage concept — plain CSS, no framework, no runtime.

   Palette: the egas.studio tokens (cecsc/tokens/colors.css). Nothing new.
   One rule governs colour: the climate-stripe ramp is the time axis.
   Cool blues mark the long record; the warm end (orange tint, orange-red,
   deep red) is reserved for the present and projections, and used nowhere else.

   Tiers: .tier-lead (full-bleed, display headings), .tier-standard,
   .tier-ref (compact reference material). Tiers set block padding only;
   .wrap sets inline padding. Nothing else pads a section, so they cannot collide.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-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+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:100 900;font-stretch:62% 125%;font-display:swap;
  src:url("fonts/archivo-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:"Liberation Serif";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/liberation-serif-regular.woff2") format("woff2")}
@font-face{font-family:"Liberation Serif";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/liberation-serif-bold.woff2") format("woff2")}
@font-face{font-family:"Liberation Serif";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/liberation-serif-italic.woff2") format("woff2")}

:root{
  --navy-deep:#0D1635;
  --navy:#002545;
  --blue:#075294;
  --blue-mid:#2F99D3;
  --blue-light:#9DD9F1;
  --cream:#F3EFE7;
  --white:#FFFFFF;
  --ink:#000000;
  --ink-soft:#4A5563;          /* 7.6:1 on white, 6.9:1 on cream */
  --rule:#D9DDE4;
  --rule-cream:#D6CFC1;
  --rule-dark:rgba(157,217,241,.24);
  --on-dark:#FFFFFF;
  --on-dark-soft:#B9DDF0;      /* 12:1 on deep navy */
  --warm-1:#FF9868;
  --warm-2:#FF4934;
  --warm-3:#C80024;

  --serif:"Liberation Serif","Times New Roman",Times,serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --wrap:1240px;
  --pad-x:clamp(20px,4vw,40px);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 1.125rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--blue-mid);outline-offset:3px}
sup{font-size:.68em;line-height:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:12px 18px;background:var(--navy);color:var(--white);font-weight:600;text-decoration:none;border-radius:4px}
.skip:focus{left:var(--pad-x);color:var(--white)}

/* ── Type scale ───────────────────────────────────────────────────────────── */
.display{font:700 clamp(3rem,7.2vw,6.75rem)/.98 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.h-lead{font:700 clamp(2.5rem,5vw,4rem)/1.03 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.h-standard{font:700 clamp(2rem,3.6vw,2.75rem)/1.08 var(--serif);letter-spacing:-.02em;text-wrap:balance}
.h-ref{font:700 clamp(1.625rem,2.4vw,2rem)/1.12 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.h-item{font:700 clamp(1.5rem,2.2vw,1.875rem)/1.12 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.lead{font-size:clamp(1.1875rem,1.5vw,1.3125rem);line-height:1.55;max-width:54ch;text-wrap:pretty}
.prose{max-width:64ch;text-wrap:pretty}

/* ── Tiers and grounds ────────────────────────────────────────────────────── */
.tier-lead{padding-block:clamp(80px,10vw,136px)}
.tier-standard{padding-block:clamp(64px,8vw,104px)}
.tier-ref{padding-block:clamp(56px,6vw,80px)}
.bg-cream{background:var(--cream)}
.bg-navy{background:var(--navy);color:var(--on-dark)}
/* The deeper navy of the page heads: used where a dark section sits directly above the navy footer,
   so the two read as separate blocks. */
.bg-navy-deep{background:var(--navy-deep);color:var(--on-dark)}
.rule-top{border-top:1px solid var(--rule)}

.section-head{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:16px clamp(40px,6vw,96px);align-items:end;margin-bottom:clamp(40px,5vw,64px);
}
.section-head p{max-width:54ch;color:var(--ink-soft);text-wrap:pretty}
.tier-ref .section-head{margin-bottom:clamp(28px,3vw,40px)}
@media (max-width:860px){.section-head{grid-template-columns:1fr}}

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:30;background:var(--white);border-bottom:1px solid var(--rule)}
.header-row{display:flex;align-items:center;gap:8px 32px;min-height:76px}
.brand{display:block;padding-block:8px}
.brand img{height:50px;width:auto}
.nav{margin-left:auto;display:flex;gap:4px}
.nav a{
  display:inline-flex;align-items:center;height:44px;padding:0 12px;
  font:500 .9375rem/1 var(--sans);color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.lang-switch{
  display:inline-flex;align-items:center;height:40px;padding:0 14px;
  font:500 .9375rem/1 var(--sans);color:var(--blue);text-decoration:none;
  border:1px solid var(--rule);border-radius:4px;white-space:nowrap;
}
.lang-switch:hover{border-color:var(--blue);color:var(--blue)}

@media (max-width:900px){
  .header-row{flex-wrap:wrap;min-height:0;gap:0;padding-block:6px}
  .brand{order:1;padding-block:4px}
  .brand img{height:40px}
  .lang-switch{order:2;margin-left:auto}
  .nav{
    order:3;width:calc(100% + 24px);margin:6px -12px 0;padding-top:2px;
    border-top:1px solid #EDEFF3;overflow-x:auto;scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{height:42px;flex:0 0 auto}
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;color:var(--on-dark);
  background:radial-gradient(ellipse 85% 95% at 66% 34%,#12547E 0%,#0B3A6B 46%,var(--navy-deep) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(157,217,241,.22) 1px,transparent 1.2px);background-size:10px 10px;
  -webkit-mask-image:linear-gradient(118deg,#000 0%,transparent 32%,transparent 72%,#000 100%);
          mask-image:linear-gradient(118deg,#000 0%,transparent 32%,transparent 72%,#000 100%);
}
.hero-grid{
  position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(24px,4vw,64px);align-items:center;
  padding-block:clamp(72px,9vw,128px) clamp(64px,7vw,96px);
}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero .display{max-width:12.5ch}
.hero .lead{color:var(--blue-light)}
.hero-symbol{justify-self:end;width:100%;max-width:560px}
.actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:4px}
.button{
  display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:4px;
  font:600 1rem/1.2 var(--sans);text-decoration:none;
}
.button-light{background:var(--white);color:var(--navy)}
.button-light:hover{background:var(--cream);color:var(--navy)}
.link-light{color:var(--white);font:500 1rem/1.3 var(--sans);text-decoration-color:rgba(255,255,255,.5);text-underline-offset:.32em}
.link-light:hover{color:var(--white);text-decoration-color:var(--white)}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr}
  .hero-symbol{order:-1;justify-self:start;max-width:200px}
}

/* ── The record: Holocene chart ───────────────────────────────────────────── */
.record{
  background:var(--navy-deep);color:var(--on-dark);border-top:1px solid var(--rule-dark);
  padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,104px);
}
.record .section-head p{color:var(--on-dark-soft)}
.chart{
  position:relative;
  --chart-h:452px; --axis-top:216px; --axis-h:22px; --stem-up:30px; --stem-down:40px;
}
.chart-note{margin-top:32px;max-width:80ch;font-size:.875rem;line-height:1.55;color:var(--on-dark-soft)}

.ev-date{display:block;font:600 .875rem/1.3 var(--sans);font-stretch:90%;font-variant-numeric:tabular-nums;color:var(--white)}
.ev-text{display:block;margin-top:4px;font:400 .9375rem/1.42 var(--sans);color:var(--on-dark-soft);text-wrap:pretty}
.ev-warm .ev-date{color:var(--warm-1)}   /* the present and projections only */

.band{height:100%}
.band-break{background:repeating-linear-gradient(135deg,var(--cream) 0 3px,var(--navy-deep) 3px 6px)}

@media (min-width:1100px){
  .chart{height:var(--chart-h)}
  .chart-eras,.chart-axis,.chart-marks,.chart-ticks,.events{position:absolute;left:0;right:0}
  .chart-eras{top:0;height:20px}
  .era{position:absolute;left:calc(var(--x) * 1%);font:600 .8125rem/1.2 var(--sans);font-stretch:92%;color:var(--blue-light);white-space:nowrap}
  .chart-axis{top:var(--axis-top);height:var(--axis-h);display:flex}
  .chart-marks{top:var(--axis-top);height:var(--axis-h);z-index:3}
  .mark{position:absolute;top:50%;left:calc(var(--x) * 1%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--white);box-shadow:0 0 0 3px var(--navy-deep)}
  /* Spans are outlined, not filled: a filled bar hid the deep red band that marks the present. */
  .mark-span{top:0;height:100%;width:calc((var(--x2) - var(--x)) * 1%);margin:0;border-radius:3px;background:transparent;box-shadow:inset 0 0 0 2px var(--white),0 0 0 2px var(--navy-deep)}
  .chart-ticks{top:calc(var(--axis-top) + var(--axis-h) + 8px);height:16px;z-index:2}
  .tick{
    position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);padding:0 4px;background:var(--navy-deep);
    font:500 .75rem/1.3 var(--sans);font-stretch:88%;font-variant-numeric:tabular-nums;color:var(--on-dark-soft);white-space:nowrap;
  }
  .tick-start{transform:none;padding-left:0}
  .tick-end{transform:translateX(-100%);padding-right:0}
  .events{top:0;bottom:0;z-index:1}
  .ev{position:absolute;left:calc(var(--x) * 1%);width:14.5%}
  .ev-up{bottom:calc(var(--chart-h) - var(--axis-top) + var(--stem-up))}
  .ev-down{top:calc(var(--axis-top) + var(--axis-h) + var(--stem-down))}
  .ev-end{transform:translateX(-100%);text-align:right}
  .ev::before{content:"";position:absolute;left:0;width:1px;background:rgba(157,217,241,.6)}
  .ev-up::before{top:100%;height:var(--stem-up)}
  .ev-down::before{bottom:100%;height:var(--stem-down)}
  .ev-end::before{left:auto;right:0}
  .ev-era{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Below 1100px the chart becomes an ordered list with the stripe running down its side. */
@media (max-width:1099.98px){
  .chart-eras,.chart-axis,.chart-marks,.chart-ticks{display:none}
  .ev{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:20px;padding-block:14px}
  .ev::before{content:"";grid-column:1;grid-row:1 / span 3;background:var(--c);border-radius:3px}
  .ev-era{grid-column:2;display:block;margin:6px 0 8px;font:600 .8125rem/1.2 var(--sans);color:var(--blue-light)}
  .ev-date,.ev-text{grid-column:2}
}

/* ── The question ─────────────────────────────────────────────────────────── */
.question-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.question-sub{margin-top:20px;max-width:34ch;font:400 clamp(1.25rem,1.8vw,1.5rem)/1.4 var(--sans);color:var(--ink-soft);text-wrap:pretty}
.fact{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--rule)}
/* Present-day warming, so it takes the warm end of the ramp. */
.fact-figure{font:700 clamp(4.5rem,8vw,6.5rem)/.82 var(--serif);letter-spacing:-.04em;color:var(--warm-3)}
.fact p{flex:1 1 260px;max-width:36ch;text-wrap:pretty}
.question-text{display:flex;flex-direction:column;gap:1em}
.quote{
  margin-top:clamp(56px,7vw,88px);padding-left:clamp(20px,3vw,32px);border-left:4px solid var(--blue);
  max-width:38ch;font:italic 400 clamp(1.625rem,2.8vw,2.25rem)/1.3 var(--serif);text-wrap:balance;
}
@media (max-width:860px){.question-grid{grid-template-columns:1fr}}

/* ── Research directions ──────────────────────────────────────────────────── */
.directions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.direction{display:flex;flex-direction:column;gap:18px;padding-inline:clamp(20px,3vw,40px);border-left:1px solid var(--rule-cream)}
.direction:first-child{padding-left:0;border-left:0}
.direction:last-child{padding-right:0}
.span-bar{position:relative;height:10px}
.span-track,.span-fill{position:absolute;inset:0;display:flex}
.span-track{opacity:.28}
.span-fill{clip-path:inset(0 calc(100% - var(--x2) * 1%) 0 calc(var(--x) * 1%))}
.span-bar .band-break{background:var(--cream)}
.span-caption{margin-top:-8px;font:500 .875rem/1.4 var(--sans);color:var(--ink-soft)}
.direction p{text-wrap:pretty}
.direction .more{margin-top:auto;padding-top:6px;font-weight:600}
@media (max-width:960px){
  .directions{grid-template-columns:1fr;gap:56px}
  .direction,.direction:first-child,.direction:last-child{padding-inline:0;border-left:0}
}

/* ── Disciplines ──────────────────────────────────────────────────────────── */
.disciplines-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px clamp(40px,6vw,96px);align-items:start}
.disciplines-grid p{margin-top:16px;max-width:36ch;color:var(--ink-soft)}
.discipline-list{display:flex;flex-wrap:wrap;row-gap:4px;font:700 clamp(1.75rem,3.4vw,3rem)/1.2 var(--serif);letter-spacing:-.02em}
.discipline-list li{margin-right:.3em}
.discipline-list li:not(:last-child)::after{content:","}
@media (max-width:860px){.disciplines-grid{grid-template-columns:1fr}}

/* ── Infrastructure ───────────────────────────────────────────────────────── */
/* The claim and its explanation sit on one row; type sizes are the lead-tier defaults. */
.infra-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(40px,6vw,96px);align-items:end}
.infra-lead{color:var(--on-dark-soft)}
@media (max-width:860px){.infra-head{grid-template-columns:1fr}}

/* ── Results ──────────────────────────────────────────────────────────────── */
.results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(40px,6vw,96px)}
.results-grid h3{margin-bottom:14px;font:600 1rem/1.3 var(--sans);color:var(--ink-soft)}
.plain-list li{padding-block:12px;border-top:1px solid var(--rule);font-size:1.1875rem;line-height:1.45;text-wrap:pretty}
.plain-list li:last-child{border-bottom:1px solid var(--rule)}
@media (max-width:860px){.results-grid{grid-template-columns:1fr}}

/* ── Work packages (reference) ────────────────────────────────────────────── */
.wp-list{border-top:1px solid var(--rule)}
.wp{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,6fr);gap:6px clamp(24px,4vw,56px);padding-block:22px;border-bottom:1px solid var(--rule)}
.wp-code{font:600 .9375rem/1.45 var(--sans);font-variant-numeric:tabular-nums;color:var(--blue)}
.wp-title{font:700 1.25rem/1.25 var(--serif);text-wrap:pretty}
.wp-lead{margin-top:6px;font-size:.9375rem;color:var(--ink-soft)}
.wp-body{font-size:1rem;line-height:1.58;text-wrap:pretty}
@media (max-width:860px){.wp{grid-template-columns:52px minmax(0,1fr)}.wp-body{grid-column:2}}

/* ── Consortium (reference) ───────────────────────────────────────────────── */
.partner-list{border-top:1px solid var(--rule-cream)}
.partner{display:grid;grid-template-columns:152px minmax(0,5fr) minmax(0,6fr);gap:12px clamp(24px,4vw,56px);align-items:center;padding-block:22px;border-bottom:1px solid var(--rule-cream)}
.partner-logo{display:grid;place-items:center;height:80px;padding:10px 16px;background:var(--white);border:1px solid var(--rule-cream)}
.partner-logo img{max-height:56px;width:auto;max-width:100%;object-fit:contain}
.partner-name{font:700 1.25rem/1.25 var(--serif);text-wrap:pretty}
.partner-role{margin-top:4px;font-size:.9375rem;color:var(--ink-soft)}
.partner-text{font-size:1rem;line-height:1.58;text-wrap:pretty}
@media (max-width:860px){
  .partner{grid-template-columns:104px minmax(0,1fr);align-items:start}
  .partner-logo{height:64px;padding:8px 10px}
  .partner-logo img{max-height:44px}
  .partner-text{grid-column:1 / -1}
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer{background:var(--navy);color:var(--on-dark);padding-block:64px 32px}
.footer-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,3fr);gap:40px}
.footer-logo{width:200px;height:auto}
.footer-desc{margin-top:18px;max-width:34ch;font-size:.9375rem;line-height:1.55;color:var(--on-dark-soft)}
.footer-h{margin-bottom:12px;font:600 .9375rem/1.3 var(--sans);color:var(--blue-light)}
.footer-links li + li{margin-top:8px}
.footer-links{font-size:.9375rem}
.footer-links a{color:var(--white);text-decoration:none}
.footer-links a:hover{color:var(--white);text-decoration:underline}
.footer-base{margin-top:48px;padding-top:20px;border-top:1px solid var(--rule-dark);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:.8125rem;color:var(--on-dark-soft)}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}


/* ── Inner pages ─────────────────────────────────────────────────────────────
   Research, Team and Dissemination share one page head: the homepage hero's
   navy and halftone at a fraction of the height, title left, lead right. */
h4{margin:0}
.label{font:600 1rem/1.3 var(--sans);color:var(--ink-soft)}

.page-head{
  position:relative;overflow:hidden;color:var(--on-dark);
  background:radial-gradient(ellipse 90% 130% at 72% 0%,#12547E 0%,#0B3A6B 48%,var(--navy-deep) 100%);
  padding-block:clamp(64px,8vw,112px) clamp(56px,7vw,96px);
}
.page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(157,217,241,.22) 1px,transparent 1.2px);background-size:10px 10px;
  -webkit-mask-image:linear-gradient(118deg,#000 0%,transparent 30%,transparent 74%,#000 100%);
          mask-image:linear-gradient(118deg,#000 0%,transparent 30%,transparent 74%,#000 100%);
}
.page-head > .wrap{position:relative}
.page-head-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px clamp(40px,6vw,96px);align-items:end}
.page-lead{color:var(--blue-light);max-width:62ch}
@media (max-width:860px){.page-head-grid{grid-template-columns:1fr}}

/* ── Research: depth-of-time overview in the page head ───────────────────── */
.span-overview{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule-dark)}
.so-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:10px clamp(24px,4vw,56px);align-items:center;padding-block:18px;border-bottom:1px solid var(--rule-dark)}
.so-title{font:700 1.375rem/1.2 var(--serif);color:var(--white);text-decoration:none}
.so-title:hover{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.so-caption{display:block;margin-top:4px;font-size:.875rem;line-height:1.4;color:var(--on-dark-soft)}
.so-bar{height:12px}
.so-bar .span-track{opacity:.34}
.so-ticks{display:none}
@media (min-width:1100px){
  .so-ticks{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(24px,4vw,56px);padding-top:10px}
  .so-scale{position:relative;height:18px}
  .so-scale .tick{
    position:absolute;left:calc(var(--x) * 1%);transform:translateX(-50%);padding:0;background:transparent;
    font:500 .75rem/1.3 var(--sans);font-stretch:88%;font-variant-numeric:tabular-nums;color:var(--on-dark-soft);white-space:nowrap;
  }
  .so-scale .tick-start{transform:none}
  .so-scale .tick-end{transform:translateX(-100%)}
}
@media (max-width:860px){.so-row{grid-template-columns:1fr}}

/* ── Research: one section per direction ─────────────────────────────────── */
.dir-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,96px);align-items:start}
.dir-side{display:flex;flex-direction:column;gap:16px}
.dir-span{height:12px;margin-top:6px}
.dir-wp{margin-top:18px;padding-top:20px;border-top:1px solid var(--rule)}
.bg-cream .dir-wp{border-top-color:var(--rule-cream)}
.dir-wp .label{margin-bottom:8px}
.dir-wp-title{font:700 1.25rem/1.28 var(--serif);text-wrap:pretty}
.dir-wp-title .wp-code{margin-right:.5em;vertical-align:.08em}
.dir-wp-lead{margin-top:6px;font-size:.9375rem;color:var(--ink-soft)}
.dir-text{font-size:clamp(1.125rem,1.4vw,1.25rem);line-height:1.62;max-width:62ch;text-wrap:pretty}
.objectives-label{margin-top:clamp(32px,4vw,48px);margin-bottom:12px}
.objectives{border-top:1px solid var(--rule)}
.objective{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;padding-block:16px;border-bottom:1px solid var(--rule)}
.bg-cream .objectives,.bg-cream .objective{border-color:var(--rule-cream)}
.obj-code{font:600 .9375rem/1.6 var(--sans);font-variant-numeric:tabular-nums;color:var(--blue)}
.objective p{font-size:1rem;line-height:1.6;max-width:62ch;text-wrap:pretty}
@media (max-width:860px){.dir-grid{grid-template-columns:1fr}}

/* ── Team ────────────────────────────────────────────────────────────────── */
.leaders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(40px,6vw,96px)}
.leader{display:flex;flex-direction:column;gap:10px}
.person-inst{font-size:1rem;line-height:1.45;color:var(--ink-soft)}
.person-bio{max-width:58ch;text-wrap:pretty}
.leader .person-bio{margin-top:6px}
@media (max-width:860px){.leaders{grid-template-columns:1fr}}

.board-list{border-top:1px solid var(--rule-cream)}
.board-member{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px clamp(24px,4vw,56px);align-items:baseline;padding-block:18px;border-bottom:1px solid var(--rule-cream)}
.board-name{font:700 1.25rem/1.25 var(--serif)}
.board-inst{font-size:1rem;color:var(--ink-soft)}
@media (max-width:700px){.board-member{grid-template-columns:1fr}}

.leads-title{margin-bottom:clamp(32px,4vw,48px)}
.people-group + .people-group{margin-top:clamp(48px,6vw,72px)}
.people-group > .label{margin-bottom:10px}
/* Biographies differ a lot in length, so people flow in columns rather than rows of equal height. */
.people{columns:2;column-gap:clamp(40px,6vw,96px)}
.person{break-inside:avoid;padding-block:22px;border-top:1px solid var(--rule)}
.person-name{font:700 1.375rem/1.2 var(--serif)}
.person-role{margin-top:4px;font:600 .9375rem/1.4 var(--sans);color:var(--blue)}
.person .person-inst{margin-top:2px;font-size:.9375rem}
.person .person-bio{margin-top:10px;font-size:1rem;line-height:1.6}
@media (max-width:860px){.people{columns:1}}

/* ── Dissemination ───────────────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px clamp(40px,6vw,96px)}
.empty{margin-top:20px;padding-top:20px;border-top:1px solid var(--rule);max-width:44ch;color:var(--ink-soft)}
.col-text{margin-top:20px}
.updates{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(40px,6vw,96px);align-items:end}
.updates p{max-width:52ch;color:var(--on-dark-soft)}
.updates .actions{margin-top:20px}
@media (max-width:860px){.two-col,.updates{grid-template-columns:1fr}}

/* ── Motion: one moment ───────────────────────────────────────────────────── */
/* The stripe axis draws from the oldest record to 2100 once, on load.
   Everything else is still. Nothing is ever hidden waiting for an animation. */
@media (prefers-reduced-motion:no-preference){
  .chart-axis{animation:axis-draw 1.4s cubic-bezier(.2,0,0,1) .2s both}
  @keyframes axis-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print{
  .site-header,.skip,.lang-switch,.hero-symbol{display:none}
  .hero,.record,.bg-navy,.site-footer{background:none;color:#000}
  .hero .lead,.record .section-head p,.ev-text,.infra-lead,.footer-desc,.footer-base{color:#333}
  .ev-date,.footer-links a{color:#000}
}