/* Complex AI Institute - design system v3 "Trust Light"
   Salmon institutional ground, ink typography, orange + mesh-green accents.
   Playfair Display display, Hanken Grotesk body, Archivo for tracked-caps labels
   (institutional grotesk); Georgia/Fraunces for essay prose. */

/* ---------- faces (FT register: Financier-like display, Metric-like sans, Georgia prose) ---------- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/PlayfairDisplay-400-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/PlayfairDisplay-400-italic.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/PlayfairDisplay-500-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/HankenGrotesk-300-800-normal.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:italic;font-weight:300 800;font-display:swap;
  src:url('../fonts/HankenGrotesk-300-800-italic.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('../fonts/Archivo-300-800-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Poppins-400-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Poppins-500-normal.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Poppins-600-normal.woff2') format('woff2')}

:root{
  --paper:#FFF1E5; --ground:#F8E5D0; --panel:#FBEBDC; --wash:#F2DFCE;
  --ink:#0A1020; --ink-soft:#2A3040; --muted:#525A6B; --faint:#5F6878;
  --accent:#C24300; --accent-lit:#D14900; --accent-deep:#C24300; --accent-ink:#7A2900;
  --mesh:#06D6A0; --mesh-deep:#067D5C; --mesh-ink:#04543F;
  --gold:#FFD166;
  --line:#EBD9C4; --line-mid:#DDC7AD; --line-accent:rgba(194,67,0,.4);
  --shadow:none;              /* flat cards: tonal fill + hairline, no depth */
  --shadow-lift:none;
  --display:'Playfair Display',Georgia,serif;
  --sans:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --label:'Archivo','Segoe UI',system-ui,sans-serif;
  --wordmark:'Poppins','Century Gothic',var(--sans);
  --wrap:1180px; --measure:64ch; --r-card:8px; --r-el:7px;
  --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --overlay-ink:linear-gradient(180deg,rgba(10,16,32,0) 34%,rgba(10,16,32,.82) 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:-.006em;line-height:1.1}
p{margin:0 0 1.2rem}
a{color:inherit}
img{max-width:100%;height:auto}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
section[id],div[id],figure[id]{scroll-margin-top:90px}

/* ---------- type utilities ---------- */
.eyebrow{font-family:var(--label);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mesh-deep);font-weight:500}
.kicker{font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mesh-deep)}
.lede{font-size:1.16rem;color:var(--muted);line-height:1.7;font-weight:400}
.measure{max-width:var(--measure)}

/* ---------- buttons & links ---------- */
.btn{display:inline-block;font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;padding:1rem 1.75rem;border:1px solid var(--ink);color:var(--ink);border-radius:var(--r-el);
  position:relative;overflow:hidden;transition:color .3s,border-color .3s;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn:hover{color:#fff}
.btn:hover::before{transform:translateY(0)}
.btn.primary{background:var(--mesh);border-color:var(--mesh);color:var(--ink)}
.btn.primary::before{background:var(--ink)}
.btn.primary:hover{color:#fff}
.btn.primary:hover{border-color:var(--ink)}
.quiet-link{font-family:var(--sans);font-size:.88rem;font-weight:600;text-decoration:none;
  color:var(--accent-deep);padding-bottom:3px;background:linear-gradient(var(--accent),var(--accent)) left bottom/0% 2px no-repeat;
  transition:background-size .35s cubic-bezier(.2,.6,.2,1),color .25s}
.quiet-link:hover{background-size:100% 2px;color:var(--accent-ink)}

/* ---------- header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--ground);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-head.scrolled{border-bottom-color:var(--line);background:rgba(248,229,208,.90);
  backdrop-filter:blur(10px)}
.site-head .mast{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:19px 0}
.wordmark{text-decoration:none;display:flex;align-items:center;gap:13px}
.site-nav{display:flex;gap:28px;font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.site-nav a{text-decoration:none;color:var(--muted);transition:color .25s;padding:4px 0}
.site-nav a:hover{color:var(--accent-deep)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--accent)}
.nav-toggle{display:none;background:none;border:1px solid var(--line-mid);color:var(--ink);
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;padding:.6rem 1rem;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{position:relative;min-height:94vh;display:grid;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--paper)}
/* full-bleed hero video, ungraded; the mesh map rides on top of it */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;opacity:1}
#field{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.hero .graticule{position:absolute;inset:0;pointer-events:none;opacity:.6;z-index:1;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(10,16,32,.035) 80px),
    repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(10,16,32,.035) 80px)}
.hero .veil{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:none}
/* motion is decorative here: hold the poster frame instead when the user asks for less motion */
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}
  .hero{background:var(--paper) url('../img/hero-loop-poster.jpg') center/cover no-repeat}}
.hero .inner{position:relative;z-index:2;padding:170px 0 130px;pointer-events:none}
.hero .inner a{pointer-events:auto}
.hero h1{font-size:clamp(2.8rem,6.3vw,5.5rem);max-width:11em;font-weight:500;color:var(--ink)}
.hero h1 i{color:var(--accent-deep);font-style:normal}
.hero .lede{max-width:40em;margin:2rem 0 2.6rem;font-size:1.2rem}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-foot{position:absolute;bottom:0;left:0;right:0;z-index:2;border-top:1px solid var(--line);
  background:var(--ground)}
.hero-foot .row{display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-family:var(--label);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.hero-foot .cell{padding:15px 0}

/* ticker */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:var(--ground);padding:14px 0;white-space:nowrap}
.ticker .track{display:inline-block;font-family:var(--label);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint)}
.js .ticker .track{animation:tick 46s linear infinite}
.ticker .track b{color:var(--accent-deep);font-weight:500}
.ticker .track span{margin:0 2.2em}
@keyframes tick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker .track{animation:none!important}
  .hero h1 .w span{animation:none!important;transform:none}}

/* page-load rise + scroll reveal */
.js .rise{opacity:0;transform:translateY(16px)}
.js .rise{animation:rise .95s cubic-bezier(.2,.65,.2,1) forwards}
.rise.d1{animation-delay:.14s}.rise.d2{animation-delay:.3s}.rise.d3{animation-delay:.46s}.rise.d4{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
.js .rev{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo);transition-delay:calc(var(--i,0)*90ms)}
.rev.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise,.rev{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}}

/* ---------- sections ---------- */
section{padding:110px 0;border-top:1px solid var(--line);position:relative;background:var(--paper)}
section.flush{border-top:none}
section.tinted{background:var(--ground)}
.sec-mark{font-family:var(--label);font-size:.62rem;letter-spacing:.28em;color:var(--faint);
  text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:1.2rem}
.sec-mark::after{content:"";height:1px;flex:0 0 56px;background:var(--mesh)}
.sec-head{margin-bottom:54px;display:grid;gap:16px}
.sec-head h2{font-size:clamp(2rem,4vw,3.3rem)}
.sec-head .sub{color:var(--muted);max-width:46em;font-size:1.05rem}

/* thesis split */
.thesis{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
.thesis blockquote{margin:0;font-family:var(--display);font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.18;
  font-weight:400;letter-spacing:-.006em;border-left:3px solid var(--accent);padding-left:32px;color:var(--ink)}
.thesis blockquote i{color:var(--accent-deep);font-style:normal}
.thesis .body p{color:var(--muted);font-size:1.03rem}

/* bridge */
.bridge{background:var(--ground)}
.bridge-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.bridge h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.bridge h2 i{color:var(--accent-deep);font-style:normal}
.bridge p{color:var(--muted)}
.bridge svg{width:100%;height:auto;display:block}
.bridge .dash{stroke-dasharray:5 7}
.js .bridge .dash{animation:dashflow 2.6s linear infinite}
@keyframes dashflow{to{stroke-dashoffset:-48}}
@media(prefers-reduced-motion:reduce){.bridge .dash{animation:none!important}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:42px 36px;position:relative;
  box-shadow:var(--shadow);transition:box-shadow .35s,transform .35s}
.pillar:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.pillar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pillar:hover::after{transform:scaleY(1)}
.pillar .kicker{display:block;margin-bottom:1.2rem;color:var(--faint)}
.pillar h3{font-size:1.65rem;margin-bottom:.75rem}
.pillar p{font-size:.94rem;color:var(--muted);margin:0}

/* insight cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* The insights index runs eight cards, so it wraps rather than forcing three. */
.idx + .cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;position:relative;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .35s,transform .35s;will-change:transform}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-5px);border-color:rgba(6,214,160,.5)}
.card .art{height:130px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:var(--wash)}
.card .art canvas{position:absolute;inset:0;width:100%;height:100%}
.card .body{padding:26px 28px 30px;display:flex;flex-direction:column;gap:13px;flex:1}
.card h3{font-family:var(--sans);font-weight:700;font-size:1.18rem;line-height:1.3;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:.91rem;margin:0;flex:1}
.card .go{font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--accent-deep)}

/* insight index rows */
.idx{border-top:1px solid var(--line)}
.idx a{display:grid;grid-template-columns:200px 1fr auto;gap:32px;align-items:baseline;
  padding:32px 8px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .25s,padding .25s}
.idx a:hover{background:var(--ground);padding-left:16px}
.idx h3{font-size:1.65rem}
.idx h3 span{display:block;font-family:var(--sans);font-weight:400;font-size:.95rem;color:var(--muted);margin-top:.5rem;letter-spacing:0;line-height:1.6}
.idx .go{font-family:var(--sans);font-weight:600;color:var(--accent-deep);font-size:.9rem}

/* fellows */
.fellows-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Founder shot on About: the value of the frame is the room and the slide,
   so it runs wide rather than cropped into a portrait tile. */
.founder-shot{margin:0 auto;max-width:900px}
/* the duotone is the one the insight cards use, so the founder reads as part of
   the same picture set; hover returns the photograph to its own colour */
.founder-shot .shot{position:relative;display:block;overflow:hidden;border-radius:var(--r-card)}
.founder-shot img{width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.06) brightness(1.04);transition:filter .5s ease}
.founder-shot .shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:#EF6A2A;mix-blend-mode:multiply;opacity:.24;transition:opacity .5s ease}
.founder-shot .shot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--ink);mix-blend-mode:soft-light;opacity:.28;transition:opacity .5s ease}
.founder-shot:hover img{filter:grayscale(0) contrast(1)}
.founder-shot:hover .shot::after,.founder-shot:hover .shot::before{opacity:0}
.founder-shot figcaption{text-align:center;margin-left:auto;margin-right:auto}
.founder-shot figcaption{margin-top:16px;font-size:.92rem;line-height:1.65;
  color:var(--muted);max-width:46em}
.founder-shot figcaption strong{color:var(--ink)}
.founder-shot .credit{display:block;margin-top:6px;font-size:.8rem;color:var(--faint)}
.fellow{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;display:block;
  overflow:hidden;box-shadow:var(--shadow);transition:box-shadow .35s,transform .35s}
a.fellow:hover{box-shadow:var(--shadow-lift);transform:translateY(-5px)}
/* Fellow portraits are cut out and stored with transparency, so the ground is
   painted here. It has to live in CSS: the image itself is greyscaled, and a
   colour baked into the file would come out grey. */
/* Square rather than 4:5. The portraits come from differently framed sources;
   a shorter tile shows head and shoulders and drops the torso, which is where
   the four photographs disagree with each other. Anchored to the top so the
   crop takes from the bottom and no head is cut. */
.fellow .ph{aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
  background:var(--wash);border-bottom:1px solid var(--line)}
.fellow .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0;
  filter:grayscale(1) contrast(1.03);transition:filter .45s}
a.fellow:hover .ph img{filter:grayscale(.25)}
.fellow .ph .mono{color:#9AA2AE;font-family:var(--display);font-size:2.7rem}
.fellow .meta{padding:19px 21px 23px}
.fellow .meta .kicker{display:block}
.fellow .meta strong{display:block;font-family:var(--display);font-size:1.25rem;margin-top:.3rem;font-weight:500}
.fellow .meta p{font-size:.84rem;color:var(--muted);margin:.55rem 0 0}
.fellow.pending .ph{background:var(--wash)}
/* Locked placeholder: a padlock drawn in CSS, so no extra asset and it takes
   the accent colour automatically. */
.fellow.pending .lock{position:relative;width:26px;height:21px;border-radius:4px;
  background:var(--line-mid);opacity:.75}
.fellow.pending .lock::before{content:"";position:absolute;left:50%;top:-11px;
  width:15px;height:14px;margin-left:-7.5px;border:3px solid var(--line-mid);
  border-bottom:none;border-radius:8px 8px 0 0}
.fellow.pending .lock::after{content:"";position:absolute;left:50%;top:7px;
  width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--panel)}
.fellow.pending .meta strong{color:var(--faint)}
.fellow.pending .meta p{font-family:var(--label);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
@media(max-width:940px){.fellows-grid{grid-template-columns:repeat(2,1fr)}}
.fellow.pending .ph .mono{color:#C4CAD3;font-size:1.5rem}
.fellow.pending .meta p{font-style:italic}

/* profile */
.profile{display:grid;grid-template-columns:340px 1fr;gap:64px;align-items:start}
.profile .ph{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);
  background:var(--wash)}
.profile .ph img{display:block;width:100%;filter:grayscale(1)}
.profile h1{font-size:clamp(2.2rem,4.4vw,3.5rem);margin:.4rem 0 .5rem}
.profile .role{color:var(--accent-deep);font-family:var(--label);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase}
.profile .bio p{color:var(--ink-soft)}
.profile .links{display:flex;gap:20px;flex-wrap:wrap;margin-top:1.7rem}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin:1.3rem 0 0}
.tag{font-family:var(--label);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-mid);border-radius:999px;padding:.4rem .75rem;background:var(--ground)}

/* doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.doors.two{grid-template-columns:1fr 1fr}
.doors.four{grid-template-columns:repeat(2,1fr)}
.door{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  padding:42px 36px;box-shadow:var(--shadow);transition:box-shadow .35s,transform .35s;display:flex;flex-direction:column}
.door:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px)}
.door .kicker{display:block;margin-bottom:1.2rem;color:var(--faint)}
.door h3{font-size:1.75rem;margin-bottom:.9rem}
.door p{color:var(--muted);font-size:.95rem;margin:0 0 1.9rem;flex:1}

/* commitments band - the cobalt moment */
.trans{border-top:2px solid var(--mesh);background:linear-gradient(165deg,#0A1020,#121C38)}
.trans .inner{padding:88px 0;text-align:center;max-width:820px;margin:0 auto}
.trans .eyebrow{color:rgba(255,255,255,.75)}
.trans h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:1.1rem 0;color:#fff}
.trans p{color:rgba(255,255,255,.82);margin:0 auto;max-width:46em}
.seals{display:flex;justify-content:center;gap:44px;margin-top:2.6rem;flex-wrap:wrap;
  font-family:var(--label);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.seals span{border-top:1px solid rgba(255,255,255,.4);padding-top:13px}

/* Frontier fellowship band: each page sinks its own frontier photograph into
   the navy, passed in as --band-img. Scoped to .band-fellows so the twelve
   other pages using .trans are untouched. */
.band-fellows{position:relative;isolation:isolate;overflow:hidden}
.band-fellows::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--band-img) center/cover no-repeat;
  filter:grayscale(1) contrast(1.1);opacity:.22}
.band-fellows::after{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 72% 78% at 50% 48%,rgba(10,16,32,.52),rgba(10,16,32,.93))}
.band-fellows>.wrap{position:relative;z-index:1}
.band-fellows .band-cta{margin-top:1.1rem}
.band-fellows .btn{margin-top:1.9rem}
/* The band is dark, so the outline button needs a light edge to read at all. */
.band-fellows .btn:not(.primary){border-color:rgba(255,241,229,.5);color:var(--paper)}
.band-fellows .seals{margin-top:2.9rem}

/* Homepage commitments band: a desaturated photo sunk into the navy.
   Scoped to #commitments because .trans is shared by twelve pages.
   Swap assets/img/commitments.webp to change the photograph. */
#commitments{position:relative;isolation:isolate;overflow:hidden}
#commitments::before{content:"";position:absolute;inset:0;z-index:0;
  background:url(../img/commitments.webp) center/cover no-repeat;
  filter:grayscale(1) contrast(1.05);opacity:.16}
#commitments::after{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 65% 70% at 50% 50%,rgba(10,16,32,.55),rgba(10,16,32,.9))}
#commitments>.wrap{position:relative;z-index:1}

/* newsletter */
.news{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:64px;align-items:center}
.news h2{font-size:2.05rem}
.news p{color:var(--muted);margin:.55rem 0 0}
.news form{display:flex;gap:10px;flex-wrap:wrap}
.news input{font-family:var(--sans);font-size:.9rem;padding:1rem 1.1rem;border:1px solid var(--line-mid);
  border-radius:var(--r-el);background:var(--panel);color:var(--ink);min-width:270px}
.news input::placeholder{color:var(--faint)}

/* ---------- article ---------- */
.article-head{padding:185px 0 76px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;background:var(--ground)}
.article-head .inner{position:relative;z-index:2}
.article-head h1{font-size:clamp(2.5rem,5.6vw,4.6rem);max-width:14em;margin:1.4rem 0 1.5rem}
.article-head .standfirst{font-size:1.24rem;color:var(--muted);max-width:34em;line-height:1.6}
.article-head .byline{font-family:var(--label);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-top:2.2rem}
.article-head .byline b{color:var(--ink-soft);font-weight:500}
.article-body{padding:84px 0 40px}
.article-body .prose{max-width:var(--measure);margin:0 auto}
.prose p{font-family:var(--serif);color:var(--ink-soft);font-size:1.06rem;line-height:1.85;margin:0 0 1.55rem}
.prose p.opener::first-letter{font-family:var(--display);font-size:3.6em;line-height:.82;float:left;
  padding:.08em .14em 0 0;color:var(--accent)}
.prose h2{font-size:1.8rem;margin:3rem 0 1.2rem}
.prose strong{color:var(--ink);font-weight:600}
.prose em{color:var(--ink)}
.prose ul,.prose ol{font-family:var(--serif);color:var(--ink-soft);font-size:1.06rem;line-height:1.85;
  margin:0 0 1.55rem;padding-left:1.5em}
.prose li{margin-bottom:.55rem}
.prose a{color:var(--accent-deep);text-decoration:none;border-bottom:1px solid var(--line-accent)}
.prose a:hover{border-bottom-color:var(--accent-deep)}
.prose .pull{font-family:var(--display);font-size:1.65rem;line-height:1.42;color:var(--ink);font-weight:400;font-style:italic;
  border-left:3px solid var(--accent);padding-left:28px;margin:2.8rem 0}
.article-end{max-width:var(--measure);margin:0 auto;padding:22px 0 96px}
.article-end .rule{border-top:1px solid var(--line-accent);width:84px;margin-bottom:28px}
.article-end .next{font-family:var(--label);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* page head */
.page-head{padding:185px 0 70px;border-bottom:1px solid var(--line);background:var(--ground)}
.page-head h1{font-size:clamp(2.5rem,5.4vw,4.2rem);margin:1.3rem 0 1.1rem}
.page-head .lede{max-width:40em}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#B6BCC7;padding:60px 0 80px;font-family:var(--sans);font-size:.85rem}
.site-foot .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;line-height:2.15}
.site-foot a{color:#B6BCC7;text-decoration:none;transition:color .25s}
.site-foot a:hover{color:#fff}
.site-foot .fm-lockup{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.site-foot .fm-lockup img{height:30px;width:auto;flex:none}
.site-foot .fm{font-family:var(--wordmark);font-weight:400;font-size:1.02rem;letter-spacing:.005em;color:#fff}
.site-foot .fm b{font-weight:600}
/* Follower count as a badge rather than trailing grey text, so the number
   reads as a credential. Sits on the footer's ink ground. */
.site-foot .li-followers{display:inline-block;margin-left:8px;padding:4px 10px;
  border-radius:4px;background:#F6D3B6;color:var(--ink);
  font-family:var(--label);font-size:.6rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.site-foot .legal{margin-top:14px;font-family:var(--label);font-size:.62rem;letter-spacing:.08em;color:#79808D}

/* ---------- GCC AI Regulatory Tracker ---------- */
.trk-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel)}
.trk{width:100%;min-width:960px;border-collapse:collapse;font-size:.86rem}
.trk th{font-family:var(--label);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:16px 18px;border-bottom:1px solid var(--line-mid);
  background:var(--wash)}
.trk td{vertical-align:top;padding:16px 18px;border-bottom:1px solid var(--line);color:var(--muted);
  line-height:1.5}
.trk tr:last-child td{border-bottom:none}
.trk td.state{font-family:var(--display);font-size:1.05rem;color:var(--ink);white-space:nowrap}
.trk td.state a{color:inherit;text-decoration:none}
.trk td.state a:hover{color:var(--accent-deep)}
.trk .s{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}
.trk tbody tr:hover td{background:rgba(242,223,206,.45)}
.trk-note{font-family:var(--label);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-top:14px}
.trk-state h2{font-size:2rem;margin-bottom:.4rem}
.trk-state .oneline{color:var(--muted);max-width:var(--measure);margin:0 0 1.8rem;font-size:1.02rem;line-height:1.7}
.cell a.src{display:inline-block;margin-top:12px;font-family:var(--label);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);text-decoration:none}
.cell a.src:hover{text-decoration:underline}
.cite-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 30px;max-width:var(--measure)}
.cite-block .kicker{display:block;margin-bottom:.8rem}
.cite-block p{font-family:var(--serif);font-size:.94rem;color:var(--ink-soft);margin:0;line-height:1.7}

/* ---------- interactive tracker: map + panel + charts ---------- */
.gmap-wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:start}
/* the state panel runs ~950px longer than the map, so the map and its chips stay pinned
   while the detail scrolls past; otherwise column one is that much empty paper */
@media(min-width:941px){.gmap-wrap .gmap{position:sticky;top:92px}}

/* pillar signature: fills the column beside the long state panel, and gives the
   page its one per-state comparison. Redrawn by tracker.js on every selection. */
.gm-profile{margin-top:26px;padding:20px 18px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-card)}
.gm-profile-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.gm-profile-head .k{font-family:var(--label);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mesh-deep)}
.gm-profile-head .tot{font-family:var(--display);font-size:1.5rem;color:var(--accent-deep);
  font-variant-numeric:tabular-nums}
.gm-profile-head .tot i{font-style:normal;font-size:.72rem;color:var(--faint);letter-spacing:.08em}
.gm-profile svg{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}
.gm-profile .ring{fill:none;stroke:var(--line);stroke-width:1;opacity:.7}
.gm-profile .spoke{stroke:var(--line);stroke-width:1;opacity:.5}
.gm-profile .avg{fill:none;stroke:var(--faint);stroke-width:1.2;stroke-dasharray:4 4}
/* the state polygon is the only filled shape, so the signature reads at a glance */
.gm-profile .me{fill:rgba(228,87,26,.16);stroke:var(--accent);stroke-width:2;
  stroke-linejoin:round;transition:d .5s var(--ease-out-expo)}
.gm-profile .pt{fill:var(--accent)}
.gm-profile .ax{font-family:var(--label);font-size:7.4px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--faint)}
.gm-profile .axv{font-family:var(--display);font-size:12px;fill:var(--ink)}
.gm-profile-note{font-size:.78rem;line-height:1.55;color:var(--muted);margin:12px 0 0}
.gm-profile-note b{color:var(--ink);font-weight:600}
@media(max-width:940px){.gm-profile{margin-top:20px}}

/* The constellation, beside "From the Institute". Fills the band the heading
   leaves empty and stays quiet: texture next to the type, not a second thing to
   look at. Masked so it dissolves well before the headline. */
#insights .ht-side{position:absolute;right:0;top:-14px;width:47%;height:250px;z-index:0;
  pointer-events:auto;display:block;opacity:.72;transition:opacity .7s ease;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 22%,#000 55%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.3) 22%,#000 55%)}
#insights .ht-side:hover{opacity:1}
#insights .wrap>*:not(.ht-side){position:relative;z-index:1}
@media(max-width:940px){#insights .ht-side{display:none}}
.gmap{position:relative}
.gmap svg{width:100%;height:auto;display:block}
.gm-ctx{fill:#F4E6D6;stroke:#E4D2BC;stroke-width:1}
.gm-state{fill:var(--wash);stroke:var(--line-mid);stroke-width:1.2;cursor:pointer;
  transition:fill .25s ease}
.gm-state:hover{fill:#EACBAB}
.gm-state.sel{fill:var(--accent);stroke:var(--accent-ink)}
/* A default outline on an SVG path is drawn round its bounding box, not the
   country, so focus showed a rectangle across the map. Hug the shape instead. */
.gm-state:focus{outline:none}
.gm-state:focus-visible{outline:none;stroke:var(--accent-ink);stroke-width:2.6;
  paint-order:stroke}
.gm-cap{fill:var(--ink);opacity:.55;pointer-events:none}
.gm-lbl{font-family:var(--label);font-size:11px;letter-spacing:.08em;fill:var(--ink-soft);
  pointer-events:none;text-transform:uppercase}
.gm-lbl.on-sel{fill:#fff}
.gm-sea{font-family:var(--label);font-size:10px;letter-spacing:.24em;fill:var(--faint);
  text-transform:uppercase;pointer-events:none}
.gm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.gm-chip{font-family:var(--label);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--line-mid);border-radius:99px;background:none;cursor:pointer;
  color:var(--muted);transition:all .2s ease}
.gm-chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.gm-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.gm-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:34px 32px}
.gm-panel h2{font-size:2.1rem;margin:0 0 .5rem}
.gm-panel .oneline{color:var(--muted);font-size:.95rem;line-height:1.65;margin:0 0 1.4rem}
.gm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:1.5rem}
.gm-stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-el);padding:12px 14px}
.gm-stat .v{font-family:var(--display);font-size:1.35rem;color:var(--ink);line-height:1.1}
.gm-stat .k{font-family:var(--label);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-top:4px;line-height:1.35}
.gm-reg{border-top:1px solid var(--line);padding:14px 0}
.gm-reg .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.gm-reg .k{font-family:var(--label);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.gm-reg .lvl{font-family:var(--label);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;white-space:nowrap}
.gm-reg p{font-size:.86rem;color:var(--muted);line-height:1.6;margin:.6rem 0 0}
.gm-reg .src{font-family:var(--label);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-deep);text-decoration:none;display:inline-block;margin-top:8px}
.gm-reg .src:hover{text-decoration:underline}
.gm-inv{margin-top:4px;border-top:1px solid var(--line);padding-top:16px}
.gm-inv .k{font-family:var(--label);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:10px}
.gm-inv .item{display:flex;gap:12px;align-items:baseline;margin-bottom:9px}
.gm-inv .fig{font-family:var(--display);font-size:1.1rem;color:var(--accent-deep);min-width:86px}
.gm-inv .what{font-size:.84rem;color:var(--muted);line-height:1.5}
.gm-inv .what a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-mid)}
.gm-inv .what a:hover{color:var(--accent-deep);border-bottom-color:var(--accent-deep)}
.lvl.l3{background:var(--accent);color:#fff}
.lvl.l2{background:#B85520;color:#fff}
.lvl.l1{background:#E9A97E;color:var(--accent-ink)}
.lvl.l0{background:var(--wash);color:var(--muted);border:1px solid var(--line-mid)}
/* maturity heatmap */
.hm{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));gap:2px;background:var(--paper)}
.hm .hd{font-family:var(--label);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:10px 12px;display:flex;align-items:flex-end}
.hm .st{font-family:var(--display);font-size:.98rem;color:var(--ink);padding:14px 12px;display:flex;
  align-items:center;cursor:pointer;border-radius:var(--r-el) 0 0 var(--r-el)}
.hm .st:hover{color:var(--accent-deep)}
.hm-c{padding:14px 12px;font-family:var(--label);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;display:flex;align-items:center;cursor:default}
.hm-c.l3{background:var(--accent);color:#fff}
.hm-c.l2{background:#B85520;color:#fff}
.hm-c.l1{background:#E9A97E;color:var(--accent-ink)}
.hm-c.l0{background:var(--wash);color:var(--muted)}
.hm-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.hm-legend span{font-family:var(--label);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:7px}
.hm-legend i{width:13px;height:13px;border-radius:3px;display:inline-block}
/* readiness bars */
.bars{width:100%}
.bars .row{display:grid;grid-template-columns:150px 1fr 58px;gap:14px;align-items:center;margin-bottom:11px}
.bars .name{font-family:var(--label);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.bars .name.bench{color:var(--faint)}
.bars .track{height:14px;background:var(--wash);border-radius:4px;position:relative;overflow:hidden}
.bars .fill{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:4px 4px 4px 4px;
  width:0;transition:width .9s var(--ease-out-expo)}
.bars .fill.bench{background:#B9AE9C}
.bars .val{font-family:var(--display);font-size:1rem;color:var(--ink);text-align:right}
.bars .val.bench{color:var(--faint)}
/* decade timeline */
.tl{position:relative;margin-top:8px}
.tl::before{content:"";position:absolute;left:86px;top:6px;bottom:6px;width:2px;background:var(--line-mid)}
.tl .tl-row{display:grid;grid-template-columns:70px 1fr;gap:34px;margin-bottom:22px;position:relative}
.tl .tl-row::before{content:"";position:absolute;left:81px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);border:2.5px solid var(--paper)}
.tl .tl-row .yr{font-family:var(--display);font-size:1.25rem;color:var(--ink);text-align:right}
.tl .tl-row .evs{display:flex;flex-direction:column;gap:7px;padding-top:3px}
.tl .tl-row .ev{font-size:.88rem;color:var(--muted);line-height:1.55}
.tl .tl-row .ev b{color:var(--ink);font-weight:600}
.tl .tl-row .ev .tag{font-family:var(--label);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);margin-right:8px}
/* pillar heat grid (6 pillars) */
.hm.p6{grid-template-columns:150px repeat(6,minmax(0,1fr))}
.hm .hd small{display:block;font-size:.52rem;letter-spacing:.1em;color:var(--faint);margin-top:2px}
.hm-c.q0{background:var(--wash);color:var(--ink-soft)}
.hm-c.q1{background:#ECC5A1;color:var(--accent-ink)}
.hm-c.q2{background:#E9A97E;color:var(--accent-ink)}
.hm-c.q3{background:#B85520;color:#fff}
.hm-c.q4{background:var(--accent);color:#fff}
.hm-c.num{font-family:var(--display);font-size:.92rem;letter-spacing:0;text-transform:none;justify-content:center}
.hm .st.bench{opacity:.62}
.hm-divider{grid-column:1/-1;height:10px}
/* paired small-multiple bars */
.duo-bars{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.duo-bars h3{font-size:1.25rem;margin:0 0 4px}
.duo-bars .sub{font-family:var(--label);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:16px}
@media(max-width:940px){
  .hm.p6{grid-template-columns:84px repeat(6,minmax(0,1fr))}
  .hm.p6 .hm-c{padding:9px 4px;font-size:.68rem}
  .hm.p6 .hd{padding:8px 4px;font-size:.5rem;letter-spacing:.03em;line-height:1.2;
    white-space:normal;overflow-wrap:anywhere}
  .duo-bars{grid-template-columns:1fr;gap:26px}
}
/* build-out: pipeline bars + mega-project cards */
.mega-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.mega{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-el);padding:18px 20px}
.mega .fig{font-family:var(--display);font-size:1.7rem;color:var(--accent-deep);line-height:1.1}
.mega .what{font-size:.82rem;color:var(--muted);line-height:1.55;margin-top:6px}
.mega .what a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-mid)}
.mega .what a:hover{color:var(--accent-deep)}
.bars .val.na,.bars .name.na{color:var(--faint)}
/* Rows with no bar carry a note instead. The track is a 14px overflow:hidden
   box built for a bar, which clipped the note in half, so drop the box here. */
.bars .track:has(.none-note){background:transparent;overflow:visible;height:auto;
  min-height:14px;display:flex;align-items:center}
.bars .track .none-note{font-family:var(--label);font-size:.56rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.4;white-space:nowrap}
/* enforcement watch */
.enfw{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
.enfw .rows{display:flex;flex-direction:column}
.enfw .r{display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.enfw .r:last-child{border-bottom:none}
.enfw .s{font-family:var(--display);font-size:1rem;color:var(--ink)}
.enfw .t{font-size:.88rem;color:var(--muted);line-height:1.55}
.enfw .t b{color:var(--ink);font-weight:600}
.enfw a{font-family:var(--label);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-deep);text-decoration:none;white-space:nowrap}
.enfw a:hover{text-decoration:underline}
/* world context table */
.wctx{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--panel);overflow:hidden}
.wctx .r{display:grid;grid-template-columns:150px minmax(190px,220px) 1fr auto;gap:20px;
  align-items:baseline;padding:18px 24px;border-bottom:1px solid var(--line)}
.wctx .r:last-child{border-bottom:none}
.wctx .r.hl{background:var(--wash)}
.wctx .j{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
/* The longest label runs to five words; nowrap in a fixed column made it
   overflow across the description text. Let it wrap inside the pill. */
.wctx .p{font-family:var(--label);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-ink);background:#E9A97E33;border:1px solid var(--line-mid);border-radius:12px;
  padding:6px 11px;text-align:center;justify-self:start;line-height:1.5}
.wctx .d{font-size:.87rem;color:var(--muted);line-height:1.6}
.wctx a{font-family:var(--label);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent-deep);text-decoration:none;white-space:nowrap}
.wctx a:hover{text-decoration:underline}
@media(max-width:940px){
  .mega-row{grid-template-columns:1fr}
  .enfw .r{grid-template-columns:1fr;gap:5px}
  .wctx .r{grid-template-columns:1fr;gap:8px}
  .wctx .p{justify-self:start}
}
/* shared viz tooltip */
.viz-tip{position:fixed;z-index:80;max-width:320px;background:var(--ink);color:#F6EFE6;padding:12px 15px;
  border-radius:var(--r-el);font-size:.8rem;line-height:1.55;pointer-events:none;opacity:0;
  transition:opacity .15s ease;box-shadow:0 10px 34px rgba(10,16,32,.28)}
.viz-tip b{color:#fff}
.viz-tip.on{opacity:1}
@media(max-width:940px){
  .gmap-wrap{grid-template-columns:1fr;gap:30px}
  .gm-stats{grid-template-columns:repeat(3,1fr)}
  .hm{grid-template-columns:96px repeat(3,minmax(0,1fr))}
  .hm .st{font-size:.82rem;padding:11px 8px}
  .hm-c{padding:11px 8px;font-size:.55rem}
  .bars .row{grid-template-columns:96px 1fr 46px}
  .tl::before{left:64px}
  .tl .tl-row{grid-template-columns:48px 1fr;gap:26px}
  .tl .tl-row::before{left:59px}
}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .hero{min-height:auto}
  .hero .inner{padding:150px 0 110px}
  .thesis,.doors,.doors.two,.doors.four,.news,.profile,.bridge-grid{grid-template-columns:1fr;gap:36px}
  .pillars{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .fellows-grid{grid-template-columns:repeat(2,1fr)}
  .idx a{grid-template-columns:1fr;gap:8px}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(255,241,229,.99);border-bottom:1px solid var(--line);padding:12px 30px 24px}
  .site-nav.open{display:flex}
  .site-nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:block}
  section{padding:80px 0}
}
@media(max-width:560px){
  .fellows-grid{grid-template-columns:1fr}
  .hero-foot .row{flex-direction:column;gap:0;align-items:flex-start}
  .hero-foot .cell{padding:8px 0}
}


/* ================= v4 "wow" layer ================= */

/* grain - 3% static noise de-templates the white */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.03;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

/* scroll progress hairline */
.progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--mesh);
  transform:scaleX(0);transform-origin:0 50%;z-index:70}

/* section mark → mono pill */
.sec-mark{color:var(--faint)}
.sec-mark .pill{background:none;border:none;padding:0;letter-spacing:.3em;color:var(--faint)}

/* word reveals: headings lift into place a word at a time - restrained, precise, premium.
   Small lift + light blur + fast confident ease; no scale, no glow (research-backed:
   restraint reads premium, extra effects read cheap). */
.tw-word{display:inline-block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;vertical-align:bottom}
.tw-word>span{display:inline-block;white-space:nowrap;
  transform:translateY(.32em);opacity:0;filter:blur(5px);
  transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .5s ease-out,filter .45s ease-out;
  transition-delay:calc(var(--i,0)*58ms)}
.word-in .tw-word>span{transform:translateY(0);opacity:1;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.tw-word{overflow:visible;padding-bottom:0;margin-bottom:0}
  .tw-word>span{opacity:1;transform:none;filter:none;transition:none}}

/* insight card photo art */
.card .art{height:170px}
.card .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.04);transition:transform .8s var(--ease-out-expo),filter .5s}
.card .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,32,0) 55%,rgba(10,16,32,.28))}
.card:hover .art img{transform:scale(1.05);filter:grayscale(0) contrast(1)}
.card:hover .go .ar{transform:translateX(4px)}
.card .go .ar{display:inline-block;transition:transform .4s var(--ease-out-expo)}

/* media doors - photo, ink overlay, white type */
.door.media{position:relative;overflow:hidden;padding:0;min-height:430px;border:none}
.door.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease-out-expo)}
.door.media:hover img{transform:scale(1.05)}
.door.media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,32,.24) 0%,rgba(10,16,32,.12) 30%,rgba(10,16,32,.9) 100%)}
.door.media .door-body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  height:100%;min-height:430px;padding:34px 30px}
.door.media .kicker{color:var(--gold);margin-bottom:.9rem}
.door.media h3{color:#fff;font-size:1.9rem;margin-bottom:.6rem}
.door.media p{color:rgba(255,255,255,.82);font-size:.92rem;margin:0 0 1.4rem;flex:0}
.door.media .btn{border-color:rgba(255,255,255,.55);color:#fff;align-self:flex-start}
.door.media .btn::before{background:#fff}
.door.media .btn:hover{color:var(--ink);border-color:#fff}

/* bridge - photo instrument with HUD chips */
.bridge-photo{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-lift)}
.bridge-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(.3) contrast(1.02)}
.bridge-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(209,73,0,.14),rgba(10,16,32,.34) 90%)}
.hud{position:absolute;z-index:3;background:rgba(255,255,255,.92);border:1px solid rgba(209,73,0,.25);
  border-radius:6px;padding:9px 13px;font-family:var(--label);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:9px}
.hud .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.js .hud .dot{animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(209,73,0,.4)}55%{box-shadow:0 0 0 6px rgba(209,73,0,0)}}
@media(prefers-reduced-motion:reduce){.hud .dot{animation:none}}

/* manifesto - pinned ink chapter */
.manifesto{height:300vh;background:var(--ink);border-top:none;padding:0;position:relative}
.manifesto .pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.manifesto .pin .graticule{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent,transparent 79px,rgba(255,255,255,.045) 80px),
             repeating-linear-gradient(90deg,transparent,transparent 79px,rgba(255,255,255,.045) 80px)}
.manifesto .stmt{position:absolute;inset:0;display:grid;place-items:center;padding:0 30px;
  opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out-expo),transform .7s var(--ease-out-expo)}
.manifesto .stmt.active{opacity:1;transform:none}
.manifesto .stmt h2{color:#fff;font-size:clamp(2.4rem,6vw,5rem);text-align:center;max-width:16em}
.manifesto .stmt h2 i{color:var(--gold);font-style:normal}
.manifesto .stmt-idx{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-family:var(--label);font-size:.66rem;letter-spacing:.3em;color:rgba(255,255,255,.5)}
.manifesto .stmt .quiet-link{color:var(--accent-lit)}

/* ticker polish - edge mask + hover pause */
.ticker{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker:hover .track{animation-play-state:paused}

/* footer curtain - page lifts to reveal the ink flag footer */
main{position:relative;z-index:1;background:var(--paper);
  box-shadow:0 32px 64px rgba(10,16,32,.18)}
.site-foot{position:sticky;bottom:0;z-index:0;padding:76px 0 60px}
.site-foot .foot-cta{display:flex;align-items:center;justify-content:center;gap:22px;
  flex-wrap:wrap;text-align:center;margin-bottom:56px}
.site-foot .foot-cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
@media(max-width:940px){.site-foot{min-height:auto;position:relative}main{box-shadow:none}}


/* technical renders (SVG instruments) */
.card .art.plain::after{display:none}
.card .art img.render{filter:none;object-fit:cover}
.card:hover .art img.render{filter:none;transform:scale(1.04)}
.thesis-object{width:100%;max-width:440px;justify-self:center;align-self:center;
  filter:drop-shadow(0 18px 36px rgba(10,16,32,.12))}
@media(max-width:940px){.thesis-object{max-width:340px}}


/* ================= programme pages ================= */
.prog-hero{position:relative;min-height:74vh;display:grid;align-items:end;overflow:hidden;
  border-bottom:1px solid var(--line);background:var(--paper)}
#prog-field{position:absolute;inset:0;width:100%;height:100%;display:block}
.prog-hero .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,241,229,.2) 0%,rgba(255,241,229,.05) 45%,rgba(255,241,229,.88) 100%)}
.prog-hero .inner{position:relative;z-index:2;padding:150px 30px 56px;pointer-events:none}
.prog-hero .inner a{pointer-events:auto}
.prog-hero h1{font-size:clamp(2.6rem,5.8vw,4.8rem);max-width:12em}
.prog-hero .standfirst{font-size:1.18rem;color:var(--ink-soft);max-width:36em;line-height:1.62;margin-top:1.2rem}
.prog-hero .crumb{font-family:var(--label);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:1rem;display:block}
.prog-live{position:absolute;z-index:2;right:30px;top:112px;text-align:right;pointer-events:none;
  font-family:var(--label);font-size:.6rem;letter-spacing:.16em;color:var(--faint);line-height:2}
.prog-live b{color:var(--accent);font-weight:500}

/* why it matters: two doors */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.duo .cell,.quad .cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:38px 34px;box-shadow:var(--shadow)}
.duo .cell .kicker,.quad .cell .kicker{display:block;margin-bottom:1rem}
.duo .cell h3,.quad .cell h3{font-size:1.55rem;margin-bottom:.8rem}
.duo .cell p,.quad .cell p{color:var(--muted);font-size:.97rem;margin:0}

/* our view: editorial measure */
.view .prose{max-width:var(--measure);margin:0 auto}
.view .prose p{font-family:var(--serif);color:var(--ink-soft);font-size:1.06rem;line-height:1.85;margin:0 0 1.5rem}
.view .prose p:first-child::first-letter{font-family:var(--display);font-size:3.4em;line-height:.82;
  float:left;padding:.08em .14em 0 0;color:var(--accent)}

/* key questions: numbered index rows */
.kq{border-top:1px solid var(--line);counter-reset:kq}
.kq li{list-style:none;counter-increment:kq;display:grid;grid-template-columns:70px 1fr;gap:26px;
  align-items:baseline;padding:24px 6px;border-bottom:1px solid var(--line);
  font-family:var(--display);font-size:1.3rem;line-height:1.3}
.kq li::before{content:counter(kq);font-family:var(--label);font-size:.75rem;letter-spacing:.2em;color:var(--accent-deep)}
.kq{margin:0;padding:0}

/* facts strip */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.facts .fact{border-top:2px solid var(--accent);padding-top:18px}
.facts .stat{font-family:var(--display);font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.1;font-variant-numeric:tabular-nums}
.facts .ctx{font-family:var(--sans);font-size:.86rem;color:var(--muted);margin-top:.6rem}

/* programme cards (index + home strip) */
.prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prog-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);text-decoration:none;
  padding:28px 26px;display:flex;flex-direction:column;gap:12px;min-height:190px;box-shadow:var(--shadow);
  transition:box-shadow .35s,transform .35s,border-color .35s;position:relative;overflow:hidden}
.prog-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);opacity:0;transition:opacity .3s}
.prog-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px);border-color:var(--line-accent)}
.prog-card:hover::after{opacity:1}
.prog-card .num{font-family:var(--label);font-size:.62rem;letter-spacing:.22em;color:var(--accent-deep)}
.prog-card h3{font-family:var(--sans);font-weight:700;font-size:1.08rem;line-height:1.3}
.prog-card p{font-family:var(--sans);font-size:.84rem;color:var(--muted);margin:0;flex:1}
.prog-card .go{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--accent-deep)}

@media(max-width:940px){
  .duo{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .prog-grid{grid-template-columns:repeat(2,1fr)}
  .prog-live{display:none}
  .prog-hero{min-height:auto}
  .prog-hero .inner{padding:118px 30px 44px}
}
@media(max-width:560px){.prog-grid{grid-template-columns:1fr}}


/* ================= centered masthead + frontiers dropdown ================= */
.mast.three{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:14px 0}
.site-nav.left{justify-self:start}
.site-nav.right{justify-self:end}
.wordmark.stack{justify-self:center;gap:16px}
.wordmark.stack img.mark{height:58px;width:auto;flex:none}
.wordmark.stack .wm-flat{font-family:var(--wordmark);font-weight:400;font-size:1.15rem;
  letter-spacing:.005em;color:var(--ink);display:flex;flex-direction:column;line-height:1.3}
.wm-flat .wm-strong{font-weight:600;white-space:nowrap}
.navdrop{position:relative}
.navdrop>button{background:none;border:none;cursor:pointer;font:inherit;color:var(--muted);
  padding:4px 0;letter-spacing:inherit;text-transform:inherit;display:flex;align-items:center;gap:6px;transition:color .25s}
.navdrop>button::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.navdrop:hover>button,.navdrop:focus-within>button,.navdrop.open>button{color:var(--accent-deep)}
.navdrop:hover>button::after,.navdrop:focus-within>button::after,.navdrop.open>button::after{transform:rotate(225deg) translateY(-1px)}
.drop{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);min-width:430px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-lift);
  padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out-expo),transform .3s var(--ease-out-expo),visibility .3s}
.navdrop:hover .drop,.navdrop:focus-within .drop,.navdrop.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.drop a{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-radius:6px;text-decoration:none;
  font-family:var(--sans);font-size:.84rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.drop a:hover{background:var(--wash);color:var(--ink)}
.drop a .n{font-family:var(--label);font-size:.6rem;letter-spacing:.12em;color:var(--accent-deep)}
.mobile-nav{display:none}
@media(max-width:940px){
  .mast.three{grid-template-columns:auto 1fr auto}
  .site-nav.left,.site-nav.right{display:none}
  .wordmark.stack{justify-self:start;gap:10px;grid-column:1}
  .wordmark.stack img.mark{height:32px}
  .wordmark.stack .wm-flat{font-size:1.05rem}
  .nav-toggle{grid-column:3}
  .mobile-nav.open{display:block;position:absolute;top:100%;left:0;right:0;background:var(--panel);
    border-bottom:1px solid var(--line);padding:14px 30px 26px;max-height:76vh;overflow:auto}
  .mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;
    font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--ink)}
  .mobile-nav .sub{padding-left:18px;font-weight:500;font-size:.84rem;color:var(--muted)}
}

/* ================= landing: statement + floats + frontier panels ================= */
.statement{position:relative;overflow:hidden}
.statement h2{font-size:clamp(2.3rem,4.6vw,3.9rem);max-width:15em}
.statement .lede{max-width:38em;margin-top:1.6rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:3.4rem;max-width:760px}
.stats .stat-c .n{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;font-variant-numeric:tabular-nums}
.stats .stat-c .l{font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.float-obj{position:absolute;border-radius:var(--r-card);box-shadow:var(--shadow-lift);object-fit:cover;
  pointer-events:none;will-change:transform}
.statement .float-obj{right:-40px;top:44px;width:min(34vw,430px);aspect-ratio:4/5;transform:rotate(3deg)}

.feature-panel{background:var(--ground);border-radius:var(--r-card);overflow:hidden;display:grid;
  grid-template-columns:1.05fr 1fr;min-height:480px;box-shadow:var(--shadow)}
.feature-panel .fp-copy{padding:56px 54px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.feature-panel .fp-copy h3{font-size:clamp(2rem,3.6vw,3rem);margin:.9rem 0 1.1rem}
.feature-panel .fp-copy p{color:var(--muted);max-width:34em;margin:0 0 2rem}
.feature-panel .fp-img{position:relative;min-height:340px}
.feature-panel .fp-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-panel .fp-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ground) 0%,rgba(248,229,208,0) 26%)}

.frontier-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:20px}
.f-card{grid-column:span 2;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:box-shadow .35s,transform .35s}
.f-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-5px);border-color:rgba(6,214,160,.5)}
.f-card .fi{height:150px;overflow:hidden;position:relative}
.f-card .fi img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out-expo)}
.f-card:hover .fi img{transform:scale(1.05)}
.f-card .fb{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.f-card .num{font-family:var(--label);font-size:.6rem;letter-spacing:.22em;color:var(--accent-deep)}
.f-card h3{font-family:var(--sans);font-weight:700;font-size:1.06rem;line-height:1.3;letter-spacing:-.01em}
.f-card p{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin:0;flex:1}
.f-card .go{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--accent-deep)}

.fellow-panel{position:relative;background:var(--ink);border-radius:var(--r-card);overflow:hidden;
  padding:74px 60px;color:#fff}
.fellow-panel .eyebrow{color:var(--gold)}
.fellow-panel h2{color:#fff;font-size:clamp(2rem,3.8vw,3.1rem);max-width:14em;margin:1rem 0 1.2rem}
.fellow-panel p{color:rgba(255,255,255,.75);max-width:38em;margin:0 0 2rem}
.fellow-panel .float-obj{right:36px;bottom:-60px;width:min(26vw,330px);aspect-ratio:4/5;transform:rotate(-4deg);opacity:.92}

@media(max-width:940px){
  .statement .float-obj{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .feature-panel{grid-template-columns:1fr}
  .feature-panel .fp-img{min-height:240px}
  .feature-panel .fp-img::after{background:linear-gradient(180deg,var(--ground) 0%,rgba(248,229,208,0) 30%)}
  .frontier-grid{grid-template-columns:1fr 1fr}
  .f-card{grid-column:span 1!important}
  .fellow-panel{padding:50px 32px}
  .fellow-panel .float-obj{display:none}
}
/* Phone: the heatmap keeps all six pillars on a tighter grid, and the per-state
   stat tiles drop to two columns rather than setting one word per line. */
@media(max-width:560px){
  .hm{grid-template-columns:74px repeat(3,minmax(0,1fr))}
  .hm.p6{grid-template-columns:62px repeat(6,minmax(0,1fr))}
  .hm .st{font-size:.7rem;padding:9px 5px}
  .hm-c{padding:8px 3px;font-size:.5rem;letter-spacing:.04em}
  .hm.p6 .hm-c{padding:8px 2px;font-size:.58rem}
  /* Pillar names are long words in narrow columns, so let them break rather
     than run into the next heading. */
  .hm .hd{padding:7px 3px;font-size:.44rem;letter-spacing:.02em;line-height:1.2;
    white-space:normal;overflow-wrap:anywhere;hyphens:auto}
  .hm.p6 .hd{font-size:.42rem}
  .gm-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.frontier-grid{grid-template-columns:1fr}.f-card{grid-column:span 1!important}.stats{grid-template-columns:1fr}}
/* last row of the frontier grid (2 cards, 8 total): centred at normal width, not stretched */
.f-card:nth-child(7){grid-column:2 / span 2}
.f-card:nth-child(8){grid-column:4 / span 2}



/* ================= halftone fields + type-overlap + mission ================= */
canvas.halftone{display:block}
.giant-word{position:absolute;z-index:0;left:-2vw;top:-1.5rem;font-family:var(--display);
  line-height:.8;font-size:clamp(9rem,24vw,22rem);color:var(--ground);
  pointer-events:none;user-select:none;white-space:nowrap}
.statement .wrap>*{position:relative;z-index:1}
.statement .float-obj,.statement .giant-word{z-index:0}
.statement .float-obj{z-index:2}
.cutout{border-radius:0!important;box-shadow:none!important;object-fit:contain!important;
  filter:drop-shadow(0 30px 50px rgba(10,16,32,.22))}
.mission-lines{margin-top:3.2rem}
.mission-lines h3{font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.12;font-weight:500}
.mission-lines h3 .em{color:var(--accent)}
.ht-band{position:relative;height:230px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--paper);overflow:hidden}
.ht-band canvas{position:absolute;inset:0;width:100%;height:100%}
.ht-band .cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--label);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  background:rgba(255,241,229,.85);padding:8px 16px;border-radius:999px;border:1px solid var(--line)}
.fellow-panel .ht-dome{position:absolute;left:-40px;bottom:-70px;width:360px;height:360px;opacity:.5;z-index:0}
.fellow-panel>*{position:relative;z-index:1}
.page-head{position:relative;overflow:hidden}
.page-head .ht-burst{position:absolute;right:-70px;top:12%;width:430px;height:430px;opacity:.8;z-index:0;pointer-events:none}
.page-head .wrap{position:relative;z-index:1}

/* TM-style enter choreography */
.rev.zoom{transform:translateY(30px) scale(.965)}
.rev.zoom.in{transform:none}
.feature-panel .fp-img img,.f-card .fi img{transition:clip-path 1.1s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.rev:not(.in) .fp-img img,.f-card.rev:not(.in) .fi img{clip-path:inset(0 100% 0 0)}
.rev.in .fp-img img,.f-card.rev.in .fi img{clip-path:inset(0)}
@media(max-width:940px){.giant-word{display:none}.page-head .ht-burst{width:280px;height:280px;right:-90px;opacity:.5}}


/* ================= v7 world-class pass ================= */
/* universal image tone: grayscale + paper multiply = one family */
.fi,.fp-img,.art{position:relative}
.fi img,.fp-img img{filter:grayscale(1) contrast(1.06) brightness(1.04)}
.fi::after,.fp-img::after{content:"";position:absolute;inset:0;background:#EF6A2A;
  mix-blend-mode:multiply;opacity:.24;pointer-events:none}
.fi::before,.fp-img::before{content:"";position:absolute;inset:0;background:var(--ink);
  mix-blend-mode:soft-light;opacity:.28;pointer-events:none;z-index:1}
.f-card:hover .fi img{filter:grayscale(0) contrast(1)}
.f-card:hover .fi::after{opacity:.08}

/* insight cards carry the frontier image treatment: same duotone, same wipe-in reveal.
   .plain art (flat SVG renders) is excluded so it keeps its original flat look. */
.card .art:not(.plain) img{filter:grayscale(1) contrast(1.06) brightness(1.04);
  transition:clip-path 1.1s var(--ease-out-expo),transform .8s var(--ease-out-expo),filter .5s}
.card .art:not(.plain)::after{background:#EF6A2A;mix-blend-mode:multiply;opacity:.24}
.card .art:not(.plain)::before{content:"";position:absolute;inset:0;background:var(--ink);
  mix-blend-mode:soft-light;opacity:.28;pointer-events:none;z-index:1}
.card:hover .art:not(.plain) img{filter:grayscale(0) contrast(1)}
.card:hover .art:not(.plain)::after{opacity:.08}
.card.rev:not(.in) .art:not(.plain) img{clip-path:inset(0 100% 0 0)}
.card.rev.in .art:not(.plain) img{clip-path:inset(0)}

/* live map inside the feature panel: each state is a link into its own state on the tracker */
.feature-panel .fp-map{position:relative;background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:26px 26px 18px;min-height:340px}
.feature-panel .fp-map .gh-map{width:100%;height:auto;display:block;flex:1;min-height:0}
.gh-link{cursor:pointer}
.gh-link .gm-state{transition:fill .25s ease}
.gh-link:hover .gm-state,.gh-link:focus-visible .gm-state{fill:var(--accent);stroke:var(--accent-ink)}
.gh-link:hover .gm-lbl,.gh-link:focus-visible .gm-lbl{fill:#fff}
.gh-link:focus{outline:none}
.gh-link:focus-visible .gm-state{stroke-width:2.4}
.fp-map-hint{font-family:var(--label);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-top:12px;text-align:center}
@media(max-width:940px){.feature-panel .fp-map{min-height:260px;padding:18px 18px 14px}}

/* mission chapter - one focal idea */
.mission{padding:78px 0 110px}
.mission .mission-lines{margin-top:2.6rem}
.mission .mission-lines h3{font-size:clamp(2.3rem,4.8vw,4rem);line-height:1.08;max-width:16em}
.mission .support{font-family:var(--sans);font-size:1.05rem;color:var(--muted);max-width:36em;margin-top:2.2rem}
.mission .stats{margin-top:4.2rem}
/* The mission section carries a live network rather than a halftone wave:
   pointer-events on, because it responds to the cursor. */
.mission .ht-side{position:absolute;right:0;top:6%;width:46%;height:78%;z-index:0;
  pointer-events:auto;display:block;opacity:.62;transition:opacity .7s ease;
  /* The headline reaches into this space, so the mesh dissolves before it
     gets there instead of cramping the type or muting the whole network. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 26%,#000 52%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 26%,#000 52%)}
.mission .wrap>*:not(.ht-side){position:relative;z-index:1}
/* .42 at rest matches the halftone this replaced, so it reads as texture
   beside the headline rather than competing with it. */
.mission .ht-side:hover{opacity:1}
@media(max-width:940px){.mission .ht-side{position:relative;right:auto;top:auto;
  width:100%;height:230px;margin-bottom:8px;opacity:.85}}

/* frontiers giant word - cropped with intent, not floating */
#frontiers{position:relative;overflow:hidden;padding-top:150px}
#frontiers .giant-word{top:-3.2rem;left:-1vw;font-size:clamp(8rem,19vw,17rem);
  -webkit-text-stroke:1.4px rgba(10,16,32,.1)}

/* spacing rhythm */
section{padding:120px 0}
.tinted{background:var(--ground)}
.fellow-panel .float-obj{display:none}

.terms{border-bottom:1px solid var(--line);background:var(--paper);padding:15px 0;
  font-family:var(--label);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mesh-deep)}


/* ================= cutout objects ================= */
/* Live orrery in the Frontiers section: nine orbits, one core. Takes the slot
   the chapter cut-out used, but stays interactive rather than decorative. */
.chapter-orrery{position:absolute;z-index:1;right:1%;top:-70px;
  width:min(34vw,430px);height:min(34vw,430px);pointer-events:auto;cursor:grab}
.chapter-orrery:active{cursor:grabbing}
@media(max-width:940px){.chapter-orrery{position:relative;right:auto;top:auto;
  width:min(74vw,320px);height:min(74vw,320px);margin:0 auto -10px;display:block}}

.chapter-cut{position:absolute;z-index:1;right:3%;top:-36px;width:min(27vw,330px);pointer-events:none;
  filter:grayscale(.2) contrast(1.04) drop-shadow(0 34px 54px rgba(10,16,32,.24));transform:rotate(2deg)}
.prog-cut{position:absolute;z-index:2;right:4%;bottom:6%;width:min(21vw,270px);pointer-events:none;
  /* Objects vary from square to tall portrait, so cap the height too or a
     portrait object overflows the hero and gets clipped at both ends. */
  max-height:64%;object-fit:contain;object-position:bottom right;
  filter:grayscale(.2) contrast(1.04) drop-shadow(0 26px 44px rgba(10,16,32,.22))}
/* Defence: two more airframes set back and up, so the hero reads as a formation
   with depth rather than one object. Smaller, fainter and softly blurred, which
   is what actually sells distance. */
.prog-cut.swarm-2{width:min(10vw,122px);right:15%;bottom:41%;opacity:.52;
  filter:grayscale(.45) contrast(1.02) blur(.6px) drop-shadow(0 14px 22px rgba(10,16,32,.16));
  animation-duration:9s;animation-delay:-2s}
.prog-cut.swarm-3{width:min(6vw,74px);right:6%;bottom:58%;opacity:.34;
  filter:grayscale(.65) contrast(1) blur(1.1px) drop-shadow(0 10px 16px rgba(10,16,32,.12));
  animation-duration:11s;animation-delay:-5s}
@media(max-width:940px){.prog-cut.swarm-2,.prog-cut.swarm-3{display:none}}

@media(max-width:940px){.chapter-cut{width:160px;top:auto;bottom:-20px;opacity:.9}.prog-cut{width:130px;bottom:2%}}


/* ================= premium polish layer ================= */
/* ---------- page transition: the door opens ----------
   The homepage opens on load: the content is clipped to a centre sliver and
   swings out to full width over the ground colour. Homepage only, by request.

   This is deliberately NOT the View Transitions API. Cross-document
   transitions snapshot the whole scrollable area, so navigating between pages
   of different heights (the homepage is 6800px, the thesis 4500px) stretches
   the outgoing snapshot while the incoming one wipes, which read as broken.
   A load-time clip is geometry-independent, works in every browser, and is
   what the effect actually looks like to a reader. */
@keyframes door-open{
  from{clip-path:inset(0 50% 0 50%);opacity:.5}
  55%{opacity:1}
  to{clip-path:inset(0 0 0 0);opacity:1}}
/* Longer and eased at both ends: a pure ease-out snapped open off the mark.
   The short opacity ramp softens the hard clip edge as it leaves centre. */
.js body.home{animation:door-open 1.15s cubic-bezier(.5,0,.18,1) backwards}
@media(prefers-reduced-motion:reduce){.js body.home{animation:none}}

/* floating objects breathe */
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.chapter-cut,.prog-cut{animation:bob 6.5s ease-in-out infinite}
.prog-cut{animation-duration:7.5s}

/* TED talk, click to load. The player is only fetched when the reader presses
   play, so browsing the site still sets no third-party cookies. */
/* The reading measure is right for prose and too narrow for video, so the
   figure breaks out of it while staying centred on the column. */
.ted{margin:56px 0 64px;width:min(880px,88vw);margin-left:50%;transform:translateX(-50%)}
/* Below the prose column the breakout has nothing to break out of, and the
   translate pushes it off-screen. */
@media(max-width:940px){.ted{width:100%;margin-left:0;transform:none}}
.ted-cover{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;
  cursor:pointer;overflow:hidden;text-align:left;background:#0A1020}
/* poster carries the house duotone and returns to its own colour on hover; it is a
   separate layer so the play control and the TEDx mark stay at full strength */
.ted-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06) brightness(1.04);transition:filter .5s ease}
.ted-cover::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#EF6A2A;mix-blend-mode:multiply;opacity:.24;transition:opacity .5s ease}
.ted-cover:hover .ted-shot,.ted-cover:focus-visible .ted-shot{filter:grayscale(0) contrast(1)}
.ted-cover:hover::before,.ted-cover:focus-visible::before{opacity:0}
/* TEDx wordmark, set in TED red as the talk itself is branded */
.tedx-mark{position:absolute;left:26px;top:22px;z-index:3;width:118px;height:auto;
  filter:drop-shadow(0 2px 12px rgba(10,16,32,.5))}
@media(max-width:600px){.tedx-mark{left:14px;top:12px;width:80px}}
/* Ink layer, matching the insight cards. A dark gradient here drowned the orange
   multiply and turned the poster black, so it is soft-light and clears on hover. */
.ted-cover::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--ink);mix-blend-mode:soft-light;opacity:.28;transition:opacity .5s ease}
.ted-cover:hover::after,.ted-cover:focus-visible::after{opacity:0}
.ted-cover:hover .ted-play,.ted-cover:focus-visible .ted-play{transform:scale(1.07);
  background:var(--accent);border-color:var(--accent)}
.ted-play{position:absolute;left:50%;top:50%;z-index:3;width:76px;height:76px;
  margin:-38px 0 0 -38px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.08);transition:transform .3s var(--ease-out-expo),
  background .3s ease,border-color .3s ease}
.ted-play::before{content:"";position:absolute;left:50%;top:50%;margin:-13px 0 0 -8px;
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}
/* Sits above the player so the talk stays identified once the cover is
   replaced by the iframe. */
.ted-head{margin-bottom:22px}
.ted-kicker{display:block;font-family:var(--label);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.ted-title{font-family:var(--display);font-weight:500;
  font-size:clamp(1.3rem,2.3vw,1.7rem);color:var(--ink);line-height:1.25;margin:0}
.ted-note{margin:9px 0 0;font-size:.95rem;line-height:1.6;color:var(--muted);max-width:46em}
.ted iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.ted figcaption{margin-top:14px;font-size:.83rem;line-height:1.6;color:var(--muted)}
@media(max-width:640px){.ted-play{width:58px;height:58px;margin:-29px 0 0 -29px}
  .ted-play::before{border-width:10px 0 10px 16px;margin:-10px 0 0 -6px}
  .ted{margin:44px 0 48px}}

/* Jewelled scrollbar: terracotta at rest, emerald while grabbed. */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent-lit),var(--accent-ink));
  border-radius:99px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active{background:linear-gradient(var(--mesh),var(--mesh-deep))}
/* Firefox has no thumb pseudo-element, so it gets the resting colour only. */
html{scrollbar-color:var(--accent) var(--paper);scrollbar-width:thin}

/* page-head cut object slot (inner pages) */
.page-cut{position:absolute;z-index:1;right:6%;bottom:-8%;width:min(20vw,250px);pointer-events:none;
  filter:grayscale(.15) contrast(1.04) drop-shadow(0 26px 44px rgba(10,16,32,.2));
  animation:bob 7s ease-in-out infinite}
@media(max-width:940px){.page-cut{width:120px;right:2%;opacity:.85}}
/* the idle bob is decorative and loops forever, so it must honour reduced motion */
@media(prefers-reduced-motion:reduce){.chapter-cut,.prog-cut,.page-cut{animation:none}}

/* ---------- hero video band (appended last so it wins the cascade) ----------
   One flat ink tone over the footage and light type on top. No gradients, no glows:
   the hero reads as a deliberate dark band, the rest of the site stays on paper. */
.hero{border-bottom:none}
/* scrim carries a little of the house warmth: ink base with an accent-ink wash over it,
   so the dark band reads as ours rather than a generic black */
.hero .veil{background:
  linear-gradient(rgba(122,41,0,.22),rgba(122,41,0,.22)),
  linear-gradient(rgba(10,16,32,.46),rgba(10,16,32,.46))}
.hero .graticule{opacity:.25}
.hero .inner .eyebrow{color:var(--mesh)}
.hero h1{color:#fff}
.hero h1 i{color:#E4571A}
.hero .lede{color:rgba(255,241,229,.92)}
.hero .btn:not(.primary){color:#fff;border-color:rgba(255,241,229,.5)}
.hero .btn:not(.primary):hover{color:var(--ink);border-color:#fff}
.hero .btn:not(.primary)::before{background:#fff}
.hero-foot{background:rgba(10,16,32,.55);border-top-color:rgba(255,241,229,.18)}
.hero-foot .cell{color:rgba(255,241,229,.78)}

/* ---------- hero media: smaller band, still edge to edge (no frame) ---------- */
.hero{min-height:auto}
.hero .inner{padding:132px 0 104px}
/* play / pause control, bottom right of the video */
.vid-toggle{position:absolute;z-index:3;right:36px;bottom:74px;width:52px;height:52px;
  border-radius:50%;border:1px solid rgba(255,241,229,.55);background:rgba(10,16,32,.34);
  backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background .25s,border-color .25s,transform .25s}
.vid-toggle:hover{background:rgba(10,16,32,.6);border-color:#fff;transform:scale(1.06)}
.vid-toggle:focus-visible{outline:2px solid var(--mesh);outline-offset:3px}
.vid-toggle svg{width:22px;height:22px;fill:#FFF1E5}
.vid-toggle .ico-play{display:none}
.vid-toggle.paused .ico-play{display:block}
.vid-toggle.paused .ico-pause{display:none}
@media(max-width:940px){
  .hero .inner{padding:112px 0 84px}
  .vid-toggle{right:20px;bottom:70px;width:44px;height:44px}
  .vid-toggle svg{width:18px;height:18px}
}
/* the mesh has to hold on bright frames as well as dark ones: one GPU-composited
   halo around the whole canvas outlines every dot without touching the draw loop */
#field{filter:drop-shadow(0 0 2px rgba(10,16,32,.9)) drop-shadow(0 0 6px rgba(10,16,32,.55))}


/* ---------- border around the hero video ----------
   A real border on the hero itself. The media stays untouched and simply fills the
   box inside it, so the frame surrounds the video rather than shrinking it. */
.hero{border-left:24px solid var(--ground);border-right:24px solid var(--ground);
  border-bottom:24px solid var(--ground)}
@media(max-width:940px){
  .hero{border-left-width:14px;border-right-width:14px;border-bottom-width:14px}
}
/* hero strip reads as part of the chrome again: solid menu tone, not a dark band on the video */
.hero-foot{background:var(--ground);border-top-color:var(--line)}
.hero-foot .cell{color:var(--faint)}
/* hero scales with the viewport again, so the video band does not look stranded
   on large monitors where a content-driven height stays fixed */
.hero{min-height:86vh}
.hero .inner{padding:150px 0 118px}
@media(max-width:940px){.hero{min-height:auto}.hero .inner{padding:112px 30px 84px}}
.hero{min-height:78vh}
.hero .inner{padding:140px 0 108px}
/* headline picks up the paper tone of the section below, so the hero and the page read as one palette */
.hero h1{color:var(--paper)}
/* tighter vertical rhythm: 120px stacked top and bottom left ~240px between sections */
section{padding:78px 0}
@media(max-width:940px){section{padding:56px 0}}
/* the control should be findable, not loud: it recedes until hovered or focused */
.vid-toggle{width:40px;height:40px;border-color:rgba(255,241,229,.3);
  background:rgba(10,16,32,.2);opacity:.5}
.vid-toggle svg{width:15px;height:15px;fill:rgba(255,241,229,.85)}
.vid-toggle:hover,.vid-toggle:focus-visible{opacity:1;background:rgba(10,16,32,.5);
  border-color:rgba(255,241,229,.75);transform:none}
.hero:hover .vid-toggle{opacity:.78}
/* mobile: the control moves to the top-right gap between header and eyebrow,
   because the bottom of the hero is fully occupied by CTAs and the foot strip */
@media(max-width:940px){.vid-toggle{top:84px;right:16px;bottom:auto}}


/* ---------- article figures ----------
   Shared by the frontier pages; the insight articles still carry their own
   scoped copies. Numbers are the content, so the frame stays quiet. */
.afig{margin:2.6rem 0;padding:26px 28px 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card)}
.afig .fk{font-family:var(--label);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mesh-deep)}
.afig p.cap{font-family:var(--sans);font-size:.86rem;color:var(--muted);line-height:1.5;margin:18px 0 0}
.afig .cap b{color:var(--ink);font-weight:700}
.afig .rows{margin-top:22px;display:flex;flex-direction:column;gap:19px}
.afig .row .top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.afig .row .lab{font-family:var(--sans);font-size:.88rem;color:var(--ink-soft);line-height:1.4}
.afig .row .lab b{font-weight:700;color:var(--ink)}
.afig .row .num{font-family:var(--display);font-size:1.35rem;color:var(--accent-deep);font-variant-numeric:tabular-nums;flex:none}
.afig .track{height:9px;background:var(--wash);border-radius:99px;overflow:hidden}
.afig .track i{display:block;height:100%;width:var(--w);background:var(--accent);border-radius:99px}
.afig .row.muted .track i{background:var(--mesh-deep);opacity:.55}
.afig .src{margin-top:20px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--label);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.afig.rev .track i{width:0;transition:width 1.1s var(--ease-out-expo) .25s}
.afig.rev.in .track i{width:var(--w)}
/* milestone list: a dated roadmap rather than a magnitude */
.afig .mile{margin-top:22px;display:flex;flex-direction:column;gap:0}
.afig .mile .m{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:13px 0;
  border-top:1px solid var(--line);align-items:baseline}
.afig .mile .m:last-child{border-bottom:1px solid var(--line)}
.afig .mile .m b{font-family:var(--display);font-size:1.05rem;color:var(--accent-deep)}
.afig .mile .m span{font-family:var(--sans);font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.afig .mile .m.done b{color:var(--faint)}
@media(prefers-reduced-motion:reduce){.afig.rev .track i,.afig.rev.in .track i{transition:none;width:var(--w)}}
@media(max-width:640px){.afig .mile .m{grid-template-columns:1fr;gap:3px}}


/* ---------- work with us: process, refusals, enquiry form ---------- */
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.quad .cell h3{font-size:1.4rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:8px}
.step{display:flex;gap:14px;align-items:flex-start}
.step b{font-family:var(--display);font-size:1.5rem;color:var(--accent);line-height:1;flex:none;
  width:34px;height:34px;border:1px solid var(--line-accent);border-radius:50%;
  display:grid;place-items:center;font-weight:500}
.step h4{font-family:var(--sans);font-size:.98rem;font-weight:700;margin:0 0 6px;color:var(--ink)}
.step p{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0}
.wont{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line)}
.wont .w{padding:24px 26px 24px 0;border-bottom:1px solid var(--line)}
.wont .w:nth-child(odd){border-right:1px solid var(--line);padding-right:34px}
.wont .w:nth-child(even){padding-left:34px}
.wont h4{font-family:var(--display);font-weight:500;font-size:1.22rem;margin:0 0 9px;color:var(--ink)}
.wont p{font-size:.93rem;line-height:1.68;color:var(--muted);margin:0}
/* enquiry */
.enq{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.enq-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem);margin:0 0 1rem}
.enq-copy p{color:var(--muted);font-size:1rem;line-height:1.72;margin:0 0 1rem}
.enq-alt{font-size:.92rem!important}
.enq-form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 30px 26px}
.f-row{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f-row label{font-family:var(--label);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.f-row label i{font-style:normal;text-transform:none;letter-spacing:.04em;opacity:.75}
.f-row input,.f-row select,.f-row textarea{font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:11px 13px;
  width:100%;transition:border-color .25s,box-shadow .25s}
.f-row textarea{resize:vertical;line-height:1.6;min-height:120px}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(228,87,26,.14)}
.f-row input[aria-invalid="true"],.f-row textarea[aria-invalid="true"]{border-color:#B85520}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-note{font-size:.8rem;line-height:1.6;color:var(--faint);margin:4px 0 18px}
.f-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.f-status{font-family:var(--sans);font-size:.88rem;color:var(--muted)}
.f-status.ok{color:var(--mesh-deep);font-weight:600}
.f-status.err{color:#B85520}
.enq-form.sent .f-row,.enq-form.sent .f-two,.enq-form.sent .f-note{display:none}
@media(max-width:940px){
  .quad,.wont{grid-template-columns:1fr}
  .wont .w:nth-child(odd){border-right:none;padding-right:0}
  .wont .w:nth-child(even){padding-left:0}
  .steps{grid-template-columns:1fr 1fr}
  .enq{grid-template-columns:1fr;gap:30px}
}
@media(max-width:640px){.steps{grid-template-columns:1fr}.f-two{grid-template-columns:1fr;gap:0}}



/* the broken arcs are the finding, so they take the accent and a dashed stroke */
/* icons are stroked in paper on the ink node, so they read at any size */


/* ---------- newsletter signup ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.news-form{display:flex;flex-direction:column;align-items:stretch;gap:11px}
.news-form input{font-family:var(--sans);font-size:.95rem;padding:.95rem 1.1rem;border:1px solid var(--line-mid);
  border-radius:var(--r-el);background:var(--panel);color:var(--ink);width:100%;
  transition:border-color .25s,box-shadow .25s}
.news-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(228,87,26,.14)}
.news-form input[aria-invalid="true"]{border-color:#B85520}
.news-form .btn{width:100%;text-align:center}
.news-note{font-size:.78rem;line-height:1.55;color:var(--faint);margin:.3rem 0 0}
.news-note.ok{color:var(--mesh-deep);font-weight:600}
.news-note.err{color:#B85520}
.news-form.sent input,.news-form.sent .btn{display:none}
@media(max-width:940px){.news{grid-template-columns:1fr;gap:28px}}

/* ---------------------------------------------------------------------------
   Phone spacing. Last in the sheet on purpose: the paddings it reduces are
   declared further down than the breakpoints above, so an earlier block
   loses on source order and the page keeps its desktop dead space.
--------------------------------------------------------------------------- */
@media(max-width:640px){
  #frontiers{padding-top:60px}
  section{padding:44px 0}
  .statement.mission{padding-top:48px;padding-bottom:56px}
  /* Horizontal 0 here wipes the 30px gutter .wrap provides, so the hero text
     ran to both screen edges. The extra top space clears the video toggle,
     which the eyebrow was running underneath. */
  .hero .inner{padding:136px 30px 72px}
  .hero .eyebrow{max-width:15em}
  .prog-hero .inner{padding:112px 30px 40px}
  /* .article-head and its inner wrap each carry top padding, so on a phone they
     stacked to 289px before the first line of text. The outer one goes; the
     inner keeps enough to clear the fixed site header. */
  .article-head{padding-top:0;padding-bottom:28px}
  .article-head .inner{padding-top:104px;padding-bottom:24px}
  .page-head{padding-top:104px;padding-bottom:36px}
  .sec-head{margin-bottom:22px}
  /* Keep the orrery: it belongs to the section. It was overlapping the label
     under it because of a negative bottom margin meant for a wider layout. */
  .chapter-orrery{margin:0 auto 14px;width:min(66vw,270px);height:min(66vw,270px)}
}

/* ---------------------------------------------------------------------------
   Print. A consultation response is submitted as a document, so the page has to
   become one: no navigation, no decoration, black on white, and headings that do
   not strand themselves at the foot of a page.
--------------------------------------------------------------------------- */
.print-cover{display:none}
@media print {
  /* A consultation submission needs to say what it answers, who sent it and
     whether it may be published. On screen this block is not shown. */
  .print-cover{display:block!important;border:1pt solid #000;padding:10pt 12pt;margin:0 0 16pt}
  .print-cover .pc-org{font-size:13pt;font-weight:700;margin:0 0 8pt;letter-spacing:.02em}
  .print-cover .pc-line{font-size:9.5pt;line-height:1.45;margin:0 0 5pt}
  /* Reading time belongs on a web page, not on a submission. */
  .article-head .eyebrow,.kicker{font-size:8pt}
  :root{--paper:#fff;--panel:#fff;--ground:#fff;--wash:#f4f4f4;
        --ink:#000;--ink-soft:#1a1a1a;--muted:#333;--faint:#555;
        --accent:#000;--accent-deep:#000;--line:#ccc;--line-mid:#bbb}
  html,body{background:#fff!important;color:#000!important;font-size:11pt}
  .site-head,.site-foot,.mobile-nav,.nav-toggle,.vid-toggle,.news,.terms,
  canvas,video,.halftone,.float-obj,.page-cut,.chapter-cut,.prog-cut,
  .chapter-orrery,.ht-side,.giant-word,.ted,.skip,.li-followers{display:none!important}
  main,.wrap,.prose,.article-body{max-width:none!important;margin:0!important;padding:0!important}
  .article-head,.page-head{padding:0 0 14pt!important;border-bottom:1pt solid #000;margin-bottom:18pt}
  h1{font-size:20pt;line-height:1.2;margin:0 0 8pt}
  h2{font-size:13pt;margin:18pt 0 6pt;break-after:avoid;page-break-after:avoid}
  h3{font-size:11.5pt;margin:12pt 0 4pt;break-after:avoid;page-break-after:avoid}
  p,li{font-size:10.5pt;line-height:1.5;orphans:3;widows:3}
  .standfirst{font-size:12pt;line-height:1.45}
  a{color:#000!important;text-decoration:none}
  /* A reader on paper cannot follow a link, so the source is printed out. */
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}
  figure,table,blockquote,.pull{break-inside:avoid;page-break-inside:avoid}
  .rev,.rise{opacity:1!important;transform:none!important}
  @page{size:A4;margin:20mm 18mm}
}