:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.75);
  --muted2:rgba(255,255,255,.55);
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.14);
  --accent:#e1003b;
  --max:1080px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: Futura, "Futura PT", "Avenir Next", Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a{ color:inherit; text-decoration:none; cursor: pointer; }
a:hover{ text-decoration:underline; }

.c-container{ width:100%; max-width:var(--max); margin:0 auto; padding:24px; }

.c-top{
  position:sticky; top:0; z-index:10;
  background:rgba(0,0,0,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}
.c-top__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.c-brand{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-style: italic; }
.c-nav{ display:flex; gap:14px; }
.c-nav__link{ text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); }

/* Grid & Cards */
.c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.c-card { display: block; background: var(--card); border: 1px solid var(--line); transition: transform 0.2s, border-color 0.2s; }
.c-card:hover { transform: translateY(-4px); border-color: var(--accent); text-decoration: none; }
.c-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid var(--line); }
.c-card__body { padding: 16px; }
.c-card__title { margin: 0; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg); }
.c-card__meta { margin-top: 8px; font-size: 14px; color: var(--muted); }

/* List View */
.c-header { margin-bottom: 32px; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
.c-header__title { font-size: 40px; margin: 0 0 8px; text-transform: uppercase; line-height: 1; }
.c-back-link { display: inline-block; margin-bottom: 16px; color: var(--accent); font-weight: bold; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.c-list { display: flex; flex-direction: column; gap: 12px; }
.c-item { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: var(--card); border: 1px solid var(--line); transition: background 0.2s; }
.c-item:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.c-item__title { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.c-item__date { font-size: 14px; color: var(--muted); font-family: monospace; font-style: normal; }

/* Player & Content */
.c-episode{ display:grid; grid-template-columns: 220px 1fr; gap:24px; border:1px solid var(--line); background:var(--card); padding:22px; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

.c-cover{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--line); background:rgba(255,255,255,.04); }
.c-kicker{ text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:8px; }
.c-title{ margin:0 0 10px; text-transform:uppercase; letter-spacing:.03em; font-size:26px; line-height:1.15; }
.c-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; color:var(--muted); font-weight:600; }
.c-audio{ margin: 8px 0 16px; }
.c-audio audio{ width:100%; border-radius:0; outline: none; }
.c-audio__hint{ margin-top:8px; color:var(--muted2); font-size:12px; font-style: italic; }

.c-tabs{ display:flex; gap:10px; margin-top:8px; margin-bottom:10px; flex-wrap: wrap; }
.c-tab{ border:1px solid var(--line); background:transparent; color:var(--muted); padding:10px 12px; cursor:pointer; text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-style: italic; }
.c-tab.is-active{ color:var(--fg); border-color:var(--fg); background: rgba(255,255,255,0.1); }
.c-panel{ display:none; }
.c-panel.is-active{ display:block; }

/* --- MOOIERE TEKST (MARKDOWN STYLING) --- */
.c-text{
  margin:0; padding:20px; border:1px solid var(--line); background:rgba(0,0,0,.35);
  color:var(--fg); font-size:15px; line-height:1.6; font-style: normal; /* Leesbaarder */
  max-height: 600px; overflow-y: auto;
}

/* Stijl voor de Markdown elementen binnen de tekst */
.c-text h1, .c-text h2, .c-text h3 { margin-top: 1.5em; margin-bottom: 0.5em; color: var(--fg); line-height: 1.2; }
.c-text h1 { font-size: 1.6em; border-bottom: 1px solid var(--line); padding-bottom: 0.3em; }
.c-text h2 { font-size: 1.3em; color: var(--accent); }
.c-text p { margin-bottom: 1em; }
.c-text ul, .c-text ol { margin-bottom: 1em; padding-left: 20px; }
.c-text li { margin-bottom: 0.4em; }
.c-text strong { color: #fff; font-weight: 700; }
.c-text code { background: rgba(255,255,255,0.15); padding: 2px 4px; border-radius: 3px; font-family: monospace; }
.c-text a { color: var(--accent); text-decoration: underline; }

.c-footnote{ display:flex; align-items:center; gap:10px; margin-top:14px; color:var(--muted2); font-size:12px; }
.c-dot{ width:8px; height:8px; background:var(--accent); display:inline-block; }
.u-roman{ font-style: normal; }

@media (max-width: 860px){
  .c-episode{ grid-template-columns:1fr; }
  .c-hero__title{ font-size:34px; }
}