/* ============================================================
   AXP · Studio layout on the Registry system
   Light and dark are the v1 Registry palettes.
   ============================================================ */

/* fonts are declared in fonts.css so the label face can be swapped in one place */

:root{
  --paper:#F7F6F2;
  --ink:#161613;
  --pulse:#3F8C61;
  --ink-60:#5c5b55;
  --ink-38:#6f6d65;
  --line:#dddbd3;
  --line-mid:#b3b1a7;
  --line-ink:#161613;
  --green:#1c4a33;
  --green-lt:#9fd0ae;
  --cta-fg:#F7F6F2;
  --tint:rgba(28,74,51,.028);
  --shadow:0 8px 34px rgba(0,0,0,.08);
  --pad:clamp(18px,4.6vw,68px);
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1520px;
}
html[data-theme="dark"]{
  --paper:#000000;
  --ink:#E9E6DC;
  --pulse:#E7F7ED;
  --ink-60:#a7a396;
  --ink-38:#8a8779;
  --line:#2b2a24;
  --line-mid:#565349;
  --line-ink:#8f8c80;
  --green:#6FAE8A;
  --green-lt:#1c4a33;
  --cta-fg:#151512;
  --tint:rgba(111,174,138,.045);
  --shadow:0 10px 40px rgba(0,0,0,.6);
}

/* Terminal. Phosphor green on true black, same structure, no other change. */
html[data-theme="terminal"]{
  --paper:#000000;
  --ink:#7BE8A4;
  --pulse:#FFFFFF;
  --ink-60:#4FBF7C;
  --ink-38:#3E9A63;
  --line:#12331F;
  --line-mid:#1D5238;
  --line-ink:#2F7A52;
  --green:#A8FFC9;
  --green-lt:#0d2a1a;
  --cta-fg:#000000;
  --tint:rgba(123,232,164,.045);
  --shadow:0 10px 40px rgba(0,0,0,.7);
}
/* Terminal sets the whole page in Iosevka. Mono runs wide, so the display sizes
   and tracking come down to keep the same rhythm. */
html[data-theme="terminal"]{
  --sans:'Iosevka AXP',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --label:'Iosevka AXP',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --label-width:100%;
  --label-track:.1em;
}
html[data-theme="terminal"] h1{font-size:clamp(24px,3.3vw,42px);letter-spacing:-.01em}
html[data-theme="terminal"] h2{font-size:clamp(20px,2.3vw,31px);letter-spacing:-.008em}
html[data-theme="terminal"] h3{font-size:clamp(16px,1.35vw,20px);letter-spacing:0}
html[data-theme="terminal"] .lede{font-size:clamp(14px,1vw,15.5px)}
html[data-theme="terminal"] body{font-size:14.5px}
html[data-theme="terminal"] .mailto{font-size:clamp(16px,2.2vw,30px);letter-spacing:-.01em}
html[data-theme="terminal"] .bfs .h,html[data-theme="terminal"] .lv .t{font-size:clamp(15px,1.35vw,19px);letter-spacing:-.006em}
html[data-theme="terminal"] .article-head h1{font-size:clamp(22px,2.5vw,34px)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body,header .bar,.themebox,.pill,.cta,.lv,.card,.bfs a,.invite,figure.plate,.coin{
  transition:background-color .38s ease,color .38s ease,border-color .38s ease
}
::selection{background:var(--green);color:var(--cta-fg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:1px}
img,svg{max-width:100%}
.skip{position:fixed;left:-9999px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:400}
.skip:focus{left:10px;top:10px}

/* ---------- the label ---------- */
/* Research note: of 21 elite studio and advisory sites read for this build, none
   put a rule before a section label. Palazzo sets a short rule beneath it. That
   is the device here: the label sits on a hairline that draws in on entry. */
.mono{font-family:var(--label);font-stretch:var(--label-width);font-size:10.5px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-38)}
.kick{display:inline-block;margin-bottom:clamp(22px,3vw,40px)}
.kick .lab{display:block;font-family:var(--label);font-stretch:var(--label-width);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);padding-bottom:9px}
.kick .tick{display:block;height:2px;width:100%;background:var(--green);transform-origin:left;
  transition:transform 1s var(--ease) .12s}
.js .kick .tick{transform:scaleX(0)}
.js .kick.in .tick{transform:scaleX(1)}

/* ---------- header ---------- */
#prog{position:fixed;top:0;left:0;height:1.5px;width:0;background:var(--green);z-index:300;will-change:width}
#hd{position:fixed;top:0;left:0;right:0;z-index:200}
#hd .bar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px var(--pad);border-bottom:1px solid transparent;
  transition:padding .45s var(--ease),background-color .38s ease,border-color .38s ease;
}
#hd.stuck .bar{padding-top:11px;padding-bottom:11px;border-bottom-color:var(--line);background:var(--paper)}
.brand{display:flex;align-items:baseline;gap:14px;min-width:0}
.mark{text-decoration:none;font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.mark i{font-style:normal;color:var(--green);display:inline-block;transition:transform .8s var(--ease)}
.mark:hover i{transform:rotate(180deg)}
.here{font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-38);
  opacity:0;transition:opacity .35s ease;white-space:nowrap}
#hd.stuck .here{opacity:1}
.here b{color:var(--ink);font-weight:400}
@media(max-width:900px){.here{display:none}}
#hd nav{display:flex;align-items:center;gap:24px}
.nlink{font-size:14px;text-decoration:none;color:var(--ink-60);position:relative;padding-bottom:3px;white-space:nowrap}
.nlink:after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nlink:hover,.nlink[aria-current="page"]{color:var(--ink)}
.nlink:hover:after,.nlink[aria-current="page"]:after{transform:scaleX(1);transform-origin:left}
.nlink[aria-current="page"]:after{background:var(--green)}

.cta{
  font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;
  border:1px solid var(--green);background:var(--green);color:var(--cta-fg);
  padding:11px 17px;text-decoration:none;position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:11px;white-space:nowrap
}
.cta:before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);z-index:0}
.cta:hover:before{transform:scaleX(1)}
.cta em,.cta span{position:relative;z-index:1;font-style:normal;display:inline-block}
.cta span{transition:transform .45s var(--ease)}
.cta:hover span{transform:translateX(5px)}
.cta:hover{color:var(--paper);border-color:var(--ink)}
.cta.ghost{background:none;color:var(--ink);border-color:var(--line-ink)}
.cta.ghost:hover{color:var(--paper)}
@media(max-width:1040px){.nlink{display:none}#hd nav{gap:12px}}

/* ---------- the narrow menu ----------
   Where the three links no longer fit the bar, a menu button takes their place
   and opens them as a panel under the bar. The call to action stays in the bar
   at every width, a little smaller on phones so the bar still breathes. */
.pill.menubtn{display:none}
.pill.menubtn:hover svg,.pill.menubtn[aria-expanded="true"] svg{transform:none}
.menubtn svg path{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;
  transform-origin:8px 8px;transition:transform .45s var(--ease)}
.menubtn[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
.menubtn[aria-expanded="true"] .l1{transform:translateY(2.5px) rotate(45deg)}
.menubtn[aria-expanded="true"] .l2{transform:translateY(-2.5px) rotate(-45deg)}
#hd .mnav{display:block;position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line-ink);padding:4px var(--pad) 26px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s ease,transform .35s var(--ease),visibility 0s linear .35s}
#hd.menu-open .mnav{opacity:1;visibility:visible;transform:none;
  transition:opacity .3s ease,transform .35s var(--ease),visibility 0s}
#hd.menu-open .bar{background:var(--paper);border-bottom-color:var(--line)}
#hd .mnav a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none;
  font-size:clamp(20px,5.6vw,26px);line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
#hd .mnav a:after{content:'\2192';font-size:15px;color:var(--ink-38);transition:transform .45s var(--ease),color .3s ease}
#hd .mnav a:hover:after{transform:translateX(5px);color:var(--ink)}
#hd .mnav a:last-child{border-bottom:0}
#hd .mnav a[aria-current="page"]{color:var(--green)}
#hd .mnav a[aria-current="page"]:after{color:var(--green)}
@media(max-width:1040px){.js .pill.menubtn{display:grid}}
@media(min-width:1041px){#hd .mnav{display:none}}
@media(max-width:560px){
  #hd .bar{gap:10px}
  #hd nav{gap:8px}
  #hd .cta{font-size:8.5px;letter-spacing:.1em;padding:9px 12px;gap:7px}
}
@media(max-width:374px){#hd .cta span{display:none}}
@media(max-width:359px){.seven .cv-ro{min-height:174px}}

/* theme control: an icon that opens light / dark / system */
.themewrap{position:relative;display:flex}
.pill{
  width:34px;height:34px;border-radius:999px;border:1px solid var(--line-mid);background:none;
  color:var(--ink-60);cursor:pointer;display:grid;place-items:center;
  transition:color .25s,border-color .25s,transform .5s var(--ease)
}
.pill:hover{color:var(--ink);border-color:var(--ink)}
.pill svg{display:block;transition:transform .7s var(--ease)}
.pill[aria-expanded="true"] svg,.pill:hover svg{transform:rotate(180deg)}
.themebox{
  position:absolute;top:calc(100% + 10px);right:0;min-width:132px;z-index:210;
  background:var(--paper);border:1px solid var(--line-ink);padding:5px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .3s ease,transform .35s var(--ease)
}
.themebox.open{opacity:1;transform:none;pointer-events:auto}
.themebox button{
  display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--ink-60);padding:9px 10px;text-align:left;transition:background .2s,color .2s
}
.themebox button:hover{background:var(--tint);color:var(--ink)}
.themebox button[aria-checked="true"]{color:var(--ink)}
.themebox .sep{display:block;height:1px;background:var(--line);margin:5px 8px}
.themebox button .dot{width:5px;height:5px;border-radius:999px;background:transparent;flex:none}
.themebox button[aria-checked="true"] .dot{background:var(--green)}

/* ---------- layout ---------- */
main{max-width:var(--maxw);margin:0 auto}
section{padding:clamp(60px,8.4vw,124px) var(--pad);position:relative}
.edge{height:1px;background:var(--line);transform-origin:left;transition:transform 1.15s var(--ease)}
.js .edge{transform:scaleX(0)}
.js .edge.in{transform:scaleX(1)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

h1{font-size:clamp(28px,4.2vw,54px);line-height:1.04;letter-spacing:-.032em;font-weight:500;max-width:16ch}
h2{font-size:clamp(23px,2.8vw,38px);line-height:1.1;letter-spacing:-.026em;font-weight:500;max-width:19ch}
h3{font-size:clamp(18px,1.6vw,23px);line-height:1.16;letter-spacing:-.018em;font-weight:500}
h2.wide{max-width:27ch;text-wrap:balance}
.lede{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.5;color:var(--ink-60);max-width:52ch;margin-top:24px;text-wrap:balance}
p.body{font-size:15.5px;line-height:1.65;color:var(--ink-60);max-width:62ch;margin-top:18px}
p.body b{color:var(--ink);font-weight:500}
p.body a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--green);transition:color .25s}
p.body a:hover{color:var(--green)}
.ml{display:block}
.js .ml{overflow:hidden}
.js .ml.done{overflow:visible}
.js .ml>span{display:block;transform:translateY(106%);transition:transform .95s var(--ease)}
.js .ml.in>span{transform:none}

/* ---------- hero ---------- */
.hero{padding-top:clamp(102px,15vh,164px);padding-bottom:clamp(44px,6vw,84px);position:relative;isolation:isolate}
.hero>*:not(.track){position:relative;z-index:1}

/* Hero track lines: faint orthogonal paths with large rounded elbows, and a
   background-coloured gap that travels along each one. */
.track{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.track svg{position:absolute;inset:0;width:100%;height:100%}
.track path{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
/* The travelling break is driven by the Web Animations API in app.js: a CSS
   keyframe whose value is calc() on a custom property cannot be interpolated,
   so it steps from start to end and reads as no motion at all. */
.track .static{stroke:var(--line)}
.track .pulse{stroke:var(--green);stroke-width:2.2;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){.track .pulse{display:none}}
html[data-motion="off"] .track .pulse{display:none}
@media(max-width:700px){.track{opacity:.75}}
.acts{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:32px}
.acts .txt{font-size:14.5px;text-decoration:none;color:var(--ink-60);position:relative;padding-bottom:3px}
.acts .txt:after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);
  transform:scaleX(1);transform-origin:right;transition:transform .5s var(--ease)}
.acts .txt:hover{color:var(--ink)}
.acts .txt:hover:after{transform:scaleX(0)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.6vw,40px);
  margin-top:clamp(44px,7vw,88px);padding-top:20px;border-top:1px solid var(--line)}
.facts dt{font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-38)}
.facts dd{font-size:15px;line-height:1.4;margin-top:8px;max-width:32ch}
@media(max-width:820px){.facts{grid-template-columns:1fr;gap:18px}}

/* ---------- entry curve ---------- */
.curve{margin-top:clamp(30px,4.5vw,56px)}
.curve svg{width:100%;height:auto;display:block;overflow:visible;cursor:crosshair}
.curve .axis{stroke:var(--line-mid);stroke-width:1}
.curve .trad{stroke:var(--ink-38);stroke-width:1.4;fill:none;stroke-dasharray:4 5;transition:opacity .9s ease .55s}
.js .curve .trad{opacity:0}
.js .curve.in .trad{opacity:1}
.curve .axp{stroke:var(--green);stroke-width:2;fill:none;stroke-linecap:round;transition:stroke-dashoffset 2s var(--ease) .1s}
.js .curve .axp{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .curve.in .axp{stroke-dashoffset:0}
.curve .band{fill:var(--green);opacity:.07;transition:opacity 1.1s ease .8s}
.curve .axp-pulse-halo{fill:none;stroke:var(--paper);stroke-width:7;stroke-linecap:round}
.curve .axp-pulse{fill:none;stroke:var(--pulse);stroke-width:3.4;stroke-linecap:round}
.curve .axp-pulse-head{r:4.6;fill:var(--green);stroke:var(--paper);stroke-width:1.8}
@media(prefers-reduced-motion:reduce){.curve .axp-pulse,.curve .axp-pulse-halo,.curve .axp-pulse-head{display:none}}
html[data-motion="off"] .curve .axp-pulse,html[data-motion="off"] .curve .axp-pulse-halo,html[data-motion="off"] .curve .axp-pulse-head{display:none}
.js .curve .band{opacity:0}
.js .curve.in .band{opacity:.07}
.curve text{font-family:var(--label);font-stretch:var(--label-width);font-size:10px;fill:var(--ink-38);letter-spacing:var(--label-track);text-transform:uppercase}
.curve text.on{fill:var(--ink)}
#tracer{opacity:0;transition:opacity .3s ease}
.curve:hover #tracer{opacity:1}
.cap{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.legend{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.legend i{display:inline-flex;align-items:center;gap:9px;font-style:normal}
.legend .sw{width:22px;height:0;border-top:2px solid var(--green)}
.legend .sw.d{border-top:1.4px dashed var(--ink-38)}

/* ---------- levers ---------- */
.lvs{margin-top:clamp(30px,4.5vw,56px);border-top:1px solid var(--line-ink)}
.gh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:24px 0 10px}
.gh .t{font-family:var(--label);font-stretch:var(--label-width);font-size:10px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--green)}
.gh .d{font-size:14px;color:var(--ink-38)}
.lv{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--line);position:relative;cursor:default}
.lv:before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.lv:hover:before,.lv:focus-within:before{transform:scaleX(1)}
.lv .n{font-family:var(--label);font-stretch:var(--label-width);font-size:10.5px;color:var(--ink-38);transition:color .3s ease}
.lv:hover .n{color:var(--green)}
.lv .t{font-size:clamp(17px,1.55vw,22px);line-height:1.2;letter-spacing:-.018em;font-weight:500;
  transition:transform .55s var(--ease)}
.lv:hover .t{transform:translateX(8px)}
.lv .s{font-size:14px;color:var(--ink-38);margin-top:6px;max-width:56ch;transition:transform .55s var(--ease) .03s}
.lv:hover .s{transform:translateX(8px)}
.lv .q{font-size:14.5px;line-height:1.4;color:var(--green);max-width:44ch;text-align:right;
  opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .6s var(--ease)}
/* Wide enough for the question to sit on one line; it still wraps below this. */
@media(min-width:1180px){.lv .q{white-space:nowrap;max-width:none}}
.lv:hover .q,.lv:focus-within .q{opacity:1;transform:none}
@media(max-width:980px){
  .lv{grid-template-columns:38px 1fr;gap:14px}
  .lv .q{grid-column:2;text-align:left;opacity:1;transform:none;margin-top:10px}
  .lv:hover .t,.lv:hover .s{transform:none}
}
.note{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);max-width:64ch}
.note p{font-size:15.5px;line-height:1.65;color:var(--ink-60)}
.note p+p{margin-top:14px}
.note b{color:var(--ink);font-weight:500}

/* ---------- the convergence ----------
   The seven ship as the list above. Where the viewport can hold the figure and
   scripting is on, app.js draws it and hides the list, so the same seven facts
   have one source in the HTML and two presentations. */
.seven.cv{margin-top:clamp(30px,4.5vw,56px)}
.seven.cv .lvs{display:none}
/* Sized so the figure and the readout under it fit one screen together: the
   readout is the part that answers the pointer, so it has to be visible. */
.seven .figwrap{max-width:min(820px,max(700px,80vh));margin:0 auto}
.seven svg{display:block;width:100%;height:auto;overflow:visible}
/* The rim is one closed circle, drawn as three abutting paths so a hovered
   dimension lights its own group's segment. It is solid where the drifting
   rings inside are dashed, which is what keeps the two apart. */
.seven .cv-oring{fill:none;stroke:var(--line-mid);stroke-width:1;stroke-linecap:round;
  transition:stroke .45s ease,stroke-width .45s ease}
.seven .cv-oring.is-lit{stroke:var(--green);stroke-width:1.8}
.seven .cv-ring{fill:none;stroke:var(--line-mid);stroke-width:1;transition:stroke .45s ease}
.seven .cv-ring.is-lit{stroke:var(--green)}
.seven .cv-lead{fill:none;stroke:var(--line-mid);stroke-width:1;stroke-dasharray:5 6;transition:stroke .45s ease}
.seven .cv-lead.is-lit{stroke:var(--green)}
.seven .cv-core{fill:none;stroke:var(--ink);stroke-width:1.4;transition:stroke .45s ease}
.seven.live .cv-core{stroke:var(--green)}
.seven .cv-corelab{font-size:15px;font-weight:500;letter-spacing:-.014em;fill:var(--ink);transition:fill .45s ease}
.seven.live .cv-corelab{fill:var(--green)}
.seven .cv-ringlab{font-family:var(--label);font-stretch:var(--label-width);font-size:8.5px;
  letter-spacing:var(--label-track);text-transform:uppercase;fill:var(--ink-38);transition:fill .45s ease}
.seven .cv-ringlab.is-lit{fill:var(--green)}
.seven .cv-node{fill:var(--green);transition:r .45s var(--ease)}
.seven .cv-node.is-on{r:7.5}
.seven .cv-spoke{stroke:var(--line-mid);stroke-width:1;fill:none;transition:stroke .4s ease,stroke-width .4s ease}
.seven .cv-spoke.is-on{stroke:var(--green);stroke-width:2}
.seven .cv-pulse{stroke:var(--green);stroke-width:2.4;stroke-linecap:round;fill:none}
html[data-motion="off"] .seven .cv-pulse{display:none}
@media(prefers-reduced-motion:reduce){.seven .cv-pulse{display:none}}
.seven .cv-lab{font-size:13.5px;font-weight:500;letter-spacing:-.012em;fill:var(--ink-60);transition:fill .35s ease}
.seven .cv-lab.is-on{fill:var(--green)}
.seven .cv-num{font-family:var(--label);font-stretch:var(--label-width);font-size:9px;letter-spacing:var(--label-track);
  fill:var(--ink-38);transition:fill .35s ease}
.seven .cv-num.is-on{fill:var(--green)}
.seven .cv-lhit{fill:transparent;cursor:crosshair}
.seven .cv-hit{fill:none;stroke:transparent;stroke-width:40;cursor:crosshair}
/* The readout is sized for its tallest state so the page never jumps on hover. */
.seven .cv-ro{margin:18px auto 0;border-top:1px solid var(--line);padding-top:15px;
  min-height:124px;max-width:66ch;text-align:center}
.seven .cv-ro .k{font-family:var(--label);font-stretch:var(--label-width);font-size:9px;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-38)}
.seven .cv-ro .t{font-size:clamp(16px,1.5vw,20px);font-weight:500;letter-spacing:-.018em;
  margin-top:7px;line-height:1.2}
.seven .cv-ro .s{font-size:13px;color:var(--ink-38);margin-top:6px}
.seven .cv-ro .q{font-size:14.5px;color:var(--green);margin-top:7px;line-height:1.42}
/* Under a centered figure the note sits on the same axis, but the lines stay
   ranged left: it is six lines of argument, not a caption. */
.seven.cv + .note{max-width:66ch;margin-left:auto;margin-right:auto}
/* The narrow drawing: the same figure with a number at each node, and the
   seven named in a key beneath it. CSS picks the drawing by width, so a window
   dragged across the break swaps drawings without losing the selection. */
.seven .figwrap.cv-mob,.seven .cv-key{display:none}
.seven .cv-num-m{font-size:19px;letter-spacing:.04em;fill:var(--ink-60)}
.seven .cv-ringlab-m{font-size:12px}
.seven .cv-corelab-m{font-size:18px}
.seven .figwrap.cv-mob .cv-lhit,.seven .figwrap.cv-mob .cv-hit{cursor:pointer}
.seven .cv-key{list-style:none;margin:6px auto 0;max-width:460px;border-top:1px solid var(--line)}
.seven .cv-key button{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;width:100%;
  background:none;border:0;border-bottom:1px solid var(--line);padding:12px 0;margin:0;text-align:left;
  font:inherit;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.seven .cv-key .n{font-family:var(--label);font-stretch:var(--label-width);font-size:10.5px;
  letter-spacing:var(--label-track);color:var(--ink-38);transition:color .3s ease}
.seven .cv-key .t{font-size:15.5px;line-height:1.3;font-weight:500;letter-spacing:-.012em;transition:color .3s ease}
.seven .cv-key button[aria-pressed="true"] .n,.seven .cv-key button[aria-pressed="true"] .t{color:var(--green)}
@media(max-width:899px){
  .seven.cv .figwrap.cv-desk{display:none}
  .seven.cv .figwrap.cv-mob{display:block;max-width:460px}
  .seven.cv .cv-key{display:block}
  .seven .cv-ro{min-height:136px;max-width:460px;margin-top:10px}
  .seven.cv + .note{max-width:64ch;margin-left:0;margin-right:0}
}

/* ---------- work cards ---------- */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  margin-top:clamp(30px,4.5vw,56px);border-top:1px solid var(--line-ink)}
.card{background:var(--paper);padding:26px 24px 28px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.card:after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.card:hover:after{transform:scaleX(1)}
.card h3{margin-bottom:10px}
.card>p{font-size:14.5px;line-height:1.6;color:var(--ink-60)}
.card .mini{list-style:none;margin:0}
.card .mini li{font-size:13.5px;line-height:1.45;color:var(--ink);padding:3px 0 3px 15px;position:relative}
.card .mini li:before{content:'\2013';position:absolute;left:0;color:var(--green)}
.card .meta{margin-top:18px}
.card .meta div{display:grid;grid-template-columns:74px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.card .meta div:last-child{border-bottom:1px solid var(--line)}
.card .meta dt{font-family:var(--label);font-stretch:var(--label-width);font-size:9px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-38);padding-top:2px}
.card .meta dd{font-size:13.5px;line-height:1.45;color:var(--ink)}
@media(max-width:900px){.work{grid-template-columns:1fr}}
/* Line up the rows across the three cards: the title, the summary and each
   Included / Fee / Your time / Pace / Network row share one set of row tracks,
   so every rule sits at the same height whatever the length of the copy. */
@supports (grid-template-rows:subgrid){
  @media(min-width:901px){
    .card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0;align-content:start}
    .card .meta{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  }
}

/* ---------- who this is for ---------- */
.forwho{margin-top:clamp(28px,4vw,50px);padding-top:22px;border-top:1px solid var(--line-ink);
  display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,64px)}
.forwho p{font-size:16.5px;line-height:1.6;color:var(--ink-60)}
.forwho p + p{margin-top:15px}
.forwho b{color:var(--ink);font-weight:500}
.forwho .side{border-left:1px solid var(--line);padding-left:clamp(18px,2.6vw,32px)}
.forwho .side p{font-size:14.5px}
@media(max-width:820px){.forwho{grid-template-columns:1fr}.forwho .side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:18px}}

/* ---------- briefings list ---------- */
.bfs{margin-top:clamp(28px,4vw,50px);border-top:1px solid var(--line-ink)}
.bfs a{display:grid;grid-template-columns:1fr 200px 22px;gap:22px;align-items:center;
  padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative}
.bfs a:before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.bfs a:hover:before{transform:scaleX(1)}
.bfs .h{font-size:clamp(17px,1.6vw,23px);line-height:1.2;letter-spacing:-.02em;font-weight:500;
  transition:transform .55s var(--ease)}
.bfs a:hover .h{transform:translateX(10px)}
.bfs .m{font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--ink-38)}
.bfs .ar{text-align:right;color:var(--ink-38);transition:transform .55s var(--ease),color .3s}
.bfs a:hover .ar{transform:translateX(6px);color:var(--green)}
@media(max-width:860px){.bfs a{grid-template-columns:1fr;gap:8px}.bfs .ar{display:none}.bfs a:hover .h{transform:none}}

/* ---------- contact ---------- */
.mailto{display:inline-flex;align-items:baseline;gap:16px;margin-top:28px;text-decoration:none;
  font-size:clamp(20px,3vw,42px);line-height:1.06;letter-spacing:-.03em;font-weight:500;
  position:relative;padding-bottom:8px;max-width:100%;word-break:break-word}
.mailto:after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line-mid);transition:background-color .3s}
.mailto:hover{color:var(--green)}
.mailto:hover:after{background:var(--green)}
.mailto span{display:inline-block;transition:transform .55s var(--ease)}
.mailto:hover span{transform:translateX(8px)}
.where{margin-top:26px;font-size:15px;color:var(--ink-60)}

/* ---------- disclosure strip + footer ---------- */
footer{max-width:var(--maxw);margin:0 auto;padding:26px var(--pad) 46px;border-top:1px solid var(--line)}
footer .frow{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:baseline}
footer .frow p{font-size:12.5px;line-height:1.6;color:var(--ink-38);max-width:74ch}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer nav a{font-size:12.5px;color:var(--ink-38);text-decoration:none}
footer nav a:hover{color:var(--ink)}

/* ---------- invitation ---------- */
.invite{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:180;
  background:var(--paper);border:1px solid var(--line-ink);
  display:flex;flex-direction:column;align-items:flex-start;
  padding:13px 17px;width:auto;max-width:min(320px,calc(100vw - 28px));
  opacity:0;transform:translateY(14px);pointer-events:none;box-shadow:var(--shadow);
  transition:opacity .6s var(--ease),transform .6s var(--ease)
}
.invite.in{opacity:1;transform:none;pointer-events:auto}
.invite.out{opacity:0;transform:translateY(10px);pointer-events:none}
.invite .lead{display:flex;align-items:center;gap:16px}
.invite .lead .lbl{font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--ink);white-space:nowrap}
.invite .lead .ar{margin-left:auto;color:var(--green);transition:transform .5s var(--ease)}
.invite:hover .lead .ar{transform:translateX(5px)}
.invite .more{max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .6s var(--ease),opacity .45s ease,margin .6s var(--ease)}
.invite:hover .more,.invite:focus-within .more{max-height:190px;opacity:1;margin-top:12px}
.invite .more p{font-size:13px;line-height:1.55;color:var(--ink-60);max-width:270px}
.invite .more a{display:inline-block;margin-top:12px;font-family:var(--label);font-stretch:var(--label-width);font-size:10px;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--green);padding-bottom:2px}
.invite .x{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:999px;
  background:var(--paper);border:1px solid var(--line-mid);color:var(--ink-38);cursor:pointer;
  font-family:var(--label);font-stretch:var(--label-width);font-size:10px;line-height:1;transition:color .25s,border-color .25s}
.invite .x:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:700px){.invite{left:clamp(14px,2vw,26px)}}

/* ============================================================
   Interior pages
   ============================================================ */
.pagehead{padding-top:clamp(96px,14vh,150px);padding-bottom:clamp(36px,5vw,64px);position:relative;isolation:isolate}
.pagehead>*:not(.track){position:relative;z-index:1}
.back{display:flex;width:fit-content;align-items:center;gap:10px;text-decoration:none;color:var(--ink-60);
  font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;margin-bottom:30px}
.back .a{display:inline-block;color:var(--green);transition:transform .4s var(--ease)}
.back:hover{color:var(--ink)}
.back:hover .a{transform:translateX(-4px)}
.prose{max-width:68ch}
.prose h3{margin:2.2em 0 .6em}
.prose h3:first-child{margin-top:0}
.prose p{font-size:15.5px;line-height:1.7;color:var(--ink-60);margin-top:14px}
.prose p b{color:var(--ink);font-weight:500}
.prose ul{list-style:none;margin-top:16px}
.prose li{font-size:15.5px;line-height:1.6;color:var(--ink-60);padding:11px 0 11px 24px;
  border-top:1px solid var(--line);position:relative}
.prose li:before{content:'';position:absolute;left:0;top:1.42em;width:6px;height:6px;background:var(--green)}
.prose li b{color:var(--ink);font-weight:500}
.prose a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--green)}
.prose a:hover{color:var(--green)}
.deflist{margin-top:clamp(26px,4vw,48px);border-top:1px solid var(--line-ink)}
.deflist>div{display:grid;grid-template-columns:190px 1fr;gap:clamp(16px,3vw,44px);
  padding:20px 0;border-bottom:1px solid var(--line)}
.deflist dt{font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--ink-38);padding-top:5px}
.deflist dd{font-size:15.5px;line-height:1.62;color:var(--ink-60);max-width:64ch}
.deflist dd b{color:var(--ink);font-weight:500}
@media(max-width:680px){.deflist>div{grid-template-columns:1fr;gap:6px}}

/* ============================================================
   Briefing articles (structure carried over from v1)
   ============================================================ */
.article-head{padding-top:clamp(96px,14vh,150px);position:relative;isolation:isolate}
.article-head>*:not(.track){position:relative;z-index:1}
/* the head sits inside a padded wrapper, so the layer reaches back out to the page edges */
.article-head .track{left:calc(-1 * var(--pad));right:calc(-1 * var(--pad))}
.article-head .kicker{display:flex;gap:18px;color:var(--ink-38);margin-bottom:20px;flex-wrap:wrap}
.article-head .kicker .mono b{color:var(--green);font-weight:400}
.article-head h1{font-weight:500;font-size:clamp(27px,3.2vw,46px);line-height:1.08;letter-spacing:-.024em;max-width:22ch}
.article-head h1 em{font-style:normal;color:var(--green)}
.article-head .standfirst{margin-top:22px;font-size:16.5px;line-height:1.55;color:var(--ink-60);max-width:66ch}
.article-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(50px,7vw,96px)}
.article-head .standfirst{max-width:62ch}
.article-body{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--line-ink);padding-top:clamp(32px,4.5vw,48px);
  display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:clamp(32px,6vw,84px)}
.article-body>*{min-width:0}
.article-aside{min-width:0}
figure.plate .plate-body{min-width:0;overflow-x:auto}
.article-col{font-size:15.5px;line-height:1.68;min-width:0;overflow-wrap:break-word}
.article-col p{margin-bottom:1.5em;max-width:68ch;color:var(--ink-60)}
.article-col p b{font-weight:500;color:var(--ink)}
.article-col a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--green)}
.article-col a:hover{color:var(--green)}
.article-col h2{font-weight:500;font-size:clamp(19px,1.7vw,23px);letter-spacing:-.014em;max-width:none;
  margin:2.2em 0 .8em;padding-top:.9em;border-top:1px solid var(--line);display:flex;gap:14px;align-items:baseline}
.article-col h2 .no{font-family:var(--label);font-stretch:var(--label-width);font-size:10.5px;color:var(--green);letter-spacing:.06em}
.article-col blockquote{border-left:2px solid var(--green);padding:4px 0 4px 20px;margin:1.8em 0;
  font-weight:500;font-size:18.5px;line-height:1.4;letter-spacing:-.01em;max-width:58ch;color:var(--ink)}
.article-col .fn{font-family:var(--label);font-stretch:var(--label-width);font-size:11.5px;line-height:1.65;color:var(--ink-60);
  border-top:1px solid var(--line);padding-top:12px;margin-top:2.4em;max-width:60ch}
.article-aside{position:sticky;top:96px;align-self:start;padding-top:4px}
.article-aside .blk{border-top:1px solid var(--line-ink);padding:10px 0 22px}
.article-aside .blk .mono{color:var(--ink-38)}
.article-aside .blk p{font-size:12.5px;color:var(--ink-60);margin-top:8px;max-width:280px;line-height:1.55}
.article-aside .blk .figure{font-weight:600;font-size:clamp(30px,3.2vw,44px);letter-spacing:-.03em;line-height:1;
  margin-top:10px;font-variant-numeric:tabular-nums}
.article-aside .blk .figure.gn{color:var(--green)}
.article-foot{margin-top:clamp(38px,5vw,56px);border-top:1px solid var(--line-ink);padding:16px 0 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.article-foot .mono{color:var(--ink-38)}
.next-brief{display:block;text-decoration:none;color:var(--ink);margin-top:32px;border:1px solid var(--line-ink);
  padding:18px 20px;transition:background .3s,color .3s}
.next-brief:hover{background:var(--ink);color:var(--paper)}
.next-brief .mono{color:var(--ink-38)}
.next-brief .t{font-weight:500;font-size:17.5px;margin-top:6px;letter-spacing:-.014em}
.article-col .coin{border:1px solid var(--line-ink);padding:16px 18px;margin:2em 0;max-width:68ch}
.coin .k{font-family:var(--label);font-stretch:var(--label-width);font-size:10px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--green)}
.coin .term{font-weight:500;font-size:18px;letter-spacing:-.012em;margin:6px 0;color:var(--ink)}
.coin p{color:var(--ink-60);font-size:13.5px;line-height:1.55;margin:0;max-width:none}
figure.plate{border:1px solid var(--line-ink);margin:2.2em 0;background:var(--paper);overflow:hidden}
figure.plate .plate-body{padding:20px 14px 10px}
figure.plate svg{display:block;width:100%;height:auto}
figure.plate figcaption{border-top:1px solid var(--line);padding:10px 16px 12px;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
figure.plate figcaption .l{font-size:12.5px;color:var(--ink-60);max-width:52ch;line-height:1.5}
figure.plate figcaption .l b{color:var(--ink);font-weight:500}
figure.plate figcaption .r{font-family:var(--label);font-stretch:var(--label-width);font-size:10px;letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--ink-38);padding-top:2px;white-space:nowrap}
.sv-mono{font-family:var(--label);font-stretch:var(--label-width);font-size:10.5px;letter-spacing:.03em;fill:var(--ink-60)}
.sv-mono-sm{font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;letter-spacing:.03em;fill:var(--ink-38)}
.sv-lab{font-family:var(--sans);font-size:11.5px;font-weight:500;fill:var(--ink)}
.sv-lab-sm{font-family:var(--sans);font-size:10.5px;fill:var(--ink-60)}
.sv-green{fill:var(--green)}
.sv-num{font-family:var(--label);font-stretch:var(--label-width);font-size:10.5px;fill:var(--ink)}
.gn{color:var(--green)}
.inline-cta{color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--green)}
.inline-cta:hover{color:var(--green)}
@media(max-width:1050px){
  .article-body{grid-template-columns:1fr}
  .article-aside{position:static;display:grid;grid-template-columns:1fr 1fr;gap:18px}
}
@media(max-width:640px){.article-aside{grid-template-columns:1fr}}

/* ---------- motion base ---------- */
.r{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .r{opacity:0;transform:translateY(14px)}
.js .r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track .gap{display:none}
  .js .r,.js .ml>span,.js .edge,.js .curve .trad,.js .curve .band,.js .curve .axp,.js .kick .tick{
    opacity:1!important;transform:none!important;stroke-dashoffset:0!important
  }
  .js .curve .band{opacity:.07!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- plate entry motion ----------
   Marks arrive once and then hold. pathLength="1" turns the dash offset into a
   plain number, so a draw-on is a real CSS transition and never a calc() that
   cannot interpolate. None of this applies under reduced motion, and every
   plate is complete and readable with the motion removed. */
@media(prefers-reduced-motion:no-preference){
  .js figure.plate.anim [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 1.9s var(--ease) .1s}
  .js figure.plate.anim.in [data-draw]{stroke-dashoffset:0}
  .js figure.plate.anim [data-grow]{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;
    transition:transform 1s var(--ease)}
  .js figure.plate.anim.in [data-grow]{transform:scaleX(1)}
  .js figure.plate.anim [data-rise]{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom center;
    transition:transform 1s var(--ease)}
  .js figure.plate.anim.in [data-rise]{transform:scaleY(1)}
  .js figure.plate.anim [data-fade]{opacity:0;transition:opacity .85s ease .55s}
  .js figure.plate.anim.in [data-fade]{opacity:1}
  .js figure.plate.anim [data-band]{opacity:0;transition:opacity 1.1s ease .8s}
  .js figure.plate.anim.in [data-band]{opacity:.07}
}

/* ---------- plate readouts ----------
   Point at a mark and the plate tells you the arithmetic behind it: the rest
   steps back, a green connector runs from the mark to a readout in the plate's
   own foot, and the readout carries a measurement and the short version of what
   it means. The static plate already makes the argument; this only shows the
   working. Pointer devices only, and only where there is room for the line --
   app.js never wires it up otherwise, so a phone gets the plate unchanged. */
@media(min-width:760px) and (hover:hover) and (pointer:fine){figure.plate svg .hz{cursor:crosshair}}
figure.plate svg .ctx,figure.plate svg .hz{transition:opacity .28s ease}
figure.plate svg.hz-on .ctx{opacity:.3}
figure.plate svg.hz-on .hz{opacity:.24}
figure.plate svg.hz-on .hz.on{opacity:1}
figure.plate svg .ro{opacity:0;pointer-events:none;transition:opacity .22s ease}
figure.plate svg.hz-on .ro{opacity:1}
figure.plate svg .ro-v{font-family:var(--sans);font-size:11.5px;font-weight:500;fill:var(--ink);
  font-variant-numeric:tabular-nums}
figure.plate svg .ro-t{font-family:var(--label);font-stretch:var(--label-width);font-size:9.5px;
  letter-spacing:.03em;fill:var(--ink-60)}
figure.plate svg .ro-lead{fill:none;stroke:var(--green);stroke-width:1.5}