@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

:root{
  --paper:#F7F5F0;
  --surface:#FFFDF9;
  --ink:#1B1A16;
  --ink-2:#57544C;
  --rule:#E0DCD3;
  --rule-strong:#1B1A16;
  --gate:#8A5A12;
  --gate-tint:#F2EADB;
  --limit:#7A3B2B;
  --display:"EB Garamond", Georgia, "Times New Roman", serif;
  --body:"EB Garamond", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
  --wide:74rem;
  --measure:32rem;
  --ease:cubic-bezier(.16,.84,.44,1);
  --dur-1:.5s;
  --dur-2:.75s;
  --dur-3:1.1s;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#15140F;
    --surface:#1C1A14;
    --ink:#EDE9DF;
    --ink-2:#A39D90;
    --rule:#2E2B24;
    --rule-strong:#4A463C;
    --gate:#D5A44E;
    --gate-tint:#2A2318;
    --limit:#C98A72;
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{background:var(--paper)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.09rem;
  line-height:1.62;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.12;font-weight:400;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
strong,b{font-weight:600}
img,svg{max-width:100%}
[hidden]{display:none!important}

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}

/* ---------- motion: reveal on entry ---------- */
.js .sec-head > *,
.js .hs{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--dur-2) var(--ease) var(--d,0ms),transform var(--dur-2) var(--ease) var(--d,0ms);
}
.js .sec-head.is-in > *,
.js.is-ready .hs{opacity:1;transform:none}

.js .sec-head > *:nth-child(1){--d:0ms}
.js .sec-head > *:nth-child(2){--d:80ms}
.js .sec-head > *:nth-child(3){--d:160ms}
.js .sec-head > *:nth-child(4){--d:240ms}
.js .sec-head > *:nth-child(5){--d:320ms}

/* Navigation remains available at every scroll position. */
.masthead{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule-strong)}
.masthead .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.65rem 1.15rem;padding-block:1rem}
.mark{font:500 .82rem var(--mono);letter-spacing:.24em;color:var(--ink);text-decoration:none}
.domain{font:.7rem var(--mono);letter-spacing:.08em;color:var(--ink-2)}
.topnav{margin-left:auto}
.topnav ul{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.topnav a{display:block;padding:.6rem 0;font:.81rem/1.45 var(--mono);color:var(--ink-2);text-decoration:none}
.topnav a:hover,.topnav a[aria-current="page"],.topnav a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:.4em}
.masthead .mast-cta{padding:.7rem .9rem;font-size:.69rem;letter-spacing:.08em}
.menu-toggle{display:none;font:500 .83rem/1.5 var(--mono);border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);min-height:44px;padding:.5rem .2rem;cursor:pointer}
@media(max-width:71.99rem){
  .masthead .domain{display:none}
  .masthead .wrap{gap:.5rem .8rem;padding-block:.6rem}
  .masthead .mark{margin-right:auto}
  .js .menu-toggle{display:block}
  .topnav{flex-basis:100%;order:3;margin:0}
  .js .topnav{display:none}
  .js .topnav.is-open{display:block;max-height:65vh;overflow:auto;border-top:1px solid var(--rule);padding-block:.5rem}
  .topnav ul{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 1rem}
  .topnav a{font-size:.875rem;min-height:44px;padding:.75rem 0}
}
@media(max-width:23rem){.topnav ul{grid-template-columns:1fr}}
.skip-link{position:fixed;top:.5rem;left:1rem;z-index:20;padding:.7rem 1rem;background:var(--ink);color:var(--paper);transform:translateY(-200%)}
.skip-link:focus{transform:none}
#main-content{scroll-margin-top:6rem}

/* ---------- section rail: one hairline in the left margin ----------
   It sits outside the centred column and never narrows it, so it only appears
   once the margin is genuinely wide enough to hold it. Its right edge stops at
   the outer edge of the column's own container, which leaves the column's four
   rem of padding as clear air between the rail and the first letter of the text.
   It hangs from under the masthead rather than floating at mid-height, and the
   one thing this page asks for sits at its foot, below a hairline, so the button
   stays on screen the whole way down. Where the rail shows, the masthead button
   stands down; where it does not, the masthead keeps it. */
.sidenav{display:none}
@media (min-width:96rem){
  .sidenav{
    display:block;position:fixed;z-index:2;
    top:8rem;
    right:calc(50% + 37rem);
    width:max-content;max-width:9rem;
  }
  .sidenav ol{border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);
    padding-bottom:1.4rem}
  .sidenav li{position:relative}
  .sidenav ol a{display:grid;grid-template-columns:.95rem minmax(0,1fr);gap:.4rem;
    align-items:baseline;padding:.45rem 0 .45rem 1rem;
    color:var(--ink-2);text-decoration:none}
  .sidenav .sn-n{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em}
  .sidenav .sn-t{font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;line-height:1.35}
  .sidenav ol a::before{content:"";position:absolute;left:0;top:.88rem;width:.6rem;height:1px;
    background:var(--ink);opacity:0;transform:scaleX(.25);transform-origin:left center;
    transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
  .sidenav ol a:hover{color:var(--ink)}
  .sidenav ol a[aria-current="true"]{color:var(--ink)}
  .sidenav ol a[aria-current="true"]::before{opacity:1;transform:none}
  .sidenav .rail-cta{display:block;margin-top:1.5rem;padding:.62rem 1rem}
  .has-rail .masthead .mast-cta{display:none}
}

/* ---------- sections ---------- */
main > section{padding-block:clamp(5rem,9vw,8.5rem);border-bottom:1px solid var(--rule)}
main > section:first-child{padding-block:clamp(4rem,8vw,7rem) clamp(5.5rem,10vw,9.5rem)}
/* An anchor lands below the masthead, never under it. The script measures the bar
   and writes --head; the fallbacks are for the page with no JavaScript, where the
   header keeps its full height. */
section[id],.newstile[id]{scroll-margin-top:calc(var(--head,9.75rem) + 1.25rem)}
@media (min-width:64rem){section[id],.newstile[id]{scroll-margin-top:calc(var(--head,5.5rem) + 1.25rem)}}
.stack{display:flex;flex-direction:column;gap:clamp(3rem,6vw,4.75rem)}

.eyebrow{display:flex;align-items:center;gap:.75rem;margin-bottom:1.15rem;
  font-family:var(--mono);font-size:.69rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2)}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:5rem}

h2{font-size:clamp(2rem,4.5vw,3rem);letter-spacing:-.015em;margin-bottom:1.4rem}
.page-title{font-size:clamp(2rem,4.5vw,3rem);line-height:1.12;letter-spacing:-.015em;margin-bottom:1.4rem}
.lede{font-size:1.22rem;line-height:1.52;color:var(--ink-2);max-width:38rem}
.coda{max-width:var(--measure);font-size:1.22rem;line-height:1.5;color:var(--ink)}
.sec-head .thread{margin-top:2.25rem}
.sec-head .thesis{margin-top:0;margin-bottom:1.5rem}

/* ---------- the narrative thread ---------- */
.thread{max-width:var(--measure);padding-left:1.35rem;border-left:1px solid var(--rule-strong);
  font-style:italic;font-size:1.075rem;line-height:1.55;color:var(--ink-2)}
.thread b{display:block;font-family:var(--mono);font-style:normal;font-weight:400;
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.42rem}

/* ---------- hero ---------- */
.hero-section{position:relative}
.hero-scroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--ink-2);text-decoration:none}
.hero-scroll:hover,.hero-scroll:focus-visible{color:var(--ink)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(3rem,6vw,4.5rem)}
@media (min-width:62rem){
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem,6vw,5rem)}
  .hero-grid h1{margin-bottom:1.55rem}
  .hero-grid .hero-sub{line-height:1.56}
  .hero-grid .thesis{margin-top:2.4rem;line-height:1.5}
  .hero-aside .chain li{padding-block:.56rem}
}
.acronym{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:2.4rem}
.acronym b{font-weight:500;color:var(--ink);letter-spacing:.2em}
h1{font-size:clamp(3rem,8.4vw,5.2rem);line-height:.98;letter-spacing:-.025em;margin-bottom:1.35rem}
.hero-sub{font-size:1.28rem;line-height:1.5;color:var(--ink-2);max-width:30em}
.thesis{margin-top:2.2rem;padding-left:1.35rem;border-left:1px solid var(--rule-strong);
  font-size:1.3rem;line-height:1.45;max-width:32em;color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.35rem;margin-top:2.6rem}
.btn{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;display:inline-block;cursor:pointer;
  border:0;border-radius:0;background:var(--ink);color:var(--paper);padding:.95rem 1.65rem;
  transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.btn:hover{background:var(--ink-2)}
.btn-quiet{background:transparent;color:var(--ink);padding:.95rem .15rem;border-bottom:1px solid var(--ink)}
.btn-quiet:hover{background:transparent;color:var(--ink-2);border-bottom-color:var(--ink-2)}
.fineprint{margin-top:1.75rem;font-family:var(--mono);font-size:.73rem;letter-spacing:.05em;color:var(--ink-2)}
.hero-thread{margin-top:2.9rem}
.hero-close{margin-top:clamp(3.5rem,7vw,5.5rem);padding-top:1.6rem;border-top:1px solid var(--rule-strong);
  font-style:italic;font-size:1.22rem;line-height:1.5;color:var(--ink);max-width:44em}

.acronym.hs{--d:0ms}
h1.hs{--d:70ms}
.hero-sub.hs{--d:140ms}
.thesis.hs{--d:210ms}
.cta.hs{--d:280ms}
.fineprint.hs{--d:350ms}
.hero-thread.hs{--d:420ms}
.hero-aside.hs{--d:490ms}
.hero-close.hs{--d:560ms}
.onward.hs{--d:630ms}

/* ---------- the chain at a glance ---------- */
.chain-title{font-family:var(--mono);font-size:.66rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);padding-bottom:.75rem;border-bottom:1px solid var(--rule);
  margin-bottom:.25rem}
.chain li{display:flex;gap:1rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid var(--rule);font-size:1.02rem}
.chain .n{font-family:var(--mono);font-size:.72rem;color:var(--ink-2);flex:none;width:1.1rem}
.chain li.gate{background:var(--gate-tint);color:var(--gate);padding-inline:.6rem;margin-inline:-.6rem}
.chain li.gate .n{color:var(--gate)}
.chain-foot{margin-top:1.25rem;font-size:.98rem;line-height:1.55;color:var(--ink-2)}

/* ---------- ledger: hairlines instead of cards ---------- */
.ledger,.bands{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ledger > li,.ledger > div,.bands > div{background:var(--paper);padding:1.75rem 0 1.95rem}
.ledger h2,.ledger h3,.ledger h4{font-size:1.2rem;font-weight:500;margin-bottom:.5rem}
.ledger p,.bands p{color:var(--ink-2)}
.claims p{font-size:1.09rem;line-height:1.55;color:var(--ink)}
@media (min-width:58rem){
  .ledger-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:-2.25rem}
  .ledger-2 > li,.ledger-2 > div{padding:2.05rem 2.25rem 2.3rem}
  .ledger-2 > :nth-child(odd):last-child{grid-column:1/-1}
  .ledger-2 > :nth-child(odd):last-child p{max-width:44rem}
}
@media (min-width:46rem){
  .ledger-3,.bands{grid-template-columns:repeat(2,minmax(0,1fr));margin-inline:-1.9rem}
  .ledger-3 > li,.ledger-3 > div,.bands > div{padding:2.05rem 1.9rem 2.3rem}
  /* an odd last entry spans the row, so no cell is left showing bare rule */
  .ledger-3 > :nth-child(odd):last-child,.bands > :nth-child(odd):last-child{grid-column:1/-1}
}
@media (min-width:64rem){
  .ledger-3,.bands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ledger-3 > :nth-child(odd):last-child,.bands > :nth-child(odd):last-child{grid-column:auto}
}
.yield{margin-top:.95rem;padding-top:.8rem;position:relative;color:var(--ink)}
.yield::before{content:"";position:absolute;top:0;left:0;width:2.25rem;height:1px;background:var(--rule-strong)}
.yield b{font-style:italic;font-weight:500}

/* ---------- scope: is / is not ---------- */
.scope{display:grid;grid-template-columns:1fr;gap:0}
.scope-head{font-size:1.35rem;font-weight:600;margin-bottom:1.25rem}
.scope-not .scope-head{color:var(--limit)}
.scope li{padding:.9rem 0;border-top:1px solid var(--rule);color:var(--ink-2)}
.scope li:first-child{border-top:0;padding-top:0}
.scope-not li b{color:var(--limit);font-weight:500}
.scope-not{margin-top:2.25rem;padding-top:2.25rem;border-top:1px solid var(--rule)}
@media (min-width:52rem){
  .scope{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scope-is{padding-right:3.25rem}
  .scope-not{margin-top:0;padding-top:0;border-top:0;padding-left:3.25rem;border-left:1px solid var(--rule)}
}

/* ---------- statement blocks ---------- */
.stmt{max-width:var(--measure);border-top:1px solid var(--rule-strong);padding-top:1.3rem}
.stmt h2,.stmt h3{margin-bottom:.7rem}
/* a statement of more than one paragraph breathes between them, as .prose does */
.stmt p+p,.ledger li > p:not(.yield)+p:not(.yield){margin-top:.9rem}

/* ---------- onward links ----------
   The way out of a block and into the page that carries it. Not a button: on
   this site the solid button says one thing only, "Get in touch". A hairline,
   a line of mono, an arrow. No ochre, that colour belongs to the human gates. */
.onward{display:inline-flex;align-self:flex-start;align-items:center;gap:.6rem;max-width:100%;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;line-height:1.5;
  color:var(--ink-2);text-decoration:none;transition:color var(--dur-1) var(--ease)}
.onward::before{content:"";flex:none;width:1.9rem;height:1px;background:currentColor}
.onward span{transition:transform var(--dur-1) var(--ease)}
.onward:hover,.onward:focus-visible{color:var(--ink)}
.onward:hover span,.onward:focus-visible span{transform:translateX(.3rem)}
/* the hero's onward link rides the entry ladder, and keeps its colour fade with it */
.js .onward.hs{transition:opacity var(--dur-2) var(--ease) var(--d,0ms),
  transform var(--dur-2) var(--ease) var(--d,0ms),color var(--dur-1) var(--ease)}
/* air above it: inside a .stack the column gap already sets the rhythm */
.hero-close + .onward{margin-top:2.9rem}
.contact-text .onward{margin-top:2.5rem}

/* ---------- diagram ---------- */
figure{margin:0}
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
.figscroll svg{display:block;width:100%;min-width:0;height:auto}
figcaption{margin-top:1.35rem;font-size:.98rem;line-height:1.55;color:var(--ink-2);max-width:44rem}
.sv-step{fill:var(--paper);stroke:var(--ink-2);stroke-opacity:.5}
.sv-gate{fill:var(--gate-tint);stroke:var(--gate)}
.sv-num{fill:var(--ink);font:500 15px var(--mono)}
.sv-you{fill:var(--gate);font:500 9.5px var(--mono);letter-spacing:.09em}
.sv-cap{fill:var(--ink-2);font:400 12.5px var(--body)}
.sv-capg{fill:var(--gate);font:500 12.5px var(--body)}
.sv-note{fill:var(--ink-2);font:400 11.5px var(--body)}
.sv-rule{stroke:var(--ink-2);stroke-opacity:.55;fill:none}
.sv-dash{stroke:var(--ink-2);stroke-opacity:.45;fill:none;stroke-dasharray:4 4}
.sv-pill{fill:none;stroke:var(--ink-2);stroke-opacity:.5}
.sv-pilltext{fill:var(--ink-2);font:500 10px var(--mono)}

/* the chain draws itself: stages arrive in order, the sequence waits at every human gate */
.js .chainfig .st{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-2) var(--ease) var(--d,0ms),transform var(--dur-2) var(--ease) var(--d,0ms)}
.js .chainfig .gt{transition-duration:var(--dur-3),var(--dur-3)}
.js .chainfig.is-in .st{opacity:1;transform:none}

/* ---------- the stage table ----------
   Hairline rows, mono column heads, the gate rows carrying the tint.
   The container scrolls sideways on its own, the page never does. */
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-.6rem;padding-bottom:.6rem}
.tbl{border-collapse:collapse;width:100%;min-width:56rem;font-size:1.02rem;line-height:1.5}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:.9rem 1.6rem .95rem .6rem;border-bottom:1px solid var(--rule)}
.tbl th:last-child,.tbl td:last-child{padding-right:.6rem}
.tbl thead th{font:400 .69rem/1.5 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);padding-top:0;padding-bottom:.7rem;border-bottom:1px solid var(--rule-strong)}
.tbl tbody td{color:var(--ink-2)}
.tbl tbody td:first-child{color:var(--ink);white-space:nowrap}
.tbl tbody tr.gaterow td{background:var(--gate-tint);color:var(--gate)}
.you{color:var(--gate);font-weight:500}

/* Workflow comparison: use the existing table typography and hairlines. */
.comparison-table{min-width:0;table-layout:fixed}
.comparison-table thead th:first-child{width:42%}
.comparison-table tbody th{font-weight:500;color:var(--ink)}
@media(max-width:47.99rem){
  .comparison-table,.comparison-table tbody,.comparison-table tr{display:block}
  .comparison-table thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .comparison-table tbody tr{padding-block:1.25rem;border-bottom:1px solid var(--rule)}
  .comparison-table tbody tr:first-child{border-top:1px solid var(--rule-strong)}
  .comparison-table tbody th,.comparison-table tbody td{display:block;width:auto;padding:0;border:0}
  .comparison-table tbody th{margin-bottom:.6rem;font-size:1.15rem}
}

/* ---------- numbered runs inside a section ---------- */
.subhead{font-size:clamp(1.45rem,2.6vw,1.7rem);font-weight:500;letter-spacing:-.01em;margin-bottom:1.5rem}
.num{display:block;font-family:var(--mono);font-size:.69rem;font-weight:400;letter-spacing:.18em;
  color:var(--ink-2);margin-bottom:.6rem}
.gates .num{color:var(--gate)}

/* ---------- what it costs ---------- */
.tag{display:block;font-family:var(--mono);font-size:.69rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.75rem}
.tag-gate{color:var(--gate)}
.note-small{font-size:.98rem;line-height:1.55;color:var(--ink-2);max-width:44rem}

/* ---------- the limits ---------- */
.limits{border-top:1px solid var(--rule-strong);padding-top:1.5rem}
.limits h2,.limits h3{font-size:1.35rem;font-weight:600;color:var(--limit);margin-bottom:1.25rem}
.limits ul{max-width:46rem}
.limits li{padding:.9rem 0;border-top:1px solid var(--rule);color:var(--ink-2)}
.limits li:first-child{border-top:0;padding-top:0}
.limits li b{color:var(--limit);font-weight:500}

/* ---------- questions ---------- */
.qa{max-width:46rem}
.qa details{border-bottom:1px solid var(--rule)}
.qa details:first-of-type{border-top:1px solid var(--rule-strong)}
.qa summary{position:relative;cursor:pointer;list-style:none;
  padding:1.15rem 2.75rem 1.15rem 0;font-family:var(--display);font-size:1.2rem;font-weight:500;
  transition:color var(--dur-1) var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--ink-2)}
.qa summary::after{content:"+";position:absolute;right:.2rem;top:1.2rem;
  font-family:var(--mono);font-size:1rem;font-weight:400;color:var(--ink-2)}
.qa details[open] summary::after{content:"\2013"}
.ans{padding-bottom:1.7rem;max-width:44rem;color:var(--ink-2)}

/* ---------- form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(3rem,6vw,4.5rem)}
@media (min-width:58rem){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem)}}
.contact-text p + p{margin-top:1.2rem}
/* the overview PDF: a quieter way in than the form, so a hairline and a link, no button */
.download{margin-top:2.5rem;padding-top:1.3rem;border-top:1px solid var(--rule);max-width:26rem}
.download h3{font-size:1.2rem;font-weight:500;margin-bottom:.4rem}
.contact-text .download .onward{margin-top:1rem}
.download + .onward{margin-top:2rem}
form{display:flex;flex-direction:column;gap:1.6rem;border-top:1px solid var(--rule-strong);padding-top:1.9rem}
.field{display:flex;flex-direction:column;gap:.45rem;position:relative}
.field:has(select)::after{content:"";position:absolute;right:.2rem;bottom:1.15rem;
  width:.46rem;height:.46rem;border-right:1px solid var(--ink-2);border-bottom:1px solid var(--ink-2);
  transform:rotate(45deg);pointer-events:none}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.07em;color:var(--ink-2)}
.field label .opt{color:var(--ink-2);opacity:.75}
.field input,.field select,.field textarea{
  font:400 1.03rem/1.5 var(--body);color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;
  padding:.55rem 0;width:100%;appearance:none;
  transition:border-color var(--dur-1) var(--ease)}
.field select{background:var(--paper);padding-right:1.25rem}
.field option{background:var(--paper);color:var(--ink)}
.field textarea{resize:vertical;min-height:5.5rem;border:1px solid var(--rule-strong);padding:.6rem .7rem}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:.65}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.consent input{width:1rem;height:1rem;flex:none;margin-top:.35rem;accent-color:var(--ink)}
.privacy{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
form .btn{align-self:flex-start}

/* ---------- footer ---------- */
footer{background:var(--surface);padding-block:clamp(3.5rem,6vw,5rem) clamp(4rem,7vw,5.5rem)}
.foot{display:grid;grid-template-columns:1fr;gap:2.25rem}
@media (min-width:52rem){.foot{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3rem}}
.foot .mark{display:block;margin-bottom:.65rem}
.foot p{color:var(--ink-2);font-size:1.02rem}
.foot .foot-acronym{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-2);margin-bottom:.8rem}
.foot li{color:var(--ink-2);font-size:1.02rem;padding:.3rem 0}
.foot li.domain{font-size:.7rem}
.footend{margin-top:2.75rem;padding-top:1.25rem;border-top:1px solid var(--rule);
  font-size:.9rem;color:var(--ink-2)}

/* ---------- reduced motion: everything at rest, in its final state ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .sec-head > *,.js .hs,
  .js .chainfig .st{opacity:1!important;transform:none!important}
}

/* A single-column alternative keeps the complete process in view. */
.mobile-flow,.stage-details{display:none}
@media(max-width:63.99rem){
  .figscroll,.tablescroll{display:none}
  .mobile-flow,.stage-details{display:block}
  .mobile-flow li{padding-block:.85rem;font-size:1.09rem}
  .mobile-flow .n{font-size:.8rem}
  .stage-details>li{padding:1.5rem 0;border-top:1px solid var(--rule)}
  .stage-details h3{font-size:1.3rem;line-height:1.25;margin-bottom:1rem}
  .stage-details dt{font:.75rem/1.5 var(--mono);margin-top:1rem;color:var(--ink-2)}
  .stage-details dd{margin:.35rem 0 0}
  .stage-details .human-step{background:var(--gate-tint);margin-inline:-.6rem;padding-inline:.6rem}
  .stage-details .human-step h3{color:var(--gate)}
}
/* Match the original desktop composition; keep the compact single-column opening. */
.hero-mobile{display:none}
@media(max-width:61.99rem){
  .hero-thread{margin-top:2rem}
  .hero-desktop{display:none}
  .hero-mobile{display:block}
  .hero-reason{max-width:44rem;margin-top:3rem}
  .hero-reason+.hero-close{margin-top:2rem}
  .hero-grid .acronym{letter-spacing:.12em;margin-bottom:1.6rem}
  .hero-grid .hero-sub{max-width:29em}
}
@media(max-width:47.99rem){
  main>section:first-child{padding-top:2.75rem}
  main>section{padding-block:3.5rem}
  .hero-grid .cta{gap:.6rem 1rem;margin-top:1.6rem}
  .hero-grid .btn{padding:.85rem 1rem;font-size:.7rem}
  .hero-grid .fineprint{margin-top:1.2rem}
  .hero-thread{font-size:1rem}
  #contact .stack{gap:1.5rem}
  #contact .eyebrow{margin-bottom:.65rem}
  #contact h2{margin-bottom:.8rem}
}
.contact-grid{align-items:start}
@media(min-width:58rem){.contact-grid{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:clamp(3rem,7vw,7rem)}}
.contact-text .thread{margin-bottom:1.5rem}
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.form-status:empty{display:none}
.form-status{font-size:1.05rem;line-height:1.5}
.form-status.is-error{color:var(--limit)}
.btn:disabled{opacity:.6;cursor:wait}
.field [aria-invalid="true"]{border-color:var(--limit);outline:1px solid var(--limit);outline-offset:3px}
.field input,.field select{min-height:44px}
.consent input{width:1.25rem;height:1.25rem;margin-top:.1rem}
.stmt h2{font-size:1.2753rem;line-height:1.12;letter-spacing:normal;margin-bottom:.7rem}
.limits h2{letter-spacing:normal}
.ledger h2{letter-spacing:normal}
.specimen{display:grid;gap:2rem;align-items:start;border-block:1px solid var(--rule-strong);padding-block:2.5rem}
.specimen figcaption{margin:0}
.specimen-sheet{padding-top:.8rem;border-top:1px solid var(--rule);min-width:0}
.document-label{font:.7rem/1.5 var(--mono);letter-spacing:.13em;margin-bottom:1.5rem;color:var(--ink-2)}
.specimen dl{margin:0}
.specimen dt{font:.72rem/1.5 var(--mono);color:var(--ink-2);margin-top:1.2rem}
.specimen dd{margin:.4rem 0 0;padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.specimen blockquote{font-style:italic;margin:0}
@media(min-width:58rem){.specimen{grid-template-columns:1fr 1fr;gap:4rem}}
.prose{max-width:46rem}
.prose h2{font-size:1.6rem;margin:2.5rem 0 .9rem}
.prose p+p{margin-top:1rem}
.prose ul{list-style:disc;padding-left:1.25rem}
.prose li{margin-block:.6rem}
.response-page{max-width:42rem;margin:auto;padding:3rem 1.25rem}
.response-page h1{font-size:2.5rem;line-height:1.15}
.response-page form{margin-block:2rem}
.response-page .btn{margin-top:1rem}
.response-page textarea{min-height:10rem}

/* Original desktop spacing, with the accessible mobile navigation retained. */
@media(min-width:72rem){
  .masthead .wrap{gap:.55rem 1.15rem;padding-block:1.45rem}
  .topnav ul{gap:1.55rem}
  .topnav a{font-size:.72rem;line-height:1.4;letter-spacing:.03em;padding-block:.15rem}
  .masthead .mast-cta{padding:.58rem 1rem;font-size:.74rem;letter-spacing:.12em}
}
@media(min-width:62rem){
  .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(3rem,6vw,4.5rem)}
  .contact-grid .contact-text{grid-column:1;grid-row:1}
  .contact-grid form{grid-column:2;grid-row:1}
}
@media(min-width:64rem){
  .stage-group>.subhead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
}

@media(max-width:61.99rem){
  .capabilities-stack>.sec-head{order:-2}
  .capabilities-stack>.specimen{order:-1}
}

/* ---------- the film (index) ----------
   The video sits on the page like the diagram does: full .wrap width, no frame,
   no shadow, no radius. The paper colour fills the box before the poster loads,
   so the space is reserved without a dark rectangle. The transcript is a quiet
   disclosure under a hairline, in the same register as .note-small. */
.film video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--paper);border:0;border-radius:0}
.film-transcript{max-width:44rem;margin-top:2.25rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.film-transcript summary{position:relative;cursor:pointer;list-style:none;padding:.85rem 2.75rem .85rem 0;
  font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  transition:color var(--dur-1) var(--ease)}
.film-transcript summary::-webkit-details-marker{display:none}
.film-transcript summary:hover{color:var(--ink)}
.film-transcript summary::after{content:"+";position:absolute;right:.2rem;top:.7rem;
  font-family:var(--mono);font-size:1rem;letter-spacing:0;color:var(--ink-2)}
.film-transcript[open] summary::after{content:"\2013"}
.film-transcript-body{padding-bottom:1.25rem;font-size:1.02rem;line-height:1.6;color:var(--ink-2)}
.film-transcript-body p + p{margin-top:.8rem}
.film-sources{margin-top:1.25rem}

/* ---------- News: the tiles and the article ----------
   Tiles on a hairline grid, the way "Who it is for" sets its ledger: no box, no
   shadow, no radius, no ochre. The date line is metadata, so it is mono. A tile
   is one link: the headline carries it, and a stretched hit area lets the whole
   tile answer the pointer, so the keyboard meets one stop per tile. The onward
   line is drawn, not linked, and sits on the tile's floor, so the arrows in a
   row line up. Two columns from 58rem; a lone last tile takes the whole row. */
.newsmeta{font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.newsgrid{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule-strong)}
.newstile{position:relative;display:flex;flex-direction:column;padding:2rem 0 2.25rem;border-bottom:1px solid var(--rule)}
.newstile h2{margin:.85rem 0;font-size:clamp(1.45rem,2.3vw,1.8rem);font-weight:500;line-height:1.18;letter-spacing:-.01em}
.newstile h2 a{color:var(--ink);text-decoration:none}
.newstile h2 a::after{content:"";position:absolute;inset:0}
.newstile p:not(.newsmeta){max-width:34rem;color:var(--ink-2)}
.newstile .onward{margin-top:auto;padding-top:1.6rem}
.newstile:hover h2 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.newstile:hover .onward{color:var(--ink)}
.newstile:hover .onward span{transform:translateX(.3rem)}
@supports selector(:has(*)){
  .newstile h2 a:focus-visible{outline:none}
  .newstile:has(h2 a:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}
}
@media (min-width:58rem){
  .newsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .newstile{padding:2.4rem 2.75rem 2.6rem 0}
  .newstile:nth-child(even){padding:2.4rem 0 2.6rem 2.75rem;border-left:1px solid var(--rule)}
  .newstile:nth-child(odd):last-child{grid-column:1/-1;padding-right:0}
}
/* The article: the head every page has, the date line under the headline, the
   standfirst as the lede, and a reading measure for the body. */
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover,.eyebrow a:focus-visible{color:var(--ink)}
.newshead .newsmeta{margin:-.35rem 0 1.6rem}
.newsbody{max-width:38rem;border-top:1px solid var(--rule-strong);padding-top:2.4rem}
.newsbody p + p{margin-top:1.05rem}
.newsbody .comparison-table{margin-block:1.9rem 2rem}
.newsbody .onward{margin-top:2.75rem}

/* ---------- first-visit news notice (built by site.js) ----------
   Non-modal, and meant to be seen: an inverted block, ink ground with paper
   type, so it reads as its own object in both themes by contrast and scale
   alone. Flat: no shadow, no corner radius, no stripe, and no ochre, which is
   kept for human decision points. Inside the block the ink tokens are swapped
   (--news-fg, --news-fg-2 are resolved on .news, then handed down as --ink and
   --ink-2), so the onward link, the close icon and the focus rings follow the
   inverted ground without rules of their own. Bottom right on wide screens;
   across the foot of the screen on narrow ones, with the page's own gutters
   inside. */
.news{--news-bg:var(--ink);--news-fg:var(--paper);--news-fg-2:var(--paper);
  --news-fg-2:color-mix(in srgb,var(--paper) 75%,var(--ink));
  position:fixed;z-index:4;right:1.5rem;bottom:1.5rem;width:min(27rem,calc(100vw - 3rem));
  padding:1.55rem 3.6rem 1.7rem 1.75rem;background:var(--news-bg);color:var(--news-fg)}
.news > *{--ink:var(--news-fg);--ink-2:var(--news-fg-2);--paper:var(--news-bg)}
.news-eyebrow{margin:0 0 .6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.news-text{margin:0;font-family:var(--display);font-size:1.42rem;line-height:1.3;color:var(--ink)}
.news .news-link{margin-top:1.05rem}
.news-close{position:absolute;top:.6rem;right:.6rem;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;border-radius:0;background:none;color:var(--ink-2);cursor:pointer}
.news-close:hover,.news-close:focus-visible{color:var(--ink)}
.news-close:focus-visible{outline-offset:-4px}
@media (max-width:47.99rem){
  .news{left:0;right:0;bottom:0;width:auto;
    padding:1.2rem 3.5rem calc(1.3rem + env(safe-area-inset-bottom,0px)) clamp(1.25rem,5vw,4rem)}
  .news-text{font-size:1.25rem}
  .news .news-link{margin-top:.8rem}
  .news-close{top:.4rem;right:.45rem}
}
@media (prefers-reduced-motion:no-preference){
  .news{animation:news-in var(--dur-2) var(--ease) .9s both}
}
@keyframes news-in{from{opacity:0;transform:translateY(.5rem)}}
@media print{.news{display:none}}

/* ---------- branch strip: the systematic review pages ----------
   The site has two ways to work with Julie. The two systematic review pages
   carry this strip under the masthead; the top menu marks the branch. */
.branchnav{border-bottom:1px solid var(--rule);padding-block:.95rem}
.branchnav ul{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;list-style:none;margin:0;padding:0;
  font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase}
.branchnav-name{color:var(--ink);font-weight:500}
.branchnav a{color:var(--ink-2);text-decoration:none}
.branchnav a:hover,.branchnav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:.4em}
/* A table with one value per reader: on a phone the header row is hidden, so each value names its reader. */
@media(max-width:47.99rem){
  .reader-table tbody td{display:block}
  .reader-table tbody td::before{content:attr(data-label) " \00b7  ";font-family:var(--mono);font-size:.69rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
}

/* ---------- a page head with a chain beside it (meta-analysis) ----------
   Like the home page hero: the heading on the left, the steps on the right. */
.page-grid{display:grid;gap:2.75rem;align-items:start}
.page-intro{max-width:var(--measure);margin-top:2.25rem}
@media(min-width:62rem){
  .page-grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:clamp(3rem,6vw,4.5rem)}
  .page-aside{padding-top:.5rem}
}

/* Two statements side by side on a wide screen (how-it-works: search, two standards). */
.stmt-pair{display:grid;gap:3rem;align-items:start}
@media(min-width:62rem){.stmt-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,5vw,4.5rem)}}

/* ---------- reading pages: one centred column ----------
   Most pages fill their width with a diagram, a chain or a two-column ledger.
   A page of running text only (questions, privacy, a news article) sits in the
   middle instead, like a page of a book; the closing invitation under it
   follows the same column. */
.reading .wrap > *,.reading ~ .pageclose .wrap > *{width:100%;max-width:46rem;margin-inline:auto}
#article.reading .newshead,#article.reading .newsbody{max-width:40rem}
#article.reading ~ .pageclose .wrap > *{max-width:40rem}

/* Seven menu items: on the narrowest screens that show the full menu, the
   domain beside the mark gives way, so the menu keeps its air. */
@media(min-width:72rem) and (max-width:79.99rem){.masthead .domain{display:none}}

/* A download inside an article: the home page's hairline block, closed below as
   well so the next paragraph does not lean on it; the link in ink, not grey. */
.newsbody .download{max-width:none;margin-block:2.3rem;padding-block:1.3rem 1.5rem;border-bottom:1px solid var(--rule)}
.newsbody .download .onward{margin-top:1rem;color:var(--ink)}
/* the closing links of an article, one per line */
.newsbody > .onward{display:flex;width:fit-content}
.newsbody > .onward + .onward{margin-top:1.1rem}

/* home, what you get: two columns of claims, each closing with its way on */
#what-you-get .stmt-pair .subhead{margin-bottom:1.1rem}
#what-you-get .stmt-pair .onward{margin-top:1.6rem}