/* =============================================================================
   shore.buzz — stylesheet v2 ("beach sticker book")
   Link from every page:  <link rel="stylesheet" href="shore-buzz.css">

   DIRECTION
   Fun, loud-but-tidy Gulf Coast energy. Think sun-faded postcards and
   gas-station-souvenir stickers: chunky ink outlines, hard offset shadows,
   bright pops of sun, coral, sky and mint over sea-foam paper with a dot
   texture. Brand teal stays as the masthead. Cards are slightly tilted and
   each one gets its own pop color, so a long list never looks like copies
   of one card. One page-load moment: cards pop in, staggered. Nothing else
   moves unless the reader touches it.

   TEMPLATE RULE (city kit)
   Colors live in tokens. A new city changes --brand / --brand-deep, and can
   swap the four --pop colors. Don't hardcode colors in components.

   CLASS CONTRACT (matches the markup visible on events.html)
   Both finds and events use the same card.
     .site-header  .wordmark  .site-nav (active link: aria-current="page")
     .page-title   .note  (the "All times are Central…" notice)
     .cards        list wrapper            .card    one find/event
       .card-num   the "01" number         .card-title
       .day-badge  "Sat" / "Sun" / "Sat–Sun". Add data-day="sat|sun|both"
                   to the .card (or the badge) to color it by day.
       .meta       wrapper for WHEN/WHERE rows (dl or div)
         .meta-row .meta-label .meta-value
       .card-desc  the description paragraph
       .tag        the "Coastal Mississippi" chip
       .card-link  map / organizer button (finds page: the "open map" link)
     .kit-link  .site-footer  .steps (kit.html)
   ============================================================================= */

:root {
  /* brand + surfaces */
  --brand: #2a6b66;
  --brand-deep: #164541;
  --paper: #e6f4f1;
  --dots: rgba(42, 107, 102, 0.2);
  --surface: #ffffff;
  --text: #10302d;
  --text-soft: #3d5a56;
  --edge: #10302d;          /* outline + hard-shadow color */
  --link: #1b5c57;
  --on-brand: #f4fbf9;
  --note-bg: #fff0b0;
  --nav-active-bg: var(--paper);
  --nav-active-text: #10302d;

  /* the four pops; cards cycle through them */
  --sun: #ffcf3f;
  --coral: #ff7a66;
  --sky: #8fd8ec;
  --mint: #a8e8cf;
  --on-pop: #10302d;        /* text on any pop color, in both themes */

  /* type */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* shape */
  --col: 44rem;
  --gap: 1.1rem;
  --radius: 1.25rem;
  --shadow: 5px 6px 0 var(--pop, var(--edge));
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d2422;
    --dots: rgba(143, 216, 236, 0.12);
    --surface: #1a3a36;       /* dark cards — no white panels */
    --text: #f4fbf9;          /* titles like Tavi's read light */
    --text-soft: #b7d4ce;
    --edge: #8fd3c8;
    --link: #8fe0d4;
    --brand: #21615c;
    --on-brand: #f4fbf9;
    --note-bg: #f6de7c;
    --nav-active-bg: #1a3a36;
    --nav-active-text: #f4fbf9;
    --title-hl: rgba(255, 122, 102, 0.42);
  }
  html { color-scheme: dark; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dots) 1.3px, transparent 1.6px);
  background-size: 20px 20px;
}

main, .site-footer {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gap);
}
main { padding-block: 2rem 3rem; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; margin: 0; }
p { margin: 0 0 var(--gap); }
a { color: var(--link); text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* ---------- masthead: teal band, sun, wave, sticker wordmark ---------- */
.site-header {
  position: relative;
  overflow: hidden;
  background: var(--brand);
  color: var(--on-brand);
  padding: max(1rem, env(safe-area-inset-top)) var(--gap) 0;
}
.site-header > * { position: relative; z-index: 1; max-width: var(--col); margin-inline: auto; }

/* sun peeking over the corner */
.site-header::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  right: -2rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffe27a, var(--sun) 60%, #ffb92e);
  box-shadow: 0 0 0 0.9rem rgba(255, 207, 63, 0.22), 0 0 0 1.8rem rgba(255, 207, 63, 0.12);
}

/* wave edge */
.site-header::after {
  content: "";
  display: block;
  position: relative;
  z-index: 1;
  height: 18px;
  margin: 0.6rem calc(var(--gap) * -1) 0;
  background: var(--paper);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 18'%3E%3Cpath d='M0 9 Q15 -2 30 9 T60 9 V18 H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) repeat-x bottom / 60px 18px;
  mask: var(--wave) repeat-x bottom / 60px 18px;
}

.wordmark {
  display: inline-block;
  padding: 0.15rem 0.85rem 0.25rem;
  background: var(--sun);
  color: var(--on-pop);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  border: 2.5px solid var(--edge);
  border-radius: 0.8rem;
  box-shadow: 3px 3px 0 var(--edge);
  transform: rotate(-2deg);
}

.site-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
/* wider screens: nav sits beside the wordmark, clear of the sun */
@media (min-width: 40rem) {
  .site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
  .site-header > * { margin-inline: 0; }
  .site-header > .site-nav { margin-top: 0; }
  .site-header::after { flex-basis: calc(100% + var(--gap) * 2); }
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  color: var(--on-brand);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid rgba(244, 251, 249, 0.55);
  border-radius: 999px;
}
.site-nav a:hover { border-color: var(--on-brand); }
.site-nav a[aria-current="page"], .site-nav a.is-active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  border-color: var(--edge);
  box-shadow: 3px 3px 0 var(--coral);
}

/* ---------- title + notice ---------- */
h1, .page-title {
  font-weight: 800;
  font-size: clamp(2.5rem, 11vw, 4.25rem);
  letter-spacing: -0.03em;
  text-transform: lowercase;
  margin-bottom: 1.25rem;
  color: var(--text);
  text-decoration: underline wavy var(--coral) 0.09em;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}

/* the notice reads like a sticky note */
.note {
  max-width: none;
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--note-bg);
  color: #10302d;
  font-size: 0.95rem;
  font-weight: 500;
  border: 2px solid var(--edge);
  border-radius: 0.9rem;
  box-shadow: 4px 4px 0 var(--edge);
  transform: rotate(-0.6deg);
}

/* ---------- cards (finds + events) ---------- */
.cards, .finds, .events, .steps { list-style: none; margin: 0; padding: 0; }
.cards, .finds, .events { display: grid; gap: 1.6rem; }

.card, .find, .event {
  --pop: var(--sky);
  position: relative;
  padding: 1.4rem 1.25rem 1.3rem;
  background: var(--surface);
  border: 2.5px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.18s ease;
}
/* each card gets its own pop color and a slight tilt */
.card:nth-child(4n+2), .find:nth-child(4n+2), .event:nth-child(4n+2) { --pop: var(--sun); }
.card:nth-child(4n+3), .find:nth-child(4n+3), .event:nth-child(4n+3) { --pop: var(--coral); }
.card:nth-child(4n+4), .find:nth-child(4n+4), .event:nth-child(4n+4) { --pop: var(--mint); }
.card:nth-child(odd),  .find:nth-child(odd),  .event:nth-child(odd)  { transform: rotate(-0.5deg); }
.card:nth-child(even), .find:nth-child(even), .event:nth-child(even) { transform: rotate(0.5deg); }

.card:hover, .find:hover, .event:hover {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 8px 10px 0 var(--pop);
}

/* the old "01" becomes a round sticker in the corner */
.card-num {
  position: absolute;
  top: -0.9rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  background: var(--pop);
  color: var(--on-pop);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  border: 2.5px solid var(--edge);
  border-radius: 50%;
  transform: rotate(8deg);
}
/* multi-day badges ("Mon–Tue", "Thu–Sat") stretch into a pill */
.card-num.card-num-wide {
  width: auto;
  padding: 0 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  transform: rotate(5deg);
}

.card-title, .find-name, .event-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 2.5rem 0.55rem 0;
  color: var(--text);
}
.meta-value { color: var(--text); }

/* event titles: a size up plus a highlighter swipe, so they're easy to skim */
.cards .card-title { font-size: 1.7rem; }
.card-title > span {
  background: linear-gradient(transparent 55%, var(--title-hl, rgba(255, 207, 63, 0.7)) 55%, var(--title-hl, rgba(255, 207, 63, 0.7)) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.12em;
  margin-left: -0.12em;
}

/* tag labels on each event card (display only, not tappable) */
.card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.1rem 0 0.8rem; padding: 0; }
.card-tag {
  display: inline-flex; align-items: center;
  min-height: 27px; padding: 0 0.55rem;
  border: 1.75px solid var(--edge); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font: 700 0.72rem/1 var(--font-body);
}
.card-tag[data-tag="music"] { background: var(--sky); color: var(--on-pop); }
.card-tag[data-tag="food"] { background: var(--coral); color: var(--on-pop); }
.card-tag[data-tag="free"] { background: var(--mint); color: var(--on-pop); }
.card-tag[data-tag="family"], .card-tag[data-tag="cruisin"] { background: var(--sun); color: var(--on-pop); }

/* day badge: Sat / Sun / Sat–Sun */
.day-badge {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.12rem 0.7rem;
  background: var(--sky);
  color: var(--on-pop);
  font-size: 0.8125rem;
  font-weight: 700;
  border: 2px solid var(--edge);
  border-radius: 999px;
  vertical-align: middle;
}
[data-day="sun"]  .day-badge, .day-badge[data-day="sun"]  { background: var(--sun); }
[data-day="both"] .day-badge, .day-badge[data-day="both"] { background: var(--coral); }
[data-day="sat"]  .day-badge, .day-badge[data-day="sat"]  { background: var(--sky); }

/* WHEN / WHERE rows */
.meta { margin: 0 0 0.9rem; display: grid; gap: 0.5rem; }
.meta-row { display: grid; grid-template-columns: 4.6rem 1fr; column-gap: 0.75rem; align-items: start; }
.meta-label {
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.05rem 0.55rem;
  background: var(--pop);
  color: var(--on-pop);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.5rem;
}
.meta-value { margin: 0; font-weight: 600; }

.card-desc, .find-body { margin: 0 0 1.1rem; color: var(--text-soft); }

/* tag chip + action buttons */
.tag, .find-where {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0 0.4rem 0.4rem 0;
  padding: 0 0.95rem;
  background: var(--mint);
  color: var(--on-pop);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--edge);
  border-radius: 999px;
}

.card-link, .find-map, .event-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  background: var(--coral);
  color: var(--on-pop);
  font-weight: 700;
  text-decoration: none;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--edge);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.card-link:hover, .find-map:hover, .event-link:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--edge); }
.card-link:active, .find-map:active, .event-link:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }

/* ---------- kit page ---------- */
.steps { counter-reset: step; display: grid; gap: 0.9rem; }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 0.9rem;
  align-items: start;
}
.steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--sun);
  color: var(--on-pop);
  font-family: var(--font-display);
  font-weight: 800;
  border: 2.5px solid var(--edge);
  border-radius: 50%;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.45em;
  background: var(--surface);
  border: 1.5px solid var(--edge);
  border-radius: 0.4rem;
}


/* ---------- socials (footer side note) ---------- */
.follow { margin: 1.5rem 0 0; font-size: 0.9rem; }
.follow:has(.socials:empty) { display: none; }.socials a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 0.75rem;
  color: var(--text-soft);
  font-weight: 600;
}
.socials a:hover { color: var(--text); }

/* ---------- cruisin page: day jump bar + schedule lists ---------- */
.jump-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 calc(var(--gap) * -1) 1.5rem;
  padding: 0.6rem var(--gap);
  background: var(--paper);
  border-bottom: 2px solid var(--edge);
}
/* chips wrap onto more lines (like the events tag chips) instead of a hidden sideways scroll */
.jump-bar { flex-wrap: wrap; }
.day-jump { display: flex; flex-wrap: wrap; flex: 1 1 20rem; min-width: 0; gap: 0.4rem; }
.jump-chip { flex: none; white-space: nowrap; }
.jump-chip, .filter-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.8rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--edge);
  border-radius: 999px;
  cursor: pointer;
}
.jump-chip:hover { background: var(--sky); color: var(--on-pop); }
.filter-toggle { flex: none; white-space: nowrap; }
.filter-toggle[aria-pressed="true"] { background: var(--sun); color: var(--on-pop); box-shadow: 2px 2px 0 var(--edge); }
/* phones: days and the two filters share one wrapped block to keep the sticky bar short */
@media (max-width: 40rem) {
  .jump-bar { gap: 0.35rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .day-jump { display: contents; }
  .jump-chip, .filter-toggle { min-height: 32px; padding: 0 0.6rem; font-size: 0.8rem; }
}

.day { margin-bottom: 2.4rem; scroll-margin-top: calc(var(--jump-h, 3.75rem) + 0.75rem); }
.day-heading {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.2rem 0.9rem 0.3rem;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  letter-spacing: -0.015em;
  border: 2.5px solid var(--edge);
  border-radius: 0.8rem;
  box-shadow: 3px 3px 0 var(--edge);
  transform: rotate(-1deg);
  scroll-margin-top: calc(var(--jump-h, 3.75rem) + 0.75rem);
}
.section-lede { color: var(--text-soft); }
.day-card, .day-card:nth-child(even) { transform: none; }
.day-card:hover { transform: none; box-shadow: var(--shadow); }
.sched-intro { font-weight: 700; }

.sched { list-style: none; margin: 0; padding: 0; }
.sched-item {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  column-gap: 0.9rem;
  padding: 0.7rem 0;
  border-top: 1.5px dashed var(--dots);
}
.sched-item:first-child { border-top: 0; padding-top: 0; }
.sched-time { font-size: 0.875rem; font-weight: 700; color: var(--text-soft); padding-top: 0.1rem; }
.sched-body p { margin: 0; }
.sched-title { font-weight: 700; color: var(--text); }
.is-star .sched-title::before { content: "★ "; color: var(--coral); }
.sched-where { color: var(--text); font-size: 0.95rem; }
.sched-note { color: var(--text-soft); font-size: 0.9rem; }

.sched-group { margin-top: 1.4rem; }
.sub-heading {
  display: inline-block;
  margin: 0 0 0.7rem;
  padding: 0.05rem 0.6rem;
  background: var(--pop);
  color: var(--on-pop);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0.5rem;
}
.venues { display: grid; gap: 0.7rem; }
.venue { padding: 0.7rem 0.9rem; border: 2px solid var(--edge); border-radius: 0.9rem; }
.venue-name { margin: 0 0 0.3rem; font-weight: 800; font-family: var(--font-display); }
.venue-sets { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--text-soft); }

.highlights-only .sched-item:not(.is-star),
.highlights-only .sched-group:not(.has-star) { display: none; }
.highlights-only .sched-item.is-star { border-top: 0; }

/* per-line save / share: small pills, since the schedule is dense */
.sched-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.sched-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0.75rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid var(--edge);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--edge);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sched-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--edge); }
.sched-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--edge); }
.sched-btn.is-saved { background: var(--mint); color: var(--on-pop); }
.sched-share { background: var(--sun); color: var(--on-pop); }
.saved-toggle[aria-pressed="true"] { background: var(--mint); }
.sched-item { scroll-margin-top: calc(var(--jump-h, 3.75rem) + 0.75rem); }
.sched-item.is-target { animation: sched-flash 2.4s ease-out 1; border-radius: 0.6rem; }
/* events list opened from an event link (/e/<id>-...): a sun-yellow glow around that card */
.card.is-target { animation: card-flash 2.8s ease-out 1; }
@keyframes card-flash { 0%, 45% { box-shadow: 0 0 0 6px var(--sun), var(--shadow); } 100% { box-shadow: var(--shadow); } }
@media (prefers-reduced-motion: reduce) {
  .card.is-target { animation: none; outline: 4px solid var(--sun); outline-offset: 4px; }
}
@keyframes sched-flash { 0%, 40% { background: var(--sun); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .sched-item.is-target { animation: none; outline: 3px solid var(--sun); outline-offset: 4px; }
}

.saved-only .sched-item:not(.is-saved),
.saved-only .sched-group:not(.has-saved),
.saved-only .day:not(.has-saved),
.saved-only .sched-intro,
.saved-only .venue-group { display: none; }
.saved-only .sched-item.is-saved { border-top: 0; }
.saved-empty { margin-bottom: 2rem; transform: none; }
.saved-empty[hidden] { display: none; }

@media (max-width: 30rem) {
  .sched-item { grid-template-columns: 1fr; row-gap: 0.15rem; }
}
@media (min-width: 52rem) {
  .venues { grid-template-columns: 1fr 1fr; }
}

/* Cruisin' is seasonal (cruisin-season.js). Keep its hidden items hidden even
   where a class sets display (the .feature card, the .site-nav links). */
[data-cruisin][hidden], .cruisin-offseason[hidden] { display: none !important; }
.cruisin-offseason { font-weight: 700; }

/* home-page feature sticker pointing at the Cruisin' page.
   Sun-yellow in both themes (unlike the white/dark event cards) with a
   checkered-flag band across the top, so it reads as a special. */
.feature {
  --pop: var(--coral);
  position: relative;
  display: block;
  margin: 0.6rem 0 2rem;
  padding: 2.1rem 1.25rem 1.3rem;
  background: var(--sun);
  color: var(--on-pop);
  text-decoration: none;
  border: 3px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 7px 8px 0 var(--pop);
  transform: rotate(-1deg);
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.18s ease;
}
/* checkered flag band */
.feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.9rem;
  background: repeating-conic-gradient(#10302d 0 25%, #ffffff 0 50%) 0 0 / 0.9rem 0.9rem;
  border-bottom: 3px solid var(--edge);
}
.feature:hover { transform: rotate(0deg) translate(-2px, -3px); box-shadow: 10px 12px 0 var(--pop); }
/* date as a tilted corner badge */
.feature-kicker {
  position: absolute;
  top: 1.45rem;
  right: 0.9rem;
  padding: 0.2rem 0.7rem;
  background: var(--coral);
  color: var(--on-pop);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--edge);
  transform: rotate(6deg);
}
.feature-title {
  margin: 0.2rem 5.5rem 0.4rem 0;
  color: var(--on-pop);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.feature-desc { margin: 0 0 1rem; color: var(--on-pop); font-weight: 500; }
.feature-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  background: var(--brand-deep);
  color: #f4fbf9;
  font-weight: 700;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--edge);
}
.feature:hover .feature-cta { box-shadow: 4px 4px 0 var(--edge); }

/* ---------- footer ---------- */
.site-footer { padding-block: 1rem 3.5rem; color: var(--text-soft); }
.kit-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  background: var(--sun);
  color: var(--on-pop);
  font-weight: 700;
  text-decoration: none;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--edge);
}

/* ---------- screen-reader-only labels ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- search + filters (events page) ---------- */
.filters { margin: 0 0 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
.filters [hidden], .cards > [hidden] { display: none !important; }
.filter-row { display: flex; gap: 0.6rem; }
.filter-search, .filter-town {
  min-height: 48px;
  padding: 0 0.95rem;
  background: var(--surface);
  color: var(--text);
  font: 600 1rem/1.2 var(--font-body);
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--edge);
}
.filter-search { flex: 1 1 auto; min-width: 0; }
.filter-search::placeholder { color: var(--text-soft); font-weight: 500; }
.filter-town {
  flex: 0 0 auto;
  max-width: 44%;
  appearance: none;
  padding-right: 2.1rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--edge) 50%), linear-gradient(135deg, var(--edge) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
  background-size: 0.36rem 0.36rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* Tag chips wrap onto extra lines: a hidden sideways scroll can't be reached
   with a mouse on Windows. Slightly smaller than the signup topic chips. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.15rem 0.3rem 0.3rem 0.1rem;
  margin-inline: -0.1rem;
}
.chips .chip { min-height: 34px; padding: 0 0.75rem; font-size: 0.82rem; }
.chip.saved-chip { background: var(--sky); color: var(--on-pop); font-weight: 700; }
.chip.saved-chip.is-on { background: var(--mint); }
.chip {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 1rem;
  background: var(--surface);
  color: var(--text);
  font: 700 0.9rem/1 var(--font-body);
  border: 2px solid var(--edge);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--edge);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--edge); }
.chip[aria-pressed="true"] {
  background: var(--sun);
  color: var(--on-pop);
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--edge);
}
.filter-status { margin: 0; font-weight: 600; color: var(--text-soft); }
.filter-clear {
  appearance: none;
  margin-left: 0.25rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--link);
  font: 700 1rem/1.4 var(--font-body);
  text-decoration: underline wavy var(--coral) 0.08em;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* ---------- weekly-picks signup ----------
   The loudest sticker on the page: sun-yellow card, coral shadow, "free!"
   badge. Same look for the footer card (.signup) and the cards dropped into
   the event list (.signup-card). Text on yellow is always --on-pop (dark),
   in both themes. */
:root { --field: #fffdf7; }

.contact.signup, .signup-card {
  --pop: var(--coral);
  position: relative;
  background: var(--sun);
  color: var(--on-pop);
  border-color: var(--on-pop);
  box-shadow: 6px 7px 0 var(--coral);
}
.contact.signup { margin-top: 2.4rem; padding: 1.7rem 1.3rem 1.4rem; transform: rotate(-0.8deg); }
.signup-title { font-size: 2rem; color: var(--on-pop); margin-right: 3.2rem; }
.signup-card .card-title { margin-right: 3.2rem; }
.signup .contact-status:empty, .signup-card .contact-status:empty { display: none; }
/* A wide card tilted -0.8deg makes long rows look crooked; keep the tilt
   for phones, nearly flatten it on wide screens. */
@media (min-width: 52rem) {
  .contact.signup { transform: none; padding: 1.9rem 1.8rem 1.6rem; }
}
.signup .contact-lede, .signup-card .card-desc { color: var(--on-pop); opacity: 0.85; }
.signup-card .card-title { color: var(--on-pop); }

.signup-badge {
  position: absolute;
  top: -0.8rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--coral);
  color: var(--on-pop);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  border: 2.5px solid var(--on-pop);
  border-radius: 50%;
  transform: rotate(12deg);
}

.signup-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.signup-email {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 0.9rem;
  background: var(--field);
  color: var(--on-pop);
  font: 600 1rem/1.4 var(--font-body);
  border: 2.5px solid var(--on-pop);
  border-radius: 999px;
}
.signup-email::placeholder { color: var(--on-pop); opacity: 0.5; }
.signup .contact-send, .signup-card .contact-send {
  min-height: 48px;
  background: var(--coral);
  color: var(--on-pop);
  border-color: var(--on-pop);
  box-shadow: 3px 3px 0 var(--on-pop);
}
.signup-more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  background: var(--field);
  color: var(--on-pop);
  font-weight: 700;
  text-decoration: none;
  border: 2px dashed var(--on-pop);
  border-radius: 999px;
}
.signup-more:hover { border-style: solid; }
@keyframes topics-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 6px var(--coral); }
}
.topics.is-flash .topics-list { border-radius: 1rem; animation: topics-flash 1.4s ease 0.35s 2; }
.signup-email:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--coral); }
.signup .contact-status, .signup-card .contact-status { color: var(--on-pop); }
.signup-privacy { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--on-pop); opacity: 0.8; }
.contact-form[hidden] { display: none; }

/* topics: always visible; tap to choose, ✓ shows what's picked */
.signup-step { margin: 0; font-weight: 800; font-size: 1.05rem; }
/* The dashed divider is a full line above the legend: floating the legend
   stops it from cutting a gap into the fieldset's top border. */
.topics { margin: 0.4rem 0 0; padding: 1rem 0 0; border: 0; border-top: 2px dashed var(--on-pop); min-width: 0; }
.topics-label { float: left; width: 100%; padding: 0; margin-bottom: 0.7rem; font-weight: 800; font-size: 1.05rem; }
.topics-label + * { clear: both; }
.topics-optional {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.55rem;
  background: var(--field);
  color: var(--on-pop);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: 0.1em;
  border: 1.5px solid var(--on-pop);
  border-radius: 999px;
}
.topics-hint { display: block; font-weight: 500; font-size: 0.9rem; opacity: 0.8; }
.topics-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.topic { position: relative; }
.topic input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.signup .topic {
  min-height: 40px;
  background: var(--field);
  color: var(--on-pop);
  border-color: var(--on-pop);
  box-shadow: 2px 2px 0 var(--on-pop);
}
/* selected = mint + ✓; no "pressed" offset, so rows stay level */
.signup .topic:has(input:checked) { background: var(--mint); }
.signup .topic:hover { transform: none; box-shadow: 2px 2px 0 var(--on-pop); }
.topic:has(input:checked)::before { content: "✓"; margin-right: 0.4rem; font-weight: 800; }
.topic:has(input:focus-visible) { outline: 3px solid var(--coral); outline-offset: 3px; }

/* after signing up: a big sticky note replaces the form */
.signup-done {
  margin-top: 0.4rem;
  padding: 1.1rem 1.15rem 1rem;
  background: var(--field);
  color: var(--on-pop);
  border: 2.5px solid var(--on-pop);
  border-radius: 1rem;
  box-shadow: 4px 4px 0 var(--on-pop);
  transform: rotate(0.8deg);
  outline: none;
}
.signup-done p { margin: 0 0 0.6rem; }
.signup-done-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-decoration: underline wavy var(--coral) 0.08em;
  text-underline-offset: 0.18em;
}
.signup-done-small { font-size: 0.9rem; opacity: 0.8; }
.signup-done-again {
  appearance: none;
  padding: 0;
  background: none;
  border: 0;
  color: var(--on-pop);
  font: 700 0.95rem/1.4 var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}
/* "check your spam" callout: the loudest thing in the done panel. Coral with
   --on-pop ink (about 5.5:1) in both themes; tilted like the "free!" badge. */
.signup-spam {
  margin: 0.2rem 0 0.9rem;
  padding: 0.85rem 0.95rem 0.8rem;
  background: var(--coral);
  color: var(--on-pop);
  border: 3px solid var(--on-pop);
  border-radius: 0.9rem;
  box-shadow: 4px 4px 0 var(--on-pop);
  transform: rotate(-1.2deg);
}
.signup-done .signup-spam p { margin: 0 0 0.45rem; font-weight: 600; line-height: 1.4; }
.signup-done .signup-spam p:last-child { margin-bottom: 0; }
.signup-done .signup-spam .signup-spam-head {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.signup-spam-head::before { content: "⚠️ "; }
.signup-spam-tip::before { content: "📌 "; }
.signup-done .signup-spam .signup-spam-tip { padding-top: 0.45rem; border-top: 2px dashed var(--on-pop); font-weight: 500; }
@keyframes spam-wiggle {
  0%, 100% { transform: rotate(-1.2deg); }
  20% { transform: rotate(1.8deg) scale(1.03); }
  40% { transform: rotate(-2.6deg) scale(1.03); }
  60% { transform: rotate(1.2deg); }
  80% { transform: rotate(-1.8deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .signup-done { animation: pop-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
  .signup-spam { animation: spam-wiggle 0.7s ease-in-out 0.55s 1; }
}

/* contact form result: a sticky note instead of a quiet line */
.contact-status.is-ok, .contact-status.is-error {
  padding: 0.75rem 1rem;
  color: #10302d;
  border: 2px solid var(--edge);
  border-radius: 0.8rem;
  box-shadow: 3px 3px 0 var(--edge);
}
.contact-status.is-ok { background: var(--note-bg); }
.contact-status.is-error { background: var(--coral); }

/* ---------- contact (footer "get in touch" card) ---------- */
.contact {
  --pop: var(--sun);
  margin-top: 2rem;
  padding: 1.4rem 1.25rem 1.3rem;
  background: var(--surface);
  color: var(--text);
  border: 2.5px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transform: rotate(-0.4deg);
}
.contact-title {
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}
.contact-lede { color: var(--text-soft); }
.contact-form { display: grid; gap: 0.85rem; }
.contact-field { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.contact-field input, .contact-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  background: var(--paper);
  color: var(--text);
  font: 500 1rem/1.4 var(--font-body);
  letter-spacing: normal;
  text-transform: none;
  border: 2px solid var(--edge);
  border-radius: 0.8rem;
}
.contact-field textarea { resize: vertical; }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-send {
  appearance: none;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.4rem;
  background: var(--coral);
  color: var(--on-pop);
  font: 700 0.9rem/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--edge);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.contact-send:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--edge); }
.contact-send:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
.contact-send:disabled { opacity: 0.6; cursor: wait; }
.contact-status { margin: 0; font-weight: 600; min-height: 1.5em; }

/* ---------- wider screens: two columns of cards ---------- */
@media (min-width: 52rem) {
  :root { --col: 62rem; --gap: 1.5rem; }
  .cards, .finds, .events { grid-template-columns: 1fr 1fr; align-items: start; }
  .card-title, .find-name, .event-title { font-size: 1.7rem; }
}

/* ---------- the one motion moment: cards pop in on load ---------- */
@keyframes pop-in {
  from { opacity: 0; translate: 0 18px; scale: 0.96; }
}
@media (prefers-reduced-motion: no-preference) {
  .card, .find, .event { animation: pop-in 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
  .card:nth-child(2), .find:nth-child(2), .event:nth-child(2) { animation-delay: 0.07s; }
  .card:nth-child(3), .find:nth-child(3), .event:nth-child(3) { animation-delay: 0.14s; }
  .card:nth-child(4), .find:nth-child(4), .event:nth-child(4) { animation-delay: 0.21s; }
  .card:nth-child(5), .find:nth-child(5), .event:nth-child(5) { animation-delay: 0.28s; }
  .card:nth-child(n+6), .find:nth-child(n+6), .event:nth-child(n+6) { animation-delay: 0.35s; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .find, .event, .card-link, .find-map, .event-link { transition: none; }
}

/* ---------- legal pages + footer links ---------- */
.legal h2 { margin: 2rem 0 0.6rem; font-size: 1.3rem; }
.legal ul { margin: 0 0 var(--gap); padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }
.legal-date { font-size: 0.9rem; color: var(--text-soft); }
.legal-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; font-size: 0.9rem; margin-top: 1.5rem; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-soft); }
.legal-links a[aria-current="page"] { font-weight: 700; color: var(--text); }
.signup-privacy a { color: inherit; }
.legal-owner { margin: 0.25rem 0 0; font-size: 0.85rem; }

/* ---------- floating back-to-top sticker (to-top.js) ---------- */
.to-top {
  appearance: none;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--sun);
  color: var(--on-pop);
  font: 800 1.4rem/1 var(--font-body);
  border: 3px solid var(--edge);
  border-radius: 50%;
  box-shadow: 3px 3px 0 var(--edge);
  transform: rotate(-6deg);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.to-top[hidden] { display: none; }
.to-top:hover { transform: rotate(-6deg) translate(-1px, -1px); box-shadow: 4px 4px 0 var(--edge); }
.to-top:active { transform: rotate(-6deg) translate(2px, 2px); box-shadow: 0 0 0 var(--edge); }
@media (prefers-reduced-motion: no-preference) {
  .to-top:not([hidden]) { animation: to-top-in 0.2s ease-out; }
}
@keyframes to-top-in {
  from { opacity: 0; transform: rotate(-6deg) translateY(12px); }
  to { opacity: 1; transform: rotate(-6deg); }
}
@media print { .to-top { display: none !important; } }

/* ---------- events filters: row labels + day tabs ---------- */
/* Each chip row gets a small label so "which day" and "what kind" read as
   two different questions. Days are calendar tabs, not pills. */
.filter-group { display: grid; gap: 0.35rem; }
.filter-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.day-chips {
  display: flex;
  gap: 0.4rem;
  padding: 0.1rem 0.3rem 0.3rem 0.1rem;
  margin-inline: -0.1rem;
}
.day-chip {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  max-width: 4.25rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  text-align: center;
  border: 2px solid var(--edge);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--edge);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.day-chip-top {
  padding: 0.2rem 0.1rem;
  background: var(--coral);
  color: var(--on-pop);
  border-bottom: 2px solid var(--edge);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.day-chip-num {
  padding: 0.2rem 0 0.3rem;
  font: 800 1.25rem/1 var(--font-display);
}
.day-chip:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--edge); }
.day-chip[aria-pressed="true"] {
  background: var(--sky);
  color: var(--on-pop);
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--edge);
}
.day-chip[aria-pressed="true"] .day-chip-top { background: var(--edge); color: var(--surface); }

/* Town and topic pages (/biloxi, /concerts): a short intro under the heading,
   and the "browse" links under the events list on every events page. */
.landing-intro { margin: 0 0 0.6rem; font-weight: 600; }
.landing-intro a { color: inherit; }
.explore { margin: 2.2rem 0 0.5rem; }
.explore-title { margin: 0 0 0.6rem; font-size: 1.25rem; }
.explore .explore-label { margin: 0.9rem 0 0.35rem; }  /* looks like .filter-label */
.explore a.chip { text-decoration: none; }
.explore a.chip[aria-current="page"] { background: var(--sun); color: var(--on-pop); }

/* Events pages: the heading carries the search phrase ("things to do on the
   Mississippi Gulf Coast"), so it's a little smaller; dates go in the subtitle. */
.page-title.page-title-events { font-size: clamp(2.1rem, 8.5vw, 3.6rem); margin-bottom: 0.35rem; }
.page-subtitle { margin: 0.15rem 0 1.2rem; font-size: clamp(1.3rem, 4.6vw, 1.65rem); font-weight: 700; }

/* Events pages: the "details can change" reminder, small and quiet, just
   above the list (it used to be a big sticky note under the heading). */
.verify-note { margin: 0.2rem 0 1rem; font-size: 0.85rem; font-weight: 500; color: var(--text); opacity: 0.75; }

/* Events pages: the heading's "tide line": sky-blue water with a wavy top edge
   rising behind the words (each line on its own). In dark mode the water is
   ocean blue (not the header's teal), dark enough that the light text stays readable,
   and the squiggly underline is gone. */
.page-title.page-title-events {
  display: inline;
  text-decoration: none;
  color: var(--text);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q10 0 20 4 T40 4 V16 H0Z' fill='%238fd8ec'/%3E%3C/svg%3E") repeat-x 0 92% / 40px 0.52em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  .page-title.page-title-events {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q10 0 20 4 T40 4 V16 H0Z' fill='%232c5f8f'/%3E%3C/svg%3E");
  }
}
.page-subtitle { margin: 0.7rem 0 1.2rem; }

/* Events pages: the day row comes first, above search and town. */
.filter-group.filter-days-first { margin-top: 0; margin-bottom: 0.9rem; }
.filter-row + .filter-group { margin-top: 0.9rem; }

/* Homepage: the week in one sentence, at the top of the browse section
   (api/_seo.js weekSummary; search snippets and AI answers can quote it). */
.explore-summary { margin: 0 0 0.8rem; font-weight: 600; }

/* Guide pages (/free-things-to-do): the evergreen write-up under the week's
   events (api/_guides.js). Every events page: a few questions people ask,
   answered from this week's list (api/_seo.js faq), closed until tapped. */
.guide, .faq { margin: 2.2rem 0 0.5rem; }
.guide-title, .faq-title { margin: 0 0 0.6rem; font-size: 1.25rem; }
.guide p { margin: 0 0 0.7rem; }
.guide-list { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.guide-list li { margin: 0 0 0.5rem; }
.guide-list a { color: inherit; }
.guide-note { font-size: 0.85rem; opacity: 0.75; }
.faq-item { border: 2px solid var(--edge); border-radius: 10px; background: var(--surface); margin: 0 0 0.5rem; }
.faq-item summary { cursor: pointer; padding: 0.6rem 0.8rem; font-weight: 700; }
.faq-item p { margin: 0; padding: 0 0.8rem 0.7rem; }
.faq-item a { color: inherit; font-weight: 600; }

/* ---------- add to home screen (home-screen.js) ---------- */
.a2hs-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.6rem;
  padding: 0 1rem 0 0.45rem;
  background: var(--sun);
  color: var(--on-pop);
  font: 700 0.9rem/1 var(--font-body);
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--edge);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.a2hs-btn[hidden] { display: none; }
.a2hs-btn img { border-radius: 6px; border: 1.5px solid var(--edge); }
.a2hs-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--edge); }
.a2hs-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--edge); }
@media (min-width: 40rem) { .site-header > .a2hs-btn { margin-top: 0; } }

.a2hs-sheet {
  width: min(100%, 30rem);
  max-width: 100%;
  margin: auto auto 0;
  padding: 1.4rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--text);
  border: 2.5px solid var(--edge);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -5px 0 var(--sky);
}
@media (min-width: 40rem) {
  .a2hs-sheet { margin: auto; border-bottom: 2.5px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); --pop: var(--sky); }
}
.a2hs-sheet::backdrop { background: rgba(16, 48, 45, 0.55); }
.a2hs-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.a2hs-head img { flex: none; border-radius: 13px; border: 2px solid var(--edge); }
.a2hs-head h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase; }
.a2hs-steps { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.a2hs-steps li { margin-bottom: 0.7rem; padding-left: 0.2rem; }
.a2hs-steps li::marker { font-family: var(--font-display); font-weight: 800; }
.a2hs-glyph { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.a2hs-copy, .a2hs-close { margin: 0 0.5rem 0.5rem 0; }
.a2hs-copy {
  appearance: none;
  min-height: 44px;
  padding: 0 1.2rem;
  background: var(--sky);
  color: var(--on-pop);
  font: 700 0.9rem/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2.5px solid var(--edge);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--edge);
  cursor: pointer;
}

/* Event cards: the "Calendar" button (an .ics download, api/ics.js). A link
   styled like the Save/Share buttons beside it. */
a.card-btn { text-decoration: none; }
.card-btn.card-cal { background: var(--coral); color: var(--on-pop); }
/* The organizer's name is the link to their page (replaces the separate
   "organizer" button): a plain underlined link, so it never competes with
   Save, Share and Calendar (Summer, 2026-10-26). The invisible padding keeps
   it easy to tap; long names wrap. */
.card-link.card-org {
  display: inline-block;
  min-height: 0;
  margin: 0 0 0.5rem;
  padding: 0.3rem 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: normal;
}
.card-link.card-org:hover, .card-link.card-org:active { transform: none; box-shadow: none; text-decoration-thickness: 3px; }
/* Calendar button: just the "add to calendar" icon (a calendar with a +
   badge; its name is read out and shown on hover). The badge is filled with
   the button color so it sits on top of the calendar. */
.card-actions .card-btn.card-cal { padding: 0 0.75rem; }
.card-cal-icon { flex: none; display: block; }
.card-cal-badge { fill: var(--coral); }
/* An event's own page (/e/<id>): its card on top, then "more this week". */
.event-feature { margin: 0 0 1.6rem; }
.event-feature .cards { margin: 0; }
.more-title { margin: 0 0 0.8rem; font-size: 1.25rem; }
/* The event's name is the page heading, so its card doesn't repeat it; and
   event names run long, so the heading is a little smaller than the homepage's. */
.event-feature .card-title { display: none; }
main:has(.event-feature) .page-title.page-title-events { font-size: clamp(1.75rem, 7vw, 2.8rem); }