pulls the emphasis phrase into italic. */
.hero-title {
font-family: var(--font-display);
font-size: clamp(44px, 5.2vw, 68px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 var(--space-md);
max-width: 580px;
}
.hero-title em {
font-style: italic;
/* italic variant already carries the emphasis; a coral tint would
over-emphasize when the Abertura date owns the coral anchor. */
}
/* Supporting lede — body face , quieter than H1. Sits
between the headline and the spec line. */
.hero-lede {
font-family: var(--font-body);
font-weight: 400;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--ink-soft);
max-width: 540px;
margin: 0 0 var(--space-md);
}
/* At narrow viewports the two-sentence lede (~38 chars for the first
sentence at 18px Poppins ≈ 376px) exceeds the 335px content width of
a 375px viewport. Two-pronged fix: (1) hide the forced
so the
browser wraps text naturally at word boundaries; (2) drop font-size a
touch so even non-breaking tokens fit the column. */
@media (max-width: 480px) {
.hero-lede { font-size: 15px; line-height: 1.45; }
.hero-lede br { display: none; }
}
/* Rates — plain inline mono prose. Newspaper by-line feel. Sprite was
moved to the .hero-date companion role; inline-32px-beside-13px-text
was structurally too small to read. */
.hero-rates {
font-size: var(--fs-13);
letter-spacing: 0.04em;
color: var(--color-ink-muted);
margin: 0 0 var(--space-xl);
line-height: 1.4;
}
/* Action zone — groups the Abertura date + CTA row into one visual anchor
at the bottom of the copy column, so the eye lands on "when + what to do"
as a pair rather than two disconnected blocks. */
.hero-action {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
/* Abertura launch stamp: the label + date form a vertical lockup (kicker
above the Pirata numerals) so they read as ONE unit. Sprite companion
sits to the right at ~56px, giving the stamp a game-landing gem. */
.hero-date {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
}
.hero-date__stamp {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1;
}
.hero-date__sprite {
width: 56px;
height: 56px;
flex-shrink: 0;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.hero-date__label {
font-size: var(--fs-11);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.hero-date__value {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(40px, 4.4vw, 56px);
letter-spacing: -0.02em;
/* 1.0 clipped descenders/ascenders at display-face sizes; 1.05 gives
just enough breathing without breaking the date's compact read. */
line-height: 1.05;
color: var(--color-accent);
}
.hero-cta-row {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
/* Right-column emblem — the logo-full mandala becomes the hero's compositional
centerpiece. Sage radial wash
provides depth without the drop-shadow that forbids on cards. */
.hero-main__media {
display: grid;
place-items: center;
padding: 0;
}
.hero-emblem {
position: relative;
width: 100%;
max-width: 520px;
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
/* Radial wash: sage-50 at center, transparent toward the edges. Keeps the
mandala floating on a warm field without a hard frame. */
background:
radial-gradient(
circle at center,
var(--sage-50) 0%,
color-mix(in srgb, var(--sage-100) 60%, transparent) 40%,
transparent 72%
);
}
.hero-emblem__logo {
width: clamp(280px, 36vw, 440px);
height: auto;
aspect-ratio: 1 / 1;
display: block;
/* Subtle drop-shadow-as-glow using the cool-ink tint ( reserves
shadows for modals/popovers; the emblem is arguably the hero's
popover-equivalent focal element — one exception, kept tiny). */
filter: drop-shadow(0 8px 24px rgba(26, 31, 28, 0.08));
}
/* Character sprite staged in front of the emblem. Positioned bottom-left
of the wash so it overlaps the edge — the character "stands before the
sigil," which is a classic game-landing composition move for scale
reference + narrative. Scale is game-landing readable (~96–160px),
unlike the prior 32px inline sprite that vanished. */
.hero-emblem__character {
position: absolute;
bottom: 8%;
left: 4%;
width: clamp(160px, 18vw, 280px);
height: auto;
image-rendering: pixelated;
image-rendering: crisp-edges;
/* Subtle ground shadow so the character reads as planted, not floating.
Uses the cool-ink rgba to stay cohesive with neutrals. */
filter: drop-shadow(0 6px 4px rgba(26, 31, 28, 0.18));
z-index: 2;
pointer-events: none;
}
@media (max-width: 960px) {
.hero-emblem__character {
width: clamp(120px, 22vw, 200px);
bottom: 4%;
left: 6%;
}
}
/* Responsive:
- 1180px : tighten gap, shrink emblem a notch
- 960px : collapse to single column; emblem sits FIRST on mobile so the
brand identity leads before the declaration.
- 640px : hide the radial wash (saves render cost) and compact emblem. */
@media (max-width: 1180px) {
.hero-main {
grid-template-columns: 1.4fr 1fr;
gap: var(--space-xl);
}
.hero-emblem__logo { width: clamp(240px, 30vw, 360px); }
}
@media (max-width: 960px) {
.hero-main {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
/* Reorder: emblem sits above the text on mobile. Copy second so H1 is
still the second scan element (not the fourth as in the prior layout). */
.hero-main__media { order: -1; }
.hero-emblem { max-width: 360px; margin: 0 auto; }
.hero-emblem__logo { width: clamp(200px, 50vw, 320px); }
}
@media (max-width: 640px) {
.hero-emblem { background: none; max-width: 280px; }
.hero-emblem__logo { width: clamp(180px, 60vw, 260px); filter: none; }
}
/* ---- Sistemas ---- */
.sistemas-intro {
margin-bottom: var(--space-xl); /* 48 — section padding already provides outer gap */
max-width: 720px;
}
.sistemas-intro .eyebrow { margin-bottom: 20px; }
.sistemas-intro h2 {
font-size: clamp(44px, 5.2vw, 80px);
}
/* : sistemas-intro h2 em styles moved to consolidated .display em rule (line ~70). */
/* Feature list — editorial data-sheet rhythm (matches hero-specs-table and
download-panel). H3 in fixed label track, flows into the rest. */
.feature-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--color-border);
}
.feature {
display: grid;
grid-template-columns: minmax(220px, 1fr) 2fr;
gap: 56px;
padding: 40px 0;
border-bottom: 1px solid var(--color-border);
align-items: baseline;
position: relative;
}
.feature h3 {
font-size: clamp(24px, 2.6vw, 32px);
line-height: 1.1;
margin: 0;
}
.feature p {
font-size: var(--fs-17);
line-height: 1.6;
color: var(--ink-soft);
max-width: 58ch;
margin: 0;
}
/* Sistemas marginalia — sprite sits to the LEFT of h3 at h3's top y-position.
H3 on marked rows is indented by 48 + var(--space-sm) to carve the slot.
Placeholder skin (hatch + coral dot + mono label) inherited from .sprite-box. */
.feature__mark {
position: absolute;
top: 40px; /* matches .feature padding-top so sprite top-aligns with h3 top */
left: 0;
width: 48px;
height: 48px;
}
.feature-mark {
width: 48px;
height: 48px;
object-fit: contain;
image-rendering: pixelated;
}
.feature--has-mark h3 {
padding-left: calc(48px + var(--space-sm));
}
/* Feature body wraps
+ optional wiki-link so both share col 2 of the feature grid.
Flex column preserves h3↔p baseline alignment via p being the first-baseline anchor. */
.feature__body {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.feature-wiki-link {
display: inline-block;
align-self: flex-start;
font-family: var(--font-body);
font-size: var(--fs-12);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-accent-strong);
text-decoration: none;
transition: color .18s ease;
}
.feature-wiki-link:hover,
.feature-wiki-link:focus-visible {
color: var(--ink);
outline: none;
}
.feature-wiki-link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: 2px;
}
@media (max-width: 760px) {
.feature {
grid-template-columns: 1fr;
gap: 14px;
padding: var(--space-lg) 0;
}
.feature__mark {
position: static;
display: block;
margin-bottom: var(--space-sm);
}
.feature--has-mark h3 {
padding-left: 0;
}
}
/* ---- Classes ---- */
/* Classes section uses .wash-ink from scaffold — dark bg + cream text, inherited */
/* Left — intro + selected-class detail */
.classes-eyebrow {
margin-bottom: var(--space-eyebrow-gap);
color: rgba(247, 236, 214, 0.5);
}
.classes-eyebrow .classes-eyebrow__num {
color: var(--color-accent-subtle);
}
.classes-heading {
font-size: clamp(52px, 6vw, 88px);
color: var(--color-surface);
margin-bottom: var(--space-md);
line-height: 0.95;
}
.classes-heading em {
color: var(--color-accent-subtle);
font-style: italic;
}
.classes-intro {
font-size: var(--fs-17);
line-height: 1.6;
color: rgba(247, 236, 214, 0.7);
margin-bottom: var(--space-lg);
max-width: 440px;
}
/* Classes head — intro block sits full-width above the grid. */
.classes-head {
max-width: 720px;
margin-bottom: var(--space-xl);
}
/* ---- Tile grid (18 classes, 6 cols × 3 rows on desktop) ---- */
.classes-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
background: rgba(247, 236, 214, 0.12); /* the seam between tiles */
border: 1px solid rgba(247, 236, 214, 0.12);
margin-bottom: var(--space-md); /* tight seam to the panel below */
}
.class-tile {
appearance: none;
background: var(--ink);
border: none;
color: var(--color-surface);
padding: var(--space-md) var(--space-sm);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
font: inherit;
text-align: center;
transition: background .15s, color .15s;
position: relative;
min-width: 0;
}
.class-tile:hover {
background: color-mix(in srgb, var(--ink) 85%, var(--color-accent-subtle) 15%);
}
.class-tile:focus-visible {
outline: 2px solid var(--color-accent-subtle);
outline-offset: -2px;
}
.class-tile--active {
background: var(--color-accent-subtle);
color: var(--ink);
}
.class-tile--active:hover {
background: var(--color-accent-subtle); /* no hover shift once selected */
}
/* Party icon from the wiki — small pixelated sprite, 22×22 original. */
.class-tile__icon {
width: 22px;
height: 22px;
image-rendering: pixelated;
flex-shrink: 0;
opacity: 0.9;
}
.class-tile--active .class-tile__icon {
opacity: 1;
}
.class-tile__name {
font-family: var(--font-display);
font-size: var(--fs-17);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.1;
overflow-wrap: anywhere;
}
.class-tile__flag {
position: absolute;
top: 6px;
right: 8px;
font-size: 9px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(247, 236, 214, 0.4);
}
.class-tile--active .class-tile__flag {
color: rgba(42, 51, 73, 0.55);
}
/* ---- Panel stage ---- */
.classes-stage {
margin-bottom: var(--space-xl);
}
.class-panel {
border: 1px solid rgba(247, 236, 214, 0.15);
padding: var(--space-xl);
/* width matches the tile grid above — no artificial max-width */
}
.class-panel__head {
margin-bottom: var(--space-lg);
padding-bottom: var(--space-md);
border-bottom: 1px solid rgba(247, 236, 214, 0.12);
display: flex;
align-items: center;
gap: var(--space-lg);
}
.class-panel__head-copy { min-width: 0; flex: 1 1 auto; }
/* Parent-class sprite — renders only when the file in the `sprite` field is present.
Sits to the left of the title as the visual anchor. Source GIFs have varying intrinsic
sizes; lock a uniform square "stage" via fixed box + object-fit: contain so every class
lands at the same visual footprint. Bottom-anchored so taller sprites grow upward from
a consistent baseline. */
.class-panel__sprite {
width: 120px;
height: 120px;
flex-shrink: 0;
align-self: center;
object-fit: contain;
object-position: center bottom;
}
.class-panel__name {
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1;
color: var(--color-surface);
margin: 0;
letter-spacing: -0.02em;
}
/* "Parent / Self" title: parent in coral accent, slash muted, self full-bright. */
.class-panel__parent {
color: var(--color-accent-subtle);
font-weight: 500;
}
.class-panel__slash {
color: rgba(247, 236, 214, 0.3);
font-weight: 400;
margin: 0 0.1em;
}
.class-panel__self {
color: var(--color-surface);
}
/* Skill rows — one skill = name + Original row + Edda row. */
.class-skills {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.class-skill {
display: grid;
grid-template-columns: 168px 1fr;
column-gap: var(--space-md);
row-gap: 6px;
align-items: baseline;
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(247, 236, 214, 0.08);
}
.class-skill:last-child {
border-bottom: none;
padding-bottom: 0;
}
.class-skill__name {
font-family: var(--font-display);
font-size: var(--fs-17);
font-weight: 500;
color: var(--color-accent-subtle);
letter-spacing: -0.005em;
grid-column: 1 / 2;
grid-row: 1 / span 2;
align-self: start;
overflow-wrap: anywhere;
display: flex;
align-items: center;
gap: 10px;
}
.class-skill__icon {
width: 56px;
height: 56px;
image-rendering: pixelated;
flex-shrink: 0;
background: rgba(247, 236, 214, 0.08);
padding: 8px;
border-radius: 4px;
border: 1px solid rgba(247, 236, 214, 0.1);
}
.class-skill__row {
display: grid;
grid-template-columns: 70px 1fr;
column-gap: var(--space-sm);
align-items: baseline;
margin: 0;
grid-column: 2 / 3;
}
.class-skill__label {
font-size: var(--fs-11);
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(247, 236, 214, 0.4);
}
.class-skill__row--edda .class-skill__label {
color: var(--color-accent-subtle);
}
.class-skill__text {
color: var(--color-surface);
font-size: var(--fs-15);
line-height: 1.5;
opacity: 0.9;
}
.class-skill__row--original .class-skill__text {
opacity: 0.55; /* fade the baseline; Edda line is the feature */
}
/* Wiki link inside a panel — same visual language as the section CTA, but
lives inside the card. Less prominent; a secondary affordance. */
.class-panel__wiki {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid rgba(247, 236, 214, 0.1);
}
.classes-wiki-cta-link {
display: inline-flex;
align-items: baseline;
gap: 10px;
color: var(--color-accent-subtle);
font-family: var(--font-body);
font-size: var(--fs-17);
font-weight: 500;
letter-spacing: -0.005em;
transition: color .15s;
border-bottom: 1px solid color-mix(in srgb, var(--color-accent-subtle) 40%, transparent);
padding-bottom: 4px;
}
.classes-wiki-cta-link:hover,
.classes-wiki-cta-link:focus-visible {
color: var(--color-surface);
border-bottom-color: var(--color-surface);
outline: none;
}
.classes-wiki-cta-link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: 2px;
}
/* Responsive — grid collapses 6→4→3→2 cols. Skill rows go single-column
on mobile so long deltas stop squeezing against the 168px name column. */
@media (max-width: 1080px) {
.classes-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 760px) {
.classes-grid {
grid-template-columns: repeat(3, 1fr);
}
.class-panel {
padding: var(--space-lg) var(--space-md);
}
.class-panel__name {
font-size: clamp(28px, 6vw, 40px);
}
}
@media (max-width: 600px) {
.classes-grid {
grid-template-columns: repeat(2, 1fr);
}
.class-skill {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
.class-skill__name {
grid-column: 1 / 2;
grid-row: auto;
margin-bottom: 4px;
}
.class-skill__row {
grid-column: 1 / 2;
grid-template-columns: 60px 1fr;
}
}
/* ---- Instalação ---- */
/* Section wash — --peach ties Instalação to the Hero band's warm zone (CL-01).
Scoped to #download so Sistemas/Classes/FAQ above and below stay on cream. */
#download {
background: var(--color-accent-soft);
}
/* Download section (simplified quick 260420 — was 4-step Instalação).
Structure now: left-aligned head (eyebrow + H2 + lede + reqs) sitting on top
of a single-column mirror list. No 4-step tutorial. No "register-and-download"
CTA — users in this section are already here to download. */
.download-head {
max-width: 720px;
margin-bottom: var(--space-xl); /* 48 — harmonised with sistemas/classes intros */
}
.download-head .eyebrow { margin-bottom: var(--space-eyebrow-gap); }
.download-head h2 {
font-size: clamp(48px, 5.6vw, 80px);
line-height: 1;
margin-bottom: var(--space-md);
}
/* ---- Mirror list (.download-panel) ---- */
.download-panel {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--color-border);
max-width: 720px;
}
.download-panel > li {
border-bottom: 1px solid var(--color-border);
}
.download-panel__row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 28px;
padding: 22px 28px;
text-decoration: none;
color: var(--ink);
background: var(--paper);
transition: background-color .18s ease, color .18s ease;
}
/* Anchor rows hover → ink wash; the whole row reads as one affordance. */
a.download-panel__row:hover,
a.download-panel__row:focus-visible {
background: var(--ink);
color: var(--color-surface);
outline: none;
}
a.download-panel__row:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px; /* inset so the ring doesn't break row alignment */
}
.download-panel__row--disabled {
cursor: not-allowed;
opacity: .55;
}
.download-panel__name {
font-family: var(--font-display);
font-size: var(--fs-24);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.1;
}
.download-panel__meta {
font-size: var(--fs-11);
letter-spacing: 0.08em;
color: var(--ink-soft);
text-transform: uppercase;
white-space: nowrap;
}
a.download-panel__row:hover .download-panel__meta,
a.download-panel__row:focus-visible .download-panel__meta {
color: var(--color-surface-secondary);
}
.download-panel__cta {
font-size: var(--fs-12);
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
color: var(--color-accent-strong); /* small text — AA pass */
white-space: nowrap;
}
.download-panel__cta::after {
content: " →";
}
a.download-panel__row:hover .download-panel__cta,
a.download-panel__row:focus-visible .download-panel__cta {
color: var(--color-surface);
}
.download-help {
margin-top: 36px;
font-size: var(--fs-11);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ink-muted);
}
.download-help a {
color: var(--color-accent-strong); /* inline link at 11px — AA pass */
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.download-help a:hover { color: var(--ink); }
/* Single-mirror layout — when only one download row exists, render as a
prominent feature card instead of a thin list row. CONTEXT D-11. */
.download-panel:has(> li:only-child) {
border-top: none;
background: var(--paper);
border: 1px solid var(--color-border);
max-width: 480px;
}
.download-panel:has(> li:only-child) > li {
border-bottom: none;
}
.download-panel:has(> li:only-child) .download-panel__row {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 4px 24px;
padding: 22px 28px;
align-items: baseline;
}
.download-panel:has(> li:only-child) .download-panel__name {
font-size: clamp(28px, 3vw, 36px);
grid-row: 1;
grid-column: 1;
}
.download-panel:has(> li:only-child) .download-panel__meta {
grid-row: 2;
grid-column: 1;
}
.download-panel:has(> li:only-child) .download-panel__cta {
grid-row: 1 / span 2;
grid-column: 2;
align-self: center;
font-size: var(--fs-12);
}
@media (max-width: 640px) {
.download-panel__row {
grid-template-columns: 1fr auto;
gap: var(--space-sm);
padding: 18px 20px;
}
/* Size column is redundant on mobile — same info lives in the reqs row above. */
.download-panel__meta { display: none; }
}
/* ---- FAQ ---- */
.faq-two-col {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
align-items: start;
}
/* Sticky-left column */
.faq-left {
position: sticky;
top: calc(var(--nav-h) + 56px); /* 64 + 56 = 120 */
}
.faq-left .eyebrow { margin-bottom: var(--space-eyebrow-gap); }
.faq-left h2 {
font-size: clamp(48px, 5.6vw, 80px);
margin-bottom: var(--space-md);
line-height: 1;
}
/* : faq-left h2 em styles moved to consolidated .display em rule (line ~70). */
.faq-left p {
font-size: var(--fs-16);
color: var(--ink-soft);
margin-bottom: 28px;
max-width: 340px;
}
/* Accordion list */
.faq-list {
border-top: 1px solid var(--color-border);
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-md) 0;
gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
}
.faq-item__q {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-24);
line-height: 1.2;
color: var(--ink);
text-align: left;
}
.faq-item__icon {
font-family: var(--font-body);
color: var(--color-accent);
font-size: var(--fs-14);
flex-shrink: 0;
font-weight: 500;
}
/* Grid-rows trick — RESEARCH Finding 2 / Pattern 3. Universal browser support
(Chrome 66+, FF 66+, Safari 12+). Intentionally NOT using the Chromium-only
interp_size keyword (blocked per plan acceptance criteria). */
.faq-item__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.faq-item__body > p {
overflow: hidden;
color: var(--ink-soft);
font-size: var(--fs-16);
line-height: 1.65;
padding-bottom: var(--space-md);
max-width: 640px;
overflow-wrap: anywhere;
}
.faq-item[open] .faq-item__body {
grid-template-rows: 1fr;
}
/* Icon swap on [open]. The HTML markup uses a single with no inline text;
we render via pseudo-element so we can swap cleanly with [open]. */
.faq-item summary .faq-item__icon { position: relative; width: 14px; height: 14px; }
.faq-item summary .faq-item__icon::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; }
.faq-item[open] summary .faq-item__icon::before { content: "—"; }
/* Reduced motion — disable the expand transition per RESEARCH Pitfall 3 */
@media (prefers-reduced-motion: reduce) {
.faq-item__body { transition: none; }
}
/* Responsive — 960px collapse */
@media (max-width: 960px) {
.faq-two-col { grid-template-columns: 1fr; gap: var(--space-xl); }
.faq-left { position: static; }
}
/* ---- Footer (quick 260423-skd / minimalist consolidation) ---- */
/* .site-footer inherits .wash-ink (ink bg, cream text) from scaffold.
The dark wash is the target treatment for every surface. */
.site-footer {
padding: var(--space-xl) 0 var(--space-lg);
border-top: 1px solid rgba(247, 236, 214, 0.12);
}
/* Top row — wordmark + tagline on the left, link row on the right.
Stacks to column below 760px. */
.footer-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-xl);
margin-bottom: var(--space-lg);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--space-xs);
min-width: 0;
}
.footer-brand__name {
font-size: clamp(28px, 3vw, 40px);
line-height: 1;
color: var(--color-surface);
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
.footer-tagline {
color: rgba(247, 236, 214, 0.7);
font-size: var(--fs-14);
line-height: 1.5;
max-width: 44ch;
margin: 0;
}
/* Right column — inline link row with dot separators between items. */
.footer-links {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
}
.footer-links a {
color: rgba(247, 236, 214, 0.85);
font-family: var(--font-body);
font-size: var(--fs-14);
font-weight: 500;
transition: color 0.15s;
padding: 4px 0;
}
.footer-links a:hover,
.footer-links a:focus-visible {
color: var(--color-accent);
outline: none;
}
.footer-links a:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
border-radius: 2px;
}
.footer-links a + a::before {
content: "·";
color: rgba(247, 236, 214, 0.35);
margin-right: 14px;
}
/* Stub links — visible but inert (aria-disabled + tabindex=-1 + pointer-events none). */
.footer-links a.stub-link {
pointer-events: none;
cursor: not-allowed;
opacity: 0.45;
}
.footer-links a.stub-link:hover,
.footer-links a.stub-link:focus,
.footer-links a.stub-link:focus-visible {
color: rgba(247, 236, 214, 0.85);
outline: none;
text-decoration: none;
}
/* Legal row — thin rule above, single mono line below. */
.footer-legal {
padding-top: var(--space-md);
border-top: 1px solid rgba(247, 236, 214, 0.12);
}
.footer-legal .mono {
color: rgba(247, 236, 214, 0.55);
font-size: var(--fs-11);
letter-spacing: 0.06em;
text-transform: uppercase;
margin: 0;
}
/* Responsive — stack the top row below 760px. */
@media (max-width: 760px) {
.footer-row {
flex-direction: column;
gap: var(--space-md);
}
}
/* ---- 1024px dead-zone loosening ---- */
/* Between 1080 (nav-links hide) and 961 (grids collapse), content grids are
still desktop-width but the viewport is already reduced. Loosen wrap
padding + tighten the largest grid gaps to prevent cramped layout. */
@media (max-width: 1024px) {
.wrap,
.wrap-wide {
padding: 0 var(--space-md); /* was var(--space-lg): 32 → 24 */
}
}
/* ---- 375px floor ---- */
/* iPhone SE + older Android floor. Tighten section padding and wrap
padding to reclaim every horizontal pixel; lower H1 clamp to 52px floor. */
@media (max-width: 375px) {
section {
padding: var(--space-xl) 0; /* 48 at 375px */
}
.hero { padding: var(--space-lg) 0; } /* 32 */
.wrap,
.wrap-wide,
.wrap-read {
padding: 0 20px; /* tighter than 24 */
}
/* Stack CTAs full-width so taps are comfortable */
.hero-cta-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.hero-cta-row .btn {
justify-content: center;
}
/* Hero rates wrap naturally at narrow widths; no explicit tweak needed —
line-height handles it. Date shrinks so it never overflows on 375px. */
.hero-date__value { font-size: clamp(36px, 10vw, 48px); }
.hero-date { gap: 10px; }
.hero-title { font-size: clamp(36px, 8.5vw, 48px); }
}
/* ---- Download pillar (quick 260420-knk / sprite slots v2) ---- */
/* .download-stage is the only new grid rule in this pass — size/position only. */
.download-stage {
display: grid;
grid-template-columns: 160px 1fr;
gap: var(--space-xl);
align-items: center;
}
.download-pillar {
width: 160px;
height: 200px;
aspect-ratio: 4 / 5;
image-rendering: pixelated;
}
@media (max-width: 760px) {
.download-stage { grid-template-columns: 1fr; }
.download-pillar-wrap { display: none; }
}
/* ---- Footer dingbat (quick 260420-knk / sprite slots v2) ---- */
.footer-dingbat {
display: inline-block;
width: 32px;
height: 32px;
vertical-align: middle;
margin-left: var(--space-sm);
}
/* Ensure the inherited .sprite-box placeholder fills the 32×32 parent span. */
.footer-dingbat .sprite-box {
width: 100%;
height: 100%;
}