/* PhAI Labs -- site stylesheet
   1. faces        IBM Plex, self-hosted, subset
   2. tokens       colour, type stacks, spacing
   3. reset
   4. chrome       progress bar, masthead, drawer, footer, reveal
   5. system       type scale, shell, sections, buttons, links, figures, KV
   6. components   lists, timeline, people, spine, positions, faq, cases ...
   7. pages        hero variants and page-specific composition
   8. responsive */

/* ============================================================ 1. faces */
@font-face{font-family:'Plex Sans';font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexSans-Light.woff2) format('woff2')}
@font-face{font-family:'Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexSans-Regular.woff2) format('woff2')}
@font-face{font-family:'Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexSans-Medium.woff2) format('woff2')}
@font-face{font-family:'Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Plex Serif';font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexSerif-Light.woff2) format('woff2')}
@font-face{font-family:'Plex Serif';font-weight:300;font-style:italic;font-display:swap;src:url(/assets/fonts/IBMPlexSerif-LightItalic.woff2) format('woff2')}
@font-face{font-family:'Plex Serif';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexSerif-Regular.woff2) format('woff2')}
@font-face{font-family:'Plex Serif';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexSerif-Medium.woff2) format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexMono-Regular.woff2) format('woff2')}
@font-face{font-family:'Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/IBMPlexMono-Medium.woff2) format('woff2')}

/* ============================================================ 2. tokens */
/* Windows: YaHei sits visibly larger than Plex at the same size; local() + size-adjust evens it. */
@font-face{font-family:'YaHei Adjusted';src:local('Microsoft YaHei UI'),local('Microsoft YaHei');size-adjust:94%}
/* zh headlines: a 96 KB subset of Noto Serif SC covering every hanzi used in a heading (pnpm fonts). */
@font-face{font-family:'PhAI Serif SC';font-weight:400;font-display:swap;src:url(/assets/fonts/NotoSerifSC-Display.woff2) format('woff2');unicode-range:U+3000-303F,U+4E00-9FFF,U+FF00-FFEF}
:root{
  color-scheme:dark;
  --bg:#0a0a0b;
  --bg-2:#101012;
  --bg-3:#151518;
  --ink:#f0eee8;
  --ink-2:rgba(240,238,232,.68);
  --ink-3:rgba(240,238,232,.44);
  --ink-4:rgba(240,238,232,.26);
  --rule:rgba(240,238,232,.12);
  --rule-soft:rgba(240,238,232,.07);

  /* the primary: PhAI blue / purple-blue */
  --blue:#9ba7ff;
  --blue-2:#aab4ff;
  --blue-deep:#5d6bd6;
  --blue-ink:#3a45a8;
  --blue-glow:rgba(155,167,255,.20);
  --blue-line:rgba(155,167,255,.38);
  /* amber: intersections, key feedback, action */
  --amber:#d29c52;
  --amber-2:#e0ae66;
  --amber-glow:rgba(210,156,82,.20);

  --sans:'Plex Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Noto Sans SC','YaHei Adjusted','Microsoft YaHei UI','Microsoft YaHei','Segoe UI',sans-serif;
  --serif:'Plex Serif','PhAI Serif SC','Songti SC','STSong','Noto Serif SC','SimSun',Georgia,serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --shell:1280px;
  --narrow:760px;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --gap:clamp(1.5rem,3vw,3rem);
  --sec:clamp(4rem,10vh,8rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --field-max:1;                     /* 0 turns the whole living substrate off */

  /* fluid type scale, 1280 -> 1920 */
  --t-hero:clamp(2.6rem,5.6vw,5rem);
  --t-1:clamp(2.2rem,4.4vw,3.8rem);
  --t-2:clamp(1.55rem,2.6vw,2.4rem);
  --t-3:clamp(1.1rem,1.35vw,1.3rem);
  --t-lede:clamp(1.02rem,1.25vw,1.22rem);
  --t-body:clamp(.98rem,1.05vw,1.06rem);
  --t-small:.88rem;
  --t-eyebrow:.78rem;
}

/* ============================================================ 3. reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100svh}
html[lang="zh-CN"] body{line-break:strict;text-autospace:normal;line-height:1.85}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}
:focus-visible{outline:1.5px solid var(--blue);outline-offset:4px;border-radius:2px}
::selection{background:rgba(155,167,255,.28)}
.skip{position:absolute;left:-999px;top:0;z-index:100;padding:.6rem 1rem;background:var(--bg-3);color:var(--ink)}
.skip:focus{left:var(--pad)}

/* ============================================================ 4. chrome */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:80;pointer-events:none}
/* an instrument readout rather than a loading bar: a brighter band sweeps along the fill */
.progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear;
  background:linear-gradient(90deg,var(--blue-deep) 0%,var(--blue-deep) 20%,var(--blue-2) 50%,var(--blue-deep) 80%,var(--amber) 100%);
  background-size:200% 100%;animation:sweep 2.4s linear infinite alternate}
@keyframes sweep{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.progress i{animation:none;background:var(--blue)}}

.mast{position:fixed;inset:2px 0 auto 0;z-index:70;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.5rem;
  padding:1.05rem var(--pad);border-bottom:1px solid transparent;
  transition:padding .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.is-scrolled .mast{padding-block:.65rem;background:rgba(10,10,11,.74);border-bottom-color:var(--rule-soft);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mast__brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink)}
.mast__logo{display:block;height:38px;width:auto}
.mast__brand .mark{width:16px;height:16px;overflow:visible}
.mast__word{font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.mast__word b{font-weight:400;color:var(--ink-2);margin-left:.3em}
.mast__nav{display:flex;justify-content:center;gap:clamp(.9rem,2vw,1.9rem);font-size:.95rem;font-weight:600;color:var(--ink-2)}
.mast__nav a{position:relative;padding:.35rem 0;transition:color .25s}
.mast__nav a:hover,.mast__nav a[aria-current="page"]{color:var(--ink)}
.mast__nav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--blue)}
.mast__tools{display:flex;align-items:center;gap:.9rem}
.mast__lang{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-2);padding:.34rem .58rem;border:1px solid var(--rule);border-radius:999px;transition:color .25s,border-color .25s}
.mast__lang:hover{color:var(--ink);border-color:var(--ink-3)}
.mast__cta{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;font-size:.84rem;font-weight:500;color:#141008;background:var(--amber);transition:background .25s,transform .3s,opacity .3s}
/* on the KV pages the hero already carries the amber; the pill arrives on scroll */
.page-home:not(.is-scrolled) .mast__cta,.page-collaborate:not(.is-scrolled) .mast__cta{opacity:0;transform:translateY(-.3rem);pointer-events:none}
.mast__cta:hover{background:var(--amber-2);transform:translateY(-1px)}
.mast__menu{display:none;position:relative;width:40px;height:40px;align-items:center;justify-content:center}
.mast__menu i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.mast__menu i:first-of-type{transform:translateY(-4px)}.mast__menu i:last-of-type{transform:translateY(4px)}
.mast__menu[aria-expanded="true"] i:first-of-type{transform:rotate(45deg)}
.mast__menu[aria-expanded="true"] i:last-of-type{transform:rotate(-45deg)}
.mast__menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.drawer{position:fixed;inset:0;z-index:65;padding:6rem var(--pad) 3rem;display:flex;flex-direction:column;gap:.2rem;background:rgba(10,10,11,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:auto}
.drawer[hidden]{display:none}
.drawer a{padding:.9rem 0;font-family:var(--serif);font-size:1.6rem;font-weight:400;border-bottom:1px solid var(--rule-soft)}
.drawer a[aria-current="page"]{color:var(--blue)}
.drawer__lang{font-family:var(--mono)!important;font-size:.9rem!important;letter-spacing:.1em;margin-top:1rem}
.drawer__cta{color:var(--amber)!important}
body.drawer-open{overflow:hidden}

/* blur-up reveal: blocks come into focus rather than slide in */
.rv{opacity:0;transform:translateY(12px);filter:blur(8px);
  transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms),filter .8s var(--ease) var(--d,0ms)}
.rv.in{opacity:1;transform:none;filter:none}
/* headline stagger: words (en) or characters (zh) rise 50ms apart once the headline is in */
.w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(6px);
  transition:opacity .6s var(--ease) calc(var(--i,0)*50ms),transform .6s var(--ease) calc(var(--i,0)*50ms),filter .6s var(--ease) calc(var(--i,0)*50ms)}
.in .w{opacity:1;transform:none;filter:none}
/* the edge rails */
.rails{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
.rail{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;width:1rem}
.rail--l{left:.55rem}.rail--r{right:.55rem}
.rail i{width:1px;background:var(--rule-soft);flex:1 1 0}
.rail i:first-child,.rail i:last-child{flex:0 0 15vh}
.rail b{font-family:var(--mono);font-weight:400;font-size:.75rem;line-height:1;color:var(--amber);opacity:.7;padding:.3rem 0}
@media(min-width:1024px){.rails{display:block}}
@media(prefers-reduced-motion:reduce){
  .sec::before{transform:none;transition:none}
  .loop::after,.spine::after,.people::after,.btn--primary::after{animation:none}
  .mast .mark path{stroke-dashoffset:0;animation:none}
  .timeline--nodes::before{transform:none}
  .chapter__head .eyebrow .num{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .loop::before,.people::before{transform:none;transition:none}
  .loop__node i,.loop__node span,.person,.person::after,.cst__n{opacity:1;transform:none;transition:none}
  .cst__e{stroke-dashoffset:0;transition:none}.cst__n--amber{animation:none}
  .dg__draw{stroke-dashoffset:0;animation:none}.dg__mv,.dg__ring{display:none}.dg__blink{animation:none;opacity:1}
  .dg__fade{opacity:var(--o,1);animation:none}.dg__breathe,.dg__frg{animation:none;opacity:1}.dg__grow{animation:none;width:460px}.dg__mv--fade,.dg__mv--burst{display:none}
  .rv,.w{opacity:1;transform:none;filter:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.foot{margin-top:var(--sec);border-top:1px solid var(--rule);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
/* the contact column carries four named inboxes now, so it takes the room */
.foot__inner{width:min(var(--shell),100%);margin:0 auto;padding:clamp(2.5rem,6vh,4rem) var(--pad) 2rem;display:grid;grid-template-columns:1.05fr .8fr 2.1fr;gap:2rem}
.foot__brand{display:grid;gap:1rem;align-content:start}
.foot__brand .mark{width:22px;height:22px;overflow:visible}
.foot__logo{display:block;height:44px;width:auto}
.foot__line{font-family:var(--serif);font-weight:400;font-size:1.05rem;line-height:1.5;color:var(--ink-2);max-width:24em}
.foot__nav,.foot__contact{display:grid;gap:.45rem;align-content:start;font-size:.9rem;color:var(--ink-2)}
.foot__nav a:hover,.foot__contact a:hover{color:var(--ink)}
/* it heads a grid of four groups whose own labels are .86rem in full ink, so
   at .66rem in --ink-3 the section title was smaller and dimmer than the
   items under it -- the hierarchy read upside down */
.foot__label{font-family:var(--mono);font-size:.84rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.35rem}
/* Four inboxes, two by two: which address to write to is the reader's first
   question, so the kind leads and the address follows it. */
.foot__cs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem 1.8rem;margin-top:.15rem}
.foot__cs li{display:grid;gap:.2rem;align-content:start;min-width:0}
.foot__ckind{font-size:.86rem;color:var(--ink);line-height:1.4}
.foot__cs a{font-size:.86rem;color:var(--ink-2);word-break:break-all;transition:color .25s}
.foot__cs a:hover{color:var(--ink)}
.foot__cnote{font-size:.76rem;line-height:1.6;color:var(--ink-3)}
.foot__social{display:flex;align-items:center;gap:1.4rem;margin-top:1.4rem}
/* The mark is 20px but the hit area is 44px: a 20px tap target fails on a
   phone, and the footer is where a thumb reaches last. */
.foot__s{position:relative;display:inline-flex;align-items:center}
.foot__social [data-mark]{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;color:var(--ink-3);
  transition:color .25s var(--ease);position:relative;
  background:none;border:0;padding:0;font:inherit;
}
.foot__social button[data-mark]{cursor:pointer}
.foot__social [data-mark]::after{content:'';position:absolute;inset:-.45rem}
.foot__s:hover [data-mark],.foot__s:focus-within [data-mark]{color:var(--blue-2)}
.foot__social svg{width:100%;height:100%;display:block;fill:currentColor}
/* Xiaohongshu ships a horizontal wordmark rather than a square glyph, so it
   gets its own width: cropped to its ink the mark is 2.8:1, and 3.94rem puts
   the characters at 22.5px -- the same optical height as the WeChat mark's
   22.9px. Equal box sizes would leave the hanzi less than half that and the
   row would read with a hole in it. */
.foot__social [data-mark="rednote"]{width:3.94rem}
/* The English tree cannot use the mark: Xiaohongshu's only logo is the hanzi
   wordmark -- even the international rednote app icon is set in hanzi -- and an
   English page here carries no Chinese. The name is set in the site's own type
   instead of a faked latin wordmark, so it reads as a label, not a counterfeit. */
.foot__social .is-word{width:auto;height:auto}

/* The code panel. It opens upward because the row sits near the page bottom,
   and ::before bridges the gap so the pointer can travel from mark to panel
   without crossing dead space and dismissing it. */
.foot__qr{
  position:absolute;bottom:calc(100% + .7rem);left:50%;
  transform:translateX(-50%) translateY(.25rem);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  /* max-content, or shrink-to-fit resolves against the 28px mark: the global
     img{max-width:100%} lets the code squeeze to nothing and the panel collapses. */
  width:max-content;padding:.55rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--bg-2);box-shadow:0 12px 34px rgba(0,0,0,.5);z-index:30;
}
.foot__qr::before{content:'';position:absolute;top:100%;left:0;right:0;height:.9rem}
.foot__s:hover .foot__qr,.foot__s:focus-within .foot__qr{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* 160px, not the 140 the panel would naturally take: at 258/140 the resampler
   blurs the module edges and the code stops decoding. The asset is 320 so a 2x
   screen is 1:1 and a 1x screen halves it exactly. */
.foot__qr img{display:block;width:160px;height:160px;max-width:none;border-radius:3px}
.foot__qr em{
  display:block;margin-top:.45rem;text-align:center;font-style:normal;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:520px){.foot__qr{left:0;transform:translateX(0) translateY(.25rem)}
  .foot__s:hover .foot__qr,.foot__s:focus-within .foot__qr{transform:translateX(0) translateY(0)}}
.foot__word{
  font-size:1.02rem;font-weight:500;letter-spacing:-.01em;line-height:1;
  white-space:nowrap;
}
.foot__base{width:min(var(--shell),100%);margin:0 auto;padding:1.2rem var(--pad) 2.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;align-items:center;border-top:1px solid var(--rule-soft);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3)}
.foot__top:hover{color:var(--ink)}

/* ============================================================ 5. system */
.shell{width:min(var(--shell),100%);margin:0 auto;padding-inline:var(--pad)}
.shell--narrow{width:min(var(--narrow),100%)}
.sec{position:relative;padding-block:var(--sec)}
.sec + .sec{padding-top:0}
.sec--statement,.sec--dfm,.sec--project,.sec--chapter,.sec--apply,.sec--join,.sec--roadmap,.sec--pillars,.sec--modules,.sec--collab,.sec--news,.sec--people,.sec--positions,.sec--milestones,.sec--timeline{padding-top:var(--sec)}
.sec--statement::before,.sec--dfm::before,.sec--project::before,.sec--chapter::before,.sec--apply::before,.sec--roadmap::before,.sec--modules::before,.sec--collab::before,.sec--news::before,.sec--people::before,.sec--positions::before,.sec--milestones::before{
  content:'';position:absolute;top:0;left:var(--pad);right:var(--pad);height:1px;background:var(--rule-soft)}

/* type */
.eyebrow{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:clamp(1rem,2vh,1.5rem)}
html[lang="zh-CN"] .eyebrow{letter-spacing:.16em}
.eyebrow .num,.num{font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.08em;color:var(--blue)}
.brand{text-transform:none}
.hero__program{margin-top:1.4rem;max-width:44em;font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
.hero__program a{margin-left:.4rem;color:var(--blue);white-space:nowrap;border-bottom:1px solid transparent}
.hero__program a:hover{border-bottom-color:currentColor}
.eyebrow__link{margin-left:auto;text-transform:none;letter-spacing:.02em;font-family:var(--sans);font-size:.86rem;color:var(--ink-2)}
.eyebrow__link:hover{color:var(--ink)}
.eyebrow a{color:var(--ink-2)}.eyebrow a:hover{color:var(--ink)}
.eyebrow .sep{color:var(--ink-4)}
.display,.display-2{font-family:var(--serif);font-weight:300;color:var(--ink);letter-spacing:-.025em;line-height:1.06;text-wrap:balance}
.display{font-size:var(--t-1);max-width:20em}
.display--hero{font-size:var(--t-hero);max-width:14em}
.display-2{font-size:var(--t-2);line-height:1.12;max-width:20em;font-weight:400}
.display-2__sub{display:block;margin-top:.35em;font-family:var(--sans);font-weight:400;font-size:.5em;letter-spacing:0;color:var(--ink-2)}
html[lang="zh-CN"] .display,html[lang="zh-CN"] .display-2{letter-spacing:.01em;line-height:1.22;font-weight:400}
html[lang="zh-CN"] .display{max-width:16em}
html[lang="zh-CN"] .display--hero{max-width:12em}
.display em,.display-2 em{font-style:italic;font-weight:inherit}
.hl,.display em.hl,.display-2 em.hl{color:var(--blue-2);font-style:normal}
.subtitle{margin-top:clamp(.8rem,1.6vh,1.2rem);font-family:var(--serif);font-weight:400;font-size:var(--t-3);line-height:1.4;color:var(--ink-2);max-width:32em}
.lede{margin-top:clamp(1rem,2vh,1.5rem);font-size:var(--t-lede);line-height:1.65;color:var(--ink-2);max-width:40em}
html[lang="zh-CN"] .lede{line-height:1.85;max-width:36em}
.subhead{margin:clamp(2rem,4vh,3rem) 0 1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
h3{font-family:var(--sans);font-weight:500;font-size:var(--t-3);line-height:1.35;color:var(--ink);letter-spacing:-.01em}
.prose{color:var(--ink-2);max-width:40em}
.prose p + p{margin-top:1em}
.prose strong{color:var(--ink);font-weight:500}
.prose--lg{font-size:var(--t-lede);line-height:1.7}
html[lang="zh-CN"] .prose--lg{line-height:1.9}
.prose__note{color:var(--ink-3);font-size:var(--t-small)}
.prose--cols{max-width:none;column-count:2;column-gap:var(--gap);margin-top:clamp(2rem,4vh,3rem)}
.prose--cols p{break-inside:avoid}
.note{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.4rem;font-size:var(--t-small);color:var(--ink-3);max-width:36em}
.note .dot{flex:none;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber-glow)}
.privacy{margin-top:1.6rem;padding-left:1rem;border-left:1px solid var(--rule);font-size:var(--t-small);color:var(--ink-3);max-width:36em}

/* layout */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gap);align-items:start}
.split > :first-child .eyebrow:last-child{margin-bottom:0}
.split--figure{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split--project{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.split--chapter{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.split .display-2,.split .display{margin-bottom:0}
.split .lede{margin-top:0}
.split .prose{margin-top:.2rem}

/* buttons + links */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;margin-top:clamp(1.4rem,3vh,2rem)}
.actions__note{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:9.5rem;gap:.5rem;padding:.72rem 1.25rem;border:1px solid var(--rule);border-radius:999px;font-size:.92rem;font-weight:500;color:var(--ink);
  transition:border-color .25s,background .25s,transform .25s,color .25s}
.btn:hover{border-color:var(--ink-3);background:rgba(240,238,232,.04);transform:translateY(-1px)}
.btn--primary{border-color:transparent;background:var(--amber);color:#141008}
.btn--primary:hover{background:var(--amber-2);border-color:transparent}
.btn--lg{padding:.9rem 1.55rem;font-size:1rem}
.links{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.4rem}
.link{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue);font-weight:500;transition:color .25s}
.link:hover{color:var(--blue-2)}
.link--pending{color:var(--ink-3);font-weight:400;cursor:default}
.link--pending small{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .5rem;border:1px solid var(--rule);border-radius:999px;color:var(--amber)}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.tags li{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;padding:.32rem .65rem;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2)}
.checks{display:grid;gap:.55rem;margin-top:1rem;color:var(--ink-2)}
.checks li{position:relative;padding-left:1.4rem}
.checks li::before{content:'';position:absolute;left:0;top:.72em;width:.6rem;height:1px;background:var(--blue)}

/* figures + key visual */
.figure{margin:0}
.figure img{width:100%;border-radius:4px}
.figure figcaption{margin-top:.8rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.figure--dfm{position:relative}
/* the glow may bleed vertically but never horizontally -- a negative horizontal
   inset here widened the document at 1280 and on phones */
.figure--dfm::before{content:'';position:absolute;inset:-14% 0;z-index:-1;background:radial-gradient(60% 50% at 50% 50%,var(--blue-glow),transparent 70%);opacity:.6;pointer-events:none}
.figure--wide{margin-top:clamp(2rem,4vh,3rem)}
.kv{position:relative}
.kv__img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  -webkit-mask-image:radial-gradient(ellipse 72% 80% at 62% 48%,#000 38%,transparent 76%);
  mask-image:radial-gradient(ellipse 72% 80% at 62% 48%,#000 38%,transparent 76%)}

/* sub navigation */
.subnav{position:sticky;top:0;z-index:60;background:rgba(10,10,11,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-soft)}
.subnav__inner{display:flex;gap:1.6rem;overflow-x:auto;padding-block:.75rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);scrollbar-width:none}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav__inner a{white-space:nowrap;padding:.25rem 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.subnav__inner a:hover,.subnav__inner a.is-active{color:var(--ink);border-bottom-color:var(--blue)}
.is-scrolled .subnav{top:3.35rem}

/* ============================================================ 5b. the field */
/* two fixed canvases under everything: decks at low resolution (the upscale is
   the blur), motes and the hero pass at device resolution. Content stacks above. */
.field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.field.is-on{opacity:1}
.main,.foot{position:relative;z-index:1}
.rails{z-index:2}
/* a chapter opening: the top hairline draws from the left once the section is on stage */
.sec::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease)}
.sec.is-in::before{transform:scaleX(1)}
/* after a strip draws and its nodes light, one bead runs the line to the amber node */
.loop::after,.spine::after,.people::after{content:'';position:absolute;left:0;width:28px;height:5px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--blue-2));opacity:0;pointer-events:none;z-index:1}
.loop::after{top:2px}
.spine::after{top:calc(.35rem - 2px)}
.people::after{top:calc(var(--ring)/2 - 2px)}
.loop.in::after,.spine.in::after,.people.in::after{animation:bead 1.8s var(--ease) 1.5s 1 both}
@keyframes bead{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(var(--amber-x,66%) - 28px);opacity:0}}
/* a primary call to action announces itself once: an amber ring, twice, then stillness */
.btn--primary{position:relative}
.btn--primary::after{content:'';position:absolute;inset:-1px;border-radius:999px;border:1px solid var(--amber);opacity:0;pointer-events:none}
.btn--primary.in::after{animation:ring 1.5s var(--ease) .9s 2}
@keyframes ring{0%{inset:-1px;opacity:.7}100%{inset:-10px;opacity:0}}
/* the mark draws its two loops on a hard load, blue then amber */
.mast .mark path{stroke-dasharray:1;stroke-dashoffset:1;animation:markdraw .7s var(--ease) .1s forwards}
.mast .mark path:nth-child(2){animation-delay:.4s}
@keyframes markdraw{to{stroke-dashoffset:0}}
/* the news timeline fills as you read; nodes light as the fill passes them */
.timeline--nodes::before{transform:scaleY(var(--p,0));transform-origin:50% 0}
.timeline--nodes .entry::before{background:var(--bg);border:1px solid var(--blue-line);box-shadow:none;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.timeline--nodes .entry.is-lit::before{background:var(--blue);box-shadow:0 0 12px var(--blue-glow)}
/* chapter folios drift up and brighten as they cross the viewport */
@supports(animation-timeline:view()){
  .chapter__head .eyebrow .num{animation:folio linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
}
@keyframes folio{from{transform:translateY(26px);opacity:.35}to{transform:none;opacity:1}}
/* page turns: the masthead and the field stay put, the page rises in */
@view-transition{navigation:auto}
.mast{view-transition-name:mast}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .34s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

/* ---------------- lit buttons ---------------- */
/* The cursor carries a light and an outlined button is a machined surface: its
   1px border brightens along the arc nearest the pointer and stays at its
   resting value everywhere else. The hot-white -> amber -> blue run is the
   orb's own cursor gradient, so the page and the key visual are lit by one
   source. Nothing is added: while the light is on, the uniform lift to
   --ink-3 that .btn:hover carries is withdrawn, so the peak composites to
   about .38 against today's flat .44 and the rest of the ring sits at .12.
   Strictly less light than today, redistributed.
   A 1px line, never an area, and never a box-shadow: on #0a0a0b a soft blob is
   indistinguishable from a dirty screen, and glow that escapes the box is
   precisely that blob.
   The query is the whole motion policy. With no hover hardware, a coarse
   pointer or reduced motion the pseudo-element does not exist -- which matters,
   because the blanket transition-duration:.01ms!important above would not
   remove a hover effect, it would make it snap on under the cursor. It also
   re-evaluates live, so an OS toggle lands without a reload and the script
   never has to watch matchMedia. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* without mask compositing the frame paints as a filled disc, which is the
     smudge this exists to avoid: sit it out rather than approximate it */
  @supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
    .btn:not(.btn--primary){position:relative;--lx:50%;--ly:50%}
    /* inset:-1px on a 1px border resolves to the element's own border box, so
       padding:1px plus an excluded content-box mask lays the specular exactly
       over the border already drawn there -- no second line, and nothing ever
       paints outside the box for .hero--home's overflow:hidden to clip */
    .btn:not(.btn--primary)::before{
      content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;
      opacity:0;transition:opacity .26s var(--ease);
      background:radial-gradient(circle 90px at var(--lx) var(--ly),
        rgba(255,240,219,.30) 0%,rgba(255,240,219,.17) 20%,rgba(210,156,82,.10) 48%,rgba(155,167,255,.045) 74%,rgba(155,167,255,0) 100%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
              mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
    .btn:not(.btn--primary).is-under::before{opacity:1}
    /* the budget, kept rather than claimed: the specular replaces .btn:hover's
       uniform border lift, it does not stack on top of it */
    .btn:not(.btn--primary).is-under{border-color:var(--rule)}
    /* @view-transition snapshots the outgoing page at pageswap; kill the light
       on that frame rather than fading it into ::view-transition-old */
    :root.is-leaving .btn:not(.btn--primary)::before{transition:none;opacity:0}
  }
}

/* ============================================================ 6. components */
/* numbered lists set as ruled columns, never boxes */
.principles,.criteria,.audience,.capabilities,.directions,.pillars{display:grid;gap:0 var(--gap);margin-top:clamp(2rem,4vh,3rem);border-top:1px solid var(--rule)}
.principles{grid-template-columns:repeat(3,minmax(0,1fr))}
.criteria,.audience{grid-template-columns:repeat(2,minmax(0,1fr))}
.capabilities,.directions{grid-template-columns:repeat(3,minmax(0,1fr))}
.pillars{grid-template-columns:repeat(3,minmax(0,1fr));border-top:0}
.principles li,.criteria li,.audience li,.capabilities li,.directions li,.pillars li{position:relative;padding:1.4rem 0 1.8rem;border-bottom:1px solid var(--rule-soft)}
.principles li .num,.criteria li .num,.audience li .num,.capabilities li .num,.directions li .num{display:block;margin-bottom:.9rem}
.principles li h3,.criteria li h3,.audience li h3,.capabilities li h3,.directions li h3{margin-bottom:.55rem}
/* Five collaborator types in a two-column grid leaves the last row half
   empty. An odd final item takes the whole row instead; the measure is
   capped so the paragraph does not run the full 1136px. */
.audience li:last-child:nth-child(odd){grid-column:1 / -1}
.audience li:last-child:nth-child(odd) p{max-width:56em}
.principles li p,.criteria li p,.audience li p,.capabilities li p,.directions li p,.pillars li p{color:var(--ink-2);font-size:var(--t-small);line-height:1.7}
html[lang="zh-CN"] .principles li p,html[lang="zh-CN"] .criteria li p,html[lang="zh-CN"] .audience li p,html[lang="zh-CN"] .capabilities li p,html[lang="zh-CN"] .directions li p{line-height:1.85}
.pillars li{padding:0 0 1.6rem}
.pillars li h2{font-family:var(--serif);font-weight:400;font-size:var(--t-2);line-height:1.15;margin-bottom:.8rem;letter-spacing:-.02em}
html[lang="zh-CN"] .pillars li h2{letter-spacing:0;line-height:1.3;font-weight:400}
.pillars li .eyebrow{margin-bottom:1.1rem}
.directions--quiet li h2{font-family:var(--sans);font-weight:500;font-size:var(--t-3);margin-bottom:.5rem}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 1.2rem;margin-top:clamp(2rem,4vh,3rem);position:relative}
.steps::before{content:'';position:absolute;left:0;right:0;top:.32rem;height:1px;background:linear-gradient(90deg,var(--blue-line) 0%,var(--rule) 60%,var(--amber) 100%)}
.steps li{position:relative;padding-top:1.6rem}
.steps li::before{content:'';position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--blue)}
.steps li:last-child::before{border-color:var(--amber);background:var(--amber);box-shadow:0 0 14px var(--amber-glow)}
.steps li .num{display:block;margin-bottom:.6rem}
.steps li h3{margin-bottom:.45rem;font-size:1rem}
.steps li p{font-size:var(--t-small);color:var(--ink-2);line-height:1.65}

/* prompts / materials / governance -- a rule, not a box */
.prompts,.materials,.governance{margin-top:clamp(2rem,4vh,3rem);padding-left:clamp(1rem,2vw,1.6rem);border-left:1px solid var(--blue-line)}
.prompts__title,.materials h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem;font-weight:400}
.prompts ol,.materials ol{display:grid;gap:.7rem}
.prompts li,.materials li{display:flex;gap:.9rem;align-items:baseline;color:var(--ink-2);font-size:var(--t-small)}
.prompts li{font-family:var(--serif);font-weight:400;font-size:var(--t-3);color:var(--ink)}
html[lang="zh-CN"] .prompts li{font-weight:400}
.governance p{color:var(--ink-2);font-size:var(--t-small);max-width:52em}
.governance strong{display:block;color:var(--ink);font-weight:500;margin-bottom:.4rem}
.governance ul{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.8rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-3)}
.governance ul li::before{content:'—';margin-right:.5rem;color:var(--blue)}
.materials{margin-top:0}

/* focus strip (collaborate: who) */
.focus{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);margin-top:clamp(2rem,4vh,3rem);padding-top:1.6rem;border-top:1px solid var(--rule)}
.focus h3{margin-bottom:.6rem}
.focus p{color:var(--ink-2);font-size:var(--t-small);line-height:1.7}
.focus__aside{padding-left:var(--gap);border-left:1px solid var(--rule-soft)}

/* exchange (collaborate: what each side brings) */
.exchange{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:clamp(2rem,4vh,3rem);padding-top:1.6rem;border-top:1px solid var(--rule)}
.exchange h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-bottom:1.2rem}
.offer{display:grid;gap:1.1rem}
.offer dt{font-weight:500;color:var(--ink);margin-bottom:.25rem}
.offer dd{color:var(--ink-2);font-size:var(--t-small);line-height:1.65}

/* modules (collaborate: two DFM modules) */
.modules{margin-top:clamp(2.5rem,5vh,4rem)}
.modules__title{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.modules__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap);border-top:1px solid var(--rule)}
.module{padding:1.6rem 0 1.8rem;border-bottom:1px solid var(--rule-soft)}
.module .num{display:block;margin-bottom:.9rem}
.module h3{margin-bottom:.6rem}
.module p{color:var(--ink-2);font-size:var(--t-small);line-height:1.7;margin-bottom:1rem}

/* home: module list rows */
.modules-list{margin-top:.5rem;border-top:1px solid var(--rule)}
.modules-list li a{display:grid;grid-template-columns:5.6rem minmax(0,4fr) minmax(0,6fr) auto;gap:1.2rem;align-items:baseline;padding:1.3rem 0;border-bottom:1px solid var(--rule-soft);transition:background .25s}
.modules-list li a:hover{background:linear-gradient(90deg,rgba(155,167,255,.06),transparent 60%)}
.modules-list__name{font-family:var(--serif);font-weight:400;font-size:var(--t-3);color:var(--ink)}
html[lang="zh-CN"] .modules-list__name{font-weight:400}
.modules-list__tag{color:var(--ink-2);font-size:var(--t-small)}
.modules-list__status{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.modules-list__status i{display:inline-block;width:.5rem;height:.5rem;margin-right:.6rem;border-radius:50%;border:1px solid currentColor;vertical-align:.02em}
.modules-list__status[data-state=live],.modules-list__status[data-state=open]{color:var(--amber)}
.modules-list__status[data-state=live] i,.modules-list__status[data-state=open] i{background:currentColor;box-shadow:0 0 10px var(--amber-glow)}
.modules-list__note{margin-top:1.2rem;max-width:60em;font-size:var(--t-small);color:var(--ink-3);line-height:1.7}
.project__role{margin-top:.9rem;font-size:var(--t-small);color:var(--ink-2);line-height:1.6;max-width:24em}
.prose__note--wide{max-width:60em;margin-top:1.2rem}
.module__tag{color:var(--ink);font-size:var(--t-small);margin-bottom:.4rem}
.modules__note{margin:.6rem 0 1.4rem;max-width:60em;font-size:var(--t-small);color:var(--ink-3);line-height:1.7}
.modules__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the four-day calendar */
.calendar{margin-top:.6rem;border-top:1px solid var(--rule);max-width:34em}
.calendar li{display:grid;grid-template-columns:5.6rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--rule-soft);font-size:var(--t-small)}
.calendar time{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--blue)}
.calendar li.is-live time{color:var(--amber)}
/* dateline: report / GitHub rows under the DFM chapter; hollow until the link is live */
.dateline{margin-top:clamp(1.4rem,3vh,2rem);border-top:1px solid var(--rule);max-width:34em}
.dateline li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:baseline;padding:.75rem 0;border-bottom:1px solid var(--rule-soft);font-size:var(--t-small)}
.dateline li::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber-glow);align-self:center}
.dateline li.is-pending::before{background:transparent;border:1px solid var(--ink-4);box-shadow:none}
.dateline li.is-pending span{color:var(--ink-3)}
.dateline a{color:var(--ink);transition:color .25s}.dateline a:hover{color:var(--blue-2)}
.dateline small{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)}

/* cases (placeholders, explicitly so) */
.cases{margin-top:clamp(2rem,4vh,3rem);border-top:1px solid var(--rule)}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.6rem var(--gap);padding:1.1rem 0;border-bottom:1px solid var(--rule-soft)}
.case__head{display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.case__head small{font-size:.6rem;color:var(--amber)}
.case dl{display:grid;gap:.45rem}
.case dl div{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;font-size:var(--t-small);color:var(--ink-3)}
.case dl i{display:block;height:1px;background:var(--rule-soft)}
.subhead--lead{font-family:var(--serif);font-size:var(--t-3,1.25rem);font-weight:400;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-bottom:1.2rem}
.case--full{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:1rem var(--gap);padding:1.6rem 0 2rem}
.case--full .case__head{display:block;text-transform:none;font-family:var(--sans);letter-spacing:normal;color:var(--ink-2)}
.case__no{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.case__name{margin:.5rem 0 .2rem;font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}
.case__sub{font-family:var(--serif);font-size:1.02rem;line-height:1.45;color:var(--ink-2);max-width:16em}
.case__full{margin-top:.7rem;font-size:.76rem;line-height:1.5;color:var(--ink-4);max-width:22em}
.case__intro{font-size:1rem;line-height:1.72;color:var(--ink-2);max-width:40em}
.case__fields{margin-top:1.5rem;display:grid;gap:1.1rem}
.case__fields>div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.4rem var(--gap);align-items:start;padding-top:1.1rem;border-top:1px solid var(--rule-soft)}
.case__fields dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:.25rem}
.case__fields dd{margin:0;font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
.case__fields dd p{margin:0 0 .5rem}
.case__fields dd p:last-child{margin-bottom:0}
.case__fields dd ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem}
.case__fields dd li{position:relative;padding-left:1rem}
.case__fields dd li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:var(--rule)}
.case__take{margin-top:1.6rem;padding-left:1rem;border-left:2px solid var(--amber);font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
.case__take b{display:block;font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:.4rem}
.case__link{margin-top:1.1rem}
.case__link a{font-size:var(--t-small);color:var(--blue);border-bottom:1px solid transparent}
.case__link a:hover{border-bottom-color:currentColor}

/* loop: a line of nodes that draws itself; one amber node */
.loop{position:relative;display:flex;justify-content:space-between;gap:1rem;padding-top:1.5rem;margin-top:.4rem;list-style:none}
.loop::before{content:'';position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,var(--blue-line),var(--blue-line) 62%,var(--amber) 80%,var(--blue-line));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease)}
.loop.in::before{transform:scaleX(1)}
.loop__node{position:relative;flex:1 1 0;padding-right:1.6rem;font-size:var(--t-small);color:var(--ink-2);line-height:1.4}
.loop__node i{position:absolute;top:calc(-1.5rem + 4px - 4px);left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--blue);transition:background .5s var(--ease),box-shadow .5s var(--ease);transition-delay:calc(.25s + var(--k)*170ms)}
.loop.in .loop__node i{background:var(--blue);box-shadow:0 0 12px var(--blue-glow)}
.loop__node--amber i{border-color:var(--amber)}
.loop.in .loop__node--amber i{background:var(--amber);box-shadow:0 0 16px var(--amber-glow)}
.loop__node span{display:block;opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(.35s + var(--k)*170ms)}
.loop.in .loop__node span{opacity:1;transform:none}
.loop__node::after{content:'→';position:absolute;right:.5rem;top:0;font-family:var(--mono);color:var(--ink-4)}
.loop__node:last-child::after{content:none}
.loop__node--amber span{color:var(--ink)}
.sec--loop{padding-top:clamp(1.5rem,4vh,3rem);padding-bottom:clamp(1.5rem,4vh,3rem)}
.hero .loop{margin-top:clamp(1.8rem,4vh,2.8rem);max-width:60rem}

/* constellation: default cover art for news, drawn in on reveal */
.cst{display:block;width:100%;height:100%}
.cst__e{stroke:var(--blue-line);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease);transition-delay:calc(var(--i)*30ms)}
.cst__n{fill:var(--blue);opacity:0;transition:opacity .6s var(--ease);transition-delay:calc(.3s + var(--i)*28ms)}
.cst__n--amber{fill:var(--amber);filter:drop-shadow(0 0 6px var(--amber));animation:cst-pulse 4.2s ease-in-out 1.5s infinite}
.in .cst__e{stroke-dashoffset:0}.in .cst__n{opacity:1}
@keyframes cst-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* project diagrams: hairline SVG drawings that draw themselves in and keep a
   few signals moving; labels in the page fonts; one amber point each */
.dg{display:block;width:100%;height:100%;font-family:var(--sans);font-size:16px}
.dg__t{fill:var(--ink-2)}
.dg__t--s{fill:var(--ink-3);font-size:13.5px}
.dg__t--k{fill:var(--ink-3);font-family:var(--mono);font-size:12px;letter-spacing:.08em}
html[lang="en"] .dg__t--k{letter-spacing:.04em}
.dg__n{fill:var(--blue)}
.dg__n--amber{fill:var(--amber)}
.dg__p{fill:none;stroke:var(--blue-line);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.dg__faint{stroke:var(--rule);stroke-width:1}
.dg__box{fill:none;stroke:var(--rule);stroke-width:1}
.dg__tick{fill:none;stroke:#141008;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dg__draw{stroke-dasharray:1;stroke-dashoffset:1}
.in .dg__draw{animation:dgdraw 1.6s var(--ease) forwards}
@keyframes dgdraw{to{stroke-dashoffset:0}}
.dg__mv{fill:var(--blue-2);offset-rotate:0deg;opacity:0;animation:dgmove var(--dur,6s) linear infinite;animation-delay:var(--delay,0s)}
.dg__mv--amber{fill:var(--amber)}
.in .dg__mv{opacity:1}
@keyframes dgmove{from{offset-distance:0%}to{offset-distance:100%}}
.dg__ring{fill:none;stroke:var(--amber);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:dgring 3.6s ease-out infinite}
.dg__ring--slow{stroke:var(--blue-line);animation-duration:6s}
@keyframes dgring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.dg__blink{opacity:0;animation:dgblink var(--dur,6s) linear infinite;animation-delay:var(--delay,0s)}
@keyframes dgblink{0%,12%{opacity:0}20%,80%{opacity:1}100%{opacity:0}}
.figure--dg{margin-top:clamp(1.5rem,3vh,2.4rem);aspect-ratio:1200/450;max-width:60rem}
.article__cover--dg{max-width:var(--shell);margin:0 auto;padding:0 var(--pad);aspect-ratio:1200/450}
.feature__art .dg{position:absolute;inset:0}

/* -- the five work drawings: shared grammar (see diagrams/*.njk) -- */
.in .dg__draw{animation-delay:var(--d,0s)}
.in .dg__draw--slow{animation-duration:2.6s}
.dg__fade{opacity:0}
.in .dg__fade{animation:dgfade .6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes dgfade{to{opacity:var(--o,1)}}
.dg__dash{stroke-dasharray:3 5}
.dg__ray{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:2 5;transition:stroke .25s}
.dg__ray--solid{stroke-dasharray:none}
.dg__chord{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:1 5;opacity:0;transition:opacity .25s}
.dg__n--dim{opacity:.45;transition:opacity .25s}
.dg__ringh{fill:none;stroke:var(--amber);stroke-width:1;opacity:.7}
.dg__tick--blue{stroke:var(--blue);stroke-width:1.4}
.dg__box{transition:stroke .25s}
.dg__mv--fade{animation-name:dgmove-fade}
@keyframes dgmove-fade{0%{offset-distance:0%;opacity:0}5%{opacity:1}95%{opacity:1}100%{offset-distance:100%;opacity:0}}
.dg__mv--burst{animation-name:dgmove-burst}
@keyframes dgmove-burst{0%{offset-distance:0%;opacity:1}25%{offset-distance:100%;opacity:1}27%,100%{offset-distance:100%;opacity:0}}
.dg__breathe{animation:dgbreathe 4s ease-in-out infinite}
.dg__frg{animation:dgbreathe 6s ease-in-out infinite}
@keyframes dgbreathe{0%{opacity:.55}25%{opacity:1}45%{opacity:1}75%{opacity:.55}100%{opacity:.55}}
.dg__fr{fill:var(--blue);opacity:var(--o,1);transition:opacity .3s}
.dg__note,.dg__tag{opacity:0;transition:opacity .25s}
.dg__hit{fill:none;stroke:transparent;stroke-width:26;pointer-events:stroke}
.dg__hitf,.dg__facefill{fill:transparent;stroke:none;pointer-events:fill;transition:fill .25s}
.dg__half,.dg__rowov{fill:none;stroke:transparent;stroke-width:1.4;transition:stroke .25s}
.dg__hov text,.dg__hov .dg__p,.dg__hov .dg__n{transition:fill .25s,stroke .25s,opacity .25s}
.dg__hov:hover .dg__p{stroke:var(--blue)}
.dg__hov:hover text{fill:var(--ink)}
.dg__hov:hover .dg__n{fill:var(--blue-2)}
.dg__hov:hover .dg__n--amber{fill:var(--amber-2)}
.dg__hov:hover .dg__n--dim{opacity:1}
.dg__hov:hover .dg__tag,.dg__hov:hover .dg__chord{opacity:1}
.dg__hov:hover .dg__ray{stroke:var(--blue-line);stroke-dasharray:none}
.dg__hov:hover .dg__dash{stroke:var(--blue-line)}
.dg__lobe:hover .dg__half,.dg__row:hover .dg__rowov{stroke:var(--blue-2)}
.dg__lobe:hover > text{fill:var(--ink)}
.dg__lobe--ag:hover .dg__box{stroke:var(--blue-line)}
.dg__face:hover .dg__facefill{fill:rgba(155,167,255,.08)}
.dg__cross:hover .dg__ring{animation-duration:2s}
.dg__bs:hover .dg__ring{animation-duration:1.8s}
.dg__armA:hover ~ .dg__det .dg__fr,.dg__armB:hover ~ .dg__det .dg__fr{opacity:.12}
.dg__armA:hover ~ .dg__det .dg__note,.dg__armB:hover ~ .dg__det .dg__note{opacity:1}
.dg__det:hover .dg__fr{opacity:1}
.dg__cross:hover ~ .dg__base .dg__p{stroke:var(--blue-line)}
.dg:has(.dg__hov:hover) .dg__mv{animation-play-state:paused}
.dg__fut:has(.dg__w:hover) .dg__w:not(:hover){opacity:.35;transition:opacity .25s}
.dg:has(.dg__face--code:hover) .dg__wall line:nth-child(n+16):nth-child(-n+23),.dg:has(.dg__face--code:hover) .dg__wallcode line{stroke:var(--blue-line)}
.dg:has(.dg__face--goal:hover) .dg__rowov{stroke:var(--blue-line)}
.dg:has(.dg__face--fb:hover) .dg__blink{opacity:1;animation-play-state:paused}
.dg__num{fill:var(--blue);font-family:var(--mono);font-size:12px}
.dg__grow{fill:var(--blue-line);width:0;animation:dggrow 9s ease-in-out infinite}
@keyframes dggrow{0%{width:180px;opacity:.6}70%{width:460px;opacity:1}100%{width:460px;opacity:.6}}
.dg__bub:hover .dg__box{stroke:var(--blue-line)}
a.dgfig__link{display:block;cursor:pointer}
a.dgfig__link:focus-visible .dg__n--amber{fill:var(--amber-2)}

/* the figure around a drawing: drawing, three attributes, the claim */
.dgfig{display:grid;grid-template-columns:minmax(0,1fr) 13rem;grid-template-areas:'art attrs' 'cap cap';column-gap:var(--gap);align-items:center;max-width:none;margin-top:clamp(2rem,4vh,3rem)}
.dgfig__art{grid-area:art;aspect-ratio:1200/450;min-width:0;width:100%}
.dgfig__attrs{grid-area:attrs;align-self:center}
.dgfig__attrs ul{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.dgfig__attrs li{display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;align-items:baseline}
.dgfig__attrs i{width:6px;height:6px;border-radius:50%;background:var(--blue);display:inline-block;transform:translateY(-2px)}
.dgfig__attrs b{font-family:var(--serif);font-weight:400;font-size:var(--t-2);color:var(--ink);letter-spacing:-.01em}
html[lang="zh-CN"] .dgfig__attrs b{letter-spacing:0}
/* The column is 13rem. "Evaluable" fits there at display size; "A workspace
   that improves" does not, and breaks into four lines. English labels are
   phrases where the Chinese ones are two or three characters, so the
   English tree takes a smaller size rather than a wider column. */
html[lang="en"] .dgfig__attrs b{font-size:clamp(1.15rem,1.45vw,1.4rem);line-height:1.3}
.dgfig__attrs span{grid-column:2;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dgfig .dgfig__cap{grid-area:cap;text-transform:none;margin-top:.9rem;display:flex;justify-content:space-between;gap:var(--gap);align-items:baseline}
.dgfig__claim{margin:0;font-family:var(--serif);font-size:var(--t-3);line-height:1.5;color:var(--ink-2);max-width:34em}
.dgfig__hint{margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.checks--dg{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.6rem 2rem;margin-top:1rem}
.sec--instrument{padding-top:0}
.sec--instrument .actions{margin-top:1.4rem}
.article__cover--dg figcaption{margin-top:.6rem;text-align:center}

/* news: one featured entry, then the timeline with nodes */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--gap);align-items:end;padding-bottom:clamp(2rem,4vh,3rem);border-bottom:1px solid var(--rule)}
.feature__art{display:block;margin:0;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:radial-gradient(80% 90% at 60% 40%,rgba(155,167,255,.09),transparent 70%)}
.feature__art a{display:block;width:100%;height:100%}
.feature__art img{width:100%;height:100%;object-fit:cover}
.feature__art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,10,11,.6))}
.feature__title{font-family:var(--serif);font-weight:400;font-size:var(--t-2);line-height:1.2;letter-spacing:-.02em;margin:.7rem 0 .9rem;max-width:18em}
.feature__title a:hover{color:var(--blue-2)}
.feature .entry__meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.feature .entry__summary{max-width:36em}
.timeline--nodes{position:relative;border-top:0;padding-left:1.8rem;margin-top:clamp(1.5rem,3vh,2.5rem)}
.timeline--nodes::before{content:'';position:absolute;left:.28rem;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--blue-line),var(--rule) 70%,transparent)}
.timeline--nodes .entry{position:relative}
.timeline--nodes .entry::before{content:'';position:absolute;left:calc(-1.8rem + .28rem - 4px);top:2.2rem;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue-glow)}
.article__cover--cst{aspect-ratio:1200/360;max-height:320px;overflow:hidden;margin:0 auto;max-width:var(--shell);padding:0 var(--pad)}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq summary{display:flex;gap:1rem;align-items:baseline;padding:1.15rem 2.4rem 1.15rem 0;position:relative;font-weight:500;color:var(--ink);transition:color .25s}
.faq summary:hover{color:var(--blue-2)}
.faq summary::after{content:'+';position:absolute;right:.2rem;top:1rem;font-family:var(--mono);font-weight:300;font-size:1.2rem;color:var(--ink-3);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.3rem 2.2rem;color:var(--ink-2);font-size:var(--t-small);line-height:1.7;max-width:60em}

/* timeline (news list) */
.timeline{border-top:1px solid var(--rule)}
.entry{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:.6rem var(--gap);padding:1.8rem 0 2rem;border-bottom:1px solid var(--rule-soft)}
.entry__meta{grid-column:1;display:flex;flex-direction:column;gap:.45rem;align-items:flex-start;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.entry__meta time{color:var(--ink-2)}
.entry__cat{color:var(--blue)}
.entry__badge{padding:.18rem .5rem;border:1px solid var(--amber);border-radius:999px;color:var(--amber);font-size:.6rem}
/* Today's release is what the reader came for, so its badge is filled while the
   amber "releasing on" pills further down stay outlined. */
.entry__badge--today{border-color:var(--blue);background:var(--blue);color:var(--bg);font-weight:500}
.entry__title{grid-column:2;font-family:var(--serif);font-weight:400;font-size:var(--t-2);line-height:1.15;letter-spacing:-.02em;max-width:22em}
html[lang="zh-CN"] .entry__title{font-weight:400;letter-spacing:0;line-height:1.3}
.entry__title a{transition:color .25s}.entry__title a:hover{color:var(--blue-2)}
.entry__summary{grid-column:2;color:var(--ink-2);font-size:var(--t-small);max-width:44em;margin-top:.4rem}
.entry__more{grid-column:2;color:var(--blue);font-size:var(--t-small);font-weight:500;margin-top:.5rem}
.entry--draft .entry__title{color:var(--ink-2)}
.timeline--compact .entry{padding:1.3rem 0 1.4rem}
.timeline--compact .entry__title{font-size:var(--t-3);font-family:var(--sans);font-weight:500;letter-spacing:0}

/* article */
.article__meta{margin-top:1.4rem;display:flex;gap:1rem;align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.article__cover{margin:clamp(2rem,4vh,3rem) auto 0;width:min(var(--shell),100%);padding-inline:var(--pad)}
.article__body{margin-top:clamp(2.5rem,5vh,4rem);font-size:var(--t-lede);line-height:1.75;max-width:none}
html[lang="zh-CN"] .article__body{line-height:1.95}
.article__body p{max-width:38em}
.article__links{margin-top:clamp(2rem,4vh,3rem);padding-top:1.4rem;border-top:1px solid var(--rule)}
.article__links .links{margin-top:0;flex-direction:column;gap:.5rem}
.article__related{margin-top:clamp(2rem,4vh,3rem)}
.article__related ul{display:grid;gap:.6rem;border-top:1px solid var(--rule)}
.article__related li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--rule-soft)}
.article__related time{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-3);white-space:nowrap}
.article__back{margin-top:clamp(2rem,4vh,3rem);font-size:var(--t-small);color:var(--ink-2)}
.article__back a:hover{color:var(--ink)}

/* people (team) */
.people{--ring:clamp(120px,11vw,160px);position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(2rem,4vh,3rem)}
.people::before{content:'';position:absolute;left:0;right:0;top:calc(var(--ring)/2);height:1px;background:linear-gradient(90deg,var(--blue-line),var(--blue-line) 62%,var(--amber));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease)}
.people.in::before{transform:scaleX(1)}
.person{position:relative;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--k)*160ms)}
.people.in .person{opacity:1;transform:none}
.person:not(:last-child)::after{content:'';position:absolute;top:calc(var(--ring)/2 - 4px);right:calc(var(--gap)/-2 - 4px);width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue-glow);opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(.7s + var(--k)*350ms)}
.person:nth-child(2)::after{background:var(--amber);box-shadow:0 0 16px var(--amber-glow)}
.people.in .person::after{opacity:1}
.person__portrait{position:relative;z-index:1;background:var(--bg);width:var(--ring);aspect-ratio:1;border-radius:50%;margin-bottom:1.4rem;overflow:hidden;
  background:radial-gradient(60% 60% at 50% 40%,rgba(155,167,255,.10),transparent 70%)}
.person__portrait::before{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid var(--rule);
  background:conic-gradient(from 210deg,var(--blue-line),transparent 40%,transparent 60%,rgba(210,156,82,.5) 92%,var(--blue-line));
  -webkit-mask:radial-gradient(circle,transparent calc(50% - 1.5px),#000 calc(50% - .5px));mask:radial-gradient(circle,transparent calc(50% - 1.5px),#000 calc(50% - .5px))}
.person__portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.person__portrait--empty::after{content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--blue);box-shadow:0 0 16px var(--blue-glow)}
.person__name{font-family:var(--serif);font-weight:400;font-size:var(--t-2);line-height:1.1;letter-spacing:-.02em}
html[lang="zh-CN"] .person__name{font-weight:400;letter-spacing:.02em}
.person__latin{display:block;margin-top:.3rem;font-family:var(--sans);font-size:.85rem;font-weight:400;color:var(--ink-3);letter-spacing:.02em}
.person__title{margin-top:.6rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.person__aff{margin-top:.35rem;font-size:var(--t-small);color:var(--ink-2)}
.person__bio{margin-top:1rem;font-size:var(--t-small);color:var(--ink-2);line-height:1.7}
html[lang="zh-CN"] .person__bio{line-height:1.85}
.person__links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem;font-size:var(--t-small);color:var(--blue);font-weight:500}

/* spine (team) -- the line extends on reveal */
.spine{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1.5rem;padding-top:2.2rem}
.spine::before{content:'';position:absolute;left:0;right:0;top:.35rem;height:1px;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--blue) 0%,var(--blue-line) 55%,var(--amber) 100%);transition:transform 1.6s var(--ease) .2s}
.spine.in::before{transform:scaleX(1)}
.spine__dot{position:absolute;top:calc(-1.85rem - 4px);left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--blue);transition:background .4s var(--ease) .9s}
.spine.in .spine__dot{background:var(--blue)}
.spine__node--amber .spine__dot{border-color:var(--amber)}
.spine.in .spine__node--amber .spine__dot{background:var(--amber);box-shadow:0 0 16px var(--amber-glow)}
.spine__node{position:relative}
.spine__node .num{display:block;margin-bottom:.6rem}
.spine__node h2{font-family:var(--sans);font-weight:500;font-size:var(--t-3);margin-bottom:.4rem}
.spine__node p{font-size:var(--t-small);color:var(--ink-2);line-height:1.65}

/* positions (careers) */
.positions{border-top:1px solid var(--rule);margin-top:.5rem}
.position{border-bottom:1px solid var(--rule-soft)}
.position summary{display:grid;grid-template-columns:minmax(0,1fr) auto 1.5rem;gap:1.2rem;align-items:baseline;padding:1.3rem 0}
.position__title{font-family:var(--serif);font-weight:400;font-size:var(--t-3);color:var(--ink);transition:color .25s}
html[lang="zh-CN"] .position__title{font-weight:400}
.position summary:hover .position__title{color:var(--blue-2)}
.position__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.position summary::after{content:'+';justify-self:end;font-family:var(--mono);font-weight:300;font-size:1.2rem;color:var(--ink-3);transition:transform .3s var(--ease)}
.position details[open] summary::after{transform:rotate(45deg)}
.position__body{padding:0 0 1.8rem}
.position__body .lede{margin-top:0}
.position__body .split{margin-top:1.2rem}
.position__body h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.position--tbc .position__title::after{content:' *';color:var(--amber)}
.count{margin-left:.6rem;color:var(--blue)}

/* milestones (about) */
.milestones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gap);margin-top:clamp(1.5rem,3vh,2rem);position:relative;padding-top:1.6rem}
.milestones::before{content:'';position:absolute;left:0;right:0;top:.3rem;height:1px;background:linear-gradient(90deg,var(--rule),var(--blue-line) 60%,var(--amber))}
.milestones li{position:relative}
.milestones li::before{content:'';position:absolute;left:0;top:-1.6rem;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--blue)}
.milestones li:last-child::before{border-color:var(--amber);background:var(--amber)}
.milestones time{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--blue);margin-bottom:.6rem}
.milestones h3{margin-bottom:.4rem;font-size:1rem}
.milestones p{font-size:var(--t-small);color:var(--ink-2)}

/* chapter (about) */
.chapter__head .eyebrow{margin-bottom:.8rem;flex-wrap:wrap}
.chapter__head .eyebrow .num{flex-basis:100%;font-family:var(--serif);font-weight:300;font-size:clamp(3.4rem,6.5vw,5.6rem);line-height:.9;letter-spacing:-.04em;color:var(--ink-4);margin-bottom:.7rem}

/* ============================================================ 7. pages */
/* hero, generic page */
.hero{position:relative;padding-top:clamp(7.5rem,18vh,11rem);padding-bottom:clamp(2.5rem,6vh,4rem)}
.hero--page::before{content:'';position:absolute;inset:0 0 auto 0;height:60vh;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 18% 30%,var(--blue-glow),transparent 70%),
             repeating-linear-gradient(180deg,var(--rule-soft) 0 1px,transparent 1px clamp(56px,7vh,92px));
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}

/* hero with the key visual (home, collaborate) */
/* Height is the viewport, capped so a tall or 27-inch screen does not get a
   1300px hero; the copy sits at the foot of it, the KV fills the frame behind. */
.hero--home,.hero--program{min-height:min(92svh,940px);display:grid;align-content:end;padding-bottom:clamp(3rem,7vh,5rem);overflow:hidden;isolation:isolate}
.hero__kv{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* The key visual is a canvas, drawn live: a dark body inside a luminous ring,
   the ring passing behind it on the far side and in front on the near side.
   It fills the hero box; the engine places the body inside it. */
.hero__kv .kv__orb{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__kv .kv__img{position:absolute;right:-2%;top:-4%;width:96%;height:108%;object-fit:cover;object-position:50% 46%;opacity:.95;
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 58% 46%,#000 34%,transparent 78%),linear-gradient(180deg,transparent 0%,#000 12%,#000 66%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 82% at 58% 46%,#000 34%,transparent 78%),linear-gradient(180deg,transparent 0%,#000 12%,#000 66%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* The scrim sits under the copy rather than across the whole frame: a
   full-width band used to swallow the near half of the ring, and that half is
   what carries the depth. */
.hero__kv::after{content:'';position:absolute;inset:0;
  background:radial-gradient(72% 66% at 12% 82%,rgba(10,10,11,.93) 0%,rgba(10,10,11,.72) 36%,rgba(10,10,11,.22) 68%,transparent 88%),
             linear-gradient(180deg,rgba(10,10,11,.5) 0%,transparent 22%,transparent 64%,rgba(10,10,11,.34) 84%,rgba(10,10,11,.12) 96%,transparent 100%)}
.hero__kv::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,var(--rule-soft) 0 1px,transparent 1px clamp(56px,7vh,92px));opacity:.7}
.hero__copy{position:relative;z-index:1;display:grid;gap:0}
/* a soft local scrim so the headline reads where the flow lines cross it */
.hero--home .hero__copy::before,.hero--program .hero__copy::before{content:'';position:absolute;z-index:-1;left:-8%;right:30%;top:-12%;bottom:-16%;pointer-events:none;
  background:radial-gradient(60% 70% at 30% 60%,rgba(10,10,11,.78),rgba(10,10,11,.35) 55%,transparent 80%)}
html[lang="zh-CN"] .hero .eyebrow{letter-spacing:.12em}
.hero__copy .actions{margin-top:clamp(1.6rem,3.5vh,2.4rem)}
.hero__latest{position:relative;z-index:1;justify-self:end;margin:clamp(2rem,4vh,3rem) var(--pad) 0 auto;max-width:min(38rem,calc(100% - 2*var(--pad)));
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem 1rem;align-items:baseline;padding:.9rem 1.2rem;border:1px solid var(--rule);border-radius:4px;background:rgba(10,10,11,.5);
  transition:border-color .25s,background .25s}
.hero__latest:hover{border-color:var(--ink-3);background:rgba(16,16,18,.7)}
.hero__latest-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.hero__latest-title{font-size:var(--t-small);color:var(--ink)}
.hero__latest time{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);white-space:nowrap}
.scroll-cue{position:absolute;left:var(--pad);bottom:1.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:.7rem}
.scroll-cue::before{content:'';width:32px;height:1px;background:var(--rule);position:relative;overflow:hidden}
.hero--program .scroll-cue{display:none}
.hero--program{min-height:min(88svh,900px)}

/* section-specific composition */
.sec--pillars{padding-top:clamp(3rem,7vh,5rem);position:relative;isolation:isolate}
.sec--pillars::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(155,167,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(155,167,255,.07) 1px,transparent 1px);background-size:96px 96px;
  -webkit-mask-image:radial-gradient(70% 90% at 50% 50%,#000 20%,transparent 80%);mask-image:radial-gradient(70% 90% at 50% 50%,#000 20%,transparent 80%)}
.sec--dfm-teaser .figure{align-self:center}
.sec--apply{background:linear-gradient(180deg,transparent 0%,rgba(155,167,255,.05) 50%,transparent 100%)}
.sec--apply .display-2{max-width:16em}
.sec--roadmap .display-2,.sec--join .display-2{max-width:14em}
.sec--project .display-2{max-width:none}
.sec--project-tbc .lede{color:var(--ink-3)}
.sec--timeline{padding-top:0}
.sec--spine{padding-top:clamp(1rem,3vh,2rem)}

/* ============================================================ 8. responsive */
@media(max-width:1200px){
  .prose--cols{column-count:1}
  .steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 .8rem}
}
@media(max-width:899px){
  .mast{grid-template-columns:auto auto;gap:1rem}
  .mast__nav,.mast__cta{display:none}
  .mast__menu{display:inline-flex}
  .foot__inner{grid-template-columns:1fr;gap:1.6rem}
  .foot__cs{grid-template-columns:1fr;gap:1rem}
  .split,.split--figure,.split--project,.split--chapter,.focus,.exchange{grid-template-columns:1fr}
  .focus__aside{padding-left:0;border-left:0;padding-top:1.2rem;border-top:1px solid var(--rule-soft)}
  .principles,.capabilities,.directions,.pillars{grid-template-columns:1fr}
  .criteria,.audience,.modules__grid,.cases,.people,.milestones{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:0}
  .steps::before{left:.28rem;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--blue-line),var(--rule) 60%,var(--amber))}
  .steps li{padding:0 0 1.6rem 1.8rem}
  .steps li::before{top:.35rem}
  .spine{grid-template-columns:1fr;gap:1.4rem;padding-top:0;padding-left:1.8rem}
  .spine::before{left:.28rem;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:50% 0;background:linear-gradient(180deg,var(--blue),var(--blue-line) 55%,var(--amber))}
  .spine.in::before{transform:scaleY(1)}
  .spine__dot{left:-1.8rem;top:.35rem}
  .milestones{padding-left:1.8rem;padding-top:0;gap:1.4rem}
  .milestones::before{left:.28rem;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--rule),var(--blue-line) 60%,var(--amber))}
  .milestones li::before{left:-1.8rem;top:.35rem}
  .entry{grid-template-columns:1fr}
  .entry__title,.entry__summary,.entry__more{grid-column:1}
  .modules-list li a{grid-template-columns:5.2rem minmax(0,1fr);row-gap:.2rem}
  .modules__grid--3{grid-template-columns:1fr}
  .modules-list__tag{grid-column:2}
  .modules-list__status{grid-column:2;justify-self:start}
  .position summary{grid-template-columns:minmax(0,1fr) 1.5rem}
  .position__meta{grid-column:1;white-space:normal}
  /* the KV re-crops to a band above the copy instead of squashing */
  .hero--home,.hero--program{min-height:auto;padding-top:calc(54svh + 1.5rem)}
  .hero__kv{inset:0 0 auto 0;height:54svh}
  .hero__kv .kv__img{right:0;left:0;top:0;width:100%;height:100%;object-position:68% 50%;opacity:.9;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 68%,transparent 100%)}
  .hero__kv::after{background:linear-gradient(180deg,rgba(10,10,11,.35) 0%,transparent 28%,transparent 60%,var(--bg) 100%)}
  .hero--home .hero__copy::before,.hero--program .hero__copy::before{display:none}
  .people::before,.person::after,.people::after,.spine::after{display:none}
  .dgfig{grid-template-columns:1fr;grid-template-areas:'art' 'cap' 'attrs'}
  .dgfig__attrs ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dgfig__attrs li,.dgfig__attrs b,.dgfig__attrs span{min-width:0;overflow-wrap:anywhere}
  .dgfig__hint{display:none}
  @media(max-width:560px){.dgfig__attrs ul{grid-template-columns:1fr}}
  .feature{grid-template-columns:1fr}
  .display{font-weight:400}
  .case{grid-template-columns:1fr}
  .case--full{grid-template-columns:1fr}
  .case__fields>div{grid-template-columns:1fr}
  .hero__latest{justify-self:start;margin-left:var(--pad)}
  .subnav__inner{gap:1.2rem}
}
@media(max-width:639px){
  :root{--sec:clamp(3rem,8vh,5rem)}
  .display{max-width:none}
  html[lang="zh-CN"] .display,html[lang="zh-CN"] .display--hero{max-width:none}
  .btn--lg{padding:.8rem 1.3rem;font-size:.95rem}
  .display--hero{font-weight:400}
  .loop{flex-direction:column;gap:.9rem;padding-top:0;padding-left:1.6rem;margin-top:1rem}
  .loop::before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto;transform:scaleY(0);transform-origin:50% 0;background:linear-gradient(180deg,var(--blue-line),var(--blue-line) 62%,var(--amber) 80%,var(--blue-line))}
  .loop.in::before{transform:scaleY(1)}
  .loop__node{padding-right:0}
  .loop__node i{top:.3em;left:-1.6rem}
  .loop__node::after{content:none}
  .loop::after{display:none}
  .actions .btn{flex:1 1 auto;justify-content:center}
  .hero__latest{grid-template-columns:1fr;max-width:none}
  .foot__base{flex-direction:column;align-items:flex-start}
}
@media(min-width:1600px){
  :root{--shell:1360px}
}

/* ---------------------------------------- collaborating institutions (team) */
/* Marks sit straight on the page ground in their own colours -- no plate, no
   recolouring, the way aitonomy.org does it. An explicit column count rather
   than flex-wrap: nine marks left to wrap on their own settle into 8+1, and a
   single stranded logo reads as a mistake. Nine across, then 5+4, then 3+3+3. */
.sec--unis{padding-top:clamp(1rem,3vh,2.5rem)}
.unis{
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
  gap:clamp(1.4rem,2.6vh,2.1rem) clamp(.5rem,1.2vw,1.2rem);
  align-items:end;justify-items:center;
  margin-top:clamp(1rem,2.2vh,1.8rem);
  padding-block:clamp(2.1rem,4.6vh,3.2rem);
  border-block:1px solid var(--rule);
}
.uni{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;min-width:0}
.uni__mark{
  display:block;width:auto;max-width:100%;opacity:.92;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
}
/* Only for marks that are mostly dark and would otherwise dissolve into the
   page -- Princeton's shield, Oxford's field, Tsinghua's violet. On a bright
   wordmark the same halo just fuzzes the letterforms, so it is opt-in. */
.uni__mark--halo{
  filter:drop-shadow(0 0 .5px rgba(255,255,255,.95))
         drop-shadow(0 0 1.5px rgba(255,255,255,.72))
         drop-shadow(0 0 4px rgba(255,255,255,.3));
}
.uni__mark--seal{height:3.4rem}
.uni__mark--wordmark{height:1.7rem}
.uni:hover .uni__mark{opacity:1;transform:translateY(-3px)}
.uni__name{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;line-height:1.45;text-wrap:balance;
  transition:color .4s var(--ease);
}
.uni:hover .uni__name{color:var(--ink-2)}
@media(max-width:1040px){
  .unis{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.8rem .8rem}
}
@media(max-width:700px){
  .unis{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem .6rem;padding-block:1.8rem}
  .uni{gap:.55rem}
  .uni__mark--seal{height:2.8rem}
  .uni__mark--wordmark{height:1.4rem}
  .uni__name{font-size:.55rem;letter-spacing:.06em}
}