/* The article lifts the homepage's dark palette. Header and footer keep
   their normal tokens; the taped media components live in pillar.css. */
.zoo main { --bg: #1b2736; --panel: #253344; --zoo-floor: linear-gradient(0deg, #1b2736cc, #1b273600 35%); background: var(--bg); }
.zoo [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.zoo-skip { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--gold); color: var(--bg); transform: translateY(-150%); }
.zoo-skip:focus { transform: none; }
/* The hero stands on the zoo's own entrance rather than the shared homepage
   art. The plate is proportionally taller than hero-bg (1600x1007 vs 1600x893),
   so `cover` crops it to the middle band — the gate columns and their gold
   animals. Keep the scrim directional: the copy column sits on the heavy end,
   and the gates stay legible under the open end. */
.zoo-hero { justify-content: center; padding: 64px 0 48px; min-height: 0; background-image: var(--zoo-floor), linear-gradient(100deg, #1b2736ed 0%, #1b2736c9 46%, #1b27366b 100%), url('/images/zoo/gates-hero.webp'); }
.zoo-hero .rp-hero-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; padding-bottom: 0; }
.zoo-hero h1 { font-size: 28px; }
.zoo-byline { margin-top: 24px; }
.zoo-cover .rp-polaroid img { aspect-ratio: 3 / 4; object-fit: cover; }
.zoo-encounter { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.zoo-encounter--reverse { grid-template-columns: 1fr 1.2fr; }
.zoo-encounter--reverse .rp-keepsake { order: 2; }
.zoo-copy { min-width: 0; }
.zoo-copy p { margin: 0 0 18px; }
.zoo-copy .rp-eyebrow { margin-bottom: 16px; }
.zoo-copy .rp-eyebrow::before { display: none; }
.zoo .rp-section { padding-block: 88px; }
.zoo-scene { --scene-scrim: var(--zoo-floor), linear-gradient(90deg, #1b2736ed 0%, #1b2736d9 44%, #1b273659 100%); }
.zoo-cat-marker { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zoo-visit { max-width: 680px; margin: 0 auto; padding: 72px 20px; }
.zoo-visit .rp-h2 { font-size: 16px; }
@media (max-width: 979px) {
  .zoo-hero .rp-hero-inner { gap: 24px; }
  .zoo-hero h1 { font-size: 24px; }
  .zoo-encounter { gap: 32px; }
}
@media (max-width: 719px) {
  /* The scrim holds at .79 until 62%, then opens. The old ramp started at 40%,
     under a byline that begins at ~48%: it measured 3.42:1 on the gates and
     3.88:1 on the art before them — under 4.5:1 either way, so this was already
     failing before the new plate. 62% rather than 55% is set by the NARROWEST
     phone, not the common one: at 320px the byline wraps to three lines and its
     last line reaches 58.6% of the hero, which a 55% hold left at 4.33:1. The
     hold now clears every line at >=5.2:1 from 320px up, and still opens for the
     gates below. Re-measure at 320px if the hero's copy changes length. */
  .zoo-hero { padding: 40px 0 36px; background-image: var(--zoo-floor), linear-gradient(180deg, #1b2736e8 0%, #1b2736c9 40%, #1b2736c9 62%, #1b273652 84%, #1b2736c9 100%), url('/images/zoo/gates-hero-mobile.webp'); }
  .zoo-hero .rp-hero-inner, .zoo-encounter, .zoo-encounter--reverse { grid-template-columns: 1fr; gap: 28px; }
  .zoo-hero h1 { font-size: 24px; }
  .zoo .rp-section { padding-block: 56px; }
  .zoo-encounter .zoo-copy { order: -1; }
  .zoo-encounter--reverse .rp-keepsake { order: 0; }
  .zoo-scene { --scene-scrim: var(--zoo-floor), linear-gradient(180deg, #1b2736f2 0%, #1b2736e6 43%, #1b273659 78%, #1b2736c9 100%); }
  .zoo-visit { padding: 48px 20px; }
}
@media (forced-colors: active) { .zoo-hero { background-image: none; } }