/* Marksweep. An evidence sheet: paper, ink, one hairline rule, numerals that line up, red only where it means something. */
:root{
  --paper:#F4F1E8;--sheet:#FBF9F3;--ink:#17150F;--ink-2:#45413A;--ink-3:#726C5F;--rule:#D6D0BF;--rule-soft:#E6E1D3;
  --navy:#1E2D49;--navy-ink:#15213A;--on-navy:#FFFFFF;
  --red:#A1201F;--red-bg:#F5E1DE;--amber:#8A5A00;--amber-bg:#F4E8CE;--green:#1F6B45;--green-bg:#DCEBE1;
  --sans:"IBM Plex Sans",system-ui,sans-serif;--serif:"Newsreader",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);--max:1180px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#141310;--sheet:#1B1915;--ink:#EFEAE0;--ink-2:#CBC4B5;--ink-3:#98917F;--rule:#36322A;--rule-soft:#282520;--navy:#B9C7E3;--navy-ink:#D4DEF2;--on-navy:#15213A;--red:#E58078;--red-bg:#3A1E1C;--amber:#E2B65F;--amber-bg:#3A2E14;--green:#82C8A0;--green-bg:#17301F}}
:root[data-theme=dark]{--paper:#141310;--sheet:#1B1915;--ink:#EFEAE0;--ink-2:#CBC4B5;--ink-3:#98917F;--rule:#36322A;--rule-soft:#282520;--navy:#B9C7E3;--navy-ink:#D4DEF2;--on-navy:#15213A;--red:#E58078;--red-bg:#3A1E1C;--amber:#E2B65F;--amber-bg:#3A2E14;--green:#82C8A0;--green-bg:#17301F}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scrollbar-color:var(--rule) var(--paper);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans)}
::selection{background:var(--navy);color:var(--on-navy)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--navy-ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.meta{font:400 12.5px/1.4 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.note{font-size:13.5px;color:var(--ink-3);line-height:1.5;margin:0}
.err{color:var(--red)}

/* masthead */
header.top{position:sticky;top:0;z-index:5;background:color-mix(in oklab,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter)}
.brand{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav a{font-size:14px;color:var(--ink-2);text-decoration:none}.nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media (max-width:720px){.nav .meta{display:none}.nav{gap:14px}}

/* hero */
.hero{border-bottom:1px solid var(--rule);background:linear-gradient(180deg,var(--sheet),var(--paper))}
.hero-grid{display:grid;gap:40px;padding-top:56px;padding-bottom:56px;align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;padding-top:72px;padding-bottom:72px}}
.over{font:500 13px/1.4 var(--sans);color:var(--ink-3);margin:0 0 14px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,54px);line-height:1.08;letter-spacing:-.018em;margin:0 0 18px;text-wrap:balance}
.lead{font-size:17.5px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin:0 0 26px;text-wrap:pretty}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.btn,button{font:600 15px/1 var(--sans);background:var(--navy);color:var(--on-navy);border:0;border-radius:3px;padding:13px 20px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .15s ease,transform .08s ease}
.btn:hover,button:hover{background:var(--navy-ink);color:var(--on-navy)}button:active,.btn:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:progress}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule);padding:12px 18px}.btn.ghost:hover{border-color:var(--ink-3);background:var(--sheet);color:var(--ink)}
.facts{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--ink-3)}
.facts b{color:var(--ink);font-weight:600}
.hero-fig{margin:0}
.shot{position:relative;line-height:0;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--sheet);box-shadow:0 18px 40px -24px rgba(23,21,15,.45)}
.shot img{width:100%;display:block}
figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.5}
.bands{display:inline-flex;gap:6px;flex-wrap:wrap}

/* boxes on photos */
.box{position:absolute;border:2px solid #fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.25);text-decoration:none;animation:box-in .5s cubic-bezier(.2,.7,.2,1) both}
.box i{position:absolute;left:-2px;top:-24px;font:500 11.5px/1 var(--mono);color:#fff;background:rgba(23,21,15,.86);padding:5px 7px;border-radius:2px;white-space:nowrap;letter-spacing:.02em;font-variant-numeric:tabular-nums;font-style:normal}
.box.red{border-color:#FF6B63}.box.amber{border-color:#FFC857}.box.green{border-color:#7BDE9F}
a.box:hover{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 2px 12px rgba(0,0,0,.4)}
.box:nth-child(2){animation-delay:.08s}.box:nth-child(3){animation-delay:.16s}.box:nth-child(4){animation-delay:.24s}.box:nth-child(5){animation-delay:.32s}.box:nth-child(6){animation-delay:.4s}.box:nth-child(7){animation-delay:.48s}
@keyframes box-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.box{animation:none}}

/* bands and dots */
.band{display:inline-block;font:500 11.5px/1 var(--mono);padding:5px 8px;border-radius:2px;color:var(--ink-2);background:var(--rule-soft);letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.band.red{background:var(--red-bg);color:var(--red)}.band.amber{background:var(--amber-bg);color:var(--amber)}.band.green{background:var(--green-bg);color:var(--green)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rule);margin-right:6px;vertical-align:middle}
.dot.red{background:var(--red)}.dot.amber{background:var(--amber)}.dot.green{background:var(--green)}

/* sections */
section{padding:56px 0 8px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15;letter-spacing:-.012em;margin:0}
h3,h2.fh{font:600 14px/1.3 var(--sans);color:var(--ink);margin:0 0 10px}
h2.fh{color:var(--ink-3);font-size:12.5px;margin-bottom:8px}

/* runner */
.runner{display:grid;gap:28px;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:28px}
@media (min-width:900px){.runner{grid-template-columns:1.25fr 1fr .9fr;gap:36px}}
.step-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font:600 12px/1 var(--mono)}
.demos{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.demo{border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:var(--paper);cursor:pointer;text-align:left;padding:0;color:var(--ink);font:inherit;transition:border-color .15s ease,box-shadow .15s ease}
.demo:hover{border-color:var(--ink-3);background:var(--paper)}
.demo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.demo div{padding:8px 10px 9px;font-size:13px;line-height:1.35;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.demo .mini{font:400 11px/1 var(--mono);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.demo .mini .dot{width:7px;height:7px;margin-right:3px}
.demo.sel{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.drop{display:block;border:1px dashed var(--rule);border-radius:3px;padding:14px;text-align:center;color:var(--ink-3);cursor:pointer;margin-top:12px;font-size:13.5px;transition:border-color .15s ease,color .15s ease}
.drop:hover{border-color:var(--ink-3);color:var(--ink-2)}.drop.has{border-style:solid;color:var(--ink)}
.drop img{max-width:100%;max-height:220px;border-radius:3px;display:block;margin:0 auto 8px}
label{display:block;font:500 12.5px/1.3 var(--sans);color:var(--ink-3);margin:14px 0 5px}
input[type=text],select,textarea{width:100%;padding:9px 11px;border:1px solid var(--rule);border-radius:3px;background:var(--paper);color:var(--ink);font:15px/1.4 var(--sans);transition:border-color .15s ease}
input[type=text]:hover,select:hover,textarea:hover{border-color:var(--ink-3)}
input[type=text]:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px color-mix(in oklab,var(--navy) 18%,transparent)}
textarea{min-height:76px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.marks{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.marks figure{margin:0;width:78px;text-align:center}
.marks img{width:78px;height:60px;object-fit:contain;background:#fff;border:1px solid var(--rule);border-radius:2px;padding:4px}
.marks figcaption{display:block;font:400 10px/1.3 var(--mono);color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.gocol button{width:100%}
.log{font:12.5px/1.65 var(--mono);white-space:pre-wrap;background:var(--paper);border:1px solid var(--rule);border-radius:3px;padding:12px 14px;min-height:150px;max-height:360px;overflow:auto;color:var(--ink-2);margin-top:14px;font-variant-numeric:tabular-nums}
.log .m{color:var(--navy);font-weight:500}.log a{font-weight:500}

/* records list */
.reclist{border-top:1px solid var(--rule)}
.rec{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:var(--ink);font-size:14.5px}
.rec:hover .rec-client{text-decoration:underline;text-underline-offset:3px}
.rec-client{font-weight:600}.rec-meta{color:var(--ink-3)}.rec-id{font:400 12px/1 var(--mono);color:var(--ink-3)}
@media (max-width:720px){.rec{grid-template-columns:1fr;gap:6px}.rec-id{display:none}}

/* how */
.how{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
@media (min-width:900px){.how{grid-template-columns:repeat(3,1fr)}.how li+li{border-left:1px solid var(--rule-soft);padding-left:28px}.how li{padding-right:28px}}
.how li{padding-top:22px;padding-bottom:26px;border-bottom:1px solid var(--rule-soft)}
.how h3{font:500 20px/1.25 var(--serif);margin:10px 0 8px}
.how p{margin:0;color:var(--ink-2);font-size:15px;max-width:52ch}
.tag{display:inline-block;font:500 11.5px/1 var(--mono);color:var(--navy);border:1px solid color-mix(in oklab,var(--navy) 35%,transparent);padding:5px 8px;border-radius:2px;letter-spacing:.02em}
.fine{font-size:13.5px;color:var(--ink-3);max-width:80ch;line-height:1.55;margin:22px 0 0}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-3);font-size:13px;margin:64px auto 40px;border-top:1px solid var(--rule);padding-top:18px;line-height:1.55}

/* record page */
.record{padding-top:28px}
.rec-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:22px}
.back{font-size:14px;text-decoration:none}
.record h1{font-size:clamp(28px,3.6vw,42px);max-width:none}
.h1-sub{display:block;font-size:.62em;color:var(--ink-2);margin-top:8px;font-weight:400}
.record .lead{font-size:15.5px;max-width:80ch;margin-bottom:22px}
.photo{position:relative;line-height:0;border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:var(--sheet)}
.photo img{width:100%;display:block}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin:12px 0 26px;align-items:center}
.recmeta{display:grid;gap:22px;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:22px 24px;margin-bottom:40px}
@media (min-width:820px){.recmeta{grid-template-columns:1.3fr .9fr 1.2fr}}
.kv{font:400 12.5px/1.65 var(--mono);color:var(--ink-3);word-break:break-all;font-variant-numeric:tabular-nums}
.kv b{color:var(--ink-2);font-weight:500}
.record h2{margin:44px 0 10px;padding-top:0}
.el{display:grid;gap:24px;grid-template-columns:150px minmax(0,1fr);align-items:start;padding:26px 0;border-top:1px solid var(--rule-soft)}
.el:target{background:linear-gradient(90deg,color-mix(in oklab,var(--navy) 7%,transparent),transparent 60%)}
.el-crop img.crop{width:150px;height:150px;object-fit:contain;background:#fff;border:1px solid var(--rule);border-radius:3px;padding:4px}
.el-crop .kv{margin-top:8px;word-break:normal;overflow-wrap:anywhere}
.el-hd{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.score{font-family:var(--serif);font-size:38px;line-height:1;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.el-n{font-weight:600}.reads{font:400 12.5px/1 var(--mono);color:var(--ink-3)}
.seen{color:var(--ink-2);margin:8px 0 8px;max-width:72ch}
.narr{margin:8px 0 14px;max-width:72ch}
.cands{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 8px}
.mk{display:inline-flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;font:400 10px/1 var(--mono);color:var(--ink-3)}
.mk img{width:64px;height:48px;object-fit:contain;background:#fff;border:1px solid var(--rule);border-radius:2px;padding:3px}
.qs{display:grid;gap:0;border-top:1px solid var(--rule-soft);margin-top:6px}
.q{display:grid;grid-template-columns:150px 36px 110px minmax(0,1fr);gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:13.5px}
.q-l{color:var(--ink-2)}.q-n{font:500 13px/1 var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.q-bar{height:5px;background:var(--rule-soft);border-radius:3px;overflow:hidden}.q-bar i{display:block;height:100%;background:var(--navy);border-radius:3px}
.q-r{color:var(--ink-3);line-height:1.45}
.q.na .q-n,.q.na .q-l{color:var(--ink-3)}
@media (max-width:720px){.el{grid-template-columns:1fr}.el-crop img.crop{width:100%;height:auto;max-height:240px}.q{grid-template-columns:1fr 36px;row-gap:4px}.q-bar{grid-column:1/3}.q-r{grid-column:1/3}}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
td,th{padding:9px 10px;border-bottom:1px solid var(--rule-soft);vertical-align:top;text-align:left}
th{font:500 11.5px/1.3 var(--sans);color:var(--ink-3);border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2)}