/* Base styles shared by every page. Values come from tokens.css only. */
@font-face{
  font-family:"Public Sans";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(/assets/fonts/public-sans-latin.woff2) format("woff2");
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(/assets/fonts/newsreader-latin.woff2) format("woff2");
}

*,*::before,*::after{box-sizing:border-box}
/* a display rule on an element must never outrank its hidden attribute */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:var(--w-regular);
    -webkit-font-smoothing:antialiased;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
main{flex:1;display:flex;flex-direction:column}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:var(--w-bold);text-wrap:balance}
p{text-wrap:pretty}

.container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* type steps */
.t-display{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.t-title{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-title);line-height:var(--lh-title);letter-spacing:var(--tr-title)}
.t-heading{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--tr-heading)}
.t-lede{font-size:var(--t-lede);line-height:var(--lh-lede);letter-spacing:var(--tr-lede)}
.t-body{font-size:var(--t-body);line-height:var(--lh-body)}
.t-small{font-size:var(--t-small);line-height:var(--lh-small)}
.measure{max-width:var(--measure)}
.muted{color:var(--ink-2)}

/* links */
a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:var(--hair);text-underline-offset:var(--ring-offset);transition:color var(--d-fast) var(--e-inout),text-decoration-color var(--d-fast) var(--e-inout)}
a:hover{text-decoration-color:var(--hi);color:var(--hi)}
:focus-visible{outline:var(--ring) solid var(--hi);outline-offset:var(--ring-offset)}
mark{background:var(--sel);color:var(--hi);padding:0 var(--s-1);box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* buttons: primary only; the secondary button is a link */
.button{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  font-size:var(--t-small);
  line-height:var(--lh-small);
  font-weight:var(--w-label);
  padding:var(--s-3) var(--s-5);
  border:0;
  border-radius:var(--r-1);
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--d-fast) var(--e-inout);
}
.button:hover{background:var(--ink-2)}

/* skip link */
.skip{position:absolute;left:var(--gutter);top:calc(var(--s-9) * -1);background:var(--ink);color:var(--paper);padding:var(--s-2) var(--s-3);border-radius:var(--r-1);text-decoration:none;font-size:var(--t-small)}
.skip:focus{top:var(--s-3)}

/* header */
.site-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.site-header .mark{font-weight:var(--w-bold);text-decoration:none;font-size:var(--t-body)}
.site-header .mark:hover{color:var(--ink)}
.site-nav{display:flex;gap:var(--s-5);font-size:var(--t-small);font-weight:var(--w-label)}
.site-nav a{color:var(--ink-2);text-decoration:none;padding:var(--s-1) 0}
.site-nav a:hover{color:var(--hi)}
.site-nav a[aria-current="page"]{color:var(--ink)}

/* footer */
body.about .site-footer{display:none}
.site-footer{display:flex;justify-content:space-between;gap:var(--s-4);padding-top:var(--s-7);padding-bottom:var(--s-7);font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2)}
@media (max-width:767px){
  .site-footer{flex-direction:column;gap:var(--s-2)}
  .site-nav{gap:var(--s-4)}
}

/* landing */
@media (max-width:767px){
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s !important;animation:none !important}
}

/* ── page head ── */
.page-head{padding-top:var(--s-9)}
.page-head .t-lede{margin-top:var(--s-4)}
.page-head .crumb{display:inline-block;font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2);margin-bottom:var(--s-5)}
.meta{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2);margin-top:var(--s-4)}
.page-head + .figure-wrap{margin-top:var(--s-7)}
@media (max-width:767px){.page-head{padding-top:var(--s-7)}}

/* ── section unit ── */
.section{margin-top:var(--s-10)}
.section > h2 + p, .section .copy h2 + p{margin-top:var(--s-4)}
.section > p + .figure-wrap, .section > h2 + .figure-wrap{margin-top:var(--s-6)}
.section.split{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-7) var(--s-6);align-items:start}
.section.split.rev{grid-template-columns:7fr 5fr}
.section.split.rev .copy{order:2}
.section.split.narrow{grid-template-columns:7fr 5fr}
.section.split .copy{max-width:var(--measure)}
@media (max-width:767px){
  .section{margin-top:var(--s-8)}
  .section.split,.section.split.rev,.section.split.narrow{grid-template-columns:1fr}
  .section.split.rev .copy{order:0}
}

/* ── figures ── */
.figure-wrap{min-width:0}
.figure{position:relative;background:var(--paper);border:0;border-radius:0;padding:0;overflow:hidden;container-type:inline-size}
.figure.tall{aspect-ratio:16/10}
.figure.wide{aspect-ratio:2/1}
.figure.square{aspect-ratio:1/1}
.figure.portrait{aspect-ratio:4/5}
.caption{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2);margin-top:var(--s-3);max-width:var(--measure)}
@media (max-width:767px){.figure{padding:0}}

/* ── big-number stats (the problem) ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-5);border-top:var(--hair) solid var(--line)}
.stats b{display:block;font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-title);line-height:1.05;letter-spacing:var(--tr-title)}
.stats span{display:block;margin-top:var(--s-2);color:var(--ink-2);font-size:var(--t-small);line-height:var(--lh-small)}

/* ── four numbered reasons ── */
.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-5);border-top:var(--hair) solid var(--line)}
.reasons i{display:block;font-style:normal;font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-3);font-variant-numeric:tabular-nums}
.reasons b{display:block;margin-top:var(--s-2);font-weight:var(--w-bold)}
.reasons p{margin-top:var(--s-1);color:var(--ink-2);font-size:var(--t-small);line-height:var(--lh-small)}

/* ── the claim and the black box ── */
.blackbox{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-7) var(--s-6);align-items:center;margin-top:var(--s-8)}
.blackbox .claim{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--tr-heading);max-width:var(--measure)}
.blackbox .claim b{font-weight:var(--w-regular);border-bottom:var(--ring) solid var(--ink)}
.blackbox .box{border:var(--hair) dashed var(--line-2);border-radius:var(--r-2);padding:var(--s-6) var(--s-5);text-align:center}
.blackbox .box .lbl{display:block;font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2)}
.blackbox .box p{margin-top:var(--s-2);font-family:var(--font-display);font-size:var(--t-heading);line-height:var(--lh-heading)}
.blackbox .box i{display:block;font-style:normal;font-family:var(--font-display);font-size:var(--t-display);line-height:1;color:var(--line-2);margin-top:var(--s-3)}
@media (max-width:1023px){
  .stats,.reasons{grid-template-columns:1fr 1fr}
  .blackbox{grid-template-columns:1fr}
}
@media (max-width:767px){.stats,.reasons{grid-template-columns:1fr;gap:var(--s-5)}}

/* ── facts table ── */
.facts{width:100%;border-collapse:collapse;margin-top:var(--s-5)}
.facts th,.facts td{text-align:left;vertical-align:top;padding:var(--s-3) 0;border-top:var(--hair) solid var(--line)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:var(--hair) solid var(--line)}
.facts th{font-size:var(--t-small);line-height:var(--lh-small);font-weight:var(--w-label);width:33%;padding-right:var(--s-5);padding-top:calc(var(--s-3) + var(--s-1))}
.facts td{color:var(--ink-2)}

/* ── plain list (decisions) ── */
.plain{list-style:none;margin:var(--s-5) 0 0;padding:0;max-width:var(--measure)}
.plain li{padding:var(--s-3) 0;border-top:var(--hair) solid var(--line)}
.plain li:last-child{border-bottom:var(--hair) solid var(--line)}
.plain b{font-weight:var(--w-bold)}

/* ── numbered steps (real sequences only) ── */
.steps{list-style:none;margin:var(--s-6) 0 0;padding:0;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:var(--s-8) 1fr;gap:var(--s-4);padding:var(--s-5) 0;border-top:var(--hair) solid var(--line);max-width:calc(var(--measure) + var(--s-8) + var(--s-4))}
.steps li:last-child{border-bottom:var(--hair) solid var(--line)}
.steps li::before{content:counter(step);font-size:var(--t-small);line-height:var(--lh-heading);color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:var(--s-1)}
.steps h3{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--tr-heading)}
.steps p{margin-top:var(--s-2);color:var(--ink-2);grid-column:2}
@media (max-width:767px){.steps li{grid-template-columns:var(--s-6) 1fr}}

/* ── definition list (bio) ── */
.dl{margin:var(--s-6) 0 0;display:grid;grid-template-columns:max-content 1fr;gap:var(--s-3) var(--s-6);max-width:calc(var(--measure) + var(--s-9))}
.dl dt{font-size:var(--t-small);line-height:var(--lh-body);font-weight:var(--w-label);padding-top:var(--s-1)}
.dl dd{margin:0}
@media (max-width:767px){.dl{grid-template-columns:1fr;gap:var(--s-1) 0}.dl dd{margin-bottom:var(--s-3)}}

/* ── work index ── */
.index{list-style:none;margin:var(--s-8) 0 0;padding:0}
.index li + li{margin-top:var(--s-8)}
.index a{display:grid;grid-template-columns:1fr 4fr 7fr;gap:var(--s-6);align-items:start;text-decoration:none}
.index a:hover{background:none}
.index .num{font-size:var(--t-small);line-height:var(--lh-heading);color:var(--ink-2);padding-top:var(--s-1)}
.index .num span{display:block}
.index h2{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--tr-heading);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:var(--hair);text-underline-offset:var(--ring-offset);transition:text-decoration-color var(--d-fast) var(--e-inout)}
.index a:hover h2{text-decoration-color:var(--hi)}
.index .txt p{margin-top:var(--s-3)}
.index .txt .who{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2);margin-top:var(--s-3)}
.index .figure.tall{aspect-ratio:16/10}
@media (max-width:767px){
  .index{margin-top:var(--s-7)}
  .index li + li{margin-top:var(--s-7)}
  .index a{grid-template-columns:1fr;gap:var(--s-3)}
  .index .num span{display:inline}
  .index .num span + span::before{content:", "}
  .index .figure{margin-top:var(--s-2)}
}

/* ── next block ── */
.next{margin-top:var(--s-10);padding-top:var(--s-6);border-top:var(--hair) solid var(--line);max-width:var(--measure)}
.next .lbl{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2)}
.next h2{margin-top:var(--s-2);font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--tr-heading)}
.next p{margin-top:var(--s-2);color:var(--ink-2)}
@media (max-width:767px){.next{margin-top:var(--s-8)}}

/* ── form ── */
.form{display:grid;gap:var(--s-5)}
.seg{display:grid;grid-template-columns:1fr 1fr;border:var(--hair) solid var(--line-2);border-radius:var(--r-1);overflow:hidden}
.seg button{background:var(--paper);color:var(--ink-2);border:0;padding:var(--s-3) var(--s-4);font:inherit;font-size:var(--t-small);line-height:var(--lh-small);font-weight:var(--w-label);cursor:pointer;transition:background-color var(--d-fast) var(--e-inout),color var(--d-fast) var(--e-inout)}
.seg button + button{border-left:var(--hair) solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.seg button:focus-visible{outline-offset:calc(var(--ring-offset) * -1)}
.field label{display:block;font-size:var(--t-small);line-height:var(--lh-small);font-weight:var(--w-label);margin-bottom:var(--s-2)}
.field input,.field textarea{display:block;width:100%;background:var(--surface);border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:var(--s-3) var(--s-4);font:inherit;color:var(--ink);transition:border-color var(--d-fast) var(--e-inout)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,.field textarea:focus{border-color:var(--hi);outline:none}
.field input:focus-visible,.field textarea:focus-visible{outline:var(--ring) solid var(--hi);outline-offset:var(--ring-offset)}
.field textarea{min-height:calc(var(--s-11) - var(--s-6));resize:vertical}
.field .err{display:none;margin-top:var(--s-2);font-size:var(--t-small);line-height:var(--lh-small)}
.field.bad .err{display:block}
.field.bad input,.field.bad textarea{border-color:var(--ink)}
.form .actions{display:flex;align-items:center;gap:var(--s-5)}
.form-done{display:none}
.form-done p + p{margin-top:var(--s-3)}
.contact-grid{display:grid;grid-template-columns:5fr 7fr;gap:var(--s-7) var(--s-6);align-items:start;margin-top:var(--s-7)}
.contact-grid .copy p + p{margin-top:var(--s-4)}
@media (max-width:767px){.contact-grid{grid-template-columns:1fr;margin-top:var(--s-6)}}
/* the contact page is one screen: no scrolling to reach Send */
body.contact .contact-grid{margin-top:var(--s-7)}
body.contact .form{gap:var(--s-3)}
body.contact .field label{margin-bottom:var(--s-1)}
body.contact .field textarea{min-height:var(--s-8)}
body.contact .site-footer{padding-top:var(--s-4);padding-bottom:var(--s-4)}
@media (max-width:767px){body.contact .contact-grid{margin-top:var(--s-6)}}

/* ── 404 ── */
.notfound{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:var(--s-9);padding-bottom:var(--s-9)}
.notfound p{margin-top:var(--s-4)}
.notfound .links{margin-top:var(--s-6);display:flex;gap:var(--s-5);flex-wrap:wrap}

/* ── about ── */
.prose{margin-top:var(--s-6);max-width:var(--measure)}
.prose p + p{margin-top:var(--s-4)}
.section > .t-title + .steps{margin-top:var(--s-6)}
.section-sub{margin-top:var(--s-7)}
figure{margin:0}

/* ── tablet: stack the two-column layouts ── */
@media (max-width:1023px){
  .index a{grid-template-columns:1fr;gap:var(--s-3)}
  .index .num span{display:inline}
  .index .num span + span::before{content:", "}
  .index .figure{margin-top:var(--s-2)}
  .section.split,.section.split.rev,.section.split.narrow{grid-template-columns:1fr}
  .section.split.rev .copy{order:0}
  .contact-grid{grid-template-columns:1fr}
  .hero-split{grid-template-columns:1fr}
}

/* ── landing: a statement, and a trace that settles ── */
body.home .container{max-width:calc(var(--container-wide) + var(--gutter) * 2)}
.hero-lede{flex:1;display:grid;grid-template-columns:1.22fr 1fr;gap:var(--s-8) var(--s-7);align-items:start;align-content:center;padding-top:var(--s-6);padding-bottom:var(--s-6)}
.hero-copy h1{font-size:var(--t-title);line-height:var(--lh-title);letter-spacing:var(--tr-title);max-width:24ch;text-wrap:wrap}
.hero-sub{margin-top:var(--s-6);max-width:62ch;font-size:var(--t-lede);line-height:var(--lh-lede);letter-spacing:var(--tr-lede);color:var(--ink-2)}
.hero-sub b{color:var(--ink);font-weight:var(--w-regular)}
.hero-cta{display:inline-flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6);font-size:var(--t-body);font-weight:var(--w-label);
  text-decoration:underline;text-decoration-color:var(--ink);text-underline-offset:calc(var(--ring-offset) * 2);text-decoration-thickness:var(--hair)}
.hero-cta svg{width:var(--s-5);height:auto;overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.5}
.hero-cta:hover{color:var(--ink);text-decoration-color:var(--ink)}
.hero-trace{margin:var(--s-10) 0 0;min-width:0}
.hero-trace canvas{display:block;width:100%;height:auto;aspect-ratio:7/5}
@media (max-width:1023px){
  .hero-lede{grid-template-columns:1fr;padding-top:var(--s-8)}
  .hero-trace{margin-top:0}
  .hero-copy h1{max-width:none}
  .hero-trace canvas{aspect-ratio:2/1}
}
@media (max-width:767px){.hero-cta{margin-top:var(--s-6)}}
@media (max-width:1023px){
  .essay .how-body{grid-template-columns:1fr;gap:var(--s-6)}
  .how-index{position:static}
}
/* on a short screen the landing still holds to one view */
@media (min-width:1024px) and (max-height:820px){
  .hero-lede{padding-top:var(--s-5);padding-bottom:var(--s-5)}
  .hero-trace{margin-top:var(--s-7)}
}

/* ── about essay ── */
.essay .pull{max-width:var(--measure);margin-top:var(--s-8)}
.essay .pull:first-child{margin-top:0}
.essay .pull p{margin-top:var(--s-3);color:var(--ink-2)}
.essay .how{margin-top:var(--s-8)}
.essay .how-body{margin-top:var(--s-5)}
.essay .end{margin-top:var(--s-8);max-width:var(--measure)}
.essay .how-body{display:grid;grid-template-columns:4fr 8fr;gap:var(--s-7);max-width:none}
.how-index{position:sticky;top:var(--s-6);align-self:start;list-style:none;margin:0;padding:0;border-top:var(--hair) solid var(--ink)}
.how-index li{padding:var(--s-3) 0;border-bottom:var(--hair) solid var(--line);font-size:var(--t-small);line-height:var(--lh-small);font-weight:var(--w-label);color:var(--ink-2)}
.how-text{min-width:0;max-width:var(--measure)}
.essay .how-text p{margin-top:var(--s-4)}
.essay .how-text p:first-child{margin-top:0}
.essay .how-text .pull{font-family:var(--font);font-weight:var(--w-label);font-size:var(--t-small);line-height:var(--lh-body);color:var(--ink);margin:var(--s-5) 0;padding-left:var(--s-4);border-left:var(--ring) solid var(--line-2)}
.essay .how{margin-top:0}
.section.tight{margin-top:var(--s-7)}
@media (max-width:767px){.section.tight{margin-top:var(--s-6)}}
.visually-hidden{position:absolute;width:var(--hair);height:var(--hair);overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.index.first{margin-top:var(--s-9)}
@media (max-width:767px){.index.first{margin-top:var(--s-7)}}
.index .figure.workbook-fig{--dw:800}