links (own TODO placeholder
per network, same as the navbar's own social cluster), each an
independently hit-testable target — NOT one shared click area. Desktop/
tablet sizing here is generous but modest (the icons are a supporting
element inside an already-busy brush-art bar, main label stays the
visual lead); the ≤767px phone override below is what actually delivers
the ≥44px tap-target law. */
.cta-social-row {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.cta-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 auto;
transition: transform 0.12s ease;
}
.cta-social-icon img { width: 100%; height: 100%; object-fit: contain; }
.cta-social-icon:hover { transform: translateY(-1px); }
/* icon-facebook-v2's own source canvas carries more internal padding than
its X/Threads siblings (same optical-mismatch this file already
corrects for the navbar's identical trio — see the
`.nav-social a[data-edit="social-facebook"] img` rule) — same
correction reapplied here so all three read as one matched set inside
the CTA. */
.cta-social-icon img[alt="Facebook"] { transform: scale(0.906); }
/* CTA-AFTER-VIDEO round (2026-08-18): the PHONE-BOTTOM-CTA round's
`.mobile-bottom-cta` DOM duplicate + this its base "hidden everywhere
except phone" rule are BOTH gone — the phone CTA is the same single
`.hero-cta` element as every other tier now, just reordered via flex
`order` to land after the video (see the `@media (max-width: 767px)`
block's own comment). */
.hero-right {
flex: 65 1 0%;
min-width: 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
/* .hero-video-wrap itself — the data-edit anchor, sizing/rotation/shadow
— is defined in full down in the HERO VIDEO PANEL block below (kept
there, next to the three polygon layers it wraps, rather than split
across two locations). */
/* RIGHT-SWEEP ROUND (2026-08-17, owner: "remove the right elements, then
put this on instead"): REPLACES the entire prior right-flank stack in
one piece — the old `.hero-video-corner-brush` (corner-brush-top-
right-v4.webp, a tall vertical brush riding the panel's top-right
corner) AND the separate `.hero-video-accents` support-graphics group
(`.hva-stroke-red` CSS bar + `.hva-halftone` img, halftone-red-v2.webp)
are both gone — see the HTML's own removal notes. All three files stay
on disk unreferenced. One new whole-art piece, right-sweep-red.webp
(1672x941, thin strokes flaring in from its own left edge, gathering
into a dense red/black mass + halftone toward its own right edge —
installed unflipped so that dense side lands at the true viewport
edge). Same positioning convention as the piece it replaces and for
the identical reason (EDGE-BLEED-FIX): a DIRECT CHILD of .hero, not
.hero-right — .hero's own box is the full-viewport-width padding box,
unaffected by --edge-pad's content-max centering, so a small negative
`right` here reaches the TRUE viewport edge at every width, content-
max-capped ones (~1604px+) included, where a %-of-.hero-right offset
would leave a growing bare strip. Still z-index 0 — the video panel
(`.hero-video-wrap`, later in DOM, position:relative) and `.hero-left`
(explicit z-index:2) both still paint over it, same stacking-order
guarantee the old pieces relied on. SIZE: width-driven off the art's
own 16:9-ish 1.777 aspect (`height: auto`) so the horizontal sweep
reads across the panel rather than running tall — clamp lands ~430-
590px tall across the 1280-1700 matrix, matched against `.hero`'s own
60vh/460px-min box (see that rule's own comment) rather than
overshooting it, so the sweep never bleeds up into the navbar's
follow-us cluster directly above. Vertically centered on `.hero`
(`top: 50%` + `translateY(-50%)`) so it rides behind the panel, which
is itself vertically centered in `.hero-right`. `data-edit-rotatable`
in the HTML so the owner can fine-tune position/scale/rotation from
here immediately. */
/* BAKE ROUND 3 (2026-08-17): folds in the owner's saved "right-sweep"
tweak (translate [313.74, 8.33], rotate -28.5deg, scale 0.8) — first
bake for this element. Scale baked into real width (0.8x the prior
clamp, same %/px shape so it stays responsive across the desktop
range); rotate baked as a real rotation, ADDED alongside the existing
translateY(-50%) centering (kept, rather than flattened into one fixed
px offset, so the sweep stays vertically self-centering against
.hero's own height at other desktop widths in the matrix, not just
1280px). The extra translate() here is NOT the override's raw
[313.74, 8.33] — the override composes with translateY(-50%) inside
the SAME transform chain (translateY sits between the new rotate and
the point, so it gets rotated/scaled too, non-additively — the same
effect the round-2 comments flagged for text rotations). Re-derived
by matrix composition (translate/rotate/scale live-verified against
the tweak-editor's own rendered matrix at 1280px): the real px needed
here is [154.44, 72.49] (live-verified against the tweak-editor's own
rendered rect at 1280px — the AABB width/height matched immediately,
confirming rotate/scale were right; only the translate needed a
measured correction) so that translate() + translateY(-50%) +
rotate(-28.5deg) together reproduce the exact target position. */
.hero-right-sweep {
position: absolute;
pointer-events: none;
z-index: 0;
width: clamp(480px, 48vw, 784px);
height: auto;
right: -14px;
top: 50%;
transform: translate(154.44px, 72.49px) translateY(-50%) rotate(-28.5deg);
}
/* BAKE ROUND 6 (2026-08-18): .hero-right-sweep above is baked HIDDEN
(display: none, its data-edit override's `hidden: true`) and replaced
by this new piece per the owner's explicit follow-up ("once you're
done editing, put this on the right side") — one swap, not a removal.
right-sweep-v2.webp (1192x1096, aspect ~1.088 — taller/more square than
the old 1672x941 wide-arc art) is a fan of strokes with its dense mass
gathered at its own TOP-RIGHT corner (plus a second halftone cluster at
its own bottom-right), tips sweeping down-left — installed WHOLE (no
crop/clip-path), same slot/z-order convention as the piece it replaces:
direct child of .hero (not .hero-right, EDGE-BLEED-FIX reason — .hero's
own box is the full-viewport-width padding box, unaffected by
--edge-pad's content-max centering), z-index 0 so .hero-left (z-index 2)
and the video panel (position:relative, later in DOM) both paint over
it, never covering the headline/subhead/callout/FOLLOW US text (pixel-
checked below). ANCHOR: dense corner at .hero's own top-right — `top: 0`
(no vertical centering, unlike the old sweep) + a small edge-bleed
`right` offset so the art's own right edge reaches the true viewport
edge, matching the old piece's `-14px` convention. SIZE: generous —
this is the hero's main right-side gesture, same "roughly half the
hero" weight the piece it replaces carried — width clamp(560px, 56vw,
860px), height: auto off the art's own aspect ratio (at 1280px: 56vw =
716.8px wide -> ~659px tall, well past .hero's own ~480px box height,
which is fine: only `.hero-poster-outer`'s `overflow-x: clip` bounds
this canvas, vertical bleed above/below is unclipped and anything it
overlaps below is a later DOM sibling (`.features`), which always
paints on top). */
.hero-right-sweep-v2 {
position: absolute;
pointer-events: none;
z-index: 0;
width: clamp(560px, 56vw, 860px);
height: auto;
right: -14px;
top: 0;
}
/* =========================================================================
HERO VIDEO PANEL — REBUILT (2026-08-17, owner spec, saved verbatim at
hero-video-panel-spec.md), then NO-ROTATION FINAL CLARIFICATION
(2026-08-17, same day, owner verbatim): "the hero video itself doesn't
skew, doesn't rotate, doesn't tilted. It's the frame/container looks
parallelogram, but the video into this frame is normal rectangle,
right so part of the video will get cut, or I zoom in the video." This
OVERRIDES the spec's own rotation clause below — replaces every
earlier "rotated rectangle + border + red drop-shadow" attempt
(SQUARED-OFF / "FOLLOW THIS SAMPLE" / TRAPEZOID-FRAME / the first
rebuild's own rotate(1.5deg) pass, all retired below this comment —
history in git, not restated here).
CONSTRUCTION — three REAL stacked polygon layers, each its own element,
each its own (different) clip-path:
.video-red-back — misregistered backing plate, offset down-right,
BEHIND everything, extends past the black frame.
.video-black-frame — thick black frame polygon (a shape, not a CSS
border) — visible mainly top/left/bottom.
.video-screen — inset gameplay polygon, nested inside the black
frame, nearly fills it with a visible black edge
(the frame "thickness" is this inset amount).
Per the spec: "Do NOT reuse exactly the same polygon for every layer."
NO ROTATION ANYWHERE — final ruling, supersedes the spec's own
"rotate the assembled unit ~1.5deg" clause entirely. .hero-video-wrap
carries NO transform: rotate/skew, and neither does anything inside
it (red plate, black frame, screen, video, play button, control bar,
callout). The irregular-quad SHAPE comes 100% from the three
clip-path polygons above — an upright box cut at an angle, never a
rotated box. The gameplay footage is an upright rectangle SIZED TO
COVER the screen polygon's bounding box (`.hero-video`'s own
width/height: 100% + object-fit: cover, unchanged) so the angled clip
crops straight into the footage's own edges with zero gaps — exactly
the owner's "part of the video will get cut" description — never a
gap of frame/cream showing through at any corner.
SIZE/PLACEMENT — 55-65% of hero width, dominant, pushed toward the
right edge (supersedes the 2026-08-17 VIDEO-75% shrink round entirely
— the owner's spec explicitly says "much larger than the current
implementation" and "not centered like a normal card"). */
.hero-video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
filter: drop-shadow(0 12px 18px rgba(27, 22, 16, 0.16));
}
/* LEVEL-EDGES round (2026-08-17, owner follow-up with a screenshot,
verbatim: "why the whole frame is still rotate? it needs to be 0").
Correct diagnosis: with the assembly rotation already gone (see the
NO-ROTATION FINAL CLARIFICATION above), the panel STILL read as
rotated because the old polygons slanted the TOP edge (0%->3%/5% y)
AND the BOTTOM edge (96%->100% y) the same way — a quad whose top and
bottom both lean together is visually indistinguishable from a
rotated rectangle, exactly like every parallelogram element already
in the owner's own art kit (ribbon strips, feature frames): level
top/bottom, the lean carried by the left/right SIDES only. Every
polygon below now starts/ends each top vertex at y=0% and each bottom
vertex at y=100% EXACTLY — zero vertical slant on the horizontal
edges. The quad's irregularity now lives entirely in HOW FAR each
side's x leans (left lean != right lean per layer, so it still reads
as a hand-cut asymmetric quad, never a symmetrical parallelogram).
Red backing plate — spec: "#ef2b29 or existing racing red" (--red is
this page's own racing red, already that family). Offset via
`transform: translate()` rather than juggling four different inset
values — same box as the black frame, shifted down-right, with its OWN
(loosest) polygon so it both peeks past the frame's edges from the
offset AND from the wider polygon itself, "visible mainly along lower
and right edges... occasionally peeks elsewhere," never a symmetrical
surround. */
.video-red-back {
position: absolute;
inset: 0;
background: var(--red);
clip-path: polygon(5% 0%, 100% 0%, 98% 100%, 0% 100%);
transform: translate(10px, 12px);
z-index: 1;
}
/* Black outer frame — a real polygon SHAPE carrying the frame's black
mass (not a border on the screen layer). --ink is this page's own
near-black, the "existing black" the spec allows in place of
`#0d0d0f`. Its own polygon sits between the looser red plate and the
tighter screen inset below, so three distinct edges are visible at
once = real depth. Level top/bottom per the LEVEL-EDGES round above;
left lean (7%) and right lean (4%) deliberately differ so this stays
an irregular quad, never a true parallelogram. */
.video-black-frame {
position: absolute;
inset: 0;
background: var(--ink);
clip-path: polygon(7% 0%, 100% 0%, 96% 100%, 0% 100%);
z-index: 2;
}
/* Gameplay screen — inset INSIDE the black frame (this inset amount IS
the frame's visible thickness, 6-10px desktop per spec), its own
tighter polygon so the black edge reads as a real, irregular hand-cut
border rather than a uniform CSS padding ring. Same level top/bottom,
same asymmetric left(7%)/right(4%) lean as the black frame (LEVEL-
EDGES round) so the cut edges visually track together across all
three layers. overflow: hidden clips the video to this shape; the
video itself stays a plain upright rectangle underneath (object-fit:
cover, transform: none — see .hero-video below), never rotated on its
own — sized to COVER this box so the clip crops straight into the
footage with zero gaps. */
.video-screen {
position: absolute;
inset: clamp(5px, 0.9vw, 8px);
clip-path: polygon(8% 0%, 99% 0%, 95% 100%, 1% 100%);
z-index: 1;
overflow: hidden;
background: #000;
}
/* COSMETIC VIDEO CONTROL BAR (2026-08-17) — sells the "this is a real
video player" read the sample crop shows (play/volume, scrub bar +
timestamp, quality/pip/fullscreen), entirely static/non-functional
until the owner's MP4 replaces the poster (see the HTML comment right
above this block's markup). Sits inside .video-screen (clipped to its
own polygon along with the footage); .hero-play lives one level up, a
sibling of .video-screen inside .video-black-frame, so it paints above
both the screen and this bar with no z-index juggling needed — spec
layering order: ...gameplay -> video controls -> play button... */
.hero-video-controlbar {
position: absolute;
left: 0; right: 0; bottom: 0;
height: clamp(26px, 3.4vw, 34px);
display: flex;
align-items: center;
gap: clamp(6px, 0.9vw, 10px);
padding: 0 clamp(8px, 1.1vw, 14px);
background: rgba(10, 8, 6, 0.82);
z-index: 2;
pointer-events: none;
}
.hvc-btn {
flex: 0 0 auto;
width: clamp(14px, 1.4vw, 18px);
height: clamp(14px, 1.4vw, 18px);
padding: 0;
border: none;
background: none;
display: flex;
align-items: center;
justify-content: center;
}
.hvc-btn svg { width: 100%; height: 100%; fill: rgba(249, 239, 224, 0.92); }
.hvc-progress {
position: relative;
flex: 1 1 auto;
height: 3px;
border-radius: 999px;
background: rgba(249, 239, 224, 0.28);
min-width: 30px;
}
.hvc-progress-fill {
position: absolute;
inset: 0 68% 0 0;
border-radius: 999px;
background: var(--red);
}
.hvc-progress-dot {
position: absolute;
left: 32%;
top: 50%;
width: 8px; height: 8px;
border-radius: 999px;
background: var(--red);
transform: translate(-50%, -50%);
}
.hvc-time {
flex: 0 0 auto;
font-family: var(--font-body);
font-weight: 600;
font-size: clamp(8.5px, 0.78vw, 10.5px);
color: rgba(249, 239, 224, 0.85);
white-space: nowrap;
}
.hvc-quality {
flex: 0 0 auto;
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(7.5px, 0.68vw, 9px);
letter-spacing: 0.03em;
color: rgba(249, 239, 224, 0.85);
border: 1px solid rgba(249, 239, 224, 0.5);
border-radius: 3px;
padding: 1px 4px;
}
.hero-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #111 center / cover no-repeat;
transform: none; /* upright, always — the frame carries the angle, never the footage */
}
/* CHIP-REMOVED round (2026-08-18, owner: "remove these pause or play
option for the video, i just want it keep looping"): the AMBIENT
AUTOPLAY round's corner pause/resume chip (`.hero-play-chip`) — and
every rule that styled it — is removed outright (no user control is
offered at all now; see index.html's own HERO VIDEO PANEL comment).
Markup commented out, not deleted. */
/* FEEL THE SPEED callout — owner spec: must feel attached to the panel,
overlapping its lower-right corner and extending slightly beyond it
(never a separate clean card, never a big gap between slogan and
panel). Backing art unchanged (callout-splash-v2.webp IS the black
brush the spec describes); "Feel The Speed." white / "Own The Finish."
gold, per the spec's own copy. Positioned as a child of .hero-video-
wrap (see index.html); carries no transform: rotate of its own — the
NO-ROTATION FINAL CLARIFICATION (see the HERO VIDEO PANEL block above)
means nothing in this component tilts, callout included, so it reads
perfectly level, same as the play button and control bar. */
.hero-tagline {
position: absolute;
z-index: 6;
right: -6%;
bottom: -8%;
width: clamp(150px, 19vw, 230px);
pointer-events: none;
}
/* BAKE ROUND (2026-08-17): folds in the owner's saved "callout-ink-
splash" tweak (scale 1.05, translate [47.02, -72.99]) — kept as a real
transform (decorative art, doesn't affect the box's own layout size,
same behavior the tweak-editor override gave it). */
/* BAKE ROUND 2 (2026-08-17): folds in a second owner-saved "callout-ink-
splash" tweak on top of round 1 — composed translate/scale/rotate,
live-verified against the exact matrix the tweak-editor rendered
(translate composes additively; scale multiplies 1.05 x 1.1 = 1.155;
rotate is a fresh rotation, art rotation now sanctioned per this
round's brief). */
/* BAKE ROUND 3 (2026-08-17): folds in a third owner-saved "callout-ink-
splash" tweak on top of rounds 1-2 — translate/scale/rotate re-derived
from the tweak-editor's own live-rendered matrix (not hand-added):
since this element's baked transform is a pure uniform-scale + rotate
(no skew/non-uniform scale), the new rotate/scale DO compose additively
here (total scale 1.155 x 1.15 = 1.32825, total rotate -6 + 1 = -5deg)
— the translate does NOT (it's nested inside the same transform chain,
so it gets swept up by the new rotate/scale too), so the translate
value below is the live matrix's own resolved translation, not a sum
of the three rounds' raw deltas. Kept as a real transform (still
decorative art with no layout footprint, same rationale as round 1). */
/* BAKE ROUND 4 (2026-08-17): folds in a fourth owner-saved "callout-ink-
splash" tweak — translate only this round (ov.scale=1, ov.rotate=0, per
apply()'s own defaults). GOTCHA found live-verifying against the target
box (not just hand-added deltas, per this file's own "live-matrix
measurement" convention): this round ALSO reworks "hero-video" (see
.hero-video-wrap below), whose scale is baked into REAL width rather
than a CSS transform — the tweak-editor's own live override, in
contrast, applies hero-video's scale as a `transform:scale(0.95)` on
.hero-video-wrap, which (being an ancestor of .hero-tagline/.hero-
tagline-bg through normal DOM nesting) ALSO visually shrinks this
element by that same 0.95x for free. Baking hero-video's scale into
real width drops that free inherited shrink, so a naive additive
translate-only bake here rendered ~5% too big (measured: baked width
316.67px vs. the live-override target's 300.84px, ratio 0.9500 — an
exact match for the missing 0.95x). Fixed by folding the missing 0.95x
into this element's OWN scale (1.32825 x 0.95 = 1.2618375, rotate -5deg
untouched) and re-solving translate from scratch against the live
target's own center point (not summed deltas): scale/rotate pivot
around the default center transform-origin, so translate is simply the
target box's center minus the pre-transform (natural) box's own center
— measured 44.69195px/-193.47295px at 1280px, independently re-checked
at 1440/1512 (dy stable to 0.02px, dx within ~2.8px, same fixed-px-
against-a-growing-% column behavior every other round in this file
documents). */
.hero-tagline-bg {
display: block;
width: 100%;
height: auto;
pointer-events: none;
transform: translate(44.69195px, -193.47295px) scale(1.2618375) rotate(-5deg);
}
/* BAKE ROUND 2: folds in a second owner-saved "hero-callout-text" tweak
— translate composed into the existing % insets (shifted by the new
delta, converted to % of the callout box), scale composed into the
text's own font-size (real size, not a leftover transform:scale),
rotate composed with round-1's -14.5deg into one absolute rotation
(-17.5deg total — text rotation, always allowed). */
/* BAKE ROUND 3 (2026-08-17): folds in a third owner-saved "hero-callout-
text" tweak — the callout rides higher on the video panel now. Rotate
stays -17.5deg total (this round's override carried no new rotate —
live-verified the composed matrix keeps the identical angle). Scale
1.15 composed into font-size (real size, not transform:scale) same as
before — but GOTCHA found live-verifying against the tweak-editor's
own rendered rect: this box's width/height come from its % insets,
NOT from its (nowrap, overflow-visible) text content, so a real
font-size bump alone leaves the BOX itself unchanged — the insets also
need to grow 1.15x (scaled around the box's own center, matching the
override's default transform-origin) to reproduce the same footprint
a transform:scale(1.15) would have painted. With the box correctly
pre-scaled this way, translate composes additively again (live-
verified: the needed translate came out equal to the override's own
raw delta, to within rounding) — same [9.44, -119.44] used directly.
CALLOUT-VS-HUD CHECK (per this round's brief): re-verified at every
desktop width in the matrix that the callout's new higher position
clears the video panel's HUD progress list and control bar — see the
round's own verification screenshots. */
.hero-tagline-copy {
position: absolute;
left: 7.06%;
top: -51.46%;
right: 3.24%;
bottom: 96.26%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
transform: translate(9.44px, -119.44px) rotate(-17.5deg);
}
.hero-tagline .display { font-size: clamp(12.02px, 1.328vw, 15.81px); display: block; line-height: 1.2; white-space: nowrap; }
.hero-tagline .l1 { color: var(--white); }
.hero-tagline .l2 { color: var(--gold-2); }
/* =========================================================================
FEATURE CARDS
========================================================================= */
.features {
display: flex;
padding: clamp(10px, 1.6vh, 20px) var(--edge-pad);
gap: 0;
}
.feature-card {
/* spec §26: feature gaps ~24-32px. Each card carries HALF the gap as
its own padding (14px + 14px = 28px between columns) plus a hairline
divider — identical on all three, per §14's "exact same component
proportions" instruction (one card recipe, reused 3x, only content
differs). */
flex: 1 1 0;
padding: 0 14px;
border-left: var(--border-clean);
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.feature-card:first-child { border-left: none; padding-left: 0; }
.feature-card:last-child { padding-right: 0; }
/* NUMBERED-FRAME round (2026-08-17): the owner supplied a new sheet with
the "01"/"02"/"03" tag now BAKED INTO the frame art's black corner tab
(feature-frame-01/02/03.webp — see .feature-shot-frame-art below), so
the old typed/CSS number chip (.feature-num) is gone — it would double
up with the art's own numeral. feature-tab now carries ONLY the title,
repositioned into the cream strip to the RIGHT of the baked tab
(measured live in PIL against all three frame images: the tab+numeral
glyph clears by ~37-38% of the frame's width on every one of the three
near-identical sheets — see the per-card clip-path/aspect-ratio block
below .feature-shot-inner for the full measurement method). Sits in
the same 0-~17%-tall top strip as before, which is ENTIRELY frame trim
(the clipped photo itself only starts at ~16-17% per each card's own
polygon below) — so the title always reads against the frame's cream
band, never against unpredictable screenshot content, keeping contrast
reliable across all three different photos. */
.feature-tab {
position: absolute;
top: 4%;
left: 39%;
right: 6%;
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
}
/* CONTRAST FIX: even sitting clear of the black tab, a small solid cream
backing (not just bare text on whatever the frame happens to paint
underneath) guarantees a reliable ink-on-cream reading regardless of
exactly where the halftone/brush-mark texture under the title band
falls at any card width. */
.feature-title {
font-family: var(--font-display);
font-weight: 900;
font-style: italic;
text-transform: uppercase;
color: var(--ink);
font-size: clamp(9.5px, 0.86vw, 12px);
letter-spacing: 0.005em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: rgba(249, 239, 224, 0.94);
padding: 2px 7px 2px 6px;
border-radius: 2px;
}
/* OWNER UPDATE (sheet-3 round, firm instruction): the CSS clip-path mat
is replaced by the owner's own raster panel sheet element
(assets/img/elements/feature-frame.webp — cream panel, black corner
tab, yellow/black border, halftone corner) — built once, reused for
all three cards per the owner's note that they're near-identical.
MEDIA-REGISTRATION round (2026-08-16, SUPERSEDES the "aspect-honesty
letterbox" note above — the owner rejected the letterboxed result
twice as "media are off"): the panel's opening is a skewed
parallelogram (bounded by the yellow trim, with the black corner tab
eating into its top-left corner), so a contain-fit rectangle could
never fill it. .feature-shot-inner now spans the full frame box and
is clip-path'd to the quad's exact corners — measured in PIL against
the actual art (feature-frame.webp, 291x201): the largest connected
near-cream region (opaque, excluding the yellow trim itself) gives
TL(45,37) TR(285,36) BR(243,188) BL(0,188) px -> percent-of-frame
below. The visible top-left clip corner sits just past the black
corner tab rather than the trim's true (tab-hidden) corner — the
frame art painting on TOP (z-index above the inner) occludes that
whole tab area regardless, so this is exact for what's ever visible.
object-fit: cover (not contain) fills the quad with real pixels, no
letterboxing; anchored top-left per spec so the same recipe crops
consistently across all three shots' differing native aspect ratios
(1.0-2.3:1 vs. the quad's own ~1.5:1).
LAYER ORDER CORRECTION: unlike the video frame, feature-frame.webp's
"opening" is NOT a transparent hole — the cream card interior is
opaque pixels baked into the art itself (verified by isolating the
art on a magenta backdrop: the cream area stayed solid cream, not
see-through). So the media has to paint ON TOP of the frame art,
clipped exactly to the cream quad, replacing that baked-in cream
pixel-for-pixel — the reverse stacking from the video frame. The
frame's black corner tab (which overlaps the quad's true top-left
corner) stays on top of nothing since the clip already excludes that
sliver, so it reads as intended, untouched. */
.feature-shot {
position: relative;
aspect-ratio: 291 / 201;
filter: drop-shadow(0 1px 2px rgba(27, 22, 16, 0.08)) drop-shadow(0 3px 8px rgba(27, 22, 16, 0.08));
}
.feature-shot-frame-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.feature-shot-inner {
position: absolute;
inset: 0;
z-index: 2;
overflow: hidden;
background: #f9efe0;
clip-path: polygon(15.46% 18.41%, 97.94% 17.91%, 83.51% 93.53%, 0% 93.53%);
}
.feature-shot img {
width: 100%; height: 100%;
object-fit: cover;
object-position: left top;
transform: none; /* upright, always — the mat carries the angle, never the screenshot */
}
/* NUMBERED-FRAME round (2026-08-17): the owner's new sheet
(feature-frame-01/02/03.webp) is three DISTINCT crops off one sheet —
near-identical geometry but not byte-identical (720x421 / 724x421 /
740x428 native px) — so this round measures and clips EACH card
separately instead of reusing one shared quad the way the old single
feature-frame.webp did. Method unchanged from the original clip-path
note above: PIL flood-fill from the cream interior's own center pixel
(tolerance 25 per channel, stops cleanly at the saturated yellow trim),
then the mask's own extreme corners (max/min of x+y and x-y) give the
quad. Same baked-opaque-interior finding re-verified for this new art
(center-pixel alpha ~253, not a transparent hole) — media still paints
ON TOP of the frame art, clipped to the quad, same as the block above.
These three ID-scoped rules override the shared .feature-shot/
.feature-shot-inner rules above (ID + class beats class alone on
specificity, regardless of source order). */
#feature-own .feature-shot { aspect-ratio: 720 / 421; }
#feature-own .feature-shot-inner {
clip-path: polygon(18.47% 16.86%, 92.78% 16.63%, 77.50% 94.06%, 4.44% 94.06%);
/* STABLE-GRID round (2026-08-17): card 01 swapped to the owner's
"YOUR STABLE" roster capture (feature-own-v2.webp, 1280x800) — the
six-card horse grid is the star (owner: "the six visible horse cards
are the star"), the banner secondary. Old 9%/17% padding was tuned
for a DIFFERENT source image at a DIFFERENT aspect ratio (900x563)
and doesn't carry over — re-measured against this capture the same
way as card 02's own HORSE-SHOT round (simulating the exact
cover+clip-path math against the real rendered box size, proven
scale-invariant across card widths). 7% left is the sweet spot: at
0% the banner survives partially (still unsafely, letters cut) but
"Bay Slender"'s B and the sort control's name are clipped; above 7%
the LEFT gain starts costing the RIGHT edge instead — at 8%+ the
third card's own name ("Black Slender") starts losing its last
letter to the frame's right-side diagonal, which is a worse trade
since a card name is star content and the sort dropdown's label is
not. At 7%, all SIX horse names (Bay Slender/Bay Standard/Black
Slender on the visible top row, Chestnut Slender/Chestnut Standard/
Gray Slender's horses on the second row) read clean; the "YOUR
STABLE" banner and HORSES/STATS tab strip crop away entirely (no
partial letters — the owner's own sanctioned fallback: "if it can't
sit safely, prefer the grid and let the banner crop"), and the
second row's own name plates crop at the box's flat bottom edge
(not the diagonal) since only ~2 rows fit vertically — a clean
horizontal cut, not a letter-eating one. */
padding: 0 0 0 7%;
}
#feature-train .feature-shot { aspect-ratio: 724 / 421; }
#feature-train .feature-shot-inner {
clip-path: polygon(18.92% 16.63%, 92.82% 16.63%, 77.76% 93.82%, 4.70% 94.06%);
/* HORSE-SHOT round (2026-08-17): card 02 swapped to the owner's
"BAY STANDARD" capture (feature-train-v3.webp) — a richer Overview
shot with the 3D horse standing beside the stat panel, the horse
being the whole reason for the swap (owner: "the horse is why he
chose this shot"). Re-measured against THIS composition rather than
reusing the old nudge-tl class (tuned for a different source image
and a different problem — that value assumed the frame renders near
its own 724x421 native size, which it never does; object-fit: cover
scales against the box's REAL rendered pixel size vs. the source's
1280x800, so the crop math had to be re-derived against the actual
measured box (243x141 at the 1280px card row, 350x203 at 390px
phone width) — proven scale-invariant between them by an independent
Python simulation of the exact cover+clip-path math, so one padding
value covers every width). FULL TRADE-OFF (there is no padding value
that keeps every word AND the whole horse — the frame's own diagonal
and the box's narrow aspect fight over the same pixels): 9% left
inset is the measured sweet spot — the POWER panel (all 7 stat-row
labels, letter grades, bars, values) and the full radar read
perfectly clean, and the horse's head/neck/most of its body stays
visible on the right. Below ~7% the crop is width-driven (more
horse) but the diagonal eats into the POWER row labels/grades
mid-word; above ~13% the APTITUDES section's own text clears too,
but the horse shrinks to an unrecognizable sliver, defeating the
swap's own purpose. At 9%, the APTITUDES heading and RUNNING STYLE
label do lose their first few letters (an accepted secondary loss —
unlike POWER, that panel wasn't the reason for this swap); the
masthead, tabs, and CAREER strip crop away entirely, both blessed
by the owner's own framing note. */
padding: 0 0 0 9%;
}
#feature-race .feature-shot { aspect-ratio: 740 / 428; }
#feature-race .feature-shot-inner {
clip-path: polygon(19.46% 16.36%, 92.97% 16.36%, 77.30% 94.16%, 4.73% 94.16%);
}
/* CORNER-CLIP FIX (2026-08-16): card 02's screenshot (feature-train.webp)
has its own in-game header text sitting close enough to the source
image's top-left that the shared quad clip-path above (whose TL corner
sits at ~15%/18%, not 0/0) cut the header's first letter — "BRIGHT
LEDGER" read as "RIGHT LEDGER" (owner-reported defect). Rather than
touch the shared clip polygon/frame art (correct, just verified) or
the shared object-position recipe (fine for cards 01/03, whose own
in-frame content doesn't sit in that corner), this card-specific
modifier insets the image within the quad — the vacated corner shows
the SAME cream (#f9efe0) the mat/inner background already paints, so
the inset reads as part of the card, not a bug — until the header
clears the diagonal with margin. Percentages (not px) so the nudge
scales with the fluid .feature-shot box at every viewport. */
.feature-shot-inner--nudge-tl {
/* re-measured against the new frame-02 quad (NUMBERED-FRAME round): the
old 8%/12% cleared the new diagonal edge by only ~1.4 percentage
points where "BRIGHT LEDGER" sits — bumped for real margin, verified
live against the rendered header text rather than trusted from the
arithmetic alone. */
padding: 10% 0 0 15%;
}
.feature-desc {
font-family: var(--font-body);
/* CAPTION-BOLD round (2026-08-18, owner verbatim: replaced the old
two-line prose captions with one plain sentence each, "all needs to
be bold and a bit bigger font"): 500 -> 700 (a real bold weight, not
a synthetic one — var(--font-body) ships a 700 cut elsewhere on this
page already) and every font-size below (base + the >=768px tier
override further down) scaled up ~17.5% (splitting the owner's own
"~15-20%" bracket) — 12/1vw/13.5 -> 14.1/1.175vw/15.86,
12.5/0.85vw/14 -> 14.7/1vw/16.45. Verified live: hero->features gap
(unrelated measurement point, .features padding-top to the first
card's own top edge) unchanged; page height at 1280 grew <2px; no
caption wraps past 2 lines at 390px, still centered. */
font-weight: 700;
font-size: clamp(14.1px, 1.175vw, 15.86px);
line-height: 1.4;
color: var(--ink-soft);
/* CENTER-CAPTIONS round (2026-08-18, owner crop of card 03's caption
sitting left-aligned under its photo: "all these description should
be center and middle"): DESKTOP+TABLET tier (>=768px, unified poster
canvas band) had no text-align at all here, so it fell back to the
UA default (left/start) — the phone-tier override two rules down
(`@media max-width:767px`) already centered it, this just brings the
base rule to the same value so it's identical at every width instead
of only below 768px. `.feature-desc` is a flex child of
`.feature-card` (column flex, default align-items:stretch), so it
already spans the card's full column width — text-align:center here
centers the two-line block as a unit within that width with no
extra margin/width rule needed, and survives the poster-scale
transform unchanged since a uniform scale never disturbs in-box
alignment. */
text-align: center;
}
/* =========================================================================
CLOSING / FOLLOW BAND
========================================================================= */
/* COMPACT-CLOSING round (2026-08-17, owner crop of his reference: "make
sure it's as compact and pixel design as the sample" — one tight
horizontal row). SLIM-STRIP round (2026-08-17, same day, owner
verbatim, with a crop of the post-bake band: "make this section as
narrow (vertically) as possible. no need box for each of the social
media, can just follow exactly what we have on top, follow us arrow
and logos") — supersedes COMPACT-CLOSING's own outlined-card language
for the social row entirely (see .closing-follow-cluster below); the
padding here is trimmed a further step past that round's own numbers
now that the row is genuinely just headline+caption on the left and a
bare icon row on the right, no card chrome to clear. */
/* THREE-ZONE round (2026-08-17, owner live-correction: "Title, then Get
dev update...next, then logo. use the whole width") — space-between
spread the three zones (title / caption / follow cluster) across the
band's full width. SUPERSEDED by the THREE-ZONE-RESTACK round
(2026-08-18, owner: "move the follow us and social media icons to the
middle. move © 2026 Paka Derby... all the way to the right"): the
caption is gone (index.html) and the follow cluster now needs to sit
at the band's true horizontal CENTER, not just "whatever's left after
space-between spreads 3 unequal-width zones" — with .closing-left
(logo+headline) far wider than the new lone-copyright right zone,
plain `justify-content: space-between` would leave the center zone
visibly off-center (pulled toward the wider left zone). Switched to a
3-column GRID (`1fr auto 1fr`) instead: the two flexible outer tracks
are always equal width regardless of their content's size, so the
`auto`-width center column is always geometrically centered on the
band — each zone then self-aligns within its own column
(`justify-self` on `.closing-left`/`.closing-center`/`.closing-right`
below) rather than relying on flex distribution. */
.closing {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: clamp(14px, 2vw, 26px);
/* NO-SCROLL-800 round (2026-08-18) — REVERTED same day per owner: "revert.
it you still needa maintain the gap between sessions." Back to the
SLIM-STRIP round's own clamp(8px,1vh,12px); the tighter value crowded
the band against the captions above once seen live. Content (logo/
text/socials/copyright) is untouched, this is padding only. PHONE
(max-width:767px) keeps its own separate `.closing` override further
down, unaffected. */
padding: clamp(8px, 1vh, 12px) var(--edge-pad);
background: var(--paper-2);
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
position: relative;
overflow: hidden;
}
/* BOTTOM-RIGHT gesture (the fifth and last of the page's 5 large
gestures) — the owner's yellow/black corner-brush sheet element,
tucked into the closing band's own right corner. It's the page
corner's own art, not part of the band's content row — untouched by
the SLIM-STRIP round's content changes. */
.closing-corner-brush {
position: absolute;
pointer-events: none;
z-index: 0;
width: 130px;
height: auto;
bottom: -14px;
right: -14px;
opacity: 0.95;
/* BUGFIX (2026-08-16, stray-mark round): the sheet's own thin top-left
motion-line accent reached up and left far enough to sit ON TOP of
the old closing-right copy (contrast law: never behind text) — that
copy is gone now (SLIM-STRIP round), but the clip stays since it's
a correct trim of the art regardless. */
clip-path: inset(15% 0 0 0);
}
.closing-left, .closing-center, .closing-right { position: relative; z-index: 1; }
/* BAKE ROUND 3 (2026-08-17) — FOOTER RETIREMENT: .closing-left is now a
logo+text ROW (was text-only) — the retired footer's logo moves in
here per the owner's own saved arrangement (his crop: logo far left,
then the headline stack). Content-sized, anchored to its own grid
column's start edge (THREE-ZONE-RESTACK round: `justify-self` replaces
the old space-between flex distribution — see .closing's own comment). */
.closing-left {
justify-self: start;
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
}
/* Same image, same aspect (397:280) as the retired footer's own logo.
OWNER CORRECTION (2026-08-17, live review of a first pass that put
this at real height matching a literal reading of his saved 1.3x
scale override composed against the OLD dark-footer's 30px logo,
applied to the WRONG base and rendered enormous): "his editor's 1.3
scale was relative to the small FOOTER logo — i.e. still small" — a
small mark that fits inside the slim band's own height, not a
redesign of the band. 34px keeps it modest, matching the caption/
headline's own small scale rather than the top navbar's much bigger
logo. */
.closing-logo { height: 34px; width: auto; flex: 0 0 auto; }
/* FOOTER-CONSTANT-SIZE round (2026-08-18, owner: "the footer keep
shrinking, which creating a lot of empty space at the bottom. how can
we force that always footer is footer and fix the sizing?"). ROOT
CAUSE was two-fold — see .app-shell's own comment for the "empty
space" half; this half is the "shrinking" itself: `.closing-logo`/
`.closing-left-text .display`/`.closing-follow-cluster`'s own label
and icons were all sized with `vw`-relative clamps (or, for the logo,
a single flat desktop value that a narrower 768-1023px sub-range then
overrode SMALLER to avoid a real "FOLLOW THE BUILD"/"FOLLOW US"
overlap found live in the THREE-ZONE-RESTACK round) — genuinely
different rendered sizes at 920px vs 1236px, exactly the
inconsistency reported. FIX: freeze every one of these to ONE flat
px value, used at EVERY width from 768px up (replaces BOTH the old
flat-but-different desktop value AND the separate 768-1023 shrink
exception below with a single constant) — chosen as the SMALLEST of
the two prior values (the ones already proven, live, to fit at the
narrowest 768px width without collision), so "constant" and "never
overlaps" both hold at once: whatever fits at 768px necessarily fits
at every wider desktop/tablet width too (more track space, not
less). Verified live at 768/920/1236/1280/1920px: identical rendered
footer height and identical logo/label size at all five, zero
overlap. Tablet/phone (<768px) keep their own separate, already-
independently-tuned rules untouched. */
.closing-left-text { display: flex; flex-direction: column; min-width: 0; }
.closing-left-text .display { display: block; font-size: clamp(14px, 1.5vw, 19px); }
.closing-left-text .l1 { color: var(--ink); }
/* red-dark, not red: at this headline's rendered size (well under the
18.66px/bold WCAG "large text" floor at most widths) plain red measured
3.67:1 against the paper ground — under the 4.5:1 AA floor. red-dark
clears it with margin at every clamp size. */
/* THREE-ZONE-RESTACK round (2026-08-18): l1 already carried its own
`white-space: nowrap` inline style (index.html, BAKE ROUND 2's "make
them one line" ruling), but l2 never got the same — harmless while
the desktop-tier grid track had room to spare, but at the tighter
768px end .l2 (no nowrap) silently WRAPPED to two lines ("FOLLOW
THE" / "BUILD") instead of overflowing visibly, and — since a
flex/grid item's own auto-width sizing shrinks toward its
min-content once its max-content no longer fits the assigned track —
that wrap shrank `.closing-left-text`'s own box down near l2's
SHORTEST wrapped line's width, while the wrapped "FOLLOW THE" line
itself stayed at its own true (wider) rendered width and spilled
past that shrunk box, overlapping `.closing-center`'s "FOLLOW US"
text. Matching l1's nowrap here removes the ambiguity that let this
happen: both lines are always exactly as wide as their own text, so
the column sizes to fit them for real. */
.closing-left-text .l2 { color: var(--red-dark); font-size: 1.15em; white-space: nowrap; }
/* BAKE ROUND 3: folds in the owner's saved "closing-headline-1"/
"closing-headline-3" tweaks (translate only) — composed additively
into left/top, real position, no interaction with the shared .display
class's own skewX(-8deg) scaleX(0.93) base transform (pure translate,
no new rotate/scale from either round). */
/* BAKE ROUND 3's closing-headline-1/3 position nudges below are
DESKTOP-TIER ONLY (measured at 1280px, per that round's brief) —
live in the @media (min-width: 768px) block further down so they
don't leak a desktop-sized px offset into the tablet/phone
single-column stack. THREE-ZONE-RESTACK round (2026-08-18) REMOVED
this same block's sibling caption-closing/closing-follow-cluster
nudges (see .closing-right/.closing-follow-cluster below) — both
were baked translate offsets tuned for the retired space-between
layout and would have fought the new grid centering. */
/* THREE-ZONE-RESTACK round (2026-08-18, owner: "remove 'Get dev
updates...' ... move © 2026 Paka Derby... all the way to the right")
— supersedes the THREE-ZONE/BAKE-ROUND-3 .closing-middle (caption +
copyright column, centered between title and follow cluster):
renamed .closing-right, caption removed (index.html), holds ONLY the
copyright line now, anchored to its own grid column's end edge
(`justify-self: end` — the band's real right content edge, same as
.closing's own padding). No more max-width cap needed — a single
short line never threatens to crowd a neighbor the way the old
caption+copyright column could. */
.closing-right {
justify-self: end;
min-width: 0;
}
.closing-desc {
font-size: clamp(10.5px, 0.82vw, 12px);
color: var(--ink-soft);
font-weight: 500;
line-height: 1.3;
}
.closing-copyright {
font-size: 9.5px;
color: var(--ink-soft);
opacity: 0.65;
font-weight: 500;
line-height: 1.3;
text-align: right;
}
/* THREE-ZONE-RESTACK round (2026-08-18): the follow cluster moves from
the band's right edge to its true horizontal CENTER — `justify-self:
center` on its own grid column (see .closing's own comment for why a
grid column, not flex space-between, is what makes this an actual
center rather than "wherever space-between happens to leave it"). */
.closing-center {
justify-self: center;
display: flex;
align-items: center;
min-width: 0;
}
/* Reuses the top navbar's exact .nav-follow-cluster/.nfc-label/.nfc-arrow/
.nav-social/.social-icon recipe (one shared component — see the NAV
section above for the base rules) instead of a second bespoke one.
Sized up one step from the navbar's own 46px icons ("similar or
slightly larger scale") since this sits in a more spacious band.
BAKE ROUND 3: folds in the owner's saved "closing-follow-cluster"
tweak (translate only) — real position offset, additive (no prior
transform on this element to interact with). */
.closing-follow-cluster {
gap: 10px;
}
.closing-follow-cluster .nfc-label { font-size: clamp(13px, 1.15vw, 16px); }
.closing-follow-cluster .nfc-arrow { width: 22px; }
.closing-follow-cluster .nav-social { gap: 10px; }
.closing-follow-cluster .nav-social a { width: 50px; height: 50px; }
/* THREE-ZONE-RESTACK round (2026-08-18): at the narrow end of the
768-1100px tablet band, this full 50px desktop icon size (plus
.closing-left's now-centered, still `white-space: nowrap` headline —
see index.html's own BAKE ROUND 2 comment for why that stays one
line) genuinely doesn't fit inside the grid's `1fr` left/center/right
split: measured live at 768px, the center column's own max-content
width left the left column's real `1fr` share ~30px too small for
its nowrap text, so "FOLLOW THE BUILD" visibly overlapped "FOLLOW
US" — a real paint collision, not just a tight fit. Shrinking the
cluster specifically over this narrower sub-range frees enough grid
space for both outer columns to fit their own content without
wrapping/colliding (verified 0 overlap at 768px after this change);
desktop (>=1101px) keeps the full 50px size untouched — it was never
short on room there (checked: >=270px of slack on both outer tracks
at 1101px+). */
/* FOOTER-CONSTANT-SIZE round (2026-08-18, owner: "the footer keep
shrinking, which creating a lot of empty space at the bottom. how can
we force that always footer is footer and fix the sizing?" — see
.closing-logo's own comment above for the full root-cause story).
WIDENED from the old `(min-width:768px) and (max-width:1023px)`
sub-range to plain `(min-width:768px)` — applies at EVERY desktop/
tablet width now, not just the narrow band that originally forced
this shrink. That narrow-band fix is exactly what makes this safe to
widen: these are the SMALLEST sizes already proven, live, to fit at
768px without the "FOLLOW THE BUILD"/"FOLLOW US" collision the
THREE-ZONE-RESTACK round found — a size proven to fit the tightest
track fits every wider one too, so applying it everywhere ≥768px
makes the whole band read as one constant size instead of visibly
regrowing past 1023px into the old separate (and vw-relative, non-
constant) desktop values. Also drops the old standalone `.closing-
logo{height:45.9px}` desktop-only bake above (BAKE ROUND 6's 1.35x
scale) — superseded by this round's own explicit "constant, proven-
to-fit" ruling. Verified live: identical closing-band height and
identical logo/label/icon sizes at 768/920/1236/1280/1920px. */
@media (min-width: 768px) {
.closing-follow-cluster { gap: 6px; }
.closing-follow-cluster .nfc-label { font-size: 13px; }
.closing-follow-cluster .nfc-arrow { width: 16px; }
.closing-follow-cluster .nav-social { gap: 6px; }
.closing-follow-cluster .nav-social a { width: 34px; height: 34px; }
.closing { gap: 14px; }
/* Even with the cluster shrink above, a live pixel check at 768px
still showed "BE PART OF THE JOURNEY" visually reaching into
"FOLLOW US"'s own space. MEASUREMENT GOTCHA (first attempt tried
raising `.closing`'s own grid `gap` here — reverted, it had ZERO
effect: in a `1fr auto 1fr` grid the two flexible outer tracks
absorb a bigger gap by shrinking their OWN track width by roughly
the same amount the gap grew, since `.closing-left`/`.closing-
right` use `justify-self: start/end` — i.e. they size to their own
CONTENT, not their track — so the content's rendered right edge
never actually moved; confirmed live via `getComputedStyle(...)
.gridTemplateColumns` before/after, byte-identical resulting
`.closing-center` position both times). The real fix has to shrink
the CONTENT itself: `.closing-left`'s own natural width (logo +
gap + headline text) genuinely doesn't fit its ~194px track at
768px real content width ~220px, a ~26px overflow the layout only
gets away with because the gap (which the content overflows INTO)
happens to be wide enough — real but fragile margin, not "fits."
Trimmed the logo/gap/type scale a step at this narrow sub-range
(desktop >=1101px keeps its own full sizing, untouched) — verified
live afterward: real ~18px of clearance between the two zones. */
.closing-logo { height: 38px; }
.closing-left { gap: 10px; }
.closing-left-text .display { font-size: 12.5px; }
}
/* =========================================================================
FOOTER — RETIRED (BAKE ROUND 3, 2026-08-17)
The dark .site-footer band (.footer-brand/.footer-links/.footer-copy)
is gone — its markup was removed from index.html (see that file's own
comment) and its rules removed here with it: the closing band above is
now the last section on the page and doubles as the footer (logo +
copyright folded in, see .closing-left/.closing-logo/.closing-copyright
above). Nothing below this comment references .site-footer/.footer-*
anymore.
========================================================================= */
/* =========================================================================
OVERLAYS — ROADMAP / FAQ panels (UNREACHABLE since BAKE ROUND 3 — see
the footer-retirement comment above; markup/CSS kept on disk per the
verify-before-delete convention)
========================================================================= */
.overlay {
position: fixed;
inset: 0;
z-index: 100;
display: none;
}
.overlay.is-open { display: block; }
.overlay-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 15, 10, 0.6);
}
.overlay-panel {
position: relative;
z-index: 2;
max-width: 620px;
width: min(92vw, 620px);
max-height: 84vh;
overflow-y: auto;
margin: 6vh auto 0;
background: var(--paper);
border: 4px solid var(--ink);
border-radius: 14px;
box-shadow: var(--shadow-ink);
padding: 26px 26px 30px;
}
.overlay-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
border-bottom: 2px solid var(--line);
padding-bottom: 12px;
}
.overlay-head .display { font-size: clamp(22px, 3vw, 30px); color: var(--red); }
.overlay-close {
background: var(--paper-2);
border: 2px solid var(--ink);
border-radius: 999px;
width: 36px; height: 36px;
cursor: pointer;
font-size: 18px;
line-height: 1;
flex: 0 0 auto;
}
.overlay-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.overlay-body h3 {
font-family: var(--font-display);
font-style: italic;
font-weight: 900;
text-transform: uppercase;
color: var(--ink);
font-size: 14px;
margin: 18px 0 6px;
}
.overlay-body h3:first-child { margin-top: 0; }
.overlay-body ul { margin: 6px 0 0; }
.overlay-body li {
padding: 6px 0 6px 20px;
position: relative;
border-bottom: 1px dashed var(--line);
}
.overlay-body li::before {
content: '';
position: absolute;
left: 0; top: 14px;
width: 8px; height: 8px;
background: var(--gold);
border: 1.5px solid var(--ink);
border-radius: 2px;
}
.roadmap-status {
display: inline-block;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
border: 1.5px solid var(--ink);
margin-left: 8px;
vertical-align: middle;
}
.roadmap-status.now { background: var(--gold-2); }
.roadmap-status.next { background: var(--paper-2); }
.roadmap-status.later { background: transparent; opacity: 0.7; }
/* =========================================================================
LAYOUT TIERS
========================================================================= */
/* DESKTOP — hero DOMINATES, page scrolls modestly (owner revision
directive, 2026-08-16, supersedes the earlier "genuinely no-scroll"
rule below): the hero is pinned to 55-65% of the viewport height as a
poster composition in its own right, everything else flows in normal
document order beneath it. Total page height at the matrix's tightest
point (1280x800) lands ~1.4-1.5 viewports — hero dominates screen one,
features + a compact community/footer occupy screen two. Never shrink
the hero or the screenshots back down to force no-scroll again — that
was the exact mistake this directive corrects. */
@media (min-width: 768px) {
main { display: block; }
.hero {
height: 60vh;
min-height: 460px;
align-items: center;
/* UNCUT-ART round: was `overflow: hidden` (both axes) — clipped the
top-left corner-brush art's own top edge here too (same bug as the
base .hero rule above; this desktop-only block was overriding it).
overflow-x only, so nothing placed bleeds top/bottom again. */
overflow-x: clip;
}
.hero-left { min-height: 0; justify-content: center; }
/* SIZE-BACK-UP round (2026-08-17, owner spec hero-video-panel-spec.md
"Hero placement": "55-65% of hero width... extending strongly toward
the right side, visually approaching the right edge. Not centered
like a normal card... Much larger than the current implementation" —
SUPERSEDES the 2026-08-17 VIDEO-75% round entirely (both its shrink
to 69%-of-column below AND its flex-end -> center recompose here).
Back to flex-end so the panel pushes toward .hero-right's own right
edge instead of floating centered with equal gaps either side. */
.hero-right { min-height: 0; height: 100%; align-items: flex-end; justify-content: center; }
/* width-driven, not height-driven: a fixed % of the COLUMN keeps the
video at a constant share of the whole hero's width (see the base
rule's own comment). .hero-right is 65% of the hero's own width
(flex: 65 1 0%, see .hero-right's base rule), so 90% of THIS column
≈ 58.5% of the whole hero width — mid-band of the spec's 55-65%
target, comfortably "dominant." */
/* BAKE ROUND (2026-08-17): folds in the owner's saved "hero-video"
tweak (translate only, no rotate/scale — position: relative move
rather than a transform, per the panel's own NO-ROTATION law). */
/* BAKE ROUND 2 (2026-08-17): folds in the owner's saved "hero-video"
tweak (translate + scale, no rotate) — supersedes the round-1 values
directly above (this round's numbers already compose both rounds). */
/* BAKE ROUND 3 (2026-08-17): folds in the owner's saved "hero-video"
tweak (scale 0.95, translate [-42.85, 8.89]) — supersedes round-2's
numbers directly above (composes both rounds). Scale baked into real
width (94.5% x 0.95 = 89.775%, same %-of-column convention). GOTCHA
found live-verifying against the tweak-editor's own rendered rect at
1280px: a real width shrink re-anchors from THIS element's own right
edge (flex/relative-position box model), not from its visual center
the way transform:scale does — so the naive "right += 42.85" estimate
landed 17.4px short. Corrected by measuring the actual residual
against the tweak-editor's rendered position and folding it in
(right: 67.89px, not 50.51px) — bottom's own -8.89 math had no such
anchor mismatch and needed no correction. */
/* BAKE ROUND 4 (2026-08-17): folds in the owner's saved "hero-video"
tweak (scale 0.9, translate [47.4609375, -5.87109375]) — supersedes
round-3's numbers directly above (composes both rounds). Scale baked
into real width (89.775% x 0.9 = 80.7975%, same %-of-column
convention as every prior round). Live-verified against the
tweak-editor's own rendered rect at 1280px (the SAME "real-width
re-anchors from the right edge, not the transform's visual center"
gotcha round-3 found): the naive dx/dy-only correction would have
landed short again, so right/bottom were solved from the actual
post-scale-then-translate target box (round-3's own box scaled 0.9
about its center, then shifted by the override's dx/dy) rather than
estimated — right: 53.4px (not round-3's 67.89 plus a flat dx),
bottom: 26.75px (not round-3's 20.86 plus a flat dy). Candidate CSS
reproduced the target box to sub-pixel precision (0.01-0.04px) in a
live DOM check before this was committed. */
/* BAKE ROUND 6 (2026-08-17): folds in the owner's saved "hero-video"
tweak (scale 0.95, translate [-47.1015625, -18.5234375]) — supersedes
round-4's numbers directly above (composes both rounds). Scale baked
into real width (80.7975% x 0.95 = 76.757625%, same %-of-column
convention as every prior round). SAME re-anchor gotcha as rounds 3/4
(a real width shrink re-anchors from this element's own right edge,
not the transform's visual center) — solved by live DOM measurement
rather than estimation: rendered the owner's saved override live
(getBoundingClientRect target box) and rendered a candidate
width-only box (no right/bottom) at the same widths, then solved
right/bottom as the exact px gap between the two. Measured at 1280px
(right_needed 115.53px, bottom_needed 45.28px) and independently
re-measured at 1440/1512px landing within ~2.8px of the same numbers
(115.53-118.34px right / 45.27-45.28px bottom — the small spread is
expected: these are fixed-px offsets against a %-width column that
itself grows with viewport, same as every prior round's own "verified
holding" language, not exact equality). */
.hero-video-wrap { width: 76.757625%; position: relative; right: 115.53px; bottom: 45.28px; }
/* BAKE ROUND (2026-08-17): folds in the owner's saved "hero-headline"
tweak — scale 1.55 baked as a real font-size increase (never a
transform:scale on text), translate baked as a real position offset,
rotate -4deg baked as a real rotation on top of the block's own
-3deg tilt (matches exactly how his override, applied to this same
element, composed with the block's pre-existing tilt). Desktop-tier
only — see .hero-kicker's own base-rule comment for why. */
/* BAKE ROUND 2 (2026-08-17): folds in a second owner-saved "hero-
headline" tweak on top of round 1 (translate + rotate, no new scale
this round). Live-verified the composed transform actually rendered
— the round-1 rotate(-4deg) is superseded by this round's own
rotate(-1.5deg) (the two don't visually stack; his edit session
re-set the rotation outright), scaleX(1.1) unchanged. */
/* BAKE ROUND 3 (2026-08-17): folds in the owner's saved "hero-headline"
tweak (translate [31.29, 15.54], scale 1.05, no new rotate) — the
override's uniform scale commutes cleanly with the existing rotate/
scaleX (live-verified: composed matrix decomposes to the SAME
rotate(-1.5deg)/scaleX(1.1) plus a flat 1.05x, not a new angle), so
it's baked as a straight 1.05x on the font-size clamp (87/155 ->
91.35/162.75, vw term 10.85 -> 11.3925) with rotate/scaleX untouched;
translate composed additively into left/top (real position, no
nested transform on this element to fight). */
/* BAKE ROUND 4 (2026-08-17): folds in the owner's saved "hero-headline"
block tweak (translate [-31.58203125, -32.96484375], scale 0.9, no
new rotate) TOGETHER with the two per-line "hero-headline-line1"/
"hero-headline-line2" tweaks (scale 1.15 each, own small translate
each) — all three saved the same editor session, all read against
THIS round-3 baseline. Per the round's own instruction: the SCALE
portions net into ONE font-size multiplier (0.9 block x 1.15 line =
1.035) applied to .hero-kicker's own font-size clamp — since .l1/.l2
are sized in `em` off this element (0.52em/1em, WIDTH-MATCH round),
scaling the parent clamp scales both lines by the identical factor,
so their ratio (and therefore SOON-vs-COMING legibility) survives
unchanged (91.35/11.3925/162.75 x 1.035 = 94.55/11.7917/168.45).
The block's own translate composes additively into left/top, same
convention as every prior round (122.57-31.58=90.99,
-11.72-32.96=-44.68); rotate/scaleX untouched (no new rotate in this
override). Each line's own small translate is baked separately as
its own position:relative left/top directly on the .l1/.l2 span
rules below (own small nudge on top of the shared parent move). */
/* BAKE ROUND 6 (2026-08-17): folds in a fifth owner-saved "hero-headline"
tweak (translate [27.9296875, 14.3203125], rotate -1, no new scale —
ov.scale defaults to 1, so no scale() function is inserted this
round) TOGETHER with its own "hero-headline-line2" tweak (translate
only, no rotate/scale). Block: since no scale is introduced, the new
rotate(-1deg) sits immediately next to the existing rotate(-1.5deg)
with nothing between them — adjacent same-type transforms always
multiply to a single combined rotation regardless of what's further
right (scaleX(1.1) unaffected): -1.5 + -1 = -2.5deg. translate stays
outermost (leftmost in the apply() chain) so it composes additively
into left/top exactly as every prior round, unaffected by the inner
rotate: 90.99+27.9296875=118.9196875, -44.68+14.3203125=-30.3596875.
Line 2: no rotate/scale in its own override either, so its translate
is a plain additive add onto its existing left (no prior top) —
6.61+3.49609375=10.10609375 left, 0+(-18.515625)=-18.515625 top. */
.hero-kicker {
font-size: clamp(94.55px, 11.7917vw, 168.45px);
line-height: 0.86;
position: relative;
left: 118.9196875px;
top: -30.3596875px;
transform: rotate(-2.5deg) scaleX(1.1);
}
.hero-kicker .l1 { position: relative; left: 6.99px; top: -6.79px; }
/* BAKE ROUND 9 (2026-08-19): folds in the owner's saved "hero-headline-
line2" tweak (translate [7.156660182243419, 2.07045623454208], no
scale/rotate). `.hero-kicker .l2` carries no `transform` of its own
(only the shared `.display` class's skewX(-8deg) scaleX(0.93) —
matrix-confirmed: the override-active live matrix's linear part
(0.93, 0, -0.140541, 1) is exactly that shared base, untouched), so
the pure translate composes additively into left/top with zero
coupling (translate is always the outermost/last-applied operation
regardless of any skew/scale beneath it — live-matrix-confirmed:
10.10609375+7.156660182243419=17.262753932243418,
-18.515625+2.07045623454208=-16.44516876545792). */
.hero-kicker .l2 { position: relative; left: 17.262753932243418px; top: -16.44516876545792px; }
/* BAKE ROUND 2: folds in a second owner-saved "hero-subhead" tweak —
same method, same "rotation re-set rather than stacked" finding as
hero-kicker above (round-1's rotate(-3.5deg) superseded by this
round's rotate(-0.5deg); skewX(-6deg) unchanged). */
/* BAKE ROUND 3: folds in the owner's saved "hero-subhead" tweak
(translate only, no new scale/rotate) — composes additively into
left/top (live-verified: the override's own rotate=0/scale=1 leaves
the composed matrix identical to the existing rotate(-0.5deg)
skewX(-6deg), only the position moves). */
/* BAKE ROUND 4: folds in the owner's saved "hero-subhead" tweak
(translate [37.85546875, -47.96484375], scale 0.95) — same method as
the headline above: scale baked as a real font-size multiplier
(14.3/1.155/17.6 x 0.95 = 13.59/1.0973/16.72), translate composed
additively into left/top (65.32+37.86=103.18, -2.72-47.96=-50.68);
rotate/skew untouched (no new rotate in this override). */
.hero-sub {
font-size: clamp(13.59px, 1.0973vw, 16.72px);
position: relative;
left: 103.18px;
top: -50.68px;
transform: rotate(-0.5deg) skewX(-6deg);
}
/* BAKE ROUND 2 ADDENDUM: folds in the owner's saved "headline-streak"
tweak (translate/scale/rotate) on top of the round-1 placement. */
/* BAKE ROUND 3: folds in the owner's saved "headline-streak" tweak
(translate only) — composes additively into left/top (base transform
is a bare rotate(3.5deg), no scale/skew to interact with; live-
verified the override carries no new rotate either, so rotation
stays untouched). */
/* BAKE ROUND 4 (2026-08-17): folds in the owner's saved "headline-
streak" tweak (translate [56.20703125, 188.18359375], rotate -2) —
owner moved it DOWN behind the subhead/value zone, his call, kept
as-is (still the same whole-art element: position + rotate only, no
scale, so the "keep whole-art" convention holds unchanged). Translate
composes additively into left/top (230.57+56.21=286.78,
-40.31+188.18=147.87); rotate composes additively onto the existing
rotate(3.5deg) (3.5 + (-2) = 1.5deg, no scale/skew in this transform
to interact with). */
.hero-headline-streak {
display: block;
position: absolute;
left: 286.78px;
top: 147.87px;
width: 352px;
height: auto;
transform: rotate(1.5deg);
transform-origin: left center;
pointer-events: none;
z-index: 0;
}
.hero-left { gap: clamp(14px, 1.8vh, 24px); }
/* COORDINATOR FIX (2026-08-16, item 2): hero-left is vertically CENTERED
in the 60vh hero box, and the headline's own font-size grows with vw —
so as the viewport widens, the enlarged logo (now capped, see
.nav-brand-logo above) stays pinned near the nav while the headline
block's top edge climbs UPWARD (the taller block re-centers), closing
the gap and eventually overlapping. Measured live across 1101-1512px:
un-margined gap went from +40px at 1101 to -14px at 1512 (real
overlap, not an illusion). A fixed desktop-only margin-top pushes the
whole tilted block down enough to clear the logo at the WORST case
(1512px) with room to spare, re-verified by the same measurement at
every 40px step across the full range (see scratch-verify's
verification script) — never touches the tablet/phone stack, where
the logo is small and this never happens. */
.hero-headline-block { margin-top: 34px; }
/* BAKE ROUND 2 (2026-08-17, owner: "for these hero elements, move up a
bit" — crop showed the value-points row and the CTA). His saved
hero-subhead tweak (baked above) moves the subhead DOWN ~29px net;
this closes part of that gap from below by pulling the value-points
row up 20px (within his ~16-24px ask), and since .hero-left is a
flex column, the CTA that follows it in normal flow moves up by the
same amount for free. GOTCHA found live: .hero-left is vertically
CENTERED (justify-content: center) — shrinking the gap above
.hero-features alone shrinks the column's total content height,
which re-centers the WHOLE group and silently drags the headline
block (above .hero-features) down by half the delta, undoing part
of his own subhead placement. Fixed by giving the space back at the
BOTTOM of the column (.hero-cta's own margin-bottom) so total
content height — and therefore the centered group's overall
position — stays unchanged; only the internal spacing shifts. */
/* BAKE ROUND 4 (2026-08-17) — VIDEO-BOUND ROUND, owner's written
instruction (crop showed the value-points row + CTA): "these section,
make them a bit smaller and move up. better no exceed the hero video
frame." HARD CONSTRAINT: the CTA's own bottom edge (the column's
lowest element) must not sit below the hero video panel's own bottom
edge (.hero-video-wrap, post round-4's 0.9-scale bake above) at
desktop widths. Live-measured budget check found the "~10% smaller"
starting point alone couldn't close this: at 1280px the CTA's old
bottom (552.44px) sat 96px BELOW the video panel's new bottom
(456.25px) — the video panel shrank a lot more than the value-points/
CTA stack ever needed to move, so this round leans much harder on
"move up" (tightened gaps/margins) than on the size cut itself, per
the instruction's own "adjust until the constraint holds." Sizes:
value-point icons 36px -> 24px, label font clamp(9px,0.78vw,10.5px)
-> clamp(7.67px,0.665vw,8.95px) (~15%), row padding clamp(10px,
1.4vh,14px) -> clamp(2.68px,0.375vh,3.75px), item gap/divider padding
7px/10px -> 6px/8px; CTA width clamp(300px,27vw,380px) -> clamp(
205px,18.44vw,259.5px) (~32% — aspect-ratio 482:98 carries the height
down with it, so art+text shrink together and the click target stays
exactly the visible art, unchanged). GOTCHA (round-3's own lesson,
re-confirmed live): .hero-left is vertically CENTERED — the much
bigger height cut this round needed dragged the headline block down
~36px in an early pass before compensation. Same fix, scaled up:
.hero-cta's own margin-bottom absorbs the FULL height delta this
round removed from above it (20px -> 122.46px) so total column
content height — and therefore the centered group's position, the
headline included — is unchanged (live-verified: headline block's
own rect at 1280px landed back at its exact round-4 baseline,
67.52/399.33 top/bottom, to the hundredth of a pixel). Result at
1280px: CTA bottom 449.97px vs. video-panel bottom 456.25px — 6.28px
of clearance. Verified holding (CTA bottom stays at/above the video
panel's own bottom, with the same live-measurement method) at 1440px
and 1512px too — see this round's own scratch-verify report for the
exact numbers at all three widths; .hero-cta's margin-top swings
negative (8px -> -8px, the row already sits close enough beneath the
tightened value-points row that the old positive gap is no longer
needed) and .hero-left's own shared flex `gap` (used between EVERY
pair of hero-left children, headline/features/cta) is cut import-free
here as a DESKTOP-only override (14px/1.8vh/24px -> 2px/0.25vh/3.6px)
— tablet/phone keep the base gap untouched, this round is desktop-tier
scoped throughout per convention. */
.hero-left { gap: clamp(2px, 0.25vh, 3.6px); }
/* BAKE ROUND 5 (2026-08-17) — OVERLAP FIX: BAKE ROUND 4 above tightened
both gaps around .hero-features (headline->features via this rule's
margin-top, features->cta via .hero-cta's margin-top) enough that the
value-points row and the CTA art physically overlapped (measured
11.31px of overlap, identical at 1280/1440/1512 — neither gap is
vw-scaled at this tier, so the overlap doesn't vary with width
either). Fix redistributes space PURELY within the existing budget:
.hero-features's own margin-top moves 25.5px more negative (-20 ->
-45.5, closing the headline/subhead->features gap) while .hero-cta's
margin-top moves the identical 25.5px more positive (-8 -> 17.5,
opening the features->cta gap by the same amount) — the two deltas
are equal and opposite by construction, so total column content
height is unchanged (.hero-cta's margin-bottom absorber below is
untouched, still 122.46px) and the centered group's overall position
— headline included — doesn't drift, matching BAKE ROUND 4's own
margin-compensation technique. Result: feat-bottom to cta-top gap
goes from -11.31px (overlap) to +14.19px (live-verified at all three
widths), CTA's own absolute position is unchanged (the two deltas
cancel there too), so the CTA-vs-video-bottom clearance BAKE ROUND 4
measured (6.28/7.19/15.95px) is untouched and still holds. */
.hero-features { margin-top: -45.5px; padding: clamp(2.68px, 0.375vh, 3.75px) 0; }
.hero-feature { padding: 0 8px; gap: 6px; }
.hero-feature .icon { width: 24px; }
.hero-feature .label { font-size: clamp(7.67px, 0.665vw, 8.95px); }
.hero-cta { width: clamp(205px, 18.44vw, 259.5px); margin-top: 17.5px; margin-bottom: 122.46px; }
/* spec §26/directive §7: feature screenshots are the visual focus now —
no vh-clamped height ceiling, just the base 16/10 aspect-ratio at
full column width (~230-280px tall across the 1280-1512 matrix, vs.
the old 175px hard cap). */
/* BAKE ROUND 3: top padding trimmed ~8px (was clamp(28px,3.4vh,44px)) —
with the speed-stroke divider removed above, the old top gap plus the
divider's own ~20-34px visual weight is gone; this closes the resulting
hole so the hero->features transition still reads intentional on
section spacing alone, without the section starting to feel cramped
against .hero-cta above it.
GAP-HALVE round (2026-08-18, owner: "close the gap between hero and
three feature by half... the whole bottom part swift up, to make the
page even shorter" — desktop only, crop showed the hero-bottom to
feature-cards dead space). Live-measured first: `.hero-poster-outer`'s
own reserved height (`calc(480px * var(--poster-scale))`) is EXACT —
its bottom edge sits flush with `.features`'s own top edge (0px gap
between the two boxes, confirmed at 1280/1440/1920) — so none of the
visible dead space comes from the wrapper; it's 100% this padding-top
(verified live: `.feature-card`'s own top edge sits exactly
padding-top's computed value below `.features`'s box top, 23.39px at
900px-tall viewports at every one of the three widths — vh-based,
doesn't vary with poster-scale, which is what "stays proportional"
below actually verifies: same relationship as before the halving,
just at half the value). Halved in place, clamp shape preserved
(still vh-driven, same floor/ceiling ratio) so the scale-lock
behavior is unchanged, just smaller: 20/2.6vh/36 -> 10/1.3vh/18.
padding-bottom (the features->closing-band gap) is a DIFFERENT gap,
untouched per the owner's instruction scope. */
/* NO-SCROLL-800 round (2026-08-18) — REVERTED same day per owner: "revert.
it you still needa maintain the gap between sessions." The compressed
values (padding-top 6.4px, padding-bottom 10.4px at the 1280x800
reference) read too cramped against the hero video above and the
closing band below once seen live — the page scrolling slightly at
1280x800 is the accepted trade for keeping real breathing room between
sections. Back to the GAP-HALVE round's own values. */
.features { padding-top: clamp(10px, 1.3vh, 18px); padding-bottom: clamp(20px, 2.6vh, 32px); }
.feature-card { gap: 10px; }
.feature-shot { filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 4px 10px rgba(27, 22, 16, 0.22)); }
/* CAPTION-BOLD round (2026-08-18): see the base `.feature-desc` rule's
own comment for the full derivation — same ~17.5% scale-up applied to
this tier's own clamp (12.5/0.85vw/14 -> 14.7/1vw/16.45). */
.feature-desc { font-size: clamp(14.7px, 1vw, 16.45px); }
/* SLIM-STRIP round: this desktop-tier override used to ADD padding
back on top of the base rule (20-30px vs. the base's then-16px) —
directly opposed to "as narrow (vertically) as possible." Dropped;
the base .closing rule's own clamp(8px,1vh,12px) now governs at
every tier, desktop included. (Its own .site-footer companion rule
was removed in BAKE ROUND 3 along with the retired footer.) */
/* BAKE ROUND 3 (2026-08-17)'s "closing-headline-1"/"closing-headline-3"
tweaks (translate-only left/top nudges on l1/l2, ~30px/~-1px) are
REMOVED (THREE-ZONE-RESTACK round, 2026-08-18) — same reason as the
.closing-desc/.closing-follow-cluster nudges below: baked against
the old space-between layout, where .closing-left sat flush at the
band's true left edge and the headline text needed a manual +30px
nudge to clear the logo. Under the new centered composition
(`.closing-left { align-items: center; text-align: center; }`)
that same +30px offset shifts the ALREADY-centered text 30px right
of where centering puts it — confirmed live: it was landing "FOLLOW
THE BUILD" on top of the follow cluster's "FOLLOW US" at 768px, a
real paint collision, not just a tight fit. */
/* .closing-desc's own nudge and .closing-follow-cluster's -67.06px
left offset REMOVED (THREE-ZONE-RESTACK round, 2026-08-18): both
were baked against the retired space-between layout (the caption
zone existed, the follow cluster was right-anchored) — .closing-desc
no longer renders at all and the follow cluster now needs to sit
dead-center via .closing's own grid `justify-self: center`, which
an arbitrary leftover translate would have thrown off. */
}
/* =========================================================================
POSTER-SCALE round (2026-08-17) — DESKTOP+TABLET TIER (>=768px since the
BROWSER-TABLET-UNIFY round, 2026-08-18 — was >=1101px originally; see
this file's own top-of-file LAYOUT TIERS comment for the full story).
OWNER REPORT: "different size of screen show me difference result and
design" — a 1920-wide screenshot showed the whole hero composition
sitting small with big dead margins on both sides; a ~1470-wide
screenshot looked correct. ROOT CAUSE: every BAKE ROUND above measured
its numbers at the owner's own ~1280px window and wrote them as a MIX of
vw-relative sizes (fonts/widths, which grow with viewport) and flat
fixed-px positions/offsets (which don't) — so the composition literally
RE-ARRANGES itself at every width instead of staying one design that
merely scales. Compounding it: .hero's own horizontal padding is
`var(--edge-pad)`, which grows once the viewport passes the page's
1460px content cap — at 1920px that alone eats ~230px of padding per
side, squeezing hero-left/hero-right into a much narrower column while
the vw-sized elements inside only grew modestly — exactly the "small
clump, huge dead margins" the owner's 1920 screenshot shows.
FIX — PROPORTIONAL POSTER SCALING: treat the hero as a fixed 1280x480
design canvas (1280 = this file's own universal "measured at 1280px"
convention; 480 = .hero's own actual rendered height today at 1280x800,
confirmed live: 60vh clamped by min-height:460px resolves to 480px at
that reference) that scales as ONE RIGID UNIT with the viewport. Every
vw/vh-driven value inside the hero that fed the "re-arranges at every
width" bug is re-declared here as the EXACT fixed px number it already
evaluates to at the 1280x800 reference (live-measured via
getComputedStyle, not hand-calculated, to avoid rounding drift) — this
changes NOTHING at 1280px (every number below is what already renders
there today) and means every px value anywhere in the hero, baked or
frozen here, now lives in ONE constant coordinate system that only the
outer `transform: scale()` below ever touches. --edge-pad is dropped in
favor of the same frozen padding number for the same reason (it must
stop responding to real viewport width once it's inside a rigid,
uniformly-scaled canvas).
.hero-poster-outer (new wrapper, index.html) reserves real page height
for the scaled box (transform doesn't reflow layout — the outer wrapper
is what keeps .features from riding up under/over a visually-enlarged
hero). --poster-scale = viewport-width / 1280, clamped: floor 0.68
(BROWSER-TABLET-UNIFY round, 2026-08-18 — was 1101/1280≈0.86 when this
canvas started at 1101px; now that the canvas extends down to 768px,
the FLOOR MATTERS for real: natural scale at 768px is 0.6, small enough
to dent legibility on the canvas's smallest reference text, but a floor
much above natural literally renders the 1280px-wide canvas WIDER than
a 768px viewport, clipping content symmetrically at `.hero-poster-
outer`'s own `overflow-x: clip`. 0.68 is the measured line where only
the already-optional decorative edge-bleed art loses some of its outer
bleed — headline/subhead/video/CTA stayed fully unclipped, live-verified
at 768/850/950/1050/1100px — see index.html's own comment on MIN_SCALE
for the full derivation); ceiling 1.35 so an ultrawide monitor gets a
bigger hero, not an absurd one — above ~1728px viewport width the
canvas simply stops
growing and the extra width shows as plain cream margin either side
(the page's own background, same convention as the exact same content
ceiling `--content-max` already uses lower on the page).
EDGE BLEED: the three pieces that bleed past .hero's own edges
(hero-left-strokes/hero-left-halftone off the left, hero-right-sweep off
the right) stay put, unmoved, as ordinary descendants of the now-frozen
.hero canvas — they scale together with everything else. Below the
1.35 scale ceiling the canvas itself renders exactly viewport-wide (scale
= vw/1280 there), so their bleed still reaches the TRUE viewport edge,
identically to before. Only past the ceiling (ultrawide, canvas narrower
than the viewport) does their bleed stop at the canvas's own edge rather
than the true edge — an accepted trade against "doesn't get absurd on
ultrawide," and still clipped safely by the page body's own
`overflow-x: hidden` either way (see .hero's own UNCUT-ART comment).
EDITOR: editor.js's drag math is fixed alongside this (see that file's
own POSTER-SCALE comment) — pointer-move deltas are divided by the
dragged element's live ancestor transform scale before being written
into its `translate` override, so a drag still tracks exactly under the
cursor once .hero is no longer rendered at 1:1. */
@media (min-width: 768px) {
/* --poster-scale is computed and kept live by a small inline script
right after this section's own markup in index.html (POSTER-SCALE
round) rather than a pure-CSS `clamp(calc(100vw / 1280))` — verified
live that this exact browser engine fails to apply a `scale()`/
multiplying `calc()` whose operand is a clamp() with a nested vw
calc() inside it (the whole declaration is silently dropped as
invalid, or evaluates only the inner arg's placeholder default and
re-arms) — the property was landing at height:0 / transform:none no
matter how the expression was reshaped, confirmed with isolated
minimal repros before switching approach. A plain resize-driven JS
number sidesteps the engine quirk entirely and is no less "CSS-only
in spirit" than the vw formula it replaces (same inputs, same
clamp band, just computed in JS instead of in the cascade). This
default is the safe no-JS fallback (renders the canvas at 1:1,
never oversized) — the script overwrites it immediately on load. */
:root {
--poster-scale: 1;
}
.hero-poster-outer {
position: relative;
/* NOT `width: 100vw` — a true-viewport-width breakout (100vw is wider
than this element's own content box whenever a reserved-space
scrollbar is present) reliably creates a REAL, scrollable
horizontal overflow behind the scrollbar (live-verified:
document.documentElement briefly became scrollable to x=15 with
that approach) — a regression against this round's own "zero
horizontal overflow at every width" bar, worse than the small
(~1%) pixel deviation at exactly 1280px it was trying to close
(see .hero's own frozen-padding comment below). Plain 100% (this
element's normal content-box width, matching its parent) is the
safe choice. */
width: 100%;
/* The 1280px canvas can still be a few px wider than this wrapper's
own (sometimes scrollbar-narrowed) content box — clip horizontally
only (same `clip`-not-`hidden` technique .hero's own base rule
already uses, and for the same reason: `clip` never establishes a
scroll container, so it can't turn into an accidental vertical
scrollbar) so that harmless symmetric bleed can never create real
horizontal page scroll. Vertical stays visible/unclipped (kept —
see GAP-HALVE ROUND 2 below: hero-right-sweep bleeds ~131px past
.hero's own bottom edge on purpose and would be badly clipped by
`hidden`). */
overflow-x: clip;
overflow-y: visible;
/* GAP-HALVE ROUND 2 (2026-08-18, owner: "cut the distance between hero
and feature cards by half" — a crop of the hero-bottom-to-feature-
cards dead space, after the prior GAP-HALVE round's padding-only
halving still read as too much space). Live-measured at 1280 before
this edit: .hero-cta (the lowest VISIBLE hero element — lower than
.hero-video-wrap, which bottoms out at ~431px vs. cta's ~460px) sat
96.14px above .hero's own bottom edge — .hero-cta's own
margin-bottom (122.46px, BAKE ROUND 4's "absorber," documented
there as pure trailing space that balances the column against
.hero-right's height, never meant to be visible) accounts for that
entire tail. .features's own padding-top (already halved to
11.69px by the prior round) sits right after it with zero gap
between .hero-poster-outer's bottom and .features's top box — so
the REAL visible gap (cta-bottom to first feature-card-top) was
96.14 + 11.69 = 107.83px, not the 11.69px the prior round measured
(it only checked outer-to-features, never cta-bottom-to-outer-
bottom). Halving 107.83 -> ~53.91 means trimming ~53.91px off this
wrapper's reserved height (480 -> 426.09), leaving .features's own
padding-top untouched (already halved once) — confirmed live this
lands the new total gap at ~53.9px, matching the target exactly.
Deliberately does NOT touch `.hero`'s own `height: 480px` below —
.hero-left/.hero-right are BOTH vertically centered
(justify-content: center) inside that box, so shrinking `.hero`
itself would recenter and MOVE the headline/video/CTA (rect-
equality violation); only the wrapper's own reserved space shrinks,
so `.hero` simply renders its unchanged, byte-identical composition
slightly overflowing the now-shorter wrapper box (overflow-y:
visible, unchanged, is what lets that render at all — same
mechanism that already lets hero-right-sweep bleed past .hero's
bottom edge today). SIDE EFFECT FOUND LIVE (elementFromPoint probe
before shipping this): `.hero`/`.hero-right` default to
`pointer-events: auto`, so their own empty tail — now overlapping
`.features`'s new (higher) position — would silently swallow clicks
meant for the first feature-card row. Fixed by `.hero { pointer-
events: none }` below, with `auto` restored on the two elements
that actually need it (`.hero-cta`, `.hero-play-chip`) — every
decorative img in the hero was already `pointer-events: none`
(confirmed live), and this exact "ancestor: none, [data-edit]:
auto !important" pattern is already how editor.js's own injected
stylesheet makes edit mode work regardless of an ancestor's
pointer-events, so this isn't a new convention. Verified
(own dev server, port 5403, 768/1280/1920 + overflow/console
checks — see the round's own report): gap ~107.83px -> ~53.9px at
every width (proportional, since the trim is baked into the same
vw/1280-scaled constant everything else in this canvas already
uses), zero rect drift on headline/video/CTA at 1280, zero
horizontal overflow, zero console errors, phone tier (<768px)
untouched (this whole block is >=768px-scoped), and
elementFromPoint at the reclaimed band now resolves to the
feature-card content instead of the empty hero tail. */
/* GAP-HALVE ROUND 3 (2026-08-18, owner: "this gap, cut half again" —
a crop of the same hero-bottom-to-feature-cards dead space Round 2
closed, still reading as too much). Live-measured at 1280 before
this edit (own dev server, port 5407): .hero-cta (still the lowest
VISIBLE hero element) sat 42.21875px above this wrapper's own
bottom edge (down from Round 2's 96.14px, consistent with Round 2's
own trim), .features's own padding-top (untouched since Round 1)
added 11.6875px on top of that with zero gap between the wrapper's
bottom and .features's box top (unchanged mechanism) — so the REAL
visible gap (cta-bottom to first feature-card-top) was 42.21875 +
11.6875 = 53.90625px, matching Round 2's own reported ~53.91px
exactly (confirms nothing drifted between rounds). Halving 53.90625
-> ~26.95px means trimming another 26.953125px off this wrapper's
reserved height (426.0859375 -> 399.1328125) — .features's own
padding-top is deliberately left untouched this round (the full
cut comes from the wrapper alone, same lever Round 2 preferred).
Confirmed live this lands the new total gap at ~26.95px. Still does
NOT touch `.hero`'s own `height: 480px` below or any of its
internal composition — only the wrapper's own reserved space
shrinks further, so `.hero` keeps rendering its unchanged,
byte-identical composition, now overflowing the even-shorter
wrapper box by a bit more (same `overflow-y: visible` mechanism).
The `.hero { pointer-events: none }` / `.hero-cta`,`.hero-play-chip`
{ pointer-events: auto } fix below (already in place from Round 2)
needed no changes — it already covers the reclaimed band regardless
of exactly how tall the tail is; re-verified live with an
elementFromPoint probe at the newly reclaimed band. */
/* VALUE-POINTS-REMOVED / FOLLOW-THE-BUILD round (2026-08-18) — OWNER
CORRECTION #1 on the first pass, verbatim: "don't expand the gap
between hero to next session. move the yellow CTA art up." A first
attempt grew this constant (399.1328125 -> 472.3515625) to absorb
the overlap a bigger, lower-sitting CTA created — rejected: that
opens a new empty band instead of reclaiming the value-points row's
own vacated space. Fixed by moving the CTA up via its own
margin-top/margin-bottom instead (see `.hero-cta`'s own comment) —
at THAT CTA size (340x69px) the original 399.1328125px constant
needed zero change and hit the 27px gap exactly.
OWNER CORRECTION #2, same round, verbatim: "those social media icons
in the yellow art, need to 2.5x the size." 20px icons -> 50px
(2.5x) forced the CTA itself much taller (69px -> 136px, stacked
text-row + icon-row, safe-zone math in `.hero-cta`'s own comment) —
a REAL physical space requirement (2.5x-bigger icons need 2.5x more
room), not a repeat of correction #1's mistake (which was purely
positional, no new content). Live-measured: even after moving the
taller CTA as far up as it can go without colliding with the
subhead above it (20.97px clearance, matching the original tight
gap), the space between the subhead and `.features` at the OLD
399.1328125px constant is 82.48px short of what a 136px-tall CTA +
a 27px features gap needs. This constant absorbs exactly that
shortfall (399.1328125 -> 473.6171875, +74.484375px — the residual
after the CTA's own upward move already closed part of the gap) —
confirmed live this lands cta-bottom-to-first-feature-card-top at
exactly 27.00px again, with the CTA sitting as high as it can
(20.97px under the subhead) rather than centered in unused space.
The growth here is 100% new CTA content (a physically taller
button), never re-opened dead air — the 27px features gap itself
never exceeds its target at any point in this derivation. */
/* GAP-60-CUT round (2026-08-18, owner verbatim: "close the hero to
next section gap by 60%" — a further reduction on top of the
27px the FOLLOW-THE-BUILD round's icon-resize pass had just
re-settled on). Same lever as every prior GAP-HALVE round: only
this wrapper's own reserved height moves, `.hero`'s own 480px
height and everything inside it stay byte-identical, so the cut
is 100% dead-space removal, zero composition risk. Live-measured
before this edit (own dev server, 1280px reference): cta-bottom to
first-feature-card-top = 28.3125px (the ~27px target, small
viewport-height-dependent rounding). 60% cut -> 11.325px target;
solved the same way as every prior round (subtract the exact
delta from this constant): 473.6171875 - 16.9875 = 456.6296875.
Confirmed live this lands the gap at exactly 11.33px, holding
proportionally (via the same --poster-scale multiplier) at 768px
and 1920px too — see this round's own report for the full
three-width table. */
/* CTA-RETIRED / RIGHT-GAP-FIX round (2026-08-18) — owner correction on
the GAP-60-CUT round above, verbatim: "this whole thing should move
up. so the gap between hero to next session can cut by 60%." THE
BUG the prior three attempts at this same ask kept repeating:
GAP-60-CUT (and every GAP-HALVE round before it) measured the gap
from `.hero-cta`'s own bottom edge to `.features`'s top — CTA was
the LOWEST element in the two-column hero, so that measurement was
real, but it was measuring the LEFT column's gap, not the gap the
owner was actually looking at: `.hero-video-wrap` (the RIGHT
column, 65% of the hero's width, the dominant visual element) ends
MUCH higher — live-measured before this round: video bottom
431.48px vs. CTA bottom 534.3px, a 102.8px difference — so the
"cta-bottom-to-features-top" gap the old rounds drove down to
~11px was correct-but-irrelevant; the wide, obvious dead band the
owner sees sits under the VIDEO the whole time (measured
101.15px), and cutting the wrapper by CTA-bottom's own tiny budget
could never touch it (the CTA already sat 96px+ ABOVE the wrapper
bottom, absorbing 100% of every prior round's trim before it ever
reached the video's own, much larger, gap).
FIX, per the owner's follow-up "remove the yellow CTA" directive
(see index.html/`.hero-sub-rule` above): the CTA is gone, replaced
by a thin yellow rule under the subhead — the left column's own
lowest point moved from the CTA's old 534.3px up to the rule's
448.79px, freeing real budget this lever can finally spend without
creating a new problem. Live-measured at 1280 before this edit:
video-bottom-to-features-top = 101.15px (the number the owner
actually sees — unchanged by the CTA removal, since the video's
own position is untouched), rule-bottom-to-features-top = 83.84px
(the new, much tighter, left-column constraint). Target: cut the
VIDEO gap by 60% -> 40.46px, a 60.69px reduction off this
constant (456.6296875 -> 395.9396875). Checked against the OTHER
constraint before committing: at that reduction the rule's own gap
lands at 83.84 - 60.69 = 23.15px — still comfortably positive (no
overlap with the rule or the first feature card, which sits a
further ~11.7px padding-top below `.features`'s own top edge) —
so the left column no longer caps this cut the way the CTA used
to. `.hero`'s own 480px height and everything inside it (headline/
subhead/rule/video) stay byte-identical — only this wrapper's own
reserved space shrinks, the same mechanism every prior GAP round
used, just finally sized off the right measurement. */
/* NO-SCROLL-800 round (2026-08-18) — REVERTED same day per owner:
"revert. it you still needa maintain the gap between sessions." The
35px cut (395.9396875 -> 360.9396875) closed the page to ~800px at
the 1280x800 reference but left the hero video, feature cards, and
footer visibly cramped once seen live. Back to the GAP-HALVE round's
own constant — the page scrolls slightly again at 1280x800 (~835px),
which is the accepted trade for real breathing room between
sections. */
/* NAV-GAP-HALVE round (2026-08-18) — see `.hero`'s own rule below (its
height/padding-top trim) for the full derivation of the top-of-hero
fix this round shipped. That trim alone shifts the ENTIRE hero row
(headline through video) up by 17px in absolute page terms — since
this wrapper's own reserved height is what actually anchors
`.features`'s position (independent of `.hero`'s own height), leaving
it unchanged would have OPENED the hero->features gap by the same
17px (live-confirmed: 40.45px -> 57.45px, a real regression against
this round's own "don't touch that gap" instruction). Trimming this
constant by the identical 17px moves `.features` up by the same
amount, cancelling the shift exactly: live-confirmed back to
40.45px at 1280px, holding proportionally at 768/1920px too. */
/* VERIFY-AND-FIX round (2026-08-19): BAKE ROUND 7 (below, .hero-video-
wrap's own 1.1x size bump) ate back into this gap without touching
this constant — live-measured 25.56px at 1280px against the
owner's approved ~40px target, and BAKE ROUND 7's own comment
flagged it rather than silently re-shrinking the video (correct
call — the video's size is owner-approved, never the lever to
pull). This IS the lever BAKE ROUND 7 chose not to touch: adding
the missing 14.44px back to this wrapper's own reserved height
(378.9396875 -> 393.3796875) moves `.features` down by the exact
same amount without moving the video at all (live-verified:
video-to-first-feature-card gap 25.56px -> 40.00px at 1280px;
nav-to-video gap unaffected, still +10.11px, since this constant
only anchors .features's position, never .hero's own content). */
height: calc(393.3796875px * var(--poster-scale));
}
/* GAP-HALVE ROUND 2: see this file's own comment on .hero-poster-outer's
trimmed height above for the full "why" — .hero's empty tail below
.hero-cta/.hero-video-wrap now overlaps .features's new (higher)
position, and .hero defaults to pointer-events:auto, so without this
it silently eats clicks meant for the first feature-card row.
.hero-cta is the only real interactive descendant inside .hero at
this tier (every decorative img is already pointer-events:none; the
video control bar is cosmetic-only, also already pointer-events:none
— CHIP-REMOVED round, 2026-08-18: .hero-play-chip is gone entirely,
dropped from this exception list too) — restored to auto so it keeps
working for a plain visitor exactly as before. */
.hero { pointer-events: none; }
.hero .hero-cta { pointer-events: auto; }
/* NAV-GAP-HALVE round (2026-08-18, owner: "close this gap by half. between
navbar follow us to hero" — a crop of the cream band between the top
bar's FOLLOW US row and the hero's own topmost visible content).
Live-measured before this edit (own dev server, 1280px reference): the
top bar (.nav, --nav-h) is a flat 76px with ZERO gap to
.hero-poster-outer/.hero below it (navBottom === outerTop === heroTop,
all exactly 76 — confirmed at 768/1280/1920, so none of the visible
space comes from the nav's own height/padding or the wrapper's own top
offset). The entire 34px gap is the "empty space at the TOP of the
fixed canvas above its content" case this round was told to check for:
.hero-left and .hero-right both center independently
(justify-content: center) inside the SAME padded content box
(480px height minus this rule's own top+bottom padding), so the
visible top offset of the topmost content (`.hero-video-wrap`, top
110px on the page = 34px below .hero's own 76px top edge — the video
sits higher than the headline's own line-box, whose real glyph ink
starts even lower, ~133px, confirmed by pixel-sampling a screenshot)
is `padding-top + (contentBoxHeight - columnHeight) / 2`.
FIX — shift the row up by exactly half (34 -> 17px) while leaving the
hero->features gap (governed by .hero-poster-outer's own reserved
height below, untouched by this rule) and every internal relative
position (video vs. headline vs. subhead vs. rule) byte-identical:
reduce `height` and `padding`'s top component by the SAME 17px
(480->463, 20.8->3.8). Both columns are centered in the SAME box, so
for either column's own content height `colH`, topOffset = P_top/2 +
(H - P_bot - colH)/2 and bottomOffset (content-bottom to .hero's own
bottom edge) = P_bot/2 + (H - P_top - colH)/2 — cutting P_top and H by
the identical 17px moves topOffset by exactly -17px (independent of
colH, so both columns shift up together, preserving their relative
position to each other) while leaving bottomOffset's own delta at
-0.5*17 - (-0.5*17) = 0 (unchanged) — the row's own bottom position
relative to .hero's bottom edge doesn't move, so nothing downstream of
it (the wrapper's own reserved-height math, the hero->features gap)
needs to change. padding-bottom (20.8, unrelated to this ask) and the
left/right padding (51.1875, the frozen --edge-pad) are untouched.
Live-confirmed: navBottom-to-video-top gap 33.98px -> 17.05px at
1280px, holding proportionally (via --poster-scale) at 768/1920px;
hero->features gap (video-bottom/rule-bottom to first feature-card
top) unchanged; headline/subhead/rule/video rect-equality relative to
each other holds (every element's own position shifted by the
identical -17px, confirmed via getBoundingClientRect diff). */
.hero {
width: 1280px;
height: 463px;
min-height: 0;
position: absolute;
top: 0;
left: 50%;
margin-left: -640px;
transform: scale(var(--poster-scale));
transform-origin: top center;
/* frozen --edge-pad/vh padding (live-measured at the 1280x800
reference, see this round's own header comment) — top component
trimmed 17px by the NAV-GAP-HALVE round above; bottom/left/right
unchanged. */
padding: 3.8px 51.1875px 20.8px;
}
/* Every vw/vh value below is the EXACT number it already computes to at
the 1280x800 reference (live-measured via getComputedStyle) — a
unit swap, not a value change. Several were already clamped to their
own ceiling throughout the whole 1101-1512px range before this round
(video-screen/hero-play-chip/hero-tagline's own width+font — these
were never actually part of the "re-arranges" bug, just re-declared
here for completeness since they're inside the same frozen canvas). */
.hero-left-strokes { width: 299.516px; }
.hero-left-halftone { width: 166.391px; }
.hero-kicker { font-size: 150.934px; }
/* SUBHEAD-ONE-LINE round (2026-08-18): the new one-line copy ("Own
horses. Train champions. Race for glory.") is nowrap — it must never
re-wrap onto a second line inside .hero-left's own ~390px-at-1280
column. font-size trimmed from the old two-line 14.0454px down to
11.5px, the measured largest size (own dev server, live DOM Range
measurement per this file's own WIDTH-MATCH-round convention, not
computed) that keeps the full nowrap line inside the column at every
poster-canvas width from 768px up (the canvas scales as one rigid
unit, so fitting at the 1280 reference guarantees fitting throughout). */
/* SUBHEAD-ONE-LINE round (2026-08-18) — OWNER BUG REPORT on the first
pass, verbatim screenshot showing "WN HORSES..." (the leading O cut
off): ROOT CAUSE, found live (own dev server): `.hero-sub` is
`display: block` (base rule) — a block element's own rendered rect
width is its CONTAINING BLOCK's width, NOT its text's shrink-to-fit
width (same "measurement gotcha" this file's own WIDTH-MATCH round
already documented for `.hero-kicker`'s l1/l2 spans) — so the old
103.18px baked `left` offset (tuned years ago for a much SHORTER
two-line block) was silently letting the new long nowrap line render
with its glyphs starting well left of that offset. At the
MIN_SCALE-floor tier (768px viewport, canvas forced to 0.68 scale —
see this file's own POSTER-SCALE comment), the canvas itself renders
wider than the viewport and `.hero-poster-outer`'s `overflow-x: clip`
trims ~75 canvas-units off each side — the old effective left edge
sat inside that trimmed band, clipping the leading glyph exactly as
reported. FIX: `display: inline-block` (shrink-to-fit, so the
rendered rect finally reflects the real glyph extent — verified live
via getBoundingClientRect before/after) + a real, re-measured `left`
(60px, was 103.18px) + a smaller `font-size` (13px, was 11.5px right
after the one-line change, 14.0454px originally) — chosen by testing
every combination live (own dev server) against TWO hard edges at
the 1280px reference: left edge must clear the floor-scale clip
threshold (~75 canvas-units, plus margin) and right edge must clear
`.hero-video-wrap`'s own left edge (~541.7px, plus margin) so the
subhead never overlaps the video panel either (a second, milder
defect the same nowrap change introduced — the text render width,
even shrink-to-fit, is genuinely ~390px long). Result: left edge
115.4px (40px clear of the clip threshold), right edge 505.4px
(36.3px clear of the video panel) — both live-verified holding at
390/430/768/1280/1920 (the canvas scales as one rigid unit above
768px, so a fit proven at the 1280 reference holds proportionally at
every width in that range; phone <768px has its own separate rule,
already nowrap-safe — see the `@media (max-width: 767px)` block). */
.hero-sub { font-size: 13px; white-space: nowrap; display: inline-block; left: 60px; }
/* CTA-RETIRED / YELLOW-RULE round (2026-08-18): inside this frozen
1280-reference canvas, position:absolute (not flow) so the rule
tracks the subhead's ACTUAL rendered position — the subhead's own
position:relative bake (left:60px above, plus the DESKTOP tier's own
top offset) shifts its visual box well away from where a plain flow
sibling would land (live-measured: a flow-placed rule landed ~42px
too low, well clear of the text). offsetLeft/offsetTop (which DO
include position:relative shifts, unlike a flow sibling's own box)
measured the subhead's real local box at 60/228, 390x17 — rule sits
8px under that. Width 340px (a touch narrower than the subhead's own
390px box, reading as "under the words" rather than wider than the
line) — inherits the block's own -3deg rotate for free (position:
absolute child of the same rotated .hero-headline-block, same
convention as .hero-headline-streak above). */
.hero-sub-rule {
position: absolute;
left: 60px;
top: 253px;
width: 392px;
margin-top: 0;
}
/* CTA-RETIRED round — RECENTER FIX, see the base `.hero-left-spacer`
rule's own comment for the full "why." 96px = the CTA's old total
flow contribution (98px: 2px gap + (-40px) margin-top + 136px height
+ 0 margin-bottom) minus the 2px gap this spacer itself now re-opens
between it and `.hero-headline-block` — net effect is byte-identical
to the CTA's old contribution. Live-verified at the 1280 reference:
lands `.hero-kicker`/`.hero-sub` back at their exact pre-removal
rects (68.47/336.81 top). */
.hero-left-spacer { display: block; height: 96px; }
.hero-left { gap: 2px; }
/* VALUE-POINTS-REMOVED round (2026-08-18): .hero-features's own tuning
here is now unused dead weight (the row never renders — see
index.html's own removal comment) but left in place rather than
deleted, matching this round's "removal, not cleanup" scope; the two
rules below are simply never selected. */
.hero-features { padding: 3px 0; }
.hero-feature .label { font-size: 8.512px; }
/* FOLLOW-THE-BUILD round (2026-08-18, owner: "make the yellow button
bigger" then "those social media icons in the yellow art, need to
2.5x the size" — two passes, final shipped shape below).
SIZE/SHAPE: 236.031x47.98px -> 420x136px. Width alone (~78% bigger)
was set first; the 2.5x icon pass (20px -> 50px icons) is what
actually forced the height — a 50px icon plus a text row above it
needs real room the old 482:98 brush-art aspect ratio can't provide
at any width this column can afford (live math: fitting a 50px icon
UNDER a text row inside the art's own 58%-of-height safe zone needs
≈235px of width at the native ratio — the .hero-right-sweep video
panel's own left edge sits at ~490px in this same coordinate frame,
so anything past ~420px wide collides with it). Fix: `.hero-cta`'s
`aspect-ratio: 482/98` (base rule) is overridden here with `auto` and
an explicit height, decoupling the box from the art's native
proportions — `.cta-pill-bg`'s own `object-fit: fill` (base rule,
pre-existing — the same technique the phone tier already used) just
stretches the brush art to match, no distortion beyond an ordinary
aspect-ratio stretch a hand-painted brush texture already reads fine
under (live-verified, see this round's cta-closeup.png). WIDTH is
capped by the video-panel clearance above (420px measured leaving
~70px clear at 1280); HEIGHT (136px) is chosen so the safe zone
(58% of 136 = 78.9px) comfortably holds a 16px text row + 6px gap +
the 50px icon row (72px needed, ~3.5px spare on each side) — see
`.cta-copy`/`.cta-social-icon` below for the row split itself.
`left` resets to 0 (was a baked +99.01px rightward offset from
several BAKE ROUNDS ago, tuned for the old, much narrower 236px
button) — at 420px wide the old offset would have pushed the button
straight into the video panel; 0 aligns its left edge with
`.hero-left`'s own natural column edge instead, which is also where
the headline/subhead already start (a cleaner, more deliberate
alignment than the old offset ever produced).
MARGIN PAIR — owner correction #1 (verbatim: "move the yellow CTA
art up"): margin-top is negative (-40px) so the CTA sits as close
under the subhead as it can without touching it (20.97px clearance,
live-verified) rather than floating in whatever space centering
happens to leave; margin-bottom stays 0 (no trailing filler — see
`.hero-poster-outer`'s own comment for why the wrapper's own
reserved height, not a cta margin-bottom absorber, is what closes
the remaining gap-to-features budget this round, now that the CTA's
own footprint genuinely grew from the 2.5x icon pass). */
.hero-cta {
width: 420px;
height: 136px;
aspect-ratio: auto;
left: 0;
margin-top: -40px;
margin-bottom: 0;
}
.cta-pill-bg { transform: none; }
.hero-cta .cta-main { font-size: 16px; }
.cta-copy { gap: 6px; }
/* ICON-2.5X round (2026-08-18, owner verbatim: "those social media
icons in the yellow art, need to 2.5x the size" — measured against
the prior shipped 20px): 20px -> 50px. Row stays centered below the
main label (stacked, not side-by-side — side-by-side was tried live
first and rejected: fitting "FOLLOW THE BUILD" + arrow AND three
50px icons on one row needs ~330px of the safe zone's own 60%-width
allowance, which only a button wide enough to collide with the video
panel could supply; stacked needs far less width, just more height,
and height was the cheaper axis to spend here — see `.hero-cta`'s
own comment). Contrast: the icon art is dark-ink line/silhouette
marks (matching the navbar's own identical assets) on the solid
yellow brush fill — reads cleanly at both 20px and 50px, confirmed
live (cta-closeup.png). */
.cta-social-icon { width: 50px; height: 50px; }
.cta-social-row { gap: 10px; }
.hero-right-sweep { width: 614.391px; }
.video-screen { inset: 8px; }
.hero-tagline { width: 230px; }
.hero-tagline .display { font-size: 15.81px; }
/* =======================================================================
BAKE ROUND 7 (2026-08-18) — folds in the owner's latest saved
tweak-editor session (17 entries) at this frozen 1280-reference
canvas. DESKTOP-TIER SCOPED (this whole block is `@media (min-width:
768px)`) per standing convention — nothing here can leak to phone.
Method: live-matrix measurement against the tweak-editor's own
rendered rects (own dev server, port 5421) — every number below
reproduces the override-active target rect to sub-pixel precision
(largest residual ~1.2px, most under 0.1px), not hand-added deltas.
hero-kicker/hero-sub (real font-size increases, never transform:
scale on text, per standing law) triggered a RECENTER GOTCHA:
.hero-left is vertically centered, and growing these two elements'
real flow height (font-size affects layout, unlike the tweak-
editor's own preview which only used transform:scale — paint-only,
no layout effect) would have dragged the whole centered column
down. Compensated the same way BAKE ROUND 4/5 did: `.hero-left-
spacer`'s height absorbs the exact flow-height delta (96px ->
69.099456787109375px) so total column content height — and
therefore the centered group's position — is unchanged; every
other number below assumes that compensation is in place. Also
found live: `.hero-kicker` is a block-level element whose WIDTH is
bound to its container (font-size only grows its height/line-
height), so the override's uniform 1.1x scale needed splitting —
height via font-size (166.0274px, 150.934 x 1.1) and width via the
element's own pre-existing `scaleX(1.1)` typographic stretch
(BAKE ROUND ADDENDUM), multiplied by the same 1.1 to 1.21 (rotate
-2.5deg untouched, confirmed unchanged by matrix decomposition of
the target's own computed transform). */
.hero-left-spacer { height: 66.479456787109375px; }
.hero-kicker {
font-size: 166.0274px;
position: relative;
left: 130.81149505615234px;
top: -82.36611526489258px;
transform: rotate(-2.5deg) scaleX(1.21);
}
/* SUBHEAD-BIGGER round (2026-08-19, owner crop: "for desktop, make this
line bigger" — the hero subhead). font-size 15.6 -> 18px (+15.4%,
real font-size per standing law, never transform:scale on text) —
the max growth that fits ONE LINE inside the fixed geometry: the
available band runs from `.hero`'s own left edge (x=0 at the 1280
reference — .hero is exactly 1280 wide and centered exactly inside
`.hero-poster-outer`'s clipped 100%-width box at this reference
width, so there is zero slack past x=0) to `.hero-video-wrap`'s own
left edge (550.42px) minus a real clearance margin — the ceiling
this round hit, not an arbitrary stopping point (18.2px already
leaves under 7px on one side). `left` re-solved from -60.72px-ish
candidates down to -50.73px (was 19.078px) live-matrix-measured
against the grown box so the RENDERED rect lands left 2.13px inside
`.hero`'s own edge, right 9.88px clear of the video panel — the
same "live target rect, not hand-added deltas" method this file's
BAKE ROUNDS use (top/rotate/skew untouched — pure horizontal
re-anchor). RECENTER GOTCHA (same mechanism BAKE ROUND 7's own
comment documents for hero-kicker/hero-sub): the real font-size
increase grows `.hero-sub`'s own flow height by 2.62px, which would
drag the whole vertically-centered `.hero-left` column (and
therefore the headline, first in that column) down by half that —
compensated by trimming the same 2.62px off `.hero-left-spacer`'s
height above (69.099456787109375 -> 66.479456787109375px);
live-verified headline rect delta 0.002px (was 1.31px uncompensated)
— headline/video both rect-equal to baseline. */
/* BAKE ROUND 8 (2026-08-19): folds in the owner's saved "hero-subhead"
tweak-editor session (scale 0.9, translate [57.278537186603245,
0.5528666770345438], rotate -2) on top of the SUBHEAD-BIGGER round's
18px/rotate(-2deg) baseline directly above — his session was captured
against that exact state (live matrix-decomposed and confirmed: the
override's own composed transform equals scale(0.9) * rotate(-2deg) *
[rotate(-2deg) skewX(-6deg)], not a fresh base). Scale baked as a real
font-size multiplier per standing law (18 x 0.9 = 16.2px, never
transform:scale on text); the two adjacent rotate(-2deg) functions
multiply into one rotate(-4deg) (matrix-confirmed, skewX(-6deg)
untouched); translate composes additively into left/top
(-50.73+57.278537186603245, -82.85227172851562+0.5528666770345438),
then live-matrix-refined by ~0.01-0.02px against the override-active
rendered rect to correct for the rotate's own left/top coupling (own
dev server, port 5437) — final rect matches the override-active
target to within 0.013px on every edge.
SCOPE NOTE (owner correction, 2026-08-19: "you keep adjust those i
didn't touch"): this round bakes `.hero-sub` ONLY. The real font-size
shrink (18->16.2px) reduces this element's own flow height, which —
via the SAME vertically-centered `.hero-left` column mechanism the
SUBHEAD-BIGGER round's own comment documents — very slightly re-lifts
the centered column (live-measured: `.hero-kicker`'s rect shifts
1.14px downward — top -3.16px pre-shrink vs -2.02px baked, own dev
server port 5437). Left uncompensated on purpose, per this round's
explicit instruction not to touch `.hero-left-spacer` or any other
neighbor — reported here rather than silently fixed. `.hero-sub-rule`
directly below is UNCHANGED — also per that same instruction, even
though it now sits under a smaller/repositioned subhead. */
/* BAKE ROUND 9 (2026-08-19): folds in the owner's saved "hero-subhead"
tweak (translate only [-1.0594313730836387, 15.348835014919057], no
scale/rotate this round) on top of BAKE ROUND 8's own state directly
above. Pure translate composes additively into left/top exactly (the
override carries no scale/rotate, so there is no left/top-coupling
to re-solve — translate is always the outermost/last-applied
operation regardless of the existing rotate(-4deg) skewX(-6deg), see
this element's own BAKE ROUND 8 comment for the coupling case this
ISN'T): 6.5609+(-1.0594313730836387)=5.5014686269163615,
-82.2817+15.348835014919057=-66.93286498508094. font-size/transform
untouched (no new scale/rotate). */
.hero-sub {
font-size: 16.2px;
left: 5.5014686269163615px;
top: -66.93286498508094px;
transform: rotate(-4deg) skewX(-6deg);
}
/* SUBHEAD-BIGGER round: the yellow rule grows with the subhead it sits
under — base width 340 -> 392px (line ~3048 below this block, same
~15% step as the subhead's own real growth), left/top re-solved live
(not a proportional formula — the element inherits its ancestor's
rotate, so a straight delta doesn't map 1:1 to the CSS-space left/
top — matched against the grown subhead's own new rendered box, same
"roughly under the words" relationship as before): rendered rule
right edge now sits 8.75px clear of the video panel (was already
13.5px INSIDE it before this round, an existing, unrelated overlap
this change happens to also close — the rule sits behind the video
panel in paint order there, so it was never a visible defect, just
a wider margin now). */
/* BAKE ROUND 9 (2026-08-19): folds in the owner's saved "yellow-rule"
tweak (translate [-13.044789053465562, 5.473725026205031], rotate
-2) — this is the FIRST bake this element's own `transform` has ever
received (previous rounds only ever moved its left/top; the element
carries no `transform` property of its own — it inherits its
ancestor `.hero-headline-block`'s -3deg tilt visually, which is
NOT part of this element's own computed transform and therefore
untouched by this bake, matrix-confirmed: the override-active live
matrix's linear part (0.999391,-0.034899,0.034899,0.999391) is
exactly rotate(-2deg) alone, e/f exactly the raw translate values —
proving this element's own base transform was truly empty). Translate
composes additively into left/top as always (93.2983155888861+
(-13.044789053465562)=80.25352653542053, 224.2008009069026+
5.473725026205031=229.67452593310765); rotate is a fresh
rotate(-2deg) (no prior rotate on this element to add onto). */
.hero-sub-rule { left: 80.25352653542053px; top: 229.67452593310765px; transform: rotate(-2deg); }
/* headline-streak: pure whole-art translate+rotate (no scale this
round) — composes additively onto the earlier block's own
left:286.78/top:147.87/rotate(1.5deg) (live-verified match to
0.03px): new rotate = 1.5 + (-0.5) = 1deg. */
/* VERIFY-AND-FIX round (2026-08-19) — PIXEL-VERIFIED LAYOUT MOVE: the
prior bake never actually confirmed the streak stayed clear of the
glyphs it sits behind — a live getBoundingClientRect check found its
axis-aligned bbox overlapping "SOON" (.hero-kicker .l2) by ~41x98px.
Standing check: screenshot the headline zone with the streak shown
vs. hidden (visibility, not display, so layout doesn't shift) and
diff the two PNGs pixel-for-pixel inside the actual glyph bounding
box (l1 ∪ l2, not the whole padded headline zone — the streak is
SUPPOSED to paint visibly in the empty space around the letters,
only glyph pixels themselves must stay untouched). At the baked
`left` value above that diff was non-zero (a real, visible change,
not just anti-aliasing noise — 3899 px differed inside a 152x96
region). z-index was never the mechanism here (nothing on this
element was fighting a z-index battle — headline-streak already
paints under the h1 via DOM order alone, no z-index set) so per this
round's own instruction this is a LAYOUT fix: `left` nudged -70px
(from -219.825 to -289.825, rotate/top unchanged) — live-swept in
10-20px steps until the streak's bbox cleared "SOON" entirely with
margin to spare, then re-verified with the same shown/hidden pixel
diff restricted to the l1∪l2 glyph bbox: 0 differing pixels (was
3899). Screenshots: scratch-verify/headline-zone-streak-{shown,
hidden}-fixed.png. */
.hero-headline-streak {
left: -289.82531350617626px;
top: 102.77196134635969px;
transform: rotate(1deg);
}
/* hero-video: scale 1.1 baked as real width (76.757625% x 1.1 =
84.4333875%, same %-of-column convention as every prior round) —
same real-width-re-anchors-from-the-right-edge gotcha rounds 3/4/6
already documented, solved the same way (live target box vs. a
width-only candidate, right/bottom solved as the exact px gap). */
/* OVERLAP FIX (2026-08-18, post-bake live check): baking the override's
own scale/translate literally put the panel's TOP EDGE 6.89px ABOVE
the nav's own bottom edge at 1280px (a real collision the tweak-
editor's own preview didn't surface, since its overlay renders on
top of everything including the nav). `bottom` nudged +17px less
negative-going (53.073 -> 36.073, restoring roughly the NAV-GAP-
HALVE round's own ~17px nav-to-video clearance target) — the panel's
own fixed height means this moves both its top AND bottom edge down
together by the same 17px; re-verified live: nav-to-video gap
-6.89px -> +10.11px (clear), video-to-first-feature-card gap 42.56px
-> 25.56px (still positive/comfortable, short of the ~40px target —
the size increase this round asked for needed more vertical room
than the hero box has to spare at 1280px; flagged in the round
report rather than silently re-shrinking the owner's own chosen
scale). */
.hero-video-wrap { width: 84.4333875%; right: 49.658173828125px; bottom: 36.072968749999996px; }
/* right-sweep-v2: owner-placed via the tweak editor (scale 0.3,
translate) on top of this round's own freshly-installed base size
(clamp(560px,56vw,860px)) — baked the same way as every other
whole-art piece: scale into real width (560/56vw/860 x 0.3 =
168px/16.8vw/258px, ~215px rendered at 1280px — a small accent, not
the dominant gesture the base size implied; his placement call),
right/top re-solved live (same real-width re-anchor gotcha). */
.hero-right-sweep-v2 { width: clamp(168px, 16.8vw, 258px); right: -15.1591796875px; top: -6.53878021240234px; }
/* Nav/closing corner art + logo — first bake for nav-corner-brush and
this round's second bake for logo (both live-matrix measured the
same way; base rules are the unscoped, all-tier defaults, so these
go here — desktop/tablet only — leaving phone/tablet's own already-
baked overrides at line ~3304+/3619+ untouched). */
.nav-brand img.nav-brand-logo { left: -26.223438262939453px; top: 12.315624237060547px; height: clamp(62.7px, 6.413vw, 81.07px); }
.nav-corner-brush { left: -32.92919921875px; top: -67.64673614501953px; width: clamp(357.5px, 30.25vw, 467.5px); }
.closing-corner-brush { right: -39.28125px; bottom: -13.3828125px; }
/* Hero video callout group — .hero-tagline itself gets its first
translate bake (kept as `transform: translate()`, not position:
relative — the base rule is position:absolute anchored via right/
bottom %, and translate composes on top of that cleanly without
disturbing the anchor, unlike position:relative which would have
discarded it — found live when a first attempt using left/top
rendered ~436px off). callout-ink-splash composes its own new
rotate/scale additively onto its existing baked transform (rotate
-5+1=-4deg, scale 1.2618375x0.85=1.07256187), translate re-solved
from the live target (same non-additive-translate-inside-a-nested-
transform-chain gotcha this element's own BAKE ROUND 3/4 comments
already document). hero-callout-text composes its own translate
additively onto its existing transform (rotate/skew untouched, no
new rotate this round). hero-callout-line1/line2 are a first bake
each — kept as `transform: scale()` (this sub-tree's own established
convention, see .hero-tagline-copy's rotate/scale bakes above; these
are short decorative display-face labels, not the load-bearing
headline/subhead the real-font-size law targets) + position:relative
for the translate. Line 2's text is baked directly in index.html
("Own The Finish." -> "CHASE THE GLORY."), not as a runtime
override. */
.hero-callout { transform: translate(0.5310457516339868px, -2.9337492572786688px); }
/* BAKE ROUND 9 (2026-08-19) — NOT BAKED, left unchanged on purpose: the
owner's saved "callout-ink-splash" tweak (translate
[-5.9447776322555566, 36.89959818604759], scale 1.1) and its sibling
"hero-callout-line1"/"hero-callout-line2" tweaks were live-matrix-
decomposed exactly the same way as this round's other five entries
(new_translate = ov.translate + 1.1·Told = (59.633903466649606,
-65.87227048310072), new_scale = 1.1×1.07256187 = 1.179818057;
line1/line2 translate composes additively into left/top the same
pure-translate way as every other element this round) — but a live
rect check at the DESKTOP tier's own narrow end (768px, the standing
bake law's own acceptance width) found the resulting callout genuinely
off-panel, not just past `.hero-video-wrap`'s own box (that part is
BY DESIGN — see this sub-tree's own "must feel ATTACHED to the panel,
overlapping the lower-right corner and extending slightly beyond it"
spec note above): "CHASE THE GLORY."'s own right edge lands at
799.43px against a 768px viewport — 31.43px past the visible page
edge, clipped by `.hero-poster-outer`'s `overflow-x: clip` (own dev
server, port 5439) — the second line reads "CHASE THE G" with the
rest invisible. PRE-EXISTING, NOT INTRODUCED BY THIS ROUND: the SAME
check against the state directly above (this round's own before-
state, BAKE ROUND 8-era) already clips at 768px too — line2's own
right edge measured 797.53px there (29.53px past-edge) — this
round's requested values would only worsen it by ~2px (line2) to
~9px (the ink-splash art itself, which grew from a 172.76px-wide box
to 190.04px under the new 1.179818057 scale). Per the standing bake
law ("if baking a listed element would cause a genuine collision...
do NOT compensate... leave that entry unbaked... report it with
measurements") this entry stays UNBAKED — the pre-round values below
are simply carried forward unchanged, not superseded. */
.hero-tagline-bg { transform: translate(59.6169828171865px, -93.42897151740754px) scale(1.07256187) rotate(-4deg); }
.hero-tagline-copy { transform: translate(12.622560561779754px, -121.89840732093739px) rotate(-17.5deg); }
.hero-tagline .l1 { position: relative; left: -6.097501885594514px; top: 114.40996687642085px; transform: scale(0.95); }
.hero-tagline .l2 { position: relative; left: 1.2605665153481513px; top: 112.83478414342079px; transform: scale(0.95); }
}
/* TABLET + PHONE — mobile-first recomposition, page scrolls freely */
@media (max-width: 767px) {
.nav { padding: 0 18px; }
/* NAV-SIMPLIFY round: the burger/drawer/hide-on-mobile rules that used
to live here are gone along with their markup — .nav-social now
stays visible (and is the ONLY thing in .nav-right) at every tier,
per the owner's "logo top-left, social icons top-right, that's it"
request. Sized down a step below so three icons + the logo's own
enlarged overflow never crowd a narrow nav row. */
.nav-social a { width: 30px; height: 30px; }
.app-shell { height: auto; overflow: visible; }
.hero {
flex-direction: column;
padding: 22px 20px;
gap: 20px;
}
/* MOBILE RECOMPOSE round (2026-08-17): purpose-built tablet/phone
ordering, not a shrunk desktop. LANDING_SPEC.md §30's own mobile
order is logo -> COMING SOON -> subhead -> CTA -> video -> three
value points -> feature screenshots -> follow -> footer — video
BEFORE the value points, CTA BEFORE video. The desktop DOM instead
nests headline/subhead + value-points-row + CTA inside .hero-left and
the video inside .hero-right (two flex-column siblings of .hero), so
a plain flex-direction:column on .hero alone would render headline,
subhead, value-points, CTA, THEN video — wrong order, and no amount
of tweaking .hero-left's own internal order fixes it (the video lives
in a different container entirely). Fix: `display: contents` on both
wrapper divs removes THEM from the box tree at this tier (their
children become direct flex items of `.hero` itself, same technique
used for exactly this problem across the industry) without touching
index.html — then plain flex `order` on each real content piece
reorders freely across the old container boundary. Decorative
absolutely-positioned art (nav-corner-brush, halftone/strokes/sweep,
headline-streak) is unaffected either way — position:absolute takes
it out of flow regardless, and it keeps anchoring to `.hero` itself
(already position:relative), the nearest positioned ancestor once the
two wrappers stop generating boxes. */
.hero-left, .hero-right { display: contents; }
/* Z-INDEX SHIELD FIX (2026-08-18, found live via screenshot: "COMING"
was rendering as "C●●●ING", the middle glyphs painted over by the
red/black hero-left-strokes art): .hero-left carries `position:
relative; z-index: 2` (base rule) specifically so its real content
always paints above the decorative left-edge art (hero-left-strokes
z-index:1, hero-left-halftone z-index:0) — but `display: contents`
REMOVES the element's own box entirely, including whatever stacking
context its z-index established. Once .hero-left stops generating a
box, its former children become direct paint-order siblings of the
z-index:1 decorative art inside `.hero`'s own stacking context, and
since they carry no z-index of their own (.hero-headline-block's
only own stacking trait is `position: relative` from its rotate
rule, i.e. z-index:auto — auto-z-index items paint BELOW any
positioned sibling with an explicit z-index >= 0), the red stroke
started winning. Re-applied directly to the three real content
pieces so they keep the same visual shield display:contents took
away. TABLET (768-1100px) never hits this — that tier no longer uses
display:contents at all (BROWSER-TABLET-UNIFY round), so .hero-left's
own z-index:2 still applies there normally. */
.hero-headline-block, .hero-cta, .hero-video-wrap, .hero-features { position: relative; z-index: 2; }
.hero-headline-block { order: 1; }
.hero-cta { order: 2; }
.hero-video-wrap { order: 3; }
.hero-features { order: 4; }
/* BAKE-LEAK GUARD: three of BAKE ROUND 6's desktop tweaks live on
otherwise-unscoped base rules (.hero-features/.cta-pill-bg's own
`transform`, [data-edit="cta-main-text"]'s left/top, .hero-cta's own
left/top, .hero-tagline-bg's `transform`) — real desktop-viewport
pixel offsets/scales that were never meant to reach a 390-767px
column (the tweak-editor session that produced them ran at desktop
width; see BAKE ROUND 6's own comments at each rule). Reset to
neutral here, once, for every tablet/phone width — this mobile
section builds its own composition/positions from scratch below, so
nothing here depends on the desktop numbers surviving. */
.hero-features, .cta-pill-bg, .hero-tagline-bg { transform: none; }
.hero-cta, [data-edit="cta-main-text"] { left: 0; top: 0; }
.cta-pill-bg { left: 0; top: 0; }
/* PHONE-CENTER round (2026-08-18, owner: "for mobile, the key is all
these, they are have to be aligned and center... as user scroll on
their mobile, it can't be one part is on the left, the other is on
the right" — three crops: headline+subhead left-aligned, value
points ragged, footer band left-aligned): SUPERSEDES this old
left-edge CLIP FIX. The 12px margin-left existed only because the
headline's scaleX(1.1)/skewX stretches were pinned to
`transform-origin: left` (grows rightward only, so the left edge
needed real clearance) — now that the headline is centered instead
(`justify-content: center` + `transform-origin: center center` on
`.hero-kicker` below, `text-align: center` + `transform-origin:
center center` on `.hero-sub`), those same stretches grow
symmetrically from the block's own center and no longer threaten
the left edge specifically; a leftover 12px margin would instead
make the whole block sit 12px right of the page's true center,
fighting the very centering this round adds. Dropped to 0. */
.hero-headline-block { margin-left: 0; }
/* CLIP FIX ROUND 2's `transform-origin: left` is SUPERSEDED by the
PHONE-CENTER round (see .hero-headline-block's own comment above) —
this declaration is dead in practice anyway (the later MOBILE-
REDESIGN block further down redeclares `.hero-kicker` wholesale,
including its own transform-origin, and being later in the cascade
it's the one that actually applies at this ≤767px tier) — flipped
to `center center` here too purely so the two declarations agree
and don't mislead a future reader. */
.hero-kicker { font-size: clamp(52px, 15vw, 72px); transform-origin: center center; }
/* STACK-ROBUSTNESS FIX (promised by the base-rule comment above
.hero-kicker .l1/.l2 — "fixed TABLET/PHONE-ONLY below," but the
actual rule was missing here, leaving COMING/SOON rendering
inline-block-that-wraps at this tier's much wider single-column
width: measured live at 768px, l1 and l2 sat side-by-side/overlap-
wrapped inside a 773px-wide kicker box instead of stacking, and
hero-sub's own 2px margin-top (sized for the desktop two-line box)
then landed on top of that collapsed-height mess — confirmed via
getBoundingClientRect: l1 y 124-164 vs hero-sub y 129-200, a real
visual overlap, not just tight spacing. `display: table` (not
`block`) forces the same stacking while keeping shrink-to-fit
width — a first attempt at plain `display: block` stretched each
line to the FULL kicker width instead of its own content width,
and since .hero-kicker's `scaleX(1.1)` (base rule) scales from the
box's own center, that much wider box meant the 10% stretch pushed
COMING's leading glyph to a measured x of -7.44px — clipped clean
off the left edge of the viewport (confirmed live, not just
computed). `display: table` is block-level (starts its own line,
so l1/l2 stack) but sizes to its content like the original
inline-block did, so the scaleX transform's absolute pixel throw
stays exactly what it was pre-fix. Desktop tier is untouched
(still relies on the narrow ~35%-column wrap described in the
base-rule comment). */
.hero-kicker .l1, .hero-kicker .l2 { display: table; }
.hero-features {
flex-wrap: wrap;
row-gap: 10px;
margin-top: 4px;
padding: 12px 0 0;
border-top: 1px solid var(--line);
}
.hero-feature { flex: 1 1 45%; }
/* Callout stays attached to the panel's lower-right corner at every
tier (base rule now bottom-anchored — see .hero-tagline's own
comment) — just a touch smaller so it doesn't dominate the narrower
frame. No separate top/bottom override needed anymore; only the
width shrinks a step. */
/* CLIP FIX: the desktop base rule bleeds this callout PAST the video
panel's own right/bottom edge (right:-6%; bottom:-8%) — intentional
there (spec: "overlapping the lower-right corner and extending
slightly beyond it") since the video panel sits well inside .hero's
own padded box with room to spare. At tablet/phone the video panel
runs edge-to-edge (phone) or close to it (tablet), so that same
outward bleed pushes the callout past the VIEWPORT edge, where
.hero's own `overflow-x: clip` (base rule) silently chops it —
confirmed live (an early pass read "FEEL THE SP.." / "OWN THE FIN..").
Pulled back to a small INSET from the panel's own corner instead —
still reads as attached to the corner, per spec, just without the
escape past the screen edge. */
.hero-tagline { width: clamp(120px, 30vw, 170px); right: 2%; bottom: 3%; }
/* CLIP FIX (continued): .hero-tagline-copy's own base transform (a
desktop-calibrated translate(9.44px,-119.44px) rotate(-17.5deg), see
that rule's own "CALLOUT-VS-HUD CHECK... at every desktop width"
comment — another unscoped desktop bake) shoves the nowrap text
further right/up than this tier's much smaller callout box can hold,
so it overflows past the box and gets chopped by .hero's own
overflow-x:clip. Reset to the box's own plain flex layout (already
column + justify-content:center + text-align:right) at this tier —
no rotation, no offset, text reads level and fully inside the ink
splash's own bounds at every tablet/phone width. */
.hero-tagline-copy { top: 12%; right: 8%; bottom: 12%; left: 8%; transform: none; }
.features {
flex-direction: column;
padding: 8px 20px 26px;
gap: 26px;
}
.feature-card {
border-left: none;
padding: 0;
border-top: 2px dashed var(--line);
padding-top: 20px;
}
.feature-card:first-child { border-top: none; padding-top: 0; }
/* THREE-ZONE round: DOM order is already title -> caption -> follow
cluster (see index.html), so switching to a column just stacks the
three zones in that exact order — matches the owner's phone spec
("stack the three zones in that same order... tight") with no
reordering needed. THREE-ZONE-RESTACK round (2026-08-18) changed
what's IN the stack (caption gone, follow cluster now the 2nd zone,
copyright the 3rd — see index.html), not this stacking mechanism
itself; `display: flex` added explicitly since the base `.closing`
rule switched to `display: grid` that same round (a column
flex-direction alone does nothing on a grid container). */
.closing {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 26px 20px;
gap: 16px;
}
/* PHONE-CENTER round (2026-08-18, owner: "it can't be one part is on
the left, the other is on the right" — his footer-band crop showed
the logo/heading left-aligned while other stacked sections read
centered): every zone in the stack now centers on the same axis —
`.closing-left` centers its own logo-above-heading column
(`align-items: center`) and its heading text (`text-align: center`,
inherited down to `.closing-left-text`'s child ``s — no extra
selector needed); `.closing-center`'s follow cluster centers via
`justify-content: center` (was `flex-start`, i.e. left-hugging);
`.closing-copyright` (in `.closing-right`) gets an explicit
`text-align: center` override below, since its own base rule sets
`text-align: right` for the desktop/tablet right-anchored column. */
.closing-left { flex: none; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
/* `.display`'s own base rule (skewX(-8deg) scaleX(0.93), unscoped,
shared by every headline/wordmark on the page) sets `transform-
origin: left center` — fine for left-aligned text, but under
`text-align: center` above it skews the rendered glyphs off-center
(measured ~7px at this size): the shear pivots from the PRE-
transform box's left edge, which no longer coincides with the
centered box's own visual center once text-align moved it.
`center center` keeps the skew's pivot at the box's own middle, so
centering it via text-align and shearing it both agree on where
"center" is. */
.closing-left-text .display { transform-origin: center center; }
.closing-logo { height: 32px; }
.closing-right { flex: none; }
.closing-copyright { text-align: center; }
.closing-center { justify-content: center; }
.closing-follow-cluster .nav-social a { width: 40px; height: 40px; }
/* Decorative sheet elements shrink at tablet/phone — content never
overlaps them, corner pieces scale down rather than dominating a
narrow viewport. */
.nav-corner-brush { width: 120px; top: -34px; left: -26px; }
.nav-brand { width: 128px; }
/* left:0 resets the DESKTOP-only bake's left:-21px (nav-brand-logo's
base rule) — that offset is sized against the desktop nav-brand box
and isn't meant to carry into tablet's own independently-tuned nav. */
.nav-brand img.nav-brand-logo { height: 84px; top: 8px; left: 0; }
/* UNCUT-ART round: same method as the desktop rule above (own tuning
search per tier, verified 0% solid-ink-under-glyph at 768/900/1024/
1100) — width is vw-relative so the art genuinely scales with the
column ("take the whole space," not a timid fixed sliver), clamped
so it doesn't overshoot into the headline at 1100. No clip-path. */
.hero-left-strokes { width: clamp(280px, 42vw, 400px); top: 4px; left: -100px; }
.hero-left-halftone { width: clamp(150px, 24vw, 210px); top: 170px; left: -60px; }
/* single-column tablet/phone layout has no safe side margin for the
halftone to sit in without landing behind full-width text — dropped
rather than risk the contrast law (corner pieces may shrink or drop
on phone; this is the same allowance, applied one tier earlier). */
.hero-halftone { display: none; }
/* EDGE-BLEED-FIX round: now positioned against .hero (full width) at
every tier, not .hero-right — px/vw clamp instead of %-of-column. */
/* MOBILE RECOMPOSE round: this piece was anchored to the BOTTOM of
.hero on the assumption the video panel was the last item in the
stack (true under the old shrunk-desktop order). This round's
reorder (see the top of this media block) puts the value-points row
AFTER the video, so a bottom-% anchor now lands the sweep across
that row's text instead — confirmed live (REAL STRATEGY / REAL SKILL
partly painted over, no z-index fix cleanly resolved it since the
art and the text share the same visual band by construction, not by
stacking order). Dropped at this tier rather than re-tuned: per the
owner's own "small screens recompose, brand vibe carries over — some
pieces may hide on phone if they'd clutter" law, this is exactly a
decorative accent whose desktop anchor point (bottom of a short
column) no longer exists once the column is this much taller and has
real content stacked where the accent used to safely bleed. The
video panel's own red backing plate + the value-points row's own new
border-top hairline (added above) carry the section-break energy
here instead. */
.hero-right-sweep { display: none; }
/* BAKE ROUND 6 (2026-08-18): its replacement (.hero-right-sweep-v2)
follows the exact same tablet/phone-drop precedent this rule set for
the old piece — same reasoning (decorative accent, no safe anchor
once the column recomposes to a taller single-column stack). */
.hero-right-sweep-v2 { display: none; }
.closing-corner-brush { width: 150px; bottom: -20px; right: -20px; }
}
/* PHONE fine-tuning — purpose-built 390-767px composition (not a shrunk
desktop/tablet), per the owner's standing "small screens recompose"
law and LANDING_SPEC.md §30's mobile order (see the ≤1100px block's own
MOBILE RECOMPOSE comment for the cross-container reorder mechanism —
`order` values there already apply at this tier too, since this block
nests inside the same cascade). */
@media (max-width: 767px) {
.nav { height: 64px; padding: 0 14px; }
.nav-brand { width: 100px; }
/* left:0 resets the DESKTOP-only bake's left:-21px, same reason as the
tablet override above.
HEADLINE-CLEAR FIX (2026-08-18, owner: "the words COMING and SOON
must be 100% unobstructed... the headline is the page's primary
message; the decoration yields, never the words"): this logo used to
deliberately overflow PAST the nav's own 64px box (old height:76px at
top:4px = bottom 80px, 16px into the hero) per a 2026-08-16 ruling
("the navbar logo, it shouldn't be constrained by the navbar size").
That overflow now lands squarely on top of the one-line headline
(MOBILE-REDESIGN round moved COMING/SOON right up near the top of the
hero) — confirmed via a controlled pixel-isolation test (own
Playwright script, apps/landing/scratch-verify/headline-clear-proof.png):
hiding `.nav-left-strokes`/z-indexing it changed NOTHING (that decorative
piece was already painting behind the headline correctly), but hiding
`.nav-brand-logo` alone cleared "COMING" from a crossed-out "C●●●ING"
to fully readable — proof the logo itself was the culprit, not a
z-index ordering problem `.hero`'s own stacking context could ever
fix (`.nav` carries z-index:20, a stacking context main/.hero never
competes in). Root cause found, not assumed. FIX: this ruling
supersedes the 2026-08-16 "let it overflow" call AT PHONE TIER ONLY
(tablet/desktop keep their own overflow untouched) — the logo now
stays fully INSIDE the nav's own 64px box (height 56px + top 4px =
bottom 60px, 4px of clear margin) so it can never reach the headline
zone below it, regardless of hero content or nav's own z-index. */
.nav-brand img.nav-brand-logo { height: 56px; top: 4px; left: 0; }
/* TAP TARGETS: the icon glyph stays visually compact (28px, matches the
nav's own small scale) but the clickable anchor grows to a full 44px
square around it (WCAG 2.5.5/2.5.8 "comfortable" floor) — img sizes
itself via the existing `.social-icon img { width:100%; height:100% }`
rule, so centering the smaller glyph inside the bigger tap box is
just flex centering, no separate padding math. */
.nav-social { gap: 4px; }
.nav-social a.social-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.nav-social a.social-icon img { width: 28px; height: 28px; }
/* MOBILE-REDESIGN round (2026-08-18, owner verbatim, superseding the
prior phone composition outright — "is this the mobile version? it's
really bad" — then specific direction: "COming soon become one line,
move the video after coming soon and the nxt generatoin... yellow
button maybe move all the way to the bottom of the page. THose three
icons, either make them all smaller so it could fit altohgether
horizontally, or center in the middle one by one. center/middle all
description for the three features under each of the photo"):
1) COMING SOON — ONE LINE. Overrides the shared ≤1100px block's
`.hero-kicker .l1, .l2 { display: table }` (which forced the
stacked two-line layout) back to `inline-block` so both words sit
in one row again, sized to actually fill the column width like a
poster headline rather than shrinking to accommodate two stacked
lines. COMING keeps its existing 0.52em/black vs SOON's 1em/red
ratio (.hero-kicker .l1/.l2 base rule) — same styling language as
desktop, just reflowed onto one line. Verified live at 390-767px:
no clipping, no wrap, comfortable margin both sides. */
.hero-kicker {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: nowrap;
white-space: nowrap;
gap: 0.14em;
font-size: clamp(30px, 12.2vw, 46px);
line-height: 0.88;
transform-origin: center center;
}
.hero-kicker .l1, .hero-kicker .l2 { display: inline-block; transform-origin: center center; }
/* PHONE HEADLINE FIX (2026-08-19, owner verbatim with screenshot:
"coming soon should be both the same size for only mobile version.
and they are center and middle in one line") — supersedes his own
saved "hero-headline"/"hero-headline-line1"/"hero-headline-line2"
tweak-editor entries outright: those were his own hand attempts at
this exact fix and the screenshot shows the broken result (COMING
rendered huge off a 1.85x line-scale, overlapping the nav
logo/FOLLOW US cluster; SOON comparatively tiny; the pair off-
center) — discarded, not baked. PHONE TIER ONLY (≤767px); desktop's
own deliberate SOON-bigger-than-COMING ratio (base `.hero-kicker
.l1{font-size:0.52em}` / `.l2{font-size:1em}`, WIDTH-MATCH round) is
untouched — this override sets l1 to the SAME 1em as l2 only inside
this ≤767px block, so ≥768px never sees it. Equal sizing widens the
combined "COMING SOON" line considerably (l1 was 52% width before),
so the block's own font-size ceiling comes down from the one-line
round's 46px to 34px — measured live to keep the full two-word line
inside the ~350px safe column (390px viewport minus .hero's own
20px×2 padding) with real margin at both 390 and 430px, no clipping,
no overlap with the logo or FOLLOW US cluster above it. `justify-
content: center` (already on the base rule) keeps the line centered
on the phone's single centered axis; no position offset needed. */
.hero-kicker { font-size: clamp(40px, 15.5vw, 60px); }
.hero-kicker .l1 { font-size: 1em; }
/* CLIP FIX (one-line headline round): l2's own base rule sizes it at
1em of .hero-kicker's font-size while l1 sits at 0.52em on the SAME
baseline (align-items: baseline) — l2 is taller and its ascender
reaches noticeably higher than the box's own layout-flow top, so the
old 6px margin (tuned for the STACKED two-line layout, where the
subhead only ever had to clear l2's flow position, not its full
glyph height) left the subhead's first line genuinely overlapping
COMING/SOON's descenders — confirmed live via getBoundingClientRect
(sub.top landed ~12px above the kicker's own bottom edge). Widened
to give real clearance at every width in this tier. */
/* PHONE-CENTER round (2026-08-18, owner: headline+subhead crop showed
both left-aligned, "it can't be one part is on the left, the other
is on the right"): `.hero-kicker` above gets `justify-content:
center` (was flex-start-by-default, so COMING/SOON hugged the
column's left edge) plus `transform-origin: center center` (was
`left center` — the CLIP FIX below needed the scaleX(1.1)/skewX
stretches pinned to the left edge specifically so they'd only ever
grow rightward off a left-hugging line; centered content needs the
opposite — growing symmetrically off the line's own center so the
stretch never re-introduces a left/right imbalance). `.hero-sub`
gets `text-align: center` (its own base rule sets no text-align at
all, i.e. browser-default left) plus the same `transform-origin:
center center` override for its skewX (base rule: `left center`). */
/* SUBHEAD-ONE-LINE round (2026-08-18): "Own horses. Train champions.
Race for glory." is nowrap at every width down to 390px — the old
13px sizing (tuned for a two-line wrap) overshoots the ~350px column
(390 viewport - .hero's own 20px×2 padding) at that length; re-tuned
down + a small width safety margin via clamp so it also shrinks a
touch further on genuinely narrow phones below 390. Live-verified
(own dev server) fits on one line, no wrap, at 390/430/767px. */
.hero-sub { font-size: clamp(10.5px, 3vw, 13px); margin-top: 22px; text-align: center; transform-origin: center center; white-space: nowrap; }
/* PHONE BAKE ROUND 1 (2026-08-19): folds in the owner's saved
"hero-subhead" tweak (translate only, no scale/rotate) — first
phone-tier position bake on this element, added as a fresh
position:relative left/top on top of the base rule's own
margin-top/text-align/transform-origin (all untouched). */
.hero-sub { position: relative; left: 2.1015625px; top: 14.28125px; }
/* CTA-RETIRED / YELLOW-RULE round (2026-08-18): centers the rule on the
page's single centered phone axis (owner's standing PHONE-CENTER law)
— the base rule's plain block/left-aligned-by-default box would
otherwise sit flush against the column's left edge while everything
around it (headline/subhead) is centered. `margin: auto` needs an
explicit width narrower than the column to have room to center inside
— reused the same clamp shape as the base rule, just a touch narrower
so it doesn't collide with the 20px hero side padding at the smallest
phones. */
.hero-sub-rule { display: block; width: clamp(120px, 40vw, 190px); margin: 14px auto 0; }
/* CLIP FIX's old left-edge headroom (12px margin-left, max-width cap)
is DROPPED here for the same reason as `.hero-headline-block`'s
identical fix further up this media block — see that rule's own
PHONE-CENTER comment. Centered content grows symmetrically off its
own center now, not rightward off a pinned left edge, so the extra
margin would just push the whole block off-center instead of
protecting anything. */
.hero-headline-block { max-width: 100%; margin-left: 0; transform-origin: center center; }
/* 2) VIDEO MOVES UP — directly after COMING SOON + the subhead, before
the value points (supersedes LANDING_SPEC.md §30's CTA-before-
video order at PHONE tier only; TABLET keeps the old order). The
headline block already carries the subhead as its own child (h1 +
p), so ordering the block once covers both. */
.hero-headline-block { order: 1; }
.hero-video-wrap { order: 2; }
.hero-features { order: 3; }
/* CTA-AFTER-VIDEO round (2026-08-18, owner verbatim: "for mobile, move
this yellow CTA to after hero video" — SUPERSEDES the PHONE-BOTTOM-CTA
round's "move it all the way to the bottom of the page" ruling, and
with it the whole "hide the in-hero CTA, show a bottom-of-page DOM
duplicate instead" mechanism: `.hero .hero-cta { display: none }` and
the separate `.mobile-bottom-cta` block are BOTH gone (see index.html —
the duplicate `
` was deleted outright,
not just hidden). The value points are gone too this round, so `order:
3` here — one past the video's own `order: 2` — lands the ONE real
`.hero-cta` (still living inside `.hero-left`, `display: contents`
flattens it into this same flex list per the MOBILE RECOMPOSE round's
mechanism) directly after the video, exactly where it needs to be;
`.hero-features`'s own `order: 3` above is moot dead weight now (the
row never renders) so there's no real collision to resolve. */
.hero-cta { order: 3; }
/* FULL-WIDTH HERO VIDEO (spec §30: "Hero video nearly full width" on
mobile) — bleeds past .hero's own 20px side padding via a negative-
margin/calc-width pair (the standard edge-bleed-inside-a-padded-
parent technique), same edge-bleed law the corner art already
follows elsewhere on this page. Panel art (red backing plate/black
frame quads) is all internally-percentage-based so it stretches with
the wider box for free — verified no clipping at 390-767px. */
.hero-video-wrap {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
margin-top: 4px;
}
/* 3) THE CTA ITSELF, now positioned right after the video (see the
`order: 3` rule above) rather than duplicated at the page bottom.
Full width, centered (owner's standing phone-centering law),
decoupled from the 482:98 brush-art aspect ratio the same way the
desktop tier now is (`aspect-ratio: auto` + an explicit min-height
+ `.cta-pill-bg { object-fit: fill }`) so there's real room for
the 2.5x-scaled icon row below the main label. */
/* CTA-AFTER-VIDEO / ICON-2.5X rounds (2026-08-18). EDGE-TO-EDGE WIDTH:
the icon row alone (3 x 65px icons — see the 2.5x sizing below — plus
gaps) needs ~223px, which doesn't fit inside the safe zone's 60%-of-
width allowance when the bar is capped at .hero's own 350px content
box (390px viewport - 20px x2 padding = 210px safe-zone, narrower
than the icon row itself). Fixed the same way `.hero-video-wrap`
already bleeds past `.hero`'s own side padding (calc(100% + 40px) +
matching negative margins) — the CTA now runs edge-to-edge with the
video above it, giving the safe zone real room (234px at 390,
258px at 430) for the icon row plus margin. */
.hero-cta {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
margin-top: 20px;
margin-bottom: 0;
}
.cta-pill-bg { object-fit: fill; }
/* "make the yellow button bigger" (this is the same button, now living
after the video instead of at the page bottom) + the 2.5x icon pass
both push height up: dropping the 482:98 aspect-ratio (already
decoupled here via `.cta-pill-bg { object-fit: fill }`) for an
explicit min-height with real room for the main label row + the
65px-tall icon row below it (safe-zone math: 58% of 175px = 101.5px,
comfortably above the ~95px the two rows + their gap need). */
.hero-cta { aspect-ratio: auto; min-height: 175px; }
.cta-copy { gap: 10px; }
.hero-cta .cta-main { font-size: 17px; }
/* ICON-2.5X round (2026-08-18, owner verbatim: "those social media
icons in the yellow art, need to 2.5x the size" — measured against
the prior shipped phone sizing: a 26px glyph inside a 44px tap
target). 26px -> 65px glyph; the tap target grows to match (65x65,
no separate padding needed — a 65px hit area already clears the
≥44px law on its own with margin to spare, so the "bigger tap target
than visible glyph" pattern the pre-2.5x version needed is no longer
necessary — glyph and hit area are simply the same box now). */
.cta-social-icon { width: 65px; height: 65px; }
.cta-social-icon img { width: 65px; height: 65px; }
.cta-social-row { gap: 14px; }
/* 4) VALUE POINTS — stacked full-width rows (chosen over squeezing all
three into one horizontal row: at 390px a 3-column split leaves
only ~110px per column, which would force icons down around
~20px and labels near 10px to keep the existing 2-line captions
from re-wrapping — losing the icon presence and legibility this
law protects). 2-line label law intact (each row is the FULL
column width, not a squeezed 45% half). */
.hero-features { justify-content: center; }
/* PHONE-CENTER round (2026-08-18, owner crop: "Fast Paced Races" /
"Real Strategy Real Skill" / "Play To Win Earn Rewards" rendered
RAGGED — each row's icon sat at a different x position. ROOT CAUSE:
the prior fix (`flex: 1 1 100%; justify-content: center`) centered
each icon+label PAIR independently within the row's full column
width — but the pair's own natural content width is the label's
own longest rendered line (`white-space: nowrap`, base rule), which
differs row to row ("Real Strategy" measures wider than "Fast
Paced"), so centering three DIFFERENT-width pairs inside the SAME
column width lands their icons at three different x offsets even
though each pair is genuinely centered on its own. FIX: give every
row the SAME fixed content width instead (`width`, sized to clear
the widest label — "Real Strategy"/"Earn Rewards" — with margin to
spare) and left-align icon+label WITHIN that shared box
(`justify-content: flex-start`) — three identical-width boxes,
each centered as a block via `margin: 0 auto` (auto-centers on its
own flex line since `.hero-features`'s `flex-wrap: wrap`, first
block above, puts each fixed-width row alone on its own line), so
the icons end up sharing one vertical axis AND the group as a whole
still reads centered on the page — the "left-align text within a
centered fixed-width group" option from the owner's two offered
approaches, chosen because independently re-centering each pair
(the other option) can't fix a per-row content-width mismatch by
construction. */
.hero-feature {
flex: 0 0 auto;
width: 230px;
max-width: 84vw;
margin: 0 auto;
justify-content: flex-start;
border-left: none !important;
padding-left: 0 !important;
border-top: 1px solid var(--line);
padding-top: 10px;
}
.hero-feature:first-child { border-top: none; padding-top: 0; }
.hero-feature .icon { width: 30px; }
.hero-feature .label { font-size: 13px; text-align: left; }
/* 5) FEATURE CARD CAPTIONS — centered under each screenshot (owner:
"center/middle all description for the three features under each
of the photo"). Title tab stays where it is (baked into the frame
art's own cream strip, unrelated to this). */
.feature-desc { text-align: center; }
.closing-center { gap: 10px; }
/* Closing band's own follow cluster — same 44px tap-target treatment as
the nav's, scoped to this tier only (desktop/tablet keep their own
already-comfortable 40px+ sizing from the shared ≤1100px rule). */
.closing-follow-cluster .nav-social a.social-icon { width: 44px; height: 44px; }
.closing-follow-cluster .nav-social a.social-icon img { width: 26px; height: 26px; }
.nav-corner-brush { width: 92px; top: -24px; left: -20px; }
/* UNCUT-ART round: same method, verified 0% solid-ink-under-glyph at
390/480/600/767 — vw-relative width, clamped.
HEADLINE-CLEAR FIX (2026-08-18): ROOT CAUSE FOUND via pixel-isolation
(own Playwright script, apps/landing/scratch-verify/) — this was NOT
fixable by z-index. `.hero-headline-block` was given `position:
relative; z-index: 2` (MOBILE-REDESIGN round) specifically so it
should out-stack this streak (`z-index: 1`, base rule) inside `.hero`'s
shared stacking context — but `.hero-headline-block` is adopted into
`.hero`'s flex flow through `.hero-left { display: contents }` (the
cross-container reorder mechanism), and a live experiment proved
z-index has ZERO effect on the paint order in that configuration:
forcing `.hero-left-strokes` to `z-index: -5` produced a byte-for-byte
IDENTICAL screenshot to the unmodified z-index:1 baseline — a real
browser stacking-context quirk with `display: contents`-adopted
children, not a CSS mistake to fix with more z-index. So this is a
LAYOUT fix instead, per the owner's own fallback instruction ("move/
scale the corner art off the headline's zone"): pulled up from
top:-6px to top:-85px, which tucks the streak's dense body up behind
the nav/logo corner — swept top values -40/-55/-70/-85px, each
screenshotted with the streak repositioned vs. fully hidden and
diffed pixel-for-pixel; -85px is the first value with ZERO changed
pixels (200/400/85% of the sweep still crossed real glyph pixels).
Halftone (`.hero-left-halftone`, below) was independently confirmed
clear of the headline crop already (hiding it changes nothing there)
— untouched. */
.hero-left-strokes { width: clamp(200px, 60vw, 300px); top: -85px; left: -70px; }
.hero-left-halftone { width: clamp(110px, 34vw, 160px); top: 118px; left: -50px; }
/* .hero-right-sweep stays display:none here too — set at the shared
≤1100px tier above, see that rule's own comment. */
.closing-corner-brush { width: 110px; bottom: -14px; right: -14px; }
/* SUBHEAD-AFTER-VIDEO round (2026-08-19, owner verbatim: "for mobile,
move own horses. train champions....and the yellow line to after
hero video" — NEW PHONE ORDER: logo/social -> COMING SOON -> hero
video -> subhead -> yellow rule -> feature cards -> closing/footer.
PHONE-tier only (this file's existing max-width:767px block);
desktop/tablet (>=768px) keep their prior order UNTOUCHED — this
block adds nothing above 767px.
MECHANISM: `.hero-headline-block` (h1 + subhead + rule, previously
ordered as ONE unit ahead of the video) becomes `display: contents`
— the SAME cross-container reorder technique `.hero-left`/
`.hero-right` already use above (MOBILE RECOMPOSE round) — so its
children (`.hero-kicker`, `.hero-sub`, `.hero-sub-rule`) become
direct flex items of `.hero` and can each carry their own `order`,
independent of the video that used to sit after the whole block. */
.hero-headline-block { display: contents; }
.hero-kicker { order: 1; }
/* .hero-video-wrap stays order: 2 (unchanged, set earlier in this same
media block). */
.hero-sub { order: 3; }
.hero-sub-rule { order: 4; }
/* Z-INDEX SHIELD, mirrored from the identical fix already applied to
.hero-cta/.hero-video-wrap/.hero-features above (that comment's own
"Z-INDEX SHIELD FIX" — NOT the separate HEADLINE-CLEAR FIX above,
which found z-index literally inert on an element that is ITSELF
display:contents-adopted from a contents ancestor two levels up;
`.hero-kicker` here is a REAL box promoted only one level, the same
configuration `.hero-cta`/`.hero-video-wrap`/`.hero-features` already
use z-index successfully in): once `.hero-headline-block` stops
generating a box, `.hero-kicker` needs its own position:relative to
keep painting above the decorative left-edge art inside `.hero`'s
shared stacking context. `.hero-sub`/`.hero-sub-rule` don't need the
same shield — their new position (after the video) renders well
clear of the decorative art's own bounding box (verified live, see
scratch-verify/mobile-390-full.png / mobile-430-full.png). */
.hero-kicker { position: relative; z-index: 2; }
/* GAP TUNING: `.hero`'s own flex `gap` (20px) now applies uniformly
between every order-adjacent pair, including the two new adjacencies
this round introduces (video->subhead, subhead->rule) — previously
subhead/rule's spacing came entirely from their own margin-top (22px/
14px) inside `.hero-headline-block`'s plain block flow, with no video
adjacency to consider. Live-verified so headline->video keeps its
original ~20px rhythm (.hero-kicker carries no margin of its own,
unchanged), video->subhead reads as one deliberate ~20px gap (not
cramped, not a hole), and subhead->rule keeps its original ~14px
"attached pair" gap despite the extra 20px flex gap now also landing
between them (14px target minus the 20px flex gap it stacks on top
of = -6px). */
.hero-sub { margin-top: 0; }
.hero-sub-rule { margin-top: -6px; }
/* PHONE BAKE ROUND 1 (2026-08-19) — DISCARDED, not baked: the owner's
saved "callout-ink-splash" (`.hero-tagline-bg`, translate
[-44.14327748615966, 132.96087416493975] + scale 1.2) and
"hero-callout-text" (`.hero-tagline-copy`, translate [7.15625,
143.203125]) tweaks were live-verified at 390px and land BOTH
elements ~130-150px below `.hero-tagline`'s own small 120x55.6px
callout box (which itself sits inside `.hero-video-wrap`, bottom
384.56px) — the splash and its text end up floating alone in blank
cream page space below the video (bg rect top 449.8/bottom 516.5,
copy rect top 472.25/bottom 514.5), completely detached from the
callout box that anchors and clips them, same broken-hand-edit
pattern as the headline entries above. Discarded rather than baked;
left for the owner to redo deliberately once the headline fix
lands and he can see the callout clearly again. */
/* PHONE BAKE ROUND 2 (2026-08-19) — DISCARDED AGAIN, not baked: the
owner's second saved session, made after the corner-pin fix above
(`.hero-tagline { right: 2%; bottom: 3%; }`) was already live —
"callout-ink-splash" (`.hero-tagline-bg`, translate [18.58203125,
27.08203125], scale 1.25) and "hero-callout-text"
(`.hero-tagline-copy`, translate [14.625, 25.8984375], rotate -12).
Live-verified (own dev server, port 5437) against `.hero-video-wrap`
at both 390 and 430px: `.hero-tagline-bg`'s rendered rect runs past
the panel's own right edge by ~26px and past its bottom edge by
~27px at both widths (390: right 415.79 vs panel 390, bottom 412.02
vs panel 384.56; 430: right 456.11 vs panel 430, bottom 434.37 vs
panel 407.06); `.hero-tagline-copy` clears the right edge (390: 0.53px
over — effectively flush; 430: 0.74px clear) but its own bottom runs
~22-23px past the panel bottom at both widths (390: 407.23 vs
384.56; 430: 429.31 vs 407.06). Both pieces land partly outside the
video panel — a real collision, not a rendering illusion — so this
session is discarded rather than baked, same call as Round 1; the
corner-pin position stays exactly as shipped. */
}