/* ==================================================================
   STOP PAGE - editorial design (vintage railway travel magazine)
   Loaded after styles.css; scoped under .stop-page-body / .sp- prefix.
   ================================================================== */
.stop-page-body{
  --sp-ivory:#f5f0e8;
  --sp-green:#0a2d21;
  --sp-rust:#7d3a1e;
  --sp-amber:#c4860f;
  --sp-offivory:#ede8da;
  --sp-cream:#ede0cc;
  --sp-ink:#241f1a;
  --sp-muted:#5a4f3d;
  background:var(--sp-ivory);
  color:var(--sp-ink);
  font-family:'Spline Sans',system-ui,sans-serif;
}
.stop-page-body main{max-width:1180px;margin:0 auto;padding:0 24px 80px}

/* Paper texture: pure-CSS thin diagonal lines, very faint. */
.sp-paper{
  background-image:repeating-linear-gradient(45deg,
    rgba(45,30,20,.03) 0, rgba(45,30,20,.03) 1px, transparent 1px, transparent 8px);
}

/* ---------- section labels + headings ---------- */
.sp-label{
  font-family:'Spline Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;
  color:var(--sp-rust);margin:0 0 14px;
}
.sp-h2{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--sp-green);
  font-size:clamp(2rem,4vw,3rem);line-height:1.05;margin:0 0 24px;letter-spacing:-.01em}

/* ---------- HERO ----------
   .sp-hero has no padding so its left/right edges line up exactly with
   the breadcrumb, best-for pills, and intro below (main supplies the
   shared 24px gutter). */
.sp-hero{position:relative}
.sp-hero-frame{position:relative;height:78vh;min-height:540px;overflow:hidden}
.sp-hero-frame img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .4s ease-out}
.sp-hero-frame img.loaded{opacity:1}
.sp-hero-travel{
  position:absolute;top:18px;right:18px;z-index:3;
  background:var(--sp-ivory);color:var(--sp-rust);
  border:2px solid var(--sp-rust);
  font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:7px 14px;max-width:240px;line-height:1.3;
}
/* Title sits below the hero with comfortable breathing room. */
.sp-hero-titlewrap{position:relative;margin-top:32px;z-index:4}
.sp-hero-title{
  font-family:'Fraunces',Georgia,serif;font-weight:900;color:var(--sp-green);
  font-size:clamp(52px,9vw,108px);line-height:.92;letter-spacing:-.02em;margin:0;
  text-shadow:2px 2px 0 rgba(190,175,150,.55);
  transform:translateY(18px);opacity:0;
}
.sp-hero-title.in{transform:translateY(0);opacity:1;transition:transform .4s ease-out,opacity .4s ease-out}
.sp-hero-tagline{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  color:var(--sp-rust);font-size:clamp(18px,2.4vw,26px);line-height:1.3;
  margin:14px 0 0;max-width:780px;
}

/* ---------- breadcrumb ----------
   Subtle context row that supports the TOC above without competing.
   Sentence-case text, plain slash separators, no icons or uppercase. */
.sp-breadcrumb{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:'Spline Sans',sans-serif;
  font-size:12px;font-weight:500;
  color:var(--sp-muted);
  margin:18px 0 0;
}
.sp-breadcrumb a{color:var(--sp-muted);text-decoration:none}
.sp-breadcrumb a:hover{color:var(--sp-rust);text-decoration:underline}
.sp-breadcrumb .sp-breadcrumb-sep{color:var(--sp-muted);opacity:.6}
.sp-breadcrumb .here{color:var(--sp-ink);font-weight:600}

/* ---------- best for pills ----------
   Boxed rust outlines give the row character and match the poster-
   editorial feel of the guide. Sits below the TOC as a secondary
   context row. */
.sp-bestfor{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.sp-pill{
  border:2px solid var(--sp-rust);color:var(--sp-rust);background:var(--sp-ivory);
  font-size:13px;font-weight:600;letter-spacing:.03em;padding:6px 13px;border-radius:0;
  white-space:nowrap;
}

/* ---------- editorial intro (two-column) ---------- */
.sp-intro{display:grid;grid-template-columns:65% 35%;gap:48px;margin:56px 0 0;align-items:start}
.sp-intro-body p{font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.8;
  color:var(--sp-ink);margin:0 0 20px;text-align:left}
.sp-intro-aside{padding-top:6px;border-left:2px solid var(--sp-rust);padding-left:24px}
.sp-pullquote{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:28px;line-height:1.3;color:var(--sp-rust);margin:0 0 28px}
.sp-stat{margin-top:8px}
.sp-stat-num{font-family:'Fraunces',Georgia,serif;font-weight:700;color:var(--sp-green);
  font-size:48px;line-height:1;display:block}
.sp-stat-label{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;
  color:var(--sp-muted);margin-top:8px;display:block}

/* ---------- chapter divider ---------- */
.sp-divider{position:relative;height:1px;background:var(--sp-green);margin:48px 0;border:0}
.sp-divider::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sp-green)}
.sp-divider-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:var(--sp-green);color:var(--sp-ivory);
  display:flex;align-items:center;justify-content:center;font-size:20px;
}

/* ---------- getting here / around ---------- */
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.sp-card{background:var(--sp-ivory);padding:24px}
.sp-card p{font-family:'Fraunces',Georgia,serif;font-size:17px;line-height:1.75;margin:0;color:var(--sp-ink)}

/* ---------- seasonal highlights (asymmetric) ---------- */
.sp-seasons-wrap{background:var(--sp-offivory);margin:0 -24px;padding:40px 24px}
.sp-seasons-inner{max-width:1132px;margin:0 auto}
.sp-seasons{display:grid;grid-template-columns:1fr 2fr 1fr;grid-template-rows:auto auto;gap:18px}
.sp-season{background:var(--sp-ivory);border:1px solid #d9cfba;padding:22px}
.sp-season .ph-light,.sp-season .ph{font-size:48px;color:var(--sp-rust);display:block;margin-bottom:10px}
.sp-season-name{text-transform:uppercase;letter-spacing:.2em;font-size:11px;font-weight:600;
  color:var(--sp-muted);margin:0 0 10px}
.sp-season-text{font-family:'Fraunces',Georgia,serif;font-size:15px;line-height:1.6;color:var(--sp-ink);margin:0}
.sp-season-summer{grid-column:1;grid-row:1/3}
.sp-season-spring{grid-column:2;grid-row:1}
.sp-season-fall{grid-column:2;grid-row:2}
.sp-season-winter{grid-column:3;grid-row:1/3}

/* ---------- fun facts ticker ---------- */
.sp-ticker{background:var(--sp-green);color:var(--sp-ivory);overflow:hidden;
  margin:0 -24px;padding:18px 0;white-space:nowrap}
.sp-ticker-track{display:inline-flex;align-items:center;gap:0;animation:sp-scroll 100s linear infinite}
.sp-ticker:hover .sp-ticker-track{animation-play-state:paused}
.sp-ticker-item{display:inline-flex;align-items:center;gap:14px;padding:0 28px}
.sp-ticker-cat{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;color:var(--sp-amber)}
.sp-ticker-fact{font-family:'Fraunces',Georgia,serif;font-size:16px;color:var(--sp-ivory)}
.sp-ticker-dot{width:5px;height:5px;border-radius:50%;background:var(--sp-amber);flex:none}
@keyframes sp-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- listings + map ---------- */
/* Map on top full width, cards below in a responsive grid. Bigger
   map means markers spread out and are actually readable at a glance;
   cards get horizontal room for a proper multi-column grid. */
/* =========================================================
   Northlander.app scrapbook promo
   Kraft-paper section with two tilted polaroid photos, matching
   the polaroid aesthetic used on /plan-a-trip. Editorial in tone,
   sits above the map on every stop page's Where to Go section
   so travellers see the App promoted where they're actively
   planning what to do at this stop.
   ========================================================= */
.sp-app-scrapbook{
  position:relative;
  /* Sits between two section dividers (Where to Go above, What's On
     below). Each divider carries its own 48px vertical margin so
     the scrapbook needs neither - zero top/bottom keeps the rhythm
     consistent with the rest of the section transitions. Negative
     side margins full-bleed to the .stop-page edges. */
  margin:0 -24px;
  background:
    linear-gradient(180deg, #ede0cc 0%, #e3d2b3 100%);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(45,30,20,.05) 0, rgba(45,30,20,.05) 1px,
      transparent 1px, transparent 9px);
  padding:48px 24px 56px;
}
.sp-app-scrapbook-inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
  max-width:1120px;margin:0 auto;
}
.sp-app-scrapbook-copy{min-width:0}
.sp-app-scrapbook-kicker{
  display:inline-block;
  font-family:'Spline Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;font-weight:700;
  color:var(--sp-rust);
  margin-bottom:14px;
}
.sp-app-scrapbook-h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:700;line-height:1.05;
  font-size:clamp(28px, 3.6vw, 40px);
  color:var(--sp-ink);
  margin:0 0 16px;
}
.sp-app-scrapbook-h3 em{
  font-style:italic;color:var(--sp-green);
}
.sp-app-scrapbook-deck{
  font-family:'Fraunces',Georgia,serif;
  font-size:17px;line-height:1.55;
  color:#3d3529;
  margin:0 0 22px;
  max-width:520px;
}
.sp-app-scrapbook-benefits{
  list-style:none;padding:0;margin:0 0 28px;
  display:grid;gap:10px;
}
.sp-app-scrapbook-benefits li{
  display:flex;align-items:center;gap:12px;
  font-family:'Spline Sans',sans-serif;font-size:14.5px;font-weight:500;
  color:var(--sp-ink);
}
.sp-app-scrapbook-benefits li i{
  flex:0 0 auto;
  width:32px;height:32px;border-radius:50%;
  background:rgba(10,45,33,.1);color:var(--sp-green);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
}
.sp-app-scrapbook-cta{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.sp-app-scrapbook-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;
  background:var(--sp-green);color:var(--sp-ivory);
  text-decoration:none;
  font-family:'Spline Sans',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.04em;
  border-radius:2px;
  box-shadow:0 4px 12px rgba(10,45,33,.28);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sp-app-scrapbook-btn:hover{
  background:#082921;
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(10,45,33,.35);
}
.sp-app-scrapbook-btn i{font-size:15px}
.sp-app-scrapbook-link{
  font-family:'Spline Sans',sans-serif;font-size:13px;font-weight:600;
  color:var(--sp-green);text-decoration:underline;text-underline-offset:3px;
  letter-spacing:.02em;
}
.sp-app-scrapbook-link:hover{color:#082921}

/* Two polaroids on the right: current-stop hero + a Northlander route
   scenic. Tilted at opposing angles with masking-tape corners. Reuses
   the .pl-polaroid + .pl-tape base rules from /plan-a-trip so the
   look is intentionally identical. */
.sp-app-scrapbook-photos{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:340px;
}
.sp-app-polaroid{
  position:absolute;
  width:clamp(200px, 22vw, 260px);
  background:#fbf6ea;
  padding:14px 14px 18px;
  box-shadow:0 12px 28px rgba(40,20,5,.28),
             0 2px 4px rgba(40,20,5,.15);
  font-family:'Fraunces',Georgia,serif;
  display:flex;flex-direction:column;gap:12px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.sp-app-polaroid img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  background:#ddd1b8;
}
.sp-app-polaroid figcaption{
  text-align:center;padding:6px 4px 2px;
}
.sp-app-polaroid figcaption strong{
  display:block;font-family:'Fraunces',Georgia,serif;
  font-weight:700;font-style:italic;font-size:20px;
  color:var(--sp-green);line-height:1.1;margin:6px 0 4px;
}
.sp-app-polaroid-meta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Spline Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:9px;font-weight:700;color:var(--sp-rust);
}
.sp-app-polaroid-dot{
  width:3px;height:3px;border-radius:50%;background:var(--sp-rust);
}
.sp-app-polaroid-cap{
  display:block;font-size:11px;color:var(--sp-muted);
  letter-spacing:.04em;font-style:italic;line-height:1.4;
}
/* Masking tape corners on the polaroids. */
.sp-app-tape{
  position:absolute;width:64px;height:18px;
  background:rgba(218,196,140,.7);
  border:1px solid rgba(150,120,70,.25);
  box-shadow:0 1px 2px rgba(40,20,5,.1);
}
.sp-app-tape-tl{top:-8px;left:-12px;transform:rotate(-32deg)}
.sp-app-tape-tr{top:-8px;right:-12px;transform:rotate(32deg)}
.sp-app-polaroid-1{
  transform:rotate(-6deg) translate(-30px, -10px);
  z-index:2;
  animation:sp-app-polaroid-sway-1 7s ease-in-out infinite;
}
.sp-app-polaroid-2{
  transform:rotate(5deg) translate(60px, 30px);
  z-index:1;
  animation:sp-app-polaroid-sway-2 8s ease-in-out infinite;
  animation-delay:.5s;
}
@keyframes sp-app-polaroid-sway-1{
  0%,100%{transform:rotate(-6deg) translate(-30px, -10px)}
  50%{transform:rotate(-4deg) translate(-30px, -14px)}
}
@keyframes sp-app-polaroid-sway-2{
  0%,100%{transform:rotate(5deg) translate(60px, 30px)}
  50%{transform:rotate(3deg) translate(60px, 26px)}
}
.sp-app-polaroid:hover{
  transform:rotate(0deg) translate(0, -4px) scale(1.05);
  z-index:3;
  animation-play-state:paused;
}
@media (prefers-reduced-motion:reduce){
  .sp-app-polaroid{animation:none;transition:none}
  .sp-app-polaroid:hover{transform:rotate(-6deg) translate(-30px, -10px)}
  .sp-app-polaroid-2:hover{transform:rotate(5deg) translate(60px, 30px)}
  .sp-app-scrapbook-btn{transition:none}
  .sp-app-scrapbook-btn:hover{transform:none}
}

/* Tablet: photos shrink, everything gets closer. */
@media (max-width:960px){
  .sp-app-scrapbook{padding:40px 24px 48px}
  .sp-app-scrapbook-inner{gap:32px;grid-template-columns:1fr}
  .sp-app-scrapbook-photos{min-height:280px;margin-top:12px}
  .sp-app-polaroid{width:clamp(180px, 40vw, 220px)}
  .sp-app-polaroid-1{transform:rotate(-6deg) translate(-70px, 0)}
  .sp-app-polaroid-2{transform:rotate(5deg) translate(70px, 20px)}
  @keyframes sp-app-polaroid-sway-1{
    0%,100%{transform:rotate(-6deg) translate(-70px, 0)}
    50%{transform:rotate(-4deg) translate(-70px, -6px)}
  }
  @keyframes sp-app-polaroid-sway-2{
    0%,100%{transform:rotate(5deg) translate(70px, 20px)}
    50%{transform:rotate(3deg) translate(70px, 14px)}
  }
}
/* Mobile: single polaroid centered, smaller layout. */
@media (max-width:560px){
  .sp-app-scrapbook{margin:0 -16px 24px;padding:32px 20px 40px}
  .sp-app-scrapbook-h3{font-size:26px}
  .sp-app-scrapbook-deck{font-size:15px}
  .sp-app-scrapbook-benefits{margin-bottom:20px}
  .sp-app-scrapbook-cta{gap:14px}
  .sp-app-scrapbook-btn{width:100%;justify-content:center}
  .sp-app-scrapbook-photos{min-height:240px}
  .sp-app-polaroid{width:180px}
  .sp-app-polaroid-1{transform:rotate(-6deg) translate(-40px, 0)}
  .sp-app-polaroid-2{transform:rotate(5deg) translate(40px, 20px);width:160px}
  @keyframes sp-app-polaroid-sway-1{
    0%,100%{transform:rotate(-6deg) translate(-40px, 0)}
    50%{transform:rotate(-4deg) translate(-40px, -4px)}
  }
  @keyframes sp-app-polaroid-sway-2{
    0%,100%{transform:rotate(5deg) translate(40px, 20px)}
    50%{transform:rotate(3deg) translate(40px, 14px)}
  }
}

/* Map on top full width, cards below in a responsive grid. Bigger
   map means markers spread out and are actually readable at a glance;
   cards get horizontal room for a proper multi-column grid. */
.sp-explore{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.sp-map{height:400px;border:3px solid var(--sp-green);background:var(--sp-offivory)}
.sp-map .leaflet-container{height:100%;width:100%;background:var(--sp-offivory);font-family:'Spline Sans',sans-serif}
.sp-marker{display:block;border-radius:50%;border:2px solid var(--sp-ivory);box-sizing:border-box}
/* When the detail modal opens for a listing, its map marker gets
   .is-active which pulses a subtle dark ring outward. Clears when
   the modal closes. Non-motion visitors get a static scale-up
   without the animation. */
.sp-marker.is-active{
  animation: sp-marker-pulse 1.5s ease-in-out infinite;
  z-index: 400 !important;
}
/* Floating "Back to listings" pill. Shown after Show on map scrolls
   the visitor to the map; tap it to bounce back to their saved
   scroll position. Centered near the bottom of the viewport so it
   is thumb-reachable on mobile and unmissable on desktop. Auto-hides
   after 30s via the JS timer or on tap. */
.sp-back-pill{
  position:fixed;bottom:20px;left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 22px;
  background:var(--sp-rust);color:var(--sp-ivory);
  border:none;border-radius:999px;
  font-family:'Spline Sans',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 6px 20px rgba(20,15,10,.35);
  animation:sp-back-pill-in .25s cubic-bezier(.23,1,.32,1) both;
}
.sp-back-pill[hidden]{display:none}

/* Desktop keeps .toback where styles.css puts it (top:70px, left).
   Mobile hides it entirely below (breadcrumb inside .sp-nav-stack
   carries the same Home / Stops navigation). */
.sp-back-pill i{font-size:14px}
.sp-back-pill:hover{background:#5f2c14}
.sp-back-pill:active{transform:translateX(-50%) scale(.96)}
@keyframes sp-back-pill-in{
  from{opacity:0;transform:translateX(-50%) translateY(10px)}
  to  {opacity:1;transform:translateX(-50%) translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .sp-back-pill{animation:none}
  .sp-back-pill:active{transform:translateX(-50%)}
}
/* Sit above the bottom safe area on iOS. */
@supports (padding: env(safe-area-inset-bottom)){
  .sp-back-pill{bottom:calc(20px + env(safe-area-inset-bottom))}
}
@keyframes sp-marker-pulse{
  0%,100%{
    transform: scale(1.15);
    box-shadow: 0 0 0 0 rgba(20,15,10,.5);
  }
  50%{
    transform: scale(1.35);
    box-shadow: 0 0 0 14px rgba(20,15,10,0);
  }
}
@media (prefers-reduced-motion:reduce){
  .sp-marker.is-active{
    animation: none;
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(20,15,10,.35);
  }
}
.sp-tabs{margin:0 0 20px}
.sp-tabs-row{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:none;padding:8px 0 .5rem}
/* Category tabs styled as bordered pills with icon + label + count,
   matching the homepage .catfilter treatment so the two surfaces
   read as one design system. Active state: filled rust background
   with cream text, cream-tinted count badge. */
.sp-tab{
  flex:0 0 auto;
  display:flex;align-items:center;gap:.45rem;
  font-family:'Spline Sans',sans-serif;font-size:.84rem;font-weight:600;
  color:var(--sp-muted);background:var(--sp-ivory);
  border:2px solid #d9cfba;border-radius:4px;
  padding:.55rem 1.05rem;cursor:pointer;
  white-space:nowrap;letter-spacing:normal;text-transform:none;outline:none;
  transition:transform .22s cubic-bezier(.2,.7,.2,1),
             box-shadow .22s ease, color .22s ease,
             background .22s ease, border-color .22s ease;
}
.sp-tab-ic{font-size:1rem;line-height:1;display:inline-flex}
.sp-tab-ic .ph-light{font-size:1rem}
.sp-tab-count{
  background:#e5dcc4;color:var(--sp-ink);border-radius:4px;
  font-size:.68rem;padding:.05rem .4rem;min-width:18px;text-align:center;
  transition:background .2s ease, color .15s ease;
}
@media (hover:hover){
  .sp-tab:hover{
    color:var(--sp-ink);
    border-color:var(--sp-rust);
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(36,31,26,.14);
  }
}
.sp-tab.active{
  background:var(--sp-rust);color:var(--sp-ivory);
  border-color:var(--sp-rust);
}
.sp-tab.active .sp-tab-count{background:rgba(255,255,255,.28);color:#fff}
.sp-tab:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){
  .sp-tab{transition:none}
  .sp-tab:hover,.sp-tab:active{transform:none}
}
/* Mobile category picker. Labelled select, rust border, cream
   background, big chevron so the field clearly reads as tappable. */
.sp-tabs-mobile{display:none}
@media (max-width:767px){
  .sp-tabs-row{display:none}
  .sp-tabs-mobile{display:block;margin:6px 0 12px}
  .sp-tabs-mobile-label{
    display:block;font-family:'Spline Sans',sans-serif;
    font-size:11px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--sp-rust);
    margin:0 0 6px;
  }
  .sp-tabs-mobile-field{position:relative}
  .sp-tabs-select{
    display:block;width:100%;
    background:var(--sp-ivory);border:2px solid var(--sp-rust);border-radius:6px;
    padding:13px 44px 13px 15px;
    font-family:'Spline Sans',sans-serif;font-size:16px;font-weight:700;
    color:var(--sp-ink);line-height:1.2;
    appearance:none;-webkit-appearance:none;cursor:pointer;
    transition:background .18s ease,box-shadow .18s ease;
  }
  .sp-tabs-select:focus{outline:none;background:#fff;
    box-shadow:0 0 0 3px rgba(125,58,30,.2)}
  .sp-tabs-mobile-caret{
    position:absolute;right:15px;top:50%;transform:translateY(-50%);
    font-size:22px;color:var(--sp-rust);pointer-events:none;
    font-style:normal;
  }
}

/* Sort + filter row sits under the category tabs on stop pages.
   Three mutually exclusive sort pills plus a stackable Local Deals
   toggle that ALSO filters the map markers. */
.sp-sort-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:12px 0 0;
}
.sp-sort-label{
  font-family:'Spline Sans',sans-serif;
  font-size:10px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;
  color:var(--sp-muted);margin-right:2px;white-space:nowrap;
}
.sp-sort-pill,.sp-deals-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Spline Sans',sans-serif;font-size:12px;font-weight:600;
  color:var(--sp-muted);background:transparent;
  border:1.5px solid #d9cfba;border-radius:999px;
  padding:5px 11px;cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s,transform .15s;
}
.sp-sort-pill i,.sp-deals-pill i{font-size:14px;color:var(--sp-rust)}
.sp-sort-pill:hover,.sp-deals-pill:hover{color:var(--sp-ink);border-color:var(--sp-rust);transform:translateY(-1px)}
.sp-sort-pill.active{color:#fff;background:var(--sp-rust);border-color:var(--sp-rust)}
.sp-sort-pill.active i{color:#fff}
.sp-deals-pill.active{color:var(--sp-ink);background:var(--sp-amber);border-color:var(--sp-amber)}
.sp-deals-pill.active i{color:var(--sp-ink)}
.sp-sort-divider{width:1px;height:1em;background:#d9cfba;margin:0 4px}
/* Mobile: category tabs and the Show / filter row switch to a
   horizontal scroll (nowrap + overflow-x:auto) so all six categories
   sit on one line instead of wrapping to a second row. Placed AFTER
   the base sp-sort-bar / sp-tabs-row rules so source order wins on
   mobile widths. */
@media (max-width:560px){
  .sp-tabs-row{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:0;
    background:
      linear-gradient(to right, var(--sp-ivory,#f6ecd2), rgba(246,236,210,0) 24px) 0 0 / 24px 100% local no-repeat,
      linear-gradient(to left,  var(--sp-ivory,#f6ecd2), rgba(246,236,210,0) 24px) 100% 0 / 24px 100% local no-repeat,
      linear-gradient(to right, rgba(90,40,20,.18), rgba(90,40,20,0) 20px) 0 0 / 20px 100% no-repeat,
      linear-gradient(to left,  rgba(90,40,20,.18), rgba(90,40,20,0) 20px) 100% 0 / 20px 100% no-repeat;
  }
  .sp-tabs-row::-webkit-scrollbar{display:none}
  .sp-tab{flex:0 0 auto;white-space:nowrap}
  .sp-sort-bar{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    background:
      linear-gradient(to right, var(--sp-ivory,#f6ecd2), rgba(246,236,210,0) 24px) 0 0 / 24px 100% local no-repeat,
      linear-gradient(to left,  var(--sp-ivory,#f6ecd2), rgba(246,236,210,0) 24px) 100% 0 / 24px 100% local no-repeat,
      linear-gradient(to right, rgba(90,40,20,.18), rgba(90,40,20,0) 20px) 0 0 / 20px 100% no-repeat,
      linear-gradient(to left,  rgba(90,40,20,.18), rgba(90,40,20,0) 20px) 100% 0 / 20px 100% no-repeat;
  }
  .sp-sort-bar::-webkit-scrollbar{display:none}
  .sp-sort-label,
  .sp-sort-pill,
  .sp-deals-pill,
  .sp-sort-reset{flex:0 0 auto}
}
/* Reset icon: only rendered when at least one filter/sort is active,
   so it's not visual noise on a clean sort bar. Rotates gently on
   hover to signal the reset action. */
.sp-sort-reset{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;
  background:transparent;color:var(--sp-muted);
  border:1.5px solid #d9cfba;border-radius:999px;
  cursor:pointer;margin-left:2px;
  transition:color .15s,border-color .15s,background .15s,transform .15s;
}
.sp-sort-reset i{font-size:14px;color:var(--sp-rust)}
.sp-sort-reset:hover{color:var(--sp-ink);border-color:var(--sp-rust);transform:rotate(-45deg)}
@media (prefers-reduced-motion:reduce){
  .sp-sort-reset{transition:none}
  .sp-sort-reset:hover{transform:none}
}
/* Mobile: tighter pills and a smaller reset so the sort bar wraps
   to at most two rows on 375px phones and never a third. */
@media (max-width:560px){
  .sp-sort-bar{gap:4px;padding:8px 0 0}
  .sp-sort-label{font-size:9px;letter-spacing:.14em}
  .sp-sort-pill,.sp-deals-pill{
    font-size:11px;padding:4px 9px;gap:4px;
    border-width:1.25px;
  }
  .sp-sort-pill i,.sp-deals-pill i{font-size:12px}
  .sp-sort-reset{width:24px;height:24px;border-width:1.25px}
  .sp-sort-reset i{font-size:12px}
  .sp-sort-divider{margin:0 2px}
}
/* Responsive grid: auto-fill (not auto-fit) reserves empty tracks
   so a single result (e.g. Featured filter with one paid listing)
   stays at its natural column width instead of stretching across
   the entire row. Naturally flows 1 -> 2 -> 3 -> 4 columns as the
   viewport grows without explicit breakpoints.

   Dotted top border creates a soft visual break between the map
   above and the cards below, matching the editorial-page feel
   without adding a loud horizontal rule. */
.sp-listings{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
  padding-top:20px;
  border-top:1.5px dotted #d0c6ae;
}
/* Show more button under the listings grid. Spans full width, styled
   as a subtle rust ghost button so it reads as a page control rather
   than a listing card. */
.sp-show-more{
  grid-column:1 / -1;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;margin-top:8px;
  background:transparent;color:var(--sp-rust);
  border:1.5px solid var(--sp-rust);border-radius:4px;
  font-family:'Spline Sans',sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
  transition:background .15s,color .15s,transform .15s;
}
.sp-show-more:hover{
  background:var(--sp-rust);color:var(--sp-ivory);
  transform:translateY(-1px);
}
.sp-show-more i{font-size:16px}
@media (prefers-reduced-motion:reduce){
  .sp-show-more{transition:none}
  .sp-show-more:hover{transform:none}
}
.sp-empty{font-family:'Fraunces',Georgia,serif;font-style:italic;color:var(--sp-muted);font-size:16px;padding:20px 0}

/* listing card - whole card is a clickable link. The card is an
   <article> wrapping an inner <a class="sp-lcard-link">. The outer
   .sp-lcard keeps the frame + hover behaviour; .sp-lcard-link makes
   the body region clickable and opens the detail modal. */
.sp-lcard{background:var(--sp-ivory);border:2px solid #d9cfba;display:flex;flex-direction:column;
  position:relative;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.sp-lcard:hover{border-color:var(--sp-rust);transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(40,30,20,.08)}
.sp-lcard-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
/* Body no longer includes the top pill row (that lives as a sibling
   above the anchor), so padding-top drops to 0 and the h4 provides
   the gap via its own margin-top. */
.sp-lc-body{padding:0 16px 16px;display:flex;flex-direction:column;flex:1}

/* Top row: real flex row that used to hold the pill group (Featured
   + Category tag) on the left and an Add to trip button on the
   right. The button is retired; only the pills remain. Sits OUTSIDE
   the .sp-lcard-link anchor so future top-row additions can
   be a sibling of the pills without nesting a button inside an
   anchor. justify-content: space-between guarantees the pills and
   the button share one horizontal line regardless of card content
   below. */
.sp-lc-top{
  display:flex;justify-content:space-between;align-items:center;
  gap:8px;
  padding:14px 16px 0;
}
.sp-lc-top-pills{
  display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;
}
/* "+ Add to trip" pill CSS removed - the button it styled is retired.
   Trip planning happens on Northlander.app; the Guide is read-only. */
.sp-lc-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#fff;
  background:var(--sp-rust);padding:3px 8px}
/* FEATURED pill: flat gold with dark-green text. Small and editorial;
   the paid-placement signal is carried mainly by the gold top rule
   on the card itself (.sp-lcard.is-featured), not by pill decoration. */
.sp-lc-featured{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:#0a2d21;
  background:var(--sp-gold,#d9a648);
  padding:3px 8px;
  border-radius:2px;
}
.sp-lc-featured i{font-size:12px;color:#0a2d21}
/* Featured card: thin gold top rule. Subtle enough not to feel
   like a sponsored ad wrapper, distinct enough to spot the paid
   listing from the grid. */
.sp-lcard.is-featured{
  border-top:3px solid var(--sp-gold,#d9a648);
}
/* Discount strip sits between the top pill row and the card link,
   full-width naturally since it is a direct child of .sp-lcard (no
   parent padding to escape). Rust background + cream text + gold
   tag icon, matching the .card-discount-banner treatment on the
   homepage cards so the two surfaces read as one design system. */
.sp-lc-discount{
  margin:10px 0 0;
  padding:.6rem 1rem;
  background:#6e2e17;color:#f3ece0;
  display:flex;align-items:center;gap:.5rem;
  font-family:'Spline Sans',sans-serif;
  font-size:.82rem;font-weight:700;line-height:1.35;
  border-top:1px solid rgba(0,0,0,.22);
  border-bottom:1px solid rgba(0,0,0,.14);
}
.sp-lc-discount i{color:#d9a648;font-size:1rem;flex:0 0 auto}
/* Rating pill on the right of the .sp-lc-top row. Amber star + rating
   number so travellers can scan ratings across the grid at a glance. */
.sp-lc-rating{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:3px;
  color:var(--sp-amber);font-weight:700;font-size:14px;white-space:nowrap;
  padding:3px 8px;
  background:rgba(196,134,15,.1);
  border-radius:4px;
  letter-spacing:.01em;
}
.sp-lc-rating i{font-size:.85em;color:var(--sp-amber)}
/* Unrated (rating null or "NR"): show a muted "New" tag instead of
   an empty star. Signals "no one has rated yet" without leaving
   the top row lopsided. */
.sp-lc-rating-new{
  color:var(--sp-muted);
  background:rgba(90,79,61,.08);
  font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;
}
.sp-lcard h4{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;margin:12px 0 8px;color:var(--sp-ink)}
/* Labeled info block on the card. Address + Walk only; description,
   phone, website, and hours all live in the detail modal (rating
   lives on the top row of the card, not here). Uses the shared
   .card-info structure from styles.css
   for the ci-row / ci-label / ci-value layout, so the stop-page
   card and the homepage card read as one design system. */
.sp-lc-info{margin:0 0 12px}
/* Actions row: View details on the left, Show on map on the right.
   Lives outside the .sp-lcard-link anchor so the <button> is valid
   HTML. Flex space-between guarantees the two actions sit at
   opposite ends on a single line across every viewport. */
.sp-lc-actions{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;
  padding:8px 16px 14px;
  cursor:default;
}
.sp-lc-details{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Spline Sans',sans-serif;font-size:12px;font-weight:700;
  color:var(--sp-rust);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
}
.sp-lc-details:hover{color:var(--sp-ink);text-decoration:underline}
.sp-lc-map{
  display:inline-flex;align-items:center;gap:4px;
  padding:0;border:none;background:transparent;
  font-family:'Spline Sans',sans-serif;font-size:12px;font-weight:700;
  color:var(--sp-rust);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;
  transition:color .15s;
}
.sp-lc-map i{font-size:14px}
.sp-lc-map:hover{color:var(--sp-ink);text-decoration:underline}
.sp-lc-details i{font-size:14px;transition:transform .18s ease}
.sp-lcard:hover .sp-lc-details i{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){
  .sp-lc-details i{transition:none}
  .sp-lcard:hover .sp-lc-details i{transform:none}
}

/* ---------- table of contents -----------
   Sticky horizontal nav that appears between the breadcrumb and the
   first content section. On desktop the chips fit on one row;
   on phones the row scrolls horizontally with momentum. */
/* Sticky nav stack that wraps the breadcrumb + TOC so both rows
   pin to the top together as the visitor scrolls. Backdrop blur +
   subtle background keeps content behind readable while the pill
   nav floats over it. z-index has to sit above Leaflet's stacking
   (its control pane is at 800) so the map + markers slide UNDER
   the sticky nav on scroll instead of drawing over it. */
.sp-nav-stack{
  position:sticky;top:58px;z-index:850;
  background:rgba(247,239,222,.96);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  border-top:1px solid #d9cfba;border-bottom:1px solid #d9cfba;
  margin:14px 0 28px;
  padding:6px 0 8px;
}
.sp-nav-stack .sp-breadcrumb{margin:0 0 4px;padding:0 16px}
/* .sp-toc no longer sticky (wrapper handles it); keep its inner
   padding for the scrollable pill row. */
.sp-toc{padding:0}
/* Mobile "Jump to section" picker. Nine TOC items is well past the
   comfortable chip-scroll threshold, so mobile swaps the row for a
   labelled select. IntersectionObserver keeps the selected value in
   sync with the section currently in view. */
.sp-toc-mobile{display:none}
@media (max-width:767px){
  .sp-toc-row{display:none}
  .sp-toc-mobile{display:block;padding:2px 16px 4px}
  .sp-toc-mobile-label{
    display:block;font-family:'Spline Sans',sans-serif;
    font-size:10.5px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--sp-rust);
    margin:0 0 5px;
  }
  .sp-toc-mobile-field{position:relative}
  .sp-toc-select{
    display:block;width:100%;
    background:var(--sp-ivory);border:2px solid var(--sp-rust);border-radius:6px;
    padding:11px 40px 11px 14px;
    font-family:'Spline Sans',sans-serif;font-size:15px;font-weight:700;
    color:var(--sp-ink);line-height:1.2;
    appearance:none;-webkit-appearance:none;cursor:pointer;
    transition:background .18s ease,box-shadow .18s ease;
  }
  .sp-toc-select:focus{outline:none;background:#fff;
    box-shadow:0 0 0 3px rgba(125,58,30,.2)}
  .sp-toc-mobile-caret{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    font-size:20px;color:var(--sp-rust);pointer-events:none;
    font-style:normal;
  }
}
.sp-toc-row{display:flex;gap:8px;overflow-x:auto;padding:0 16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  /* Scroll shadow so mobile users see there is more content off the
     visible right/left edge. Same background-attachment: local/scroll
     trick used on the homepage catfilter and sort-bar. */
  background:
    linear-gradient(to right, var(--sp-ivory,#f6ecd2), rgba(246,236,210,0) 24px) 0 0 / 24px 100% local no-repeat,
    linear-gradient(to left,  var(--sp-ivory,#f6ecd2), rgba(246,236,210,0) 24px) 100% 0 / 24px 100% local no-repeat,
    linear-gradient(to right, rgba(90,40,20,.18), rgba(90,40,20,0) 20px) 0 0 / 20px 100% no-repeat,
    linear-gradient(to left,  rgba(90,40,20,.18), rgba(90,40,20,0) 20px) 100% 0 / 20px 100% no-repeat;
}
.sp-toc-row::-webkit-scrollbar{display:none}
.sp-toc-link{display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  color:var(--sp-muted);background:transparent;
  text-decoration:none;white-space:nowrap;flex:none;line-height:1;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.sp-toc-link .ph-light{font-size:16px;color:var(--sp-rust)}
.sp-toc-link:hover{background:rgba(141,61,34,.08);color:var(--sp-ink)}
.sp-toc-link.is-active{background:var(--sp-rust);color:var(--sp-ivory);
  box-shadow:0 2px 8px rgba(141,61,34,.28)}
.sp-toc-link.is-active .ph-light{color:var(--sp-ivory)}
@media (max-width:560px){
  .sp-nav-stack{top:54px;margin:8px 0 18px}
  .sp-nav-stack .sp-breadcrumb{font-size:11.5px}
  .sp-toc-link{padding:7px 12px;font-size:12.5px}
}
/* Hide the floating .toback ("Back to all stops") on mobile: the
   sticky breadcrumb inside .sp-nav-stack already carries Home / Stops
   navigation, so the extra green circle is redundant clutter. */
@media (max-width:767px){
  .toback{display:none}
}

/* ---------- event filter, editorial pass ----------
   Mirrors the homepage .hev-filters lightening (2026-06-12). No card
   chrome, no big "Find events" title row, no heavy chip borders.
   Bracketed above and below with a thin dashed rust rule so it reads
   as a navigation rest stop rather than a form. Section labels are
   inline italic Fraunces ("when", "what", "price", "walk time") so
   the vocabulary matches the editorial tone of the rest of the page.
   No Where filter here - the page is already scoped to one stop. */
.sp-evfilters{background:transparent;border:0;border-top:1px dashed rgba(125,58,30,.35);
  border-bottom:1px dashed rgba(125,58,30,.35);border-radius:0;
  padding:14px 0;margin:0 0 22px;box-shadow:none}
.sp-evfilters-head{display:flex;justify-content:flex-end;align-items:center;
  margin:0;padding:0;border-bottom:0;min-height:0}
.sp-evfilters-title{display:none}
.sp-evreset{background:transparent;border:0;color:var(--sp-rust);font-size:12.5px;font-weight:600;
  cursor:pointer;padding:3px 7px;display:inline-flex;align-items:center;gap:4px;
  border-radius:4px;font-family:'Fraunces',Georgia,serif;font-style:italic;
  transition:background .15s ease}
.sp-evreset .ph-light{font-size:14px;font-style:normal}
.sp-evreset:hover{background:rgba(125,58,30,.08)}
.sp-evreset.is-inactive{opacity:.4;cursor:default}
.sp-evreset.is-inactive:hover{background:transparent}
.sp-evfilter-section{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;
  gap:8px;margin:0}
.sp-evfilter-section-label{display:inline-flex;align-items:center;gap:5px;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:14px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--sp-rust);
  white-space:nowrap;margin-right:3px}
.sp-evfilter-section-label .ph-light{font-size:15px;color:var(--sp-rust);font-style:normal}
.sp-evfilter-grid{display:flex;justify-content:flex-start;align-items:flex-start;
  flex-wrap:wrap;gap:8px 24px;margin-top:5px}
.sp-evfilter-section{flex:0 1 auto;min-width:0}
/* Desktop: When (with the date range pair) gets its own row, four
   dropdowns split row 2 evenly. Subtle dashed rule below When so
   the visitor reads it as the primary filter. */
@media (min-width:721px){
  .sp-evfilter-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));
    column-gap:20px;row-gap:14px;justify-content:start;align-items:center;
    margin-top:5px}
  .sp-evfilter-section:nth-of-type(1){grid-column:1 / -1;grid-row:1;
    padding-bottom:12px;border-bottom:1px dashed rgba(125,58,30,.28)}
  .sp-evfilter-section:nth-of-type(n+2){grid-row:2}
  .sp-evfilter-section:nth-of-type(n+2) .sp-evselect{width:100%;max-width:none;min-width:0}
}
/* Dropdowns inherit the chip vocabulary: pill shape, rust border,
   italic Fraunces displayed value with a rust chevron. Native open
   menu still uses OS chrome (necessary for accessibility), but the
   closed state stops looking like a browser form widget. */
.sp-evselect{background:transparent;border:1px solid var(--sp-rust);border-radius:999px;
  padding:5px 28px 5px 13px;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:13.5px;
  color:var(--sp-ink);line-height:1.2;
  width:auto;min-width:170px;max-width:260px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237d3a1e'><path d='M4 6 L8 10 L12 6 Z'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:11px;
  transition:background-color .15s ease,color .15s ease}
.sp-evselect:hover{background-color:rgba(125,58,30,.08);color:var(--sp-rust)}
.sp-evselect:focus{outline:none;background-color:var(--sp-ivory)}
.sp-evselect option{font-family:'Spline Sans',sans-serif;font-style:normal;color:var(--sp-ink)}

/* Date range: two native <input type="date"> pickers with a small
   italic 'to' between them. Rust hairline border matches .sp-evselect
   so the whole row reads as one editorial vocabulary. Native
   calendar popup still uses OS chrome for accessibility. */
.sp-evdates{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-evdate-sep{font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:13.5px;color:var(--sp-rust);padding:0 2px}
.sp-evdate-input{
  background:transparent;border:1px solid var(--sp-rust);border-radius:999px;
  padding:5px 12px;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:13.5px;
  color:var(--sp-ink);line-height:1.2;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
  min-width:150px;
}
.sp-evdate-input:hover{background-color:rgba(125,58,30,.08)}
.sp-evdate-input:focus{outline:none;background-color:var(--sp-ivory)}
.sp-evdate-input::-webkit-calendar-picker-indicator{
  cursor:pointer;filter:sepia(1) hue-rotate(-25deg) saturate(2);opacity:.7}
.sp-evdate-input::-webkit-calendar-picker-indicator:hover{opacity:1}

/* Mobile: 2-column grid mirroring the events page. When spans the
   top row with a dashed rule below; the four category dropdowns
   split into a 2x2 grid. Section labels stack above their inputs
   so nothing squeezes horizontally. */
@media (max-width:720px){
  .sp-evfilter-grid{display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:10px;row-gap:13px;
    justify-content:stretch;align-items:start;margin-top:6px}
  .sp-evfilter-section{display:flex;flex-direction:column;align-items:stretch;
    gap:4px;width:auto;min-width:0}
  .sp-evfilter-section-label{margin-right:0}
  .sp-evfilter-section:nth-of-type(1){grid-column:1 / -1;grid-row:1;
    padding-bottom:10px;border-bottom:1px dashed rgba(125,58,30,.28)}
  .sp-evselect{width:100%;max-width:none;min-width:0}
  .sp-evdates{width:100%;flex-wrap:nowrap}
  .sp-evdate-input{flex:1 1 0;min-width:0;width:auto}
}
@media (max-width:480px){
  .sp-evfilters{padding:11px 0}
}

/* ---------- events ---------- */
.sp-events{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.sp-event{background:var(--sp-ivory);border:1px solid #d9cfba;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;overflow:hidden;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
a.sp-event:hover{border-color:var(--sp-rust);transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,.06)}
.sp-event-img{width:100%;aspect-ratio:16/9;background:#e8e0cd center/cover no-repeat}
.sp-event-body{padding:16px;display:flex;flex-direction:column;flex:1;gap:6px}
.sp-event-when{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--sp-rust)}
.sp-event-cat{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:12.5px;
  color:var(--sp-muted);margin-top:2px;line-height:1.2}
.sp-event-name{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;margin:2px 0 0;color:var(--sp-ink);line-height:1.25}
.sp-event-venue{font-size:13px;color:var(--sp-muted)}
.sp-event-desc{font-size:13.5px;line-height:1.45;color:var(--sp-ink);opacity:.82;margin:4px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-event-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.sp-event-walk{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--sp-rust);letter-spacing:.02em}
.sp-event-walk .ph-light{font-size:15px}
.sp-event-family{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  color:#3f6e44;letter-spacing:.02em;
  background:rgba(63,110,68,.1);padding:2px 9px;border-radius:999px;line-height:1.5}
.sp-event-family .ph-light{font-size:14px}
.sp-event-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px}
.sp-event-price{font-size:12px;font-weight:700;color:var(--sp-ink);letter-spacing:.02em}
/* Foot actions group: Map pin + More info sit together on the right. */
.sp-event-foot-actions{display:inline-flex;align-items:center;gap:11px}
/* nowrap on the action labels so long prices never push Map or
   More info onto two lines. */
.sp-event-cta{font-size:12px;font-weight:700;color:var(--sp-rust);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.sp-event-cta .ph-light{font-size:14px}
/* Map pin button: peer to "More info" but on its own click target so
   it can open Google Maps without firing the outer card link. */
.sp-event-mapbtn{font-size:12px;font-weight:700;color:var(--sp-rust);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
  background:transparent;border:0;padding:0;cursor:pointer;
  font-family:'Spline Sans',sans-serif;letter-spacing:.02em;
  transition:color .15s ease}
.sp-event-mapbtn .ph-light{font-size:14px}
.sp-event-mapbtn:hover{color:var(--sp-ink)}

.sp-events-empty{background:var(--sp-offivory);border:1px solid #d9cfba;padding:46px 28px;text-align:left}
.sp-events-empty .ph-light,.sp-events-empty .ph{font-size:46px;color:var(--sp-rust);display:block;margin-bottom:14px}
.sp-events-empty p{font-family:'Fraunces',Georgia,serif;font-size:18px;color:var(--sp-ink);margin:0 0 14px;max-width:560px}
.sp-events-empty a{color:var(--sp-rust);font-weight:600}

/* Stop-page event pagination. Visual language matches the homepage
   .hev-pagination but uses the stop-page rust accent so it sits in
   the stop palette. */
.sp-evpagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:6px;margin:24px 0 8px}
.sp-evpagebtn{background:transparent;border:1.5px solid #d9cfba;border-radius:4px;
  min-width:34px;height:34px;padding:0 10px;font-size:13px;font-weight:700;font-family:inherit;
  color:var(--sp-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.sp-evpagebtn:hover:not([disabled]){border-color:var(--sp-rust);color:var(--sp-rust)}
.sp-evpagebtn.is-active{background:var(--sp-rust);border-color:var(--sp-rust);color:var(--sp-ivory)}
.sp-evpagebtn[disabled]{opacity:.4;cursor:not-allowed}
.sp-evpagenav{padding:0 12px}
.sp-evpageellipsis{padding:0 4px;color:var(--sp-muted);font-weight:700}

.sp-events-submit{margin-top:22px;text-align:center}
.sp-events-submit .sp-btn{display:inline-flex;align-items:center;gap:6px}

/* ---------- FAQ accordion ---------- */
.sp-faq{border-left:4px solid var(--sp-rust);padding:0 0 0 22px;margin:0 0 14px}
.sp-faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;padding:18px 0;
  font-family:'Spline Sans',sans-serif;font-size:16px;font-weight:500;color:var(--sp-ink)}
.sp-faq-q .ph-light,.sp-faq-q .ph{color:var(--sp-rust);font-size:22px;flex:none}
.sp-faq-a{font-family:'Fraunces',Georgia,serif;font-size:16px;line-height:1.7;color:var(--sp-muted);
  max-height:0;overflow:hidden;transition:max-height .3s ease;padding-right:24px}
.sp-faq.open .sp-faq-a{max-height:600px;padding-bottom:18px}

/* ---------- nearby stops (railway platform signs) ---------- */
.sp-nearby{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sp-platform{background:var(--sp-green);color:var(--sp-ivory);padding:26px;display:flex;align-items:center;gap:20px;text-decoration:none}
.sp-platform-num{flex:none;width:60px;height:60px;border-radius:50%;border:2px solid var(--sp-amber);
  display:flex;align-items:center;justify-content:center;color:var(--sp-amber);
  font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:26px}
.sp-platform-name{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:26px;color:var(--sp-ivory);line-height:1.05;margin:0}
.sp-platform-region{text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:#b9c9bf;margin:6px 0 12px}
.sp-platform-btn{display:inline-block;border:2px solid var(--sp-ivory);color:var(--sp-ivory);
  font-size:12px;font-weight:600;letter-spacing:.05em;padding:6px 12px;text-transform:uppercase}
.sp-platform:hover .sp-platform-btn{background:var(--sp-ivory);color:var(--sp-green)}

/* ---------- don't forget ----------
   Section header lays out the title and the Print Checklist button on
   a single row. The snowflake mark sits inline next to the item name on
   winter rows. The blank-additions list gives the visitor space to
   write in their own items after printing. */
.sp-df-print-head{display:none}
.sp-df-printrow{margin-top:28px;display:flex;justify-content:flex-start}
.sp-df-season{font-size:18px;vertical-align:-2px;margin-left:4px}
.sp-df-spring{color:#b6557a}
.sp-df-summer{color:#c4860f}
.sp-df-fall{color:#7d3a1e}
.sp-df-winter{color:#6b8e9a}
.sp-df-blanks{margin:28px 0 0;padding:24px 0 0;border-top:1px dashed #c9bda3}
.sp-df-blanks .sp-label{margin-bottom:14px}
.sp-df-blanks ol{list-style:none;padding:0;margin:0;counter-reset:blank}
.sp-df-blanks li{
  counter-increment:blank;
  position:relative;
  padding:6px 0 8px 28px;
  border-bottom:1px solid #c9bda3;
  min-height:30px;
  font-family:'Fraunces',Georgia,serif;font-size:15px;color:var(--sp-muted);
}
.sp-df-blanks li::before{
  content:counter(blank) ".";
  position:absolute;left:0;top:8px;
  font-weight:600;color:var(--sp-rust);
  font-family:'Spline Sans',sans-serif;font-size:13px;
}
.sp-df-blank-input{
  width:100%;
  background:transparent;border:0;outline:none;
  font-family:'Fraunces',Georgia,serif;font-size:15px;
  color:var(--sp-ink);padding:2px 0;
}
.sp-df-blank-input::placeholder{color:#c2b5a0;font-style:italic}
.sp-df-blank-input:focus{color:var(--sp-ink)}

/* ---------- print stylesheet: produce a clean packing checklist ---------- */
@media print {
  /* Strip everything except the Before You Board section. */
  body * { visibility: hidden !important; }
  .sp-df-section, .sp-df-section * { visibility: visible !important; }
  .sp-df-section { position: absolute; left: 0; top: 0; width: 100%; padding: 28px 28px 40px; }
  .sp-df-printrow, .sp-df-print, .sp-df-section .sp-h2 { display: none !important; }
  .sp-df-print-head {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px; font-weight: 700;
    color: #0a2d21;
    border-bottom: 2px solid #0a2d21;
    padding-bottom: 8px; margin-bottom: 16px;
  }
  .sp-df-list { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 !important; }
  .sp-df-item {
    display: grid; grid-template-columns: 22px 1fr; column-gap: 10px;
    page-break-inside: avoid; padding: 4px 0; border: 0;
  }
  /* Replace the icon with a paper checkbox so the printout works
     as a real checklist. */
  .sp-df-item > i, .sp-df-item > span:first-child { display: none !important; }
  .sp-df-item::before {
    content: "";
    grid-row: 1; grid-column: 1;
    width: 14px; height: 14px; border: 1px solid #0a2d21; border-radius: 2px;
    margin-top: 4px;
  }
  .sp-df-item > div { grid-row: 1; grid-column: 2; }
  .sp-df-name { font-family: 'Spline Sans', sans-serif; font-weight: 600; color: #0a2d21; font-size: 13px; }
  .sp-df-why { color: #5a4f3d; font-size: 11px; font-style: italic; margin-top: 1px; }
  .sp-df-badge { display: none; }
  .sp-df-season { color: #0a2d21; font-size: 13px; }
  .sp-df-blanks { margin-top: 18px; padding-top: 12px; border-top: 1px dashed #0a2d21; }
  .sp-df-blanks .sp-label { color: #0a2d21; }
  .sp-df-blanks li { color: #0a2d21; border-color: #0a2d21; }
  .sp-df-blanks li::before { color: #0a2d21; }
  /* Inputs print their value as plain text; strip the field chrome. */
  .sp-df-blank-input {
    border: 0 !important; background: transparent !important;
    color: #0a2d21 !important; padding: 2px 0 !important;
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 13px !important;
  }
  .sp-df-blank-input::placeholder { color: transparent !important; }
  @page { margin: 16mm; }
}

.sp-collapse-head{display:flex;align-items:center;gap:12px;cursor:pointer;background:none;border:0;padding:0}
.sp-df-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 36px;margin:24px 0 0}
.sp-df-item{display:flex;gap:14px;align-items:flex-start}
.sp-df-item .ph-light,.sp-df-item .ph{font-size:26px;color:var(--sp-rust);flex:none;margin-top:2px}
.sp-df-item .sp-df-emoji{font-size:24px;line-height:1;flex:none;width:28px;text-align:center;margin-top:2px}
.sp-df-name{font-weight:600;font-size:15px;color:var(--sp-ink)}
.sp-df-why{font-size:13px;color:var(--sp-muted);margin-top:3px;line-height:1.5}
.sp-df-badge{display:inline-block;background:var(--sp-rust);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;margin-left:8px;vertical-align:middle}

/* ---------- community tips corkboard ---------- */
.sp-corkboard{margin:0 -24px;padding:44px 24px}
.sp-corkboard-inner{max-width:1132px;margin:0 auto}
.sp-tips{display:flex;flex-wrap:wrap;gap:26px;margin:0 0 36px}
.sp-tip{position:relative;background:var(--sp-cream);width:280px;padding:26px 22px 22px;
  box-shadow:0 6px 14px rgba(40,30,20,.12)}
.sp-tip::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--sp-amber);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sp-tip-text{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:16px;line-height:1.6;color:var(--sp-ink);margin:0}
.sp-tip-by{font-size:12px;letter-spacing:.06em;color:var(--sp-muted);margin:12px 0 0;text-transform:uppercase}
.sp-tip-img{display:block;width:100%;height:160px;object-fit:cover;margin:0 0 12px;border:1px solid #cdbfa3}
.sp-tipform{max-width:560px}
.sp-tipform textarea,.sp-tipform input{width:100%;background:var(--sp-ivory);border:2px solid #cdbfa3;
  font-family:'Spline Sans',sans-serif;font-size:15px;padding:11px 13px;color:var(--sp-ink);box-sizing:border-box}
.sp-tipform textarea{min-height:96px;resize:vertical;margin-bottom:6px}
.sp-tip-counter{font-size:12px;color:var(--sp-muted);text-align:right;margin:0 0 12px}
.sp-tipform input{margin-bottom:14px}
.sp-tip-msg{font-size:13px;margin:10px 0 0;color:var(--sp-rust);min-height:1em}

/* ----- Photo picker + verification checkboxes on the tip form ----- */
.sp-tip-imgrow{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.sp-tip-imgrow input[type="file"]{display:none}
.sp-tip-imgbtn{
  display:inline-flex;align-items:center;gap:6px;
  border:2px solid var(--sp-rust);background:var(--sp-ivory);color:var(--sp-rust);
  font-family:'Spline Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.03em;
  padding:7px 12px;cursor:pointer;border-radius:0;
  transition:background .15s,color .15s;
}
.sp-tip-imgbtn:hover{background:var(--sp-rust);color:var(--sp-ivory)}
.sp-tip-imgbtn i{font-size:16px}
.sp-tip-imgclear{
  background:none;border:0;cursor:pointer;color:var(--sp-muted);
  font-family:'Spline Sans',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:underline;
}
.sp-tip-imgclear:hover{color:var(--sp-rust)}
.sp-tip-imgpreview{display:block;max-width:240px;max-height:180px;object-fit:cover;border:1px solid #cdbfa3;margin:0 0 14px}
/* Honeypot: visible to bots, hidden from real users (off-screen and
   inert). Bots that auto-fill all fields will set it; we silently
   discard the submission server-side. */
.sp-tip-honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.sp-tip-check{
  display:flex;align-items:flex-start;gap:8px;margin:8px 0;
  font-family:'Spline Sans',sans-serif;font-size:13px;color:var(--sp-ink);line-height:1.4;
  cursor:pointer;
}
.sp-tip-check input[type="checkbox"]{
  margin:2px 0 0;flex:none;width:16px;height:16px;
  accent-color:var(--sp-rust);cursor:pointer;
}
.sp-tipform .sp-btn[disabled]{opacity:.45;cursor:not-allowed}
.sp-tipform .sp-btn[disabled]:hover{background:var(--sp-ivory);color:var(--sp-rust)}

/* ---------- buttons (rectangular, rusty border) ---------- */
.sp-btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--sp-rust);
  background:var(--sp-ivory);color:var(--sp-rust);font-family:'Spline Sans',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.04em;padding:9px 16px;cursor:pointer;
  text-decoration:none;border-radius:0;transition:background .15s,color .15s}
.sp-btn:hover{background:var(--sp-rust);color:var(--sp-ivory)}
.sp-share{display:flex;gap:12px;flex-wrap:wrap}

/* (.sp-section is a structural hook; individual sections like .sp-intro
   set their own margin-top so the page rhythm stays explicit.) */

/* Cross-page hash navigation (eg. clicking "See all 28 events at
   Toronto Union" on the homepage stop panel, which sends the browser
   to /stops/toronto-union#sp-events) uses the browser's default
   scroll-to-anchor behaviour. That doesn't know about the sticky
   topbar (~58px) plus the sticky TOC bar (~52px) overlapping the
   top of the viewport, so the section's title scrolls underneath
   them and the visitor lands on the chip row a hundred pixels in.
   scroll-margin-top tells the browser to offset its hash scroll
   target so the section h2 stays visible just below the sticky
   chrome. The TOC's own JS click handler already offsets manually,
   so this doesn't double up on in-page TOC navigation. */
.sp-section[id]{scroll-margin-top:120px}
/* The Plan Trip scrapbook has an id (#sp-plan) so the TOC can jump
   to it, but it is not a .sp-section. Same scroll-clearance so
   hash navigation lands cleanly below the sticky nav. */
#sp-plan{scroll-margin-top:120px}
@media (max-width:720px){
  .sp-section[id]{scroll-margin-top:104px}
  #sp-plan{scroll-margin-top:104px}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .sp-intro{grid-template-columns:1fr;gap:28px}
  .sp-intro-aside{border-left:0;border-top:2px solid var(--sp-rust);padding-left:0;padding-top:22px}
  .sp-two{grid-template-columns:1fr}
  .sp-seasons{grid-template-columns:1fr;grid-auto-rows:auto}
  .sp-season-summer,.sp-season-spring,.sp-season-fall,.sp-season-winter{grid-column:1;grid-row:auto}
  /* minmax(0, 1fr) forces each grid track to a minimum of 0 so wide
     children (the horizontally scrolling .sp-tabs-row and .sp-sort-bar)
     do not blow the column out to their content width, which used to
     make the whole listings section overflow the viewport. */
  .sp-explore{grid-template-columns:minmax(0,1fr)}
  .sp-explore > *{min-width:0}
  /* Map sits ABOVE the listings on mobile so the visitor lands with
     the map in view and immediately understands the page is about
     where things are on the ground. */
  .sp-map{height:340px}
  .sp-listings{grid-template-columns:1fr;min-width:0}
  .sp-tabs{min-width:0}
  .sp-nearby{grid-template-columns:1fr}
  .sp-df-list{grid-template-columns:1fr}
  .sp-hero-frame{height:48vh;min-height:300px}
}

/* ---------- Verified badge + Claim link (stop page cards) ---------- */
/* Verified pill: solid sage green with cream text so it reads at a
   glance instead of hiding behind a 12% opacity wash. Slightly
   larger and rounded but not so loud it distracts from the business
   name it sits beside. */
.sp-lc-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(63, 110, 68, 0.94);
  color: #f3ece0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: middle;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(20, 15, 10, .15);
}
.sp-lc-verified i { font-size: 0.9rem; color: #f3ece0; }
.sp-lc-claim {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #6b4528;
  text-decoration: none;
  padding: 4px 10px;
  border: 1px dashed #d6c9b2;
  border-radius: 4px;
}
.sp-lc-claim:hover { background: #f6ecd2; }

/* ---------- Northlander station marker ----------
   Rust circle + cream train silhouette so the actual train stop
   reads distinctly against the field of listing markers. Sized
   larger than listing dots (36px vs 16px) and rendered above them
   via zIndexOffset in the Leaflet marker options. */
.sp-station-marker{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:var(--sp-rust,#8e3d22);
  border:2px solid #f3ece0;
  border-radius:50%;
  box-shadow:0 3px 10px rgba(20,15,10,.35);
}
.sp-station-marker svg{width:22px;height:22px;display:block}

/* ---------- listing detail modal ----------
   Native <dialog> element that opens when the visitor taps a card
   on the /stops/<slug> page. Mirrors the homepage detail view
   layout (hero photo + pill badges + discount banner + labeled info
   block) so both surfaces read as one design system. Uses shared
   .card-photo-badges, .card-discount-banner, .card-info classes
   from styles.css. */
.sp-detail-modal{
  padding:0;border:none;background:transparent;
  max-width:640px;width:min(96vw, 640px);
  max-height:min(92vh, 92dvh);
  border-radius:6px;overflow:visible;
}
.sp-detail-modal::backdrop{
  background:rgba(20,15,10,.55);
  backdrop-filter:blur(2px);
}
.sp-detail-modal-inner{
  position:relative;
  background:var(--sp-card,#fffaf1);
  border-radius:6px;
  max-height:min(92vh, 92dvh);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 20px 50px rgba(20,15,10,.35);
}
.sp-detail-modal-close{
  position:absolute;top:10px;right:10px;z-index:5;
  width:38px;height:38px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(245,240,232,.94);
  color:var(--sp-rust);
  border:1.5px solid var(--sp-rust);
  border-radius:999px;cursor:pointer;
  box-shadow:0 2px 8px rgba(36,31,26,.2);
  transition:background .15s,color .15s,transform .15s;
}
.sp-detail-modal-close i{font-size:20px;line-height:1}
.sp-detail-modal-close:hover{
  background:var(--sp-rust);color:var(--sp-ivory);
  transform:rotate(90deg);
}
@media (prefers-reduced-motion:reduce){
  .sp-detail-modal-close{transition:none}
  .sp-detail-modal-close:hover{transform:none}
}
/* Hero: full-bleed photo with pill badges top-left and a map pin
   top-right, matching the homepage detail view. */
.sp-detail-hero-img{
  position:relative;
  width:100%;aspect-ratio:16/9;
  background:#e8e4dc;
  overflow:hidden;
  border-radius:6px 6px 0 0;
}
.sp-detail-hero-img img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.sp-detail-hero-img.sp-no-img{
  background:linear-gradient(135deg, #e0d6bd 0%, #cfc2a4 100%);
}
/* Map pin sits bottom-right of the hero (not top-right) so it does
   not compete with the modal's close button in the top-right
   corner. Still readable against the hero and one tap opens
   Google Maps directions to the listing coords. */
.sp-detail-map-icon{
  position:absolute;bottom:14px;right:14px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  background:rgba(245,240,232,.94);
  color:var(--sp-rust);
  border:1.5px solid var(--sp-rust);
  border-radius:999px;text-decoration:none;line-height:0;
  box-shadow:0 2px 8px rgba(36,31,26,.2);
  transition:background .15s,color .15s,transform .15s;
}
.sp-detail-map-icon i{font-size:20px;color:var(--sp-rust)}
.sp-detail-map-icon:hover{
  background:var(--sp-rust);color:var(--sp-ivory);
  transform:translateY(-1px);
}
.sp-detail-map-icon:hover i{color:var(--sp-ivory)}
/* Discount banner sits flush against the hero, matching detail view. */
.sp-detail-modal .card-discount-banner{
  margin:0;font-size:.98rem;padding:.9rem 1.25rem;
}
/* Body: content padding, category tag left / rating right in top row,
   then h3, description, labeled info block. */
.sp-detail-modal-body{padding:1.4rem 1.5rem 1.75rem}
.sp-detail-toprow{
  display:flex;justify-content:space-between;align-items:center;
  gap:.6rem;margin-bottom:1rem;
}
.sp-detail-tag{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:#fff;
  background:var(--sp-rust);padding:3px 10px;border-radius:2px;
}
.sp-detail-rating{
  color:var(--sp-amber);font-weight:700;font-size:.9rem;
  display:inline-flex;align-items:center;gap:4px;
}
.sp-detail-rating i{font-size:1rem}
.sp-detail-modal h3{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.7rem;line-height:1.15;font-weight:700;
  color:var(--sp-ink);margin:0 0 .5rem;
}
.sp-detail-desc{
  color:#3d3529;font-size:1rem;line-height:1.65;
  margin:.85rem 0 1.25rem;white-space:pre-wrap;
}
/* Labeled info block reuses the .card-info.detail-info treatment
   defined in styles.css: soft gold background, wide label column. */
.sp-detail-modal .sp-detail-info{margin:.9rem 0 1.1rem}
/* Claim link at the bottom of the modal, subtle dashed pill. */
.sp-detail-claim{
  display:inline-block;margin-top:1rem;
  padding:.5rem .95rem;
  font-family:'Spline Sans',sans-serif;font-size:.82rem;font-weight:600;
  color:#6b4528;text-decoration:none;
  border:1px dashed #d6c9b2;border-radius:4px;
  transition:background .15s;
}
.sp-detail-claim:hover{background:#f6ecd2}
/* Mobile: tighter padding + smaller h3 so the modal fits comfortably
   on iPhone SE without scrolling for the first two paragraphs. */
@media (max-width:767px){
  .sp-detail-modal{width:min(96vw, 480px);border-radius:4px}
  .sp-detail-modal-inner{border-radius:4px}
  .sp-detail-modal-body{padding:1.1rem 1.15rem 1.4rem}
  .sp-detail-modal h3{font-size:1.35rem}
  .sp-detail-desc{font-size:.94rem;line-height:1.6}
  .sp-detail-hero-img{border-radius:4px 4px 0 0}
  .sp-detail-map-icon{width:36px;height:36px;bottom:10px;right:10px;top:auto}
  .sp-detail-map-icon i{font-size:18px}
  .sp-detail-modal-close{width:34px;height:34px;top:8px;right:8px}
  .sp-detail-modal-close i{font-size:18px}
  .sp-detail-modal .card-discount-banner{
    font-size:.88rem;padding:.75rem 1rem;
  }
}

/* ==================================================================
   STOP-PAGE APP CLOSER
   Quiet single-line closing beat pointing at Northlander.app. Sits
   as the final content beat before the site footer, after Share
   this stop. Deliberately understated - italic Fraunces line with a
   small four-point star ornament above, no cards, no CTA buttons.
   Reads as an editorial sign-off, not a hard sell.
   ================================================================== */
.sp-app-closer{
  margin:56px 0 24px;padding:0 8px;
  text-align:center;
  color:var(--sp-muted);
}
.sp-app-closer-mark{
  display:block;
  font-size:20px;color:var(--sp-rust);
  margin:0 0 12px;line-height:1;
  opacity:.75;
}
.sp-app-closer-line{
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;
  font-size:1.05rem;line-height:1.6;
  color:var(--sp-ink);
  margin:0 auto;
  max-width:56ch;
}
.sp-app-closer-line em{
  font-style:italic;font-weight:600;
  color:var(--sp-rust);
}
.sp-app-closer-line a{
  color:var(--sp-green);text-decoration:underline;
  text-underline-offset:3px;font-weight:600;
  transition:color .15s ease;
}
.sp-app-closer-line a:hover{color:#082921}
.sp-app-closer-hint{
  color:var(--sp-muted);font-style:italic;
}