/*
 * v3 editorial cover-art system (FE-302) — ported verbatim from
 * documents/mockups/web-app-ui-v3.html (lines ~508–631). Fully self-contained:
 * layered CSS gradients + inline data-URI SVG texture + the shared var(--grain)
 * feTurbulence plate + dark scrim. ZERO external image requests, zero Node image
 * pipeline — every "cover photo" is deterministic CSS.
 *
 * The six .art-* plates are assigned to a Section/Topic by slug via
 * Web::CoverArtHelper.art_class_for (pure function, no DB column). Linked
 * alongside tokens.css in the web layout head.
 */

/* Shared cover base — the default photographic scrim for every cover container. */
.cover-mini,
.cover-mast,
.cat-cover,
.cat-intro,
.section-mast,
.onb-card {
  background-color: var(--cover);
  background-image:
    linear-gradient(118deg, rgba(10,10,12,.74) 0%, rgba(10,10,12,.40) 52%, rgba(10,10,12,.22) 100%),
    linear-gradient(0deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 46%),
    var(--grain),
    radial-gradient(135% 130% at 82% 12%, #2a2260 0%, #14122e 44%, #0a0a0c 80%);
  background-size: cover, cover, 150px 150px, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-position: center;
}

/* --- distinct abstract cover images (light-violet line/mesh work) --- */
.art-mesh {
  background-image:
    linear-gradient(118deg, rgba(10,10,12,.74) 0%, rgba(10,10,12,.40) 52%, rgba(10,10,12,.20) 100%),
    linear-gradient(0deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%238a7be0' stroke-width='1' opacity='0.55'%3E%3Cpath d='M40 70 L150 34 L268 96 L378 58'/%3E%3Cpath d='M64 214 L158 158 L268 96 L346 180'/%3E%3Cpath d='M150 34 L158 158'/%3E%3Cpath d='M268 96 L276 224'/%3E%3Cpath d='M40 70 L64 214'/%3E%3Cpath d='M378 58 L346 180'/%3E%3Cpath d='M158 158 L276 224'/%3E%3C/g%3E%3Cg fill='%23b9abff'%3E%3Ccircle cx='40' cy='70' r='3'/%3E%3Ccircle cx='150' cy='34' r='3.6'/%3E%3Ccircle cx='268' cy='96' r='4.4'/%3E%3Ccircle cx='378' cy='58' r='3'/%3E%3Ccircle cx='158' cy='158' r='3.6'/%3E%3Ccircle cx='346' cy='180' r='3'/%3E%3Ccircle cx='64' cy='214' r='3'/%3E%3Ccircle cx='276' cy='224' r='3.6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 80% 14%, #2b2468 0%, #15122f 46%, #0a0a0c 82%);
  background-size: cover, cover, 150px 150px, cover, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-position: center;
}
.art-arch {
  background-image:
    linear-gradient(118deg, rgba(10,10,12,.74) 0%, rgba(10,10,12,.40) 52%, rgba(10,10,12,.20) 100%),
    linear-gradient(0deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%23c9c4d9' stroke-width='1.2' opacity='0.4'%3E%3Cpath d='M0 46 L420 128'/%3E%3Cpath d='M0 100 L420 182'/%3E%3Cpath d='M0 154 L420 236'/%3E%3Cpath d='M120 0 L120 280'/%3E%3Cpath d='M250 0 L250 280'/%3E%3Cpath d='M340 0 L340 280'/%3E%3C/g%3E%3Cg fill='%237a5cff' opacity='0.16'%3E%3Crect x='120' y='128' width='130' height='152'/%3E%3Crect x='340' y='70' width='80' height='210'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 22% 16%, #24224f 0%, #141230 46%, #0a0a0c 82%);
  background-size: cover, cover, 150px 150px, cover, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-position: center;
}
.art-topo {
  background-image:
    linear-gradient(118deg, rgba(10,10,12,.74) 0%, rgba(10,10,12,.40) 52%, rgba(10,10,12,.20) 100%),
    linear-gradient(0deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%238a7be0' stroke-width='1.1' opacity='0.42'%3E%3Cpath d='M-20 90 C80 50 160 120 260 80 C340 48 400 90 440 66'/%3E%3Cpath d='M-20 120 C80 80 160 150 260 110 C340 78 400 120 440 96'/%3E%3Cpath d='M-20 150 C80 110 160 180 260 140 C340 108 400 150 440 126'/%3E%3Cpath d='M-20 180 C80 140 160 210 260 170 C340 138 400 180 440 156'/%3E%3Cpath d='M-20 210 C80 170 160 240 260 200 C340 168 400 210 440 186'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 78% 18%, #202a55 0%, #121430 46%, #0a0a0c 82%);
  background-size: cover, cover, 150px 150px, cover, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-position: center;
}
.art-optic {
  background-image:
    linear-gradient(118deg, rgba(10,10,12,.74) 0%, rgba(10,10,12,.40) 52%, rgba(10,10,12,.20) 100%),
    linear-gradient(0deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%23b9abff' stroke-width='1' opacity='0.4'%3E%3Ccircle cx='300' cy='140' r='26'/%3E%3Ccircle cx='300' cy='140' r='52'/%3E%3Ccircle cx='300' cy='140' r='78'/%3E%3Ccircle cx='300' cy='140' r='104'/%3E%3Ccircle cx='300' cy='140' r='130'/%3E%3C/g%3E%3Cg fill='none' stroke='%237a5cff' stroke-width='0.8' opacity='0.3'%3E%3Ccircle cx='300' cy='140' r='39'/%3E%3Ccircle cx='300' cy='140' r='65'/%3E%3Ccircle cx='300' cy='140' r='91'/%3E%3Ccircle cx='300' cy='140' r='117'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 74% 40%, #2a2260 0%, #15122f 46%, #0a0a0c 82%);
  background-size: cover, cover, 150px 150px, cover, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-position: center;
}
.art-paper {
  background-image:
    linear-gradient(118deg, rgba(10,10,12,.74) 0%, rgba(10,10,12,.40) 52%, rgba(10,10,12,.20) 100%),
    linear-gradient(0deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg stroke='%23c9c4d9' stroke-width='1' opacity='0.3'%3E%3Cpath d='M70 16 L70 264'/%3E%3Cpath d='M120 16 L120 264'/%3E%3Cpath d='M170 16 L170 264'/%3E%3Cpath d='M220 16 L220 264'/%3E%3Cpath d='M270 16 L270 264'/%3E%3Cpath d='M320 16 L320 264'/%3E%3Cpath d='M370 16 L370 264'/%3E%3C/g%3E%3Cg fill='none' stroke='%238a7be0' stroke-width='1.2' opacity='0.4'%3E%3Cpath d='M40 60 L390 60'/%3E%3Cpath d='M40 214 L390 214'/%3E%3C/g%3E%3Cpath d='M220 0 L420 140 L220 280 Z' fill='%237a5cff' opacity='0.10'/%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 26% 20%, #262150 0%, #15122e 46%, #0a0a0c 82%);
  background-size: cover, cover, 150px 150px, cover, cover;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-position: center;
}
/* dark "ink/smoke" cover for the Special Report editorial card */
.art-smoke {
  background-color: #0a0a0c;
  background-image:
    linear-gradient(180deg, rgba(10,10,12,.10) 0%, rgba(10,10,12,.30) 52%, rgba(10,10,12,.88) 100%),
    var(--grain),
    radial-gradient(58% 66% at 60% 28%, rgba(150,140,168,.55), transparent 62%),
    radial-gradient(44% 52% at 38% 54%, rgba(96,90,124,.48), transparent 64%),
    radial-gradient(120% 120% at 50% 30%, #26222e 0%, #141218 45%, #0a0a0c 82%);
  background-size: cover, 150px 150px, cover, cover, cover;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: center;
}

/* --- "Volume / Issue" editorial eyebrow (marketing hero) --- */
.vol-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-primary-container); background: var(--primary-container);
  border-radius: 999px; padding: 6px 14px; margin: 6px 0 16px;
}

/* --- drop-cap for a public post (editorial article device) --- */
.dropcap::first-letter {
  font-family: var(--font-display); font-weight: 600; font-size: 3.1em;
  line-height: .72; float: left; margin: 8px 12px 0 0; color: var(--primary);
}
.theme-dark .dropcap::first-letter { color: var(--primary-bright); }

/* --- small photographic thumbnail beside a feed card --- */
.pc-thumb {
  width: 104px; height: 104px; flex: 0 0 auto; border-radius: 12px;
  overflow: hidden; background: #100B22; margin-left: 12px;
  box-shadow: inset 0 0 0 1px rgba(20,15,10,.06);
}
.pc-thumb svg { width: 100%; height: 100%; display: block; }

/* --- "Current Edition" magazine-cover object (marketing right rail) --- */
.mag-frame { margin-bottom: 6px; }
.mag-cover {
  position: relative; border-radius: 5px; overflow: hidden; aspect-ratio: 3/4;
  padding: 18px 16px; display: flex; flex-direction: column; color: #1E1B18;
  background-color: #E9E3DE;
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(190,186,196,.20) 58%, rgba(120,117,135,.34)),
    radial-gradient(120% 92% at 72% 18%, #ffffff 0%, #ece7ea 44%, #d2ccd8 100%);
  background-size: 150px 150px, cover, cover;
  background-repeat: repeat, no-repeat, no-repeat;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 20px 34px -20px rgba(30,24,20,.5);
}
.mag-cover .mspine { position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: linear-gradient(180deg, #6B4EFF, #4109D7); }
.mag-cover .mflag { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: #1E1B18; }
.mag-cover .meyebrow { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: .2em; color: #6a6675; text-transform: uppercase; margin-top: 3px; }
.mag-cover .mtitle { font-family: var(--font-display); font-weight: 600; font-size: 29px; line-height: .96; letter-spacing: -.01em; margin-top: auto; }
.mag-cover .mtitle em { font-style: italic; display: block; }
.mag-cover .mdate { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: #6a6675; margin-top: 10px; text-transform: uppercase; }
.mag-caption { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); margin-top: 9px; display: flex; justify-content: space-between; gap: 10px; }
.mag-caption b { color: var(--text); font-weight: 700; }
.theme-dark .mag-cover { background-color: #c9c4d0; }

/* Newsstand CATALOG hero (main column, ~600px wide): the mag-cover's 3/4 aspect
   would stretch to a ~800px empty plate here and bury the catalog (worst on
   mobile). In the catalog the edition has no real cover art, so render a COMPACT
   masthead — drop the fixed aspect and hard-cap the height so the catalog stays
   above the fold. The narrow rail keeps the full plate (its .mag-frame has no
   .newsstand-hero--compact ancestor, so it's untouched). */
.newsstand-hero--compact .mag-cover { aspect-ratio: auto; min-height: 0; max-height: 260px; }
.newsstand-hero--compact .mag-cover .mtitle { margin-top: 10px; }

/* --- Special Report editorial card (marketing feed) --- */
.report-card {
  position: relative; border-radius: 16px; overflow: hidden; margin: 20px 0;
  min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 24px; color: #F3F1FA; text-decoration: none;
}
.report-card .rtag { position: absolute; top: 20px; left: 22px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--tertiary); border-radius: 6px; padding: 4px 10px; }
.report-card .rttl { font-family: var(--font-display); font-weight: 600; font-size: 31px; line-height: 1.04; letter-spacing: -.01em; margin: 0; }
.report-card .rsub { font-family: var(--font-body); font-size: 14.5px; color: #C7C2D6; margin: 9px 0 0; max-width: 360px; line-height: 1.45; }
.report-card .rlink { margin-top: 15px; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: 9px; }

/* --- Sponsorship register (AD-P0-WEB-RENDER): the universal marker, the
   Edition folio line, the section presented-by line, the colophon card.
   Pure typography — letterspaced small caps at REDUCED ink weight, visibly
   not the masthead's own register (.mdate is 700/.16em; the folio credit is
   500/.24em at muted ink). Unsold days ship none of these bytes. --- */
.sponsorship-marker {
  font-family: var(--font-body); font-size: 8.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: inherit; opacity: .62; white-space: nowrap;
}
.sponsorship-marker:hover { opacity: .95; text-decoration: underline; }

/* The Edition folio: a hairline rule under the dateline, sibling of the cover
   plate so the marker is never nested inside the cover link. */
.mag-folio {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--outline-variant);
  color: var(--text-muted);
}
.mag-folio__credit { font-family: var(--font-body); font-size: 9.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

/* The section presented-by line: beneath the title, above everything else in
   the cover, on the dark art plate. */
.cover-folio {
  display: flex; align-items: baseline; gap: 12px;
  margin: 8px 0 2px; padding-top: 7px; border-top: 1px solid rgba(243,241,250,.24);
  color: #C7C2D6; max-width: 420px;
}
.cover-folio__credit { font-family: var(--font-body); font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

/* The Edition's second touch: ONE bordered colophon card on the dark field
   after the last clipping — a monochrome wordmark and one line, nothing moves. */
.sponsor-colophon {
  margin: 26px 0 10px; padding: 20px 22px;
  border: 1px solid rgba(243,241,250,.18); border-radius: 12px;
  background: var(--cover); color: #F3F1FA;
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.sponsor-colophon__body { display: block; text-decoration: none; color: inherit; min-width: 0; }
.sponsor-colophon__wordmark { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.sponsor-colophon__tagline { display: block; font-family: var(--font-body); font-size: 13.5px; line-height: 1.45; color: #C7C2D6; margin-top: 5px; }

/* ── The Press (C-S11): sponsor apparatus in the press register ─────────────
   Flag-scoped restyle only — ink, corners, register. The label grammar
   (Sponsorship::Catalog) renders verbatim, and with data-brand absent none of
   these blocks match (the violet register ships byte-identically).
   The Edition folio credit becomes a brass kicker (--brass-text, spec §1.1 —
   the "kickers/eyebrows set in brass" role; scheme-resolved, 5.74:1 on paper);
   the marker beside it deliberately stays muted-ink — credit and marker are
   two registers, like a real paper's folio line. */
[data-brand="press"] .mag-folio__credit { color: var(--brass-text); }

/* The section presented-by credit sits on the constant-dark art plate (like
   its existing #C7C2D6 neighbors), so it wears the dark-scheme brass cut
   directly — a var would resolve light-scheme brass onto a dark field. */
[data-brand="press"] .cover-folio__credit { color: #C29E67; }

/* The colophon card sharpens onto the token corner scale — printed apparatus,
   not a floating widget (its hairline border already carries the elevation). */
[data-brand="press"] .sponsor-colophon { border-radius: var(--r-sm); }

/* ── The Press: re-ink the cover-art plates (brand fix) ──────────────────────
   Every Section/Topic/Newsstand/onboarding plate above is an indigo-VIOLET field
   with lilac (#8a7be0, #b9abff) and brand-violet (#7a5cff) line-work — and it is
   hardcoded INSIDE the gradient/data-URI layers, which overpaint the
   `background-color: var(--cover)` beneath, so the press token flip never reached
   them. The Newsstand is the press brand's centerpiece and it was rendering violet.
   Same geometry, re-inked: the plate becomes press ink + the ink-family indigo
   (spec §1.1 `indigo` #2B1E4A / §1.2 dark cut #3A3049) and the line-work becomes
   brass (#B08D57 / #C29E67), with the cool lilac-grey rules re-hued to paper.
   These plates are constant-dark by design (a magazine plate isn't dark-mode), so
   the dark-scheme cuts are literal here — the same reason .cover-folio__credit
   above is a literal: a var would resolve the LIGHT-scheme cut onto a dark field.
   An SVG data-URI cannot read a CSS var at all, so the line-work must be restated.
   Flag-scoped: with data-brand absent, the violet plates ship byte-identically. */
[data-brand="press"] .cover-mini,
[data-brand="press"] .cover-mast,
[data-brand="press"] .cat-cover,
[data-brand="press"] .cat-intro,
[data-brand="press"] .section-mast,
[data-brand="press"] .onb-card {
  background-image:
    linear-gradient(118deg, rgba(18,16,13,.74) 0%, rgba(18,16,13,.40) 52%, rgba(18,16,13,.22) 100%),
    linear-gradient(0deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,0) 46%),
    var(--grain),
    radial-gradient(135% 130% at 82% 12%, #3A3049 0%, #2B1E4A 44%, #12100D 80%);
}
[data-brand="press"] .art-mesh {
  background-image:
    linear-gradient(118deg, rgba(18,16,13,.74) 0%, rgba(18,16,13,.40) 52%, rgba(18,16,13,.20) 100%),
    linear-gradient(0deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%23B08D57' stroke-width='1' opacity='0.55'%3E%3Cpath d='M40 70 L150 34 L268 96 L378 58'/%3E%3Cpath d='M64 214 L158 158 L268 96 L346 180'/%3E%3Cpath d='M150 34 L158 158'/%3E%3Cpath d='M268 96 L276 224'/%3E%3Cpath d='M40 70 L64 214'/%3E%3Cpath d='M378 58 L346 180'/%3E%3Cpath d='M158 158 L276 224'/%3E%3C/g%3E%3Cg fill='%23C29E67'%3E%3Ccircle cx='40' cy='70' r='3'/%3E%3Ccircle cx='150' cy='34' r='3.6'/%3E%3Ccircle cx='268' cy='96' r='4.4'/%3E%3Ccircle cx='378' cy='58' r='3'/%3E%3Ccircle cx='158' cy='158' r='3.6'/%3E%3Ccircle cx='346' cy='180' r='3'/%3E%3Ccircle cx='64' cy='214' r='3'/%3E%3Ccircle cx='276' cy='224' r='3.6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 80% 14%, #3A3049 0%, #2B1E4A 46%, #12100D 82%);
}
[data-brand="press"] .art-arch {
  background-image:
    linear-gradient(118deg, rgba(18,16,13,.74) 0%, rgba(18,16,13,.40) 52%, rgba(18,16,13,.20) 100%),
    linear-gradient(0deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%23EDE8DF' stroke-width='1.2' opacity='0.4'%3E%3Cpath d='M0 46 L420 128'/%3E%3Cpath d='M0 100 L420 182'/%3E%3Cpath d='M0 154 L420 236'/%3E%3Cpath d='M120 0 L120 280'/%3E%3Cpath d='M250 0 L250 280'/%3E%3Cpath d='M340 0 L340 280'/%3E%3C/g%3E%3Cg fill='%23B08D57' opacity='0.16'%3E%3Crect x='120' y='128' width='130' height='152'/%3E%3Crect x='340' y='70' width='80' height='210'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 22% 16%, #3A3049 0%, #2B1E4A 46%, #12100D 82%);
}
[data-brand="press"] .art-topo {
  background-image:
    linear-gradient(118deg, rgba(18,16,13,.74) 0%, rgba(18,16,13,.40) 52%, rgba(18,16,13,.20) 100%),
    linear-gradient(0deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%23B08D57' stroke-width='1.1' opacity='0.42'%3E%3Cpath d='M-20 90 C80 50 160 120 260 80 C340 48 400 90 440 66'/%3E%3Cpath d='M-20 120 C80 80 160 150 260 110 C340 78 400 120 440 96'/%3E%3Cpath d='M-20 150 C80 110 160 180 260 140 C340 108 400 150 440 126'/%3E%3Cpath d='M-20 180 C80 140 160 210 260 170 C340 138 400 180 440 156'/%3E%3Cpath d='M-20 210 C80 170 160 240 260 200 C340 168 400 210 440 186'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 78% 18%, #3A3049 0%, #2B1E4A 46%, #12100D 82%);
}
[data-brand="press"] .art-optic {
  background-image:
    linear-gradient(118deg, rgba(18,16,13,.74) 0%, rgba(18,16,13,.40) 52%, rgba(18,16,13,.20) 100%),
    linear-gradient(0deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%23C29E67' stroke-width='1' opacity='0.4'%3E%3Ccircle cx='300' cy='140' r='26'/%3E%3Ccircle cx='300' cy='140' r='52'/%3E%3Ccircle cx='300' cy='140' r='78'/%3E%3Ccircle cx='300' cy='140' r='104'/%3E%3Ccircle cx='300' cy='140' r='130'/%3E%3C/g%3E%3Cg fill='none' stroke='%23B08D57' stroke-width='0.8' opacity='0.3'%3E%3Ccircle cx='300' cy='140' r='39'/%3E%3Ccircle cx='300' cy='140' r='65'/%3E%3Ccircle cx='300' cy='140' r='91'/%3E%3Ccircle cx='300' cy='140' r='117'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 74% 40%, #3A3049 0%, #2B1E4A 46%, #12100D 82%);
}
[data-brand="press"] .art-paper {
  background-image:
    linear-gradient(118deg, rgba(18,16,13,.74) 0%, rgba(18,16,13,.40) 52%, rgba(18,16,13,.20) 100%),
    linear-gradient(0deg, rgba(18,16,13,.55) 0%, rgba(18,16,13,0) 46%),
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg stroke='%23EDE8DF' stroke-width='1' opacity='0.3'%3E%3Cpath d='M70 16 L70 264'/%3E%3Cpath d='M120 16 L120 264'/%3E%3Cpath d='M170 16 L170 264'/%3E%3Cpath d='M220 16 L220 264'/%3E%3Cpath d='M270 16 L270 264'/%3E%3Cpath d='M320 16 L320 264'/%3E%3Cpath d='M370 16 L370 264'/%3E%3C/g%3E%3Cg fill='none' stroke='%23B08D57' stroke-width='1.2' opacity='0.4'%3E%3Cpath d='M40 60 L390 60'/%3E%3Cpath d='M40 214 L390 214'/%3E%3C/g%3E%3Cpath d='M220 0 L420 140 L220 280 Z' fill='%23B08D57' opacity='0.10'/%3E%3C/svg%3E"),
    radial-gradient(135% 130% at 26% 20%, #3A3049 0%, #2B1E4A 46%, #12100D 82%);
}
/* .art-smoke is the 6th member of Web::CoverArtHelper::PLATES (~1 in 6 Sections/
   Topics wears it), and it was the one plate the press sweep missed. It is also the
   only plate that pins its own `background-color` (#0a0a0c, the RETIRED cool
   near-black — press --cover is the paper-warm #12100D), and its smoke layers are a
   cool violet-grey. Both are baked INSIDE background-image/-color, so — exactly as
   the note above warns — the token flip can never reach them. Re-inked on the press
   ink/indigo family with the smoke re-hued warm. */
[data-brand="press"] .art-smoke {
  background-color: var(--cover);
  background-image:
    linear-gradient(180deg, rgba(18,16,13,.10) 0%, rgba(18,16,13,.30) 52%, rgba(18,16,13,.88) 100%),
    var(--grain),
    radial-gradient(58% 66% at 60% 28%, rgba(176,141,87,.42), transparent 62%),
    radial-gradient(44% 52% at 38% 54%, rgba(58,48,73,.62), transparent 64%),
    radial-gradient(120% 120% at 50% 30%, #3A3049 0%, #2B1E4A 45%, #12100D 82%);
}

/* ── The Press: the magazine cover — warm stock, brass spine ─────────────────
   The .mag-cover is the flagship editorial object (the Newsstand rail + the home
   hero rack), and it rendered on a COOL, blue-cast "paper" (#d2ccd8, rgba(190,186,
   196), rgba(120,117,135), #6a6675, #c9c4d0) with a brand-VIOLET spine — sitting
   directly beside the real warm press paper (#F4F1EC), where the cool cast reads
   violet. Re-cut on the press stock (spec §1.1: canvas/surface/rule/ink-muted) and
   the spine on brass. Theme-independent like the object itself. */
[data-brand="press"] .mag-cover {
  background-image:
    var(--grain),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(218,212,202,.20) 58%, rgba(133,126,114,.34)),
    radial-gradient(120% 92% at 72% 18%, #FBFAF8 0%, #F4F1EC 44%, #DAD4CA 100%);
}
[data-brand="press"] .mag-cover .mspine { background: var(--brass); }
[data-brand="press"] .mag-cover .meyebrow,
[data-brand="press"] .mag-cover .mdate { color: #6B6560; }   /* press ink-muted, 5.10 on paper ✓ */
[data-brand="press"] .theme-dark .mag-cover,
[data-brand="press"].theme-dark .mag-cover { background-color: #CFC9BD; }   /* warm dim, the twin of the cool #c9c4d0 */