/* Generated by scripts/build-brand-css.mjs from src/styles/fonts.css, src/styles/tokens.css, src/styles/static-pages.css. Do not edit by hand. */

/* What this is: @font-face rules for the three self-hosted brand fonts in public/fonts.
   May change: add subsets if non-latin text ever appears.
   Must not: load any font from a CDN; fonts are served from this site only. */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/baloo2-800-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/nunito-variable-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/caveat-600-latin.woff2') format('woff2');
}


/* Generated from design/tokens.json by scripts/build-tokens.mjs. Do not edit by hand. */
/* Themes: light = Daylight, dark = Campfire. Dark follows the system unless data-theme pins a theme. */

:root,
[data-theme="light"] {
  color-scheme: light;
  --bone: #faf7f0;
  --bone-raised: #ffffff;
  --logo-plate: #ffffff;
  --gum-light: #eef3ec;
  --hairline: #dfe4da;
  --ink: #2c2a26;
  --muted: #5c6359;
  --muted-soft: #98a093;
  --green: #2e7d32;
  --green-deep: #1b5e20;
  --green-soft: #43a047;
  --on-green: #ffffff;
  --gum: #8fbf9c;
  --wattle: #f6b92b;
  --on-wattle: #2c2a26;
  --wattle-light: #fdf3d7;
  --coral: #e2603f;
  --coral-light: #fbe4dc;
  --billabong: #2f6f9f;
  --billabong-light: #e0eef8;
  --dust: #b5733b;
  --focus: #1b5e20;
  --shadow-float: 0 4px 16px rgba(44, 42, 38, 0.14);
  --shadow-sheet: 0 -8px 24px rgba(44, 42, 38, 0.12);
  --font-display: "Baloo 2", Nunito, "Arial Rounded MT Bold", sans-serif;
  --font-body: Nunito, "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  --font-hand: Caveat, "Segoe Script", cursive;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --measure: 640px;
  --content: 1200px;
  --tabbar: 68px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bone: #1c1f1a;
  --bone-raised: #262a24;
  --logo-plate: #ffffff;
  --gum-light: #2e3630;
  --hairline: #3a423b;
  --ink: #f2eee6;
  --muted: #b3bcae;
  --muted-soft: #6f7a6c;
  --green: #5fbf63;
  --green-deep: #4caf50;
  --green-soft: #7fd283;
  --on-green: #0f2a12;
  --gum: #4f7a5a;
  --wattle: #f6b92b;
  --on-wattle: #2c2a26;
  --wattle-light: #3d3420;
  --coral: #ff8a6a;
  --coral-light: #43281f;
  --billabong: #7fb6e0;
  --billabong-light: #1f3346;
  --dust: #d99a62;
  --focus: #7fd283;
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bone: #1c1f1a;
  --bone-raised: #262a24;
  --logo-plate: #ffffff;
  --gum-light: #2e3630;
  --hairline: #3a423b;
  --ink: #f2eee6;
  --muted: #b3bcae;
  --muted-soft: #6f7a6c;
  --green: #5fbf63;
  --green-deep: #4caf50;
  --green-soft: #7fd283;
  --on-green: #0f2a12;
  --gum: #4f7a5a;
  --wattle: #f6b92b;
  --on-wattle: #2c2a26;
  --wattle-light: #3d3420;
  --coral: #ff8a6a;
  --coral-light: #43281f;
  --billabong: #7fb6e0;
  --billabong-light: #1f3346;
  --dust: #d99a62;
  --focus: #7fd283;
  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.6);
  }
}

/* Type styles from the design system. */
.display-xl {
  font: 800 56px/1 var(--font-display);
  letter-spacing: -0.01em;
}
.display-lg {
  font: 800 40px/1.05 var(--font-display);
  letter-spacing: -0.01em;
}
.display-md {
  font: 800 28px/1.15 var(--font-display);
}
.display-sm {
  font: 800 20px/1.25 var(--font-display);
}
.lead {
  font: 500 19px/1.5 var(--font-body);
}
.body {
  font: 400 16px/1.55 var(--font-body);
}
.body-strong {
  font: 700 16px/1.55 var(--font-body);
}
.label {
  font: 600 14px/1.4 var(--font-body);
}
.eyebrow {
  font: 800 12px/1.3 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.data {
  font: 700 14px/1.3 var(--font-body);
  font-variant-numeric: tabular-nums;
}
.hand-lg {
  font: 600 44px/1.05 var(--font-hand);
}
.hand-sm {
  font: 600 24px/1.1 var(--font-hand);
}


/* What this is: the shell for pages built outside Astro (place pages, blog, about, legal):
   site bar, phone tab bar, body type and footer, so they match the Astro pages (audit F8).
   May change: as NavBar.astro changes. Must not: hold literal colours; tokens only. */

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 17px/1.65 var(--font-body);
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

a {
  color: var(--green);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Desktop bar, the same as NavBar.astro: hidden below 900px. */
.mm-top {
  display: none;
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--bone-raised);
  border-bottom: 1px solid var(--hairline);
}

.mm-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--content);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.mm-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font: 800 24px/1 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}

.mm-brand img {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 50%;
}

.mm-top nav {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

.mm-top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font: 700 15px/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
}

.mm-top nav a:hover {
  background: var(--gum-light);
}

.mm-join {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--on-green);
  font: 700 14px/1 var(--font-body);
  text-decoration: none;
}

.mm-join:hover {
  background: var(--green-deep);
}

/* Phone brand bar above the content. */
.mm-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
}

/* Phone tab bar, fixed, 68px plus the safe area. */
.mm-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--gum-light);
  border-top: 1px solid var(--hairline);
}

.mm-tabs a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  font: 700 14px/1 var(--font-body);
  color: var(--muted);
  text-decoration: none;
}

.mm-tabs svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 900px) {
  body {
    padding-bottom: 0;
  }
  .mm-top {
    display: block;
  }
  .mm-mobile, .mm-tabs {
    display: none;
  }
}

/* Footer links get a 44px tap target on phones (audit F11). */
.mm-foot {
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-7);
  padding-top: var(--space-4);
}

.mm-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}