/* ============================================================
ENDUROCROSS — CONTENT-PRESERVATION SURFACES
News archive, category hubs, fans/sponsors/insurance, contact
+ media pages, legal pages, 404. Shares tokens.css + global.css
(header/footer/buttons/chips/x-mark come from there). This file
is ONLY the page-body treatments unique to Builder B's surfaces.
Load after global.css. Bump ?v= on every change.
============================================================ */
/* ---- Shared page header band (news, category, legal, fans, etc) */
.page-hero {
position: relative;
padding: calc(var(--space-section) + 3.5rem) 0 var(--space-8);
background: linear-gradient(180deg, var(--dirt-deep) 0%, var(--ink) 100%);
border-bottom: var(--hairline);
overflow: clip;
}
/* CONTENT.6 — duotone-red arena plate under the hero, per the brief's
palette direction ("podium-smoke plate rolls in duotone-red"). Only
on hero bands wired with a `plate` (currently /news/ + /fans/
Evolution) — real vendored photography, never a stretched hotlink. */
.page-hero--plate .page-hero__plate {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.4;
filter: grayscale(1) contrast(1.2) brightness(0.85);
mix-blend-mode: luminosity;
}
.page-hero--plate::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg, var(--dirt-deep) 10%, transparent 50%, var(--ink) 100%),
linear-gradient(100deg, oklch(60.79% 0.23 27.58 / 0.32), transparent 60%);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--text-h1); color: var(--bone); }
.page-hero .kicker { margin-bottom: var(--space-4); }
.page-hero p.page-hero__lede {
margin-top: var(--space-4);
max-width: var(--measure);
color: var(--bone-70);
font-size: var(--text-lg);
}
.page-hero__crumb {
display: flex;
align-items: center;
gap: 0.5em;
margin-bottom: var(--space-4);
font-family: var(--font-data);
font-size: var(--text-data);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bone-50);
}
.page-hero__crumb a { color: var(--bone-50); text-decoration: none; }
.page-hero__crumb a:hover { color: var(--hivis); }
.page-hero__crumb .x-mark { font-size: 0.55rem; opacity: 0.7; }
/* ============================================================
NEWS — hub + article template
============================================================ */
.news-hub__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
gap: var(--space-8) var(--space-6);
}
.news-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-6);
background: var(--ink-raised);
border: var(--hairline);
clip-path: var(--notch-sm);
text-decoration: none;
transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast);
}
.news-card:hover {
transform: translateY(-3px);
border-color: var(--x-red);
box-shadow: 0 18px 40px -20px oklch(0% 0 0 / 0.65);
}
.news-card time {
font-family: var(--font-data);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hivis);
}
.news-card h2, .news-card h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--text-lg);
text-transform: uppercase;
letter-spacing: 0.01em;
color: var(--bone);
line-height: 1.12;
/* CONTENT.9 — clamp display only; the full headline stays in the DOM
for SEO/screen readers, only the box height is bounded. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card__excerpt {
color: var(--bone-70);
font-size: var(--text-sm);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card__more {
margin-top: auto;
padding-top: var(--space-2);
font-family: var(--font-data);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
/* CONTENT.10 — x-red on ink-raised is 4.33:1, fails AA at this size/weight.
Words move to --bone (16.44:1); the arrow keeps the red affordance. */
color: var(--bone);
}
.news-card__more .arrow { color: var(--x-red); }
.news-card:hover .news-card__more { color: var(--hivis); }
.news-card:hover .news-card__more .arrow { color: var(--hivis); }
.news-hub__pager {
display: flex;
justify-content: center;
gap: var(--space-3);
margin-top: var(--space-12);
}
/* ============================================================
CONTENT.1 — News archive spine: lead / recent / year archive
============================================================ */
.news-hub__lead {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
padding: var(--space-8);
margin-bottom: var(--space-12);
background: var(--ink-raised);
border: var(--hairline);
border-left: 3px solid var(--x-red);
clip-path: var(--notch);
text-decoration: none;
transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.news-hub__lead:hover { border-color: var(--x-red); transform: translateY(-2px); }
.news-hub__lead .kicker { margin-bottom: 0; }
.news-hub__lead time {
font-family: var(--font-data);
font-size: var(--text-data);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--hivis);
}
.news-hub__lead h2 {
/* D-16 — one display voice: the lead headline was the only H2 on
the site set in Saira mixed case; it now matches the article
masthead and every other section heading. */
font-family: var(--font-display);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.01em;
font-size: var(--text-h2);
color: var(--bone);
line-height: 0.98;
margin: var(--space-2) 0 0;
}
.news-hub__lead p {
max-width: var(--measure);
color: var(--bone-70);
font-size: var(--text-lg);
}
.news-hub__lead .news-card__more { margin-top: var(--space-2); padding-top: 0; }
.news-hub__section-label {
font-family: var(--font-data);
font-size: var(--text-data);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bone-50);
margin: 0 0 var(--space-4);
}
.news-hub__recent {
margin-bottom: var(--space-16);
}
/* Year jump rail — pure anchor links, scroll-margin does the work;
.is-active progressively enhanced by the existing reveal IO. */
.news-hub__years {
position: sticky;
top: 4.5rem;
z-index: 5;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: var(--space-3) 0;
margin-bottom: var(--space-8);
background: linear-gradient(180deg, var(--ink) 78%, transparent);
}
.news-hub__years a {
display: inline-flex;
align-items: center;
min-height: 44px; /* RESP F-05 — WCAG 2.5.5; was 30px tall */
padding: 0 0.85em;
font-family: var(--font-data);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--bone-70);
text-decoration: none;
box-shadow: inset 0 0 0 1px var(--ink-edge);
transition: color var(--duration-fast), box-shadow var(--duration-fast), background-color var(--duration-fast);
}
.news-hub__years a:hover,
.news-hub__years a.is-active {
color: var(--ink);
background: var(--hivis);
box-shadow: inset 0 0 0 1px var(--hivis);
}
.news-archive-year {
scroll-margin-top: 8.5rem;
padding-block: var(--space-8);
border-top: var(--hairline);
}
.news-archive-year__head {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.news-archive-year__head h2 {
font-family: var(--font-stamp);
font-size: var(--text-h2);
color: var(--hivis);
letter-spacing: 0.02em;
line-height: 1;
}
.news-archive-year__count {
font-family: var(--font-data);
font-size: var(--text-data);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bone-50);
}
.news-archive-list { display: grid; gap: 1px; background: var(--ink-edge); }
.news-archive-row {
display: grid;
grid-template-columns: 8rem 1fr auto;
gap: var(--space-4);
align-items: baseline;
padding: var(--space-3) var(--space-4);
background: var(--ink);
text-decoration: none;
transition: background-color var(--duration-fast);
}
.news-archive-row:hover { background: var(--ink-raised); }
.news-archive-row:hover h3 { color: var(--hivis); }
.news-archive-row time {
font-family: var(--font-data);
font-size: 0.8125rem;
letter-spacing: 0.04em;
color: var(--bone-50);
white-space: nowrap;
}
.news-archive-row h3 {
font-family: var(--font-text);
font-weight: 500;
font-size: var(--text-base);
color: var(--bone-70);
transition: color var(--duration-fast);
}
.news-archive-row .cat {
font-family: var(--font-data);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bone-50);
white-space: nowrap;
}
@media (max-width: 640px) {
.news-archive-row { grid-template-columns: 1fr; gap: 0.15rem; }
.news-archive-row .cat { display: none; }
}
/* Article — CONTENT.2: the headline lives in the hero masthead now
(see .article-hero below); .article is the body grid beneath it,
left-anchored with a sticky rail instead of centred in empty page. */
.article-hero {
padding-bottom: var(--space-8);
}
.article-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-4);
font-family: var(--font-data);
font-size: var(--text-data);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bone-50);
}
.article-hero__meta time { color: var(--hivis); }
.article-hero__meta a { color: var(--bone-50); text-decoration: none; }
.article-hero__meta a:hover { color: var(--hivis); }
.article-hero h1 {
font-size: var(--text-h1);
color: var(--bone);
max-width: 40ch;
}
/* CONTENT.6 — masthead photo (only wired where an OG image confidently
maps to a vendored asset; ARTICLE_MASTHEAD in gen-news.mjs). Duotone
the plate red so the type stays legible over any crop. */
.article-hero--photo { padding-top: calc(var(--space-section) + 3.5rem); position: relative; }
.article-hero__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.34;
filter: grayscale(1) contrast(1.15);
mix-blend-mode: luminosity;
}
/* D-20 — the airborne rider in the masthead photography clears the
fixed header instead of losing his head to it. */
.article-hero img,
.news-hero img,
.page-hero--plate .page-hero__plate { object-position: 50% 35%; }
.article-hero--photo::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg, var(--dirt-deep) 0%, transparent 45%, var(--ink) 100%),
linear-gradient(0deg, oklch(60.79% 0.23 27.58 / 0.28), transparent 70%);
}
.article {
display: grid;
grid-template-columns: 14rem minmax(0, 62ch) 1fr;
gap: var(--space-12);
align-items: start;
}
.article__rail {
grid-column: 1;
position: sticky;
top: 6.5rem;
display: grid;
gap: var(--space-6);
}
.article__rail-block { display: grid; gap: 0.4rem; }
.article__rail-label {
font-family: var(--font-data);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bone-50);
}
.article__rail time {
font-family: var(--font-data);
font-size: var(--text-base);
color: var(--hivis);
}
.article__rail-cat {
display: inline-block;
align-self: start;
padding: 0.3em 0.75em;
font-family: var(--font-data);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bone-70);
text-decoration: none;
box-shadow: inset 0 0 0 1px var(--ink-edge);
}
.article__rail-cat:hover { color: var(--hivis); box-shadow: inset 0 0 0 1px var(--hivis); }
.article__rail-share {
padding: 0.3em 0.75em;
font-family: var(--font-data);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--bone-70);
text-decoration: none;
border: var(--hairline);
text-align: center;
}
.article__rail-share:hover { color: var(--hivis); border-color: var(--hivis); }
.article__body {
grid-column: 2;
color: var(--bone-70);
font-size: var(--text-base);
}
.article__body p { margin-bottom: var(--space-4); max-width: var(--measure); }
.article__body p:first-of-type {
font-size: var(--text-lg);
color: var(--bone);
}
.article__body a { color: var(--x-red); text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.article__body a:hover { color: var(--hivis); }
@media (max-width: 1099px) {
.article { grid-template-columns: minmax(0, 62ch); }
.article__rail {
grid-column: 1;
position: static;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-6);
padding-bottom: var(--space-4);
border-bottom: var(--hairline);
}
.article__rail-block { display: contents; }
.article__rail-label { display: none; }
.article__body { grid-column: 1; }
}
.article__results {
margin: 0 0 var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--ink-raised);
border: var(--hairline);
border-left: 3px solid var(--hivis);
color: var(--bone-70);
font-family: var(--font-data);
font-size: 0.8125rem;
line-height: 1.7;
white-space: pre-wrap;
overflow-x: auto;
}
/* CONTENT.3 — structured results/points tables extracted from run-on
result paragraphs. Same treatment family as .article__results
(hi-vis left border, data face) but as real rows, not text. */
.article__results--table {
display: block;
white-space: normal;
padding: var(--space-5);
}
.article__results--table h2 {
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.02em;
font-size: var(--text-lg);
color: var(--hivis);
}
.results-row {
display: grid;
grid-template-columns: 2rem 1fr auto auto;
gap: var(--space-3);
align-items: baseline;
padding: 0.35rem 0;
border-bottom: 1px solid var(--ink-edge);
}
.results-row:last-child { border-bottom: 0; }
.results-row__place { color: var(--hivis); font-weight: 700; }
.results-row__name { color: var(--bone); font-family: var(--font-text); font-weight: 500; }
.results-row__motos { color: var(--bone-70); font-variant-numeric: tabular-nums; }
.results-row__brand { color: var(--bone-50); text-align: right; }
.results-row--points {
grid-template-columns: 1fr auto;
align-items: baseline;
}
.results-row--points .results-row__name { color: var(--bone); }
.results-row__pts { color: var(--bone-70); font-variant-numeric: tabular-nums; }
.results-row__pts em { color: var(--hivis); font-style: normal; }
@media (max-width: 480px) {
.results-row { grid-template-columns: 1.5rem 1fr; }
.results-row__motos, .results-row__brand { grid-column: 2; text-align: left; color: var(--bone-50); font-size: 0.75em; }
/* Placed after the .results-row rule above (source order) so this
wins over it for the points variant specifically — a name long
enough to wrap plus "NNN pts (note)" no longer fit one line at
this width, so stack them instead of baseline-jamming the points
into a wrapped name (an earlier copy of this rule sitting BEFORE
the .results-row breakpoint above was silently overridden by it). */
.results-row--points {
grid-template-columns: 1fr;
gap: 0.15rem;
align-items: start;
}
.results-row--points .results-row__pts { grid-column: 1; }
}
.article__categories {
grid-column: 2;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: var(--hairline);
}
.article__categories a {
padding: 0.3em 0.85em;
font-family: var(--font-data);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bone-70);
text-decoration: none;
box-shadow: inset 0 0 0 1px var(--ink-edge);
}
.article__categories a:hover { color: var(--hivis); box-shadow: inset 0 0 0 1px var(--hivis); }
.article__nav {
grid-column: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-top: var(--space-12);
padding-top: var(--space-8);
border-top: var(--hairline);
}
.article__nav a {
display: block;
padding: var(--space-4);
text-decoration: none;
background: var(--ink-raised);
border: var(--hairline);
transition: border-color var(--duration-fast);
}
.article__nav a:hover { border-color: var(--x-red); }
.article__nav .data-label { color: var(--bone-50); display: block; margin-bottom: 0.35rem; }
.article__nav strong { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; color: var(--bone); font-size: var(--text-base); }
.article__nav--next { text-align: right; }
/* Placed after .article__categories/.article__nav's own grid-column:2
rules (source order) so this collapse actually wins at <=1099px —
an earlier copy of this override sitting before those rules was
silently undone by them and left a phantom second grid track. */
@media (max-width: 1099px) {
.article__categories,
.article__nav { grid-column: 1; }
}
/* ============================================================
LONG-FORM EDITORIAL (fans, rules, legal) generic prose
============================================================ */
.prose {
max-width: var(--measure);
color: var(--bone-70);
}
/* .wrap already centers itself with margin-inline:auto at --page-max;
layering .prose's narrower max-width onto the SAME element re-centers
that narrower box in the middle of the page instead of left-aligning
it under the hero above. When the two are combined on one element,
let .wrap's own alignment win and constrain measure on children instead. */
.wrap.prose {
max-width: var(--page-max);
margin-inline: auto;
}
.wrap.prose > * {
max-width: var(--measure);
}
.prose h2 {
margin-top: var(--space-12);
margin-bottom: var(--space-4);
font-size: var(--text-h3);
color: var(--bone);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
margin-top: var(--space-8);
margin-bottom: var(--space-3);
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
color: var(--hivis);
font-size: var(--text-lg);
}
.prose p { margin-bottom: var(--space-4); }
.prose ul, .prose ol { margin: 0 0 var(--space-4) var(--space-6); display: grid; gap: 0.4rem; }
.prose a { color: var(--x-red); text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.prose a:hover { color: var(--hivis); }
.prose strong { color: var(--bone); }
.prose small { color: var(--bone-50); }
.legal-updated {
display: inline-block;
margin-bottom: var(--space-8);
font-family: var(--font-data);
font-size: var(--text-data);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--bone-50);
}
/* CONTENT.6 — duotone-red arena plate behind a content section (used
for the fans Evolution header, matching the /news/ hero treatment
above but scoped to a section rather than the page-hero band). */
.content-section--plate { position: relative; overflow: clip; }
.content-section__plate {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
opacity: 0.22;
filter: grayscale(1) contrast(1.2) brightness(0.8);
mix-blend-mode: luminosity;
}
.content-section--plate::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(180deg, var(--ink) 0%, transparent 30%, transparent 70%, var(--ink) 100%),
linear-gradient(100deg, oklch(60.79% 0.23 27.58 / 0.22), transparent 55%);
}
.content-section--plate > .wrap { position: relative; z-index: 1; }
/* ============================================================
FANS — timeline, champions, glossary, obstacles
============================================================ */
.timeline { position: relative; padding-left: var(--space-8); }
.timeline::before {
content: "";
position: absolute;
left: 0.3rem; top: 0.4rem; bottom: 0.4rem;
width: 2px;
background: var(--dirt-mid);
}
.timeline__year {
position: relative;
padding-bottom: var(--space-8);
}
.timeline__year::before {
content: "";
position: absolute;
left: calc(-1 * var(--space-8) + 0.05rem);
top: 0.35rem;
width: 9px; height: 9px;
background: var(--x-red);
transform: rotate(45deg);
}
.timeline__year time {
display: block;
margin-bottom: 0.4rem;
font-family: var(--font-stamp);
font-size: var(--text-h3);
color: var(--hivis);
letter-spacing: 0.02em;
}
.timeline__year p { color: var(--bone-70); max-width: var(--measure); }
.champions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
gap: var(--space-3);
margin-top: var(--space-6);
}
.champion-card {
display: flex;
align-items: baseline;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--ink-raised);
border-left: 3px solid var(--x-red);
}
.champion-card .yr { font-family: var(--font-stamp); font-size: var(--text-lg); color: var(--hivis); flex: none; min-width: 3ch; }
.champion-card .nm { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--bone); font-size: 0.9375rem; }
.glossary-list { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.glossary-list dt {
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
color: var(--hivis);
font-size: var(--text-base);
}
.glossary-list dd { color: var(--bone-70); margin: 0.15rem 0 0; }
.obstacle-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: var(--space-6);
margin-top: var(--space-6);
}
.obstacle-list .obstacle h3 { font-size: var(--text-lg); color: var(--bone); margin-bottom: 0.35rem; }
.obstacle-list .obstacle p { color: var(--bone-70); font-size: var(--text-sm); }
/* ============================================================
SPONSORS grid
============================================================ */
.sponsor-grid {
display: grid;
/* Tier-2 tiles carry a logo + blurb — 4-up max so they keep the
mid-tier weight the live site gives them (Trevor 2026-09-03). */
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
gap: var(--space-4);
}
.sponsor-tile {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background: var(--ink-raised);
border: var(--hairline);
clip-path: var(--notch-sm);
}
.sponsor-tile h3 {
font-family: var(--font-display);
font-weight: 800;
text-transform: uppercase;
color: var(--bone);
font-size: var(--text-lg);
}
.sponsor-tile p { color: var(--bone-70); font-size: var(--text-sm); flex: 1; }
.sponsor-tile a.btn { align-self: flex-start; }
/* CONTENT.12 — presenting-partner tile: full-width, larger type, hi-vis
top rule. The only hierarchy the captured logo lockup + site.json
actually evidence (Progressive) — everyone else stays one tier. */
.sponsor-tile--presenting {
flex-direction: row;
align-items: center;
gap: var(--space-8);
padding: var(--space-8);
border-top: 3px solid var(--hivis);
clip-path: var(--notch);
}
.sponsor-tile--presenting h3 { font-size: var(--text-h3); flex: none; min-width: 12ch; }
.sponsor-tile--presenting p { font-size: var(--text-base); }
@media (max-width: 640px) {
.sponsor-tile--presenting { flex-direction: column; align-items: flex-start; }
}
/* Tile logos (Trevor 2026-09-03) — the same alpha-mask silhouette
system as the footer .partner-logo, at tile scale. Tiers mirror the
live site's weight hierarchy: t1 feature, t2 blurb tile, t3 compact. */
.sponsor-tile__logo {
--sc: 1;
display: block;
flex: none;
height: calc(3.2rem * var(--sc));
width: min(100%, calc(3.2rem * var(--sc) * var(--ar)));
background-color: var(--bone);
-webkit-mask: var(--logo) left center / contain no-repeat;
mask: var(--logo) left center / contain no-repeat;
}
.sponsor-tile--presenting .sponsor-tile__head {
flex: none;
display: grid;
gap: var(--space-3);
min-width: 16rem;
}
.sponsor-tile--presenting .sponsor-tile__logo { height: calc(4rem * var(--sc)); }
.sponsor-tile__label { color: var(--hivis); }
.sponsor-grid--compact { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.sponsor-tile--compact {
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-4);
padding: var(--space-6) var(--space-4);
}
.sponsor-tile--compact .sponsor-tile__logo {
height: calc(2.5rem * var(--sc));
width: min(100%, calc(2.5rem * var(--sc) * var(--ar)));
-webkit-mask-position: center;
mask-position: center;
}
.sponsor-tile__link {
color: var(--hivis);
font-family: var(--font-data);
font-size: var(--text-data);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
}
.sponsor-tile__link .arrow { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }
.sponsor-tile__link:hover .arrow,
.sponsor-tile__link:focus-visible .arrow { transform: translateX(3px); }
/* ============================================================
INSURANCE feature block
============================================================ */
.insurance-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-12);
align-items: center;
}
.insurance-hero__copy p { color: var(--bone-70); margin-bottom: var(--space-4); max-width: var(--measure); }
.insurance-panel {
padding: var(--space-8);
background: var(--ink-raised);
border: var(--hairline);
clip-path: var(--notch);
}
.insurance-panel h3 { font-size: var(--text-h3); color: var(--bone); margin-bottom: var(--space-3); }
.coverage-list { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.coverage-list h3 { color: var(--hivis); font-family: var(--font-display); text-transform: uppercase; font-weight: 800; font-size: var(--text-lg); margin-bottom: 0.4rem; }
.coverage-list p { color: var(--bone-70); max-width: var(--measure); }
.insurance-disclaimer { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--bone-50); max-width: var(--measure); }
@media (max-width: 860px) {
.insurance-hero { grid-template-columns: 1fr; }
}
/* ============================================================
CONTACT / MEDIA forms
============================================================ */
.two-col {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: var(--space-12);
align-items: start;
}
.two-col--media { grid-template-columns: 1.15fr 0.85fr; }
/* Grid items default to min-width:auto, so they refuse to shrink below
their content's intrinsic width (form fields, long labels) even once
the track itself is narrow — the classic grid overflow trap. */
.two-col > * { min-width: 0; }
@media (max-width: 860px) {
.two-col,
.two-col--media { grid-template-columns: 1fr; }
}
.form-panel {
max-width: 40rem;
width: 100%;
padding: var(--space-8);
background: var(--ink-raised);
border: var(--hairline);
clip-path: var(--notch);
}
/* Unstyled