/* =========================================================
   Higson Court — 240 Higson Crescent, Qualicum Beach, BC
   Palette sampled from the property photographs:
     conifer green, cedar siding, hydrangea, driftwood.
   ========================================================= */

:root {
  --conifer:        #20402F;
  --conifer-deep:   #16301F;
  --conifer-light:  #B7D4C2;
  --cedar:          #8A7157;
  --cedar-deep:     #4C4231;   /* 7.4:1 on the tour background — AAA */
  --hydrangea:      #7B3F72;
  --hydrangea-deep: #5E2E57;
  --sky:            #2C5F7D;
  --driftwood:      #F2EDE3;
  --driftwood-warm: #E7DFD0;
  --ink:            #1C2420;
  --ink-soft:       #4A544D;

  --measure: 34rem;
  --wrap: 76rem;
  --radius: 6px;

  --step: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  --h1:   clamp(2.8rem, 1.8rem + 4.6vw, 5.6rem);
  --h2:   clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  --h3:   clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--driftwood);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; image-orientation: from-image; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--conifer);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.3; }

p { margin: 0 0 1.15em; text-wrap: pretty; }

a { color: var(--conifer); text-underline-offset: 0.18em; }
a:hover { color: var(--hydrangea); }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cedar-deep);
  margin: 0 0 0.9rem;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 100;
  background: var(--conifer);
  color: var(--driftwood);
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--driftwood); }

/* ---------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 237, 227, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}
.site-header[data-stuck="true"] { border-bottom-color: var(--driftwood-warm); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--conifer);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-list {
  display: flex;
  gap: 0.4rem;
  list-style: none;
  margin: 0; padding: 0;
  flex-wrap: wrap;
}
/* Pills rather than plain links: rounded, a little fuller than the text
   needs, and picking up the hydrangea on hover the way every other
   chosen thing on the page does. */
.nav-list a {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6rem 1.05rem;
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.nav-list a:hover {
  background: rgba(123, 63, 114, 0.14);   /* --hydrangea, for older engines */
  background: color-mix(in srgb, var(--hydrangea) 14%, transparent);
  color: var(--hydrangea-deep);
}

/* Sized down and desaturated a little so the emoji sits with the word
   rather than shouting over it, then given a small lift on hover. */
.nav-ico {
  font-size: 0.85em;
  line-height: 1;
  filter: saturate(0.85);
  transition: transform 0.2s;
}
.nav-list a:hover .nav-ico { transform: translateY(-1px) scale(1.12); }

/* The four links plus their glyphs run to a third row on a phone, which
   is a lot of sticky header to give up. Tightening them holds it to two. */
@media (max-width: 30rem) {
  /* The nav drops below the wordmark here, so a jump has more to clear. */
  html { scroll-padding-top: 6.75rem; }
  .header-inner { gap: 0.5rem; min-height: 4rem; }
  /* The nav has wrapped onto its own row by now. Forcing that row to the
     full width is what lets the links centre in it; on its own, the nav
     is only as wide as the links and stays pushed to the right. */
  .header-inner > nav { flex: 1 0 100%; }
  .nav-list {
    gap: 0.15rem;
    justify-content: center;
  }
  .nav-list a {
    gap: 0.35em;
    padding: 0.6rem 0.7rem;   /* 44px tall, the minimum comfortable tap */
    font-size: 0.92rem;
  }
}

/* Narrow enough that the three pills no longer fit a row at the size
   above, so trim them rather than let the nav wrap. */
@media (max-width: 22.5rem) {
  .nav-list { gap: 0.05rem; }
  .nav-list a {
    gap: 0.28em;
    padding-inline: 0.5rem;
    font-size: 0.88rem;
  }
}

/* ------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(84svh, 46rem);
  display: flex;
  align-items: flex-end;
  padding: 6rem 0 4.5rem;
  background: var(--conifer-deep);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--conifer-deep) center/cover no-repeat url("media/video/hero-poster.jpg");
}

.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(11, 24, 17, 0.94) 0%, rgba(11, 24, 17, 0.62) 42%, rgba(11, 24, 17, 0.3) 100%);
}

.hero-content { color: var(--driftwood); }
.hero-content .eyebrow { color: var(--conifer-light); }
.hero-content h1 {
  color: #fff;
  margin-bottom: 0.3em;
  letter-spacing: -0.03em;
}
/* Set to the width of "Higson Court" above it rather than to a reading
   measure, so the two blocks share a right edge. main.js measures the
   heading and writes --lede-max; the calc is the fallback for before
   that runs, and 5.05em is roughly that string in Fraunces. Roughly is
   the best a ratio can do, because Fraunces is an optical-size font and
   widens its letterforms as --h1 shrinks. */
.lede {
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  line-height: 1.5;
  max-width: min(100%, var(--lede-max, calc(var(--h1) * 5.05)));
  color: #F4F1E9;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin: 0; }

/* pause control — WCAG 2.2.2, looping video must be stoppable. Icon only:
   the aria-label carries the word, so nothing has to be read at a glance. */
.motion-toggle {
  position: absolute;
  right: 1.25rem; bottom: 1.25rem;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(11, 24, 17, 0.4);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.18s, border-color 0.18s;
}
.motion-toggle:hover { background: #fff; color: var(--conifer); border-color: #fff; }
.motion-icon {
  width: 11px; height: 13px;
  border-left: 3.5px solid currentColor;
  border-right: 3.5px solid currentColor;
}
/* Optical centring: a triangle's visual mass sits left of its box. */
.motion-toggle[data-playing="false"] .motion-icon { margin-left: 3px; }
.motion-toggle[data-playing="false"] .motion-icon {
  border: none;
  width: 0; height: 0;
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
  border-left: 12px solid currentColor;
}

/* ------------------------------------------- small glyphs */

/* Trailing arrow on anything that takes you somewhere. Nudges on hover,
   and sits out of the accessibility tree — the link text already says it. */
.go {
  display: inline-block;
  margin-left: 0.45em;
  transition: transform 0.18s;
}
a:hover > .go,
.btn:hover > .go { transform: translateX(0.2em); }

/* Walk/drive pictograms. Drawn in currentColor, so they carry the same
   contrast as the line of text they sit in. */
.ico {
  display: inline-block;
  vertical-align: -0.25em;
  margin-right: 0.3em;
  color: var(--conifer);
}

/* Emoji used as a pictogram mid-sentence. Held on one line so a run of
   arrows never breaks across two, and nudged down onto the baseline. */
.ico-emoji {
  display: inline-block;
  white-space: nowrap;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.1em;
  vertical-align: -0.05em;
}

/* Available to assistive tech, absent from the page. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ico + .ico,
.walk-time .ico ~ .ico { margin-left: 0.55em; }

/* --------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.btn-solid  { background: var(--conifer); color: var(--driftwood); border-color: var(--conifer); }
.btn-solid:hover  { background: var(--hydrangea-deep); border-color: var(--hydrangea-deep); color: #fff; }
.btn-ghost  { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.75); }
.btn-ghost:hover  { background: #fff; color: var(--conifer); border-color: #fff; }

/* -------------------------------------------------- sections */

/* Sections alternate between the two paper tones so each one reads as
   its own band; the dark hero and footer close the page at both ends. */
.section { padding: clamp(3rem, 5vw, 5rem) 0; }
.section-about    { background: var(--driftwood); }
.section-tour     { background: var(--driftwood-warm); }
.section-location { background: var(--driftwood); }
.section-pano     { background: var(--driftwood-warm); }

/* The .wrap stays centred at full width; the reading measure is applied
   to the children instead, so About's headings line up on the same left
   edge as every other section rather than floating in the middle. */
.prose > p,
.prose > h2,
.prose > .eyebrow { max-width: var(--measure); }
.prose > p { font-size: 1.08em; }

/* Once there is room, set the postcards alongside the text rather than
   under them. Stacked, this section was mostly empty margin on the right
   and about twice as tall as it needed to be. */
@media (min-width: 62rem) {
  .prose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .prose > .eyebrow,
  .prose > h2 { grid-column: 1 / -1; }

  .prose > p {
    grid-column: 1;
    max-width: 44ch;
  }

  /* Rows 1 and 2 are the eyebrow and heading; the prose starts at 3, and
     the postcards ride beside it for as long as it runs. */
  .prose > .postcards {
    grid-column: 2;
    grid-row: 3 / span 3;
    max-width: none;
    margin-top: 0.4rem;
  }
}

.section-intro {
  max-width: 46ch;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

/* ---- the archive postcards in the history section ----

   Without JavaScript this stays a plain stack of all three cards.
   main.js adds .is-live, which shows one at a time. */

.postcards {
  position: relative;
  margin: 1.75rem 0 0;
  max-width: 46rem;
}
.postcard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}
.postcard figure { margin: 0; }
.postcard img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(22, 48, 31, 0.22);
}
.postcard figcaption {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
}

.postcards:not(.is-live) .postcard-arrow,
.postcards:not(.is-live) .postcard-dots { display: none; }

.postcards.is-live .postcard-list { display: block; }
.postcards.is-live .postcard { display: none; }
.postcards.is-live .postcard[data-active="true"] { display: block; }

/* All three cards are within a couple of percent of the same shape, so a
   fixed box stops the section jumping height as they step past. */
.postcards.is-live .postcard img {
  aspect-ratio: 1.585;
  object-fit: cover;
}

.postcard-arrow {
  position: absolute;
  top: min(30%, 8rem);
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(22, 48, 31, 0.5);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.postcard-arrow:hover {
  background: var(--conifer);
  border-color: #fff;
  transform: scale(1.08);
}
.postcard-arrow-prev { left: 0.7rem; }
.postcard-arrow-next { right: 0.7rem; }

.postcard-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
}
.postcard-dot {
  width: 30px; height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
/* The 30px button is the touch target; the dot inside it is what shows. */
.postcard-dot::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cedar);
  transition: background 0.18s, transform 0.18s;
}
.postcard-dot:hover::before { background: var(--cedar-deep); }
.postcard-dot[aria-current="true"]::before {
  background: var(--hydrangea);
  transform: scale(1.35);
}

/* unfilled content the council still needs to supply */
[data-placeholder] {
  background: #FBEFC9;
  box-shadow: 0 0 0 2px #FBEFC9;
  border-bottom: 2px dashed #A98A2B;
  color: #5C4708;
  font-style: italic;
}

/* --------------------------------------------------- gallery

   Without JavaScript this stays a plain column of all thirteen
   photographs. main.js adds .is-live, which lifts them into the
   three-up stage: one forward, two blurred behind. */

.gallery-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gshot figure { margin: 0; }
.gshot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  background: var(--cedar);
}
.gshot figcaption {
  margin-top: 0.85rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cedar-deep);
}
.gshot figcaption b {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--conifer);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* no-JS: a readable stack, centred on the reading measure */
.gallery:not(.is-live) .gallery-list {
  display: grid;
  gap: 3rem;
  width: min(100% - 2.5rem, 34rem);
  margin-inline: auto;
}
.gallery:not(.is-live) .gallery-arrow,
.gallery:not(.is-live) .gallery-status { display: none; }

/* ---- the live three-up stage ----

   Each photo is a full-stage flex box that centres its own figure, and
   the figure is what moves. Two reasons: an absolutely positioned item
   offset by left:50% can only ever be half the stage wide, which
   crushed the picture on a phone; and a percentage translate on the
   figure is a percentage of the photo, which is what the offsets want
   to be measured in. */

.gallery.is-live .gallery-stage {
  position: relative;
  /* 3:4 portraits are height-led, but the resulting width still has to
     fit the screen — hence the vw term, which governs on a phone. */
  height: max(20rem, min(80vh, 54rem, 104vw));
  margin-top: 0.5rem;
  touch-action: pan-y;
  overflow: hidden;
}
.gallery.is-live .gallery-stage:focus-visible { outline-offset: -4px; }

.gallery.is-live .gshot {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.gallery.is-live .gshot figure {
  height: 100%;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.5s;
  will-change: transform;
}
.gallery.is-live .gshot img {
  height: 100%;
  width: auto;
  min-height: 0;
  flex: 1 1 auto;
  box-shadow: 0 18px 45px rgba(22, 48, 31, 0.28);
}

/* The caption for the photo out front is printed under the stage
   instead — see .gallery-status — so it is not repeated here. */
.gallery.is-live .gshot figcaption {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gallery.is-live .gshot[data-pos="center"] { z-index: 3; opacity: 1; }

.gallery.is-live .gshot[data-pos="left"],
.gallery.is-live .gshot[data-pos="right"] {
  z-index: 2;
  opacity: 1;
}
.gallery.is-live .gshot[data-pos="left"] figure,
.gallery.is-live .gshot[data-pos="right"] figure {
  cursor: pointer;
  filter: blur(5px) brightness(0.72) saturate(0.8);
}
.gallery.is-live .gshot[data-pos="left"]  figure { transform: translateX(-66%) scale(0.8); }
.gallery.is-live .gshot[data-pos="right"] figure { transform: translateX(66%)  scale(0.8); }

.gallery.is-live .gshot[data-pos="left"] figure:hover,
.gallery.is-live .gshot[data-pos="right"] figure:hover {
  filter: blur(3px) brightness(0.85) saturate(0.9);
}

.gallery.is-live .gshot[data-pos="off-left"],
.gallery.is-live .gshot[data-pos="off-right"] {
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.gallery.is-live .gshot[data-pos="off-left"]  figure { transform: translateX(-115%) scale(0.68); filter: blur(9px); }
.gallery.is-live .gshot[data-pos="off-right"] figure { transform: translateX(115%)  scale(0.68); filter: blur(9px); }

/* ---- arrows, laid over the blurred neighbours ---- */

.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 60px; height: 60px;
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: rgba(22, 48, 31, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.gallery-arrow:hover {
  background: var(--conifer);
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
/* Sat over the middle of each blurred neighbour, which is also the
   click target that steps in the same direction. */
.gallery-arrow-prev { left: 21%; }
.gallery-arrow-next { left: 79%; }

.gallery-status {
  margin: 1.25rem auto 0;
  width: min(100% - 2.5rem, 46rem);
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--cedar-deep);
  text-wrap: pretty;
}
.gallery-status .n {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--conifer);
  margin-bottom: 0.2rem;
}

@media (max-width: 40rem) {
  .gallery-arrow { width: 48px; height: 48px; }
  .gallery-arrow-prev { left: 15%; }
  .gallery-arrow-next { left: 85%; }
  .gallery.is-live .gshot[data-pos="left"]  figure { transform: translateX(-74%) scale(0.76); }
  .gallery.is-live .gshot[data-pos="right"] figure { transform: translateX(74%)  scale(0.76); }
}

/* ------------------------------------------------ 360 viewer */

/* Breaks the wrap so the one view can run nearly edge to edge. */
.pano-wide {
  width: min(100% - 1.5rem, 110rem);
  margin: 0.5rem auto 0;
}

.pano-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--conifer-deep);
  aspect-ratio: 4 / 3;
  max-height: 82vh;
}
@media (min-width: 48rem) {
  /* max-width is load-bearing: min-height and aspect-ratio together
     resolve width from height (30rem × 21/9 = 70rem), which overflowed
     the page on mid-width screens. Capping lets min-height simply win. */
  .pano-stage { aspect-ratio: 21 / 9; min-height: 30rem; max-width: 100%; }
}

.pano-viewer { position: absolute; inset: 0; }
.pano-viewer:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }

.pano-idle {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  background: var(--conifer-deep);
}
/* display:grid above outranks the UA's [hidden] rule, which would leave
   this opaque panel sitting on top of the loaded panorama forever. */
.pano-idle[hidden] { display: none; }
.pano-idle-note {
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  color: var(--conifer-light);
  font-size: 1rem;
  max-width: 34ch;
}

.pano-status {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  color: var(--cedar-deep);
  min-height: 1.6em;
}

/* -------------------------------------------------- location */

/* Breaks the reading wrap so the map runs nearly edge to edge. */
.map-wide {
  width: min(100% - 1.5rem, 110rem);
  margin: 1.5rem auto 2.25rem;
}

#map {
  height: clamp(26rem, 62vh, 40rem);
  border-radius: 12px;
  overflow: hidden;
  background: var(--driftwood-warm);
  border: 1px solid var(--cedar);
}

.map-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.map-links { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; }
.map-links a {
  font-weight: 600;
  color: var(--conifer);
  text-decoration-thickness: 2px;
}
.map-credit { margin-left: auto; }

.map-fallback {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding: 1.5rem;
  margin: 0;
}

/* MapLibre's own controls default to 29px; give them a comfortable
   thumb-sized target instead. */
.maplibregl-ctrl-group button {
  width: 40px;
  height: 40px;
}
.maplibregl-ctrl-group button:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: -3px;
}

.pin {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--hydrangea);
  border: 4px solid var(--driftwood);
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  cursor: pointer;
}

/* numbered landmark waypoints, matching the list below the map */
.wp {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--conifer);
  color: var(--driftwood);
  border: 2px solid var(--driftwood);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  font: 700 0.75rem/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.18s, background 0.18s;
}
.wp:hover { transform: scale(1.18); }
.wp[data-active="true"] {
  background: var(--hydrangea);
  transform: scale(1.25);
}

/* ---- walking distances, sat directly under the map ---- */

.section-location h3 { margin-top: 0; }
.dir-note {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  max-width: 48ch;
}

.walks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.5rem;
}

.walk {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  height: 100%;
  padding: 0.8rem 0.9rem;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.walk:hover { background: var(--driftwood-warm); }
.walk[aria-pressed="true"] {
  background: #fff;
  border-color: var(--hydrangea);
}

.walk-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  margin-top: 0.15rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--conifer);
  color: var(--driftwood);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.walk[aria-pressed="true"] .walk-num { background: var(--hydrangea); }

.walk-body { display: block; }
.walk-name {
  display: block;
  font-weight: 600;
  color: var(--conifer);
  line-height: 1.4;
}
.walk-time {
  display: block;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--cedar-deep);
}
/* the second glyph starts the drive half of the line */
.walk-time .ico:not(:first-child) { margin-left: 0.6em; }
.walk-blurb {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------------------------------------------------- footer */

.site-footer {
  background: var(--conifer-deep);
  color: #D9E2DA;
  padding: 3rem 0 2.5rem;
}
.footer-inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
.footer-mark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #fff;
  margin: 0 0 0.2rem;
}
.footer-sub, .footer-legal {
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0;
}
.footer-legal p { margin: 0 0 0.6rem; }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-sub { color: var(--conifer-light); }
.site-footer a { color: #fff; }
.footer-login a {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* ------------------------------------------- user preferences */

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

@media (prefers-contrast: more) {
  :root { --ink-soft: #2B322D; --cedar-deep: #3D3427; }
  .hero-scrim { background: rgba(9, 20, 14, 0.82); }
  .gshot img { border: 1px solid var(--ink); }
}

@media print {
  .site-header, .motion-toggle, .gallery-arrow, .gallery-status, #map { display: none; }
  .hero { min-height: auto; padding: 2rem 0; background: none; }
  .hero-content, .hero-content h1 { color: #000; }
  body { background: #fff; font-size: 11pt; }
  .gallery.is-live .gallery-stage { height: auto; overflow: visible; }
  .gallery.is-live .gshot {
    position: static;
    height: auto;
    opacity: 1;
    width: 45%;
    display: inline-block;
  }
  .gallery.is-live .gshot figure { height: auto; transform: none; filter: none; }
  .gallery.is-live .gshot img { width: 100%; height: auto; }
  .gallery.is-live .gshot figcaption { opacity: 1; }
}