@import url("/assets/visual-polish-commercial.css?v=20260919");

/* Seacoast Stories: shared spacing and component rhythm. Kept class-scoped so
   the bundled exports retain their authored composition and image crops. */
:root { --ss-section-space: 80px; --ss-mobile-section-space: 48px; --ss-edge: 40px; --ss-card-radius: 10px; }

/* Verified archive/catalog/contact section anchors. These apply the cadence
   variables without flattening intentionally compact hero or band sections. */
#archive,
#shop-grid,
#options,
#partners,
#contact {
  padding: var(--ss-section-space) 24px !important;
}

/* Shared public-page content edges and section cadence. */
.ss-tideline,
.ss-warm,
.sc-mission,
.ep-feat,
.ep-grid,
.st-grid,
.st-feature,
.ev-hero,
.ev-formats,
.pp-hero,
.pp-tiers,
.pp-2col,
.pp-stats,
.pp-quotes,
.nl-grid,
.nl-card,
.ct-grid,
.sh-grid { scroll-margin-top: 96px; }

/* The recurring editorial content containers all use their existing desktop
   cap. This explicitly keeps their edge system aligned without forcing the
   intentionally narrower bio, form, reader, and video compositions wider. */
main > section[style*="max-width: 1152px"],
main > section[style*="max-width: 1200px"] {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* These are verified section-level heading containers. Card/product headings
   are intentionally excluded so the existing information hierarchy remains. */
.sc-mission > div h2,
.ep-feat > div h2,
.ep-grid > h2,
.st-feature > div h2,
.ev-hero > div h2,
.ev-formats > div h2,
.pp-hero > div h2,
.pp-2col > div h2,
.pp-stats > div h2,
.pp-quotes > div h2,
.nl-grid > div h2,
.ct-grid > div h2 {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
}

/* Editorial cards share a quiet edge and a deliberate hover, without changing
   their internal spacing, content, or image positioning. */
.ep-card,
.st-card,
.ss-ev-card,
.sh-card,
.pp-tier,
.nl-card {
  border-radius: var(--ss-card-radius) !important;
  overflow: hidden;
}
.ep-card,
.st-card,
.sh-card,
.pp-tier {
  border: 1px solid #E4DBCD !important;
}
.ep-card,
.st-card { padding: 24px !important; }
.pp-tier { padding: 28px 24px !important; }
.ep-card,
.st-card,
.ss-ev-card,
.sh-card { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover:hover) {
  .ep-card:hover,
  .st-card:hover,
  .ss-ev-card:hover,
  .sh-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(31,48,71,.10); }
}

/* Existing buttons retain their individual colors; this only unifies touch
   comfort, corner language, and a restrained hover response. */
.tide-pill,
.ev-cta-btn,
.ss-ev-btn,
.ep-card a[role="button"],
.st-card a[role="button"],
.sh-card button,
.sh-card a[role="button"],
.ct-grid button[type="submit"],
.pp-hero button[type="submit"],
.pp-2col button[type="submit"],
.nl-card button[type="submit"] {
  min-height: 44px;
  border-radius: 4px;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover:hover) {
  .tide-pill:hover,
  .ev-cta-btn:hover,
  .ss-ev-btn:hover,
  .ep-card a[role="button"]:hover,
  .st-card a[role="button"]:hover,
  .sh-card button:hover,
  .sh-card a[role="button"]:hover,
  .ct-grid button[type="submit"]:hover,
  .pp-hero button[type="submit"]:hover,
  .pp-2col button[type="submit"]:hover,
  .nl-card button[type="submit"]:hover { transform: translateY(-1px); }
}

/* Kicker type stays understated. Dark panels deliberately use the established
   high-contrast teal rather than the regular teal used on paper. */
.ep-more-label,
.sc-flip-tag,
.ss-ev-card [class*="kicker"],
.pp-tier [class*="kicker"] {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
/* Preserve authored crops: only round already-present editorial photographs. */
.ep-card img,
.st-card img,
.ss-ev-card img,
.sh-card img,
.pp-tier img,
.nl-card img { border-radius: var(--ss-card-radius); }

/* The Events photo marquee intentionally has a track wider than the viewport.
   Clip its paint overflow at the band itself so transformed frames cannot add
   the four-pixel document scrollbar on small phones. The track animation and
   its content remain unchanged. */
.ev-band { overflow-x: clip !important; }

/* Server-rendered episode, story, town, and event pages use a separate
   lightweight shell. These selectors keep that shell in the same component
   family without disturbing its authored layout or copy. */
.episode-main .kicker,
.story-main .kicker,
.town-main .kicker,
.event-main .kicker,
.episode-main .pres-k,
.episode-main .cta-kicker,
.episode-main .signup-kicker,
.town-main .more-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.episode-main .btn,
.story-main .btn,
.town-main .btn,
.event-main .event-cta {
  min-height: 44px;
  border-radius: 4px;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.episode-main .btn,
.story-main .btn,
.town-main .btn,
.event-main .event-cta { display: inline-flex; align-items: center; justify-content: center; }
.episode-main .pn,
.town-main .ep,
.town-main .tc,
.event-main .fact { border-radius: var(--ss-card-radius); }
@media (hover:hover) {
  .episode-main .btn:hover,
  .story-main .btn:hover,
  .town-main .btn:hover,
  .event-main .event-cta:hover { transform: translateY(-1px); }
}

@media (max-width: 760px) {
  :root { --ss-edge: 16px; }
  #archive,
  #shop-grid,
  #options,
  #partners,
  #contact {
    padding: var(--ss-mobile-section-space) var(--ss-edge) !important;
  }
  main > section[style*="max-width: 1152px"],
  main > section[style*="max-width: 1200px"],
  main > section[style*="max-width: 1000px"],
  main > section[style*="max-width: 1080px"] {
    padding-left: var(--ss-edge) !important;
    padding-right: var(--ss-edge) !important;
  }
  .ep-grid,
  .st-grid,
  .sh-grid,
  .sc-flipgrid,
  .ev-formats,
  .pp-tiers { gap: 16px !important; }
  .ep-card,
  .st-card,
  .ss-ev-card,
  .sh-card,
  .pp-tier,
  .nl-card { border-radius: 8px; }
  .episode-main .pn,
  .town-main .ep,
  .town-main .tc,
  .event-main .fact { border-radius: 8px; }
  .tide-pill,
  .ev-cta-btn,
  .ss-ev-btn,
  .sh-card button,
  .ct-grid button[type="submit"],
  .pp-hero button[type="submit"],
  .pp-2col button[type="submit"],
  .nl-card button[type="submit"] { min-height: 44px; }
  .ep-card,
  .st-card { padding: 20px !important; }
  .pp-tier { padding: 24px 20px !important; }
  /* The Events notification form is a deliberate one-row control. Its email
     input's intrinsic minimum was adding four pixels to the page width. */
  #notify form { min-width: 0; }
  #notify form input { min-width: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ep-card,
  .st-card,
  .ss-ev-card,
  .sh-card,
  .tide-pill,
  .ev-cta-btn,
  .ss-ev-btn { transition: none; }
}