/* =============================================================
   Walk the Garden — public /map.php
   A botanical-journal experience. Designed for Birgit, with a
   warm parchment palette, gold accents, and bloom markers that
   feel like vintage cameo brooches.
   ============================================================= */

:root {
  --walk-paper:      #f6ebd9;
  --walk-paper-dim:  #ecdfc7;
  --walk-ink:        #2a1b14;
  --walk-ink-soft:   #6b5446;
  --walk-rose:       #7a1c3a;
  --walk-rose-dark:  #4a0e22;
  --walk-rose-light: #b04663;
  --walk-petal:      #e7c9d2;
  --walk-gold:       #c8a35a;
  --walk-gold-dim:   #8c6c2c;
  --walk-shell-bg:   #1a130f;
  --walk-shadow-l:   0 8px 22px rgba(40, 12, 18, 0.18);
  --walk-shadow-m:   0 14px 38px rgba(40, 12, 18, 0.28);
  --walk-shadow-h:   0 24px 60px rgba(40, 12, 18, 0.45);
}

/* paper texture for the page background — very faint dot pattern */
body.walk {
  background-color: var(--walk-paper);
  background-image:
    radial-gradient(circle at 25% 25%, rgba(122, 28, 58, 0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(200, 163, 90, 0.05) 0 1px, transparent 2px);
  background-size: 24px 24px, 28px 28px;
  background-position: 0 0, 12px 12px;
}
body.walk .site-main { padding-bottom: 0; }

.walk-svg-defs { width: 0; height: 0; position: absolute; }

/* ---------- intro / hero ---------- */
.walk-intro {
  max-width: 880px;
  margin: 44px auto 22px;
  padding: 0 24px;
  text-align: center;
}
.walk-intro-eye {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11px/1 'Inter', sans-serif;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--walk-gold-dim);
}
.walk-intro-eye .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--walk-gold);
  box-shadow: 0 0 0 3px rgba(200, 163, 90, 0.18);
}
.walk-intro h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 84px; font-weight: 500; font-style: italic;
  color: var(--walk-rose);
  margin: 12px 0 4px;
  letter-spacing: 0.005em;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,0.5), 0 6px 18px rgba(122,28,58,0.12);
}
.walk-intro-orn { color: var(--walk-gold-dim); margin: 4px auto 14px; display: block; }
.walk-intro .lede {
  color: var(--walk-ink-soft); line-height: 1.6;
  margin: 6px auto; max-width: 520px; font-size: 15px;
}
.walk-intro .walk-caption {
  margin-top: 8px;
  font: italic 500 13px/1.4 'Cormorant Garamond', serif;
  color: var(--walk-rose);
  letter-spacing: 0.06em;
}
@media (max-width: 720px) { .walk-intro h1 { font-size: 50px; } }

/* ---------- top controls (chips + tour button) ---------- */
.walk-controls-top {
  display: flex; flex-wrap: nowrap; gap: 14px 22px;
  align-items: flex-start;
  max-width: 1180px; margin: 18px auto 14px;
  padding: 0 24px;
}
.walk-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: 1 1 0; min-width: 0;
}
.walk-actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 600px) {
  .walk-controls-top { flex-wrap: wrap; }
  .walk-actions { width: 100%; justify-content: center; }
}

.chip {
  background: rgba(255, 250, 240, 0.7);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(122, 28, 58, 0.12);
  border-radius: 999px;
  padding: 8px 16px;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  color: var(--walk-ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { background: rgba(255, 250, 240, 0.95); transform: translateY(-1px); box-shadow: var(--walk-shadow-l); }
.chip.is-on {
  background: var(--walk-rose);
  color: white;
  border-color: var(--walk-rose-dark);
  box-shadow: 0 6px 14px rgba(122, 28, 58, 0.32);
}
.chip-color.is-on {
  background: var(--chip-deep, var(--walk-rose));
  border-color: var(--chip-deep, var(--walk-rose-dark));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
.chip-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.6), transparent 60%),
    var(--chip-accent, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.12);
}
.chip.is-on .chip-dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.18); }

.walk-tour-btn {
  background: linear-gradient(135deg, var(--walk-rose) 0%, var(--walk-rose-dark) 100%);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 8px 22px rgba(122, 28, 58, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .14s ease, box-shadow .14s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}
.walk-tour-btn::before {
  /* gold inner highlight */
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 40%);
  pointer-events: none;
}
.walk-tour-btn:hover { transform: translateY(-1.5px); box-shadow: 0 12px 26px rgba(122, 28, 58, 0.45); }
.walk-tour-btn:active { transform: translateY(0); }

/* Floating tour CTA — sits inside the stage at top-center as the
   primary invitation to start exploring. */
.walk-tour-btn-floating {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 11px 22px;
  font-size: 14px;
  letter-spacing: 0.06em;
  border: 1px solid rgba(200, 163, 90, 0.55);
  background:
    linear-gradient(135deg, var(--walk-rose) 0%, var(--walk-rose-dark) 100%);
  box-shadow:
    0 12px 28px rgba(122, 28, 58, 0.45),
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 0 0 4px rgba(20, 8, 12, 0.18);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.walk-tour-btn-floating:hover { transform: translateX(-50%) translateY(-2px); }
.walk-tour-btn-floating:active { transform: translateX(-50%); }
@media (max-width: 600px) {
  .walk-tour-btn-floating { padding: 9px 16px; font-size: 13px; top: 10px; }
}

/* Bloom-now petal in the chip — a tiny gold rosette */
.chip-bloom-petal { color: var(--walk-rose); font-size: 13px; line-height: 1; }
.chip.is-on .chip-bloom-petal { color: var(--walk-gold); }

/* ---------- the stage ---------- */
.walk-stage-frame {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(200,163,90,0.18), rgba(200,163,90,0.04) 50%, rgba(200,163,90,0.18));
  border-radius: 14px;
  box-shadow: var(--walk-shadow-l);
}
/* Decorative gold corner brackets — subtle but unmistakably "framed" */
.walk-stage-frame::before, .walk-stage-frame::after {
  content: ''; position: absolute; pointer-events: none;
  width: 44px; height: 44px;
  border: 1.5px solid rgba(200, 163, 90, 0.7);
  opacity: 0.85;
}
.walk-stage-frame::before { top: 6px; left: 6px;  border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.walk-stage-frame::after  { bottom: 6px; right: 6px; border-left: none; border-top: none;    border-bottom-right-radius: 6px; }
/* second pair of corners (top-right + bottom-left) via the .walk-stage-frame > shell */
.walk-stage-frame {
  background:
    linear-gradient(135deg, rgba(200,163,90,0.22), rgba(200,163,90,0.04) 50%, rgba(200,163,90,0.22));
}
.walk-canvas-shell::before, .walk-canvas-shell::after {
  content: ''; position: absolute; pointer-events: none;
  width: 26px; height: 26px;
  border: 1.5px solid rgba(200, 163, 90, 0.7);
  opacity: 0.85;
  z-index: 7;
}
.walk-canvas-shell::before { top: -12px; right: -12px; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.walk-canvas-shell::after  { bottom: -12px; left:  -12px; border-right: none; border-top: none;  border-bottom-left-radius: 6px; }

.walk-canvas-shell {
  /* outer wrapper — does NOT clip, so the bloom card can overhang.
     3:2 aspect matches the landscape sketch (1536×1024 → 3072×2048). */
  position: relative;
  aspect-ratio: 3 / 2;
  touch-action: none;
}
.walk-canvas-clip {
  /* inner wrapper — clips the sketch + warm + vignette + markers + UI */
  position: absolute; inset: 0;
  background: var(--walk-paper);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--walk-shadow-m), inset 0 0 0 1px rgba(200, 163, 90, 0.18);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
.walk-canvas-shell.is-grabbing .walk-canvas-clip { cursor: grabbing; }
@media (max-width: 760px) {
  .walk-stage-frame { padding: 8px; border-radius: 0; box-shadow: none; }
  .walk-canvas-clip { border-radius: 4px; }
}

.walk-pan {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.walk-map-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* The map background is a hand-drawn sketch — no need for a sepia tone over
   the artwork. Keep these layers as gentle accents only. */
.walk-warm {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(200, 163, 90, 0.06) 0%, transparent 50%, rgba(122, 28, 58, 0.04) 100%);
  mix-blend-mode: overlay;
  z-index: 1;
}
.walk-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 70%, rgba(60, 35, 22, 0.18) 100%);
  z-index: 1;
}

/* ---------- ambient tint (when a marker is active) ---------- */
.walk-ambient {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--ambient-x, 50%) var(--ambient-y, 50%),
      var(--ambient-color, transparent) 0%,
      transparent 30%);
  opacity: var(--ambient-strength, 0);
  mix-blend-mode: soft-light;
  transition: opacity .55s ease, background .35s ease;
  z-index: 2;
}

/* ---------- markers ---------- */
.walk-markers {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}

@keyframes walk-marker-breath {
  0%, 100% { transform: translate(-50%, -50%) scale(var(--inv-scale, 1)); }
  50%      { transform: translate(-50%, -50%) scale(calc(var(--inv-scale, 1) * 1.06)); }
}

.walk-marker {
  position: absolute;
  pointer-events: auto;
  background: none; border: none; padding: 0;
  width: 72px; height: 72px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%) scale(var(--inv-scale, 1));
  transform-origin: center center;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
  transition: filter .25s ease;
  animation: walk-marker-breath 5.5s ease-in-out infinite;
  animation-delay: var(--breath-delay, 0s);
}
.walk-marker:focus { outline: none; }
.walk-marker:focus-visible .walk-marker-cameo {
  box-shadow:
    0 0 0 2px var(--walk-paper),
    0 0 0 5px var(--accent),
    0 0 0 8px rgba(200, 163, 90, 0.6);
}
.walk-marker:hover,
.walk-marker.is-active {
  z-index: 5;
  filter: drop-shadow(0 0 18px var(--accent, #d56a8a)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6));
  animation-play-state: paused;
}

/* The petal halo is an SVG positioned behind the cameo. Each petal is
   placed by rotating around the marker centre at 45° intervals. */
.walk-marker-halo {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.0;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.3,1.4);
  transform: scale(0.7);
  transform-origin: center center;
}
.walk-marker:hover .walk-marker-halo,
.walk-marker.is-active .walk-marker-halo {
  opacity: 0.9; transform: scale(1.15);
}
.walk-marker-halo svg { position: absolute; inset: 0; overflow: visible; }
.walk-marker-halo .petal {
  fill: var(--accent, #d56a8a);
  opacity: 0.85;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Cameo: photo, accent inner ring, white spacer (gold bezel is a separate
   layer below). Box-shadow can't take a gradient, so the gold rim is on
   .walk-marker-bezel. */
.walk-marker-cameo {
  position: absolute; left: 50%; top: 50%;
  width: 50px; height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.32), transparent 55%),
    var(--thumb) center/cover no-repeat,
    #1a130f;
  box-shadow:
    inset 0 0 0 1.5px var(--accent, #d56a8a),
    inset 0 -10px 20px rgba(0,0,0,0.28),
    inset 0 6px 14px rgba(255,255,255,0.18),
    0 0 0 2.5px var(--walk-paper);
  z-index: 2;
}
/* Use a separate ring layer for the gold bezel because box-shadow can't take
   a gradient. The .walk-marker-bezel sits just outside the cameo. */
.walk-marker-bezel {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 30deg,
    var(--walk-gold) 0deg,
    var(--walk-gold-dim) 90deg,
    var(--walk-gold) 180deg,
    var(--walk-gold-dim) 270deg,
    var(--walk-gold) 360deg);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* "In bloom now" gold badge */
.walk-marker-bloom-badge {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--walk-gold), var(--walk-gold-dim));
  color: white; font-size: 10px; line-height: 18px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  z-index: 4;
  pointer-events: none;
}

/* hover label (desktop only) */
.walk-marker-label {
  position: absolute;
  left: 50%; bottom: -22px;
  transform: translateX(-50%) scale(0.9);
  background: rgba(26, 19, 15, 0.92);
  color: var(--walk-paper);
  font: italic 500 11px/1 'Cormorant Garamond', serif;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.3,1.3);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.walk-marker-label::first-letter { text-transform: capitalize; }
.walk-marker:hover .walk-marker-label { opacity: 1; transform: translateX(-50%) scale(1); }
@media (hover: none) { .walk-marker-label { display: none; } }

.walk-marker.is-ghost { opacity: 0.18; filter: grayscale(0.7) brightness(0.9); }
.walk-marker.is-ghost:hover { opacity: 0.45; filter: grayscale(0.3); }

/* falling petals — decorative drift on card-open */
.walk-petal-fall {
  position: absolute;
  pointer-events: none;
  z-index: 8;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: 0.95;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
  animation-name: walk-petal-drift;
  animation-timing-function: cubic-bezier(.4, .0, .55, 1);
  animation-fill-mode: forwards;
}
.walk-petal-fall svg { display: block; width: 100%; height: 100%; }
@keyframes walk-petal-drift {
  0%   { transform: translate(-50%, -50%) rotate(0deg);          opacity: 0; }
  12%  { opacity: 0.95; }
  100% {
    transform: translate(calc(-50% + var(--petal-x, 0px)), calc(-50% + var(--petal-y, 80px))) rotate(var(--petal-r, 90deg));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .walk-petal-fall { display: none; }
  .walk-marker { animation: none; }
}

/* clusters */
.walk-cluster {
  position: absolute;
  pointer-events: auto;
  background: none; border: none; padding: 0;
  transform: translate(-50%, -50%) scale(var(--inv-scale, 1));
  transform-origin: center center;
  width: 76px; height: 76px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5));
}
.walk-cluster .walk-cluster-thumb {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  box-shadow: 0 0 0 2px var(--walk-paper), 0 0 0 3px var(--walk-gold), 0 4px 8px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
}
.walk-cluster .walk-cluster-thumb:nth-child(1) { transform: translate(calc(-50% - 16px), calc(-50% - 10px)) rotate(-12deg); }
.walk-cluster .walk-cluster-thumb:nth-child(2) { transform: translate(calc(-50% + 16px), calc(-50% - 10px)) rotate(12deg); z-index: 2; }
.walk-cluster .walk-cluster-thumb:nth-child(3) { transform: translate(-50%, calc(-50% + 14px)); z-index: 3; }
.walk-cluster .walk-cluster-count {
  position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--walk-rose), var(--walk-rose-dark));
  color: white;
  font: 600 11px/1 'Inter', sans-serif;
  padding: 4px 9px; border-radius: 999px;
  z-index: 4;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* The hand-drawn sketch has its own compass + plan elements — hide the
   satellite-era overlays. Kept the markup so we can re-enable for raster
   maps without re-writing PHP. */
.walk-compass, .walk-scale { display: none; }

/* ---------- empty filter state ---------- */
.walk-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 14px;
  color: var(--walk-paper);
  pointer-events: none;
  background: rgba(26, 19, 15, 0.55);
  z-index: 6;
  text-align: center;
  font: italic 500 16px/1.4 'Cormorant Garamond', serif;
  letter-spacing: 0.04em;
  padding: 0 24px;
}
.walk-empty[hidden] { display: none !important; }
.walk-empty-petal {
  font-size: 38px;
  color: var(--walk-petal);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* ---------- ambient sound toggle ---------- */
.walk-sound {
  position: absolute; left: 16px; top: 16px;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: rgba(255, 250, 240, 0.92);
  color: var(--walk-rose);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .12s ease, color .15s ease;
  z-index: 5;
}
.walk-sound:hover { background: var(--walk-paper); transform: translateY(-1px); }
.walk-sound[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--walk-gold), var(--walk-gold-dim));
  color: white;
  box-shadow: 0 6px 14px rgba(200, 163, 90, 0.45);
}
.walk-sound .walk-sound-on  { display: none; }
.walk-sound[aria-pressed="true"] .walk-sound-off { display: none; }
.walk-sound[aria-pressed="true"] .walk-sound-on  { display: block; }

/* ---------- zoom controls ---------- */
.walk-zoom {
  position: absolute; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 5;
}
.walk-zoom-btn {
  width: 38px; height: 38px;
  border: none; border-radius: 8px;
  background: rgba(255, 250, 240, 0.92);
  color: var(--walk-rose);
  font-size: 19px; font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .12s ease;
}
.walk-zoom-btn:hover { background: var(--walk-paper); transform: translateY(-1px); }
.walk-zoom-btn:active { transform: translateY(0); }

/* ---------- tour status bar ---------- */
.walk-tour-status {
  position: absolute; left: 50%; top: 16px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: rgba(26, 19, 15, 0.86);
  color: var(--walk-paper);
  padding: 10px 14px;
  border-radius: 999px;
  font: 500 13px/1 'Inter', sans-serif;
  z-index: 5;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(200, 163, 90, 0.3);
  max-width: calc(100% - 32px);
}
.walk-tour-status[hidden] { display: none !important; }
.walk-tour-orn {
  color: var(--walk-gold); font-size: 14px;
  animation: walk-tour-spin 4s linear infinite;
  display: inline-block;
}
@keyframes walk-tour-spin { to { transform: rotate(360deg); } }
.walk-tour-pause, .walk-tour-stop {
  background: rgba(255, 250, 240, 0.12);
  color: var(--walk-paper); border: none;
  padding: 5px 11px; border-radius: 999px;
  font: 500 12px/1 'Inter', sans-serif;
  cursor: pointer; transition: background .15s;
}
.walk-tour-pause:hover, .walk-tour-stop:hover { background: rgba(255, 250, 240, 0.22); }
.walk-tour-stop { padding: 5px 9px; }

/* ---------- timeline ---------- */
.walk-timeline {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  max-width: 1140px;
  margin: 22px auto 60px;
  padding: 0 24px;
}
.walk-tl-cell {
  position: relative;
  background: rgba(255, 250, 240, 0.7);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(122, 28, 58, 0.10);
  border-radius: 8px;
  padding: 36px 4px 8px;
  cursor: pointer;
  text-align: center;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s, border-color .18s, transform .15s, box-shadow .18s;
  overflow: hidden;
}
.walk-tl-bar {
  position: absolute; left: 8px; right: 8px; bottom: 36px;
  height: var(--bar, 0%);
  max-height: 32px;
  background: linear-gradient(to top,
    var(--walk-rose) 0%,
    var(--walk-rose-light) 60%,
    var(--walk-petal) 100%);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(122, 28, 58, 0.15);
  transition: height .25s ease;
}
.walk-tl-label {
  display: block; font-size: 11px; color: var(--walk-ink-soft);
  letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500;
}
.walk-tl-count {
  display: block; font-size: 11px; color: var(--walk-gold-dim);
  margin-top: 2px;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
}
.walk-tl-cell:hover {
  background: rgba(255, 250, 240, 0.95);
  transform: translateY(-2px);
  box-shadow: var(--walk-shadow-l);
}
.walk-tl-cell.is-on {
  background: linear-gradient(180deg, var(--walk-rose) 0%, var(--walk-rose-dark) 100%);
  border-color: var(--walk-rose-dark);
  box-shadow: 0 8px 20px rgba(122, 28, 58, 0.35);
}
.walk-tl-cell.is-on .walk-tl-label { color: white; }
.walk-tl-cell.is-on .walk-tl-count { color: var(--walk-gold); }
.walk-tl-cell.is-on .walk-tl-bar {
  background: linear-gradient(to top, white, var(--walk-petal));
}
.walk-tl-cell.is-now::before {
  content: '❀';
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  font-size: 12px;
  color: var(--walk-rose);
  filter: drop-shadow(0 0 4px rgba(122, 28, 58, 0.4));
}
.walk-tl-cell.is-on.is-now::before { color: var(--walk-gold); filter: drop-shadow(0 0 5px rgba(200, 163, 90, 0.6)); }
.walk-tl-cell.is-dim { opacity: 0.4; }

/* ---------- bloom card (herbarium specimen) ---------- */
.walk-card {
  position: absolute;
  z-index: 20;
  width: 340px;
  background: var(--walk-paper);
  background-image:
    radial-gradient(circle at 80% 0%, rgba(200, 163, 90, 0.10), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(122, 28, 58, 0.06), transparent 50%);
  color: var(--walk-ink);
  border-radius: 10px;
  box-shadow: var(--walk-shadow-h);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  border: 1px solid rgba(200, 163, 90, 0.4);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 16px)) scale(0.92);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.3,1.4);
}
.walk-card.is-shown          { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }
.walk-card.below             { transform: translate(-50%, 16px) scale(0.92); }
.walk-card.below.is-shown    { transform: translate(-50%, 16px) scale(1); }
.walk-card.left              { transform: translate(calc(-100% - 16px), -50%) scale(0.92); }
.walk-card.left.is-shown     { transform: translate(calc(-100% - 16px), -50%) scale(1); }
.walk-card.right             { transform: translate(16px, -50%) scale(0.92); }
.walk-card.right.is-shown    { transform: translate(16px, -50%) scale(1); }

.walk-card-close {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: white;
  font-size: 18px; line-height: 28px; cursor: pointer;
  z-index: 4;
  transition: background .15s;
}
.walk-card-close:hover { background: rgba(0,0,0,0.75); }

.walk-card-photos { position: relative; background: #1a130f; aspect-ratio: 1 / 1; overflow: hidden; }
.walk-card-imgwrap {
  width: 100%; height: 100%; position: relative;
  /* feather edges into the paper background */
  -webkit-mask-image: radial-gradient(ellipse 95% 96% at center, black 75%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 96% at center, black 75%, transparent 100%);
}
.walk-card-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .25s ease;
}
.walk-card-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: white;
  font-size: 22px; line-height: 34px; cursor: pointer;
  display: none; z-index: 3;
  transition: background .15s;
}
.walk-card-arrow.is-shown { display: block; }
.walk-card-prev { left: 10px; } .walk-card-next { right: 10px; }
.walk-card-arrow:hover { background: rgba(0,0,0,0.78); }
.walk-card-dots {
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center; pointer-events: none; z-index: 3;
}
.walk-card-dots span {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.5); margin: 0 3px;
}
.walk-card-dots span.is-on { background: white; }

/* "in bloom now" pill on the photo */
.walk-card-now {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--walk-gold), var(--walk-gold-dim));
  color: white;
  font: 600 10px/1 'Inter', sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 9px 5px 7px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  z-index: 3;
}
.walk-card-now svg { color: white; }

.walk-card-body { padding: 16px 18px 18px; position: relative; }
.walk-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  font-size: 34px; line-height: 1.02;
  color: var(--walk-rose);
  letter-spacing: 0.005em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.walk-card-variety {
  font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--walk-gold-dim);
  margin-top: 4px;
  font-weight: 500;
}
.walk-card-orn {
  color: var(--walk-gold-dim);
  margin: 10px 0 6px;
  display: block;
  opacity: 0.7;
}
.walk-card-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12px; color: var(--walk-ink-soft);
  margin-top: 8px;
  align-items: center;
}
.walk-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.walk-card-meta svg { color: var(--walk-rose); flex-shrink: 0; }
.walk-card-color-swatch {
  display: inline-block; width: 28px; height: 14px;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%),
    var(--card-accent, #d56a8a);
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.12);
  flex-shrink: 0;
}
.walk-card-color-text { font-style: italic; }
.walk-card-color-text::first-letter { text-transform: uppercase; }

.walk-card-bloom-label {
  margin-top: 14px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--walk-gold-dim);
  font-weight: 500;
}
.walk-card-months {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin-top: 6px;
}
.walk-card-month {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
}
.walk-card-month-petal {
  position: absolute; inset: 2px;
  border-radius: 4px;
  background: var(--card-accent, #d56a8a);
  opacity: 0;
  transition: opacity .2s ease;
}
.walk-card-month-letter {
  position: relative; z-index: 1;
  font: 600 9px/1 'Inter', sans-serif;
  color: rgba(0,0,0,0.25);
  letter-spacing: 0.05em;
}
.walk-card-month.is-on .walk-card-month-petal { opacity: 0.85; }
.walk-card-month.is-on .walk-card-month-letter { color: white; }
.walk-card-month.is-now { box-shadow: 0 0 0 1.5px var(--walk-gold); }

/* Origin story — italic serif paragraph beneath the bloom calendar */
.walk-card-story {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(122, 28, 58, 0.18);
  position: relative;
}
.walk-card-story[hidden] { display: none !important; }
.walk-card-story-orn {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--walk-paper);
  color: var(--walk-gold-dim);
  font-size: 13px; line-height: 1; padding: 0 8px;
}
.walk-card-story-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 500;
  font-size: 15px; line-height: 1.55;
  color: var(--walk-ink);
  margin: 0;
  letter-spacing: 0.005em;
}
.walk-card-story-text::first-letter {
  font-size: 28px;
  font-weight: 600;
  float: left;
  line-height: 1;
  padding: 4px 6px 0 0;
  color: var(--walk-rose);
}

.walk-card-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  font: 600 13px/1 'Inter', sans-serif;
  color: var(--walk-rose); text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(122, 28, 58, 0.4);
  transition: gap .2s ease, border-color .2s ease;
}
.walk-card-link:hover { gap: 12px; border-bottom-color: var(--walk-rose); }

/* On narrow screens, the card snaps to the bottom of the stage */
@media (max-width: 600px) {
  .walk-card {
    position: fixed !important;
    left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important;
    transform: translateY(20px);
    width: auto !important;
    z-index: 50;
    max-height: 60vh; overflow-y: auto;
  }
  .walk-card.is-shown { transform: translateY(0); }
  .walk-card.below, .walk-card.left, .walk-card.right { transform: translateY(20px); }
  .walk-card.below.is-shown, .walk-card.left.is-shown, .walk-card.right.is-shown { transform: translateY(0); }
}