/* SDC SNEAKERZ
   One typeface. One accent — and it only ever marks a miss. */

:root{
  --paper:#FAF9F6;
  --ink:#1A1A17;
  --grey:#6B6B65;
  --rule:#E2E0D9;
  --panel:#F2F1EC;
  --miss:#BF2F27;          /* used for exactly one thing */
  --measure:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.num{font-variant-numeric:tabular-nums;letter-spacing:-0.01em}

a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--rule)}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.narrow{max-width:var(--measure)}

/* masthead */
header.mast{border-bottom:1px solid var(--rule);background:var(--paper)}
.mast-in{display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:18px 0;flex-wrap:wrap}
.wordmark{font-weight:600;font-size:17px;letter-spacing:0.04em;
  text-transform:uppercase;text-decoration:none}
.wordmark:hover{text-decoration:none}
nav.mast-nav{display:flex;gap:24px;font-size:15px;align-items:center}
nav.mast-nav a{text-decoration:none;color:var(--grey)}
nav.mast-nav a:hover,nav.mast-nav a[aria-current]{color:var(--ink)}
nav.mast-nav a.yt{color:var(--ink);font-weight:600}

/* hero */
.hero{padding:72px 0 56px;border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(34px,5.6vw,54px);line-height:1.06;margin:0 0 20px;
  font-weight:600;letter-spacing:-0.025em;max-width:17ch}
.hero .lede{font-size:20px;max-width:52ch;margin:0;color:#37372F}
.kicker{font-size:14px;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--grey);margin:0 0 14px;font-weight:600}

/* sections */
section{padding:52px 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:none}
h2{font-size:27px;font-weight:600;letter-spacing:-0.018em;margin:0 0 10px;line-height:1.2}
h3{font-size:19px;font-weight:600;letter-spacing:-0.01em;margin:30px 0 6px}
p{margin:0 0 16px;max-width:var(--measure)}
.sec-intro{color:#4A4A43;margin-bottom:30px}

/* scorecard */
.record{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.stat{background:var(--paper);padding:18px}
.stat-lab{font-size:13px;letter-spacing:0.07em;text-transform:uppercase;
  color:var(--grey);margin:0 0 8px;font-weight:600}
.stat-val{font-size:33px;font-weight:600;line-height:1;margin:0;font-variant-numeric:tabular-nums}
.stat-sub{font-size:14px;color:var(--grey);margin:8px 0 0;line-height:1.45}

/* the call band */
.call{margin:0 0 26px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.call:last-child{border-bottom:none}
.call-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:8px}
.call-item{font-size:17px;font-weight:600;letter-spacing:-0.01em}
.call-verdict{font-size:14px;font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.call-verdict.miss{color:var(--miss)}          /* the one place colour lives */
.band{position:relative;height:42px;margin:2px 0 6px}
.band-rail{position:absolute;top:20px;left:0;right:0;height:1px;background:var(--rule)}
.band-range{position:absolute;top:14px;height:13px;background:var(--panel);
  border-left:2px solid var(--ink);border-right:2px solid var(--ink)}
.band-close{position:absolute;top:6px;width:2px;height:29px;background:var(--ink)}
.band-close.out{background:var(--miss)}
.band-close::after{content:attr(data-label);position:absolute;top:-3px;left:7px;
  white-space:nowrap;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.band-close.out::after{color:var(--miss)}
.band-close.flip::after{left:auto;right:7px}
.band-ends{display:flex;justify-content:space-between;font-size:13.5px;
  color:var(--grey);font-variant-numeric:tabular-nums}
.call-note{font-size:16px;color:#4A4A43;margin:8px 0 0;max-width:60ch}

/* tables */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
th{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--grey);text-align:left;padding:0 14px 8px 0;
  border-bottom:1px solid var(--ink);white-space:nowrap}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top;
  font-variant-numeric:tabular-nums}
th.r,td.r{text-align:right;padding-right:0}
tr:last-child td{border-bottom:1px solid var(--ink)}
caption{caption-side:bottom;text-align:left;font-size:14px;color:var(--grey);padding-top:10px}
td.miss{color:var(--miss);font-weight:600}

/* sale / call index rows */
.grp{margin:0 0 34px}
.grp-h{font-size:14px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--grey);font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--ink);margin:0 0 2px}
.row{display:block;text-decoration:none;padding:16px 0;border-bottom:1px solid var(--rule)}
.row:hover{text-decoration:none;background:var(--panel)}
.row-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.row-name{font-size:17px;font-weight:600;letter-spacing:-0.01em}
.row:hover .row-name{text-decoration:underline;text-underline-offset:4px}
.row-meta{font-size:14px;color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.row-line{font-size:15.5px;color:#4A4A43;margin:5px 0 0;max-width:64ch}
.row.open .row-meta::before{content:"Open · ";}
.row.pending .row-name{color:var(--grey)}

/* callout */
.note{border-left:2px solid var(--ink);padding:2px 0 2px 18px;margin:24px 0;max-width:60ch}
.note p:last-child{margin-bottom:0}

/* footer */
footer{padding:44px 0 64px;font-size:15px;color:var(--grey);border-top:1px solid var(--rule)}
footer p{margin:0 0 8px;max-width:64ch}
footer a{color:var(--grey)}

@media (max-width:640px){
  body{font-size:17px}
  .hero{padding:48px 0 40px}
  .hero .lede{font-size:18px}
  section{padding:40px 0}
  nav.mast-nav{gap:16px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}