/* Zach Stern: one stylesheet for every page.
   Two settings share one system. Professional work sits on paper in ink. Independent ZMS Labs
   work sits on night with the ZMS orange. Archivo is the only typeface; its width axis does the
   work a second family would otherwise do: condensed for figures, wide for small labels. */

@font-face{font-family:Archivo;src:url('assets/fonts/Archivo-latin.woff') format('woff'),url('assets/fonts/Archivo.ttf') format('truetype');font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --paper:#f6f5f1;--paper-2:#ecebe5;--paper-3:#e2e0d8;
  --ink:#121212;--ink-2:#2c2c29;--muted:#62615b;--rule:#d6d4cb;--rule-2:#b9b7ad;
  --signal:#b8461a;
  --night:#0e1b21;--night-2:#14262e;--night-3:#1c333c;--on-night:#f1efe8;--on-night-2:#b4c2c5;--night-rule:#2c4149;
  --signal-night:#ffac70;
  --max:1280px;--gutter:clamp(16px,5vw,72px);--measure:64ch;
  --space:clamp(88px,11vw,168px);
  --radius:6px;
  color-scheme:light;
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-synthesis:none;
  -webkit-text-size-adjust:100%;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* Controls that need scripts stay out of the way when scripts are off; the content they switch is linked instead. */
html:not(.js) :is(.view-controls,[data-enlarge],.switch,.motion-toggle){display:none}
html:not(.js) .story-step{min-height:0;padding-block:28px}
html{scroll-behavior:smooth;scroll-padding-top:24px}
html.js:not(.js-motion){scroll-behavior:auto}
html.js:not(.js-motion) *,html.js:not(.js-motion) *::before,html.js:not(.js-motion) *::after{transition:none!important;animation:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-size:clamp(17px,.35vw + 16px,19px);line-height:1.6;font-kerning:normal;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:3px solid var(--signal);outline-offset:4px;border-radius:2px}
.night :focus-visible{outline-color:var(--signal-night)}
::selection{background:#ffd8bd;color:var(--ink)}
code,pre{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.88em}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
abbr{text-decoration:none}

/* Type */
h1,h2,h3,h4{font-weight:640;font-stretch:88%;letter-spacing:-.032em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(46px,7.4vw,112px)}
h2{font-size:clamp(34px,4.6vw,68px)}
h3{font-size:clamp(23px,2.1vw,30px);letter-spacing:-.022em;line-height:1.12}
h4{font-size:18px;letter-spacing:-.01em;line-height:1.25;font-stretch:96%}
p{max-width:var(--measure);text-wrap:pretty}
p+p{margin-top:1em}
.kicker{display:block;font-size:12.5px;font-weight:600;font-stretch:115%;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;color:var(--muted);margin-bottom:22px}
.night .kicker{color:var(--on-night-2)}
.lead{font-size:clamp(21px,1.15vw + 15px,30px);line-height:1.38;letter-spacing:-.012em;max-width:34ch;color:var(--ink-2);text-wrap:pretty}
.night .lead{color:var(--on-night)}
.fine{font-size:15px;line-height:1.55;color:var(--muted)}
.night .fine{color:var(--on-night-2)}
.figure-num{font-variant-numeric:tabular-nums lining-nums;font-stretch:70%;font-weight:700;letter-spacing:-.03em;line-height:.92}
.prose{max-width:var(--measure)}
.prose p,.prose li{color:var(--ink-2)}
.night .prose p,.night .prose li{color:var(--on-night)}
.prose ul,.prose ol{padding-left:1.15em;margin-top:1em}
.prose li+li{margin-top:.45em}
.prose h3{margin:1.6em 0 .5em}

/* Layout */
.wrap{width:min(var(--max),calc(100% - 2*var(--gutter)));margin-inline:auto}
.section{padding-block:var(--space)}
.section.tight{padding-block:calc(var(--space)*.62)}
.band{background:var(--paper-2)}
.night{background:var(--night);color:var(--on-night)}
.night a{color:var(--on-night)}
.rule-top{border-top:1px solid var(--rule)}
.night .rule-top{border-top-color:var(--night-rule)}
.section-head{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-bottom:clamp(44px,6vw,80px)}
.section-head>.kicker{margin-bottom:-6px}
.section-head h2{max-width:20ch}
.section-head .lead{max-width:40ch}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.stack>*+*{margin-top:24px}
.skip{position:fixed;z-index:100;left:16px;top:-80px;background:var(--ink);color:var(--paper);padding:12px 18px;text-decoration:none}
.skip:focus{top:12px}
main{display:block;overflow:clip}
main:focus{outline:none}

/* Header and footer */
.header{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding:22px var(--gutter);max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto}
.brand{text-decoration:none;font-weight:680;font-stretch:84%;font-size:22px;letter-spacing:-.03em;line-height:1}
.brand small{display:block;margin-top:6px;font-size:11px;font-weight:600;font-stretch:115%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.header nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:15px}
.header nav a{text-decoration:none;padding-block:6px;border-bottom:1px solid transparent}
.header nav a:hover,.header nav a[aria-current]{border-bottom-color:currentColor}
.header.on-night{background:var(--night);color:var(--on-night);max-width:none}
.header.on-night .brand small{color:var(--on-night-2)}
.footer{background:var(--ink);color:#e9e7df;padding-block:72px 56px}
.footer .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px}
.footer .brand{font-size:26px}
.footer p{color:#bdbab0;font-size:15px;margin-top:14px;max-width:44ch}
.footer nav{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 40px;align-content:start;font-size:15px}
.footer nav a{text-decoration:none}
.footer nav a:hover{text-decoration:underline}
.footer .small{grid-column:1/-1;border-top:1px solid #34332f;padding-top:24px;font-size:13px;color:#9b988d;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer .small p{font-size:13px;margin:0;color:#9b988d}
.motion-toggle{background:none;border:1px solid #57554e;border-radius:99px;color:#d6d3c9;font-size:13px;padding:6px 14px}
.motion-toggle[hidden]{display:none}

/* Links and actions */
.action{display:inline-flex;align-items:center;gap:14px;min-height:48px;padding:12px 22px;border-radius:99px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:580;font-size:16px;line-height:1.2}
.action:hover{background:#000}
.action.ghost{background:transparent;color:inherit;border:1px solid currentColor}
.night .action{background:var(--on-night);color:var(--night)}
.night .action.ghost{background:transparent;color:var(--on-night)}
.action .arrow,.more .arrow{transition:transform .25s ease}
.action:hover .arrow,.more:hover .arrow{transform:translateX(4px)}
.actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:36px}
.more{display:inline-flex;align-items:baseline;gap:10px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px;margin-top:24px;line-height:1.3}
.more:hover{border-bottom-width:2px}
.links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;font-size:16px}
.ext::after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.3em;vertical-align:.04em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 1h6v6M9 1 1 9' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}

/* Status line: the label links to the key on the Sources page */
.status{font-size:15px;line-height:1.5;color:var(--muted);margin-top:20px;max-width:60ch}
.status a{text-decoration:none;color:var(--ink);border-bottom:1px solid var(--rule-2)}
.status a:hover{border-bottom-color:currentColor}
.status b{font-weight:640}
.night .status{color:var(--on-night-2)}
.night .status a{color:var(--on-night);border-bottom-color:#56707a}

/* Home hero */
.hero{padding-block:clamp(48px,9vw,128px) clamp(64px,9vw,120px)}
.hero h1{font-size:clamp(64px,13.2vw,208px);font-stretch:80%;font-weight:680;letter-spacing:-.045em;line-height:.86;margin-left:-.04em}
.hero .lead{margin-top:clamp(28px,4vw,52px);max-width:30ch}
.credentials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:clamp(56px,8vw,104px)}
.credentials>div{padding:24px 28px 0 0}
.credentials>div+div{padding-left:28px;border-left:1px solid var(--rule)}
.credentials dt{font-size:clamp(30px,3.2vw,46px);font-stretch:72%;font-weight:680;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.credentials dd{margin-top:12px;font-size:16px;line-height:1.45;color:var(--ink-2);max-width:30ch}

/* Experience pair */
.experience{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.role{padding:36px clamp(20px,3.4vw,48px) 8px 0}
.role+.role{padding-left:clamp(20px,3.4vw,48px);border-left:1px solid var(--rule)}
.role h3{font-size:clamp(34px,3.8vw,56px);font-stretch:82%;letter-spacing:-.035em}
.role .title{margin-top:12px;font-weight:600;font-size:17px}
.role .dates{font-variant-numeric:tabular-nums;color:var(--muted);font-size:15px;margin-top:2px}
.role>p{margin-top:22px;color:var(--ink-2)}
.role ul{list-style:none;margin-top:26px;border-top:1px solid var(--rule)}
.role li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.45;color:var(--ink-2)}

/* Big number */
.big-number{border-top:1px solid currentColor;padding-top:24px}
.big-number .figure-num{display:block;font-size:clamp(40px,10.5vw,168px);white-space:nowrap}
.split .big-number .figure-num{font-size:clamp(40px,5.4vw,92px)}
.big-number p{margin-top:18px;font-size:clamp(18px,1.3vw,21px);max-width:44ch}
.big-number .tag{display:inline-block;font-size:12.5px;font-weight:600;font-stretch:115%;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}

/* Timeline (EAR) */
.timeline{list-style:none;position:relative;margin-top:8px;border-left:1px solid var(--rule-2);padding-left:0}
.timeline li{position:relative;padding:0 0 30px 32px}
.timeline li::before{content:"";position:absolute;left:-6px;top:.45em;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.timeline li.key::before{background:var(--signal);border-color:var(--signal)}
.timeline time{display:block;font-size:13px;font-weight:600;font-stretch:112%;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.timeline p{margin-top:4px;font-size:17px;line-height:1.45}
.js-motion .timeline li{opacity:.28;transition:opacity .5s ease}
.js-motion .timeline li.seen{opacity:1}

/* Scroll story: steps scroll; a sticky picture follows the active step */
.story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.story-graphic{position:sticky;top:max(24px,calc(50vh - 260px));min-height:0}
.story-steps{list-style:none}
.story-step{min-height:62vh;padding-block:16vh;display:flex;flex-direction:column;justify-content:center}
.story-step:first-child{padding-top:4vh}
.story-step:last-child{min-height:50vh}
.story-step .kicker{margin-bottom:14px}
.story-step h3{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.028em}
.story-step p{margin-top:16px;color:var(--ink-2)}
.night .story-step p{color:var(--on-night)}
.js-story .story-step :is(h3,p,.kicker){transition:color .45s ease}
.js-story .story-step:not(.is-active) :is(h3,p){color:var(--muted)}
.night .js-story .story-step:not(.is-active) :is(h3,p),.night.js-story .story-step:not(.is-active) :is(h3,p){color:#8fa1a6}
.story-step .step-figure{display:none}

/* Story pictures that swap whole panels. Without scripts, only panels marked "final" show. */
.story-graphic .panel-state{display:none}
.story:not(.js-story) .story-graphic .panel-state[data-on~="final"]{display:block}
.js-story .story-graphic .panel-state.on{display:block}
.state-chip{display:inline-block;margin-top:18px;font-size:13px;font-weight:640;font-stretch:110%;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:99px;border:1.5px solid currentColor}
.state-chip.fail{color:var(--signal)}
.bars .bar-group{font-size:14px;font-weight:620;font-stretch:110%;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:6px 0 -6px}

/* Clause map (agreements story) */
.doc{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(22px,3vw,40px);}
.doc-title{font-size:12.5px;font-weight:600;font-stretch:115%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:16px}
.clause-list{list-style:none;counter-reset:clause}
.clause-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:13px 10px 13px 0;border-radius:4px;transition:background .35s ease,color .35s ease}
.clause-list li>*{grid-column:2}
.clause-list li::before{counter-increment:clause;content:counter(clause) ".";grid-column:1;grid-row:1/span 3;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;font-weight:600}
.clause-list b{font-weight:640;font-size:17px}
.clause-list i{font-style:normal;display:block;height:7px;border-radius:4px;background:var(--paper-3);margin-top:7px;width:var(--w,86%)}
.clause-list li i+i{width:var(--w2,64%)}
.clause-list .q{display:none;font-size:16px;line-height:1.4;color:var(--ink-2);margin-top:4px}
.doc[data-active] .clause-list li{color:#77756d}
.doc[data-active] .clause-list li i{background:#eceae4}
.doc[data-active] .clause-list li.on{color:var(--ink);background:#fbf3ec}
.doc[data-active] .clause-list li.on i{background:#f0c4a8}
.doc[data-active] .clause-list li.on::before{color:var(--signal)}
.doc-note{margin-top:16px;font-size:13.5px;color:var(--muted)}

/* Clause text inside the sketch (Interleaf story) */
.clause-list .text{display:block;font-size:15px;line-height:1.45;margin-top:4px;color:var(--ink-2);font-weight:400}
.doc ins{display:none;text-decoration:none;background:#fde3d2;border-radius:2px;padding:0 2px}
.doc del{text-decoration:none}
.doc:is([data-active="fixed"],[data-active="human"]) ins{display:inline}
.doc:is([data-active="fixed"],[data-active="human"]) del{text-decoration:line-through;color:var(--muted)}
.story:not(.js-story) .doc ins{display:inline}
.story:not(.js-story) .doc del{text-decoration:line-through;color:var(--muted)}
.finding-count{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);margin-top:14px;padding-top:12px;font-size:15px}
.finding-count b{font-size:28px;font-stretch:70%;font-weight:700;font-variant-numeric:tabular-nums}
.hallmarks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:1000px){.doc[data-active] .clause-list li:not(.on) .text{display:none}.doc[data-active] .clause-list li{padding-block:5px}}
.js-story .story-graphic .state-chip[data-on]:not(.on){visibility:hidden}
@media (max-width:1000px){.hallmarks{grid-template-columns:minmax(0,1fr)}}

/* Tools grid */
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.tools>div{padding:26px 24px 8px 0}
.tools>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.tools h3{font-size:23px;font-stretch:90%}
.tools p{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink-2)}

/* Exhibits */
.exhibit{margin:0}
.exhibit img,.exhibit video{width:100%;border-radius:var(--radius);border:1px solid var(--rule);background:var(--paper-2)}
.night .exhibit img,.night .exhibit video{border-color:var(--night-rule);background:var(--night-2)}
.exhibit figcaption{margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;max-width:none}
.night .exhibit figcaption{color:var(--on-night-2)}
.label{display:inline-block;font-size:11.5px;font-weight:600;font-stretch:115%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--paper-2);border-radius:3px;padding:3px 7px;line-height:1.3}
.night .label{background:var(--night-3);color:var(--on-night)}
.exhibit .full{white-space:nowrap}

/* Independent work */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--night-rule)}
.feature:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature:nth-of-type(even) .feature-copy{order:2}
.feature h3{font-size:clamp(30px,3.4vw,50px);font-stretch:84%;letter-spacing:-.034em}
.feature p{margin-top:20px;color:var(--on-night)}
.feature .kicker{color:var(--signal-night)}
.panel{color:var(--on-night);background:var(--night-2);border:1px solid var(--night-rule);border-radius:var(--radius);padding:clamp(22px,3vw,40px)}
.index{list-style:none;border-top:1px solid var(--night-rule)}
.index li{border-bottom:1px solid var(--night-rule)}
.index a.row{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,5fr) 28px;gap:12px 32px;align-items:baseline;padding:26px 0;text-decoration:none}
.index .name{font-size:clamp(26px,2.8vw,40px);font-weight:640;font-stretch:84%;letter-spacing:-.03em;line-height:1.05}
.index .what{font-size:18px;line-height:1.45;color:var(--on-night)}
.index .go{font-size:22px;transition:transform .25s ease}
.index a.row:hover .go{transform:translateX(5px)}
.index a.row:hover .name{color:var(--signal-night)}
.index .status{margin:-14px 0 24px;grid-column:2}
.index li{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,5fr) 28px;column-gap:32px}
.index li>a.row{grid-column:1/-1}
.index li>.status{grid-column:2/3}

/* Light index (work page) */
.work-list{list-style:none;border-top:1px solid var(--ink)}
.work-list>li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr) minmax(0,3fr);gap:16px 40px;padding:30px 0;border-bottom:1px solid var(--rule);align-items:start}
.work-list .when{font-size:14px;font-weight:600;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:10px}
.work-list h3{font-size:clamp(28px,3vw,44px);font-stretch:84%}
.work-list h3 a{text-decoration:none}
.work-list h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.work-list p{margin-top:10px;color:var(--ink-2)}
.work-list .status{margin-top:12px}
.work-list img{border-radius:4px;border:1px solid var(--rule);aspect-ratio:16/10;object-fit:cover;object-position:top left;width:100%}

/* Tiles (Epistemic Skills story) */
.tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;max-width:520px}
.tiles span{color:var(--on-night);aspect-ratio:1;border-radius:4px;background:var(--night-3);border:1px solid var(--night-rule);position:relative;transition:background .45s ease,border-color .45s ease}
.tiles:is([data-state="miss"],[data-state="cause"]) span.m,:is([data-state="miss"],[data-state="cause"])>.tiles span.m{background:var(--signal-night);border-color:var(--signal-night)}
.tiles:is([data-state="fixed"],[data-state="live"]) span,:is([data-state="fixed"],[data-state="live"])>.tiles span{background:#d7e4e1;border-color:#d7e4e1}
.tiles[data-state="live"] span::after,[data-state="live"]>.tiles span::after{content:"";position:absolute;inset:28%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;background:var(--night)}
.tiles-caption{display:flex;justify-content:space-between;gap:20px;margin-top:20px;max-width:520px;font-size:15px;color:var(--on-night-2)}
.tiles-caption b{font-size:clamp(34px,4vw,56px);font-stretch:70%;font-weight:700;color:var(--on-night);display:block;line-height:1;font-variant-numeric:tabular-nums}
.graphic-panel{color:var(--on-night);background:var(--night-2);border:1px solid var(--night-rule);border-radius:var(--radius);padding:clamp(22px,3vw,40px)}
.graphic-panel .kicker{margin-bottom:18px}
.bytes{display:none;margin-top:24px;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
[data-state="cause"]>.bytes{display:grid}
.bytes div{border:1px solid var(--night-rule);border-radius:4px;padding:14px}
.bytes b{display:block;font-size:13px;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;color:var(--on-night-2);font-weight:600}
.bytes code{font-size:20px;color:var(--on-night)}

/* Bars (SaveBench windows) */
.bars{display:grid;gap:22px}
.bar-row{display:grid;grid-template-columns:110px minmax(0,1fr) 92px;gap:14px;align-items:center;font-size:15px}
.bar-track{position:relative;height:30px;background:var(--paper-2);border-radius:3px}
.bar-fill{position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--ink-2);border-radius:3px;transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.bar-fill.miss{background:var(--signal)}
.bar-target{position:absolute;top:-6px;bottom:-6px;left:var(--t);border-left:2px dashed var(--ink)}
.bar-row .val{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.js-motion .bars:not(.seen) .bar-fill{transform:scaleX(0)}

/* Records */
.record{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,80px);border-top:1px solid var(--ink);padding-top:36px}
.record dl{display:grid;grid-template-columns:minmax(0,13ch) minmax(0,1fr);gap:16px 28px}
.record dt{font-weight:620;font-size:16px}
.record dd{font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.night .record{border-top-color:var(--on-night)}
.night .record dd{color:var(--on-night)}
.kv{display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,auto);gap:10px 24px;font-size:16px}
.kv dt{color:var(--muted)}
.kv dd{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.night .kv dt{color:var(--on-night-2)}

/* Case pages */
.crumb{font-size:14.5px;color:var(--muted);margin-bottom:32px;display:flex;flex-wrap:wrap;gap:6px}
.crumb a{text-decoration:none;border-bottom:1px solid var(--rule-2)}
.night .crumb{color:var(--on-night-2)}
.page-hero{padding-block:clamp(40px,7vw,104px) clamp(56px,7vw,104px)}
.page-hero h1{max-width:16ch;font-size:clamp(40px,5.6vw,84px)}
.page-hero .lead{margin-top:30px;max-width:36ch}
.page-hero.split h1{font-size:clamp(40px,4.8vw,80px)}
.page-hero.split.wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.page-hero.split.wide h1{font-size:clamp(40px,5.6vw,84px)}
.page-hero.split>:is(.ledger,.hero-index){align-self:end;justify-self:end;width:min(100%,440px);margin-top:0;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ink)}
.page-hero.split>.ledger>div,.page-hero.split>.ledger>div+div{padding:16px 0;border-left:0;border-bottom:1px solid var(--rule)}
.hero-index ul{list-style:none;margin:0;padding:0}
.hero-index li{border-bottom:1px solid var(--rule)}
.hero-index a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;text-decoration:none;font-weight:600}
.hero-index a span{font-size:15px;font-weight:400;color:var(--muted)}
.hero-index a:hover{text-decoration:underline;text-underline-offset:4px}
.case-hero{padding-block:clamp(40px,6vw,88px) clamp(56px,7vw,104px);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.case-hero h1{font-size:clamp(38px,4.4vw,70px);max-width:17ch}
.case-hero .lead{margin-top:26px;max-width:32ch;font-size:clamp(19px,1vw + 14px,25px)}
.case-hero .exhibit{align-self:end}
.ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);margin-top:clamp(40px,5vw,72px)}
.ledger>div{padding:20px 20px 0 0}
.ledger>div+div{padding-left:20px;border-left:1px solid var(--rule)}
.ledger dt{font-size:12px;font-weight:600;font-stretch:115%;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ledger dd{margin-top:8px;font-size:16px;line-height:1.45}
.night .ledger,.night .ledger>div+div{border-color:var(--night-rule)}
.night .ledger dt{color:var(--on-night-2)}
.contribution{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.contribution>div{padding:28px 32px 0 0}
.contribution>div+div{padding-left:32px;border-left:1px solid var(--rule)}
.contribution h3{font-size:24px}
.contribution p{margin-top:12px;color:var(--ink-2)}
.next-case{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:28px}
.next-case a.big{font-size:clamp(30px,4vw,56px);font-weight:640;font-stretch:84%;letter-spacing:-.034em;text-decoration:none;line-height:1.06}
.next-case a.big:hover{text-decoration:underline;text-decoration-thickness:3px}

/* Disclosure for the full record */
details.evidence-depth,details.case-depth{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
details.evidence-depth>summary,details.case-depth>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-size:clamp(20px,1.6vw,26px);font-weight:620;font-stretch:90%;letter-spacing:-.015em}
details.evidence-depth>summary::-webkit-details-marker,details.case-depth>summary::-webkit-details-marker{display:none}
details.evidence-depth>summary::after,details.case-depth>summary::after{content:"+";font-weight:400;font-size:30px;line-height:1}
details.evidence-depth[open]>summary::after,details.case-depth[open]>summary::after{content:"\2212"}
.depth-body{padding-bottom:48px}
.depth-body>*+*{margin-top:44px}
.depth-body h3{font-size:clamp(22px,2vw,28px)}
.depth-body h3+p,.depth-body h3+ul,.depth-body h3+dl{margin-top:14px}
.depth-body ul{padding-left:1.15em}
.depth-body li{color:var(--ink-2);max-width:var(--measure)}
.depth-body li+li{margin-top:.4em}

/* Tables */
.table-scroll{overflow-x:auto;max-width:100%}
.table-scroll:has(tr>:nth-child(2):last-child){max-width:880px}
.table-scroll:has(tr>:nth-child(2):last-child) tr>:first-child{width:32%}
table{border-collapse:collapse;width:100%;font-size:16px;font-variant-numeric:tabular-nums}
caption{text-align:left;font-size:14.5px;color:var(--muted);padding-bottom:12px;caption-side:top}
th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-size:12.5px;font-weight:600;font-stretch:115%;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--ink)}
td.num,th.num{text-align:right}
.miss{color:var(--signal);font-weight:620}
.met{font-weight:620}

/* Flow diagrams */
.flow{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;align-items:stretch}
.flow>li{position:relative;padding:22px 26px 22px 0;border-top:2px solid var(--ink)}
.flow>li+li{padding-left:26px}
.flow>li+li::before{content:"";position:absolute;left:-7px;top:-8px;width:12px;height:12px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg);background:transparent}
.flow b{display:block;font-size:12.5px;font-weight:600;font-stretch:115%;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.flow strong{display:block;margin-top:6px;font-size:20px;font-weight:640;font-stretch:90%;line-height:1.2}
.flow p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.night .flow>li{border-top-color:var(--on-night)}
.night .flow>li+li::before{border-color:var(--on-night)}
.night .flow b{color:var(--on-night-2)}
.night .flow p{color:var(--on-night)}
.chip{display:inline-block;font-size:13px;font-weight:620;font-stretch:108%;letter-spacing:.03em;padding:4px 10px;border-radius:99px;border:1px solid currentColor;line-height:1.3}
.chip.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.alert{color:var(--signal)}

/* Galleries (site.js) */
.design-view{display:grid;gap:18px}
.view-controls{display:flex;flex-wrap:wrap;gap:8px}
.view-controls button,.switch button,.plain-button{border:1px solid var(--rule-2);background:transparent;border-radius:99px;padding:9px 16px;font-size:15px;line-height:1.2;min-height:42px}
.view-controls button[aria-pressed="true"],.switch button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.night .view-controls button,.night .switch button{border-color:#4f6670}
.night .view-controls button[aria-pressed="true"],.night .switch button[aria-pressed="true"]{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
.screen-frame{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.night .screen-frame{border-color:var(--night-rule);background:var(--night-2)}
.design-screen{width:100%}
.view-caption{font-size:15px;color:var(--muted);max-width:var(--measure)}
.night .view-caption{color:var(--on-night-2)}
.view-actions{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:15px}
.view-actions button{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.22em}
.image-dialog{border:0;padding:0;max-width:min(96vw,1800px);max-height:94vh;background:var(--paper);border-radius:var(--radius);overflow:auto}
.image-dialog::backdrop{background:rgba(10,12,12,.82)}
.dialog-bar{position:sticky;top:0;left:0;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--rule);font-size:15px;z-index:1}
.dialog-bar button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:99px;padding:7px 16px}
.dialog-caption{padding:12px 16px;font-size:14.5px;color:var(--muted)}
.image-dialog img{max-width:none;width:auto}

/* Video and transcripts */
.video-study video{width:100%;border-radius:var(--radius);border:1px solid var(--rule);background:#000}
.night .video-study video{border-color:var(--night-rule)}
details.transcript{margin-top:16px;border-top:1px solid var(--rule);padding-top:12px}
.night details.transcript{border-top-color:var(--night-rule)}
details.transcript summary{cursor:pointer;font-weight:600;font-size:15.5px}
details.transcript ol,details.transcript ul{margin-top:12px;padding-left:1.2em;font-size:15.5px}
details.transcript li+li{margin-top:6px}

/* Walkthroughs (walkthroughs.js) */
.walkthrough{border-top:1px solid var(--ink);padding-top:28px}
.walk-strip{list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;margin-bottom:28px}
.walk-strip a{display:inline-flex;gap:8px;align-items:baseline;text-decoration:none;font-size:14.5px;padding:7px 12px;border:1px solid var(--rule);border-radius:99px;line-height:1.35}
.walk-strip a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.walk-strip-number{font-variant-numeric:tabular-nums;font-weight:640}
.walk-step{margin-top:8px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:start}
.walk-step h3:focus{outline:none}
.walk-step p{margin-top:14px;color:var(--ink-2)}
.walk-step>div:first-child>p:first-child{margin-top:0}
.is-stacked .walk-step+.walk-step{margin-top:48px;padding-top:40px;border-top:1px solid var(--rule)}
.walk-observation{background:#fff;border:1px solid var(--rule);border-radius:var(--radius);padding:22px}
.walk-observation h4{margin-bottom:10px}
.walk-controls{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:32px;padding-top:20px;border-top:1px solid var(--rule)}
.walk-controls button{border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:99px;padding:10px 18px;min-height:44px}
.walk-controls button[data-walk-previous]{background:transparent;color:var(--ink)}
.walk-controls button:disabled{opacity:.35}
.walk-controls [data-walk-status]{font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums}
.walk-intro{max-width:var(--measure);margin-bottom:28px;color:var(--ink-2)}
.walk-links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-size:16px}

/* Small interactive panels */
.switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.measure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.measure{padding:22px 22px 0 0}
.measure+.measure{padding-left:22px;border-left:1px solid var(--rule)}
.measure strong{display:block;font-size:clamp(34px,4vw,56px);font-stretch:70%;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.measure span{display:block;margin-top:10px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.method-card{border:1px solid var(--rule);border-radius:var(--radius);padding:26px;background:#fff}
.method-card h3{margin-bottom:10px}
.method-card blockquote{margin-top:14px;font-size:19px;font-weight:560;letter-spacing:-.01em;color:var(--ink)}
.method-table th{white-space:nowrap}
.method-table code{font-size:15px}

/* Contact */
.contact{text-align:left}
.contact h2{font-size:clamp(48px,8vw,128px);font-stretch:80%;letter-spacing:-.045em;line-height:.9}
.contact p{margin-top:28px;font-size:clamp(19px,1.4vw,24px)}

/* 404 */
.not-found{min-height:56vh;display:flex;flex-direction:column;justify-content:center}

/* Motion: everything is readable without it. These only run when the visitor allows motion. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
.js-motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.1,1)}
.js-motion .reveal.seen{opacity:1;transform:none}
.js-motion .hero h1{animation:rise .9s cubic-bezier(.2,.7,.1,1) both}
.js-motion .hero .lead{animation:rise .9s .08s cubic-bezier(.2,.7,.1,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Narrow screens */
@media (max-width:1000px){
  .split,.split.even,.page-hero.split.wide,.case-hero,.feature,.feature:nth-of-type(even),.record,.story{grid-template-columns:minmax(0,1fr)}
  .page-hero.split>:is(.ledger,.hero-index){justify-self:stretch;width:auto}
  /* On phones the project's picture follows its title, so the work is on the first screen. Reading order is unchanged. */
  .case-hero{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .case-hero>div:first-child{display:contents}
  .case-hero>div:first-child>:not(.crumb,.kicker,h1){order:2}
  .case-hero>:not(:first-child){order:1;margin-top:28px;align-self:stretch}
  .feature:nth-of-type(even) .feature-copy{order:0}
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools>div:nth-child(3){padding-left:0;border-left:0}
  .tools>div:nth-child(n+3){border-top:1px solid var(--rule)}
  .walk-step{grid-template-columns:minmax(0,1fr)}
  .work-list>li{grid-template-columns:minmax(0,1fr)}
  .work-list .when{padding-top:0}
  .story-graphic{position:sticky;top:0;z-index:2;padding-block:12px;background:inherit}
  .night .story-graphic{background:var(--night)}
  .story-graphic .doc{padding:16px}
  .story-graphic .clause-list li{padding:6px 8px 6px 0}
  .story-graphic .clause-list i{display:none}
  .story-step{min-height:auto;padding-block:12vh}
  .story-step:last-child{min-height:auto;padding-bottom:4vh}
}
@media (max-width:1000px) and (max-height:700px){
  .story-graphic{position:static}
}
@media (max-width:720px){
  .credentials,.experience,.contribution,.ledger,.measure-grid,.footer .wrap{grid-template-columns:minmax(0,1fr)}
  .credentials>div,.credentials>div+div{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .role,.role+.role{padding:32px 0 8px;border-left:0}
  .role+.role{border-top:1px solid var(--ink);margin-top:40px}
  .contribution>div,.contribution>div+div,.ledger>div,.ledger>div+div,.measure,.measure+.measure{padding:20px 0;border-left:0;border-bottom:1px solid var(--rule)}
  .tools{grid-template-columns:minmax(0,1fr)}
  .tools>div,.tools>div+div{padding:22px 0;border-left:0;border-top:1px solid var(--rule)}
  .tools>div:first-child{border-top:0}
  .index li{grid-template-columns:minmax(0,1fr) 24px}
  .index a.row{grid-template-columns:minmax(0,1fr) 24px}
  .index .what{grid-column:1/2}
  .index .go{grid-column:2;grid-row:1}
  .index li>.status{grid-column:1/-1;margin-top:-12px}
  .flow{grid-auto-flow:row}
  .flow>li,.flow>li+li{padding:18px 0 18px 0}
  .flow>li+li::before{left:20px;top:-8px;transform:rotate(135deg)}
  .bar-row{grid-template-columns:72px minmax(0,1fr) 70px;gap:10px;font-size:14px}
  .record dl{grid-template-columns:minmax(0,1fr)}
  .record dd{margin-top:-10px}
  .footer nav{grid-template-columns:minmax(0,1fr)}
  .header nav{gap:4px 18px;font-size:15px}
  .hero h1{line-height:.9}
  .big-number .figure-num{font-size:clamp(40px,13vw,64px)}
  th,td{padding-right:10px}
}

/* Print: everything visible, no controls */
@media print{
  .header nav,.footer nav,.motion-toggle,.walk-controls,.walk-strip,.view-controls,.view-actions button,.actions,.skip{display:none!important}
  .night{background:#fff;color:#000}
  .night *{color:#000!important}
  details>*{display:block!important}
  [data-walk-step]{display:grid!important}
  .story-graphic{position:static}
  .js-story .story-step{opacity:1}
}

/* About: the portrait plate in the hero. A photograph hung on the paper like a print: true color,
   square corners, a hairline edge, and a wall label beside it saying what it is. On wide screens the
   print sits above the ledger; on narrow ones it follows the lead in reading order. No motion. */
.about-hero{grid-template-areas:"copy plate" "copy facts";grid-template-rows:auto minmax(0,1fr);row-gap:clamp(36px,3.4vw,48px)}
.about-hero>div:first-child{grid-area:copy}
.about-hero>.ledger{grid-area:facts}
.plate{grid-area:plate;justify-self:end;width:min(100%,440px);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:end}
.plate picture{grid-column:2;grid-row:1;display:block;border:1px solid var(--rule);background:var(--paper-2)}
.plate img{width:276px}
.plate figcaption{grid-column:1;grid-row:1;display:grid;justify-items:end;gap:8px;text-align:right;font-size:14.5px;line-height:1.4;color:var(--muted);max-width:none}
@media (max-width:1000px){
  .page-hero.about-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:none;grid-template-rows:none;row-gap:0}
  .about-hero>div:first-child,.about-hero>.ledger,.about-hero>.plate{grid-area:auto}
  .about-hero>.plate{margin-top:36px;width:auto;justify-self:stretch;grid-template-columns:auto minmax(0,1fr)}
  .page-hero.about-hero>.ledger{margin-top:40px}
  .plate picture{grid-column:1}
  .plate figcaption{grid-column:2;justify-items:start;text-align:left}
}
@media (max-width:720px){
  .plate{column-gap:16px}
  .plate img{width:216px}
}
@media (max-width:380px){
  /* At the narrowest widths the wall label moves under the print instead of squeezing beside it. */
  .plate{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .plate figcaption{grid-column:1;grid-row:2;grid-auto-flow:column;justify-content:start;align-items:center;gap:10px}
}