/* Outdoor group: outdoor-mountain.html, outdoor-water.html, outdoor-astronomy.html
   Page-layer additions on top of the Field Guide components (style.css).
   Tokens only; no raw colours, no url() other than the shared topo mask. */
@layer pages {

  /* ---------- masthead crops (spec section 6) ---------- */
  .outdoor-masthead--mountain .masthead__media > img { object-position: 66% 50%; }
  /* water masthead: hills, sea and the fleet. At the shared 3:2 crop
     (about 2/3 of the square visible) a 30% anchor keeps the front
     paddler's whole head in frame (it sat on the bottom edge at 0%) and
     the bottom-right AI badge out of it. */
  .outdoor-masthead--water .masthead__media > img { object-position: 50% 30%; }

  /* astronomy: night plate in place of a photo, with a sparse star field
     drawn from tokens so it re-themes with the band colour */
  .outdoor-masthead--astronomy .plate--night {
    --topo-size: 900px;
    background:
      radial-gradient(circle at 18% 22%, var(--color-on-band) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 72% 14%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 86% 38%, var(--color-on-band) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 44% 31%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 62% 56%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 30% 64%, var(--color-on-band) 0 1px, transparent 2px),
      radial-gradient(circle at 91% 72%, var(--color-on-band-muted) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 54% 8%, var(--color-on-band) 0 1px, transparent 2px),
      radial-gradient(circle at 8% 40%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 12% 86%, var(--color-on-band) 0 1px, transparent 2px),
      radial-gradient(circle at 24% 48%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 36% 90%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 48% 74%, var(--color-on-band) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 58% 38%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 66% 88%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 78% 64%, var(--color-on-band) 0 1px, transparent 2px),
      radial-gradient(circle at 82% 92%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 96% 52%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 38% 12%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 6% 10%, var(--color-on-band) 0 1px, transparent 2px),
      radial-gradient(circle at 96% 10%, var(--color-on-band-muted) 0 1px, transparent 2px),
      radial-gradient(circle at 70% 30%, var(--color-on-band-muted) 0 1px, transparent 2px),
      var(--color-band);
    padding: var(--space-6);
  }
  /* a token-drawn chart of 北斗七星 (the Plough) with the pointer guide to
     Polaris: decorative, aria-hidden, re-themes with the band colours */
  .outdoor-masthead--astronomy .plate__sky {
    position: absolute;
    z-index: 0;
    top: var(--space-6);
    right: var(--space-5);
    width: min(72%, 34rem);
    height: auto;
    color: var(--color-on-band);
    pointer-events: none;
  }
  .outdoor-masthead--astronomy .plate__sky polyline {
    fill: none;
    stroke: var(--color-on-band-muted);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
  }
  .outdoor-masthead--astronomy .plate__sky-guide { stroke-dasharray: 3 5; opacity: .7; }
  .outdoor-masthead--astronomy .plate__sky-stars { fill: currentColor; }
  .outdoor-masthead--astronomy .plate__num,
  .outdoor-masthead--astronomy .plate__label { position: relative; z-index: 1; }
  @media (min-width: 64em) {
    .outdoor-masthead--astronomy .plate--night { padding: var(--space-7); }
    .outdoor-masthead--astronomy .plate__sky { top: var(--space-8); right: var(--space-7); }
  }

  /* ---------- checkpoint crops ---------- */
  .checkpoint__media--photo img { object-position: 70% 50%; }   /* banner-bg: orienteering flag */
  .checkpoint__media--center img { object-position: 50% 50%; }  /* telescope, astronaut */

  /* canoe: the masthead takes 獨木舟.png as a landscape (hills, sea, fleet);
     this frame zooms 2.2x into the mid-water group on the right (red
     buoyancy aids, green and white hulls), leaving out the hills and the
     front paddler, so the two read as different pictures. The window covers
     roughly x 52-97% / y 34-68% of the source, well clear of the
     bottom-right AI badge. transform-origin = o where
     window centre c = o(1 - 1/s) + 50/s (box coordinates). */
  .checkpoint__media--canoe img {
    object-position: 50% 50%;
    transform: scale(2.2);
    transform-origin: 94% 52%;
  }

}