/* The $500 Ladder — broadsheet stylesheet
   Display: Playfair Display · Labels: Libre Franklin · Body: Source Serif 4 · Data: IBM Plex Mono */

:root{
  --paper:#ffffff;
  --paper-2:#f6f4f1;
  --ink:#121212;
  --ink-2:#3d3d3d;
  --muted:#6e6e6e;
  --rule:#d6d3ce;
  --rule-hard:#121212;
  --accent:#9d2215;
  --accent-2:#1a4a7a;
  --band:#121212;
  --band-ink:#f2efea;
  --band-muted:#b4aea6;
  --mark:#fbf1c9;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --label:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --shell:1180px;
  --column:44rem;
  /* Keep form controls and scrollbars light too, even on a dark-set OS. */
  color-scheme: light;
}

/* Light is the default, whatever the visitor's OS is set to. Dark applies only
   when they choose it with the toggle, which sets data-theme="dark". */
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#101010;
  --paper-2:#191919;
  --ink:#ececec;
  --ink-2:#c9c9c9;
  --muted:#9a9a9a;
  --rule:#2e2e2e;
  --rule-hard:#e6e6e6;
  --accent:#f2705f;
  --accent-2:#7fb3e0;
  --band:#000000;
  --band-ink:#f2efea;
  --band-muted:#a9a29a;
  --mark:#3a3418;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:inherit}
p{margin:0 0 1.05em}
h1,h2,h3,h4{margin:0}

.shell{max-width:var(--shell);margin:0 auto;padding-inline:20px}

/* utility bar */
.util{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-family:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  padding:11px 0 10px;
}
.util a{color:var(--muted);text-decoration:none}
.util a:hover{color:var(--accent)}
.util-left,.util-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.util .sep{opacity:.4}
.util .live{
  color:var(--accent);
  border:1px solid currentColor;
  border-radius:2px;
  padding:1px 6px;
  letter-spacing:.14em;
  font-size:10px;
}
.tbtn{
  font:inherit;
  color:var(--muted);
  background:none;
  border:1px solid var(--rule);
  border-radius:2px;
  padding:3px 9px;
  cursor:pointer;
  letter-spacing:.11em;
}
.tbtn:hover{color:var(--ink);border-color:var(--ink)}

/* masthead */
.masthead{
  border-top:1px solid var(--rule-hard);
  border-bottom:1px solid var(--rule-hard);
  padding:26px 0 22px;
  text-align:center;
}
.masthead.compact{padding:16px 0 14px}
.wordmark{
  display:block;
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(42px,8.4vw,86px);
  line-height:.92;
  letter-spacing:-.022em;
  color:var(--ink);
  text-decoration:none;
  text-wrap:balance;
}
.masthead.compact .wordmark{font-size:clamp(26px,4.4vw,38px)}
.creed{
  font-family:var(--label);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin:14px auto 0;
  max-width:60ch;
}
.masthead.compact .creed{margin-top:8px;font-size:10px}
.standfirst{
  font-family:var(--body);
  font-style:italic;
  font-size:17px;
  color:var(--ink-2);
  max-width:62ch;
  margin:12px auto 0;
  line-height:1.45;
}

/* section nav */
.strip{
  border-bottom:3px double var(--rule-hard);
  margin-bottom:26px;
}
.strip nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 26px;
  padding:11px 0 10px;
}
.strip a{
  font-family:var(--label);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  padding:2px 0;
  border-bottom:2px solid transparent;
}
.strip a:hover,.strip a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* front-page grid */
.front{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:34px;
}
@media (min-width:980px){
  .front{grid-template-columns:minmax(0,1fr) 316px;gap:0;align-items:start}
  .front .well{padding-right:38px;border-right:1px solid var(--rule)}
  .front .rail{padding-left:34px;position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;scrollbar-width:thin}
}

/* lead story */
.kicker{
  font-family:var(--label);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 12px;
}
.lead h1,.article h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px,3.9vw,47px);
  line-height:1.06;
  letter-spacing:-.014em;
  text-wrap:balance;
  margin:0 0 15px;
}
.article h1{font-size:clamp(28px,3.4vw,41px)}
.deck{
  font-size:18.5px;
  line-height:1.5;
  color:var(--ink-2);
  max-width:62ch;
  margin:0 0 18px;
}
.deck strong{font-weight:600;color:var(--ink)}
.byline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px;
  font-family:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-bottom:22px;
}
.byline .who{color:var(--ink)}

.prose{font-size:18.5px;line-height:1.62}
.prose p{max-width:66ch}
.prose p:first-of-type::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:800;
  font-size:3.45em;
  line-height:.82;
  padding:.06em .1em 0 0;
  color:var(--ink);
}
.lead .prose{columns:2;column-gap:38px}
.lead .prose p{max-width:none}
@media (max-width:880px){.lead .prose{columns:1}}
.prose strong,.ev strong,ol.ladder strong{font-weight:600;background:var(--mark);padding:0 2px}
.prose a,.ev a,.sources a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px}
.prose a:hover,.ev a:hover,.sources a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* the pull band (signal claim) */
.band{
  background:var(--band);
  color:var(--band-ink);
  padding:30px 28px 28px;
  margin:0 0 26px;
}
.band .tag{
  display:inline-block;
  font-family:var(--label);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
  background:var(--accent);
  padding:3px 9px;
  margin-bottom:15px;
}
.band .claim{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(21px,2.7vw,29px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 14px;
  text-wrap:balance;
}
.band p{color:var(--band-muted);margin:0;max-width:62ch;font-size:17px}
.band strong{color:#fff;font-weight:600;background:none}
.band a{color:var(--band-ink)}

/* section headers */
.sec{margin-top:44px}
.sec-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  border-top:2px solid var(--rule-hard);
  padding-top:9px;
  margin-bottom:22px;
}
.sec-head h2{
  font-family:var(--label);
  font-size:13px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.sec-head .note{
  font-family:var(--label);
  font-size:11px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-left:auto;
}

/* evidence */
.ev-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:860px){
  .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:38px}
}
.ev{
  border-top:1px solid var(--rule);
  padding:18px 0 20px;
}
.ev-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  font-family:var(--label);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:9px;
}
.ev-meta a{text-decoration:none;border-bottom:1px solid var(--rule)}
.chip{
  border:1px solid currentColor;
  border-radius:2px;
  padding:2px 7px;
  font-size:9.5px;
  letter-spacing:.14em;
}
.chip.verified{color:var(--accent-2)}
.chip.reported{color:var(--muted)}
.chip.derived{color:var(--accent)}
.ev h3{
  font-family:var(--display);
  font-weight:700;
  font-size:21px;
  line-height:1.22;
  letter-spacing:-.008em;
  margin:0 0 8px;
  text-wrap:balance;
}
.ev p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink-2)}
.figure{
  font-family:var(--mono);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  letter-spacing:-.01em;
}
.ev-grid .ev.derived-row{grid-column:1/-1;background:var(--paper-2);padding:20px 22px;border-top:2px solid var(--rule-hard)}

/* the ladder */
ol.ladder{list-style:none;counter-reset:rung;margin:0;padding:0}
ol.ladder li{
  counter-increment:rung;
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:0 20px;
  padding:20px 0;
  border-top:1px solid var(--rule);
}
ol.ladder li:last-child{border-bottom:1px solid var(--rule)}
ol.ladder li::before{
  content:counter(rung,decimal-leading-zero);
  font-family:var(--display);
  font-weight:800;
  font-size:34px;
  line-height:1;
  color:var(--rule);
  padding-top:2px;
}
ol.ladder h3{
  font-family:var(--display);
  font-weight:700;
  font-size:21px;
  line-height:1.24;
  margin:0 0 7px;
  text-wrap:balance;
}
ol.ladder p{margin:0;font-size:16.5px;color:var(--ink-2)}
ol.ladder .math{
  display:inline-block;
  font-family:var(--mono);
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  border:1px solid var(--rule);
  padding:4px 9px;
  margin-top:11px;
}

/* thread */
.posts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:860px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.post{background:var(--paper-2);border:1px solid var(--rule);padding:15px 17px 16px}
.post-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-family:var(--label);
  font-size:10px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:10px;
}
.post pre{
  font-family:var(--mono);
  font-size:13.5px;
  line-height:1.6;
  white-space:pre-wrap;
  word-wrap:break-word;
  margin:0;
  color:var(--ink);
}
.count{font-variant-numeric:tabular-nums}
.count.over{color:var(--accent);font-weight:700}
.copy{
  font-family:var(--label);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:none;
  border:1px solid var(--rule);
  color:var(--muted);
  padding:3px 9px;
  cursor:pointer;
}
.copy:hover{border-color:var(--accent);color:var(--accent)}

/* rail */
.rail-block{margin-bottom:30px}
.rail-head{
  font-family:var(--label);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  border-top:2px solid var(--rule-hard);
  padding-top:8px;
  margin-bottom:14px;
}
.rail .math-card{background:var(--paper-2);padding:16px 17px;border:1px solid var(--rule)}
.rail .math-card h3{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  line-height:1.24;
  margin:0 0 8px;
}
.rail .math-card p{font-size:15.5px;line-height:1.5;color:var(--ink-2);margin:0}
.rail .math-card .ev-meta{margin-bottom:8px}

.ed-list{list-style:none;margin:0;padding:0}
.ed-list li{border-top:1px solid var(--rule);padding:12px 0}
.ed-list li:first-child{border-top:none;padding-top:0}
.ed-list a{text-decoration:none;display:block}
.ed-list a:hover h4{color:var(--accent)}
.ed-list .when{
  display:flex;
  gap:9px;
  font-family:var(--label);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
}
.ed-list h4{
  font-family:var(--display);
  font-weight:700;
  font-size:16.5px;
  line-height:1.26;
  margin:0;
  color:var(--ink);
}
.ed-list p{font-size:14.5px;line-height:1.45;color:var(--muted);margin:5px 0 0}

/* sources */
.sources{margin-top:44px}
.sources ol{list-style:none;margin:0;padding:0;counter-reset:src}
.sources li{
  counter-increment:src;
  border-top:1px solid var(--rule);
  padding:11px 0 11px 34px;
  position:relative;
  font-size:16px;
  line-height:1.5;
}
.sources li::before{
  content:counter(src,decimal-leading-zero);
  position:absolute;
  left:0;
  top:13px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
}
.sources .note{color:var(--muted);font-size:14.5px;font-family:var(--label);letter-spacing:.02em}

/* archive */
.filter{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--rule);
  padding:9px 13px;
  margin-bottom:26px;
  max-width:var(--column);
}
.filter input{
  flex:1;
  font:inherit;
  font-size:16px;
  border:none;
  background:none;
  color:var(--ink);
  outline:none;
}
.filter label{
  font-family:var(--label);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.arch{list-style:none;margin:0;padding:0}
.arch li{border-top:1px solid var(--rule);padding:20px 0}
.arch li:last-child{border-bottom:1px solid var(--rule)}
.arch .when{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  font-family:var(--label);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.arch h3{
  font-family:var(--display);
  font-weight:700;
  font-size:23px;
  line-height:1.2;
  margin:0 0 7px;
  text-wrap:balance;
}
.arch a{text-decoration:none}
.arch a:hover h3{color:var(--accent)}
.arch p{margin:0;font-size:16.5px;color:var(--ink-2);max-width:72ch}
.empty{color:var(--muted);font-style:italic;padding:26px 0}

/* pager / footer */
.pager{
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-top:2px solid var(--rule-hard);
  margin-top:46px;
  padding-top:16px;
}
.pager a{
  text-decoration:none;
  max-width:46%;
  font-family:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.pager a:last-child{text-align:right;margin-left:auto}
.pager strong{
  display:block;
  font-family:var(--display);
  font-size:17px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  margin-top:5px;
  line-height:1.25;
}
.pager a:hover strong{color:var(--accent)}

footer.foot{
  border-top:1px solid var(--rule-hard);
  margin-top:56px;
  padding:20px 0 44px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:baseline;
  font-family:var(--label);
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
footer.foot a{color:var(--muted);text-decoration:none}
footer.foot a:hover{color:var(--accent)}
footer.foot .brand{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink)}

.article{max-width:var(--column);margin:0 auto}
.article .ev-grid{grid-template-columns:minmax(0,1fr)}
.article .posts{grid-template-columns:minmax(0,1fr)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;position:fixed;background:var(--paper);color:var(--ink);padding:10px 14px;border:1px solid var(--ink);z-index:9}

@media (max-width:560px){
  body{font-size:17px}
  .prose{font-size:17.5px}
  ol.ladder li{grid-template-columns:42px minmax(0,1fr);gap:0 14px}
  ol.ladder li::before{font-size:24px}
  .band{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  .util,.strip,.rail,.copy,.pager{display:none}
  body{font-size:11pt;background:#fff;color:#000}
}