/* ============================================================
FONT FALLBACK METRICS — eliminate CLS on first paint.
Adjusts system fallback fonts to match metrics of loaded
Google Fonts so layout doesn't shift when fonts swap in.
============================================================ */
@font-face {
font-family: 'Fraunces Fallback';
src: local('Georgia'), local('Times New Roman');
size-adjust: 102.96%;
ascent-override: 95.4%;
descent-override: 24.8%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Newsreader Fallback';
src: local('Iowan Old Style'), local('Charter'), local('Georgia');
size-adjust: 100%;
ascent-override: 100%;
descent-override: 23.6%;
line-gap-override: 0%;
}
@font-face {
font-family: 'JetBrains Mono Fallback';
src: local('Menlo'), local('Consolas'), local('Courier New');
size-adjust: 105%;
ascent-override: 86%;
descent-override: 21%;
line-gap-override: 0%;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* ============================================================
WE THEM MEDIA — DESIGN SYSTEM (v1)
----------
Palette discipline:
- --coral #E47452 primary CTA accent ONLY
- --ink #C4543A brushwork & climax-word accent ONLY
- --gold #E8B958 ambient halo & finale glow ONLY
- --text #F4EDE0 body text (cream)
- --teal #2BA89F legacy logo-native (used sparingly for focus rings)
Type stack:
- Display: Fraunces (variable, opsz + WONK)
- Body: Newsreader (variable, italic)
- Mono: JetBrains Mono (labels, eyebrows, tape)
Climax-word treatment (.climax-ink) — only ONE per heading. Reserve for the
single most important word/phrase. Brushstroke under it is sumi-e (Okami).
See /styleguide for live components.
============================================================ */
:root {
/* Warm dark — like ink on a printer's plate */
--bg: #0E0D0B;
--bg-elev: #16140F;
--bg-surface: #1F1B14;
--bg-hover: #2A241B;
/* Cream pulled from the logo background */
--text: #F4EDE0;
--text-muted: #A89E8B;
--text-dim: #807968; /* nudged up from #6E6859 for AA on small mono labels */
--text-low: #3A352B;
/* Structural */
--border: #2C2820;
--border-strong: #3D362A;
--rule: #F4EDE0;
/* Logo-native accents */
--teal: #2BA89F; /* the globe / structure / brand */
--teal-deep: #1A6962; /* the leaves / depth */
--coral: #E47452; /* the people / action / urgency */
--coral-deep: #C45438; /* hover / pressed */
--ink: #C4543A; /* deeper coral for sumi-e brushwork */
--gold: #E8B958; /* Gurren halo / finale ambient glow */
/* Type */
--display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
--body: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
--mono: 'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, monospace;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* === Color scales (Tailwind-style) === */
--coral-50: #FFF1EC;
--coral-100: #FFD9CB;
--coral-200: #FAB59A;
--coral-300: #F39169;
--coral-400: #E47452;
--coral-500: #C4543A;
--coral-600: #A53F2C;
--coral-700: #7E2E1E;
--coral-800: #581E10;
--coral-900: #34110A;
--gold-100: #FAEAB6;
--gold-200: #F0CF77;
--gold-300: #E8B958;
--gold-400: #C99A3A;
--gold-500: #9F7724;
--gold-600: #6E5217;
--neutral-50: #F4EDE0;
--neutral-100: #E5DCC9;
--neutral-200: #C8BFA9;
--neutral-300: #9A8E7A;
--neutral-400: #6F6655;
--neutral-500: #4A4439;
--neutral-600: #2D2922;
--neutral-700: #1B1812;
--neutral-800: #14110D;
--neutral-900: #0E0D0B;
/* === Spacing scale (4pt-based, with finer increments at small sizes) === */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 2rem; /* 32px */
--space-8: 2.5rem; /* 40px */
--space-9: 3rem; /* 48px */
--space-10: 4rem; /* 64px */
--space-11: 5rem; /* 80px */
--space-12: 6.5rem; /* 104px */
/* === Type scale (1.25 modular ratio, 16px base) === */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 1.875rem; /* 30px */
--text-3xl: 2.25rem; /* 36px */
--text-4xl: 3rem; /* 48px */
--text-5xl: 4rem; /* 64px */
--text-6xl: 5rem; /* 80px */
/* === Motion === */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quad: cubic-bezier(0.5, 1, 0.89, 1);
--ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
--duration-fast: 0.2s;
--duration-base: 0.35s;
--duration-slow: 0.6s;
/* === Agency-tier design tokens (additive — do not refactor existing rules) === */
/* Color scale — coral (10-step) */
--coral-tier-50: #FBE9E0;
--coral-tier-100: #F5CFB9;
--coral-tier-200: #EFB392;
--coral-tier-300: #E9966B;
--coral-tier-400: #E57E50;
--coral-tier-500: #E47452; /* matches existing --coral */
--coral-tier-600: #C4543A; /* matches existing --ink */
--coral-tier-700: #A03F2A;
--coral-tier-800: #7A2C1B;
--coral-tier-900: #4F1B0F;
/* Color scale — neutral (warm, 10-step) */
--neutral-tier-50: #F4EDE0; /* cream / matches existing --text */
--neutral-tier-100: #E5DAC6;
--neutral-tier-200: #C8B89E;
--neutral-tier-300: #A89A82;
--neutral-tier-400: #8A7E69;
--neutral-tier-500: #6B6253;
--neutral-tier-600: #4D463A;
--neutral-tier-700: #2F2A22;
--neutral-tier-800: #181612;
--neutral-tier-900: #0E0D0B; /* matches existing --bg */
/* Color scale — gold (4-step) */
--gold-tier-300: #F0CB7A;
--gold-tier-400: #E8B958;
--gold-tier-500: #D4A23E;
--gold-tier-600: #A87E2C;
/* Spacing scale (8pt base) */
--space-tier-1: 0.25rem; /* 4px */
--space-tier-2: 0.5rem; /* 8px */
--space-tier-3: 0.75rem; /* 12px */
--space-tier-4: 1rem; /* 16px */
--space-tier-5: 1.5rem; /* 24px */
--space-tier-6: 2rem; /* 32px */
--space-tier-7: 2.5rem; /* 40px */
--space-tier-8: 3rem; /* 48px */
--space-tier-9: 4rem; /* 64px */
--space-tier-10: 5rem; /* 80px */
--space-tier-11: 6rem; /* 96px */
--space-tier-12: 8rem; /* 128px */
/* Type scale (modular, ratio 1.25) */
--text-1: 0.75rem; /* 12px — micro labels */
--text-2: 0.875rem; /* 14px — small body */
--text-3: 1rem; /* 16px — body base */
--text-4: 1.125rem; /* 18px — large body */
--text-5: 1.25rem; /* 20px — small heading */
--text-6: 1.5rem; /* 24px — h4 */
--text-7: 1.875rem; /* 30px — h3 */
--text-8: 2.25rem; /* 36px — h2 */
--text-9: 3rem; /* 48px — h1 inner */
--text-10: 4rem; /* 64px — h1 hero */
--text-11: 5.5rem; /* 88px — display */
/* Easing tokens */
--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== v1 SOULFUL/TRANSCENDENT/PIERCE COMPONENTS =====
Brushwork (Okami), spiral colophon (Gurren), gold halo (Gurren),
Dymo tape, polaroid+chamfer photo, scroll-reveal. */
/* Spiral colophon — ambient rotation */
.spiral {
width: 14px; height: 14px;
color: var(--coral);
display: inline-block;
vertical-align: middle;
animation: spin 18s linear infinite;
flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Live pulse dot */
.live-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--coral);
animation: livepulse 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(228,116,82,0.55);
vertical-align: middle;
}
@keyframes livepulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(228,116,82,0.55); }
50% { opacity: 0.45; box-shadow: 0 0 0 8px rgba(228,116,82,0); }
}
/* Sumi-e brushstroke painted under climax word */
.climax-ink {
color: var(--ink);
display: inline-block;
position: relative;
padding-bottom: 0.18em;
}
.climax-ink::after {
content: '';
position: absolute;
left: -4px; right: -4px; bottom: 0;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
pointer-events: none;
}
/* Brushstroke divider — paints itself on scroll into view */
.brush-line {
display: block;
width: 100%; max-width: 320px;
height: 14px;
color: var(--ink);
margin-top: 6px;
}
.brush-line path {
stroke-dasharray: 800;
stroke-dashoffset: 800;
transition: stroke-dashoffset 1.2s var(--ease);
}
.brush-line.in path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
.brush-line path { stroke-dashoffset: 0; transition: none; }
}
/* Gold halo bleed — Gurren finale ambient (low opacity) */
.halo-bleed {
position: absolute;
pointer-events: none;
background: radial-gradient(circle, rgba(232,185,88,0.2), transparent 65%);
filter: blur(40px);
opacity: 0.5;
animation: haloPulse 8s ease-in-out infinite;
z-index: 0;
}
@keyframes haloPulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.05); }
}
/* Dymo label tape — distinct status pill */
.tape {
display: inline-block;
background: var(--text); color: var(--bg);
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 12px 5px 18px;
clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}
.tape.coral { background: var(--ink); color: var(--text); }
.tape.gold { background: var(--gold); color: var(--bg); }
/* Polaroid+chamfer photo treatment — for hero feature photo */
.polaroid-chamfer {
position: relative;
background: #F4EDE0;
padding: 14px 14px 48px;
box-shadow: 0 18px 40px rgba(0,0,0,0.4), 0 0 0 3px var(--bg);
transform: rotate(1.5deg);
transition: transform .35s var(--ease);
}
.polaroid-chamfer:hover { transform: rotate(0deg) translate(-3px, -3px); }
.polaroid-chamfer .img {
width: 100%;
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: #1a1612;
clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.polaroid-chamfer .cap {
position: absolute;
bottom: 14px; left: 14px; right: 14px;
font-family: var(--body);
font-style: italic;
font-size: 0.95rem;
color: #1a1612;
text-align: center;
}
.polaroid-chamfer .badge {
position: absolute; top: -10px; right: -10px;
background: var(--coral); color: var(--bg);
padding: 5px 10px;
font-family: var(--mono);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
transform: rotate(6deg);
}
/* Scroll reveal */
.v1-reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.v1-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.v1-reveal { opacity: 1; transform: none; transition: none; }
.spiral, .live-dot, .halo-bleed { animation: none !important; }
}
/* Section opener — [num] + serif italic title + brushstroke */
.v1-opener { margin-bottom: 2rem; }
.v1-opener-row {
display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: 8px;
}
.v1-opener .num {
font-family: var(--mono);
font-size: 0.7rem; font-weight: 700;
color: var(--coral);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.v1-opener .title {
font-family: var(--body);
font-style: italic;
font-size: 1.6rem; font-weight: 500;
line-height: 1.15;
}
.v1-opener .small {
font-family: var(--mono);
font-size: 0.7rem; font-weight: 700;
color: var(--text-muted);
margin-left: auto;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* Auto-brushstroke under every section-head h2 — sumi-e flourish, CSS only */
.section-head h2 {
position: relative;
}
.section-head h2::after {
content: '';
display: block;
width: 240px;
max-width: 100%;
height: 12px;
margin-top: 18px;
background: url("data:image/svg+xml;utf8,") no-repeat left center / 100% 100%;
transform: scaleX(0);
transform-origin: left;
transition: transform 1.1s var(--ease) 0.2s;
}
html.js .reveal .section-head h2::after,
html.js .section-head.reveal h2::after { transform: scaleX(0); }
html.js .section-head.reveal.visible h2::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.section-head h2::after { transform: scaleX(1) !important; transition: none; }
}
/* Gold halo bleed on the hero (Gurren ambient transcendence — low opacity) */
.hero { position: relative; isolation: isolate; }
.hero::before {
content: '';
position: absolute;
top: 8%; right: -8%;
width: 540px; height: 540px;
background: radial-gradient(circle, rgba(232,185,88,0.16), transparent 60%);
filter: blur(60px);
pointer-events: none;
z-index: -1;
animation: heroHaloPulse 9s ease-in-out infinite;
}
@keyframes heroHaloPulse {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; }
}
/* Subtle gold halo bleed on the support section (PIERCE finale ambient) */
#support { position: relative; isolation: isolate; overflow: hidden; }
#support::before {
content: '';
position: absolute;
bottom: -180px; left: 50%; transform: translateX(-50%);
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(232,185,88,0.14), transparent 60%);
filter: blur(50px);
pointer-events: none;
z-index: -1;
animation: heroHaloPulse 11s ease-in-out infinite;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--body);
font-optical-sizing: auto;
background: var(--bg);
color: var(--text);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-size: 17px;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 100;
opacity: 0.6;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 99;
background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
}
main, header, footer, section { position: relative; z-index: 2; }
a { color: inherit; text-decoration: none; transition: all 0.2s ease; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--coral); color: var(--bg); }
/* Global focus-visible — high-contrast teal outline,
offset so it's visible against backgrounds. */
:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 3px;
border-radius: 1px;
}
.btn:focus-visible { outline-offset: 4px; }
/* Skip-to-content link — hidden until focused, then anchored to top-left */
.skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: 9999;
padding: 0.85rem 1.25rem;
background: var(--coral);
color: var(--bg);
font-family: var(--mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 700;
border-radius: 4px;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 1rem;
outline: 2px solid var(--text);
outline-offset: 2px;
}
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 2rem; }
.narrow { max-width: 960px; margin: 0 auto; padding: 0 2rem; }
.mono-eyebrow {
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-muted);
font-weight: 500;
}
.lede {
font-family: var(--body);
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
line-height: 1.55;
color: var(--text-muted);
max-width: 58ch;
}
em {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 72, "SOFT" 100;
font-weight: 400;
}
/* ===== MASTHEAD ===== */
.masthead {
position: sticky;
top: 0;
z-index: 50;
background: rgba(10, 9, 8, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.masthead-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
max-width: 1320px;
margin: 0 auto;
gap: 2rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 800;
font-size: 1.3rem;
letter-spacing: -0.02em;
color: var(--text);
}
.brand img { width: 32px; height: 32px; }
nav ul {
display: flex;
gap: 2rem;
list-style: none;
align-items: center;
}
nav a {
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-muted);
padding: 0.5rem 0.25rem;
min-height: 24px;
display: inline-flex;
align-items: center;
border-bottom: 1px solid transparent;
}
nav a:hover,
nav a:focus-visible {
color: var(--teal);
border-bottom-color: var(--teal);
outline: none;
}
.masthead-cta {
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--bg);
background: var(--coral);
padding: 0.7rem 1.15rem;
font-weight: 600;
transition: all 0.2s;
white-space: nowrap;
}
.masthead-cta:hover {
background: var(--text);
transform: translate(-2px, -2px);
box-shadow: 4px 4px 0 var(--coral);
}
.masthead-discord {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-dim);
text-decoration: none;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color .2s, border-color .2s;
margin-right: 0.5rem;
white-space: nowrap;
}
.masthead-discord:hover { color: var(--coral); border-color: var(--coral); }
@media (max-width: 720px) { .masthead-discord span { display: none; } }
/* === Mobile nav toggle === */
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--border-strong);
padding: 0;
width: 44px;
height: 44px;
cursor: pointer;
position: relative;
transition: border-color 0.2s ease;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
border-color: var(--coral);
outline: none;
}
.nav-toggle-bar {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 1.5px;
background: var(--text);
transform: translate(-50%, -50%);
transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}
.nav-toggle-bar:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); }
.nav-toggle-bar:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: var(--coral); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }
/* ===== TICKER ===== */
.ticker {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
overflow: hidden;
padding: 0.75rem 0;
position: relative;
}
.ticker-track {
display: flex;
gap: 3rem;
animation: scroll-ticker 50s linear infinite;
white-space: nowrap;
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.ticker-track span { display: flex; align-items: center; gap: 3rem; }
.ticker-track .dot { color: var(--teal); font-size: 1.2em; }
@keyframes scroll-ticker {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.ticker-track { animation: none; transform: none; }
}
/* ===== HERO ===== */
.hero {
padding: 5rem 0 5rem;
position: relative;
overflow: hidden;
}
.hero-grid {
max-width: 1320px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 2;
}
.hero-headline { margin-bottom: 4rem; }
.hero-label {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.hero-label .dot {
width: 8px;
height: 8px;
background: var(--coral);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
.hero-label .dot { animation: none; }
}
.hero h1 {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: clamp(2.4rem, 9vw, 8rem);
line-height: 0.92;
letter-spacing: -0.04em;
margin-bottom: 1.75rem;
color: var(--text);
}
.hero h1 .italic {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
color: var(--coral);
}
.hero-subhead {
font-family: var(--body);
font-size: clamp(1.1rem, 1.9vw, 1.65rem);
line-height: 1.35;
color: var(--text);
max-width: 38ch;
margin-bottom: 2.25rem;
font-weight: 500;
}
.hero-subhead-em {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 72, "SOFT" 100;
font-weight: 500;
color: var(--coral);
}
.hero-meta {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3.5rem;
align-items: start;
padding-top: 2rem;
border-top: 2px solid var(--rule);
}
.hero-video-col {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.hero-yt-tile {
aspect-ratio: 16 / 9;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.hero-lede {
font-family: var(--body);
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
line-height: 1.6;
color: var(--text-muted);
max-width: 62ch;
}
.hero-lede strong { color: var(--coral); font-weight: 600; }
.hero-side {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid var(--border);
}
.hero-side > div {
padding: 1.1rem 0 1rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.hero-side > div:last-child { border-bottom: none; }
.hero-side .label {
font-family: var(--mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-dim);
margin: 0;
white-space: nowrap;
}
.hero-side .value {
font-family: var(--display);
font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
font-size: 1.55rem;
color: var(--text);
font-weight: 700;
letter-spacing: -0.02em;
text-align: right;
}
.hero-side > div:first-child .value {
color: var(--coral);
font-size: 1.85rem;
}
/* Shared button-row utility (used in hero, podcast, etc) */
.btn-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-ctas { margin-top: 0; }
/* ===== BUTTONS ===== */
.btn {
font-family: var(--mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
padding: 1rem 1.75rem;
border: none;
cursor: pointer;
display: inline-block;
transition: all 0.2s ease;
position: relative;
min-height: 44px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.btn-primary {
background: var(--coral);
color: var(--bg);
}
.btn-primary:hover {
transform: translate(-3px, -3px);
box-shadow: 6px 6px 0 var(--teal);
}
.btn-secondary {
background: transparent;
color: var(--text);
border: 1.5px solid var(--text);
}
.btn-secondary:hover {
background: var(--text);
color: var(--bg);
transform: translate(-3px, -3px);
box-shadow: 6px 6px 0 var(--coral);
}
.btn-ghost {
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border-strong);
}
.btn-ghost:hover {
color: var(--text);
border-color: var(--text);
}
/* ===== STATS ===== */
.stats {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
max-width: 1320px;
margin: 0 auto;
}
.stat {
padding: 2.5rem 2rem;
border-right: 1px solid var(--border);
}
.stat:last-child { border-right: none; }
.stat-label {
font-family: var(--mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-dim);
margin-bottom: 0.75rem;
}
.stat-number {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1;
color: var(--text);
letter-spacing: -0.02em;
}
.stat-sub {
font-family: var(--body);
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 0.5rem;
}
/* ===== SECTIONS ===== */
section.spread { padding: 7rem 0; }
section.spread.elev { background: var(--bg-elev); }
/* Section header — single-column editorial pattern.
Meta line on top (number + tag, separated by a hairline rule),
H2 below at full width. Easier to scan, no awkward floating H2. */
.section-head {
display: block;
margin-bottom: 4rem;
max-width: 1100px;
}
.section-head > div:first-child {
display: flex;
align-items: center;
gap: 1.25rem;
padding-bottom: 1.25rem;
margin-bottom: 1.75rem;
border-bottom: 1px solid var(--border);
}
.section-head .section-number { margin-bottom: 0; }
.section-head .section-tag { margin-left: auto; text-align: right; }
.section-number {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
color: var(--teal);
margin-bottom: 0.75rem;
text-transform: uppercase;
}
.section-tag {
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-muted);
}
.section-head h2 {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--text);
}
.section-head h2 .italic {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
color: var(--coral);
}
/* ===== DENVER ===== */
.denver-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.denver-video {
aspect-ratio: 16 / 10;
background: var(--bg-surface);
border: 1px solid var(--border);
overflow: hidden;
position: relative;
}
.denver-video iframe { width: 100%; height: 100%; border: 0; }
/* === Click-to-play YouTube tile ===
Per Aziz: "smaller, click through... I can click through and go to a second page where... Watch it."
Per Fidesio: "lead with video, content sells itself."
The iframe doesn't load until the user clicks the tile, so the page is lighter and more visual. */
.yt-tile {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
background: var(--bg-elev);
border: 1px solid var(--border);
color: var(--text);
overflow: hidden;
cursor: pointer;
text-align: left;
padding: 0;
font: inherit;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.yt-tile:not(.is-playing) {
background-image:
radial-gradient(ellipse at 30% 30%, rgba(228, 116, 82, 0.12), transparent 60%),
radial-gradient(ellipse at 70% 70%, rgba(43, 168, 159, 0.10), transparent 60%);
}
@media (hover: hover) {
.yt-tile:hover:not(.is-playing) {
border-color: var(--coral);
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.yt-tile:hover .yt-tile-play { transform: translate(-50%, -50%) scale(1.08); background: var(--coral); }
.yt-tile:hover .yt-tile-play-icon { color: var(--bg); }
}
.yt-tile:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.yt-tile-thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.yt-tile-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.5rem 1.75rem;
background: linear-gradient(to top, rgba(14,13,11,0.85) 0%, rgba(14,13,11,0.35) 50%, rgba(14,13,11,0.45) 100%);
color: var(--text);
}
.yt-tile-meta {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
font-weight: 600;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.yt-tile-meta-pill {
padding: 0.3rem 0.6rem;
background: var(--coral);
color: var(--bg);
}
.yt-tile-info {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.yt-tile-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
line-height: 1.15;
letter-spacing: -0.02em;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.yt-tile-subtitle {
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 237, 224, 0.85);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.yt-tile-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(244, 237, 224, 0.92);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.25s ease, transform 0.25s ease;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.yt-tile-play-icon {
color: var(--bg);
transition: color 0.2s ease;
margin-left: 4px;
}
.yt-tile.is-playing { cursor: default; transform: none; box-shadow: none; }
.yt-tile.is-playing .yt-tile-overlay,
.yt-tile.is-playing .yt-tile-play,
.yt-tile.is-playing .yt-tile-thumb { display: none; }
.yt-tile.is-playing iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Smaller play button on small viewports */
@media (max-width: 640px) {
.yt-tile-play { width: 56px; height: 56px; }
.yt-tile-play-icon svg { width: 22px; height: 22px; }
.yt-tile-overlay { padding: 1.1rem 1.25rem; }
.yt-tile-title { font-size: 1rem; }
}
/* Philadelphia divider between Denver and Philly blocks */
.phl-divider {
display: flex;
align-items: center;
gap: 1.25rem;
margin: 5rem 0 4rem;
}
.phl-divider-line {
flex: 1;
height: 1px;
background: var(--border);
}
.phl-divider-text {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.22em;
color: var(--coral);
text-transform: uppercase;
white-space: nowrap;
}
/* Pulsing live dot for the Philly "active right now" caption */
.phl-live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--coral);
margin-right: 0.5rem;
vertical-align: middle;
animation: phl-pulse 1.6s ease-in-out infinite;
}
@keyframes phl-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
.phl-live-dot { animation: none; }
}
/* === §02 Why — content-only, no video duplication of the hero clip === */
.why-content {
max-width: 880px;
margin: 0 auto;
}
.why-h3 {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0;
font-weight: 700;
font-size: clamp(1.75rem, 3vw, 2.4rem);
line-height: 1.05;
letter-spacing: -0.025em;
margin-bottom: 2rem;
color: var(--text);
}
.why-quote {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
font-size: clamp(1.4rem, 2.4vw, 2rem);
line-height: 1.32;
color: var(--text);
border-left: 3px solid var(--coral);
padding: 0.5rem 0 0.5rem 2rem;
margin: 0 0 2.5rem;
letter-spacing: -0.015em;
}
.why-quote-em {
color: var(--coral);
}
.why-cite {
display: block;
font-family: var(--mono);
font-style: normal;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-dim);
font-weight: 600;
margin-top: 1.5rem;
}
.why-cite-link {
color: var(--text-muted);
font-weight: 500;
}
.why-explainer {
color: var(--text-muted);
font-size: 1.1rem;
line-height: 1.65;
max-width: 64ch;
margin-bottom: 1.25rem;
}
.why-explainer:last-child { margin-bottom: 0; }
.why-explainer strong {
color: var(--text);
font-weight: 600;
}
/* In-line team quote inside the manifesto — slightly inset, slight color shift */
.why-explainer--devin {
border-left: 2px solid var(--teal);
padding-left: 1.25rem;
margin-top: 1.5rem;
color: var(--text);
font-size: 1.05rem;
}
@media (max-width: 640px) {
.why-quote { padding-left: 1.25rem; font-size: 1.25rem; }
}
.denver-content h3 {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0;
font-weight: 700;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1;
margin-bottom: 1.5rem;
letter-spacing: -0.025em;
}
.denver-content p {
color: var(--text-muted);
margin-bottom: 1.25rem;
font-size: 1.05rem;
line-height: 1.65;
}
.denver-content p strong { color: var(--text); font-weight: 600; }
.denver-content .caption-note {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-dim);
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.denver-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
padding: 1.5rem 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.denver-stat-num {
font-family: var(--display);
font-size: 1.75rem;
font-weight: 700;
color: var(--coral);
line-height: 1;
margin-bottom: 0.25rem;
}
.denver-stat-lbl {
font-family: var(--mono);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-dim);
}
/* ===== PULL QUOTE ===== */
.pull-quote {
padding: 7rem 0;
text-align: center;
border-top: 2px solid var(--rule);
border-bottom: 2px solid var(--rule);
background: var(--bg);
position: relative;
}
.pull-quote blockquote {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.1;
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
color: var(--text);
letter-spacing: -0.02em;
}
.pull-quote blockquote .highlight { color: var(--coral); }
.pull-quote blockquote .highlight-teal { color: var(--teal); }
.pull-quote cite {
display: block;
font-family: var(--mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-dim);
margin-top: 3rem;
font-style: normal;
}
/* === Pull-quote variant: asymmetric, with margin rule === */
.pull-quote--margin {
padding: 5.5rem 0;
text-align: left;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.pull-quote--margin .pull-quote-margin-grid {
display: grid;
grid-template-columns: 64px 1fr;
gap: 2.5rem;
align-items: stretch;
}
.pull-quote--margin .pull-quote-margin-rule {
background: var(--coral);
width: 3px;
justify-self: end;
min-height: 60px;
}
.pull-quote--margin blockquote {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
font-size: clamp(1.6rem, 3.4vw, 2.75rem);
line-height: 1.2;
max-width: 28ch;
padding: 0;
margin: 0;
color: var(--text);
letter-spacing: -0.015em;
}
.pull-quote--margin cite {
margin-top: 1.75rem;
margin-left: calc(64px + 2.5rem);
}
@media (max-width: 820px) {
.pull-quote--margin { padding: 4rem 0; }
.pull-quote--margin .pull-quote-margin-grid { grid-template-columns: 32px 1fr; gap: 1.25rem; }
.pull-quote--margin cite { margin-left: calc(32px + 1.25rem); }
}
/* ===== STEPS ===== */
.steps-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
}
.step {
padding: 3rem;
border: 1px solid var(--border);
margin: -0.5px;
position: relative;
}
/* No card-level hover — these explain the mechanism, they don't navigate. */
.step-num {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: 4rem;
line-height: 1;
color: var(--coral);
margin-bottom: 1.5rem;
letter-spacing: -0.04em;
}
/* Team voice — quiet testimonial block from a team member,
used to attest to a section's claim with a real human voice. */
.team-voice {
margin: 4rem 0;
padding: 2rem 2.5rem;
border-left: 2px solid var(--teal);
background: rgba(43, 168, 159, 0.04);
max-width: 920px;
}
.team-voice-tag {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 1.25rem;
font-weight: 600;
}
.team-voice-quote {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 72, "SOFT" 100;
font-size: clamp(1.1rem, 1.55vw, 1.4rem);
line-height: 1.45;
color: var(--text);
margin: 0 0 1.25rem;
max-width: 64ch;
font-weight: 400;
}
.team-voice-cite {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
font-weight: 600;
margin: 0;
}
@media (max-width: 640px) {
.team-voice { padding: 1.75rem 1.5rem; margin: 3rem 0; }
}
.step h3 {
font-family: var(--display);
font-variation-settings: "opsz" 72, "SOFT" 0;
font-weight: 700;
font-size: 1.5rem;
margin-bottom: 1rem;
line-height: 1.15;
letter-spacing: -0.02em;
}
.step p {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.65;
}
.step p a {
color: var(--coral);
border-bottom: 1px solid var(--coral);
}
/* ===== TIMELINE ===== */
.timeline {
margin-top: 5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border);
}
.timeline-phase {
padding: 2.5rem 2rem;
border-right: 1px solid var(--border);
}
.timeline-phase:last-child { border-right: none; }
.timeline-date {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--coral);
margin-bottom: 1rem;
font-weight: 600;
}
.timeline-phase h4 {
font-family: var(--display);
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.timeline-phase p {
font-size: 0.9rem;
color: var(--text-muted);
line-height: 1.5;
}
/* ===== BUDGET ===== */
/* ===== BUDGET / LEDGER ===== */
.budget-hero {
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
align-items: end;
margin-bottom: 3rem;
padding-bottom: 2.5rem;
border-bottom: 2px solid var(--rule);
}
.budget-total {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: clamp(5rem, 14vw, 11rem);
line-height: 0.85;
color: var(--coral);
letter-spacing: -0.05em;
position: relative;
}
.budget-total .dollar {
font-size: 0.55em;
vertical-align: top;
margin-right: 0.05em;
color: var(--text);
}
.budget-total::after {
content: 'TARGET';
position: absolute;
top: 0.5rem;
right: -1rem;
font-family: var(--mono);
font-size: 0.6rem;
letter-spacing: 0.2em;
color: var(--teal);
transform: rotate(90deg);
transform-origin: top right;
font-weight: 600;
}
.budget-hero-text .label {
font-family: var(--mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--text-dim);
margin-bottom: 0.75rem;
}
.budget-hero-text h3 {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.4rem, 2vw, 1.8rem);
line-height: 1.2;
margin-bottom: 1rem;
letter-spacing: -0.02em;
color: var(--text);
}
.budget-hero-text p {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.5;
}
.budget-trust {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.25rem;
}
.budget-trust .chip {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--teal);
padding: 0.4rem 0.7rem;
border: 1px solid var(--teal-deep);
background: rgba(43, 168, 159, 0.06);
}
/* === Allocation Ledger - With Proportion Bars === */
.alloc-header {
display: grid;
grid-template-columns: 70px 1fr 70px 110px;
gap: 1.25rem;
padding: 0.85rem 1.5rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
border-bottom: 1px solid var(--border);
background: var(--bg);
}
.alloc-header .h-amt { text-align: right; }
.alloc-header .h-pct { text-align: right; }
.budget-ledger {
border: 1px solid var(--border);
background: var(--bg);
}
.budget-row {
display: grid;
grid-template-columns: 70px 1fr 70px 110px;
padding: 1.5rem;
border-bottom: 1px solid var(--border);
align-items: start;
gap: 1.25rem;
transition: background 0.25s ease;
position: relative;
}
.budget-row:hover { background: var(--bg-surface); }
.budget-row:last-child { border-bottom: none; }
.budget-row .line {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--text-dim);
letter-spacing: 0.15em;
padding-top: 0.45rem;
}
.budget-row .body { display: flex; flex-direction: column; gap: 0.4rem; }
.budget-row .title {
font-family: var(--display);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: -0.01em;
color: var(--text);
}
.budget-row .desc {
color: var(--text-muted);
font-size: 0.92rem;
line-height: 1.5;
max-width: 56ch;
}
.budget-row .pct {
font-family: var(--mono);
font-size: 0.85rem;
color: var(--teal);
text-align: center;
padding-top: 0.5rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.budget-row .amount {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: 1.5rem;
color: var(--coral);
text-align: right;
letter-spacing: -0.02em;
padding-top: 0.25rem;
}
/* Proportion bar — visual weight under each row */
.budget-row .proportion {
grid-column: 1 / -1;
margin-top: 1.25rem;
height: 3px;
background: var(--bg-elev);
position: relative;
overflow: hidden;
}
.budget-row .proportion::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
background: var(--coral);
width: var(--w, 50%);
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.budget-row.is-team .proportion::after { background: var(--coral); }
.budget-row.is-bounty .proportion::after { background: var(--teal); }
.budget-row.is-tips .proportion::after { background: var(--gold, #E8B557); }
.budget-row.is-infra .proportion::after { background: var(--text-dim); }
/* === Ledger statement — quiet trust marker beneath the budget === */
.ledger-statement {
margin-top: 3rem;
padding: 2rem 2.5rem;
border-left: 3px solid var(--coral);
background: var(--bg-elev);
}
.ledger-statement p {
font-family: var(--body);
font-size: 1.05rem;
line-height: 1.65;
color: var(--text-muted);
max-width: 75ch;
margin: 0;
}
.ledger-statement p strong {
color: var(--text);
font-weight: 600;
}
/* ===== TEAM ===== */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.team-member {
padding: 2rem;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* No hover state — these cards aren't clickable destinations.
The social icons inside each card are the interactive elements. */
.team-photo {
aspect-ratio: 1;
background: var(--bg-surface);
margin-bottom: 1.25rem;
position: relative;
overflow: hidden;
border: 1px solid var(--border);
}
.team-photo::after {
content: 'PHOTO PENDING';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.2em;
color: var(--text-dim);
}
.team-photo img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
.fc-badge {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
z-index: 2;
width: 34px;
height: 34px;
background: #855DCD;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.fc-badge:hover {
transform: scale(1.08);
box-shadow: 0 4px 14px rgba(133, 93, 205, 0.45);
}
.fc-badge svg {
width: 18px;
height: 18px;
}
.team-name {
font-family: var(--display);
font-weight: 700;
font-size: 1.4rem;
letter-spacing: -0.02em;
margin-bottom: 0.25rem;
}
.team-role {
font-family: var(--mono);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--coral);
margin-bottom: 0.75rem;
}
.team-bio {
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.55;
}
.team-location {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--text-dim);
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
letter-spacing: 0.05em;
}
.team-socials {
display: flex;
gap: 0.75rem;
margin-top: 0.65rem;
align-items: center;
}
.team-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--text-dim);
transition: color 0.2s ease, transform 0.2s ease;
text-decoration: none;
}
.team-socials a:hover {
color: var(--coral);
transform: translateY(-1px);
}
.team-socials svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.team-rate {
font-family: var(--mono);
font-size: 0.7rem;
color: var(--text-dim);
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--border);
letter-spacing: 0.1em;
}
/* ===== LTAE ===== */
.ltae-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.ltae-content h3 {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.75rem, 3vw, 2.25rem);
margin-bottom: 1.25rem;
letter-spacing: -0.025em;
line-height: 1.05;
}
.ltae-content h3 .italic {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
color: var(--coral);
}
.ltae-content p {
color: var(--text-muted);
margin-bottom: 1.25rem;
font-size: 1.05rem;
line-height: 1.65;
}
.ltae-video {
aspect-ratio: 16 / 10;
background: var(--bg-surface);
border: 1px solid var(--border);
overflow: hidden;
position: relative;
}
.ltae-video iframe { width: 100%; height: 100%; border: 0; }
/* Crew coda — Maceo's "peers, not assistants" line, sits above the flag marquee */
.crew-coda {
margin-top: 3.5rem;
font-family: var(--display);
font-size: clamp(1.3rem, 2vw, 1.7rem);
line-height: 1.35;
color: var(--text-muted);
max-width: 56ch;
font-weight: 400;
letter-spacing: -0.015em;
}
.crew-coda-em {
font-style: italic;
font-variation-settings: "opsz" 72, "SOFT" 100;
color: var(--coral);
font-weight: 400;
}
/* ===== COUNTRIES — rolling flag banner ===== */
.countries {
margin-top: 4rem;
padding: 2.25rem 0 2rem;
border: 1px solid var(--border);
background: var(--bg);
}
.countries-label {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 1.25rem;
padding: 0 2rem;
}
.flag-marquee {
position: relative;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.flag-marquee-track {
display: flex;
width: max-content;
animation: scroll-flags 70s linear infinite;
}
.flag-marquee-set {
display: flex;
align-items: center;
}
.flag-tile {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.4rem 1.5rem 0.4rem 0;
font-family: var(--display);
font-weight: 500;
font-size: 1.1rem;
color: var(--text);
letter-spacing: -0.01em;
white-space: nowrap;
position: relative;
}
.flag-tile::after {
content: '';
position: absolute;
right: 0.55rem;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--coral);
opacity: 0.6;
}
.flag-glyph {
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif;
font-size: 1.5rem;
line-height: 1;
display: inline-block;
transform: translateY(-1px);
/* Slight saturation lift so flags pop on the warm dark bg */
filter: saturate(1.05) contrast(1.05);
}
.flag-name {
font-family: var(--display);
font-weight: 500;
}
@keyframes scroll-flags {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.flag-marquee:hover .flag-marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.flag-marquee-track { animation: none; }
.flag-marquee { mask-image: none; -webkit-mask-image: none; overflow: auto; }
.flag-marquee-set:nth-child(2) { display: none; }
}
/* Soft brand-color fades on each end (in addition to mask) */
.flag-marquee-fade {
position: absolute;
top: 0;
bottom: 0;
width: 56px;
pointer-events: none;
z-index: 2;
}
.flag-marquee-fade--left {
left: 0;
background: linear-gradient(to right, var(--bg), transparent);
}
.flag-marquee-fade--right {
right: 0;
background: linear-gradient(to left, var(--bg), transparent);
}
@media (max-width: 640px) {
.flag-tile { font-size: 0.95rem; padding-right: 1.1rem; gap: 0.5rem; }
.flag-glyph { font-size: 1.25rem; }
.flag-tile::after { right: 0.4rem; width: 3px; height: 3px; }
.countries-label { padding: 0 1.25rem; }
}
/* ===== SUPPORT ===== */
.support-hero h2 {
font-size: clamp(3rem, 7vw, 6rem);
}
/* === Featured live action — visually dominant === */
.support-featured {
margin-top: 3.5rem;
background: var(--bg);
border: 1px solid var(--border-strong);
border-left: 4px solid var(--coral);
position: relative;
}
/* No card-level hover — the primary button inside is the action. */
.support-featured-banner {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--mono);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--coral);
font-weight: 700;
padding: 0.95rem 2.5rem;
background: rgba(228, 116, 82, 0.06);
border-bottom: 1px solid var(--border);
}
.support-featured-banner .live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--coral);
box-shadow: 0 0 0 4px rgba(228, 116, 82, 0.18);
animation: phl-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.support-featured-banner .live-dot { animation: none; }
}
.support-featured-body {
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
padding: 2.5rem;
}
.support-featured-text h3 {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.75rem, 2.6vw, 2.25rem);
margin-bottom: 0.85rem;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--text);
}
.support-featured-text p {
color: var(--text);
font-size: 1.05rem;
line-height: 1.6;
max-width: 56ch;
}
.support-featured-text code {
font-family: var(--mono);
font-size: 0.92em;
color: var(--coral);
background: var(--bg-elev);
padding: 0.1em 0.4em;
border-radius: 2px;
}
.poidh-inline-link {
text-decoration: none;
border-bottom: 1px solid var(--coral);
transition: background 0.2s ease;
}
.poidh-inline-link:hover {
background: rgba(228, 116, 82, 0.12);
}
.poidh-inline-link code {
color: var(--coral);
}
.support-featured-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
}
.support-featured-meta {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
}
/* Conditional matching disclosure — quiet but visible */
.support-featured-fineprint {
font-family: var(--body);
font-size: 0.92rem !important;
line-height: 1.5;
color: var(--text-muted) !important;
border-left: 2px solid var(--coral);
padding: 0.65rem 0 0.65rem 1rem;
margin-top: 1rem !important;
background: rgba(228, 116, 82, 0.04);
}
.support-featured-fineprint strong {
color: var(--coral);
font-weight: 700;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.12em;
}
@media (max-width: 820px) {
.support-featured-body {
grid-template-columns: 1fr;
gap: 1.75rem;
padding: 2rem 1.5rem;
}
.support-featured-banner { padding: 0.85rem 1.5rem; font-size: 0.62rem; }
.support-featured-cta { align-items: stretch; }
.support-featured-cta .btn { text-align: center; }
}
/* === Preview row — clearly NOT interactive (yet) === */
.support-preview {
margin-top: 3.5rem;
}
.support-preview-header {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 2rem;
}
.support-preview-eyebrow {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
.support-preview-eyebrow strong { color: var(--text); font-weight: 700; }
.support-preview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.support-preview-card {
position: relative;
padding: 2rem;
background: transparent;
border: 1px dashed var(--border-strong);
opacity: 0.78;
cursor: default;
}
/* No hover state — the card itself isn't actionable.
The "Notify me when live" link inside is the interactive element. */
/* Subtle diagonal hatch overlay so cards read as "not yet active" */
.support-preview-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
135deg,
transparent 0,
transparent 12px,
rgba(244, 237, 224, 0.012) 12px,
rgba(244, 237, 224, 0.012) 13px
);
}
.preview-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 1rem;
font-weight: 600;
}
.preview-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: transparent;
border: 1.5px solid var(--text-dim);
}
.support-preview-card h4 {
font-family: var(--display);
font-weight: 700;
font-size: 1.35rem;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text-muted);
margin-bottom: 0.65rem;
}
.support-preview-card p {
color: var(--text-dim);
font-size: 0.92rem;
line-height: 1.55;
margin-bottom: 1.5rem;
max-width: 42ch;
}
.preview-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-strong);
transition: color 0.2s ease, border-color 0.2s ease;
min-height: 24px;
}
.preview-link:hover,
.preview-link:focus-visible {
color: var(--coral);
border-bottom-color: var(--coral);
outline: none;
}
@media (max-width: 820px) {
.support-preview-grid { grid-template-columns: 1fr; }
.support-preview-header { gap: 0.75rem; margin-bottom: 1.5rem; }
.support-preview-eyebrow { font-size: 0.62rem; letter-spacing: 0.18em; white-space: normal; text-align: center; }
}
/* === Patron card — featured below the standard 3-card grid === */
.patron-card {
margin-top: 1.5rem;
padding: 3rem;
background: var(--bg);
border: 1px solid var(--border);
border-left: 4px solid var(--coral);
display: grid;
grid-template-columns: 1fr auto;
gap: 3rem;
align-items: center;
}
/* No card-level hover — the "Bid on the next Noun" button is the action. */
.patron-card .patron-eyebrow {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--coral);
margin-bottom: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.6rem;
}
.patron-card .patron-eyebrow .live-dot {
width: 7px;
height: 7px;
background: var(--coral);
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.patron-card h3 {
font-family: var(--display);
font-weight: 700;
font-size: clamp(1.75rem, 2.8vw, 2.25rem);
margin-bottom: 1rem;
letter-spacing: -0.025em;
line-height: 1.1;
}
.patron-card h3 .italic {
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
color: var(--coral);
}
.patron-card p {
color: var(--text-muted);
font-size: 1rem;
line-height: 1.65;
margin: 0 0 1rem 0;
max-width: 65ch;
}
.patron-card p:last-of-type { margin-bottom: 0; }
.patron-card p strong { color: var(--text); font-weight: 600; }
.patron-cta-stack {
display: flex;
flex-direction: column;
gap: 0.85rem;
align-items: flex-start;
}
.patron-meta {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
line-height: 1.5;
}
/* === Patron lineage — quiet, credible attribution that names C.Y. Lee === */
.patron-lineage {
margin-top: 2.5rem;
padding: 2.25rem 2.5rem;
border-left: 2px solid var(--text-dim);
background: transparent;
max-width: 920px;
}
.patron-lineage-tag {
font-family: var(--mono);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 1.5rem;
font-weight: 600;
}
.patron-lineage-grid {
display: grid;
grid-template-columns: 88px 1fr;
gap: 1.75rem;
align-items: start;
}
.patron-lineage-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 88px;
height: 88px;
border-radius: 50%;
overflow: hidden;
background: var(--bg-surface);
border: 1px solid var(--border-strong);
transition: border-color 0.2s ease;
position: relative;
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: 1.85rem;
letter-spacing: -0.04em;
color: var(--coral);
text-decoration: none;
}
.patron-lineage-avatar:hover { border-color: var(--coral); }
.patron-lineage-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: var(--bg-elev);
}
.patron-lineage-text { min-width: 0; }
@media (max-width: 640px) {
.patron-lineage-grid { grid-template-columns: 1fr; gap: 1.25rem; }
.patron-lineage-avatar { width: 72px; height: 72px; }
}
.patron-lineage-body {
font-family: var(--body);
font-size: 1.05rem;
line-height: 1.65;
color: var(--text-muted);
margin-bottom: 1.25rem;
max-width: 64ch;
}
.patron-lineage-body strong {
color: var(--text);
font-weight: 600;
}
.patron-lineage-em {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 72, "SOFT" 100;
color: var(--coral);
font-weight: 500;
font-size: 1.08em;
}
.patron-lineage-cite {
font-family: var(--mono);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-dim);
font-weight: 600;
margin: 0;
}
.patron-lineage-link {
color: var(--coral);
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: color 0.2s ease;
}
.patron-lineage-link strong { color: inherit; }
.patron-lineage-link:hover { color: var(--coral-deep); }
.patron-lineage-cite-link {
color: var(--coral);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.patron-lineage-cite-link:hover { color: var(--coral-deep); }
@media (max-width: 640px) {
.patron-lineage { padding: 1.75rem 1.5rem; }
}
/* ===== FOOTER ===== */
footer {
border-top: 2px solid var(--rule);
background: var(--bg);
padding: 5rem 0 3rem;
}
.footer-masthead {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: clamp(3rem, 8vw, 7rem);
line-height: 0.9;
letter-spacing: -0.04em;
margin-bottom: 3rem;
color: var(--text);
}
.footer-masthead .italic {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 400;
color: var(--coral);
}
.footer-grid {
display: grid;
grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr);
gap: 2.5rem;
padding-top: 3rem;
border-top: 1px solid var(--border);
}
.footer-col h4 {
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--text-dim);
margin-bottom: 1.25rem;
font-weight: 600;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-col a {
color: var(--text-muted);
font-size: 0.95rem;
}
.footer-col a:hover { color: var(--teal); }
.footer-bio {
color: var(--text-muted);
max-width: 42ch;
font-size: 0.95rem;
line-height: 1.6;
}
.footer-social {
display: flex;
gap: 0.85rem;
align-items: center;
justify-content: center;
margin-top: 4rem;
padding-top: 2.5rem;
border-top: 1px solid var(--border);
}
.footer-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text-muted);
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
text-decoration: none;
}
.footer-social-icon:hover {
color: var(--coral);
border-color: var(--coral);
transform: translateY(-2px);
}
.footer-social-icon svg {
width: 18px;
height: 18px;
}
.footer-cta {
text-align: center;
margin-top: 1.75rem;
margin-bottom: 0.5rem;
}
.footer-cta a {
display: inline-block;
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text);
text-decoration: none;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--coral);
transition: color 0.2s ease, transform 0.2s ease;
}
.footer-cta a:hover {
color: var(--coral);
transform: translateY(-1px);
}
.footer-bottom {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--text-dim);
}
/* ===== ANIMATIONS ===== */
/* .reveal is visible by default — content always shows even if JS fails.
Only when the flag is set (by inline script in )
do we hide it for the scroll-reveal animation. */
.reveal {
transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
transition-delay: var(--reveal-delay, 0s);
}
html.js .reveal {
opacity: 0;
transform: translateY(30px);
}
html.js .reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger helpers — sequential reveal for siblings inside common grid containers.
Uses CSS variable so the per-child delay composes with .reveal's transition-delay. */
.steps-grid > .step:nth-child(1) { --reveal-delay: 0ms; }
.steps-grid > .step:nth-child(2) { --reveal-delay: 80ms; }
.steps-grid > .step:nth-child(3) { --reveal-delay: 160ms; }
.steps-grid > .step:nth-child(4) { --reveal-delay: 240ms; }
.team-grid > .team-member:nth-child(1) { --reveal-delay: 0ms; }
.team-grid > .team-member:nth-child(2) { --reveal-delay: 60ms; }
.team-grid > .team-member:nth-child(3) { --reveal-delay: 120ms; }
.team-grid > .team-member:nth-child(4) { --reveal-delay: 180ms; }
.team-grid > .team-member:nth-child(5) { --reveal-delay: 240ms; }
.team-grid > .team-member:nth-child(6) { --reveal-delay: 300ms; }
.team-grid > .team-member:nth-child(7) { --reveal-delay: 360ms; }
.team-grid > .team-member:nth-child(8) { --reveal-delay: 420ms; }
.latest-grid > .latest-card:nth-child(1) { --reveal-delay: 0ms; }
.latest-grid > .latest-card:nth-child(2) { --reveal-delay: 100ms; }
.latest-grid > .latest-card:nth-child(3) { --reveal-delay: 200ms; }
.latest-grid > .latest-card:nth-child(4) { --reveal-delay: 300ms; }
.hub-grid > .hub-card:nth-child(1) { --reveal-delay: 0ms; }
.hub-grid > .hub-card:nth-child(2) { --reveal-delay: 80ms; }
.hub-grid > .hub-card:nth-child(3) { --reveal-delay: 160ms; }
.hub-grid > .hub-card:nth-child(4) { --reveal-delay: 240ms; }
.hub-grid > .hub-card:nth-child(5) { --reveal-delay: 320ms; }
.hub-grid > .hub-card:nth-child(6) { --reveal-delay: 400ms; }
.hub-grid > .hub-card:nth-child(7) { --reveal-delay: 480ms; }
.published-grid > .published-card:nth-child(1) { --reveal-delay: 0ms; }
.published-grid > .published-card:nth-child(2) { --reveal-delay: 100ms; }
.published-grid > .published-card:nth-child(3) { --reveal-delay: 200ms; }
.published-grid > .published-card:nth-child(4) { --reveal-delay: 300ms; }
.stack-grid > .stack-card:nth-child(1) { --reveal-delay: 0ms; }
.stack-grid > .stack-card:nth-child(2) { --reveal-delay: 120ms; }
.stack-grid > .stack-card:nth-child(3) { --reveal-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
html.js .reveal { opacity: 1; transform: none; }
}
/* Smooth in-page anchor scrolling */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Scroll progress indicator — thin coral line that fills as user scrolls */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
background: var(--coral);
z-index: 9999;
transition: width 0.05s linear;
pointer-events: none;
}
/* Sticky mobile CTA — floating coral pill at the bottom of viewport.
Uses env(safe-area-inset-bottom) so it sits above the iPhone home indicator. */
.mobile-sticky-cta {
display: none;
position: fixed;
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
left: 50%;
z-index: 60;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 1.4rem;
background: var(--coral);
color: var(--bg);
font-family: var(--mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 700;
border-radius: 999px;
box-shadow: 0 12px 36px rgba(228, 116, 82, 0.35),
0 2px 8px rgba(0, 0, 0, 0.4);
transform: translate(-50%, 150%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
background 0.2s ease;
}
.mobile-sticky-cta-arrow {
transition: transform 0.25s ease;
}
.mobile-sticky-cta:hover .mobile-sticky-cta-arrow,
.mobile-sticky-cta:focus-visible .mobile-sticky-cta-arrow {
transform: translateX(3px);
}
.mobile-sticky-cta:hover { background: var(--coral-deep); }
@media (max-width: 820px) {
.mobile-sticky-cta { display: inline-flex; }
.mobile-sticky-cta.is-visible {
transform: translate(-50%, 0);
}
.mobile-sticky-cta.is-hidden-near-cta {
transform: translate(-50%, 150%);
}
}
@media (prefers-reduced-motion: reduce) {
.mobile-sticky-cta { transition: none; }
}
/* === Combined budget chart + ledger === */
.budget-overview {
margin: 3rem 0 4rem;
}
.budget-overview-label {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.18em;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.budget-overview-grid {
display: grid;
grid-template-columns: minmax(240px, 300px) 1fr;
gap: 3rem;
align-items: start;
padding: 2.5rem;
border: 1px solid var(--border);
background: var(--bg-elev);
}
.budget-donut-wrap {
position: sticky;
top: 5rem;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.5rem;
}
.budget-donut {
width: 100%;
max-width: 300px;
height: auto;
display: block;
filter: drop-shadow(0 8px 24px rgba(228, 116, 82, 0.08));
}
.donut-seg {
transition: stroke-width 0.25s ease, opacity 0.25s ease;
cursor: pointer;
}
.donut-seg:hover { stroke-width: 40; }
/* Donut <-> ledger linkage (hover a segment to highlight its ledger row & vice versa) */
.budget-overview.is-linking .donut-seg { opacity: 0.28; }
.budget-overview.is-linking .donut-seg.is-active { opacity: 1; stroke-width: 40; }
.budget-ledger.is-linking .budget-row { opacity: 0.42; }
.budget-ledger.is-linking .budget-row.is-active {
opacity: 1;
background: var(--bg-surface);
box-shadow: inset 4px 0 0 var(--coral);
}
.budget-ledger.is-linking .budget-row.is-active.is-bounty { box-shadow: inset 4px 0 0 var(--teal); }
.budget-ledger.is-linking .budget-row.is-active.is-tips { box-shadow: inset 4px 0 0 var(--gold); }
.budget-ledger.is-linking .budget-row.is-active.is-infra { box-shadow: inset 4px 0 0 var(--text-muted); }
.donut-center-amount {
font-family: var(--display);
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
font-weight: 700;
font-size: 36px;
fill: var(--text);
letter-spacing: -0.02em;
}
.donut-center-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
fill: var(--text-dim);
}
/* Color swatch in each ledger row's line column — visually links to donut segment */
.line-swatch {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 2px;
margin-right: 0.5rem;
vertical-align: middle;
transform: translateY(-1px);
}
@media (max-width: 1024px) {
.budget-overview-grid {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 1.5rem;
}
.budget-donut-wrap { position: static; padding-top: 0; }
.budget-donut { max-width: 240px; margin: 0 auto; }
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.denver-block, .ltae-block, .hero-meta { grid-template-columns: 1fr; gap: 2rem; }
.stats-grid, .timeline, .team-grid { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(2), .timeline-phase:nth-child(2) { border-right: none; }
/* Horizontal divider between rows in the 2x2 timeline */
.timeline-phase:nth-child(1),
.timeline-phase:nth-child(2) { border-bottom: 1px solid var(--border); }
.support-grid { grid-template-columns: 1fr; }
.section-head > div:first-child { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.section-head .section-tag { margin-left: 0; text-align: left; flex-basis: 100%; }
.budget-hero { grid-template-columns: 1fr; text-align: left; gap: 1.5rem; align-items: start; }
.budget-total::after { display: none; }
.alloc-header { grid-template-columns: 60px 1fr 60px 90px; gap: 1rem; padding: 0.75rem 1.25rem; font-size: 0.58rem; }
.budget-row { grid-template-columns: 60px 1fr 60px 90px; padding: 1.25rem; gap: 1rem; }
.budget-row .desc { font-size: 0.85rem; max-width: 100%; }
.budget-row .title { font-size: 1.05rem; }
.budget-row .amount { font-size: 1.2rem; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.steps-grid { grid-template-columns: 1fr; }
.patron-card { grid-template-columns: 1fr; gap: 1.75rem; padding: 2.5rem; }
}
/* Narrow-desktop range (821-1024px): nav fits but is crowded.
Tighten gaps, drop the Discord pill (it's in the footer too),
and shrink the CTA so "Back the work" never clips off-screen. */
@media (min-width: 821px) and (max-width: 1024px) {
.masthead-inner { gap: 1rem; padding: 0.85rem 1.25rem; }
nav ul { gap: 1.1rem; }
nav a { font-size: 0.66rem; letter-spacing: 0.12em; }
.masthead-discord { display: none; }
.masthead-cta { padding: 0.6rem 0.9rem; font-size: 0.66rem; letter-spacing: 0.1em; }
.brand span { font-size: 1.1rem; }
}
@media (max-width: 820px) {
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
.masthead-inner { gap: 0.75rem; padding: 0.85rem 1.25rem; }
.masthead-cta { padding: 0.6rem 0.85rem; font-size: 0.68rem; }
#primary-nav {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: rgba(10, 9, 8, 0.97);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
#primary-nav.is-open { max-height: 80vh; }
#primary-nav ul {
flex-direction: column;
gap: 0;
align-items: stretch;
padding: 0.5rem 1.5rem 1.5rem;
}
#primary-nav li {
border-bottom: 1px solid var(--border);
}
#primary-nav li:last-child { border-bottom: none; }
#primary-nav a {
display: block;
padding: 1.05rem 0;
font-size: 0.85rem;
letter-spacing: 0.18em;
color: var(--text);
border-bottom: none;
}
#primary-nav a:hover,
#primary-nav a:focus-visible {
color: var(--coral);
}
@media (prefers-reduced-motion: reduce) {
#primary-nav { transition: none; }
}
}
@media (max-width: 640px) {
.stats-grid, .timeline, .team-grid, .footer-grid { grid-template-columns: 1fr; }
.stat, .timeline-phase, .team-member { border-right: none; }
.alloc-header { display: none; }
.budget-row { grid-template-columns: 1fr; padding: 1.25rem 1.25rem 1.1rem; gap: 0.5rem; }
.budget-row .line { padding-top: 0; opacity: 0.7; }
.budget-row .pct { text-align: left; padding-top: 0.2rem; }
.budget-row .amount { text-align: left; padding-top: 0; font-size: 1.65rem; }
.budget-row .body { gap: 0.35rem; }
.budget-row .title { font-size: 1.15rem; }
.split-key { grid-template-columns: 1fr; }
section.spread { padding: 4rem 0; }
.hero { padding: 3rem 0 3rem; }
.hero-headline { margin-bottom: 2.5rem; }
.hero-meta { padding-top: 1.5rem; gap: 2rem; }
.patron-card { padding: 2rem 1.5rem; }
.patron-card h3 { font-size: 1.5rem; }
.countries { padding: 1.75rem 0 1.5rem; }
.step { padding: 2rem; }
.pull-quote { padding: 5rem 0; }
.ticker-track { font-size: 0.72rem; gap: 2rem; }
.ticker-track span { gap: 2rem; }
/* Hero CTAs go full-width on small screens for confident tap targets */
.hero-ctas { gap: 0.75rem; flex-direction: column; }
.hero-ctas .btn { width: 100%; text-align: center; padding: 1.05rem 1.25rem; }
/* Add bottom padding so the sticky mobile CTA never covers the footer */
footer { padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px)); }
/* Section heads breathe less on small screens */
.section-head { margin-bottom: 2.5rem; }
.section-head h2 { font-size: clamp(2rem, 9vw, 3rem); }
/* Pull-quote--margin scales tighter */
.pull-quote--margin .pull-quote-margin-grid { gap: 1rem; }
/* Team-voice quote sizing on mobile */
.team-voice { padding: 1.5rem 1.25rem; }
.team-voice-quote { font-size: 1.05rem; line-height: 1.5; }
/* Patron lineage on mobile */
.patron-lineage { padding: 1.5rem 1.25rem; }
}
/* ============ MULTI-PAGE ENHANCEMENTS ============ */
/* View Transitions API — smooth cross-page nav (modern browsers).
Falls back gracefully on Safari/older browsers. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both fadeOut;
}
::view-transition-new(root) {
animation: 360ms cubic-bezier(0, 0, 0.2, 1) both fadeIn;
}
@keyframes fadeOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Active nav state across pages */
.masthead nav a[aria-current="page"],
.masthead nav a[aria-current="page"]:hover {
color: var(--coral);
position: relative;
}
.masthead nav a[aria-current="page"]::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 2px;
background: var(--coral);
border-radius: 2px;
}
/* Section preview cards — used on home to link to other pages */
.section-cards {
padding: 5rem 0;
border-top: 1px solid var(--border);
}
.section-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
max-width: 1320px;
margin: 0 auto;
padding: 0 2rem;
}
.section-card {
display: block;
padding: 2rem;
background: var(--bg-elev);
border: 1px solid var(--border);
text-decoration: none;
transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease);
position: relative;
overflow: hidden;
}
.section-card:hover {
transform: translate(-3px, -3px);
border-color: var(--coral);
box-shadow: 6px 6px 0 var(--ink);
}
.section-card:hover::after {
transform: scaleX(1);
}
.section-card::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--coral);
transform: scaleX(0);
transform-origin: left;
transition: transform .4s var(--ease);
}
.section-card .num {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
color: var(--coral);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.section-card .title {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 700;
font-size: 1.6rem;
line-height: 1.1;
margin-bottom: 0.75rem;
color: var(--text);
}
.section-card .title em {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 72, "SOFT" 100;
color: var(--coral);
font-weight: 500;
}
.section-card .deck {
font-family: var(--body);
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.section-card .more {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
color: var(--coral);
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ============ PAGE HEADER (used on /work, /about, /ledger, /crew, /join) ============ */
.page-header {
padding: 6rem 0 4rem;
border-bottom: 1px solid var(--border);
position: relative;
isolation: isolate;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(232,185,88,0.15), transparent 60%);
filter: blur(50px);
pointer-events: none;
z-index: -1;
animation: heroHaloPulse 9s ease-in-out infinite;
}
.page-header .wrap { padding: 0 2rem; max-width: 1320px; margin: 0 auto; }
.page-kicker { margin-bottom: 1rem; }
.page-title {
font-family: var(--display);
font-variation-settings: "opsz" 144, "WONK" 1;
font-weight: 800;
font-size: clamp(3rem, 7vw, 5.5rem);
line-height: 1.02;
letter-spacing: -0.03em;
margin-bottom: 1.5rem;
color: var(--text);
}
.page-title .italic {
font-family: var(--display);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100;
font-weight: 500;
color: var(--coral);
}
.page-deck {
font-family: var(--body);
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
line-height: 1.55;
color: var(--text-muted);
max-width: 60ch;
}
@media (max-width: 720px) {
.page-header { padding: 3rem 0 2.5rem; }
}
/* Page header brushstroke mark */
.page-header-brush {
display: block;
width: 100%;
max-width: 480px;
height: 14px;
color: var(--coral);
margin: 1rem 0 1.5rem;
opacity: 0.85;
}
@media (max-width: 720px) {
.page-header-brush { max-width: 320px; height: 12px; margin: 0.75rem 0 1rem; }
}
/* ============ MOBILE HARDENING (multi-page additions) ============ */
@media (max-width: 900px) {
/* Section preview cards already stack via auto-fit; just ensure padding doesn't crowd */
.section-card { padding: 1.5rem; }
.section-card .title { font-size: 1.4rem; }
}
@media (max-width: 720px) {
/* Page header — already has padding rule, add type scale */
.page-title { font-size: clamp(2.25rem, 9vw, 3rem); margin-bottom: 1rem; }
.page-deck { font-size: 1rem; }
.page-header { padding: 2.5rem 0 2rem; }
.page-header::before { width: 280px; height: 280px; top: -80px; right: -80px; }
/* Section cards single-column with tighter padding */
.section-cards { padding: 2.5rem 0; }
.section-cards-grid { gap: 1rem; padding: 0 1.25rem; }
.section-card { padding: 1.25rem; }
.section-card .num { font-size: 0.65rem; margin-bottom: 0.6rem; }
.section-card .title { font-size: 1.25rem; line-height: 1.15; }
.section-card .deck { font-size: 0.9rem; margin-bottom: 1rem; }
/* Hover effects feel weird on touch — disable lift on touch devices */
.section-card:hover { transform: none; box-shadow: none; }
.section-card:active { border-color: var(--coral); }
/* Brushwork on climax words scales down */
.climax-ink::after { height: 10px; bottom: -2px; }
/* Active nav underline tightens */
.masthead nav a[aria-current="page"]::after { bottom: -4px; height: 1.5px; }
}
@media (max-width: 480px) {
.page-title { font-size: 2rem; line-height: 1.05; }
.section-card .title em { font-size: 0.9em; }
}
/* Touch-friendly: ensure all interactive elements ≥ 44px tap target */
@media (pointer: coarse) {
.section-card { min-height: 44px; }
.masthead nav a, .masthead-cta { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Hover-only effects: skip on touch, prevents the "stuck hover" bug on iOS */
@media (hover: none) {
.section-card:hover { transform: none; box-shadow: none; }
.person:hover .frame, .team-card:hover .frame { transform: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--ink); }
}
/* ============ HOME — FEATURED CARD (priority rec #1) ============
Promote the Work card to a dominant feature card on the home page.
- Spans 2 columns of the section-cards grid on desktop
- Has a hero polaroid-chamfer photo (Makurdi, March 2025)
- "FEATURED — THE PROOF" eyebrow label up top
- Same hover semantics as .section-card (lift + ink shadow + coral underline scale-in)
- On mobile (≤720px), stacks (image top, text below) and reverts to single column
============================================================ */
/* Promote the home .section-cards-grid to an explicit 4-col layout so the
feature card can span 2 cols cleanly. The other 4 cards (About / Ledger /
Crew / Join) flow into the remaining 4 single-col slots, two per row. */
.section-cards-grid:has(.section-card-feature) {
grid-template-columns: repeat(4, 1fr);
}
.section-card-feature {
grid-column: span 2;
padding: 2.25rem 2.25rem 2rem;
background: var(--bg-elev);
display: flex;
flex-direction: column;
gap: 1.5rem;
/* Slightly more presence than secondary cards */
border-color: var(--border-strong);
}
.section-card-feature .feature-label {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 700;
color: var(--coral);
letter-spacing: 0.18em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.6em;
}
.section-card-feature .feature-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 2rem;
align-items: center;
}
.section-card-feature .feature-photo {
/* polaroid-chamfer is rotated 1.5deg; give it room and a halo bleed */
position: relative;
isolation: isolate;
padding: 14px 8px 14px 14px;
}
.section-card-feature .feature-photo::before {
content: '';
position: absolute;
inset: -20px;
background: radial-gradient(circle, rgba(232,185,88,0.18), transparent 65%);
filter: blur(28px);
z-index: -1;
pointer-events: none;
}
.section-card-feature .feature-photo .polaroid-chamfer {
/* Already exists in wtm.css — reuse as-is, no overrides except width */
max-width: 100%;
}
.section-card-feature .feature-body {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.section-card-feature .feature-body .num {
margin-bottom: 0;
color: var(--coral);
}
.section-card-feature .feature-body .title {
/* Larger than secondary cards — primary path discipline */
font-size: clamp(1.75rem, 2.6vw, 2.4rem);
line-height: 1.05;
margin-bottom: 0;
}
.section-card-feature .feature-body .deck {
font-size: 1.05rem;
line-height: 1.55;
color: var(--text-muted);
margin-bottom: 0;
}
.section-card-feature .feature-body .more {
margin-top: 0.35rem;
}
/* Scale the hover behavior — same lift + ink shadow + coral underline */
.section-card-feature:hover {
transform: translate(-4px, -4px);
border-color: var(--coral);
box-shadow: 8px 8px 0 var(--ink);
}
.section-card-feature:hover::after { transform: scaleX(1); }
.section-card-feature::after { height: 4px; }
/* Tablet / narrow desktop — keep feature 2-col but tighter */
@media (max-width: 1100px) {
.section-cards-grid:has(.section-card-feature) {
grid-template-columns: repeat(2, 1fr);
}
.section-card-feature { grid-column: span 2; }
}
/* Mobile — feature stacks (image on top, text below); secondary cards single col */
@media (max-width: 720px) {
.section-cards-grid:has(.section-card-feature) {
grid-template-columns: 1fr;
}
.section-card-feature {
grid-column: span 1;
padding: 1.5rem 1.25rem 1.5rem;
gap: 1.25rem;
}
.section-card-feature .feature-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.section-card-feature .feature-photo {
padding: 8px;
max-width: 380px;
margin: 0 auto;
width: 100%;
}
.section-card-feature .feature-body .title {
font-size: 1.5rem;
line-height: 1.1;
}
.section-card-feature .feature-body .deck { font-size: 0.95rem; }
/* Disable hover lift on touch */
.section-card-feature:hover { transform: none; box-shadow: none; }
}
/* No hover lift on touch devices regardless of width */
@media (hover: none) {
.section-card-feature:hover { transform: none; box-shadow: none; }
}
/* ============ HOME — REFOCUSED LAYOUT (priority rec) ============
Two anchor sections on Home: "What we do" (Denver YT) + "Founding partners".
All other links live in the masthead nav. */
.home-work {
padding: 5rem 0 4rem;
border-top: 1px solid var(--border);
}
.home-work-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 2.5rem;
align-items: stretch;
margin-top: 2.5rem;
}
.home-yt-tile {
aspect-ratio: 16 / 9;
min-height: 320px;
}
.home-work-body {
display: flex;
flex-direction: column;
justify-content: center;
}
.founding-partners {
padding: 5rem 0 5.5rem;
position: relative;
isolation: isolate;
overflow: hidden;
}
.founding-partners::before {
content: '';
position: absolute;
bottom: -180px; right: -140px;
width: 540px; height: 540px;
background: radial-gradient(circle, rgba(232,185,88,0.16), transparent 60%);
filter: blur(60px);
pointer-events: none;
z-index: -1;
animation: heroHaloPulse 11s ease-in-out infinite;
}
.founding-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3rem;
align-items: start;
margin-top: 2.5rem;
}
.founding-body { max-width: 60ch; }
.founding-cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
}
.founding-stats {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 2rem;
background: var(--bg-elev);
border: 1px solid var(--border);
border-left: 3px solid var(--coral);
}
.founding-stat {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding-bottom: 1rem;
border-bottom: 1px dashed var(--border);
}
.founding-stat:last-child { border-bottom: none; padding-bottom: 0; }
.founding-stat-num {
font-family: var(--display);
font-variation-settings: "opsz" 144, "WONK" 1;
font-weight: 800;
font-size: 2.6rem;
line-height: 1;
letter-spacing: -0.02em;
color: var(--text);
}
.founding-stat-label {
font-family: var(--mono);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--text-muted);
font-weight: 600;
}
@media (max-width: 900px) {
.home-work-grid,
.founding-grid { grid-template-columns: 1fr; gap: 2rem; }
.home-yt-tile { min-height: 240px; aspect-ratio: 16/9; }
.founding-stats { flex-direction: row; flex-wrap: wrap; gap: 1rem 1.5rem; }
.founding-stat { flex: 1; min-width: 130px; border-bottom: none; padding-bottom: 0; border-right: 1px dashed var(--border); padding-right: 1rem; }
.founding-stat:last-child { border-right: none; padding-right: 0; }
.founding-stat-num { font-size: 2rem; }
}
@media (max-width: 720px) {
.home-work, .founding-partners { padding: 3rem 0; }
.home-work-body .lede { font-size: 1rem; }
}
/* ============ FAQ PAGE ============ */
.faq { padding: 4rem 0 5rem; }
.faq-list {
max-width: 880px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
padding: 2rem 0;
border-bottom: 1px solid var(--border);
}
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q {
font-family: var(--display);
font-variation-settings: "opsz" 144;
font-weight: 700;
font-size: clamp(1.4rem, 2.4vw, 1.95rem);
line-height: 1.2;
letter-spacing: -0.012em;
color: var(--text);
margin-bottom: 1rem;
display: flex;
align-items: baseline;
gap: 1rem;
}
.faq-num {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 700;
color: var(--coral);
letter-spacing: 0.16em;
flex-shrink: 0;
padding-top: 0.35rem;
}
.faq-a {
font-family: var(--body);
font-size: clamp(1.05rem, 1.4vw, 1.15rem);
line-height: 1.65;
color: var(--text-muted);
padding-left: calc(0.72rem * 4);
}
.faq-a a { color: var(--coral); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.faq-a a:hover { color: var(--gold); }
.faq-a em { color: var(--text); font-style: italic; }
@media (max-width: 720px) {
.faq-list { padding: 0 1.25rem; }
.faq-q { font-size: 1.25rem; gap: 0.5rem; }
.faq-a { padding-left: 0; font-size: 1rem; }
.faq-num { font-size: 0.65rem; }
}
/* ============ NEWSLETTER BAND (above footer, every page) ============ */
.newsletter-band {
padding: 3.5rem 2rem 3rem;
border-top: 1px solid var(--border);
background: var(--bg-elev);
position: relative;
isolation: isolate;
overflow: hidden;
}
.newsletter-band::before {
content: '';
position: absolute;
top: -120px; right: -80px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(232,185,88,0.12), transparent 65%);
filter: blur(40px);
pointer-events: none;
z-index: -1;
animation: heroHaloPulse 11s ease-in-out infinite;
}
.newsletter-band .wrap {
max-width: 720px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: stretch;
text-align: left;
}
.newsletter-band .newsletter-text { max-width: 720px; }
.newsletter-band .mono-eyebrow { color: var(--coral); margin-bottom: 0.75rem; }
.newsletter-title {
font-family: var(--display);
font-variation-settings: "opsz" 144, "WONK" 1;
font-weight: 700;
font-size: clamp(2rem, 4.5vw, 3.4rem);
line-height: 1.02;
letter-spacing: -0.025em;
margin-bottom: 1rem;
color: var(--text);
}
.newsletter-deck {
font-family: var(--body);
font-size: clamp(1rem, 1.4vw, 1.15rem);
line-height: 1.5;
color: var(--text-muted);
max-width: 48ch;
}
.newsletter-form {
background: transparent;
border: 0;
padding: 0;
overflow: visible;
width: 100%;
margin-top: 0.5rem;
}
.newsletter-form iframe.beehiiv-embed {
width: 100%;
height: 360px;
margin: 0;
border: 0;
background-color: transparent;
display: block;
}
@media (max-width: 900px) {
.newsletter-band { padding: 3rem 1.5rem; }
.newsletter-band .wrap { grid-template-columns: 1fr; gap: 1.75rem; }
.newsletter-form { min-height: 300px; }
.newsletter-form iframe.beehiiv-embed { height: 300px; }
}
@media (max-width: 720px) {
.newsletter-band { padding: 2.5rem 1.25rem; }
.newsletter-title { font-size: 1.75rem; }
}
/* ============================================================
GLOBAL prefers-reduced-motion OVERRIDE
Placed at end of file so it reliably overrides component rules.
Disables motion-sensitive animations, transitions, and transforms
for users who have opted into reduced motion at the OS level.
============================================================ */
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal--in,
.scroll-progress,
.ticker-track,
.flag-marquee-track,
.live-dot,
.phl-live-dot,
.latest-card,
.hub-card,
.published-card,
.stack-card,
.yt-tile,
.home-yt-tile,
.page-pager-link,
.halo-bleed,
.spiral,
.hero-label .dot,
.v1-reveal {
animation: none !important;
transition: none !important;
transform: none !important;
}
.reveal { opacity: 1 !important; }
.v1-reveal { opacity: 1 !important; }
.ticker-track { animation: none !important; }
.flag-marquee-track { animation: none !important; }
.newsletter-band::before { animation: none !important; }
.spiral { animation: none !important; }
.hero::before { animation: none !important; }
}
/* Inline icons === */
.icon-play, .icon-write, .icon-read, .icon-globe, .icon-bell, .icon-pin, .icon-heart {
display: inline-block;
vertical-align: -0.125em;
margin-right: 0.3em;
}
/* ============================================================
DISPATCH FORM — replaces Beehiiv iframe with native HTML form
============================================================ */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.dispatch-form {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
align-items: stretch;
}
.dispatch-input {
flex: 1 1 280px;
min-width: 0;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
padding: 1rem 1.25rem;
font-family: var(--body, serif);
font-size: 1.05rem;
line-height: 1.4;
transition: border-color .2s var(--ease);
border-radius: 0;
}
.dispatch-input::placeholder {
color: var(--text-dim);
opacity: 0.7;
}
.dispatch-input:focus {
outline: 2px solid var(--coral);
outline-offset: 2px;
border-color: var(--coral);
}
.dispatch-submit {
flex: 0 0 auto;
background: var(--coral);
color: var(--bg);
border: 1px solid var(--coral);
padding: 1rem 1.5rem;
font-family: var(--mono);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background .2s var(--ease), transform .2s var(--ease);
white-space: nowrap;
border-radius: 0;
}
.dispatch-submit:hover {
background: var(--ink);
border-color: var(--ink);
transform: translate(-1px, -1px);
}
.dispatch-submit:active {
transform: translate(0, 0);
}
.dispatch-note {
font-family: var(--mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 1rem 0 0;
text-transform: uppercase;
}
@media (max-width: 600px) {
.dispatch-form { flex-direction: column; }
.dispatch-submit { width: 100%; padding: 1.1rem 1rem; }
}