/* Bonne the Baker design tokens. Owned by lead (visuals). Linked first on every page. */
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-var.woff2') format('woff2-variations'), url('/assets/fonts/fraunces-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-var-italic.woff2') format('woff2-variations'), url('/assets/fonts/fraunces-var-italic.woff2') format('woff2'); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/assets/fonts/figtree-var.woff2') format('woff2-variations'), url('/assets/fonts/figtree-var.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('/assets/fonts/caveat-var.woff2') format('woff2-variations'), url('/assets/fonts/caveat-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  /* palette: flour, crust, cocoa, berry frosting, butter, sage (plant-based) */
  --flour: #FFFBF4;
  --cream: #FAF1E3;
  --oat: #F1E3CC;
  --crust: #C0763A;
  --crust-deep: #8A4A20;
  --cocoa: #2A1810;
  --cocoa-2: #4B2F22;
  --berry: #D4467C;
  --berry-deep: #A82A5C;
  --berry-soft: #F9D5E3;
  --butter: #F5CD62;
  --butter-soft: #FCEBB8;
  --sage: #87A783;
  --sage-deep: #4C6B49;
  --sage-soft: #DCE8D6;

  /* semantic */
  --bg: var(--cream);
  --surface: var(--flour);
  --surface-2: var(--oat);
  --ink: var(--cocoa);
  --ink-2: var(--cocoa-2);
  --muted: #7A6455;
  --line: rgba(42, 24, 16, 0.12);
  --line-strong: rgba(42, 24, 16, 0.24);
  --accent: var(--berry);
  --accent-deep: var(--berry-deep);
  --accent-ink: #FFFFFF;
  --ok: var(--sage-deep);
  --warn: #B5651D;
  --danger: #B3261E;
  --focus: #1D6FD8;

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;
  --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.40vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.80vw, 1.9rem);
  --step-3: clamp(1.73rem, 1.45rem + 1.40vw, 2.6rem);
  --step-4: clamp(2.07rem, 1.60rem + 2.40vw, 3.6rem);
  --step-5: clamp(2.49rem, 1.70rem + 3.90vw, 5rem);
  --step-6: clamp(2.9rem, 1.4rem + 7.2vw, 8.6rem);
  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.6;

  /* space / shape */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px;
  --section-y: clamp(64px, 9vw, 140px);
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-s: 10px; --radius-m: 18px; --radius-l: 28px; --radius-xl: 44px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(42,24,16,.06), 0 2px 8px rgba(42,24,16,.06);
  --shadow-2: 0 4px 12px rgba(42,24,16,.08), 0 14px 34px rgba(42,24,16,.10);
  --shadow-3: 0 10px 30px rgba(42,24,16,.12), 0 30px 80px rgba(42,24,16,.16);
  --shadow-berry: 0 10px 28px rgba(212,70,124,.35);

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: .18s; --dur-2: .35s; --dur-3: .7s;

  /* layout */
  --header-h: 72px;
  --mobile-bar-h: 64px;
  --z-header: 50; --z-mobile-bar: 60; --z-drawer: 80; --z-toast: 90;

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; }
}

/* ---- motion.js pre-hide (only when JS runs and motion is allowed; 2.5s CSS failsafe) ---- */
@keyframes btb-failsafe { to { opacity: 1; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.motion-static) [data-reveal],
  html:not(.motion-static) [data-split],
  html:not(.motion-static) [data-stagger] > * {
    opacity: 0;
    animation: btb-failsafe 0s 2.5s forwards;
  }
  html.motion-ready [data-reveal],
  html.motion-ready [data-split],
  html.motion-ready [data-stagger] > * { animation: none; }
}
html.motion-static [data-reveal], html.motion-static [data-split], html.motion-static [data-stagger] > * { opacity: 1; }

[data-split].is-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
[data-split].is-split .wi { display: inline-block; will-change: transform; }
[data-marquee].is-marquee { display: flex; }
[data-marquee].is-marquee .marquee-track { flex-shrink: 0; }
[data-hscroll].is-pinned { overflow: hidden; }
[data-hscroll].is-pinned .hscroll-track { overflow: visible; scroll-snap-type: none; will-change: transform; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- map.js marker + popup ---- */
.map--failed { display: grid; place-items: center; }
.btb-pin { position: relative; }
.btb-pin__dot { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -22px 0 0 -15px; background: var(--berry); border: 4px solid var(--flour); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: var(--shadow-berry); }
.btb-pin__pulse { position: absolute; left: 50%; top: 100%; width: 18px; height: 8px; margin: -6px 0 0 -9px; border-radius: 50%; background: rgba(212,70,124,.35); animation: btb-pulse 1.8s var(--ease-out) infinite; }
.btb-pin__label { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -2px); white-space: nowrap; font: 700 13px/1 var(--font-body, system-ui); background: var(--cocoa); color: var(--flour); padding: 6px 10px; border-radius: 999px; box-shadow: var(--shadow-2); }
@keyframes btb-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .btb-pin__pulse { animation: none; } }
.btb-popup { display: grid; gap: 4px; font-family: var(--font-body, system-ui); min-width: 190px; }
.btb-popup strong { font-family: var(--font-display, serif); font-size: 1.05rem; color: var(--cocoa); }
.btb-popup a { font-weight: 700; color: var(--berry); }
.leaflet-container { font-family: var(--font-body, system-ui); }