/* articles — the "sheet" family: reading measure, TL;DR panel, wide figures,
   optional sticky mini-TOC (pillar guides), related cards. */

.arthero{background:radial-gradient(760px 420px at 24% 0%,rgba(29,130,198,.14),transparent 62%),var(--bg);border-bottom:1px solid var(--line);padding:56px 0 44px}
.crumbs{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:22px}
.crumbs a{color:var(--mut2)}
.crumbs a:hover{color:var(--cyan2)}
.arthero .kicker{margin-bottom:16px}
.arthero h1{max-width:20ch}
.artmeta{display:flex;flex-wrap:wrap;gap:var(--g1);margin-top:20px}

/* TL;DR answer panel */
.tldr{position:relative;margin:34px 0 0;max-width:760px;border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:var(--rad-s);background:linear-gradient(180deg,rgba(18,33,61,.55),rgba(12,24,48,.35));padding:22px 26px 20px}
.tldr .tag{display:inline-block;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.tldr p{color:var(--ink);font-size:15.5px;line-height:1.7;margin:0}

/* layout: optional TOC rail + prose */
.artbody{padding:64px 0 84px}
.artbody .wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--g5);align-items:start}
/* A solo article had FOUR different right edges -- hero figure at 1144, the rule above a
   section head at 845, ragged text at 836, container at 1295 -- none of them shared. An
   alignment system's job is to produce a SMALL number of shared edges. Capping the solo
   wrap at 1000px makes .prose's own 1000px cap the container, so figures gain a real
   right edge, and centring the text children puts prose and full-bleed figures on one
   axis. Two edges: 700 and 1000. (B-D2) */
.artbody .wrap.solo{grid-template-columns:minmax(0,1fr);max-width:1000px}
.artbody .wrap.solo>.prose>*{margin-inline:auto}
.toc{position:sticky;top:104px;border:1px solid var(--line);border-radius:var(--rad-s);padding:20px 20px 16px;background:rgba(12,24,48,.4)}
.toc h2{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut2);margin-bottom:12px}
.toc ol{list-style:none;display:grid;gap:var(--g1)}
.toc a{display:block;font:500 13px var(--disp);color:var(--mut);padding:3px 0;transition:color .2s}
.toc a:hover{color:var(--cyan2)}
@media (max-width:1120px){
  .artbody .wrap{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;margin-bottom:8px}
}

/* The measure is held on the TEXT children, not on .prose itself — otherwise a
   `.wide` child can never exceed its parent and nothing breaks the column. */
.prose{max-width:1000px}
.prose>*{margin-bottom:16px;max-width:min(660px,68ch)}
.prose>.wide,.prose>.figrow,.prose>.herofig,.prose>.tablewrap{max-width:none}
.prose h2{font:600 clamp(22px,2.6vw,29px)/1.22 var(--disp);letter-spacing:-.01em;margin:44px 0 14px;padding-top:30px;border-top:1px solid var(--line2)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
/* One kicker species site-wide. .kicker (chrome) and comparison.css both draw a 26px
   cyan rule before the label; the article kicker was a bare number, so the same
   semantic job -- opening a numbered section -- had two unrelated forms. (A-D11) */
.prose h2 .kick{display:flex;align-items:center;gap:var(--g2);font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.prose h2 .kick::before{content:"";width:26px;height:1px;background:var(--cyan);flex-shrink:0}
.prose h3{font:600 17px/1.35 var(--disp);margin:26px 0 12px}
/* Body was set entirely in --mut, so 3,000 words read as flat grey-blue with no tonal
   variation anywhere -- --ink appeared only inside <strong>. --prose sits between the
   two; --mut is now reserved for captions, notes and metadata. (A-E3) */
.prose p{color:var(--prose)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{margin:0 0 16px 2px;display:grid;gap:var(--g1);list-style:none}
.prose ul li{position:relative;padding-left:24px;color:var(--prose);font-size:16px}
.prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:13px;height:2px;background:var(--cyan)}
.prose ol{counter-reset:art}
.prose ol li{position:relative;padding-left:34px;color:var(--prose);font-size:16px;counter-increment:art}
.prose ol li::before{content:counter(art,decimal-leading-zero);position:absolute;left:0;top:.1em;font:500 12px var(--mono);color:var(--cyan)}

/* wide figures break the measure */
.prose .wide{max-width:none;margin:30px 0}
.prose .wide .tablewrap{background:rgba(12,24,48,.5)}
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2);max-width:none;margin:30px 0}
.figrow .photocard img{aspect-ratio:4/3}
@media (max-width:700px){.figrow{grid-template-columns:1fr}}
.keybox{border:1px solid var(--line2);border-radius:var(--rad-s);background:rgba(12,24,48,.45);padding:20px 24px;margin:26px 0}
.keybox .tag{display:inline-block;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.keybox p,.keybox li{font-size:14.5px}
.herofig{max-width:none;margin:0 0 30px;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line)}
.herofig img{width:100%;max-height:420px;object-fit:cover}
/* This carried 100+ character SENTENCES in uppercase mono at 4.15:1, full width.
   Uppercase removes every word-shape cue a reader uses; at that length it stops being
   readable, and it is the caption doing the explanatory work under the main image.
   Uppercase mono is now reserved for LABELS of 2-4 words. (A-D8) */
.herofig figcaption{padding:14px 18px;border-top:1px solid var(--line);background:rgba(12,24,48,.5)}
.herofig figcaption>span{display:block;font:400 13px/1.6 var(--body);letter-spacing:0;text-transform:none;color:var(--mut);max-width:72ch}

/* related cards */
.artrelated{border-top:1px solid var(--line);background:var(--bg2);padding:64px 0}
.artrelated h2{font:600 clamp(22px,2.6vw,28px)/1.2 var(--disp);margin-bottom:26px}
.relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g2)}
.relgrid a{display:block;border:1px solid var(--line);border-radius:var(--rad-s);padding:18px 20px;background:rgba(12,24,48,.4);transition:border-color .2s,background .2s,transform .22s}
.relgrid a:hover{border-color:rgba(76,196,255,.4);background:rgba(41,170,227,.06);transform:translateY(-3px)}
.relgrid span{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.relgrid b{display:block;font:600 14.5px var(--disp);margin-top:6px}
@media (max-width:900px){.relgrid{grid-template-columns:1fr}}

/* .endband lives in chrome.css -- it is on every page type, and it was declared here
   AND in service.css, byte for byte, on 23 pages that load both. (Round 5, B.) */

/* A cell spanning three rows sat top-aligned with each row keeping its own bottom rule, so
   the reader saw row 1 answered and rows 2 and 3 blank -- exactly inverting the table's
   argument, which is that three devices collapse into one. (round 4, A #1) */
.prose td[rowspan]{vertical-align:middle;border-left:1px solid var(--line2);
  background:rgba(41,170,227,.04)}