/* Reader skins. Scoped to [data-skin] on the magazine shell so the rest of the site stays put.
   Ledger, Back of the Box, Trade Paper, Billboard's Chart, Sleeve, and Stream,
   Streaming's Top Shelf, Program Guide, and Late Show,
   and YouTube's Filing, Living Room, and On Air.
   Fonts are self-hosted SIL OFL (public/fonts/skins). No new font files. */

@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/libre-caslon-text-400.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/libre-caslon-text-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/skins/libre-caslon-text-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/skins/source-serif-4.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/source-serif-4-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/skins/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/skins/ibm-plex-mono-600.woff2") format("woff2");
}
@font-face {
  font-family: "Dela Gothic One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/dela-gothic-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Dela Gothic One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/dela-gothic-one-kana.woff2") format("woff2");
  unicode-range: U+3001-3002, U+3041-307F, U+3081-308F, U+3091-3093, U+3099-309A, U+309D-309E, U+30A1-30E1, U+30E3-30ED, U+30EF-30F0, U+30F2-30F4, U+30FB-30FE, U+FF0C, U+FF0E;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/skins/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/skins/space-mono-700.woff2") format("woff2");
}
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/skins/oswald-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Old Standard TT";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/old-standard-tt-400.woff2") format("woff2");
}
@font-face {
  font-family: "Old Standard TT";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/old-standard-tt-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Old Standard TT";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/skins/old-standard-tt-700.woff2") format("woff2");
}
@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 600 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/skins/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Bungee;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/skins/bungee-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/skins/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/skins/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.mag-shell[data-skin] {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--skin-body);
  color-scheme: light;
}
.mag-shell[data-skin] header.bar,
.mag-shell[data-skin] footer.bar,
.mag-shell[data-skin] #view {
  background: var(--paper);
}
.mag-shell[data-skin] header.bar {
  font-family: var(--skin-figures);
  letter-spacing: 0.08em;
}
.mag-shell[data-skin] .dek,
.mag-shell[data-skin] p { color: var(--ink); }
.mag-shell[data-skin] .by,
.mag-shell[data-skin] figcaption { color: var(--mute, #3a3a3a); }
.mag-shell[data-skin="ledger"] { --mute: #3c4654; }
.mag-shell[data-skin="box"] { --mute: #2c2c2c; }
.mag-shell[data-skin="trade"] { --mute: #2e2e2e; }
.mag-shell[data-skin="chart"] { --mute: #3a3a3a; }
.mag-shell[data-skin="sleeve"] { --mute: #3a3a3a; }
.mag-shell[data-skin="stream"] { --mute: #2c3344; }
.mag-shell[data-skin="shelf"] { --mute: #3a3a3a; }
.mag-shell[data-skin="guide"] { --mute: #3a3a3a; }
.mag-shell[data-skin="late"] { --mute: #c5cad3; color-scheme: dark; }
.mag-shell[data-skin="filing"] { --mute: #3a3a3a; }
.mag-shell[data-skin="gauge"] { --mute: #3a3a3a; }
.mag-shell[data-skin="onair"] { --mute: #c9c2b8; color-scheme: dark; }
.mag-shell[data-skin] a { color: var(--accent); }
.mag-shell[data-skin] h1 {
  font-family: var(--skin-display);
  color: var(--ink);
}
.mag-shell[data-skin] h2 {
  font-family: var(--skin-display);
  color: var(--ink);
  break-inside: avoid;
}
.mag-shell[data-skin] .big,
.mag-shell[data-skin] .kp .big,
.mag-shell[data-skin] .row span:last-child {
  font-family: var(--skin-figures);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mag-shell[data-skin] .kp .big { color: var(--accent); }
.mag-shell[data-skin] .prog { background: rgba(20, 20, 20, 0.12); }
.mag-shell[data-skin] .prog i { background: var(--accent); }

/* Icon-first picker. 44px tall so a thumb can hit it; the glyph stays small. */
.mag-shell .skin-picker {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
}
.mag-shell .skin-picker button {
  position: relative;
  width: auto;
  min-width: 44px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  display: grid;
  place-items: center;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  font: 600 10px/1 "DM Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mag-shell .skin-picker button .skin-label { pointer-events: none; }
.mag-shell .skin-picker button svg { width: 18px; height: 18px; display: block; }
.mag-shell .skin-picker button[aria-checked="true"] {
  background: rgba(20, 20, 20, 0.08);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.mag-shell .skin-picker button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.mag-shell .skin-picker button .tip {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #111);
  color: var(--paper, #fff);
  font: 600 11px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 5px 7px;
  border-radius: 2px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}
.mag-shell .skin-picker button:hover .tip,
.mag-shell .skin-picker button:focus-visible .tip,
.mag-shell .skin-picker button.is-held .tip { opacity: 1; }

.mag-shell .skin-top { break-inside: avoid; margin: 2px 0 12px; }
.mag-shell .skin-top-row { display: flow-root; }
.mag-shell .skin-ornaments { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; color: var(--ink); }
.mag-shell .skin-ornaments svg { display: none; width: 22px; height: 22px; }
.mag-shell[data-skin="ledger"] .skin-ornaments svg[data-orn="tick"],
.mag-shell[data-skin="ledger"] .skin-ornaments svg[data-orn="coins"],
.mag-shell[data-skin="ledger"] .skin-ornaments svg[data-orn="tear"],
.mag-shell[data-skin="ledger"] .skin-ornaments svg[data-orn="fist"],
.mag-shell[data-skin="box"] .skin-ornaments svg[data-orn="tag"],
.mag-shell[data-skin="box"] .skin-ornaments svg[data-orn="card"],
.mag-shell[data-skin="box"] .skin-ornaments svg[data-orn="burst"],
.mag-shell[data-skin="box"] .skin-ornaments svg[data-orn="barcode"],
.mag-shell[data-skin="trade"] .skin-ornaments svg[data-orn="ticket"],
.mag-shell[data-skin="trade"] .skin-ornaments svg[data-orn="sprocket"],
.mag-shell[data-skin="trade"] .skin-ornaments svg[data-orn="bulbs"],
.mag-shell[data-skin="trade"] .skin-ornaments svg[data-orn="halftone"],
.mag-shell[data-skin="chart"] .skin-ornaments svg[data-orn="rank"],
.mag-shell[data-skin="chart"] .skin-ornaments svg[data-orn="peak"],
.mag-shell[data-skin="chart"] .skin-ornaments svg[data-orn="weeks"],
.mag-shell[data-skin="chart"] .skin-ornaments svg[data-orn="bullet"],
.mag-shell[data-skin="sleeve"] .skin-ornaments svg[data-orn="spindle"],
.mag-shell[data-skin="sleeve"] .skin-ornaments svg[data-orn="grooves"],
.mag-shell[data-skin="sleeve"] .skin-ornaments svg[data-orn="flap"],
.mag-shell[data-skin="sleeve"] .skin-ornaments svg[data-orn="center"],
.mag-shell[data-skin="stream"] .skin-ornaments svg[data-orn="play"],
.mag-shell[data-skin="stream"] .skin-ornaments svg[data-orn="scrub"],
.mag-shell[data-skin="stream"] .skin-ornaments svg[data-orn="wave"],
.mag-shell[data-skin="stream"] .skin-ornaments svg[data-orn="queue"],
.mag-shell[data-skin="shelf"] .skin-ornaments svg[data-orn="spines"],
.mag-shell[data-skin="shelf"] .skin-ornaments svg[data-orn="shelf-rule"],
.mag-shell[data-skin="shelf"] .skin-ornaments svg[data-orn="price-sticker"],
.mag-shell[data-skin="shelf"] .skin-ornaments svg[data-orn="tape-label"],
.mag-shell[data-skin="guide"] .skin-ornaments svg[data-orn="time-slot"],
.mag-shell[data-skin="guide"] .skin-ornaments svg[data-orn="listing-grid"],
.mag-shell[data-skin="guide"] .skin-ornaments svg[data-orn="dot-leaders"],
.mag-shell[data-skin="guide"] .skin-ornaments svg[data-orn="clock"],
.mag-shell[data-skin="late"] .skin-ornaments svg[data-orn="scrubber"],
.mag-shell[data-skin="late"] .skin-ornaments svg[data-orn="chapter-ticks"],
.mag-shell[data-skin="late"] .skin-ornaments svg[data-orn="play-triangle"],
.mag-shell[data-skin="late"] .skin-ornaments svg[data-orn="film-frame"],
.mag-shell[data-skin="filing"] .skin-ornaments svg[data-orn="double-rules"],
.mag-shell[data-skin="filing"] .skin-ornaments svg[data-orn="dagger"],
.mag-shell[data-skin="filing"] .skin-ornaments svg[data-orn="brackets"],
.mag-shell[data-skin="filing"] .skin-ornaments svg[data-orn="page-tab"],
.mag-shell[data-skin="gauge"] .skin-ornaments svg[data-orn="share-bar"],
.mag-shell[data-skin="gauge"] .skin-ornaments svg[data-orn="screen-frame"],
.mag-shell[data-skin="gauge"] .skin-ornaments svg[data-orn="scan-line"],
.mag-shell[data-skin="gauge"] .skin-ornaments svg[data-orn="channel-tag"],
.mag-shell[data-skin="onair"] .skin-ornaments svg[data-orn="lamp"],
.mag-shell[data-skin="onair"] .skin-ornaments svg[data-orn="grille"],
.mag-shell[data-skin="onair"] .skin-ornaments svg[data-orn="waveform"],
.mag-shell[data-skin="onair"] .skin-ornaments svg[data-orn="peak-mark"] { display: block; }
.mag-shell[data-skin="box"] .skin-ornaments svg[data-orn="burst"] { color: var(--accent2); }

.mag-shell .skin-plate {
  float: right;
  width: 92px;
  margin: 0 0 8px 12px;
  break-inside: avoid;
}
.mag-shell .skin-plate img { display: none; width: 100%; height: 112px; object-fit: cover; }
.mag-shell[data-skin="ledger"] .skin-plate img[data-for="ledger"],
.mag-shell[data-skin="box"] .skin-plate img[data-for="box"],
.mag-shell[data-skin="trade"] .skin-plate img[data-for="trade"] { display: block; }
.mag-shell .skin-plate figcaption {
  font: 500 10px/1.3 var(--skin-figures), ui-monospace, monospace;
  margin-top: 4px;
}
.mag-shell .skin-plate [data-for],
.mag-shell .closing [data-for],
.mag-shell .credits [data-for] { display: none; }
.mag-shell:not([data-skin]) .skin-plate [data-for="ledger"],
.mag-shell[data-skin="ledger"] .skin-plate [data-for="ledger"],
.mag-shell:not([data-skin]) .closing [data-for="ledger"],
.mag-shell[data-skin="ledger"] .closing [data-for="ledger"],
.mag-shell[data-skin="box"] .skin-plate [data-for="box"],
.mag-shell[data-skin="box"] .closing [data-for="box"],
.mag-shell[data-skin="trade"] .skin-plate [data-for="trade"],
.mag-shell[data-skin="trade"] .closing [data-for="trade"],
.mag-shell[data-skin="chart"] .closing [data-for="chart"],
.mag-shell[data-skin="sleeve"] .closing [data-for="sleeve"],
.mag-shell[data-skin="stream"] .closing [data-for="stream"],
.mag-shell[data-skin="shelf"] .closing [data-for="shelf"],
.mag-shell[data-skin="guide"] .closing [data-for="guide"],
.mag-shell[data-skin="late"] .closing [data-for="late"],
.mag-shell[data-skin="filing"] .closing [data-for="filing"],
.mag-shell[data-skin="gauge"] .closing [data-for="gauge"],
.mag-shell[data-skin="onair"] .closing [data-for="onair"] { display: inline; }
.mag-shell .skin-dateline,
.mag-shell .audit-stamp,
.mag-shell .collect-140 { display: none; }

/* Ledger — ruled stock, italic "owns", red audit stamp. */
.mag-shell[data-skin="ledger"] h1 {
  font-weight: 400;
  font-size: clamp(34px, 8vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(1.08em - 1px),
    var(--rule) calc(1.08em - 1px) 1.08em
  );
  border-bottom: 3px double var(--ink);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.mag-shell[data-skin="ledger"] h1 em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}
.mag-shell[data-skin="ledger"] h1 .deck { display: inline; }
.mag-shell[data-skin="ledger"] .skin-dateline {
  display: block;
  font: 500 11px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 8px;
}
.mag-shell[data-skin="ledger"] .audit-stamp {
  display: inline-block;
  transform: rotate(-6deg);
  border: 2px solid var(--accent2);
  color: var(--accent2);
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 6px;
  margin: 0 0 8px;
}
.mag-shell[data-skin="ledger"] .hero-frame {
  display: block;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
}
.mag-shell[data-skin="ledger"] .hero {
  border-radius: 0;
  max-height: 34vh;
}
.mag-shell[data-skin="ledger"] h2 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--accent);
}
.mag-shell[data-skin="ledger"] .big::before { content: none; }
.mag-shell[data-skin="ledger"] p.means::before { content: "☞ "; color: var(--accent2); }
.mag-shell[data-skin="ledger"] figure.skin-accounts,
.mag-shell[data-skin="ledger"] .donut {
  background-image: repeating-linear-gradient(to bottom, transparent 0 20px, rgba(157, 183, 165, 0.85) 20px 21px);
}
.mag-shell[data-skin="ledger"] .row.hl span:last-child {
  border-bottom: 3px double var(--ink);
  padding-bottom: 1px;
}
.mag-shell[data-skin="ledger"] .skin-balance {
  display: inline-block;
  color: var(--accent2);
  border: 3px solid var(--accent2);
  padding: 2px 8px 0;
  transform: rotate(-6deg);
}
.mag-shell[data-skin="ledger"] h2.skin-memo + p {
  background: #fffdf8;
  border: 1px solid var(--ink);
  padding: 12px 14px 18px;
  font-family: "Libre Caslon Text", Georgia, serif;
  break-inside: avoid;
}
.mag-shell[data-skin="ledger"] h2.skin-memo + p::after {
  content: "";
  display: block;
  width: 96px;
  margin-top: 12px;
  border-bottom: 1px solid var(--ink);
}
.mag-shell[data-skin="ledger"] footer.bar {
  border-top: 1px solid var(--rule);
}
.mag-shell[data-skin="ledger"] .closing {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--rule);
}

/* Back of the Box — blister header, yellow sticker, card frames. */
.mag-shell[data-skin="box"] h1 {
  font-weight: 400;
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1.12;
  letter-spacing: 0;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 28px 12px 12px;
  box-shadow: 7px 7px 0 var(--accent2);
  position: relative;
}
.mag-shell[data-skin="box"] h1::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 34px;
  height: 12px;
  transform: translateX(-50%);
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
}
.mag-shell[data-skin="box"] h1 em {
  font-style: normal;
  color: var(--ink);
  background: var(--accent2);
  display: inline-block;
  padding: 0 8px 2px;
  transform: rotate(-8deg);
  box-shadow: 2px 3px 0 var(--ink);
}
.mag-shell[data-skin="box"] h2 {
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mag-shell[data-skin="box"] .hero-frame { display: block; border: 2px solid var(--ink); padding: 6px; background: #fff; }
.mag-shell[data-skin="box"] .hero { border-radius: 0; max-height: 32vh; }
.mag-shell[data-skin="box"] .skin-plate {
  border: 2px solid var(--ink);
  padding: 4px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--accent);
  width: 96px;
}
.mag-shell[data-skin="box"] p.big,
.mag-shell[data-skin="box"] .kp {
  background: var(--accent2);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  width: fit-content;
  max-width: 100%;
}
.mag-shell[data-skin="box"] p.big {
  padding: 6px 10px 2px;
  transform: rotate(-2deg);
}
.mag-shell[data-skin="box"] .kp { padding: 8px 10px; margin: 8px 0; }
.mag-shell[data-skin="box"] .kp .big { color: var(--ink); font-size: 36px; }
.mag-shell[data-skin="box"] .kp p { color: var(--ink); }
.mag-shell[data-skin="box"] .skin-tally {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 16px 18px 12px;
  box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--ink);
}
.mag-shell[data-skin="box"] .skin-tally::before { display: none; }
.mag-shell[data-skin="box"] figure {
  border: 2px solid var(--ink);
  padding: 12px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--accent);
}
.mag-shell[data-skin="box"] .collect-140 {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 8px 0 0;
  font: 700 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mag-shell[data-skin="box"] .collect-140 span {
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font: 700 9px/12px "Space Mono", ui-monospace, monospace;
  text-align: center;
}
.mag-shell[data-skin="box"] .collect-140 span::before { content: "✓"; }
.mag-shell[data-skin="box"] .closing::after {
  content: "";
  display: block;
  height: 36px;
  margin-top: 12px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 2px,
    transparent 2px 4px,
    var(--ink) 4px 5px,
    transparent 5px 8px,
    var(--ink) 8px 11px,
    transparent 11px 13px
  );
}
.mag-shell[data-skin="box"] .end { color: var(--ink); }

/* Trade Paper — condensed decks, ticket numbers, sprocket edge, halftone plate. */
.mag-shell[data-skin="trade"] #view::before { content: none; }
.mag-shell[data-skin="trade"] #book { padding-left: 0; }
.mag-shell[data-skin="trade"] h1 {
  font-weight: 600;
  font-size: clamp(40px, 11vw, 72px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
}
.mag-shell[data-skin="trade"] h1 em { font-style: normal; color: inherit; }
.mag-shell[data-skin="trade"] h1 .deck {
  display: block;
  border-top: 1px solid var(--ink);
  padding-top: 3px;
  margin-top: 3px;
}
.mag-shell[data-skin="trade"] .skin-dateline {
  display: block;
  font-family: Oswald, Impact, sans-serif;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 5px 0;
  margin: 0 0 10px;
}
.mag-shell[data-skin="trade"] h2 {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  break-inside: avoid;
}
.mag-shell[data-skin="trade"] h2::before { content: none; display: none; }
.mag-shell[data-skin="trade"] .hero-frame { display: block; position: relative; }
.mag-shell[data-skin="trade"] .hero {
  border-radius: 0;
  filter: grayscale(1) contrast(1.12);
  max-height: 32vh;
}
.mag-shell[data-skin="trade"] .hero-frame::after,
.mag-shell[data-skin="trade"] .skin-plate::after { content: none; display: none; }
.mag-shell[data-skin="trade"] .skin-plate { position: relative; width: 120px; }
.mag-shell[data-skin="trade"] .skin-plate img { height: 78px; filter: grayscale(1) contrast(1.15); }
.mag-shell[data-skin="trade"] .kp {
  border: 1px dashed var(--ink);
  padding: 8px 14px;
  background: transparent;
}
.mag-shell[data-skin="trade"] .skin-tally {
  font-family: Oswald, Impact, sans-serif;
  font-size: clamp(64px, 18vw, 92px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: var(--ink);
  color: var(--paper);
  display: inline-block;
  padding: 8px 12px 4px;
}
.mag-shell[data-skin="trade"] .skin-tally::before { display: none; }
.mag-shell[data-skin="trade"] .skin-balance {
  border-left: 8px solid var(--accent);
  padding-left: 10px;
}
.mag-shell[data-skin="trade"] h2.skin-memo + p {
  border-top: 4px solid var(--accent);
  padding-top: 8px;
}
.mag-shell[data-skin="trade"] .closing {
  text-align: center;
  margin-top: 16px;
}
.mag-shell[data-skin="trade"] .closing .role {
  display: block;
  font-family: Oswald, Impact, sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.mag-shell[data-skin="trade"] .closing ol.src,
.mag-shell[data-skin="trade"] .closing .credits {
  list-style: none;
  padding: 0;
  text-align: center;
}
@media (min-width: 700px) {
  .mag-shell[data-skin="trade"] .closing ol.src {
    columns: 2;
    column-gap: 28px;
    text-align: left;
  }
  .mag-shell[data-skin="trade"] #book { padding-left: 0; }
}

/* Charts stay full-width and heavy. No banner treatment. */
.mag-shell[data-skin] .row { grid-template-columns: minmax(76px, 34%) 1fr auto; }
.mag-shell[data-skin] .row b { height: 18px; border-radius: 0; background: var(--accent); }
.mag-shell[data-skin] .row.hl b { background: var(--accent2); }
.mag-shell[data-skin="trade"] .row.hl b { background: var(--ink); }
.mag-shell[data-skin="box"] .row b { height: 22px; box-shadow: 3px 3px 0 var(--ink); }
.mag-shell[data-skin="box"] .row.hl b { background: #ff4f64; }
.mag-shell[data-skin] .donut svg { width: 148px; height: 148px; }
.mag-shell[data-skin="ledger"] .donut .arc:nth-of-type(2) { stroke: var(--accent); }
.mag-shell[data-skin="ledger"] .donut .arc:nth-of-type(3) { stroke: var(--accent2); }
.mag-shell[data-skin="box"] .donut .arc:nth-of-type(3) { stroke: #ff4f64; }
.mag-shell[data-skin="trade"] .fig img,
.mag-shell[data-skin="ledger"] .fig img { max-height: 38vh; }

.mag-shell[data-skin] .closing {
  margin: 16px 0 8px;
  color: var(--ink);
}
.mag-shell[data-skin] .closing .close-warn,
.mag-shell[data-skin] .closing .close-method,
.mag-shell[data-skin] .closing .close-credit { break-inside: avoid; }
.mag-shell[data-skin] .closing h2,
.mag-shell[data-skin] .closing h3 {
  font-family: var(--skin-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mag-shell[data-skin] .closing h3 { font-size: 12px; margin: 14px 0 6px; }
.mag-shell[data-skin] .closing .disclaimer,
.mag-shell[data-skin] .closing .method,
.mag-shell[data-skin] .closing .updated,
.mag-shell[data-skin] .closing .credits {
  font-size: 13.5px;
  line-height: 1.45;
}
.mag-shell[data-skin] .closing .role { font-weight: 600; }
.mag-shell[data-skin="ledger"] .closing .role,
.mag-shell[data-skin="box"] .closing .role { display: none; }
.mag-shell[data-skin="box"] .closing h2 { font-size: 22px; letter-spacing: 0; }
.mag-shell[data-skin="trade"] .closing h2 {
  font-family: Oswald, Impact, sans-serif;
  font-size: 28px;
  letter-spacing: 0.16em;
}
.mag-shell[data-skin] .end { color: var(--accent); }

@media (min-width: 700px) {
  .mag-shell[data-skin="ledger"] figure.skin-flip-fig .bars {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
  .mag-shell[data-skin="ledger"] figure.skin-flip-fig .row { grid-template-columns: 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mag-shell[data-skin="box"] h1 em { animation: none; transform: rotate(-8deg); }
  .mag-shell[data-skin] .audit-stamp { transform: rotate(-6deg); }
  .mag-shell[data-skin="stream"] .bb-fill { animation: none; width: 100%; }
}

/* Billboard — Chart, Sleeve, Stream. Red, gold, and green are fills and markers. Body type stays ink. */
.mag-shell .bb-rank,
.mag-shell .bb-hole,
.mag-shell .bb-player { display: none; }
.mag-shell .bb-stage { break-inside: avoid; }

.mag-shell[data-skin="chart"] .kick,
.mag-shell[data-skin="stream"] .kick {
  font-family: var(--skin-figures);
  color: var(--accent);
}
.mag-shell[data-skin="sleeve"] .kick {
  font-family: "Space Mono", ui-monospace, monospace;
  color: var(--ink);
  text-align: center;
}

.mag-shell[data-skin="chart"] .bb-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: stretch;
  margin: 2px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 4px 0 var(--paper), 0 5px 0 var(--rule);
}
.mag-shell[data-skin="chart"] .bb-rank {
  display: grid;
  place-items: center;
  width: 64px;
  min-height: 64px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  position: relative;
}
.mag-shell[data-skin="chart"] .bb-rank::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 10px;
  height: 10px;
  background: var(--accent2);
}
.mag-shell[data-skin="chart"] h1.skin-title {
  align-self: center;
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-stretch: 100%;
  font-size: clamp(28px, 6.2vw, 52px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mag-shell[data-skin="chart"] h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.mag-shell[data-skin="chart"] h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--accent2);
  vertical-align: 0.05em;
}
.mag-shell[data-skin="chart"] .hero-frame {
  display: block;
  position: relative;
  padding: 10px;
  background: #fffdf8;
  border: 1px solid var(--ink);
}
.mag-shell[data-skin="chart"] .hero-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--accent2);
}
.mag-shell[data-skin="chart"] .hero { border-radius: 0; }
.mag-shell[data-skin="chart"] .kp { border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.mag-shell[data-skin="chart"] figure { border-top-color: var(--rule); border-bottom-color: var(--rule); }
.mag-shell[data-skin="chart"] .closing {
  break-inside: avoid;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}
.mag-shell[data-skin="chart"] .closing h2 {
  font-size: 22px;
  letter-spacing: 0.08em;
}
.mag-shell[data-skin="chart"] .closing ol.src {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="chart"] .closing ol.src li::marker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--accent);
}
.mag-shell[data-skin="chart"] .closing .updated,
.mag-shell[data-skin="chart"] .closing .hero-credit {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
}

.mag-shell[data-skin="sleeve"] .bb-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin: 4px auto 18px;
  padding: 36px 22px 84px;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
}
.mag-shell[data-skin="sleeve"] .bb-stage::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--ink);
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 6px 2px / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 2px 6px / 1px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 6px) 2px / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 2px) 6px / 1px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 6px calc(100% - 2px) / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 2px calc(100% - 6px) / 1px 16px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 6px) calc(100% - 2px) / 16px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) calc(100% - 2px) calc(100% - 6px) / 1px 16px no-repeat;
}
.mag-shell[data-skin="sleeve"] .bb-hole {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 58px;
  height: 58px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--ink) 0 3px, transparent 3.6px),
    radial-gradient(circle at 50% 50%, var(--paper) 0 15px, var(--ink) 15.6px 17px, var(--accent2) 17.5px 100%);
  box-shadow: 0 0 0 1px var(--ink);
}
.mag-shell[data-skin="sleeve"] h1.skin-title {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 16ch;
  font-family: Bungee, system-ui, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(18px, 4.8vw, 32px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.mag-shell[data-skin="sleeve"] h2 {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.mag-shell[data-skin="sleeve"] h2::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 4px;
  margin-right: 8px;
  background: var(--accent2);
  vertical-align: 0.15em;
}
.mag-shell[data-skin="sleeve"] .hero-frame {
  display: block;
  border: 2px solid var(--ink);
  padding: 6px;
  background: var(--paper);
}
.mag-shell[data-skin="sleeve"] .hero { border-radius: 0; }
.mag-shell[data-skin="sleeve"] .kp .big {
  color: var(--accent);
  box-shadow: inset 8px 0 0 var(--accent2);
  padding-left: 12px;
}
.mag-shell[data-skin="sleeve"] figure { border-top: 2px solid var(--ink); }
.mag-shell[data-skin="sleeve"] .closing {
  break-inside: avoid;
  width: min(100%, 440px);
  margin: 16px auto 8px;
  padding: 14px 14px 10px;
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.mag-shell[data-skin="sleeve"] .closing h2::before { content: none; }
.mag-shell[data-skin="sleeve"] .closing h2 {
  display: block;
  font-family: Bungee, system-ui, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-align: center;
  border-bottom: 6px solid var(--accent2);
  padding-bottom: 8px;
}
.mag-shell[data-skin="sleeve"] .closing ol.src,
.mag-shell[data-skin="sleeve"] .closing .updated,
.mag-shell[data-skin="sleeve"] .closing .hero-credit {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  text-align: left;
}

.mag-shell[data-skin="stream"] .bb-stage {
  position: relative;
  margin: 2px 0 16px;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(14, 18, 32, 0.06);
}
.mag-shell[data-skin="stream"] .bb-player { display: block; }
.mag-shell[data-skin="stream"] .bb-play {
  position: absolute;
  top: 18px;
  left: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
}
.mag-shell[data-skin="stream"] .bb-play::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
}
.mag-shell[data-skin="stream"] h1.skin-title {
  margin: 0 0 16px;
  padding-left: 56px;
  min-height: 40px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 5.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mag-shell[data-skin="stream"] .bb-track {
  display: block;
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--rule);
}
.mag-shell[data-skin="stream"] .bb-track::before,
.mag-shell[data-skin="stream"] .bb-track::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 14px;
  background: var(--ink);
}
.mag-shell[data-skin="stream"] .bb-track::before { left: 0; }
.mag-shell[data-skin="stream"] .bb-track::after { right: 0; }
.mag-shell[data-skin="stream"] .bb-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent2);
  position: relative;
  animation: skin-weeks 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mag-shell[data-skin="stream"] .bb-fill::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 0 2px #fff;
  transform: translateY(-50%);
}
@keyframes skin-weeks {
  from { width: 0; }
  to { width: 100%; }
}
.mag-shell[data-skin="stream"] .bb-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.mag-shell[data-skin="stream"] h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.mag-shell[data-skin="stream"] .hero-frame {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.mag-shell[data-skin="stream"] .hero { border-radius: 0; }
.mag-shell[data-skin="stream"] .kp .big {
  color: var(--accent);
  box-shadow: inset 0 -4px 0 var(--accent2);
}
.mag-shell[data-skin="stream"] figure {
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
.mag-shell[data-skin="stream"] .closing {
  break-inside: avoid;
  margin-top: 16px;
  padding: 16px 16px 12px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: inset 0 4px 0 var(--accent2);
}
.mag-shell[data-skin="stream"] .closing h2 {
  font-size: 22px;
  letter-spacing: 0.06em;
}
.mag-shell[data-skin="stream"] .closing ol.src,
.mag-shell[data-skin="stream"] .closing .updated,
.mag-shell[data-skin="stream"] .closing .hero-credit {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="stream"] .closing .updated,
.mag-shell[data-skin="chart"] .closing .updated,
.mag-shell[data-skin="sleeve"] .closing .updated {
  margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .mag-shell[data-skin="stream"] .bb-fill { animation: none; width: 100%; }
}

/* Streaming — Top Shelf, Program Guide, Late Show.
   Orange, green, and amber are fills and markers. Body type, links, and captions stay ink or accent on paper.
   Late Show chart PNGs sit on a light mat; they are not inverted. */
.mag-shell .st-clip,
.mag-shell .st-slot,
.mag-shell .st-leaders,
.mag-shell .st-spines,
.mag-shell .st-scrub { display: none; }
.mag-shell .st-stage { break-inside: avoid; }

.mag-shell[data-skin="shelf"] .st-channel,
.mag-shell[data-skin="late"] .st-channel {
  font-family: var(--skin-figures);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.mag-shell[data-skin="shelf"] .kp p,
.mag-shell[data-skin="guide"] .kp p,
.mag-shell[data-skin="late"] .kp p,
.mag-shell[data-skin="shelf"] .dek,
.mag-shell[data-skin="guide"] .dek,
.mag-shell[data-skin="late"] .dek { color: var(--ink); }

.mag-shell[data-skin="shelf"] .st-stage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 560px);
  margin: 2px 0 16px;
}
.mag-shell[data-skin="shelf"] .st-channel { order: 1; margin: 0 0 8px; }
.mag-shell[data-skin="shelf"] h1.skin-title {
  order: 2;
  margin: 0;
  padding: 12px 14px 14px;
  background: #fffdf8;
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--rule);
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 6.4vw, 52px);
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #15171c;
}
.mag-shell[data-skin="shelf"] .st-clip {
  order: 3;
  display: block;
  width: 36px;
  height: 10px;
  margin: -1px 0 -7px 22px;
  background: var(--accent2);
  border: 1px solid var(--ink);
  position: relative;
  z-index: 1;
}
.mag-shell[data-skin="shelf"] .st-spines {
  order: 4;
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}
.mag-shell[data-skin="shelf"] h2 {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.mag-shell[data-skin="shelf"] h2::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 10px;
  margin-right: 8px;
  background: var(--accent2);
  transform: rotate(-3deg);
  vertical-align: 0.05em;
}
.mag-shell[data-skin="shelf"] .kp .big {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.mag-shell[data-skin="shelf"] .kp .big::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent2);
  box-shadow: inset 0 0 0 2px var(--paper);
  flex: 0 0 auto;
}
.mag-shell[data-skin="shelf"] .hero-frame {
  display: block;
  padding: 8px;
  background: #fffdf8;
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 var(--rule);
}
.mag-shell[data-skin="shelf"] .hero { border-radius: 0; }
.mag-shell[data-skin="shelf"] figure { border-top-color: var(--rule); border-bottom-color: var(--rule); }
.mag-shell[data-skin="shelf"] .closing {
  break-inside: avoid;
  width: min(100%, 560px);
  margin-top: 18px;
  padding: 18px 14px 12px;
  background: #fffdf8;
  border: 1px solid var(--ink);
  border-top: 2px dashed var(--ink);
  color: var(--ink);
}
.mag-shell[data-skin="shelf"] .closing h2 {
  font-family: Oswald, Impact, sans-serif;
  font-size: 26px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.mag-shell[data-skin="shelf"] .closing h2::before { content: none; }
.mag-shell[data-skin="shelf"] .closing ol.src,
.mag-shell[data-skin="shelf"] .closing .updated {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="shelf"] .closing .updated {
  margin-top: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
.mag-shell[data-skin="shelf"] .closing a { color: var(--accent); }

.mag-shell[data-skin="guide"] .st-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 1.4rem auto;
  grid-template-areas: "slot title leaders channel";
  align-items: stretch;
  column-gap: 8px;
  margin: 2px 0 14px;
  padding: 8px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.mag-shell[data-skin="guide"] .st-slot {
  grid-area: slot;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6em;
  padding: 8px 6px 7px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: inset 0 3px 0 var(--accent2);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink);
}
.mag-shell[data-skin="guide"] h1.skin-title {
  grid-area: title;
  align-self: center;
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(17px, 2.8vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mag-shell[data-skin="guide"] .st-leaders {
  grid-area: leaders;
  display: block;
  align-self: center;
  height: 0;
  border-bottom: 2px dotted var(--ink);
}
.mag-shell[data-skin="guide"] .st-channel {
  grid-area: channel;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 7px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: inset 3px 0 0 var(--accent2);
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.mag-shell[data-skin="guide"] h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.mag-shell[data-skin="guide"] h2::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 2px / 1.5px 5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 7px 6.5px / 5px 1.5px no-repeat,
    radial-gradient(circle at 50% 50%, var(--accent2) 1.15px, transparent 1.4px);
  vertical-align: -2px;
}
.mag-shell[data-skin="guide"] .kp {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(20px, 0.6fr) auto;
  column-gap: 8px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.mag-shell[data-skin="guide"] .kp p:last-child { grid-column: 1; margin: 0; }
.mag-shell[data-skin="guide"] .kp::after {
  content: "";
  grid-column: 2;
  align-self: center;
  border-bottom: 2px dotted var(--ink);
}
.mag-shell[data-skin="guide"] .kp .big {
  grid-column: 3;
  font-size: clamp(20px, 4vw, 32px);
  color: var(--ink);
}
.mag-shell[data-skin="guide"] .hero-frame {
  display: block;
  padding: 6px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.mag-shell[data-skin="guide"] .hero { border-radius: 0; }
.mag-shell[data-skin="guide"] figure {
  border: 1px solid var(--rule);
  padding: 12px;
  background-image: linear-gradient(var(--rule), var(--rule));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top;
}
.mag-shell[data-skin="guide"] .closing {
  break-inside: avoid;
  margin-top: 18px;
  padding: 14px 14px 12px;
  border: 1px solid var(--ink);
  border-top: 8px solid var(--ink);
  background: var(--paper);
}
.mag-shell[data-skin="guide"] .closing h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.mag-shell[data-skin="guide"] .closing h2::before { content: none; }
.mag-shell[data-skin="guide"] .closing ol.src,
.mag-shell[data-skin="guide"] .closing .updated {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="guide"] .closing .updated {
  margin-top: 12px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px;
}
.mag-shell[data-skin="guide"] .closing a { color: var(--accent); }

.mag-shell[data-skin="late"] .st-stage {
  display: flex;
  flex-direction: column;
  margin: 2px 0 16px;
}
.mag-shell[data-skin="late"] .st-channel { order: 1; margin: 0 0 8px; }
.mag-shell[data-skin="late"] h1.skin-title {
  order: 2;
  margin: 0 0 14px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 5.6vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.mag-shell[data-skin="late"] .st-scrub {
  order: 3;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}
.mag-shell[data-skin="late"] .st-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--ink);
}
.mag-shell[data-skin="late"] .st-track {
  position: relative;
  display: block;
  height: 8px;
  background: var(--rule);
}
.mag-shell[data-skin="late"] .st-fill {
  display: block;
  width: 67.9%;
  height: 100%;
  background: var(--accent2);
  animation: skin-hours 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mag-shell[data-skin="late"] .st-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  height: 18px;
  background: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 10%);
  pointer-events: none;
}
.mag-shell[data-skin="late"] .st-scrub-label {
  grid-column: 2;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
@keyframes skin-hours {
  from { width: 0; }
  to { width: 67.9%; }
}
.mag-shell[data-skin="late"] h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.mag-shell[data-skin="late"] .hero-frame {
  display: block;
  border: 1px solid var(--rule);
}
.mag-shell[data-skin="late"] .hero { border-radius: 0; filter: none; }
.mag-shell[data-skin="late"] figure {
  border: 0;
  padding: 16px;
  color: #15171c;
  background-color: #F6F3EC;
  background-image:
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2));
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
.mag-shell[data-skin="late"] figure img { filter: none; background: #F6F3EC; }
.mag-shell[data-skin="late"] figure figcaption,
.mag-shell[data-skin="late"] figure figcaption a { color: #15171c; }
.mag-shell[data-skin="late"] figure a { color: #0047FF; }
.mag-shell[data-skin="late"] .closing {
  break-inside: avoid;
  margin-top: 18px;
  padding: 16px 2px 8px;
  border-top: 1px solid var(--rule);
  box-shadow: inset 0 4px 0 var(--accent2);
  background: transparent;
}
.mag-shell[data-skin="late"] .closing h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.mag-shell[data-skin="late"] .closing ol.src,
.mag-shell[data-skin="late"] .closing .updated,
.mag-shell[data-skin="late"] .closing .skin-back {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="late"] .closing .updated {
  margin-top: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
.mag-shell[data-skin="late"] .closing a { color: var(--accent); }
.mag-shell[data-skin="late"] .skin-picker button[aria-checked="true"] {
  background: rgba(233, 236, 242, 0.14);
}
.mag-shell[data-skin="late"] .prog { background: rgba(233, 236, 242, 0.22); }
.mag-shell[data-skin="late"] header.bar .t,
.mag-shell[data-skin="late"] footer.bar { color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
  .mag-shell[data-skin="late"] .st-fill { animation: none; width: 67.9%; }
  .mag-shell[data-skin="shelf"] h2::before { transform: none; }
}

/* YouTube — Filing, Living Room, On Air.
   Red, green, and orange are fills and markers. Body type, links, and captions stay ink or accent on paper.
   On Air chart PNGs sit on a light mat; they are not inverted. */
.mag-shell .yt-lamp,
.mag-shell .yt-rev,
.mag-shell .yt-share,
.mag-shell .yt-peak,
.mag-shell .yt-wave { display: none; }
.mag-shell .yt-stage { break-inside: avoid; }
.mag-shell[data-skin="filing"] .kp p,
.mag-shell[data-skin="gauge"] .kp p,
.mag-shell[data-skin="onair"] .kp p,
.mag-shell[data-skin="filing"] .dek,
.mag-shell[data-skin="gauge"] .dek,
.mag-shell[data-skin="onair"] .dek { color: var(--ink); }
.mag-shell[data-skin="filing"] h1.skin-title,
.mag-shell[data-skin="gauge"] h1.skin-title,
.mag-shell[data-skin="onair"] h1.skin-title {
  overflow-wrap: break-word;
  min-width: 0;
  color: var(--ink);
}

.mag-shell[data-skin="filing"] .yt-kicker,
.mag-shell[data-skin="gauge"] .yt-kicker,
.mag-shell[data-skin="onair"] .yt-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.mag-shell[data-skin="filing"] .yt-kicker { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.mag-shell[data-skin="gauge"] .yt-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; }
.mag-shell[data-skin="onair"] .yt-kicker { font-family: "Space Mono", ui-monospace, monospace; }

.mag-shell[data-skin="filing"] .yt-stage {
  display: flex;
  flex-direction: column;
  margin: 2px 0 16px;
}
.mag-shell[data-skin="filing"] h1.skin-title {
  margin: 0 0 18px;
  padding: 0 0 10px;
  border-bottom: 3px double var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: none;
}
.mag-shell[data-skin="filing"] .yt-rev {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  padding: 12px 12px 11px;
  border-top: 3px double var(--ink);
  border-right: 1.5px solid var(--ink);
  border-bottom: 3px double var(--ink);
  border-left: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.mag-shell[data-skin="filing"] .yt-tab {
  position: absolute;
  top: -16px;
  right: 16px;
  height: 16px;
  padding: 0 7px;
  background: var(--ink);
  color: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.08em;
}
.mag-shell[data-skin="filing"] .yt-rev-name,
.mag-shell[data-skin="filing"] .yt-rev-sep,
.mag-shell[data-skin="filing"] .yt-rev-amt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}
.mag-shell[data-skin="filing"] .yt-rev-amt { margin-left: auto; }
.mag-shell[data-skin="filing"] .yt-rev-amt::before,
.mag-shell[data-skin="filing"] .yt-rev-amt::after {
  color: var(--accent2);
  font-weight: 600;
}
.mag-shell[data-skin="filing"] .yt-rev-amt::before { content: "["; margin-right: 0.35em; }
.mag-shell[data-skin="filing"] .yt-rev-amt::after { content: "]"; margin-left: 0.35em; }
.mag-shell[data-skin="filing"] h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.mag-shell[data-skin="filing"] h2::before {
  content: "†";
  margin-right: 0.4em;
  color: var(--accent2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
}
.mag-shell[data-skin="filing"] .hero-frame {
  display: block;
  padding: 8px;
  border: 1px solid var(--rule);
  border-top: 3px double var(--ink);
  background: var(--paper);
}
.mag-shell[data-skin="filing"] .hero { border-radius: 0; }
.mag-shell[data-skin="filing"] figure {
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-top: 12px;
}
.mag-shell[data-skin="filing"] .closing {
  break-inside: avoid;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 3px double var(--ink);
  color: var(--ink);
}
.mag-shell[data-skin="filing"] .closing h2 {
  font-family: Archivo, system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
}
.mag-shell[data-skin="filing"] .closing h2::before { content: none; }
.mag-shell[data-skin="filing"] .closing ol.src {
  list-style: none;
  padding-left: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="filing"] .closing ol.src li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 1.15em;
}
.mag-shell[data-skin="filing"] .closing ol.src li::before {
  content: "†";
  position: absolute;
  left: 0;
  color: var(--accent2);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.mag-shell[data-skin="filing"] .closing .updated,
.mag-shell[data-skin="filing"] .closing .skin-back {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="filing"] .closing .updated {
  margin-top: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
.mag-shell[data-skin="filing"] .closing a { color: var(--accent); }

.mag-shell[data-skin="gauge"] { counter-reset: yt-ch; }
.mag-shell[data-skin="gauge"] .yt-stage {
  display: flex;
  flex-direction: column;
  margin: 2px 0 16px;
}
.mag-shell[data-skin="gauge"] h1.skin-title {
  margin: 0 0 14px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 4.8vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-transform: none;
}
.mag-shell[data-skin="gauge"] .yt-share { display: block; }
.mag-shell[data-skin="gauge"] .yt-share-track {
  display: block;
  height: 18px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.mag-shell[data-skin="gauge"] .yt-share-fill {
  display: block;
  width: 15.8%;
  height: 100%;
  background: var(--accent2);
  animation: skin-share 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.mag-shell[data-skin="gauge"] .yt-share-label {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
}
@keyframes skin-share {
  from { width: 0; }
  to { width: 15.8%; }
}
.mag-shell[data-skin="gauge"] h2 {
  margin-top: 22px;
  padding-top: 12px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 3px);
  background-size: 100% 8px;
  background-repeat: no-repeat;
  background-position: left top;
}
.mag-shell[data-skin="gauge"] h2::before {
  counter-increment: yt-ch;
  content: counter(yt-ch, decimal-leading-zero);
  display: inline-block;
  margin-right: 8px;
  padding: 1px 5px 2px;
  border: 1px solid var(--ink);
  border-bottom: 3px solid var(--accent2);
  background: var(--paper);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--ink);
  vertical-align: 1px;
}
.mag-shell[data-skin="gauge"] .hero-frame {
  display: block;
  border: 1px solid var(--rule);
}
.mag-shell[data-skin="gauge"] .hero { border-radius: 0; }
.mag-shell[data-skin="gauge"] figure {
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 16px 14px 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 7px var(--rule);
  overflow: hidden;
}
.mag-shell[data-skin="gauge"] figure img { border-radius: 10px; }
.mag-shell[data-skin="gauge"] .closing {
  break-inside: avoid;
  margin-top: 18px;
  padding: 16px 0 8px;
  border-top: 8px solid var(--ink);
  box-shadow: inset 0 4px 0 var(--accent2);
  background: transparent;
  color: var(--ink);
}
.mag-shell[data-skin="gauge"] .closing h2 {
  margin-top: 0;
  padding-top: 0;
  background-image: none;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 24px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
}
.mag-shell[data-skin="gauge"] .closing h2::before {
  content: none;
  counter-increment: none;
}
.mag-shell[data-skin="gauge"] .closing ol.src,
.mag-shell[data-skin="gauge"] .closing .updated,
.mag-shell[data-skin="gauge"] .closing .skin-back {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="gauge"] .closing .updated {
  margin-top: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
}
.mag-shell[data-skin="gauge"] .closing a { color: var(--accent); }

.mag-shell[data-skin="onair"] .yt-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "kick kick"
    "lamp title"
    "peak peak"
    "wave wave";
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
  margin: 2px 0 16px;
}
.mag-shell[data-skin="onair"] .yt-kicker { grid-area: kick; }
.mag-shell[data-skin="onair"] .yt-lamp {
  grid-area: lamp;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1.5px solid var(--ink);
  background: transparent;
  white-space: nowrap;
}
.mag-shell[data-skin="onair"] .yt-lamp-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent2);
  flex: 0 0 auto;
}
.mag-shell[data-skin="onair"] .yt-lamp-word {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--ink);
}
.mag-shell[data-skin="onair"] h1.skin-title {
  grid-area: title;
  align-self: center;
  margin: 0;
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 4.6vw, 64px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.mag-shell[data-skin="onair"] .yt-peak {
  grid-area: peak;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 14px;
  max-width: 560px;
}
.mag-shell[data-skin="onair"] .yt-peak-line {
  display: block;
  flex: 1 1 220px;
  width: min(100%, 420px);
  height: 36px;
  color: var(--ink);
}
.mag-shell[data-skin="onair"] .yt-peak-label {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink);
}
.mag-shell[data-skin="onair"] .yt-wave {
  grid-area: wave;
  display: block;
  width: min(100%, 420px);
  height: 22px;
  color: var(--ink);
}
.mag-shell[data-skin="onair"] h2 {
  font-family: Oswald, Impact, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  padding-top: 14px;
  background-image: radial-gradient(circle, var(--ink) 1.15px, transparent 1.35px);
  background-size: 7px 4px;
  background-repeat: repeat-x;
  background-position: left top;
}
.mag-shell[data-skin="onair"] .hero-frame {
  display: block;
  border: 1px solid var(--rule);
}
.mag-shell[data-skin="onair"] .hero { border-radius: 0; filter: none; }
.mag-shell[data-skin="onair"] figure {
  border: 0;
  padding: 16px;
  color: #15171c;
  background-color: #F6F3EC;
  background-image:
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2)),
    linear-gradient(var(--accent2), var(--accent2));
  background-size: 16px 3px, 3px 16px, 16px 3px, 3px 16px, 16px 3px, 3px 16px, 16px 3px, 3px 16px;
  background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom;
  background-repeat: no-repeat;
}
.mag-shell[data-skin="onair"] figure img { filter: none; background: #F6F3EC; }
.mag-shell[data-skin="onair"] figure figcaption,
.mag-shell[data-skin="onair"] figure figcaption a { color: #15171c; }
.mag-shell[data-skin="onair"] figure a { color: #0047FF; }
.mag-shell[data-skin="onair"] .closing {
  break-inside: avoid;
  margin-top: 22px;
  padding: 18px 0 8px;
  border-top: 0;
  color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='16' viewBox='0 0 168 16'%3E%3Cpath d='M2 9V7M12 13V3M22 10V6M32 14V2M42 11V5M52 11V5M62 12V4M72 14V2M82 9V7M92 13V3M102 11V5M112 12V4M122 12V4M132 14V2M142 10V6M152 13V3M162 9V7' fill='none' stroke='%23EFE9E1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 168px 14px;
}
.mag-shell[data-skin="onair"] .closing h2 {
  margin-top: 4px;
  padding-top: 0;
  background-image: none;
  font-family: Oswald, Impact, sans-serif;
  font-size: 28px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.mag-shell[data-skin="onair"] .closing h2::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent2);
  vertical-align: 1px;
}
.mag-shell[data-skin="onair"] .closing ol.src,
.mag-shell[data-skin="onair"] .closing .updated,
.mag-shell[data-skin="onair"] .closing .skin-back {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.mag-shell[data-skin="onair"] .closing .updated {
  margin-top: 12px;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 12px;
}
.mag-shell[data-skin="onair"] .closing a { color: var(--accent); }
.mag-shell[data-skin="onair"] .skin-picker button[aria-checked="true"] {
  background: rgba(239, 233, 225, 0.14);
}
.mag-shell[data-skin="onair"] .prog { background: rgba(239, 233, 225, 0.22); }
.mag-shell[data-skin="onair"] header.bar .t,
.mag-shell[data-skin="onair"] footer.bar { color: var(--mute); }

@media (max-width: 520px) {
  .mag-shell[data-skin="filing"] .yt-rev-amt { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mag-shell[data-skin="gauge"] .yt-share-fill { animation: none; width: 15.8%; }
}

/* House reader. Skins keep their ornaments in the picker; the page is the dark Artometrics ground. */
.mag-shell[data-skin="ledger"] {
  color-scheme: dark;
  background: #0e1110;
  color: #f3ead7;
}
.mag-shell[data-skin="ledger"] header.bar,
.mag-shell[data-skin="ledger"] footer.bar,
.mag-shell[data-skin="ledger"] #view,
.mag-shell[data-skin="ledger"] .mag-page {
  background: #0e1110;
  color: #f3ead7;
}
.mag-shell[data-skin="ledger"] header.bar {
  border-bottom: 3px solid #ff3d8a;
  font-family: "DM Mono", ui-monospace, monospace;
}
.mag-shell[data-skin="ledger"] header.bar a.site { color: #0047ff; }
.mag-shell[data-skin="ledger"] .skin-plate,
.mag-shell[data-skin="ledger"] .audit-stamp,
.mag-shell[data-skin="ledger"] .collect-140,
.mag-shell[data-skin="ledger"] .skin-ornaments {
  display: none !important;
}
.mag-shell[data-skin="ledger"] .skin-dateline {
  font-family: "DM Mono", ui-monospace, monospace;
  color: #0047ff;
  letter-spacing: 0.14em;
}
.mag-shell[data-skin="ledger"] .kick {
  display: inline-block;
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0047ff;
  border-bottom: 3px solid #ff3d8a;
  padding-bottom: 4px;
  margin: 0 0 10px;
}
.mag-shell[data-skin="ledger"] h1,
.mag-shell[data-skin="ledger"] h1,
.mag-shell[data-skin="ledger"] h1.skin-title {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: #f3ead7;
  background-image: none;
  border-bottom: 3px solid #ff3d8a;
  padding-bottom: 8px;
}
.mag-shell[data-skin="ledger"] h1 em,
.mag-shell[data-skin="ledger"] h1 em {
  font-style: normal;
  font-weight: 400;
  color: #0047ff;
}
.mag-shell[data-skin="ledger"] h3 {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: #f3ead7;
}
.mag-shell[data-skin="ledger"] h2,
.mag-shell[data-skin="ledger"] h2 {
  font-family: "Anton", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #f3ead7;
  margin: 18px 0 8px;
}
.mag-shell[data-skin="ledger"] .dek,
.mag-shell[data-skin="ledger"] p,
.mag-shell[data-skin="ledger"] .by {
  font-family: "DM Sans", system-ui, sans-serif;
}
.mag-shell[data-skin="ledger"] .dek { color: #b7d0cb; }
.mag-shell[data-skin="ledger"] .by,
.mag-shell[data-skin="ledger"] figcaption { color: #8fb8b2; }
.mag-shell[data-skin="ledger"] a { color: #0047ff; }
.mag-shell[data-skin="ledger"] .hero-frame {
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.mag-shell[data-skin="ledger"] .hero,
.mag-shell[data-skin="ledger"] .hero {
  width: 100%;
  max-height: 42vh;
  object-fit: cover;
  border-radius: 0;
}
.mag-shell[data-skin="ledger"] .big,
.mag-shell[data-skin="ledger"] .kp .big {
  font-family: "Anton", Impact, sans-serif;
  color: #0047ff;
}
.mag-shell[data-skin="ledger"] .row b { background: #0047ff; }
.mag-shell[data-skin="ledger"] .row.hl b { background: #ff3d8a; }
.mag-shell[data-skin="ledger"] .prog { background: #2a3330; }
.mag-shell[data-skin="ledger"] .prog i { background: #0047ff; }
.mag-shell[data-skin="ledger"] figure {
  border-top-color: #ff3d8a;
  border-bottom-color: #2a3330;
}
.mag-shell[data-skin="ledger"] .toc li { border-top-color: #2a3330; }
.mag-shell[data-skin="ledger"] .toc b {
  font-family: "Anton", Impact, sans-serif;
  font-weight: 400;
  color: #f3ead7;
}
.mag-shell[data-skin="ledger"] .toc small { color: #0047ff; }
.mag-shell[data-skin="ledger"] .cv-mast {
  font-family: "Chomsky", Georgia, serif;
  color: #f3ead7;
}
.mag-shell[data-skin="ledger"] .cv-sub { color: #0047ff; }
.mag-shell[data-skin="ledger"] .skin-picker button { color: #f3ead7; }
.mag-shell[data-skin="ledger"] .skin-picker button[aria-checked="true"] {
  background: rgba(127, 222, 214, 0.16);
  box-shadow: inset 0 -3px 0 #ff3d8a;
}
.mag-shell[data-skin="ledger"] .skin-picker button .tip {
  background: #f3ead7;
  color: #100e0c;
  font-family: "DM Sans", system-ui, sans-serif;
}
.mag-shell[data-skin="ledger"] .mag-page {
  scrollbar-color: #0047ff #0e1110;
}
.mag-shell[data-skin="ledger"] .mag-page::-webkit-scrollbar { width: 8px; }
.mag-shell[data-skin="ledger"] .mag-page::-webkit-scrollbar-thumb {
  background: #ff3d8a;
}
.mag-shell[data-skin="ledger"] ::selection {
  background: #ff3d8a;
  color: #100e0c;
}
.mag-shell[data-skin="ledger"] a:focus-visible,
.mag-shell[data-skin="ledger"] button:focus-visible {
  outline: 2px solid #0047ff;
  outline-offset: 2px;
}

/* Decorative icon row and dot gutters stay off on every skin. */
.mag-shell .skin-ornaments { display: none !important; }
.mag-shell[data-skin="trade"] #view::before,
.mag-shell[data-skin="trade"] h2::before,
.mag-shell[data-skin="trade"] .hero-frame::after,
.mag-shell[data-skin="trade"] .skin-plate::after { content: none !important; display: none !important; }