/* The Marked Chart Wire (option B): the front page and the section pages in the site's card style. Colors come only
   from tokens.css (tone tints, up/down chips); display serif titles, sans body, mono numbers, like Sectors and Today.
   Loaded by wire.html, wire_section.html and wire_story.html in place of the old newspaper sheet (wire.css). */

.wb-root{padding-bottom:56px}
.wb{width:min(1080px,100% - 32px);margin:0 auto}
@media (min-width:768px){.wb{width:min(1080px,100% - 48px)}}
.wb a{text-underline-offset:3px}

/* ---------- page header: the Sectors pattern, story and counts beside the illustration ---------- */
.wb-head{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;padding:26px 0 24px}
@media (min-width:900px){.wb-head{grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:40px;padding:40px 0 32px}}
.wb .wb-eb{color:var(--coral-700);letter-spacing:.12em}
.wb .wb-h1{font-family:var(--serif);font-weight:600;font-size:var(--t-title);line-height:var(--t-title-lh);letter-spacing:-.03em;font-variation-settings:"opsz" 144;margin:4px 0 0}
.wb .wb-lede{margin-top:14px;max-width:46ch;font-size:18px;line-height:28px;color:var(--ink-2)}
.wb .wb-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:16px;font:500 13px/18px var(--mono);color:var(--ink-3)}
.wb .wb-status b{font-weight:600;color:var(--ink-2)}
.wb-dot{width:8px;height:8px;border-radius:50%;background:var(--recheck);flex:none}
.wb-status.live .wb-dot{background:var(--emerald);box-shadow:0 0 0 3px var(--emerald-50);animation:wb-pulse 2.4s ease-in-out infinite}
.wb-status.live b{color:var(--emerald)}
@keyframes wb-pulse{50%{box-shadow:0 0 0 6px var(--emerald-50)}}
@media (prefers-reduced-motion:reduce){.wb-status.live .wb-dot{animation:none}}
.wb .wb-paused{margin-top:12px;padding:10px 14px;border-radius:var(--r-btn);border-left:3px solid var(--gold);background:var(--gold-50);color:var(--gold-ink);font-size:14px}
/* The two counts beside the title: deep navy tiles with white text (the count box rule, docs/design-system.md);
   the ear, a stock with its move, is a heat tile in the color of that move (.hN from mc.css). */
.wb-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.wb-stat{display:grid;align-content:center;gap:2px;min-width:132px;padding:10px 16px;border-radius:var(--r-btn);background:var(--navy-900);color:var(--on-dark);text-decoration:none;box-shadow:var(--shadow)}
.wb-stat>b{font:600 28px/1.15 var(--mono);letter-spacing:-.02em;color:var(--white)}
.wb-stat>span:last-child{font:500 11px/14px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--on-dark-2)}
.wb-stat-tk{background:var(--heat,var(--navy-900));color:var(--heat-ink,var(--on-dark));transition:transform .15s ease-out,box-shadow .15s ease-out}
.wb-stat-tk:hover{transform:translateY(-1px);text-decoration:none}
.wb-stat-tk>span:last-child{color:inherit;opacity:.92}
.wb-stat-sym{display:flex;align-items:center;gap:8px;min-height:32px}
.wb-stat-sym b{font:600 22px/1.2 var(--mono);color:inherit}
.wb .wb-eb a{color:inherit;text-decoration:none}
.wb .wb-eb a:hover{text-decoration:underline}
/* A section page: the section's name with its story count beside it */
.wb-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:4px}
.wb-title-row .wb-h1{margin:0}
.wb-count-lg{height:34px;padding:0 14px;font-size:13px;background:var(--navy-900);border-color:var(--navy-900);color:var(--on-dark-2);box-shadow:var(--shadow)}
.wb-count-lg b{color:var(--white)}
@media (min-width:900px){.wb-head-sec{grid-template-columns:minmax(0,1fr) minmax(0,440px)}}
.wb-head-art{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 16px 40px rgba(30,42,68,.18);background:var(--surface-2)}
.wb-head-art img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
@media (max-width:899px){.wb-head-art img{aspect-ratio:2/1;object-position:50% 40%}}

/* ---------- section pills: sticky under the top bar, scroll sideways inside on phones ---------- */
.wb-navbar{position:sticky;top:var(--bar-h);z-index:15;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wb-nav{width:min(1080px,100% - 32px);margin:0 auto;display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
@media (min-width:768px){.wb-nav{width:min(1080px,100% - 48px)}}
.wb-nav::-webkit-scrollbar{display:none}
.wb-nav a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);
  color:var(--ink-2);font:500 14px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:border-color .15s ease-out,background .15s ease-out}
.wb-nav a:hover{border-color:var(--line-strong);background:var(--surface-2)}
.wb-nav a[aria-current="page"]{background:var(--navy-900);border-color:var(--navy-900);color:var(--white)}

/* ---------- Hot right now: one tile per story, filled by the story's tone ----------
   The shiny tile in the news tone's hue (docs/design-system.md): the deep emerald step for positive news and the deep
   red step for negative, each with white text, the gold step with ink for neutral; the same depth as a sector tile on
   a big day. The tone word chip stays, so color is never the only signal, and the named stock's move today and its
   60-day line (in ink, like a sector tile) sit at the bottom. tests/test_wire_tone.py checks every pair's contrast. */
.wb-hotstrip{margin-top:24px}
.wb-hot-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap}
.wb .wb-hot-h{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:24px;line-height:30px}
.wb-flame{width:10px;height:10px;border-radius:50%;background:var(--coral-600);box-shadow:0 0 0 4px var(--coral-50);flex:none}
.wb .wb-hot-note{font-size:13px;line-height:18px;color:var(--ink-3)}
.wb-key{white-space:nowrap}
.wb-key::before{content:"";display:inline-block;width:10px;height:10px;margin:0 5px 0 1px;border-radius:3px;vertical-align:-1px;background:var(--tone-bg);box-shadow:inset 0 0 0 1px rgba(27,34,51,.12)}
.wb-hot-grid{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.wb-hot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.wb-hot-grid{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}}      /* --n: the tile count */
.wb-ht-positive,.wb-key-positive{--tone-bg:var(--heat-p4);--tone-ink:var(--white);--tone-chip:var(--up-ink)}
.wb-ht-neutral,.wb-key-neutral{--tone-bg:var(--gold);--tone-ink:var(--ink);--tone-chip:var(--gold-ink)}
.wb-ht-negative,.wb-key-negative{--tone-bg:var(--heat-m4);--tone-ink:var(--white);--tone-chip:var(--dn-ink)}
.wb-ht{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 14px 12px;border-radius:var(--r-card);border:1px solid rgba(27,34,51,.08);
  background:var(--tone-bg);color:var(--tone-ink);transition:transform .15s ease-out,box-shadow .15s ease-out}
.wb-ht:has(.spk){padding-bottom:0}
/* even heights in a full row; one or two stories size to their text (a lone tile spans the row) */
@media (min-width:1000px){.wb-hot-grid:has(>li:nth-child(3)) .wb-ht{min-height:168px}}
/* An odd last tile in the two-column grids takes the full row */
@media (max-width:999px){.wb-ht:last-child:nth-child(odd){grid-column:1/-1}}
.wb-ht:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){.wb-ht,.wb-ht:hover{transition:none;transform:none}}
.wb .wb-ht-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wb-ht time{font:500 12px/16px var(--mono);color:inherit;opacity:.92}
.wb-tone{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--surface);color:var(--tone-chip);
  font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.wb-ht-a{color:inherit;font:600 15px/21px var(--sans);text-decoration:none}
.wb-ht-a:hover{text-decoration:underline}
.wb-ht-mv{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px;color:inherit;text-decoration:none}
/* The ticker chip's backing: an ink wash under the white text of the deep tones (a white wash read 3.5:1), a
   white wash under the ink of the gold tone; both at 6.9:1 or better. */
.wb-ht-mv b{font:600 13px/20px var(--mono);padding:0 7px;border-radius:5px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.wb-ht-neutral .wb-ht-mv b{background:color-mix(in srgb,var(--white) 45%,transparent)}
.wb-ht-mv em{display:flex;align-items:center;gap:4px;font:700 24px/28px var(--mono);font-style:normal;letter-spacing:-.04em;white-space:nowrap;color:inherit}
.wb-ht-mv em i{font-style:normal;font-size:12px;line-height:1;letter-spacing:0}
.wb-ht-mv:hover b{text-decoration:underline}
.wb-ht .spk{width:calc(100% + 28px);height:24px;margin:2px -14px 0;color:inherit}
/* .mc .wb-ht so this outranks mc.css's shared .mc .spk-ink .spk-w caption rule */
.mc .wb-ht .spk-w{top:auto;bottom:2px;right:14px;margin:0;padding:0 3px;border-radius:3px;color:inherit;opacity:.92;background:color-mix(in srgb,var(--tone-bg) 72%,transparent)}
/* phones: two tiles a row, so the strip stays about half a screen tall */
@media (max-width:639px){
  .wb-hot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-ht{padding:8px 10px 10px;gap:4px}
  .wb-ht:has(.spk){padding-bottom:0}
  .wb .wb-ht-top{flex-wrap:wrap;gap:4px 8px}
  .wb-ht-a{font-size:14px;line-height:19px}
  .wb-ht-mv{flex-wrap:wrap;gap:2px 8px}
  .wb-ht-mv em{font-size:18px;line-height:22px}
  .wb-ht .spk{width:calc(100% + 20px);margin:2px -10px 0}
}

/* ---------- cards ---------- */
.wb-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:border-color .15s ease-out,box-shadow .15s ease-out}
article.wb-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.wb-body{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 16px 16px;flex:1}
.wb-art{margin:0;background:var(--surface-2);aspect-ratio:16/9;overflow:hidden}
.wb-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease-out}
article.wb-card:hover .wb-art img{transform:scale(1.03)}
.wb-art.ph img{object-fit:contain;padding:12%}
.wb .wb-k{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.wb-hot{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 7px;border-radius:var(--r-pill);background:var(--coral-600);color:var(--white);
  font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;vertical-align:2px}
.wb .wb-sum{font-size:15px;line-height:22px;color:var(--ink-2)}
.wb .wb-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:auto;padding-top:4px}
.wb-meta time{font:500 12px/18px var(--mono);color:var(--ink-3);white-space:nowrap}
.wb-chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.wb-tk{display:inline-flex;align-items:center;gap:6px;padding:2px 3px 2px 9px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .15s ease-out}
.wb-tk.np{padding-right:9px}
.wb-tk b{font:600 12.5px/18px var(--mono);letter-spacing:.01em}
.wb-tk .chg{font-size:12px;line-height:16px;padding:1px 7px}
.wb-tk:hover{border-color:var(--navy-900);text-decoration:none}
.wb-tk.big .chg.dn{background:var(--heat-m4);color:var(--white)}
.wb-tk.big .chg.up{background:var(--heat-p4);color:var(--white)}
.wb .wb-card-h{font:600 17px/23px var(--sans);letter-spacing:-.005em}
.wb .wb-card-h a,.wb .wb-top-h a,.wb .wb-lead-h a{color:var(--ink);text-decoration:none}
.wb .wb-card-h a:hover,.wb .wb-top-h a:hover,.wb .wb-lead-h a:hover{text-decoration:underline;text-decoration-thickness:1px}

/* ---------- front: lead, three seconds and the stock tiles beside the rail ---------- */
.wb-front{display:grid;gap:16px;margin-top:28px}
@media (min-width:1000px){.wb-front{grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}.wb-front.no-rail{grid-template-columns:minmax(0,1fr)}}
.wb-main,.wb-rail{display:grid;gap:16px;min-width:0}
/* A short rail (the visitor card and Inside the wire) stays in view beside a long main column */
@media (min-width:1000px){.wb-rail-stick{position:sticky;top:calc(var(--bar-h) + 72px)}.wb-rail .wb-inside ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wb-lead{display:grid}
@media (min-width:700px){.wb-lead{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}.wb-lead .wb-art{aspect-ratio:auto;height:100%;min-height:320px}}
.wb-lead .wb-body{padding:18px 20px 20px;gap:10px}
.wb .wb-lead-h{font-family:var(--serif);font-weight:600;font-size:clamp(26px,2.6vw,32px);line-height:1.12;letter-spacing:-.022em;font-variation-settings:"opsz" 96}
.wb .wb-lead .wb-sum{font-size:16px;line-height:25px}
.wb-seconds{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.wb-second{display:flex;flex-direction:column}
@media (max-width:639px){
  .wb-seconds{grid-template-columns:minmax(0,1fr)}
  .wb-second{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start}
  .wb-second .wb-art{aspect-ratio:1/1;margin:14px 0 0 14px;border-radius:8px}
  .wb-second .wb-body{padding:12px 14px 14px}
  .wb .wb-second .wb-card-h{font-size:16px;line-height:22px}
}

/* Stocks in today's news: the site's stock tiles (symbol, day chip, name, 60-day line) */
.wb-stocks{padding:16px 16px 0}
.wb .wb-stocks-h{font-family:var(--serif);font-size:22px;line-height:28px}
.wb-st-grid{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.wb-st-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* The tiles themselves are the site's shiny stock tiles (mc.css .st-tile, _shine.html tile()). */
.wb-st-grid>li{display:flex;min-width:0}
.wb-lockband{display:block;margin:0 -16px;padding:12px 16px;border-top:1px solid var(--line);background:var(--navy-50);color:var(--navy-900);font:600 14px/20px var(--sans);text-decoration:none}
.wb-lockband:hover{text-decoration:underline}

/* ---------- rail: In focus, Inside the wire, the visitor card ---------- */
.wb-focus-head{padding:16px 16px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.wb .wb-focus-h{font-family:var(--serif);font-size:26px;line-height:32px}
.wb .wb-focus-n{margin-top:2px;font:500 12px/16px var(--mono);color:var(--ink-3)}
.wb-focus-n b{color:var(--ink);font-weight:600}
.wb-focus ol{list-style:none;margin:0;padding:0;counter-reset:f}
.wb-focus li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:2px 10px;padding:10px 16px;border-top:1px solid var(--line)}
.wb-focus li:first-child{border-top:0}
.wb-focus li::before{counter-increment:f;content:counter(f);grid-row:span 2;align-self:start;margin-top:2px;width:24px;height:24px;border-radius:50%;background:var(--navy-900);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;font:600 12px/1 var(--mono)}
.wb-focus time{font:500 11.5px/16px var(--mono);color:var(--ink-3)}
.wb-focus li a{font:600 14.5px/20px var(--sans);color:var(--ink);text-decoration:none}
.wb-focus li a:hover{text-decoration:underline}
.wb-focus li .wb-hot{margin-right:6px;height:18px}
.wb-inside{padding:16px}
.wb-inside .eyebrow{margin:0 0 6px}
.wb-inside ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (min-width:640px){.wb-inside ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.wb-inside ul{grid-template-columns:repeat(5,minmax(0,1fr))}}
.wb-inside a{display:flex;align-items:center;justify-content:space-between;gap:6px;height:100%;min-height:38px;padding:6px 6px 6px 10px;border-radius:var(--r-btn);background:var(--paper);border:1px solid var(--line);
  color:var(--ink);font:500 13.5px/18px var(--sans);text-decoration:none;transition:border-color .15s ease-out}
.wb-inside a:hover{border-color:var(--navy-900)}
.wb-inside a[aria-current="page"]{border-color:var(--navy-900);box-shadow:inset 0 0 0 1px var(--navy-900);font-weight:600}
.wb-inside b{flex:none;min-width:30px;text-align:center;padding:3px 6px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);font:600 12px/14px var(--mono)}
.wb-cta{padding:18px;background:var(--navy-900);border-color:var(--navy-900);color:var(--on-dark)}
.wb .wb-cta .wb-eb{color:var(--gold)}
.wb .wb-cta-p{font-size:15px;line-height:22px;color:var(--on-dark)}
.wb-cta .b{width:100%;margin-top:14px;text-align:center;justify-content:center}

/* ---------- the news by section ---------- */
.wb-band{display:flex;align-items:center;gap:14px;margin:48px 0 0}
.wb-band .eyebrow{margin:0;color:var(--navy-700);letter-spacing:.12em}
.wb-band::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.wb-sec{margin-top:28px}
.wb-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin-bottom:14px}
.wb-sec-t{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.wb .wb-sec-h{font-family:var(--serif);font-size:28px;line-height:34px}
@media (min-width:900px){.wb .wb-sec-h{font-size:30px;line-height:36px}}
.wb-sec-h a{color:var(--ink);text-decoration:none}
.wb-sec-h a:hover{text-decoration:underline;text-decoration-thickness:1px}
.wb-count{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);color:var(--ink-3);font:500 12px/1 var(--mono);white-space:nowrap}
.wb-count b{color:var(--ink);font-weight:600}
.wb .wb-more{font-size:14px;line-height:20px;padding-bottom:4px}
.wb-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.wb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wb-top{grid-column:1/-1}}
@media (min-width:1000px){.wb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.wb-top{grid-column:span 2}}
.wb-top{display:grid}
@media (min-width:640px){.wb-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.wb-top .wb-art{aspect-ratio:auto;height:100%;min-height:230px}}
.wb .wb-top-h{font-family:var(--serif);font-weight:600;font-size:22px;line-height:28px;letter-spacing:-.015em}
.wb-brief{display:flex;flex-direction:column}
.wb-brief .wb-body{padding:16px}
.wb-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:12px;padding:16px 18px;border-radius:var(--r-card);background:var(--navy-50);border-left:3px solid var(--coral-600)}
.wb-note>div{flex:1 1 320px;min-width:0}
.wb-note .eyebrow{margin:0 0 4px}
.wb .wb-note-h{font:600 17px/24px var(--sans);color:var(--navy-900)}
.wb .wb-note-p{margin-top:2px;font-size:14px;line-height:20px;color:var(--ink-2)}
.wb-note .b{flex:none;background:var(--surface)}

/* ---------- a section page: the last three days by date, as the same cards ---------- */
.wb-day .wb-band{margin-top:44px}
.wb .wb-day-h{margin:0;font-family:var(--serif);font-weight:600;font-size:22px;line-height:28px;letter-spacing:-.01em;color:var(--ink)}
@media (min-width:900px){.wb .wb-day-h{font-size:26px;line-height:32px}}
.wb-day .wb-band .wb-count{order:2}
.wb-day .wb-band::after{order:1}
.wb-day .wb-grid{margin-top:14px}
.wb-story{display:flex;flex-direction:column}
.wb-story.wb-top{display:grid}
.wb-pic .wb-art{flex:none}
/* A notice among a day's stories takes one card's place, so the grid stays full */
.wb-grid>.wb-note{margin-top:0;flex-direction:column;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap}
.wb-grid>.wb-note>div{flex:none}

.wb-empty{padding:24px}
.wb-empty .wb-sum{margin-top:10px}
.wb .wb-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:18px;color:var(--ink-3)}

/* Late edition: a floating pill when new stories land */
.late{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:30;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);
  background:var(--navy-900);color:var(--white);font:600 14px/1 var(--sans);box-shadow:0 8px 24px rgba(30,42,68,.28);cursor:pointer}
.late[hidden]{display:none}
.late:hover{background:var(--navy-700)}

/* phones: tighter cards, wider pictures */
@media (max-width:639px){
  .wb-grid{gap:8px}
  .wb-top .wb-art{aspect-ratio:2/1}
  .wb-brief .wb-body,.wb-top .wb-body{padding:12px 14px 14px;gap:6px}
  .wb .wb-sum{font-size:14.5px;line-height:21px}
  .wb .wb-card-h{font-size:16px;line-height:22px}
  .wb .wb-top-h{font-size:20px;line-height:26px}
  .wb .wb-sec-h{font-size:26px;line-height:32px}
  .wb-sec{margin-top:32px}
  .wb-sec-head{margin-bottom:10px}
  .wb-lead .wb-body{padding:14px 16px 16px}
}

/* ---------- a story's own page (wire_story.html): the section header pattern holding the story ---------- */
.wb-story-head .wb-k{margin-top:14px}
.wb .wb-story-head .wb-lead-h{margin:8px 0 0}
.wb-story-head .wb-lede{max-width:52ch}
.wb .wb-story-head .wb-meta{margin-top:14px}