:root{
  --paper:#FCFBF7; --paper2:#F4F1E9; --ink:#12100E; --ink2:#4A4740; --muted:#7C776C;
  --rule:#DED8CB; --hair:#E9E4D8; --brand:#1F3D2B; --brand2:#356043; --stop:#B3261E;
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --wrap:1240px; --gut:clamp(16px,3vw,32px);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0F0F0E;--paper2:#171714;--ink:#EDEAE1;--ink2:#B0ACA1;--muted:#807B71;
        --rule:#2C2A25;--hair:#232220;--brand:#9FBF4A;--brand2:#B4CF6A;--stop:#E0685C;}
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:clamp(17px,.4vw + 16px,19px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand2);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ---------- furniture type ---------- */
.kicker,.by,.rail-t,.box .t,nav.nav a,.tags a,.crumb{
  font-family:var(--sans);font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.kicker{font-size:11px;color:var(--stop);margin-bottom:9px;letter-spacing:.14em}
.kicker a{color:inherit;text-decoration:none}
.kicker a:hover{text-decoration:underline}
.kicker.g{color:var(--brand2)}
.by{font-size:10.5px;color:var(--muted);letter-spacing:.075em;font-weight:500}

/* ---------- front page furniture ---------- */
.w-box{border:1px solid var(--rule);background:var(--paper2);padding:14px 15px;margin-top:18px;display:block;text-decoration:none;color:inherit}
.w-t{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  border-bottom:1.5px solid var(--ink);padding-bottom:7px;margin-bottom:10px;color:var(--ink)}
.w-sub{font-family:var(--sans);font-size:11px;color:var(--muted);line-height:1.45;margin:-4px 0 10px}
.w-stat{margin:0;padding-left:18px}
.w-stat li{font-size:14.5px;line-height:1.45;margin-bottom:7px;color:var(--ink2)}
.w-crunch{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule)}
.w-crunch:last-child{border-bottom:none}
.w-crunch b{font-family:var(--display);font-weight:900;font-size:25px;line-height:1;color:var(--brand2);flex:none}
.w-crunch span{font-size:13.5px;line-height:1.35;color:var(--ink2)}
.w-corr{font-size:13.5px;line-height:1.5;color:var(--ink2);margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid var(--rule)}
.w-corr:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.w-teaser{padding:9px 0;border-bottom:1px solid var(--rule)}
.w-teaser:last-child{border-bottom:none}
.w-teaser .h{font-family:var(--display);font-weight:670;font-size:17px;line-height:1.27;letter-spacing:.005em;font-variation-settings:'opsz' 16}
.w-teaser .p{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.w-mkt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.w-mkt th{text-align:left;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--brand2);padding:5px 0}
.w-mkt td{font-family:var(--sans);font-size:12px;padding:5px 0;text-align:right}
.w-mkt td.m.up{color:#a8271c}.w-mkt td.m.down{color:#2f6b3d}.w-mkt td.m.flat{color:var(--muted)}
.w-fp{width:100%;border:1px solid var(--rule);display:block}
.w-box.doom{background:var(--brand);border-color:var(--brand);color:#F3F6EE}
@media (prefers-color-scheme:dark){.w-box.doom{background:#1B2A18;border-color:#31462B;color:#E9EEDF}}
.w-box.doom .w-t{color:inherit;border-color:rgba(255,255,255,.3)}
.w-box.doom .w-sub{color:inherit;opacity:.8;margin:4px 0 0}
.w-doom{font-family:var(--display);font-weight:900;font-size:52px;line-height:.95}
.w-doom span{font-size:.45em;opacity:.6}
.w-why{font-size:14.5px;line-height:1.5;margin:10px 0 0}
.w-days{display:grid;gap:8px}
.w-days div{display:flex;gap:10px;align-items:baseline;font-size:13.5px}
.w-days b{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:64px}
.w-days span{color:var(--ink2);line-height:1.4}
.w-quote{font-family:var(--display);font-size:19px;line-height:1.36;margin:0;font-weight:650;letter-spacing:.002em;font-variation-settings:'opsz' 20}
.w-quote::before{content:'\201C'}.w-quote::after{content:'\201D'}
.w-attr{font-family:var(--sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.w-note{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:0;font-style:italic}
.w-box.folio{background:none}
.w-folio{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;font-family:var(--sans);font-size:11px;color:var(--ink2)}
.w-folio b{font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:9.5px;color:var(--muted);margin-right:5px}
.w-bars{display:flex;gap:1px;align-items:flex-end;height:38px;margin-top:14px}
.w-bars i{display:block;height:100%;background:var(--ink)}
.w-bnum{font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:var(--muted);margin-top:5px;text-align:center}
/* ---------- the banned list ---------- */
.bl-sec{border-top:2px solid var(--ink);padding-top:12px;margin:30px 0}
.bl-h{display:flex;align-items:baseline;gap:10px;font-family:var(--sans);font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand2)}
.bl-h span{font-size:10px;background:var(--paper2);border:1px solid var(--rule);border-radius:9px;padding:1px 7px;color:var(--muted);letter-spacing:0}
.bl-note{font-size:14.5px !important;color:var(--muted) !important;margin:8px 0 14px !important;line-height:1.55}
.bl-words{display:flex;flex-wrap:wrap;gap:6px}
.bl-words span{font-family:var(--sans);font-size:12.5px;background:var(--paper2);border:1px solid var(--rule);
  padding:3px 9px;color:var(--ink2);text-decoration:line-through;text-decoration-color:var(--brand2);text-decoration-thickness:1px}
.bl-shapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2px;background:var(--rule);border:1px solid var(--rule);margin:18px 0}
.bl-shape{background:var(--paper);padding:15px 16px}
.bl-shape h3{font-family:var(--display);font-weight:670;font-size:17px;margin:0 0 7px;letter-spacing:.005em;line-height:1.26;font-variation-settings:'opsz' 16}
.bl-shape p{font-size:13.5px !important;line-height:1.55;color:var(--ink2) !important;margin:0 !important}
/* ---------- the masthead page ---------- */
.masthead-list{max-width:880px}
.mh-sec{border-top:2px solid var(--ink);padding-top:12px;margin-bottom:30px}
.mh-h{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brand2);margin-bottom:16px}
.mh-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.mh-n{font-family:var(--display);font-weight:680;font-size:21px;line-height:1.24;letter-spacing:.001em;font-variation-settings:'opsz' 22;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.mh-n em{font-family:var(--sans);font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--brand2)}
.mh-t{font-family:var(--sans);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.mh-note{font-size:15px;line-height:1.55;color:var(--ink2);margin:9px 0 0;font-style:italic}
.mh-c{font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:9px;padding-top:8px;border-top:1px solid var(--rule)}
.mh-p.chief .mh-n{color:var(--brand2)}
/* ---------- the doom index page ---------- */
.doompage{max-width:920px;margin:0 auto}
.dp-head{display:grid;grid-template-columns:1fr 260px;gap:34px;align-items:start;border-bottom:3px solid var(--ink);padding-bottom:22px;margin-bottom:0}
.dp-sym{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brand2);margin-bottom:10px}
.dp-head h1{font-family:var(--display);font-optical-sizing:auto;font-weight:720;font-size:clamp(29px,3.5vw,44px);
  line-height:1.08;letter-spacing:-.014em;margin:0}
.dp-sub{color:var(--ink2);font-size:17px;line-height:1.5;margin-top:12px}
.dp-quote{border:2px solid var(--ink);padding:14px 15px;background:var(--paper2)}
.dp-quote .big{font-family:var(--display);font-weight:900;font-size:56px;line-height:.9;color:var(--brand2);font-variant-numeric:tabular-nums}
.dp-quote .big span{font-size:.42em;opacity:.55;margin-left:2px}
.dp-quote .chg{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em;margin-top:6px;padding-bottom:10px;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.dp-quote.up .chg{color:#a8271c}.dp-quote.down .chg{color:#2f6b3d}.dp-quote.flat .chg{color:var(--muted)}
.dp-mini{width:100%;border-collapse:collapse;margin-top:9px;font-variant-numeric:tabular-nums}
.dp-mini th{text-align:left;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:3px 0;font-weight:600}
.dp-mini td{text-align:right;font-family:var(--sans);font-size:12.5px;font-weight:700;padding:3px 0}
.dp-mini.wide th{width:42%;text-transform:none;letter-spacing:.02em;font-size:12px}
.dp-mini.wide td{text-align:left;font-weight:500;font-size:13px}
.dp-flag{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink2);background:var(--paper2);
  border-left:3px solid var(--brand2);padding:11px 15px;margin:0 0 34px}
.dp-sec{margin-bottom:38px}
.dp-sec h2{font-family:var(--display);font-optical-sizing:auto;font-weight:700;font-size:25px;letter-spacing:-.001em;border-bottom:1px solid var(--ink);padding-bottom:8px;margin:0 0 16px}
.dp-sec h3{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:24px 0 8px;color:var(--ink)}
.dp-sec p{font-size:16.5px;line-height:1.6;margin:0 0 12px;color:var(--ink2)}
.dp-sec ul{margin:0 0 12px 20px}
.dp-sec li{font-size:16px;line-height:1.58;margin-bottom:8px;color:var(--ink2)}
.dp-lead{font-size:15px !important;color:var(--muted) !important}
.dp-chart{border:1px solid var(--rule);background:var(--paper2);padding:12px 8px 4px}
.chart{display:block}
.chart .gl{stroke:var(--rule);stroke-width:1}
.chart .ax{font-family:var(--sans);font-size:9.5px;fill:var(--muted);letter-spacing:.04em}
.chart .ser{fill:none;stroke:var(--brand2);stroke-width:2;stroke-linejoin:round}
.chart .ma{fill:none;stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3;opacity:.75}
.chart .pt{fill:var(--brand2)}
.dp-legend{font-family:var(--sans);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:9px;display:flex;gap:16px;align-items:center}
.dp-legend span{display:inline-flex;align-items:center}
.l-ser,.l-ma{width:16px;height:0;border-top:2px solid var(--brand2);margin-right:6px}
.l-ma{border-top:1.4px dashed var(--muted)}
.dp-why{border-left:3px solid var(--rule);padding-left:14px;margin-top:16px !important;font-style:italic}
.dp-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.dp-table th,.dp-table td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:left;font-size:14px}
.dp-table thead th{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);border-bottom:1.5px solid var(--ink)}
.dp-table td.n,.dp-table th.n{text-align:right;font-family:var(--sans);font-weight:600}
.dp-table tbody td b{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--brand2);margin-right:7px}
.dp-table tbody td em{font-family:var(--sans);font-size:10px;font-style:normal;color:var(--muted);letter-spacing:.05em}
.dp-table td.up{color:#a8271c}.dp-table td.down{color:#2f6b3d}
.dp-table tfoot th{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.05em;border-top:1.5px solid var(--ink);border-bottom:none;padding-top:11px}
.dp-table tfoot th.n{text-align:right}
.dp-table .imp{width:150px;position:relative}
.dp-table .imp .bar{display:inline-block;height:8px;vertical-align:middle;margin-right:7px;min-width:2px}
.dp-table .imp .bar.p{background:#a8271c}
.dp-table .imp .bar.m{background:#2f6b3d}
.dp-table .imp i{font-family:var(--sans);font-size:11.5px;font-style:normal;font-weight:600;color:var(--muted)}
.dp-table.small th,.dp-table.small td{padding:6px 8px;font-size:12.5px}
.dp-defs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2px;background:var(--rule);border:1px solid var(--rule)}
.dp-def:last-child{grid-column:1/-1}
.dp-def{background:var(--paper);padding:15px 16px}
.dp-def h3{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--display);font-size:18px;font-weight:800;
  text-transform:none;letter-spacing:-.001em;margin:0 0 8px;border:none;padding:0;font-variation-settings:'opsz' 18}
.dp-def h3 .sym{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--brand2)}
.dp-def h3 em{font-family:var(--sans);font-size:11px;font-style:normal;font-weight:700;color:var(--muted);margin-left:auto}
.dp-def p{font-size:13.5px !important;line-height:1.55;margin:0 0 7px}
.dp-def .w{color:var(--ink);font-family:var(--serif);font-size:14.5px !important}
.dp-def .m,.dp-def .n{color:var(--muted)}
.dp-def b{font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.dp-eq{font-family:var(--sans);font-size:16px !important;background:var(--paper2);border:1px solid var(--rule);
  padding:16px;text-align:center;letter-spacing:.02em;color:var(--ink) !important}
.dp-card{border:2px solid var(--ink);padding:18px 20px;background:var(--paper2);margin-top:8px}
.dp-card .t{font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:10px}
.dp-card .fine{font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
@media (max-width:760px){
  .dp-head{grid-template-columns:1fr;gap:20px}
  .dp-table .imp{display:none}
  .dp-table thead th.imp{display:none}
}
/* ---------- masthead ---------- */
.masthead{padding:clamp(14px,2.2vw,22px) 0 0}
.masthead .folio{display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:6px 0;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.mastgrid{display:block;padding:clamp(14px,2.2vw,24px) 0 clamp(10px,1.6vw,16px)}
.wordmark{text-align:center;min-width:0}
.masthead .name{display:inline-block;position:relative;font-family:var(--display);font-weight:900;
  font-size:clamp(36px,8.4vw,96px);line-height:.9;letter-spacing:-.026em;text-decoration:none;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 144}
.masthead .name .the{font-size:.3em;font-weight:700;font-style:italic;letter-spacing:-.01em;
  display:block;margin-bottom:.06em;color:var(--ink2);font-variation-settings:'SOFT' 40,'WONK' 1,'opsz' 40}
.masthead .name .mark{color:inherit}
.masthead.marked .name .mark{color:var(--brand2)}
.masthead .tag{font-style:italic;color:var(--ink2);font-size:clamp(14px,1.35vw,17px);margin-top:12px}
@media(max-width:900px){
  .masthead .folio span:last-child{display:none}
}
.mastrule{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.mastrule .inner{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);
  padding:6px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2)}
.mastrule .inner .c{color:var(--stop)}
/* The Doom Index, quoted on the masthead rule the way an index is quoted on a
   financial front page: one line, with the series behind it. */
.ear{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;flex:none}
.ear .sym{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--brand2)}
.ear .v{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ear .chg{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.ear.up .chg{color:var(--stop)}.ear.down .chg{color:var(--brand2)}.ear.flat .chg{color:var(--muted)}
.ear .spark{display:block;color:var(--brand2);width:74px;height:17px;opacity:.9}
.ear .rng{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.09em;color:var(--muted);font-variant-numeric:tabular-nums}
.ear:hover .sym,.ear:hover .rng{color:var(--ink)}
@media(max-width:900px){.ear .spark,.ear .rng{display:none}}
@media(max-width:620px){.mastrule .inner span.px{display:none}}
/* ---------- the market ---------- */
/* The tape sits inside the page, not across the window, so it lines up with the
   masthead rule above it and the nav below it. */
.tickwrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.ticker{border-bottom:1px solid var(--hair);background:var(--paper2);overflow:hidden;position:relative}
.ticker::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper2),transparent 5%,transparent 95%,var(--paper2))}
.tape{display:flex;width:max-content;animation-name:tape;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
.tape .run{display:contents}
.ticker:hover .tape{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Someone who has asked their machine to stop moving things gets the market as
   a strip they can push along themselves, once, not twice. */
@media (prefers-reduced-motion:reduce){
  .tape{animation:none}
  .tape .dup{display:none}
  .ticker{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

.tk{display:inline-flex;align-items:baseline;gap:6px;padding:5px 18px;white-space:nowrap;
  font-family:var(--sans);font-size:11px;border-right:1px solid var(--rule)}
.tk b{font-weight:800;letter-spacing:.11em;color:var(--ink)}
.tk em{font-style:normal;color:var(--muted);font-size:10.5px}
.tk i{font-style:normal;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tk u{text-decoration:none;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.tk u.up{color:var(--brand2)} .tk u.down{color:var(--stop)} .tk u.flat{color:var(--muted)}
@media(max-width:760px){.tickwrap{padding:0}.tk{padding:5px 14px;font-size:10.5px}}
nav.nav{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--hair)}
nav.nav .wrap{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;height:48px;align-items:center;scrollbar-width:none}
nav.nav .wrap::-webkit-scrollbar{display:none}
nav.nav a{font-size:11.5px;color:var(--ink2);text-decoration:none;white-space:nowrap;
  padding:15px 0;border-bottom:2px solid transparent;transition:color .12s}
nav.nav a:hover{color:var(--ink)}
nav.nav a.on{color:var(--ink);border-bottom-color:var(--stop)}

/* ---------- grids ----------
   One dominant entry point, one supporting column, then rows. The furniture
   sits in a band of its own below the fold rather than flanking the splash,
   because two rails of boxes either side of a story is how a front page stops
   reading as a front page. */
main{padding:clamp(24px,3.4vw,38px) 0 0}
.well{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(300px,1fr);
  gap:clamp(24px,3vw,44px);align-items:start;
  padding-bottom:clamp(26px,3.4vw,40px);border-bottom:2px solid var(--ink)}
.furniture{border-top:2px solid var(--ink);margin-top:clamp(26px,3.4vw,40px);padding-top:11px}
.furniture-t{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* Columns that are actually the same width.
   The rules between them used to be a border plus padding on every column but
   the last, which quietly took that padding out of the column: on a row of
   three, two pictures came out 331px wide and the third 368px. The divider is
   drawn in the gutter now, outside the column, so every track is a clean 1fr
   and every picture in a row is the same size. */
.band{--g:clamp(20px,2.6vw,34px);display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  column-gap:var(--g);row-gap:0;
  padding:clamp(16px,2.2vw,24px) 0 clamp(22px,2.8vw,32px);border-bottom:1px solid var(--rule);align-items:start}
.band > *{margin-top:0;border:none;background:none;padding:0;position:relative}
.band > * + *::before{content:'';position:absolute;left:calc(var(--g) / -2);top:0;bottom:0;border-left:1px solid var(--hair)}
.band .w-t{border-bottom:1.5px solid var(--ink)}
.tier{--g:clamp(20px,2.6vw,36px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--g);row-gap:0;padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--rule)}
.tier > *{position:relative}
.tier > * + *::before{content:'';position:absolute;left:calc(var(--g) / -2);top:0;bottom:0;border-left:1px solid var(--hair)}
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,30px);
  padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--rule)}
.rail{display:flex;flex-direction:column;gap:24px;border-left:1px solid var(--hair);padding-left:clamp(20px,2.4vw,32px)}
.shoulder{--g:clamp(20px,2.4vw,32px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--g);row-gap:0;
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--ink)}
.shoulder > *{position:relative}
.shoulder > * + *::before{content:'';position:absolute;left:calc(var(--g) / -2);top:0;bottom:0;border-left:1px solid var(--hair)}
@media(max-width:1080px){
  .well{grid-template-columns:1fr}
  .rail{border-left:none;padding-left:0;border-top:2px solid var(--ink);padding-top:20px}}
@media(max-width:980px){
  .shoulder{grid-template-columns:1fr}
  .shoulder > * + *::before{display:none}
  .shoulder > *:first-child{border-bottom:1px solid var(--hair);padding-bottom:22px;margin-bottom:22px}
  .band > * + *::before{display:none}
  .band > *{border-bottom:1px solid var(--hair);padding-bottom:20px;margin-bottom:20px}
  .band > *:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
  .rail{border-left:none;padding-left:0;border-top:2px solid var(--ink);padding-top:22px}
  .tier{grid-template-columns:1fr}
  .tier > * + *::before{display:none}
  .tier > *:not(:last-child){border-bottom:1px solid var(--hair);padding-bottom:24px;margin-bottom:24px}
  .quad{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){.quad{grid-template-columns:1fr;gap:0}
  .quad > *:not(:last-child){border-bottom:1px solid var(--hair);padding-bottom:22px;margin-bottom:22px}}

/* ---------------------------------------------------------------------------
   THE PHONE
   Most of the readership is on one, and until now it got the desktop page with
   the columns unstacked: seventeen stories, each with a full-width photograph,
   fourteen thousand pixels of scroll. A news page on a phone is one picture at
   the top and a scannable list under it, so that is what it is now.
   --------------------------------------------------------------------------- */
@media (max-width:640px){
  :root{--gut:16px}
  .wrap{padding-left:max(var(--gut),env(safe-area-inset-left));padding-right:max(var(--gut),env(safe-area-inset-right))}

  /* The masthead is the one thing that should still feel like a newspaper. */
  .masthead .name{font-size:clamp(40px,12vw,64px);letter-spacing:-.028em}
  .masthead .name .the{font-size:.32em}
  .masthead .tag{font-size:14px;margin-top:9px}
  .masthead .folio{font-size:8.5px;letter-spacing:.14em}
  .mastrule .inner{font-size:9px;letter-spacing:.1em;gap:8px}

  /* One picture at the top, then a list. Every piece still carries an image;
     it is a thumbnail rather than a billboard. */
  .card:not(.splash){display:grid;grid-template-columns:minmax(0,1fr) 96px;column-gap:14px;align-items:start}
  .card:not(.splash) figure{grid-column:2;grid-row:1/span 4;margin:0}
  .card:not(.splash) figure img,.card:not(.splash) figure .cover{aspect-ratio:1/1}
  .card:not(.splash) figcaption{display:none}
  .card:not(.splash) .hl{font-size:17.5px;line-height:1.26;letter-spacing:.004em;
    font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 16}
  .card:not(.splash) .stand{grid-column:1/-1;font-size:14.5px;margin-top:7px;line-height:1.45}
  .card:not(.splash) .by{grid-column:1/-1}
  .card:not(.splash) .kicker{margin-bottom:5px}

  /* Rows, not a grid. One hairline between each, nothing floating. */
  .tier,.quad,.shoulder,.band{grid-template-columns:1fr;column-gap:0;padding-top:20px}
  .tier > * + *::before,.shoulder > * + *::before,.band > * + *::before{display:none}
  .tier > *,.quad > *,.shoulder > *,.band > *{
    border-bottom:1px solid var(--hair);padding-bottom:18px;margin-bottom:18px}
  .tier > *:last-child,.quad > *:last-child,.shoulder > *:last-child,.band > *:last-child{
    border-bottom:none;padding-bottom:0;margin-bottom:0}
  .shoulder{margin-top:20px;padding-top:20px}
  .well{gap:22px;padding-bottom:24px}
  .rail{gap:18px}
  .rail .card.thumb{grid-template-columns:minmax(0,1fr) 96px;column-gap:14px}
  .rail .card.thumb .hl{font-size:17.5px}
  .furniture{margin-top:24px}

  /* The splash keeps its picture, at a shape that suits a hand. */
  .splash figure img,.splash figure .cover{aspect-ratio:4/3}
  .splash .hl{font-size:clamp(30px,8.2vw,36px);line-height:1.05;letter-spacing:-.012em}
  .splash .stand{font-size:17px;line-height:1.45}
  .splash .sell{font-size:16.5px;line-height:1.55}

  .article{padding-top:18px}
  .article .hl{font-size:clamp(28px,7.6vw,34px);line-height:1.08;letter-spacing:-.01em}
  .article .stand{font-size:18px;margin-top:13px}
  .body{font-size:17.5px;line-height:1.66}
  .body.drop > p:first-of-type::first-letter{font-size:2.6em}
  .byline{font-size:11.5px;gap:7px;margin-top:18px;padding:11px 0}
  figure{margin-bottom:12px}

  footer .fcols{gap:26px}
  footer a,footer .fcols a{display:block;padding:7px 0}
}

/* Anything wider than the screen scrolls in its own box rather than dragging
   the whole page sideways. */
.dp-table,.w-mkt,.dp-defs{max-width:100%}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:760px){
  .dp-head{grid-template-columns:1fr}
  /* A table wider than the phone scrolls in its own box, with a shadow at the
     edge so it is obvious there is more of it. */
  .dp-sec table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;
    background:
      linear-gradient(90deg,var(--paper) 30%,transparent) left / 28px 100% no-repeat local,
      linear-gradient(90deg,transparent,var(--paper) 70%) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.14),transparent) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.14),transparent) right / 12px 100% no-repeat scroll}
  .dp-sec table th,.dp-sec table td{white-space:normal}
  .dp-quote .big{font-size:46px}
  .dp-head h1{font-size:clamp(26px,7.4vw,32px)}
  .verdict .btns{flex-direction:column;align-items:stretch}
  .verdict .btns button{width:100%;min-height:46px;font-size:15px}
}

/* Touch targets. Anything a finger has to find is at least 44px tall. */
@media (hover:none){
  nav.nav .wrap{height:52px}
  nav.nav a{padding:18px 0;font-size:12.5px}
  .verdict .btns button{min-height:44px}
  .tags a{padding:8px 12px}
}

/* The section strip scrolls sideways on a phone. It needs to look like it does:
   an edge that fades, and momentum that stops on an item. */
nav.nav{position:relative}
/* Snap used to eat the left gutter: the strip jumped to the first item and the
   first section sat half off the screen. */
nav.nav .wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-padding-inline-start:var(--gut)}
nav.nav::after{content:'';position:absolute;top:0;right:0;bottom:1px;width:34px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--paper))}
@media (min-width:1100px){nav.nav::after{display:none}}

/* ---------- cards ---------- */
.card a.h{text-decoration:none;display:block}
/* Tracking runs the other way from size: a 56px splash wants its letters
   pulled together, an 17px headline wants them let out, and Fraunces has an
   optical size axis that has to be told which one it is doing. Setting opsz
   once for every headline was what made the small ones read crunched. */
.hl{font-family:var(--display);font-weight:660;line-height:1.24;
  letter-spacing:.003em;font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 18;text-wrap:balance}
/* The splash. Headline first, picture second: the one thing a reader must see
   without scrolling is what the paper is leading on, and a picture the width of
   the well pushes it off the screen on any laptop. */
.splash .hl{font-size:clamp(34px,4.6vw,56px);font-weight:710;line-height:1.03;letter-spacing:-.018em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 120}
.splash .stand{font-size:clamp(18px,1.75vw,21px);line-height:1.42;margin-top:14px;max-width:38em}
.splash .by{margin-top:13px;padding-bottom:16px;border-bottom:1px solid var(--hair);margin-bottom:16px}
.splash figure{margin:0 0 16px}
.splash figure img,.splash figure .cover{aspect-ratio:21/9}
.splash .sell{font-size:17.5px;line-height:1.58;color:var(--ink2);max-width:44em}
.splash .sell a{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand2);text-decoration:none;white-space:nowrap}
.splash .sell a:hover{text-decoration:underline}
.shoulder .hl{font-size:clamp(21px,2vw,25px);font-weight:670;line-height:1.17;letter-spacing:-.004em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 28}
.shoulder .stand{font-size:15.5px;margin-top:9px;line-height:1.48}
.tier .hl{font-size:clamp(20px,1.9vw,23.5px);font-weight:670;line-height:1.19;letter-spacing:-.002em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 26}
.quad .hl{font-size:18px;line-height:1.26;letter-spacing:.003em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 18}
.rail .hl{font-size:18.5px;line-height:1.25;letter-spacing:.002em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 20}
.card a.h:hover .hl{color:var(--brand2)}
.stand{color:var(--ink2);font-family:var(--serif);font-size:16px;margin-top:10px;line-height:1.5;text-wrap:pretty}
.tier .stand{font-size:15.5px;margin-top:9px;line-height:1.48}
.quad .stand{font-size:15px;margin-top:8px;line-height:1.47}
.rail .stand{font-size:14.5px;margin-top:7px;line-height:1.46}
.card .by{margin-top:10px;display:block;opacity:.85}
figure{margin-bottom:14px}
figure img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper2)}
figure .cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
figcaption{font-family:var(--sans);font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.rail-t{font-size:11px;color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:7px;margin-bottom:2px}
/* Every piece on the front page carries a picture, but a column of five
   photographs beside the splash competes with it and the page loses its centre.
   So the rail leads with one and sets the rest against a thumbnail, which is
   what a news list does everywhere it is done well. */
.rail figure img,.rail figure .cover{aspect-ratio:16/9}
.rail figure{margin-bottom:11px}
.rail .card.thumb{display:grid;grid-template-columns:minmax(0,1fr) 62px;column-gap:13px;align-items:start}
.rail .card.thumb figure{grid-column:2;grid-row:1/span 3;margin:0}
.rail .card.thumb figure img,.rail .card.thumb figure .cover{aspect-ratio:1/1}
.rail .card.thumb .hl{font-size:17px;line-height:1.27;letter-spacing:.006em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 16}
.rail .card.thumb .stand{font-size:14px;margin-top:6px;grid-column:1/-1}
@media(max-width:1080px){.rail .card.thumb{grid-template-columns:minmax(0,1fr) 104px}}
.rail .card .by{display:none}
.list .card{padding:14px 0;border-bottom:1px solid var(--hair)}
.list .card:last-child{border-bottom:none;padding-bottom:0}
.list .card:first-child{padding-top:14px}

/* ---------- boxes ---------- */
.box{border:1px solid var(--rule);padding:18px 20px;background:var(--paper2)}
.box .t{font-size:10.5px;color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:12px}
.doom{background:var(--brand);border-color:var(--brand);color:#F3F6EE}
@media (prefers-color-scheme:dark){.doom{background:#1B2A18;border-color:#31462B;color:#E9EEDF}}
.doom .t{color:inherit;border-color:rgba(255,255,255,.28)}
.doom .n{font-family:var(--display);font-weight:900;font-size:60px;line-height:.95}
.doom .d{font-family:var(--sans);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.8;margin-top:4px}
.doom .w{font-size:15.5px;line-height:1.5;margin-top:11px}

/* ---------- article ---------- */
.article{max-width:70ch;margin:0 auto;padding:clamp(24px,3.4vw,42px) 0 0}
.article .hl{font-size:clamp(30px,4.9vw,52px);font-weight:720;line-height:1.05;letter-spacing:-.016em;
  font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 120}
.article .stand{font-size:clamp(19px,2.1vw,24px);margin-top:17px;line-height:1.44;color:var(--ink2);text-wrap:pretty}
.byline{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;font-family:var(--sans);
  font-size:12.5px;color:var(--ink2);margin:24px 0 0;padding:14px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair)}
.byline b{font-weight:600;color:var(--ink)}
.byline .sep{color:var(--rule)}
.prov{font-family:var(--sans);font-size:12.5px;color:var(--muted);line-height:1.55;
  margin-top:12px;padding-left:13px;border-left:2px solid var(--rule)}
.body{font-size:clamp(18px,1.7vw,20px);line-height:1.68;margin-top:26px}
.body p{margin:0 0 1.05em}
.body.drop > p:first-of-type::first-letter{font-family:var(--display);font-weight:900;font-size:3.15em;
  float:left;line-height:.82;padding:.06em .1em 0 0;color:var(--brand2);font-variation-settings:'WONK' 1}
.body ol,.body ul{margin:0 0 1.05em 1.35em}
.body li{margin-bottom:.55em}
.body blockquote{border-left:2px solid var(--brand2);padding-left:20px;margin:1.3em 0;font-style:italic;color:var(--ink2)}
.dateline{font-family:var(--sans);font-weight:700;letter-spacing:.11em;text-transform:uppercase;font-size:.66em;color:var(--ink2)}
.crunch{margin:8px 0 1.1em}
.crunch-row{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair)}
.crunch-row:last-child{border-bottom:none}
.crunch-row .fig{font-family:var(--display);font-weight:900;font-size:clamp(30px,4vw,44px);line-height:1;color:var(--brand2)}
.crunch-row .lab{font-size:17px;color:var(--ink2);line-height:1.4}
.vox-row{padding:18px 0;border-bottom:1px solid var(--hair)}
.vox-row:last-child{border-bottom:none}
.vox-row .who{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.vox-row blockquote{font-size:19.5px;font-style:italic;border:none;padding:0;margin:0}
.body h2{font-family:var(--display);font-weight:680;font-size:clamp(23px,2.5vw,29px);
  letter-spacing:-.003em;margin:1.7em 0 .5em;line-height:1.2;font-variation-settings:'opsz' 30}
.notice-block{border:1px solid var(--ink);padding:22px 24px;margin:26px 0 8px;background:var(--paper2)}
.notice-block .nt{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:9px;margin-bottom:14px}
.notice-block p{font-size:17px;line-height:1.62;margin:0}
.notice-block .nb{margin-top:1em;font-style:italic;color:var(--ink2);font-size:16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0}
.tags a{font-size:10.5px;text-decoration:none;border:1px solid var(--rule);border-radius:99px;padding:5px 13px;color:var(--ink2)}
.tags a:hover{border-color:var(--brand2);color:var(--ink)}
.more{border-top:2px solid var(--ink);margin-top:44px;padding-top:16px}
.more .rail-t{border:none;margin-bottom:16px}

/* ---------- the two questions ---------- */
.verdict{border:1px solid var(--ink);margin:40px 0 0;padding:24px}
.verdict .t{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:20px}
.verdict .q{margin-bottom:22px}
.verdict .q:last-child{margin-bottom:0}
.verdict .q.tip{border-top:1px solid var(--rule);padding-top:20px;margin-top:24px}
.verdict .q p{font-family:var(--display);font-optical-sizing:auto;font-weight:680;font-size:clamp(20px,2.2vw,24px);line-height:1.24;margin-bottom:13px;letter-spacing:-.008em}
.verdict .btns{display:flex;gap:10px;flex-wrap:wrap}
.verdict button{font-family:var(--sans);font-size:14px;font-weight:500;background:transparent;
  border:1px solid var(--ink);padding:10px 22px;color:var(--ink);cursor:pointer;transition:background .12s,color .12s}
.verdict button:hover{background:var(--ink);color:var(--paper)}
.verdict button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#F3F6EE}
.verdict .res{font-size:16.5px;line-height:1.55;color:var(--ink2);margin-top:13px;font-style:italic}
.verdict .res b{font-style:normal;color:var(--ink)}

/* ---------- pages ---------- */
.page-head{border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:clamp(24px,3vw,34px)}
.page-head h1{font-family:var(--display);font-weight:900;font-size:clamp(30px,4.4vw,46px);letter-spacing:-.03em;line-height:1.04}
.page-head p{color:var(--ink2);font-style:italic;margin-top:8px;font-size:17px}
.crumb{font-size:10.5px;color:var(--muted);margin-bottom:10px}
.crumb a{text-decoration:none}
.issue-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,3vw,40px);align-items:start}
@media(max-width:860px){.issue-hero{grid-template-columns:1fr}}
.issue-hero img{border:1px solid var(--rule);width:100%}
.runorder{list-style:none}
.runorder li{padding:14px 0;border-bottom:1px solid var(--hair)}
.runorder .r{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.runorder a{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.14;text-decoration:none;letter-spacing:.002em}
.runorder a:hover{color:var(--brand2)}

/* ---------- notice + footer ---------- */
.notice{background:var(--paper2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:12.5px;color:var(--ink2);padding:14px 0;text-align:center;margin-top:clamp(40px,6vw,72px)}
.notice b{color:var(--ink);font-weight:600}
footer{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:13px}
@media (prefers-color-scheme:dark){footer{background:#000}}
footer .wrap{padding:44px var(--gut) 34px}
footer .fcols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px}
@media(max-width:760px){footer .fcols{grid-template-columns:1fr 1fr}}
footer h4{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px;opacity:.75}
footer p{opacity:.75;line-height:1.6;max-width:34em}
footer a{color:inherit;text-decoration:none;display:block;padding:4px 0;opacity:.75}
footer a:hover{opacity:1}
footer .fine{border-top:1px solid rgba(255,255,255,.14);margin-top:30px;padding-top:20px;opacity:.55;line-height:1.65;font-size:12px}
footer .fine b{opacity:1}

@media print{
  nav.nav,.verdict,footer,.ear{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .article{max-width:none}
}