/* ---- hero carousel: IG-style top-news cards above Synchronized News ----
   One generic card DOM (photo / washes / top / body / foot), ten style skins
   (s0–s9) ported from the Instagram VS deck: lower-third, split, duotone clash,
   ballot bars, big-type, chat bubbles, broadsheet ledger, neo-brutalist,
   fight card, torn collage. Brand: #e11d48; sides blue #38bdf8 vs amber #f59e0b. */

.herocar { margin: 8px 0 18px; }
.hc-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 4px 4px 10px;
  scrollbar-width: none;
}
.hc-track::-webkit-scrollbar { display: none; }

.hc-card {
  /* snap-stop:always = one card per swipe/fling, never skipping past cards */
  position: relative; flex: 0 0 auto; scroll-snap-align: center; scroll-snap-stop: always;
  width: min(640px, calc(100vw - 56px)); height: 400px;
  border-radius: 18px; overflow: hidden; display: block; text-decoration: none;
  color: #f6f8fc; background: #0b0e13;
  box-shadow: 0 14px 36px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07);
  transform: translateZ(0);
}
/* mobile: the strip owns 60% of the viewport height; taller cards earn a
   4-line description so the text block fills its zone instead of floating. */
@media (max-width: 720px) {
  .hc-card { height: 60vh; width: calc(100vw - 46px); }
  .hc-body .hc-dek { -webkit-line-clamp: 4; font-size: 14px; }
  .hc-body .hc-head { font-size: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hc-card { transition: transform .25s ease; }
  .hc-card:hover { transform: translateY(-3px); }
}

.hc-ph { position: absolute; inset: 0; z-index: 0; background-image: var(--img); background-size: cover; background-position: center; }
.hc-card.noimg .hc-ph { background: radial-gradient(120% 90% at 80% 0%, #1b2740, #0b0e13); }
.hc-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7, 9, 14, .38), rgba(7, 9, 14, .03) 34%, rgba(7, 9, 14, .44) 66%, rgba(7, 9, 14, .86)); }
.hc-washA, .hc-washB, .hc-seam { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.hc-top { position: absolute; z-index: 5; top: 14px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hc-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13.5px; color: #fff; letter-spacing: -.01em; }
.hc-brand svg { width: 20px; height: 20px; display: block; }
.hc-brand .ai { opacity: .6; }
.hc-srcs { font-size: 11.5px; font-weight: 700; color: rgba(255, 255, 255, .9); background: rgba(11, 14, 19, .55); border: 1px solid rgba(255, 255, 255, .18); padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px); white-space: nowrap; }

.hc-body { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 44px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.hc-kicker { font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #ff5c7a; }
.hc-head { margin: 0; font-size: clamp(19px, 2.6vw, 26px); line-height: 1.14; font-weight: 850; letter-spacing: -.015em; text-wrap: balance; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.hc-dek { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .84); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Base VS layout: a symmetric grid — the two headers hug the medallion from
   both sides, so the VS sits exactly at the CENTER POINT between them, both
   horizontally (auto track between two 1fr columns) and vertically
   (align-items centers every box on the shared axis). */
.hc-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; font-weight: 800; font-size: 13.5px; line-height: 1.25; }
.hc-sa { color: #7fd4fa; justify-self: end; text-align: right; }
.hc-sb { color: #ffd28a; justify-self: start; text-align: left; }
/* VS medallion: sized off the header text it compares — exactly 5px taller.
   .hc-x INHERITS the side labels' font-size, so 1em here IS the header text
   size; only the inner glyph <i> is small. (em inside a custom property would
   resolve against the badge's own font — the classic var() pitfall.) */
.hc-x { flex: none; width: calc(1em + 5px); height: calc(1em + 5px); border-radius: 999px; background: #e11d48; color: #fff; display: grid; place-items: center; }
.hc-x i { font-style: normal; font-size: 8.5px; font-weight: 900; letter-spacing: .02em; line-height: 1; }
.hc-idx { display: none; }
/* Stacked (column) VS layouts: the medallion sits BETWEEN the two sides it
   compares — pulled into the gap so its center lands at the vertical midpoint
   between the stacked texts, floating above both. */
.s3 .hc-x, .s5 .hc-x { align-self: center; margin: calc(-.5em - 5.5px) 0; position: relative; z-index: 2; box-shadow: 0 0 0 3px rgba(7, 9, 14, .55); transform: translateY(var(--dy, 0px)); }
/* Ballot bars are left-anchored with data-driven widths: place the badge at the
   horizontal midpoint between the two bars' centers ((wa+wb)/4), so it always
   sits on the seam between the texts it compares, never past the shorter bar. */
.s3 .hc-x { align-self: flex-start; margin-left: calc((var(--wa, 72%) + var(--wb, 40%)) / 4 - 13px); }
.hc-foot { position: absolute; z-index: 5; left: 16px; right: 16px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: rgba(255, 255, 255, .65); }
.hc-arw { font-weight: 900; color: #fff; }

/* ---- numbered nav ---- */
.hc-nav { display: flex; justify-content: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.hc-n {
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px;
  border: 1px solid var(--line, rgba(127, 127, 127, .35)); background: transparent;
  color: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.hc-n.on { background: #e11d48; border-color: #e11d48; color: #fff; }

/* ============ the ten skins ============ */

/* s0 — newsroom lower-third: glass card holds the story block */
.s0 .hc-body { background: rgba(13, 17, 23, .74); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(6px); }

/* s1 — split card: photo on top, panel below. The photo reaches DOWN to the
   text block (58%) so there is no dead dark band between them. */
.s1 .hc-ph { inset: 0 0 42% 0; }
.s1 .hc-scrim { background: linear-gradient(180deg, rgba(7, 9, 14, .28), transparent 32%, rgba(11, 14, 19, .35) 52%, #0b0e13 60%); }
.s1 .hc-body { bottom: 46px; }
.s1 .hc-head { text-shadow: none; }

/* s2 — duotone clash: blue/amber halves meet at a seam */
.s2 .hc-ph { filter: grayscale(.55) contrast(1.05) brightness(.72); }
.s2 .hc-washA { display: block; mix-blend-mode: screen; opacity: .6; background: linear-gradient(120deg, rgba(56, 189, 248, .95), rgba(56, 189, 248, .25)); clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); }
.s2 .hc-washB { display: block; mix-blend-mode: screen; opacity: .6; background: linear-gradient(240deg, rgba(245, 158, 11, .95), rgba(245, 158, 11, .25)); clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); }
.s2 .hc-seam { display: block; inset: -4% auto; left: 50%; width: 3px; transform: rotate(6deg); background: rgba(255, 255, 255, .55); }
.s2 .hc-x { box-shadow: 0 0 0 5px rgba(225, 29, 72, .3); }

/* s3 — ballot bars: the sides render as coverage bars (widths set inline).
   Photo stays visible like the other skins — only the bar zone carries its own
   contrast (solid fills + a soft panel), not a near-black card-wide scrim. */
.s3 .hc-scrim { background: linear-gradient(180deg, rgba(7, 9, 14, .45), rgba(7, 9, 14, .12) 36%, rgba(7, 9, 14, .55) 62%, rgba(7, 9, 14, .92)); }
.s3 .hc-vs { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.s3 .hc-sa, .s3 .hc-sb { display: block; padding: 7px 11px; border-radius: 8px; color: #07090e; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 14px -4px rgba(0, 0, 0, .55); }
.s3 .hc-sa { background: #38bdf8; width: var(--wa, 72%); min-width: 34%; }
.s3 .hc-sb { background: #f59e0b; width: var(--wb, 40%); min-width: 34%; }

/* s4 — oversized type: the headline IS the image. Photo stays readable (not a
   black void) and the type block centers vertically so the card has no dead end. */
.s4 .hc-ph { opacity: .38; filter: grayscale(.35); }
.s4 .hc-scrim { background: linear-gradient(180deg, rgba(7, 9, 14, .5), rgba(7, 9, 14, .32) 45%, rgba(7, 9, 14, .72)); }
.s4 .hc-body { top: 50%; transform: translateY(-50%); bottom: auto; }
.s4 .hc-head { font-size: clamp(26px, 4vw, 42px); line-height: 1.04; }
.s4 .hc-dek { color: rgba(255, 255, 255, .78); }

/* s5 — chat bubbles: the two sides talk */
.s5 .hc-scrim { background: linear-gradient(180deg, rgba(7, 9, 14, .6), rgba(7, 9, 14, .45) 40%, rgba(7, 9, 14, .88)); }
.s5 .hc-vs { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.s5 .hc-sa { align-self: flex-start; max-width: 82%; background: rgba(56, 189, 248, .16); border: 1px solid rgba(56, 189, 248, .45); border-radius: 12px 12px 12px 3px; padding: 7px 11px; color: #bfe9fd; }
.s5 .hc-sb { align-self: flex-end; max-width: 82%; text-align: right; background: rgba(245, 158, 11, .15); border: 1px solid rgba(245, 158, 11, .45); border-radius: 12px 12px 3px 12px; padding: 7px 11px; color: #ffe1b0; }

/* s6 — broadsheet ledger: light editorial, serif headline, red rule */
.s6 { background: #faf8f4; color: #141310; }
.s6 .hc-ph { inset: 0 0 46% 0; filter: grayscale(1) contrast(1.05); }
.s6 .hc-scrim { inset: 0 0 46% 0; background: rgba(225, 29, 72, .11); }
.s6 .hc-kicker { color: #e11d48; border-top: 3px solid #e11d48; padding-top: 8px; }
.s6 .hc-head { font-family: Georgia, 'Times New Roman', serif; color: #141310; text-shadow: none; }
.s6 .hc-dek { color: #4d483f; }
.s6 .hc-brand { color: #141310; } .s6 .hc-brand .ai { opacity: .5; }
.s6 .hc-srcs { color: #141310; background: rgba(20, 19, 16, .06); border-color: rgba(20, 19, 16, .22); }
.s6 .hc-sa { color: #185fa5; } .s6 .hc-sb { color: #854f0b; }
.s6 .hc-foot { color: #6d675c; } .s6 .hc-arw { color: #e11d48; }

/* s7 — neo-brutalist: hard strokes, hard shadows, no photo */
.s7 { background: #f2ede2; color: #101010; }
.s7 .hc-ph, .s7 .hc-scrim { display: none; }
.s7 .hc-head { background: #f2ede2; border: 3px solid #101010; box-shadow: 7px 7px 0 #101010; padding: 10px 12px; text-transform: uppercase; color: #101010; text-shadow: none; }
.s7 .hc-dek { font-family: Consolas, 'Courier New', monospace; color: #33302a; }
.s7 .hc-kicker { color: #e11d48; }
.s7 .hc-sa, .s7 .hc-sb { border: 3px solid #101010; box-shadow: 5px 5px 0 #101010; padding: 6px 10px; font-weight: 900; text-transform: uppercase; }
.s7 .hc-sa { background: #38bdf8; color: #07131c; }
.s7 .hc-sb { background: #f59e0b; color: #241503; }
.s7 .hc-x { border-radius: 0; }
.s7 .hc-brand { color: #101010; } .s7 .hc-brand .ai { opacity: .5; }
.s7 .hc-srcs { color: #101010; background: transparent; border: 2px solid #101010; border-radius: 0; font-family: Consolas, monospace; }
.s7 .hc-foot { color: #33302a; font-family: Consolas, monospace; } .s7 .hc-arw { color: #e11d48; }

/* s8 — fight card: diagonal corner washes, big VS */
.s8 .hc-ph { filter: grayscale(.65) contrast(1.08) brightness(.68); }
.s8 .hc-washA { display: block; mix-blend-mode: screen; opacity: .5; background: linear-gradient(155deg, rgba(56, 189, 248, .95), transparent 60%); }
.s8 .hc-washB { display: block; mix-blend-mode: screen; opacity: .5; background: linear-gradient(-25deg, rgba(245, 158, 11, .95), transparent 60%); }
.s8 .hc-head { text-align: center; text-transform: uppercase; letter-spacing: .02em; }
.s8 .hc-kicker { text-align: center; }
.s8 .hc-dek { text-align: center; }
.s8 .hc-vs { font-size: 15px; }
.s8 .hc-sa, .s8 .hc-sb { text-transform: uppercase; font-weight: 900; }
.s8 .hc-x { box-shadow: 0 0 0 6px rgba(225, 29, 72, .25); }

/* s10 — masthead cover: magazine grammar — a brand-red masthead band on top,
   serif cover lines over the full-bleed photo */
.s10 .hc-top { top: 0; left: 0; right: 0; padding: 10px 16px; background: #e11d48; }
.s10 .hc-srcs { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); }
.s10 .hc-brand svg { border-radius: 5px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
.s10 .hc-kicker { color: #ff8fa5; }
.s10 .hc-head { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(22px, 3vw, 30px); }
.s10 .hc-scrim { background: linear-gradient(180deg, rgba(7, 9, 14, .12), rgba(7, 9, 14, .05) 34%, rgba(7, 9, 14, .5) 64%, rgba(7, 9, 14, .9)); }

/* s11 — receipts: light panel, each side a white "receipt" card with a colored
   tab; the VS medallion stamps the seam between them */
.s11 { background: #eef0f4; color: #0d1420; }
.s11 .hc-ph { inset: 0 0 64% 0; }
.s11 .hc-scrim { inset: 0 0 62% 0; background: linear-gradient(180deg, rgba(13, 20, 32, .28), rgba(238, 240, 244, 0) 55%, #eef0f4); }
.s11 .hc-kicker { color: #e11d48; }
.s11 .hc-head { color: #0d1420; text-shadow: none; }
.s11 .hc-dek { color: #4a5568; }
.s11 .hc-vs { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.s11 .hc-sa, .s11 .hc-sb { background: #fff; color: #0d1420; border-radius: 10px; padding: 8px 12px 8px 16px; position: relative; box-shadow: 0 3px 12px -4px rgba(13, 20, 32, .3); }
.s11 .hc-sa::before, .s11 .hc-sb::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 10px 0 0 10px; }
.s11 .hc-sa::before { background: #38bdf8; }
.s11 .hc-sb::before { background: #f59e0b; }
.s11 .hc-x { align-self: center; margin: calc(-.5em - 5.5px) 0; position: relative; z-index: 2; border-radius: 7px; transform: translateY(var(--dy, 0px)) rotate(-8deg); box-shadow: 0 0 0 3px #eef0f4; }
.s11 .hc-brand { color: #0d1420; } .s11 .hc-brand .ai { opacity: .5; }
.s11 .hc-foot { color: #4a5568; } .s11 .hc-arw { color: #e11d48; }

/* s12 — head-to-head spine: mirrored sides on a red center axis, ESPN-style */
.s12 .hc-ph { opacity: .55; }
.s12 .hc-kicker { text-align: center; letter-spacing: .22em; }
.s12 .hc-head { text-align: center; }
.s12 .hc-dek { text-align: center; }
.s12 .hc-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.s12 .hc-sa { text-align: right; }
.s12 .hc-sb { text-align: left; }
.s12 .hc-x { position: relative; box-shadow: 0 0 0 4px rgba(225, 29, 72, .28); }
.s12 .hc-x::before, .s12 .hc-x::after { content: ""; position: absolute; left: 50%; width: 2px; height: 22px; background: #e11d48; transform: translateX(-50%); }
.s12 .hc-x::before { bottom: 100%; }
.s12 .hc-x::after { top: 100%; }

/* s13 — gradient beam: brand light sweeping across the photo, glass story block */
.s13 .hc-ph { filter: saturate(1.1) brightness(.78); }
.s13 .hc-scrim { background: linear-gradient(115deg, rgba(12, 74, 110, .7), rgba(225, 29, 72, .4) 55%, rgba(7, 9, 14, .8)), linear-gradient(180deg, transparent 40%, rgba(7, 9, 14, .65)); }
.s13 .hc-kicker { color: #ffd0da; }
.s13 .hc-body { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: 12px 14px; backdrop-filter: blur(8px); }

/* s14 — editorial index: oversized card number, hairline rules, quiet type */
.s14 { background: #101216; }
.s14 .hc-ph { opacity: .25; filter: grayscale(.8); }
.s14 .hc-scrim { background: linear-gradient(180deg, rgba(7, 9, 14, .3), rgba(7, 9, 14, .75)); }
.s14 .hc-idx { display: block; position: absolute; z-index: 2; top: 44px; left: 16px; font-size: 84px; font-weight: 900; letter-spacing: -.05em; color: rgba(255, 255, 255, .13); font-variant-numeric: tabular-nums; line-height: 1; }
.s14 .hc-kicker { color: #8b97a8; letter-spacing: .22em; border-bottom: 1px solid rgba(255, 255, 255, .22); padding-bottom: 6px; }
.s14 .hc-head { font-weight: 700; text-shadow: none; }
.s14 .hc-foot { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 8px; }

/* s15 — polaroid: the photo in a tilted white frame on paper, marker caption */
.s15 { background: #ded9cf; }
.s15 .hc-ph { inset: 46px 20px auto 20px; height: 42%; border: 9px solid #fff; border-bottom-width: 30px; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transform: rotate(-1.6deg); background-color: #b9b2a4; }
.s15 .hc-scrim { display: none; }
.s15 .hc-brand { color: #17150f; } .s15 .hc-brand .ai { opacity: .5; }
.s15 .hc-srcs { color: #17150f; background: rgba(23, 21, 15, .07); border-color: rgba(23, 21, 15, .25); backdrop-filter: none; }
.s15 .hc-kicker { color: #e11d48; }
.s15 .hc-head { color: #17150f; text-shadow: none; font-family: 'Segoe Print', 'Bradley Hand', cursive; font-size: clamp(17px, 2.2vw, 22px); }
.s15 .hc-dek { color: #4d483f; }
.s15 .hc-sa { color: #185fa5; } .s15 .hc-sb { color: #854f0b; }
.s15 .hc-foot { color: #6d675c; } .s15 .hc-arw { color: #e11d48; }

/* s16 — newswire terminal: monospace wire feed, scanlines, green phosphor */
.s16 { background: #05070a; }
.s16 .hc-ph { opacity: .22; filter: grayscale(1) contrast(1.2); }
.s16 .hc-scrim { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 4px); }
.s16 .hc-kicker, .s16 .hc-head, .s16 .hc-dek, .s16 .hc-foot, .s16 .hc-srcs { font-family: Consolas, 'Courier New', monospace; }
.s16 .hc-kicker { color: #4ade80; }
.s16 .hc-kicker::before { content: ">> "; }
.s16 .hc-head { font-size: clamp(17px, 2.3vw, 22px); color: #e2f7ea; text-shadow: none; }
.s16 .hc-dek { color: #9fe8b8; }
.s16 .hc-srcs { color: #9fe8b8; background: rgba(5, 10, 7, .6); border-color: rgba(74, 222, 128, .4); border-radius: 4px; }
.s16 .hc-x { border-radius: 4px; }

/* s17 — poster stripes: Swiss tri-stripe bar + bold knockout headline */
.s17 .hc-ph { filter: brightness(.78) saturate(1.05); }
.s17 .hc-scrim { background: linear-gradient(180deg, rgba(7, 9, 14, .35), transparent 30%, rgba(7, 9, 14, .85) 72%); }
.s17 .hc-kicker { height: 8px; color: transparent; overflow: hidden; border-radius: 2px; background: linear-gradient(90deg, #38bdf8 0 33%, #e11d48 33% 66%, #f59e0b 66% 100%); }
.s17 .hc-head { font-weight: 900; text-transform: uppercase; font-size: clamp(21px, 3vw, 30px); }

/* s9 — torn collage: tinted halves, paper-scrap headline, marker notes */
.s9 .hc-washA { display: block; mix-blend-mode: overlay; background: rgba(56, 189, 248, .45); clip-path: polygon(0 0, 52% 0, 48% 12%, 53% 25%, 47% 38%, 52% 52%, 48% 65%, 53% 78%, 47% 90%, 51% 100%, 0 100%); }
.s9 .hc-washB { display: block; mix-blend-mode: overlay; background: rgba(245, 158, 11, .45); clip-path: polygon(52% 0, 100% 0, 100% 100%, 51% 100%, 47% 90%, 53% 78%, 48% 65%, 52% 52%, 47% 38%, 53% 25%, 48% 12%); }
.s9 .hc-head { align-self: flex-start; background: #f6f2e8; color: #17150f; padding: 8px 14px; transform: rotate(-1.4deg); box-shadow: 0 8px 22px rgba(0, 0, 0, .4); text-shadow: none; font-size: clamp(17px, 2.2vw, 23px); }
.s9 .hc-dek { align-self: flex-start; background: #17150f; color: #f6f2e8; font-family: Consolas, 'Courier New', monospace; font-size: 12px; padding: 6px 10px; transform: rotate(.6deg); }
.s9 .hc-sa, .s9 .hc-sb { font-family: 'Segoe Print', 'Bradley Hand', cursive; font-size: 14px; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }