/* ==========================================================================
   rithinkingmylife.com podcast site styles
   One stylesheet, no build step.

   Design brief: a Notion workspace that has been art-directed.
   Sidebar + document canvas, block-level hover affordances, property rows,
   callouts, database-style episode list. Palette is strictly black / white /
   grey with ONE accent: #f44a02, the orange on a Keychron keycap.

   Accent rule: orange is a highlight, never body copy. #f44a02 on white is
   ~3.6:1, which is fine for large text, icons, borders and fills, but not for
   paragraphs. Anything sitting ON orange uses white (--on-accent).

   Sections: 1 Tokens  2 Reset  3 Shell  4 Sidebar  5 Document  6 Blocks
             7 Buttons 8 Platforms 9 Episodes 10 Host 11 Forms 12 Footer
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink:       #1a1a19;   /* headings, primary text */
  --ink-2:     #5c5b57;   /* body / secondary */
  --ink-3:     #9a9892;   /* meta, captions, icons */
  --bg:        #ffffff;
  --bg-2:      #f7f7f5;   /* the Notion page grey */
  --bg-3:      #efeeec;   /* chips, wells */
  --line:      #e8e7e3;
  --line-2:    #dcdad5;
  --hover:     rgba(30, 28, 24, .055);
  --hover-2:   rgba(30, 28, 24, .09);

  --accent:    #f44a02;
  --accent-hi: #ff6122;   /* hover state */
  --accent-lo: #d43f00;   /* pressed / small text on white */
  --accent-wash: #fef1eb; /* 6% orange tint for callouts + chips */
  --on-accent: #ffffff;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Iowan Old Style, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sidebar: 268px;
  --doc: 780px;            /* Notion's default page width, near enough */
  --radius: 6px;           /* Notion's blocks are barely rounded */
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15, 15, 15, .05), 0 2px 8px rgba(15, 15, 15, .05);
  --shadow-md: 0 2px 4px rgba(15, 15, 15, .06), 0 12px 32px rgba(15, 15, 15, .1);

  --step: 16px;
}

[data-theme="dark"] {
  --ink:       #ececea;
  --ink-2:     #a7a5a0;
  --ink-3:     #74726d;
  --bg:        #191919;
  --bg-2:      #202020;
  --bg-3:      #2a2a29;
  --line:      #2e2e2c;
  --line-2:    #3a3a37;
  --hover:     rgba(255, 255, 255, .055);
  --hover-2:   rgba(255, 255, 255, .09);

  --accent:    #ff5b16;   /* nudged up 2 stops so it holds on #191919 */
  --accent-hi: #ff7638;
  --accent-lo: #ff5b16;
  --accent-wash: #2a1a12;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 2px 4px rgba(0,0,0,.55), 0 12px 32px rgba(0,0,0,.5);
}

/* 2. Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.022em; line-height: 1.15; font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* 3. Shell ----------------------------------------------------------------- */
/* Sidebar is fixed; the document scrolls in the normal page flow so the
   browser keeps native scroll restoration and anchor jumps. */
.shell { min-height: 100vh; }
.main { min-height: 100vh; background: var(--bg); }
@media (min-width: 1000px) {
  .main { margin-left: var(--sidebar); }
}

/* 4. Sidebar --------------------------------------------------------------- */
.sb {
  position: fixed; inset: 0 auto 0 0; z-index: 100;
  width: var(--sidebar);
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  padding: 10px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Workspace switcher at the top of every Notion sidebar */
.ws {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius);
  text-decoration: none; margin-bottom: 10px;
}
.ws:hover { background: var(--hover); }
.ws__icon {
  flex: none; width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center; overflow: hidden;
}
/* The mark runs as drawn: black ink, no plate behind it. It is pure black on
   transparent, so a straight invert is exact in dark mode. */
.ws__icon img { width: 30px; height: 30px; }
[data-theme="dark"] .ws__icon img { filter: invert(1); }
.ws__text { min-width: 0; }
/* These are <span>s, so they need display:block or the name and the subtitle
   run together on one line. */
.ws__name {
  display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ws__sub { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }

/* Quick find. Real behaviour: filters the episode list live. */
.qf { position: relative; margin: 0 4px 14px; }
.qf svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.qf input {
  width: 100%; padding: 7px 10px 7px 30px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.qf input::placeholder { color: var(--ink-3); }
.qf input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.qf__kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 4px;
  pointer-events: none;
}
.qf input:focus + .qf__kbd { display: none; }

.sb__label {
  font-size: 11px; font-weight: 650; letter-spacing: .04em;
  color: var(--ink-3); padding: 0 12px; margin: 14px 0 4px;
  text-transform: none;
}
.sb__nav { list-style: none; display: grid; gap: 1px; }
.sb__nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; line-height: 1.35;
  transition: background .12s ease, color .12s ease;
}
.sb__nav a:hover { background: var(--hover); color: var(--ink); }
.sb__nav a.is-active { background: var(--hover-2); color: var(--ink); font-weight: 600; }
.sb__nav .ic { flex: none; width: 18px; color: var(--ink-3); }
.sb__nav a:hover .ic, .sb__nav a.is-active .ic { color: var(--accent); }
.sb__nav .ext { margin-left: auto; color: var(--ink-3); font-size: 11px; }

.sb__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.sb__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 4px 8px; padding: 9px 12px; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.sb__cta:hover { background: var(--accent-hi); }
.sb__meta {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; font-size: 11.5px; color: var(--ink-3);
}
.sb__meta .theme-toggle { margin-left: auto; }

.theme-toggle {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { background: var(--hover); color: var(--ink); }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* Mobile: sidebar slides in over the page */
.topbar { display: none; }
@media (max-width: 999px) {
  .topbar {
    position: sticky; top: 0; z-index: 90;
    display: flex; align-items: center; gap: 10px;
    height: 52px; padding: 0 12px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(1.5) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .topbar__btn {
    display: grid; place-items: center; width: 34px; height: 34px;
    background: none; border: 0; border-radius: var(--radius);
    color: var(--ink-2); cursor: pointer;
  }
  .topbar__btn:hover { background: var(--hover); }
  .topbar__title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  }
  .topbar__title .dot { width: 22px; height: 22px; }
  [data-theme="dark"] .topbar__title .dot { filter: invert(1); }
  .topbar .theme-toggle { margin-left: auto; }

  .sb {
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-md);
  }
  .sb.is-open { transform: none; }
  .scrim {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(15,15,15,.4); opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  .scrim.is-open { opacity: 1; pointer-events: auto; }
}

/* 5. Document -------------------------------------------------------------- */
.doc { padding-bottom: 40px; }
.doc__inner { width: 100%; max-width: var(--doc); margin-inline: auto; padding-inline: 24px; }
@media (max-width: 600px) { .doc__inner { padding-inline: 18px; } }

/* Breadcrumb bar, sticky like Notion's */
.crumbs {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 6px;
  height: 45px; padding: 0 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(10px);
  font-size: 13px; color: var(--ink-3);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.crumbs.is-stuck { border-bottom-color: var(--line); }
.crumbs a { text-decoration: none; padding: 2px 6px; border-radius: 4px; color: var(--ink-2); }
.crumbs a:hover { background: var(--hover); }
.crumbs .sep { opacity: .5; }
.crumbs .now { color: var(--ink); font-weight: 500; padding: 2px 6px; }
.crumbs__right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.crumbs__ghost { color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 720px) { .crumbs__ghost { display: none; } }
@media (max-width: 999px) { .crumbs { top: 52px; } }

/* Cover image. Replace .cover img with a real 1500x400 artwork later.
   the gradient below is the placeholder and stays as a fallback. */
.cover {
  position: relative; height: clamp(190px, 26vw, 280px); overflow: hidden;
  display: flex; align-items: center;
  background:
    radial-gradient(120% 180% at 12% 110%, var(--accent) 0%, transparent 58%),
    radial-gradient(90% 140% at 88% -20%, color-mix(in srgb, var(--accent) 55%, #000) 0%, transparent 62%),
    #14130f;
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The tagline sits on the same left edge as the document below it, and above
   the grid overlay. Bottom padding keeps it clear of the page icon, which
   overlaps the cover's bottom-left corner. */
.cover__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--doc); margin-inline: auto;
  padding: 0 24px 44px;
}
.cover__line {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(21px, 3.4vw, 34px); line-height: 1.2;
  letter-spacing: -.015em; max-width: 18ch;
  /* Always white: the cover is a dark plate in both themes. */
  color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}
@media (max-width: 600px) { .cover__inner { padding: 0 18px 40px; } }
/* Faint diagonal keycap grid, so the placeholder reads as intentional. */
.cover::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(115deg, #000 10%, transparent 72%);
}

/* Page icon straddling the cover edge */
.doc__head { position: relative; }
.doc__icon {
  position: relative; margin-top: -40px; margin-bottom: 10px;
  width: 76px; height: 76px; border-radius: 14px;
  display: grid; place-items: center; font-size: 38px; line-height: 1;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
/* Here the mark is the black version on the page background, so in dark mode
   it has to flip to white. It is pure black ink on transparent, so a straight
   invert is exact, no filter chain needed. */
.doc__icon img { width: 60px; height: 60px; }
[data-theme="dark"] .doc__icon img { filter: invert(1); }
.doc h1 {
  font-size: clamp(34px, 4.6vw, 46px);
  letter-spacing: -.035em; margin-bottom: 6px;
}
.doc__tag {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(19px, 2.2vw, 23px); color: var(--ink-2);
  letter-spacing: -.01em; margin-bottom: 22px;
}

/* Property rows, straight out of a Notion page header */
.props { display: grid; gap: 1px; margin-bottom: 22px; }
.prop {
  display: grid; grid-template-columns: 148px 1fr; align-items: center;
  gap: 10px; padding: 5px 8px; border-radius: var(--radius);
  font-size: 14px;
}
.prop:hover { background: var(--hover); }
.prop__k {
  display: flex; align-items: center; gap: 7px;
  color: var(--ink-3); font-size: 13.5px;
}
.prop__k svg { flex: none; }
.prop__v { color: var(--ink-2); }
.prop__v a { text-decoration: none; border-bottom: 1px solid var(--line-2); }
.prop__v a:hover { border-bottom-color: var(--accent); color: var(--ink); }
@media (max-width: 560px) {
  .prop { grid-template-columns: 1fr; gap: 2px; }
}

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 4px;
  background: var(--bg-3); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.chip--accent { background: var(--accent-wash); color: var(--accent-lo); }
.chip--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* 6. Blocks ---------------------------------------------------------------- */
/* Section headings get the Notion block handle on hover (desktop only). */
.block { position: relative; scroll-margin-top: 70px; }
.block + .block { margin-top: 46px; }
.block__h {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 21px; letter-spacing: -.025em; margin-bottom: 4px;
}
.block__h .hash { color: var(--ink-3); font-weight: 500; }
.block__sub { color: var(--ink-2); font-size: 14.5px; margin-bottom: 18px; }
@media (min-width: 1100px) {
  .block__h::before {
    content: "⠿"; position: absolute; left: -26px; top: 2px;
    color: var(--ink-3); font-size: 14px; opacity: 0;
    transition: opacity .15s ease; cursor: grab;
  }
  .block:hover .block__h::before { opacity: .55; }
}

.divider { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

/* Callout */
.callout {
  display: flex; gap: 12px; padding: 16px 18px;
  background: var(--bg-2); border-radius: var(--radius-lg);
  border-left: 3px solid var(--accent);
  font-size: 15px; color: var(--ink-2);
}
.callout--accent { background: var(--accent-wash); }
.callout__icon { flex: none; font-size: 18px; line-height: 1.4; }
.callout strong { color: var(--ink); font-weight: 650; }

/* Toggle list (real <details>, so it works without JS) */
.toggle {
  border-bottom: 1px solid var(--line);
}
.toggle > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 6px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 550; letter-spacing: -.01em;
}
.toggle > summary::-webkit-details-marker { display: none; }
.toggle > summary:hover { background: var(--hover); border-radius: var(--radius); }
.toggle > summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 6px solid var(--ink-3);
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
  transition: transform .15s ease;
}
.toggle[open] > summary::before { transform: rotate(90deg); }
.toggle__body { padding: 0 6px 15px 26px; color: var(--ink-2); font-size: 14.5px; }

/* Bulleted list, Notion spacing */
.bullets { list-style: none; display: grid; gap: 7px; }
.bullets li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.bullets li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3);
}
.bullets--check li::before {
  left: 2px; top: .34em; width: 13px; height: 13px; border-radius: 3px;
  background: var(--accent);
  /* tick drawn with a mask so it inherits the accent in both themes */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,
           linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,
        linear-gradient(#000, #000);
  mask-composite: exclude;
}

.lede { font-size: 16.5px; color: var(--ink-2); }
.small { font-size: 13px; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-3); color: var(--accent-lo);
  padding: 1px 5px; border-radius: 4px;
}
.stack > * + * { margin-top: 14px; }

/* Placeholder marker. Search the source for "PLACEHOLDER" to find every
   thing that still needs real content. */
.ph {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px dashed var(--line-2); border-radius: 4px; padding: 1px 6px;
}

/* 7. Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid transparent; font-size: 14.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hi); }
.btn--ghost { border-color: var(--line-2); color: var(--ink); background: var(--bg); }
.btn--ghost:hover { background: var(--bg-2); border-color: var(--ink-3); }
.btn--sm { padding: 7px 13px; font-size: 13px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* 8. Platforms ------------------------------------------------------------- */
.plats { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .plats { grid-template-columns: repeat(3, 1fr); } }
.plat {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg);
  text-decoration: none; min-width: 0;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.plat:hover { border-color: var(--ink-3); background: var(--bg-2); transform: translateY(-1px); }
.plat__icon {
  flex: none; width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--ink-2);
}
.plat:hover .plat__icon { background: var(--accent); color: var(--on-accent); }
/* The middle column is a <span>; block it out so name and meta stack and the
   name can truncate instead of pushing the arrow off the card. */
.plat > span:not([class]) { min-width: 0; }
.plat__name {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plat__meta { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.plat__arrow { margin-left: auto; color: var(--ink-3); flex: none; opacity: 0; transition: opacity .15s ease; }
.plat:hover .plat__arrow { opacity: 1; }
/* Not-yet-live links stay visibly pending rather than pretending to work. */
.plat.is-soon { opacity: .62; }
.plat.is-soon:hover { transform: none; }

/* 9. Episodes (database view) --------------------------------------------- */
.db { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.db__bar {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.db__view {
  padding: 4px 9px; border-radius: 4px; border: 0; background: none;
  font-size: 13px; font-weight: 550; color: var(--ink-3); cursor: pointer;
}
.db__view:hover { background: var(--hover); color: var(--ink-2); }
.db__view.is-active { color: var(--ink); background: var(--hover-2); }
.db__count { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.db__head, .db__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 128px 78px 96px;
  align-items: center; gap: 12px;
  padding: 10px 14px;
}
.db__head {
  font-size: 12px; color: var(--ink-3); font-weight: 550;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.db__row {
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background .12s ease;
}
.db__row:last-child { border-bottom: 0; }
.db__row:hover { background: var(--hover); }
.db__ep { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.db__title {
  font-size: 14.5px; font-weight: 550; letter-spacing: -.01em; min-width: 0;
  display: flex; align-items: center; gap: 8px;
}
.db__title .play {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-3); color: var(--ink-2);
}
.db__row:hover .play { background: var(--accent); color: var(--on-accent); }
.db__title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db__guest, .db__len, .db__date { font-size: 13px; color: var(--ink-3); }

/* On narrow screens the table collapses to stacked cards. */
@media (max-width: 760px) {
  .db__head { display: none; }
  .db__row {
    grid-template-columns: auto 1fr; grid-template-areas:
      "ep    title"
      "meta  meta";
    row-gap: 6px; padding: 13px 14px;
  }
  .db__ep { grid-area: ep; }
  .db__title { grid-area: title; }
  .db__guest { grid-area: meta; }
  .db__len, .db__date { display: none; }
  .db__guest::after { content: " · " attr(data-meta); }
}

.db__empty { padding: 26px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* 10. Host ----------------------------------------------------------------- */
.host { display: grid; gap: 20px; }
@media (min-width: 640px) { .host { grid-template-columns: 148px 1fr; gap: 26px; align-items: start; } }
.host__photo {
  aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-3); font-size: 12px; text-align: center; padding: 10px;
}
.host__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) { .host__photo { max-width: 148px; } }
.host h3 { font-size: 19px; letter-spacing: -.025em; margin-bottom: 2px; }
.host__role { font-size: 13.5px; color: var(--ink-3); margin-bottom: 12px; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: 13px 14px; border-radius: var(--radius);
  background: var(--bg-2); border: 1px solid var(--line);
}
.stat__n {
  font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.stat__l { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.35; }

/* 11. Forms ---------------------------------------------------------------- */
.sub {
  padding: 22px; border-radius: var(--radius-lg);
  background: var(--bg-2); border: 1px solid var(--line);
}
.sub__form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.sub__form input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 10px 13px;
  font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.sub__form input::placeholder { color: var(--ink-3); }
.sub__form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.sub__note { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }
.form__status { font-size: 13.5px; margin-top: 10px; display: none; }
.form__status.is-on { display: block; }
.form__status.is-error { color: #c0392b; }
.form__status.is-ok { color: var(--accent-lo); }
[data-theme="dark"] .form__status.is-error { color: #ff8b7d; }

/* Socials */
.socials { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .socials { grid-template-columns: repeat(4, 1fr); } }
.social {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); text-decoration: none;
  font-size: 13.5px; font-weight: 550;
  transition: border-color .15s ease, background .15s ease;
}
.social:hover { border-color: var(--ink-3); background: var(--bg-2); }
.social svg { flex: none; color: var(--ink-3); }
.social:hover svg { color: var(--accent); }

/* 12. Footer --------------------------------------------------------------- */
.foot {
  margin-top: 60px; border-top: 1px solid var(--line);
  padding: 26px 0 40px; font-size: 13px; color: var(--ink-3);
}
.foot__row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* The document column is only 780px, so the three groups never fit on one
   line. Let them wrap left-aligned rather than pushing one group to the right
   edge of a half-empty second row. */
.foot__right { display: flex; gap: 18px; flex-wrap: wrap; }
/* Agency credit. The link is the one place in the footer that takes the accent. */
.foot__managed a { color: var(--accent-lo); font-weight: 550; }
.foot__managed a:hover { color: var(--accent-lo); }
@media (max-width: 620px) {
  .foot__row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Reveal on scroll. Only active under .js (set by the inline head script), so
   with JS off every block still renders. */
.js .rv { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }