/*
 * 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; }