/* ==========================================================================
   GameDay Preps 2026 -- design system
   "CHALK LINE" (night edition) -- the marketing site as a playing surface
   under the lights, structured on the GameDay Preps live-stats product theme
   (GameDayPreps.2026.css) and painted in the GDP brand palette: logo-black
   surfaces, light chalk text, raw brand gold (7.6:1 on black) as the working
   accent, brand-gold stripes and hash-mark rules, a single functional rose
   flag for LIVE and scoring signals. Nothing floats, nothing casts a soft
   shadow -- paint sits ON the surface. Sections marked --floodlit/--night
   invert to DAYLIGHT chalk paper: the page is night, the big moments step
   into the light. Eyebrow chips, heading accent slabs and the parallelogram
   buttons are grafted from the broadcast-package variant, re-cut in the
   chalk-line language (flat paint, no glow).
   No frameworks. All components namespaced .gdp-* (Bootstrap-collision safe).
   NOTE: this file is piped through PHP by the vhost -- it must never contain
   a literal open-tag sequence (left angle bracket + question mark).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* day (chalk paper) constants -- GDP brand: black + gold + white.
	   Raw brand gold (#dd8d00) is only 2.4:1 on paper, so it is reserved
	   for paint: stripes, hash bands, fills, geometry. Gold TEXT and
	   indicators on light use the AA-darkened gold (5.3:1 on paper). */
	--chalk-paper: #f6f5f0;
	--chalk-panel: #ffffff;
	--chalk-ink: #212529;
	--chalk-ink-soft: #565e64;
	--chalk-line: rgba(33, 37, 41, 0.18);
	--chalk-line-strong: rgba(33, 37, 41, 0.55);
	--chalk-grid: rgba(33, 37, 41, 0.05);
	--chalk-row-alt: rgba(33, 37, 41, 0.045);
	--chalk-row-hover: rgba(33, 37, 41, 0.12);
	--chalk-gold: #dd8d00;
	--chalk-gold-dark: #ca8c09;   /* brand dark gold -- hover/pressed fills */
	--chalk-gold-pennant: #db8e27; /* brand pennant gold -- secondary accent */
	--chalk-flag: #e11d48;

	/* night (under the lights) constants -- logo black + raw brand gold
	   (7.6:1 on the #080505 surface, so gold carries text at night) */
	--night-surface: #080505;
	--night-panel: #171412;
	--night-ink: #f4f1ea;
	--night-ink-soft: #b5aea2;
	--night-line: rgba(244, 241, 234, 0.14);
	--night-line-strong: rgba(244, 241, 234, 0.5);
	--night-grid: rgba(244, 241, 234, 0.04);
	--night-row-alt: rgba(244, 241, 234, 0.05);
	--night-row-hover: rgba(244, 241, 234, 0.15);
	--night-gold: #dd8d00;
	--night-gold-hot: #db8e27; /* brand pennant gold (7.7:1 on the surface) */
	--night-flag: #fb7185;

	/* semantic aliases -- NIGHT by default; .gdp-scene--night/--floodlit
	   flip them to daylight. --gdp-accent is always text-safe; --gdp-paint
	   is the raw brand gold for stripes/fills/geometry. */
	--gdp-bg: var(--night-surface);
	--gdp-surface: var(--night-panel);
	--gdp-text: var(--night-ink);
	--gdp-text-dim: var(--night-ink-soft);
	--gdp-accent: var(--night-gold);
	--gdp-accent-hot: var(--night-gold-hot);
	--gdp-paint: var(--night-gold);
	--gdp-flag: var(--night-flag);
	--gdp-hairline: var(--night-line);
	--gdp-rule: var(--night-line-strong);
	--gdp-grid-line: var(--night-grid);
	--gdp-row-alt: var(--night-row-alt);
	--gdp-row-hover: var(--night-row-hover);
	--gdp-focus: var(--night-flag);
	--gdp-error: #ff9c8b;
	--gdp-success: #6fcf97;

	/* painted hash-mark rule (the field line signature) -- raw brand gold */
	--gdp-hash: repeating-linear-gradient(90deg, var(--gdp-paint) 0 14px, transparent 14px 28px);

	/* type: Big Shoulders Display (stadium wall paint) + Spline Sans (data) */
	--font-display: 'Big Shoulders Display', 'Trebuchet MS', sans-serif;
	--font-body: 'Spline Sans', 'Segoe UI', sans-serif;
	--font-num: 'Spline Sans', 'Segoe UI', sans-serif;

	--fs-hero: clamp(3.5rem, 9vw, 8rem);
	--fs-h1: clamp(2.5rem, 6vw, 4.5rem);
	--fs-h2: clamp(1.75rem, 4vw, 3rem);
	--fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
	--fs-lead: clamp(1.125rem, 1.8vw, 1.375rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-micro: 0.75rem;

	/* spacing */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--section-pad: clamp(4rem, 12vh, 8rem);

	/* chrome: flat paint, zero radius everywhere (product treatment) */
	--gdp-nav-h: 4.75rem;
	--gdp-nav-h-condensed: 3.5rem;
	--gdp-radius: 0px;
	--gdp-radius-lg: 0px;

	/* motion */
	--gdp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--gdp-speed: 0.65s;
}

/* --------------------------------------------------------------------------
   2. BASE (full-page styling applies only on new-chrome pages: body.gdp-body)
   -------------------------------------------------------------------------- */
body.gdp-body {
	margin: 0;
	background-color: var(--gdp-bg);
	/* faint yard-line grid under everything -- same surface as the product */
	background-image:
		repeating-linear-gradient(90deg, var(--night-grid) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(0deg, var(--night-grid) 0 1px, transparent 1px 72px);
	color: var(--gdp-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.65;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.gdp-body *,
body.gdp-body *::before,
body.gdp-body *::after { box-sizing: border-box; }

body.gdp-body h1,
body.gdp-body h2,
body.gdp-body h3,
body.gdp-body h4 {
	font-family: var(--font-display);
	font-weight: 800;
	color: var(--gdp-text);
	letter-spacing: 0.02em;
	line-height: 0.98;
	margin: 0 0 var(--sp-4);
	text-transform: uppercase;
}
body.gdp-body h1 { font-size: var(--fs-h1); }
body.gdp-body h2 { font-size: var(--fs-h2); }
body.gdp-body h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0.04em; }
body.gdp-body h4 { font-weight: 700; }

body.gdp-body p { margin: 0 0 var(--sp-4); }
body.gdp-body a { color: var(--gdp-text); }
/* :where() keeps this scoped to the new chrome but at zero selector weight,
   so any single-class rule (nav logo, footer marks) can size an image. */
:where(body.gdp-body) img { max-width: 100%; height: auto; }

body.gdp-body ::selection { background: var(--chalk-gold); color: #080505; }

/* dashed chalk focus ring, everywhere -- product signature */
:focus-visible {
	outline: 2px dashed var(--gdp-focus);
	outline-offset: 2px;
	border-radius: 0;
}

/* type utilities */
.gdp-display {
	font-family: var(--font-display);
	font-size: var(--fs-hero);
	font-weight: 800;
	color: var(--gdp-text);
	line-height: 0.9;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 0;
}
.gdp-lead {
	font-size: var(--fs-lead);
	font-weight: 400;
	color: var(--gdp-text-dim);
	line-height: 1.55;
	max-width: 42em;
}
.gdp-text	{ color: var(--gdp-text); }
.gdp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gdp-accent);
	margin: 0 0 var(--sp-4);
}
/* broadcast slate chip, re-cut in chalk: a wide skewed slab of solid paint
   ahead of the tracked caps (flat -- the broadcast gradient/glow is dropped) */
.gdp-eyebrow::before {
	content: "";
	width: 1.5em;
	height: 0.95em;
	transform: skewX(-18deg);
	background: currentColor;
}
.gdp-accent-text { color: var(--gdp-accent); }
/* title detailing (Team Spirit "chant highlight"): accent words inside
   display headings sit on a solid brand-gold slab with near-black ink type
   (7.6:1 both on the night surface and the paper bands).
   box-decoration-break keeps the slab clean when the word wraps. */
body.gdp-body h1 .gdp-accent-text,
body.gdp-body h2 .gdp-accent-text,
.gdp-display .gdp-accent-text {
	color: #080505;
	background: var(--gdp-paint);
	padding: 0 0.16em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.gdp-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* screen-reader only */
.gdp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.gdp-container {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.gdp-container--narrow { max-width: 52rem; }

.gdp-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.gdp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gdp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gdp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gdp-grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }

@media (max-width: 900px) {
	.gdp-grid--3, .gdp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gdp-grid--split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.gdp-grid--2, .gdp-grid--3, .gdp-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   4. SCENES -- flat painted bands on one surface, ruled apart with chalk
   -------------------------------------------------------------------------- */
.gdp-scene {
	position: relative;
	padding-block: var(--section-pad);
	isolation: isolate;
	overflow: hidden;
}

/* chalk rule between scenes -- a painted line, not a soft hairline */
.gdp-scene--seam { border-top: 1px solid var(--night-line-strong); }

/* HERO: open paper with a painted hash-mark band along its bottom edge,
   the same band the product paints under its header */
.gdp-scene--hero { padding-block: calc(var(--section-pad) * 1.1); }
.gdp-scene--hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 7px;
	background-image: var(--gdp-hash);
	animation: gdp-hash-scan 8s linear infinite;
}

/* PRESS BOX: the white panel band -- a flat board laid on the paper */
.gdp-scene--press {
	background-color: var(--gdp-surface);
	border-block: 1px solid var(--gdp-hairline);
}

/* FIELD: the yard-line grid painted harder -- light chalk on the night turf */
.gdp-scene--field {
	background-image:
		repeating-linear-gradient(90deg, rgba(244, 241, 234, 0.06) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(0deg, rgba(244, 241, 234, 0.06) 0 1px, transparent 1px 72px);
}

/* SIDELINE: painted sideline stripe down the left edge, drawn as an inset
   paint layer (not a border) so a slow sheen can travel down it. Layer 1 is
   the traveling light band, layer 2 the solid gold stripe. */
.gdp-scene--sideline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	pointer-events: none;
	background-image:
		linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%),
		linear-gradient(var(--gdp-paint), var(--gdp-paint));
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 8rem, 100% 100%;
	background-position: 0 -8rem, 0 0;
	animation: gdp-stripe-sheen 9s ease-in-out infinite;
}

/* NIGHT / FLOODLIT: on the night-first page these bands INVERT TO DAYLIGHT
   chalk paper -- the big moments step into the light, keeping the section
   rhythm's contrast variety. Used for the key moments and the CTA band. */
.gdp-scene--night,
.gdp-scene--floodlit {
	--gdp-bg: var(--chalk-paper);
	--gdp-surface: var(--chalk-panel);
	--gdp-text: var(--chalk-ink);
	--gdp-text-dim: var(--chalk-ink-soft);
	/* gold-as-paint rule on light bands: accent TEXT drops to ink (brand
	   gold fails AA on paper); gold survives only as paint (fills, slabs,
	   stripes, the accent-word underline) at full brand value */
	--gdp-accent: var(--chalk-ink);
	--gdp-accent-hot: var(--chalk-ink);
	--gdp-paint: var(--chalk-gold);
	--gdp-flag: var(--chalk-flag);
	--gdp-hairline: var(--chalk-line);
	--gdp-rule: var(--chalk-line-strong);
	--gdp-grid-line: var(--chalk-grid);
	--gdp-row-alt: var(--chalk-row-alt);
	--gdp-row-hover: var(--chalk-row-hover);
	--gdp-focus: var(--chalk-flag);
	--gdp-error: #b42318;
	--gdp-success: #14713d;
	background-color: var(--chalk-paper);
	background-image:
		repeating-linear-gradient(90deg, var(--chalk-grid) 0 1px, transparent 1px 72px),
		repeating-linear-gradient(0deg, var(--chalk-grid) 0 1px, transparent 1px 72px);
	color: var(--gdp-text);
}
.gdp-scene--night a,
.gdp-scene--floodlit a { color: var(--gdp-text); }

/* --------------------------------------------------------------------------
   5. NAV -- sticky opaque night band, hash-mark rule underneath
   -------------------------------------------------------------------------- */
.gdp-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--night-surface);
	font-family: var(--font-body);
}
.gdp-nav::after {
	content: "";
	display: block;
	height: 7px;
	background-image: var(--gdp-hash);
	animation: gdp-hash-scan 8s linear infinite;
}
.gdp-nav__inner {
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	height: var(--gdp-nav-h);
	transition: height 0.35s var(--gdp-ease);
}
.gdp-nav.is-condensed .gdp-nav__inner { height: var(--gdp-nav-h-condensed); }

.gdp-nav__brand {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	text-decoration: none;
	line-height: 1;
	flex-shrink: 0;
}
.gdp-nav__logo {
	width: 15rem;
	height: auto;
	display: block;
	transition: width 0.35s var(--gdp-ease);
}
.gdp-nav.is-condensed .gdp-nav__logo { width: 13rem; }
.gdp-nav__brandmeta {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	border-left: 1px solid var(--night-line-strong);
	padding-left: 0.9rem;
}
/* logo with the trademark tagline stacked UNDER it -- the tagline must stay
   visible at every width until the trademark is registered, and under the
   logo it adds no width, so it never forces the nav to overflow */
.gdp-nav__lockup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
}
.gdp-nav__tagline {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--night-gold);
	line-height: 1;
}
/* the powered-by mark is drawn in white -- on the night band it stays white */
.gdp-nav__powered { height: 0.75rem; width: auto; display: block; opacity: 0.7; }
/* the tagline stacks under the logo and stays visible at all widths (it
   must show until the trademark is registered); only the powered-by mark
   drops on phones */
@media (max-width: 560px) {
	.gdp-nav__brandmeta { display: none; }
}
/* desktop menu + powered-by mark: drop the mark and shrink the logo in the
   band where they cannot coexist with the menu (tagline stacks under the
   logo, so it costs no width and always stays) */
@media (min-width: 1081px) and (max-width: 1439px) {
	.gdp-nav__brandmeta { display: none; }
	.gdp-nav__logo { width: 13rem; }
}
/* The logo SVG is ~11:1; uncapped it renders wider than small phone screens
   (366px at 2.1rem tall) and hangs the brand off-canvas until the condensed
   state shrinks it. Cap by width on phones and let height follow. */
@media (max-width: 640px) {
	.gdp-nav__logo { height: auto; width: min(62vw, 15rem); }
	.gdp-nav.is-condensed .gdp-nav__logo { height: auto; width: min(54vw, 13rem); }
}

.gdp-nav__toggle {
	display: none;
	background: none;
	border: 2px solid currentColor;
	border-radius: 0;
	color: var(--night-ink);
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transform: skewX(-8deg);
}
.gdp-nav__toggle .gdp-icon { width: 22px; height: 22px; }
.gdp-nav__toggle-close { display: none; }
.gdp-nav.is-open .gdp-nav__toggle-open { display: none; }
.gdp-nav.is-open .gdp-nav__toggle-close { display: inline-flex; }

.gdp-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1.2vw, 0.9rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.gdp-nav .gdp-nav__link {
	display: inline-block;
	padding: 0.55rem 0.65rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--night-ink-soft);
	position: relative;
	transition: color 0.25s ease;
	white-space: nowrap;
}
.gdp-nav__link::after {
	content: "";
	position: absolute;
	left: 0.65rem;
	right: 0.65rem;
	bottom: 0.2rem;
	height: 3px;
	background: var(--night-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--gdp-ease);
}
.gdp-nav .gdp-nav__link:hover { color: var(--night-ink); }
.gdp-nav__link:hover::after { transform: scaleX(1); }
.gdp-nav .gdp-nav__link.is-active { color: var(--night-ink); }
.gdp-nav__link.is-active::after { transform: scaleX(1); }
/* nowrap + no-shrink: the nav row squeezes this button where it gets tight
   (measured wrapping "Sign / Up" at 1440px and again at 1081px, just above the
   mobile breakpoint). Without both, the label breaks on the space. */
.gdp-nav__cta { margin-left: 0.35rem; white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1080px) {
	.gdp-nav__toggle { display: inline-flex; }
	.gdp-nav__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--night-surface);
		border-bottom: 2px solid var(--night-line-strong);
		display: none;
		padding: var(--sp-4) clamp(1rem, 3vw, 2rem) var(--sp-6);
	}
	.gdp-nav.is-open .gdp-nav__menu { display: block; }
	.gdp-nav__list { flex-direction: column; align-items: stretch; gap: 0.1rem; }
	.gdp-nav__link { padding: 0.85rem 0.5rem; font-size: 0.95rem; border-bottom: 1px solid var(--night-line); }
	.gdp-nav__link::after { display: none; }
	.gdp-nav .gdp-nav__link.is-active { color: var(--night-gold); }
	.gdp-nav__cta { margin: var(--sp-4) 0 0; text-align: center; }
}

/* --------------------------------------------------------------------------
   6. BUTTONS -- parallelogram slabs grafted from the broadcast package: the
      element box stays RECTANGULAR (so the dashed focus outline reads as a
      clean rectangle) and the skewed paint is drawn on ::before. Re-cut in
      the chalk-line language: flat paint, no glow, no lift.
   -------------------------------------------------------------------------- */
.gdp-btn {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	padding: 0.55em 1.5em 0.6em;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--gdp-text);
	cursor: pointer;
	transition: color 0.15s ease;
}
/* the painted slab: a skewed parallelogram inset far enough that its sheared
   corners stay inside the element box (and the focus outline) */
.gdp-btn::before {
	content: "";
	position: absolute;
	inset: 0 0.35em;
	z-index: -1;
	border: 2px solid currentColor;
	background: transparent;
	transform: skewX(-8deg);
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gdp-btn .gdp-icon { width: 1.1em; height: 1.1em; }
/* solid: raw-gold paint slab, near-black stencil letters (7.6:1 on the gold;
   the label stays ink on every surface, daylight bands included). The
   a.gdp-btn--solid companions outrank the body.gdp-body a color rule. */
.gdp-btn--solid,
body.gdp-body a.gdp-btn--solid,
body.gdp-body button.gdp-btn--solid {
	background: transparent;
	color: var(--night-surface);
}
.gdp-btn--solid::before {
	background: var(--chalk-gold);
	border-color: var(--chalk-gold);
}
.gdp-btn--solid:hover,
.gdp-btn--solid:focus,
body.gdp-body a.gdp-btn--solid:hover,
body.gdp-body a.gdp-btn--solid:focus,
body.gdp-body button.gdp-btn--solid:hover,
body.gdp-body button.gdp-btn--solid:focus {
	background: transparent;
	color: var(--night-surface);
}
.gdp-btn--solid:hover::before,
.gdp-btn--solid:focus::before {
	background: var(--chalk-gold-dark);
	border-color: var(--chalk-gold-dark);
	box-shadow: inset 0 -4px 0 0 var(--night-surface);
}
.gdp-btn--ghost {
	background: transparent;
	color: inherit;
}
.gdp-btn--ghost:hover,
.gdp-btn--ghost:focus {
	color: inherit;
}
.gdp-btn--ghost:hover::before,
.gdp-btn--ghost:focus::before {
	background-color: color-mix(in srgb, currentColor 16%, transparent);
	box-shadow: inset 0 -3px 0 0 currentColor;
}
.gdp-btn--lg { font-size: 1.15rem; padding: 0.6em 1.8em 0.65em; }
.gdp-btn--sm { font-size: 0.85rem; padding: 0.5em 1.25em 0.55em; }
.gdp-btn:active::before { box-shadow: inset 0 -2px 0 0 currentColor; }

/* --------------------------------------------------------------------------
   7. CARDS -- flat boards with a painted team stripe on the left edge
   -------------------------------------------------------------------------- */
.gdp-card {
	position: relative;
	background: var(--gdp-surface);
	border: 1px solid var(--gdp-rule);
	border-left: 4px solid var(--gdp-paint);
	border-radius: 0;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.gdp-card:hover { box-shadow: inset 0 -3px 0 0 var(--gdp-paint); }
.gdp-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0;
	background: transparent;
	border: 2px solid var(--gdp-accent);
	color: var(--gdp-accent);
	margin-bottom: var(--sp-4);
	transform: skewX(-8deg);
}
.gdp-card__icon .gdp-icon { width: 24px; height: 24px; }
.gdp-card h3 a { text-decoration: none; }
/* doubled class outranks the body.gdp-body a color rule */
.gdp-card__link.gdp-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gdp-accent);
	text-decoration: none;
}
.gdp-card__link.gdp-card__link:hover { color: var(--gdp-accent-hot); text-decoration: underline; text-underline-offset: 3px; }
.gdp-card__link .gdp-icon { width: 1em; height: 1em; transition: transform 0.25s var(--gdp-ease); }
.gdp-card__link:hover .gdp-icon { transform: translateX(4px); }

/* badge: stencil chip */
.gdp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdp-text);
	background: transparent;
	border: 2px solid currentColor;
	border-radius: 0;
	padding: 0.3em 0.9em 0.35em;
	transform: skewX(-8deg);
}

/* --------------------------------------------------------------------------
   8. SCOREBOARD DIGITS -- flat inverted paint blocks (the totals-bar move)
   -------------------------------------------------------------------------- */
.gdp-digits {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--gdp-bg);
	background: var(--gdp-text);
	border: none;
	border-radius: 0;
	padding: 0.18em 0.35em;
	line-height: 1;
	letter-spacing: 0.02em;
	text-shadow: none;
	box-shadow: none;
}
.gdp-digits--lg { font-size: clamp(2rem, 5vw, 3.25rem); }
.gdp-digits--xl { font-size: clamp(3rem, 10vw, 6.5rem); padding: 0.14em 0.3em; }
.gdp-digits.is-flash { animation: gdp-digit-flash 0.5s ease-out; }

/* stat block (counters): stadium-wall numerals */
.gdp-stat { text-align: center; }
.gdp-stat--inline {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;
	margin-bottom: var(--sp-4);
}
.gdp-stat--inline .gdp-stat__num { font-size: clamp(2rem, 4vw, 2.75rem); }
.gdp-stat--inline .gdp-stat__label { margin-top: 0; }
.gdp-stat__num {
	font-family: var(--font-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	font-size: clamp(2.6rem, 6vw, 4.25rem);
	color: var(--gdp-text);
	line-height: 0.95;
	text-shadow: none;
	display: block;
}
.gdp-stat__label {
	display: block;
	margin-top: var(--sp-3);
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--gdp-text-dim);
}

/* --------------------------------------------------------------------------
   9. CREDIBILITY TICKER STRIP
   -------------------------------------------------------------------------- */
.gdp-ticker {
	border-top: 2px solid var(--gdp-rule);
	border-bottom: 2px solid var(--gdp-rule);
	background: var(--gdp-surface);
	padding-block: var(--sp-5);
}
.gdp-ticker__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4) var(--sp-7);
	list-style: none;
	margin: 0;
	padding: 0;
}
.gdp-ticker__item {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gdp-text-dim);
	white-space: nowrap;
}
.gdp-ticker__item strong,
.gdp-ticker__num {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0;
	color: var(--gdp-text);
	text-shadow: none;
}

/* --------------------------------------------------------------------------
   10. BOX SCORE TABLE -- dense, chalk-ruled, tabular numerals
   -------------------------------------------------------------------------- */
.gdp-boxscore { width: 100%; overflow-x: auto; }
.gdp-boxscore table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums lining-nums;
}
.gdp-boxscore th {
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gdp-text-dim);
	text-align: right;
	padding: 0.55em 0.9em;
	border-bottom: 2px solid var(--gdp-rule);
}
.gdp-boxscore th:first-child { text-align: left; }
.gdp-boxscore td {
	font-family: var(--font-num);
	font-variant-numeric: tabular-nums;
	color: var(--gdp-text);
	text-align: right;
	padding: 0.5em 0.9em;
	border-bottom: 1px solid var(--gdp-hairline);
}
.gdp-boxscore td:first-child {
	font-family: var(--font-body);
	font-weight: 600;
	text-align: left;
	color: var(--gdp-text);
}
.gdp-boxscore tbody tr:hover td { background: var(--gdp-row-hover); }
.gdp-boxscore tbody tr:hover { box-shadow: inset 3px 0 0 0 var(--gdp-flag); }
/* totals bar: inverted chalk -- ink paint, surface numerals */
.gdp-boxscore tfoot td,
.gdp-boxscore tr.gdp-boxscore__total td {
	background: var(--gdp-text);
	color: var(--gdp-bg);
	border-top: 2px solid var(--gdp-text);
	border-bottom: none;
	font-weight: 600;
}
.gdp-boxscore tr.gdp-boxscore__total:hover td { background: var(--gdp-text); }

/* --------------------------------------------------------------------------
   11. LOGO WALL
   -------------------------------------------------------------------------- */
.gdp-logo-wall {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
/* association logos: most marks are dark -- lift them like the product
   dark theme does */
.gdp-logo-wall img {
	height: clamp(2rem, 4vw, 3rem);
	width: auto;
	filter: grayscale(1) brightness(1.7);
	opacity: 0.65;
	transition: filter 0.35s ease, opacity 0.35s ease;
}
.gdp-logo-wall__item:hover img,
.gdp-logo-wall img:hover,
.gdp-logo-wall a:focus-visible img {
	filter: grayscale(0) brightness(1);
	opacity: 1;
}

/* association name on hover: the chant-highlight slab in tooltip form --
   solid brand gold, near-black ink, zero radius, with a skewed notch that
   echoes the eyebrow chip. Decorative only; the same string is already in
   each logo's alt text for assistive tech. */
.gdp-logo-wall__item {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.gdp-logo-wall__item::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 0.85rem);
	left: 50%;
	z-index: 6;
	width: max-content;
	max-width: 14rem;
	padding: 0.5em 0.75em;
	background: var(--gdp-paint);
	color: var(--night-surface);
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(0.4rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.gdp-logo-wall__item::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 0.4rem);
	left: 50%;
	z-index: 6;
	width: 1.15rem;
	height: 0.5rem;
	background: var(--gdp-paint);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) skewX(-18deg) translateY(0.4rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.gdp-logo-wall__item:hover::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.gdp-logo-wall__item:hover::before {
	opacity: 1;
	transform: translateX(-50%) skewX(-18deg) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.gdp-logo-wall__item::after,
	.gdp-logo-wall__item::before {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   12. FORMS -- white boards, chalk rules, dashed flag focus
   -------------------------------------------------------------------------- */
.gdp-form { display: grid; gap: var(--sp-5); }
.gdp-field { display: grid; gap: 0.5rem; }
.gdp-field__label {
	font-size: var(--fs-micro);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gdp-text);
}
.gdp-field__label .gdp-req { color: var(--gdp-flag); }
.gdp-req { color: var(--gdp-flag); }
.gdp-input,
.gdp-select,
.gdp-textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--gdp-text);
	background: var(--gdp-surface);
	border: 1px solid var(--gdp-rule);
	border-radius: 0;
	padding: 0.85em 1em;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.gdp-textarea { min-height: 9em; resize: vertical; }
.gdp-input::placeholder,
.gdp-textarea::placeholder { color: var(--gdp-text-dim); opacity: 0.7; }
.gdp-input:focus,
.gdp-select:focus,
.gdp-textarea:focus {
	outline: 2px dashed var(--gdp-focus);
	outline-offset: 2px;
	border-color: var(--gdp-text);
	box-shadow: none;
}
/* select arrow drawn in chalk for the night fields */
.gdp-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f1ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 1em;
	padding-right: 2.6em;
}
.gdp-field__msg { font-size: var(--fs-small); color: var(--gdp-text-dim); }
.gdp-field--error .gdp-input,
.gdp-field--error .gdp-select,
.gdp-field--error .gdp-textarea {
	border-color: var(--gdp-error);
	box-shadow: inset 3px 0 0 0 var(--gdp-error);
}
.gdp-field--error .gdp-field__msg { color: var(--gdp-error); font-weight: 600; }
.gdp-field--success .gdp-input,
.gdp-field--success .gdp-select,
.gdp-field--success .gdp-textarea { border-color: var(--gdp-success); }
.gdp-field--success .gdp-field__msg { color: var(--gdp-success); }
.gdp-form__alert {
	border: 1px solid var(--gdp-error);
	border-left: 4px solid var(--gdp-error);
	background: color-mix(in srgb, var(--gdp-error) 7%, var(--gdp-surface));
	color: var(--gdp-text);
	border-radius: 0;
	padding: var(--sp-4) var(--sp-5);
}
.gdp-form__alert--success {
	border-color: var(--gdp-success);
	background: color-mix(in srgb, var(--gdp-success) 8%, var(--gdp-surface));
}

/* --------------------------------------------------------------------------
   13. DEVICE FRAME -- flat ink board, no float
   -------------------------------------------------------------------------- */
.gdp-device {
	position: relative;
	background: var(--chalk-ink);
	border: 1px solid var(--chalk-ink);
	border-radius: 0;
	padding: 0.75rem;
	box-shadow: none;
}
.gdp-device::before {
	content: "";
	display: block;
	height: 6px;
	width: 44px;
	margin: 0 auto 0.6rem;
	border-radius: 0;
	background: rgba(246, 245, 240, 0.28);
}
.gdp-device__screen {
	border-radius: 0;
	overflow: hidden;
	background: var(--chalk-paper);
	border: none;
}
.gdp-device__screen img { display: block; width: 100%; }
.gdp-device--phone { max-width: 21rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   14. MOCK LIVE FEED -- scoped replica of the live.gamedaypreps.com game view
       in the Chalk Line DARK theme: header band + gold hash rule, statusbar
       scoreboard, MOST RECENT PLAYS table, inverted leader bar. Structure and
       type treatments adapted from GameDayPreps.2026.css (CDN); colors pinned
       to the night tokens so the panel stays dark on any band.
   -------------------------------------------------------------------------- */
.gdp-feed {
	background: var(--night-panel);
	color: var(--night-ink);
	border: 1px solid var(--night-line-strong);
	border-left: 4px solid var(--night-gold);
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	width: 100%;
	max-width: 38rem;
	position: relative;
	font-family: var(--font-body);
}
/* header: the GDP dark-gray band from the live site (mode-invariant) */
.gdp-feed__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 1rem;
	background: #212529;
	color: #f4f1ea;
}
.gdp-feed__title {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* angled paint slash in front of the event title, as on the live header */
.gdp-feed__title::before {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.82em;
	margin-right: 0.35em;
	transform: skewX(-18deg);
	background-color: var(--night-gold);
	vertical-align: -0.06em;
}
.gdp-feed__live {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--night-flag);
}
.gdp-feed__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--night-flag);
	animation: gdp-pulse 1.6s ease-in-out infinite;
}
/* painted hash-mark rule under the header band, as on the live site */
.gdp-feed__hash {
	height: 7px;
	background-image: repeating-linear-gradient(90deg, var(--night-gold) 0 14px, transparent 14px 28px);
}
/* scoreboard: the statusbar band -- visitor / clock / home */
.gdp-feed__board {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	border-bottom: 1px solid var(--night-line-strong);
}
.gdp-feed__team { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
/* home block mirrors, like the reversed home row on the live scoreboard */
.gdp-feed__team--home { flex-direction: row-reverse; }
.gdp-feed__team-logo {
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 0.85rem;
	border: 1px solid var(--night-line-strong);
	color: var(--night-ink);
	background: transparent;
	border-radius: 0;
}
.gdp-feed__team-logo--h {
	background: var(--night-gold);
	border-color: var(--night-gold);
	color: var(--night-surface);
}
.gdp-feed__team-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--night-ink);
	text-transform: uppercase;
}
.gdp-feed__team--home .gdp-feed__team-name { text-align: right; }
/* scores: stadium-wall paint, no bezel -- product .sb-teamscore */
.gdp-feed .gdp-digits {
	background: transparent;
	color: var(--night-ink);
	padding: 0;
}
.gdp-feed__score {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 2.75rem);
	min-width: 1.3em;
	text-align: center;
	line-height: 1.05;
	letter-spacing: 0.01em;
}
.gdp-feed__mid { text-align: center; display: grid; gap: 0.3rem; justify-items: center; }
.gdp-feed__clock {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 800;
}
.gdp-feed__qtr {
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--night-gold);
}
.gdp-feed__down {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--night-ink-soft);
	white-space: nowrap;
}
/* MOST RECENT PLAYS: card title + dense chalk-ruled table, as on the
   live broadcast view (bg-table-header treatment, striped rows) */
.gdp-feed__card { min-height: 13rem; }
.gdp-feed__card-title {
	padding: 0.55rem 1rem 0.4rem;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--night-ink);
}
.gdp-feed__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.75rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--night-ink);
}
.gdp-feed__table th {
	text-align: left;
	padding: 0.25rem 0.5rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--night-ink-soft);
	border-bottom: 2px solid var(--night-line-strong);
}
.gdp-feed__table td {
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid var(--night-line);
	vertical-align: middle;
}
.gdp-feed__table .gdp-feed__team-logo { width: 1.7em; height: 1.7em; font-size: 0.72rem; }
.gdp-feed__th-yds, .gdp-feed__cell-yds { text-align: center; width: 2.8rem; }
.gdp-feed__cell-team { width: 2.1rem; padding-right: 0; }
.gdp-feed__cell-ctx {
	font-size: 0.68rem;
	color: var(--night-ink-soft);
	white-space: nowrap;
}
/* yards chip (bordered chalk box) and points badge (flag paint) */
.gdp-feed__yds, .gdp-feed__pts {
	display: inline-block;
	min-width: 2em;
	padding: 0.1em 0.25em;
	text-align: center;
	font-weight: 600;
	border: 1px solid var(--night-line-strong);
}
.gdp-feed__pts {
	background: var(--night-flag);
	border-color: var(--night-flag);
	color: var(--night-surface);
	font-weight: 700;
}
.gdp-feed__play:nth-child(even) { background: var(--night-row-alt); }
.gdp-feed__play--score { font-weight: 700; box-shadow: inset 3px 0 0 0 var(--night-flag); }
.gdp-feed__play--score .gdp-feed__cell-text strong { color: var(--night-flag); font-weight: 700; }
.gdp-feed__play.is-new { animation: gdp-play-in 0.5s var(--gdp-ease) both; }
/* leader line: inverted chalk totals bar (bg-table-footer treatment) */
.gdp-feed__stat {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.6em;
	padding: 0.8rem 1rem;
	border-top: 2px solid var(--night-ink);
	background: var(--night-ink);
	font-family: var(--font-num);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
	color: var(--night-surface);
}
.gdp-feed__stat strong { color: var(--night-surface); font-weight: 700; }
.gdp-feed__body.is-wiping { animation: gdp-feed-wipe 0.6s ease-in-out both; }
/* narrow phones: the context column is the first thing the real table
   gives up -- drop it so team/play/yds keep room */
@media (max-width: 479px) {
	.gdp-feed__th-ctx, .gdp-feed__cell-ctx { display: none; }
	.gdp-feed__down { white-space: normal; }
}

/* --------------------------------------------------------------------------
   15. CTA BAND
   -------------------------------------------------------------------------- */
.gdp-cta-band { text-align: center; }
.gdp-cta-band .gdp-container { max-width: 56rem; }
.gdp-cta-band__title {
	font-size: var(--fs-h1);
	margin-bottom: var(--sp-3);
}
.gdp-cta-band__sub {
	font-size: var(--fs-lead);
	font-weight: 400;
	color: var(--gdp-text-dim);
	margin-bottom: var(--sp-6);
}
.gdp-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: center;
}

/* --------------------------------------------------------------------------
   16. FOOTER -- ink box under the field, hash rule on top (product footer)
   -------------------------------------------------------------------------- */
.gdp-footer {
	position: relative;
	background: var(--night-surface);
	border-top: none;
	padding: calc(var(--sp-8) + 7px) 0 var(--sp-6);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	color: rgba(246, 245, 240, 0.72);
	font-variant-numeric: tabular-nums;
	/* the footer is an ink box: flip the semantic tokens night-side so any
	   var()-driven rule (incl. the body.gdp-body a color) resolves legibly */
	--gdp-text: var(--night-ink);
	--gdp-text-dim: var(--night-ink-soft);
	--gdp-accent: var(--night-gold);
	--gdp-accent-hot: var(--night-gold-hot);
	--gdp-flag: var(--night-flag);
	--gdp-hairline: var(--night-line);
	--gdp-rule: var(--night-line-strong);
}
.gdp-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 7px;
	background-image: repeating-linear-gradient(90deg, var(--chalk-gold) 0 14px, transparent 14px 28px);
	background-color: var(--night-surface);
	animation: gdp-hash-scan 8s linear infinite;
}
.gdp-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--sp-7) var(--sp-6);
	padding-bottom: var(--sp-7);
	border-bottom: 1px solid rgba(246, 245, 240, 0.25);
}
@media (max-width: 900px) {
	.gdp-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.gdp-footer__top { grid-template-columns: minmax(0, 1fr); }
}
.gdp-footer__logo { height: 1.9rem; width: auto; display: block; margin-bottom: var(--sp-4); }
.gdp-footer__powered { height: 0.8rem; width: auto; display: block; opacity: 0.8; margin-top: var(--sp-3); }
.gdp-footer__tag { max-width: 26em; line-height: 1.6; }
.gdp-footer__heading {
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(246, 245, 240, 0.92);
	margin: 0 0 var(--sp-4);
}
.gdp-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.gdp-footer .gdp-footer__links a {
	color: rgba(246, 245, 240, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}
.gdp-footer .gdp-footer__links a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.gdp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-5);
}
.gdp-footer__legal { font-size: var(--fs-micro); letter-spacing: 0.04em; }
.gdp-footer__social { display: flex; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.gdp-footer .gdp-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0;
	border: 2px solid rgba(246, 245, 240, 0.35);
	color: rgba(246, 245, 240, 0.72);
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.gdp-footer .gdp-footer__social a:hover {
	color: #ffffff;
	border-color: #ffffff;
	background: rgba(246, 245, 240, 0.12);
}
.gdp-footer__social .gdp-icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   17. ICONS
   -------------------------------------------------------------------------- */
.gdp-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   18. MOTION
   -------------------------------------------------------------------------- */
/* reveals: hidden state only when JS is present (html.gdp-js) */
.gdp-js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity var(--gdp-speed) var(--gdp-ease),
		transform var(--gdp-speed) var(--gdp-ease);
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}
.gdp-js .reveal.is-in {
	opacity: 1;
	transform: none;
}

@keyframes gdp-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.82); }
}
/* painted-geometry scan: the hash pattern crawls one full 28px period, so
   the loop is seamless; background-position only, on 7px strips */
@keyframes gdp-hash-scan {
	to { background-position-x: 28px; }
}
/* sideline sheen: a soft 8rem light band sweeps the stripe top-to-bottom
   during the first ~45% of the cycle, then rests off-screen */
@keyframes gdp-stripe-sheen {
	0% { background-position: 0 -8rem, 0 0; }
	45%, 100% { background-position: 0 calc(100% + 8rem), 0 0; }
}
/* score flash: a quick stroke of flag paint, settling to the element's color */
@keyframes gdp-digit-flash {
	0% { color: var(--gdp-flag); }
}
@keyframes gdp-play-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
@keyframes gdp-feed-wipe {
	0% { opacity: 1; }
	45% { opacity: 0; transform: translateY(6px); }
	55% { opacity: 0; transform: translateY(-6px); }
	100% { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18b. SHARED PAGE PATTERNS -- consolidated from the page style blocks
   -------------------------------------------------------------------------- */
/* centered scene header above a grid, strip or feed */
.gdp-scenehead {
	max-width: 52rem;
	margin: 0 auto var(--sp-8);
	text-align: center;
}
.gdp-scenehead .gdp-lead { margin-inline: auto; }

/* action button rows */
.gdp-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
}
.gdp-actions--center { justify-content: center; }

/* editorial photo frame: use on a wrapper div (cover-fit img inside)
   or directly on an img element -- flat, chalk-ruled, no float */
.gdp-photo {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	border: 1px solid var(--gdp-rule);
	box-shadow: none;
}
.gdp-photo > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
img.gdp-photo { display: block; width: 100%; height: auto; }
.gdp-photo--scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgba(8, 5, 5, 0.45), transparent 55%);
}

/* feature bullet lists: icon checks (default) or painted slashes (--dot) */
.gdp-checks {
	list-style: none;
	padding: 0;
	margin: var(--sp-5) 0 var(--sp-6);
	display: grid;
	gap: var(--sp-3);
}
.gdp-checks li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	color: var(--gdp-text);
}
.gdp-checks .gdp-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 0.2em;
	color: var(--gdp-accent);
}
.gdp-checks--dot li {
	display: block;
	position: relative;
	padding-left: 1.75rem;
}
.gdp-checks--dot li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.42em;
	width: 0.5rem;
	height: 0.75rem;
	border-radius: 0;
	background: var(--gdp-accent);
	transform: skewX(-18deg);
	box-shadow: none;
}

/* sport glyph chip: flat stencil tile */
.gdp-sport-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-5) var(--sp-3);
	border: 1px solid var(--gdp-rule);
	border-radius: 0;
	background: var(--gdp-surface);
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: var(--gdp-text-dim);
	transition: box-shadow 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.gdp-sport-chip:hover {
	color: var(--gdp-text);
	background: var(--gdp-row-alt);
	box-shadow: inset 0 -3px 0 0 var(--gdp-paint);
}
.gdp-sport-chip .gdp-icon { width: 30px; height: 30px; color: var(--gdp-accent); }

/* framed showcase panel (video pitch, embeddable mockups) */
.gdp-frame {
	background: var(--gdp-surface);
	border: 1px solid var(--gdp-rule);
	border-left: 4px solid var(--gdp-paint);
	border-radius: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	box-shadow: none;
}

/* long-form legal/editorial prose (terms, privacy, accessibility) */
.gdp-updated { color: var(--gdp-text-dim); }
.gdp-prose h2 {
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--gdp-rule);
	scroll-margin-top: calc(var(--gdp-nav-h) + var(--sp-5));
}
.gdp-prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.gdp-prose p,
.gdp-prose li { color: var(--gdp-text); }
.gdp-prose ul,
.gdp-prose ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.gdp-prose li { margin-bottom: var(--sp-2); }
.gdp-prose strong { color: var(--gdp-text); }
body.gdp-body .gdp-prose a { color: var(--gdp-accent); text-underline-offset: 3px; }
body.gdp-body .gdp-prose a:hover,
body.gdp-body .gdp-prose a:focus-visible { color: var(--gdp-accent-hot); }

/* form extras shared by the contact + signup forms */
.gdp-form__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
}
.gdp-turnstile-wrap {
	background: var(--gdp-row-alt);
	border: 1px solid var(--gdp-hairline);
	border-radius: 0;
	padding: var(--sp-4);
}

/* --------------------------------------------------------------------------
   19. LEGACY-MODE SHIMS (guides pages: Bootstrap body + new chrome)
   -------------------------------------------------------------------------- */
body.gdp-legacy { padding-top: 0; }
body.gdp-legacy .gdp-nav { font-variant-numeric: tabular-nums; }
body.gdp-legacy .gdp-nav a,
body.gdp-legacy .gdp-footer a { text-decoration: none; }
body.gdp-legacy .gdp-nav .gdp-nav__link:hover,
body.gdp-legacy .gdp-footer .gdp-footer__links a:hover { text-decoration: none; }
body.gdp-legacy .gdp-btn:hover { text-decoration: none; }
/* old fixed-nav spacer used by legacy page bodies -- nav is sticky now */
body.gdp-legacy .navclear { height: 1rem; }

/* --------------------------------------------------------------------------
   20. REDUCED MOTION -- park every animation instantly
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}
	.gdp-js .reveal { opacity: 1 !important; transform: none !important; }
	.gdp-feed__dot { animation: none !important; }
	/* painted-geometry scans parked entirely (incl. the home hero strokes,
	   which land at their static painted state) */
	.gdp-nav::after,
	.gdp-scene--hero::after,
	.gdp-scene--sideline::before,
	.gdp-footer::before,
	.pg-home .pg-hero__slash { animation: none !important; }
}

/* ==================== LIVE MINISITE (content/live) ====================
 * The school-branded fan pages. THE SCHOOL'S THEME COLOURS ARE AUTHORITATIVE
 * (owner, 2026-08-07), so this block contributes TYPE, SPACING and GEOMETRY
 * only -- it must never introduce a literal colour that competes with the
 * per-account theme.css. events.css already consumes the theme variables in 62
 * places and it loads AFTER this file, so it keeps winning every colour tie;
 * that is intentional, not an accident of ordering.
 *
 * Scoped to body.gdp-live, set by getMiniHeader(['chrome2026'=>true]). Only
 * content/live/{index,calendar,archive}.php pass that flag.
 *
 * Where a colour IS unavoidable (the subnav fill) it is taken from
 * var(--primary-color) with a fallback, so an account with no theme still
 * renders the old dark bar rather than an unstyled one.
 */
body.gdp-live {
	font-family: var(--font-body);
	font-feature-settings: "tnum" 1;
}
body.gdp-live h1,
body.gdp-live h2,
body.gdp-live h3,
body.gdp-live h4,
body.gdp-live .section-title,
body.gdp-live .hero-section h1,
body.gdp-live .display-4,
body.gdp-live .display-6 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.08;
}
body.gdp-live .hero-section h1,
body.gdp-live .section-title { text-transform: uppercase; }
body.gdp-live .hero-section h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
body.gdp-live .section-title { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
/* eyebrow-ish support lines under the hero headline */
body.gdp-live .hero-section .subtitle,
body.gdp-live .hero-section .location {
	font-family: var(--font-num);
	font-size: var(--fs-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
/* scores, dates and any tabular data read as data, not prose */
body.gdp-live table,
body.gdp-live .card-body .row { font-variant-numeric: tabular-nums; }

/* the compact subnav: themed fill instead of the hardcoded Bootstrap bg-dark */
body.gdp-live #subNav.navbar {
	background-color: var(--primary-color, #212529) !important;
	border-bottom: 2px solid rgba(255, 255, 255, 0.16);
	padding-block: 0.55rem;
}

/* action buttons take the Chalk Line geometry; colour still comes from
   events.css, which owns .action-btn-primary / -secondary against the theme */
body.gdp-live .action-btn {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 0;
}
body.gdp-live .card { border-radius: 0; }

/* ==================== USER GUIDES (generated page) ====================
 * /user-guides/index.php is GENERATED by guide-kit (dev-tools/tools/guide-kit)
 * and carries a "do not hand-edit" banner. guide-kit is SHARED with StatInput,
 * so its Bootstrap markup (bg-light / container / row / col / accordion /
 * list-group) cannot be changed without restyling StatInput's guides too.
 *
 * So the Chalk Line treatment lives HERE instead: it overrides that markup from
 * the stylesheet the redesign already ships. A `guide-kit index` regeneration
 * therefore cannot silently revert the page.
 *
 * Everything is scoped to #team / #accordionGuides -- the ids index-gen.js emits
 * -- so no other Bootstrap on the site is touched. The guide-kit stylesheet is
 * inlined ahead of this file, so these rules win on cascade order alone; where a
 * :root --gk-* token is the real source of the colour, it is re-pointed at the
 * matching --gdp-* token rather than fought selector-by-selector.
 *
 * Scoped to body.gdp-legacy, NOT body.gdp-body: gdpIsLegacy() in site.php keeps
 * /user-guides/ on the old stack (Bootstrap first, gdp2026.css last) because the
 * generated guide bodies depend on it, so this page never carries .gdp-body.
 */
body.gdp-legacy #team {
	--gk-accent: var(--gdp-accent);
	--gk-accent-dark: var(--gdp-accent-hot);
	--gk-accent-contrast: #080505;
	/* !important is REQUIRED here, not laziness: the generated section carries
	   Bootstrap's .bg-light, and Bootstrap 5 declares its .bg-* utilities with
	   !important. Without this the page renders near-white (#f8f9fa) behind
	   near-white text. */
	background: var(--gdp-bg) !important;
	padding-block: var(--sp-9);
}
/* Legacy pages never get the body.gdp-body base typography, so the display face
   has to be restated here or the headings fall back to SansSerifFLF. */
body.gdp-legacy #team h1,
body.gdp-legacy #team h2,
body.gdp-legacy #team h3,
body.gdp-legacy #team .accordion-button {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
}
body.gdp-legacy #team h1 {
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	text-transform: uppercase;
	line-height: 1.05;
}
body.gdp-legacy #team p { color: var(--gdp-text-dim); }
/* the generated H1 asks for the OLD purple chrome class */
body.gdp-legacy #team .bd-text-purple-bright { color: var(--gdp-text); }
body.gdp-legacy #team > .container { max-width: 68rem; }
body.gdp-legacy #team .navclear { display: none; }
body.gdp-legacy #team hr {
	border: 0;
	border-top: 1px solid var(--gdp-rule);
	margin: var(--sp-6) 0;
}

body.gdp-legacy #accordionGuides .accordion-item {
	background: var(--gdp-surface);
	border: 1px solid var(--gdp-hairline);
	border-radius: 0;
	margin-bottom: var(--sp-3);
}
body.gdp-legacy #accordionGuides .accordion-button {
	background: transparent;
	color: var(--gdp-text);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-radius: 0;
	box-shadow: none;
}
body.gdp-legacy #accordionGuides .accordion-button:not(.collapsed) {
	background: transparent;
	color: var(--gdp-accent);
	box-shadow: inset 0 -1px 0 var(--gdp-rule);
}
body.gdp-legacy #accordionGuides .accordion-button:focus-visible {
	outline: 2px dashed var(--gdp-focus);
	outline-offset: 2px;
}
/* Bootstrap's chevron is a dark inline SVG -- invisible on a dark panel */
body.gdp-legacy #accordionGuides .accordion-button::after { filter: invert(1) opacity(0.7); }
body.gdp-legacy #accordionGuides .accordion-body { background: transparent; }

body.gdp-legacy #accordionGuides .list-group-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--gdp-hairline);
	color: var(--gdp-text);
	border-radius: 0;
}
body.gdp-legacy #accordionGuides .list-group-item:last-child { border-bottom: 0; }
body.gdp-legacy #accordionGuides .list-group-item:hover { background: var(--gdp-row-hover); }
body.gdp-legacy #accordionGuides .list-group-item > a:first-child { color: var(--gdp-text); }
body.gdp-legacy #accordionGuides .list-group-item > a:first-child:hover,
body.gdp-legacy #accordionGuides .list-group-item > a:first-child:focus-visible { color: var(--gdp-accent); }
/* the PDF button on each row */
body.gdp-legacy #accordionGuides .list-group-item .btn {
	background: transparent;
	border: 1px solid var(--gdp-accent);
	color: var(--gdp-accent);
	border-radius: 0;
	font-family: var(--font-num);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
body.gdp-legacy #accordionGuides .list-group-item .btn:hover,
body.gdp-legacy #accordionGuides .list-group-item .btn:focus {
	background: var(--gdp-accent);
	color: #080505;
}

/* ---- individual guide bodies (guide.php) ----
 * A guide body is generated by guide-kit for WHITE PAPER -- the same HTML is
 * what the PDFs are rendered from, and its type is dark ink (#212529-ish). Do
 * not try to invert it: that CSS is shared with StatInput and with print.
 *
 * Instead let it stay paper, and use the design's existing chalk-paper band
 * treatment -- the guide sits as a lit sheet on the night surround, which is
 * the same figure/ground the rest of the site uses for its light bands.
 */
body.gdp-legacy #team .guide-kit-guide {
	background: var(--chalk-paper);
	color: var(--chalk-ink);
	padding: clamp(var(--sp-5), 4vw, var(--sp-8));
	border: 1px solid var(--gdp-hairline);
	margin-bottom: var(--sp-8);
}
/* headings inside the sheet read as ink, not as night-surface text */
body.gdp-legacy #team .guide-kit-guide h1,
body.gdp-legacy #team .guide-kit-guide h2,
body.gdp-legacy #team .guide-kit-guide h3 { color: var(--chalk-ink); }
body.gdp-legacy #team .guide-kit-guide p,
body.gdp-legacy #team .guide-kit-guide li { color: var(--chalk-ink); }
body.gdp-legacy #team .guide-kit-guide a { color: var(--chalk-gold-dark); }
/* the step cards keep their white panel against the paper */
body.gdp-legacy #team .guide-kit-guide .card {
	background: var(--chalk-panel);
	border-color: var(--chalk-line);
}