/**
 * Design Tokens — Dfd
 *
 * Single source of truth for all design decisions not covered by theme.json.
 * Colors and font sizes live in theme.json (they power the block editor palette).
 * Everything else lives here.
 *
 * Usage: var(--kd-*)
 * Prefix: --kd-* (org-level design system, shared across KD clients) to avoid
 * collisions with WP's own custom properties.
 */

:root {
	/* ── Color roles (values live in the theme.json palette) ─────────────────── */

	--kd-color-base: var(
		--wp--preset--color--base
	); /* white #FFFFFF — text-on-dark + white panels (leaderboard card, etc).
	   ⚠️ NOT the page background. ~30 starter pattern partials (hero-home,
	   card-carousel, story-*, team-*, etc.) already read --kd-color-base as
	   "white" for light text on dark bands — repointing this slug to lavender
	   silently tinted all of them and put lavender-on-purple footer text at
	   3.94:1 (fails AA). base/surface were swapped back round-trip (F1 review
	   round 1, 2026-09-09) to restore that meaning: base stays the starter's
	   white, DFD's lavender page tint lives at --kd-color-surface instead. */
	--kd-color-contrast: var(
		--wp--preset--color--contrast
	); /* headline ink — navy #1C1355 */
	--kd-color-body: var(
		--wp--preset--color--body-ink
	); /* body text — black #000000 */
	--kd-color-primary: var(
		--wp--preset--color--primary
	); /* navy fills (dark button, pillars) #1C1355 */
	--kd-color-secondary: var(
		--wp--preset--color--secondary
	); /* purple bands #746DB0 */
	--kd-color-accent: var(
		--wp--preset--color--accent
	); /* duck yellow #FFDE17 */
	--kd-color-neutral-100: var(--wp--preset--color--neutral-100);
	--kd-color-neutral-300: var(--wp--preset--color--neutral-300);
	--kd-color-neutral-500: var(--wp--preset--color--neutral-500);
	--kd-color-neutral-700: var(--wp--preset--color--neutral-700);
	--kd-color-neutral-900: var(--wp--preset--color--neutral-900);
	--kd-color-banner-bg: var(
		--wp--preset--color--secondary
	); /* announcement / top-strip = indigo */

	/* ── brand palette + utility (values live in theme.json) ─────────────────── */

	--kd-color-accent-1: var(--wp--preset--color--primary); /* form focus */
	--kd-color-tint: var(--wp--preset--color--tint);
	/* ── Accent rotation ──────────────────────────────────────────────────────
	   A small ordered set for decorative sequences that need to cycle through
	   distinct hues — values rows, stat rows, icon sets. Deliberately FOUR, and
	   deliberately drawn from the brand palette rather than an arbitrary
	   rainbow: a starter should not ship a client's campaign colours. Add more
	   only if a design genuinely needs them.
	   ⚠️ NOT the same thing as the palette's `accent`/`accent-2` COLOUR ROLES
	   below — --kd-color-accent-2 in THIS rotation is the yellow accent (2nd
	   in the cycle), not the pink accent-2 palette slot. Reach for
	   --kd-color-pink when you mean the palette role (a footer social-icon
	   circle, keyed off --kd-color-accent-2 by mistake, rendered yellow
	   instead of pink during F1 build/verify — 2026-09-09). */
	--kd-color-accent-1: var(--wp--preset--color--primary);
	--kd-color-accent-2: var(--wp--preset--color--accent);
	--kd-color-accent-3: var(--wp--preset--color--accent-2);
	--kd-color-accent-4: var(--wp--preset--color--contrast);

	/* ── Palette role aliases — unambiguous names for the theme.json slots that
	   collide in name with the accent-rotation set above. ── */
	--kd-color-yellow: var(
		--wp--preset--color--accent
	); /* duck yellow #FFDE17 */
	--kd-color-pink: var(--wp--preset--color--accent-2); /* #FFB5B5 */
	/* Dark Blue #2E5EAB — the Duck'chella logo blue from the client's brand
	   style guide (figma-analysis L49), added 2026-10-14 for the naming-rights
	   tiles (KD proposal 2100:682). White text 6.35:1, yellow 4.75:1; navy
	   on it is only 2.6:1, so pair it with white type. */
	--kd-color-blue: var(--wp--preset--color--blue);
	--kd-color-surface: var(
		--wp--preset--color--surface
	); /* lavender #EDECF7 — THE page background (global.css `body`); also the
	   header bar's bg and any other "lavender tint" fill. Despite the name
	   (inherited from the starter, where `surface` meant "white panel"),
	   DFD's actual white-panel role is --kd-color-base — see its comment. */
	--kd-color-error: var(--wp--preset--color--error); /* form error #DF0808 */

	/* ── Buttons — roles cascade from the theme.json palette (no hardcoded hex) ──
	   Two filled roles per the Figma comp (10:347/348 yellow, 10:334/335 navy) —
	   no outline/transparent style in this design. Primary = yellow pill, black
	   text. Secondary = navy pill, white text; the starter's `.is-style-outline`
	   (WP core's built-in "Outline" button variation) is remapped to this solid
	   fill in global.css rather than left as a transparent-border style, so an
	   editor picking "Outline" from the block toolbar gets the navy pill Figma
	   actually draws. */
	--kd-btn-bg: var(--kd-color-accent); /* primary fill — duck yellow */
	--kd-btn-fg: var(--kd-color-body); /* primary text — black */
	--kd-btn-bg-hover: color-mix(
		in srgb,
		var(--kd-color-accent) 94%,
		black
	); /* ~6% darker yellow */
	--kd-btn-outline: var(--kd-color-primary); /* outline border + text */
	--kd-btn-outline-hover: var(
		--kd-color-secondary
	); /* outline hover — purple */
	--kd-btn-link: var(--kd-color-primary); /* text-link color */
	--kd-btn-link-accent: var(
		--kd-color-secondary
	); /* text-link hover — purple */

	/* Secondary button role — navy pill / white text (10:334, 10:335, footer
	   "Create a Team" pill). Maps onto `.is-style-outline` in global.css. */
	--kd-btn2-bg: var(--kd-color-primary); /* navy #1C1355 */
	--kd-btn2-fg: var(--kd-color-base); /* white */
	--kd-btn2-bg-hover: color-mix(in srgb, var(--kd-color-primary) 88%, white);

	/* ── Font size aliases (values live in theme.json) ──────────────────────── */

	--kd-size-xs: var(--wp--preset--font-size--small); /* 0.9375rem / 15px */
	--kd-size-eyebrow: var(
		--wp--preset--font-size--small
	); /* 0.9375rem / 15px */
	--kd-size-body: var(--wp--preset--font-size--medium); /* 1.125rem / 18px */
	--kd-size-body-lg: var(--wp--preset--font-size--large); /* 1.25rem / 20px */
	--kd-size-h6: var(--wp--preset--font-size--small); /* 0.9375rem */
	--kd-size-h5: var(--wp--preset--font-size--medium); /* 1.125rem */
	--kd-size-h4: var(--wp--preset--font-size--xx-large); /* 1.5rem — 24px */
	--kd-size-h3: var(--wp--preset--font-size--xxx-large); /* 1.75rem — 28px */
	--kd-size-h2: var(--wp--preset--font-size--huge); /* clamp → 50px */
	--kd-size-h1: var(--wp--preset--font-size--huge); /* clamp → 50px */
	--kd-size-banner: var(
		--wp--preset--font-size--gigantic
	); /* clamp → 70px — display */
	--kd-size-btn: 1.375rem; /* 22px — button label */

	/* ── Font family aliases (values live in theme.json) ────────────────────── */

	--kd-font-heading: var(--wp--preset--font-family--heading);
	--kd-font-body: var(--wp--preset--font-family--body);

	/* ── Typography ─────────────────────────────────────────────────────────── */

	--kd-fw-body: 400;
	--kd-fw-heading: 700;

	--kd-lh-tight: 1.2; /* h1, h2 */
	--kd-lh-mid: 1.3; /* h3, h4 */
	--kd-lh-loose: 1.4; /* h5, h6 */
	--kd-lh-body: 1.4444; /* body, paragraphs — 18/26 */

	/* ── DFD type scale + tracking — Figma-verified sizes not covered by the
	   theme.json font-size picker (display, numeral) plus the tracking/shadow
	   values every heading and numeral shares (figma-analysis-2026-09 §1.2). ── */
	--dfd-size-h2-section: clamp(
		2rem,
		3.5vw,
		3.125rem
	); /* 32px → 50px — h1/h2 */
	--dfd-size-display: clamp(2.5rem, 4.9vw, 4.375rem); /* 40px → 70px */
	--dfd-size-numeral: clamp(2.75rem, 4.6vw, 4.125rem); /* 44px → 66px */
	--dfd-track-heading: 0.03em; /* 3% — all DynaPuff headings */
	--dfd-track-numeral: 0.1em; /* 10% — steps 01/02/03 */
	--dfd-track-btn: -0.02em; /* buttons */
	--dfd-shadow-heading: 0 4px 4px rgba(0, 0, 0, 0.15);
	--dfd-section-pad: clamp(3.5rem, 7vw, 6.5rem); /* 56px → 104px */

	/* ── Spacing ─────────────────────────────────────────────────────────────── */

	--kd-space-xs: 0.5rem; /*  8px */
	--kd-space-sm: 1rem; /* 16px */
	--kd-space-md: 1.25rem; /* 20px — Figma card-grid gap (10:297–299) */
	--kd-space-lg: 2.5rem; /* 40px */
	--kd-space-xl: 4rem; /* 64px */
	--kd-space-xxl: 6rem; /* 96px */

	/* ── Layout container ─────────────────────────────────────────────────────────
	   Single source of truth for the page width + side gutters. The gutter is
	   proportional to the viewport (Figma footer = 7.64% ≈ 110px at 1440), so it
	   GROWS on large screens and CLIPS on small ones, while the content is CAPPED
	   on extra-large screens. `--kd-edge-pad` = the gutter until the content hits
	   the cap, then centering takes over. Header/footer/badge all pad with it so
	   every band lines up with the FSE content column (theme.json mirrors these:
	   layout.contentSize = --kd-content-max, root padding = --kd-gutter). */
	/* ── The composition width ───────────────────────────────────────────────
	   ONE number drives the content column, the card-grid bounds and the split
	   composition. It is DERIVED, not asserted: the site's widest repeating
	   unit is a 3-card row, so the column is exactly three Figma cards plus
	   their two gaps. Change --kd-card-w and the band follows, which is what
	   keeps the grid fitting and the carousels chrome-free.

	   DFD (figma-analysis-2026-09 §1.3): 3 × 392px card + 2 × 20px gap = 1216px
	   — matches the verified content width (112px margins @1440) and the
	   theme.json contentSize/wideSize of 76rem. --kd-space-md carries the
	   20px card-grid gap (was 24px generic spacing in the starter; DFD's own
	   Figma gap IS 20px, so no drift between the grid gap and the general
	   spacing token here). */
	--kd-card-w: 24.5rem; /* 392px — Figma 3-up card (10:297–299) */
	--kd-composition: calc(3 * var(--kd-card-w) + 2 * var(--kd-space-md));
	--kd-content-max: var(--kd-composition); /* 1216px */
	--kd-gutter: clamp(1.25rem, 7.64vw, 9rem); /* 20px → 7.64vw → 144px */
	--kd-edge-pad: max(
		var(--kd-gutter),
		calc((100% - var(--kd-content-max)) / 2)
	);

	/* NAV-1 (2026-09-12, Alain: "a bit more spacing between nav items, they
	   feel so tight depending on the window size"; agreed the header can
	   carry its own gutter value, D25 follow-up).
	   Round 1 gate fix (design-diff kickback, VERIFIED live on :8100): a
	   flat 24px floor across the WHOLE 1100–1439 band collapsed the header
	   gutter even where the row fit fine with the normal page gutter —
	   misaligning the logo from the hero H1 / next-section h2 by up to 73px
	   at 1280 with nothing forcing it. Alain agreed the header MAY run a
	   tighter gutter (a WIDER row) than the page below 1440 when the nav
	   genuinely needs the room — not that it always should. Formula is now
	   "page gutter, unless the row needs more space, floored at 24px":
	   preferred = half of whatever's left after the row's own footprint;
	   ceiling = the normal page gutter (so the logo stays on the content
	   column whenever it fits); floor = 24px (the same hard minimum as
	   before, for widths where even the full page gutter can't hold the
	   row).
	   --kd-header-row-need (1030px) = the row's own width at the in-band
	   nav-gap (48px): 163px logo + ~12px mainbar-internal gap + 612px of
	   link content (6 items) + 5×48px gaps. LIVE-CALIBRATED, not derived:
	   bisected the zero-padding, 163px-logo wrap boundary at 1028px (wraps)
	   / 1030px (fits) — matches to the pixel. LABEL-DEPENDENT: editing a
	   menu label in Appearance → Menus changes the 612px link-content term
	   and this number drifts — re-calibrate (same bisection method, see the
	   NAV-1 tracker entry) if nav copy changes.
	   The ceiling term deliberately does NOT reference --kd-edge-pad by
	   name — it repeats --kd-edge-pad's own expression instead. Code review
	   (2026-09-12): global.css sets `--kd-edge-pad: var(--kd-header-gutter)`
	   on `.kd-mainbar` inside the 1100–1439.98 band, so if this ceiling
	   read var(--kd-edge-pad) it would be self-referential ON THAT SAME
	   ELEMENT (--kd-edge-pad → --kd-header-gutter → --kd-edge-pad) and the
	   custom property would go cyclic-invalid for the header. Using the
	   same primitives (--kd-gutter, --kd-content-max) instead of the name
	   gives the identical value with no cycle.
	   `100%` here is the SAME containing block --kd-edge-pad already
	   resolves against on `.kd-mainbar` (not a nested/padded ancestor — the
	   DL-F trap was on the hero's copy column, a different element; this
	   selector's own padding is what both formulas use, already proven
	   correct against Figma at 1920/1440). Nesting a max() inside this
	   clamp()'s ceiling is valid CSS. */
	--kd-header-row-need: 1030px;
	--kd-header-gutter: clamp(
		24px,
		calc((100% - var(--kd-header-row-need)) / 2),
		max(var(--kd-gutter), calc((100% - var(--kd-content-max)) / 2))
	);

	/* Inner content measures — semantic caps for content NARROWER than the column.
	   Single source of truth (was hardcoded per-pattern from Figma x-coordinates).
	   Each is min(measure, 100%) so it degrades cleanly on small screens instead of
	   overflowing — Figma's fixed canvas doesn't account for smaller viewports. */
	/* ~1000px — prose/reading column (Figma body col x=116) */
	--kd-measure-reading: min(62.5rem, 100%);
	/* ~574px — section intro / archive lede */
	--kd-measure-intro: min(35.875rem, 100%);
	/* ~555px — portrait / caption / tight column */
	--kd-measure-narrow: min(34.75rem, 100%);
	/* ~784px — centred card group (cpt-section) */
	--kd-measure-card: min(49rem, 100%);
	/* 1224px — 3-card grid bounds. Derived from the same composition as the
	   content column, so grid and band can never drift apart. */
	--kd-measure-grid: min(var(--kd-composition), 100%);
	/* 1224px — split composition (media + gap + text). Same value as the grid,
	   so a split shares its edge with any card grid on the page. Figma draws
	   the split at 500 media + ~100 gap + 568 text ≈ 1170 on a 1220 column
	   (About 226:2478/2479, 226:2484/2485, 276:5384); the cap is what stops
	   the columns from simply halving whatever band they are handed. */
	--kd-measure-split: min(var(--kd-composition), 100%);
	/* 807px — CTA-band card island */
	--kd-measure-cta: min(807px, 100%);

	--kd-mainbar-height: 196px; /* header bar height (12:657 logo BOX y45 + 151 tall,
		12:651 nav baseline y81). The 151 is the Figma node's bounding box, not
		the rendered logo height — the artwork is alpha-trimmed inside that box,
		so at 163px display width the actual image renders ~131px tall
		(2349×1887 source ratio). Don't read 151 off this comment as an <img>
		height. */
	--kd-btn-pad: 1.5rem 2.25rem; /* fixed-rem padding → 74px tall button at 22px/1.2 line-height */

	/* ── Internal rhythm — consistent gaps within patterns ───────────────────── */

	--kd-gap-tight: 0.5rem; /*  8px — heading → paragraph, subtitle → heading */
	--kd-gap-normal: 0.75rem; /* 12px — icon → label, icon → heading */
	--kd-gap-wide: 2rem; /* 32px — image → heading (cards) */
	--kd-gap-section: 2.5rem; /* 40px — section header → content */

	/* ── Border Radius ───────────────────────────────────────────────────────── */

	--kd-radius-sm: 4px;
	--kd-radius-md: 12px; /* cards, photos, search band, about card — 10:295/297/360, 12:905 */
	--kd-radius-lg: 24px;
	--kd-radius-card: 12px; /* Figma card radius (10:295 etc) — was 20px in the starter default */
	--kd-radius-pill: 999px; /* buttons — 500 in Figma, resolves to a true pill */
	--dfd-radius-panel: 34px; /* leaderboard white panel — 10:369 */
	--dfd-radius-pillar: 10px; /* pillar cards — 12:913 */

	/* ── Tier gradients (SP1, gate rounds 1–2) ─────────────────────────────────
	   Sponsorship-tier card backgrounds — `patterns/tier-card.php` (SP1),
	   consumed later by sponsor-packages (SP5) and sponsor-underwriting
	   (SP6) per the tracker. A fixed 5-item scale specific to the tier
	   cards, not a reusable semantic colour role, so it lives under its own
	   --dfd-tier-grad-* / --dfd-color-* prefix rather than --kd-color-* (Figma
	   get_design_context reads on 2075:2/13/24/35/46 — decision log D26).
	   ⚠️ Raw hex is a DELIBERATE exception here, not an oversight: this is a
	   fixed, Figma-sourced 5-item palette with two values already hand-tuned
	   away from their literal Figma hex for accessibility (below), so it's
	   documented and named rather than routed through the semantic
	   --kd-color-* roles those exist for. Logged in the project decision
	   log (gate round 2).
	   --dfd-color-purple-ink (gate round 2): named so it can be reused —
	   `.sponsors-hero__kicker` (lavender page background) also reads it now
	   (5.26:1 there; was white-on-purple-adjacent #746db0 at 3.94:1 before
	   round 1 left it, then round 2 withdrew that "leave it" call).
	   Main Stage's and Rising Star's BOTTOM gradient stop reads the SAME
	   token (gate round 1 finding): white teaser/link text over the literal
	   Figma bottom colour (#746db0) measured ~3.9:1 at the card's lower
	   half — below WCAG AA (4.5:1). --dfd-color-purple-ink measures 6.16:1
	   with the same white text (pure end-stop maths; the rendered value at
	   the teaser's actual y is gradient-blended and separately verified
	   live, see the SP1 handoff). Every other tier's stops are the literal
	   Figma values.
	   ⚠️ Headliner's TOP stop is ALSO lightened (gate round 3): the literal
	   Figma value (#8b82c7) measured ~4.38:1 for the navy kicker/year text
	   at their actual rendered y within the gradient (t≈0.07, not the pure
	   top-stop endpoint — gate round 2 found the in-gradient value reads a
	   little lower than the endpoint alone), short of the 4.5:1 AA floor.
	   #948cd2 — the smallest lightening step tested that clears it —
	   measures ≈4.95:1 at the same t. Bottom stop (#2e2466) is unchanged
	   (not implicated; every other tier's stops, top and bottom, stay the
	   literal Figma values — Headliner's top is the only exception). */
	--dfd-color-purple-ink: #5f58a3;
	--dfd-tier-grad-headliner-top: #948cd2; /* Figma: #8b82c7 — lightened, see comment above */
	--dfd-tier-grad-headliner-bottom: #2e2466;
	--dfd-tier-grad-main-stage-top: #c9c1f8;
	--dfd-tier-grad-main-stage-bottom: var(
		--dfd-color-purple-ink
	); /* Figma: #746db0 — darkened, see comment above */
	--dfd-tier-grad-rising-star-top: #ffb5b5;
	--dfd-tier-grad-rising-star-bottom: var(
		--dfd-color-purple-ink
	); /* Figma: #746db0 — darkened, see comment above */
	--dfd-tier-grad-festival-friend-top: #ffde17;
	--dfd-tier-grad-festival-friend-bottom: #ffb5b5;
	--dfd-tier-grad-opening-act-top: #c9c1f8;
	--dfd-tier-grad-opening-act-bottom: #ffb5b5;

	/* ── Transitions ─────────────────────────────────────────────────────────── */

	--kd-transition-fast: 150ms ease;
	--kd-transition-base: 250ms ease;
	--kd-transition-slow: 400ms ease;

	/* ── Shadows ─────────────────────────────────────────────────────────────── */

	--kd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--kd-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
	--kd-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
	--kd-shadow-image: 0 4px 10px rgba(0, 0, 0, 0.15); /* split/feature media drop — Figma 226:2478 */
	--kd-shadow-card: 0 4px 10px 6px rgba(0, 0, 0, 0.06); /* subtle white-card lift — countdown card, Figma 218:2092 */

	/* ── Z-index ─────────────────────────────────────────────────────────────── */

	--kd-z-base: 1;
	--kd-z-overlay: 100;
	--kd-z-modal: 200;
	--kd-z-header: 300;
	--kd-z-mobile-overlay: 900;
	--kd-z-mobile-panel: 1000;

	/* ── Navigation (reusable — header/footer menus + off-canvas mobile) ─────────
	   These drive both the KD Starter build and the dfd back-port. Re-skin a
	   project by overriding only these, not the rules in global.css. */

	--kd-nav-link: var(
		--kd-color-contrast
	); /* nav link — navy on the hero image (Home, DL-E overlay) or the lavender page bg (interior pages) */
	--kd-nav-link-hover-opacity: 0.78; /* hover dim on the bands */
	/* DL-E (nav review): Figma's 6 nav items (12:651–656) sit a consistent
	   59px apart (x421+120=541 -> 600; 600+133=733 -> 792; 792+163=955 ->
	   1014; 1014+84=1098 -> 1157; 1157+68=1225 -> 1284 — all 59px gaps). This
	   is the ≥1440px value; global.css's "narrow-desktop safety margin"
	   overrides --kd-nav-gap to a flat 48px for 1100–1439.98px (NAV-1,
	   2026-09-12 — was a fluid 12→48px ramp under DL-E), paired with the
	   header's own shrink-only-when-needed gutter (--kd-header-gutter,
	   above) so the row never needs less than 48px to stay single-line —
	   see that rule's own comment. */
	--kd-nav-gap: 3.6875rem; /* 59px */
	--kd-nav-font: var(
		--kd-font-heading
	); /* DynaPuff, per Figma nav (12:651–656) */
	--kd-nav-weight: 700;
	--kd-nav-size: 1.0625rem; /* 17px */

	/* Desktop dropdowns */
	--kd-dropdown-bg: var(--kd-color-base);
	--kd-dropdown-link: var(--kd-color-contrast);
	--kd-dropdown-link-hover: var(--kd-color-primary);
	--kd-dropdown-radius: var(--kd-radius-md);
	--kd-dropdown-shadow: var(--kd-shadow-md);
	--kd-dropdown-min-width: 240px;

	/* Off-canvas mobile panel */
	--kd-mobile-panel-width: 60%; /* share of screen the panel covers */
	--kd-mobile-panel-max: 90vw; /* never wider than this */
	/* Anchor Navy, not Embolden Blue: white text on the brand primary measures
	   3.81:1, below WCAG AA (4.5:1) for body-size text. Navy gives 14.6:1. */
	--kd-mobile-panel-bg: var(--kd-color-contrast);
	--kd-mobile-panel-fg: var(--kd-color-base);
	--kd-mobile-panel-pad: 2rem;
	--kd-mobile-panel-shadow: -8px 0 40px rgba(0, 0, 0, 0.25);
	--kd-mobile-overlay-bg: rgba(0, 0, 0, 0.5); /* black, transparent */
	--kd-mobile-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
	--kd-mobile-breakpoint: 768px; /* (reference; media queries can't read vars) */

	/* Hamburger — bars are navy on the lavender header bar (not the starter's
	   original white-on-dark trigger; DFD's header is light, not dark). */
	--kd-burger-bar: var(--kd-color-contrast);
	--kd-burger-width: 26px;
	--kd-burger-bar-height: 2.5px;

	/* ── Footer (reusable — every page's footer band) ───────────────────────────
	   Measure caps paragraph line-length inside the footer columns. The columns
	   (36%/36%/28% of 1512px) are far wider than comfortable prose, so an uncapped
	   paragraph sprawls and the spacing reads loose. Re-skin by overriding here. */
	--kd-footer-measure: 22rem; /* ~352px — max line-length for footer column paragraphs */

	/* ── Hero ─────────────────────────────────────────────────────────────────── */
	--kd-hero-interior-min: 452px; /* interior page hero band height (Figma 226:2585) */
	--kd-hero-content-top: 134px; /* breadcrumb sits exactly 50px below the badge bottom (top-anchored) */
	--kd-no-hero-top: 134px; /* clears the 168px badge (~84px overflow) + 50px breathing room, matching the hero */

	/* ── Section rhythm ──────────────────────────────────────────────────────────
	   Single gap applied ONCE as margin-block-start between every pair of stacked
	   .entry-content children (owl selector). STEPPED to honor the designer's
	   discrete breakpoint chips exactly (Figma spacing block 2085:1937):
	   Desktop ≥1024px = 120px · Tablet 768–1024px = 96px · Mobile <768px = 64px.
	   (A single clamp(64px,8vw,120px) can't hit all three — it only reaches 96px
	   at ~1200px, missing the 768–1024 tablet band — so we step instead.)
	   Overrides live just below this :root block (custom props can't be redefined
	   in a nested media query). Desktop value is the default here. */
	--kd-section-gap: 7.5rem; /* 120px — desktop (≥1024px) */

	/* ── Band internal padding ────────────────────────────────────────────────────
	   Breathing room INSIDE colored/banded sections — independent of the rhythm gap.
	   Sections that override (e.g. .kd-values-section at 60→84px) keep their own
	   per-band clamp. Plain (no-background) sections get zero vertical padding —
	   the margin-gap is the only space between them. */
	--kd-band-pad-y: clamp(3.5rem, 5.5vw, 5.5rem); /* 56px → 88px */
}

/* ── Section rhythm — stepped breakpoint overrides ──────────────────────────────
   Desktop-first (matches the theme's existing max-width media queries). Honors the
   designer's discrete chips: 96px in the tablet band, 64px on mobile. */
@media (max-width: 1023.98px) {
	:root {
		--kd-section-gap: 6rem; /* 96px — tablet (768–1023.98px) */
	}
}

@media (max-width: 767.98px) {
	:root {
		--kd-section-gap: 4rem; /* 64px — mobile (<768px) */
	}
}

/* DL-E gate round 1 fix: single source of truth for the header's real
   rendered height. Was duplicated — global.css hardcoded `min-height:96px`
   in its own `@media (max-width:1024px)` block AND hero-campaign.css
   redeclared `--dfd-header-h:6rem` in an identical media query, two
   independent places that had to be kept in sync by hand. Overriding the
   token itself here, at the SAME breakpoint `.kd-mainbar`'s min-height
   already used, means both consumers (`.kd-mainbar { min-height:
   var(--kd-mainbar-height) }` and hero-campaign.css's
   `--dfd-header-h: var(--kd-mainbar-height)`) now track it automatically —
   change the header's mobile height once, here, and both follow.

   NAV-1 (2026-09-12): breakpoint moved 1024 → 1099.98px — this token IS
   the header's own height, so it has to switch WITH the hamburger; see
   global.css's `@media (max-width: 1099.98px)` nav block (the canonical
   note) for why 1100 and the full list of rules that moved together.
   hero-campaign.css's own `min-width:1024px` content-grid breakpoint was
   deliberately left UNMOVED (out of NAV-1's allowed files) — it reads
   this token, not a literal 1024px, so its overlay math (`--dfd-header-h`
   + fixed offset) stays self-consistent across the resulting mismatch
   band (1024–1099: hero's 2-col grid is live but the header is still
   96px/hamburger) — h1 ends up 42px below whatever the header's CURRENT
   rendered height is, not pinned to the 196px-tall value the Figma comp
   assumes; verified live at 1050 and at 1099/1100, see the NAV-1 tracker
   entry. */
@media (max-width: 1099.98px) {
	:root {
		/* px, not rem (gate round 2): a geometric constant tied to the
		   mobile mainbar's own px min-height and the logo's px margin-top
		   above it (global.css), not a type size. */
		--kd-mainbar-height: 96px;
	}
}