/*
 * Design tokens, taken from the approved Claude Design export (docs/Desktop · 1440-html and the mobile
 * exports). Desktop values are at a 1440px viewport, mobile at 390px; fluid sizes scale between them.
 *
 * Fluid formula: clamp(mobile, calc(A + B vw), desktop), where B = (desktop - mobile) / 1050 * 100
 * and A = mobile - B * 3.9 (1050 = 1440 - 390).
 */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-condensed-800-900-latin.woff2") format("woff2");
	font-weight: 800 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Stand-ins for Archivo while it loads, scaled to its width, so long headings wrap the same way
 * before and after the swap (otherwise the page jumps: a layout shift). Measured Oct 13, 2026: the
 * same text set in Archivo 800 is 0.907 times as wide as in Arial Bold. Without these, weight 800
 * falls back to Arial Black on Windows, far wider still. Roboto Bold (Android) is a little narrower
 * than Arial Bold, so it scales less. Each face is only used where that font is installed.
 */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 800 900;
	size-adjust: 90.7%;
}

@font-face {
	font-family: "Archivo Fallback Roboto";
	src: local("Roboto Bold"), local("Roboto-Bold");
	font-weight: 800 900;
	size-adjust: 94%;
}

@font-face {
	font-family: "Public Sans";
	src: url("../fonts/public-sans-wght400-800-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Public Sans";
	src: url("../fonts/public-sans-italic-wght400-800-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colors */
	--color-yellow: #ffd319;          /* brand: primary buttons, highlights */
	--color-ink: #1b1a17;             /* text, dark sections, footer */
	--color-ink-hero: #12110e;        /* hero background */
	--color-ink-raised: #2a2823;      /* cards on dark sections */
	--color-ink-rule: #3a372f;        /* dividers on dark sections */
	--color-cream: #faf7f0;           /* page background */
	--color-white: #ffffff;           /* surfaces */
	--color-line: #e6e0d2;            /* borders */
	--color-line-strong: #d9d2c3;     /* FAQ dividers */
	--color-muted: #5a554b;           /* secondary text on light */
	--color-on-dark: #d8d2c4;         /* text on ink */
	--color-on-dark-soft: #ece7db;    /* lead text on ink */
	--color-on-dark-muted: #a9a294;   /* small print on ink */
	--color-blue: #072ac8;            /* links, accents, Duck Club band */
	--color-blue-hover: #051e8f;
	--color-blue-deep: #0a1f8f;       /* tiles on blue */
	--color-blue-tint: #e7f1fe;       /* icon chips */
	--color-on-blue: #dce6ff;         /* text on blue */
	--color-sky: #1e96fc;             /* text-message icon */
	--color-star: #e0a800;            /* stars on white cards */

	/* Fonts */
	--font-display: "Archivo", "Archivo Fallback", "Archivo Fallback Roboto", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Type scale (mobile → desktop) */
	--text-hero: clamp(2.375rem, 1.725rem + 2.667vw, 4.125rem);        /* 38 → 66 */
	--text-display: clamp(4rem, 3.443rem + 2.286vw, 5.5rem);           /* 64 → 88, big numbers */
	--text-h2-lg: clamp(2.125rem, 1.614rem + 2.095vw, 3.5rem);         /* 34 → 56, reviews and closing band */
	--text-h2: clamp(2rem, 1.629rem + 1.524vw, 3rem);                  /* 32 → 48, section headings */
	--text-h2-sm: clamp(1.625rem, 1.393rem + 0.952vw, 2.25rem);        /* 26 → 36, panels and cards */
	--text-h3: clamp(1.5rem, 1.407rem + 0.381vw, 1.75rem);             /* 24 → 28 */
	--text-price: clamp(2.5rem, 2.314rem + 0.762vw, 3rem);             /* 40 → 48 */
	--text-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem);        /* 17 → 20 */
	--text-lg: 1.125rem;      /* 18 */
	--text-md: 1.0625rem;     /* 17 */
	--text-base: 1rem;        /* 16 */
	--text-sm: 0.9375rem;     /* 15 */
	--text-xs: 0.875rem;      /* 14, eyebrows */
	--text-2xs: 0.8125rem;    /* 13, fine print */

	--leading-tight: 1;
	--leading-heading: 1.05;
	--leading-snug: 1.35;
	--leading-body: 1.55;

	--weight-regular: 400;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-heavy: 800;
	--weight-black: 900;

	--tracking-eyebrow: 0.14em;

	/* Spacing (px values from the design) */
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-10: 0.625rem;
	--space-12: 0.75rem;
	--space-14: 0.875rem;
	--space-16: 1rem;
	--space-20: 1.25rem;
	--space-24: 1.5rem;
	--space-28: 1.75rem;
	--space-32: 2rem;
	--space-36: 2.25rem;
	--space-40: 2.5rem;
	--space-48: 3rem;
	--space-64: 4rem;

	/* Layout */
	--container-max: 75rem;                                              /* 1200 content width */
	--gutter: clamp(1rem, 0.629rem + 1.524vw, 2rem);                     /* 16 → 32 side padding */
	--section-pad: clamp(2.75rem, 1.543rem + 4.952vw, 6rem);             /* 44 → 96 */
	--section-pad-sm: clamp(2.5rem, 1.757rem + 3.048vw, 4.5rem);         /* 40 → 72 */
	--stack-gap: clamp(1.5rem, 1.129rem + 1.524vw, 2.5rem);              /* 24 → 40 between a heading block and its content */

	/* Shape */
	--radius-sm: 10px;    /* buttons */
	--radius-md: 12px;    /* large buttons, town buttons */
	--radius-lg: 16px;    /* cards */
	--radius-xl: 18px;    /* large cards, photos */
	--radius-2xl: 20px;   /* panels */
	--radius-pill: 999px;

	--shadow-bar: 0 -6px 20px rgba(27, 26, 23, 0.12);

	/* Interaction */
	--tap-min: 44px;
	--focus-color: var(--color-ink);
	--focus-ring: 3px solid var(--focus-color);
	--focus-offset: 3px;

	/* Header */
	--utility-height: 40px;
	--header-height: 64px;          /* mobile */
	--mobile-bar-height: 74px;      /* sticky Call / Text / Schedule bar incl. padding */
}

@media (min-width: 64rem) {
	:root {
		--header-height: 84px;
	}
}