/* ==================================================================
   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 ---------- */
.sp-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;
  color:var(--sp-muted);margin:34px 0 0}
.sp-breadcrumb a{color:var(--sp-muted);text-decoration:none}
.sp-breadcrumb a:hover{color:var(--sp-rust)}
.sp-breadcrumb .ph-light,.sp-breadcrumb .ph{color:var(--sp-rust);font-size:14px}
.sp-breadcrumb .here{color:var(--sp-ink)}

/* ---------- best for pills ---------- */
.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 ---------- */
.sp-explore{display:grid;grid-template-columns:2fr 3fr;gap:28px;align-items:start}
.sp-map{height:520px;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}
.sp-tabs{margin:0 0 20px}
.sp-tabs-row{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid #d9cfba}
.sp-tab{background:none;border:0;border-bottom:3px solid transparent;color:var(--sp-muted);
  font-family:'Spline Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:8px 12px;cursor:pointer;text-transform:uppercase}
.sp-tab.active{color:var(--sp-rust);border-bottom-color:var(--sp-rust)}

/* 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}
.sp-listings{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.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 with a hero image.
   The card is an <article> wrapping an inner <a class="sp-lcard-link">
   and a separate <button class="sp-lc-add"> pill so we never nest a
   button inside an anchor. The outer .sp-lcard keeps the frame +
   hover behaviour; .sp-lcard-link makes the body region clickable. */
.sp-lcard{background:var(--sp-ivory);border:1px 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}
.sp-lc-body{padding:16px;display:flex;flex-direction:column;flex:1}

/* "+ Add to trip" pill in the top-right corner that hands the listing
   off to Northlander.app. Stays small so it doesn't compete with the
   card's primary tap target. Hover lifts and goes solid rust. */
.sp-lc-add{
  position:absolute;top:8px;right:8px;z-index:2;
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(245,240,232,.94);
  color:var(--sp-rust);
  border:1.5px solid var(--sp-rust);
  border-radius:999px;
  padding:4px 10px 4px 8px;
  font-family:'Spline Sans',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s;
}
.sp-lc-add:hover{
  background:var(--sp-rust);color:var(--sp-ivory);
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(125,58,30,.3);
}
.sp-lc-add .ph-light{font-size:14px;line-height:1}
@media(max-width:480px){
  .sp-lc-add span{display:none}  /* shrink to just the plus on small phones */
  .sp-lc-add{padding:4px 7px}
}
.sp-lc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.sp-lc-tag{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#fff;
  background:var(--sp-rust);padding:3px 8px}
.sp-lc-rating{color:var(--sp-amber);font-weight:700;font-size:14px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px}
.sp-lcard h4{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;margin:10px 0 4px;color:var(--sp-ink)}
.sp-lc-desc{font-size:13.5px;line-height:1.45;color:var(--sp-ink);margin:0 0 8px;opacity:.82}
.sp-lc-addr{font-size:13px;color:var(--sp-muted);margin:0 0 8px}
.sp-lc-walk{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  color:var(--sp-rust);letter-spacing:.02em;margin-top:auto;padding-top:6px}
.sp-lc-walk .ph-light{font-size:15px}

/* ---------- 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. */
.sp-toc{position:sticky;top:58px;z-index:40;
  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:8px 0}
.sp-toc-row{display:flex;gap:8px;overflow-x:auto;padding:0 16px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.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-toc{top:54px;margin:8px 0 18px}
  .sp-toc-link{padding:7px 12px;font-size:12.5px}
}

/* ---------- 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-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}
.sp-evchip-row{display:flex;flex-wrap:wrap;gap:5px}
.sp-evchip{background:transparent;border:1px solid transparent;border-radius:4px;
  padding:4px 11px;font-size:13px;font-weight:500;color:var(--sp-ink);cursor:pointer;
  font-family:'Spline Sans',sans-serif;line-height:1.2;letter-spacing:0;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.sp-evchip:hover{background:rgba(125,58,30,.08);color:var(--sp-rust)}
.sp-evchip.is-active,
.sp-evchip.is-active:hover{background:#6e2e17;border-color:#6e2e17;color:var(--sp-ivory);box-shadow:none}
/* 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)}
@media (max-width:720px){
  .sp-evfilter-grid{flex-direction:column;align-items:flex-start;gap:9px}
  .sp-evfilter-section{width:100%}
}
@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-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}
@media (max-width:720px){
  .sp-section[id]{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}
  .sp-explore{grid-template-columns:1fr}
  .sp-map{height:340px;order:2}
  .sp-listings{grid-template-columns:1fr}
  .sp-nearby{grid-template-columns:1fr}
  .sp-df-list{grid-template-columns:1fr}
  .sp-hero-frame{height:48vh;min-height:300px}
}