/* Portfolio field reports: shared chassis.
   Same family as Field Reports 04 to 06 (paper and ink, Hanken light display, Plex Mono labels, ruled texture).
   Page specific diagrams live in each page's own <style> block. Bump ?v= in every page when this file changes. */
@font-face{font-family:Hanken;src:url("../../fonts/hanken300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Hanken;src:url("../../fonts/hanken400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Hanken;src:url("../../fonts/hanken500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Hanken;src:url("../../fonts/hanken600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Plex;src:url("../../fonts/plexmono400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url("../../fonts/plexmono500.woff2") format("woff2");font-weight:500;font-display:swap}

/* Tokens. One paper and ink theme; every color is set explicitly so the page never depends on the OS theme. */
:root{
  --paper:#f2eee4;--paper-2:#e7e0d1;--paper-3:#ddd4c1;
  --ink:#101216;--ink-2:#191c22;--ink-3:#23262d;
  --muted:#5d6066;--line:rgba(16,18,22,.22);--line-2:rgba(16,18,22,.12);
  --green:#0b7e5b;--mint:#82edc8;--red:#c2402f;--coral:#ee887b;--blue:#183b67;--sky:#c8d4e6;--yellow:#a8791f;--sand:#e5dabe;
  --white:#f8f7f2;--line-w:rgba(255,255,255,.26);--line-w2:rgba(255,255,255,.14);--muted-w:rgba(255,255,255,.64);
  --sans:Hanken,Arial,sans-serif;--mono:Plex,Consolas,monospace;
  --pad-x:clamp(22px,7vw,112px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink);overflow-x:clip}
body{margin:0;color:var(--ink);font-family:var(--sans);font-weight:400;background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg{max-width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;top:.75rem;left:.75rem;padding:.7rem 1rem;background:var(--white);color:var(--ink);transform:translateY(-160%);font:500 12px/1 var(--mono);letter-spacing:.1em}
.skip-link:focus{transform:none;outline:3px solid var(--green);outline-offset:2px}

/* Header. Absolute over the hero, so the hero decides the first screen. */
.site-header{position:absolute;z-index:10;top:0;left:0;right:0;height:78px;padding:0 clamp(22px,5vw,78px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-bottom:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.12em}
.site-header.on-ink{border-color:var(--line-w2);color:var(--white)}
.wordmark{justify-self:start;display:inline-flex;align-items:center;gap:10px;font-size:13px;min-height:44px}
.wordmark svg{flex:none}
.header-meta{display:flex;gap:28px;color:var(--muted)}
.on-ink .header-meta{color:var(--muted-w)}
.header-nav{justify-self:end;display:flex;align-items:center;gap:28px}
.header-nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.header-nav .header-link i{font-style:normal;color:var(--green);font-size:16px}
.on-ink .header-nav .header-link i{color:var(--mint)}
.header-link .short{display:none}
.header-nav a:hover{color:var(--green)}.on-ink .header-nav a:hover{color:var(--mint)}

/* Footer and reading progress */
.site-footer{padding:28px clamp(22px,5vw,78px);display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--ink);color:rgba(255,255,255,.55);border-top:1px solid var(--line-w2);font:500 10px/1 var(--mono);letter-spacing:.12em}
.site-footer a{display:inline-flex;align-items:center;min-height:44px}.site-footer a:hover{color:var(--white)}
.progress{position:fixed;z-index:20;left:0;bottom:0;width:100%;height:3px;pointer-events:none}
.progress i{display:block;width:100%;height:100%;background:var(--mint);transform:scaleX(0);transform-origin:left}

/* Sections with the ruled paper texture */
.paper-section,.paper2-section,.ink-section,.blue-section{position:relative;padding:clamp(86px,10vw,150px) var(--pad-x);overflow:hidden}
.paper-section{background:var(--paper);color:var(--ink)}
.paper2-section{background:var(--paper-2);color:var(--ink)}
.ink-section{background:var(--ink);color:var(--white)}
.blue-section{background:var(--blue);color:var(--white)}
.paper-section::before,.paper2-section::before,.ink-section::before,.blue-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 49px,rgba(16,18,22,.05) 50px)}
.ink-section::before,.blue-section::before{background-image:repeating-linear-gradient(0deg,transparent 0,transparent 49px,rgba(255,255,255,.045) 50px)}
.paper-section>*,.paper2-section>*,.ink-section>*,.blue-section>*{position:relative}
/* Two plain paper sections in a row share one gap instead of stacking two */
.paper-section+.paper-section{padding-top:clamp(20px,3vw,40px)}
.section-label{display:flex;gap:14px;margin-bottom:clamp(44px,6vw,80px);font:500 11px/1 var(--mono);letter-spacing:.17em;color:var(--muted)}
.section-label span{color:var(--green)}
.ink-section .section-label,.blue-section .section-label{color:rgba(255,255,255,.5)}
.ink-section .section-label span,.blue-section .section-label span{color:var(--mint)}

/* Type */
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3{font-weight:300;letter-spacing:-.045em;text-wrap:balance}
h2{font-size:clamp(46px,5.8vw,88px);line-height:.96;margin-bottom:0}
h3{font-size:clamp(26px,2.3vw,36px);line-height:1.02}
p{font-size:clamp(18px,1.5vw,22px);line-height:1.5}
strong{font-weight:500}
.eyebrow{font:500 12px/1.5 var(--mono);letter-spacing:.19em;margin:0 0 34px}
.lede{font-size:clamp(20px,1.9vw,28px);line-height:1.38;color:var(--muted);max-width:900px}
.ink-section .lede,.blue-section .lede{color:var(--muted-w)}
.mono-note{font:400 14px/1.65 var(--mono);color:var(--muted);margin:0}
.ink-section .mono-note,.blue-section .mono-note{color:var(--muted-w)}
.accent{color:var(--green)}.ink-section .accent,.blue-section .accent{color:var(--mint)}
.kicker-mono{display:block;margin-bottom:14px;font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:var(--green)}
.ink-section .kicker-mono,.blue-section .kicker-mono{color:var(--mint)}

/* Hero */
.hero{min-height:100svh;padding-top:clamp(150px,19vh,220px);padding-bottom:110px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center}
.hero.hero-stack{grid-template-columns:minmax(0,1fr)}
.hero-grid{position:absolute;inset:0;opacity:.15;background:linear-gradient(108deg,transparent 0 61%,rgba(16,18,22,.16) 61% 67%,transparent 67% 100%)}
.ink-section .hero-grid{background:linear-gradient(108deg,transparent 0 61%,rgba(255,255,255,.14) 61% 67%,transparent 67% 100%)}
.hero-copy,.hero-visual{min-width:0}
.hero h1{font-size:clamp(56px,7.4vw,124px);line-height:.88;margin:0;max-width:1100px}
.hero h1 strong{font-weight:600}
.hero-dek{max-width:760px;color:var(--muted);font-size:clamp(20px,1.9vw,28px);line-height:1.36;margin:40px 0 44px}
.ink-section .hero-dek{color:var(--muted-w)}
.hero-proof{display:flex;flex-wrap:wrap;gap:22px 44px;width:min(720px,100%);padding-top:24px;border-top:1px solid var(--line)}
.ink-section .hero-proof{border-color:var(--line-w)}
.hero-proof>div{display:flex;align-items:flex-end;gap:18px}
.hero-proof strong{font:500 clamp(48px,5.2vw,86px)/.82 var(--mono);letter-spacing:-.06em;color:var(--green)}
.ink-section .hero-proof strong{color:var(--mint)}
.hero-proof span{font:400 12px/1.45 var(--mono);letter-spacing:.05em}
.hero-visual{align-self:center}
.scroll-cue{position:absolute;right:var(--pad-x);bottom:36px;display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 10px/1 var(--mono);letter-spacing:.14em}
.scroll-cue span{color:var(--green);font-size:16px}
.ink-section .scroll-cue span{color:var(--mint)}

/* Layout helpers */
.intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(40px,8vw,120px);align-items:start}
.intro-copy{border-left:1px solid var(--ink);padding-left:34px}
.intro-copy p{color:var(--muted);font-size:clamp(18px,1.4vw,21px)}
.intro-copy p:last-child{margin-bottom:0}
.ink-section .intro-copy,.blue-section .intro-copy{border-color:var(--line-w)}
.ink-section .intro-copy p,.blue-section .intro-copy p{color:var(--muted-w)}
.head-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,5vw,70px);align-items:end;margin-bottom:clamp(50px,6vw,80px)}
.head-grid h2{max-width:920px}
.head-grid p{margin:0 0 6px;color:var(--muted);font:400 14px/1.65 var(--mono)}
.ink-section .head-grid p,.blue-section .head-grid p{color:var(--muted-w)}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,60px)}

/* Scope ledger: three or four facts in hairline cells */
.scope-ledger{margin-top:clamp(64px,8vw,120px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.scope-ledger.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.scope-ledger>div{padding:26px 22px 30px 0;border-right:1px solid var(--line)}
.scope-ledger>div:not(:first-child){padding-left:26px}
.scope-ledger>div:last-child{border-right:0}
.scope-ledger span{display:block;margin-bottom:14px;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--green)}
.scope-ledger strong{display:block;font-size:clamp(20px,1.9vw,30px);line-height:1.08;font-weight:400;letter-spacing:-.02em}
.ink-section .scope-ledger{border-color:var(--line-w)}.ink-section .scope-ledger>div{border-color:var(--line-w2)}.ink-section .scope-ledger span{color:var(--mint)}

/* The bet: one pulled statement with a heavy left rule */
.bet{margin:clamp(50px,6vw,80px) 0 0;padding-left:34px;border-left:5px solid var(--green);font-size:clamp(23px,2.5vw,38px);font-weight:300;line-height:1.18;letter-spacing:-.015em;max-width:1100px}
.ink-section .bet,.blue-section .bet{border-color:var(--mint)}

/* Instrument panel: dark, hairline rules, mint status */
.panel{border:1px solid var(--line-w);background:rgba(255,255,255,.025);margin-top:clamp(40px,5vw,60px);color:var(--white)}
.paper-section .panel,.paper2-section .panel{background:var(--ink);border-color:var(--ink);box-shadow:0 28px 70px rgba(16,18,22,.18)}
.panel+.panel{margin-top:22px}
.panel-head{display:flex;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line-w);font:500 10px/1.4 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.6)}
.panel-head b{color:var(--mint);font-weight:400;margin-right:6px}
.panel-body{padding:clamp(20px,3vw,36px)}
.panel-note{margin:0;padding:20px clamp(20px,3vw,36px) 26px;border-top:1px solid var(--line-w2);color:var(--muted-w);font:400 13px/1.6 var(--mono)}
.readout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-w)}
.readout.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.readout>div{padding:22px 22px 26px;border-right:1px solid var(--line-w2)}
.readout>div:last-child{border-right:0}
.readout small,.readout strong,.readout span{display:block;font-family:var(--mono)}
.readout small{font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.5);margin-bottom:12px}
.readout strong{font-size:clamp(16px,1.5vw,22px);font-weight:500;letter-spacing:.02em;color:var(--mint);line-height:1.2}
.readout span{margin-top:10px;font-size:12px;line-height:1.55;color:var(--muted-w)}

/* Controls for interactive pieces: segmented buttons, sliders, tabs */
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line-w)}
.seg button{cursor:pointer;min-height:44px;padding:12px 16px;background:transparent;border:0;border-right:1px solid var(--line-w);color:rgba(255,255,255,.66);font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-align:left}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--mint);color:var(--ink)}
.seg button:focus-visible{outline:3px solid var(--white);outline-offset:-4px}
.paper-section .seg,.paper2-section .seg{border-color:var(--ink)}
.paper-section .seg button,.paper2-section .seg button{color:var(--ink);border-color:var(--ink)}
.paper-section .seg button[aria-pressed="true"],.paper-section .seg button[aria-selected="true"],.paper2-section .seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.paper-section .seg button:focus-visible{outline-color:var(--green)}
.range{display:grid;gap:10px}
.range label{font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.6)}
.paper-section .range label{color:var(--muted)}
.range output{font:500 22px/1 var(--mono);color:var(--mint)}
.paper-section .range output{color:var(--green)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.35)}
input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.35)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--mint);border:3px solid var(--ink)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--mint);border:3px solid var(--ink)}
.paper-section input[type=range]::-webkit-slider-runnable-track{background:var(--line)}
.paper-section input[type=range]::-webkit-slider-thumb{background:var(--green);border-color:var(--paper)}
input[type=range]:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
/* A dark panel inside a paper section keeps dark controls (the paper rules above must not reach into it) */
:is(.paper-section,.paper2-section) .panel .seg{border-color:var(--line-w)}
:is(.paper-section,.paper2-section) .panel .seg button{color:rgba(255,255,255,.66);border-color:var(--line-w)}
:is(.paper-section,.paper2-section) .panel .seg button[aria-pressed="true"],:is(.paper-section,.paper2-section) .panel .seg button[aria-selected="true"]{background:var(--mint);color:var(--ink)}
:is(.paper-section,.paper2-section) .panel .seg button:focus-visible{outline-color:var(--white)}
:is(.paper-section,.paper2-section) .panel .range label{color:rgba(255,255,255,.6)}
:is(.paper-section,.paper2-section) .panel .range output{color:var(--mint)}
:is(.paper-section,.paper2-section) .panel input[type=range]::-webkit-slider-runnable-track{background:rgba(255,255,255,.35)}
:is(.paper-section,.paper2-section) .panel input[type=range]::-webkit-slider-thumb{background:var(--mint);border-color:var(--ink)}

/* SVG diagram text: mono. Colors via classes so light and dark sections both read. */
svg text{font-family:var(--mono)}
/* Section defaults are deliberately weak (zero specificity, and skipped when the text has its own fill attribute),
   so a fill="" attribute or any class on the text always wins. */
:where(.ink-section,.blue-section,.panel) svg :where(text:not([fill])){fill:var(--white)}
:where(.paper-section,.paper2-section) svg :where(text:not([fill])){fill:var(--ink)}
:where(.paper-section .panel,.paper2-section .panel) svg :where(text:not([fill])){fill:var(--white)}
svg .t-muted{fill:rgba(255,255,255,.6)}
.paper-section svg .t-muted{fill:var(--muted)}
.paper-section .panel svg .t-muted{fill:rgba(255,255,255,.6)}
svg .t-mint{fill:var(--mint)}svg .t-green{fill:var(--green)}svg .t-coral{fill:var(--coral)}svg .t-ink{fill:var(--ink)}
.svg-fluid{display:block;width:100%;height:auto}
.svg-key{list-style:none;margin:20px 0 0;padding:14px 0 0;border-top:1px solid var(--line-w2);display:flex;flex-wrap:wrap;gap:10px 26px;font:400 11px/1.4 var(--mono);letter-spacing:.08em;color:var(--muted-w)}
.paper-section .svg-key{border-color:var(--line);color:var(--muted)}
.svg-key li{display:flex;align-items:center;gap:9px}
.svg-key i{flex:none;width:14px;height:10px;border-radius:2px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
:is(.paper-section,.paper2-section) .panel .svg-key{border-color:var(--line-w2);color:var(--muted-w)}

/* Ledger rows: number, claim, detail, aside */
.ledger{border-top:1px solid var(--ink)}
.ledger-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr);gap:28px;align-items:start;padding:26px 0;border-bottom:1px solid var(--ink)}
.ledger-row b{font:500 22px/1.2 var(--mono);color:var(--green)}
.ledger-row strong{font-size:clamp(20px,1.8vw,28px);line-height:1.12;font-weight:400;letter-spacing:-.02em}
.ledger-row p{margin:0;font:400 14px/1.6 var(--mono);color:var(--muted)}
.ink-section .ledger{border-color:var(--line-w)}.ink-section .ledger-row{border-color:var(--line-w2)}
.ink-section .ledger-row b{color:var(--mint)}.ink-section .ledger-row p{color:var(--muted-w)}

/* Tables */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font:400 13px/1.45 var(--mono)}
th,td{text-align:left;vertical-align:top;padding:15px 20px;border-bottom:1px solid var(--line-w2)}
thead th{font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:rgba(255,255,255,.5);border-bottom:1px solid var(--line-w)}
.paper-section th,.paper-section td{border-color:var(--line)}
.paper-section thead th{color:var(--muted);border-color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
:is(.paper-section,.paper2-section) .panel :is(th,td){border-color:var(--line-w2)}
:is(.paper-section,.paper2-section) .panel thead th{color:rgba(255,255,255,.5);border-color:var(--line-w)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-block;padding:7px 10px 6px;border:1px solid transparent;border-radius:2px;font:500 10px/1 var(--mono);letter-spacing:.12em;white-space:nowrap;font-style:normal}
.chip.go,.chip.ship,.chip.scale{background:var(--mint);color:var(--ink)}
.chip.hold,.chip.watch{background:var(--sand);color:var(--ink)}
.chip.cut,.chip.kill{background:var(--ink);color:var(--white);border-color:var(--coral)}
.chip.warn{background:#e7afa6;color:var(--ink)}
.chip.off{background:transparent;color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.3)}
.chip.me{background:var(--ink);color:var(--mint)}
.chip.team{background:transparent;color:inherit;border-color:currentColor}

/* Steps: what I did, numbered */
.steps{border-top:1px solid var(--ink)}
.steps article{display:grid;grid-template-columns:110px minmax(0,1fr);gap:28px;padding:30px 0;border-bottom:1px solid var(--ink)}
.steps b{font:500 30px/1 var(--mono);color:var(--green)}
.steps strong{display:block;margin-bottom:12px;font:500 12px/1.3 var(--mono);letter-spacing:.13em}
.steps p{margin:0;max-width:900px;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--muted)}
.ink-section .steps{border-color:var(--line-w)}.ink-section .steps article{border-color:var(--line-w2)}
.ink-section .steps b{color:var(--mint)}.ink-section .steps p{color:var(--muted-w)}

/* Big numbers */
.stat-row{--sr-line:var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.stat-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat-row.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat-row>div{padding:28px 24px 30px 26px;border-right:1px solid var(--sr-line)}
.stat-row>div:first-child{padding-left:0}
.stat-row>div:last-child{border-right:0}
.stat-row b{display:block;font:500 clamp(40px,4.4vw,72px)/.9 var(--mono);letter-spacing:-.05em;color:var(--green)}
.stat-row span{display:block;margin-top:16px;font:400 13px/1.5 var(--mono);color:var(--muted)}
.ink-section .stat-row,.blue-section .stat-row{--sr-line:var(--line-w2);border-top-color:var(--line-w)}
.ink-section .stat-row b,.blue-section .stat-row b{color:var(--mint)}
.ink-section .stat-row span,.blue-section .stat-row span{color:var(--muted-w)}

/* Then and now */
.then-now{margin-top:clamp(40px,5vw,60px);display:grid;grid-template-columns:1fr 1.4fr;gap:18px}
.then-now>div{padding:26px 28px 30px;border:1px solid var(--ink)}
.then-now .now{background:var(--ink);color:var(--white)}
.then-now small{display:block;margin-bottom:16px;font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--green)}
.then-now .now small{color:var(--mint)}
.then-now p{margin:0;font-size:clamp(18px,1.7vw,25px);line-height:1.32}
.ink-section .then-now>div{border-color:var(--line-w)}
.ink-section .then-now .now{background:var(--mint);color:var(--ink)}
.ink-section .then-now .now small{color:var(--green)}

/* Tag rows (tools, stack) */
.stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.stack span{padding:11px 15px;border:1px solid var(--line);font:400 10px/1 var(--mono);letter-spacing:.08em}
.ink-section .stack span{border-color:var(--line-w)}

/* Lessons */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--ink)}
.principles>div{padding:26px 0}
.principles b{display:block;margin-bottom:14px;font:500 12px/1 var(--mono);color:var(--green)}
.principles p{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.42}
.ink-section .principles{border-color:var(--line-w)}.ink-section .principles b{color:var(--mint)}

/* Provenance line: where the numbers come from */
.provenance{margin:36px 0 0;padding-top:16px;border-top:1px solid var(--line);font:400 12px/1.6 var(--mono);color:var(--muted);max-width:980px}
.ink-section .provenance{border-color:var(--line-w2);color:var(--muted-w)}

/* Buttons and links */
.button{display:inline-flex;gap:18px;align-items:center;min-height:48px;padding:16px 22px;border:1px solid currentColor;font:500 11px/1 var(--mono);letter-spacing:.1em;overflow-wrap:anywhere}
.button.light{background:var(--white);color:var(--ink);border-color:var(--white)}
.button.dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:rgba(255,255,255,.4);overflow-wrap:anywhere}
.paper-section .text-link,.paper2-section .text-link{text-decoration-color:var(--line)}

/* Report end: the next report and a way to reach me. Filled by build_portfolio.py per site. */
.report-end{padding-top:clamp(80px,9vw,130px);padding-bottom:clamp(70px,8vw,110px)}
.next-report{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;padding:34px 0 36px;border-top:1px solid var(--line-w);border-bottom:1px solid var(--line-w)}
.next-report small{display:block;margin-bottom:18px;font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:var(--mint)}
.next-report strong{display:block;font-size:clamp(34px,4.4vw,68px);line-height:.98;font-weight:300;letter-spacing:-.045em}
.next-report em{display:block;margin-top:14px;font:400 13px/1.5 var(--mono);font-style:normal;color:var(--muted-w)}
.next-report .arrow{font:300 clamp(44px,5vw,80px)/1 var(--sans);color:var(--mint);transition:transform .25s ease}
.next-report:hover .arrow{transform:translateX(8px)}
.end-grid{margin-top:clamp(60px,7vw,90px);display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.end-grid>p{margin:0;max-width:760px;font-size:clamp(34px,4vw,60px);line-height:1;font-weight:300;letter-spacing:-.04em}
.end-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.end-links .button{margin-bottom:10px}
.button:focus-visible,.text-link:focus-visible,.header-nav a:focus-visible,.wordmark:focus-visible,.scroll-cue:focus-visible,.site-footer a:focus-visible,.next-report:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
.paper-section .button:focus-visible,.paper-section .text-link:focus-visible,.site-header:not(.on-ink) a:focus-visible,.paper-section .scroll-cue:focus-visible{outline-color:var(--green)}

/* Reveal on scroll, gated behind html.js so no JS means everything is visible */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.progress{display:none}.next-report .arrow{transition:none}}

/* Tablet */
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:760px}
  .readout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .readout>div:nth-child(2n){border-right:0}
  .readout>div:nth-child(-n+2){border-bottom:1px solid var(--line-w2)}
  .readout.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .readout.three>div{border-bottom:0;border-right:1px solid var(--line-w2)}
  .readout.three>div:last-child{border-right:0}
  .stat-row.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-row.four>div{padding-left:26px;border-right:1px solid var(--sr-line);border-bottom:0}
  .stat-row.four>div:nth-child(odd){padding-left:0}
  .stat-row.four>div:nth-child(even){border-right:0}
  .stat-row.four>div:nth-child(-n+2){border-bottom:1px solid var(--sr-line)}
  .scope-ledger.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scope-ledger.four>div:nth-child(2n){border-right:0}
  .scope-ledger.four>div:nth-child(3){padding-left:0}
  .scope-ledger.four>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .site-header{grid-template-columns:1fr auto}
  .header-meta{display:none}
  .hero{min-height:auto;padding-top:160px}
  .intro-grid,.head-grid,.two-col,.then-now,.end-grid{grid-template-columns:minmax(0,1fr)}
  .head-grid{gap:24px}
  .intro-copy{border-left:0;border-top:1px solid var(--ink);padding:26px 0 0}
  .ink-section .intro-copy{border-color:var(--line-w)}
  .scope-ledger,.scope-ledger.four{grid-template-columns:minmax(0,1fr)}
  .scope-ledger>div,.scope-ledger>div:not(:first-child),.scope-ledger.four>div:nth-child(3){padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .scope-ledger>div:last-child{border-bottom:0}
  .ledger-row{grid-template-columns:48px minmax(0,1fr)}
  .ledger-row p{grid-column:2/-1}
  .principles{grid-template-columns:minmax(0,1fr)}
  .principles>div{border-bottom:1px solid var(--line)}
  .ink-section .principles>div{border-color:var(--line-w2)}
  .steps article{grid-template-columns:70px minmax(0,1fr)}
  .stat-row:not(.two):not(.four){grid-template-columns:minmax(0,1fr)}
  .stat-row:not(.two):not(.four)>div{padding:22px 0;border-right:0;border-bottom:1px solid var(--sr-line)}
  .stat-row:not(.two):not(.four)>div:last-child{border-bottom:0}
  .stat-row.two>div{padding:22px 16px 22px 0}
  .stat-row.two>div:last-child{padding-left:16px}
  .end-grid{gap:34px}
}
/* Phone */
@media (max-width:620px){
  .site-header{height:68px;padding:0 18px;gap:12px}
  .wordmark{font-size:11px}
  .header-nav{gap:16px}
  .header-nav a{font-size:10px}
  .header-link .long{display:none}
  .header-link .short{display:inline}
  .paper-section,.paper2-section,.ink-section,.blue-section{padding:80px 20px}
  .paper-section+.paper-section{padding-top:12px}
  .hero{padding-top:130px;padding-bottom:90px;gap:44px}
  .hero h1{font-size:46px;overflow-wrap:break-word}
  .eyebrow{font-size:10px;line-height:1.6;margin-bottom:24px}
  .hero-dek{font-size:19px;margin:30px 0 34px}
  .hero-proof{gap:18px 30px}
  .hero-proof strong{font-size:46px}
  .hero-proof span{font-size:10px}
  .scroll-cue{display:none}
  .section-label{margin-bottom:40px}
  h2{font-size:40px}
  .lede{font-size:19px}
  .bet{padding-left:18px;font-size:22px}
  .panel-head{flex-direction:column;gap:6px;padding:14px 16px;font-size:9px}
  .panel-body{padding:18px 14px}
  .panel-note{padding:16px 16px 20px;font-size:12px}
  .readout,.readout.three{grid-template-columns:minmax(0,1fr)}
  .readout>div,.readout.three>div{border-right:0;border-bottom:1px solid var(--line-w2);padding:16px 16px 20px}
  .readout>div:last-child,.readout.three>div:last-child{border-bottom:0}
  .stat-row.four,.stat-row.two{grid-template-columns:minmax(0,1fr)}
  .stat-row.four>div,.stat-row.two>div,.stat-row.two>div:last-child,.stat-row.four>div:nth-child(odd){padding:20px 0;border-right:0;border-bottom:1px solid var(--sr-line)}
  .stat-row.four>div:last-child,.stat-row.two>div:last-child{border-bottom:0}
  .ledger-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}
  .ledger-row p{grid-column:auto}
  .ledger-row b{font-size:16px}
  .steps article{grid-template-columns:minmax(0,1fr);gap:10px;padding:24px 0}
  .steps b{font-size:20px}
  .then-now>div{padding:20px 18px 22px}
  th,td{padding:12px 14px}
  .seg button{padding:12px 12px;font-size:10px}
  .next-report{grid-template-columns:minmax(0,1fr);gap:16px}
  .next-report .arrow{display:none}
  .end-grid>p{font-size:34px}
  .button{padding:14px 16px;font-size:10px}
  .site-footer{flex-direction:column;align-items:flex-start;gap:14px;padding:25px 20px}
}
@media (max-width:400px){.hero h1{font-size:40px}.hero-proof strong{font-size:40px}h2{font-size:36px}}