/* Page-level styles for Couple home */
@import url('colors_and_type.css');
/* box-sizing site-wide; plus kill the blue tap-highlight flash on touch
devices (every interactive element). Focus-visible outlines + our own
hover/active states still convey interaction. */
* {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
/* Every raster ![]()
carries intrinsic width/height attrs for CLS reservation
(the image right-sizing ruling). This base rule makes those attrs safe: it
forces height to track the aspect ratio, so an HTML `height` attribute can
never impose a fixed pixel height on a responsive (width:100% / aspect-ratio)
image and squash it tall-and-skinny. Author rules that set an explicit height
(fixed object-fit boxes, sized avatars) still win by specificity. */
img {
height: auto;
}
/* Nav links — resting ink, brand purple on hover */
.nav-link,
.nav-sublink {
transition: color 140ms ease;
}
.nav-link:hover,
.nav-sublink:hover {
color: var(--couple-purple) !important;
text-decoration: none !important;
}
.nav-sublink:hover {
background: var(--lavender);
}
html, body {
margin: 0;
padding: 0;
background: var(--white);
font-family: 'Nunito', system-ui, sans-serif;
/* Default body text on white = ink-700 per the Guide. Headings reach for
ink-600 (#444) explicitly via .h1-hero / .h2-section / heading classes. */
color: var(--fg-primary);
/* Clip, NOT hidden. `overflow-x: hidden` coerces the other axis to
`overflow-y: auto`, which turns into a scroll container and
hijacks the document scroll away from the viewport — silently killing
every `position: sticky` descendant (the ≤640 Profile/Account section
titles, the Plans pricing pill, the Referral action bar). `clip` crops
horizontal overflow identically but is a NON-scrolling value, so
overflow-y stays `visible`, the root keeps the scroll, and sticky pins
correctly. (Was the latent bug behind the Jun 15 sticky-title ruling;
fixed globally Jun 15 2026 — supersedes the per-page clip patches.) */
overflow-x: clip;
max-width: 100vw;
}
/* Section helper widths */
.page { width: 100%; max-width: 1440px; margin: 0 auto; background: var(--white); position: relative; }
/* Mobile-only line break helper */
.br-mobile-only { display: none; }
@media (max-width: 640px) {
.br-mobile-only { display: inline; }
}
/* Announcement ribbon — copy variants. The ribbon (sections.jsx Banner)
renders BOTH spans; desktop/tablet shows the full string, ≤640 swaps to
the shorter mobile string. The plate itself is auto-height (min 44) and
the nav MEASURES it for its offset — never assume 44. */
.top-banner-short { display: none; }
@media (max-width: 640px) {
.top-banner-full { display: none; }
.top-banner-short { display: inline; }
}
/* ============= RESPONSIVE ============= */
/* Convention: the responsive ladders below write gutters/padding/gap as raw px
(80/64/56/48/40/20 …) rather than var(--space-*), even though those values
map exactly onto the --space-* scale. This is deliberate — below the fluid
range the ≤1100 guard pins the token max-anchors anyway, and keeping the
overrides as literals avoids forcing a global stylesheet cache-bust on every
gutter retune. A production port should fold these back onto var(--space-*)
once the inline-style / !important split is removed. */
/* ---------- Wide tablet / small laptop — 1100 and below ---------- */
@media (max-width: 1100px) {
/* Sections — pull in the 90px desktop gutters */
.section { padding: 80px 56px !important; }
.hero-padded { padding: 0 56px !important; }
/* Hero — keep split, tighten gap and copy padding */
.hero-grid { gap: 40px !important; }
/* Pricing — stays 3-col but with tighter padding inside cards.
(S4: the .plan-name 30px pin here was redundant — --type-display-sm is
guard-pinned to its 30 max-anchor across the whole ≤1100 band already.) */
.plan-card { padding: 28px !important; }
/* Vibe — single-row scroll-snap carousel at this band too */
.vibe-grid {
display: flex !important;
flex-direction: row !important;
grid-template-columns: unset !important;
gap: 20px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 56px !important;
-webkit-overflow-scrolling: touch !important;
padding: 4px 56px 16px !important;
margin: 0 -56px !important;
scrollbar-width: none !important;
}
.vibe-grid::-webkit-scrollbar { display: none !important; }
.vibe-grid > .vibe-card {
flex: 0 0 280px !important;
scroll-snap-align: start !important;
}
.vibe-arrows { display: none !important; }
/* Nav */
.nav-bar { padding: 0 28px !important; }
.nav-list { gap: 28px !important; }
}
/* Home marquee H1 — step from 60 down to the universal 48 across the
tablet band. Scoped ≥641: below that the MOBILE DISPLAY TIER
(colors_and_type.css) owns it — --fs-display-xl re-pins at 38. */
@media (max-width: 1100px) and (min-width: 641px) {
.h1-hero--marquee { font-size: 48px !important; letter-spacing: -0.8px !important; }
}
/* ---------- Pricing 2-col-with-featured-on-top extended up to 1060 ---------- */
@media (max-width: 1060px) and (min-width: 769px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
.pricing-grid > .plan-card:first-child {
grid-column: 1 / -1 !important;
}
}
/* ---------- Mid tablet — 900 and below ---------- */
@media (max-width: 900px) {
.section { padding: 64px 48px !important; }
.hero-padded { padding: 0 48px !important; }
/* Tablet hero — DS Guide says hero top drops from 128 → 96 here. */
.hero-section { padding-top: 96px !important; }
/* Hero — still split here; tighten further */
.hero-grid { gap: 32px !important; grid-template-columns: 1fr 1fr !important; }
/* Features — 2-col */
.features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
/* Pricing — 2-col with the featured (first) plan spanning both columns on top.
Active for 769–1060 via dedicated rule above, and from 768 down to whatever
the next pricing rule overrides at — kept here for legacy. */
.pricing-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
.pricing-grid > .plan-card:first-child {
grid-column: 1 / -1 !important;
}
/* Closing CTA — reorder like mobile: headline → polaroids → button (centered).
No overhang at this width; polaroids sit inside the purple, above the button. */
.closing-grid {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
overflow: hidden !important;
padding: 56px !important;
gap: 24px !important;
margin-bottom: 0 !important;
}
.closing-grid > .closing-copy { display: contents !important; }
.closing-headline {
text-align: left !important;
order: 1 !important;
margin: 0 !important;
}
.closing-grid .polaroid-wrap {
order: 2 !important;
justify-self: center !important;
align-self: center !important;
margin: 0 auto !important;
--p-scale: 0.62 !important;
height: calc(280px * 0.62) !important;
position: relative !important;
}
.closing-grid .polaroid-trio {
--p-scale: 0.62 !important;
transform: translateX(9px) scale(var(--p-scale)) !important;
transform-origin: center !important;
}
.closing-grid .closing-btn {
order: 3 !important;
margin: 4px auto 0 !important;
/* inline-flex, not block — block wiped out .btn-pill's own
align-items:center/justify-content:center, leaving the label
riding high in the fixed-height pill instead of centered. */
display: inline-flex !important;
}
/* Vibe — horizontal scroll-snap carousel at tablet widths too.
Single row, fixed card widths so titles don't crush. Mirrors the
mobile carousel pattern but with bigger cards. */
.vibe-grid {
display: flex !important;
flex-direction: row !important;
grid-template-columns: unset !important;
gap: 16px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 48px !important;
-webkit-overflow-scrolling: touch !important;
padding: 4px 48px 16px !important;
margin: 0 -48px !important;
scrollbar-width: none !important;
}
.vibe-grid::-webkit-scrollbar { display: none !important; }
.vibe-grid > .vibe-card {
flex: 0 0 260px !important;
scroll-snap-align: start !important;
}
.vibe-arrows { display: none !important; }
}
/* ---------- Features — keep 1-col until 700 ---------- */
@media (max-width: 700px) {
.features-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
}
/* ---------- Narrow tablet — 768 and below (above mobile 640) ---------- */
@media (max-width: 768px) {
.section { padding: 64px 40px !important; }
.hero-padded { padding: 0 40px !important; }
/* Hero stacks here. Polaroid moves between the headline/copy and the
CTA block ("Answer a few questions…"), so we use display:contents on
.hero-copy to flatten its two halves into the grid and reorder. */
.hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
.hero-copy { display: contents !important; }
.hero-copy-top { order: 1; }
.hero-polaroid-col { order: 2; padding: 8px 12px 0 !important; overflow: visible !important; display: flex !important; justify-content: center !important; }
.hero-copy-bot { order: 3; margin-top: 16px !important; }
.hero-section {
padding-bottom: 56px !important;
margin-bottom: 0 !important;
border-radius: 0 0 32px 32px !important;
overflow: hidden !important;
}
.hero-polaroid-box {
margin-bottom: 0 !important;
max-width: calc(min(100vw - 72px, 460px) * 0.7) !important;
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
z-index: 1 !important;
}
/* Closing CTA — reorder like mobile: headline → polaroids → button (centered).
No overhang here; polaroids sit inside the purple, above the button. */
.closing-grid {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
overflow: hidden !important;
padding: 56px !important;
gap: 24px !important;
}
.closing-grid > .closing-copy { display: contents !important; }
.closing-headline {
text-align: left !important;
order: 1 !important;
margin: 0 !important;
}
.closing-grid .polaroid-wrap {
order: 2 !important;
justify-self: center !important;
align-self: center !important;
margin: 0 auto !important;
}
.closing-grid .closing-btn {
order: 3 !important;
margin: 4px auto 0 !important;
display: inline-flex !important;
}
/* Find-your-person — stack columns; image+copy stays readable */
.find-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
/* Pricing — single column, constrained max-width and centered */
.pricing-grid {
grid-template-columns: 1fr !important;
max-width: 540px !important;
margin: 0 auto !important;
}
.pricing-grid > .plan-card:first-child {
grid-column: auto !important;
}
/* Closing CTA already 1-col from 900; just tighten padding */
.closing-grid { padding: 48px 40px !important; }
}
/* Mobile — 640 and below */
@media (max-width: 640px) {
/* Sections — full bleed, 20px gutters */
.section { padding: 56px 20px !important; }
.hero-section {
padding-top: 96px !important;
padding-bottom: 56px !important;
margin-bottom: 0 !important;
overflow: hidden !important;
/* border-radius lives in the "Softer container radii" group below. */
}
.hero-padded { padding: 0 20px !important; }
/* Stack everything. Polaroid sits between the headline/copy and the
"Answer a few questions…" CTA block — see the @media 768 rule for the
display:contents + order reorder. */
.hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
.hero-polaroid-col { padding: 8px 12px 0 !important; overflow: visible !important; justify-content: center !important; }
.hero-polaroid-box {
max-width: calc(min(100vw - 40px, 460px) * 0.65) !important;
margin: 0 auto !important;
position: relative !important;
z-index: 1 !important;
}
.find-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
.features-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; max-width: none !important; }
.closing-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 40px 28px !important; }
.vibe-header { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
/* Vibe — horizontal scroll-snap carousel on mobile.
Full-bleed (negative margin cancels section gutter) so cards drag to
the screen edges, but padding-left + scroll-padding hold the first
card at the page gutter on initial render. */
.vibe-grid {
display: flex !important;
flex-direction: row !important;
grid-template-columns: unset !important;
gap: 14px !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scroll-padding-left: 20px !important;
-webkit-overflow-scrolling: touch !important;
padding: 4px 20px 16px 20px !important;
margin: 0 -20px !important;
scrollbar-width: none !important;
}
.vibe-grid > .vibe-card {
flex: 0 0 min(78%, 280px) !important;
}
.vibe-grid::-webkit-scrollbar { display: none; }
.vibe-grid > * { scroll-snap-align: start !important; }
.vibe-arrows { display: none !important; }
/* Type — mobile scale. The MOBILE DISPLAY TIER (colors_and_type.css)
re-pins every fluid --fs-* token at its min-anchor value below 641,
so token-routed type (marquee 38, h1-hero 30, h2-section 24,
lead/body-lg 18, eyebrow-lg 16) needs no per-class step here.
S4 RECONCILIATION (the type tier is the only mobile type lever):
the surviving per-class px deviations were retired so everything
routes through the tier — feature/vibe card titles now take the h3
tier (18), plan-name the display-sm tier (20), and vibe-sub the frozen
body-sm (16, not the improvised 14). The feature-body / plan-tagline /
plan-feature pins were no-ops (their recipes are already the fixed 16).
Only the marquee TRACKING stays — letter-spacing, not size. */
.h1-hero--marquee { letter-spacing: -0.5px !important; } /* tracking eases as the tier takes 60→38 */
/* Announcement ribbon — caption-size all-caps so the mobile copy holds
1–2 lines on the auto-height plate (nav offset is measured). */
.top-banner {
font-size: 14px !important;
line-height: 1.4 !important;
letter-spacing: 0.06em !important;
padding: 12px 20px !important;
}
/* Coming Soon pill stays single-line */
.coming-soon-pill {
font-size: 12px !important;
padding: 4px 8px !important;
white-space: nowrap !important;
}
/* Hero copy */
.hero-copy { gap: 28px !important; }
.hero-copy-top { padding-top: 0 !important; }
/* Closing CTA — left-justify text, then polaroids, then button.
On mobile we flatten the inner copy block (display: contents) so the
headline, polaroid stack, and button all become siblings of the grid
container and can be ordered: headline → polaroids → button.
Polaroids sit INSIDE the purple, above the centered button. */
.closing-grid {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
overflow: hidden !important;
padding: 40px 28px !important;
margin-bottom: 0 !important;
}
.closing-grid .polaroid-wrap {
margin: 0 auto !important;
position: relative !important;
}
.closing-grid > .closing-copy { display: contents !important; }
.closing-headline {
/* font-size comes from the tier (h2-section → 24); only the wrap
behavior is page-owned here. */
line-height: 1.2 !important;
text-wrap: pretty !important;
word-break: normal !important;
overflow-wrap: break-word !important;
max-width: 100% !important;
text-align: left !important;
order: 1 !important;
}
.closing-grid .polaroid-wrap { order: 2 !important; }
.closing-grid .closing-btn {
order: 3 !important;
margin-top: 4px !important;
margin-left: auto !important;
margin-right: auto !important;
display: inline-flex !important;
}
/* Polaroid stacks — fluid scale based on viewport width.
The trio's three cards are visually offset right of their box center,
so we shift the box right ~9px (in trio coords) to center the cluster. */
.polaroid-trio {
--p-scale: 0.62;
position: relative !important;
width: 360px !important;
height: 280px !important;
margin: 0 auto !important;
transform: translateX(9px) scale(var(--p-scale)) !important;
transform-origin: center !important;
flex-shrink: 0 !important;
}
/* Reserve only the visual height (scaled). Trio is 280px tall, scaled. */
.polaroid-wrap {
--p-scale: 0.62;
height: calc(280px * var(--p-scale) + 30px) !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}
/* Nav — swap to hamburger */
.nav-bar {
padding: 0 16px !important;
height: 56px !important;
width: calc(100% - 16px) !important;
}
.nav-list { display: none !important; }
.nav-hamburger { display: grid !important; }
/* Feature cards — tighter padding when 2-up on mobile */
.feature-card-body { padding: 16px !important; gap: 12px !important; }
.feature-card-play { width: 40px !important; height: 40px !important; }
.feature-card-play svg { width: 14px !important; height: 14px !important; }
/* Buttons — never wrap label. All sizes collapse to 56px on mobile. */
.btn-pill { height: 56px !important; font-size: 18px !important; padding: 0 24px !important; white-space: nowrap !important; }
.btn-pill--lg { font-size: 18px !important; padding: 0 28px !important; }
/* Softer container radii on mobile — desktop radii feel oversized at this width. */
.hero-section { border-radius: 0 0 22px 22px !important; }
.feature-card { border-radius: 16px !important; }
.plan-card { border-radius: 16px !important; }
.closing-grid { border-radius: 22px !important; }
.nav-bar { border-radius: 16px !important; }
.find-frame { border-radius: 8px !important; }
/* The menu is a full-screen takeover at ≤640 (Modal Takeover ruling) —
no corner radius when it meets every viewport edge. */
.mobile-menu-panel { border-radius: 0 !important; }
}
/* ============================================================
HERO SHELL — the lavender, rounded-bottom signature
Used on Home, Plans, Welcome, Matches, Match Detail, Events, Event Detail.
Funnel pages (Intake, Get to Know You, Referral, Event Invite,
Checkout, Confirmation) deliberately skip this — see the DS Guide's
"Lavender anchors every marketing hero" principle.
One class carries the base recipe + the responsive padding-top /
padding-bottom progression every hero used to duplicate inline. Page-
specific classes (wc-hero-shell, md-hero-shell, etc.) survive as
scoping hooks for sibling rules (.wc-hero-pad, .md-hero-grid) — but
they no longer redeclare the shell rhythm.
============================================================ */
.hero-shell-lavender {
position: relative;
overflow: hidden;
background: var(--lavender);
/* S2 — desktop rhythm + radius route through the fluid --rhythm-* tokens
(1366↔1920 ramps + the height-density rule). The ≤1100 rules below
keep using fixed --space-* steps; the token guard pins the base values
there anyway, so tablet/mobile stay pixel-identical. */
border-radius: 0 0 var(--rhythm-hero-radius) var(--rhythm-hero-radius);
padding-top: var(--rhythm-hero-top);
padding-bottom: var(--rhythm-80);
color: var(--couple-purple-dark);
/* Plate Width ruling (Jun 2026) — the plate overhangs the 1440 content/
nav cap by --shell-overhang per side (0 at ≤1456, 40 at ≥1536, then
frozen). The inner hero pads are all maxWidth:1440 + auto margins, so
copy stays exactly where it was — only the lavender grows. The footer
shell carries the identical overhang; the two plates flex together
(same curve, same width).
NB: this geometry needs width:auto to widen under negative margins.
Inside the .intake-page flex wrapper an explicit width:100% breaks it
(overhang collapses into a left shift) — see the
`.intake-page > section.hero-shell-lavender` exception in the INTAKE
PAGE block before reusing this pattern in a new wrapper. */
margin-inline: calc(-1 * var(--shell-overhang));
}
@media (max-width: 1100px) {
.hero-shell-lavender { padding-top: var(--space-128); padding-bottom: var(--space-64); }
}
@media (max-width: 900px) {
.hero-shell-lavender { padding-top: var(--space-96); padding-bottom: var(--space-56); }
}
@media (max-width: 768px) {
.hero-shell-lavender { padding-top: var(--space-96); }
}
@media (max-width: 640px) {
.hero-shell-lavender {
padding-top: var(--space-96);
padding-bottom: var(--space-48);
/* Softer mobile radius — desktop's 44px feels oversized at 640. */
border-radius: 0 0 var(--r-card) var(--r-card);
}
}
/* ============================================================
HOME HERO COMPOSITION (Fluid Scale Migration · S2, retuned S2b)
============================================================
The polaroid stack is width-driven (100% of its column, 1:1 aspect), so
its fixed 460px cap set the hero's height at every desktop width. Since
S2b both tokens ride the ELEMENT SCALE (--el-px — see colors_and_type.css)
rather than bespoke clamps: the design values stay legible below and the
ramp, the ≤1100 guard, and any future
retune are owned by the one tier token. Consumed inline in sections.jsx's
. Not height-keyed: the rhythm tokens already trim the shell on
short viewports; the artwork itself should not also shrink.
@1536: stack ≈ 403px, min-height ≈ 473px. */
:root {
--home-hero-minh: calc(540 * var(--el-px));
--home-polaroid-maxw: calc(460 * var(--el-px));
}
/* .hero-shell-plain — the deliberate alternative for the pages
that opt out of the lavender hero: Match Detail (×3, the single-profile
browsing exception) and the single-document reading surfaces (Privacy,
Terms, the Vibe article) where the user is studying ONE thing.
NB: Profile + Account left this family on Jun 18 2026 (the
settings-destination amendment) — they're returned-to destinations, not
linear funnels, so their mastheads moved to .hero-shell-lavender while
their bodies stay white. Referrals followed on the same day, so the whole
old account trio now rides the lavender band (see the Guide's
settings-destination ruling).
Same horizontal rhythm + identical responsive padding-top as the
lavender shell so the nav-to-content cadence is unchanged, but no
tinted plate, no rounded corners — the page stays on white the
whole way and the photo + name carry the visual weight. Bottom
padding is intentionally tighter than the lavender shell because
there is no color change for the eye to "land" on; the body
section's own top padding owns the gap below. See the "Lavender
anchors every marketing hero" principle in the Design System
Guide for the rationale. */
.hero-shell-plain {
position: relative;
/* No `overflow: hidden` — unlike the lavender shell, this one has no
rounded corners and no decorative children to clip, so we let
shadows from the photo (--shadow-elevated) and the Pair CTA
(--shadow-cta purple glow) extend naturally past the shell's
bottom edge into the body section without being chopped. */
background: var(--white);
/* S2 — deliberately NOT fluid: 96 here is nav clearance (the floating nav
bottoms out ~90px), already at the system floor — there is no room to
flex down. The white heroes keep their fixed cadence; revisit per-page
in the S4/S5 sweeps if a page proves otherwise. */
padding-top: var(--space-96);
padding-bottom: var(--space-32);
color: var(--fg-primary);
}
@media (max-width: 1100px) {
.hero-shell-plain { padding-top: var(--space-80); padding-bottom: var(--space-24); }
}
@media (max-width: 900px) {
.hero-shell-plain { padding-top: var(--space-64); padding-bottom: var(--space-16); }
}
@media (max-width: 640px) {
.hero-shell-plain { padding-top: var(--space-56); padding-bottom: var(--space-8); }
}
/* TRAP: the padding-TOP ramp above (80/64/56) drops BELOW the ~80px floating
nav, so the bare base shell clips its topmost element under the nav on
tablet/mobile. Every consumer therefore re-pins padding-top to the
--space-96 nav-clearance floor at ≤900 (compound selector beats these
single-class rules): .rf-hero, .legal-hero,
.va-hero-shell, and .md-hero-shell. (.acct-hero / .profile-hero left this
family Jun 18 2026 — they ride .hero-shell-lavender now, which carries its
own ≤900 floor; their redundant overrides are harmless and equal.) The
padding-BOTTOM ramp stays in
effect (consumers override top only). Any NEW .hero-shell-plain consumer
MUST add the same ≤900 padding-top:96 override. */
/* ============================================================
MATCH DETAIL — shared rhythm
Three files (match-detail / -sarah / -james) used to redeclare these
responsive rules inline. Pulled here so the three pages stay in lockstep.
============================================================ */
.md-back-link { transition: color 160ms ease, gap 160ms ease; }
.md-back-link:hover { color: var(--couple-purple-hover) !important; gap: 12px !important; }
@media (max-width: 1100px) {
.md-hero-pad { padding: 0 56px !important; }
.md-shell { padding: 80px 56px 96px !important; }
.md-hero-grid { gap: 48px !important; }
}
@media (max-width: 900px) {
/* Nav clearance — Match Detail was the lone .hero-shell-plain consumer
missing the documented "96px tablet/mobile" hero-top override its
siblings (Account/Profile/Referrals/Legal/Vibe Article) all carry.
The base shell ramps DOWN to 64/56 below 900, but the floating nav
bottoms out ~90px, so the "Back to matches" row — the hero's topmost
element — slid under the nav. Re-pin to the 96 nav-clearance floor;
compound selector beats the shared shell's single-class responsive
rules (incl. its ≤640 56px), matching legal.css's documented approach. */
.hero-shell-plain.md-hero-shell { padding-top: var(--space-96); }
.md-hero-pad { padding: 0 48px !important; }
.md-shell { padding: 64px 48px 80px !important; }
.md-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
.md-hero-photo { max-width: 420px !important; }
}
@media (max-width: 768px) {
.md-hero-pad { padding: 0 40px !important; }
.md-shell { padding: 56px 40px 80px !important; }
}
@media (max-width: 640px) {
.md-hero-pad { padding: 0 20px !important; }
.md-shell { padding: 48px 20px 64px !important; }
.md-h1 { font-size: 38px !important; letter-spacing: -1px !important; }
.md-h2 { font-size: 30px !important; }
/* Chemistry ring — mobile display tier. The .score-num re-pins to its
24px min-anchor here (MOBILE DISPLAY TIER, colors_and_type.css) but
--el-px does not, so the hero ring box stayed frozen at 112px: the
percentage shrank inside an unchanged ring and the oversized ring rode
up over the eyebrow's status line. The fix is the --ring-scale lever
(element-mass, not a per-class type pin — the Mobile chapter's rule).
Jun 16 2026 (ring top-anchor + breathing-room amendment): the ring no
longer centres on the name (top:50% was the desktop inline style); on
mobile it TOP-ANCHORS to the name so its top edge lines up with the
name's top edge (top:0 / transform:none, overriding the inline center).
That alone clears the eyebrow (the ring can't extend above the name
into the status line any more), so the old centred-ring clearance
hack — margin-top:8px on .md-hero-name-with-ring — is removed and the
eyebrow→name gap returns to the section's natural 24.
And --ring-scale goes 0.63 → 0.75 (box ~71 → ~84px) WITHOUT touching
the 24/18px numeral: at 0.63 the `%` sat ~2.7px off the ring stroke
(touching); the numeral block is fixed px (font unchanged) so a larger
box is the only lever that buys clearance — 0.75 opens it to ~9px. */
.md-hero-ring { --ring-scale: 0.75; top: 0 !important; transform: none !important; }
.md-hero-actions { flex-wrap: wrap !important; gap: 20px !important; flex-direction: row !important; align-items: center !important; }
.md-hero-actions .btn-pill { flex: 1 1 auto !important; }
}
/* ============================================================
EVENT DETAIL — shared rhythm
Page chrome lifted out of event-detail.jsx's