/* ============================================================
   article-poster.css — #175 Direction A "The Poster" (v3)
   James picked A 2026-10-19 07:56 PT. Spec: article-lead-design-2026-10-19
   REPORT.md + comps/compA-*.png + work/compA-mw4.html (values lifted from
   the approved comp, adapted to production class names).

   Gated on .ed-hero.ed-poster. The class is added ONLY by the article
   template / fleet transform when the story's hero asset is genuinely
   wide (ratio >= 1.45, width >= 1000px). Stories without the class keep
   the current article top exactly as-is. This file loads AFTER
   article-v2.css. The structural declarations carry !important because
   the d3 theme blocks in the earlier sheets pin the unwound (paper)
   layout with high-specificity :has() rules — inside this gated
   component, the poster geometry is not negotiable.
   ============================================================ */

/* --- stage: full-bleed, edge to edge (overrides inset card base +
   the article-v2 "paper tray": bg, radius, shadow, max-width) --- */
body.ed-redesign .ed-hero.ed-poster{max-width:none;margin:0;padding:0;background:transparent !important;border-radius:0;box-shadow:none}
body.ed-redesign .ed-hero.ed-poster .ed-hero-media{position:relative !important;display:block !important;border-radius:0;overflow:hidden !important;background:#000;min-height:560px;height:calc(100vh - 58px)}
body.ed-redesign .ed-hero.ed-poster .ed-hero-media>img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover;object-position:50% 32%;margin:0;border-radius:0;aspect-ratio:auto}
body.ed-redesign .ed-hero.ed-poster .ed-hero-media>picture{position:absolute !important;inset:0 !important;display:block;width:100%;margin:0;border-radius:0;aspect-ratio:auto}
body.ed-redesign .ed-hero.ed-poster .ed-hero-media>picture img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover;object-position:50% 32%}

/* --- scrim: the comp's gradient (top shade, clear middle, deep foot) --- */
body.ed-redesign .ed-hero.ed-poster .ed-hero-scrim{display:block !important;position:absolute !important;inset:0;background:linear-gradient(180deg,rgba(9,14,26,.34) 0%,rgba(9,14,26,0) 30%,rgba(9,14,26,.28) 55%,rgba(9,14,26,.88) 100%)}
body.ed-redesign .ed-hero.ed-poster .ed-hero-scrim::after{display:none}

/* --- copy block floats on the art, bottom-left (comp geometry) --- */
body.ed-redesign .ed-hero.ed-poster .ed-hero-copy{position:absolute !important;left:0;right:0;bottom:0;top:auto;z-index:2;padding:0 56px 44px;max-width:1060px}
body.ed-redesign .ed-hero.ed-poster .ed-metarail{display:none !important}

/* --- kicker: gold, letterspaced, no dash rule (comp) --- */
body.ed-redesign .ed-hero.ed-poster .ed-kickerrow{margin:0 0 14px}
body.ed-redesign .ed-hero.ed-poster .ed-kicker{display:inline;background:none;padding:0;font-size:11.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:#f2bc68 !important;text-shadow:none}
body.ed-redesign .ed-hero.ed-poster .ed-kicker::before{display:none}

/* --- headline: Marathon, white, as-written case, poster scale
   (comp: 64px / 1.04) --- */
html[data-theme="d3"] body.ed-redesign .ed-hero.ed-poster .ed-hero-copy h1,
body.ed-redesign .ed-hero.ed-poster .ed-hero-copy h1{font-family:'Marathon Long Run Display','Previously Display',serif !important;font-weight:400;font-size:clamp(40px,4.4vw,64px);line-height:1.04;letter-spacing:.012em;margin:0 0 16px;color:#fdfcf8 !important;text-transform:none !important;text-shadow:0 2px 24px rgba(9,14,26,.45);text-wrap:balance}

/* --- dek: warm off-white on the scrim (comp: 18.5px / 1.55) --- */
html[data-theme="d3"] body.ed-redesign .ed-hero.ed-poster .ed-hero-copy .ed-deck,
html[data-theme="d3"] body.ed-redesign .ed-hero.ed-poster .ed-hero-copy .ed-dek,
body.ed-redesign .ed-hero.ed-poster .ed-hero-copy .ed-deck,
body.ed-redesign .ed-hero.ed-poster .ed-hero-copy .ed-dek{font-size:18.5px;line-height:1.55;color:#e8e4d8 !important;max-width:760px;margin:0 0 20px;text-shadow:0 1px 10px rgba(9,14,26,.5)}

/* --- byline row on the art (comp: 34px avatar, name + meta line) --- */
body.ed-redesign .ed-hero.ed-poster .ed-byline-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;text-shadow:none;border-top-color:transparent !important;border-bottom-color:transparent !important}
body.ed-redesign .ed-hero.ed-poster .ed-avatar{width:34px;height:34px;flex:none}
body.ed-redesign .ed-hero.ed-poster .ed-byline{font-size:13px;line-height:1.45;color:#cfd6e2 !important;text-shadow:none}
body.ed-redesign .ed-hero.ed-poster .ed-byline b{color:#fdfcf8 !important;font-weight:700}
body.ed-redesign .ed-hero.ed-poster .ed-byline .ed-sub{color:#aeb8c8 !important}
body.ed-redesign .ed-hero.ed-poster .ed-share a,
body.ed-redesign .ed-hero.ed-poster .ed-share button{border-color:rgba(240,238,230,.4);color:#f2f2f2;background:transparent;backdrop-filter:none;text-shadow:none}

/* --- photo credit: small, bottom-right corner of the art (comp) --- */
body.ed-redesign .ed-hero.ed-poster .ed-photo-credit{position:absolute !important;right:22px;bottom:14px;z-index:3;max-width:60%;text-align:right;padding:0;font-size:11px;color:rgba(240,238,230,.75) !important;letter-spacing:.04em;text-shadow:0 1px 4px rgba(9,14,26,.6)}
body.ed-redesign .ed-hero.ed-poster .ed-photo-credit b,
body.ed-redesign .ed-hero.ed-poster .ed-photo-credit strong{color:rgba(240,238,230,.9) !important}

/* --- phone: its own composition per the comp (tall stage, stacked) --- */
@media (max-width:700px){
  body.ed-redesign .ed-hero.ed-poster .ed-hero-media{height:calc(100svh - 122px);min-height:640px}
  body.ed-redesign .ed-hero.ed-poster .ed-hero-copy{padding:0 20px 30px;max-width:none}
  body.ed-redesign .ed-hero.ed-poster .ed-hero-copy h1{font-size:37px}
  body.ed-redesign .ed-hero.ed-poster .ed-hero-copy .ed-deck,
  body.ed-redesign .ed-hero.ed-poster .ed-hero-copy .ed-dek{font-size:16px}
  body.ed-redesign .ed-hero.ed-poster .ed-photo-credit{right:14px;bottom:10px}
}