/* ---------------------------------------------------------------------------
   Illustration: Guam in 1984 (chapter I, The Observer; designed for data-theme="paper").
   A drawn map of the island with the places and club rides named in the Pacific Daily
   News of 18 April 1984, plus three clipping prints that settle in beside it.
   Color = meaning: brass = the club rides (done, ridden); violet = where he won (the point).
   Everything else is neutral sand / sea and theme tokens.
   Motion: one-shot when site.js adds .is-in to the figure. The static drawing is the default
   (no JS, reduced motion). Timeline (all done by 2.5s): coast .1-1.2s, pins .45-1.4s,
   rides .95-2.3s, wins 1.5-2.45s, prints .3-1.75s.
   --------------------------------------------------------------------------- */
.illus--guam { margin: clamp(3rem, 7vw, 5.5rem) 0 0; display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); }
@media (min-width: 900px) {
  .illus--guam { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .illus--guam .il-guam-cap { grid-column: 1 / -1; }
}
.il-guam-map { min-width: 0; }
.il-guam-svg { display: block; width: 100%; height: auto; }

/* Sea and island */
.il-guam-sea { fill: url(#il-guam-sea); }
.il-guam-shadow { fill: rgba(60, 40, 20, .2); }
.il-guam-surf { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 12; stroke-linejoin: round; }
.il-guam-land { fill: url(#il-guam-sand); }
.il-guam-hills { fill: url(#il-guam-hillshade); }
.il-guam-coast { fill: none; stroke: #8a7656; stroke-width: 1.8; stroke-linejoin: round; }

/* Labels (sizes come from .lf-label 17px / .lf-small 14px in story.css) */
.illus--guam .lf-label, .illus--guam .lf-small { paint-order: stroke; stroke: rgba(244, 241, 234, .7); stroke-width: 3px; stroke-linejoin: round; }
.il-guam-title { font-family: var(--sans); font-size: 26px; font-weight: 600; fill: var(--fg); }
.il-guam-brasstext { fill: #6b5638; }
.il-guam-accentsub { fill: var(--accent); }

/* Pins, rings, rides */
.il-guam-dot { fill: #fffdf7; stroke: var(--fg); stroke-width: 2.4; }
.il-guam-dot--win { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.il-guam-ring { fill: none; stroke: var(--accent); stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(91, 63, 140, .35)); }
.il-guam-route-case { fill: none; stroke: rgba(255, 252, 244, .9); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.il-guam-route { fill: none; stroke: url(#il-guam-brass); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.il-guam-route--key { stroke: #8f7a55; }
.il-guam-needle { fill: url(#il-guam-brass); }
.il-guam-scalebar { fill: url(#il-guam-brass); }

/* Clipping prints */
.il-guam-prints { display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); justify-items: start; min-width: 0; }
.il-guam-print { width: 92%; margin: 0; transform: rotate(var(--tilt, 0deg)); }
.il-guam-print img { display: block; width: 100%; height: auto; background: #fff; padding: 8px; box-shadow: 0 18px 40px rgba(60, 40, 20, .16), 0 2px 6px rgba(60, 40, 20, .12); filter: sepia(.08) contrast(1.02); }
.il-guam-print--wide { width: 100%; justify-self: end; }
.il-guam-print--strip { width: 82%; justify-self: center; }
.il-guam-print__cap { margin: .75rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--muted); max-width: 30rem; }

/* Caption */
.il-guam-cap { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muted); max-width: 46rem; }
.il-guam-cap__lead { display: block; margin-bottom: .5rem; font-size: 1.05rem; line-height: 1.6; color: var(--fg); }
.il-guam-cap a { color: inherit; }
.il-guam-sub--phone { display: none; }

/* Phones: the map scales to about half size, so labels are set larger to stay >= 12px on screen,
   and the long secondary lines (which the caption and prints repeat) step aside.
   The map bleeds to the screen edges (cancelling the .wrap gutter) so that at 360px the
   viewBox renders at 0.5x and 25px labels land at 12.5px. */
@media (max-width: 600px) {
  .il-guam-map { margin-inline: calc(-1 * var(--gutter, 16px)); }
  .il-guam-sea { rx: 0; }
  .illus--guam .lf-label { font-size: 25px; }
  .illus--guam .lf-small { font-size: 25px; }
  .il-guam-title { font-size: 32px; }
  .il-guam-sub--wide { display: none; }
  .il-guam-sub--phone { display: inline; }
  .il-guam-lift { transform: translate(-6px, -12px); }
  .il-guam-nas { transform: translate(-6px, -4px); }
  .il-guam-subtitle { transform: translateY(8px); }
  .il-guam-print, .il-guam-print--strip { width: 100%; }
  .il-guam-print--wide { width: 96%; }
}

/* ---- One-shot motion (only when allowed, only with JS). ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .illus--guam .il-guam-coast { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1200ms cubic-bezier(.45, 0, .2, 1) 100ms; }
  .js .illus--guam .il-guam-land, .js .illus--guam .il-guam-hills, .js .illus--guam .il-guam-surf, .js .illus--guam .il-guam-shadow { opacity: 0; transition: opacity 900ms ease 500ms; }
  .js .illus--guam .il-guam-place, .js .illus--guam .il-guam-routelabel { opacity: 0; transform: translateY(6px); transition: opacity 450ms ease, transform 600ms var(--ease-out); transition-delay: calc(450ms + var(--d, 0) * 100ms); }
  .js .illus--guam .il-guam-route, .js .illus--guam .il-guam-route-case[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .illus--guam .il-guam-route--hilly { transition: stroke-dashoffset 850ms cubic-bezier(.45, 0, .2, 1) 950ms; }
  .js .illus--guam .il-guam-route--fiesta { transition: stroke-dashoffset 1300ms cubic-bezier(.45, 0, .2, 1) 1000ms; }
  .js .illus--guam .il-guam-route--key { stroke-dasharray: none; }
  .js .illus--guam .il-guam-win { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity 450ms ease, transform 700ms var(--ease-out); transition-delay: calc(1500ms + var(--d, 0) * 200ms); }
  .js .illus--guam .il-guam-win .il-guam-ring { transform-box: fill-box; transform-origin: center; transform: scale(2.4); transition: transform 750ms var(--ease-out); transition-delay: calc(1550ms + var(--d, 0) * 200ms); }
  .js .illus--guam .il-guam-print { opacity: 0; transform: translateY(36px) rotate(calc(var(--tilt, 0deg) * -3)); transition: opacity 600ms ease, transform 900ms var(--ease-out); transition-delay: calc(300ms + var(--i, 0) * 280ms); }

  .js .illus--guam.is-in .il-guam-coast, .js .illus--guam.is-in .il-guam-route, .js .illus--guam.is-in .il-guam-route-case { stroke-dashoffset: 0; }
  .js .illus--guam.is-in .il-guam-land, .js .illus--guam.is-in .il-guam-hills, .js .illus--guam.is-in .il-guam-surf, .js .illus--guam.is-in .il-guam-shadow,
  .js .illus--guam.is-in .il-guam-place, .js .illus--guam.is-in .il-guam-routelabel, .js .illus--guam.is-in .il-guam-win { opacity: 1; transform: none; }
  .js .illus--guam.is-in .il-guam-win .il-guam-ring { transform: none; }
  .js .illus--guam.is-in .il-guam-print { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
  /* The figure itself fades in via .reveal; keep it from also sliding so the map holds still */
  .js .illus--guam.reveal { transform: none; }
}