/* Nighttime Nathan — static episode pages (/episodes and /episodes/). Layers on styles.css: the night-sky background, fonts and colour tokens all come from there, so this file only describes the reading layout. Everything here must work with JavaScript off — that's the whole point of these pages. No transitions that hide content, no JS-dependent reveals. */ /* Same night sky as the rest of the site, minus the three repeating star tiles. On a landing page they're decoration; on a page that is mostly running text they kept landing in the gap beside a word — next to "Home", between nav links — where a 1.5px dot reads as a stray period. The two big glows and the base gradient stay, so the pages still feel like the night sky. */ .ep-page { color: var(--ink); background-image: radial-gradient(1200px 600px at 80% -10%, #16305f66, transparent 60%), radial-gradient(900px 500px at 10% 30%, #12294f55, transparent 60%), linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-900) 100%); background-repeat: no-repeat, no-repeat, no-repeat; background-size: auto, auto, 100% 100%; } /* --- chrome ------------------------------------------------------------- */ /* These pages carry THE site header (.nav, from styles.css), not a lookalike — see site_header() in tools/build_pages.py. What's left here is the one thing the homepage doesn't need: .ep-head pins directly beneath the header, so it needs the header's exact height, and that offset has to hold with JS off, which rules out measuring it at runtime. So the height is pinned rather than derived from padding: 42px logo + 12px above and below + the 1px border. The homepage nav has no height breakpoints, so neither does this — one number at every width. If .nav-logo or .nav's padding ever changes, this changes with it. */ :root { --ep-nav-h: 67px; } .ep-page .nav { height: var(--ep-nav-h); padding-top: 0; padding-bottom: 0; } /* --- sticky episode header: title, then the player ----------------------- */ /* Title and player pin together, directly beneath the sticky nav. These are SIBLINGS of .nav, not nested inside a shared wrapper — a sticky element can't travel outside its parent's box, so a wrapper that scrolls away would drag the player off-screen with it. */ .ep-head { position: sticky; top: var(--ep-nav-h); z-index: 30; /* fully opaque, not a tint: content scrolling underneath showed through at 92%, and backdrop-filter is off-limits on this site */ background: var(--navy-900); border-bottom: 1px solid rgba(255, 213, 74, 0.3); box-shadow: 0 10px 30px rgba(2, 8, 26, 0.45); padding: 14px clamp(16px, 4vw, 24px) 12px; } .ep-head-inner { max-width: 760px; margin: 0 auto; } /* Centred to match the full-screen player, which centres its number, title and tags — and so the header reads as one player module rather than as the first line of the left-aligned article below it. Line-clamped on purpose: a three-line title would push the player off-screen. */ /* .ep-page-prefixed to stay ahead of the page-scope .ep-page .ep-title rule further down this file. Both were (0,2,0) for a moment, and since that one comes later it won the tie and blew this header title up from 28px to 40px on a position:sticky header — permanently eating a third of a phone screen. */ .ep-page .ep-head .ep-title { font-size: clamp(1.25rem, 3.6vw, 1.75rem); line-height: 1.2; margin: 0 0 4px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ep-head .ep-meta { margin: 0 0 10px; font-size: 0.88rem; text-align: center; } /* --- the way out -------------------------------------------------------- */ /* The first row of the sticky header, so it is reachable from any scroll position. It used to be a breadcrumb ABOVE the header that scrolled off the top, which left the homepage as the only way back once you were reading. Deliberately quiet — an arrow and a word, not a button. It shares a small sticky header with a title and a full transport, and as a bordered pill with the episode number sitting opposite it the row read as a toolbar. The episode number went back into the meta line where it had always been. */ .ep-back { display: flex; margin: 0 0 6px; } .ep-back-link { display: inline-flex; align-items: center; gap: 5px; margin-left: -3px; /* optical: the arrow hangs into the gutter */ padding: 3px 6px 3px 0; color: var(--muted); font-weight: 800; font-size: 0.8rem; text-decoration: none; transition: color 0.18s; } .ep-back-link svg { width: 14px; height: 14px; flex-shrink: 0; } .ep-back-link:hover { color: var(--gold); } /* the collection pages use the same link above their

, with room to breathe since nothing is sticky there */ .ep-main > .ep-back { margin-bottom: 12px; } /* .ep-num is the homepage card's gold pill. It's used on the LIST rows, where it helps you scan 31 of them; the detail page states the number in the meta line like the date and runtime. */ .ep-list .ep-num { margin-right: 5px; } /* the no-JS fallback: shown until main.js hands the episode to the shared player. This is what crawlers read, so it stays in the markup either way. */ .ep-head audio { width: 100%; color-scheme: dark; } /* --- the header transport ----------------------------------------------- */ /* A real player, not a lone Play button: where you are, how long is left, ±15s and a scrub. It drives the ONE shared