/* ==================================================================
   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 card ----------
   Two-tier layout: When chips span the full width, then a three-column
   grid for What / Price / Walk time. Icons sit beside friendly section
   labels so the bar reads as a question, not a form. */
.sp-evfilters{background:var(--sp-ivory);border:1px solid #d9cfba;border-radius:10px;
  padding:14px 18px 16px;margin:0 0 22px;box-shadow:0 4px 14px rgba(74,52,30,.06)}
.sp-evfilters-head{display:flex;justify-content:space-between;align-items:center;
  margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid #e3d8c0}
.sp-evfilters-title{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;color:var(--sp-ink);margin:0;line-height:1}
.sp-evreset{background:transparent;border:0;color:var(--sp-rust);font-size:12.5px;font-weight:700;
  cursor:pointer;padding:3px 7px;display:inline-flex;align-items:center;gap:4px;
  border-radius:4px;font-family:inherit;transition:background .15s ease}
.sp-evreset .ph-light{font-size:14px}
.sp-evreset:hover{background:rgba(141,61,34,.08)}
.sp-evfilter-section{display:flex;flex-direction:column;gap:6px;margin:10px 0 0}
.sp-evfilter-section--full{margin-top:0}
.sp-evfilter-section-label{display:inline-flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--sp-muted)}
.sp-evfilter-section-label .ph-light{font-size:15px;color:var(--sp-rust)}
/* Match the homepage layout: flex row with equal gap between the
   three sections, content-sized so Walk time stays on one line. */
.sp-evfilter-grid{display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:14px 22px;margin-top:6px}
.sp-evfilter-section{flex:0 1 auto;min-width:0}
.sp-evchip-row{display:flex;flex-wrap:wrap;gap:6px}
.sp-evchip{background:transparent;border:1.5px solid #d9cfba;border-radius:999px;
  padding:5px 13px;font-size:13px;font-weight:600;color:var(--sp-ink);cursor:pointer;
  font-family:inherit;line-height:1.2;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.sp-evchip:hover{border-color:var(--sp-rust);color:var(--sp-rust)}
.sp-evchip.is-active{background:var(--sp-rust);border-color:var(--sp-rust);color:var(--sp-ivory);
  box-shadow:0 2px 7px rgba(141,61,34,.22)}
.sp-evselect{background:var(--sp-offivory);border:1.5px solid #d9cfba;border-radius:6px;
  padding:7px 10px;font-size:13px;font-family:'Spline Sans',sans-serif;color:var(--sp-ink);
  width:100%;max-width:280px;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='%23736749'><path d='M4 6 L8 10 L12 6 Z'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:14px;padding-right:28px}
.sp-evselect:focus{outline:none;border-color:var(--sp-rust)}
@media (max-width:720px){
  .sp-evfilter-grid{grid-template-columns:1fr;gap:12px}
}
@media (max-width:480px){
  .sp-evfilters{padding:12px 14px}
}

/* ---------- 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-img--blank{display:flex;align-items:center;justify-content:center;color:var(--sp-rust)}
.sp-event-img--blank .ph-light,.sp-event-img--blank .ph{font-size:48px}
.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}
.sp-event-cta{font-size:12px;font-weight:700;color:var(--sp-rust);display:inline-flex;align-items:center;gap:4px}
.sp-event-cta .ph-light{font-size:14px}

.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.) */

/* ---------- 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}
}