:root{
  --serif: "Palatino Linotype", Palatino, "URW Palladio L", "Book Antiqua", "Noto Serif", "Liberation Serif", Georgia, serif;
  --mono:  ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;

  --bg:        #0b0b0d;
  --bg-raised: #15151a;
  --ink:       #efece4;
  --ink-soft:  #d4d0c6;
  --ink-dim:   #aaa59b;
  --accent:    #e3a851;
  --rule:      rgba(239,236,228,0.13);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.02rem, 0.4vw + 0.94rem, 1.12rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* bg */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(135% 85% at 50% -15%, rgba(227,168,81,0.13) 0%, transparent 55%),
    radial-gradient(110% 90% at 88% 112%, rgba(99,118,170,0.11) 0%, transparent 55%),
    radial-gradient(100% 80% at 8% 105%, rgba(176,96,140,0.08) 0%, transparent 55%);
}
/* scanlines + grain */
body::before{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px,
      transparent 1px, transparent 3px),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'%20opacity='0.35'/%3E%3C/svg%3E");
  background-size:auto, 200px 200px;
  mix-blend-mode:soft-light;
}

::selection{ background:var(--accent); color:#15110a; }
a{ color:inherit; text-decoration:none; }

.wrap{
  position:relative; z-index:1;
  max-width:720px; margin:0 auto;
  padding:0 clamp(1.4rem, 5vw, 3rem);
}

/* prompt */
.prompt{
  font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.03em;
  color:var(--ink-dim); padding:0.35rem 0 0;
}
.prompt b{ color:var(--accent); font-weight:400; }

/* hero */
header{ padding:0.6rem 0 1.4rem; text-align:center; }
.cover{
  width:min(100%, 400px); height:auto; display:block;
  margin:1.1rem auto 1.4rem;
  border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,0.55);
}
h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem, 5.2vw, 3rem);
  line-height:1.04; letter-spacing:0.005em; color:var(--ink);
}
.tagline{
  font-style:italic;
  font-size:clamp(1.16rem, 2.2vw, 1.42rem);
  line-height:1.42; color:var(--ink);
  margin-top:0.8rem;
}

/* nav */
.nav{
  font-family:var(--mono);
  font-size:0.74rem; letter-spacing:0.03em;
  margin-top:1.4rem; line-height:2;
  color:var(--ink-soft);
}
.nav a{ transition:color 0.2s ease; }
.nav a:hover{ color:var(--accent); }
.nav i{ color:var(--accent); font-style:normal; padding:0 0.45em; }

/* sections */
section{ padding:1.6rem 0; border-top:1px solid var(--rule); }
.label{
  font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.06em;
  color:var(--ink-dim); margin-bottom:1.2rem;
}
.label b{ color:var(--accent); font-weight:500; }

/* episodes */
.ep{ position:relative; padding:1.25rem 0; border-top:1px solid var(--rule); }
.ep:first-of-type{ border-top:0; padding-top:0; }
/* hover bar, desktop only */
@media (hover:hover) and (pointer:fine){
  .ep::before{
    content:""; position:absolute; left:-0.8rem; top:0.35rem; bottom:0.35rem;
    width:2px; background:var(--accent); border-radius:2px;
    opacity:0; transition:opacity 0.25s ease;
  }
  .ep:hover::before{ opacity:1; }
}
/* badge */
.badge{
  font-family:var(--mono);
  font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(227,168,81,0.40);
  border-radius:3px; padding:0.12em 0.5em; margin-left:0.5em; white-space:nowrap;
}
.ep-meta{
  font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.04em;
  color:var(--ink-dim); margin-bottom:0.25rem;
}
.ep-meta .num{ color:var(--accent); }
.ep-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.18rem, 2.4vw, 1.42rem);
  line-height:1.18; color:var(--ink);
  margin-bottom:0.55rem;
}
.ep-desc{
  color:var(--ink-soft); font-style:italic;
  margin-top:0.55rem; max-width:60ch;
}

/* audio: keep native controls, frame only */
audio{
  width:100%; display:block; margin-top:0.5rem;
}
@media (hover:hover) and (pointer:fine){
  audio{ border-radius:8px; }
}

/* portraits */
.person{ padding:1.8rem 0; border-top:1px solid var(--rule); text-align:center; }
.person:first-of-type{ border-top:0; padding-top:0; }
.portrait{
  width:140px; height:140px; border-radius:50%;
  object-fit:cover; display:block; margin:0 auto 1rem;
  border:1px solid var(--rule);
  box-shadow:0 12px 32px rgba(0,0,0,0.5);
}
.person h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.3rem, 3vw, 1.7rem);
  color:var(--ink); margin-bottom:0.7rem;
}
.person p{ color:var(--ink-soft); max-width:54ch; margin:0 auto; }
.intro{ color:var(--ink-soft); max-width:60ch; }
.intro p{ margin-bottom:0.8rem; }
.intro p:last-child{ margin-bottom:0; }

/* impressum */
.block{ padding:1.3rem 0; border-top:1px solid var(--rule); }
.block h2{
  font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.06em;
  color:var(--accent); font-weight:500; margin-bottom:0.55rem;
}
.block p{ color:var(--ink-soft); margin-bottom:0.5rem; max-width:60ch; }
.block p:last-child{ margin-bottom:0; }

h1.page-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.8rem, 4.5vw, 2.4rem);
  color:var(--ink); margin:1.1rem 0 0.4rem;
}

a.inline{ color:var(--accent); }
a.inline:hover{ text-decoration:underline; }

/* footer */
footer{
  padding:1.5rem 0 2.6rem; border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.04em; color:var(--ink-dim);
}
footer .accent{ color:var(--accent); }
footer a{ color:var(--ink-dim); transition:color 0.2s ease; }
footer a:hover{ color:var(--accent); }
.foot-links{ margin-bottom:0.7rem; }

/* reveal */
.reveal{ opacity:0; transform:translateY(16px); animation:rise 0.8s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.reveal.d0{ animation-delay:0.04s; }
.reveal.d1{ animation-delay:0.16s; }
.reveal.d2{ animation-delay:0.28s; }
.reveal.d3{ animation-delay:0.40s; }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; animation:none; }
  html{ scroll-behavior:auto; }
}