.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
:root{--ink:#14110f;--paper:#fbf9f5;--muted:#6b625a;--rule:#e2dcd3;--accent:#8e2334;
      --measure:34rem;--rail:19rem;--shell:60rem}
.roster{list-style:none;margin:1.1rem 0 1.6rem;padding:0;display:grid;gap:.85rem}
.roster li{display:grid;grid-template-columns:13.5rem 1fr;column-gap:1.1rem;padding:.1rem 0 .1rem .85rem;
  border-left:3px solid var(--rule)}
.roster strong{font-size:.98rem;line-height:1.35}
.roster-role{display:block;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-top:.15rem}
.roster-note{display:block;color:var(--muted);font-size:.92rem;line-height:1.45}
@media(max-width:34rem){
  .roster li{grid-template-columns:1fr;row-gap:.1rem}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video{max-width:100%;height:auto}
body{margin:0;background:var(--paper);color:var(--ink);
     font:400 1.0625rem/1.65 Georgia,"Iowan Old Style","Times New Roman",serif;}
.masthead{max-width:var(--measure);margin:0 auto;padding:2.4rem 1.25rem 1.1rem;
          border-bottom:1px solid var(--rule);text-align:center}
.brand{font-size:1.6rem;letter-spacing:.06em;text-transform:uppercase;
       font-weight:700;color:var(--ink);text-decoration:none;display:block}
.masthead-h{margin:0}
.masthead-link{display:flex;flex-direction:column;align-items:center;gap:.55rem;
               text-decoration:none;color:var(--ink)}
/* The wordmark is thirteen caps in a heavy face. The floor of this clamp is the whole reason the
   masthead used to be clipped on a phone: 2.6rem is ~395px wide, wider than a 375px screen. 9vw
   tracks the viewport instead, so it fits 320px and still reaches 5.4rem on a desktop. */
.site-title{font-size:clamp(1.55rem,9vw,5.4rem);line-height:1;letter-spacing:.015em;
            text-transform:uppercase;font-weight:700}
.logo-icon{width:78px;height:78px;flex:0 0 auto;transition:transform .3s ease}
.masthead-link:hover .logo-icon,.masthead-link:focus-visible .logo-icon{transform:rotate(-4deg)}
/* Black dateline row above the masthead: Vol. I, the build date, and the strap line. */
.dateline{background:var(--ink);color:#f7f3ec}
.dateline-in{max-width:var(--shell);margin:0 auto;padding:.45rem 1.25rem;display:flex;
             justify-content:space-between;gap:1rem;flex-wrap:wrap;
             font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
             font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}
.dateline-in .dl-right{color:#c9c2b8}
/* On a phone the strapline is the whole point of the header, so it wraps onto its own line
   instead of being hidden. Small, centred, and still above everything else on the page. */
@media(max-width:34rem){
  .dateline-in{flex-wrap:wrap;justify-content:center;text-align:center;row-gap:.1rem}
  .dateline-in .dl-right{display:block;flex:1 0 100%;font-size:.58rem;letter-spacing:.1em;
    line-height:1.35;padding-bottom:.1rem}
}
@media(prefers-reduced-motion:reduce){.logo-icon{transition:none}}
.masthead nav{margin-top:.75rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
              font-size:.8rem;letter-spacing:.09em;text-transform:uppercase}
.masthead nav a{color:var(--muted);text-decoration:none;margin:0 .6rem}
.masthead nav a:hover{color:var(--accent)}
.tagline{margin:.85rem 0 0;color:var(--muted);font-size:.95rem;font-style:italic}
/* The rail sits under the article grid on a phone, which buried the meter. This copy lives inside
   main, just after the mission band: visible without scrolling past everything, and compact so it
   reads as a strip rather than taking the page over. Only one copy is ever displayed. */
.meter-mobile{display:none}
@media(max-width:52rem){
  .meter-mobile{display:block;margin:1.5rem 0 .25rem}
  .meter-mobile .meter{padding:.9rem 1rem 1rem}
  .meter-mobile .meter-intro{display:none}
  .meter-mobile .meter .kicker{margin-bottom:.35rem}
  .meter-mobile .meter-stage{min-height:0;padding:.1rem 0 .3rem}
  /* The dial is an SVG that fills its container and scales its own height with the width, so it is
     the width that has to be capped. The long caption goes: it explains the rubric, and the rubric
     has its own page. This turns 385px of apparatus into a ~130px strip. */
  .meter-mobile .meter-stage svg{width:128px;height:auto;display:block;margin:0 auto}
  /* The grade is the point of the whole dial. Everything inside the SVG scales with its width, so at
     phone size a 30px letter rendered at ~17px and read as a smudge. Bumped inside the viewBox and
     given a touch more weight and a slightly brighter red — same palette, no redesign. */
  .meter-mobile .dial-grade{font-size:41px;font-weight:800;fill:#a02a1e}
  .meter-mobile .dial-sub{font-size:11px;fill:#3a352e}
  .meter-mobile .dial-lab{font-size:12px}
  /* The cap IS the piece being graded — the headline, the publisher, and its strongest point.
     Hiding it left a dial with no subject, which is useless. It stays, small, and the long
     "strongest" line goes on phones to keep the strip short. */
  .meter-mobile .meter-cap{display:block;font-size:.86rem;line-height:1.3;margin-top:.4rem;
    text-align:center}
  .meter-mobile .meter-cap .meter-meta{display:block;font-size:.7rem;opacity:.85;margin-top:.15rem}
  .meter-mobile .meter-cap .meter-best{display:none}
  .meter-mobile .meter-slide{height:auto}
  .meter-mobile .meter-slide h3,.meter-mobile .meter-slide .meter-title{font-size:.95rem;
    line-height:1.25;margin:.3rem 0 .15rem}
  .meter-mobile .meter-more{display:none}
  .rail-home .meter{display:none}
}
main{max-width:var(--measure);margin:0 auto;padding:2.2rem 1.25rem 4rem}
h1{font-size:2rem;line-height:1.2;margin:.2rem 0 .6rem;letter-spacing:-.01em}
h2{font-size:1.35rem;line-height:1.3;margin:1.9rem 0 .5rem}
h3{font-size:1.1rem;margin:1.6rem 0 .4rem}
p{margin:0 0 1.1rem}
a{color:var(--accent)}
blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--rule);
           color:#3d3731;font-style:italic}
blockquote p:last-child{margin-bottom:0}
.kicker{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.74rem;
        letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.deck{color:#3d3731;font-size:1.1rem;line-height:1.5}
.byline{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.82rem;
        color:var(--muted);margin-top:-.4rem}
.card{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.card:first-of-type{border-top:1px solid var(--rule)}
.card h2{margin:0 0 .5rem}
.card h2 a{color:var(--ink);text-decoration:none}
.card h2 a:hover{color:var(--accent)}
.card .deck{margin-bottom:.5rem}
article.post>header{margin-bottom:1.9rem;padding-bottom:1.3rem;border-bottom:1px solid var(--rule)}
article.post .content{font-size:1.09rem}
article.post .content p:first-of-type{font-size:1.14rem}
.sourcebox{margin:2.6rem 0 0;padding:1.1rem 1.2rem;background:#f3efe7;border:1px solid var(--rule);
           font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.86rem;
           line-height:1.5;color:#3d3731}
.sources{margin:2.8rem 0 0;padding-top:1.4rem;border-top:2px solid var(--accent)}
.sources h2{font-size:1.05rem;margin:0 0 .3rem;letter-spacing:.02em}
.sources-note{margin:0 0 .8rem;font-size:.82rem;color:#6b6459;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.sources ol{margin:0;padding-left:1.5rem;font-size:.88rem;line-height:1.65;color:#3d3731}
.sources li{padding:.18rem 0;border-bottom:1px dotted rgba(0,0,0,.07)}
.sources li:last-child{border-bottom:none}
.sourcebox strong{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
                  color:var(--muted);margin-bottom:.45rem}
.sourcebox a{word-break:break-word}
footer{max-width:var(--measure);margin:0 auto;padding:2rem 1.25rem 3.4rem;border-top:1px solid var(--rule);
       color:var(--muted);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
       font-size:.82rem;line-height:1.6}
footer p{margin:.5rem 0}
.pager{display:flex;justify-content:space-between;margin-top:2.6rem;font-size:.85rem;
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.related{margin-top:2.4rem;border-top:1px solid var(--rule);padding-top:1.1rem;
         font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.92rem}
.related h2{font:600 .72rem/1.4 inherit;letter-spacing:.16em;text-transform:uppercase;
            color:#6b6459;margin:0 0 .7rem}
.related ul{list-style:none;margin:0;padding:0}
.related li{padding:.42rem 0;border-bottom:1px dotted var(--rule)}
.related li:last-child{border-bottom:none}
.related .meta{color:#8a8375;font-size:.78rem;letter-spacing:.04em}
.topics{margin:.55rem 0 0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
        font-size:.8rem;letter-spacing:.03em;color:#6b6459}
.topics a{color:#8a1f11;text-decoration:none;border-bottom:1px solid rgba(138,31,17,.25)}
.topics a:hover{border-bottom-color:#8a1f11}
.hub-intro{margin:1.3rem 0 1.6rem;padding-left:1rem;border-left:2px solid var(--rule)}
.hub-intro p{margin:.5rem 0}
.hub-depth{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.8rem;
           color:#6b6459;letter-spacing:.02em}
.hub-count{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.82rem;
           color:#8a8375;border-top:1px solid var(--rule);padding-top:.9rem}
table.rubric{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;
             font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.82rem}
table.rubric th{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--rule);
                color:#6b6459;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.7rem}
table.rubric td{padding:.55rem .6rem;border-bottom:1px dotted var(--rule);vertical-align:top}
table.rubric td.dim{font-weight:600;white-space:nowrap}
table.rubric td.wt,.rubric .wt{color:#8a8375;white-space:nowrap}
svg.grades{width:100%;max-width:640px;height:auto;margin:1rem 0 1.8rem;display:block}
ul.pending{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.85rem;
           color:#6b6459;padding-left:1.1rem}
ul.pending li{margin:.35rem 0}
.lead{margin:0 0 2.2rem;padding-bottom:1.7rem;border-bottom:2px solid var(--rule)}
.lead .kicker{color:#8a1f11;letter-spacing:.14em}
/* One lead piece at full weight, the rest at reading weight. */
.hero-img{display:block;margin:0 0 1rem}
.hero-img img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:#f3efe7}
.hero h2{font-size:2rem;line-height:1.13;margin:.15rem 0 .6rem}
.hero h2 a{color:var(--ink);text-decoration:none}
.hero h2 a:hover{color:var(--accent)}
.hero .deck{font-size:1.08rem;color:#3a352e;margin-bottom:.55rem}
.stream{margin-bottom:1.2rem}
.card.has-thumb{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1.05rem;
                align-items:start;padding:1.15rem 0}
.card.has-thumb .card-thumb{display:block}
.card.has-thumb .card-thumb img{width:100%;height:auto;display:block;border:1px solid var(--rule);
                                background:#f3efe7}
.card.has-thumb h2{font-size:1.06rem;line-height:1.3;margin:0 0 .3rem}
.card.has-thumb .deck{font-size:.94rem;color:#4a443c;margin:0 0 .3rem;line-height:1.5}
.card.has-thumb .kicker{font-size:.68rem;margin-bottom:.2rem}
.card.has-thumb .byline{font-size:.76rem;margin:0}

/* ── front page ─────────────────────────────────────────────────────────────
   The lead story owns the top of the page at full width; the two columns begin
   underneath it, exactly as the old front page did. */
:root{--sec-scholarship:#2c4a6b;--sec-investigation:#8e2334;--sec-global:#2f6556;
      --sec-editorial:#3d3f42;--sec-satire:#b0702a;--brass:#a6803f}
.sec-scholarship{--sec:var(--sec-scholarship)}
.sec-investigation{--sec:var(--sec-investigation)}
.sec-global{--sec:var(--sec-global)}
.sec-editorial{--sec:var(--sec-editorial)}
.sec-satire{--sec:var(--sec-satire)}
body.front .shell{max-width:68rem;grid-template-columns:minmax(0,43rem) minmax(0,20rem);
                  gap:2.6rem}
body.front .rail{padding-left:1.6rem}
.front-lead .lead-story{max-width:68rem;margin:0 auto;padding:2.1rem 1.25rem 2.5rem}
.lead-story{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.4rem;
            align-items:center;border-bottom:2px solid var(--ink)}
.lead-art{position:relative;display:block;overflow:hidden;background:var(--ink);aspect-ratio:4/3}
.lead-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease}
.lead-story:hover .lead-art img{transform:scale(1.03)}
.lead-art::after{content:"";position:absolute;left:0;top:0;width:64px;height:6px;
                 background:var(--sec,var(--accent))}
.lead-label{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.66rem;
            font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
            margin:0 0 .5rem}
.lead-story .kicker{color:var(--sec,var(--accent));margin:0}
.lead-title{margin:.55rem 0 .8rem;font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.08;
            letter-spacing:-.012em}
.lead-title a{color:var(--ink);text-decoration:none}
.lead-title a:hover{color:var(--sec,var(--accent))}
.lead-excerpt{font-size:1.05rem;line-height:1.6;color:#3d3731;margin:0 0 .9rem}
.read-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
           font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.72rem;
           font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
           border-bottom:2px solid var(--ink);padding-bottom:.35rem;text-decoration:none}
.read-link:hover{color:var(--sec,var(--accent));border-color:var(--sec,var(--accent))}
.mission{position:relative;overflow:hidden;margin:0 0 2.2rem;padding:2.3rem 1.5rem;
         background:#1d1b18;color:#ece6d8;text-align:center}
.mission::before{content:"";position:absolute;inset:0;opacity:.09;
                 background:url("/assets/fulcrum-watermark.svg") center/420px auto no-repeat}
.mission-quote{position:relative;max-width:32rem;margin:0 auto 1rem;font-style:italic;
               font-size:1.12rem;line-height:1.55;color:#f3eee3}
.mission-quote::before{content:"\201C";display:block;font-size:3rem;line-height:.6;color:var(--brass);
                       margin-bottom:.6rem}
.mission-link{position:relative;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
              font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
              color:#ece6d8;border-bottom:1px solid var(--brass);padding-bottom:.3rem;
              text-decoration:none}
.mission-link:hover{color:var(--brass)}
.section-header{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.72rem;
                font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
                border-bottom:1px solid var(--rule);padding-bottom:.6rem;margin:0 0 1.3rem}
.article-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.7rem 1.4rem}
.article-card{display:flex;flex-direction:column;background:#fbf9f3;border:1px solid var(--rule);
              transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.article-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(40,30,15,.12);
                    border-color:var(--sec,var(--accent))}
.card-art{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink);
          border-bottom:3px solid var(--sec,var(--accent))}
.card-art img{width:100%;height:100%;object-fit:cover;display:block}
.article-card .card-body{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.45rem;
  flex:1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.article-card .kicker{color:var(--sec,var(--accent));margin:0;font-size:.66rem}
.card-title{font-family:inherit;font-size:1.02rem;line-height:1.32;margin:0;font-weight:600}
.card-title a{color:var(--ink);text-decoration:none}
.article-card:hover .card-title a{color:var(--sec,var(--accent))}
.article-card .byline{margin-top:auto;font-size:.72rem;margin-bottom:0}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:2.2rem;
        border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.legend>div{padding:.85rem .8rem;border-left:1px solid var(--rule)}
.legend>div:nth-child(odd){border-left:none}
.legend .kicker{color:var(--sec,var(--accent));margin:0;font-size:.66rem}
.legend p{margin:.4rem 0 0;font-size:.8rem;line-height:1.5;color:#4a4640}
@media(max-width:52rem){
  .lead-story{grid-template-columns:1fr}
  body.front .shell{grid-template-columns:minmax(0,1fr)}
  .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:34rem){
  .article-grid{grid-template-columns:1fr}
  /* A five-column grade table is 436px wide on a 375px screen. Below 34rem each row becomes a
     stacked block with its column heading above the value, so nothing is clipped and nothing
     needs a sideways scroll. */
  table.rubric{display:block;border:0}
  table.rubric thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.rubric tbody,table.rubric tr,table.rubric td{display:block;width:auto}
  table.rubric tr{border-bottom:1px solid var(--rule);padding:.75rem 0}
  table.rubric tr:last-child{border-bottom:0}
  table.rubric td{border:0;padding:.1rem 0;font-size:.92rem}
  table.rubric td[data-label]::before{content:attr(data-label);display:block;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.66rem;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.1rem}
}

/* ── restored from the old site: skip link, section beam, footer, article art ── */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#f6f2e9;padding:.6rem 1rem;
  z-index:50;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.85rem}
.skip:focus{left:.5rem;top:.5rem}
.beam{max-width:var(--shell);margin:0 auto;height:6px;padding:0 1.25rem}
.beam span{display:block;height:6px;
  background:linear-gradient(90deg,var(--sec-scholarship) 0 20%,var(--sec-investigation) 20% 40%,
    var(--sec-global) 40% 60%,var(--sec-editorial) 60% 80%,var(--sec-satire) 80%)}
footer.site-footer{max-width:none;padding:0;border-top:none;margin-top:3rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.84rem;line-height:1.55}
.footer-beam{height:6px;
  background:linear-gradient(90deg,var(--sec-scholarship) 0 20%,var(--sec-investigation) 20% 40%,
    var(--sec-global) 40% 60%,var(--sec-editorial) 60% 80%,var(--sec-satire) 80%)}
.footer-inner{max-width:var(--shell);margin:0 auto;padding:2rem 1.25rem 1.4rem;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:1.6rem 2rem}
.footer-brand p{margin:.4rem 0 0;color:#4a4640}
.footer-title{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;
  color:var(--ink);margin:0}
.footer-head{font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;
  color:var(--accent);margin:0 0 .5rem}
ul.footer-links{list-style:none;margin:0;padding:0}
ul.footer-links li{margin:.25rem 0;word-break:break-word}
ul.footer-links a{color:#4a4640;text-decoration:none;border-bottom:1px solid transparent}
ul.footer-links a:hover{color:var(--accent);border-bottom-color:rgba(142,35,52,.35)}
.colophon{max-width:var(--shell);margin:0 auto;padding:.9rem 1.25rem 2rem;display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--rule);
  color:var(--muted);font-size:.78rem}
.article-hero{max-width:52rem;margin:0 auto 1.6rem}
.article-hero img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;
  background:var(--ink);border-bottom:3px solid var(--sec,var(--accent))}
.satire-note{max-width:52rem;margin:0 auto 1.6rem;padding:.7rem .9rem;text-align:center;
  border:1px dashed var(--sec-satire);background:rgba(176,112,42,.07);color:var(--sec-satire);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.72rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:52rem){.footer-inner{grid-template-columns:1fr 1fr}}
@media(max-width:34rem){.footer-inner{grid-template-columns:1fr}}
.stream-more{margin:1.4rem 0 2rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
             font-size:.86rem}
/* Right column on the front page: the site describing itself rather than repeating the stream. */
.rail-home .rail-block{margin:0 0 1.5rem;padding:0 0 1.25rem;border-bottom:1px solid var(--rule);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.86rem;line-height:1.55}
.rail-home .rail-block p{margin:.4rem 0}
.rail-h{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
        font-weight:600;margin:0 0 .55rem}
.rail-links a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(142,35,52,.3)}
.rail-links a:hover{border-bottom-color:var(--accent)}
ul.topic-list{list-style:none;margin:0;padding:0}
ul.topic-list li{display:flex;justify-content:space-between;gap:.5rem;
                 border-bottom:1px dotted var(--rule);padding:.36rem .15rem .36rem 0}
ul.topic-list a{color:var(--ink);text-decoration:none}
ul.topic-list a:hover{color:var(--accent)}
ul.topic-list .n{color:#8a8375;font-variant-numeric:tabular-nums}
ul.topic-list-wide{max-width:34rem}
ul.topic-list-wide li{padding:.6rem 0}
.searchbox,.signup-row{display:flex;gap:.4rem;margin-top:.5rem}
.searchbox input,.signup-row input{flex:1;min-width:0;padding:.45rem .55rem;background:#fff;
  border:1px solid var(--rule);font:inherit;color:var(--ink)}
.searchbox button,.signup-row button{padding:.45rem .7rem;border:1px solid var(--rule);
  background:#f3efe7;font:inherit;cursor:pointer;white-space:nowrap}
.signup-row button{border-color:var(--accent);background:var(--accent);color:#fff}
.signup-off input,.signup-off button{opacity:.5;cursor:not-allowed}
.signup label{display:block;font-weight:600;margin-bottom:.15rem}
.signup-note{color:#6b6459;font-size:.8rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Two-column shell: the stream stays at a readable measure, the rail carries the rest of the site
   so a reader can see what else exists without scrolling to the bottom. */
.shell{max-width:var(--shell);margin:0 auto;display:grid;
       grid-template-columns:minmax(0,var(--measure)) minmax(0,var(--rail));gap:3rem;
       padding:0 1.25rem}
.shell:not(.has-rail){grid-template-columns:minmax(0,var(--measure));justify-content:center}
.shell main{max-width:none;margin:0;padding:2.2rem 0 4rem}
.masthead{max-width:var(--shell)}
footer{max-width:var(--shell)}
/* The rail scrolls on its own, so it has to own its scrollbar: reserve the gutter and keep the
   content clear of it, or the thumb rides over the cards and the topic counts. */
.rail{position:sticky;top:3.4rem;align-self:start;padding:2.2rem .85rem 4rem 1.6rem;
      border-left:1px solid var(--rule);max-height:calc(100vh - 3.4rem);overflow-y:auto;
      scrollbar-width:thin;scrollbar-gutter:stable;overscroll-behavior:contain}
.rail .kicker{margin-bottom:.9rem}
/* Same idiom as the front-page rail: the plate, the headline once, then one line of why. */
.rail-side{padding-right:.85rem;scrollbar-gutter:stable}
.side-card{margin:0 0 1.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--rule)}
.side-card:last-of-type{border-bottom:none}
.side-card h3{font-size:.98rem;line-height:1.3;margin:.55rem 0 .3rem}
.side-card h3 a{color:var(--ink);text-decoration:none}
.side-card h3 a:hover{color:var(--accent)}
.side-card .teaser{font-size:.82rem;line-height:1.5;color:#4a443c;margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.side-thumb{display:block;border:1px solid var(--rule);background:var(--ink);overflow:hidden}
.side-thumb img{display:block;width:100%;height:auto;aspect-ratio:40/21;object-fit:cover}
.side-card h3{font-size:.99rem;line-height:1.32;margin:.55rem 0 .3rem}
.side-card h3 a{color:var(--ink);text-decoration:none}
.side-card h3 a:hover{color:var(--accent)}
.teaser{margin:0;color:var(--muted);font-size:.86rem;line-height:1.5}
.rail-more{font-size:.82rem;margin-top:.4rem}
/* Sticky section toolbar — every section is one click from anywhere. */
.topbar{position:sticky;top:0;z-index:20;background:rgba(251,249,245,.97);
        border-bottom:1px solid var(--rule)}
.topbar-in{max-width:var(--shell);margin:0 auto;padding:.5rem 1.25rem;display:flex;
           align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.tb-brand{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.76rem;
          letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--ink);
          text-decoration:none;white-space:nowrap}
.topbar nav{display:flex;gap:.1rem;flex-wrap:wrap;font-family:-apple-system,BlinkMacSystemFont,
            "Segoe UI",sans-serif;font-size:.73rem;letter-spacing:.08em;text-transform:uppercase}
.topbar nav a{color:var(--muted);text-decoration:none;padding:.34rem .5rem}
.topbar nav a:hover{color:var(--accent);background:#f1ebe1}
.tb-search{border:1px solid var(--rule)}
@media(max-width:60rem){
  .shell{grid-template-columns:minmax(0,1fr);gap:0}
  .shell main{padding-top:1.6rem}
  /* Reading order is the product: the lead, then the stream, then the apparatus. The rail used to
     take order:-1 here, which pushed ~1,400px of search box, grade meter and report cards in front
     of the article grid — on the screen size most readers arrive on. */
  .rail{order:0;position:static;max-height:none;border-left:0;
        border-top:1px solid var(--rule);padding:1.6rem 0 1rem}
  .rail .side-card{display:grid;grid-template-columns:6.2rem 1fr;gap:.75rem;margin-bottom:.85rem}
  .rail .side-thumb{grid-row:1/3;margin:0}
  .rail .side-card h3{margin:0;font-size:.93rem}
  .rail .teaser{display:none}
  .rail-more{margin:0}
}
#q{width:100%;padding:.7rem .8rem;font:inherit;border:1px solid var(--rule);background:#fff;
   border-radius:2px}
#hits{margin-top:1.6rem}
#hits .card{border-top:none}
/* grade meter — five slides, one visible at a time, no JavaScript.
   Every slide runs the same 5-stop cycle offset by a negative delay, so slide one is already
   mid-window on first paint and no slide has to wait out a delay before its first turn. */
.meter{margin:0 0 1.8rem;box-sizing:border-box;max-width:100%;background:#f4efe6;color:var(--ink);padding:1rem 1.05rem 1.15rem;
       border:1px solid var(--rule);border-top:3px solid var(--accent)}
.meter .kicker{color:var(--accent);letter-spacing:.11em;margin-bottom:.5rem}
.meter-cap a{color:var(--ink)}
.meter-cap a:hover{color:var(--accent)}
.meter-meta{color:var(--muted)}
.meter-meta a{color:var(--accent)}
.meter-intro{color:#3d3731;margin:0 0 .9rem;font-size:.88rem;line-height:1.45}
.meter-stage{display:grid}
/* keyframe stops cannot take calc()/var(), so one cycle per slide count we can serve.
   Each slide owns 1/n of the cycle; a fixed fifth would blank the stage whenever fewer
   than five articles are held. */
.meter-slide{grid-area:1/1;margin:0;opacity:0;
  animation-name:meter-cycle-5;
  animation-duration:var(--meter-total);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  animation-delay:calc((var(--meter-i) - var(--meter-n)) * var(--meter-total) / var(--meter-n))}
.meter--n1 .meter-slide{animation-name:meter-cycle-1}
.meter--n2 .meter-slide{animation-name:meter-cycle-2}
.meter--n3 .meter-slide{animation-name:meter-cycle-3}
.meter--n4 .meter-slide{animation-name:meter-cycle-4}
.meter--n5 .meter-slide{animation-name:meter-cycle-5}
@keyframes meter-cycle-1{0%{opacity:1}100%{opacity:0}}
@keyframes meter-cycle-2{0%{opacity:1}50%{opacity:0}100%{opacity:0}}
@keyframes meter-cycle-3{0%{opacity:1}33.33%{opacity:0}100%{opacity:0}}
@keyframes meter-cycle-4{0%{opacity:1}25%{opacity:0}100%{opacity:0}}
@keyframes meter-cycle-5{0%{opacity:1}20%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce) {
  .meter-slide{animation:none!important;opacity:0}
  .meter-slide:first-child{opacity:1}
}
/* The meter pauses the moment a reader touches it, and stops entirely while a report card is
   open: a carousel that slides away while you are reading is a carousel that hides its evidence. */
.meter:hover .meter-slide{animation-play-state:paused}
/* All five slides share grid-area 1/1 so they can cross-fade. Once a report card is open that
   stacking becomes a defect: the other four are still laid out in the same cell and their text
   paints through the card. An open card takes the cell alone and leaves the flow static. */
.meter-stage:has(.meter-slide[open]) .meter-slide{animation:none!important;opacity:0}
.meter-stage:has(.meter-slide[open]) .meter-slide:not([open]){display:none}
.meter-stage:has(.meter-slide[open]) .meter-slide[open]{display:block;grid-area:auto;
  opacity:1;position:static;height:auto;background:#f4efe6}
.meter-slide>summary{list-style:none;cursor:pointer}
.meter-slide>summary::-webkit-details-marker{display:none}
.meter-slide>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.meter-more{color:var(--accent);font-weight:600;white-space:nowrap}
.meter-slide[open] .meter-more::after{content:" (open)"}
.report-card{margin:.75rem 0 0;padding-top:.75rem;border-top:1px solid var(--rule);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.82rem;line-height:1.45}
.rc-head{display:flex;align-items:baseline;gap:.5rem}
.rc-letter{font-size:1.6rem;font-weight:700;color:var(--accent);line-height:1}
.rc-score{color:#4a443c;font-variant-numeric:tabular-nums}
.rc-meaning{font-style:italic;color:#4a443c;margin:.25rem 0 .55rem}
.meter-best{display:block;margin-top:.3rem;color:#5d564d;font-size:.76rem}
.meter-spread{margin:.75rem 0 0;padding-top:.65rem;border-top:1px solid var(--rule);
  color:#5d564d;font-size:.78rem;line-height:1.45}
.rc-prov{margin:0 0 .55rem;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;
  color:#8a5b1f;font-weight:600}
.rc-row-empty .rc-points{color:#8a5b1f;font-style:italic}
.rc-row{display:grid;grid-template-columns:1fr auto;gap:.1rem .5rem;padding:.42rem 0;
  border-top:1px dotted var(--rule)}
.rc-label{font-weight:600;color:var(--ink);margin:0}
.rc-points{margin:0;color:#6b6459;white-space:nowrap;font-variant-numeric:tabular-nums}
.rc-pips{display:inline-flex;gap:2px;margin-left:.4rem;vertical-align:middle}
.rc-pip{width:9px;height:9px;border:1px solid #b3a795;display:block}
.rc-pip.on{background:var(--accent);border-color:var(--accent)}
.rc-note{grid-column:1/-1;margin:.15rem 0 0;color:#5d564d;font-size:.78rem}
.rc-true{grid-column:1/-1;margin:.55rem 0 0;padding:.45rem .55rem;background:rgba(142,35,52,.06);
  color:#3d3731;font-size:.78rem}
.rc-out{margin:.6rem 0 0;font-weight:600}
.rc-out a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(142,35,52,.35)}
.rc-foot{margin:.45rem 0 0;color:#6b6459;font-size:.76rem}
.rc-foot a{color:var(--accent)}
.rc-flag{margin:.55rem 0 0;padding:.45rem .55rem;border-left:3px solid var(--accent);
  background:rgba(142,35,52,.05);font-size:.77rem;color:#3d3731}
.rc-flag.risk{border-left-style:dashed;background:rgba(138,91,31,.06)}
.rc-ev{margin:.5rem 0 0}
.rc-ev summary{cursor:pointer;color:var(--accent);font-size:.78rem}
.rc-ev-note{margin:.45rem 0 .55rem;padding:.4rem .5rem;background:rgba(0,0,0,.035);
  font-size:.75rem;color:#5d564d;border-left:2px solid rgba(142,35,52,.35)}
.rc-ev p{margin:.4rem 0;font-size:.76rem;color:#4a443c}
.dial{display:block;width:100%;max-width:34rem;height:auto}
.dial-lab{font-size:11px;fill:#5d564d;font-family:inherit;font-weight:600}
.dial-grade{font-size:30px;fill:var(--accent);font-family:inherit;font-weight:700}
.dial-sub{font-size:9.5px;fill:#4a443c;font-family:inherit}
.meter-cap{margin:.6rem 0 0;font-size:.92rem;line-height:1.35}
.meter-meta{display:block;color:#6b6459;font-size:.8rem;margin-top:.2rem}
@media(max-width:32rem){h1{font-size:1.62rem}body{font-size:1.02rem}}