/* Throughline — brand site. Semantic colors carry the publication's meaning:
   stage, novelty and correction are the product, so they get the hues. */
:root {
  --paper:#F7F8FA; --paper-sunk:#EDF0F5; --ink:#16202E; --ink-soft:#4A5667;
  --rule:#D3D9E2; --rule-strong:#B6BFCC;
  --match:#1F6F4A; --withdrawn:#A8321E; --prelim:#8A4FBF; --ident:#1C5C8C;
  --radius:3px;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#111821; --paper-sunk:#0C1219; --ink:#E6EBF2; --ink-soft:#97A3B4;
    --rule:#263141; --rule-strong:#36445A;
    --match:#5FBF8C; --withdrawn:#E8846C; --prelim:#BE92E8; --ident:#6FAEDC;
  }
}
:root[data-theme="dark"]{
  --paper:#111821; --paper-sunk:#0C1219; --ink:#E6EBF2; --ink-soft:#97A3B4;
  --rule:#263141; --rule-strong:#36445A;
  --match:#5FBF8C; --withdrawn:#E8846C; --prelim:#BE92E8; --ident:#6FAEDC;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:74rem;margin:0 auto;padding:0 1rem}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ident);outline-offset:3px;border-radius:2px}

/* masthead */
.masthead{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:1.75rem 0 1.5rem;border-bottom:1px solid var(--rule)}
.mark{display:inline-flex;align-items:center;gap:.55rem;font-size:1.1rem;letter-spacing:-.02em;text-decoration:none;font-weight:400;color:var(--ink-soft)}
.mark img{display:block;width:21px;height:21px}
.mark b{font-weight:600;color:var(--ink)}
.masthead nav{margin-left:auto;display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.9rem}
.masthead nav a{color:var(--ink-soft);text-decoration:none}
.masthead nav a:hover{color:var(--ink)}

/* hero */
.hero{padding:4rem 0 1rem}
.hero h1{margin:0 0 1.25rem;font-size:clamp(2.2rem,5.2vw,3.7rem);line-height:1.05;
  letter-spacing:-.035em;font-weight:600;max-width:32ch}
.lede{margin:0;font-size:1.2rem;line-height:1.55;color:var(--ink-soft);max-width:56ch}
.lede b{color:var(--ink);font-weight:500}
.status{margin:1.5rem 0 0;padding:.7rem 0 .7rem .95rem;border-left:3px solid var(--prelim);
  font-size:.95rem;line-height:1.5;color:var(--ink-soft);max-width:60ch}
.status b{color:var(--ink);font-weight:500}
.cmp-wrap{overflow-x:auto;margin-top:1.5rem;border:1px solid var(--rule)}
.cmp{width:100%;min-width:40rem;border-collapse:collapse;font-size:.92rem;text-align:left}
.cmp th,.cmp td{padding:.75rem .9rem;border-bottom:1px solid var(--rule);vertical-align:top}
.cmp thead th{background:var(--paper-sunk);font-weight:500;font-size:.8rem;color:var(--ink-soft);
  font-family:var(--mono);border-bottom:1px solid var(--rule-strong)}
.cmp tbody th{font-weight:500;color:var(--ink);width:12rem}
.cmp tbody td{color:var(--ink-soft)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tr.is-us th,.cmp tr.is-us td{background:var(--paper-sunk)}
.cmp tr.is-us th{border-left:3px solid var(--match);padding-left:calc(.9rem - 3px)}
.cmp .sub{display:block;font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);font-weight:400}
footer .upd{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);margin-top:1rem}

/* the match — the one bold object on the page */
.match{margin:3rem 0 1rem;background:var(--paper-sunk);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden}
.match-head{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline;
  padding:.7rem 1.1rem;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;color:var(--ink-soft)}
.match-head .ex{margin-left:auto;color:var(--ink-soft)}
.article{padding:1.4rem 1.1rem;border-bottom:1px solid var(--rule)}
.article .src{font-family:var(--mono);font-size:.75rem;color:var(--ident);margin:0 0 .4rem}
.article h2{margin:0;font-size:1.3rem;line-height:1.3;font-weight:500;letter-spacing:-.015em;max-width:46ch}
.arrow{padding:.55rem 1.1rem;border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);background:var(--paper)}
.rows{margin:0;padding:0;list-style:none}
.rows li{padding:1rem 1.1rem;border-bottom:1px solid var(--rule);border-left:3px solid var(--match)}
.rows li:last-child{border-bottom:0}
.rows li.is-prelim{border-left-color:var(--prelim)}
.rows li.is-withdrawn{border-left-color:var(--withdrawn)}
.rows .q{margin:0 0 .45rem;font-weight:500;line-height:1.35}
.rows .why{margin:0 0 .6rem;font-size:.95rem;color:var(--ink-soft);max-width:62ch}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem}
.chips span{padding:.15rem .45rem;border:1px solid var(--rule-strong);border-radius:2px;color:var(--ink-soft)}
.chips .c-stage{border-color:var(--prelim);color:var(--prelim)}
.chips .c-done{border-color:var(--match);color:var(--match)}
.chips .c-gone{border-color:var(--withdrawn);color:var(--withdrawn)}
@media (prefers-reduced-motion:no-preference){
  .rows li{animation:arrive .5s ease-out both}
  .rows li:nth-child(1){animation-delay:.25s}
  .rows li:nth-child(2){animation-delay:.45s}
  .rows li:nth-child(3){animation-delay:.65s}
  @keyframes arrive{from{opacity:0;transform:translateY(7px)}}
}

/* sections */
.band{padding:3.25rem 0;border-top:1px solid var(--rule)}
.band h2{margin:0 0 .85rem;font-size:1.6rem;letter-spacing:-.02em;font-weight:600;max-width:34ch}
.band > p{margin:0 0 1rem;max-width:64ch;color:var(--ink-soft)}
.band > p strong{color:var(--ink);font-weight:500}

/* definition grid */
.defs{margin:1.5rem 0 0;display:grid;grid-template-columns:minmax(0,14rem) 1fr;
  gap:.1rem 1.5rem;align-items:baseline}
.defs dt{font-family:var(--mono);font-size:.82rem;padding:.65rem 0 .1rem;color:var(--ident)}
.defs dd{margin:0;padding:.65rem 0 .1rem;color:var(--ink-soft);font-size:.97rem;
  border-top:1px solid var(--rule)}
.defs dt{border-top:1px solid var(--rule)}
.defs dt:first-of-type,.defs dd:first-of-type{border-top:0}
.defs .d-prelim dt{color:var(--prelim)}
.defs .d-match dt{color:var(--match)}
.defs .d-gone dt{color:var(--withdrawn)}

/* the four coverage states */
.states{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius)}
.states li{background:var(--paper);padding:1rem 1.1rem}
.states b{display:block;font-family:var(--mono);font-size:.8rem;font-weight:500;
  color:var(--ident);margin-bottom:.25rem}
.states span{color:var(--ink-soft);font-size:.95rem}

/* withheld list */
.withheld{margin:1.4rem 0 0;padding:1.1rem 1.25rem;background:var(--paper-sunk);
  border-left:3px solid var(--ink);border-radius:var(--radius)}
.withheld p{margin:0 0 .6rem;max-width:62ch}
.withheld p:last-child{margin-bottom:0}
.withheld code{font-family:var(--mono);font-size:.85em;color:var(--withdrawn)}

/* cta */
.row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem}
.btn{display:inline-block;padding:.62rem 1.15rem;background:var(--ink);color:var(--paper);
  text-decoration:none;border-radius:var(--radius);font-size:.95rem;font-weight:500;
  border:1px solid var(--ink);transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--ink)}
.row .aside{font-size:.9rem;color:var(--ink-soft)}

footer{border-top:1px solid var(--rule);padding:2rem 0 3rem;font-size:.88rem;color:var(--ink-soft)}
footer p{margin:0 0 .5rem;max-width:64ch}
footer a{color:var(--ink-soft)}

@media (max-width:40rem){
  body{font-size:16px}
  .hero{padding:2.75rem 0 .5rem}
  .defs{grid-template-columns:1fr;gap:0}
  .defs dd{border-top:0;padding-top:.15rem}
  .defs dt{padding-bottom:0}
  .defs dd:first-of-type{border-top:0}
}