/* site-extras.css — written by build-live-surfaces.py (Phase 1, 2026-09-05). Do not hand-edit. */ .skip-link{position:absolute;left:-999px;top:8px;z-index:1000;background:var(--color-teal,#236f6b);color:#fff;padding:10px 16px;font-family:var(--font-mono,monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none} .skip-link:focus{left:8px;outline:3px solid #fff;outline-offset:2px} .footer-heading{font-family:var(--font-heading);font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 12px} .related{border-top:2px solid var(--color-divider);margin-top:44px;padding-top:22px} .related .related-kicker{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-teal,#236f6b);font-weight:700;margin-bottom:12px} .related ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .related li{margin:0} .related a{display:block;font-family:var(--font-heading);font-weight:800;font-size:17px;line-height:1.25;color:var(--color-text);text-decoration:none;border-left:3px solid var(--color-divider);padding:2px 0 2px 12px} .related a:hover{border-left-color:var(--color-teal,#236f6b);color:var(--color-teal,#236f6b)} .related .related-meta{display:block;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.06em;color:var(--color-text-muted);margin-top:4px;font-weight:400} .receipts{border-left:3px solid var(--color-teal,#236f6b);margin-top:32px;padding:4px 0 4px 20px} .receipts-kicker{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-teal,#236f6b);font-weight:700;margin-bottom:14px} ul.receipts-list{list-style:none;margin:0;padding:0;counter-reset:receipts} .receipts-list li{counter-increment:receipts;position:relative;margin:0;padding:16px 0 16px 44px;border-top:1px solid var(--color-divider);font-family:var(--font-mono,monospace);font-size:12.5px;line-height:1.6;color:var(--color-text-muted);overflow-wrap:anywhere} .receipts-list li:first-child{border-top:none;padding-top:4px} .receipts-list li:first-child::before{top:4px} .receipts-list li::before{content:counter(receipts,decimal-leading-zero);position:absolute;left:0;top:16px;font-family:var(--font-mono,monospace);font-size:12px;font-weight:700;color:var(--color-teal,#236f6b);letter-spacing:.05em} .receipts-list li strong{font-weight:400} .receipts-list li a{display:block;font-family:var(--font-heading);font-weight:800;font-size:16px;line-height:1.3;color:var(--color-text);text-decoration:none;margin-bottom:4px;overflow-wrap:anywhere;word-break:break-word} .receipts-list li a:hover{color:var(--color-teal,#236f6b);text-decoration:underline} @media (max-width:680px){.receipts{padding-left:14px}.receipts-list li{padding-left:34px}.receipts-list li::before{font-size:11px}} /* Motion reveal rules (site/docs/MOTION-DOCTRINE.md, 2026-09-06). transform/opacity only — no layout-triggering property is ever animated. Hidden ONLY once carries .js (added by assets/motion.js as its first line), so every element is fully visible with no JS at all. */ html.js [data-reveal],html.js [data-reveal-number]{opacity:0;transform:translateY(var(--motion-rise,16px));transition:opacity var(--motion-reveal,420ms) var(--motion-ease,cubic-bezier(0.16,1,0.3,1)),transform var(--motion-reveal,420ms) var(--motion-ease,cubic-bezier(0.16,1,0.3,1))} html.js [data-reveal].is-revealed,html.js [data-reveal-number].is-revealed{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* Episodes (Phase 3, 2026-09-06): media facade (video/poster lead), native audio player, "Listen on" platform row, and the collapsible transcript
. No new fonts, no new palette — same tokens as everything above. */ .media-facade{position:relative;aspect-ratio:16/9;width:100%;background:#000;overflow:hidden;margin:0 0 28px;border:2px solid var(--color-divider,#dcd7ce);cursor:pointer} .media-facade.is-static{cursor:default} .media-facade img{width:100%;height:100%;object-fit:cover;display:block;opacity:.82} .media-play-btn{position:absolute;inset:0;margin:auto;width:72px;height:72px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--color-teal,#236f6b) 88%,transparent);border:3px solid #fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease} .media-facade:hover .media-play-btn{transform:scale(1.06)} .media-play-btn svg{width:24px;height:24px;fill:#fff;margin-left:4px} .media-iframe{width:100%;height:100%;border:0;display:block} .media-facade .media-note{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.06em;text-transform:uppercase} audio.episode-audio{width:100%;margin:0 0 28px;display:block} .listen-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 30px} .listen-row .listen-label{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.06em;color:var(--color-text-muted);margin-right:3px;text-transform:uppercase} .listen-row a{font-family:var(--font-mono,monospace);font-size:11.5px;padding:6px 12px;border:1px solid var(--color-divider,#dcd7ce);color:var(--color-text);text-decoration:none} .listen-row a:hover{border-color:var(--color-teal,#236f6b);color:var(--color-teal,#236f6b)} .transcript-details{margin-top:8px} .transcript-details summary{cursor:pointer;font-family:var(--font-heading);font-weight:800;font-size:15px;padding:14px 0;border-top:2px solid var(--color-divider,#dcd7ce)} .transcript-details[open] summary{border-bottom:1px solid var(--color-divider,#dcd7ce);margin-bottom:14px}