/* ============================================================ WTFuture.net — Global Brand Stylesheet Cloud Atlas palette + type system from BrandNewWTFutureStyleSheet ============================================================ */ /* --- Changling (Adobe Fonts / Typekit) loaded in via kit --- */ /* --- Montserrat (self-hosted) --- */ @font-face{font-family:'Montserrat';src:url('../../fonts/Montserrat/static/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Montserrat';src:url('../../fonts/Montserrat/static/Montserrat-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap} @font-face{font-family:'Montserrat';src:url('../../fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Montserrat';src:url('../../fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap} :root{ /* primary */ --void:#190b24; --purple:#7b2fde; --blue:#4fc8f8; --cyan:#00d8f0; /* secondary */ --purple-l:#b060ff; --purple-d:#3a0a7a; --blue-d:#2a7fff; --cyan-d:#00a8bc; /* text */ --text:#ddeeff; --muted:#8fb0be; --dim:#5d8391; /* surface */ --card:#0a0614; --light-bg:#f0f3f3; --wordmark:linear-gradient(90deg,#00d8f0 0%,#4fc8f8 50%,#7b2fde 100%); --changling:"changeling-neo","Montserrat",sans-serif; --body:'Montserrat',system-ui,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--void);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} a{color:var(--blue);text-decoration:none} a:hover{color:var(--cyan)} img{max-width:100%;display:block} /* ---------- utilities ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .gradient-text{background:var(--wordmark);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .changling{font-family:var(--changling);font-weight:400;letter-spacing:.02em} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.95);backdrop-filter:blur(18px); border-bottom:1px solid rgba(0,216,240,.35)} .nav-inner{display:flex;align-items:center;gap:22px;padding:12px 24px;max-width:1280px;margin:0 auto} .nav-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto} .nav-brand img{height:44px;width:auto} .nav-word{font-family:var(--changling);font-size:26px;line-height:1} .nav-sub{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.02em} .nav-links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap} .nav-links a{display:flex;flex-direction:column;line-height:1.18;font-weight:600;text-align:center} .nav-links a .top{color:var(--muted);font-size:12px} .nav-links a .btm{color:var(--cyan);font-size:15px;font-weight:700} .nav-links a:hover .top,.nav-links a:hover .btm{color:#fff} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--body);font-weight:600;font-size:12px;color:var(--cyan); border:1.5px solid rgba(0,216,240,.55);background:rgba(0,216,240,.10);border-radius:999px; padding:8px 18px;cursor:pointer;transition:.15s} .btn:hover{border-color:var(--purple-l);background:rgba(176,96,255,.15);color:#fff} /* brand play/transport icons (inherit button color via currentColor) */ .ic{width:17px;height:17px;flex:0 0 auto;display:inline-block;vertical-align:middle} .vf-badge .ic{width:14px;height:14px;vertical-align:-2px} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;background:#0d0518;border-bottom:1px solid rgba(123,47,222,.25)} .hero-bg{position:absolute;inset:0;background:url('../../imgs/hero/BGFrame.png') center/cover no-repeat;opacity:.9} /* A scrapbook photograph living under the hero text — duotoned into the site's own hues so it reads as texture rather than as a picture competing with the wordmark. Masked away from the centre so nothing crosses the type, and it steps back further on phones where the text occupies most of the frame. */ .hero-photo{position:absolute;inset:0;z-index:1;pointer-events:none; background:url('../../imgs/hero/hero-scrapbook.webp') center/cover no-repeat; opacity:.38;mix-blend-mode:screen; -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 35%,#000 78%); mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,transparent 35%,#000 78%)} @media(max-width:720px){ .hero-photo{opacity:.26} } @media(prefers-reduced-motion:reduce){ .hero-photo{opacity:.32} } .hero-anim{position:absolute;top:-4%;left:50%;transform:translateX(-50%);width:min(900px,92%); mix-blend-mode:screen;opacity:.9;pointer-events:none} .hero-inner{position:relative;z-index:2;text-align:center;padding:90px 24px 76px} .hero-word{font-family:var(--changling);font-weight:400;font-size:clamp(48px,9vw,120px);line-height:.95} .hero-tag{max-width:760px;margin:22px auto 0;font-size:clamp(15px,2vw,19px);color:var(--text);font-weight:500} .hero-tag em{color:var(--cyan);font-style:normal;font-weight:700} .hero-meta{margin-top:18px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--muted)} .hero-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .hero-meta a{color:var(--blue)} .hero-meta a:hover{color:var(--cyan)} .hero-meta .live-link{color:var(--cyan);font-weight:700} /* ---------- archive filters ---------- */ .arc-head{padding:40px 0 10px} .arc-title{font-family:var(--changling);font-size:clamp(30px,5vw,48px)} .arc-count{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);margin-top:6px} .filters{position:sticky;top:69px;z-index:40;background:rgba(13,5,24,.94);backdrop-filter:blur(12px); padding:16px 0;margin-bottom:26px;border-bottom:1px solid rgba(0,216,240,.15)} .filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .filter-row:last-child{margin-bottom:0} .era-btn{font-family:var(--body);font-weight:700;font-size:12px;color:var(--muted);background:transparent; border:1.5px solid rgba(74,112,128,.5);border-radius:999px;padding:7px 16px;cursor:pointer;transition:.15s} .era-btn:hover{color:var(--text);border-color:var(--cyan)} .era-btn.active{color:#0a0614;background:var(--cyan);border-color:var(--cyan)} .chip{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;cursor:pointer; color:var(--text);background:rgba(255,255,255,.06);border:1px solid transparent;transition:.12s;opacity:.75} .chip:hover{opacity:1} .chip.active{color:#0a0614;opacity:1} .search{flex:1;min-width:200px;font-family:var(--body);font-size:14px;color:var(--text); background:rgba(255,255,255,.05);border:1.5px solid rgba(74,112,128,.5);border-radius:8px;padding:9px 14px} .search:focus{outline:none;border-color:var(--cyan)} .no-results{color:var(--muted);padding:40px 0;text-align:center} /* ---------- individual episode page ---------- */ .ep-wrap{max-width:900px;margin:0 auto;padding:34px 0 60px} .ep-back{font-size:12px;font-weight:600;color:var(--muted)} .ep-back:hover{color:var(--cyan)} .ep-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--cyan);margin:18px 0 8px;letter-spacing:.04em} .ep-title{font-family:var(--changling);font-weight:400;font-size:clamp(28px,4.5vw,46px);line-height:1.05;margin-bottom:14px} .ep-media{margin:22px 0} .video-embed{display:block;position:relative;width:100%;aspect-ratio:16/9;border:2.5px solid var(--cyan);border-radius:12px;overflow:hidden;background:#05030a} .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .ep-audio{width:100%;margin-top:16px} .ep-audio audio{width:100%} .ep-desc{font-size:16px;line-height:1.7;color:var(--text);margin:22px 0} .ep-section-label{font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .ep-tags{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 24px} .ep-tag{font-size:11px;font-weight:600;color:var(--text);background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px 11px} .ep-tag:hover{border-color:var(--cyan);color:var(--cyan)} .ep-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px} .ep-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px} a.pill,a.ep-tag{text-decoration:none;cursor:pointer} /* Watch + Listen — the first-interaction choice pair (shown together on WTFuture-era episodes) */ .ep-choice{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 4px} .ep-choice-btn{font-size:14px;padding:12px 34px;letter-spacing:.02em} /* ---- episode video facade (click-to-play poster) ---- */ .video-embed.facade{cursor:pointer} .video-embed.facade>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vf-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(9,4,18,.66),rgba(9,4,18,0) 46%)} /* bottom-right Watch control — play button then the word, overlaid on the poster (the whole poster is the YouTube link) */ .vf-watch{position:absolute;right:14px;bottom:13px;display:flex;align-items:center;gap:9px; padding:5px 15px 5px 7px;border-radius:40px;background:rgba(9,4,18,.5);border:1px solid rgba(0,216,240,.35); backdrop-filter:blur(4px);transition:transform .14s ease,box-shadow .16s ease} .vf-watch-btn{flex:0 0 auto;width:54px;height:54px;display:flex;align-items:center;justify-content:center} .vf-watch-btn .aud-ic{width:100%;height:100%;display:block} .vf-watch-word{font-family:var(--changling),var(--body);font-size:22px;line-height:1;color:var(--cyan)} .video-embed.facade:hover .vf-watch{transform:scale(1.05);box-shadow:0 0 22px rgba(0,216,240,.5)} .video-embed.facade:hover{box-shadow:0 0 26px rgba(0,216,240,.28)} /* ---- branded audio player ---- */ .aud{display:flex;align-items:center;gap:11px;margin-top:16px;padding:11px 15px;border-radius:14px; background:linear-gradient(180deg,rgba(123,47,222,.13),rgba(0,216,240,.05));border:1px solid rgba(0,216,240,.28)} .aud-listen{font-family:var(--changling);font-size:22px;line-height:1;color:var(--cyan);flex:0 0 auto;padding-right:2px;text-decoration:none;cursor:pointer;transition:text-shadow .15s} .aud-listen:hover{text-shadow:0 0 10px rgba(0,216,240,.6)} .aud-listen:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px} /* transport buttons = Sun's SVG artwork itself (self-colored disc + ring + arrow) */ .aud-btn{flex:0 0 auto;width:50px;height:50px;padding:0;border:none;background:none;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:transform .12s ease,filter .15s ease} .aud-btn .aud-ic{width:100%;height:100%;display:block} .aud-btn:hover{transform:scale(1.06);filter:drop-shadow(0 0 8px rgba(0,216,240,.6))} .aud-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:50%} /* ---------- accessibility: screen-reader text + "Audio-first" preference ---------- */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Audio-first: Listen is rendered FIRST in the DOM (so reading + focus order lead with it); here we also emphasize Listen and soften Watch so low-vision users see the priority. */ .audio-first .efeature-actions .btn-listen,.audio-first .ep-choice .btn-listen{background:var(--cyan);color:#04020a;border-color:var(--cyan)} .audio-first .efeature-actions .btn-watch,.audio-first .ep-choice .btn-watch{background:transparent;color:var(--cyan);border-color:rgba(0,216,240,.5)} .audio-first .aud{border-color:rgba(0,216,240,.55);box-shadow:0 0 0 1px rgba(0,216,240,.14)} /* the nav Audio-first toggle (also lives in the collapsed mobile menu) */ .nav-af{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;cursor:pointer; font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--muted); background:rgba(9,4,18,.5);border:1px solid rgba(0,216,240,.28);transition:.15s;white-space:nowrap} .nav-af:hover{color:var(--text);border-color:rgba(0,216,240,.5)} .nav-af[aria-pressed="true"]{color:#04020a;background:var(--cyan);border-color:var(--cyan)} .nav-af .dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.75} .nav-af:focus-visible{outline:2px solid var(--cyan);outline-offset:3px} .aud-seek{flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;cursor:pointer; background:linear-gradient(90deg,var(--cyan),var(--purple));outline:none} .aud-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%; background:#fff;border:2px solid var(--cyan);box-shadow:0 0 6px rgba(0,216,240,.7);cursor:pointer} .aud-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--cyan);cursor:pointer} .aud-time{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted); font-variant-numeric:tabular-nums;min-width:90px;text-align:right} .aud-link{flex:0 0 auto;color:var(--cyan);text-decoration:none;font-size:18px;line-height:1;opacity:.85; padding:2px 5px;border-radius:4px;transition:opacity .15s,text-shadow .15s} .aud-link:hover{opacity:1;text-shadow:0 0 9px rgba(0,216,240,.6)} .aud-link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;opacity:1} @media(max-width:560px){ .aud{flex-wrap:wrap} .aud-seek{order:5;flex-basis:100%;margin-top:4px} .aud-time{order:6;min-width:0} } /* compact player (portal / overlay): drop the running time so the slider + transport fit the narrow box */ .aud-compact{flex-wrap:nowrap} .aud-compact .aud-time{display:none} .aud-compact .aud-btn{width:44px;height:44px} .aud-compact .aud-listen{font-size:20px} /* an episode arrived-at from the Timeline: briefly spotlight it in the archive grid */ .card.focus{outline:2px solid var(--cyan);outline-offset:3px;box-shadow:0 0 0 4px rgba(0,216,240,.18),0 0 26px rgba(0,216,240,.35);border-radius:14px;animation:cardpop 2.6s ease-out 1} @keyframes cardpop{0%{box-shadow:0 0 0 6px rgba(0,216,240,.42),0 0 34px rgba(0,216,240,.6)}100%{box-shadow:0 0 0 4px rgba(0,216,240,.12),0 0 20px rgba(0,216,240,.22)}} /* ==== recovered links — shared "cosmic" record + headline table (episode page + archive) ==== */ .card-oneliner{font-size:12px;line-height:1.45;color:#9fc0d4;margin-top:8px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* record shell */ .rec{border-radius:16px;overflow:hidden;margin:0 0 14px; background:linear-gradient(155deg,rgba(38,20,64,.72),rgba(10,6,20,.92)); border:1px solid rgba(0,216,240,.22);box-shadow:0 10px 34px -18px rgba(123,47,222,.7),inset 0 0 40px -24px rgba(0,216,240,.5)} .rec-head{width:100%;text-align:left;background:none;border:0;cursor:pointer;color:inherit;display:flex;gap:14px;align-items:flex-start;padding:16px 18px} .rec-head:hover{background:rgba(0,216,240,.05)} .rec-main{flex:1;min-width:0} .rec-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:6px} .rec-ep{font-weight:700;font-size:16px;background:linear-gradient(90deg,#00d8f0,#b060ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none} .rec-ep.nomatch{color:var(--muted);-webkit-text-fill-color:var(--muted);font-weight:600} .rec-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--blue);white-space:nowrap} .rec-one{font-size:14px;line-height:1.6;color:#e7f2ff;margin-bottom:10px} .rec-one:empty{display:none} .rec-tags{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .rec-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--tc,#00d8f0); border:1px solid var(--tc,#00d8f0);border-radius:999px;padding:2px 10px;background:color-mix(in srgb,var(--tc,#00d8f0) 12%,transparent)} .rec-n{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap} .rec-caret{color:var(--cyan);font-size:18px;transition:transform .18s;flex:0 0 auto;margin-top:2px} .rec.open .rec-caret{transform:rotate(90deg)} .rec-body{display:none;padding:0 18px 16px} .rec.open .rec-body{display:block} /* headline table */ .rec-tbl{width:100%;border-collapse:separate;border-spacing:0} .rec-tbl th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:9px 12px; background:linear-gradient(90deg,rgba(0,216,240,.10),rgba(123,47,222,.10));color:#bfeaff;border-bottom:1px solid;border-image:linear-gradient(90deg,var(--cyan),var(--purple)) 1} .rec-tbl th.c-s{text-align:right} .rec-tbl td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:top} .rec-tbl td.c-h{background:linear-gradient(90deg,rgba(123,47,222,.07),rgba(123,47,222,0))} .rec-tbl td.c-s{background:rgba(0,216,240,.05);text-align:right;white-space:nowrap;width:1%;border-left:1px solid rgba(0,216,240,.12)} /* ── Link lists (Latest Links box + archive cards) ──────────────────────── Replaces the old two-column table. A table gave the source a fixed share of the width and squeezed the description into what was left — worst on phones, where the description wrapped two words to a line. Here the text owns the full width at every viewport and the source is a chip below it. */ .lnk-list{list-style:none;margin:0;padding:0} .lnk-item{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)} .lnk-item:first-child{padding-top:4px} .lnk-item:last-child{border-bottom:0;padding-bottom:4px} .lnk-t{display:block;color:#eaf4ff;font-size:15px;line-height:1.35;font-weight:600;text-decoration:none;max-width:74ch} .lnk-t:hover,.lnk-t:focus-visible{color:var(--cyan);text-shadow:0 0 9px rgba(0,216,240,.45)} .lnk-v{color:var(--cyan)} .lnk-d{color:#b9c7dd;font-size:13.5px;line-height:1.5;margin-top:5px;max-width:78ch} .lnk-m{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap} .lnk-src,.lnk-wb{display:inline-flex;align-items:center;justify-content:center;gap:6px; min-height:32px;padding:0 11px;border-radius:999px;text-decoration:none; font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.02em; color:var(--cyan);background:rgba(0,216,240,.07);border:1px solid rgba(0,216,240,.22)} .lnk-wb{padding:0 10px;font-size:14px;color:#b9a8e8;background:rgba(160,96,232,.09);border-color:rgba(160,96,232,.28)} .lnk-src:hover,.lnk-wb:hover,.lnk-src:focus-visible,.lnk-wb:focus-visible{ background:rgba(0,216,240,.16);color:#fff;border-color:var(--cyan)} .lnk-glyph{opacity:.75;font-size:10px} @media(max-width:900px){ .lnk-d,.lnk-t{max-width:none} } @media(max-width:720px){ .lnk-t{font-size:15.5px} .lnk-d{font-size:14px;line-height:1.5} .lnk-src,.lnk-wb{min-height:44px;padding:0 14px;font-size:12px} /* thumb-sized */ } /* ── On this day in the Future's past ───────────────────────────────────── The strip above the three era cards: the shared day-and-month, and the three years it reaches. Each card also carries its own year over the art. */ .otd-day{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 16px; font-family:'JetBrains Mono',monospace} .otd-md,.otd-lb{font-size:12.5px;font-weight:600;color:#fff;text-transform:uppercase} .otd-md{letter-spacing:.10em} .otd-lb{letter-spacing:.16em} .otd-yrs{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--cyan)} .otd-yrs i{color:#8b7db3;font-style:normal} .otd-yrs b{font-weight:500} .otd-year{position:absolute;right:8px;bottom:8px;font-family:'JetBrains Mono',monospace; font-size:12px;letter-spacing:.06em;color:#eaf4ff;background:rgba(10,6,26,.78); border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px 9px;backdrop-filter:blur(3px)} .otd-off{margin-left:8px;font-size:11px;letter-spacing:.06em;color:#a9bcd6} @media(max-width:720px){ .sec-head{grid-template-columns:1fr;grid-template-areas:"title" "sub" "more";row-gap:5px} .sec-more{justify-self:start} .otd-day{gap:9px;margin-bottom:13px} .otd-md,.otd-lb{font-size:12px} .otd-lb{letter-spacing:.12em} .otd-yrs{font-size:12px} } /* ── The Time Travellers' scrapbook ─────────────────────────────────────── A tray of square slots; one at a time crossfades to the next photo. Two stacked per slot means a swap is an opacity transition and never a reflow, so the row never jumps. Nothing here animates unless the section is on screen — see scrapbook.js. */ .scrapbook{margin:4px 0 22px} .sb-tray{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} .sb-slot{position:relative;margin:0;aspect-ratio:1/1;border-radius:14px;overflow:hidden; background:#0a0614;border:1px solid rgba(255,255,255,.09); box-shadow:0 10px 30px rgba(0,0,0,.45)} .sb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:opacity 900ms ease;will-change:opacity} .sb-img.on{opacity:1} .sb-img.off{opacity:0} .sb-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 9px; font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.35;color:#eaf4ff; background:linear-gradient(to top,rgba(6,3,16,.92),rgba(6,3,16,0)); opacity:0;transition:opacity .25s;pointer-events:none} .sb-slot:hover .sb-cap,.sb-slot:focus-within .sb-cap,.sb-slot.show .sb-cap{opacity:1} /* Set menu. Each set owns a colour: the chip carries it as a dot, the active chip fills with it, and the tray picks it up as an accent — so the colour means "which set am I looking at" rather than being decoration. */ .sb-decks{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px} .sb-chip{display:inline-flex;align-items:center;gap:7px; font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:#a8b6cd;background:transparent;cursor:pointer; border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:7px 12px; min-height:34px;transition:color .18s,border-color .18s,background .18s} .sb-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex:0 0 auto; box-shadow:0 0 8px var(--c)} .sb-n{font-size:9.5px;letter-spacing:.06em;opacity:.6} .sb-chip:hover,.sb-chip:focus-visible{color:#eaf4ff;border-color:var(--c)} .sb-chip.on{color:#0a0614;background:var(--c);border-color:var(--c)} .sb-chip.on .sb-dot{background:rgba(10,6,26,.55);box-shadow:none} .sb-chip.on .sb-n{opacity:.75} .sb-next{margin-left:2px;width:34px;height:34px;border-radius:50%;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;font-size:15px; color:var(--deck,#00d8f0);background:transparent; border:1px solid rgba(255,255,255,.13);transition:color .18s,border-color .18s,transform .3s} .sb-next:hover,.sb-next:focus-visible{border-color:var(--deck,#00d8f0);transform:rotate(90deg)} .scrapbook{--deck:#00d8f0} .sb-slot{border-color:color-mix(in srgb, var(--deck) 26%, rgba(255,255,255,.09))} @media(max-width:900px){ .sb-tray{grid-template-columns:repeat(3,1fr)} } @media(max-width:720px){ .sb-tray{grid-template-columns:repeat(2,1fr);gap:9px} .sb-cap{font-size:12px;opacity:1;padding:26px 10px 9px} /* no hover on touch */ .sb-chip{min-height:44px;padding:0 14px;font-size:11px} .sb-next{width:44px;height:44px;font-size:17px} } @media(prefers-reduced-motion:reduce){ .sb-img{transition:none} } .rec-tbl .ht{color:#eaf4ff;font-size:14px;line-height:1.4} .rec-tbl .hd{color:#b9c7dd;font-size:13px;line-height:1.45;margin-top:4px;max-width:640px} @media(max-width:640px){ .rec-tbl .hd{font-size:13px} } .rec-tbl .hu{font-family:'JetBrains Mono',monospace;font-size:11px;color:#a294c4;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:560px} .rec-tbl .src{color:var(--cyan);text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:12px} .rec-tbl .src:hover{color:#fff;text-shadow:0 0 9px rgba(0,216,240,.6)} .rec-tbl .wb{margin-left:8px;color:var(--purple-l);text-decoration:none;font-size:12px;opacity:.75} .rec-tbl .wb:hover{opacity:1;text-shadow:0 0 9px rgba(176,96,255,.7)} @media(max-width:640px){ .rec-tbl .hu{display:none} .rec-tbl td.c-s{white-space:normal} } /* episode-page "Links from this show" section */ .epl-summary{font-size:14.5px;line-height:1.6;color:#e7f2ff;margin:2px 0 12px;max-width:820px} .epl-toggle{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em; color:var(--cyan);background:rgba(0,216,240,.06);border:1px solid rgba(0,216,240,.35);border-radius:9px;padding:8px 14px;cursor:pointer;margin-top:10px} .epl-toggle:hover{background:rgba(0,216,240,.12);color:#fff} .epl-toggle .car{transition:transform .18s} .epl-toggle[aria-expanded="true"] .car{transform:rotate(90deg)} .epl-tablewrap{margin-top:12px;border:1px solid rgba(0,216,240,.18);border-radius:12px;overflow:hidden} .epl-tablewrap[hidden]{display:none} .epl-all{display:inline-block;font-weight:700;font-size:13px;color:var(--cyan);text-decoration:none;margin-top:12px} .epl-all:hover{text-shadow:0 0 9px rgba(0,216,240,.5)} /* legacy archive page — years collapse, records inside */ .larch-intro{max-width:820px;color:var(--muted);font-size:15px;line-height:1.6;margin:0 auto 26px;text-align:center} .larch-yr{max-width:940px;margin:0 auto 14px} .larch-yh{width:100%;text-align:left;cursor:pointer;color:var(--text);border:1px solid rgba(0,216,240,.20);border-radius:12px; background:linear-gradient(90deg,rgba(0,216,240,.06),rgba(123,47,222,.06)); font-family:var(--changling),var(--body);font-size:24px;padding:12px 20px;display:flex;justify-content:space-between;align-items:center} .larch-yh:hover{background:linear-gradient(90deg,rgba(0,216,240,.12),rgba(123,47,222,.12))} .larch-yh .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)} .larch-body{display:none;padding:14px 0 4px} .larch-yr.open .larch-body{display:block} .rec.hit{outline:2px solid var(--cyan);outline-offset:4px} /* shared "Latest Links" box (home / links / archive-top) */ .latest-box{max-width:940px;margin:0 auto 20px} .latest-box .latest-lbl{background:linear-gradient(90deg,#00d8f0,#b060ff);-webkit-background-clip:text;background-clip:text;color:transparent} .ln-empty{padding:16px 4px;color:var(--muted);font-size:14px;line-height:1.6} /* ---- transcript panel ---- */ .ep-transcript{display:none;margin-top:14px;padding:16px 18px;border-radius:12px; background:rgba(255,255,255,.03);border:1px solid rgba(0,216,240,.18)} .ep-transcript.on{display:block} .ep-xscript-body{font-size:14.5px;line-height:1.7;color:var(--text);max-height:520px;overflow:auto} .ep-xscript-none{font-size:14px;line-height:1.6;color:var(--muted)} /* ---------- section headers ---------- */ /* Section rhythm. Halved Sep 2026 — 56px top and bottom stacked to 112px between neighbours, which read as dead air rather than separation. */ .section{padding:28px 0} /* Section head: title on its own line, subtitle flush left beneath it, the "more" link parked top-right. Was a single baseline row, which pushed the subtitle out to the side and left nothing aligned. */ .sec-head{display:grid;grid-template-columns:1fr auto; grid-template-areas:"title more" "sub sub"; align-items:baseline;column-gap:16px;row-gap:6px;margin-bottom:24px} .sec-title{grid-area:title;font-family:var(--changling);font-size:30px;line-height:1.12} .sec-sub{grid-area:sub;font-weight:600;font-size:14px;color:#9fb0c8} .sec-more{grid-area:more;justify-self:end;font-size:12px;font-weight:600} /* ---------- episode card grid ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px} .card{background:var(--card);border:2.5px solid var(--cyan);border-radius:12px;overflow:hidden; display:flex;flex-direction:column;transition:.18s} .card:hover{border-color:var(--blue);transform:translateY(-3px)} .card-thumb{position:relative;aspect-ratio:16/9;background:#05030a;overflow:hidden} .card-thumb img{width:100%;height:100%;object-fit:cover} .card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s} .card:hover .card-play{opacity:1} .card-play span{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center} .card-play span::after{content:'';border-left:16px solid var(--void);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px} .card-era{position:absolute;top:8px;left:8px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700; background:rgba(0,0,0,.7);color:var(--cyan);padding:2px 7px;border-radius:5px} .card-body{padding:13px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1} .card-date{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted)} .card-title{font-weight:600;font-size:16px;line-height:1.25;color:var(--text); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto} .pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;color:#0a0614} /* ---------- home: latest-per-era feature cards ---------- */ .era-features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .efeature{background:var(--card);border:2.5px solid var(--cyan);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.18s} .efeature:hover{border-color:var(--blue);transform:translateY(-3px)} .efeature-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#05030a} .efeature-thumb img{width:100%;height:100%;object-fit:cover} .efeature-badge{position:absolute;top:10px;left:10px;font-family:var(--changling);font-weight:400;font-size:16px; background:rgba(0,0,0,.72);color:var(--cyan);padding:4px 13px;border-radius:8px;letter-spacing:.02em} .efeature-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:10px;flex:1} .efeature-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#cfe0f5;letter-spacing:.02em} .efeature-title{font-weight:600;font-size:17px;line-height:1.3;color:var(--text); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .efeature-pills{display:flex;gap:6px;flex-wrap:wrap} .efeature-actions{display:flex;gap:10px;margin-top:2px} .efeature-actions .btn{flex:1;text-align:center;padding:9px 8px} .btn-watch{color:#0a0614;background:var(--cyan);border-color:var(--cyan)} .btn-watch:hover{background:var(--blue);border-color:var(--blue);color:#0a0614} .btn-listen{color:var(--blue);background:rgba(123,47,222,.14);border-color:rgba(123,47,222,.55)} .btn-listen:hover{background:rgba(123,47,222,.30);border-color:var(--purple-l);color:#fff} /* Watch / Listen wear the Changling brand font, lowercase — matches Sun's concept */ .btn-watch,.btn-listen{font-family:var(--changling),var(--body);font-weight:400;font-size:18px;letter-spacing:.02em;text-transform:lowercase} .efeature-all{margin-top:auto;font-size:12px;font-weight:600;color:var(--muted); border-top:1px solid rgba(255,255,255,.08);padding-top:12px} .efeature-all:hover{color:var(--cyan)} @media(max-width:900px){.era-features{grid-template-columns:1fr}} /* ---------- Timeline (Travel Back in DrFutureTime) ---------- */ .tl-intro{text-align:center;padding:90px 24px 20px} .tl-intro h1{font-family:var(--changling);font-weight:400;font-size:clamp(34px,7vw,72px);line-height:1} .tl-intro p{color:var(--muted);max-width:620px;margin:16px auto 0;font-size:15px} .tl-scroll-hint{margin-top:26px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--cyan);opacity:.8} .tl-year{position:relative;min-height:90vh;display:flex;flex-direction:column;justify-content:center; padding:70px 24px;overflow:hidden} .tl-art{position:absolute;inset:0;pointer-events:none;z-index:0} .tl-art a{position:absolute;display:block;border-radius:10px;overflow:hidden; opacity:0;filter:blur(7px);transform:translateY(45px) scale(.95); transition:opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; box-shadow:0 12px 45px rgba(0,0,0,.55);border:1px solid rgba(0,216,240,.22);aspect-ratio:16/9} .tl-year.in .tl-art a{opacity:.42;filter:blur(0);transform:none;pointer-events:auto} .tl-art a:hover{opacity:1;border-color:var(--cyan);z-index:3} .tl-art img{width:100%;height:100%;object-fit:cover;display:block} .tl-body{position:relative;z-index:2;max-width:660px;margin:0 auto;text-align:center; opacity:0;transform:translateY(34px);transition:opacity 1s ease .12s, transform 1s ease .12s} .tl-year.in .tl-body{opacity:1;transform:none} .tl-yr{font-family:var(--changling);font-weight:400;line-height:.85;font-size:clamp(60px,13vw,160px)} .tl-era{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin:10px 0 20px} .tl-sum{font-size:clamp(16px,2.1vw,21px);line-height:1.62;color:var(--text)} .tl-count{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)} .tl-count a{color:var(--muted)} .tl-count a:hover{color:var(--cyan)} .tl-glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease; background:radial-gradient(circle at 50% 45%, rgba(123,47,222,.16), transparent 60%)} .tl-year.in .tl-glow{opacity:1} @media(max-width:700px){ .tl-art a{display:none} } /* ---------- footer ---------- */ .footer{border-top:1px solid rgba(0,216,240,.2);margin-top:40px;padding:40px 24px;text-align:center;color:var(--muted);font-size:13px} .footer .changling{font-size:22px;color:var(--text);display:block;margin-bottom:10px} @media(max-width:720px){ .nav-links{gap:12px} .nav-sub{display:none} .hero-inner{padding:60px 18px 50px} } /* ---------- nav dropdown (N:OW → Home + Latest/Live/Legacy) ---------- */ .nav-item{position:relative;display:flex;align-items:center} .nav-parent{display:flex;flex-direction:column;line-height:1.18;font-weight:600;text-align:center;cursor:pointer} .nav-parent .top{color:var(--muted);font-size:12px} .nav-parent .btm{color:var(--cyan);font-size:15px;font-weight:700} .nav-item:hover .nav-parent .top,.nav-item:focus-within .nav-parent .top{color:#fff} .nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px); min-width:220px;background:rgba(10,6,20,.98);backdrop-filter:blur(18px); border:1px solid rgba(0,216,240,.35);border-radius:12px;padding:8px; display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .16s ease, transform .16s ease;z-index:60;box-shadow:0 18px 50px rgba(0,0,0,.55)} .nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu,.nav-item.open .nav-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(6px)} .nav-menu a{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px; padding:9px 12px;border-radius:8px;transition:background .12s} .nav-menu a b{color:var(--cyan);font-size:14px;font-weight:700} .nav-menu a span{color:var(--muted);font-size:11px;font-weight:600} .nav-menu a:hover{background:rgba(0,216,240,.10)} .nav-menu a:hover b{color:#fff} /* hover bridge — keeps the dropdown reachable when the mouse crosses the gap from parent to menu */ .nav-item.has-menu:hover::after, .nav-item.has-menu:focus-within::after{ content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); width:240px;max-width:82vw;height:16px} /* ---------- mobile nav (hamburger) ---------- */ .nav-inner{position:relative} .nav-toggle{display:none;margin-left:auto;flex-direction:column;justify-content:center;align-items:center; gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0} .nav-toggle span{display:block;width:24px;height:2px;background:var(--cyan);border-radius:2px;transition:transform .2s,opacity .2s} .nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.nav-open .nav-toggle span:nth-child(2){opacity:0} .nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:720px){ .nav-inner{flex-wrap:nowrap;gap:12px;padding:12px 16px} /* the brand lockup must be allowed to shrink, or it forces the hamburger off-screen */ .nav-brand{flex:1 1 auto;min-width:0} .nav-brand img{height:auto;width:auto;max-width:100%;max-height:44px} .nav-toggle{flex:0 0 auto} .nav-toggle{display:flex} .nav-links{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;flex-wrap:nowrap; align-items:stretch;gap:0;padding:4px 0;display:none; background:rgba(0,0,0,.98);backdrop-filter:blur(18px);border-top:1px solid rgba(0,216,240,.18); box-shadow:0 18px 50px rgba(0,0,0,.6);max-height:82vh;overflow:auto} .nav.nav-open .nav-links{display:flex} .nav-links>a,.nav-links .nav-item{padding:13px 24px;border-bottom:1px solid rgba(255,255,255,.05);width:100%} .nav-links>a{flex-direction:row;gap:8px;align-items:baseline;text-align:left} .nav-links a .top{font-size:12px} .nav-links a .btm{font-size:16px} .nav-item{display:block} .nav-parent{flex-direction:row;gap:8px;align-items:baseline;text-align:left} /* submenu expands inline (not a floating popover) on mobile */ .nav-menu{position:static;transform:none;min-width:0;opacity:1;visibility:visible;pointer-events:auto; display:none;background:rgba(0,216,240,.05);border:0;box-shadow:none;padding:4px 0 4px 14px;margin-top:8px} .nav-item.open .nav-menu{display:flex;transform:none} .nav-item.has-menu:hover::after{display:none} } /* ---------- live / pre-show page ---------- */ .live-status{display:inline-flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace; font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 15px;border-radius:999px; border:1px solid rgba(74,112,128,.5);color:var(--muted)} .live-status.on{border-color:#ff4d6d;color:#ff8095} .live-dot{width:9px;height:9px;border-radius:50%;background:var(--muted)} .live-status.on .live-dot{background:#ff4d6d;animation:livepulse 1.4s infinite} @keyframes livepulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,77,109,.5)}50%{opacity:.5;box-shadow:0 0 0 7px rgba(255,77,109,0)}} .live-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-top:8px} .live-card{background:var(--card);border:2px solid rgba(0,216,240,.30);border-radius:16px;padding:24px 24px 26px} .live-card h3{font-family:var(--changling);font-weight:400;font-size:22px;margin-bottom:12px} .live-card .when{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--cyan);margin-bottom:8px} .live-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:4px} .live-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.55;color:var(--text)} .live-list li::before{content:'▸';position:absolute;left:0;color:var(--cyan)} .live-list li span{color:var(--muted);font-size:12.5px} .tbd{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--purple-l); border:1px solid rgba(176,96,255,.4);border-radius:5px;padding:1px 6px;margin-left:6px;text-transform:uppercase} @media(max-width:760px){.live-grid{grid-template-columns:1fr}} /* ---------- phone: reclaim the space the pills were eating (Aug 31 2026) ---------- */ @media(max-width:720px){ /* Decorative pills. On a list card or the home feature they largely repeat what the title already says, and cost a full line each. The individual episode page keeps its pills — there they ARE the content. */ .card-pills, .efeature-pills{ display:none } /* The Cloud Atlas filter row is a CONTROL, not decoration — 16 chips wrapping is what buried the archive page. One swipeable line instead of five stacked rows. */ .filter-row{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; } .filter-row::-webkit-scrollbar{ display:none } .filter-row .chip{ flex:0 0 auto } /* topics.html: the pill grid is that page's entire purpose, so it stays — but as two tight columns rather than one very tall stack. */ .pill-grid{ grid-template-columns:repeat(2,1fr); gap:9px } .cloud-pill{ padding:11px 12px } .cp-name{ font-size:14px } /* an open menu must never be able to push the page sideways */ .nav-links{ max-width:100vw } }