/* ============================================================================
   ADVISOR front page: the field map.

   The world: a printed orienteering sheet on cream paper. Contour lines in
   green ink, routes and controls overprinted in the board's maroon (the colour
   real orienteering maps use for the course), gold for the "you are here" dot
   and lit waypoints. Green #0C5449 and gold #FFCC33 stay as the family tie.

   Built on WayneUI 2.0.8 (assets/wayne-ui/, copied from its static path): the
   tokens, Lato, container, buttons, skip link and sr-only come from there. All
   of WayneUI sits inside @layer, so these unlayered rules win without
   !important.

   Type: Fraunces (display, SIL OFL, assets/fonts/) for titles and map
   lettering; Lato (WayneUI) for body; WayneUI's mono stack for code.

   File map:
     1. fonts, tokens, paper       6. directions
     2. sheet header, footer        7. out of bounds, neighbours, uncharted
     3. hero and compass rose       8. responsive
     4. ask form and the map        9. motion (only under html.motion)
     5. legend
   ========================================================================== */

/* ------------------------------------------------------ 1. fonts, tokens */

@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/fraunces-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fraunces-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: Fraunces;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-latin-600-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --adv-green: #0c5449;
  --adv-green-deep: #073a32;
  --adv-gold: #ffcc33;
  --adv-gold-soft: #ffe28a;
  --adv-maroon: #8b2145;       /* course overprint: routes, controls */
  --adv-maroon-soft: #f3dbe3;
  --adv-paper: #f4f1ea;        /* the board's cream */
  --adv-paper-deep: #ebe5d8;
  --adv-paper-hi: #fbf9f4;
  --adv-ink: #1c2725;          /* body text: 14.6:1 on paper */
  --adv-ink-muted: #4a5552;    /* 7.2:1 on paper */
  --adv-line: rgba(12, 84, 73, 0.22);
  --adv-code-bg: #10201d;
  --adv-code-text: #e3ece8;
  --adv-code-dim: #9db3ac;
  --adv-display: Fraunces, "Iowan Old Style", Georgia, serif;
  --adv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --adv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --adv-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 14px 34px -20px rgba(7, 58, 50, 0.45);
}

html { overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--adv-paper);
  /* A faint paper grain: two crossing hairline grids, nothing that moves. */
  background-image:
    radial-gradient(rgba(12, 84, 73, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(139, 33, 69, 0.035) 1px, transparent 1px);
  background-size: 22px 22px, 31px 31px;
  background-position: 0 0, 11px 7px;
  color: var(--adv-ink);
  overflow-x: clip;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--adv-maroon);
  outline-offset: 3px;
}

code, pre { font-family: var(--wsu-font-family-mono); }

:not(pre) > code {
  font-size: 0.9em;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  background: rgba(12, 84, 73, 0.09);
  color: var(--adv-green-deep);
  overflow-wrap: anywhere;
}

.eyebrow {
  margin: 0 0 var(--wsu-space-2);
  font-family: var(--adv-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--adv-maroon);
}

.section { padding-block: clamp(3rem, 5.5vw, 5rem); position: relative; }

.section__head { max-width: 46rem; margin: 0 auto var(--wsu-space-8); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__head h2 {
  margin: 0 0 var(--wsu-space-3);
  font-family: var(--adv-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--adv-green-deep);
}
.section__head p:last-child { margin: 0; color: var(--adv-ink-muted); font-size: 1.0625rem; line-height: 1.6; }

.t-dim { color: var(--adv-code-dim); }

/* ------------------------------------------------- 2. sheet header, footer */

.sheet-head {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--adv-line);
  background: rgba(244, 241, 234, 0.92);
}
.sheet-head__row {
  display: flex;
  align-items: center;
  gap: var(--wsu-space-6);
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--adv-green-deep);
  text-decoration: none;
}
.brand img { border-radius: 8px; transition: rotate 0.5s var(--adv-ease-spring); }
.brand:hover img { rotate: -12deg; }
.brand__name { font-family: var(--adv-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; }
.sheet-nav { display: flex; gap: var(--wsu-space-5); margin-left: auto; }
.sheet-nav a {
  color: var(--adv-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9375rem;
  background: linear-gradient(var(--adv-maroon), var(--adv-maroon)) left bottom / 0 2px no-repeat;
  transition: background-size 0.3s var(--adv-ease-out);
}
.sheet-nav a:hover { background-size: 100% 2px; }
.sheet-head__meta {
  margin: 0;
  padding: 0.15rem 0.6rem;
  border: 1.5px solid var(--adv-green);
  border-radius: 999px;
  font-family: var(--wsu-font-family-mono);
  font-size: 0.8125rem;
  color: var(--adv-green-deep);
}
.sheet-head__label { font-family: var(--adv-display); font-style: italic; }

.sheet-foot {
  border-top: 1px solid var(--adv-line);
  background: var(--adv-green-deep);
  color: #f4f1ea;
  padding-block: var(--wsu-space-8);
}
.sheet-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wsu-space-4); }
.sheet-foot p { margin: 0; }
.sheet-foot__joke { font-family: var(--adv-display); font-style: italic; font-size: 1.125rem; color: var(--adv-gold); }
.sheet-foot__scale { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--wsu-font-family-mono); font-size: 0.8125rem; }
.sheet-foot__bar {
  display: inline-block; width: 96px; height: 8px;
  border: 1.5px solid #f4f1ea;
  background: linear-gradient(90deg, #f4f1ea 0 25%, transparent 25% 50%, #f4f1ea 50% 75%, transparent 75%);
}
.sheet-foot__org { font-size: 0.875rem; color: rgba(244, 241, 234, 0.85); }

/* --------------------------------------------------- 3. hero, compass rose */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
  background: url("terrain-hero.svg") center / cover no-repeat;
  border-bottom: 1px solid var(--adv-line);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.grid-ref {
  position: absolute;
  display: flex;
  justify-content: space-around;
  font-family: var(--adv-display);
  font-style: italic;
  font-size: 0.8125rem;
  color: rgba(12, 84, 73, 0.55);
  pointer-events: none;
}
.grid-ref--top { top: 0.5rem; left: 2rem; right: 2rem; }
.grid-ref--side { top: 3rem; bottom: 2rem; left: 0.6rem; flex-direction: column; }

.hero__title {
  margin: 0;
  font-family: var(--adv-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 7.25rem);
  line-height: 0.92;
  white-space: nowrap;
  letter-spacing: -0.035em;
  color: var(--adv-green-deep);
}

.acro { margin: var(--wsu-space-4) 0 0; }
.acro__line {
  font-family: var(--adv-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 2vw, 1.4rem);
  line-height: 1.45;
  color: var(--adv-green);
}
.acro__word { display: inline-block; }

.hero__tagline {
  margin: var(--wsu-space-5) 0 0;
  font-family: var(--adv-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--adv-maroon);
}
.hero__blurb { max-width: 36rem; margin: var(--wsu-space-4) 0 0; font-size: 1.0625rem; line-height: 1.65; }

.quickstart {
  display: flex;
  align-items: stretch;
  max-width: 34rem;
  margin-top: var(--wsu-space-6);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--adv-shadow);
}
.quickstart__code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9rem 1rem;
  background: var(--adv-code-bg);
  color: var(--adv-code-text);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}
.copy-btn {
  flex: 0 0 auto;
  padding: 0 1.1rem;
  border: 0;
  background: var(--adv-gold);
  color: var(--adv-green-deep);
  font: 700 0.9375rem var(--wsu-font-family-body);
  cursor: pointer;
  transition: background-color 0.2s;
}
.copy-btn:hover { background: var(--adv-gold-soft); }
.copy-btn.is-copied .copy-btn__label { animation: none; }
.hero__note { max-width: 34rem; margin: var(--wsu-space-3) 0 0; font-size: 0.9375rem; color: var(--adv-ink-muted); }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wsu-space-5); margin: var(--wsu-space-6) 0 0; }
.hero__cta .wsu-btn--primary { background: var(--adv-green); color: #fff; border-color: var(--adv-green); }
.hero__cta .wsu-btn--primary:hover { background: var(--adv-green-deep); }
.hero__link {
  color: var(--adv-maroon);
  font-weight: 700;
  text-decoration: underline dotted 2px;
  text-underline-offset: 5px;
}
.hero__link:hover { text-decoration-style: solid; }

.hero__art {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 440px;
  justify-self: center;
}
.rose { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rose__ripples circle { fill: none; stroke: var(--adv-green); stroke-opacity: 0.18; stroke-width: 1.2; }
.rose__ring { fill: rgba(251, 249, 244, 0.75); stroke: var(--adv-green-deep); stroke-width: 2; }
.rose__ring--inner { fill: none; stroke-width: 1; stroke-dasharray: 2 4; }
.rose__ticks line { stroke: var(--adv-green-deep); stroke-width: 1.2; }
.rose__ticks line.major { stroke-width: 2.4; }
.rose__n, .rose__l { font-family: var(--adv-display); text-anchor: middle; fill: var(--adv-green-deep); }
.rose__n { font-weight: 800; font-size: 26px; fill: var(--adv-maroon); }
.rose__l { font-style: italic; font-size: 18px; }
.rose__star { fill: rgba(12, 84, 73, 0.12); stroke: rgba(12, 84, 73, 0.4); stroke-width: 1; }
.rose__star--minor { fill: rgba(139, 33, 69, 0.08); stroke: rgba(139, 33, 69, 0.3); }
.rose__bezel { transform-origin: 0 0; transform-box: view-box; }

.hero__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 41%;
  translate: -50% -50%;
}
.hero__mark {
  display: block;
  width: 100%; height: auto;
  border-radius: 22%;
  box-shadow: 0 22px 40px -18px rgba(7, 58, 50, 0.6);
  cursor: pointer;
}
.hero__shadow {
  position: absolute; left: 15%; right: 15%; bottom: -10%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(rgba(7, 58, 50, 0.28), transparent 70%);
}
.you-are-here {
  position: absolute;
  right: -2%; bottom: 6%;
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0;
  padding: 0.35rem 0.8rem 0.35rem 0.5rem;
  border-radius: 999px;
  background: var(--adv-paper-hi);
  border: 1.5px solid var(--adv-green-deep);
  font-family: var(--adv-display);
  font-style: italic;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--adv-green-deep);
  box-shadow: var(--adv-shadow);
}
.you-are-here__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--adv-gold);
  border: 2px solid var(--adv-green-deep);
}

/* ----------------------------------------------------- 4. ask and the map */

.ask {
  max-width: 52rem;
  margin: 0 auto var(--wsu-space-6);
}
.ask__label {
  display: block;
  margin-bottom: var(--wsu-space-2);
  font-family: var(--adv-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--adv-green-deep);
}
.ask__row {
  display: flex;
  gap: var(--wsu-space-3);
}
.ask__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 0 1rem;
  border: 2px solid var(--adv-green-deep);
  border-radius: 12px;
  background: var(--adv-paper-hi);
  color: var(--adv-ink);
  font: 400 1.0625rem var(--wsu-font-family-body);
  box-shadow: 4px 4px 0 rgba(12, 84, 73, 0.18);
}
.ask__input:focus-visible { outline-offset: 2px; }
.ask__go { min-height: 52px; border-radius: 12px; white-space: nowrap; color: var(--adv-green-deep); }
.ask__try { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wsu-space-2) var(--wsu-space-3); margin-top: var(--wsu-space-3); }
.ask__try-label { font-size: 0.9375rem; color: var(--adv-ink-muted); }
.ask__chips { display: flex; flex-wrap: wrap; gap: var(--wsu-space-2); margin: 0; padding: 0; list-style: none; }
.chip-q {
  min-height: 36px;
  padding: 0.3rem 0.8rem;
  border: 1.5px dashed var(--adv-maroon);
  border-radius: 999px;
  background: transparent;
  color: var(--adv-maroon);
  font: 700 0.875rem var(--wsu-font-family-body);
  cursor: pointer;
  transition: background-color 0.2s, border-style 0.2s, translate 0.25s var(--adv-ease-spring);
}
.chip-q:hover { background: var(--adv-maroon-soft); border-style: solid; translate: 0 -2px; }
.chip-q[aria-pressed="true"] { background: var(--adv-maroon); color: #fff; border-style: solid; }

.atlas {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
  gap: var(--wsu-space-6);
  align-items: start;
}
.section--ask .wsu-container { max-width: 1400px; }
.map-frame { margin: 0; min-width: 0; }
.map {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--adv-green-deep);
  border-radius: 6px;
  background: var(--adv-paper-hi);
  box-shadow: 0 0 0 6px var(--adv-paper), 0 0 0 7px var(--adv-line), var(--adv-shadow);
}
.map-frame__cap { margin-top: var(--wsu-space-4); font-size: 0.875rem; color: var(--adv-ink-muted); line-height: 1.5; }

/* Map lettering */
.map text { font-family: var(--wsu-font-family-body); }
.map__water { font-family: var(--adv-display) !important; font-style: italic; font-size: 17px; fill: #2e6b62; }
.map__hill { font-family: var(--adv-display) !important; font-style: italic; font-size: 18px; fill: rgba(7, 58, 50, 0.62); letter-spacing: 0.12em; }
.map__north circle { fill: var(--adv-paper-hi); stroke: var(--adv-green-deep); stroke-width: 1.5; }
.map__north path { fill: var(--adv-maroon); }
.map__north text { font-family: var(--adv-display) !important; font-weight: 800; font-size: 16px; fill: var(--adv-green-deep); }
.map__scale path { stroke: var(--adv-green-deep); stroke-width: 2; fill: none; }
.map__scale text { font-size: 13px; fill: var(--adv-green-deep); }

.place__ring { fill: var(--adv-paper-hi); stroke: var(--adv-green-deep); stroke-width: 2; }
.place--planned .place__ring { stroke-dasharray: 5 4; fill: rgba(251, 249, 244, 0.8); }
.place--planned image { opacity: 0.55; }
.place__name { font-weight: 900; font-size: 16px; fill: var(--adv-green-deep); letter-spacing: 0.04em; }
.place__alias { font-family: var(--adv-display) !important; font-style: italic; font-size: 15px; fill: var(--adv-ink-muted); }
.place__plate { fill: rgba(251, 249, 244, 0.86); }
.place__bob { transition: transform 0.35s var(--adv-ease-spring); transform-box: fill-box; transform-origin: center; }
.place:hover .place__bob { transform: translateY(-4px); }
.place--dest .place__ring { stroke: var(--adv-maroon); stroke-width: 3; }
.place__finish { fill: none; stroke: var(--adv-maroon); stroke-width: 3; opacity: 0; }
.place--dest .place__finish { opacity: 1; }

.hub__ring { fill: var(--adv-paper-hi); stroke: var(--adv-maroon); stroke-width: 3; }
.hub__halo { fill: none; stroke: var(--adv-gold); stroke-width: 8; opacity: 0; }
.hub.is-lit .hub__halo { opacity: 0.9; }
.hub__name { font-family: var(--adv-display) !important; font-weight: 800; font-size: 20px; fill: var(--adv-maroon); }

.start__tri { fill: none; stroke: var(--adv-maroon); stroke-width: 3.5; stroke-linejoin: round; }
.start__dot { fill: var(--adv-gold); stroke: var(--adv-green-deep); stroke-width: 2.5; }
.start__label { font-family: var(--adv-display) !important; font-style: italic; font-weight: 600; font-size: 18px; fill: var(--adv-green-deep); }
.start__pulse { fill: none; stroke: var(--adv-gold); stroke-width: 3; opacity: 0; }

.route { fill: none; stroke: var(--adv-maroon); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 0.1 11; }
.route-mask { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; }

.ctrl__ring { fill: var(--adv-paper-hi); stroke: var(--adv-maroon); stroke-width: 3; transition: fill 0.35s; }
.ctrl__num { font-weight: 900; font-size: 15px; fill: var(--adv-maroon); text-anchor: middle; dominant-baseline: central; }
.ctrl.is-lit .ctrl__ring { fill: var(--adv-gold); }
.ctrl.is-lit .ctrl__num { fill: var(--adv-green-deep); }
.ctrl__flare { fill: none; stroke: var(--adv-gold); stroke-width: 4; opacity: 0; }
.ctrl__tag rect { fill: var(--adv-maroon); }
.ctrl__tag text { font-family: var(--wsu-font-family-mono) !important; font-size: 14px; fill: #fff; dominant-baseline: central; }

/* Route card: an orienteering control description sheet */
.card {
  position: relative;
  min-width: 0;
  padding: var(--wsu-space-6);
  border: 2px solid var(--adv-green-deep);
  border-radius: 6px;
  background: var(--adv-paper-hi);
  box-shadow: 8px 8px 0 rgba(139, 33, 69, 0.14);
}
.card__eyebrow { margin: 0; font-family: var(--wsu-font-family-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--adv-maroon); }
.card__title { margin: 0.2rem 0 var(--wsu-space-3); font-family: var(--adv-display); font-weight: 800; font-size: 1.75rem; color: var(--adv-green-deep); }
.card__q { margin: 0 0 var(--wsu-space-4); font-family: var(--adv-display); font-style: italic; font-size: 1.125rem; color: var(--adv-ink); overflow-wrap: anywhere; }
.legs { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--adv-green-deep); }
.leg {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: var(--wsu-space-3);
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--adv-line);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.leg__text { min-width: 0; overflow-wrap: anywhere; }
.leg__sym {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 2.5px solid var(--adv-maroon);
  border-radius: 50%;
  font-weight: 900; font-size: 0.875rem; color: var(--adv-maroon);
}
.leg__sym--start { border: 0; border-radius: 0; width: 0; height: 0; margin-left: 0.15rem;
  border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1.7rem solid var(--adv-maroon); position: relative; }
.leg__sym--start::after { content: ""; position: absolute; left: -0.6rem; top: 0.45rem;
  border-left: 0.6rem solid transparent; border-right: 0.6rem solid transparent; border-bottom: 1.02rem solid var(--adv-paper-hi); }
.leg__sym--finish { box-shadow: 0 0 0 3px var(--adv-paper-hi), 0 0 0 5.5px var(--adv-maroon); width: 1.6rem; height: 1.6rem; margin-left: 0.2rem; }
.answer { margin-top: var(--wsu-space-4); padding: var(--wsu-space-4); border-radius: 6px; background: rgba(12, 84, 73, 0.07); border-left: 4px solid var(--adv-green); }
.answer p { margin: 0; }
.answer__label { font-family: var(--wsu-font-family-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--adv-green); }
.answer__text { margin-top: 0.35rem !important; line-height: 1.55; overflow-wrap: anywhere; }
.answer__src { margin-top: 0.5rem !important; font-size: 0.875rem; color: var(--adv-ink-muted); }
.answer__versions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.answer__versions li { padding: 0.1rem 0.5rem; border-radius: 999px; font: 700 0.8125rem var(--wsu-font-family-mono); border: 1.5px solid currentColor; }
.v--active { color: var(--adv-green); background: rgba(12, 84, 73, 0.08); }
.v--security { color: #6b4a00; background: rgba(255, 204, 51, 0.3); }
.v--eol, .v--eol_grace_expired { color: var(--adv-maroon); text-decoration: line-through; }
.card__foot { margin: var(--wsu-space-4) 0 0; font-family: var(--adv-display); font-style: italic; font-size: 0.9375rem; color: var(--adv-ink-muted); }

/* -------------------------------------------------------------- 5. legend */

.section--legend { padding-top: 0; }
.legend-sheet {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 2px solid var(--adv-green-deep);
  background:
    linear-gradient(var(--adv-paper-hi), var(--adv-paper-hi)) padding-box;
  box-shadow: inset 0 0 0 6px var(--adv-paper-hi), inset 0 0 0 7px var(--adv-line);
}
.legend__group {
  margin: var(--wsu-space-6) 0 var(--wsu-space-3);
  font-family: var(--wsu-font-family-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--adv-maroon);
}
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--wsu-space-8); margin: 0; }
.legend__item { padding: var(--wsu-space-4) 0; border-top: 1px solid var(--adv-line); }
.legend__item dt { display: flex; align-items: center; gap: var(--wsu-space-3); font-weight: 700; }
.legend__item dt code { font-size: 1rem; background: none; padding: 0; color: var(--adv-green-deep); }
.legend__item dd { margin: 0.35rem 0 0 calc(34px + var(--wsu-space-3)); color: var(--adv-ink-muted); line-height: 1.55; }

/* Little map symbols, drawn in CSS so they can wobble on hover. */
.sym {
  flex: 0 0 auto;
  position: relative;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--adv-green);
  transition: rotate 0.4s var(--adv-ease-spring), scale 0.4s var(--adv-ease-spring);
}
.legend__item:hover .sym { rotate: -10deg; scale: 1.08; }
.sym::before, .sym::after { content: ""; position: absolute; }
.sym--list::before { inset: 9px 8px; background: repeating-linear-gradient(var(--adv-paper) 0 2.5px, transparent 2.5px 6px); }
.sym--flag::before { left: 10px; top: 7px; width: 2.5px; height: 20px; background: var(--adv-paper); }
.sym--flag::after { left: 12.5px; top: 7px; border-left: 12px solid var(--adv-gold); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.sym--book::before { left: 7px; right: 7px; top: 9px; bottom: 9px; border: 2.5px solid var(--adv-paper); border-radius: 2px; }
.sym--book::after { left: 15.75px; top: 9px; bottom: 9px; width: 2.5px; background: var(--adv-gold); }
.sym--clock::before { inset: 7px; border: 2.5px solid var(--adv-paper); border-radius: 50%; }
.sym--clock::after { left: 16px; top: 11px; width: 2.5px; height: 7px; background: var(--adv-gold); box-shadow: 3px 5px 0 -0.5px var(--adv-gold); }
.sym--rule::before { left: 7px; right: 7px; top: 14px; height: 6px; background: repeating-linear-gradient(90deg, var(--adv-paper) 0 2px, transparent 2px 5px); border: 2px solid var(--adv-paper); }
.sym--check::before { left: 10px; top: 9px; width: 8px; height: 14px; border: solid var(--adv-gold); border-width: 0 3.5px 3.5px 0; rotate: 45deg; }

.legend__extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wsu-space-6); }
.legend__plain, .legend__symbols { margin: 0; padding: 0; list-style: none; }
.legend__plain li { padding: 0.45rem 0; border-top: 1px solid var(--adv-line); line-height: 1.5; }
.legend__plain li span { display: block; color: var(--adv-ink-muted); font-size: 0.9375rem; }
.legend__symbols li { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; border-top: 1px solid var(--adv-line); }
.msym { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; position: relative; font-weight: 900; font-size: 0.8rem; color: var(--adv-maroon); }
.msym--start::before { content: ""; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 21px solid var(--adv-maroon); }
.msym--start::after { content: ""; position: absolute; top: 9px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--adv-paper-hi); }
.msym--control { border: 2.5px solid var(--adv-maroon); border-radius: 50%; }
.msym--finish { border: 2.5px solid var(--adv-maroon); border-radius: 50%; box-shadow: inset 0 0 0 3px var(--adv-paper-hi), inset 0 0 0 5.5px var(--adv-maroon); }
.msym--planned { border: 2px dashed var(--adv-green-deep); border-radius: 50%; }
.legend__boost { margin: var(--wsu-space-8) 0 0; padding-top: var(--wsu-space-5); border-top: 1.5px solid var(--adv-green-deep); line-height: 1.6; }

/* ---------------------------------------------------------- 6. directions */

.section--directions {
  background: var(--adv-green-deep);
  color: #f4f1ea;
  background-image: url("terrain-hero.svg");
  background-size: cover;
  background-blend-mode: soft-light;
}
.section--directions .section__head h2 { color: #fbf9f4; }
.section--directions .section__head p:last-child { color: rgba(244, 241, 234, 0.88); }
.section--directions .eyebrow { color: var(--adv-gold); }
.section--directions :not(pre) > code { background: rgba(255, 255, 255, 0.12); color: #fff4cc; }
.section--directions :where(a, button):focus-visible { outline-color: var(--adv-gold); }

.turns { position: relative; margin: 0; padding: 0; list-style: none; max-width: 52rem; }
.turn {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--wsu-space-5);
  padding-bottom: var(--wsu-space-8);
}
/* The dotted route between two turn numbers runs only in the gap below each
   number, never behind it. */
.turn:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px; top: 64px; bottom: 8px;
  width: 0;
  border-left: 4px dotted var(--adv-gold);
}
.turn__num {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid var(--adv-gold);
  background: var(--adv-green-deep);
  font-family: var(--adv-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--adv-gold);
  transition: background-color 0.3s, color 0.3s, scale 0.4s var(--adv-ease-spring);
}
.turn:hover .turn__num { background: var(--adv-gold); color: var(--adv-green-deep); scale: 1.06; }
.turn__body { min-width: 0; }
.turn__body h3 { margin: 0.6rem 0 0.4rem; font-family: var(--adv-display); font-weight: 600; font-size: 1.5rem; color: #fbf9f4; }
.turn__body p { margin: 0 0 var(--wsu-space-3); line-height: 1.6; color: rgba(244, 241, 234, 0.9); }

.cmd {
  margin: 0 0 var(--wsu-space-2);
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--adv-code-bg);
  color: var(--adv-code-text);
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.cmd--out { background: rgba(16, 32, 29, 0.55); color: var(--adv-code-dim); font-size: 0.8125rem; }
.cmd--multi { white-space: pre-wrap; }
.dir-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.signpost { position: relative; margin: 0; padding-top: var(--wsu-space-2); }
.signpost__cap { margin-bottom: var(--wsu-space-4); font-family: var(--adv-display); font-style: italic; font-size: 1.125rem; color: var(--adv-gold); }
.signpost__arms { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.signpost__pole { position: absolute; left: calc(50% - 7px); top: 3.2rem; bottom: 7.5rem; width: 14px; border-radius: 4px; background: linear-gradient(90deg, #c9a86a, #a8844a); }
.arm {
  position: relative;
  display: flex; flex-direction: column;
  width: 84%;
  padding: 0.55rem 1.4rem 0.6rem;
  background: var(--adv-paper);
  color: var(--adv-green-deep);
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.6);
  transition: translate 0.35s var(--adv-ease-spring), rotate 0.35s var(--adv-ease-spring);
}
.arm--r { margin-left: 8%; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); rotate: -1.5deg; }
.arm--l { margin-left: 8%; padding-left: 2rem; clip-path: polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); rotate: 1.5deg; }
.arm--r:hover { translate: 6px 0; rotate: -3deg; }
.arm--l:hover { translate: -6px 0; rotate: 3deg; }
.arm__name { font-family: var(--adv-display); font-weight: 800; font-size: 1.2rem; }
.arm code { background: none !important; padding: 0 !important; color: var(--adv-maroon) !important; font-size: 0.875rem; }
.signpost__note { position: relative; z-index: 1; margin: var(--wsu-space-6) 0 0; padding: var(--wsu-space-4); border-radius: 10px; background: rgba(16, 32, 29, 0.6); color: rgba(244, 241, 234, 0.92); line-height: 1.55; font-size: 0.9375rem; }
.dir-extras { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--wsu-space-6); margin-top: var(--wsu-space-4); }
.dir-box { min-width: 0; padding: var(--wsu-space-5); border: 1.5px dashed rgba(255, 204, 51, 0.55); border-radius: 10px; }
.dir-box h3 { margin: 0 0 var(--wsu-space-3); font-family: var(--adv-display); font-weight: 600; font-size: 1.25rem; color: #fbf9f4; }
.dir-box p { margin: 0 0 var(--wsu-space-3); color: rgba(244, 241, 234, 0.9); line-height: 1.55; }

/* ----------------------------------------- 7. bounds, neighbours, uncharted */

.bounds {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 2px solid var(--adv-maroon);
  border-radius: 6px;
  /* Out-of-bounds hatching, the way the map marks ground you may not cross. */
  background:
    repeating-linear-gradient(-45deg, rgba(139, 33, 69, 0.09) 0 2px, transparent 2px 12px),
    var(--adv-paper-hi);
}
.bounds__head h2 { margin: 0 0 var(--wsu-space-3); font-family: var(--adv-display); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; color: var(--adv-maroon); }
.bounds__head p:last-child { margin: 0; line-height: 1.6; }
.bounds__list { margin: 0; padding: 0; list-style: none; }
.bounds__list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2rem;
  border-bottom: 1px solid rgba(139, 33, 69, 0.2);
  background: var(--adv-paper-hi);
  line-height: 1.55;
}
.bounds__list li::before {
  content: ""; position: absolute; left: 0.2rem; top: 1rem;
  width: 14px; height: 14px; border: 2.5px solid var(--adv-maroon); border-radius: 50%;
  background: linear-gradient(-45deg, transparent 45%, var(--adv-maroon) 45% 58%, transparent 58%);
}

.hood {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--wsu-space-4);
  margin: 0; padding: 0; list-style: none;
}
.hood__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.35rem;
  padding: var(--wsu-space-4) var(--wsu-space-3);
  border-radius: 14px;
  background: var(--adv-paper-hi);
  border: 1.5px solid var(--adv-line);
  transition: translate 0.35s var(--adv-ease-spring), border-color 0.25s, box-shadow 0.25s;
}
.hood__item:hover { translate: 0 -5px; border-color: var(--adv-green); box-shadow: var(--adv-shadow); }
.hood__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; }
.hood__mark img { width: 56px; height: 56px; display: block; }
.hood__mark--tile { background: var(--adv-green); }
.hood__mark--tile img { width: 34px; height: 34px; }
.hood__name { font-weight: 900; color: var(--adv-green-deep); letter-spacing: 0.03em; }
.hood__role { font-family: var(--adv-display); font-style: italic; font-size: 0.9375rem; color: var(--adv-ink-muted); line-height: 1.3; }
.hood__item--here { border: 2.5px solid var(--adv-maroon); background: #fff; }
.hood__item--here .hood__role { color: var(--adv-maroon); font-weight: 600; }
.hood__item--planned { border-style: dashed; background: transparent; }
.hood__item--planned .hood__mark img { opacity: 0.6; }

.uncharted {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 6px;
  border: 2px dashed rgba(12, 84, 73, 0.5);
  background:
    radial-gradient(circle at 85% 20%, rgba(12, 84, 73, 0.07), transparent 40%),
    var(--adv-paper-deep);
}
.unch { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: var(--wsu-space-4); margin: 0; padding: 0; list-style: none; }
.unch li { padding: var(--wsu-space-5); border-radius: 10px; background: rgba(251, 249, 244, 0.9); border: 1px solid var(--adv-line); }
.unch h3 { margin: var(--wsu-space-3) 0 0.35rem; font-family: var(--adv-display); font-weight: 600; font-size: 1.2rem; color: var(--adv-green-deep); }
.unch p { margin: 0; color: var(--adv-ink-muted); line-height: 1.55; font-size: 0.9375rem; }
.chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font: 700 0.75rem var(--wsu-font-family-mono); }
.chip--soon { background: var(--adv-green-deep); color: var(--adv-gold); }

.toast {
  position: fixed; left: 50%; bottom: 1.25rem; z-index: 20;
  max-width: calc(100vw - 2rem);
  translate: -50% 140%;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--adv-green-deep);
  color: #fbf9f4;
  font-family: var(--adv-display);
  font-style: italic;
  box-shadow: var(--adv-shadow);
  opacity: 0;
  transition: translate 0.45s var(--adv-ease-spring), opacity 0.3s;
  pointer-events: none;
}
.toast.is-on { translate: -50% 0; opacity: 1; }

/* ---------------------------------------------------------- 8. responsive */

@media (max-width: 1100px) {
  .atlas { grid-template-columns: minmax(0, 1fr); }
  .card { max-width: 40rem; }
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 340px; order: -1; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  .legend__extras { grid-template-columns: minmax(0, 1fr); }
  .bounds { grid-template-columns: minmax(0, 1fr); }
  .dir-extras, .dir-grid { grid-template-columns: minmax(0, 1fr); }
  .signpost { max-width: 26rem; }
  .sheet-nav { display: none; }
  .sheet-head__meta { margin-left: auto; }
}
@media (max-width: 640px) {
  .grid-ref { display: none; }
  .ask__row { flex-direction: column; }
  .ask__go { width: 100%; }
  .hero__art { max-width: 260px; }
  .you-are-here { right: -4%; font-size: 0.85rem; }
  /* At phone width the map is small, so the lettering steps aside: places keep
     their marks, the plotted route keeps its labels, and the card says the rest. */
  .place__label, .map__hill, .map__scale, .map__water { display: none; }
  .ctrl__tag { display: none; }
  /* Symbols grow so they read at a third of their size. */
  .place__bob { transform: scale(1.55); }
  .place:hover .place__bob { transform: scale(1.55); }
  .place__finish { r: 54px; }
  .hub__in { transform: scale(1.3); }
  .start__in { transform: scale(1.6); }
  .ctrl__in { transform: scale(1.7); }
  .route { stroke-width: 8; stroke-dasharray: 0.1 18; }
  .hub__label { transform: translateY(16px); }
  .hub__name { font-size: 30px; }
  .start__label { font-size: 28px; transform: translate(10px, 14px); }
  .turn { grid-template-columns: 44px minmax(0, 1fr); gap: var(--wsu-space-4); }
  .turn__num { width: 44px; height: 44px; font-size: 1.2rem; }
  .turn:not(:last-child)::before { left: 21px; top: 52px; }
  .hood { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: var(--wsu-space-5); }
}
@media (max-width: 360px) {
  .hero__title { font-size: 3rem; }
  .quickstart { flex-direction: column; }
  .copy-btn { min-height: 44px; }
}

/* -------------------------------------------------------------- 9. motion */
/* Everything below runs only under html.motion (set in <head> when the
   visitor has no reduced-motion preference). Without it the page is the
   finished map, every word present at first paint. */

@keyframes adv-pin-drop {
  0% { translate: -50% -190%; opacity: 0; }
  55% { translate: -50% -46%; opacity: 1; }
  72% { translate: -50% -56%; }
  86% { translate: -50% -49%; }
  100% { translate: -50% -50%; }
}
@keyframes adv-shadow-in { 0% { opacity: 0; scale: 0.3; } 55% { opacity: 1; scale: 1.1; } 100% { opacity: 1; scale: 1; } }
/* A real compass card does not stop dead: it swings past north and settles. */
@keyframes adv-bezel-settle {
  0% { rotate: -140deg; opacity: 0; }
  35% { rotate: 28deg; opacity: 1; }
  55% { rotate: -14deg; }
  72% { rotate: 7deg; }
  86% { rotate: -3deg; }
  100% { rotate: 0deg; }
}
@keyframes adv-ripple { 0% { opacity: 0; scale: 0.7; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.15; } }
@keyframes adv-ink-in { from { opacity: 0; translate: 0 0.35em; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: none; } }
@keyframes adv-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 204, 51, 0.7); } 60% { box-shadow: 0 0 0 9px rgba(255, 204, 51, 0); } }
@keyframes adv-flare { 0% { opacity: 0.95; scale: 1; } 100% { opacity: 0; scale: 2.2; } }
@keyframes adv-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes adv-tag-in { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes adv-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }

.motion .hero__pin { animation: adv-pin-drop 1.1s var(--adv-ease-out) 0.15s both; }
.motion .hero__shadow { animation: adv-shadow-in 1.1s var(--adv-ease-out) 0.15s both; }
.motion .rose__bezel { animation: adv-bezel-settle 2.4s var(--adv-ease-out) 0.3s both; }
.motion .rose__bezel.is-spun { animation: adv-spin 1.2s var(--adv-ease-spring); }
.motion .rose__ripples circle { transform-box: view-box; transform-origin: 0 0; animation: adv-ripple 3.6s ease-out infinite both; }
.motion .rose__ripples circle:nth-child(2) { animation-delay: 1.2s; }
.motion .rose__ripples circle:nth-child(3) { animation-delay: 2.4s; }
.motion .you-are-here { animation: adv-ink-in 0.6s var(--adv-ease-out) 1.4s both; }
.motion .you-are-here__dot { animation: adv-dot-pulse 2.2s ease-out 2s infinite; }
.motion .acro__word { animation: adv-ink-in 0.55s var(--adv-ease-out) both; animation-delay: calc(0.45s + var(--i) * 0.11s); }
.motion .hero__title { animation: adv-ink-in 0.7s var(--adv-ease-out) 0.1s both; }
.motion .hero__tagline { animation: adv-ink-in 0.6s var(--adv-ease-out) 1.25s both; }
.motion .hero__mark:hover { animation: adv-wiggle 0.5s ease-in-out; }

.motion .start__pulse { transform-box: fill-box; transform-origin: center; animation: adv-flare 2.4s ease-out infinite; }
.motion .route-mask { transition: stroke-dashoffset var(--dur, 0.8s) cubic-bezier(0.45, 0, 0.25, 1); }
.motion .ctrl__flare { transform-box: fill-box; transform-origin: center; }
.motion .ctrl.is-lit .ctrl__flare, .motion .hub.is-lit .hub__flare { animation: adv-flare 0.9s ease-out 1 both; }
.hub__flare { fill: none; stroke: var(--adv-gold); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.motion .ctrl__tag { animation: adv-tag-in 0.4s var(--adv-ease-out) both; }
.motion .ctrl__ring { transition: fill 0.35s; }
.motion .place--dest .place__finish { animation: adv-ink-in 0.4s ease-out both; }

/* Scroll reveals: sections ink in as they come into view. */
.motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--adv-ease-out), transform 0.7s var(--adv-ease-out), translate 0.35s var(--adv-ease-spring), border-color 0.25s, box-shadow 0.25s; }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .legend__item[data-reveal], .motion .hood__item[data-reveal], .motion .turn[data-reveal] { transition-delay: calc(var(--d, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Card legs light up with their waypoints (all lit when motion is off). */
.leg .leg__sym:not(.leg__sym--start) { transition: background-color 0.3s, color 0.3s; }
.leg.is-lit .leg__sym:not(.leg__sym--start):not(.leg__sym--finish) { background: var(--adv-gold); color: var(--adv-green-deep); border-color: var(--adv-maroon); }
.leg.is-lit .leg__sym--finish { background: var(--adv-gold); }

/* A part's mark and name are one link: the name's link stretches over its
   whole entry, so the mark is clickable too and the entry takes the focus
   ring. No underline on these; the mark brightens (and, with motion allowed,
   lifts) on hover instead. Prose links elsewhere keep their underline. */
li.hood__item { position: relative; }
li.hood__item .part-link { color: inherit; text-decoration: none; }
li.hood__item .part-link::after { content: ""; position: absolute; inset: 0; }
li.hood__item .part-link:focus-visible { outline: none; box-shadow: none; }
li.hood__item:has(.part-link:focus-visible) { outline: 3px solid currentColor; outline-offset: -3px; }
li.hood__item:has(.part-link:hover) img { filter: brightness(1.12) saturate(1.1); }
@media (prefers-reduced-motion: no-preference) {
li.hood__item img { transition: transform 160ms ease, filter 160ms ease; }
li.hood__item:has(.part-link:hover) img { transform: translateY(-2px); }
}