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

/* Pin overlay text to a light value — legibility over a photo cannot depend on
   a palette token that is mid-tone by design. #FFFFFF on the darkest point of
   the gradient (rgba(20,18,16,.58) over a mid photo) clears 4.5:1 comfortably. */
.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: #FFFFFF; }

/* 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 #FFFFFF -
   .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. */

/* The eyebrow rule above shipped and did NOTHING, for two different reasons —
   the re-sweep measured headlines fixed (1.17 -> 10.84:1) while eyebrows still
   failed at 2.71 / 1.98 / 1.61:1.

   1. CASCADE. `.atl-ed-hero-eyebrow` is the correct class, but pages/_home-editorial.css
      sets `color: var(--atl-accent-2)` at the SAME specificity (0,1,0) — and it loads
      from a page-specific handle, which comes AFTER default.xml where this file loads.
      Equal specificity, later wins. Scoping under the overlay makes it (0,2,0).
   2. INVENTED CLASSES. `.atl-campaign-hero-eyebrow` and `.atl-catlanding-hero-eyebrow`
      exist in CSS but the templates emit `.atl-campaign-eyebrow` and
      `.atl-catlanding-eyebrow`. Those two selectors never matched an element.

   --atl-accent-2 is a mid-tone in every palette by design; over a dark scrim it
   cannot reach AA, which is why this pins a fixed light value rather than a token. */
.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,
/* Removed with the loyalty scrim, same commit. This set the eyebrow to near-white
   #F2EFEA, which was legible ONLY because the (wrongly applied) dark gradient sat
   behind it. With the scrim gone the loyalty hero is its light card again -
   _loyalty.css:16, background var(--atl-surface) - so near-white here would be
   invisible. Deleting the rule lets the eyebrow fall back to the palette token the
   page CSS already sets against that surface.
   Noted because it is the neighbour-falsification pattern: fixing one value made
   an adjacent value, correct under the old assumption, wrong. */