/* Big League Stories — MAGAZINE style for the Framed Article (11×14in).
 * Design source: mockups/framed-magazine-v0.2.html (locked), standard-photo
 * version. Loaded after card.css (Anton, League Gothic, Allura) and
 * fonts/inter.css. Everything is scoped under .bls-mag. Proof-only affordances
 * hide under an ancestor `.exporting` (added by BLSCard.captureSide).
 *
 * html2canvas constraints (print render): no filter / mask-image /
 * mix-blend-mode / background-clip:text / repeating gradients / stacked inset
 * shadows / hyphens:auto. The crowd backdrop is pre-baked
 * (assets/magazine/hero-crowd.jpg) and the photo fade is a gradient overlay.
 *
 * Colors (operator rule, 2026-10-04/05): everything tied to the customer's
 * info follows the team color, gold when none was picked. Brand gold stays
 * gold (masthead rule, "Stories", logo). Variables are set by magazine.js:
 *   --accent        fills (kicker, slash, footer rule)
 *   --accent-ink    text ON an accent fill
 *   --accent-text   accent used as text/strokes on the dark hero/footer
 *   --accent-paper  accent used as text/rules on the white page
 */
.bls-mag {
  --navy: #0B1D33;
  --gold: #D4AF37;
  --ink: #121417;
  --muted: #5d6573;
  --accent: #D4AF37; --accent-ink: #0B1D33; --accent-text: #D4AF37; --accent-paper: #9C7A12;
  position: relative; width: 1056px; height: 1344px; overflow: hidden; flex: 0 0 auto;
  background: #ffffff; color: var(--ink); text-align: left;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.bls-mag *, .bls-mag *::before, .bls-mag *::after { box-sizing: border-box; }
.exporting .bls-mag { box-shadow: none !important; }

/* ── Masthead strip ── */
.mg-mast {
  position: absolute; top: 0; left: 0; right: 0; height: 58px; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; padding: 0 40px;
  background: var(--navy); color: #fff; border-bottom: 3px solid var(--gold);
}
.mg-brand { display: flex; align-items: center; gap: 12px; }
.mg-brand img { height: 30px; }
.mg-brand span { font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; }
.mg-brand span b { color: var(--gold); font-weight: 400; }
.mg-issue { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .26em; font-size: 15px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.mg-issue i { color: var(--accent-text); font-style: normal; }

/* ── Hero ── */
.mg-hero {
  position: absolute; top: 58px; left: 0; right: 0; height: 600px; overflow: hidden;
  background: var(--navy) url('assets/magazine/hero-crowd.jpg') center / cover no-repeat;
}
.mg-wash { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, var(--navy) 18%, rgba(11, 29, 51, .55) 55%, rgba(11, 29, 51, .15) 100%); }
.mg-slash {
  position: absolute; z-index: 1; left: -120px; bottom: -140px; width: 900px; height: 230px;
  background: var(--accent); transform: rotate(-9deg); transform-origin: left bottom;
}
.mg-slash::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 6px; background: var(--gold); }
/* The customer's photo — full height on the right. magazine.js draws the
   crop + the left-edge fade INTO the image (a CSS mask would not print). */
.mg-photo {
  position: absolute; z-index: 3; right: 0; top: 0; bottom: 0; width: 520px;
  background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer;
}
.mg-photo-hint {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: 28px;
  color: #E23A4F; border: 2px dashed rgba(226, 58, 79, .75); border-radius: 60px;
  padding: 18px 34px; background: rgba(8, 19, 37, .55); white-space: nowrap; pointer-events: none;
}
.bls-mag.has-photo .mg-photo-hint, .exporting .mg-photo-hint { display: none; }
.bls-mag.has-photo .mg-photo { touch-action: none; cursor: grab; }
/* E8 (2026-10-08): team pages — a different hero. The group shot fills the top
   of the hero at full width (nothing drawn over the faces); below it a solid
   navy band carries the kicker, team name and details, with the record as a
   solid accent mark at the right. No wash, no slash, no outline number. */
.bls-mag.is-wide .mg-hero { background-image: none; }
/* The photo fills the whole hero; the band is a translucent navy gradient —
   solid behind the text on the left, lighter toward the record on the right —
   so the bottom of the photo shows through (operator, 2026-10-08). */
.bls-mag.is-wide .mg-photo { width: 1056px; }
/* Straight band, more transparent, its top edge (accent + gold rule) sitting
   just above the top of the record (operator, 2026-10-08, final). The record
   uses the athlete page's giant OUTLINE style. (An angled edge was tried and
   rejected — and html2canvas ignores clip-path anyway.) */
/* Height + fade end are set per render by magazine.js layoutTeamBand() (they
   depend on the team name); these are the fallbacks. The band top is level with
   the sport tag; the navy fades out right after the name; the record sits on
   the photo in the athlete page's giant OUTLINE style. */
.bls-mag.is-wide .mg-wash { display: block; top: auto; bottom: 0; height: 150px; z-index: 4;
  background: linear-gradient(90deg, rgba(11, 29, 51, .9) 0%, rgba(11, 29, 51, .86) 60%, rgba(11, 29, 51, 0) 74%); }
/* Just the thin gold rule along the band's top edge (no accent bar), stopping before the record. */
.bls-mag.is-wide .mg-slash { left: 0; width: 780px; height: 3px; bottom: 150px; transform: none; border-radius: 0; z-index: 4; background: var(--gold); }
.bls-mag.is-wide .mg-slash::after { display: none; }
.bls-mag.is-wide .mg-num {
  left: auto; right: 40px; top: auto; bottom: 12px; z-index: 5; line-height: .9; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, .5); text-shadow: none;
}
.bls-mag.is-wide .mg-slash::after { top: -6px; height: 4px; }
.bls-mag.is-wide .mg-copy { left: 48px; bottom: 26px; max-width: 700px; }
.bls-mag.is-wide .mg-kicker { font-size: 15px; padding: 5px 12px 4px; }
.bls-mag.is-wide .mg-name { margin-top: 10px; }
.bls-mag.is-wide .mg-name .last { font-size: 84px; -webkit-text-stroke: 0; }
.bls-mag.is-wide .mg-meta { top: 0; margin-top: 10px; font-size: 17px; color: rgba(255,255,255,.8); opacity: 1; }
.bls-mag.is-wide .mg-meta b { color: #fff; }
.mg-drag-hint {
  display: none; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); pointer-events: none;
  padding: 8px 20px; border-radius: 999px; background: rgba(11, 29, 51, .74); color: #fff;
  font: 20px/1.2 -apple-system, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.bls-mag.has-photo .mg-drag-hint { display: block; }
.exporting .mg-drag-hint { display: none !important; }
/* Giant outlined jersey number — every digit the same soft white outline
   (operator, 2026-10-05: consistent, and it must read over the accent slash,
   which it sits above). */
.mg-num {
  position: absolute; z-index: 4; left: 190px; top: 34px; font-family: 'Anton', sans-serif; font-size: 600px; line-height: .9;
  color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, .34); letter-spacing: -.02em;
  white-space: nowrap; pointer-events: none;
}

.mg-copy { position: absolute; left: 48px; bottom: 58px; z-index: 5; max-width: 560px; color: #fff; pointer-events: none; }
.mg-kicker {
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 14px 5px; background: var(--accent); color: var(--accent-ink);
  font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .28em; font-size: 17px; white-space: nowrap;
}
.mg-name { margin: 16px 0 0; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; line-height: .86; letter-spacing: .005em; }
/* First name in the team color; last name (or a single name) WHITE with a navy
   edge — it overlaps the team-color slash, so it must never be that color
   (operator, 2026-10-05). */
.mg-name .first { display: block; font-size: 96px; color: var(--accent-text); white-space: nowrap; }
.mg-name .last { display: block; font-size: 150px; color: #fff; -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill; white-space: nowrap; }
/* The details row sits ON the accent slash, so it uses the ink color for that
   fill (navy on gold/light colors, white on deep ones) — never the accent itself. */
.mg-meta { position: relative; top: 48px; margin-top: 44px; display: flex; gap: 22px; font-family: 'League Gothic', sans-serif;
  text-transform: uppercase; letter-spacing: .2em; font-size: 18px; color: var(--accent-ink); opacity: .82; white-space: nowrap; }
.mg-meta b { color: var(--accent-ink); font-weight: 400; }

/* ── Headline block ── */
.mg-head { position: absolute; top: 676px; left: 48px; width: 960px; z-index: 6; }
.mg-section { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .3em; font-size: 15px; color: var(--accent-paper); }
.mg-headline {
  margin: 6px 0 10px; font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 60px; line-height: .98; letter-spacing: .005em; color: var(--navy); max-width: 960px;
}
.mg-deck { margin: 0; font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.45; color: var(--muted); max-width: 960px; }
.mg-byline { margin-top: 12px; font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .22em; font-size: 14px; color: var(--ink); }
.mg-byline span { color: var(--accent-paper); }

/* ── Story: three columns, filled by magazine.js (no CSS columns — explicit
   boxes print reliably and let the trim measure real fit). ── */
.mg-story {
  position: absolute; top: 924px; left: 48px; right: 48px; height: 272px;
  display: grid; grid-template-columns: 1fr 1fr 1.08fr; column-gap: 30px; align-items: start;
  border-top: 2px solid var(--navy); padding-top: 16px;
  font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 11.4px; line-height: 1.55; color: var(--ink);
}
/* .mg-col holds the divider (drawn outside its box); .mg-clip does the clipping. */
.mg-col { position: relative; height: 254px; }
.mg-col + .mg-col::before { content: ""; position: absolute; left: -15px; top: 0; bottom: 0; width: 1px; background: #d9dce1; }
.mg-clip { height: 100%; overflow: hidden; }
.mg-story p { margin: 0 0 8px; text-align: left; }
.mg-dropcap {
  float: left; font-family: 'Anton', sans-serif; font-size: 66px; line-height: .8; color: var(--accent-paper);
  margin: 4px 9px 0 0; padding: 4px 6px 0 0;
}
/* Pull quote: spans the column; matching open/close marks; thin rules. */
.mg-pull { margin: 2px 0 12px; padding: 6px 0 8px; border-top: 2px solid var(--accent-paper); border-bottom: 2px solid var(--accent-paper); }
.mg-qm { display: block; font-family: 'Anton', sans-serif; font-size: 64px; line-height: .62; color: var(--accent-paper); height: 30px; }
.mg-qm.open { text-align: left; margin-top: 8px; }
.mg-qm.close { text-align: right; margin-top: 4px; height: 24px; }
.mg-pull p {
  margin: 0; text-align: center;
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 23px; line-height: 1.12; letter-spacing: .01em; color: var(--navy); text-wrap: balance;
}
.mg-pull .who { display: block; margin-top: -10px; text-align: center; font-family: 'League Gothic', sans-serif;
  text-transform: uppercase; letter-spacing: .22em; font-size: 14px; color: var(--accent-paper); }

.mg-folio { position: absolute; left: 48px; right: 40px; bottom: 136px; display: flex; justify-content: space-between;
  font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .22em; font-size: 11px; color: #9aa1ad; }

/* ── Footer band: stats · signature · voice ticket ── */
.mg-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 126px; background: var(--navy); color: #fff;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 0 44px;
  border-top: 4px solid var(--accent);
}
.mg-stats { display: flex; justify-self: start; }
.mg-stat { padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, .18); text-align: center; }
.mg-stat:first-child { padding-left: 0; border-left: none; }
.mg-stat b { display: block; font-family: 'Anton', sans-serif; font-size: 36px; line-height: 1; color: #fff; white-space: nowrap; }
.mg-stat span { display: block; margin-top: 4px; font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--accent-text); white-space: nowrap; }
.mg-sig { position: relative; text-align: center; cursor: pointer; min-width: 240px; }
.mg-sig-ink { font-family: 'Allura', cursive; font-size: 48px; line-height: 1; height: 50px; color: #fff; white-space: nowrap; }
.mg-sig-img { display: none; height: 56px; max-width: 280px; margin: -6px auto 0; object-fit: contain; }
.mg-sig.signed .mg-sig-img { display: block; }
.mg-sig.signed .mg-sig-ink { display: none; }
.mg-sig-line { width: 220px; height: 1px; background: rgba(255, 255, 255, .4); margin: 2px auto 6px; }
.mg-sig-lbl { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .24em; font-size: 12px; color: rgba(255, 255, 255, .65); }
.mg-sig-lbl .cta { color: var(--accent-text); }
.exporting .mg-sig-lbl .cta { display: none; }

/* The QR in the standard BLS format (same as the Framed Cover): navy ticket,
   gold hairline, gold code — no white panel (operator, 2026-10-05). */
.mg-upc {
  justify-self: end; display: flex; gap: 12px; align-items: center;
  background: rgba(7, 18, 48, .86); color: #fff; padding: 8px 16px 8px 8px;
  border: 1.5px solid #F2C230; border-radius: 10px;
}
.mg-upc img { width: 92px; height: 92px; display: block; border-radius: 6px; }
.mg-upc .u1 { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .22em; font-size: 13px; color: #F2C230; }
.mg-upc .u2 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 26px; line-height: 1; margin: 2px 0 4px; }
.mg-upc .u3 { font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 11.5px; color: rgba(255, 255, 255, .72); max-width: 160px; }
.mg-upc .u4 { font-family: 'League Gothic', sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: rgba(255, 255, 255, .72); margin-top: 6px; }

/* ── Deep team colors: big accent type on the dark hero gets a thin white
   outline (gold, the default, is light and never needs it). ── */
.bls-mag.accent-dark .mg-kicker { box-shadow: 0 0 0 2px #fff; }

/* ── Proof-only edit affordances (never printed) ── */
.mg-edit { cursor: pointer; }
.mg-edit:not(.mg-story) { position: relative; }
.mg-edit::after {
  content: "✎"; position: absolute; top: -8px; right: -14px; z-index: 8; width: 34px; height: 34px; border-radius: 50%;
  background: #C8102E; color: #fff; font: 20px/34px -apple-system, system-ui, sans-serif; text-align: center;
  letter-spacing: 0; text-transform: none; opacity: .95; pointer-events: none;
}
.mg-story.mg-edit::after { top: auto; bottom: -6px; right: -10px; }
/* The quote sits inside a clipped story column — keep its chip inside. */
.mg-pull.mg-edit::after { top: 6px; right: 0; }
.mg-sig.mg-edit::after { top: -4px; right: -18px; }
.exporting .mg-edit::after { display: none; }
.bls-mag [hidden] { display: none !important; }