/* Your Cover's Blown — site styles. Riso-print look built around the wordmark:
   warm paper, ink text, and the two riso inks (yellow + purple) used the way a
   risograph would — solid offset shadows, marker-bar rules, flat colour fills.
   Display type is Baloo 2 (the wordmark's chunky rounded cousin); body is
   Nunito, same as the sister sites. */

/* ---------- global ---------- */
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html { margin: 0; padding: 0; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: 1.15; }

/* per-page fonts (Page settings → Font), scoped to the page content — the
   header and footer keep the site chrome fonts */
body.font-helvetica main {
  --font-body: Helvetica, Arial, sans-serif;
  --font-display: Arial, Helvetica, sans-serif;
  font-family: var(--font-body);
}
body.font-mono main {
  /* CLInt renders in Consolas — lead with it; Apple systems without it fall
     back to their nearest mono */
  --font-body: Consolas, ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: Consolas, ui-monospace, 'SF Mono', Menlo, monospace;
  font-family: var(--font-body);
}
/* the Nunito/Consolas mix: prose stays Nunito even on a mono page — headings
   inside it (subtitles etc.) keep following --font-display */
body.font-mono main .block-text {
  font-family: 'Nunito', Arial, Helvetica, sans-serif;
}

/* content links: purple, thick underline — the site's signature link */
.block-text a, .post-body a, .host-card a, .episode-all a, .post-footer-nav a,
.listing-pages a, .ycb-listen-compact a {
  color: var(--purple-text); text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
  text-decoration-color: var(--yellow);
}
.block-text a:hover, .post-body a:hover, .host-card a:hover, .episode-all a:hover,
.post-footer-nav a:hover, .listing-pages a:hover, .ycb-listen-compact a:hover {
  color: var(--purple-deep); text-decoration-color: var(--purple);
}

/* ---------- header ---------- */
/* the whole top section sits on lighter paper, with the wordmark under the
   nav, 20px of air beneath it and the full-width rule closing the band */
.ycb-header { background: var(--paper-light); border-bottom: 1px dotted var(--rule); }
.ycb-header-logo { display: block; text-align: center; padding: 10px 16px 20px; }
.ycb-header-logo img { max-width: min(var(--logo-maxw, 780px), 100%); display: inline-block; }
.ycb-strip {
  background: var(--yellow); color: var(--ink);
  text-align: center; padding: 7px 16px;
  font-weight: 800; font-size: 14px; letter-spacing: 0.4px;
}
.ycb-strip a { color: inherit; text-decoration: none; }
.ycb-strip a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ycb-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 4px 34px; padding: 22px 16px 6px;
}
.ycb-nav a {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  color: var(--ink); text-decoration: none;
  padding: 2px 2px 4px; border-bottom: 3px solid transparent;
}
.ycb-nav a:hover { border-bottom-color: var(--purple); }
.ycb-nav a[aria-current="page"] { border-bottom-color: var(--yellow); }

/* ---------- newsletter (signup box above the footer, sister-site shape) ---------- */
.ycb-newsletter { text-align: center; padding: 40px 20px; width: 100%; max-width: 950px; margin: 0 auto; }
.outline-sign-up-box { border: 2px solid var(--ink); border-radius: 25px; padding: 30px 45px 5px; }
@media (min-width: 860px) { .outline-sign-up-box { padding-left: 160px; padding-right: 160px; } }
@media (max-width: 767px) { .outline-sign-up-box { padding-left: 30px; padding-right: 30px; } .ycb-newsletter { padding-left: 15px; padding-right: 15px; } }
/* the sister sites' Oswald lockup — same heading on all three signup boxes */
.newsletter-title-b { font-family: 'Oswald', var(--font-display); text-transform: uppercase; font-size: 250%; line-height: 1.15; margin-bottom: 30px; font-weight: 700; color: var(--ink); letter-spacing: 1px; }
@media (max-width: 767px) { .newsletter-title-b { font-size: 215%; } }
.newsletter-sub-title { margin-bottom: 25px; line-height: 1.4; color: var(--ink-soft); }
.sign-up-box {
  display: inline-block; padding: 0 12px; margin-bottom: 17px; vertical-align: middle;
  border-radius: 4px; border: 1px solid var(--rule); min-width: 480px; max-width: 635px; min-height: 38px;
  color: var(--ink); background: #fff; font: 16px var(--font-body);
}
@media (max-width: 767px) { .sign-up-box { min-width: 100%; max-width: 100%; } }
.mc-button {
  margin: 0 auto 25px; display: block; padding: 8px 10px; font-size: 16px;
  font-family: var(--font-body); font-weight: 700; background: var(--mc, #7a68a0); color: #fff;
  width: 480px; max-width: 100%; border: none; border-radius: 4px; cursor: pointer;
}
.mc-button:hover { background: color-mix(in srgb, var(--mc, #7a68a0) 71%, black); }
.mc-button:disabled { opacity: .6; cursor: default; }
.nl-hp { position: absolute; left: -5000px; }
.nl-msg { margin: 0 0 25px; font-weight: 700; color: var(--ink); }
.nl-msg[hidden] { display: none; }
.nl-msg-error { color: #b04a4a; }
/* interaction-only Turnstile is invisible but still reserves ~72px once its
   script renders — keep the box collapsed until Cloudflare actually needs to
   show a challenge (site.js adds .cf-turnstile-show via its callback) */
.cf-turnstile { height: 0; overflow: hidden; }
.cf-turnstile-show { height: auto; overflow: visible; margin-bottom: 17px; }

/* ---------- footer ---------- */
.ycb-footer {
  background: var(--footer-bg); color: var(--footer-text); margin-top: auto;
  font-size: 14px; line-height: 1.6;
}
.ycb-footer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 6px 18px;
  max-width: var(--maxw-page); margin: 0 auto; padding: 18px 24px;
}
.ycb-copy { grid-column: 1; justify-self: start; }
.ycb-byline { grid-column: 2; justify-self: center; }
.ycb-byline a { color: var(--footer-link); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.ycb-byline a:hover { color: var(--footer-link-hover); }
.ycb-byline-icon { display: block; }
.ycb-footer-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 18px; }
.ycb-socials { display: flex; align-items: center; gap: 12px; }
.ycb-socials img { display: block; width: 20px; height: 20px; }
.ycb-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ycb-footer-links a { color: var(--footer-link); text-decoration: none; padding: 8px 0; }
.ycb-footer-links a:hover { color: var(--footer-link-hover); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
@media (max-width: 767px) {
  .ycb-footer-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ycb-copy, .ycb-byline, .ycb-footer-right { grid-column: 1; justify-self: center; }
}

/* ---------- bands (full-bleed section backgrounds) ---------- */
.band { width: 100%; }
.band-inner { max-width: none; margin: 0; padding: 0; display: flow-root; }
.band--wash-yellow { background: var(--wash-yellow); }
.band--wash-purple { background: var(--wash-purple); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink .block-section-title h2, .band--ink .block-section-title h3,
.band--ink .block-page-title h1, .band--ink .block-sub-heading { color: var(--paper); }
.band--ink .block-text a, .band--ink .post-body a { color: var(--wash-purple); }

/* ---------- shared block bits ---------- */
/* Every block renders inside a .blk .blk--<type> wrapper which owns the
   block's vertical spacing — same mechanism as the sister sites:
   type default < globe (site-wide) value < the page's own --mt/--mb,
   with --mt-m/--mb-m phone twins. Padding, not margin (no collapsing). */
.blk { padding-top: var(--mt, 0); padding-bottom: var(--mb, 0); }
@media (max-width: 767px) {
  .blk { padding-top: var(--mt-m, var(--mt, 0)); padding-bottom: var(--mb-m, var(--mb, 0)); }
}
/* per-type defaults — keep in step with BLOCK_SPACING in lib/schemas.js */
.blk--page-title { --mt: var(--page-title-pad-top, 48px); --mb: 24px; }
.blk--text, .blk--text-with-subtitle { --mb: var(--text-pad-bottom, 24px); }
.blk--sub-heading { --mb: 24px; }
.blk--feature-list { --mb: 24px; }
.blk--feature-image { --mb: var(--feature-image-pad-bottom, 24px); }
.blk--video { --mb: 24px; }
.blk--svg-logo { --mt: var(--svg-logo-pad-top, 56px); }
.blk--gallery { --mb: 24px; }
.blk--listen-buttons { --mt: 24px; --mb: 24px; }
.blk--audio { --mb: 24px; }
.blk--episode-list { --mt: 24px; --mb: 40px; }
.blk--hosts { --mt: 24px; --mb: 40px; }
.blk--episode-header { --mt: 44px; --mb: 8px; }

.only-desktop { display: block; }
.only-mobile { display: none; }
@media (max-width: 767px) {
  .only-desktop { display: none; }
  .only-mobile { display: block; }
}

.ycb-divider {
  border: 0; border-top: 2px dashed var(--rule); max-width: var(--maxw-text);
  margin: var(--divider-space, 40px) auto;
}
@media (max-width: 767px) {
  .ycb-divider { margin-top: var(--divider-space-m, var(--divider-space, 40px)); margin-bottom: var(--divider-space-m, var(--divider-space, 40px)); }
}

.caption { text-align: center; padding-top: var(--caption-gap, 8px); color: var(--ink-soft); font-size: 15px; font-style: italic; margin: 0; }

/* the marker line — drawn as a text underline so it always matches the width
   of the words above it. The renderer still emits the hr (hidden here); a
   block with rule: false emits none, and :has() drops the underline with it. */
.title-rule, .section-rule { display: none; }

/* ---------- headings & text blocks ---------- */
.block-page-title { text-align: center; padding: 0 16px; }
.block-page-title h1 {
  font-size: var(--fs-page-title); font-weight: 800;
  padding-bottom: 6px;
}
.block-page-title:has(.title-rule) h1 {
  text-decoration: underline dotted; text-decoration-color: var(--rule);
  text-decoration-thickness: 2px; text-decoration-skip-ink: none;
  text-underline-offset: var(--page-title-pad-bottom, 18px);
  padding-bottom: calc(var(--page-title-pad-bottom, 18px) + 9px);
}

.block-section-title { max-width: var(--maxw-feature); margin: 0 auto; padding: 0 16px; }
.block-section-title h2 { font-size: var(--fs-section-title); }
.block-section-title h3 { font-size: 20px; }
.block-section-title:has(.section-rule) h2,
.block-section-title:has(.section-rule) h3 {
  text-decoration: underline dotted; text-decoration-color: var(--rule);
  text-decoration-thickness: 2px; text-decoration-skip-ink: none;
  text-underline-offset: var(--section-title-rule-gap, 10px);
  padding-bottom: calc(var(--section-title-rule-gap, 10px) + 4px);
}
.block-section-title.align-center { text-align: center; }
@media (max-width: 767px) {
  .block-section-title:has(.section-rule) h2,
  .block-section-title:has(.section-rule) h3 {
    text-underline-offset: var(--section-title-rule-gap-m, var(--section-title-rule-gap, 10px));
  }
}

.block-text { max-width: var(--maxw-text); margin: 0 auto; padding: 0 16px; }
.block-text p { margin: 0 0 var(--text-para-gap, 22px); }
.block-text p:last-child { margin-bottom: 0; }
.block-text.align-center { text-align: center; }
@media (max-width: 767px) { .block-text.align-center { text-align: left; } }
.block-text-subtitled .subtitle {
  font-size: var(--fs-subtitle); margin-bottom: var(--text-subtitle-gap, 14px);
}

.block-sub-heading {
  max-width: var(--maxw-text); margin: 0 auto; padding: 0 16px;
  font-size: 22px;
}

.block-feature-list { max-width: var(--maxw-text); margin: 0 auto; padding: 0 16px; }
.block-feature-list .bullet { margin: 0; padding-left: 24px; }
.block-feature-list li { margin-bottom: var(--feature-list-item-gap, 12px); }
.block-feature-list li:last-child { margin-bottom: 0; }
.block-feature-list li::marker { color: var(--purple); }

/* ---------- media blocks ---------- */
.block-feature-image { text-align: center; padding: 0 16px; }
.block-feature-image img {
  max-width: min(var(--img-maxw, 700px), 100%);
  border: var(--border); background: #fff;
  box-shadow: var(--shadow-yellow);
}
/* transparent artwork sits straight on the paper — no print frame */
.block-feature-image img.no-frame { border: 0; background: transparent; box-shadow: none; }
[data-lightbox] { cursor: zoom-in; }

.block-video { max-width: min(var(--img-maxw, 760px), 100%); margin: 0 auto; padding: 0 16px; }
.iframe-container { position: relative; padding-bottom: 56.25%; height: 0; }
.iframe-container iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: var(--border); background: #000; }
.ycb-video { width: 100%; border: var(--border); background: #000; }

.block-svg-logo { text-align: center; padding: 0 16px; }
.block-svg-logo .site-logo { max-width: min(var(--img-maxw, 780px), 100%); display: inline-block; }
.block-svg-logo .tagline {
  margin: var(--svg-logo-img-gap, 26px) 0 var(--svg-logo-tagline-gap, 0);
  font-weight: 700; font-size: 20px;
}

.block-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: var(--maxw-feature); margin: 0 auto; padding: 0 16px;
}
.block-gallery figure { margin: var(--gallery-gap, 10px); }
.block-gallery .gallery-img { display: block; width: 100%; border: var(--border); background: #fff; }
.block-gallery .grid-name { text-align: center; padding-top: var(--gallery-caption-gap, 8px); color: var(--ink-soft); font-size: 15px; }
@media (max-width: 767px) {
  .block-gallery { grid-template-columns: 1fr; }
  .block-gallery figure { margin: var(--gallery-gap-m, var(--gallery-gap, 10px)); }
}

/* ---------- listen buttons ---------- */
.block-listen { text-align: center; padding: 0 16px; }
.listen-title, .listen-soon-note {
  margin: 0 0 16px; font-size: 13px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft);
}
.listen-soon-note { font-style: normal; }
.listen-row { display: flex; flex-wrap: wrap; justify-content: center; }
.listen-pill {
  display: inline-block; margin: var(--listen-button-gap, 9px);
  padding: 9px 24px 11px; border: var(--border); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  text-decoration: none; box-shadow: var(--shadow-yellow);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
a.listen-pill:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--purple); }
.listen-pill.is-soon {
  border-style: dashed; box-shadow: none; color: var(--ink-soft); background: transparent;
}

/* the small links row under every episode player */
.ycb-listen-compact { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.ycb-listen-compact .dot { margin: 0 8px; }

/* ---------- audio player ---------- */
.block-audio { max-width: 660px; margin: 0 auto; padding: 0 16px; }
.ycb-player {
  display: flex; align-items: center; gap: 18px;
  border: var(--border); border-radius: 16px;
  background: var(--paper-deep); box-shadow: var(--shadow-purple);
  padding: 16px 20px;
}
.ycb-player > audio { display: none; }
.ycb-player noscript audio { display: block; width: 100%; }
.pl-play {
  flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%;
  border: var(--border); background: var(--yellow); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.08s ease;
}
.pl-play:hover { transform: scale(1.06); }
.pl-play svg { width: 26px; height: 26px; fill: var(--ink); }
.pl-play .pl-icon-pause { display: none; }
.ycb-player.is-playing .pl-icon-play { display: none; }
.ycb-player.is-playing .pl-icon-pause { display: block; }
.pl-main { flex: 1; min-width: 0; }
.pl-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.pl-seek {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; margin: 8px 0 6px; cursor: pointer;
  height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff;
}
.pl-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--purple); border: 2px solid var(--ink); cursor: pointer;
}
.pl-seek::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--purple); border: 2px solid var(--ink); cursor: pointer;
}
.pl-seek::-moz-range-progress { background: var(--purple); height: 6px; border-radius: 999px; }
.pl-seek:disabled { cursor: default; }
.pl-row { display: flex; justify-content: space-between; align-items: center; }
.pl-time { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pl-skips { display: flex; gap: 8px; }
.pl-skip {
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-family: var(--font-body); font-weight: 800; font-size: 12px;
  padding: 2px 10px; cursor: pointer; color: var(--ink);
}
.pl-skip:hover { background: var(--yellow); }

/* ---------- episode rows (the listing + episode-list block) ---------- */
.block-episode-list { max-width: var(--maxw-feature); margin: 0 auto; padding: 0 16px; }
.block-episode-list .block-section-title { padding: 0; margin-bottom: 26px; }
.episode-rows { list-style: none; margin: 0; padding: 0; }
.episode-row {
  display: flex; gap: 26px;
  padding-bottom: var(--episode-list-row-gap, 30px);
  margin-bottom: var(--episode-list-row-gap, 30px);
  border-bottom: 2px dashed var(--rule);
}
.episode-row:last-child { border-bottom: 0; margin-bottom: 0; }
.ep-num {
  font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1;
  color: var(--purple); text-shadow: 3px 3px 0 var(--yellow);
  text-decoration: none; width: 86px; flex-shrink: 0; padding-top: 4px;
}
.ep-info { min-width: 0; }
.ep-title { font-size: 24px; margin-bottom: 4px; }
.ep-title a { color: var(--ink); text-decoration: none; }
.ep-title a:hover { color: var(--purple-text); }
.ep-book { margin: 0 0 6px; font-size: 16px; }
.ep-book cite { font-style: italic; font-weight: 800; color: var(--brown); }
.ep-desc { margin: 0 0 8px; font-size: 16px; }
.ep-meta { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-soft); }
.episode-all { text-align: center; margin: 26px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; }

/* the coming-soon card (no published episodes yet) — flat, no outline */
.episode-empty {
  max-width: 600px; margin: 0 auto; padding: 22px 30px;
  border-radius: var(--episode-list-card-radius, 6px);
  background: var(--paper-deep);
  text-align: center;
}
.episode-empty p { margin: 0; font-size: 17px; }

/* pagination on /episodes/ */
.listing-pages {
  display: flex; justify-content: center; align-items: center; gap: 26px;
  padding: 10px 16px 44px; font-family: var(--font-display); font-weight: 700;
}
.listing-pages span { color: var(--ink-soft); font-family: var(--font-body); font-weight: 600; font-size: 14px; }

/* ---------- episode page header ---------- */
.episode-header { text-align: center; max-width: var(--maxw-text); margin: 0 auto; padding: 0 16px; }
.episode-header .ep-num { display: block; width: auto; font-size: 62px; margin-bottom: 14px; text-shadow: 4px 4px 0 var(--yellow); }
.episode-header h1 { font-size: 34px; font-weight: 800; margin-bottom: 10px; }
.episode-header .ep-book { font-size: 18px; margin-bottom: 8px; }
.episode-header .ep-meta { margin-bottom: 0; }

.post-body .post-img { text-align: center; margin: 0 0 var(--text-para-gap, 22px); }
.post-body .feature-img { border: var(--border); background: #fff; box-shadow: var(--shadow-yellow); }
.post-body .img-large { max-width: min(700px, 100%); }
.post-body .img-medium { max-width: min(520px, 100%); }
.post-body .img-small { max-width: min(340px, 100%); }
.post-footer-nav {
  max-width: var(--maxw-text); margin: 0 auto; padding: 8px 16px 48px;
  font-family: var(--font-display); font-weight: 700;
}

/* ---------- hosts ---------- */
/* Riso-print polaroids: each host is a small white card taped to the paper at
   a slight angle, the photo overprinted as a duotone in one riso ink (purple
   or yellow, alternating) with the offset shadow misregistered in the OTHER
   ink. Hover blows the cover: the print lifts and the real photo shows. */
.block-hosts {
  display: flex; align-items: center; justify-content: center;
  gap: var(--hosts-gap, 48px);
  /* extra bottom padding covers the staggered card's 18px downward offset */
  max-width: var(--maxw-feature); margin: 0 auto; padding: 12px 16px 26px;
}
.hosts-img {
  width: 340px; flex-shrink: 0;
  border: var(--border); background: #fff; box-shadow: var(--shadow-yellow);
}
.hosts-cards {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--hosts-gap, 48px); min-width: 0;
}
.host-card {
  position: relative; width: 240px; text-align: center;
  background: #fff; border: 1px solid var(--ink); padding: 12px 12px 16px;
  transform: rotate(-1deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.host-card.ink-purple { box-shadow: var(--shadow-yellow); }
.host-card.ink-yellow { box-shadow: var(--shadow-purple); transform: rotate(1deg) translateY(18px); }
/* the strip of tape holding each print to the page */
.host-card::before {
  content: ''; position: absolute; top: -13px; left: 50%; width: 92px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(233, 196, 20, .5);
  border-left: 2px dashed rgba(36, 29, 18, .25);
  border-right: 2px dashed rgba(36, 29, 18, .25);
  z-index: 2;
}
.host-card.ink-yellow::before { transform: translateX(-50%) rotate(2.5deg); background: rgba(122, 104, 160, .38); }
.host-card:hover { transform: rotate(0) scale(1.04); z-index: 3; }
.host-card.ink-purple:hover { box-shadow: 6px 6px 0 var(--yellow); }
.host-card.ink-yellow:hover { box-shadow: 6px 6px 0 var(--purple); }
/* the duotone print: grayscale photo multiplied onto a solid ink ground */
.host-photo-wrap {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--ink); background: var(--purple);
}
.ink-yellow .host-photo-wrap { background: var(--yellow); }
.host-photo {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.05);
  mix-blend-mode: multiply;
  transition: filter .3s ease;
}
/* purple ink is darker than yellow — lift the print so it doesn't go muddy */
.ink-purple .host-photo { filter: grayscale(1) contrast(1) brightness(1.4); }
.host-card:hover .host-photo { filter: none; mix-blend-mode: normal; }
.host-card h3 {
  font-size: 21px; margin: 12px 0 2px;
  text-shadow: 2px 2px 0 var(--wash-yellow);
}
.host-card p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.host-card p + p { margin-top: 6px; }
@media (max-width: 767px) {
  .block-hosts { flex-direction: column; }
  .hosts-img { width: min(300px, 100%); }
  .host-card.ink-yellow { transform: rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .host-card, .host-photo { transition: none; }
}

/* ---------- lightbox ---------- */
.ycb-lightbox { border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh; }
.ycb-lightbox::backdrop { background: rgba(36, 29, 18, 0.88); }
.ycb-lightbox img { display: block; max-width: 92vw; max-height: 92vh; border: var(--border); background: #fff; }
.ycb-lightbox .lightbox-close {
  position: fixed; top: 10px; right: 14px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  border: var(--border); background: var(--yellow); color: var(--ink);
  font-size: 26px; line-height: 1; cursor: pointer;
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  :root { --fs-page-title: 32px; --fs-section-title: 22px; }
  /* prose gets more side air than the 16px the wide elements use — a text
     column running edge-to-edge reads wider than everything around it */
  .block-text, .block-sub-heading, .block-feature-list { padding-left: 28px; padding-right: 28px; }
  .ycb-nav { gap: 2px 22px; padding-top: 16px; }
  .ycb-nav a { font-size: 16px; }
  .episode-row { gap: 16px; }
  .ep-num { font-size: 34px; width: 56px; }
  .episode-header .ep-num { font-size: 48px; }
  .episode-header h1 { font-size: 28px; }
  .ycb-player { flex-direction: row; gap: 14px; padding: 14px 16px; }
  .pl-play { width: 48px; height: 48px; }
  .episode-empty { padding: 20px 18px; }
}