:root {
  --paper: #fbf7f0;
  --cream: #f3ecdf;
  --ink: #1c2b2d;
  --pine: #2f5d50;
  --pine-deep: #1e463c;
  --gold: #e8a317;
  --ember: #c4552b;
  --muted: #5c6c69;
  --line: #ded5c6;
  --white: #fffdf9;
  --display: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
  --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 18px 48px rgba(28, 43, 45, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* Focus ring. Gold measured 2.03:1 on paper and 1.85:1 on cream, under the 3:1
   minimum for a focus indicator, so keyboard users had a ring they could barely
   see. Pine is 6.00 to 7.38 across every light surface on the site. It is the
   reverse on the dark band, where pine drops to 2.32 and gold reaches 8.01, so
   that one surface keeps gold. Measured, not eyeballed. */
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--pine); outline-offset: 4px; }
.bigtrip a:focus-visible { outline-color: var(--gold); }
.skip-link { position: fixed; top: -4rem; left: 1rem; z-index: 30; padding: .7rem 1rem; border-radius: 0 0 .4rem .4rem; background: var(--ink); color: var(--paper); font-weight: 800; }
.skip-link:focus { top: 0; }

.site-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(28, 43, 45, .1); background: rgba(251, 247, 240, .95); backdrop-filter: blur(14px); }
.header-inner, .content-wrap, .footer-inner { width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; }
.header-inner { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; flex: 1 1 auto; align-items: center; min-width: 0; gap: .7rem; color: var(--ink); font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; text-decoration: none; white-space: nowrap; }
.brand-name { min-width: 0; }
.brand img { width: 3rem; height: 3rem; flex: 0 0 auto; object-fit: contain; }
.desktop-nav { display: none; align-items: center; gap: 1.6rem; font-size: .88rem; font-weight: 700; }
.desktop-nav a, .contact-link { color: var(--ink); text-decoration: none; }
.desktop-nav a:hover, .contact-link:hover { color: var(--pine); }
.desktop-nav a.nav-cta { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .45rem 1rem; border-radius: .55rem; background: var(--gold); color: var(--ink); font-weight: 800; transition: background .18s ease; }
.desktop-nav a.nav-cta:hover { background: #f2b834; color: var(--ink); }
.contact-link { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: .35rem; font-size: .82rem; font-weight: 850; white-space: nowrap; }
.mobile-nav { position: relative; flex: 0 0 auto; }
.mobile-nav summary { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; border: 1px solid var(--line); border-radius: .35rem; cursor: pointer; color: var(--pine); line-height: 1; list-style: none; }
.mobile-nav summary svg { width: 1.25rem; height: 1.25rem; }
.mobile-nav[open] summary { border-color: var(--pine); background: var(--cream); }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-links { position: absolute; top: calc(100% + .9rem); right: 0; display: grid; width: 15rem; padding: .55rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--white); box-shadow: var(--shadow); }
.mobile-links a { padding: .7rem .8rem; border-radius: .35rem; font-weight: 700; text-decoration: none; }
.mobile-links a:hover { background: var(--cream); }

/* The hero shares the header's paper so the top of the page reads as one
   surface interrupted only by the photo. Gold is reserved for the headline
   marker and the primary button, so the seam is pine: structure, not accent. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--ink); }
.hero-media { position: relative; }
.hero-media::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: .35rem; background: var(--pine); }
.hero-photo { width: 100%; height: clamp(15rem, 64vw, 27rem); object-fit: cover; object-position: 50% 42%; }
.hero-inner { width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; padding: 1.7rem 0 2rem; display: grid; align-items: center; }
.hero h1, h2, h3 { font-family: var(--display); letter-spacing: -.035em; text-wrap: balance; }
.hero h1 { margin: 0; font-size: clamp(2.05rem, 7.4vw, 3.4rem); line-height: 1.02; }
.hero h1 .hl { background: linear-gradient(180deg, rgba(232, 163, 23, 0) 66%, rgba(232, 163, 23, .5) 66%, rgba(232, 163, 23, .5) 94%, rgba(232, 163, 23, 0) 94%); }
.hero-copy-block { max-width: 42rem; }
.hero-copy { max-width: 37rem; margin: .75rem 0 0; color: #3f504e; font-size: clamp(.95rem, 2.8vw, 1.08rem); line-height: 1.45; }
.hero-actions { display: grid; gap: .6rem; margin-top: 1.1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.3rem; border: 0; border-radius: .6rem; font-size: .95rem; font-weight: 750; text-align: center; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--gold); color: var(--ink); box-shadow: 0 2px 12px rgba(232, 163, 23, .35); }
.button-primary:hover { background: #f2b834; }
.button-ghost { box-shadow: inset 0 0 0 1.5px rgba(251, 247, 240, .75); color: var(--paper); }
.button-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--paper); background: rgba(251, 247, 240, .12); }
.button-outline { box-shadow: inset 0 0 0 1.5px var(--pine); color: var(--pine-deep); background: rgba(255, 253, 249, .55); }
.button-outline:hover { background: var(--white); }
.hero-note { max-width: 34rem; margin: .6rem 0 0; color: #4c5e5b; font-size: .84rem; font-weight: 650; }

.home-intro { position: relative; z-index: 1; margin-top: -4.6rem; padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.welcome-card { max-width: 58rem; padding: clamp(1.6rem, 5vw, 3rem); border: 1px solid var(--line); border-top: .45rem solid var(--ember); border-radius: .5rem; background: var(--white); box-shadow: var(--shadow); }
.welcome-card h2 { max-width: 21ch; margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.03; }
.welcome-card p { max-width: 44rem; margin: 1.1rem 0 0; color: var(--muted); font-size: 1.05rem; }
.experience-section { display: grid; overflow: hidden; margin: 1.25rem 0; border: 1px solid var(--line); border-radius: .5rem; background: var(--pine); box-shadow: 0 4px 0 rgba(28, 43, 45, .04); color: var(--paper); }
.experience-section > img { width: 100%; min-height: 15rem; object-fit: cover; }
.experience-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 2.5rem); }
.experience-copy .eyebrow { color: #f6c85f; }
.experience-copy h2 { max-width: 13ch; margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.03; }
.experience-copy p:last-child { max-width: 30rem; margin: 1rem 0 0; color: #dce9df; }
.tbc { display: inline; padding: .05em .2em; border-bottom: 2px dotted var(--ember); border-radius: .15rem; background: #fff0d0; color: #643118; font-family: var(--body); font-size: .86em; font-weight: 750; letter-spacing: 0; }
.route-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
.route-card { min-height: 15rem; padding: clamp(1.5rem, 4vw, 2.15rem); border: 1px solid var(--line); border-radius: .5rem; background: var(--white); box-shadow: 0 4px 0 rgba(28, 43, 45, .04); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.route-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.route-card.guide { border-top: .35rem solid var(--gold); }
.route-card.join { border-top: .35rem solid var(--ember); }
.card-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem; border-radius: 50%; background: var(--cream); color: var(--pine); font-family: var(--display); font-size: 1.5rem; font-weight: 800; }
.route-card h3 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.03; }
.route-card p { max-width: 29rem; margin: .7rem 0 0; color: var(--muted); }
.route-card .arrow { display: inline-block; margin-top: 1.25rem; color: var(--pine); font-weight: 850; }

.page-hero { position: relative; overflow: hidden; padding: clamp(3.75rem, 9vw, 7rem) 0 clamp(3.3rem, 7vw, 5.5rem); background: var(--cream); }
.page-hero .content-wrap { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 .7rem; color: var(--ember); font-size: .75rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.page-hero h1 { max-width: 12ch; margin: 0; font-family: var(--display); font-size: clamp(3rem, 9vw, 5.4rem); letter-spacing: -.04em; line-height: .94; }
.page-hero p:last-child { max-width: 39rem; margin: 1.25rem 0 0; color: var(--muted); font-size: clamp(1.03rem, 2.5vw, 1.2rem); }
.embed-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.guide-lead { display: grid; overflow: hidden; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: .65rem; background: var(--cream); box-shadow: 0 4px 0 rgba(28, 43, 45, .04); }
.guide-lead > img { width: 100%; min-height: 14rem; object-fit: cover; }
.guide-lead-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 4vw, 2.5rem); }
.guide-lead-copy h2 { max-width: 14ch; margin: 0; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.03; }
.guide-lead-copy p:last-child { max-width: 32rem; margin: 1rem 0 0; color: var(--muted); }
.embed-card { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: .65rem; background: var(--white); box-shadow: var(--shadow); }
.embed-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.25rem; padding: .25rem .25rem 1.35rem; }
.embed-toolbar p { margin: 0; color: var(--muted); font-size: .95rem; }
.text-link { color: var(--pine); font-weight: 850; text-underline-offset: .2em; }
.embed-frame { display: block; width: 100%; height: 1400px; border: 0; border-radius: .35rem; background: var(--paper); }
.next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: clamp(1.3rem, 3vw, 2rem); border-radius: .5rem; background: var(--pine); color: var(--paper); }
.next-step h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.05; }
.next-step p { max-width: 34rem; margin: .45rem 0 0; color: #dce9df; }
.next-step .button-ghost { flex: 0 0 auto; }

.site-footer { border-top: 1px solid var(--line); background: #eee5d7; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; padding: 1.35rem 0; color: #43555a; font-size: .88rem; }
.footer-inner p { margin: 0; }
.footer-contact { color: var(--pine); font-weight: 800; }

@media (min-width: 700px) {
  .header-inner { min-height: 5rem; }
  /* The photo stops where every other element on the page stops. It used to
     bleed to the viewport edge, which on a wide screen left it hanging four
     hundred pixels past the column the header, the headline and About all
     share. Below 1120px there is no margin to align to, so nothing changes. */
  .hero-media { position: absolute; z-index: -1; inset: 0 0 0 auto;
                right: calc((100% - min(1120px, 100% - 2.5rem)) / 2);
                width: calc(min(1120px, 100% - 2.5rem) * .46); }
  .hero-media::after { top: 0; right: auto; bottom: 0; left: 0; width: .35rem; height: auto; }
  /* Anchored to the left edge of the photo, not its centre. The desktop column
     is narrow enough that a centred crop cut the girl in the green hoodie out of
     frame, leaving a row of boys. The left edge keeps her in every time. */
  /* From 700px up the photo is a narrow column, so it uses a crop made for
     it: the four left-hand children, framed deliberately rather than
     sliced out of a seven-child banner. Centred, so the trimming that cover
     still does falls evenly on the two outer children instead of removing
     one. Below 700px the full banner is used and is unaffected. */
  .hero-photo { height: 100%; object-position: 50% 45%; }
  .hero-inner { min-height: 29rem; padding: 3rem 0 3.25rem; }
  .hero-copy-block { max-width: 51%; }
  /* Two-column range: the copy column is about half the viewport, so the
     headline tracks the viewport (4.25vw) instead of sitting at the cap. It
     reaches 3.4rem exactly where the content wrap stops growing, keeping the
     headline at three balanced lines across the whole range. */
  .hero h1 { font-size: clamp(2.05rem, 4.25vw, 3.4rem); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
  .experience-section, .guide-lead { grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr); }
  .experience-section > img, .guide-lead > img { height: 100%; }
  .route-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 850px) {
  .brand { flex: 0 1 auto; }
  .contact-link { display: inline-flex; }
  .mobile-nav { display: none; }
  .desktop-nav { display: flex; }
}

@media (max-width: 849px) {
  /* The compact bar has two fixed jobs: identity and a reliable menu trigger.
     Contact lives in that menu so it cannot compete for horizontal space. */
  .contact-link { display: none; }
}

@media (max-width: 479px) {
  .header-inner { gap: .65rem; }
  .brand { gap: .55rem; }
  .brand-break { display: block; }
  .brand img { width: 2.65rem; height: 2.65rem; }
}

@media (max-width: 699px) {
  .embed-frame { height: 1000px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.no-break { white-space: nowrap; }



/* --- "What is Cub Scouts" explainer -------------------------------------- */
.learn { background: var(--paper, #FBF7F0); padding: clamp(2rem, 4.5vw, 3rem) 0; scroll-margin-top: 5rem; }
.learn h2 { max-width: 30ch; margin: 0 0 .6rem; font-family: var(--display); font-size: clamp(1.5rem, 4.2vw, 2.7rem); letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
.learn-lede { max-width: 56ch; margin: 0 0 clamp(1.35rem, 3vw, 2rem); color: #43555A; font-size: clamp(.96rem, 1.5vw, 1.08rem); }
.learn-grid { display: grid; grid-template-columns: 1fr; gap: 1.15rem 2rem; }
@media (min-width: 560px) { .learn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .learn-grid { grid-template-columns: repeat(4, 1fr); } }
.learn-grid article { padding-top: .75rem; border-top: 3px solid var(--gold, #E8A317); }
.learn-grid h3 { margin: 0 0 .35rem; font-family: var(--display); font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.learn-grid p { max-width: 40ch; margin: 0; color: #43555A; font-size: .94rem; line-height: 1.48; }
.learn-grid strong { color: var(--ink, #1C2B2D); }

/* --- Below-the-fold guide ------------------------------------------------ */
.grade-path, .how-it-works { padding: clamp(2rem, 4.5vw, 3rem) 0; background: var(--cream); }
.grade-path h2, .activities h2, .how-it-works h2, .questions h2, .closing-invitation h2 { max-width: 24ch; margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 4.2vw, 2.7rem); letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
.grade-track { position: relative; display: flex; justify-content: space-between; gap: .3rem; margin: clamp(1.5rem, 4vw, 2.4rem) 0 0; padding: 0; list-style: none; }
.grade-track::before { content: ""; position: absolute; top: calc(clamp(2.7rem, 10vw, 3.6rem) / 2); right: 8%; left: 8%; border-top: 3px dashed rgba(47, 93, 80, .35); }
.grade-stop { position: relative; display: grid; flex: 1 1 0; min-width: 0; justify-items: center; text-align: center; }
.grade-badge { display: grid; place-items: center; width: clamp(2.7rem, 10vw, 3.6rem); height: clamp(2.7rem, 10vw, 3.6rem); border-radius: 50%; font-family: var(--display); font-size: clamp(1.05rem, 3.6vw, 1.4rem); font-weight: 800; letter-spacing: -.02em; box-shadow: 0 2px 0 rgba(28, 43, 45, .1); }
.grade-stop:nth-child(3n + 1) .grade-badge { background: var(--gold); color: var(--ink); }
.grade-stop:nth-child(3n + 2) .grade-badge { background: var(--ember); color: var(--white); }
.grade-stop:nth-child(3n) .grade-badge { background: var(--pine); color: var(--white); }
.grade-stop h3 { margin: .55rem 0 0; font-size: clamp(1.02rem, 3.2vw, 1.5rem); letter-spacing: -.02em; line-height: 1; }
.grade-when { margin: .2rem 0 0; color: var(--muted); font-size: clamp(.55rem, 1.7vw, .7rem); font-weight: 800; letter-spacing: .03em; line-height: 1.2; text-transform: uppercase; }

@media (max-width: 379px) {
  .grade-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .5rem; }
  .grade-track::before { display: none; }
  .grade-when { display: none; }
}

.activities { padding: clamp(2rem, 4.5vw, 3.25rem) 0; background: var(--pine); color: var(--paper); }
.activities .eyebrow { color: #f6c85f; }
.section-lede { max-width: 51ch; margin: .65rem 0 0; color: #43555a; font-size: clamp(.96rem, 1.5vw, 1.08rem); }
.activities .section-lede { color: #dce9df; }
/* Every card the same size. grid-auto-rows: 1fr makes each row match the
   tallest card in it, and the card, the flipper and both faces then stretch to
   fill, so a two line title cannot make one card taller than its neighbours. */
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .8rem; margin-top: clamp(1.1rem, 3vw, 1.6rem); }
/* Tap a card to turn it over. The toggle is a real button laid over the whole
   card rather than a click handler on the card itself, so it is reachable by
   keyboard and announced as a control. It sits outside the rotating element,
   which means it stays clickable whichever way round the card is facing. */
.activity-card { position: relative; display: grid; min-width: 0; perspective: 900px; }
.flip { position: relative; display: grid; height: 100%; transition: transform .5s cubic-bezier(.2, .7, .3, 1); transform-style: preserve-3d; }
.activity-card[data-flipped="true"] .flip { transform: rotateY(180deg); }
.flip-face { position: relative; display: flex; grid-area: 1 / 1; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid rgba(251, 247, 240, .18); border-radius: .7rem; background: rgba(12, 43, 36, .45); backface-visibility: hidden; }
.flip-back { align-items: center; justify-content: center; padding: 1rem; background: var(--pine-deep); text-align: center; transform: rotateY(180deg); }
.flip-back p { margin: 0; color: var(--paper); font-size: clamp(.86rem, 2.3vw, 1rem); line-height: 1.45; text-wrap: balance; }
.flip-toggle { position: absolute; z-index: 2; inset: 0; padding: 0; border: 0; border-radius: .7rem; background: transparent; cursor: pointer; }
.flip-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* Without a cue a card that turns over just looks like a card, so nobody tries
   it. A small badge on the corner is enough of a hint, and it lifts on hover
   where a pointer exists to make the invitation clearer. */
.flip-hint { position: absolute; top: .55rem; right: .55rem; z-index: 1; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: rgba(12, 43, 36, .72); color: var(--paper); transition: background .18s ease, transform .18s ease; }
.flip-hint svg { width: .95rem; height: .95rem; }
.activity-card:hover .flip-hint { background: var(--gold); color: var(--ink); transform: scale(1.08); }
.flip-back-title { margin-bottom: .35rem; color: var(--gold); font-family: var(--body); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
/* A card that turns over is decoration on top of the meaning, not the meaning
   itself, so honour a request for less movement and simply swap the faces. */
@media (prefers-reduced-motion: reduce) { .flip { transition: none; } }
.activity-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.activity-card h3 { margin: auto 0 0; padding: .6rem .8rem .72rem; font-family: var(--display); font-size: clamp(1rem, 2.6vw, 1.3rem); letter-spacing: -.02em; line-height: 1.12; }
.photo-placeholder { display: grid; place-content: center; gap: .35rem; aspect-ratio: 4 / 3; padding: 1rem; text-align: center; background: repeating-linear-gradient(-45deg, rgba(232, 163, 23, .22) 0 14px, rgba(232, 163, 23, .08) 14px 28px); outline: 2px dashed var(--gold); outline-offset: -8px; }
.ph-tag { color: var(--gold); font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.ph-caption { color: var(--paper); font-family: var(--display); font-size: clamp(1rem, 2.4vw, 1.2rem); }
.how-it-works { background: var(--paper); }

.questions { padding: clamp(2rem, 4.5vw, 3rem) 0; background: var(--paper, #FBF7F0); }
/* align-items: start stops an opened answer from stretching its row-mate into
   a tall, mostly empty card on the two-column desktop layout. */
.questions-list { display: grid; align-items: start; gap: .55rem; margin: clamp(1.25rem, 3vw, 1.8rem) 0 0; }
.questions-list details { border-left: .25rem solid var(--pine); border-radius: 0 .4rem .4rem 0; background: var(--white); box-shadow: 0 3px 0 rgba(28, 43, 45, .04); }
.questions-list summary { position: relative; padding: .85rem 2.5rem .85rem 1rem; cursor: pointer; font-family: var(--display); font-size: clamp(1.08rem, 2.5vw, 1.35rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; list-style: none; }
.questions-list summary::-webkit-details-marker { display: none; }
.questions-list summary::after { content: "+"; position: absolute; top: 50%; right: 1rem; color: var(--ember); font-family: var(--body); font-size: 1.25rem; font-weight: 800; line-height: 1; transform: translateY(-50%); }
.questions-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.questions-list p { max-width: 55ch; margin: 0; padding: 0 1rem .9rem; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.guide-line { margin: 1.4rem 0 0; color: #43555A; font-size: .95rem; }

.closing-invitation { padding: clamp(2rem, 4.5vw, 3rem) 0; background: var(--ember); color: var(--white); }
.closing-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.closing-invitation .eyebrow { color: #ffe1b8; }
.closing-invitation .button-primary { box-shadow: 0 2px 12px rgba(28, 43, 45, .25); }
.closing-invitation h2 { max-width: 24ch; }
.closing-note { margin: .6rem 0 0; color: #ffe1b8; font-family: var(--body); font-size: 1.2rem; font-weight: 700; }
.closing-invitation .button { flex: 0 0 auto; }

@media (min-width: 620px) {
  .questions-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .activity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Meeting rhythm and place. Deliberately rhythms, not dates, so the page stays
   true without anyone maintaining it. */
.meeting-facts { display: grid; gap: 0; margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0; border-top: 1px solid var(--line,#E2DCD0); }
.meeting-facts > div { display: grid; gap: .15rem .9rem; padding: .95rem 0; border-bottom: 1px solid var(--line,#E2DCD0); }
@media (min-width: 640px) { .meeting-facts > div { grid-template-columns: 11rem 1fr; align-items: baseline; } }
.meeting-facts dt { font-family: var(--display); font-size: 1.02rem; font-weight: 700; color: var(--ink,#1C2B2D); }
.meeting-facts dd { margin: 0; color: #43555A; line-height: 1.55; }

/* A named neighbour, which is the only genuinely local thing on the page. It
   sits between the pitch and the explanation deliberately: it is the hinge from
   why to what. */
.neighbor { background: var(--paper, #FBF7F0); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.neighbor-card {
  max-width: 40rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #fff; border: 1px solid var(--line, #E2DCD0);
  border-left: 4px solid var(--gold, #E8A317); border-radius: .5rem;
}
.neighbor-card h2 { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.1rem); letter-spacing: -.02em; margin: 0 0 .9rem; }
.neighbor-card p { margin: 0 0 .95rem; color: #43555A; line-height: 1.62; }
.neighbor-card p:last-child { margin-bottom: 0; }
.neighbor-signoff { font-weight: 600; color: var(--ink, #1C2B2D) !important; }
.neighbor-signoff a { color: var(--pine, #2F5D50); font-weight: 800; }

/* Photo credit. NEAM gave permission on the understanding it would be credited. */
.photo-credit { width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; padding: 0 0 1.35rem; color: #43555a; font-size: .78rem; line-height: 1.5; opacity: 1; }

.footer-social { color: var(--pine, #2F5D50); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(47,93,80,.35); }
.footer-social:hover { border-bottom-color: var(--pine, #2F5D50); }

/* Which pack, and which schools. This is a recognition test, not prose: a
   parent should pass it in about two seconds. The school names lead, set as a
   roster to be found, not read, and the geography is context beside them.
   Cream band so the roster card is the brightest thing in the block. The
   heading measure (22ch) is sized to break the current heading as two balanced
   lines that fill the intro column, not as a narrow strip. */
.locality { background: var(--cream, #F3ECDF); padding: clamp(2rem, 4.5vw, 3rem) 0 clamp(2.25rem, 4.5vw, 3.25rem); }
.locality-grid { display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: center; }
.locality-intro h2 { max-width: 22ch; margin: 0; font-family: var(--display); font-size: clamp(1.7rem, 4.2vw, 2.5rem); letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
.locality-detail { max-width: 34rem; margin: .85rem 0 0; color: #43555A; line-height: 1.55; }

/* The roster. White card, pine cap, one school per row. Parents scan for their
   own school name, so each name is display-serif bold on its own line. */
.school-roster { padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.2rem, 3vw, 1.7rem) clamp(.9rem, 2.5vw, 1.25rem); background: var(--white, #FFFDF9); border: 1px solid var(--line, #DED5C6); border-top: .35rem solid var(--pine, #2F5D50); border-radius: .5rem; box-shadow: 0 4px 0 rgba(28, 43, 45, .05); }
.roster-label { margin: 0 0 .3rem; color: var(--muted, #5C6C69); font-size: .72rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.schools { margin: 0; padding: 0; list-style: none; }
.schools li { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--line, #DED5C6); color: var(--ink, #1C2B2D); font-family: var(--display); font-size: clamp(1.12rem, 2.8vw, 1.3rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.schools li:last-child { border-bottom: 0; padding-bottom: .2rem; }
.schools li::before { content: ""; flex: 0 0 auto; width: .48rem; height: .48rem; border-radius: .1rem; background: var(--gold, #E8A317); transform: rotate(45deg); }

/* The other pack. Present and honest, but subordinate: small, muted, below a
   hairline, mirroring the heading's question so the either/or reads instantly. */
.locality-note { max-width: 62ch; margin: clamp(1.5rem, 3.5vw, 2rem) 0 0; padding-top: 1rem; border-top: 1px solid rgba(28, 43, 45, .14); color: #4c5e5b; font-size: .92rem; line-height: 1.55; }
.locality-note a { color: var(--pine, #2F5D50); font-weight: 800; text-underline-offset: .2em; }

@media (min-width: 760px) {
  .locality-grid { grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .92fr); }
}

/* Time boxed fair notice. Sits in the flow under the header rather than
   overlaying, so it never covers content or fights the thumb zone on a phone.
   Cream with a gold trim line rather than a solid gold slab: the old slab was
   the loudest thing on the screen and stole the primary button's color. The
   bold lead does the announcing; the trim keeps it clearly not-the-header. */
.fair-notice { background: var(--cream, #F3ECDF); color: var(--ink, #1C2B2D); border-top: 3px solid var(--gold, #E8A317); border-bottom: 1px solid rgba(28,43,45,.12); }
/* Centred, with the close button pulled out of the flow so the sentence sits
   in the middle of the bar rather than in the middle of what is left over. */
.fair-inner { position: relative; width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .7rem 2.75rem; text-align: center; }
.fair-inner p { margin: 0; font-size: .92rem; line-height: 1.45; }
/* The headline sits on its own line and the follow-up beneath it, so the bar
   reads as a statement plus a nudge rather than one long run of text. */
.fair-inner strong { display: block; font-weight: 800; }
.fair-close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); flex: 0 0 auto; width: 2rem; height: 2rem; border: 1px solid rgba(28,43,45,.3); border-radius: .3rem; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.fair-close:hover { background: rgba(28,43,45,.08); }
.fair-close:focus-visible { outline: 2px solid var(--ink, #1C2B2D); outline-offset: 2px; }
@media (max-width: 520px) { .fair-inner p { font-size: .86rem; } }


/* About block. One home for every pack-specific fact: which pack, which days,
   which schools, where. Prose plus the meeting-facts rows, kept plain. */
/* Matches the shared section-heading rule above. This is the first heading a
   reader meets after the hero, so it must not sit a size below the rest. */
.locality h2 { max-width: 22ch; margin: 0 0 .55rem; font-family: var(--display); font-size: clamp(1.5rem, 4.2vw, 2.7rem); letter-spacing: -.03em; line-height: 1.02; text-wrap: balance; }
.locality-lede { max-width: 58ch; margin: 0 0 1rem; color: #43555A; line-height: 1.65; }
.locality-lede strong { color: var(--ink, #1C2B2D); }
.locality-lede a { color: var(--pine, #2F5D50); font-weight: 700; }
.schools-line { max-width: 62ch; margin: 1.1rem 0 0; color: #43555A; font-size: .95rem; line-height: 1.6; }
.schools-line .schools-label { font-weight: 700; color: var(--ink, #1C2B2D); }

/* On a phone the column is already narrow enough to control measure, so a ch
   cap only forces avoidable wraps. Caps apply from the tablet range up, where
   the column is wide enough that a headline could otherwise run too long. */
@media (max-width: 699px) {
  .learn h2,
  .grade-path h2, .activities h2, .how-it-works h2, .questions h2, .closing-invitation h2,
  .locality h2 { max-width: none; }
}

@media print {
  .skip-link, .fair-notice, .mobile-nav { display: none; }
  .activities, .closing-invitation { background: none; color: var(--ink); }
  .activities h3, .closing-invitation h2 { color: var(--ink); }
}

/* Time boxed events. Each entry carries its own expiry and the block deletes
   itself once the last one passes, so a neglected page shows nothing rather
   than advertising an event that already happened. Date and text share one
   line: a separate date column cost more width than the dates were worth. */
.upcoming { margin: 0 0 1.4rem; padding: .9rem 1.1rem .95rem; border-left: .25rem solid var(--ember); border-radius: 0 .4rem .4rem 0; background: var(--white); box-shadow: 0 3px 0 rgba(28, 43, 45, .04); }
.upcoming-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; color: var(--ember); font-family: var(--body); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.upcoming-icon { width: .95rem; height: .95rem; flex: 0 0 auto; }
.upcoming-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.upcoming-list li { color: #43555A; font-size: .95rem; line-height: 1.45; }
.upcoming-when { color: var(--ink); font-weight: 700; }

/* The picture wrapper exists only to offer a modern format. display: contents
   removes it from layout entirely, so every rule already written against the
   img keeps applying and nothing about the hero or the cards had to change. */
picture { display: contents; }

/* This year's Big Trip. A dark band dropped between the photo cards and the
   explainer: the one place on the page that is pure "look what you get". The
   stars are two radial-gradient layers rather than an image, so the band costs
   no extra request and cannot shift the layout. It self expires on the same
   mechanism as the events list, so nobody has to remember to remove it. */
.bigtrip { scroll-margin-top: 5.5rem; position: relative; overflow: hidden; margin: 0; padding: 2.4rem 0; background: #0e1b2a; color: #e9eff6; }
.bigtrip-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
/* Legibility wash. The dome photo is bright violet on the left where the
   headline sits, so the text needs a real scrim, not a token tint. Heavier on
   the left where the copy is, lighter on the right so the dome still reads. */
.bigtrip::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(6, 9, 22, .90) 0%, rgba(6, 9, 22, .78) 40%, rgba(6, 9, 22, .34) 70%, rgba(6, 9, 22, .18) 100%);
}
.bigtrip-inner { position: relative; z-index: 2; width: min(1120px, calc(100% - 2.5rem)); margin: 0 auto; display: grid; gap: .35rem; }
@media (min-width: 860px) { .bigtrip-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2.5rem; } }
.bigtrip-eyebrow { margin: 0; color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.bigtrip-title { margin: .15rem 0 .35rem; font-family: var(--display); font-size: clamp(1.4rem, 3.2vw, 1.95rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.bigtrip-copy { margin: 0; max-width: 46rem; color: #c3d2e2; font-size: .95rem; line-height: 1.6; }
.bigtrip-meta { margin: .9rem 0 0; color: #9fb3c8; font-size: .85rem; }
@media (min-width: 860px) {
  .bigtrip-eyebrow, .bigtrip-title, .bigtrip-copy { grid-column: 1; }
  .bigtrip-badge { grid-column: 2; grid-row: 1 / span 3; }
  .bigtrip-meta { grid-column: 1; }
}
.bigtrip-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .9rem 1.4rem; border: 1px solid rgba(232, 163, 23, .45); border-radius: .8rem; background: rgba(232, 163, 23, .09); text-align: center; white-space: nowrap; }
.bigtrip-badge .badge-day { font-family: var(--display); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--gold); }
.bigtrip-badge .badge-month { font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #e9eff6; }
.bigtrip-badge .badge-year { font-size: .72rem; color: #9fb3c8; }
.bigtrip a { color: var(--gold); font-weight: 800; text-underline-offset: .2em; }

/* The one entry in Coming up that gets an icon, because it is the one entry
   that is pure fun rather than a thing to turn up to. Decorative: the text
   already says "Stars & Space", so it is aria-hidden and carries no meaning. */
.upcoming-planet { margin-right: .35rem; font-size: 1.1em; line-height: 1; }

/* The already-renewed warning, moved inside the step and above its button.
   Below the button it was decorative; above it, it is the last thing read
   before a parent risks paying the $160 membership a second time. */
.aside-inline { margin: 0 0 1.2rem; }