/* ============================================================ PERMISSIONLESS — Landing Page Brand tokens + layout. Cinematic crimson, heavy condensed type. ============================================================ */ :root { /* --- crimson system (default mood: deep red) --- */ --bg-deep: #220406; --bg-edge: #15080a; --red-900: #4c0a0d; --red-700: #8d1014; --red-600: #b3151a; --red-500: #d81f24; --red-400: #f0332c; --ember: #ff5436; --bone: #f3ece3; --bone-dim: #c9beb2; --ink: #120708; --char: #0c0607; --core: var(--red-500); --halo: var(--red-700); /* type */ --display: 'Anton', 'Arial Narrow', sans-serif; --serif: 'Newsreader', Georgia, serif; --sans: 'Archivo', system-ui, sans-serif; --maxw: 1320px; --gutter: clamp(20px, 5vw, 96px); --ease: cubic-bezier(.22,.61,.36,1); } /* Color moods (data attr on ) ----------------------------- */ body[data-mood="black"] { --bg-deep: #120608; --bg-edge: #060304; --core: #c11a20; --halo: #520b0e; } body[data-mood="ember"] { --bg-deep: #2c0a05; --bg-edge: #1a0805; --core: #f0451f; --halo: #94200d; --red-500: #f0451f; --red-400: #ff6a2c; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg-edge); color: var(--bone); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--red-500); color: #fff; } img { display: block; max-width: 100%; } .eyebrow { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--bone-dim); } .diamond { display: inline-block; width: 1em; height: 1em; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } /* grain overlay ------------------------------------------------- */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } body[data-grain="off"] .grain { display: none; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 5000; display: flex; align-items: center; justify-content: space-between; padding: clamp(18px,2.6vw,30px) var(--gutter); transition: background .4s var(--ease), backdrop-filter .4s var(--ease); } .nav.scrolled { background: color-mix(in srgb, var(--bg-edge) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid color-mix(in srgb, var(--bone) 8%, transparent); } .nav-brand { display: flex; align-items: center; gap: 14px; } .nav-brand .diamond { font-size: 22px; color: var(--bone); } .nav-brand .tag { font-weight: 800; font-size: 11px; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); } .nav-brand .tag span { color: var(--bone-dim); } .nav-links { display: flex; align-items: center; gap: clamp(18px,2.4vw,40px); } .nav-links a { color: var(--bone); text-decoration: none; font-weight: 600; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .82; transition: opacity .25s, color .25s; position: relative; } .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -7px; height: 2px; width: 0; background: var(--red-400); transition: width .3s var(--ease); } .nav-links a:hover { opacity: 1; } .nav-links a:hover::after { width: 100%; } .nav-listen { display: inline-flex; align-items: center; gap: 9px; font-weight: 800 !important; opacity: 1 !important; } .nav-listen .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-400); box-shadow: 0 0 0 0 var(--red-400); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red-400) 70%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* hamburger toggle (mobile only) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; padding: 0; background: none; border: 0; cursor: pointer; z-index: 6001; } .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--bone); transition: transform .3s var(--ease), opacity .2s; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* full-screen mobile menu overlay */ .nav-menu { position: fixed; inset: 0; z-index: 6000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: color-mix(in srgb, var(--bg-edge) 96%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); } .nav-menu.open { opacity: 1; pointer-events: auto; } .nav-menu a { color: var(--bone); text-decoration: none; font-family: var(--display); font-size: clamp(34px, 11vw, 58px); text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; padding: 6px 0; transition: color .2s; } .nav-menu a:hover { color: var(--red-400); } .nav-menu-close { position: absolute; top: 22px; right: var(--gutter); background: none; border: 0; color: var(--bone); font-size: 26px; line-height: 1; cursor: pointer; } /* ============================================================ HERO ============================================================ */ .hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: radial-gradient(120% 90% at 50% 38%, var(--core) 0%, var(--halo) 42%, var(--bg-deep) 72%, var(--bg-edge) 100%); } .hero-layer { position: absolute; inset: 0; will-change: transform; } /* atmospheric glow / clouds */ .sky-glow { position: absolute; inset: -10%; background: radial-gradient(40% 30% at 32% 22%, color-mix(in srgb,var(--core) 60%, transparent) 0%, transparent 60%), radial-gradient(50% 40% at 72% 30%, color-mix(in srgb,var(--red-400) 40%, transparent) 0%, transparent 55%); filter: blur(20px); opacity: .8; } .sky-clouds { position: absolute; inset: 0; background: radial-gradient(60% 40% at 20% 85%, color-mix(in srgb, #000 55%, transparent) 0%, transparent 60%), radial-gradient(60% 40% at 85% 90%, color-mix(in srgb, #000 50%, transparent) 0%, transparent 60%); mix-blend-mode: multiply; } /* giant wordmark — logo image */ .hero-word { position: absolute; left: 0; right: 0; top: 33%; transform: translateY(-50%); display: flex; justify-content: center; pointer-events: none; } .word-img { width: 72vw; max-width: none; height: auto; filter: drop-shadow(0 8px 60px rgba(0,0,0,.35)); } .hero[data-treatment="stacked"] .word-img { width: 64vw; } .hero[data-treatment="offaxis"] .hero-word { justify-content: flex-start; padding-left: var(--gutter); } .hero[data-treatment="offaxis"] .word-img { width: 80vw; } /* bottom vignette for headline + scroll legibility */ .hero-vignette { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(180deg, transparent 64%, rgba(8,3,4,.42) 100%); } /* sky image layer */ .sky-img { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; object-position: center; } /* cinematic mic + mountain + cable. LANDSCAPE (viewport wider than the 4:3 image): width-driven — the image fills the viewport width edge-to-edge, the transparent sky shows above the mic, and the mountain base hangs below the fold. The top offset is in vw, so the whole composition scales with width and frames the mic IDENTICALLY at every landscape size (a fixed vh offset is what broke across sizes). The portrait/narrow case is handled by the max-aspect-ratio query below. */ .hero-rig { position: absolute; left: 50%; transform: translateX(-50%); top: 5vw; width: 100vw; height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); } .rig-img { width: 100%; height: auto; max-width: none; } .hero[data-treatment="offaxis"] .hero-rig { left: 68%; } .hero[data-treatment="stacked"] .hero-rig { width: 88vw; } /* red smoke foreground */ .clouds-img { position: absolute; left: -8%; bottom: -4%; width: 116%; height: 60vh; max-width: none; object-fit: cover; object-position: center bottom; opacity: .9; -webkit-mask-image: linear-gradient(to top, #000 58%, transparent 100%); mask-image: linear-gradient(to top, #000 58%, transparent 100%); } /* hero UI (foreground) */ .hero-ui { position: absolute; inset: 0; z-index: 40; pointer-events: none; } .hero-ui > * { pointer-events: auto; } .hero-headline { position: absolute; left: var(--gutter); bottom: clamp(110px, 16vh, 190px); max-width: 460px; } .hero-headline .h-serif { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -.01em; color: var(--bone); } .hero-headline .h-serif em { font-style: italic; color: #fff; } .hero-headline p { margin-top: 18px; max-width: 330px; font-size: 15px; line-height: 1.55; color: var(--bone-dim); } .email-cap { margin-top: 26px; } .email-row { display: flex; gap: 10px; max-width: 420px; } .email-row input { flex: 1; min-width: 0; background: color-mix(in srgb, #000 38%, transparent); border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent); color: var(--bone); font-family: var(--sans); font-size: 14px; padding: 14px 16px; border-radius: 4px; outline: none; transition: border-color .25s, background .25s; } .email-row input::placeholder { color: var(--bone-dim); } .email-row input:focus { border-color: var(--red-400); background: color-mix(in srgb,#000 50%, transparent); } .btn-solid { border: none; cursor: pointer; font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: .04em; padding: 14px 22px; border-radius: 4px; background: var(--bone); color: var(--ink); transition: transform .2s var(--ease), background .25s, color .25s; white-space: nowrap; } .btn-solid:hover { background: var(--red-500); color: #fff; transform: translateY(-2px); } .email-fine { margin-top: 14px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); display: flex; align-items: center; gap: 8px; } .email-fine .diamond { font-size: 9px; } .sub-ok { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: var(--bone); padding: 14px 4px; animation: subIn .4s var(--ease); } .sub-ok .diamond { font-size: 11px; color: var(--red-400); } @keyframes subIn { from { opacity: 0; transform: translateY(6px); } } .hero-podcast { position: absolute; right: var(--gutter); top: 47vh; /* raised to sit just below the PERMISSIONLESS wordmark, right-aligned */ text-align: right; } .hero-podcast .pod { font-family: var(--display); font-size: clamp(28px,3.4vw,52px); letter-spacing: .42em; color: var(--bone); line-height: 1; padding-left: .42em; } .hero-weekly { position: absolute; right: var(--gutter); bottom: clamp(54px, 8vh, 84px); display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); } .hero-weekly .bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; } .hero-weekly .bars i { width: 3px; background: var(--red-400); border-radius: 2px; animation: eq 1s ease-in-out infinite; } .hero-weekly .bars i:nth-child(1){height:40%;animation-delay:0s} .hero-weekly .bars i:nth-child(2){height:90%;animation-delay:.2s} .hero-weekly .bars i:nth-child(3){height:60%;animation-delay:.4s} .hero-weekly .bars i:nth-child(4){height:100%;animation-delay:.1s} @keyframes eq { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} } .scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--bone-dim); } .scroll-hint .line { width: 1px; height: 38px; background: linear-gradient(var(--bone-dim), transparent); animation: drop 1.8s var(--ease) infinite; transform-origin: top; } @keyframes drop { 0%{transform:scaleY(0);opacity:0} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1) translateY(38px);opacity:0} } /* ============================================================ TICKER ============================================================ */ .ticker { background: var(--ink); border-top: 1px solid color-mix(in srgb,var(--bone) 8%, transparent); border-bottom: 1px solid color-mix(in srgb,var(--bone) 8%, transparent); overflow: hidden; padding: 20px 0; position: relative; z-index: 2; } .ticker-track { display: flex; gap: 0; width: max-content; animation: marquee 28s linear infinite; } .ticker-track .item { font-family: var(--display); font-size: clamp(26px,3.2vw,44px); color: var(--bone); letter-spacing: .02em; padding: 0 28px; display: flex; align-items: center; gap: 28px; white-space: nowrap; } .ticker-track .item .diamond { font-size: .42em; color: var(--red-400); } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } /* ============================================================ SECTIONS shell ============================================================ */ .section { position: relative; padding: clamp(80px,11vh,150px) var(--gutter); } .wrap { max-width: var(--maxw); margin: 0 auto; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: clamp(38px,5vh,64px); flex-wrap: wrap; } .sec-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .sec-kicker .diamond { font-size: 11px; color: var(--red-400); } .sec-title { font-family: var(--display); font-size: clamp(40px, 6vw, 92px); line-height: .92; letter-spacing: -.01em; color: var(--bone); text-transform: uppercase; } .sec-title .out { -webkit-text-stroke: 1.4px var(--bone-dim); color: transparent; } .sec-sub { max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--bone-dim); } .sec-head-center { flex-direction: column; align-items: center; text-align: center; justify-content: center; } .sec-head-center .sec-kicker { justify-content: center; } .bg-episodes { background: linear-gradient(180deg, var(--bg-edge) 0%, #0a0405 100%); } /* episodes */ .ep-feature { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(24px,3vw,52px); align-items: stretch; margin-bottom: 26px; } .ep-art { position: relative; border-radius: 8px; overflow: hidden; min-height: 380px; background: radial-gradient(120% 100% at 30% 20%, var(--red-600), var(--red-900) 70%, #1a0507); display: flex; align-items: center; justify-content: center; } .ep-art image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } /* YouTube thumbnail fill for the featured episode (sits behind badge/play) */ a.ep-art { text-decoration: none; } .ep-art .ep-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .ep-art::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,3,4,.15), rgba(8,3,4,.5)); pointer-events: none; } /* badge + play are decorative — the whole card (.ep-hero) is the link. Making them non-interactive stops the hover state flip-flopping as the cursor crosses the small play button's edges (the jitter), and the overlay from eating clicks. */ .ep-art .badge, .ep-art .play { z-index: 2; pointer-events: none; } a.ep-row { text-decoration: none; } /* ---- redesigned featured episode: full-width 16:9 + caption below ---- */ .ep-feature { display: block; } /* override the old 2-col grid */ /* featured = centered, width-capped (full-width 16:9 was too tall). */ .ep-hero { display: block; max-width: 760px; margin: 0 auto; text-decoration: none; } .ep-hero .ep-art { min-height: 0; aspect-ratio: 16 / 9; border-radius: 12px; } .ep-hero .ep-art .play { width: 80px; height: 80px; } .ep-hero:hover .ep-art .play { transform: translate(-50%, -50%) scale(1.08); background: var(--red-500); border-color: var(--red-500); } .ep-hero-cap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-top: 22px; } .ep-hero-cap .cap-l { display: flex; align-items: baseline; justify-content: center; gap: 14px; flex-wrap: wrap; } .ep-hero-cap .ix { font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); color: var(--red-400); line-height: 1; } .ep-hero-cap h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.3vw, 31px); color: var(--bone); line-height: 1.12; } .ep-hero-cap .cap-r { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; } .ep-hero-cap .dur { font-size: 13px; color: var(--bone-dim); letter-spacing: .04em; white-space: nowrap; } /* ---- list rows (legacy / no-JS fallback): add a thumbnail (desktop) ---- */ .ep-list .ep-row { grid-template-columns: 52px 124px minmax(0,1fr) auto auto; } .ep-row-thumb { width: 124px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #1a0507; } .ep-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- "view all episodes" link-out (replaces the row list) ---- */ .ep-more-wrap { display: flex; justify-content: center; margin-top: clamp(34px, 5vh, 60px); } .ep-more { display: inline-flex; align-items: center; gap: 11px; font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); text-decoration: none; padding: 17px 32px; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--bone) 26%, transparent); transition: background .25s, border-color .25s, color .25s, transform .2s var(--ease); } .ep-more:hover { background: var(--red-500); border-color: var(--red-500); color: #fff; transform: translateY(-2px); } .ep-more svg { transition: transform .25s; } .ep-more:hover svg { transform: translate(3px, -3px); } .ep-art .badge { position: absolute; top: 18px; left: 18px; z-index: 2; background: var(--ink); color: var(--bone); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-radius: 3px; } .ep-art .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 92px; height: 92px; border-radius: 50%; background: color-mix(in srgb,#000 30%, transparent); backdrop-filter: blur(6px); border: 1.5px solid var(--bone); color: var(--bone); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s var(--ease), background .25s, border-color .25s; } .ep-art .play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--red-500); border-color: var(--red-500); } .ep-art .play svg { margin-left: 4px; } .ep-feature .meta { display: flex; flex-direction: column; justify-content: center; } .ep-feature .meta .ix { font-family: var(--display); font-size: clamp(52px,7vw,104px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--red-500); } .ep-feature .meta .tags { display: flex; gap: 10px; margin: 22px 0 14px; flex-wrap: wrap; } .chip { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); border: 1px solid color-mix(in srgb,var(--bone) 18%, transparent); padding: 6px 11px; border-radius: 100px; } .ep-feature .meta h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(26px,3vw,40px); line-height: 1.05; color: var(--bone); } .ep-feature .meta p { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--bone-dim); max-width: 460px; } .ep-feature .meta .row { margin-top: 26px; display: flex; align-items: center; gap: 20px; } .dur { font-size: 13px; color: var(--bone-dim); letter-spacing: .04em; } .ep-list { display: grid; gap: 0; border-top: 1px solid color-mix(in srgb,var(--bone) 12%, transparent); } .ep-row { display: grid; grid-template-columns: 64px minmax(0,1fr) auto auto; gap: clamp(14px,2.4vw,40px); align-items: center; padding: 24px 8px; border-bottom: 1px solid color-mix(in srgb,var(--bone) 12%, transparent); cursor: pointer; transition: background .3s, padding .3s; position: relative; } .ep-row:hover { background: color-mix(in srgb,var(--red-500) 8%, transparent); padding-left: 18px; } .ep-row .num { font-family: var(--display); font-size: 26px; color: var(--bone-dim); } .ep-row:hover .num { color: var(--red-400); } .ep-row .t { min-width: 0; } .ep-row .t h4 { font-family: var(--serif); font-weight: 600; font-size: clamp(18px,1.7vw,24px); color: var(--bone); line-height: 1.15; } .ep-row .t span { font-size: 13px; color: var(--bone-dim); } .ep-row .when { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); white-space: nowrap; } .ep-row .go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb,var(--bone) 22%, transparent); display: flex; align-items: center; justify-content: center; color: var(--bone); transition: background .25s, color .25s, border-color .25s; } .ep-row:hover .go { background: var(--bone); color: var(--ink); border-color: var(--bone); } /* ============================================================ HOSTS / ABOUT ============================================================ */ .bg-hosts { background: #0a0405; } .hosts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,48px); } .host { position: relative; border-radius: 8px; overflow: hidden; background: #140607; border: 1px solid color-mix(in srgb,var(--bone) 8%, transparent); min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; } .host image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .host-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; z-index: 0; } .host .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 30%, rgba(8,3,4,.2) 55%, #0a0405 100%); pointer-events: none; } .host .info { position: relative; z-index: 2; padding: clamp(24px,3vw,40px); } .host .info .role { color: var(--red-400); font-weight: 800; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; } .host .info h3 { font-family: var(--display); font-size: clamp(32px,3.4vw,54px); line-height: .92; margin-top: 10px; text-transform: uppercase; color: var(--bone); } .host .info p { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: var(--bone-dim); max-width: 420px; } /* ============================================================ MANIFESTO ============================================================ */ .manifesto { position: relative; overflow: hidden; background: radial-gradient(130% 100% at 50% 0%, var(--core) 0%, var(--halo) 38%, var(--bg-deep) 72%, var(--bg-edge) 100%); padding: clamp(110px,18vh,220px) var(--gutter); text-align: center; } .manifesto .ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: var(--display); font-size: 32vw; line-height: 1; color: rgba(255,255,255,.05); white-space: nowrap; pointer-events: none; will-change: transform; } .manifesto .inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; } .manifesto .eyebrow { color: var(--bone); margin-bottom: 26px; } .manifesto blockquote { font-family: var(--serif); font-weight: 500; font-size: clamp(28px,4.6vw,68px); line-height: 1.06; letter-spacing: -.015em; color: #fff; } .manifesto blockquote em { font-style: italic; } .manifesto blockquote .hl { color: var(--bone); position: relative; } .manifesto .sig { margin-top: 40px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone); } /* ============================================================ LISTEN ============================================================ */ .bg-listen { background: #0a0405; } .listen-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(30px,5vw,80px); align-items: center; } .platforms { display: flex; flex-direction: column; gap: 16px; } .platform { display: flex; align-items: center; gap: 20px; text-decoration: none; padding: 22px 26px; border-radius: 8px; background: #140607; border: 1px solid color-mix(in srgb,var(--bone) 10%, transparent); transition: transform .25s var(--ease), border-color .25s, background .25s; } .platform:hover { transform: translateX(8px); border-color: var(--red-500); background: #1a0809; } .platform .pic { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .platform .pic.spotify { background: #1DB954; } .platform .pic.youtube { background: #FF0000; } .platform .txt { flex: 1; } .platform .txt .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); } .platform .txt .v { font-family: var(--display); font-size: 26px; color: var(--bone); line-height: 1; margin-top: 4px; } .platform .arr { color: var(--bone-dim); transition: transform .25s, color .25s; } .platform:hover .arr { color: var(--bone); transform: translateX(4px); } .listen-art { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: radial-gradient(120% 100% at 30% 20%, var(--red-600), var(--red-900) 70%, #160406); display: flex; align-items: center; justify-content: center; } .listen-art image-slot { position: absolute; inset: 0; width: 100%; height: 100%; } .listen-art .lbl { position: relative; z-index: 2; text-align: center; } .listen-art .lbl .big { font-family: var(--display); font-size: clamp(40px,6vw,84px); color: var(--bone); line-height: .85; } .listen-art .lbl .sm { margin-top: 14px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--bone-dim); } /* ============================================================ NEWSLETTER ============================================================ */ .bg-news { background: var(--ink); position: relative; overflow: hidden; } .news-inner { max-width: 760px; margin: 0 auto; text-align: center; position: relative; z-index: 2; } .news-inner h2 { font-family: var(--display); font-size: clamp(40px,6vw,86px); line-height: .92; text-transform: uppercase; color: var(--bone); } .news-inner h2 .em { color: var(--red-400); } .news-inner p { margin: 20px auto 30px; max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--bone-dim); } .news-inner .email-row { margin: 0 auto; max-width: 480px; } .news-glow { position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: 700px; height: 500px; background: radial-gradient(circle, color-mix(in srgb,var(--red-500) 55%, transparent), transparent 65%); filter: blur(40px); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--bg-edge); padding: clamp(60px,9vh,110px) var(--gutter) 40px; border-top: 1px solid color-mix(in srgb,var(--bone) 8%, transparent); } .foot-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; align-items: start; } .foot-brand .mk { display: flex; align-items: center; gap: 14px; } .foot-brand .mk .diamond { font-size: 26px; color: var(--bone); } .foot-brand .mk b { font-family: var(--display); font-size: 30px; letter-spacing: .02em; color: var(--bone); text-transform: uppercase; } .foot-brand .foot-logo { width: clamp(200px, 26vw, 300px); height: auto; display: block; } .foot-social { display: flex; gap: 12px; margin-top: 22px; } .foot-social a { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--bone-dim); border: 1px solid color-mix(in srgb, var(--bone) 18%, transparent); transition: color .25s, border-color .25s, background .25s, transform .2s var(--ease); } .foot-social a:hover { color: var(--bone); border-color: var(--red-500); background: color-mix(in srgb, var(--red-500) 14%, transparent); transform: translateY(-2px); } .foot-social svg { width: 18px; height: 18px; } .foot-brand p { margin-top: 18px; max-width: 320px; font-size: 14px; line-height: 1.6; color: var(--bone-dim); } .foot-col h5 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); margin-bottom: 16px; } .foot-col a { display: block; color: var(--bone); text-decoration: none; font-size: 14.5px; margin-bottom: 12px; opacity: .85; transition: opacity .2s, color .2s; } .foot-col a:hover { opacity: 1; color: var(--red-400); } .foot-bottom { margin-top: clamp(40px,6vh,72px); padding-top: 26px; border-top: 1px solid color-mix(in srgb,var(--bone) 8%, transparent); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .foot-bottom p { font-size: 12px; letter-spacing: .08em; color: var(--bone-dim); text-transform: uppercase; } /* idle float for the mic */ .float-idle { animation: floaty 7s ease-in-out infinite; } @keyframes floaty { 0%,100%{transform:translateY(-6px)} 50%{transform:translateY(10px)} } /* spawn entrance: smoke billows in, mic rises through it */ .rig-img { animation: micSpawn 1.7s var(--ease) .35s both, floaty 7s ease-in-out 2.05s infinite; } @keyframes micSpawn { 0% { opacity: 0; transform: translateY(120%); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(-6px); } } .clouds-img { animation: cloudSpawn 2s ease-out both, cloudDrift 20s ease-in-out 2s infinite; } @keyframes cloudSpawn { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: .9; transform: translateY(0); } } @keyframes cloudDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-1.8%); } } @media (prefers-reduced-motion: reduce){ .float-idle{ animation: none; } .rig-img{ animation: none; opacity: 1; transform: translateY(-6px); } .clouds-img{ animation: none; opacity: .9; transform: none; } } /* fail-safe end state: once spawn window elapses, ensure visible + settle into the idle loops (also covers throttled/frozen animation timelines) */ .hero[data-spawned] .rig-img { animation: floaty 7s ease-in-out infinite; opacity: 1; } .hero[data-spawned] .clouds-img { animation: cloudDrift 20s ease-in-out infinite; opacity: .9; } /* reveal animation */ .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ============================================================ EPISODE PLAYER (embedded YouTube lightbox) ============================================================ */ .pl-modal { position: fixed; inset: 0; z-index: 9500; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); } .pl-modal.open { display: flex; } .pl-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg-edge) 86%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: plFade .25s var(--ease); } .pl-dialog { position: relative; z-index: 1; width: min(1040px, 100%); animation: plRise .3s var(--ease); } @keyframes plFade { from { opacity: 0; } } @keyframes plRise { from { opacity: 0; transform: translateY(16px) scale(.98); } } .pl-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--bone) 10%, transparent); } .pl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .pl-bar { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; } .pl-bar .pl-ep { font-family: var(--display); color: var(--red-400); font-size: 20px; line-height: 1; } .pl-bar .pl-name { font-family: var(--serif); font-weight: 600; font-size: clamp(18px,2vw,26px); color: var(--bone); } .pl-close { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, var(--bone) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bone) 24%, transparent); color: var(--bone); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .2s; } .pl-close:hover { background: var(--red-500); border-color: var(--red-500); transform: rotate(90deg); } @media (max-width: 600px) { .pl-close { top: -44px; } } /* ============================================================ RESPONSIVE ============================================================ */ /* PORTRAIT / narrow (viewport taller than the 4:3 mic image): the width-driven landscape model would leave dead space below the image, so switch the mic to height-driven — it fills the viewport height and the wide mountain overflows the sides (clipped by the hero). Keeps the mic prominent on phones/tablets. */ @media (max-aspect-ratio: 4 / 3) { .hero-rig { top: auto; bottom: -4vh; left: 50%; transform: translateX(-50%); width: auto; height: 80vh; display: flex; align-items: flex-end; justify-content: center; } .rig-img { width: auto; height: 100%; } } /* SUPER-WIDE & SHORT (a dragged-wide, short window). The landscape rules size the wordmark + mic by viewport WIDTH only, so on a short viewport they balloon past the height and the bottom-anchored headline rides up into the wordmark. Here we bound the art by HEIGHT so the composition can't outgrow the viewport. */ @media (min-aspect-ratio: 2 / 1) { .hero { min-height: 0; } .hero-word { top: 31%; } .word-img, .hero[data-treatment="stacked"] .word-img, .hero[data-treatment="offaxis"] .word-img { width: auto; max-height: 38vh; max-width: 90vw; } .hero-rig { top: min(5vw, 7vh); width: min(100vw, 155vh); } .hero-headline { bottom: clamp(56px, 8vh, 120px); } .hero-podcast { display: none; } } @media (max-width: 1000px) { .nav-links { display: none; } .nav-toggle { display: flex; } .ep-feature { grid-template-columns: 1fr; } .hosts-grid { grid-template-columns: 1fr; } .listen-grid { grid-template-columns: 1fr; } .foot-top { grid-template-columns: 1fr 1fr; } .hero-podcast { display: none; } } @media (max-width: 680px) { /* HERO mic sizing for portrait is handled by the max-aspect-ratio query; here we only tune the wordmark + copy for narrow widths. */ .hero-word { top: 21%; } .word-img { width: 92vw; } /* stronger bottom scrim so the headline + CTA read over the mic/mountain */ .hero-vignette { background: linear-gradient(180deg, transparent 38%, rgba(8,3,4,.55) 72%, rgba(8,3,4,.9) 100%); } .hero-headline { left: var(--gutter); right: var(--gutter); max-width: none; bottom: clamp(64px, 11vh, 130px); } .hero-headline .h-serif { font-size: clamp(30px, 9vw, 42px); } .hero-headline p { font-size: 14px; max-width: none; } /* stack the email capture (input over a full-width button) */ .email-row { flex-direction: column; } .email-row input, .email-row .btn-solid { width: 100%; } .email-fine { flex-wrap: wrap; gap: 6px 8px; } .scroll-hint { display: none; } .ep-list .ep-row { grid-template-columns: 44px 1fr auto; } .ep-row .when, .ep-row-thumb { display: none; } .foot-top { grid-template-columns: 1fr; } .hero-weekly { display: none; } }