/* Shared page hero — the artwork IS the top of the page.

   Mirrors the hub's treatment (assets/master-sets.css) exactly, so the pages read as one site:
   a full-bleed illustration at the top, the copy straight on it with a glyph shadow, NO scrim and
   NO buttons, and the artwork credit in the block BELOW the image.
   [Caleb], 2026-10-15: *"i don't think we need the darkening at all, and i'd get rid of the buttons
   and move our text creditieing the artwork to just below this image and section."*

   Set the image per page with an inline custom property, e.g. style="--hero-img:url('/assets/hero-sets.jpg')"

   ⚠️ `header.site-header` is element+class (specificity 0,1,1) in the shared stylesheet, so a bare
   `.site-header` override LOSES to its `position:sticky`. Every rule that must win is written as
   `header.site-header...` here.
   ⚠️ `main.site-content` carries `margin:2rem auto` + a max-width, which holds a hero 32px down the
   page. That override is scoped to `body:has(.page-hero)` so it cannot reach the ~3,800 pages that
   have no hero and rely on that centring.
*/
.page-hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:74vh;padding:0;
  background:#131A2E var(--hero-img,none) left bottom / cover no-repeat;
}
.page-hero-inner{
  position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto;
  padding:0 1.5rem 2.9rem;
}
.page-hero-inner > *{max-width:690px}

/* ⭐ THE COPY IS CREAM WITH A TIGHT DARK SHADOW ON THE GLYPHS — never a band on the picture.
   These watercolours have no flat area at the scale of a line of text (a highlight and a shadow can
   fall inside the same line of type), so a shadow local to the glyphs is what carries legibility.
   Measured per page with scripts/surface_contrast_audit.py plus a rendered-pixel check. */
.page-hero .hero-eyebrow,
.page-hero .hero-title{
  color:#F8F3E7;
  /* ⚠️ MEASURED 2026-10-15: these watercolours carry WHITE (luminance 1.00) directly under the copy,
     so a soft drop shadow alone is not enough — vision review rated two of the five heroes unreadable
     over the bright areas. The first two layers are TIGHT and ZERO-OFFSET, which reads as a dark halo
     hugging each letterform and holds against a white background; the last two give the soft lift.
     ⛔ Still NO band and NO scrim on the picture — the darkening is only ever applied to the glyphs. */
  text-shadow:
    0 0 2px rgba(6,9,18,.98),
    0 0 4px rgba(6,9,18,.95),
    0 1px 2px rgba(6,9,18,.95),
    0 3px 12px rgba(6,9,18,.85);
}
.page-hero .hero-eyebrow{
  display:block;font-family:'JetBrains Mono',monospace;font-size:.84rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 .45rem;
  text-shadow:
    0 0 2px rgba(6,9,18,.98),
    0 0 4px rgba(6,9,18,.98),
    0 1px 2px rgba(6,9,18,.96),
    0 3px 10px rgba(6,9,18,.88);
}
.page-hero .hero-title{
  font-family:'Space Grotesk',sans-serif;font-size:3.35rem;line-height:1.03;font-weight:700;
  letter-spacing:-.025em;margin:0;
}

/* the credit is a LICENCE OBLIGATION, not fine print — near-body scale with real contrast */
/* ⚠️ THIS SITS ON THE NAVY HERO, NOT ON WHITE. It was written with the light-surface greys
   (#726d64 text, #7a5c14 links) and measured **3.36:1 and 2.77:1** on rgb(19,26,46) — 153 below-AA
   elements on /collections/ alone. Every page that carries a .page-credit (collections, sets,
   guides, about) puts it over the hero artwork, so the dark-surface values are the correct ones:
   text #c9c3b6 (~9:1) and a warm gold link #d9c48a (~10:1). */
.page-credit{font-size:.78rem;line-height:1.7;color:#726d64;margin:0 0 1.4rem;max-width:790px}
.page-credit a{color:#7a5c14;text-decoration:underline}
/* ⚠️ THE SAME CLASS SITS ON TWO SURFACES. On /sets/, /about/ and /guides/ it is on the CREAM band and
   these values are right. On /collections/ it is over the navy hero, where they measured 3.36:1 and
   2.77:1 — so that page overrides it locally (build_site.py). Do not "fix" this file for navy again:
   doing that swung /sets/ to 1.59:1 and 1.55:1. */

/* ---- the nav OVERLAYS the artwork and leaves on scroll-down (the homepage's + hub's behaviour) ---- */
header.site-header{
  position:fixed !important;top:0;left:0;right:0;z-index:60;
  background:transparent !important;box-shadow:none !important;border-bottom:0 !important;
  /* ⚠️ The SHARED stylesheet paints this bar white at 93% with `backdrop-filter:blur(12px)`, and
     overriding only `background` left the BLUR running — the bar stayed a milky band across the
     top of the artwork (measured: `blur(12px)` at rest on every hero page, `none` on the homepage,
     which is the page that looked right). Both must be neutralised; the blur comes back only when
     the bar goes solid. */
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  transition:transform .3s ease, background-color .25s ease;
}
header.site-header.hidden{transform:translateY(-102%)}
header.site-header.nav-solid{background:rgba(19,26,46,.95) !important;
  backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important}
header.site-header .brand-name,
header.site-header .nav-btn{color:#F8F3E7;text-shadow:0 2px 6px rgba(6,9,18,.92), 0 1px 1px rgba(6,9,18,.9)}
header.site-header .brand-text p{color:#E8C46A;text-shadow:0 1px 4px rgba(6,9,18,.9)}
header.site-header .brand-badge{background:#F8F3E7;color:#131A2E}
header.site-header .nav-badge-pill{
  background:rgba(19,26,46,.55) !important;color:#F8F3E7 !important;
  border-color:rgba(248,243,231,.42) !important;}
header.site-header .nav-btn:hover{color:#E8C46A}
/* ⚠️ THE ACTIVE TAB PAINTS ITS OWN WHITE PILL (`stylesheet.css`: `.nav-btn.active{background:#fff;
   color:var(--text-main)}`). On a hero page this file makes every `.nav-btn` CREAM, so the active
   one measured **1.11:1 — cream on white, i.e. invisible**. Only the /cards-worth-chasing/ family
   carries `active` today, which is why only it failed. Same treatment the homepage's own override
   already uses: cream ink, cream rule, no white fill. Measured 2026-10-21. */
header.site-header .nav-btn.active{background:transparent;border-color:rgba(248,243,231,.42);
  box-shadow:none;color:#F8F3E7}
header.site-header .nav-btn.active:hover{color:#E8C46A;background:rgba(248,243,231,.08)}

/* scoped to hero pages only — see the note at the top of this file */
body:has(.page-hero) main.site-content{max-width:none !important;margin:0 !important;padding:0 !important}

/* Pages whose content is NOT banded still need a constrained column once `main.site-content` has
   been unconstrained above, or the body copy runs edge to edge. Wrap that content in .page-body. */
.page-body{width:100%;max-width:1240px;margin:0 auto;padding:1.7rem 1.5rem 2.4rem}

@media (max-width:820px){
  .page-hero{min-height:62vh}
  .page-hero .hero-title{font-size:2.25rem}
}
/* ⭐ AT MOBILE THE TRANSPARENT OVERLAY IS OFF (2026-10-21). Floating the nav on a TRANSPARENT bar
   over the hero is a DESKTOP design; on a phone the header wraps to 184px while the hero's own text
   starts 40px down, so the nav sat ON the hero's eyebrow and headline (measured at a true 390px
   viewport). Below 821px this page falls back to the shared sticky header - the same one every other
   page uses, which is why those pages never showed the fault. */
@media (max-width: 820px){
  header.site-header{position:sticky !important;background:#131A2E !important;
    transform:none !important;backdrop-filter:none !important;will-change:auto}
  header.site-header.hidden,header.site-header.nav-hidden{transform:none !important}
}