/* news.css | DNN, the DEVLESS News Network: /news, /news-article, 404. Owner: pixel-news.
   Spec: creative/components.md C1 to C16 and D, creative/layouts.md 2 and 3, creative/motion.md 7, qa/aegis-report.md MUST 1 to 15.
   Tokens: base.css (kit) + tokens.css (Iris, pixel-world owns). Mobile first. No fade-up, no hover lift, no section reveals. */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* fallback metrics so the swap to Archivo and Inter does not shift layout (CLS < 0.05) */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 90%; descent-override: 22%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

.dnn-page {
  --head: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --sans: "Inter", "Inter Fallback", system-ui, sans-serif;
  --nav-h: 44px;
  --measure: 34em;     /* Iris punch 1 item 2: 66ch ran about 87 characters in Inter; 34em is about 71. pixel-world mirrors in tokens.css */
  --measure-dek: 28em;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}
html:has(.dnn-page) { scroll-padding-top: calc(var(--nav-h) + var(--s-5)); scroll-padding-bottom: 72px; }
@media (prefers-reduced-motion: no-preference) { html:has(.dnn-page) { scroll-behavior: smooth; } }

.cg { white-space: nowrap; }
.cg > .chip { margin-inline: 0.15em 0.05em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono, .num, time { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }
.mu { color: var(--mu); }
.small { font-size: var(--t-small); }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* ---------- focus (aegis MUST 1, 2): outline, never a box-shadow ring on clipped shapes ---------- */
.dnn-page :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.dnn-page .btn:focus-visible { clip-path: none; outline: 2px solid var(--c-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg); }
.dnn-page .plate :focus-visible, .dnn-page .btn.pri:focus-visible { outline-color: var(--ac-fg); box-shadow: 0 0 0 2px var(--ac); }
.dnn-page .skip:focus { left: var(--s-3); outline: 2px solid var(--ac-fg); outline-offset: -4px; }
@media (forced-colors: active) {
  .dnn-page :focus-visible { outline: 2px solid CanvasText; }
  .slab, .story-std, .badge, .pill, .tbtn, .crawl-toggle { border: 1px solid CanvasText; }
  svg { forced-color-adjust: auto; }
}

/* ---------- shared atoms ---------- */
.g { display: inline-block; inline-size: 0.75rem; block-size: 0.75rem; flex: none; vertical-align: -0.05em; }
.g-burn, .g-wake, .g-birth { color: var(--ev-burn); }
.g-vote { color: var(--ev-vote); }
.g-grant { color: var(--ev-grant); }
.g-pause { color: var(--ev-pause); }
.g-refuse { color: var(--ev-refuse); }
.g-trade { color: var(--ev-trade); }
.g-world, .g-company, .g-duel { color: var(--fgl); }
.g-globe { color: currentColor; }
.glyph-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.lnk { min-block-size: var(--hit-small); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out); }
@media (hover: hover) { .lnk:hover { text-decoration-color: currentColor; } }
button.lnk { font: inherit; font-size: var(--t-ui); font-weight: 600; }

.watch {
  display: inline-flex; align-items: center; gap: var(--s-3); min-block-size: var(--hit-small);
  font-size: var(--t-ui); font-weight: 600; color: var(--ac2);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.watch .g { inline-size: 0.875rem; block-size: 0.875rem; }
@media (hover: hover) { .watch:hover { color: var(--fg); text-decoration-color: currentColor; } }
.btn.watch { text-decoration: none; }
.btn.watch .g { color: var(--ac-fg); }
@media (pointer: coarse) { .watch, .lnk, .desks a, .tbtn, .pill { min-block-size: var(--hit-min); } }

.help { margin-top: var(--s-3); font-size: var(--t-small); color: var(--mu); }

.slab {
  --step: 3px;
  background: var(--sf); border: 1px solid var(--ln2); clip-path: var(--cut);
  padding: var(--s-5);
}
@media (min-width: 768px) { .slab { padding: var(--s-6); } }
.slab-h { font-family: var(--head); font-weight: 700; font-size: var(--t-h4); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--s-3); }
.slab-intro { color: var(--fgl); font-size: var(--t-small); margin-bottom: var(--s-4); }

.tbtn, .pill {
  display: inline-flex; align-items: center; gap: var(--s-3); min-block-size: 2rem; padding: 0 var(--s-4);
  font-size: var(--t-small); font-weight: 500; color: var(--fg);
  background: var(--sf); border: 1px solid var(--c-control); border-radius: var(--r-pill);
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
@media (hover: hover) { .tbtn:hover, .pill:hover { border-color: var(--fgl); } }
.pill-sq { inline-size: 8px; block-size: 8px; border: 1px solid var(--fgl); }
.pill[data-on="1"] { background: var(--sf3); border-color: var(--ac); }
.pill[data-on="1"] .pill-sq { background: var(--ac); border-color: var(--ac); }

.dnn-page .btn.ghost { background: none; border: 1px solid transparent; box-shadow: none; color: var(--ac2); padding-inline: var(--s-2); }
@media (hover: hover) { .dnn-page .btn.ghost:hover { background: none; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } }

/* ---------- C1 masthead + desk nav ---------- */
.mast { background: var(--bg); border-bottom: 1px solid var(--ln); }
.mast-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); }
.mast-logo { display: inline-flex; align-items: center; gap: var(--s-3); min-block-size: var(--hit-small); margin-right: auto; }
.dnn {
  --step: var(--step-s);
  display: inline-flex; align-items: center; padding: 5px 7px 4px; background: var(--ac); color: var(--ac-fg);
  font-family: var(--mono); font-weight: 500; font-size: var(--t-bug); letter-spacing: var(--tr-bug); line-height: 1; clip-path: var(--cut);
}
.mast-name { font-size: var(--t-ui); font-weight: 600; color: var(--fg); }
.mast-strap { display: none; font-size: var(--t-small); color: var(--mu); }
.mast-clock { font-size: var(--t-mono); color: var(--fgl); }
.mast-world { display: none; }
.mast-world .g { inline-size: 0.875rem; block-size: 0.875rem; }
@media (min-width: 480px) { .mast-strap { display: block; order: 1; flex-basis: 100%; margin-top: calc(var(--s-2) * -1); } }
@media (min-width: 768px) {
  .mast-strap { order: 0; flex-basis: auto; margin-top: 0; margin-right: auto; }
  .mast-logo { margin-right: 0; }
  .mast-world { display: inline-flex; }
}

.badge-wrap { position: relative; }
.badge {
  --step: var(--step-s);
  display: inline-flex; align-items: center; min-block-size: var(--hit-small); padding: var(--s-2) var(--s-3);
  font-family: var(--mono); font-size: var(--t-chip); color: var(--fgl); background: var(--sf2);
  border: 1px solid var(--warn); clip-path: var(--cut);
}
.badge:focus-visible { clip-path: none; }
.badge-note {
  position: absolute; right: 0; top: calc(100% + var(--s-3)); z-index: var(--z-popover);
  inline-size: min(320px, calc(100vw - 2 * var(--s-5))); padding: var(--s-4);
  background: var(--sf2); border: 1px solid var(--ln2); box-shadow: var(--el-float);
  font-size: var(--t-small); color: var(--fg);
}

.desks { position: sticky; top: 0; z-index: var(--z-banner); background: var(--bg); border-bottom: 1px solid var(--ln); }
.desks ul { display: flex; gap: var(--s-1); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-inline: var(--s-2); margin-inline: calc(var(--s-2) * -1); }
.desks ul::-webkit-scrollbar { display: none; }
.desks ul.more { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.desks li { scroll-snap-align: start; flex: none; }
.desks a {
  position: relative; display: inline-flex; align-items: center; min-block-size: var(--nav-h); padding-inline: var(--s-3);
  font-size: var(--t-ui); font-weight: 500; color: var(--mu); white-space: nowrap; transition: color var(--d-fast) var(--e-out);
}
.desks a::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 0; block-size: 2px; background: var(--ac); transform: scaleX(0); transform-origin: left; }
.desks a[aria-current="true"] { color: var(--fg); }
.desks a[aria-current="true"]::after { transform: scaleX(1); }
.desks a:focus-visible { outline-offset: -4px; }
@media (hover: hover) { .desks a:hover { color: var(--fg); } }

/* ---------- C3 broadcast hero ---------- */
.hero { background: var(--bg); padding-block: var(--s-6) var(--s-7); }
.hero-grid { display: grid; grid-template-columns: 120px 1fr; column-gap: var(--s-5); align-items: start; }
.hero-main, .anchor { display: contents; }
.anchor-frame { grid-column: 1; grid-row: 1 / span 2; }
.bugrow { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); align-self: end; }
.anchor-plate { grid-column: 2; grid-row: 2; align-self: start; margin-top: var(--s-2); }
.kicker, .plate-h, .hero .dek, .stamp, .hero-actions, .help, .anchor-intro, .anchor-caption, .anchor-ctrl, .transcript, .anchor-note { grid-column: 1 / -1; }
.hero .kicker { margin-top: var(--s-6); }
@media (min-width: 480px) { .hero-grid { grid-template-columns: 160px 1fr; } }
@media (min-width: 1024px) {
  .hero { padding-block: var(--s-9) var(--s-8); }
  .hero-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .hero-main { display: block; grid-column: 1 / 8; }
  .anchor { display: block; grid-column: 8 / 13; }
  .hero .kicker { margin-top: var(--s-7); }
}
@media (min-width: 1600px) { .hero-main { grid-column: 1 / 9; } .anchor { grid-column: 9 / 13; } }

/* C2 LIVE bug */
.live-bug { display: inline-flex; align-items: stretch; font-family: var(--mono); font-weight: 500; font-size: var(--t-bug); letter-spacing: var(--tr-bug); text-transform: uppercase; line-height: 1; }
.live-plate { --step: var(--step-s); display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 5px; background: var(--ac); color: var(--ac-fg); clip-path: var(--cut); }
.live-dot { position: relative; inline-size: 6px; block-size: 6px; background: var(--ac-fg); }
.live-dot::after { content: ""; position: absolute; inset: 0; box-shadow: 0 0 0 1px var(--ac-fg); opacity: 0; }
.live-dot.pulse::after { animation: live-pulse var(--d-slow) var(--e-out) 1; }
.live-bug.idle .live-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--ac-fg); }
@keyframes live-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
.live-sim { display: inline-flex; align-items: center; padding: 6px 8px 5px; background: var(--sf2); color: var(--fgl); }
.seg-title { font-family: var(--mono); font-size: var(--t-mono); color: var(--fgl); }
.live-updated { font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); }

.kicker { display: flex; align-items: center; gap: var(--s-3); font-family: var(--mono); font-size: var(--t-mono); color: var(--mu); }
.plate-h {
  margin-top: var(--s-3); font-family: var(--head); font-weight: 800; font-size: var(--t-plate); line-height: var(--lh-display);
  letter-spacing: var(--tr-display); color: var(--fg); max-inline-size: 18ch; view-transition-name: event-plate;
}
.plate-h .chip, .story-h .chip, .ch-h .chip { vertical-align: 0.35em; }
.hero .dek { margin-top: var(--s-5); max-inline-size: var(--measure-dek); color: var(--fgl); font-size: var(--t-body); }
.stamp { margin-top: var(--s-4); font-size: var(--t-mono); color: var(--mu); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }


/* C4 anchor monitor */
.anchor-frame { position: relative; }
.anchor-svg { inline-size: 100%; block-size: auto; aspect-ratio: 320 / 248; overflow: visible; }
.anchor-svg .px-hi { fill: var(--px-hi); } .anchor-svg .px-body { fill: var(--px-body); } .anchor-svg .px-lo { fill: var(--px-lo); }
.anchor-svg .px-glass { fill: var(--px-glass); } .anchor-svg .px-eye { fill: var(--px-eye); }
.anchor-svg .sky-0 { stop-color: var(--sky2); } .anchor-svg .sky-1 { stop-color: var(--sky0); }
.anchor-svg .glow-0 { stop-color: var(--ac); stop-opacity: 1; } .anchor-svg .glow-1 { stop-color: var(--ac); stop-opacity: .45; } .anchor-svg .glow-2 { stop-color: var(--ac); stop-opacity: 0; }
.anchor-svg .core { fill: var(--ac-h); }
.anchor-svg .stratum { stroke: var(--ac); stroke-opacity: .16; }
.anchor-svg .stratum.s2 { stroke-opacity: .3; }
.anchor-svg .stratum.current { stroke-opacity: .55; }
.anchor-svg .edge { stroke: var(--ac); stroke-width: 1px; stroke-opacity: .75; }
.anchor-svg .ripple { stroke: var(--ac); stroke-width: 1px; stroke-opacity: .8; }
.anchor-svg .haze { fill: var(--mu); fill-opacity: 0; }
.anchor-svg.w-haze .haze { fill-opacity: .08; } .anchor-svg.w-fog .haze { fill-opacity: .16; } .anchor-svg.w-deep-fog .haze { fill-opacity: .26; }
.anchor-svg .frame-edge { stroke: var(--warn); stroke-width: 3px; stroke-opacity: 0; transition: stroke-opacity var(--d-fast) var(--e-out); }
.anchor.report-pause .frame-edge { stroke-opacity: 1; }
.anchor-plate { font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); }
.anchor-name { color: var(--fg); }
.anchor-intro { margin-top: var(--s-5); font-size: var(--t-small); color: var(--fgl); }
.anchor-caption {
  --step: 3px;
  margin-top: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--sf); border-left: 3px solid var(--ac);
  font-size: var(--t-small); color: var(--fg); line-height: 1.5;
}
.anchor.report-pause .anchor-caption { border-left-color: var(--warn); }
.anchor-caption { display: grid; }
.anchor-line { grid-area: 1 / 1; visibility: hidden; }
.anchor-line.on { visibility: visible; }
.anchor-caption .chip { pointer-events: none; }
.anchor-line.wipe { animation: line-in var(--d-panel) var(--e-out) 1 both; }
@keyframes line-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.anchor-ctrl { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.transcript { margin-top: var(--s-4); padding-left: var(--s-5); list-style: decimal; font-size: var(--t-small); color: var(--fgl); display: grid; gap: var(--s-3); }
.transcript li::marker { font-family: var(--mono); color: var(--mu); }
.anchor-note { margin-top: var(--s-4); font-size: var(--t-small); color: var(--mu); }
@media (min-width: 1024px) {
  .anchor-frame { max-inline-size: 420px; }
  .anchor-plate { margin-top: var(--s-3); }
}

@media (max-width: 767.98px) {
  .anchor-intro, .anchor-note { display: none; }
  .anchor-caption { display: none; }   /* decorative cadence; the transcript button keeps every line one tap away */
  .anchor-ctrl { margin-top: var(--s-3); }
  .hero { padding-block: var(--s-5) var(--s-6); }
  .hero .kicker { margin-top: var(--s-5); }
  .hero-actions { gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
  .hero-actions .btn.ghost { inline-size: auto; }
  .hero .help { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* C5 breaking band */
.breaking { background: var(--bg); }
.breaking-plate {
  background: var(--ac); color: var(--ac-fg); position: relative;
  animation: band-in var(--d-third) var(--e-out) 1200ms both;
}
.breaking[data-tone="pause"] .breaking-plate { box-shadow: inset 0 3px 0 var(--warn); }
.breaking-plate::after { content: ""; position: absolute; left: 0; bottom: 0; block-size: 3px; inline-size: 100%; background: var(--ac-fg); transform-origin: left; transform: scaleX(0); opacity: .35; animation: sting 500ms var(--e-in-out) 1560ms 1 both; }
@keyframes band-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sting { 0% { transform: scaleX(0); opacity: .35; } 99% { transform: scaleX(1); opacity: .35; } 100% { transform: scaleX(1); opacity: 0; } }
.breaking-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); }
@media (min-width: 1024px) { .breaking-in { flex-wrap: nowrap; } }
.breaking-text { text-wrap: balance; flex: 1 1 20rem; font-family: var(--head); font-weight: 700; font-size: var(--t-h4); line-height: 1.25; animation: band-in var(--d-third) var(--e-out) 1280ms both; }
.breaking-tag {
  --step: var(--step-s);
  display: inline-block; margin-right: var(--s-3); padding: 4px 7px 3px; vertical-align: 0.2em;
  background: var(--ac-fg); color: var(--ac); font-family: var(--mono); font-weight: 500; font-size: var(--t-bug); letter-spacing: var(--tr-bug); text-transform: uppercase; clip-path: var(--cut);
}
.breaking-link { font-size: var(--t-ui); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-block-size: var(--hit-small); display: inline-flex; align-items: center; }
.breaking-hide { min-block-size: var(--hit-small); min-inline-size: var(--hit-small); padding: 0 var(--s-3); font-size: var(--t-small); font-weight: 500; border: 1px solid var(--c-text-plate-mu); }
.breaking.out .breaking-plate { animation: band-out var(--d-third-out) var(--e-in) both; }
@keyframes band-out { from { opacity: 1; } to { opacity: 0; } }

/* C6 crawl */
.crawl { display: flex; align-items: stretch; min-block-size: 40px; background: var(--sf); border-block: 1px solid var(--ln2); }
.crawl-toggle {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); margin: var(--s-1);
  min-block-size: 36px; font-size: var(--t-small); font-weight: 500; color: var(--fg); background: var(--sf2); border: 1px solid var(--c-control);
}
.crawl-toggle:focus-visible { outline-offset: -4px; }
.crawl-ico { inline-size: 8px; block-size: 10px; border-inline: 3px solid var(--ac); }
.crawl-toggle[data-paused="1"] .crawl-ico { border-inline: 0; inline-size: 0; block-size: 0; border-block: 5px solid transparent; border-left: 8px solid var(--ac); }
.crawl-view { position: relative; flex: 1; min-inline-size: 0; overflow: hidden; display: flex; align-items: center; }
.crawl-track { display: flex; flex: none; align-items: center; gap: var(--s-7); padding-inline: var(--s-5) 0; margin-right: var(--s-7); white-space: nowrap; }
.crawl-belt { display: flex; flex: none; will-change: transform; }
.ci { position: relative; display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--mono); font-size: var(--t-mono); color: var(--fg); }
.ci time { color: var(--mu); }
.ci::before { content: ""; position: absolute; left: calc(var(--s-7) / -2 - 2px); top: 50%; inline-size: 4px; block-size: 4px; margin-top: -2px; background: var(--ac); }
.crawl-track > .ci:first-child::before { display: none; }
.crawl .chip { margin-block: var(--s-1); }
.crawl.static .crawl-view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.crawl.static .ci { scroll-snap-align: start; }
.crawl.static .crawl-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .crawl .crawl-view { overflow-x: auto; scroll-snap-type: x mandatory; } .crawl .ci { scroll-snap-align: start; } }

/* ---------- sections ---------- */
.desk { padding-block: var(--s-9); border-top: 1px solid var(--ln); }
.desk-top { border-top: 0; }
@media (min-width: 1024px) { .desk { padding-block: var(--s-10); } }
.desk-history { padding-block: var(--s-9) var(--s-11); }
.sec-head { margin-bottom: var(--s-7); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); }
.sec-head h2, .dotd-main h2 { font-family: var(--head); font-weight: 800; font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: var(--tr-head); }
.sec-sub { font-size: var(--t-small); color: var(--mu); max-inline-size: 60ch; }
.sec-sub.mono { font-size: var(--t-mono); }
.sec-foot { margin-top: var(--s-6); font-size: var(--t-small); color: var(--mu); }

.grid12 { display: grid; gap: var(--s-7) var(--col-gap); }

/* C8 story cards */
.story { display: flex; flex-direction: column; gap: var(--s-3); min-inline-size: 0; }
.story-h { font-family: var(--head); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); }
.story-h-lg { font-weight: 800; font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: var(--tr-head); }
.story-h a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color var(--d-fast) var(--e-out); }
@media (hover: hover) { .story-h a:hover { text-decoration-color: var(--ac2); } }
.story-dek { color: var(--fgl); max-inline-size: var(--measure-dek); }
.story-body { display: grid; gap: var(--s-4); max-inline-size: var(--measure); color: var(--fgl); font-size: var(--t-read); line-height: var(--lh-read); margin-top: var(--s-2); }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.story .kicker { flex-wrap: wrap; }
.interest { margin-left: auto; font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); padding: var(--s-1) var(--s-3); border: 1px solid var(--ln2); white-space: nowrap; }
.story-std { --step: 3px; background: var(--sf); border: 1px solid var(--ln); clip-path: var(--cut); padding: var(--s-5); }
@media (min-width: 768px) { .story-std { padding: var(--s-6); } }
.story-compact { padding-block: var(--s-5); border-top: 1px solid var(--ln); }
.story-compact .story-h { font-size: var(--t-h4); }
.story-safety { border-left: 3px solid var(--warn); padding-left: var(--s-5); }
.story-lead.story-safety { padding-left: var(--s-5); }
.story-lead .story-h { font-weight: 800; font-size: var(--t-h2); line-height: var(--lh-head); }

.still { position: relative; margin: 0 0 var(--s-3); }
.still > canvas { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; background: var(--bg); border: 1px solid var(--ln); }
.still > .plot-over { position: absolute; left: 0; top: 0; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; }
.still-cap { margin-top: var(--s-3); font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); }
.plot-over { overflow: visible; pointer-events: none; }
.plot-over .subj { fill: none; stroke-width: 2px; }
.plot-over .subj-burn { stroke: var(--ev-burn); }
.plot-over .subj-pause { stroke: var(--ev-pause); }
.plot-over .subj-grant { stroke: var(--ev-grant); }
.plot-over .subj-nation { stroke: var(--n-velloria); }
.plot-over .subj-mu { stroke: var(--mu); }
.plot-over .subj-dash { stroke-dasharray: 3 4; }
.plot-over .subj-label { fill: var(--fg); font-family: var(--mono); font-size: 11px; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.plot-over .draw { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.plot-over .draw.on { stroke-dashoffset: 0; transition: stroke-dashoffset var(--d-cine) var(--e-out); }
@media (prefers-reduced-motion: reduce) { .plot-over .draw { stroke-dashoffset: 0; } }

.top-grid { display: grid; gap: var(--s-8); }
.top-stories { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
  .top-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-lead, .story-compact { grid-column: 1 / -1; }
  .top-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
}
@media (min-width: 1024px) {
  .top-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
  .top-stories { grid-column: 1 / 9; }
  .top-side { grid-column: 9 / 13; display: block; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
}

/* C13 corrections */
.corr-list { display: grid; gap: var(--s-3); font-size: var(--t-small); }
.corr-list > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--ln); }
.corr-list dt { font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); padding-top: 2px; }
.corr-list dd { color: var(--fg); }
.corr-none { font-size: var(--t-small); color: var(--fg); margin-bottom: var(--s-4); }
.corr-sub { padding-top: var(--s-3); border-top: 1px solid var(--ln); font-family: var(--mono); font-weight: 400; font-size: var(--t-chip); color: var(--mu); }
.corr-sub + .corr-list > div:first-child { border-top: 0; }
.corr-all { margin-top: var(--s-3); margin-right: var(--s-5); }
.corr .disc { margin-top: var(--s-4); color: var(--ac2); }
.explainer { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--ln); font-size: var(--t-small); color: var(--fgl); }
.explainer-h { font-size: var(--t-ui); font-weight: 600; color: var(--fg); margin-bottom: var(--s-2); }

/* Today in the society + C9 weather */
.today-grid { display: grid; gap: var(--s-8); }
@media (min-width: 1024px) { .today-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); } .today-main { grid-column: 1 / 9; } .weather { grid-column: 9 / 13; align-self: start; } }
.today-lead { font-size: var(--t-h4); font-family: var(--head); font-weight: 700; line-height: 1.3; max-inline-size: 40ch; margin-bottom: var(--s-6); }
.digest { display: grid; }
.digest li { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s-4); padding-block: var(--s-3); border-top: 1px solid var(--ln); color: var(--fgl); }
.digest li time { font-size: var(--t-mono); color: var(--mu); padding-top: 2px; }
.digest li.extra { color: var(--mu); }
#digest-more { margin-top: var(--s-5); }
.weather p { font-size: var(--t-small); color: var(--fgl); margin-top: var(--s-3); }
.weather-reading { font-family: var(--mono); font-weight: 500; font-size: var(--t-h2); color: var(--fg); line-height: 1.1; }
.weather .weather-reading { font-size: var(--t-h2); color: var(--fg); margin-top: 0; }
.gauge { margin: var(--s-4) 0 0; }
.gauge-svg { inline-size: 100%; block-size: 18px; }
.gauge .b-deep { fill: var(--sf3); } .gauge .b-fog { fill: var(--ln2); } .gauge .b-haze { fill: var(--c-control); } .gauge .b-clear { fill: var(--fgl); }
.gauge .needle { fill: var(--ac); transition: transform var(--d-slow) var(--e-out); }
.gauge-labels { display: grid; grid-template-columns: 50fr 25fr 15fr 10fr; margin-top: var(--s-2); font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); }
.gauge-labels span:last-child { text-align: right; white-space: nowrap; }
.weather-legend { margin-top: var(--s-4); display: grid; gap: var(--s-1); font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); }
.weather .weather-light { color: var(--fg); font-style: italic; }
.weather .lnk { margin-top: var(--s-4); }

/* World, Business, Markets, Community grids */
.world-grid, .biz-grid, .mk-grid, .cm-grid, .safety-grid, .st-grid, .wk-grid, .dotd-grid, .today-grid, .top-grid, .hi-grid, .art-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
:is(.world-grid, .biz-grid, .mk-grid, .cm-grid, .safety-grid, .st-grid, .wk-grid, .dotd-grid, .today-grid, .top-grid, .hi-grid, .art-grid) > * { min-inline-size: 0; }
.rows { display: grid; }
.row { padding-block: var(--s-5); border-top: 1px solid var(--ln); display: grid; gap: var(--s-2); color: var(--fgl); }
.row:first-child { border-top: 0; padding-top: 0; }
.row-h { margin: 0; font-family: var(--head); font-weight: 700; font-size: var(--t-h4); line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); }
.row-meta { margin-top: var(--s-1); }
.rows-tight .row { padding-block: var(--s-4); }
.strip { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.strip li { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border: 1px solid var(--ln2); background: var(--sf); font-family: var(--mono); font-size: var(--t-mono); color: var(--fgl); }
.strip li.pending { border-style: dashed; color: var(--mu); }
.tint { inline-size: 8px; block-size: 8px; flex: none; }
.t-velloria { background: var(--n-velloria); } .t-ashmark { background: var(--n-ashmark); } .t-quenridge { background: var(--n-quenridge); }
.t-solvane { background: var(--n-solvane); } .t-duskreach { background: var(--n-duskreach); } .t-commons { background: var(--n-commons); }
.trio { display: grid; gap: var(--col-gap); margin-top: var(--s-8); }
.trio p:not(.story-meta):not(.kicker) { color: var(--fgl); }
@media (min-width: 1024px) {
  .world-grid, .biz-grid, .mk-grid, .cm-grid, .safety-grid, .st-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
  .world-grid > .story, .cm-grid > .story { grid-column: 1 / 7; }
  .world-grid > .rows, .cm-grid > .cm-side { grid-column: 8 / 13; }
  .biz-grid > .story, .mk-grid > .story, .safety-grid > .tbl-wrap, .st-grid > .st-main { grid-column: 1 / 9; }
  .biz-grid > .strip, .mk-grid > .rows, .safety-grid > .limits, .st-grid > .podium { grid-column: 9 / 13; align-self: start; }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .biz-grid > .strip { flex-direction: column; margin-top: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trio > :last-child { grid-column: 1 / -1; } }

.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--ln2); margin-bottom: var(--s-8); }
.board > div { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--ln); }
.board dt { font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); }
.board dd { margin-top: var(--s-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.board .num { font-weight: 500; font-size: var(--t-h3); color: var(--fg); line-height: 1.1; }
@media (min-width: 768px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .board { grid-template-columns: repeat(6, minmax(0, 1fr)); } .board > div { border-bottom: 0; } .board > div + div { padding-left: var(--s-4); border-left: 1px solid var(--ln); } }

.capviz { margin: var(--s-3) 0; max-inline-size: 36rem; }
.capviz-svg { inline-size: 100%; block-size: auto; }
.capviz .cv-track { fill: var(--sf); }
.capviz .cv-ask { fill: var(--c-refuse-sf); stroke: var(--bad); stroke-width: 1px; stroke-dasharray: 4 3; }
.capviz .cv-ok { fill: var(--ac); }
.capviz .cv-wall { fill: var(--bad); }
.capviz-cap { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-2); }
.capviz-cap > span, .cv-top > span { font-family: var(--mono); font-size: var(--t-chip); white-space: nowrap; }
.cv-top { padding-left: 35%; margin-bottom: var(--s-1); } /* the cap line sits at 1.05 / 3.0 = 35% of the bar */
.cv-top .cv-l-wall { display: inline-block; transform: translateX(-50%); color: var(--bad); }
.capviz-cap .cv-l-ok { color: var(--fg); }
.capviz-cap .cv-l-ask { color: var(--mu); text-align: right; }
.story-refuse .kicker .g { color: var(--bad); }

.cm-side { display: grid; gap: var(--s-6); align-content: start; }
.stars { display: grid; gap: var(--s-3); }
.stars li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: var(--s-1) var(--s-3); }
.star { inline-size: 8px; block-size: 8px; background: var(--ok); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.star-name { color: var(--fg); }
.stars .num { font-size: var(--t-mono); color: var(--fgl); }
.stars .bar { grid-column: 2 / -1; block-size: 3px; background: var(--ln); position: relative; }
.stars .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: var(--w, 0%); background: var(--ok); }

.story-wide .story-body { columns: 1; }
.story-wide { padding-left: var(--s-5); margin-bottom: var(--s-8); }
.limits-list { display: grid; gap: var(--s-3); font-size: var(--t-small); color: var(--fg); }
.limits-list li { padding-left: var(--s-5); position: relative; }
.limits-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; inline-size: 8px; block-size: 2px; background: var(--warn); }
.record { margin-top: var(--s-6); font-size: var(--t-mono); color: var(--fgl); }

/* tables (C11 + pause log) */
.tbl-wrap { overflow-x: auto; max-inline-size: 100%; padding: var(--s-2); margin: calc(var(--s-2) * -1); }
.tbl-wrap:focus-visible { outline-offset: -2px; }
.tbl { inline-size: 100%; border-collapse: collapse; font-size: var(--t-small); }
.tbl caption { caption-side: top; text-align: left; padding-bottom: var(--s-3); font-family: var(--head); font-weight: 700; font-size: var(--t-h4); color: var(--fg); }
.tbl th, .tbl td { padding: var(--s-3) var(--s-4) var(--s-3) 0; text-align: left; border-top: 1px solid var(--ln); vertical-align: top; }
.tbl thead th { font-family: var(--mono); font-weight: 400; font-size: var(--t-chip); color: var(--mu); border-top: 0; white-space: nowrap; }
.tbl tbody th { font-weight: 600; color: var(--fg); white-space: nowrap; }
.tbl td { color: var(--fgl); }
.tbl .num { font-size: var(--t-mono); white-space: nowrap; }
.tbl .r { text-align: right; }
.tbl tr.active th, .tbl tr.active td { color: var(--fg); }
.tbl tr.active th { box-shadow: inset 3px 0 0 var(--warn); padding-left: var(--s-3); }
.tbl td.flash { animation: cell-flash var(--d-cine) linear 1; }
@keyframes cell-flash { from { background: var(--sf3); } to { background: transparent; } }
.st-paused { color: var(--warn); }
.st-explain { color: var(--fgl); max-inline-size: 60ch; margin-bottom: var(--s-6); }
.st-hint { font-family: var(--mono); font-size: var(--t-chip); color: var(--mu); margin-bottom: var(--s-3); } /* echo E3, iris item 14: under 768 only */
@media (min-width: 768px) { .st-hint { display: none; } }
@media (max-width: 767.98px) {
  .tbl { min-inline-size: 36rem; }
  .tbl tbody th, .tbl thead th:first-child { position: sticky; left: 0; background: var(--bg); z-index: 1; }
}

.podium-svg { inline-size: 100%; max-inline-size: 240px; block-size: auto; margin-block: var(--s-3); }
.podium-svg .pd { fill: var(--sf3); stroke: var(--ac); stroke-width: 1px; }
.podium-svg .pd-1 { fill: var(--ac); }
.podium-names { display: grid; grid-template-columns: repeat(3, 1fr); max-inline-size: 240px; text-align: center; font-family: var(--mono); font-size: var(--t-chip); color: var(--fgl); margin-bottom: var(--s-4); }
.podium-names li:nth-child(1) { order: 2; color: var(--fg); } .podium-names li:nth-child(2) { order: 1; } .podium-names li:nth-child(3) { order: 3; }
.podium p { font-size: var(--t-small); color: var(--fgl); margin-bottom: var(--s-4); }

/* C10 Dev of the day */
.dotd-id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
@media (min-width: 1024px) { .dotd-id { position: sticky; top: calc(var(--nav-h) + var(--s-7)); align-self: start; align-items: center; inline-size: 10rem; } }
.ring-wrap { position: relative; inline-size: 160px; block-size: 160px; }
.pring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.pring .seg { fill: none; stroke-width: 4px; }
.pring .kept { stroke: var(--ac); } .pring .open { stroke: var(--mu2); }
.face { position: absolute; left: 50%; top: 50%; inline-size: 96px; block-size: 84px; transform: translate(-50%, -50%); }
.face svg { inline-size: 100%; block-size: 100%; }
.ring-text { font-family: var(--mono); font-size: var(--t-mono); color: var(--fgl); }
.dotd-facts { flex-basis: 100%; font-size: var(--t-mono); color: var(--fgl); }
.dotd-note { --step: 3px; padding: var(--s-4) var(--s-5); background: var(--sf); border: 1px solid var(--ln2); clip-path: var(--cut); font-size: var(--t-small); color: var(--fg); max-inline-size: var(--measure); }
.qa { margin-top: var(--s-7); display: grid; gap: var(--s-3); max-inline-size: var(--measure); }
.qa dt { font-size: var(--t-ui); font-weight: 600; color: var(--mu); margin-top: var(--s-5); }
.qa dt:first-child { margin-top: 0; }
.qa dd { display: grid; gap: var(--s-2); justify-items: start; }
.qa blockquote p { font-size: var(--t-read); line-height: var(--lh-read); color: var(--fg); }
.dotd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 1024px) { .dotd-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); } .dotd-id { grid-column: 1 / 5; } .dotd-main { grid-column: 5 / 13; } }

/* C14 DNN Weekly */
.cover { position: relative; margin: 0; aspect-ratio: 4 / 5; max-inline-size: 30rem; background: var(--bg); border: 1px solid var(--ln2); overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; }
.cover-art { position: absolute; inset: 0; margin: 0; }
.cover-art > canvas, .cover-art > .plot-over { aspect-ratio: auto; block-size: 100%; border: 0; }
.cover::after { content: ""; position: absolute; inset: 28% 0 0 0; background: linear-gradient(to bottom, transparent 0, rgba(8, 11, 22, .86) 38%, var(--bg) 62%); pointer-events: none; }
.cover-mast { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: var(--s-5); }
.cover-dnn { --step: var(--step-s); padding: 5px 7px 4px; background: var(--ac); color: var(--ac-fg); font-family: var(--mono); font-weight: 500; font-size: var(--t-bug); letter-spacing: var(--tr-bug); text-transform: uppercase; clip-path: var(--cut); }
.cover-issue { font-family: var(--mono); font-size: var(--t-mono); color: var(--fg); background: var(--bg); padding: 2px 6px; }
.cover-h { position: relative; z-index: 2; margin-top: auto; padding: 0 var(--s-5); font-family: var(--head); font-weight: 800; font-size: clamp(2.25rem, 14cqi, 5rem); line-height: var(--lh-tight); letter-spacing: var(--tr-cover); color: var(--fg); text-wrap: balance; text-shadow: 0 0 2px var(--bg), 0 0 14px var(--bg); }
.cover-lines { position: relative; z-index: 2; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--sf); border-top: 1px solid var(--ln2); display: grid; gap: var(--s-2); font-size: var(--t-small); color: var(--fg); }
.wk-side { display: grid; gap: var(--s-5); align-content: start; }
.wk-in-h { font-family: var(--head); font-weight: 700; font-size: var(--t-h4); color: var(--fg); margin-bottom: var(--s-2); }
.wk-in .row { padding-block: var(--s-4); }
.wk-in .row:first-child { border-top: 1px solid var(--ln); padding-top: var(--s-4); }
.cover-credit { font-size: var(--t-small); color: var(--mu); }
.wk-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.archive-empty { font-size: var(--t-small); color: var(--fgl); padding: var(--s-4); border: 1px dashed var(--ln2); }
@media (min-width: 1024px) { .wk-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); } .cover { grid-column: 1 / 6; } .wk-side { grid-column: 6 / 13; grid-template-rows: auto auto auto 1fr; align-self: stretch; } .archive-empty { align-self: end; } }

/* C15 History */
.hi-grid { display: grid; gap: var(--s-7); }
.hi-nav ol { display: none; }
.hi-nav-h { font-family: var(--mono); font-weight: 400; font-size: var(--t-chip); color: var(--mu); margin-bottom: var(--s-3); }
.hi-jump select {
  inline-size: 100%; min-block-size: var(--hit-min); padding: 0 var(--s-4); background: var(--sf); color: var(--fg);
  border: 1px solid var(--c-control); border-radius: var(--r2); font-size: var(--t-ui);
}
.chapters { display: grid; gap: var(--s-11); }
.chapter { display: grid; gap: var(--s-4); }
.ch-date { font-size: var(--t-mono); color: var(--mu); }
.ch-h { font-family: var(--head); font-weight: 800; font-size: var(--t-h2); line-height: var(--lh-head); letter-spacing: var(--tr-head); }
.ch-fig { max-inline-size: 48rem; }
.ch-body { font-size: var(--t-read); line-height: var(--lh-read); color: var(--fgl); max-inline-size: var(--measure); }
.ch-nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-small); }
@media (max-width: 767.98px) { .chapters { gap: var(--s-9); } }
@media (min-width: 1024px) {
  .hi-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
  .hi-nav { grid-column: 1 / 4; position: sticky; top: calc(var(--nav-h) + var(--s-5)); align-self: start; }
  .hi-nav ol { display: grid; gap: var(--s-1); }
  .hi-jump { display: none; }
  .chapters { grid-column: 4 / 13; }
  .hi-nav a { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-left: 2px solid var(--ln); color: var(--mu); font-size: var(--t-small); }
  .hi-nav a time { font-size: var(--t-chip); }
  .hi-nav a[aria-current="true"] { border-left-color: var(--ac); color: var(--fg); }
  .hi-nav a:focus-visible { outline-offset: -2px; }
}

/* C16 footer */
.foot { border-top: 1px solid var(--ln); background: var(--bg); padding-block: var(--s-9); }
.foot-in { display: grid; gap: var(--s-3); color: var(--fgl); font-size: var(--t-small); }
.foot-in > p { max-inline-size: 72ch; }
.foot-line { font-family: var(--head); font-weight: 700; font-size: var(--t-h4); color: var(--fg); }
.foot-preview { color: var(--fg); }
.foot-small { color: var(--mu); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.noscript { padding-block: var(--s-5); color: var(--mu); font-size: var(--t-small); }

/* ---------- D article ---------- */
.art-top { padding-block: var(--s-7) var(--s-6); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; font-family: var(--mono); font-size: var(--t-mono); color: var(--mu); }
.crumbs ol { display: flex; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--mu2); }
.crumbs a { color: var(--fgl); }
.art-h { margin-top: var(--s-5); font-family: var(--head); font-weight: 800; font-size: var(--t-h1); line-height: 1.05; letter-spacing: var(--tr-display); max-inline-size: 22ch; view-transition-name: event-plate; }
.art-dek { margin-top: var(--s-5); color: var(--fgl); max-inline-size: var(--measure-dek); font-size: var(--t-h4); line-height: 1.45; }
.byline { margin-top: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--t-small); color: var(--fgl); }
.byline b { color: var(--fg); font-weight: 600; }
.byline .times { font-family: var(--mono); font-size: var(--t-mono); color: var(--mu); }
.art-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.art-hero { margin-top: var(--s-7); max-inline-size: 52rem; }
@media (max-width: 479.98px) { .art-hero { margin-inline: calc(var(--gutter) * -1); } .art-hero .still-cap { padding-inline: var(--gutter); } .art-actions .btn { inline-size: 100%; } }
.art-grid { display: grid; gap: var(--s-8); padding-bottom: var(--s-9); }
.art-body { display: grid; gap: var(--s-5); max-inline-size: var(--measure); font-size: var(--t-read); line-height: var(--lh-read); color: var(--fgl); }
.art-body h2 { margin-top: var(--s-6); font-family: var(--head); font-weight: 800; font-size: var(--t-h3); line-height: 1.2; color: var(--fg); }
.art-body blockquote { padding-left: var(--s-5); border-left: 2px solid var(--ac); display: grid; gap: var(--s-2); justify-items: start; }
.art-body blockquote p { color: var(--fg); }
.qnote { font-size: var(--t-small); color: var(--mu); }
.records-tbl { inline-size: 100%; }
.feebox { --step: 3px; padding: var(--s-5); background: var(--sf); border: 1px solid var(--ln2); border-left: 3px solid var(--ac); clip-path: var(--cut); font-size: var(--t-small); color: var(--fg); }
.feebox h3 { font-family: var(--head); font-weight: 700; font-size: var(--t-h4); margin-bottom: var(--s-2); }
.watchslab { --step: 3px; display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--sf); border: 1px solid var(--ln2); clip-path: var(--cut); align-items: center; }
.watchslab .still { margin: 0; }
.watchslab h2, .watchslab h3 { margin: 0; font-family: var(--head); font-weight: 700; font-size: var(--t-h4); color: var(--fg); }
.watchslab p { font-size: var(--t-small); color: var(--fgl); }
@media (min-width: 768px) { .watchslab { grid-template-columns: 220px 1fr; } }
.watchslab-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.follow-note { font-size: var(--t-small); color: var(--mu); }
.records { border-top: 1px solid var(--ln2); padding-top: var(--s-5); }
.records-h { font-family: var(--head); font-weight: 700; font-size: var(--t-h4); color: var(--fg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.records ul { margin-top: var(--s-4); display: grid; }
.records li { padding-block: var(--s-3); border-top: 1px solid var(--ln); font-family: var(--mono); font-size: var(--t-mono); color: var(--fgl); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.records-foot { margin-top: var(--s-3); font-size: var(--t-small); color: var(--mu); }
.art-side { display: grid; gap: var(--s-6); align-content: start; }
.devlist { display: grid; gap: var(--s-3); }
.devlist li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: var(--s-3); }
.devlist .face-24 { inline-size: 28px; block-size: 24px; }
.devlist .face-24 svg { inline-size: 100%; block-size: 100%; }
.devlist b { font-weight: 600; color: var(--fg); }
.share-fab { display: none; }
@media (max-width: 1023.98px) {
  .share-fab { position: fixed; right: var(--s-5); bottom: calc(var(--s-5) + env(safe-area-inset-bottom)); z-index: var(--z-toast); min-block-size: 48px; }
  .share-fab.on { display: inline-flex; }
}
@media (min-width: 1024px) {
  .art-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
  .art-main { grid-column: 1 / 9; }
  .art-side { grid-column: 9 / 13; position: sticky; top: calc(var(--nav-h) + var(--s-5)); align-self: start; }
}
.related { border-top: 1px solid var(--ln); padding-block: var(--s-9); }
.related-list { display: grid; gap: var(--col-gap); }
@media (min-width: 768px) { .related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* share dialog (B20) */
.share-dlg { inline-size: min(560px, calc(100vw - 32px)); max-block-size: calc(100vh - 32px); padding: 0; background: var(--sf2); color: var(--fg); border: 1px solid var(--ln2); box-shadow: var(--el-float); }
.share-dlg::backdrop { background: var(--scrim); }
.share-in { display: grid; gap: var(--s-4); padding: var(--s-6); }
.share-in h2 { font-family: var(--head); font-weight: 800; font-size: var(--t-h3); }
.share-in canvas, .share-in img { inline-size: 100%; block-size: auto; aspect-ratio: 1200 / 630; background: var(--bg); border: 1px solid var(--ln); }
.share-alt { font-size: var(--t-small); color: var(--mu); }
.share-acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* 404 */
.nf { padding-block: var(--s-10); display: grid; gap: var(--s-5); max-inline-size: 44rem; }
.nf h1 { font-family: var(--head); font-weight: 800; font-size: var(--t-h1); line-height: 1.05; letter-spacing: var(--tr-display); }
.nf p { color: var(--fgl); font-size: var(--t-read); }
.nf .nf-light { font-family: var(--mono); font-size: var(--t-mono); color: var(--mu); }
.nf-acts { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.nf-face { inline-size: 96px; block-size: 84px; filter: drop-shadow(0 0 3px var(--glow2)); }
.nf-face .px-hi { fill: var(--px-hi); } .nf-face .px-body { fill: var(--px-body); } .nf-face .px-lo { fill: var(--px-lo); } .nf-face .px-screen { fill: var(--px-screen); } .nf-face .px-glass { fill: var(--px-glass); } .nf-face .px-eye { fill: var(--px-eye); }

@media (prefers-reduced-motion: reduce) {
  .breaking-plate, .breaking-text, .breaking-plate::after { animation: none; }
  .breaking-plate { animation: band-fade 120ms linear both; }
  @keyframes band-fade { from { opacity: 0; } to { opacity: 1; } }
  .live-dot.pulse::after, .anchor-line.wipe, .tbl td.flash { animation: none; }
  .gauge .needle { transition: none; }
}