:root{
  --paper:#f6f1e7; --paper2:#efe7d6; --ink:#16130f; --ink2:#3d372f; --muted:#7a7064; --rule:#16130f;
  --red:#b8321f; --red2:#e0563f; --green:#2f6b3a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --head:"Bodoni 72","Didot","Bodoni MT","Iowan Old Style",Georgia,serif;
  --sans:"Avenir Next","Segoe UI",Avenir,"Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.1,1); --w:min(1240px,100% - 2.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(rgba(22,19,15,.035) 1px,transparent 1px);background-size:3px 3px;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:var(--paper);padding:.5rem 1rem}

/* chrome */
.topbar{display:flex;justify-content:space-between;gap:1rem;width:var(--w);margin:0 auto;padding:.7rem 0;font:500 .72rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--rule)}
.topbar em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0}
.mast{width:var(--w);margin:0 auto;text-align:center;padding:1.6rem 0 1rem}
.flag{display:inline-block;font:900 clamp(2.6rem,9vw,7.2rem)/.9 var(--head);letter-spacing:-.035em;color:var(--ink)}
.flag:hover{color:var(--ink)}
.flag-pop{color:var(--red);font-style:italic;letter-spacing:-.05em}
.motto{margin:.6rem 0 0;font:italic 1rem var(--serif);color:var(--ink2)}
.sections{position:sticky;top:0;z-index:20;display:flex;justify-content:center;flex-wrap:wrap;gap:.2rem 1.6rem;width:var(--w);margin:0 auto;padding:.7rem 0;
  background:var(--paper);border-top:3px double var(--rule);border-bottom:1px solid var(--rule);font:600 .78rem var(--sans);letter-spacing:.1em;text-transform:uppercase}
.sections a{position:relative;padding:.15rem 0}
.sections a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red);transform:scaleX(0);transition:transform .35s var(--ease)}
.sections a:hover::after{transform:scaleX(1)}
.ticker{display:flex;align-items:stretch;width:var(--w);margin:.9rem auto 0;background:var(--ink);color:var(--paper);overflow:hidden;font:500 .85rem/1 var(--sans)}
.ticker b{flex:none;display:grid;place-items:center;padding:.65rem .9rem;background:var(--red);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}
.tick{overflow:hidden;flex:1;display:flex;align-items:center;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tick-track{display:flex;width:max-content;animation:tick 48s linear infinite}
.tick-track span{padding:0 1.6rem;white-space:nowrap}
.tick-track span::before{content:"◆";color:var(--red2);margin-right:1.6rem;font-size:.6em;vertical-align:.2em}
.ticker:hover .tick-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.live{display:flex;align-items:center;gap:.5rem;width:var(--w);margin:0 auto;padding:.6rem 0;font:500 .82rem var(--sans);color:var(--ink2);border-bottom:1px solid rgba(22,19,15,.15)}
.live b{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(184,50,31,.5);animation:ping 1.8s ease-out infinite}
@keyframes ping{to{box-shadow:0 0 0 9px rgba(184,50,31,0)}}
[data-live]{font-weight:600;color:var(--ink);transition:opacity .4s}
main{width:var(--w);margin:0 auto}

/* shared bits */
.meta{margin:0 0 .45rem;font:700 .7rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.meta a:hover{text-decoration:underline}
.dek{margin:.55rem 0 0;color:var(--ink2);font-size:1rem;line-height:1.45}
.by{margin:.8rem 0 0;font:600 .78rem var(--sans);color:var(--ink2)}
.by span{display:block;font-weight:400;color:var(--muted)}
.pic{display:block;overflow:hidden;margin-bottom:.9rem;background:var(--paper2)}
.pic img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.pic:hover img,.card:hover .pic img{transform:scale(1.04)}
.btn{display:inline-block;margin-top:1.4rem;padding:.8rem 1.4rem;background:var(--ink);color:var(--paper);font:600 .85rem var(--sans)}
.btn:hover{background:var(--red);color:var(--paper)}

/* front page */
.front{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:2.4rem;padding:2rem 0 2.4rem;border-bottom:1px solid var(--rule)}
.lead h2{font-size:clamp(2rem,4.6vw,3.6rem);letter-spacing:-.02em}
.lead .dek{font-size:clamp(1.05rem,1.5vw,1.25rem)}
.lead .pic img{aspect-ratio:16/10}
.rail{display:flex;flex-direction:column;gap:1.4rem;border-left:1px solid rgba(22,19,15,.2);padding-left:2rem}
.box{border-top:3px solid var(--ink);padding-top:.7rem}
.box h2{font:700 .74rem var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem}
.wx-now{display:flex;align-items:flex-start;margin:0;font:400 4rem/1 var(--head)}
.wx-now span{font-size:1.4rem;margin-top:.4rem;color:var(--muted)}
.wx-note{margin:.2rem 0 .8rem;font:italic .85rem var(--serif);color:var(--muted)}
.wx-5{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:.3rem;text-align:center;font:500 .7rem/1.3 var(--sans);color:var(--ink2)}
.wx-5 li{padding:.5rem .2rem;background:var(--paper2)}
.wx-5 b{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.2rem}
.markets table{width:100%;border-collapse:collapse;font:500 .82rem var(--sans)}
.markets th{text-align:left;font-weight:500;color:var(--ink2);padding:.42rem 0;border-bottom:1px dotted rgba(22,19,15,.25)}
.markets td{text-align:right;font-family:var(--mono);font-size:.78rem;border-bottom:1px dotted rgba(22,19,15,.25);font-variant-numeric:tabular-nums}
.markets .up{color:var(--green)}.markets .dn{color:var(--red)}
.most{margin:0;padding:0;list-style:none;counter-reset:m}
.most li{counter-increment:m;display:grid;grid-template-columns:2rem 1fr;gap:.4rem;padding:.55rem 0;border-bottom:1px solid rgba(22,19,15,.12);font:700 .98rem/1.25 var(--head)}
.most li::before{content:counter(m);font:400 1.6rem/1 var(--head);color:var(--red)}
.band{padding:2.2rem 0;border-bottom:1px solid var(--rule)}
.band-h{font:700 .78rem var(--sans);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.4rem;display:flex;align-items:center;gap:1rem}
.band-h::after{content:"";flex:1;height:1px;background:var(--rule)}
.grid{display:grid;gap:2rem}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card h3{font-size:1.4rem}
.more{margin:1.6rem 0 0;font:600 .85rem var(--sans)}
.more a{color:var(--red)}
.opinion{background:var(--paper2);box-shadow:0 0 0 100vmax var(--paper2);clip-path:inset(0 -100vmax)}
.col{display:grid;grid-template-columns:88px 1fr;gap:1.2rem;align-items:start}
.col-pic{width:88px;height:88px;object-fit:cover;object-position:50% 20%;border-radius:50%;filter:grayscale(1) contrast(1.05)}
.col h3{font-size:1.5rem;font-style:italic}
.corrections ul{margin:0 0 1rem;padding:0;list-style:none;columns:2;column-gap:2.4rem}
.corrections li{break-inside:avoid;margin-bottom:.6rem}
.corrections li b{font:700 .72rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-right:.4rem}
.corrections p{margin:0;font-style:italic;color:var(--muted);font-size:.9rem}

/* story */
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:30;pointer-events:none}
.progress i{display:block;height:100%;background:var(--red);transform:scaleX(var(--p,0));transform-origin:left}
.story{max-width:46rem;margin:0 auto;padding:2.4rem 0 1rem}
.story-head{text-align:center}
.story h1{font-size:clamp(2.1rem,5.4vw,3.8rem);letter-spacing:-.02em}
.story-head .dek{font-size:clamp(1.1rem,1.8vw,1.35rem);font-style:italic;max-width:36rem;margin-left:auto;margin-right:auto}
.dateline{margin:.3rem 0 0;font:400 .76rem var(--sans);color:var(--muted)}
.hero-fig{margin:2rem 0}
.hero-fig img{width:100%;max-height:78vh;object-fit:cover;object-position:50% 30%}
.hero-fig figcaption{margin-top:.6rem;font:400 .8rem/1.45 var(--sans);color:var(--muted);border-left:2px solid var(--red);padding-left:.7rem}
.story-body{font-size:1.14rem;line-height:1.7}
.story-body p{margin:0 0 1.15em}
.story-body>p:first-child::first-letter{float:left;font:700 4.4em/.8 var(--head);margin:.06em .1em 0 0;color:var(--red)}
.story-body h2{font-size:1.5rem;margin:2rem 0 .7rem}
.sponsor{margin-top:2rem!important;padding:.9rem 1rem;border:1px dashed rgba(22,19,15,.35);font:italic .9rem var(--serif);color:var(--muted)}
.fiction{font:400 .78rem/1.5 var(--sans);color:var(--muted)}
.fiction a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.page-head{text-align:center;padding:2.6rem 0 1rem}
.page-head h1{font-size:clamp(2.4rem,6vw,4.4rem)}
.issue{display:grid;grid-template-columns:5.5rem 1fr;gap:1.4rem;padding:1.2rem 0;border-top:1px solid rgba(22,19,15,.15)}
.issue-no{margin:0;font:400 1.8rem/1 var(--head);color:var(--red)}
.issue h3{font-size:1.25rem;margin-bottom:.5rem}
.issue ul{margin:0;padding:0;list-style:none}
.issue li{padding:.2rem 0}
.issue li a{font-weight:600}
.issue li span{font:600 .66rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:.5rem}
.lost{padding:5rem 0}

/* footer */
.foot{width:var(--w);margin:3rem auto 0;padding:2rem 0 3rem;border-top:3px double var(--rule);text-align:center;font:400 .82rem var(--sans);color:var(--ink2)}
.foot-flag{font:900 2.2rem/1 var(--head);letter-spacing:-.03em;margin-bottom:1rem}
.foot nav{display:flex;justify-content:center;flex-wrap:wrap;gap:1.4rem;margin-bottom:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
.foot p{margin:.4rem auto;max-width:44rem}

/* motion */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .flag-pop{display:inline-block;animation:stamp .9s cubic-bezier(.3,1.6,.5,1) .15s both}
@keyframes stamp{from{transform:scale(1.8) rotate(-8deg);opacity:0}}
.js .hero-fig img{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.js .hero-fig.in img{clip-path:inset(0)}
.sections.stuck{box-shadow:0 10px 20px -18px rgba(22,19,15,.6)}

@media (max-width:900px){
  .front{grid-template-columns:1fr}
  .rail{border-left:0;padding-left:0;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
  .rail .box:last-child{grid-column:1/-1}
  .grid.three{grid-template-columns:1fr 1fr}
  .grid.two{grid-template-columns:1fr}
  .corrections ul{columns:1}
}
@media (max-width:600px){
  body{font-size:16px}
  .topbar{font-size:.62rem}.tb-mid{display:none}
  .sections{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:1.2rem;scrollbar-width:none}
  .sections::-webkit-scrollbar{display:none}
  .sections a{flex:none}
  .rail{grid-template-columns:1fr}
  .grid.three{grid-template-columns:1fr}
  .col{grid-template-columns:64px 1fr}.col-pic{width:64px;height:64px}
  .story-body{font-size:1.06rem}
  .issue{grid-template-columns:3.5rem 1fr;gap:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal,.js .hero-fig img{opacity:1;transform:none;clip-path:none}
  .tick{overflow-x:auto}
}