:root{
--bg:        oklch(0.15 0.035 250);
--bg-2:      oklch(0.19 0.045 250);
--surface:   oklch(0.22 0.05 250);
--line:      oklch(0.32 0.045 250);
--line-soft: oklch(0.26 0.04 250 / 0.6);
--fg:        oklch(0.97 0.005 250);
--fg-dim:    oklch(0.78 0.015 250);
--fg-mute:   oklch(0.64 0.02 250);
--accent:    oklch(0.78 0.14 240);
--accent-2:  oklch(0.62 0.17 250);
--accent-ink:oklch(0.18 0.05 250);
--sans:    'Inter', system-ui, sans-serif;
--display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
--mono:    'JetBrains Mono', ui-monospace, monospace;
--maxw: 1180px;
--atmos-opacity: 1;
--grid-opacity: .35;
--cover-shadow: 0 40px 80px -20px oklch(0.15 0.1 250 / 0.7);
}
[data-theme="light"]{
--bg:        oklch(0.985 0.003 250);
--bg-2:      oklch(0.965 0.006 250);
--surface:   oklch(0.94 0.01 250);
--line:      oklch(0.84 0.015 250);
--line-soft: oklch(0.88 0.012 250 / 0.9);
--fg:        oklch(0.2 0.03 250);
--fg-dim:    oklch(0.38 0.025 250);
--fg-mute:   oklch(0.48 0.02 250);
--accent:    oklch(0.52 0.17 248);
--accent-2:  oklch(0.48 0.18 250);
--accent-ink:oklch(0.98 0.005 250);
--atmos-opacity: .45;
--grid-opacity: .5;
--cover-shadow: 0 30px 60px -24px oklch(0.3 0.1 250 / 0.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
a{
color: var(--accent);
}
a:visited{
color: var(--accent);
}
body{
background:var(--bg);
color:var(--fg);
font-family:var(--sans);
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
transition: background .3s ease, color .3s ease;
}
body::before{
content:"";
position:fixed; inset:0;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.35 0.12 245 / 0.35), transparent 60%),
radial-gradient(ellipse 60% 40% at 85% 20%, oklch(0.55 0.16 235 / 0.18), transparent 70%),
radial-gradient(ellipse 70% 50% at 10% 90%, oklch(0.3 0.1 255 / 0.22), transparent 70%);
pointer-events:none;
z-index:0;
opacity: var(--atmos-opacity);
}
[data-theme="light"] body::before{
background:
radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.78 0.14 245 / 0.12), transparent 60%),
radial-gradient(ellipse 60% 40% at 85% 20%, oklch(0.72 0.16 235 / 0.08), transparent 70%),
radial-gradient(ellipse 70% 50% at 10% 90%, oklch(0.8 0.1 255 / 0.1), transparent 70%);
}
body::after{
content:"";
position:fixed; inset:0;
background-image:
linear-gradient(to right, oklch(0.4 0.05 250 / 0.05) 1px, transparent 1px),
linear-gradient(to bottom, oklch(0.4 0.05 250 / 0.05) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
pointer-events:none;
z-index:0;
opacity: var(--grid-opacity);
}
[data-theme="light"] body::after{
background-image:
linear-gradient(to right, oklch(0.5 0.02 250 / 0.05) 1px, transparent 1px),
linear-gradient(to bottom, oklch(0.5 0.02 250 / 0.05) 1px, transparent 1px);
}
main, header, footer{position:relative; z-index:1}
.wrap{
max-width:var(--maxw);
margin:0 auto;
padding:0 32px;
}
header{
padding:18px 0;
border-bottom:1px solid var(--line-soft);
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
}
.brand{
display:flex; align-items:center; gap:12px;
font-family:var(--mono);
font-size:13px;
letter-spacing:.02em;
color:var(--fg-dim);
text-decoration:none;
}
.brand .dot{
width:8px; height:8px; border-radius:50%;
background:var(--accent);
box-shadow:0 0 14px var(--accent);
}
.brand b{color:var(--fg); font-weight:500}
.nav-links{
display:flex; gap:28px;
align-items:center;
font-family:var(--mono);
font-size:12.5px;
color:var(--fg-dim);
}
.nav-links { margin-left: auto; }
.nav > .theme-toggle { margin-left: 16px; }
.nav-links a{
color:inherit;
text-decoration:none;
transition:color .15s ease;
}
.nav-links a:hover{color:var(--fg)}
.theme-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px; height:36px;
border-radius:999px;
border:1px solid var(--line);
background:transparent;
color:var(--fg-dim);
cursor:pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
margin-left:20px;
}
.theme-toggle:hover{
color:var(--accent);
border-color:var(--accent);
}
.theme-toggle svg{width:16px; height:16px}
.theme-toggle .sun,
.theme-toggle .moon{transition:opacity .2s ease, transform .2s ease}
[data-theme="light"] .theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun,
:root:not([data-theme]) .theme-toggle .sun{display:none}
.hero{
padding:10px 0 72px;
display:grid;
grid-template-columns: 1.15fr 1fr;
gap:80px;
align-items:center;
}
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--mono);
font-size:11.5px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--accent);
padding:6px 12px;
border:1px solid oklch(0.62 0.17 250 / 0.35);
border-radius:999px;
background:oklch(0.62 0.17 250 / 0.08);
}
.eyebrow .pulse{
width:6px; height:6px; border-radius:50%;
background:var(--accent);
box-shadow:0 0 8px var(--accent);
}
h1.title{
font-family:var(--display);
font-weight:600;
font-size:clamp(44px, 6.2vw, 82px);
line-height:1.02;
letter-spacing:-0.025em;
margin:22px 0 24px;
text-wrap:balance;
}
h1.title .grad{
background:linear-gradient(180deg, var(--fg) 0%, var(--accent) 130%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
h1.title em{
font-style:italic;
font-weight:400;
color:var(--accent);
font-family:var(--display);
}
.lede{
font-size:19px;
line-height:1.55;
color:var(--fg-dim);
max-width:52ch;
margin:0 0 36px;
text-wrap:pretty;
}
.hero-meta{
display:flex; flex-wrap:wrap;
gap:28px 36px;
font-family:var(--mono);
font-size:12.5px;
color:var(--fg-mute);
letter-spacing:.02em;
}
.hero-meta dt{
color:var(--fg-mute);
text-transform:uppercase;
font-size:10.5px;
letter-spacing:.16em;
margin-bottom:6px;
}
.hero-meta dd{
margin:0;
color:var(--fg);
font-size:13.5px;
}
.cover-wrap{
position:relative;
aspect-ratio:1/1;
border-radius:14px;
overflow:hidden;
box-shadow:
0 1px 0 oklch(0.85 0.1 240 / 0.08) inset,
var(--cover-shadow),
0 0 0 1px var(--line);
}
.cover-wrap img{
display:block;
width:100%; height:100%;
object-fit:cover;
}
.cover-wrap .cover-img-light{ display:none; }
[data-theme="light"] .cover-wrap .cover-img-light{ display:block; }
[data-theme="light"] .cover-wrap .cover-img-dark{ display:none; }
.cover-caption{
margin-top:16px;
display:flex; justify-content:flex-end; align-items:center;
font-family:var(--mono);
font-size:11.5px;
color:var(--fg-mute);
letter-spacing:.06em;
text-transform:uppercase;
}
section{padding:96px 0; border-top:1px solid var(--line-soft)}
.section-label{
font-family:var(--mono);
font-size:11px;
font-weight:400;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--fg-mute);
margin:0 0 28px;
display:flex; align-items:center; gap:14px;
}
.section-label::after{
content:""; flex:1; height:1px; background:var(--line-soft);
}
.about{
display:grid;
grid-template-columns: 180px 1fr;
gap:56px;
align-items:start;
}
.about h2{
font-family:var(--display);
font-weight:500;
font-size:14px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--fg-mute);
margin:0;
}
.about p{
font-family:var(--display);
font-weight:400;
font-size:clamp(22px, 2.3vw, 30px);
line-height:1.35;
color:var(--fg);
margin:0 0 28px;
text-wrap:pretty;
letter-spacing:-0.01em;
}
.about p strong{
color:var(--accent);
font-weight:500;
}
.about .fine{
font-family:var(--sans);
font-size:15.5px;
color:var(--fg-dim);
line-height:1.6;
max-width:78ch;
}
.about .origin-label{
font-family:var(--display);
font-weight:500;
font-size:14px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--fg-mute);
margin:0;
}
.about .origin p{
font-family:var(--sans);
font-weight:400;
font-size:15.5px;
line-height:1.6;
color:var(--fg-dim);
max-width:78ch;
margin:0 0 14px;
letter-spacing:0;
}
.about .origin p:last-child{
margin-bottom:0;
}
.about .origin p a{
color:var(--accent);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
}
.features{
margin-top:48px;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1px;
background:var(--line-soft);
border:1px solid var(--line-soft);
border-radius:2px;
}
.feat{
background:var(--bg);
padding:28px 26px 30px;
}
.feat-num{
font-family:var(--mono);
font-size:11px;
color:var(--accent);
letter-spacing:.1em;
margin-bottom:14px;
}
.feat-title{
font-family:var(--display);
font-weight:500;
font-size:17px;
line-height:1.3;
margin:0 0 10px;
color:var(--fg);
letter-spacing:-0.005em;
}
.about .feat p.feat-body,
p.feat-body{
font-family:var(--sans);
font-size:14px;
color:var(--fg-dim);
line-height:1.55;
margin:0;
letter-spacing:0;
}
.episodes{
display:grid;
grid-template-columns: 180px 1fr;
gap:56px;
align-items:start;
}
.ep-head h2{
font-family:var(--display);
font-weight:500;
font-size:14px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--fg-mute);
margin:0 0 16px;
}
.ep-head .note{
font-family:var(--mono);
font-size:12px;
color:var(--fg-mute);
line-height:1.7;
}
.ep-placeholder{
border:1px dashed var(--line);
border-radius:4px;
padding:56px 48px;
background:
repeating-linear-gradient(
135deg,
transparent 0,
transparent 18px,
var(--bg-2) 18px,
var(--bg-2) 19px
);
display:flex;
flex-direction:column;
align-items:flex-start;
gap:18px;
}
.ep-placeholder .big{
font-family:var(--display);
font-size:clamp(28px, 3vw, 40px);
font-weight:500;
letter-spacing:-0.015em;
line-height:1.15;
color:var(--fg);
margin:0;
text-wrap:balance;
}
.ep-placeholder .sub{
font-family:var(--mono);
font-size:12px;
color:var(--fg-mute);
letter-spacing:.08em;
text-transform:uppercase;
}
.ep-placeholder .waiting{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--mono);
font-size:11.5px;
color:var(--accent);
letter-spacing:.14em;
text-transform:uppercase;
margin-top:8px;
}
.ep-placeholder .waiting::before{
content:""; width:6px; height:6px; border-radius:50%;
background:var(--accent);
box-shadow:0 0 10px var(--accent);
animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{opacity:1}
50%{opacity:.35}
}
.listen{
display:grid;
grid-template-columns: 180px 1fr;
gap:56px;
align-items:center;
}
.listen h2{
font-family:var(--display);
font-weight:500;
font-size:14px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--fg-mute);
margin:0;
}
.apple-btn, .spotify-btn{
display:inline-flex;
align-items:center;
gap:18px;
padding:22px 32px;
border:1px solid var(--line);
border-radius:8px;
background:var(--bg-2);
color:var(--fg);
text-decoration:none;
transition:all .2s ease;
max-width:420px;
}
.apple-btn:hover, .spotify-btn:hover{
border-color:var(--accent);
transform:translateY(-1px);
box-shadow:0 12px 30px -12px oklch(0.5 0.17 245 / 0.5);
}
.apple-btn svg, .spotify-btn svg{flex-shrink:0}
.apple-btn .txt, .spotify-btn .txt{display:flex; flex-direction:column; gap:2px}
.apple-btn .eyebrow-sm, .spotify-btn .eyebrow-sm{
font-family:var(--mono);
font-size:10.5px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--fg-mute);
}
.apple-btn .label, .spotify-btn .label{
font-family:var(--display);
font-size:20px;
font-weight:500;
color:var(--fg);
}
.apple-btn .arrow, .spotify-btn .arrow{
margin-left:auto;
color:var(--fg-mute);
transition:transform .2s ease, color .2s ease;
}
.apple-btn:hover .arrow, .spotify-btn:hover .arrow{transform:translateX(4px); color:var(--accent)}
.listen-buttons{display:flex; flex-wrap:wrap; gap:14px}
.more-coming{
font-family:var(--mono);
font-size:12px;
color:var(--fg-mute);
margin-top:18px;
letter-spacing:.04em;
}
footer{
border-top:1px solid var(--line-soft);
padding:40px 0 48px;
margin-top:40px;
}
.foot{
font-family:var(--mono);
font-size:11.5px;
color:var(--fg-mute);
letter-spacing:.04em;
}
.foot a{color:var(--fg-dim); text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot-grid{
display:flex;
justify-content:space-between;
gap:40px 64px;
flex-wrap:wrap;
padding-bottom:28px;
margin-bottom:20px;
border-bottom:1px solid var(--line-soft);
}
.foot-brand{ max-width:280px }
.foot-brand .brand{ display:inline-flex }
.foot-col{
display:flex;
flex-direction:column;
gap:9px;
min-width:140px;
}
.foot-col-label{
font-size:10.5px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--fg-mute);
margin-bottom:3px;
}
.foot-base{
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
flex-wrap:wrap;
}
@media (max-width: 640px){
.foot-grid{ flex-direction:column; gap:28px }
}
.ep-empty{
border-top:1px solid var(--line-soft);
border-bottom:1px solid var(--line-soft);
padding:36px 4px;
text-align:center;
color:var(--fg-2, var(--fg));
font-family:var(--mono);
font-size:13px;
letter-spacing:.02em;
}
.ep-empty p{margin:0}
.ep-list{
list-style:none;
margin:0;
padding:0;
border-top:1px solid var(--line-soft);
}
.ep-list li{
border-bottom:1px solid var(--line-soft);
}
.ep-row{
display:grid;
grid-template-columns: 56px 1fr auto;
align-items:center;
gap:24px;
padding:22px 4px;
color:var(--fg);
text-decoration:none;
transition: background .15s ease, padding .15s ease;
}
.ep-row:hover{
background: color-mix(in oklab, var(--accent) 8%, var(--bg-2));
box-shadow: inset 3px 0 0 var(--accent);
padding-left:12px;
padding-right:12px;
}
.ep-num{
font-family:var(--mono);
font-size:12px;
color:var(--fg-mute);
letter-spacing:.08em;
}
.ep-row:hover .ep-num{color:var(--accent)}
.ep-title{
font-family:var(--display);
font-weight:500;
font-size:17px;
line-height:1.25;
color:var(--fg);
letter-spacing:-0.01em;
margin-bottom:6px;
}
.ep-paper{
font-size:13px;
line-height:1.35;
color:var(--fg-dim);
margin-bottom:6px;
}
.ep-sub{
display:flex; flex-wrap:wrap; gap:0 10px;
font-family:var(--mono);
font-size:11.5px;
color:var(--fg-mute);
letter-spacing:.02em;
}
.ep-sub .dot-sep{opacity:.5}
.ep-arrow{
color:var(--fg-mute);
transition: color .15s ease, transform .15s ease;
}
.ep-row:hover .ep-arrow{
color:var(--accent);
transform:translateX(3px);
}
.view-all{
display:inline-flex; align-items:center; gap:10px;
margin-top:22px;
padding:10px 4px;
font-family:var(--mono);
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color: oklch(0.82 0.13 240);
text-decoration:none;
transition: color .15s ease, gap .15s ease;
}
.view-all:hover{ color: oklch(0.92 0.12 240); gap:14px; }
[data-theme="light"] .view-all{ color: var(--accent) }
[data-theme="light"] .view-all:hover{ color: oklch(0.42 0.18 248) }
@media (max-width: 860px){
.hero{grid-template-columns:1fr; gap:48px; padding:56px 0 80px}
.hero-right{order:-1; max-width:420px}
.about, .episodes, .listen{grid-template-columns:1fr; gap:32px}
.features{grid-template-columns:1fr}
section{padding:64px 0}
.ep-placeholder{padding:36px 28px}
.nav{ flex-wrap: wrap; row-gap: 8px; align-items: center; }
.nav-links{
order: 3;
flex-basis: 100%;
margin-left: 0;
gap: 4px 14px;
flex-wrap: wrap;
font-size: 12px;
}
.nav-links a{
display: inline-flex;
padding: 4px 0;
}
.nav > .theme-toggle{
order: 2;
margin-left: auto;
}
.wrap{padding:0 22px}
.ep-row{grid-template-columns: 40px 1fr auto; gap:16px; padding:18px 4px}
.ep-title{font-size:15px}
.ep-paper{font-size:12px}
}
abbr.gloss{
border: 0;
border-bottom: 1px dotted var(--fg-mute);
cursor: help;
text-decoration: none;
}
abbr.gloss:hover,
abbr.gloss[aria-expanded="true"]{
color: var(--accent);
border-bottom-color: var(--accent);
}
.gloss-popover{
position: absolute;
z-index: 50;
max-width: 320px;
padding: 10px 12px;
background: var(--bg-2);
color: var(--fg);
border: 1px solid var(--fg-mute);
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0,0,0,.18);
font-size: 14px;
line-height: 1.5;
}
.gloss-popover[hidden]{ display: none }
.gloss-popover .gloss-plain{
color: var(--fg);
}
.gloss-popover .gloss-tech{
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--fg-mute);
color: var(--fg-dim);
font-size: 13px;
line-height: 1.5;
}
.gloss-popover .gloss-tech[hidden]{ display: none }
.gloss-popover .gloss-more{
display: inline-block;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--line-soft);
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: .08em;
color: var(--accent);
text-decoration: none;
}
.gloss-popover .gloss-more:hover{ text-decoration: underline }
.gloss-popover .gloss-more[hidden]{ display: none }
.gloss-popover::before{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--bg-2);
border-left: 1px solid var(--fg-mute);
border-top: 1px solid var(--fg-mute);
transform: rotate(45deg);
top: -6px;
left: 18px;
}
.gloss-popover[data-position="above"]::before{
top: auto;
bottom: -6px;
transform: rotate(225deg);
}
@media (max-width: 860px){
.gloss-popover{
max-width: none;
left: 12px !important;
right: 12px !important;
}
.gloss-popover::before{ left: 24px }
}
.back-to-top{
position: fixed;
bottom: 24px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--fg-mute);
background: var(--bg);
color: var(--fg);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, color .12s ease, border-color .12s ease;
z-index: 50;
padding: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.back-to-top.visible{
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.back-to-top:hover{
color: var(--accent);
border-color: var(--accent);
}
.back-to-top:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 860px){
.back-to-top{
bottom: 16px;
right: 16px;
width: 40px;
height: 40px;
}
}