/* Design tokens live in tokens.css — link it BEFORE this file.
   They were duplicated here; the copies had drifted on --section-y, --container
   and --transition, so the single source of truth now wins. */


/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--gs-white); color:var(--gs-black);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}

h1,h2,h3,h4{margin:0 0 var(--space-5); font-family:var(--font-display); text-wrap:balance}
/* Each heading declares a plain fallback size first, then the fluid one.
   If the fluid value ever fails to parse, headings degrade to something large
   instead of collapsing to body size. */
h1{font-size:2.25rem; font-size:var(--fs-h1); font-weight:900; line-height:.92; letter-spacing:-.028em}
/* Fallback size dropped to 1.75rem to sit inside the new 28–40 range, and the
   tracking eased again to -.018em: negative tracking that reads as confident at
   64px reads as cramped at 40px, and Urbane Rounded is wider than the Nunito
   these values were originally set against. */
/* `pretty`, NOT `balance`. The group rule above sets balance, which is right for
   the one big H1 but wrong here: balance splits a wrapping heading into two even
   lines, so an H2 ended 200–320px short of the paragraph directly beneath it and
   looked misaligned. `pretty` fills each line to the measure and only tidies the
   last line to avoid an orphan. Older browsers fall back to `normal`, which also
   fills — so the width matches either way. */
h2{
  font-size:1.75rem; font-size:var(--fs-h2); font-weight:900;
  line-height:1.06; letter-spacing:-.018em; text-wrap:pretty;
}
h3{font-size:1.375rem; font-size:var(--fs-h3); font-weight:700; line-height:1.15; letter-spacing:-.012em}
h4{font-family:var(--font-sans); font-size:1.25rem; font-weight:700}
p{margin:0 0 var(--space-4); max-width:var(--measure)}
a{color:var(--gs-ocean); text-underline-offset:3px}
a:hover{color:var(--gs-black)}
:focus-visible{outline:3px solid var(--gs-ocean); outline-offset:3px}

.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--gs-star);
  color:var(--gs-black); padding:var(--space-3) var(--space-4); font-weight:700}
.skip:focus{left:var(--space-4); top:var(--space-2)}

.eyebrow{
  font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 var(--space-3);
}
/* Was 58ch — same rendered width, but now shares one token with .section h2 so
   a heading and the lede below it wrap to the same measure. See tokens.css for
   why this can't be expressed in `ch` on both. */
.lede{font-size:var(--fs-body-lg); max-width:var(--measure-lede); line-height:1.6}

/* ============================================================
   SHAPES — Frame: concave corners, cut with radial masks.
   ============================================================ */
.frame{
  --c:var(--frame-cut);
  -webkit-mask:
    radial-gradient(var(--c) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--c) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--c) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--c) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
  mask:
    radial-gradient(var(--c) at 0 0,#0000 98%,#000) 0 0/51% 51% no-repeat,
    radial-gradient(var(--c) at 100% 0,#0000 98%,#000) 100% 0/51% 51% no-repeat,
    radial-gradient(var(--c) at 0 100%,#0000 98%,#000) 0 100%/51% 51% no-repeat,
    radial-gradient(var(--c) at 100% 100%,#0000 98%,#000) 100% 100%/51% 51% no-repeat;
}

/* .arch and .leaf were tried here and removed — Frame is the only decorative
   silhouette on the site. The Promise/Law cards use a plain 8px radius and the
   contact cards are square. Keeping one shape means Frame reads as deliberate
   rather than as one option among several. */

/* ============================================================
   BUTTONS — flat capsules.
   Girl Scout Green carries BLACK text (7.65:1); white fails at 2.75:1.
   ============================================================ */
.btn{
  display:inline-block; border:0; cursor:pointer;
  font-family:var(--font-sans); font-size:1.0625rem; font-weight:700;
  text-decoration:none; padding:var(--space-3) var(--space-6);
  border-radius:var(--pill);
  background:var(--gs-green); color:var(--gs-black);
  transition:background var(--transition), color var(--transition);
}
.btn:hover{background:var(--gs-forest); color:var(--gs-white)}
.btn--dark{background:var(--gs-ocean); color:var(--gs-white)}
.btn--dark:hover{background:var(--gs-black); color:var(--gs-white)}
.btn--onGreen{background:var(--gs-black); color:var(--gs-white)}
.btn--onGreen:hover{background:var(--gs-white); color:var(--gs-black)}

/* Outline variant — quieter than the solid-green primary, for CTAs that
   shouldn't compete with it (e.g. two actions on one event card). Uses the
   secondary-button tokens from tokens.css. */
.btn--secondary{
  background:var(--color-btn-secondary-bg);
  color:var(--color-btn-secondary-text);
  border:2px solid var(--color-btn-secondary-border);
  padding:calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
}
.btn--secondary:hover{background:var(--gs-forest); color:var(--gs-white); border-color:var(--gs-forest)}

/* ============================================================
   UTILITY BAR — required council links
   ============================================================ */
.utility{background:var(--gs-ocean); color:var(--gs-white); font-size:var(--fs-small)}
.utility .container{
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-5);
  align-items:center; justify-content:flex-end; min-height:42px; padding-block:var(--space-2);
}
.utility a{color:var(--gs-white); text-decoration:none; font-weight:600}
.utility a:hover{color:var(--gs-star); text-decoration:underline}
.utility span[aria-hidden]{color:var(--gs-star); opacity:.55}

/* ============================================================
   MASTHEAD + NAV
   ============================================================ */
.masthead{background:var(--gs-white)}
.masthead .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-5); min-height:88px; padding-block:var(--space-3);
}
.lockup{display:flex; align-items:center; gap:var(--space-4); text-decoration:none; color:inherit}
/* Trefoil. Brand guide: may appear in any brand colour, minimum size 30px,
   and needs clear space around it — hence the gap above, not a tighter one. */
.lockup .mark{flex:0 0 auto; height:46px; width:auto}
.lockup .name{
  font-family:var(--font-display); font-weight:900; font-size:1.5rem;
  line-height:1; letter-spacing:-.03em; color:var(--gs-ocean);
}
.lockup .unit{
  font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gs-forest);
}

/* Icon-only hamburger. 44px min tap target per WCAG target-size guidance,
   built from padding around a 24px svg rather than a fixed box, so the
   focus ring (below) hugs the padded square instead of the bare icon. */
.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; background:none; color:var(--gs-black);
  border-radius:var(--radius-md); padding:var(--space-3);
  flex:0 0 auto; margin-inline-start:calc(var(--space-3) * -1);
}
.nav-toggle:hover{background:var(--color-bg-sky)}
.nav-toggle:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}
.nav-toggle-icon{display:block}
/* Mirrors .nav-toggle's footprint so .lockup centers against the true
   width of the bar, not just the space left of the nav. Hidden on desktop
   alongside .nav-toggle — see the two breakpoints below. */
.nav-toggle-spacer{flex:0 0 auto; width:calc(24px + var(--space-3) * 2); margin-inline-end:calc(var(--space-3) * -1)}

.nav ul{list-style:none; margin:0; padding:0}
.nav > ul{display:flex; flex-wrap:wrap; gap:var(--space-1)}
.nav a{
  position:relative; display:block; padding:var(--space-3);
  font-weight:600; text-decoration:none; color:var(--gs-black);
}
.nav a:hover{color:var(--gs-ocean)}
/* Straight indicator — square ends, no radius. */
.nav a[aria-current="page"]{color:var(--gs-ocean); font-weight:700}
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:var(--space-3); right:var(--space-3); bottom:0;
  height:4px; background:var(--gs-green);
}
.nav .has-sub > a .caret{color:var(--gs-forest); font-size:.7em; margin-left:.35em}

/* Nav breakpoint is 1120px, not the original 1000px. Six top-level items plus
   the lockup need ~703px of nav width; the container only supplies that above
   ~1071px, so the old breakpoint left a band — including 1024px, iPad
   landscape — where the nav silently wrapped to a second row. Set to 1120px
   rather than 1075px so there's ~50px of slack for font-substitution and
   measurement error. Real laptops (1280 and up) are unaffected; tablets and
   small windows get the hamburger, which suits them better anyway.
   If you add a seventh nav item, re-check this number. */
@media (max-width:1120px){
  .nav{display:none; width:100%; padding-bottom:var(--space-4)}
  .nav.is-open{display:block}
  .nav > ul{flex-direction:column; gap:0}
  .nav > ul > li + li{border-top:1px solid var(--gs-sky)}
  .nav a{padding:var(--space-3) var(--space-2)}
  .nav a[aria-current="page"]{padding-left:var(--space-4)}
  .nav a[aria-current="page"]::after{
    left:0; right:auto; top:var(--space-2); bottom:var(--space-2); width:4px; height:auto;
  }
  .nav .sub{padding-left:var(--space-5)}
  .nav .sub a{font-weight:500}

  /* Condensed mobile masthead: hamburger left, single-line lockup centered
     against the spacer's matching width, "Service Unit 201" dropped (the
     hero repeats the full name right below, so the second line was pure
     duplication at this width). Row order is source order — toggle, lockup,
     spacer — so no explicit `order` is needed. */
  .masthead .container{
    flex-wrap:wrap; min-height:auto; padding-block:var(--space-2);
  }
  .lockup{flex:1 1 auto; justify-content:center; gap:var(--space-2)}
  .lockup .mark{height:28px}
  .lockup .name{font-size:1.0625rem}
  .lockup .unit{display:none}
}
@media (min-width:1121px){
  .nav-toggle,
  .nav-toggle-spacer{display:none}
  .nav .has-sub{position:relative}
  /* The panel must sit FLUSH against the bottom of the parent link — top:100%
     with no margin. An earlier version had margin-top:8px, which left a strip
     that belonged to neither the link nor the panel: dragging the cursor down
     to a submenu item crossed it, :hover went false, and the menu closed before
     you could click. Use the panel's own padding for breathing room instead. */
  .nav .sub{
    display:none; position:absolute; top:100%; left:0; min-width:220px;
    padding:var(--space-2) 0;
    background:var(--gs-white); box-shadow:var(--shadow-md); z-index:30;
  }
  .nav .has-sub:hover > .sub,
  .nav .has-sub:focus-within > .sub,
  .nav .has-sub.is-open > .sub{display:block}
  .nav .sub a{padding:var(--space-3) var(--space-4); white-space:nowrap}
}

/* ============================================================
   HERO
   The wordmark is now real HTML type. The page background is Sky
   #a0def1 — the exact same value as the sky inside the SVG — so the
   illustration's sky merges upward into the page and the type reads
   as sitting across the artwork. No overlay, no scrim, no gradient:
   the sky is a flat solid, so contrast is fixed and reliable.
   ============================================================ */
.hero{background:var(--gs-sky); padding-top:var(--space-8); overflow:hidden}
/* Below the nav breakpoint the masthead is already shorter (condensed
   lockup, no second line), so the hero doesn't need as much of its own
   top padding to avoid feeling cramped against it. Pulling this in keeps
   the two blocks reading as one continuous unit instead of two stacked
   banners. */
@media (max-width:1120px){
  .hero{padding-top:var(--space-5)}
}
.hero-copy{text-align:center; padding-bottom:var(--space-7)}
/* This is the only caps H1 on the site — it stands in for the wordmark, where
   the interior pages use sentence-case titles like "Fall Product Program".
   Caps therefore need two overrides on top of the base h1:
   - line-height, because caps have no descenders and .92 leaves the block
     sitting visibly high in its own space;
   - letter-spacing, because caps take negative tracking far worse than mixed
     case does. -.028em is right for "Fall Product Program" and cramped for
     "BENICIA GIRL SCOUTS".
   Keep text-transform here rather than typing caps into the markup, so the
   heading is still announced as words. */
.hero-copy h1{
  color:var(--gs-ocean); margin:0 auto var(--space-4); max-width:none;
  text-transform:uppercase; line-height:1; letter-spacing:var(--ls-h1-caps);
}
.hero-tagline{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.1875rem,2vw,1.625rem); line-height:1.15; letter-spacing:-.016em;
  color:var(--gs-forest); margin:0 auto var(--space-6); max-width:none;
}
.hero-copy > p:last-child{max-width:none; margin:0}
.notice{
  display:inline-block; background:var(--gs-white); color:var(--gs-black);
  border-radius:var(--pill); padding:var(--space-4) var(--space-8);
  font-size:var(--fs-body); font-weight:600;
}
/* v5 is a true 4:1 export, so no CSS cropping is needed — 360px tall on a
   1440px laptop. The earlier object-fit crop has been REMOVED on purpose:
   now that the art is tightly cropped, any further trim from the top would
   slice through the palm fronds. Natural height only. */
.hero-art{width:100%; height:auto; margin-bottom:-1px}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding-block:var(--section-y)}
.section--sky{background:var(--gs-sky)}
.section--seafoam{background:var(--gs-seafoam)}

/* MID-TONE BANDS — River and Violet. These are not pastels and cannot inherit
   the usual text roles. Measured:
                     black      white       Ocean   Forest  Star Green
     River #1496d4   6.34 PASS  3.31 large  2.75 ✗  2.64 ✗  2.64 ✗
     Violet #9e5fd6  5.06 PASS  4.15 large  2.20 ✗  2.10 ✗  3.30 large
   So every colour the site normally uses for headings, eyebrows and links fails
   on both. Body copy, eyebrows and links are forced to black; links also carry a
   permanent underline because colour alone can no longer mark them; the focus
   ring switches to black (Ocean is under the 3:1 UI minimum on both).
   The H2 is white, which is legal ONLY as large text — see the note further down
   where that rule lives. Adding a third mid-tone means measuring it first. */
.section--river{background:var(--gs-river)}
.section--violet{background:var(--gs-violet)}
.section--river,
.section--violet{color:var(--gs-black)}
.section--green{background:var(--gs-green); color:var(--gs-black)}

/* Section backgrounds are what separate one block from the next, so no two
   adjacent sections may share a background — that is what the old .rule
   dividers were compensating for. Never put Sky next to Sea Foam either: every
   pastel in this palette sits within ~1.3:1 of every other, so two touching
   tints read as an accident rather than a deliberate change. Always alternate
   through white. */
.section .eyebrow{color:var(--gs-forest)}
/* Long headings wrap on the same measure as the lede beneath them rather than
   running the full 1116px container. Short headings are unaffected — max-width
   only bites once the text is long enough to reach it. */
.section h2{color:var(--gs-ocean); max-width:var(--measure-lede)}
.section--green .eyebrow{color:var(--gs-black); opacity:.8}  /* .7 measured 4.96:1 on green — thin margin over AA */
.section--green h2{color:var(--gs-black)}

/* Mid-tone overrides MUST live here, below `.section .eyebrow` and
   `.section h2`. `.section--river .eyebrow` and `.section .eyebrow` have
   identical specificity (0,2,0), so whichever comes last wins — placed above the
   base rules they were silently ignored and the eyebrow stayed Forest Green, the
   H2 stayed Ocean, both on a background where they fail contrast.
   Same trap applies to any future `.section--*` text colour. */
.section--river .eyebrow,
.section--violet .eyebrow,
.section--river li::marker,
.section--violet li::marker{color:var(--gs-black)}

/* Black H2 on the two mid-tone bands. These were white, which measured 3.31:1 on
   River and 4.15:1 on Violet — legal as LARGE text only, and only for as long
   as --fs-h2 stayed above 24px. That margin has since thinned: --fs-h2's lower
   bound went from 2rem (32px) to 1.75rem (28px) when the scale came down for
   Urbane Rounded, leaving 4px of headroom before the white became a straight
   AA failure at narrow widths.
   Black removes the cliff entirely — 6.34:1 on River, 5.06:1 on Violet, both
   passing AA as body text at any size, so the rule no longer depends on a
   font-size floor holding. Everything else on these bands was already black. */
.section--river h2,
.section--violet h2{color:var(--gs-black)}
/* Girl Scout Green belongs in this group too, and was missing from it until
   July 2026. Green had its eyebrow and h2 overridden above but never its links,
   so plain links inside a .section--green fell through to the base
   `a{color:var(--gs-ocean)}` and rendered Ocean on Green at 3.32:1 — a fail,
   live on two pages (the Help Center link on About, the cookies@ link on
   Entrepreneurship). Buttons were fine; .btn--onGreen is black-on-white. Only
   the unstyled links were affected, which is why it went unnoticed: the failing
   text still looked deliberate.
   Black on Green is 7.65:1. White is 2.75:1 and Forest is 3.18:1 — both fail,
   so green never gets the white-heading treatment River and Violet have. */
/* `:not(.btn)` IS LOAD-BEARING — do not simplify it away.
   Without it these rules read `.section--green a` at specificity (0,1,1), which
   beats `.btn--onGreen` at (0,1,0). The button then takes black text on its own
   black fill and disappears completely. That shipped for about ten minutes on
   July 31 2026 and took out the Camporee CTA on the home page, "Visit GSNorCal"
   on About, and the entrepreneurship button.
   A button is not body text: it carries its own background, so it does its own
   contrast maths and must be excluded here rather than corrected afterwards. */
.section--river a:not(.btn),
.section--violet a:not(.btn),
.section--green a:not(.btn){
  color:var(--gs-black); text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:3px;
}
.section--river a:not(.btn):hover,
.section--violet a:not(.btn):hover,
.section--green a:not(.btn):hover{text-decoration-thickness:4px}
.section--river :focus-visible,
.section--violet :focus-visible,
.section--green :focus-visible{outline-color:var(--gs-black)}

/* "Also coming up" — the subordinate event line beneath a featured event.
   Sits inside .section--green, so it inherits the black-link rule above and
   needs no colour of its own. The rule divider is a black wash rather than a
   token border: --color-border (#d9d9d9) is 1.9:1 on green and effectively
   invisible. */
.also{
  margin-top:var(--space-6); padding-top:var(--space-5);
  border-top:2px solid rgba(0,0,0,.25);
  font-size:var(--fs-small); line-height:1.6; max-width:none;
}
.also .sep{opacity:.45; padding-inline:.45em}

/* Frame-shaped cards, white on the tinted field */
.cards{
  display:grid; gap:var(--space-5); list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
/* A card grid directly after a prose block needs more air than the 16px the
   preceding paragraph's own margin gives it, or the cards read as a continuation
   of the sentence above rather than a new register. Scoped to the adjacency on
   purpose: where .cards follows an h2 directly (Home, Entrepreneurship) the
   heading's own margin already does this job, and adding to it would leave the
   cards adrift from their heading. Margins collapse through .prose, so this is
   max(16, 48), not 64. */
.prose + .cards{margin-top:var(--space-7)}
.card{
  display:flex; flex-direction:column; padding:var(--space-6);
  background:var(--gs-white); color:var(--gs-black);
}
.card h3{color:var(--gs-ocean); margin-bottom:var(--space-4)}

/* Ruled card. Stays white and takes an Ocean band across the top, for use on a
   WHITE section where a tinted fill would be either too faint or too heavy.

   This replaced three pastel fills (Sea Foam / Peach / Crocus) and then a solid
   River fill. The pastels were one-offs that appeared nowhere else; River was
   on-palette but, at three cards side by side, much heavier than the content
   warranted. It also measured 2.75:1 against the Ocean h3, forcing the heading
   to black. On white the heading returns to Ocean at 9.12:1 and the body to
   black at 21:1, so this variant needs no text overrides at all.

   NO .frame ON THESE, and no inline padding — both are deliberate, and both are
   consequences of the card having no fill:
   - .frame masks the element with 26px concave corner cuts. On a filled card
     that shapes a visible silhouette; on a white card sitting on a white
     section it shapes nothing, and its only effect is to clip 26px off each end
     of the top rule, leaving the rule floating inboard of the text beneath it.
   - 32px of inline padding is what holds text off a colored edge. With no edge
     to hold off, it just pushes the copy out of alignment with the paragraphs
     above, which is visible precisely because there is no card boundary to
     explain it.
   Dropping both lets the rule and the copy sit flush to the grid column, so the
   leftmost card lines up with the section text above it. Vertical padding stays:
   it is what separates the rule from the heading. */
.card--ruled{
  background:linear-gradient(var(--gs-ocean) 0 6px, var(--gs-white) 6px);
  padding-inline:0;
}
.card p{margin-bottom:var(--space-5); max-width:none}
.card .btn{margin-top:auto; align-self:flex-start}

/* Two buttons where one used to sit, after entrepreneurship@ was retired in
   favour of the two program addresses. Flex rather than leaving two
   inline-blocks to sit next to each other: that gives a collapsed text space
   between them, and at narrow widths the second wraps with no gap above it.
   Only used outside cards now — the Home card that needed it became a single
   "Learn more" link. If a card ever takes a button pair again it will also need
   the row to carry .card .btn's auto top margin, or the cards in that row will
   lose their common button baseline. */
.btn-row{display:flex; flex-wrap:wrap; gap:var(--space-4)}

/* Secondary note inside a card — a qualification on the list above it, not part
   of it. One step down the scale (15px against 17px body) and Forest rather
   than black, so it reads as an aside without becoming fine print.
   Forest on the white card is 8.73:1. These cards sit on a Sky section but are
   themselves white, so the card is the background that matters. Do NOT drop
   this to --fs-caption (13px): one of these notes decides whether a child's
   medication form gets filled in. */
.cardnote{
  font-size:var(--fs-small); line-height:1.5; color:var(--gs-forest);
  margin:0; max-width:none;
}

/* Hanging indent for a footnote marker. The marker sits in the left margin and
   wrapped lines align under the first word rather than under the asterisk.
   The width on .hang and the negative text-indent must stay equal — that pairing
   is what puts the text back on the content edge. Using a fixed inline-block
   rather than relying on the width of "* " means it doesn't drift with the font. */
.cardnote--hang{padding-left:1.1em; text-indent:-1.1em}
.cardnote--hang .hang{display:inline-block; width:1.1em; text-indent:0}

/* Featured event */
.feature{display:grid; gap:var(--space-6); align-items:start}
@media (min-width:820px){.feature{grid-template-columns:1.4fr 1fr; gap:var(--space-8)}}
.meta{margin:0; padding:0; display:grid; gap:var(--space-5)}
.meta dt{
  font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-bottom:2px;
}
.meta dd{margin:0; font-family:var(--font-display); font-weight:700; font-size:1.375rem; line-height:1.2}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--gs-ocean); color:var(--gs-white); padding-block:var(--space-8) var(--space-6)}
.footer a{color:var(--gs-star)}
.footer a:hover{color:var(--gs-white)}
.footer h2{font-family:var(--font-display); font-size:1.625rem; font-weight:900; letter-spacing:-.02em; color:var(--gs-white)}
.footer h3{
  font-family:var(--font-sans); font-size:var(--fs-caption); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gs-star); margin-bottom:var(--space-3);
}
.footer-grid{display:grid; gap:var(--space-7); grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.footer ul{list-style:none; margin:0; padding:0}
.footer li + li{margin-top:var(--space-2)}
.footer p{max-width:42ch}
.promise{font-family:var(--font-display); font-weight:700; font-size:1.125rem; line-height:1.5}
.disclaimer{
  margin-top:var(--space-7); padding-top:var(--space-5);
  border-top:1px solid rgba(255,255,255,.3); font-size:var(--fs-small);
}
.disclaimer p{max-width:80ch; margin:0 0 var(--space-3)}
.disclaimer strong{color:var(--gs-star)}


/* ============================================================
   INTERIOR PAGES  (About, Camporee, Entrepreneurship, Events…)
   Home gets the illustration; interior pages get a flat Sky band
   so they stay part of the same family without competing.
   ============================================================ */
.pagehead{background:var(--gs-sky); padding-block:var(--space-8) var(--space-7)}
.pagehead h1{color:var(--gs-ocean); margin-bottom:var(--space-4)}
/* :not(.crumbs) is load-bearing. This rule is meant for the tagline only, but
   `.pagehead p` also matches the breadcrumb — and at 0,1,1 it outranks `.crumbs`
   at 0,1,0, so it was silently winning every property they share. The breadcrumb
   was rendering at tagline size in Urbane Rounded Bold instead of 15px Inter, and its
   margin-bottom was being reset to 0, which is why it sat flush against the H1
   and why raising that margin appeared to do nothing at all.
   Any future `.pagehead p` / `.pagehead h1` rule needs the same care. */
.pagehead p:not(.crumbs){
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.125rem,1.8vw,1.5rem); line-height:1.35;
  color:var(--gs-forest); max-width:46ch; margin:0;
}
/* Breadcrumb → H1 gap. This value only started taking effect once `.pagehead p`
   above was scoped with :not(.crumbs) — before that it was overridden to 0 no
   matter what was set here. 24px lands the visual gap at roughly 37px, against
   ~36px between the H1 and the tagline, so the two read as even. Bear in mind
   the H1's line-height of .92 makes its line box shorter than its own glyphs,
   so the caps sit high and the rendered gap always looks tighter than the
   number. This is the knob; its counterpart is .pagehead h1's margin-bottom. */
.crumbs{font-size:var(--fs-small); margin:0 0 var(--space-5); max-width:none}
.crumbs a{color:var(--gs-ocean); font-weight:600}
.crumbs span{color:var(--gs-forest)}

/* Any deep-linked section must clear the sticky .jump bar (~72px at top:0).
   This matters more now that "Contact Us" in the main nav points at
   about.html#contact from other pages — without it the heading lands
   underneath the bar on arrival. */
.section[id]{scroll-margin-top:88px}

/* Jump links */
.jump{
  background:var(--gs-white); border-top:4px solid var(--gs-green);
  padding-block:var(--space-4); position:sticky; top:0; z-index:20;
}
/* Top-level pages (About) skip the green accent stripe that subpages
   (Cookie Program, Fall Product, Fall Camporee) show on their jump bar --
   that stripe reads as "nested under a section," which isn't true for a
   top-level page. The bar's function (sticky in-page nav) is unchanged. */
.jump--plain{border-top:0}
.jump ul{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:var(--space-2) var(--space-5);
}
.jump a{
  font-weight:600; font-size:var(--fs-small); text-decoration:none;
  color:var(--gs-black); padding:var(--space-1) 0; border-bottom:3px solid transparent;
}
.jump a:hover{color:var(--gs-ocean); border-bottom-color:var(--gs-green)}

/* Prose blocks on interior pages */
.prose{max-width:68ch}
.prose h3{margin-top:var(--space-7)}
.prose ul,.prose ol{max-width:64ch; padding-left:1.35em}
.prose li{margin-bottom:var(--space-2)}
.prose li::marker{color:var(--gs-forest); font-weight:700}

/* Trademark marks on cookie names: raised, small, and never enlarging the line
   box — a default <sup> adds leading and makes list rows sit unevenly. */
sup{font-size:0.62em; line-height:0; vertical-align:super; margin-left:0.05em}

/* Section rule */
.rule{border:0; border-top:2px solid var(--gs-sky); margin-block:var(--section-y)}

/* Promise / Law / Mission cards */
.creed{
  display:grid; gap:var(--space-5); list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
/* Plain rectangles, lightly rounded — no Frame here. The Mission banner above
   carries the Frame shape, and repeating it on the three cards beneath made the
   whole section busy. */
.creed > li{
  padding:var(--space-6); background:var(--gs-white);
  border-radius:var(--radius-md);
}
.creed h3{color:var(--gs-ocean); margin-bottom:var(--space-4)}
.creed p,.creed .verse{max-width:none}
/* 600 (Urbane Rounded Demi Bold), not 700. These three passages are the
   longest stretches of display type on the site — the Law alone runs eleven
   lines — and at Bold they read as shouted rather than recited. Demi keeps
   them distinct from body copy without the density. 600 is a real weight in
   the kit, so this is not a synthesised face. */
.verse{
  font-family:var(--font-display); font-weight:600; font-size:1.125rem;
  line-height:1.55; margin:0;
}
.verse-note{
  font-size:var(--fs-small); font-weight:400; font-family:var(--font-sans);
  color:var(--gs-forest); margin:var(--space-4) 0 0; max-width:none;
}
/* Padding must stay >= --frame-cut (26px) or the concave corners bite into the
   text. --space-6 is 32px. */
/* Padding must stay >= --frame-cut (26px) or the concave corners bite the text.
   --space-6 is 32px. */
.mission{
  background:var(--gs-green); color:var(--gs-black);
  padding:var(--space-7) var(--space-6);
  margin-bottom:var(--space-5);
  text-align:center;
}
/* max-width was 36ch, which at this element's ~32px display size resolved to
   roughly 690px inside a 1052px frame — the statement stopped short of the
   right edge and left a conspicuous empty block of green. `ch` is a body-copy
   unit; on display type it lands somewhere arbitrary. Spans the full frame now,
   centred, with balance so the two lines come out even rather than leaving one
   orphaned word on the second. */
.mission p{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.375rem,2.6vw,2rem); line-height:1.25; letter-spacing:-.02em;
  max-width:none; margin:0; text-wrap:balance;
}

/* Season calendar — date in a left column, details on the right. Rules between
   rows rather than cards: eleven cards would out-shout the page, and a season
   list is read by scanning dates. */
.events{list-style:none; margin:var(--space-7) 0 0; padding:0}
.event{
  display:grid; gap:var(--space-2);
  padding-block:var(--space-5);
  border-top:1px solid var(--color-border);
}
.event:last-child{border-bottom:1px solid var(--color-border)}
@media (min-width:760px){
  .event{grid-template-columns:200px 1fr; gap:var(--space-6)}
}
.event-date{
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  line-height:1.35; color:var(--gs-forest); margin:0;
}
.event h3{font-size:1.25rem; color:var(--gs-ocean); margin:0 0 var(--space-2)}
.event p{margin:0; max-width:62ch}
.event p + p{margin-top:var(--space-2)}

/* A callout directly after the season list needs more air than the 24px its own
   margin-block gives it. The list ends on a hairline border, and at 24px the box
   reads as a thirteenth row rather than a closing note. Margins collapse through
   the gap, so this is max(24, 48) = 48. Scoped to the adjacency on purpose: a
   callout sitting inside .prose is unaffected. */
.events + .callout{margin-top:var(--space-7)}

/* Committee contact list
   TWO columns, not three. This is the fix for addresses wrapping mid-word: a
   3-up card offers only ~292px of content width, a 2-up card ~482px. Shrinking
   the type instead would have needed ~13px to work, which is too small for the
   single most useful thing on the page.

   The measurement this was set against was entrepreneurship@beniciagirlscouts.com
   at ~346px, which no longer exists — that address was retired in favour of
   cookies@ and fall.sales@. The longest address is now
   scout.house@beniciagirlscouts.com at roughly 300px, which is marginal at 3-up
   rather than hopeless. Left at 2-up deliberately: ~300px against ~292px is not
   a margin worth trusting across font stacks, and the committee descriptions
   read better at this width anyway. Anyone revisiting 3-up should re-measure
   rather than assume the old number still applies. */
.contacts{
  display:grid; gap:var(--space-5); list-style:none; margin:0; padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
}
/* White, square, no Frame. Because the section behind them is also white, they
   need the 1px Cloud border to read as separate cards — without it they lose
   all definition and run together as one block of text. */
.contacts > li{
  background:var(--gs-white); padding:var(--space-6);
  border:1px solid var(--color-border);
}
.contacts h3{font-size:1.375rem; color:var(--gs-ocean); margin-bottom:var(--space-3)}
.contacts p{max-width:none; margin-bottom:var(--space-4)}

/* Still fluid, because a single 375px phone column is narrower than any desktop
   card: 14px at 375px up to the full 17px by ~1100px. overflow-wrap stays as a
   last-resort guard — it only triggers if Inter fails to load and a wider
   fallback substitutes, and a broken address beats one overflowing the card. */
.mailto{
  display:inline-block;
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(0.875rem, 0.778rem + 0.414vw, 1.0625rem);
  color:var(--gs-ocean); overflow-wrap:break-word; max-width:100%;
}
.mailto + .mailto{margin-top:var(--space-2)}
.contacts .role{
  font-size:var(--fs-small); color:var(--gs-forest); margin:var(--space-3) 0 0;
}
/* Narrow phones: claw back padding rather than shrink the type further. At
   360px (the narrowest phone still worth supporting) 24px padding left the
   longest address 5px short of fitting; 16px clears it with room over. Below
   ~330px overflow-wrap takes over and breaks the address, which is the correct
   last resort — a broken address still beats one running out of the card. */
@media (max-width:480px){
  .contacts > li{padding:var(--space-5)}
}
@media (max-width:420px){
  .contacts > li{padding:var(--space-4)}
}

/* Callouts — procedural notices inside .prose content (form deadlines, rules
   clarifications). Sky by default; --warn for things easy to miss at check-in. */
.callout{
  background:var(--gs-white); border-left:6px solid var(--gs-ocean);
  padding:var(--space-4) var(--space-5); margin-block:var(--space-5);
  max-width:68ch;
}
.callout p{margin:0; max-width:none}
.callout p + p{margin-top:var(--space-3)}
.callout strong{color:var(--gs-ocean)}
/* Star Green box. Two names for one look, on purpose: --warn reads correctly on
   Camporee where the content really is a warning (forms expire, mess kits
   required), --star reads correctly where it's just an emphasised aside. Same
   styling, so they can never drift apart visually.
   Black on Star Green is 16.73:1, Forest Green 6.95:1. */
.callout--warn,
.callout--star{background:var(--gs-star); border-left-color:var(--gs-forest)}
.callout--warn strong,
.callout--star strong{color:var(--gs-forest)}

/* Document download — PDF links styled as a labelled row rather than a bare
   button, so the file type and purpose are clear before tapping. */
.doc{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-4);
  margin:var(--space-5) 0;
}
.doc .btn{padding:var(--space-3) var(--space-6)}
.doc-note{font-size:var(--fs-small); color:var(--gs-forest); margin:0}

/* TK placeholder — must be visually obvious so it cannot ship by accident */
.tk{
  background:var(--gs-sunshine); color:var(--gs-black);
  border-left:6px solid var(--gs-black); padding:var(--space-4) var(--space-5);
  margin-block:var(--space-4); max-width:68ch;
}
.tk p{margin:0; max-width:none}
.tk strong{font-family:var(--font-sans); font-weight:700}
.tk::before{
  content:"NEEDS YOUR INPUT"; display:block;
  font-size:var(--fs-caption); font-weight:700; letter-spacing:.1em;
  margin-bottom:var(--space-2);
}