/* ═══════════════════════════════════════════════════
   YAVAPAI-APACHE NATION — Anthem Page Styles
   Page-specific styles for anthem.html: photo hero,
   fact grid, evidence blocks, land timeline, irony
   boxes, "This Ground" documentary photo grid,
   territory map reference, and declaration wrap.
   Requires: variables.css, base.css, components.css, layout.css
   Extracted from anthem.html inline <style> — Session VII (6.0.0)
═══════════════════════════════════════════════════ */

/* ── ANTHEM HERO — photo-backed, earth-grounded ─── */
.anthem-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 88px clamp(1.5rem, 5vw, 5rem) clamp(4rem, 8vh, 7rem);
  /* rgba gradient — allows photo below to bleed through at edges */
  background: linear-gradient(
    185deg,
    rgba(8,4,8,0.90)   0%,
    rgba(14,6,16,0.86) 18%,
    rgba(26,8,8,0.80)  38%,
    rgba(43,16,5,0.68) 55%,
    rgba(28,10,4,0.78) 72%,
    rgba(13,5,4,0.90)  100%
  );
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Saguaro + Gavilan Peak — base photo layer */
.anthem-hero-photo {
  position: absolute;
  inset: 0;
  background: url('../assets/anthem-saguaro.webp') center 25% / cover no-repeat;
  filter: brightness(0.35) contrast(1.1) saturate(0.7);
  pointer-events: none;
  z-index: -2;
}

/* Crepuscular rays — 5% screen-blend texture layer */
.anthem-hero-rays {
  position: absolute;
  inset: 0;
  background: url('../assets/anthem-crepuscular.webp') center / cover no-repeat;
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: -1;
}

/* Warm red radial glow — kept from original */
.anthem-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 40% at 50% 60%, rgba(140,42,28,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* All hero content above pseudo layers */
.anthem-hero-label,
.anthem-hero-title,
.anthem-hero-sub,
.anthem-hero-coords { position: relative; z-index: 1; }

.anthem-hero-label {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  letter-spacing: 0.44em;
  color: var(--mesa-dusk);
  text-transform: uppercase;
  margin-bottom: 1.8rem;
  opacity: 0.88;
  text-shadow: 0 1px 8px rgba(0,0,0,0.95);
}
.anthem-hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 6vw, 5.2rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--canyon-sand);
  max-width: 980px;   /* was 820px — too narrow for "The Land They Did" at the
                         clamp's rendered size, forcing a 3rd line ("Did" orphaned)
                         at both 375px and 1440px. See lessons.md / 2026-08-31 audit. */
  margin-bottom: 2rem;
}
.anthem-hero-title em {
  font-style: normal;
  color: var(--sunray-gold);
}
.anthem-hero-sub {
  font-family: 'Crimson Pro', serif;
  font-size: clamp(1rem, 2.2vw, 1.22rem);
  font-style: italic;
  color: var(--canyon-sand);
  opacity: 0.72;
  max-width: 580px;
  line-height: 1.78;
}
.anthem-hero-coords {
  margin-top: 2.6rem;
  font-family: 'Raleway', sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.38em;
  color: var(--canyon-sand);
  opacity: 0.62;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.95);
}

/* ── ANTHEM SPIRIT LINE — earth sampled from this land ─ */
/* replaces the standard gold/red/turquoise spirit line on this page only */
.anthem-spirit-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent      0%,
    #8C4A28         15%,   /* --ironstone-deep */
    #B5724A         35%,   /* --anthem-earth   */
    #7A8C74         55%,   /* --desert-schist  */
    #C8956A         75%,   /* --desert-fine    */
    transparent    100%
  );
  opacity: 0.18;
}

/* ── FACT BLOCKS ──────────────────────────────────── */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  margin: 3rem 0;
}
.fact-cell {
  background: rgba(8,4,8,0.7);
  border: 1px solid rgba(200,144,10,0.09);
  padding: 2.4rem 2rem;
}
.fact-cell-num {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);  /* fluid: 2.2rem@550 → 3.2rem@1440 */
  font-weight: 900;
  color: var(--sunray-gold);
  opacity: 0.85;
  line-height: 1;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.fact-cell-label {
  font-family: 'Raleway', sans-serif;
  font-size: 8px;
  letter-spacing: 0.4em;
  color: var(--mesa-dusk);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  opacity: 0.97;   /* was 0.82 — precise WCAG recalc (2026-09-01) found 0.82 = 3.52:1,
                      short of 4.5:1 AA; 0.97 clears ~4.58:1. mesa-dusk needs ≥~0.965
                      at this size to pass — see lessons.md WCAG doctrine. */
}
.fact-cell-text {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  color: var(--canyon-sand);
  opacity: 0.82;
  line-height: 1.7;
}

/* ── EVIDENCE BLOCK ───────────────────────────────── */
.evidence-block {
  border-left: 2px solid var(--sacred-red);
  padding: 1.4rem 2rem;
  margin: 2.2rem 0;
  background: rgba(140,42,28,0.04);
}
.evidence-label {
  font-family: 'Raleway', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.44em;
  color: var(--mesa-dusk);
  text-transform: uppercase;
  opacity: 0.97;   /* was 0.90 — precise WCAG recalc (2026-09-01) found 0.90 = 4.06:1,
                      short of 4.5:1 AA; 0.97 clears ~4.58:1. Same mesa-dusk floor as
                      .fact-cell-label — see lessons.md WCAG doctrine. */
  margin-bottom: 0.7rem;
}
.evidence-text {
  font-family: 'Crimson Pro', serif;
  font-size: 1.08rem;
  font-style: italic;
  color: var(--canyon-sand);
  line-height: 1.82;
}
.evidence-source {
  font-family: 'Raleway', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.32em;
  color: var(--turquoise-pale);
  opacity: 0.80;   /* was 0.72 — precise WCAG recalc (2026-09-01) found 0.72 = 4.10:1,
                      short of 4.5:1 AA; 0.80 clears ~4.88:1. turquoise-pale needs
                      ≥~0.78 at this size — see lessons.md WCAG doctrine. */
  margin-top: 0.8rem;
  text-transform: uppercase;
}

/* ── LAND CHRONICLE TIMELINE ──────────────────────── */
.land-timeline {
  list-style: none;
  padding: 0;
  margin: 3rem 0;
  position: relative;
}
.land-timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--sunray-gold) 10%, var(--sacred-red) 60%, transparent);
  opacity: 0.22;
}
.lt-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.6rem;
  margin-bottom: 2.8rem;
  padding-left: 2rem;
  position: relative;
}
.lt-item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0.45rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sunray-gold);
  opacity: 0.55;
}
.lt-year {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sunray-gold);
  opacity: 0.75;
  letter-spacing: 0.05em;
  padding-top: 0.1rem;
}
.lt-content h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--canyon-sand);
  margin: 0 0 0.4rem;
}
.lt-content p {
  font-family: 'Crimson Pro', serif;
  font-size: 0.97rem;
  color: var(--canyon-sand);
  opacity: 0.75;
  line-height: 1.72;
  margin: 0;
}
.lt-item.red-mark .lt-year { color: var(--sacred-red); opacity: 0.85; }
.lt-item.red-mark::before { background: var(--sacred-red); }
.lt-item.blue-mark .lt-year { color: var(--turquoise-pale); opacity: 0.8; }
.lt-item.blue-mark::before { background: var(--turquoise-sky); }

/* ── IRONY BOXES ──────────────────────────────────── */
.irony-box {
  background: rgba(140,42,28,0.06);
  border: 1px solid rgba(140,42,28,0.14);
  border-left: 3px solid var(--sacred-red);
  padding: 2.8rem 2.4rem;
  margin: 3rem 0;
}
.irony-box h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--sacred-red); /* WCAG 1.4.3 decorative-signal exemption — see lessons.md */
  letter-spacing: 0.06em;
  margin: 0 0 1.2rem;
  opacity: 0.88;
}
.irony-box p {
  font-family: 'Crimson Pro', serif;
  font-size: 1.05rem;
  color: var(--canyon-sand);
  line-height: 1.88;
  opacity: 0.85;
  margin: 0 0 1rem;
}
.irony-box p:last-child { margin: 0; }

/* ── THIS GROUND — documentary photo testimony ────── */
.this-ground-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.ground-photo {
  margin: 0;
}
.ground-photo-frame {
  overflow: hidden;
  aspect-ratio: 4 / 3;  /* frame clips the image — caption lives outside */
}
.ground-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.78) contrast(1.04) saturate(0.82);
  transition: filter 0.5s ease;
}
.ground-photo:hover .ground-photo-frame img {
  filter: brightness(0.92) contrast(1.04) saturate(0.90);
}
.ground-photo figcaption {
  font-family: 'Raleway', sans-serif;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--canyon-sand);
  padding: 0.75rem 0 0;
  opacity: 0.65;   /* was 0.58 — precise WCAG recalc (2026-09-01) found 0.58 = 4.08:1,
                      short of 4.5:1 AA; 0.65 clears ~4.89:1. canyon-sand needs ≥~0.62
                      at this size — see lessons.md WCAG doctrine. */
  line-height: 1.6;
}

/* ── TERRITORY MAP REFERENCE ──────────────────────── */
.territory-map-ref {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 3rem 0;
}
.map-cell {
  background: rgba(10,6,14,0.8);
  border: 1px solid rgba(91,163,188,0.1);
  padding: 2rem 1.8rem;
}
.map-cell-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.42em;
  color: var(--turquoise-pale);
  text-transform: uppercase;
  opacity: 0.80;   /* was 0.72 — same turquoise-pale WCAG floor as .evidence-source,
                      see lessons.md WCAG doctrine. */
  margin-bottom: 0.6rem;
}
.map-cell-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--canyon-sand);
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
}
.map-cell-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--canyon-sand);
  opacity: 0.65;
  line-height: 1.65;
}

/* ── DECLARATION ──────────────────────────────────── */
.declaration-wrap {
  border-top: 1px solid rgba(200,144,10,0.12);
  border-bottom: 1px solid rgba(200,144,10,0.12);
  padding: 4rem 0;
  margin: 4rem 0;
}
.declaration-wrap p {
  font-family: 'Crimson Pro', serif;
  font-size: clamp(1.05rem, 2.2vw, 1.26rem);
  font-style: italic;
  color: var(--canyon-sand);
  line-height: 2;
  opacity: 0.88;
  margin: 0 0 1.4rem;
}
.declaration-wrap p:last-child { margin: 0; }

/* ── UTILITY ──────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--canyon-sand);
  opacity: 0.52;
  text-decoration: none;
  transition: opacity 0.25s;
}
.back-link:hover { opacity: 0.9; }
.back-link::before { content: '←'; font-family: inherit; letter-spacing: 0; }

.section-inner {
  max-width: var(--max-text);
  margin: 0 auto;
  padding: var(--section-v) var(--section-h);
}
.section-heading {
  font-family: 'Cinzel', serif;
  font-size: clamp(22px, 3.6vw, 38px);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--white-eagle);
  line-height: 1.18;
  margin-bottom: 36px;
}
.body-text {
  font-family: 'Crimson Pro', serif;
  font-size: clamp(16px, 1.1vw + 13.5px, 18px);  /* matches .section-body */
  color: var(--canyon-sand);
  line-height: 1.88;
  max-width: var(--max-body);
  margin-bottom: 24px;
}
.body-text:last-child { margin-bottom: 0; }

/* .nav-logo / .nav-logo span moved to css/layout.css (2026-09-01) so the
   persistent seal+wordmark nav treatment is shared by all three pages
   instead of being anthem.html-only. See lessons.md "Navigation Must Be
   Rigorously Consistent". */
.footer-inner { max-width: var(--max-text); margin: 0 auto; }
.footer-tagline {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--canyon-sand);
  line-height: 1.82;
  opacity: 0.62;
  max-width: 560px;
  margin: 0 auto 28px;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 28px;
}
.footer-links a {
  font-family: 'Raleway', sans-serif;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--canyon-sand);
  opacity: 0.45;
  transition: opacity 0.25s;
}
.footer-links a:hover { opacity: 0.9; }
.footer-copy {
  font-family: 'Raleway', sans-serif;
  font-size: 8px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--sunray-gold);
  opacity: 0.22;
}

/* ── RESPONSIVE — audited at 375px / 428px / 768px (Session VII) ──
   Mobile-first breakpoints consolidated here. A single ≤480px rule
   covers both the 375px (iPhone SE/13 mini) and 428px (iPhone Pro Max)
   floors used in the audit; ≤768px covers tablet/narrow-laptop widths.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .territory-map-ref { grid-template-columns: 1fr; }
  .this-ground-grid { grid-template-columns: 1fr; }
  .lt-item { grid-template-columns: 84px 1fr; gap: 1.2rem; }
  .fact-cell { padding: 2rem 1.6rem; }
  .irony-box { padding: 2.2rem 1.7rem; }
  .evidence-block { padding: 1.2rem 1.5rem; }
  .map-cell { padding: 1.7rem 1.5rem; }
  .declaration-wrap { padding: 3rem 0; }
}

@media (max-width: 480px) {
  .anthem-hero { padding: 76px clamp(1.2rem, 6vw, 2rem) clamp(3rem, 8vh, 5rem); }
  .anthem-hero-coords { letter-spacing: 0.28em; }
  /* Suppress the manual line break — "The Land They Did / Not Leave" — below
     this width. At narrow phone widths the browser's own natural wrap of
     the full run ("The Land They Did Not Leave") lands after "Did" anyway,
     but WITHOUT the forced break it wraps as two lines, not three; forcing
     the break here produced an orphaned "Did" alone on its own line.
     Root cause was .anthem-hero-title's max-width (too narrow for "The Land
     They Did" at the clamp's rendered size), fixed 820px -> 980px in
     changelog 6.2.0 — see lessons.md "anthem.html hero-title 3-line wrap"
     for the full reasoning. That session could not verify live (no browser
     access); live-verified at 375px via Playwright 2026-09-10 — renders as
     two clean lines, no orphan. */
  .ah-title-break { display: none; }
  .fact-grid { grid-template-columns: 1fr; gap: 2px; margin: 2.2rem 0; }
  .fact-cell { padding: 1.8rem 1.4rem; }
  .fact-cell-num { font-size: clamp(2rem, 9vw, 2.6rem); }
  .evidence-block { padding: 1.1rem 1.2rem; margin: 1.8rem 0; }
  .evidence-text { font-size: 1rem; }
  .land-timeline { margin: 2.2rem 0; }
  .lt-item {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding-left: 1.2rem;
    margin-bottom: 2.2rem;
  }
  .lt-year { font-size: 0.72rem; opacity: 0.85; }
  .irony-box { padding: 1.8rem 1.3rem; margin: 2.2rem 0; }
  .irony-box h3 { font-size: 0.98rem; }
  .irony-box p { font-size: 1rem; }
  .map-cell { padding: 1.5rem 1.3rem; }
  .declaration-wrap { padding: 2.4rem 0; margin: 2.6rem 0; }
  .footer-links { gap: 20px; flex-wrap: wrap; }
}

@media (max-width: 375px) {
  .anthem-hero-title { max-width: 100%; }
  .fact-cell-num { font-size: clamp(1.85rem, 11vw, 2.3rem); }
  .lt-item { padding-left: 1rem; }
  .irony-box { padding: 1.5rem 1.1rem; }
  .evidence-block { padding: 1rem 1rem; }
}