/* /birthday-parties — a hand-maintained directory of places that host
   children's birthday parties (25 September 2026). The site's utility system:
   Inter, near-white ground, white cards, the pale cool blue tint and the soft
   blue accent. Phone first: the jump list, one column of cards, then the
   "before you book" card; from 700px two cards across; from 1040px the jump
   list and that card move into a side rail beside the cards.
   The shared chrome is nav-footer.css's; nothing here names it. */
body.bp-page {
  --bp-accent: #356382; --bp-accent-2: #3c7194; --bp-ink: #22312b; --bp-muted: #55635c;
  --bp-white: #fbfcfb; --bp-ground: #f2f5f3; --bp-line: #d5dcd7; --bp-tint: #e6eef3;
  --bp-tint-line: #cfdbe3; --bp-slate: #35576b;
  margin: 0; background: var(--bp-ground); color: var(--bp-ink);
  font-family: "Inter", Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
body.bp-page .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bp-main { max-width: 720px; margin: 0 auto; padding: 0 16px 36px; box-sizing: border-box; }
.bp-main *, .bp-main *::before, .bp-main *::after { box-sizing: border-box; }

/* ---------- opening ---------- */
.bp-head { padding: 26px 0 16px; }
.bp-eyebrow { margin: 0 0 9px; font: 600 11px/1.4 "Inter", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--bp-slate); }
.bp-head h1 { margin: 0; font: 700 32px/1.12 "Inter", Arial, sans-serif; letter-spacing: -.03em; color: var(--bp-ink); text-wrap: balance; }
.bp-lede { margin: 12px 0 0; max-width: 64ch; font: 400 16px/1.55 "Inter", Arial, sans-serif; color: var(--bp-muted); }

/* ---------- jump list (in-page, not navigation) ---------- */
.bp-jump { margin: 16px 0 4px; }
.bp-jump-h { margin: 0 0 8px; font: 600 13px/1.4 "Inter", Arial, sans-serif; color: var(--bp-ink); }
.bp-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bp-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--bp-tint-line); border-radius: 10px; background: #fff; color: var(--bp-accent); font: 600 14px/1.2 "Inter", Arial, sans-serif; text-decoration: none; }
.bp-jump a:hover { color: var(--bp-accent-2); border-color: var(--bp-accent-2); }

/* ---------- groups ---------- */
.bp-group { margin: 28px 0 0; scroll-margin-top: 88px; }
.bp-group h2 { margin: 0; font: 700 24px/1.25 "Inter", Arial, sans-serif; letter-spacing: -.02em; color: var(--bp-ink); }
.bp-group-intro { margin: 6px 0 12px; max-width: 64ch; font: 400 15px/1.55 "Inter", Arial, sans-serif; color: var(--bp-muted); }
.bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bp-card { display: flex; flex-direction: column; padding: 16px 16px 14px; border: 1px solid var(--bp-line); border-radius: 12px; background: #fff; }
.bp-card-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.bp-card h3 { margin: 0; font: 700 18px/1.3 "Inter", Arial, sans-serif; letter-spacing: -.01em; color: var(--bp-ink); }
.bp-town { display: inline-block; padding: 3px 8px; border: 1px solid var(--bp-tint-line); border-radius: 6px; background: var(--bp-tint); color: var(--bp-slate); font: 600 12px/1.3 "Inter", Arial, sans-serif; }
.bp-card p { margin: 8px 0 0; font: 400 15px/1.55 "Inter", Arial, sans-serif; color: var(--bp-ink); }
.bp-facts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bp-facts li { padding: 3px 8px; border-radius: 6px; background: var(--bp-ground); color: var(--bp-slate); font: 600 12.5px/1.4 "Inter", Arial, sans-serif; }
.bp-check { margin: 10px 0 0 !important; font-size: 13.5px !important; color: var(--bp-muted) !important; }
.bp-go { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin-top: 12px; padding: 0 14px; border: 1px solid var(--bp-tint-line); border-radius: 10px; background: var(--bp-white); color: var(--bp-accent); font: 600 15px/1.2 "Inter", Arial, sans-serif; text-decoration: none; }
.bp-go:hover { color: var(--bp-accent-2); border-color: var(--bp-accent-2); }
.bp-go svg { width: 14px; height: 14px; flex: none; }

/* ---------- before you book ---------- */
.bp-tips { margin: 32px 0 0; padding: 18px 16px; border: 1px solid var(--bp-tint-line); border-radius: 12px; background: var(--bp-tint); }
.bp-tips h2 { margin: 0; font: 700 20px/1.3 "Inter", Arial, sans-serif; letter-spacing: -.015em; color: var(--bp-ink); }
.bp-tips ul { margin: 10px 0 0; padding-left: 20px; }
.bp-tips li { margin: 6px 0 0; font: 400 15px/1.55 "Inter", Arial, sans-serif; color: var(--bp-ink); }

.bp-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--bp-tint-line); font: 400 14px/1.6 "Inter", Arial, sans-serif; color: var(--bp-muted); }
.bp-foot a { color: var(--bp-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bp-foot a:hover { color: var(--bp-accent-2); }
body.bp-page :is(a, button):focus-visible { outline: 3px solid var(--bp-accent); outline-offset: 2px; }

@media (min-width: 700px) {
  .bp-main { padding-top: 12px; }
  .bp-head { padding: 36px 0 18px; }
  .bp-head h1 { font-size: 44px; line-height: 1.1; }
  .bp-lede { font-size: 17px; }
  .bp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .bp-card { padding: 18px 18px 16px; }
  .bp-card .bp-go { margin-top: auto; }
  .bp-card .bp-check { margin-bottom: 12px !important; }
}

/* ---------- wide desktop: content plus a side rail ----------
   The cards take the width two across; the rail carries the section list and
   the questions to ask, sticky beside the list so they stay in reach. */
@media (min-width: 1040px) {
  .bp-main { max-width: 1180px; padding: 12px 32px 48px; }
  .bp-head h1 { font-size: 50px; }
  .bp-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; }
  .bp-groups { grid-column: 1; grid-row: 1 / span 2; }
  .bp-jump { grid-column: 2; grid-row: 1; margin: 28px 0 0; padding: 16px; border: 1px solid var(--bp-line); border-radius: 12px; background: #fff; }
  .bp-jump ul { flex-direction: column; gap: 6px; }
  .bp-jump a { display: flex; width: 100%; }
  .bp-tips { grid-column: 2; grid-row: 2; position: sticky; top: 96px; margin-top: 16px; }
}