/* ============================================================ theBEAT — Marketing site styles Editorial dark · warm charcoal + champagne gold Mirrors the iOS app's AppTheme.swift palette so the storefront and the product read as the same brand. ============================================================ */ :root { /* Surfaces */ --bg: #0D0C09; --bg-lift: #13110D; --card: #181611; --card-hi: #1E1B14; --divider: #241F1A; --rule: rgba(221, 208, 170, 0.14); /* Text */ --text: #F4EFE7; --text-soft: #E0DAD0; /* was #C8C2B5 — bumped for legibility */ --text-mute: #ADA69A; /* was #857E72 — bumped for legibility */ --text-dim: #6E685E; /* was #5C564D — bumped for legibility */ /* Gold + rose */ --gold: #DDD0AA; --gold-deep: #C0B490; --gold-glow: rgba(221, 208, 170, 0.30); --rose: #D1B8AB; /* App-parity accents (added 2026-06-11, Wave 1 build) — flame from iOS beatFlame (#DA4805) — Tonight's Pick / heat moments — royal from iOS beatRoyalBlue (#1B3F8A) — Tastemaker ring identity Darkened the soft variant per design review 2026-06-11 — was too pastel against the cream light-mode background. */ --flame: #DA4805; --flame-light: #FF980A; --flame-glow: rgba(218, 72, 5, 0.22); --royal: #102659; /* was #1B3F8A — deepened for light-mode contrast */ --royal-soft: #1B3F8A; /* the original beatRoyalBlue, now used as soft */ --royal-glow: rgba(16, 38, 89, 0.32); /* Tier palette — drawn from the slide deck "Four tiers, four people" (2026-06-14) Each tier gets a "soft" (background tint), "core" (accent line / icon), and "shine" (highlight for foil-stamp gradient) variant. Used in #membership cards with a metallic gradient treatment so the cards feel premium, not flat. */ --tier-free-soft: rgba(168, 196, 158, 0.10); /* sage tint behind card */ --tier-free-core: #A8C49E; /* sage */ --tier-free-shine: #D4E5CB; /* pale sage highlight */ --tier-free-glow: rgba(168, 196, 158, 0.25); --tier-plus-soft: rgba(217, 167, 176, 0.10); /* dusty rose tint */ --tier-plus-core: #D9A7B0; /* dusty rose */ --tier-plus-shine: #ECCBD2; /* pale rose highlight */ --tier-plus-glow: rgba(217, 167, 176, 0.28); --tier-priority-soft: rgba(221, 208, 170, 0.10); /* gold tint */ --tier-priority-core: #DDD0AA; /* brand gold (matches existing --gold) */ --tier-priority-shine: #F0E8C9; /* pale gold highlight */ --tier-priority-glow: rgba(221, 208, 170, 0.30); --tier-lifetime-soft: rgba(196, 168, 88, 0.12); /* deeper gold tint */ --tier-lifetime-core: #C4A858; /* deeper champagne gold */ --tier-lifetime-shine: #E8D89A; /* lifted gold highlight (for foil shimmer) */ --tier-lifetime-glow: rgba(196, 168, 88, 0.32); /* Stoplight statuses — editorial-muted, never Bootstrap-bright */ --status-go: #7FB069; /* sage green — in service */ --status-go-glow: rgba(127, 176, 105, 0.30); --status-soft: #E0B458; /* warm amber — soft open */ --status-soft-glow: rgba(224, 180, 88, 0.25); --status-wait: #C56A4D; /* warm rust — in the kitchen */ --status-wait-glow: rgba(197, 106, 77, 0.18); /* Type */ --serif: 'Newsreader', ui-serif, 'New York', Georgia, serif; --sans: 'Geist', ui-sans-serif, -apple-system, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Rhythm */ --pad-x: clamp(20px, 5vw, 56px); --col-max: 1240px; --col-narrow: 780px; --col-prose: 680px; } /* ============================================================ Light mode — editorial newspaper feel Warm cream paper, deep charcoal type, bronze-gold accent Applied via [data-theme="light"] on ============================================================ */ [data-theme="light"] { /* Surfaces — aged-paper warmth, not sterile white */ --bg: #F4EDDB; --bg-lift: #FAF4E3; --card: #FBF6E8; --card-hi: #FFFCF1; --divider: #E2D9C0; --rule: rgba(64, 52, 24, 0.16); /* Text — deep ink on cream, never harsh black */ --text: #1A1812; --text-soft: #2E2920; --text-mute: #5C5546; --text-dim: #6E6757; /* Gold — deeper bronze for light-bg legibility */ --gold: #806A1F; --gold-deep: #5F4E14; --gold-glow: rgba(128, 106, 31, 0.22); --rose: #7E5444; --flame: #B23A04; /* Stoplights — deepened for AA contrast on light bg */ --status-go: #4F7D2C; --status-go-glow: rgba(79, 125, 44, 0.22); --status-soft: #876619; --status-soft-glow: rgba(181, 136, 47, 0.20); --status-wait: #9C4B30; --status-wait-glow: rgba(156, 75, 48, 0.18); } /* Smooth theme transitions on shifting surfaces only — keep it snappy */ html, body, header, footer, section, aside, article, .card, .tier, .reserve, .reserve-buy, .lifetime-card, .lifetime-preview__book, .lifetime-preview__book-cover, .engine-formula, .reserve-patron, .tease, .nav, .nav__primary, .cta, .cta--soft, .cta--ghost, .nav__cta { transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease; } /* Respect users who don't want motion */ @media (prefers-reduced-motion: reduce) { html, body, header, footer, section, aside, article, .card, .tier, .reserve, .reserve-buy, .lifetime-card { transition: none; } } /* ============================================================ Theme toggle — slick corner button (bottom-right) ============================================================ */ .theme-toggle { position: fixed; bottom: 24px; right: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--bg-lift); border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 0 var(--gold-glow); transition: transform 200ms ease, box-shadow 280ms ease, background-color 280ms ease, border-color 280ms ease, color 280ms ease; -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30), 0 0 22px var(--gold-glow); } .theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .theme-toggle:active { transform: translateY(0) scale(0.98); } [data-theme="light"] .theme-toggle { box-shadow: 0 4px 16px rgba(80, 60, 20, 0.14), 0 0 0 0 var(--gold-glow); } [data-theme="light"] .theme-toggle:hover { box-shadow: 0 6px 22px rgba(80, 60, 20, 0.20), 0 0 22px var(--gold-glow); } .theme-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .toggle-sun { display: none; } .theme-toggle .toggle-moon { display: block; } [data-theme="light"] .theme-toggle .toggle-sun { display: block; } [data-theme="light"] .theme-toggle .toggle-moon { display: none; } /* First-visit attention pulse — runs once, then settles */ @keyframes theme-toggle-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 0 var(--gold-glow); } 50% { box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 8px transparent; } } .theme-toggle.is-first-visit { animation: theme-toggle-pulse 2.2s ease-in-out 1.4s 2; } /* Shrink + tuck on the screens where the sticky founder bar appears (<=720px); the bar (below) leaves matching right-padding so the moon never lands on it. */ @media (max-width: 720px) { .theme-toggle { bottom: 16px; right: 16px; width: 42px; height: 42px; } .theme-toggle svg { width: 18px; height: 18px; } } /* Hide print artifacts */ @media print { .theme-toggle { display: none; } } /* ----- Reset -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } /* ───────────────────────────────────────────────────────────────────────── THE DEFAULT IS THE SERIF. 2026-07-17. It was var(--sans), and that was the bug — not a preference, a DEFAULT THAT POINTED AT THE WRONG FONT. Every serif element had to opt IN, so any element that simply forgot to state a family silently rendered in Geist. Nothing errored. Nothing looked broken to the author. It just quietly got less like us with every section anyone added. Founder direction, said more than once: "we need to look more formal and on brand yet legible and not excessively trying hard." He circled two paragraphs on the home page as AI slop. Measured, they were EXACTLY the two children of that block that never named a font: .htw__n serif ✓ .htw__t serif ✓ .htw__pull serif ✓ .htw__d — none — ← circled .htw__foot — none — ← circled The author of that block chose serif three times and forgot twice, and the two he forgot are the two that got flagged. That is not carelessness; it is a default doing what a default does. Fixing those two selectors would have fixed the screenshot and left the mechanism loaded for the next section. So the inheritance now points at the brand, and the exception is the thing that must be stated. Everything that explicitly asks for var(--sans) is untouched (badges, 9.5–11px meta labels, form controls); everything that never made a choice now reads as theBEAT. If you want sans, say sans. ───────────────────────────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern' 1, 'liga' 1; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: var(--gold); color: var(--bg); } /* ----- Utility: eyebrow tracked caps -------------------------- */ .eyebrow { display: inline-block; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); line-height: 1; } .eyebrow--mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0.18em; } .eyebrow--mute { color: var(--text-mute); } /* ----- Brand wordmark protector ------------------------------- * * The wordmark is always "theBEAT" — lowercase italic "the" + * * uppercase upright "BEAT" — including inside ALL-CAPS contexts * * AND inside italic ones. No exceptions. * * * * UNIVERSAL: every opts out of inherited text-transform. * * This protects "theBEAT" anywhere it appears, with no * * per-class enumeration needed. for editorial italic is * * already lowercase in source, so this rule is a no-op for it. * * ----------------------------------------------------------------*/ em { text-transform: none; } /* ----- Brand wordmark lockup ---------------------------------- * * 2026-07-15: text-transform was protected above, but font-style * * was NOT — and could not be. The old markup was: * * * * theBEAT * * * * "BEAT" was a bare text node with no element around it, so no * * rule could select it. It silently inherited font-style from * * any italic ancestor (.page-head__sub, .footer__tag, .prose * * strong, , …) and the whole wordmark went italic. * * A protector that cannot select its target is not a protector. * * * * The markup is now: * * * * theBEAT * * * * * * WHY THIS WINS: font-style is an INHERITED property, and an * * inherited value carries no specificity — it only applies when * * nothing matches the element itself. .wm__beat matches BEAT * * directly, so it beats an italic ancestor no matter how * * specific that ancestor's selector is. Two layers, so either * * alone still holds if the other is edited away: * * .wm — neutralises inheritance at the lockup boundary * * .wm__beat — asserts upright on the BEAT run itself * * .wm em re-asserts the italic "the" against .wm's normal. * * * * The ™ needs nothing here: .tm / .hero__tm already declare * * font-style: normal on themselves (see "Trademark notice"). * * ----------------------------------------------------------------*/ .wm { font-style: normal; } .wm em { font-style: italic; /* The lockup is "the" (lowercase italic) + "BEAT" (caps upright) — with NO exceptions, including inside all-caps contexts. Several containers (.page-head__meta, eyebrows, labels) set text-transform: uppercase, which was silently rendering the mark as "THEBEAT". font-style was defended here; text-transform was not. The founder, 2026-07-15: "no exceptions even when the surrounding text is all caps." */ text-transform: none; } .wm__beat { font-style: normal; /* BEAT is authored in caps and stays that way regardless of an ancestor's transform — lowercase/capitalize must never reach it. */ text-transform: none; } /* When em appears inside tracked-caps contexts (eyebrows, labels, * * tier prices, calculator labels, etc.) give it the subtle * * wordmark refinement: zero letter-spacing so "the" doesn't get * * wide-tracked into "t h e", plus a soft opacity drop to echo the * * topbar wordmark treatment. */ .eyebrow em, [class*="eyebrow"] em, .hero__eyebrow em, .tier__price em, .tn-card__tag em, .tn-card__num em, .queue-eyebrow em, .hunt-eyebrow em, .atlas-row__region em, .atlas-row__status em, .atlas-teaser__more em, .atlas-legend__name em, .atlas-request__eyebrow em, .math-compare__label em, .calc__stat-label em, .calc__slider-label em, .calc__h4 em, .calc__pick em, .calc__foot em, .host-pricing__tier em, .lifetime-tile__head .eyebrow em, .lifetime-tile__expand em, .lifetime-tile__meta .k em, .lifetime-tile__rescue-k em, .lifetime__gift-eyebrow em, .pillar__eyebrow em, .nav a em, .nav__filter em, .nav__primary em, .cta__copy .small em, .cta--ghost em, .tier__label em, .tier__price-note em, .tier__price-period em, .tier-toggle__option em, .visit-card__feature em, .visit-card__moment em, .visit-day__label em, .visit-day__time em, .visit-day__foot em, .visit-gift__eyebrow em, .visit-hero__eyebrow em, .visit-hero__strip-k em, .visit-health__chip em, .visit-health__eyebrow em, .visit-capture__label em, .visiting-moment__tag em, .filter-hero__eyebrow em, .filter-hero__strip-k em, .filter-card__cohort em, .filter-card__link em, .campus-strip__eyebrow em, .heatmap-label--region em, .heatmap__cell-region em, .heatmap__details summary em, .heatmap__legend em, .hero-plate__label em, .hero__ladder em, .hero__meta-label em, .page-head__crumb em, .page-head__meta em, .faq__n em, .tm-eyebrow em, .tm-foot__k em, .prv-tm__foot em, .prv-tonight__eyebrow em, .prv-tonight__tag em, .tn-btn em, .tn-eyebrow em, .tn-head .e em, .tn-head .t em, .tn-stats .k em, .rk-head .meta em, .circle-card__n em, .constellation__chip em, .contacts__label em, .dd-by em, .dd-scores .k em, .day-zero__count em, .day-zero__cta-label em, .day-zero__eyebrow em, .inside-chip em, .inside-list li strong em, .issue__date em, .kit__label em, .kit__meta em, .legal h3 em, .legal-toc__label em, .lifetime-card__foot em, .lifetime-card__num em, .lifetime-preview__book-member em, .lifetime-preview__book-year em, .masthead-note strong em, .pg-chip--reset em, .pg-tag em, .phone__caption em, .pillar__link em, .playground__status em, .price-range__spectrum em, .price-range__who em, .reserve__label em, .reserve__submit em, .skip-link em, .status em, .annual-mock__year em, .atlas-vote__submit em, .footer__base em, .footer__col h4 em { letter-spacing: 0; opacity: 0.78; } /* Hair rule used between sections */ .rule { border: 0; border-top: 1px solid var(--divider); margin: 0; } /* ----- Shell + grid ------------------------------------------- */ .shell { width: 100%; max-width: var(--col-max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .shell--narrow { max-width: var(--col-narrow); } .shell--prose { max-width: var(--col-prose); } /* ----- Top bar ------------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 30; background: rgba(13, 12, 9, 0.86); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--divider); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand__mark { width: 26px; height: 26px; border-radius: 6px; display: block; } .brand__word { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--text); /* Optical centring against the .brand__mark tile. `.brand` is align-items:center, which centres the WORD'S LINE BOX on the tile — and it does that perfectly (box centre == tile centre, measured delta 0.00px). But "theBEAT" has no descenders, so the glyphs occupy only the cap-height→baseline band; the font's descent space below the baseline renders empty. Centring the box therefore leaves ~2x more dead space below the ink than above it, and the visible wordmark rides HIGH against the top rule. Measured (2026-07-15): ink centre sat 0.115em above the box centre — -1.85px @16px topbar, -2.53px @22px footer, identical at 390 and 430. The ratio is pure font metrics ((ascent-descent)/2 minus the ink's own half-height), so it is independent of font-size AND line-height: one em value is correct at every breakpoint and both lockups. NOT the ^{: removing the ™ leaves the line box at
24.8px and the box centre at 31.0px — identical. vertical-align:super
never inflates the line box here because .tm is line-height:1 at
0.48em, so its raised box still fits inside the 1.55em line box. */
position: relative;
top: 0.115em;
}
.brand__word em { font-style: italic; font-weight: 300; color: var(--text-soft); }

.nav {
display: flex;
align-items: center;
gap: 28px;
}
/* NAV IS CHROME, AND CHROME IS SANS. 2026-07-17 — a regression I shipped and
then looked at.

Flipping `body` to the serif was right for PROSE: the founder circled two
paragraphs and the fix was that the default pointed at the wrong font. But the
flip moved 114 rules, and this was one of them — `.nav a` names no family, so
it went serif with everything else.

Newsreader is WIDER than Geist at the same size and tracking. The nav stopped
fitting: "INSIDE THE APP" broke to "INSIDE THE / APP", "FOR TRAVELERS" to
"FOR / TRAVELERS". Seen on the deployed site, not reasoned about — I had a
screenshot of exactly this an hour earlier and did not look closely enough.

The rule that keeps this straight: PROSE IS SERIF, CHROME IS SANS. Nav items,
buttons and control labels are chrome — the reader is operating them, not
reading them. That is why they carry tracked caps at 11-12px, a treatment
serif does not wear at that size.

Deliberately NOT a blanket revert of all 33 tracked-caps rules the flip
touched. The hero's meta row and the CTA chip labels are tracked caps too and
they read WELL in serif — I looked. Fixing what I can see is broken beats
reverting on a hunch and undoing the thing the founder actually asked for. */
.nav a {
font-family: var(--sans);
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-soft);
transition: color 0.2s ease;
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--gold); }

/* Mobile nav visibility is now handled by the hamburger drawer
system (see "Hamburger menu" rules further down). The old
"hide everything except Download" rule was removed 2026-05-25
when the drawer replaced inline nav on mobile. */

/* Primary nav CTA — Founding offer (filled gold, most visible) */
/* Sits before the outlined Download CTA. Establishes convert → */
/* install hierarchy: see the offer first, then install. */
.nav__primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border: 1px solid var(--gold);
background: var(--gold);
border-radius: 999px;
color: var(--bg) !important;
/* Chrome, not prose — see the note on `.nav a`. 11.5px tracked caps at
0.18em is a control label; the serif does not wear that treatment. */
font-family: var(--sans);
font-size: 11.5px !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
white-space: nowrap;
transition: background 200ms, color 200ms, box-shadow 200ms, transform 120ms;
box-shadow: 0 0 14px var(--gold-glow);
}
.nav__primary:hover {
background: var(--gold-deep);
border-color: var(--gold-deep);
box-shadow: 0 0 18px var(--gold-glow);
}
.nav__primary:active { transform: scale(0.97); }
.nav__primary::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bg);
display: inline-block;
}

.nav__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--gold);
border-radius: 999px;
color: var(--gold) !important;
/* Chrome — see `.nav a`. */
font-family: var(--sans);
font-size: 11.5px !important;
letter-spacing: 0.16em !important;
font-weight: 500;
}
.nav__cta:hover { background: var(--gold); color: var(--bg) !important; }

/* ----- Hero --------------------------------------------------- */
.hero {
padding-top: clamp(72px, 12vw, 140px);
padding-bottom: clamp(56px, 9vw, 112px);
position: relative;
}
/* 2026-07-09 (A4) — the 72-140px top padding above was tuned back when the
hero was the page's first-fold element (see index.html's "Status ticker
removed 2026-05-23" comment). The .launch-banner ticker was added above it
later without re-tuning this, so on index.html today it's a 30px ticker
PLUS up to 140px of empty hero padding before any real content — the empty
band under the ticker flagged in review. Scoped to the ticker+hero pairing only
(adjacent-sibling) so ad.html's standalone .hero, which has no ticker
above it, keeps its original breathing room. */
.launch-banner + .hero {
padding-top: clamp(28px, 5vw, 56px);
}
.hero__eyebrow {
display: flex;
align-items: center;
gap: 14px;
color: var(--text-mute);
}
.hero__eyebrow .dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--gold);
display: inline-block;
}
.hero__wordmark {
margin: 22px 0 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(72px, 16vw, 220px);
line-height: 0.88;
letter-spacing: -0.045em;
color: var(--text);
}
.hero__wordmark .the {
font-style: italic;
font-weight: 300;
color: var(--text-soft);
letter-spacing: -0.025em;
margin-right: 0.04em;
}
.hero__wordmark .beat {
font-weight: 500;
/* 2026-07-15 — was -0.05em, which tracked the CAPS twice as tight as
the lowercase italic ".the" (-0.025em). That's inverted: uppercase
carries more sidebearing and needs MORE space than lowercase, not
half. And letter-spacing ADDS to the font's own kerning, so -0.05em
compounded New York's already-tight A/T pair. Measured at 72px the
E-A and A-T gaps were the two tightest in the mark (-2.83px, -3.67px)
— technically zero pixel overlap, visually collided, and the two
spots the founder marked. Now looser than ".the", which is correct for caps. */
letter-spacing: -0.02em;
font-kerning: normal;
}
.hero__dek {
margin: 28px 0 0;
max-width: 760px;
font-family: var(--serif);
font-weight: 300;
font-style: italic;
color: var(--text-soft);
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.4;
}
.hero__dek strong { font-style: normal; font-weight: 400; color: var(--text); }
.hero__meta {
margin-top: 36px;
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.hero__meta .pipe {
width: 1px; height: 16px;
background: var(--divider);
}
.hero__meta-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-mute);
}

/* App Store CTA — editorial placeholder, not Apple's official badge */
.cta-row {
margin-top: clamp(40px, 5vw, 56px);
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 22px 16px 18px;
border-radius: 12px;
border: 1px solid var(--gold);
background: transparent;
color: var(--gold);
font-family: var(--sans);
font-size: 14px;
letter-spacing: 0.04em;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.cta:hover { background: var(--gold); color: var(--bg); transform: translateY(-1px); }
.cta__mark {
width: 22px; height: 22px;
display: inline-block;
}
.cta__copy { display: inline-flex; flex-direction: column; line-height: 1; gap: 4px; }
.cta__copy .small {
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.78;
}
.cta__copy .big {
font-family: var(--serif);
font-weight: 500;
font-size: 18px;
letter-spacing: -0.01em;
}
.cta--soft {
border-color: var(--divider);
color: var(--text-soft);
}
.cta--soft:hover { background: transparent; color: var(--gold); border-color: var(--gold); transform: none; }
.cta--ghost {
padding: 14px 0;
border: 0;
background: transparent;
color: var(--text-soft);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.cta--ghost::after {
content: '↗';
margin-left: 10px;
color: var(--gold);
font-style: normal;
}
.cta--ghost:hover { color: var(--gold); }

/* ----- Hero plate (photo placeholder) ------------------------- */
.hero-plate {
margin-top: clamp(48px, 8vw, 96px);
position: relative;
aspect-ratio: 16 / 9;
border-radius: 4px;
overflow: hidden;
background:
repeating-linear-gradient(135deg,
rgba(221, 208, 170, 0.045) 0 28px,
rgba(221, 208, 170, 0.075) 28px 29px),
radial-gradient(120% 80% at 30% 30%, #1c1812, #0b0a07 70%);
border: 1px solid var(--divider);
}
.hero-plate__label {
position: absolute;
inset: auto 0 0 0;
padding: 18px 22px;
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.hero-plate__label .gold { color: var(--gold); }
.hero-plate__crop {
position: absolute;
top: 14px; left: 14px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.2em;
color: var(--text-mute);
}
.hero-plate__center {
position: absolute; inset: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 14px;
color: var(--text-mute);
}
.hero-plate__center .glyph {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--rule);
display: grid; place-items: center;
color: var(--gold);
font-family: var(--serif);
font-style: italic;
font-size: 18px;
}

/* ----- Section -------------------------------------------------- */
.section {
padding-top: clamp(80px, 12vw, 140px);
padding-bottom: clamp(80px, 12vw, 140px);
}
.section--tight { padding-top: clamp(56px, 9vw, 96px); padding-bottom: clamp(56px, 9vw, 96px); }
.section--lift { background: var(--bg-lift); }
@media (max-width: 430px) {
.section { padding-top: 48px; padding-bottom: 48px; }
.section--tight { padding-top: 36px; padding-bottom: 36px; }
}

.section__head {
display: grid;
grid-template-columns: 200px 1fr;
gap: 56px;
align-items: baseline;
margin-bottom: clamp(40px, 6vw, 72px);
}
.section__head .eyebrow { padding-top: 10px; }
.section__title {
margin: 0;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(36px, 5.5vw, 64px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--text);
text-wrap: balance;
}
.section__title em {
font-style: italic;
color: var(--gold);
font-weight: 300;
}
.section__lede {
margin: 22px 0 0;
font-family: var(--serif);
font-weight: 300;
font-size: 20px;
line-height: 1.55;
color: var(--text-soft);
max-width: 640px;
text-wrap: pretty;
}
@media (max-width: 720px) {
.section__head { grid-template-columns: 1fr; gap: 18px; }
}

/* ----- Editorial prose ---------------------------------------- */
.prose {
font-family: var(--serif);
font-weight: 300;
font-size: 20px;
line-height: 1.65;
color: var(--text-soft);
max-width: var(--col-prose);
}
.prose p { margin: 0 0 1.4em; text-wrap: pretty; }
.prose p:first-of-type::first-letter {
font-family: var(--serif);
font-weight: 400;
font-size: 3.6em;
line-height: 0.86;
float: left;
padding: 0.04em 0.12em 0 0;
color: var(--gold);
}
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 400; font-style: italic; }
.prose a { color: var(--gold); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.prose a:hover { border-bottom-color: var(--gold); }

/* ----- The Edit · three column ------------------------------- */
.edit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 880px) { .edit-grid { grid-template-columns: 1fr; gap: 40px; } }
.edit-item__rule {
border-top: 1px solid var(--gold);
width: 36px;
margin-bottom: 22px;
}
.edit-item__title {
margin: 0 0 14px;
font-family: var(--serif);
font-weight: 400;
font-size: 26px;
letter-spacing: -0.012em;
color: var(--text);
line-height: 1.15;
}
.edit-item__body {
font-family: var(--serif);
font-weight: 300;
font-size: 17.5px;
line-height: 1.6;
color: var(--text-soft);
text-wrap: pretty;
}

/* ----- From the Daily — tease -------------------------------- */
.daily-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(28px, 5vw, 80px);
align-items: stretch;
}
@media (max-width: 880px) { .daily-grid { grid-template-columns: 1fr; } }

.tease {
border: 1px solid var(--divider);
border-radius: 4px;
padding: clamp(28px, 4vw, 44px);
background: linear-gradient(180deg, rgba(221, 208, 170, 0.025) 0%, transparent 80%);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 360px;
}
.tease__top { display: flex; justify-content: space-between; align-items: baseline; }
.tease__num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--text-mute);
}
.tease__hed {
margin: 28px 0 0;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(28px, 3.5vw, 42px);
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text);
text-wrap: balance;
}
.tease__hed em { font-style: italic; color: var(--gold); font-weight: 300; }
.tease__dek {
margin-top: 18px;
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 16px;
color: var(--text-soft);
}

/* The "issue" stack on the right */
.issue-stack { display: flex; flex-direction: column; gap: 0; }
.issue {
display: grid;
grid-template-columns: 64px 1fr 90px;
gap: 18px;
align-items: baseline;
padding: 22px 0;
border-top: 1px solid var(--divider);
}
.issue:last-child { border-bottom: 1px solid var(--divider); }
.issue__num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--text-mute);
}
.issue__title {
margin: 0;
font-family: var(--serif);
font-weight: 400;
font-size: 19px;
line-height: 1.25;
color: var(--text);
}
.issue__title em { font-style: italic; font-weight: 300; color: var(--text-soft); }
.issue__date {
text-align: right;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.issue--soon .issue__title { color: var(--text-mute); }

/* ----- Coverage strip ---------------------------------------- */
.coverage {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 32px;
align-items: baseline;
padding: 28px 0;
}
.coverage__band {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 22px;
}

/* On narrow viewports, stack the coverage layout so cities have full width */
@media (max-width: 880px) {
.coverage {
grid-template-columns: 1fr;
gap: 16px;
text-align: center;
}
.coverage__band {
justify-content: center;
}
}
.coverage__band span {
font-family: var(--serif);
font-weight: 400;
font-style: italic;
font-size: 16px;
color: var(--text-soft);
}
.coverage__band span::after {
content: '·';
margin-left: 26px;
color: var(--text-dim);
}
.coverage__band span:last-child::after { content: ''; margin: 0; }
@media (max-width: 720px) {
.coverage { grid-template-columns: 1fr; gap: 12px; }
}

/* ----- Footer ------------------------------------------------- */
.footer {
border-top: 1px solid var(--divider);
padding-top: 64px;
padding-bottom: 28px;
background: var(--bg);
}
.footer__top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: clamp(28px, 4vw, 72px);
padding-bottom: 56px;
}
@media (max-width: 720px) { .footer__top { grid-template-columns: 1fr; gap: 40px; } }
.footer__brand .brand__word { font-size: 22px; }
.footer__tag {
margin-top: 14px;
max-width: 360px;
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 15px;
color: var(--text-mute);
line-height: 1.5;
}
.footer__col h4 {
margin: 0 0 18px;
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 10px; }
.footer__col a {
font-family: var(--serif);
font-weight: 300;
font-size: 16px;
color: var(--text-soft);
transition: color 0.2s ease;
}
.footer__col a:hover { color: var(--gold); }
.footer__base {
padding-top: 24px;
border-top: 1px solid var(--divider);
display: flex;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-dim);
}
.footer__base .right { color: var(--text-mute); }

/* ============================================================
Per-page pieces
============================================================ */

/* ----- Page header (interior pages) -------------------------- */
.page-head {
padding-top: clamp(72px, 10vw, 128px);
padding-bottom: clamp(40px, 6vw, 72px);
}
.page-head__crumb {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-mute);
}
.page-head__crumb .sep { margin: 0 10px; color: var(--text-dim); }
.page-head__title {
margin: 28px 0 0;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(48px, 8vw, 96px);
line-height: 0.96;
letter-spacing: -0.035em;
color: var(--text);
}
.page-head__title em { font-style: italic; color: var(--gold); font-weight: 300; }
.page-head__sub {
margin-top: 24px;
max-width: 640px;
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 21px;
line-height: 1.4;
color: var(--text-soft);
}
.page-head__meta {
margin-top: 28px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
}

/* ----- About page — masthead marginalia (added 2026-07-03) ---
about.html's .shell--prose is intentionally left-pinned (same
convention as terms/privacy/membership/etc.), which on a wide
desktop leaves the right ~40% of .page-head empty except for
the ambient .ghost-b watermark — read as awkward dead space
rather than considered margin. A small running-folio detail,
anchored to that same right region, gives it an editorial
reason to be there. Desktop-only; mobile/tablet never had the
complaint since the column already runs close to full width. */
.page-head--about { position: relative; }
.about-marginalia {
display: none;
}
@media (min-width: 1180px) {
.about-marginalia {
display: flex;
align-items: center;
gap: 10px;
position: absolute;
top: clamp(96px, 13vw, 152px);
right: var(--pad-x);
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-mute);
opacity: 0.7;
}
.about-marginalia__n {
color: var(--gold);
}
.about-marginalia__rule {
width: 28px;
height: 1px;
background: var(--divider);
}
}

/* ----- About page — margin contents (added 2026-07-03) --------
Same fill-the-right-region rationale as the page-head marginalia
above, extended down through the article body since the empty
column runs the whole scroll length. .about-body__inner is a
full .shell (max-width: var(--col-max), centered, with its own
padding-x) wrapping BOTH .about-toc and the narrower
.shell--prose column as siblings — so the nav is positioned
against the same capped/centered coordinate system as the
article and the two scale together at every viewport width,
instead of the nav drifting toward the raw viewport edge on
ultrawide screens. right:0 sits flush with .shell's own
padding-box edge (.shell already insets via padding-right:
var(--pad-x), so this is NOT an additional offset). Quiet by
design — small type, no border, no background — a margin note,
not a sidebar competing with the article. */
.about-body__inner { position: relative; }
.about-toc { display: none; }
@media (min-width: 1180px) {
.about-toc {
display: flex;
flex-direction: column;
gap: 11px;
position: absolute;
top: 6px;
right: 0;
width: 190px;
}
.about-toc__label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.85;
margin-bottom: 4px;
}
.about-toc a {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--sans);
font-size: 12.5px;
line-height: 1.4;
color: var(--text-mute);
text-decoration: none;
border-bottom: none;
transition: color 0.2s ease;
}
.about-toc a:hover { color: var(--gold); }
.about-toc__n {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-dim);
flex: none;
padding-top: 1px;
}
.about-toc a:hover .about-toc__n { color: var(--gold); }
}

/* ----- Big mailto -------------------------------------------- */
.mailto {
display: inline-block;
margin-top: 12px;
font-family: var(--serif);
font-weight: 400;
font-style: italic;
font-size: clamp(28px, 4.5vw, 48px);
letter-spacing: -0.015em;
line-height: 1.1;
color: var(--gold);
border-bottom: 1px solid var(--rule);
padding-bottom: 4px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.mailto:hover { color: var(--text); border-bottom-color: var(--gold); }

/* ----- FAQ --------------------------------------------------- */
.faq { display: flex; flex-direction: column; }
.faq__item {
border-top: 1px solid var(--divider);
padding: 28px 0;
display: grid;
grid-template-columns: 80px 1fr;
gap: 32px;
}
.faq__item:last-child { border-bottom: 1px solid var(--divider); }
.faq__n {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
padding-top: 8px;
}
.faq__q {
margin: 0 0 14px;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.6vw, 28px);
letter-spacing: -0.012em;
line-height: 1.2;
color: var(--text);
text-wrap: balance;
}
.faq__a {
font-family: var(--serif);
font-weight: 400;
font-size: 19.5px;
line-height: 1.65;
color: var(--text-soft);
max-width: 680px;
text-wrap: pretty;
}
.faq__a em { font-style: italic; }
@media (max-width: 720px) {
.faq__item { grid-template-columns: 1fr; gap: 14px; }
.faq__n { padding-top: 0; }
}

/* ----- Legal long-form -------------------------------------- */
.legal {
font-family: var(--serif);
font-weight: 300;
font-size: 17px;
line-height: 1.7;
color: var(--text-soft);
}
.legal h2 {
margin: 56px 0 18px;
font-family: var(--serif);
font-weight: 400;
font-size: 24px;
letter-spacing: -0.012em;
color: var(--text);
}
.legal h2 .num {
display: inline-block;
margin-right: 14px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
color: var(--gold);
vertical-align: middle;
}
.legal h3 {
margin: 32px 0 12px;
font-family: var(--sans);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
}
.legal p { margin: 0 0 1.2em; text-wrap: pretty; }
.legal ul { margin: 0 0 1.2em; padding-left: 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--gold); border-bottom: 1px solid var(--rule); }
.legal a:hover { border-bottom-color: var(--gold); }
.legal strong { color: var(--text); font-weight: 400; font-style: italic; }

.legal-toc {
border: 1px solid var(--divider);
border-radius: 4px;
padding: 24px;
margin-bottom: 56px;
background: rgba(221, 208, 170, 0.02);
}
.legal-toc__label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.legal-toc ol {
list-style: none;
counter-reset: toc;
margin: 0;
padding: 0;
columns: 2;
column-gap: 36px;
}
@media (max-width: 720px) { .legal-toc ol { columns: 1; } }
.legal-toc li {
counter-increment: toc;
font-family: var(--serif);
font-weight: 300;
font-size: 15px;
margin-bottom: 8px;
break-inside: avoid;
}
.legal-toc li::before {
content: counter(toc, decimal-leading-zero) ' / ';
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
color: var(--gold);
margin-right: 8px;
}
.legal-toc a:hover { color: var(--gold); }

/* ----- Press kit --------------------------------------------- */
.kit {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}
@media (max-width: 720px) { .kit { grid-template-columns: 1fr; } }
.kit__card {
border: 1px solid var(--divider);
border-radius: 4px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 12px;
background: linear-gradient(180deg, rgba(221,208,170,0.02), transparent 80%);
transition: border-color 0.2s ease, background 0.2s ease;
}
.kit__card:hover { border-color: var(--gold); }
.kit__label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.kit__title { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -0.01em; color: var(--text); }
.kit__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text-mute); text-transform: uppercase; margin-top: auto; }
.kit__meta .available { color: var(--gold); }
.kit__meta .pending { color: var(--text-dim); }

/* ----- Press contacts ---------------------------------------- */
.contacts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
border-top: 1px solid var(--divider);
border-bottom: 1px solid var(--divider);
padding: 40px 0;
margin-top: 56px;
}
@media (max-width: 720px) { .contacts { grid-template-columns: 1fr; gap: 24px; } }
.contacts__label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.contacts__mail {
font-family: var(--serif);
font-weight: 400;
font-size: 19px;
color: var(--text);
border-bottom: 1px solid var(--rule);
padding-bottom: 2px;
}
.contacts__mail:hover { color: var(--gold); border-bottom-color: var(--gold); }
.contacts__hint {
margin-top: 10px;
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 14px;
color: var(--text-mute);
}

/* ----- Press hero (added 2026-07-03) --------------------------
Deliberately its own class, not .page-head/.page-head--about.
about.html's hero is a full editorial masthead moment (huge
serif headline, italic sub-dek, marginalia). Press needed to
read as a lean utility page on first glance — smaller type
scale, an eyebrow instead of a page-head__crumb-led title, and
the contact channel + SLA surfaced as a fact-strip (same
strip-item pattern as .filter-hero__strip / .visit-hero__strip)
rather than buried in a sentence. Keeps .page-head__crumb for
the breadcrumb only — everything else is bespoke. ---------- */
.press-hero {
padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 64px);
position: relative;
}
.press-hero__eyebrow {
display: block;
margin-top: 22px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-mute);
}
.press-hero__hed {
margin: 14px 0 0;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(32px, 4.6vw, 52px);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--text);
max-width: 780px;
}
.press-hero__mailto {
font-size: inherit;
margin-top: 0;
display: inline;
word-break: break-word;
}
.press-hero__dek {
margin-top: 20px;
max-width: 600px;
font-family: var(--serif);
font-weight: 300;
font-size: 17px;
line-height: 1.55;
color: var(--text-soft);
}
.press-hero__strip {
display: flex;
flex-wrap: wrap;
gap: 22px 40px;
align-items: flex-start;
margin-top: 32px;
padding-top: 26px;
border-top: 1px solid var(--rule);
}
.press-hero__strip-item { display: flex; flex-direction: column; gap: 4px; max-width: 280px; }
.press-hero__strip-k {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-mute);
}
.press-hero__strip-v {
font-family: var(--serif);
font-size: 15.5px;
line-height: 1.4;
color: var(--text);
}
.press-hero__strip-v strong { color: var(--gold); font-style: normal; }
@media (max-width: 640px) {
.press-hero__strip-k { font-size: 12px; letter-spacing: 0.12em; }
.press-hero__strip { gap: 18px 28px; }
}

/* ----- Press kit — labeled asset rows (added 2026-07-03) ------
Replaces the old .kit card-grid, whose .kit__label ("N° 001 ·
Identity") echoed about.html's manifesto-section numbering
(.legal h2 .num, same "N° 00X" shape) closely enough that the
two pages read as the same template at a glance. Presented as
a spec-sheet list instead: a file-type tag anchors each row on
the left, no N°-numbering anywhere in the component. ---------- */
.presskit {
display: flex;
flex-direction: column;
margin-top: 32px;
border-top: 1px solid var(--divider);
}
.presskit__row {
display: grid;
grid-template-columns: 56px 1fr auto;
align-items: center;
gap: 20px;
padding: 20px 4px;
border-bottom: 1px solid var(--divider);
transition: background-color 0.2s ease;
}
.presskit__row:hover { background: rgba(221, 208, 170, 0.03); }
.presskit__tag {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
border: 1px solid var(--rule);
border-radius: 3px;
font-family: var(--mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--gold);
}
.presskit__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.presskit__title {
font-family: var(--serif);
font-weight: 400;
font-size: 19px;
letter-spacing: -0.01em;
color: var(--text);
}
.presskit__format {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-mute);
}
.presskit__status {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: right;
white-space: nowrap;
}
.presskit__status--available { color: var(--gold); }
.presskit__status--pending { color: var(--text-dim); }
@media (max-width: 640px) {
.presskit__row {
grid-template-columns: 40px 1fr;
grid-template-areas:
"tag title"
"tag status";
row-gap: 6px;
}
.presskit__tag { grid-area: tag; height: 34px; align-self: start; }
.presskit__body { grid-area: title; }
.presskit__status { grid-area: status; text-align: left; }
}

/* ----- Accessibility ---------------------------------------- */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}

/* Skip-to-content link — visible only on focus, sits above topbar */
.skip-link {
position: absolute;
top: 0;
left: 0;
transform: translateY(-200%);
clip-path: inset(50%);
z-index: 100;
padding: 12px 18px;
background: var(--bg);
color: var(--gold);
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid var(--gold);
border-radius: 2px;
margin: 8px;
transition: transform 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
clip-path: none;
outline: 2px solid var(--gold);
outline-offset: 2px;
}

/* Screen-reader-only utility — visually hidden, still announced */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* ============================================================
Motion + ambient kitchen nods
============================================================ */

/* Status strip — "kitchens open" line above the topbar */
.status {
background: #0A0907;
border-bottom: 1px solid var(--divider);
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-mute);
}
.status__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
height: 32px;
}
.status__left, .status__right {
display: inline-flex;
align-items: center;
gap: 14px;
}
.status .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
display: inline-block;
box-shadow: 0 0 0 0 var(--gold-glow);
animation: emberPulse 2.4s ease-in-out infinite;
}
.status .sep { color: var(--text-dim); }
.status .city { color: var(--text-soft); }
@media (max-width: 720px) {
.status .hide-sm { display: none; }
.status__inner { height: 28px; }
}

@keyframes emberPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(221, 208, 170, 0.45); transform: scale(1); }
50% { box-shadow: 0 0 0 6px rgba(221, 208, 170, 0); transform: scale(1.1); }
}

/* Hero entrance — letter-stagger on the wordmark, dek fade up */
.hero__wordmark { overflow: visible; }
.hero__wordmark .letter {
display: inline-block;
opacity: 0;
transform: translateY(0.35em);
animation: settleIn 0.85s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards;
}
@keyframes settleIn {
to { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow,
.hero__dek,
.cta-row {
opacity: 0;
transform: translateY(8px);
animation: heroFade 0.7s ease-out 0.55s forwards;
}
.hero__dek { animation-delay: 0.75s; }
.cta-row { animation-delay: 0.95s; }
@keyframes heroFade {
to { opacity: 1; transform: translateY(0); }
}

/* Hero plate — slow ember bloom behind the glyph */
.hero-plate::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(40% 60% at 50% 55%, rgba(221, 208, 170, 0.10), transparent 70%);
animation: emberBreath 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes emberBreath {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 0.95; transform: scale(1.08); }
}

/* Scroll-reveal — applied via IntersectionObserver */
.reveal {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"].is-in { transition-delay: 0.04s; }
.reveal[data-delay="2"].is-in { transition-delay: 0.08s; }
.reveal[data-delay="3"].is-in { transition-delay: 0.12s; }
.reveal[data-delay="4"].is-in { transition-delay: 0.16s; }

/* Gold rules that "cut" in on reveal — like a knife stroke */
.edit-item__rule {
transform-origin: left center;
transform: scaleX(0);
transition: transform 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.05) 0.1s;
}
.reveal.is-in .edit-item__rule,
.is-in .edit-item__rule { transform: scaleX(1); }
.edit-item:hover .edit-item__rule { transform: scaleX(2.6); transition-duration: 0.35s; }
.edit-item__title { transition: color 0.3s ease; }
.edit-item:hover .edit-item__title { color: var(--gold); }

/* Brand mark — gentle warmth on hover (whisk catching the light) */
.brand__mark { transition: transform 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.18), filter 0.5s ease; }
.brand:hover .brand__mark { transform: rotate(-6deg); filter: drop-shadow(0 0 8px var(--gold-glow)); }

/* Reduced motion — opt out of all of the above */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.reveal { opacity: 1; transform: none; }
.edit-item__rule { transform: scaleX(1); }
}

/* ============================================================
Phone mockups · "A look inside"
============================================================ */
.lookinside {
background: var(--bg);
position: relative;
}
.phones {
margin-top: clamp(32px, 5vw, 56px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
@media (max-width: 960px) {
.phones { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
}

.phone {
position: relative;
width: 100%;
/* Hard viewport ceiling on top of the 375px design cap: 100vw minus the
shell's own horizontal padding (both sides), so the frame is guaranteed
to fit inside the visible viewport no matter what any ancestor grid/flex
does. Fixes the recurring "phone slides off / clips on mobile" bug —
previously only a static max-width, which had no floor tied to the
actual safe content width. (2026-07-08) */
max-width: min(375px, calc(100vw - 2 * var(--pad-x)));
margin: 0 auto;
aspect-ratio: 9 / 19.5;
border-radius: 42px;
padding: 5px;
/* Second clip layer alongside .phone__screen below — belt-and-suspenders
so nothing (incl. a}