/* A job, studied: the one place the portfolio steps out of the drawn room. Light, exact, built to be used. */
:root{color-scheme:light;--page:#f7f7f5;--text:#202327;--muted:#646971;--faint:#8b9097;--hair:#e0e2e3;--panel:#fff;--accent:#4f6f5b;--accent-soft:#e3ece6;--warn:#b5462f;--warn-soft:#f8e6e0;--amber:#a87212;--amber-soft:#f6ecd6;--ease:cubic-bezier(.22,.68,0,1);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;font-optical-sizing:auto}
@font-face{font-family:'Special Elite';src:url(/a/fonts/special-elite.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Klee One';src:url(/a/fonts/klee-one-400.woff2) format('woff2');font-display:swap}
*{box-sizing:border-box}
html{background:var(--page);overflow-x:clip}
body{margin:0;background:var(--page);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8aaaff;outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;width:calc(100% - 96px);margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.mast{height:84px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9cdb6}
/* the folder's own language, carried onto the page: its manila tab, its typewriter labels, his handwriting for the way back */
.brand{align-self:flex-end;display:flex;align-items:flex-end;gap:14px;font-family:'Special Elite','Courier New',monospace;font-size:12.5px;letter-spacing:.12em;line-height:1}
.brand .tab{background:#d8b47a;color:#3b2a18;padding:10px 18px 8px;border-radius:8px 8px 0 0;box-shadow:inset 0 1px 0 #ffffff40;transition:background .2s}
.brand:hover .tab{background:#cfa96c}
.brand .no{color:var(--faint);padding-bottom:9px}
.mast nav{display:flex;gap:24px;font-family:'Klee One',ui-rounded,system-ui,sans-serif;font-size:16px;color:var(--text)}
.mast nav a{padding:6px 1px 8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 3.6C18 1.6 34 4.9 52 3.1S92 1.9 119 3.5' fill='none' stroke='%23202327' stroke-opacity='.55' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 calc(100% - 3px)/100% 5px}
.mast nav a:hover{color:var(--warn)}

.intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;align-items:end;padding:56px 0 34px}
.over{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5f7468;font-weight:650;margin:0 0 14px}
h1{margin:0;font-size:clamp(34px,4.2vw,54px);line-height:1.04;letter-spacing:-.035em;font-weight:650}
.lede{margin:0;font-size:17px;line-height:1.55;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{font-size:12px;padding:5px 10px;border-radius:99px;background:#eceeec;color:#4c5157}

/* the playground */
.stage{position:relative;border-radius:20px;border:1px solid #cfd2d4;background:linear-gradient(160deg,#e8eef0,#f1ece4);box-shadow:0 1px 2px #00000006,0 30px 70px -44px #26313f90;overflow:hidden;isolation:isolate}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #d6dadc;background:#ffffff8c;backdrop-filter:blur(10px);font-size:12px;color:var(--muted)}
.seg{display:inline-flex;padding:3px;border-radius:10px;background:#e3e6e7;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:8px;font-size:12.5px;color:#4a5056;transition:background .2s,color .2s,box-shadow .2s}
.seg button[aria-pressed=true]{background:#fff;color:var(--text);box-shadow:0 1px 2px #0000001a,0 0 0 .5px #00000012}
.tools{display:flex;gap:8px;align-items:center}
.btn{white-space:nowrap;border:1px solid #cfd3d6;background:#fff;border-radius:9px;padding:7px 13px;font-size:12.5px;transition:transform .12s,background .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:#45624f}
.btn:disabled{opacity:.45;cursor:default}
.caption{font-size:11.5px;color:var(--faint);margin:12px 2px 0}

.win{background:#fbfbfa;border-radius:13px;box-shadow:0 0 0 .5px #00000018,0 1px 3px #15263820,0 22px 50px -24px #15263860;overflow:hidden}
.win-t{height:40px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #e3e5e6;font-size:12px;color:#4c5157;background:#f3f4f4}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#e0e3e5;display:block}
.win-t .count{margin-left:auto;color:var(--faint);font-size:11px}

table.sheet{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.sheet th{text-align:left;font-weight:600;color:#6a7077;font-size:11px;letter-spacing:.03em;padding:8px 12px;border-bottom:1px solid #e6e8e9;background:#fafafa;position:sticky;top:0}
.sheet td{padding:7px 12px;border-bottom:1px solid #f0f1f1;transition:background .25s}
.sheet tr.scan td{background:#eef3f0}
.sheet tr.bad td{background:var(--warn-soft)}
.sheet tr.bad td.cell-bad{color:var(--warn);font-weight:650}
.sheet tr.ok td:last-child::after{content:'✓';color:var(--accent);margin-left:6px}
.sheet tr.marked td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.sheet tr.hit td.cell-hit{background:#fff1b8}
.flag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:99px;background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.flag.ok{background:var(--accent-soft);color:var(--accent)}
.flag.mid{background:var(--amber-soft);color:var(--amber)}

/* the details */
.details{padding:64px 0 18px}
.details h2,.more h2{margin:0 0 6px;line-height:1.15;font-size:30px;letter-spacing:-.03em;font-weight:650}
.details .sub,.more .sub{margin:0 0 28px;color:var(--muted);font-size:16px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.card{background:var(--panel);border:1px solid var(--hair);border-radius:16px;padding:20px 20px 18px}
.card .n{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.card h3{margin:8px 0 6px;font-size:16px;letter-spacing:-.01em}
.card p{margin:0;font-size:14px;line-height:1.55;color:#4e535a}
.big{font-size:38px;letter-spacing:-.04em;font-weight:650;line-height:1;margin:6px 0 4px}
.more{padding:46px 0 10px}
.list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.list li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--hair);font-size:15px}
.list li b{font-weight:600}
.list li span{color:#4e535a}
.honest{margin:22px 0 0;font-size:13.5px;color:var(--muted)}

.foot{margin-top:56px;border-top:1px solid var(--hair);padding:22px 0 46px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.foot a{color:var(--text)}
.foot > a:first-child{font-family:'Klee One',ui-rounded,system-ui,sans-serif;font-size:15.5px}
.foot a:hover{text-decoration:underline;text-underline-offset:3px}

/* arriving from the folder: the page lifts in */
.rise{animation:rise .7s var(--ease) both}
.rise.d1{animation-delay:.06s}.rise.d2{animation-delay:.14s}.rise.d3{animation-delay:.22s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.leaving body{transition:opacity .3s ease;opacity:0}
html.leaving.to-dark{transition:background .3s ease;background:#1c2233}

@media (max-width:900px){
  .wrap{width:calc(100% - 32px)}
  .mast{height:auto;padding:12px 0 0;flex-direction:column;align-items:flex-start;gap:12px}
  .mast nav{order:-1;font-size:15px;gap:20px}
  .brand{align-self:flex-start}
  .intro{grid-template-columns:1fr;gap:16px;padding:32px 0 22px}
  .grid4{grid-template-columns:1fr 1fr}
  .list li{grid-template-columns:1fr;gap:4px}
  .bar{flex-direction:column;align-items:stretch}
  .tools{justify-content:space-between;flex-wrap:wrap}
}
@media (max-width:560px){ .grid4{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .rise{animation:none} *,::before,::after{transition-duration:0s !important;transition-delay:0s !important} }   /* 0s, not .01ms: a tiny transition still delays visibility, and .focus() then fails */