/* ============ OUR PLACES — hand-drawn memory map ============
   Pairs with places.js. A framed paper map (inline SVG), a route that draws
   itself, teardrop pins with photo thumbnails, a memory card with a polaroid
   and a chip rail. All loops pause off-screen (.pl-shell.is-live). */

.places { padding: 5rem 1.2rem 7rem; }
.places .statement-sub { margin-top: 1.1rem; }

.pl-shell { max-width: 520px; margin: 0 auto; }
.pl-stage { position: relative; }
/* once revealed, drop the lingering blur(0) so the map isn't re-rasterised through a filter while it pans */
.pl-stage.reveal.in,
.pl-nav.reveal.in { filter: none; }

/* ---- The frame (a print with a white mat) ---- */
.pl-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 1.7rem;
  background: #FBF3EE;
  border: 1px solid rgba(217, 108, 138, 0.16);
  box-shadow: var(--shadow-ambient);
  -webkit-tap-highlight-color: transparent;
}
.pl-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 0 7px #fff,
    inset 0 0 0 8px rgba(217, 108, 138, 0.2),
    inset 0 0 0 9px rgba(255, 255, 255, 0.8);
}
.pl-canvas {
  position: absolute;
  inset: 7px;
  border-radius: calc(1.7rem - 7px);
  overflow: hidden;
  background: #F9F0EA;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.pl-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 54px rgba(110, 36, 54, 0.08), inset 0 0 3px rgba(110, 36, 54, 0.07);
}
.pl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  font-family: inherit;
}

/* ---- Paper ---- */
.pl-grid-line { fill: none; stroke: rgba(217, 108, 138, 0.085); stroke-width: 0.6; }
.pl-speckles circle { fill: rgba(61, 44, 51, 0.1); }

/* ---- Groves ---- */
.pl-grove-wash { fill: #EEE8D9; opacity: 0.6; }
#pl-palm path {
  fill: none;
  stroke: rgba(61, 44, 51, 0.5);
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- River ---- */
.pl-bank { fill: none; stroke: #EFDFD7; stroke-width: 44; stroke-linecap: round; }
.pl-water { fill: none; stroke: #CBD5DC; stroke-width: 30; stroke-linecap: round; }
.pl-water-light { fill: none; stroke: #D9E1E6; stroke-width: 12; stroke-linecap: round; opacity: 0.9; }
.pl-current {
  fill: none;
  stroke: #9BAEBA;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 4 10;
  opacity: 0.7;
}
.pl-shell.is-live .pl-current { animation: pl-flow 3.4s linear infinite; }
.pl-shell.is-live .pl-current-b { animation-duration: 4.2s; animation-delay: -1.3s; }
@keyframes pl-flow { to { stroke-dashoffset: -28; } }

/* ---- Roads, town, bridge ---- */
.pl-road { fill: none; stroke: rgba(61, 44, 51, 0.22); stroke-width: 1.1; stroke-linecap: round; }
.pl-road-casing { fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 5; stroke-linecap: round; }
.pl-road-main { fill: none; stroke: rgba(61, 44, 51, 0.32); stroke-width: 1.3; stroke-linecap: round; }
.pl-block { fill: url(#pl-hatch); stroke: rgba(61, 44, 51, 0.42); stroke-width: 0.7; }
.pl-hatch-line { stroke: rgba(61, 44, 51, 0.32); stroke-width: 0.6; }
.pl-bridge-deck { fill: #FBF3EE; stroke: rgba(61, 44, 51, 0.5); stroke-width: 0.8; }
.pl-bridge-ticks { fill: none; stroke: rgba(61, 44, 51, 0.35); stroke-width: 0.6; }
.pl-bridge-arches { fill: none; stroke: rgba(61, 44, 51, 0.35); stroke-width: 0.7; }
.pl-ruin { fill: url(#pl-hatch); stroke: rgba(61, 44, 51, 0.48); stroke-width: 0.8; stroke-linejoin: round; }
.pl-ruin-marks { fill: none; stroke: rgba(61, 44, 51, 0.4); stroke-width: 0.6; stroke-linecap: round; }

/* ---- Lettering ---- */
.pl-lbl {
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  fill: rgba(61, 44, 51, 0.55);
  paint-order: stroke;
  stroke: #FBF3EE;
  stroke-width: 3;
  stroke-linejoin: round;
}
.pl-lbl-sm { font-size: 7px; }
.pl-lbl-far { font-size: 7.5px; letter-spacing: 0.2em; fill: rgba(61, 44, 51, 0.42); }
.pl-lbl-river {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.28em;
  fill: #8B9EAA;
}
.pl-compass-ring { fill: rgba(255, 255, 255, 0.55); stroke: rgba(61, 44, 51, 0.35); stroke-width: 0.7; }
.pl-compass-ring2 { fill: none; stroke: rgba(61, 44, 51, 0.32); stroke-width: 0.6; }
.pl-compass-star { fill: #fff; stroke: var(--rose); stroke-width: 0.8; stroke-linejoin: round; }
.pl-compass-star-dark { fill: var(--rose); opacity: 0.88; }
.pl-compass-core { fill: #fff; stroke: var(--rose); stroke-width: 0.8; }
.pl-compass-inf { fill: none; stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; }
.pl-compass-n { font-size: 7.5px; font-weight: 700; letter-spacing: 0.1em; fill: var(--rose); text-anchor: middle; }
.pl-cart-box { fill: rgba(255, 255, 255, 0.74); stroke: rgba(217, 108, 138, 0.5); stroke-width: 0.7; }
.pl-cart-inner { fill: none; stroke: rgba(217, 108, 138, 0.3); stroke-width: 0.5; }
.pl-cart-title { font-size: 12.5px; font-weight: 900; letter-spacing: 0.28em; fill: var(--ink); text-anchor: middle; }
.pl-cart-sub { font-size: 6px; font-weight: 500; letter-spacing: 0.3em; fill: var(--rose); text-anchor: middle; }
.pl-cart-note { font-size: 6.4px; font-weight: 300; letter-spacing: 0.16em; fill: var(--ink-soft); text-anchor: middle; }
.pl-scale line { stroke: rgba(61, 44, 51, 0.55); stroke-width: 0.6; }
.pl-scale text { font-size: 6px; font-weight: 500; fill: var(--ink-soft); }

/* ---- Route (dotted, revealed by a drawing mask) ---- */
.pl-route-draw {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.pl-route-under {
  fill: none;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 5.2;
  stroke-linecap: round;
  stroke-dasharray: 0 6.5;
}
.pl-route {
  fill: none;
  stroke: var(--rose);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 0 6.5;
}

/* ---- Pins ---- */
.pl-pin { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.pl-pin-hit { fill: transparent; }
.pl-pin-shadow {
  fill: rgba(61, 44, 51, 0.22);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease 0.3s, transform 0.55s var(--ease-fluid);
}
.pl-pin-fall {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.pl-pin.is-dropped .pl-pin-fall { animation: pl-drop 0.78s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.pl-pin.is-dropped .pl-pin-shadow { opacity: 1; }
@keyframes pl-drop {
  0% { opacity: 0; transform: translateY(-42px) scale(0.72); }
  55% { opacity: 1; transform: translateY(2.5px) scale(1.05); }
  78% { transform: translateY(-1.5px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
.pl-pin-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.55s var(--ease-spring);
}
.pl-pin.is-active .pl-pin-body { transform: translateY(-6px) scale(1.16); }
.pl-pin.is-active .pl-pin-shadow { transform: scale(1.7, 1.3); opacity: 0.55; }
.pl-pin-drop {
  fill: #fff;
  stroke: var(--rose);
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: stroke-width 0.3s ease, stroke 0.3s ease;
}
.pl-pin.is-active .pl-pin-drop { fill: #FFF6F8; stroke-width: 1.8; }
.pl-pin:focus-visible .pl-pin-drop { stroke: var(--maroon); stroke-width: 2.4; }
.pl-pin-ring { fill: none; stroke: #fff; stroke-width: 1.2; opacity: 0.9; }
.pl-pin-num circle { fill: var(--rose); stroke: #fff; stroke-width: 1.1; }
.pl-pin-num text {
  font-size: 6.6px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}
.pl-pin-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.05em;
  fill: var(--ink);
  pointer-events: none;
  paint-order: stroke;
  stroke: #FBF3EE;
  stroke-width: 3.2;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.45s ease 0.45s;
}
.pl-pin.is-dropped .pl-pin-label { opacity: 0.94; }
.pl-pulse {
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.pl-shell.is-live .pl-pin.is-active .pl-pulse { animation: pl-pulse 2.4s var(--ease-fluid) infinite; }
@keyframes pl-pulse {
  0% { transform: scale(0.35); opacity: 0.75; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .pl-pin:hover:not(.is-active) .pl-pin-body { transform: translateY(-3px) scale(1.06); }
}

/* ---- Frame chrome ---- */
.pl-whole {
  position: absolute;
  z-index: 3;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.46rem 0.9rem 0.46rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(217, 108, 138, 0.22);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(61, 44, 51, 0.35);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s var(--ease-fluid);
  -webkit-tap-highlight-color: transparent;
}
.pl-frame.is-zoomed .pl-whole { opacity: 1; transform: none; pointer-events: auto; }
.pl-whole:active { transform: scale(0.95); }
.pl-whole svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-count {
  position: absolute;
  z-index: 3;
  top: 1.2rem;
  right: 1.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.pl-frame.is-picked .pl-count { opacity: 1; }

/* ---- Memory card ---- */
.pl-card {
  position: relative;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem 0.95rem 1rem;
  border-radius: 1.5rem;
  background: linear-gradient(180deg, #FFFFFF, #FFF8F5);
  border: 1px solid rgba(217, 108, 138, 0.16);
  box-shadow: var(--shadow-ambient), inset 0 1px 1px rgba(255, 255, 255, 0.95);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pl-polaroid {
  position: relative;
  flex: 0 0 auto;
  width: 6.6rem;
  padding: 0.34rem 0.34rem 1.2rem;
  background: #fff;
  border-radius: 0.55rem;
  box-shadow: 0 14px 30px -14px rgba(61, 44, 51, 0.38), 0 0 0 1px rgba(217, 108, 138, 0.12);
  transform: rotate(-3deg);
}
.pl-polaroid-img {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.3rem;
  overflow: hidden;
  background: var(--cream-deep);
}
.pl-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.2s ease;
}
.pl-card-photo[hidden] { display: none; }
.pl-polaroid-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--rose);
}
.pl-polaroid-empty::before {
  content: '';
  position: absolute;
  inset: 0.5rem;
  border-radius: 50%;
  border: 1px dashed rgba(217, 108, 138, 0.5);
}
.pl-polaroid-empty svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-card[data-state="picked"] .pl-polaroid-empty { display: none; }
.pl-polaroid-lip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.26rem;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pl-card-body { flex: 1; min-width: 0; will-change: transform; }
.pl-chip {
  display: inline-block;
  padding: 0.22rem 0.75rem;
  border-radius: 999px;
  background: rgba(217, 108, 138, 0.08);
  border: 1px solid rgba(217, 108, 138, 0.18);
  color: var(--rose);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}
.pl-card-title {
  margin-top: 0.5rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.pl-card-line {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.pl-card-foot {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--rose);
}
.pl-card-foot[hidden] { display: none; }

/* the photo in flight from pin to polaroid */
.pl-fly {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  transform-origin: 50% 50%;
  box-shadow: 0 18px 40px -16px rgba(61, 44, 51, 0.45);
  will-change: transform;
}
.pl-fly.is-landed { border-radius: 0.3rem; }

/* ---- Chip rail ---- */
.pl-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.pl-arrow {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(217, 108, 138, 0.22);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(61, 44, 51, 0.3);
  transition: transform 0.35s var(--ease-spring), color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.pl-arrow:active { transform: scale(0.92); }
.pl-arrow svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pl-rail {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.7rem, #000 calc(100% - 0.7rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 0.7rem, #000 calc(100% - 0.7rem), transparent);
}
.pl-rail::-webkit-scrollbar { display: none; }
.pl-rchip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(217, 108, 138, 0.22);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.35s var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.pl-rchip-n {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(217, 108, 138, 0.1);
  color: var(--rose);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.3s ease, color 0.3s ease;
}
.pl-rchip:active { transform: scale(0.96); }
.pl-rchip.is-active {
  background: linear-gradient(145deg, var(--rose), var(--rose-soft));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(217, 108, 138, 0.6);
}
.pl-rchip.is-active .pl-rchip-n { background: rgba(255, 255, 255, 0.24); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .pl-arrow:hover { color: var(--rose); transform: translateY(-1px); }
  .pl-rchip:hover:not(.is-active) { background: var(--rose-mist); }
  .pl-whole:hover { background: #fff; }
}

/* ---- Wider screens ---- */
@media (min-width: 768px) {
  .places { padding: 8rem 1.2rem 10rem; }
}
@media (min-width: 900px) {
  .pl-shell { max-width: 880px; }
  .pl-frame { aspect-ratio: 6 / 5; }
  .pl-card {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    z-index: 4;
    width: 400px;
    margin: 0;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .pl-polaroid { width: 7.2rem; }
  .pl-nav { max-width: 640px; margin: 1.3rem auto 0; }
  /* the card sits bottom-left on wide screens, so the cartouche moves to the right margin */
  .pl-cartouche { transform: translate(372px, 424px); }
}

/* ---- Reduced motion: keep the map, drop the travel ---- */
@media (prefers-reduced-motion: reduce) {
  .pl-route-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .pl-pin-fall { opacity: 1; animation: none !important; }
  .pl-pin-shadow { opacity: 1; transition: none; }
  .pl-pin-label { opacity: 0.94; transition: none; }
  .pl-pin-body { transition: none; }
  .pl-current, .pl-pulse { animation: none !important; }
  .pl-pulse { display: none; }
  .pl-whole { transition: opacity 0.2s ease; transform: none; }
  .pl-card-body { will-change: auto; }
}