/* IV hero scrim — added 2026-08-06 after the ivory sweep measured hero text at
   1.14:1 (T2 eyebrow), 1.17:1 (T2 headline across the model's hair), 1.66:1 (T3)
   and 2.80:1 (T6) against a 4.5:1 AA requirement. The probe read 16.25:1 on a
   known-good control, so those numbers are real, not instrument error.
   
   The sweep reported THREE failing pages. Measuring the whole class found SIX
   overlays and every one of them declared no background at all — text painted
   directly onto a photograph. Fixing only the three reported pages would have
   closed the ticket and left the same defect on about, loyalty and the main
   hero, where nobody had happened to measure.
   
   Two parts, because a scrim alone does not fix it: text over a photo is
   unpredictable, so the overlay both darkens the image AND pins its own text to
   a fixed light value rather than inheriting a palette token. --atl-accent-2 is
   a mid-tone in every palette; over a darkened photo it would still fail. The
   gradient is heavier at the bottom where these heroes place their copy. */

.atl-ed-hero-overlay,
.atl-campaign-hero-overlay,
.atl-catlanding-hero-overlay,
.atl-about-hero-overlay {
  background: linear-gradient(180deg, rgba(20, 18, 16, 0.60) 0%, rgba(20, 18, 16, 0.72) 100%);
}

/* Overlay text is pinned to --atl-on-scrim: the scrim is dark in every palette, so the text cannot follow a palette token. */
.atl-ed-hero-overlay, .atl-ed-hero-overlay .atl-ed-hero-title,
.atl-campaign-hero-overlay, .atl-catlanding-hero-overlay,
.atl-about-hero-overlay { color: var(--atl-on-scrim); }

/* CRITICAL, caught by the S3 correctness review: .atl-hero-copy and
   .atl-loyalty-hero-copy were in both rules above and DO NOT sit on a photograph.
   My premise - "declares no background, therefore text is painted onto an image"
   - is false for these two:
     _home.css:47    .atl-hero-slide is display:grid with two columns; .atl-hero-copy
                     (text) and .atl-hero-media (the <img>) are SIBLINGS, so the copy
                     sits on the page background.
     _loyalty.css:16 .atl-loyalty-hero is a light card, background var(--atl-surface)
                     with a border - no image at all.
   Shipped effect: a charcoal gradient panel over the left half of all three
   homepage hero slides, and over the loyalty hero card. Worse, three descendants
   carry their own colour and so never inherited the compensating white -
   .atl-hero-kicker (accent-2), .atl-hero-body (text-subtle) and .atl-btn--secondary
   (var(--atl-text) on transparent), which made the Lookbook / Our Craft CTAs
   near-black on near-black, i.e. invisible.
   Both selectors removed. The four remaining entries are genuine
   position:absolute; inset:0 overlays over real hero images - the reviewer traced
   each one. Also dropped the .atl-hero-copy .atl-lf-eyebrow rule: atl-lf-eyebrow
   is emitted only in product-view.phtml and never inside .atl-hero-copy, so it
   matched nothing - the same invented-selector no-op this file already claims to
   have eliminated once. */

.atl-ed-hero-overlay .atl-ed-hero-eyebrow,
.atl-campaign-hero-overlay .atl-campaign-eyebrow,
.atl-catlanding-hero-overlay .atl-catlanding-eyebrow,
.atl-about-hero-overlay .atl-about-hero-eyebrow { color: var(--atl-on-scrim); } /* (0,2,0) beats the page-level (0,1,0) accent-2 rule */