/* ============================================================
   The Corner Lot — Podcast Hub
   Warm cream + coral + ink. Retro screen-printed sticker.
   Josefin Slab (brand display) / Oswald (labels) / Open Sans (UI + body).
   ============================================================ */

/* ---- Fonts ---- */
@font-face{font-family:'Josefin Slab';src:url('fonts/JosefinSlab-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Josefin Slab';src:url('fonts/JosefinSlab-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Josefin Slab';src:url('fonts/JosefinSlab-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/Oswald-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/Oswald-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/Oswald-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/Oswald-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Open Sans';src:url('fonts/OpenSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sans';src:url('fonts/OpenSans-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Open Sans';src:url('fonts/OpenSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Open Sans';src:url('fonts/OpenSans-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Open Sans';src:url('fonts/OpenSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --coral-50:#fdeee9; --coral-100:#f9d6cb; --coral-300:#f0a086;
  --coral-500:#e75b3a; --coral-600:#cf4527; --coral-700:#a5341c; --coral-900:#5c1c0f;
  --cream-50:#faf6ec; --cream-100:#f4ecd7; --cream-200:#ecddb8; --cream-300:#e2cc98;
  --ink-900:#0a0402; --ink-800:#1c1310; --ink-700:#2e2320; --ink-500:#5c4d47;
  --ink-300:#8a7d76; --ink-100:#d8d0ca; --white:#ffffff;
  --success:#2f6b43; --success-bg:#e0efe3;
  --danger:#bb2f20; --danger-bg:#f8ded9;
  --warning:#b47d1c; --warning-bg:#f8e9cd;

  --font-display:'Josefin Slab',Georgia,serif;
  --font-label:'Oswald','Arial Narrow',sans-serif;
  --font-body:'Open Sans',system-ui,sans-serif;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-pill:999px;
  --sticker:4px 4px 0 var(--ink-900);
  --sticker-sm:3px 3px 0 var(--ink-900);
  --shadow-sm:0 1px 2px rgba(10,4,2,0.09);
  --shadow-md:0 6px 18px rgba(10,4,2,0.12);
  --ease:cubic-bezier(.4,0,.2,1); --fast:120ms;
  --sidebar-w:244px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  color:var(--ink-700); background:var(--cream-50);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh;
}
a{color:var(--coral-600);text-decoration:none;transition:color var(--fast) var(--ease)}
a:hover{color:var(--coral-700)}
button,input,textarea,select{font-family:inherit}
::selection{background:var(--coral-100)}
::placeholder{color:var(--ink-300)}
*{scrollbar-color:var(--cream-300) transparent}
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:var(--cream-300);border-radius:var(--r-pill);border:2px solid var(--cream-50)}
*::-webkit-scrollbar-thumb:hover{background:var(--coral-300)}

/* ---- Type ---- */
.display{font-family:var(--font-display);font-weight:700;color:var(--ink-900);line-height:1.02;letter-spacing:-0.01em}
.page-title{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--ink-900);line-height:1.02;letter-spacing:-0.02em}
.h1{font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:var(--ink-900);line-height:1.05}
/* Functional headings in Open Sans for legibility */
.h2{font-family:var(--font-body);font-weight:700;font-size:1.28rem;color:var(--ink-900);line-height:1.2;letter-spacing:-0.01em}
.h3{font-family:var(--font-body);font-weight:700;font-size:1.02rem;color:var(--ink-900);line-height:1.25}
.eyebrow{font-family:var(--font-label);font-weight:600;font-size:0.76rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--coral-600)}
.label{font-family:var(--font-label);font-weight:600;font-size:0.74rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--ink-500)}
.muted{color:var(--ink-500)}
.mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.86rem}

/* ---- App shell (sidebar + main) ---- */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:50;
  background:var(--cream-100);border-right:2px solid var(--ink-900);
  display:flex;flex-direction:column;padding:22px 16px;
}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 22px;text-decoration:none}
.sidebar-brand:hover{color:inherit}
.sidebar-logo{height:46px;width:46px;border-radius:11px;border:2px solid var(--ink-900);object-fit:cover;box-shadow:var(--sticker-sm)}
.sidebar-word{font-family:var(--font-display);font-weight:700;font-size:1.28rem;color:var(--ink-900);line-height:0.95}
.sidebar-sub{font-family:var(--font-label);font-weight:600;font-size:0.62rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--coral-600);margin-top:3px}
.sidebar-nav{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.side-link{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-label);font-weight:600;font-size:0.98rem;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--ink-800);padding:11px 14px;border-radius:var(--r-md);border:2px solid transparent;
  transition:all var(--fast) var(--ease);
}
.side-link:hover{color:var(--ink-900);background:var(--cream-200)}
.side-link.active{color:var(--white);background:var(--coral-500);border-color:var(--ink-900);box-shadow:var(--sticker-sm)}
.side-ico{width:20px;height:20px;flex-shrink:0;display:inline-flex}
.side-ico svg{width:100%;height:100%}
.sidebar-foot{margin-top:auto;padding:14px 10px 2px;font-family:var(--font-body);font-size:0.72rem;color:var(--ink-300);line-height:1.4;border-top:2px solid var(--ink-100)}

.main{margin-left:var(--sidebar-w);min-height:100vh}
.view{max-width:1240px;margin:0 auto;padding:38px 40px 80px}
.view-narrow{max-width:860px;margin:0 auto;padding:38px 40px 80px}
@media(max-width:720px){.sidebar{position:static;width:auto;flex-direction:row;flex-wrap:wrap;align-items:center}.main{margin-left:0}.sidebar-nav{flex-direction:row;flex-wrap:wrap;margin-top:0}.sidebar-foot{display:none}}

/* ---- Layout helpers ---- */
.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column}
.grid-2{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start}
.grid-guide{display:grid;grid-template-columns:380px 1fr;gap:26px;align-items:start}
@media(max-width:980px){.grid-2,.grid-guide{grid-template-columns:1fr}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.page-sub{color:var(--ink-500);margin-top:8px;font-size:0.98rem}
.hr{border:none;border-top:2px solid var(--ink-100);margin:20px 0}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-label);font-weight:600;font-size:0.86rem;letter-spacing:0.05em;text-transform:uppercase;
  padding:12px 22px;border-radius:var(--r-md);border:2px solid var(--ink-900);
  background:var(--white);color:var(--ink-900);cursor:pointer;white-space:nowrap;
  transition:transform var(--fast) var(--ease),background var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.btn:hover{background:var(--cream-100)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--coral-500);color:var(--white);box-shadow:var(--sticker)}
.btn-primary:hover{background:var(--coral-600)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink-900)}
.btn-ink{background:var(--ink-900);color:var(--cream-100);box-shadow:var(--sticker)}
.btn-ink:hover{background:var(--ink-800)}
.btn-ink:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink-900)}
.btn-ghost{border-color:transparent;background:transparent;color:var(--coral-600);box-shadow:none;padding:9px 12px}
.btn-ghost:hover{background:var(--coral-50)}
.btn-sm{padding:8px 14px;font-size:0.74rem}
.btn-lg{padding:12px 24px;font-size:0.86rem}
.btn-block{width:100%}
.btn:disabled{opacity:0.45;cursor:not-allowed;transform:none}

/* ---- Cards ---- */
.card{background:var(--white);border:2px solid var(--ink-100);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
.card-ink{border-color:var(--ink-900);box-shadow:var(--sticker)}
.card-tight{padding:18px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-coral{background:var(--coral-500);border-color:var(--ink-900);color:var(--cream-100);box-shadow:var(--sticker)}
.card-coral .h2,.card-coral .h3{color:var(--white)}
.card-cream{background:var(--cream-100);border-color:var(--ink-900);box-shadow:var(--sticker-sm)}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-label);font-weight:600;font-size:0.7rem;letter-spacing:0.09em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);border:2px solid var(--ink-900);background:var(--cream-200);color:var(--ink-900);white-space:nowrap;line-height:1.4}
.badge-sticker{box-shadow:var(--sticker-sm)}
.badge-coral{background:var(--coral-500);color:var(--white)}
.badge-ink{background:var(--ink-900);color:var(--cream-100)}
.badge-success{background:var(--success-bg);color:var(--success);border-color:var(--success)}
.badge-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
.badge-warning{background:var(--warning-bg);color:var(--warning);border-color:var(--warning)}

/* ---- Forms ---- */
.field{display:flex;flex-direction:column;gap:6px}
.input,.textarea,.select{font-family:var(--font-body);font-size:0.98rem;color:var(--ink-800);padding:11px 14px;border-radius:var(--r-sm);border:2px solid var(--ink-100);background:var(--white);outline:none;width:100%;transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--coral-500);box-shadow:0 0 0 3px var(--coral-50)}
.textarea{resize:vertical;line-height:1.55}
.textarea-mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:0.84rem;line-height:1.55}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%235c4d47' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.select-sm{padding:7px 28px 7px 12px;font-size:0.82rem;border-radius:var(--r-pill);border-color:var(--ink-900);font-weight:600}

/* ---- Stats ---- */
.stats{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.stat{flex:1;min-width:150px;background:var(--white);border:2px solid var(--ink-900);border-radius:var(--r-md);padding:16px 20px;box-shadow:var(--sticker-sm)}
.stat-num{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--ink-900);line-height:1}
.stat-num.coral{color:var(--coral-600)}
.stat-label{font-family:var(--font-label);font-weight:600;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-500);margin-top:6px}

/* ---- Kanban ---- */
.board{display:flex;gap:18px;overflow-x:auto;padding:6px 4px 20px;align-items:flex-start}
.col{flex:0 0 306px;width:306px;background:var(--cream-100);border:2px solid var(--ink-900);border-radius:var(--r-lg);display:flex;flex-direction:column;max-height:calc(100vh - 280px);box-shadow:var(--sticker-sm)}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 16px;border-bottom:2px solid var(--ink-900);position:sticky;top:0;background:var(--cream-100);border-radius:var(--r-lg) var(--r-lg) 0 0}
.col-title{font-family:var(--font-label);font-weight:700;font-size:0.86rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-900)}
.col-count{font-family:var(--font-label);font-weight:700;font-size:0.76rem;min-width:24px;height:24px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);background:var(--white);border:2px solid var(--ink-900);color:var(--ink-900)}
.col.is-active .col-head{background:var(--coral-500)}
.col.is-active .col-title{color:var(--white)}
.col-body{padding:12px;display:flex;flex-direction:column;gap:11px;overflow-y:auto}
.col-empty{font-family:var(--font-body);font-size:0.86rem;color:var(--ink-300);text-align:center;padding:22px 8px;font-style:italic}
.gcard{background:var(--white);border:2px solid var(--ink-900);border-radius:var(--r-md);padding:14px 15px;text-decoration:none;color:inherit;display:block;box-shadow:var(--sticker-sm);transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.gcard:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink-900);color:inherit}
.gcard-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem;color:var(--ink-900);line-height:1.1}
.gcard-firm{font-size:0.9rem;font-weight:600;color:var(--ink-800);margin-top:2px}
.gcard-title{font-size:0.8rem;color:var(--ink-500);margin-top:1px}
.gcard-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}

/* ---- Email preview ---- */
.email{background:var(--cream-50);border:2px solid var(--ink-900);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sticker-sm)}
.email-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-bottom:2px solid var(--ink-900);background:var(--white)}
.email-subject{font-family:var(--font-body);font-weight:700;font-size:0.94rem;color:var(--ink-900)}
.email-body{padding:18px;white-space:pre-wrap;font-family:var(--font-body);font-size:0.94rem;line-height:1.62;color:var(--ink-700)}
.placeholder-chip{color:var(--coral-600);font-weight:700}

/* ---- Rendered brief markdown ---- */
.brief-doc{font-family:var(--font-body);color:var(--ink-700);line-height:1.65;font-size:1rem}
.brief-doc h2{font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--ink-900);margin:0 0 6px;line-height:1.12}
.brief-doc h3{font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--ink-900);margin:22px 0 8px}
.brief-doc p{margin:0 0 12px}
.brief-doc strong{color:var(--ink-900);font-weight:700}
.brief-doc ul{margin:0 0 16px;padding-left:20px}
.brief-doc li{margin:0 0 6px}
.brief-doc hr{border:none;border-top:2px solid var(--ink-100);margin:20px 0}
.brief-doc em{color:var(--ink-500)}

/* ---- Misc ---- */
.callout{border:2px solid var(--ink-900);background:var(--warning-bg);border-radius:var(--r-md);padding:14px 16px;color:var(--ink-800);font-size:0.92rem;box-shadow:var(--sticker-sm)}
.callout .label{color:var(--warning)}
.note-item{padding:11px 0;border-bottom:1px solid var(--ink-100);font-size:0.9rem;color:var(--ink-700)}
.note-item:last-child{border-bottom:none}
.note-date{font-family:var(--font-label);font-weight:600;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-300);margin-bottom:3px}
.link-close{font-family:var(--font-label);font-weight:600;font-size:0.76rem;letter-spacing:0.05em;text-transform:uppercase}
.saving{font-size:0.78rem;color:var(--ink-300);font-style:italic}
.copied{color:var(--success)!important}
.flow-step{display:flex;align-items:flex-start;gap:13px;padding:9px 0}
.flow-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--ink-900);color:var(--cream-100);font-family:var(--font-label);font-weight:700;font-size:0.8rem;display:inline-flex;align-items:center;justify-content:center}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--coral-500)}
.login-card{background:var(--cream-50);border:2px solid var(--ink-900);border-radius:var(--r-lg);box-shadow:var(--sticker);padding:38px;width:100%;max-width:390px;text-align:center}

/* ============================================================
   Guide document (one-page letter, matches the print template)
   ============================================================ */
.guide-doc{
  background:var(--white);color:var(--ink-900);border:2px solid var(--ink-900);border-radius:var(--r-md);
  box-shadow:var(--sticker);width:100%;max-width:760px;margin:0 auto;padding:40px 44px;
  font-family:var(--font-body);
}
.guide-head{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:3px solid var(--ink-900);padding-bottom:12px;margin-bottom:16px}
.guide-head-l{display:flex;align-items:center;gap:16px}
.guide-logo{height:48px;width:48px;border-radius:10px;border:2px solid var(--ink-900);object-fit:cover;box-shadow:var(--sticker-sm)}
.guide-kicker{font-family:var(--font-label);text-transform:uppercase;letter-spacing:0.13em;font-size:0.72rem;font-weight:600;color:var(--coral-500)}
.guide-title{font-family:var(--font-display);font-weight:700;font-size:1.7rem;margin:2px 0 0;color:var(--ink-900)}
.guide-dur{font-family:var(--font-label);text-transform:uppercase;letter-spacing:0.06em;font-size:0.76rem;font-weight:600;background:var(--cream-200);border:2px solid var(--ink-900);border-radius:var(--r-sm);padding:7px 13px;white-space:nowrap}
.guide-intro{font-size:0.98rem;line-height:1.45;margin:0 0 14px}
.guide-parties{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.guide-party{flex:1;min-width:200px;background:var(--cream-200);border:2px solid var(--ink-900);border-radius:var(--r-md);padding:11px 15px}
.guide-party-label{font-family:var(--font-label);text-transform:uppercase;letter-spacing:0.08em;font-size:0.72rem;font-weight:700;color:var(--ink-700)}
.guide-party-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem;margin-top:2px}
.guide-party-sub{font-size:0.86rem;color:var(--ink-700);font-style:italic}
.guide-h2{font-family:var(--font-display);font-weight:700;font-size:1.35rem;margin:0 0 4px;color:var(--ink-900)}
.guide-expect{font-size:0.9rem;line-height:1.45;margin:0 0 14px;color:var(--ink-800)}
.guide-points{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.guide-point{border:2px solid var(--ink-900);border-radius:var(--r-sm);padding:12px 17px;break-inside:avoid}
.guide-point-top{display:flex;align-items:baseline;gap:11px;margin-bottom:3px}
.guide-point-n{font-family:var(--font-label);font-size:0.94rem;font-weight:700;letter-spacing:0.06em;color:var(--coral-500)}
.guide-point-title{font-family:var(--font-body);font-weight:700;font-size:1rem;margin:0;color:var(--ink-900)}
.guide-point-desc{font-size:0.9rem;line-height:1.4;margin:0;color:var(--ink-800)}
.guide-leave{background:var(--coral-500);border:2px solid var(--ink-900);border-radius:var(--r-md);padding:13px 18px;break-inside:avoid}
.guide-leave-h{font-family:var(--font-label);text-transform:uppercase;letter-spacing:0.07em;font-size:0.78rem;font-weight:700;color:var(--cream-100);margin:0 0 5px}
.guide-leave p{font-size:0.88rem;line-height:1.35;color:var(--cream-100);margin:0 0 5px}
.guide-leave ul{font-size:0.88rem;line-height:1.4;color:var(--cream-100);margin:0;padding-left:18px}
.guide-foot{font-size:0.8rem;line-height:1.4;color:var(--ink-500);margin:10px 0 0}

/* ---- Print: only the guide, on a clean letter page ---- */
@media print{
  @page{size:letter;margin:0.5in}
  body{background:#fff}
  .no-print{display:none!important}
  .main{margin:0}
  .view,.view-narrow{max-width:none;padding:0}
  .printable .guide-doc{border:none;box-shadow:none;border-radius:0;max-width:none;padding:0;margin:0}
  .print-only{display:block!important}
}
.print-only{display:none}

/* ---- Drag and drop (board) ---- */
.gcard{cursor:grab}
.gcard:active{cursor:grabbing}
.gcard.dragging{opacity:0.4;transform:rotate(-1.5deg)}
.col.drop-over{background:var(--coral-50)}
.col.drop-over .col-body{outline:2px dashed var(--coral-500);outline-offset:-6px;border-radius:var(--r-md)}
.grip{display:inline-flex;color:var(--ink-300);margin-right:2px}

/* ---- Guide history log ---- */
.log-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--cream-50);border:2px solid var(--ink-100);border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;margin-bottom:8px;transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.log-row:hover{border-color:var(--ink-900);transform:translateX(2px)}
.log-name{font-family:var(--font-body);font-weight:700;font-size:0.94rem;color:var(--ink-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-sub{font-size:0.8rem;color:var(--ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-when{font-family:var(--font-label);font-weight:600;font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-300);white-space:nowrap;flex-shrink:0}

/* ---- Branded bullet list ---- */
.bullets{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0}
.bullets li{position:relative;padding-left:24px;font-size:1rem;line-height:1.5;color:var(--ink-700)}
.bullets li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:2px;background:var(--coral-500);border:2px solid var(--ink-900)}
.bullets strong{color:var(--ink-900);font-weight:700}

/* ---- Guide log status ---- */
.log-row-static{cursor:default}
.log-row-static:hover{border-color:var(--ink-100);transform:none}
.log-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-label);font-weight:600;font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase}
.log-badge.generating{color:var(--coral-600)}
.log-badge.failed{color:var(--danger)}
.spinner{width:11px;height:11px;border:2px solid var(--coral-300);border-top-color:var(--coral-600);border-radius:50%;display:inline-block;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   ============================================================
   MARKETING SITE  (art-directed redesign)
   Public podcast site components for the marketing pages
   (home / episodes / about / guest / faq). Reuses the app
   design system above: same tokens, fonts, radii, and the
   sticker shadow language (2px ink borders + hard offsets).
   Nothing above this line is modified.

   Layout language for all pages:
     .shell            -> centered max-width gutter container
     .section          -> vertical rhythm wrapper (uses --section-y)
     .section-panel    -> cream-100 banded section (ink top/bottom)
     .band / .band-ink -> full-bleed coral / ink CTA bands
     .reveal(.in)      -> scroll-reveal primitive
   ============================================================
   ============================================================ */

/* ---- Marketing spacing scale + section rhythm (canonical) ---- */
:root{
  --s1:8px; --s2:16px; --s3:22px; --s4:36px; --s5:52px; --s6:74px;
  --section-y:clamp(48px,5.5vw,84px);
  --shell:1120px;
  --sticker-lg:7px 7px 0 var(--ink-900);
  --sticker-xl:10px 10px 0 var(--ink-900);
}

/* ---- Marketing utilities ---- */
.center{text-align:center}
.center .section-head{align-items:center}
.mt-0{margin-top:0}
.mt-1{margin-top:8px}
.mt-2{margin-top:16px}
.mt-3{margin-top:24px}
.mt-4{margin-top:36px}
.mb-0{margin-bottom:0}
.mb-2{margin-bottom:16px}
.mb-3{margin-bottom:24px}
.lead{font-size:1.12rem;line-height:1.6;color:var(--ink-700)}
.lead-lg{font-size:1.22rem;line-height:1.55;color:var(--ink-700)}
.maxw-60{max-width:60ch}
.mx-auto{margin-left:auto;margin-right:auto}

/* ---- Scroll-reveal primitive ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}
.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Shell container (aligned gutters everywhere) ---- */
.shell{max-width:var(--shell);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}

/* ---- Keyboard focus ring (on-brand coral, no new color) ---- */
.pill:focus-visible,.nav-link:focus-visible,.listen-btn:focus-visible,.cover-play:focus-visible,.play:focus-visible{outline:2px solid var(--coral-500);outline-offset:2px}

/* ============================================================
   Canonical site header (sticky) — used on every page
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--cream-50);border-bottom:2px solid var(--ink-900);
  transition:box-shadow var(--fast) var(--ease),padding var(--fast) var(--ease);
}
.site-header.scrolled{box-shadow:0 3px 0 var(--ink-900)}
.site-header.scrolled .site-header-inner{padding-top:8px;padding-bottom:8px}
.site-header-inner{
  max-width:1120px;margin:0 auto;padding:12px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:padding var(--fast) var(--ease);
}
.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.site-brand:hover{color:inherit}
.site-brand-logo{
  height:40px;width:40px;border-radius:10px;border:2px solid var(--ink-900);
  object-fit:cover;box-shadow:var(--sticker-sm);flex-shrink:0;
}
.site-brand-word{font-family:var(--font-display);font-weight:700;font-size:1.28rem;color:var(--ink-900);line-height:1;letter-spacing:-0.01em}
.nav{display:flex;align-items:center;gap:8px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-link{
  font-family:var(--font-label);font-weight:600;font-size:0.86rem;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--ink-800);padding:9px 14px;border-radius:var(--r-md);border:2px solid transparent;
  transition:color var(--fast) var(--ease),background var(--fast) var(--ease);
}
.nav-link:hover{color:var(--coral-600);background:var(--cream-100)}
.nav-link.active{color:var(--coral-600)}
.nav .btn{margin-left:6px}
@media(max-width:720px){
  .site-header-inner{flex-wrap:wrap;padding:12px 18px;gap:12px}
  .nav{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:6px}
  .nav-links{flex-wrap:wrap;gap:2px}
  .nav-link{padding:8px 11px;font-size:0.8rem}
  .nav .btn{margin-left:0}
}
@media(max-width:400px){
  .site-brand-word{font-size:1.15rem}
}

/* ============================================================
   Section rhythm + containers
   ============================================================ */
.section{max-width:1120px;margin:0 auto;padding:var(--section-y) 28px}
.section-narrow{max-width:820px;margin:0 auto;padding:var(--section-y) 28px}
.section-tight{padding-top:clamp(40px,5vw,60px);padding-bottom:clamp(40px,5vw,60px)}
.section-head{display:flex;flex-direction:column;gap:9px;margin-bottom:clamp(22px,2.6vw,34px);max-width:640px}
.section-head.center{margin-left:auto;margin-right:auto;align-items:center;text-align:center}
.section-head .eyebrow{margin-bottom:2px}
.section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,2.5vw,2.2rem);color:var(--ink-900);line-height:1.06;letter-spacing:-0.02em}
.section-sub{font-size:1.05rem;line-height:1.55;color:var(--ink-500)}

/* Cream-100 panel section (subtle bg shift for rhythm) */
.section-panel{background:var(--cream-100);border-top:2px solid var(--ink-900);border-bottom:2px solid var(--ink-900)}

/* Coral / ink full-bleed CTA bands */
.band{background:var(--coral-500);border-top:2px solid var(--ink-900);border-bottom:2px solid var(--ink-900)}
.band .section-title,.band .eyebrow,.band .section-sub,.band .lead{color:var(--cream-50)}
.band .eyebrow{color:var(--ink-900)}
.band-inner{max-width:820px;margin:0 auto;padding:var(--section-y) 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.band-ink{background:var(--ink-900)}
.band-ink .section-title,.band-ink .eyebrow,.band-ink .section-sub,.band-ink .lead{color:var(--cream-50)}
.band-ink .eyebrow{color:var(--coral-300)}

@media(max-width:600px){
  .section{padding:clamp(44px,11vw,60px) 20px}
  .section-narrow{padding:clamp(40px,10vw,54px) 20px}
  .band-inner{padding:clamp(44px,11vw,60px) 20px}
}

/* ============================================================
   Split hero (BASE = Concept A) — commanding above the fold.
   Left: eyebrow, oversized headline, subhead, listen pills,
   Be a Guest + live rec tag, meta rail.
   Right: tilted logo sticker on a coral block bleeding off-edge.
   ============================================================ */
.chero{
  position:relative;
  background:var(--cream-50);
  border-bottom:2px solid var(--ink-900);
  overflow:hidden;
}
.chero-bleed{
  position:absolute;top:0;bottom:0;right:0;
  width:min(46%,720px);
  background:var(--coral-500);
  border-left:2px solid var(--ink-900);
  z-index:0;
}
.chero-bleed::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(var(--coral-700) 1.4px,transparent 1.5px);
  background-size:18px 18px;
  opacity:.28;
  mix-blend-mode:multiply;
}
.chero-inner{
  position:relative;z-index:1;
  max-width:1200px;margin:0 auto;
  padding:clamp(36px,4.8vw,64px) 28px clamp(32px,4vw,52px);
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:center;
}
.chero-l{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.chero-eyebrow{
  font-family:var(--font-label);font-weight:600;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-600);
  display:inline-flex;align-items:center;gap:10px;
}
.chero-eyebrow::before{
  content:'';width:34px;height:2px;background:var(--coral-500);display:inline-block;
}
.chero-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.5rem,4.6vw,4.2rem);
  line-height:.96;letter-spacing:-0.03em;color:var(--ink-900);
  margin:0;
}
.chero-title .u{color:var(--coral-600)}
.chero-sub{
  font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5;color:var(--ink-700);
  max-width:46ch;margin:0;
}
.chero-sub b{color:var(--ink-900);font-weight:700}

/* Listen / subscribe pills */
.listen-pills{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--s1)}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-label);font-weight:600;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 16px;border-radius:var(--r-pill);
  border:2px solid var(--ink-900);background:var(--white);color:var(--ink-900);
  box-shadow:var(--sticker-sm);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
}
.pill:hover{transform:translate(-1px,-1px);box-shadow:var(--sticker);color:var(--ink-900);background:var(--cream-100)}
.pill:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink-900)}
.pill svg{width:16px;height:16px;flex-shrink:0}
.pill-apple svg{color:#000}
.pill-spotify svg{color:#1db954}
.pill-yt svg{color:var(--coral-600)}

.chero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:var(--s1)}

/* "Season 1 · Now Recording" live tag */
.rec-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-800);
  padding:7px 14px 7px 12px;border-radius:var(--r-pill);
  border:2px solid var(--ink-900);background:var(--cream-200);box-shadow:var(--sticker-sm);
}
.rec-dot{
  width:10px;height:10px;border-radius:50%;background:var(--coral-500);
  border:2px solid var(--ink-900);position:relative;flex-shrink:0;
}
.rec-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--coral-500);
  animation:recPulse 1.8s ease-out infinite;
}
@keyframes recPulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.rec-dot::after{animation:none;opacity:0}}

/* Meta rail (grafted from Concept B): horizontal key/value sticker strip */
.chero-meta{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  border:2px solid var(--ink-900);border-radius:var(--r-md);
  background:var(--white);box-shadow:var(--sticker-sm);
  overflow:hidden;margin-top:var(--s1);
}
.chero-meta-item{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 20px;
  border-left:2px solid var(--ink-900);
}
.chero-meta-item:first-child{border-left:none}
.chero-meta-k{font-family:var(--font-label);font-weight:600;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-600)}
.chero-meta-v{font-family:var(--font-display);font-weight:700;font-size:1.08rem;line-height:1;color:var(--ink-900)}

/* RIGHT column — tilted sticker cover art */
.chero-r{display:flex;justify-content:center;align-items:center;position:relative}
.cover{
  position:relative;
  width:min(100%,330px);
  transform:rotate(-3deg);
}
.cover-art{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:2px solid var(--ink-900);border-radius:22px;
  box-shadow:var(--sticker-xl);
  background:var(--cream-100);
}
.cover-badge{
  position:absolute;top:-16px;left:-16px;
  transform:rotate(-9deg);
  font-family:var(--font-label);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cream-50);background:var(--ink-900);
  padding:8px 14px;border:2px solid var(--ink-900);border-radius:var(--r-pill);
  box-shadow:3px 3px 0 var(--coral-500);
}
.cover-play{
  position:absolute;right:-14px;bottom:-14px;
  width:56px;height:56px;border-radius:50%;
  background:var(--cream-50);border:2px solid var(--ink-900);
  box-shadow:var(--sticker);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(3deg);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.cover-play:hover{transform:rotate(3deg) translate(-1px,-1px);box-shadow:var(--sticker-lg)}
.cover-play svg{width:22px;height:22px;margin-left:3px;color:var(--coral-600)}

@media(max-width:900px){
  .chero-bleed{width:100%;top:auto;height:52%;bottom:0;border-left:none;border-top:2px solid var(--ink-900)}
  .chero-inner{grid-template-columns:1fr;gap:var(--s5);text-align:left}
  .chero-l{align-items:flex-start}
  .chero-r{order:-1}
  .cover{width:min(78%,320px)}
}
@media(max-width:560px){
  .chero-title{font-size:clamp(2.2rem,8vw,2.9rem)}
  .chero-actions{width:100%}
  .chero-actions .btn{flex:1}
  .chero-meta{width:100%}
  .chero-meta-item{flex:1 1 40%}
}

/* ============================================================
   Marquee ticker — infinite horizontal scroll, CORAL band
   ============================================================ */
.marquee{
  background:var(--coral-500);
  border-top:2px solid var(--ink-900);
  border-bottom:2px solid var(--ink-900);
  overflow:hidden;
  padding:11px 0;
  position:relative;
}
.marquee-track{
  display:flex;width:max-content;
  animation:marqueeScroll 32s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;flex-shrink:0}
.marquee-item{
  font-family:var(--font-label);font-weight:700;font-size:.9rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  padding:0 22px;white-space:nowrap;
}
.marquee-dot{color:var(--ink-900);font-size:.7rem;line-height:1}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ============================================================
   Featured "premiering soon" — full-bleed INK band
   ============================================================ */
.featured{background:var(--ink-900);color:var(--cream-100);padding:var(--section-y) 0;overflow:hidden}
.featured .eyebrow{color:var(--coral-300)}
.featured-player{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(30px,5vw,68px);align-items:center;margin-top:clamp(26px,4vw,44px);
}
.featured-cover{position:relative}
.featured-cover::before{
  content:"";position:absolute;inset:-16px -16px 20px 16px;background:var(--coral-500);
  border:2px solid var(--cream-100);border-radius:22px;z-index:0;
}
.featured-cover img{
  position:relative;z-index:1;width:100%;height:auto;display:block;
  border:2px solid var(--cream-100);border-radius:20px;box-shadow:6px 6px 0 var(--coral-500);
}
.featured-soon{
  position:absolute;z-index:2;top:-14px;left:-14px;
  font-family:var(--font-label);font-weight:700;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-900);background:var(--cream-100);border:2px solid var(--cream-100);
  padding:7px 13px;border-radius:var(--r-pill);box-shadow:3px 3px 0 rgba(0,0,0,.4);transform:rotate(-3deg);
}
.featured-h{font-family:var(--font-display);font-weight:700;color:var(--white);
  font-size:clamp(1.55rem,2.6vw,2.25rem);line-height:1.08;letter-spacing:-0.02em;margin:12px 0 0;max-width:18ch}
.featured-p{color:var(--cream-200);font-size:1rem;line-height:1.55;max-width:52ch;margin-top:15px}

/* transport row: big coral play + CSS waveform */
.transport{display:flex;align-items:center;gap:20px;margin-top:var(--s4)}
.play{
  flex-shrink:0;width:64px;height:64px;border-radius:50%;
  background:var(--coral-500);border:2px solid var(--cream-100);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background var(--fast) var(--ease);
}
.play:hover{background:var(--coral-600);transform:translate(-1px,-1px);box-shadow:7px 7px 0 rgba(0,0,0,.45)}
.play:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.45)}
.play svg{width:26px;height:26px;margin-left:4px}

.wave{display:flex;align-items:center;gap:5px;height:56px;flex:1;min-width:0;overflow:hidden}
.wave i{
  display:block;width:4px;border-radius:3px;background:var(--cream-200);opacity:.9;
  animation:wave 1.25s ease-in-out infinite;transform-origin:center;
}
@keyframes wave{0%,100%{height:22%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){.wave i{animation:none;height:52%}}

/* dark subscribe row */
.subscribe-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--s4)}
.subscribe-lead{font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--cream-300);margin-right:2px}
.subscribe-row .pill{background:transparent;color:var(--cream-100);border-color:var(--cream-100);box-shadow:3px 3px 0 var(--coral-500)}
.subscribe-row .pill:hover{background:var(--cream-100);color:var(--ink-900);box-shadow:4px 4px 0 var(--coral-500)}
.subscribe-row .pill svg{color:currentColor}

@media(max-width:820px){
  .featured-player{grid-template-columns:1fr;gap:34px}
  .featured-cover{max-width:320px}
  .featured-cover::before{inset:-12px -12px 16px 12px}
}

/* ============================================================
   Feature grid (what the show is / why listen)
   ============================================================ */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.feature-card{
  background:var(--white);border:2px solid var(--ink-900);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sticker);
  display:flex;flex-direction:column;gap:12px;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.feature-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink-900)}
.feature-ico{
  width:52px;height:52px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);border:2px solid var(--ink-900);
  background:var(--coral-500);color:var(--white);box-shadow:var(--sticker-sm);
  font-family:var(--font-display);font-weight:700;font-size:1.5rem;
}
.feature-ico svg{width:26px;height:26px}
.feature-ico-cream{background:var(--cream-200);color:var(--ink-900)}
.feature-ico-ink{background:var(--ink-900);color:var(--cream-100)}
.feature-title{font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--ink-900);line-height:1.25}
.feature-text{font-size:0.95rem;line-height:1.55;color:var(--ink-500)}

/* Split layout for "what the show is" (asymmetric, not centered) */
.split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.split .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
  .split .feature-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

/* ============================================================
   Episodes grid + cards (premium even as "coming soon")
   ============================================================ */
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.ep-card{
  position:relative;background:var(--white);
  border:2px solid var(--ink-900);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--sticker);
  display:flex;flex-direction:column;gap:12px;min-height:220px;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.ep-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink-900)}
.ep-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ep-num{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  min-width:44px;height:44px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);border:2px solid var(--ink-900);
  background:var(--cream-200);color:var(--ink-900);box-shadow:var(--sticker-sm);
}
.ep-title{font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:var(--ink-900);line-height:1.12;letter-spacing:-0.015em}
.ep-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--font-label);font-weight:600;font-size:0.74rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-500)}
.ep-desc{font-size:0.96rem;line-height:1.55;color:var(--ink-500)}
.ep-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.ep-card.is-soon{background:var(--cream-100)}
.ep-card.is-soon .ep-num{background:var(--white)}
.ep-soon-tag{
  font-family:var(--font-label);font-weight:600;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--coral-600);
}
.ep-card.is-placeholder{
  align-items:center;justify-content:center;text-align:center;
  background:var(--cream-100);border-style:dashed;box-shadow:none;
}
.ep-card.is-placeholder:hover{transform:none;box-shadow:none}

/* ============================================================
   Topic cards ("what we get into") — bold numbered editorial
   ============================================================ */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.topic-card{
  position:relative;background:var(--white);border:2px solid var(--ink-900);border-radius:var(--r-md);
  padding:22px 22px;box-shadow:var(--sticker-sm);
  display:flex;flex-direction:column;gap:8px;overflow:hidden;
  transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.topic-card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink-900)}
.topic-num{
  font-family:var(--font-display);font-weight:700;font-size:2rem;line-height:.9;
  color:var(--coral-500);
}
.topic-kicker{font-family:var(--font-label);font-weight:700;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--coral-600)}
.topic-title{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--ink-900);line-height:1.14;letter-spacing:-0.01em}
.topic-text{font-size:0.94rem;line-height:1.5;color:var(--ink-500)}

/* ============================================================
   Host strip (bio row) — offset editorial, coral rule + tilt
   ============================================================ */
.host-strip{
  display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:center;
  background:var(--white);border:2px solid var(--ink-900);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--sticker);
}
.host-mark{
  width:180px;height:180px;border-radius:var(--r-lg);
  border:2px solid var(--ink-900);object-fit:cover;box-shadow:var(--sticker-sm);
  transform:rotate(-2deg);
}
.host-body{display:flex;flex-direction:column;gap:12px}
.host-name{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--ink-900);line-height:1.02;letter-spacing:-0.02em;position:relative;padding-bottom:12px}
.host-name::after{content:'';position:absolute;left:0;bottom:0;width:64px;height:3px;background:var(--coral-500)}
.host-role{font-family:var(--font-label);font-weight:600;font-size:0.82rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--coral-600)}
.host-text{font-size:1.02rem;line-height:1.6;color:var(--ink-700)}
@media(max-width:640px){
  .host-strip{grid-template-columns:1fr;padding:26px;gap:20px}
  .host-mark{width:150px;height:150px}
  .host-name::after{left:0}
}

/* ============================================================
   Guest form (reuses .field/.input/.textarea/.select)
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .field-full{grid-column:1 / -1}
@media(max-width:600px){
  .form-grid{grid-template-columns:1fr}
}
.form-card{
  background:var(--white);border:2px solid var(--ink-900);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--sticker);
}
.form-card .field label,.field-label{font-family:var(--font-label);font-weight:600;font-size:0.74rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--ink-700)}
.form-note{font-size:0.86rem;color:var(--ink-500);margin-top:4px}
@media(max-width:600px){.form-card{padding:22px}}

/* ============================================================
   FAQ (styled Q/A list; works as <details> or plain divs)
   ============================================================ */
.faq{display:flex;flex-direction:column;gap:14px}
.faq-item{
  background:var(--white);border:2px solid var(--ink-900);border-radius:var(--r-md);
  padding:0;box-shadow:var(--sticker-sm);overflow:hidden;
}
.faq-q{
  font-family:var(--font-body);font-weight:700;font-size:1.05rem;color:var(--ink-900);
  padding:18px 20px;cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{
  content:'+';font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--coral-500);
  line-height:1;transition:transform var(--fast) var(--ease);flex-shrink:0;
}
details[open] .faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 20px 20px;font-size:0.98rem;line-height:1.6;color:var(--ink-700)}
.faq-item.static .faq-q{cursor:default}
.faq-item.static .faq-q::after{content:''}

/* ============================================================
   Newsletter (inline email capture, on-brand)
   ============================================================ */
.newsletter{
  display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;
  max-width:520px;
}
.newsletter .input{
  flex:1;min-width:200px;border-color:var(--ink-900);border-radius:var(--r-md);
  box-shadow:var(--sticker-sm);
}
.newsletter .btn{flex-shrink:0}
.newsletter-card{
  background:var(--cream-100);border:2px solid var(--ink-900);border-radius:var(--r-lg);
  padding:32px;box-shadow:var(--sticker);
  display:flex;flex-direction:column;gap:16px;
}
@media(max-width:600px){
  .newsletter{flex-direction:column}
  .newsletter .btn{width:100%}
}

/* ============================================================
   Canonical site footer — used on every page
   ============================================================ */
.site-footer{background:var(--ink-900);color:var(--cream-100);border-top:2px solid var(--ink-900)}
.site-footer a{color:var(--cream-100)}
.site-footer a:hover{color:var(--coral-300)}
.footer-inner{max-width:1120px;margin:0 auto;padding:48px 28px 36px}
.footer-cols{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;
  padding-bottom:32px;border-bottom:2px solid var(--ink-700);
}
.footer-brand{display:flex;flex-direction:column;gap:14px;max-width:340px}
.footer-brand-row{display:flex;align-items:center;gap:12px}
.footer-logo{height:40px;width:40px;border-radius:10px;border:2px solid var(--cream-100);object-fit:cover;flex-shrink:0}
.footer-word{font-family:var(--font-display);font-weight:700;font-size:1.28rem;color:var(--cream-50);line-height:1}
.footer-tag{font-family:var(--font-display);font-weight:400;font-size:1rem;color:var(--cream-200);line-height:1.3}
.footer-col-title{font-family:var(--font-label);font-weight:600;font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--coral-300);margin-bottom:14px}
.footer-nav{display:flex;flex-direction:column;gap:10px}
.footer-nav a{font-family:var(--font-label);font-weight:500;font-size:0.9rem;letter-spacing:0.05em;text-transform:uppercase}
.listen-row{display:flex;flex-wrap:wrap;gap:10px}
.listen-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-label);font-weight:600;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;
  padding:9px 16px;border-radius:var(--r-pill);
  border:2px solid var(--cream-100);background:transparent;color:var(--cream-100);
  transition:background var(--fast) var(--ease),color var(--fast) var(--ease);
}
.listen-btn:hover{background:var(--cream-100);color:var(--ink-900)}
.listen-btn svg{width:16px;height:16px}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:24px;font-family:var(--font-label);font-weight:500;font-size:0.76rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-300);
}
@media(max-width:760px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1 / -1}
}
@media(max-width:480px){
  .footer-cols{grid-template-columns:1fr}
  .footer-inner{padding:44px 20px 32px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ============================================================
   Legacy hero + chips  (kept until episodes/about/guest are
   rebuilt to the new .chero pattern; do NOT use on new pages)
   ============================================================ */
.hero{
  background:var(--cream-50);
  border-bottom:2px solid var(--ink-900);
  padding:clamp(64px,9vw,88px) 28px clamp(60px,8vw,84px);
}
.hero-inner{max-width:1000px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.hero-eyebrow{font-family:var(--font-label);font-weight:600;font-size:0.82rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--coral-600)}
.hero-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,7vw,5rem);line-height:0.98;letter-spacing:-0.02em;
  color:var(--ink-900);max-width:16ch;
}
.hero-sub{font-size:clamp(1.05rem,2.2vw,1.32rem);line-height:1.55;color:var(--ink-700);max-width:60ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:4px}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-label);font-weight:600;font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--r-pill);border:2px solid var(--ink-900);
  background:var(--white);color:var(--ink-900);box-shadow:var(--sticker-sm);
}
.chip-coral{background:var(--coral-500);color:var(--white)}
.chip-cream{background:var(--cream-200)}
@media(max-width:600px){
  .hero{padding:56px 20px 52px}
}