/* site-f.css — the styles Design F's homepage and About page SHARE, one file for both
   (v10, 2026-09-28; the owner: "I still didn't see any effort for standardization of the pages").
   Tokens, base, nav + hamburger menu, section 4 (B's sticker-book download card, checklist note,
   scissors footer) and the shared animations. Extracted verbatim, in the homepage's order, from the
   90 top-level blocks that were identical in option-f-map-and-sprinkles.html and
   about-f-map-and-sprinkles.html. Both pages load this BEFORE their own <style>, which keeps
   only page-specific rules. Change a shared style HERE, never in a page. */

/* ── Option F — Map & Sprinkles: option D's adventure map and features, option A's
   stats band (owner's request, 2026-09-28) ──────────────────────────────
   Built from a copy of option-d-adventure-map.html; companion About page:
   about-f-map-and-sprinkles.html. Notable changes from D:
   - h1 "Discover something your kids will love to do" (no trailing period; D's
     hand-drawn squiggle under "love" kept) and the subtitle "Banavu searches
     libraries, museums, parks, and studios so you don't have to. Find activities
     right where you live. Come give it a try" (no closing period, on purpose), both
     verbatim from the owner. The four venue highlights are kept.
   - The features signpost (Museum day / Swim / Dance) now shows at every width. At
     760px and below it is scaled down through its viewBox (--sps) and tucked into the
     top-right corner of the features header, beside the eyebrow and a narrower h2;
     its board text renders at 12px or more and it stays aria-hidden.
   - section.stats is option A's design, ported: the navy band with wavy top and
     bottom edges (fills = F's --sage above and --paper below, so no seams), A's
     drifting confetti sprinkles (sprite symbols #s-star/#s-dot/#s-ring/#s-squig/
     #s-spark at the top of <body>), the big Bricolage Grotesque 800 stat numbers
     with their doodles, the four-colour dotted rules and the badge row led by its
     dotted rule. A's colour tokens (--orange-l etc.) are scoped to .stats; A's
     "drift" keyframes are renamed sp-drift so D's cloud "drift" still works. D's
     compass legend and its CSS are gone. The rest of F stays Fraunces + Figtree.
   - Section 4: option B's sticker-book CTA + footer (owner, 2026-09-28). Ported from
     option-b-sticker-book.html section.cta-wrap: white sticker card with two washi-tape
     corners, the marker swipe on "Start discovering." (v6; was "Start doing."), the Caveat checklist note (#d-check
     ticks; hidden at 620px tall and below, as in B) and the paper footer with the
     scissors cut line and sticker icon, on B's cream dot-grid paper. B's tokens and
     Nunito/Caveat are scoped to .cta-wrap; the card and footer keep F's content width.
     The stats band's bottom wave is filled with B's paper base (#FBF6EC) so it meets
     the dot grid with no colour step. D's X-marks-the-spot card and navy footer are gone.
   - v5 (owner, 2026-09-28): the "Kids activities · Your city" kicker is gone; badges in
     the hero and CTA are centred on phones; the features h2 no longer overclaims ("One app.
     Nearby places to explore.", placeholder wording; a longer version wrapped to 4 lines
     on phones and overflowed the features screen); the stray connector dot
     under the padlock is masked; the first stat is generic ("Nearby" / the venue list from
     the subtitle); the stats' sparkle doodles are gone; the footer has no brand, links Blog /
     Contact / About / Instagram, and reads "© 2026 Banavu LLC".
   - v6 (owner, 2026-09-28): features h2 is the owner's "One App. Nearby kid-friendly activities
     to explore" (flows round the signpost; 29px on phones; 10px gaps); CTA says "Start
     discovering."; footer order About, Blog, Contact, Instagram (with the Instagram glyph),
     centred on phones.
   - v7 (owner, 2026-09-28): "Start discovering." never wraps. The CTA heading is capped at 11.6cqi of its
     text column, which is a container; there is a 100vw-based fallback for older Safari.
   D's notes follow.
   ── Option D · Adventure Map (v2) ──────────────────────────────────────
   Light-only by design (paper-map palette). Every animation is decorative;
   all content is visible at its base style, and reduced-motion turns every
   animation off. Decorative overflow is clipped per-section with
   overflow:clip (hidden as fallback), never on html/body, so the root stays
   the only scroll container.
   v2 (2026-09-22): three core points (Discover / Filter / Private) as map-pin
   trail stops; hamburger menu (About / Blog / Contact) driven by the small
   script at the end of <body>; no links to the event pages; phones in portrait
   (max-width 767px) snap one screen per swipe: hero, #about, stats, CTA+footer
   (the footer lives inside section.cta-wrap so it shares the last screen).
   v4 (2026-09-27): the menu gains a 4th and last item, the call to action
   "Follow us on Instagram" (https://www.instagram.com/banavu/, new tab), as a
   purple tile with a flat Instagram glyph; about-f-map-and-sprinkles.html matches. */


:root{
  color-scheme:light;
  --navy:#0A1628; --ink:#3D5068;
  --paper:#FBF6EC; --line:#E6DAC2; --sage:#EEF6E9; --sand:#FFF3E2;
  --orange:#E87228; --green:#3BA857; --blue:#2B7FD4; --purple:#7B4FBF;
  --orange-d:#B4531A; --green-d:#23793D; --blue-d:#1D62AE; --purple-d:#5F3A9E;
  --orange-t:#FCE3D0; --green-t:#D6EFDC; --blue-t:#D6E7FA; --purple-t:#E7DDF7;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(16px, 4.5vw, 56px);
  --navh:68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* the icon sprite (<symbol>s) sits in shared section 4, so hiding it is shared too. v14: it was a homepage-only rule,
   so the About page showed the sprite as a blank 300x150 box above its download card from v8 to v13. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--navh)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--navy);background:var(--paper);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:10px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
/* ── NAV + MENU ── */



.nav{position:sticky;top:0;z-index:1000;background:rgba(251,246,236,.94);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{position:relative;max-width:1200px;margin:0 auto;padding:0 var(--gutter);height:calc(var(--navh) - 1px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.nav-brand img{width:38px;height:38px;border-radius:24%;box-shadow:0 2px 6px rgba(10,22,40,.18)}
.nav-wordmark{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:-.01em;line-height:1;font-variation-settings:"SOFT" 100,"WONK" 1}
.menu-btn{display:inline-grid;place-items:center;width:48px;height:48px;margin-right:-4px;flex-shrink:0;border:1.5px solid var(--line);border-radius:16px;background:#fff;color:var(--navy);cursor:pointer;box-shadow:0 3px 0 rgba(10,22,40,.05);-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s}
.menu-btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.bars{position:relative;width:22px;height:16px}
.bars i{position:absolute;left:0;height:2.6px;border-radius:2px;background:currentColor;transition:transform .28s cubic-bezier(.3,1.4,.5,1),opacity .2s,width .2s}
.bars i:nth-child(1){top:0;width:22px}
.bars i:nth-child(2){top:6.7px;width:15px}
.bars i:nth-child(3){top:13.4px;width:22px}
.menu-btn[aria-expanded="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.menu-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0;width:0}
.menu-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}
.site-menu{position:absolute;z-index:1;top:calc(100% + 10px);right:calc(var(--gutter) - 10px);width:348px}
/* v4: 284 → 348 so the Instagram row fits on one line */
  
.site-menu[hidden]{display:none}
.menu-panel{position:relative;background:#fff;border-radius:22px;padding:8px;box-shadow:0 28px 50px -22px rgba(10,22,40,.5),0 0 0 1.5px rgba(10,22,40,.07);transform-origin:calc(100% - 32px) 0}
.site-menu:not([hidden]) .menu-panel{animation:menu-in .24s cubic-bezier(.3,1.3,.5,1) both}
.menu-panel::before{content:"";position:absolute;top:-7px;right:30px;width:14px;height:14px;background:#fff;border-radius:3px 0 0 0;transform:rotate(45deg);box-shadow:-1.5px -1.5px 0 rgba(10,22,40,.07)}
.menu-list{position:relative;list-style:none}
.menu-list li+li::before{content:"";display:block;height:4px;margin:0 16px;background:radial-gradient(circle,rgba(10,22,40,.34) 1.5px,transparent 1.9px) left center/10px 4px repeat-x}
.menu-list a{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 16px;border-radius:14px;font-family:var(--display);font-weight:700;font-size:21px;line-height:1.1;letter-spacing:-.01em;font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--navy)}
/* v16 (owner): menu rows are plain text: no pin markers, chevrons or Instagram tile. v21 (owner, 2026-09-29): no Instagram link anywhere on the site. */
.menu-list a:focus-visible{outline:3px solid var(--blue);outline-offset:-3px;border-radius:14px}
/* v4 call to action (last row): a purple tile; the Instagram glyph (rounded square, lens, dot) in
   one flat colour replaces the map pin, and an up-right arrow replaces the chevron ("opens in a
   new tab"). Both glyphs are CSS masks on the pseudo-elements, so the link text stays exact. */


.kicker-pin{width:22px;height:26px;flex-shrink:0}
.love{position:relative;display:inline-block;color:var(--blue);white-space:nowrap}
.squiggle{position:absolute;left:-4%;top:86%;width:108%;height:auto;overflow:visible;pointer-events:none}
.squiggle path{fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1s cubic-bezier(.6,0,.3,1) 1.1s both}
.store-badge-link{display:inline-block;flex-shrink:0;border-radius:9px}
.store-badge-link img{display:block;height:44px;width:auto}
.trail-dots{fill:none;stroke:var(--navy);stroke-opacity:.62;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:.1 11}
.cloud{animation:drift 9s ease-in-out infinite alternate}
.cloud.c2{animation-duration:11s;animation-direction:alternate-reverse}
.duck{animation:bob 2.4s ease-in-out infinite}
/* ── SECTION 4: option B's sticker-book CTA + footer (owner, 2026-09-28) ──
   Ported from option-b-sticker-book.html (.cta-wrap .. .footer-copy + B's phone rules below).
   B's tokens and fonts (Nunito; Caveat for the note) are scoped to .cta-wrap, so the rest of
   F keeps Fraunces + Figtree; B's --ink (navy) is F's --navy. The card, footer row and
   scissors sit on F's 1200px grid, so their edges line up with the nav and sections above. */



.cta-wrap{--ink-2:#3A4A60;--paper-2:#F3EADB;--orange-t:#FFE2CC;--mk-blue:#C3DCF8;--cta-px:var(--gutter);
  --sans:'Nunito',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;--hand:'Caveat','Bradley Hand','Segoe Print',cursive;
  --paper-shadow:0 1px 2px rgba(10,22,40,.06),0 14px 30px -12px rgba(10,22,40,.25);--sticker-shadow:0 1px 1px rgba(10,22,40,.08),0 8px 18px -6px rgba(10,22,40,.28);
  position:relative;overflow:hidden;overflow:clip;padding:clamp(72px,9vw,124px) var(--cta-px) 0;font-family:var(--sans);color:var(--navy);
  background:radial-gradient(rgba(10,22,40,.12) 1.2px,transparent 1.7px) 0 0/24px 24px,#FBF6EC}
/* B's dot-grid paper */
  
.tape{position:absolute;height:30px;width:116px;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.38) 0 5px,transparent 5px 11px),var(--tape,rgba(232,114,40,.55));clip-path:polygon(0 0,100% 0,calc(100% - 5px) 20%,100% 40%,calc(100% - 5px) 60%,100% 80%,calc(100% - 5px) 100%,0 100%,5px 80%,0 60%,5px 40%,0 20%);box-shadow:0 1px 2px rgba(10,22,40,.08);pointer-events:none}
.mk{background:linear-gradient(100deg,transparent 0 .5%,var(--mk,var(--mk-blue)) 2% 97.5%,transparent 99.5%) 0 88%/100% 46% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;margin:0 -.06em}
.cta-card{position:relative;max-width:calc(1200px - 2 * var(--gutter));margin:0 auto;background:#fff;border-radius:22px;padding:clamp(40px,5.4vw,76px);box-shadow:var(--paper-shadow);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(36px,5vw,80px);align-items:center}
.cta-card>.tape:nth-of-type(1){top:2px;left:-30px;transform:rotate(-38deg);--tape:rgba(123,79,191,.42)}
.cta-card>.tape:nth-of-type(2){top:2px;right:-30px;transform:rotate(38deg);--tape:rgba(232,114,40,.5)}
.cta-h2{font-weight:900;font-size:clamp(2.5rem,1.5rem + 3.4vw,4.1rem);font-size:min(clamp(2.5rem,1.5rem + 3.4vw,4.1rem),11.6cqi);line-height:1.04;letter-spacing:-.026em;margin-bottom:16px}
.cta-sub{font-size:19px;color:var(--ink-2);margin-bottom:30px}
.cta-btns{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px}
.note{position:relative;width:270px;padding:44px 30px 30px;background:repeating-linear-gradient(180deg,transparent 0 43px,rgba(180,80,26,.18) 43px 45px) 0 30px/100% 100% no-repeat,var(--orange-t);box-shadow:0 2px 2px rgba(10,22,40,.06),0 18px 30px -14px rgba(10,22,40,.35);transform:rotate(4deg);border-radius:2px 2px 18px 2px}
.note .tape{top:-14px;left:50%;margin-left:-58px;transform:rotate(-3deg);--tape:rgba(59,168,87,.5)}
.note ul{list-style:none}
.note li{display:flex;align-items:center;gap:12px;font-family:var(--hand);font-weight:700;font-size:32px;line-height:45px;white-space:nowrap}
.note li svg{width:28px;height:28px;flex-shrink:0}
.note li:nth-child(2){transform:translateX(3px) rotate(-1deg)}
.note li:nth-child(3){transform:translateX(-1px) rotate(1deg)}
.site-footer{position:relative;margin:clamp(64px,8vw,112px) calc(-1 * var(--cta-px)) 0;background:var(--paper-2);border-top:2px dashed rgba(10,22,40,.28);padding:30px var(--gutter) 34px}
.scissors{position:absolute;top:-15px;left:calc(max(0px,(100% - 1200px) / 2) + var(--gutter) + 10px);width:30px;height:28px;padding:0 3px;background:linear-gradient(#FBF6EC 50%,var(--paper-2) 50%)}
.footer-inner{max-width:calc(1200px - 2 * var(--gutter));margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 32px}
.footer-links{display:flex;flex-wrap:wrap;gap:0 14px;margin-left:-6px}
.footer-links a,.footer-legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px;font-weight:700;font-size:16px;text-decoration:underline;text-decoration-color:rgba(10,22,40,.28);text-decoration-thickness:2px;text-underline-offset:5px}
.footer-links a:hover,.footer-legal a:hover{text-decoration-color:var(--orange)}
  
.footer-copy{font-size:14px;color:var(--ink-2)}
/* v16 (owner): Privacy sits with the copyright, so on phones they share one line under the links row */
.footer-legal{display:flex;align-items:center;flex-wrap:wrap;gap:0 14px}
/* ── MOTION ── */



@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes shadow{0%,40%{transform:scale(.2);opacity:0}58%{transform:scale(1.15);opacity:1}100%{transform:none;opacity:1}}
@keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(16px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sheet-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
/* section 4: B's card goes one column (note centred) at 860; F does it from 900, because at
   861-870 the headline column is only just as wide as "Stop searching." and the line can break */


@media (max-width:900px){.cta-card{grid-template-columns:1fr}.note{justify-self:center}}
@media (max-width:520px){
  /* section 4 (B's 520px rules): corner tapes pulled in so the screen edge doesn't slice them */
  .cta-card{padding:40px 24px 44px}
  .cta-card>.tape:nth-of-type(1){left:-10px;width:96px}
  .cta-card>.tape:nth-of-type(2){right:-10px;width:96px}
  .cta-sub{font-size:17px}
  .note{width:250px}
}
/* section 4 (B's 380px rules): the headline, sub-line and badge row keep their lines at 360-375 */


@media (max-width:380px){.cta-wrap{--cta-px:12px}.cta-card{padding:36px 20px 40px}.cta-sub{font-size:16px}.cta-btns{gap:10px}}
/* section 4 on SE-class heights (B's 620px rule): the checklist note gives way */


@media (max-width:767px) and (orientation:portrait) and (max-height:620px){.note{display:none}}
/* v6 (owner): on phones the footer links and the copyright line are centred */


@media (max-width:767px){.footer-inner{justify-content:center;align-items:center;text-align:center}.footer-links{justify-content:center;margin-left:0}.footer-legal{width:100%;justify-content:center}}
/* v7 (owner): "Start discovering." always on one line. The text column is the size container, and the heading is
   capped at 11.6% of its width. "Start discovering." plus the marker padding is ~8.3em wide, so 1/8.6 leaves ~4%
   spare. Older Safari without container units keeps the vw-based size above. */


.cta-card > div:not(.note){container-type:inline-size}
.cta-h2 .mk{white-space:nowrap}

/* ── v15 (owner, 2026-09-28): the phone, tablet and hover rules for the SHARED regions (nav + menu, section 4 + footer),
   moved here from both pages, where each carried an identical copy. Order = the homepage's cascade order, and they stay
   after every rule above, as they did when they sat in each page's <style> (which loads after this file). Page-only rules
   that touch these regions stay in the pages: the homepage's full-screen snap sections (.hero,.features,.stats,.cta-wrap),
   .hero-actions, and the About page's aria-current menu styling and its end-aligned .cta-wrap snap. ── */
@media (hover:hover){
  .menu-btn:hover{border-color:#D3C3A2}
  .menu-btn[aria-expanded="true"]:hover{border-color:var(--navy)}
  .menu-list a:hover{background:var(--paper)}
}
@media (max-width:767px){
  .cta-btns{justify-content:center}
  .site-menu{top:100%;left:0;right:0;width:auto;height:calc(100vh - var(--navh));height:calc(100dvh - var(--navh));background:rgba(10,22,40,.4);overflow-y:auto;overscroll-behavior:contain}
  .site-menu:not([hidden]){animation:fade .2s both}
  .menu-panel{border-radius:0 0 30px 30px;padding:6px var(--gutter) 18px;background:var(--paper);box-shadow:0 26px 40px -26px rgba(10,22,40,.6)}
  .site-menu:not([hidden]) .menu-panel{animation-name:sheet-in}
  .menu-panel::before{display:none}
  .menu-list a{min-height:66px;padding:0 8px;font-size:30px;gap:16px}
  .menu-list li+li::before{margin:0 8px}
}
@media (max-width:860px){
  .footer-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:767px) and (orientation:portrait){
  :root{--navh:60px}
  .nav{background:var(--paper)}
  .nav-brand img{width:36px;height:36px}
  .nav-wordmark{font-size:24px}
  .cta-wrap{padding:18px var(--cta-px) 0}
  .cta-card{margin:auto 0;padding:28px 22px 26px;gap:26px}
  .cta-h2{font-size:min(42px,calc((100vw - 79px) / 8.6));font-size:min(42px,11.6cqi);margin-bottom:10px}
  .cta-sub{margin-bottom:20px}
  .note{width:auto;padding:24px 16px 12px 18px;transform:rotate(-2.5deg);background:repeating-linear-gradient(180deg,transparent 0 36px,rgba(180,80,26,.18) 36px 38px) 0 24px/100% 100% no-repeat,var(--orange-t)}
  .note ul{display:grid;grid-template-columns:auto auto;gap:0 16px}
  .note li{font-size:25px;line-height:38px;gap:7px}
  .note li svg{width:22px;height:22px}
  .site-footer{margin-top:18px;padding:12px var(--gutter) 14px}
  .footer-inner{flex-direction:row;align-items:center;gap:0 12px}
  .footer-legal{width:100%}
}