:root{
  --ground:#FFFFFF; --ink:#14171A; --soft:#59625F; --line:#DDE2DF; --wash:#F3F5F4;
  --green:#0F5C3F; --check:#E8F1E3; --check-line:#B9CDB4; --red:#9E2B18; --red-wash:#FBE9E5;
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1412; --ink:#E9EDEA; --soft:#A7B2AC; --line:#2A3430; --wash:#171E1B;
    --green:#74D1A2; --check:#18241D; --check-line:#34493C; --red:#F5A18C; --red-wash:#2E1A16;
  }
}
:root[data-theme="dark"]{
  --ground:#0F1412; --ink:#E9EDEA; --soft:#A7B2AC; --line:#2A3430; --wash:#171E1B;
  --green:#74D1A2; --check:#18241D; --check-line:#34493C; --red:#F5A18C; --red-wash:#2E1A16;
}
*{box-sizing:border-box}
body{background:var(--ground);color:var(--ink);font:400 19px/1.62 var(--body);padding-inline:22px;padding-block:0 80px}
.wrap{max-width:1120px;margin:0 auto}
p,h1,h2,h3,h4,ul,ol,figure,dl{margin:0}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);text-wrap:balance}
h1{font-weight:800;font-stretch:74%;font-size:clamp(40px,7vw,80px);line-height:.97;letter-spacing:-.015em}
h1 em{font-style:normal;color:var(--green)}
h2{font-weight:800;font-stretch:78%;font-size:clamp(30px,4.4vw,48px);line-height:1.02;letter-spacing:-.01em}
h3{font-weight:700;font-stretch:88%;font-size:24px;line-height:1.15}
h4{font-weight:700;font-stretch:92%;font-size:19px;line-height:1.2}
.text{max-width:68ch;display:grid;gap:18px}
.small{font-size:16px;color:var(--soft);line-height:1.5}
.kicker{font:600 16px/1.3 var(--display);color:var(--green)}
code{font:400 .84em var(--mono);background:var(--wash);padding:1px 5px;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:8px 0;font:600 16px var(--display)}

/* header */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 24px;padding-block:22px;border-bottom:1px solid var(--line)}
.top .who{font:800 20px/1 var(--display);font-stretch:85%;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 16px/1.4 var(--display)}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--green);text-decoration:underline}

/* hero */
.hero{padding-block:52px 60px;display:grid;gap:26px}
.hero .role{font:600 15px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.hero .lede{font-size:clamp(19px,2.2vw,23px);line-height:1.5;max-width:64ch}
.hero .where{font:500 16px/1.5 var(--display);color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}
.btn{display:inline-block;font:600 16px/1 var(--display);padding:14px 20px;background:var(--ink);color:var(--ground);text-decoration:none;border-radius:2px}
.btn:hover{background:var(--green)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--green);color:var(--green);background:none}
.inline-links{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 16px/1.5 var(--display)}

section{padding-block:60px;border-top:3px solid var(--ink);display:grid;gap:44px}
section,.part,.intro,.text,.contact,.chart{grid-template-columns:minmax(0,1fr)}
.part{display:grid;gap:20px}
.intro{display:grid;gap:18px}
.intro p{font-size:21px;max-width:66ch}

/* result strip */
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:900px}
.result{border-top:4px solid var(--green);padding-top:14px;display:grid;gap:6px;align-content:start}
.result.held{border-top-color:var(--red)}
.result b{font:800 clamp(40px,6vw,56px)/1 var(--display);font-stretch:72%;font-variant-numeric:tabular-nums}
.result.held b{color:var(--red)}
.result .lab{font:600 14px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.result p{font-size:16.5px;line-height:1.5;color:var(--soft)}

/* chart */
.chart{display:grid;gap:12px}
.chart svg{width:100%;height:auto;display:block;max-width:820px}
.c-lab{font:500 14px var(--display);fill:var(--soft)}
.c-val{font:700 17px var(--display);fill:var(--ink)}
.c-grid{stroke:var(--line);stroke-width:1}
.c-bar{fill:var(--ink)} .c-best{fill:var(--green)} .c-bad{fill:var(--red)}
.c-badval{fill:var(--red)}

/* tables */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16.5px;line-height:1.45}
th,td{text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 14px/1.2 var(--display);color:var(--soft);border-bottom:2px solid var(--ink)}
td.id{font:400 14px/1.7 var(--mono);white-space:nowrap}
td.q{font-style:italic}
td.n,th.n{text-align:right;font:500 16px/1.5 var(--display);font-variant-numeric:tabular-nums;padding-right:0;padding-left:14px;width:3.2em}
td.up{color:var(--green);font-weight:700}

/* versions */
.versions{display:grid;gap:0;max-width:820px}
.versions div{display:grid;grid-template-columns:118px 1fr;gap:20px;padding-block:18px;border-bottom:1px solid var(--line)}
.versions b{font:800 30px/1 var(--display);font-stretch:75%;font-variant-numeric:tabular-nums}
.versions b small{display:block;font:500 14px/1.4 var(--display);font-stretch:100%;color:var(--soft);margin-top:6px}
.versions p{font-size:17.5px}
@media (max-width:520px){.versions div{grid-template-columns:1fr;gap:8px}}

/* guest checks */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;align-items:start;max-width:920px}
.check{background:var(--check);border:1px solid var(--check-line);padding:18px 20px 22px;font:400 14.5px/1.6 var(--mono);display:grid;gap:12px}
.check header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:3px double var(--check-line);font:700 14px/1.2 var(--display);letter-spacing:.06em;text-transform:uppercase}
.check header i{font:600 15px var(--mono);font-style:normal;color:var(--red);letter-spacing:0;text-transform:none}
.check .who{font:600 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:-8px}
.check mark{background:var(--red-wash);color:var(--red);padding:0 2px}
.check footer{display:flex;gap:14px;align-items:center;padding-top:14px;border-top:1px dashed var(--check-line);font:400 15px/1.4 var(--body)}
.stamp{flex:none;font:800 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;border:2.5px solid;border-radius:3px;padding:5px 9px;transform:rotate(-5deg)}
.stamp.fail{color:var(--red)} .stamp.pass{color:var(--green)}

pre{margin:0;background:var(--wash);border-left:4px solid var(--ink);padding:18px 20px;overflow-x:auto;font:400 13.5px/1.7 var(--mono);color:var(--ink);max-width:920px}
.notes{padding:0;list-style:none;display:grid;gap:14px;max-width:68ch}
.notes li{font-size:17.5px}
.notes b{font-weight:600}

/* flow */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;padding:0;list-style:none}
.flow li{border-top:4px solid var(--ink);padding-top:14px;display:grid;gap:8px;align-content:start}
.flow li.gate{border-top-color:var(--red)}
.flow li.gate h4{color:var(--red)}
.flow p{font-size:16.5px;line-height:1.5;color:var(--soft)}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:32px}
.three article{display:grid;gap:10px;align-content:start}
.three p{font-size:17px;line-height:1.55}
.stack{font:400 14px/1.8 var(--mono);color:var(--soft);max-width:860px}

/* work list */
.work{display:grid;gap:0}
.work article{display:grid;grid-template-columns:260px 1fr;gap:12px 40px;padding-block:24px;border-bottom:1px solid var(--line)}
.work article:first-child{border-top:1px solid var(--line)}
.work .with{font:400 13.5px/1.6 var(--mono);color:var(--soft);margin-top:6px}
.work .state{font:600 13px/1.5 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:8px}
.work p{font-size:17.5px;max-width:64ch}
.work p+p{margin-top:10px}
@media (max-width:720px){.work article{grid-template-columns:1fr}}

.cmd{font:400 13.5px/1.8 var(--mono);background:var(--wash);padding:14px 16px;overflow-x:auto;white-space:pre}
figure.shot{display:grid;gap:10px;max-width:920px}
figure.shot img{width:100%;height:auto;border:1px solid var(--line)}
figure.shot figcaption{font-size:16px;color:var(--soft);line-height:1.5}

/* about */
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:44px;align-items:start}
.years{padding:0;list-style:none}
.years li{display:grid;grid-template-columns:6.4em 1fr;gap:14px;padding-block:12px;border-bottom:1px solid var(--line);font-size:17px;line-height:1.45}
.years li span:first-child{font:600 16px/1.5 var(--display);font-variant-numeric:tabular-nums;color:var(--soft)}
@media (max-width:520px){.years li{grid-template-columns:1fr;gap:2px}}

.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;max-width:1000px}
.skills div{display:grid;gap:6px;align-content:start}
.skills dt{font:600 14px/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.skills dd{margin:0;font-size:17px;line-height:1.5}

.contact{display:grid;gap:20px}
.mail{font:800 clamp(22px,4.2vw,44px)/1.1 var(--display);font-stretch:78%;color:var(--ink);text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:6px;overflow-wrap:anywhere}
.mail:hover{color:var(--green)}
footer{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--soft);max-width:70ch;display:grid;gap:10px}
.backlink{padding-block:36px 0;font:500 16px/1.4 var(--display)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}