:root {

  --bg: #f8fafc;

  --paper: #ffffff;

  --ink: #0f172a;

  --muted: #475569;

  --line: #e2e8f0;

  --brand: #ef4444;

  --brand-ink: #ffffff;

  --radius-lg: 1.25rem;

  --shadow: 0 10px 20px rgba(2, 6, 23, 0.06), 0 6px 12px rgba(2, 6, 23, 0.04);

  --maxw: 1100px;

}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {

  margin: 0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;

  color: var(--ink);

  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f8fafc 100%);

  -webkit-font-smoothing: antialiased;

}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

 

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

td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

header.site-header {

  position: sticky; top: 0; z-index: 50;

  backdrop-filter: blur(8px);

  background: rgba(255,255,255,0.7);

  border-bottom: 1px solid var(--line);

}

 

.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }

.brand { display:flex; align-items:center; gap:10px; font-weight:700; }

.brand-icon { width:24px; height:24px; }

 

.nav-links { display:none; gap:22px; font-size:14px; }

@media (min-width:768px){ .nav-links{ display:flex; } }

 

.btn {

  display:inline-flex; align-items:center; justify-content:center; gap:8px;

  padding:10px 16px; border:1px solid transparent; border-radius:999px;

  font-weight:600; cursor:pointer;

  transition:transform .02s ease, box-shadow .2s ease, background .2s ease;

}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow); }

.btn-outline { background: transparent; color: var(--ink); border-color: #cbd5e1; }

.btn-secondary { background: #f1f5f9; color: var(--ink); }

 

.hero { padding: 64px 0 40px; }

.hero-grid { display:grid; gap:32px; }

@media (min-width:1024px){ .hero-grid{ grid-template-columns: 1.1fr 1fr; align-items:center; } }

.hero h1 { font-size: clamp(28px, 5vw, 56px); line-height:1.05; margin:0; font-weight:800; }

.hero p { color: var(--muted); font-size:18px; margin:16px 0 0; }

.cta-row { margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; }

 

section { padding:48px 0; }

.section-title { font-size:clamp(22px,3.2vw,32px); font-weight:800; display:flex; align-items:center; gap:10px; }

.muted { color: var(--muted); }

 

.grid { display:grid; gap:20px; }

.grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }

.grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:1023.98px){ .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr; } }

 

.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }

.card-body { padding:20px; }

.card-footer { padding:20px; border-top:1px solid var(--line); }

 

.badge { display:inline-block; padding:6px 12px; border-radius:999px; background:#f1f5f9; font-size:14px; }

 

.episode-thumb { position:relative; aspect-ratio:16/9; background:#0f172a; overflow:hidden; }

.episode-thumb img { width:100%; height:100%; object-fit:cover; }

.episode-thumb::after { content:"▶"; position:absolute; left:10px; bottom:8px; font-size:22px; color:white; text-shadow:0 2px 6px rgba(0,0,0,.6); }

 

.meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:14px; }

 

.guest { text-align:center; padding:20px; }

.guest img { width:96px; height:96px; border-radius:999px; margin:0 auto 12px; }

 

.field { width:100%; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:16px; outline:none; }

 

footer { padding:40px 0; color:var(--muted); border-top:1px solid var(--line); }

 

.aspect-video { position:relative; width:100%; overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow); }

.aspect-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

 

.icon { width:22px; height:22px; }

.pill-row { display:flex; flex-wrap:wrap; gap:10px; }