@charset "UTF-8";
/* ============================================================
   Skitts Mountain Farms — brand tokens + base
   Palette extracted from the live Framer site (skittsmountainfar.ms,
   captured 2026-07-13) and re-expressed in OKLCH. Warm harvest core
   (poppy / amber / gold) on cream, with slate + teal cool anchors and
   a leaf/moss green pair carried by the illustration set.
   Fonts: Archivo Black (display) + Visby CF (headings — the licensed
   family, heading-role winner 2026-07-14) + Inter (UI/body).
   ============================================================ */

/* ---------- fonts ----------
   All self-hosted woff2 from /fonts/. Archivo Black + Inter are
   Google Fonts (OFL); Visby CF is the licensed Connary Fagen family
   (source OTFs at fonts/source/, converted with fontTools). No
   external font services. */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/archivo-black-v23-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-v20-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-v20-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/inter-v20-latin-900.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/archivo-v25-latin-900.woff2") format("woff2");
}
@font-face {
  font-family: "Visby CF";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/visby-cf-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Visby CF";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/visby-cf-bold.woff2") format("woff2");
}
/* Field-trips page faces (font census rows 4–5): Satoshi (GSE standards
   grid) + Tanker (the multicolor FIELD TRIPS display). Fontshare (ITF Free
   Font License), self-hosted like everything else. */
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/satoshi-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/satoshi-700.woff2") format("woff2");
}
@font-face {
  font-family: "Tanker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/tanker-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Visby CF";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/visby-cf-extrabold.woff2") format("woff2");
}
@font-face {
  font-family: "Visby CF";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/visby-cf-heavy.woff2") format("woff2");
}

/* ---------- design tokens ---------- */
:root {
  /* primitives — brand palette in OKLCH (hex as captured from the
     live site; excluded Framer-template leftovers are listed in
     brand/README.md § Color) */
  --poppy: oklch(60.4% 0.22 33);        /* #e73305 hero red-orange, primary CTA */
  --orange: oklch(70.9% 0.176 55);      /* #f27d03 supporting orange */
  --coral: oklch(71.8% 0.182 40);       /* #ff7442 supporting coral */
  --amber: oklch(77% 0.162 74);         /* #f0a202 nav bar, warm panels */
  --gold: oklch(86% 0.157 86);          /* #ffc83f display type, headline pop */
  --butter: oklch(96% 0.055 91);        /* pale gold — the compliant warm-highlight tone for body
                                           text on teal-deep (4.5:1 measured); reads as a gold glow
                                           where raw --gold (3.3:1) fails body-size WCAG */
  --chartreuse: oklch(80.7% 0.159 107); /* #ccc632 logo shadow, badge accents */
  --leaf: oklch(68.3% 0.11 140);        /* #73aa68 illustration green, green panels */
  --moss: oklch(52.6% 0.111 124);       /* #5d7523 deep green, text-safe on gold */
  --teal: oklch(59.2% 0.097 210);       /* #1a8d9e logo shadow, teal accents */
  --teal-deep: oklch(53% 0.087 211);    /* #137988 — the teal PANEL bg as the original actually
                                           paints it (measured off the tickets explainer, 2026-08-18);
                                           cream body 4.77:1, gold headings 3.30:1 — both pass where
                                           the lighter --teal would fail body text */
  --slate: oklch(42.5% 0.029 239);      /* #40515d mission panel, quiet dark bg */
  --cream: oklch(97.6% 0.008 122);      /* #f6f8f2 page ground, text-on-dark */
  --sand: oklch(86.3% 0.029 85);        /* #dbd1bd fences, quiet warm neutral */
  --ink: oklch(22.7% 0.01 125);         /* #1b1d18 text, illustration outlines */
  --alert-red: oklch(56.3% 0.227 29);   /* #db0d06 urgent/error only */

  /* semantic — the design system's --color-* vocabulary (the names core.css
     consumes; adopted 2026-08-17 with the core.css vendoring, replacing the
     brand's earlier short names). Brand-role extensions below keep brand
     names — core does not consume them. */
  --color-bg-primary: var(--cream);
  --color-text-primary: var(--ink);
  --color-text-muted: oklch(48% 0.02 239); /* AA-safe muted on cream */
  --color-text-secondary: var(--color-text-muted);
  /* AA-safe poppy for small text on cream (--poppy itself is
     large-text/CTA-fill only at ~4.0:1). */
  --color-text-accent: oklch(53% 0.2 33);
  --color-accent: var(--poppy);
  --color-accent-dim: oklch(52% 0.2 33); /* pressed/hover poppy */
  --color-border-default: oklch(90% 0.015 100);
  /* brand-role extensions */
  --bg-dark: var(--slate);
  --bg-hero: var(--poppy);
  --bg-warm: var(--amber);
  --text-on-dark: var(--cream);
  --heading-pop: var(--gold);           /* gold headlines on slate/dark panels */

  /* type — the design system's --font-size-* vocabulary (typography plugin),
     adopted 2026-08-17 (Philip): doctrine shapes — fixed sizes for the small
     rungs and h3–h6, fluid clamp() with rem anchors AND rem middle terms for
     h1/h2/large — on the 112.5% root below (1rem = 18px at browser default).
     Two brand-value overrides, both measured off the original: h2 caps at
     2.45rem (44px — the doctrine 2rem cap renders 75% of the original's
     measured 48px newsletter heading) and the display rung (a typography-
     plugin extension; Skitts is its founding value) keeps the SEASON PASSES
     scale: 176px cap ≈ the original's fixed 172px, endpoints re-expressed
     for the 18px root so default rendering is unchanged. */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-heading: "Visby CF", "Inter", system-ui, sans-serif; /* brand extension; self-hosted; Heavy 900 leads, ExtraBold 800 supports */
  --font-ui: "Inter", system-ui, sans-serif;
  --font-body: var(--font-ui); /* core.css body role — Inter serves both */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-tiny: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-regular: 1rem;
  --font-size-medium: 1.125rem;
  --font-size-large: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  --font-size-h6: 1rem;
  --font-size-h5: 1.125rem;
  --font-size-h4: 1rem;
  --font-size-h3: 1.5rem;
  --font-size-h2: clamp(1.5rem, 1.15rem + 1.35vw, 2.45rem);
  --font-size-h1: clamp(2.4rem, 1.9rem + 2.6vw, 3.8rem);
  --font-size-display: clamp(3.111rem, 2rem + 9vw, 9.778rem); /* SEASON PASSES scale */
  --line-height-tight: 1.15;
  --line-height-snug: 1.2;
  --line-height-normal: 1.45; /* Butterick ceiling — was 1.6, over it */
  --line-height-relaxed: 1.55;
  --measure: 62ch;
  --measure-narrow: 44ch;

  /* space + shape — chunky rounded panels are the signature shape */
  --space-xxs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: clamp(4rem, 3rem + 4vw, 7rem);
  --space-band: clamp(4rem, 3rem + 4.5vw, 7.5rem);
  --radius-sm: 12px;
  --radius-md: 24px;      /* the site-wide panel radius */
  --radius-lg: 32px;
  --radius-pill: 999px;   /* every button is a pill */
  --panel-gap: 16px;      /* cream gutter between stacked color panels (measured from the Framer original) */
  --sticker-stroke: 6px;  /* cream outline on photo cutouts */
  --shadow-soft: 0 10px 40px -12px oklch(25% 0.03 60 / 0.16);
  --shadow-lift: 0 18px 50px -16px oklch(25% 0.04 60 / 0.28);
  --shadow-md: var(--shadow-soft); /* core.css role */
  --transition: 140ms ease;        /* core.css role */
  --content-width: 1160px;
  --content-narrow: 780px;
}

/* ---------- section color schemes ----------
   The design language stacks big rounded panels of saturated brand
   color on the cream page ground. Each scheme sets bg + text +
   heading; components inside inherit. */
[data-scheme="poppy"] {
  --scheme-bg: var(--poppy);
  --scheme-text: var(--cream);
  --scheme-heading: var(--cream);
}
[data-scheme="amber"] {
  --scheme-bg: var(--amber);
  --scheme-text: var(--ink);
  --scheme-heading: var(--ink);
}
[data-scheme="gold"] {
  --scheme-bg: var(--gold);
  --scheme-text: var(--ink);
  --scheme-heading: var(--ink);
}
[data-scheme="slate"] {
  --scheme-bg: var(--slate);
  --scheme-text: var(--cream);
  --scheme-heading: var(--gold);   /* the mission-panel pairing */
}
[data-scheme="teal"] {
  --scheme-bg: var(--teal-deep); /* panels run the measured deep teal, not the accent teal */
  --scheme-text: var(--cream);
  --scheme-heading: var(--gold);
}
[data-scheme="leaf"] {
  --scheme-bg: var(--leaf);
  --scheme-text: var(--ink);
  --scheme-heading: var(--ink);
}
[data-scheme="cream"] {
  --scheme-bg: var(--cream);
  --scheme-text: var(--ink);
  --scheme-heading: var(--ink);
}
[data-scheme] {
  background: var(--scheme-bg);
  color: var(--scheme-text);
}

/* ---------- brand base overrides ----------
   The reset, root size (112.5%), fluid media, base tag styles, and the
   structural classes come from the vendored core.css (loaded before this
   file; @layer'd, so everything unlayered here wins). This section carries
   only what the BRAND says differently from core's defaults. */
html {
  scroll-behavior: smooth; /* core doesn't set it; guarded below */
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Headings: Visby on h1–h4 (core puts the display face on h1/h2 only and
   the body face on h3–h6), sentence case (core uppercases h3/h4 — not this
   brand), and the margin-below flow model — this site is centered color
   bands, where core's Butterick space-above model doesn't apply. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--scheme-heading, var(--color-text-primary));
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-sm);
  text-transform: none;
  letter-spacing: normal;
  text-wrap: balance;
}

/* Big headings run Heavy — the weight the old site's Visby headings
   actually carried; h3/h4 stay ExtraBold. */
h1,
h2 {
  font-weight: 900;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-tight);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--font-size-display);
  line-height: var(--line-height-tight);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 var(--space-sm);
  max-width: var(--measure);
  text-wrap: pretty; /* better rag + no orphans; sanctioned by layout/responsive */
}

/* The margin-below flow model above replaces core's p+p space-above —
   without this, adjacent paragraphs would get both. */
p + p {
  margin-block-start: 0;
}

/* Underlined links in the brand voice; core's base is underline-less with
   an opacity-fade hover — opacity pinned so that fade can't reach through. */
a {
  color: var(--color-text-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
  transition: color 140ms ease;
}

a:hover {
  color: var(--color-accent-dim);
  opacity: 1;
}

/* Core's reduced-motion guard kills animations/transitions; smooth scroll
   is this file's own opinion, so its guard lives here too. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}