/* Four Between the Covers — full site styles (Brand Guide V1) */
:root {
  --rose: #C94F6D;
  --raspberry: #E0527D;
  --berry: #7A183D;
  --forest: #214C3A;
  --blush: #F3C6C7;
  --blush-soft: #F9E9E6;   /* light blush for cards on Soft Blush backgrounds (to be added to the brand guide) */
  --cream: #FFF7F2;
  --ink: #24151D;
  --gold: #D7A45D;

  --font-script: "Great Vibes", cursive;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rose); }
a:hover { color: var(--berry); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--cream); padding: .5rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--berry);
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 .3em;
}
.heart { width: .45em; height: .45em; vertical-align: .6em; fill: none; stroke: var(--rose); stroke-width: 2; }
.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .4rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(122, 24, 61, .3);
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--raspberry); color: #fff; transform: translateY(-2px); }
.btn svg { width: 1.3em; height: 1.3em; }
.btn--lg { font-size: 1.15rem; padding: 1rem 2.4rem; }
.text-link {
  font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.text-link:hover { color: var(--rose); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(215, 164, 93, .25);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.5rem;
}
.brand { padding: .35rem 0; flex: none; }
.brand img { display: block; width: 17rem; height: auto; }   /* horizontal logo */
/* small laptops: the menu needs the room, so the stacked logo is used here (see the <picture> in the header) */
@media (min-width: 901px) and (max-width: 1250px) { .brand img { width: 7rem; } }
/* computers: the menu links are centered on the bar. The logo is centered in the space to their left
   and the social icons in the space to their right (equal side columns, full bar width, no column gap). */
@media (min-width: 901px) {
  .site-header .wrap {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
    max-width: none; padding: 0;
  }
  /* the logo shrinks a little when its column is tight, always keeping 2rem of space on each side */
  .brand { justify-self: stretch; display: flex; justify-content: center; min-width: 0; padding: .35rem 2rem; }
  .brand img { max-width: 100%; }
  .site-header .socials { justify-self: center; }
}
@media (max-width: 400px) { .brand img { width: 14rem; } }
.nav { margin-left: auto; }
@media (min-width: 901px) { .nav { margin-left: 0; } }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; }
/* links and the dropdown button share one box model so their text sits on the same line */
.nav > ul > li { display: flex; align-items: center; }
.nav > ul > li > a, .nav__parent { display: inline-flex; align-items: center; line-height: 1.2; }
.nav a {
  color: var(--cream); text-decoration: none;
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--blush); }
.nav a[aria-current="page"] { color: var(--raspberry); border-bottom-color: var(--raspberry); }
/* dropdown (Inspiration): opens on hover, keyboard focus, or a click on the button (main.js) */
.nav__drop { position: relative; }
.nav__parent {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent; padding: .4rem 0; font: inherit; line-height: 1.2; color: var(--cream);
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.nav__parent:hover { color: var(--blush); }
.nav__drop.is-current > .nav__parent { color: var(--raspberry); border-bottom-color: var(--raspberry); }
.nav__chev { width: .85rem; height: .85rem; transition: transform .2s; }
.nav .nav__sub {
  display: none; flex-direction: column; gap: 0; position: absolute; z-index: 50;
  top: calc(100% + .75rem); left: 50%; transform: translateX(-50%); min-width: 13rem; padding: .45rem 0;
  background: var(--ink); border: 1px solid rgba(215, 164, 93, .3); border-radius: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.nav .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -.9rem; height: .9rem; }  /* keeps hover alive across the gap */
.nav__drop:hover .nav__sub, .nav__drop:has(:focus-visible) .nav__sub, .nav__parent[aria-expanded="true"] + .nav__sub { display: flex; }
.nav__drop:hover .nav__chev, .nav__parent[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav .nav__sub a { display: block; padding: .6rem 1.2rem; border-bottom: 0; white-space: nowrap; }
.nav .nav__sub a:hover { background: rgba(255, 247, 242, .06); }
.nav .nav__sub a[aria-current="page"] { color: var(--raspberry); border-bottom: 0; }
.socials { display: flex; gap: .9rem; }
.socials a { color: var(--cream); display: inline-flex; }
.socials a:hover { color: var(--raspberry); }
.socials svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0; padding: .5rem; cursor: pointer; color: var(--cream);
}
.nav-toggle svg { width: 1.8rem; height: 1.8rem; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

/* ---------- hero (home) ----------
   Just the logo and tagline on a deep ink background. Everything is sized in cqw
   (1% of the hero's width), so the text and logo scale together as one piece. */
.hero {
  position: relative;
  container-type: inline-size;
  color: var(--cream);
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(122, 24, 61, .55), rgba(36, 21, 29, 0) 70%), var(--ink);
}
.hero .wrap { position: static; max-width: none; padding: 0; }
.hero__content {
  width: 50cqw; margin: 0 auto; padding: 4.5cqw 0 5cqw;
  text-align: center;
}
.hero__logo { margin: 0 0 2.6cqw; }
.hero__logo img { display: block; width: 30cqw; height: auto; margin: 0 auto; filter: drop-shadow(0 .4cqw 1.6cqw rgba(0, 0, 0, .45)); }
.brush-tag {
  position: relative; z-index: 0; display: inline-block;
  margin: 0 0 2.8cqw;
  padding: .5em 1.3em .45em;
  font-family: var(--font-script); font-size: 2.05cqw; line-height: 1.15;
  color: var(--ink); transform: rotate(-3deg);
}
.brush-tag::before {
  content: ""; position: absolute; inset: -4px -10px; z-index: -1;
  background: var(--blush); border-radius: 12px 40px 16px 36px;
  filter: url(#brush);
}
.brush-tag .heart { stroke: var(--ink); vertical-align: .1em; }
.pillars {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .4em .75em; margin: 0;
  font-size: .9cqw; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.pillars svg { width: 1em; height: 1em; fill: var(--raspberry); }
.pillars__br { flex-basis: 100%; height: 0; }   /* forced line break between pillar words */
.hero .only-narrow { display: none; }            /* computer vs phone line breaks in the hero */
.hero .btn--lg { font-size: 1.35cqw; padding: .85em 2.1em; gap: .6em; }
/* computer: Listen Now sits in the hero's top right corner */
.hero .btn--lg { position: absolute; top: 2.2cqw; right: 3cqw; }

/* ---------- features ---------- */
.features { padding: 3rem 0 2.5rem; }
.features ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.features li {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: .25rem 1rem; text-align: center;
  font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35;
}
.features li + li { border-left: 1px solid rgba(201, 79, 109, .3); }
.features img { width: 4.25rem; height: 4.25rem; }

/* ---------- latest episode ---------- */
.latest { padding: 3rem 0 4rem; }
.latest .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem 7rem; align-items: start;
  max-width: 70rem;
}
.brush-card {
  position: relative; z-index: 0;
  padding: 2.2rem 2rem 2.4rem;
  color: var(--cream);
}
.brush-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--forest);
  border-radius: 6px 28px 10px 22px;
  filter: url(#brush);
  box-shadow: 0 10px 30px rgba(33, 76, 58, .25);
}
.brush-card .script { color: var(--cream); }
.brush-card .heart { stroke: var(--raspberry); }
.brush-card h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 0 0 1rem;
}
.brush-card p { margin: 0 0 1.6rem; font-size: .95rem; color: rgba(255, 247, 242, .9); }

.player { text-align: center; }
.cover {
  position: relative; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(36, 21, 29, .3);
  background:
    radial-gradient(circle at 20% 20%, rgba(215, 164, 93, .4), transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(33, 76, 58, .6), transparent 60%),
    linear-gradient(160deg, #3a1a28, var(--ink));
  display: grid; place-items: center;
}
.cover img.cover__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* darken the photo behind the title so the script stays readable */
.cover::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(36, 21, 29, .78), rgba(36, 21, 29, .4) 75%, rgba(36, 21, 29, .2));
}
.cover__title {
  position: relative; z-index: 1; margin: 0; padding: 0 1rem;
  display: flex; align-items: center; justify-content: center; gap: .15em;
  font-family: var(--font-script); font-weight: 400; color: var(--raspberry);
  font-size: clamp(2.4rem, 4.6vw, 3.5rem); line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 18px rgba(36, 21, 29, .8);
  transform: rotate(-4deg);
}
.cover__title .heart { width: .38em; height: .38em; stroke: var(--blush); stroke-width: 2.2; vertical-align: 0; flex: none; }
.cover__title .heart:first-child { align-self: flex-start; margin-top: .1em; }
.cover__title .heart:last-child { align-self: flex-end; margin-bottom: .05em; }
.wave { display: block; width: 100%; height: 2.6rem; margin: 1rem 0 .8rem; }
.wave rect { fill: var(--rose); }
.controls { display: flex; justify-content: center; align-items: center; gap: 1.6rem; }
.controls button, .controls a {
  display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink);
}
.controls button:disabled { cursor: default; opacity: .55; }
.controls svg { width: 2.2rem; height: 2.2rem; }
.controls .play {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--ink); color: var(--cream);
  transition: background .2s, transform .2s;
}
.controls .play:hover { background: var(--berry); color: var(--cream); transform: scale(1.05); }
.controls .play svg { width: 1.5rem; height: 1.5rem; margin-left: .2rem; }

.more h2 { font-size: clamp(1.9rem, 2.7vw, 2.3rem); white-space: nowrap; }
.brush-card .script { font-size: clamp(2.3rem, 3.6vw, 2.9rem); }
.ep-list { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.ep-list li + li { border-top: 1px solid rgba(201, 79, 109, .25); }
.ep-list a {
  display: grid; grid-template-columns: 4rem 2rem 1fr; gap: .9rem; align-items: center;
  padding: .85rem 0; text-decoration: none; color: var(--ink);
}
.ep-list a:hover .ep-list__title { color: var(--rose); }
.thumb {
  width: 4rem; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  background: linear-gradient(150deg, #4a2233, var(--ink));
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(36, 21, 29, .25);
}
.thumb img { width: 70%; }
.thumb img.thumb__art { width: 100%; height: 100%; object-fit: cover; }
.mini-play {
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--rose); color: #fff;
  display: grid; place-items: center;
}
.mini-play svg { width: .8rem; height: .8rem; margin-left: .12rem; fill: currentColor; }
.ep-list__title { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.ep-list__num { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a6f79; }
.more .text-link { display: block; text-align: center; }

/* ---------- genres band ---------- */
.genres { background: var(--blush); padding: 3.5rem 0 5rem; }
.genres__grid {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem .5rem;
  --per-row: 8;
}
.genres__grid li { flex: 0 0 calc((100% - (var(--per-row) - 1) * .5rem) / var(--per-row)); min-width: 0; padding: 0 .5rem; box-sizing: border-box; }
.genres__grid a {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  color: var(--ink); text-decoration: none; text-align: center;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
.genres__grid img { width: 5rem; height: 5rem; transition: transform .25s; }
.genres__grid a:hover img { transform: translateY(-4px) rotate(-4deg); }
.genres__grid a:hover { color: var(--berry); }

/* ---------- bookish corner ---------- */
.corner {
  position: relative; z-index: 1;         /* sits above the genre band so the ivy can grow up into it */
  overflow-x: clip;                       /* nothing pokes out sideways; ivy may still rise above */
  display: grid; grid-template-columns: 1fr 1fr;
  --card-w: clamp(24rem, 30vw, 30rem);    /* narrower card on laptops leaves the quote room */
  --card-x: clamp(1rem, 4vw, 4rem);
  min-height: max(24rem, calc(100vw * .293 + 3rem)); /* the shelf (29.3% of the width) fills most of the section */
  background:
    radial-gradient(circle at 79% 70%, rgba(215, 164, 93, .35), transparent 16%),
    radial-gradient(ellipse at 75% 15%, rgba(201, 79, 109, .3), transparent 45%),
    var(--berry);
}
/* books, ivy, candle and desk (1584 x 464): always the full width of the browser, never cropped */
.corner__shelf {
  position: absolute; left: 0; right: 0; bottom: 0;
  aspect-ratio: 1584 / 464;
  background: url(/assets/img/bookshelf.webp) center bottom / 100% 100% no-repeat;
  pointer-events: none; z-index: 1;       /* in front of the quotes, so the ivy grows over them */
}
/* a vine from the same ivy draped over the card's lower-right corner */
.corner__vine {
  position: absolute; z-index: 2; pointer-events: none;
  right: -3.2rem; bottom: -2.6rem;
  width: 13rem; height: auto;
  transform: rotate(-12deg);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
}
.corner__form {
  position: relative; z-index: 2;
  margin: 2rem 0 2rem var(--card-x);
  padding: 2.2rem 2.4rem 1.6rem;
  align-self: center; justify-self: start;
  width: min(100%, var(--card-w));
}
.corner__form::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #FBF1E6;
  filter: url(#torn);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transform: rotate(-2deg);
}
.corner__form .script {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  white-space: nowrap;
  transform: rotate(-4deg);
  transform-origin: left bottom;
  margin-bottom: .6em;
}
.corner__form p { margin: 0 0 1.4rem; }
.subscribe { display: flex; }
.subscribe input {
  flex: 1; min-width: 0;
  padding: .95rem 1.1rem; font: inherit; font-size: .95rem;
  border: 1px solid #d9c5b7; border-right: 0; border-radius: 6px 0 0 6px; background: #fff; color: var(--ink);
}
.subscribe input:focus { outline: 2px solid var(--rose); outline-offset: -2px; }
.subscribe .btn { border-radius: 0 6px 6px 0; box-shadow: none; padding: .95rem 1.6rem; font-size: .95rem; }
.form-msg { min-height: 1.5em; margin: .8rem 0 0 !important; font-size: .9rem; color: var(--forest); font-weight: 700; }
/* two notes stuck to the wall behind the ivy, filling the space between the card and the candle (candle at ~78%) */
.corner__quotes {
  position: absolute; z-index: 0;
  top: clamp(.75rem, 1.2vw, 1.5rem); left: calc(var(--card-x) + var(--card-w) + 1.5rem); right: 23.5%;
  display: flex; justify-content: space-evenly; align-items: flex-start; gap: clamp(1rem, 2vw, 2.5rem);
}
.corner__quote { flex: 0 1 24rem; min-width: 0; text-align: center; }
.corner__quote blockquote {
  position: relative; margin: 0;
  padding: clamp(.8rem, 1.1vw, 1.4rem) clamp(1rem, 1.4vw, 1.8rem) clamp(.7rem, .9vw, 1.2rem);
  transform: rotate(-4deg);
}
/* see-through pink brush stroke behind the quote, like the hero tagline */
.corner__quote blockquote::before {
  content: ""; position: absolute; inset: -4px -10px; z-index: -1;
  background: rgba(243, 198, 199, .55);
  border-radius: 12px 40px 16px 36px;
  filter: url(#brush);
}
.corner__quote p {
  margin: 0 0 .4rem; font-family: var(--font-script);
  font-size: clamp(1.1rem, 1.75vw, 2.2rem); line-height: 1.2; color: var(--ink);
}
.corner__quote svg { width: clamp(1.1rem, 1.2vw, 1.5rem); height: clamp(1.1rem, 1.2vw, 1.5rem); fill: none; stroke: var(--ink); stroke-width: 1.8; }
.corner__quote cite {
  display: block; margin-top: .2rem;
  font-family: var(--font-serif); font-style: italic; font-size: clamp(.8rem, .75vw, .95rem); color: var(--ink);
}
/* second note: deep forest green, tilted the other way */
.corner__quote--green blockquote { transform: rotate(3deg); }
.corner__quote--green blockquote::before { background: rgba(33, 76, 58, .82); border-radius: 36px 14px 40px 12px; }
.corner__quote--green p { color: var(--cream); }
.corner__quote--green svg { stroke: var(--gold); }
.corner__quote--green cite { color: var(--blush); }

/* ---------- inner pages ---------- */
.page-hero {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 79, 109, .35), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(33, 76, 58, .45), transparent 50%),
    var(--ink);
  color: var(--cream); text-align: center; padding: 3.5rem 0 3rem;
}
.page-hero .script { color: var(--blush); font-size: clamp(2.8rem, 7vw, 4.2rem); }
.page-hero p { max-width: 38rem; margin: 0 auto; color: rgba(255, 247, 242, .85); }
.page-hero--tight .script { margin-bottom: .2em; }
.section { padding: 3.5rem 0; }
.section--blush { background: var(--blush); }
.center { text-align: center; }
.lede { font-size: 1.1rem; max-width: 42rem; margin: 0 auto 1rem; }

.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card {
  background: #fff; border-radius: 10px; padding: 1.6rem;
  box-shadow: 0 6px 20px rgba(36, 21, 29, .08);
  border-top: 4px solid var(--rose);
}
.card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; margin: 0 0 .4rem; }
.card p { margin: 0; }
.host { text-align: center; border-top-color: var(--forest); }
.host__photo {
  width: 8rem; height: 8rem; margin: 0 auto 1rem; border-radius: 50%;
  background: linear-gradient(150deg, var(--blush), var(--rose));
  display: grid; place-items: center; overflow: hidden;
  border: 4px solid var(--cream); box-shadow: 0 0 0 2px var(--rose);
}
.host__photo svg { width: 3rem; height: 3rem; fill: rgba(255, 255, 255, .8); }
.host__photo a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.host__photo img { width: 100%; height: 100%; object-fit: cover; }
.host .eyebrow { color: var(--rose); }
.cards--hosts { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
/* Meet the Hosts: Book Cream card with a books-and-ivy band across the top (art from the hosts'
   "Get to Know Me" sheets) that ends just below the headshot */
.card.host {
  position: relative; isolation: isolate; overflow: hidden; padding: 2rem 2rem 1.8rem;
  background: var(--cream); border-top: 0; border-radius: 10px; box-shadow: 0 10px 26px rgba(36, 21, 29, .14);
}
.card.host::before, .card.host::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13.5rem; z-index: -1; }
.card.host::before {
  background:
    url("/assets/img/host-band-left.webp") left top / auto 100% no-repeat,
    url("/assets/img/host-band-right.webp") right top / auto 100% no-repeat,
    var(--ink);
  border-bottom: 3px solid var(--rose);
}
.card.host .host__photo { width: 10.5rem; height: 10.5rem; margin-bottom: 1.5rem; }
.card.host::after { background: url("/assets/img/ivy-vine.webp") center -1.6rem / 17rem auto no-repeat; opacity: .9; }
.host h3 { font-size: 1.6rem; }
.host__vibe { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.45; margin: .3rem auto 1.2rem !important; max-width: 26rem; }
.host__facts { margin: 0 0 1.2rem; text-align: left; border-top: 1px solid rgba(122, 24, 61, .25); }
.host__facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid rgba(122, 24, 61, .25); }
.host__facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--berry); padding-top: .2rem; }
.host__facts dd { margin: 0; }
.host__take { font-style: italic; }
.host__take span { display: block; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); margin-bottom: .3rem; }
@media (max-width: 760px) {
  .cards--hosts { grid-template-columns: 1fr; }
  .host { padding: 1.8rem 1.3rem 1.6rem; }
  .host__facts div { grid-template-columns: 1fr; gap: .1rem; }
}

.ep-card {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: center;
  background: var(--cream); border-radius: 10px; padding: 1.2rem; margin-bottom: 1.2rem;
  box-shadow: 0 6px 20px rgba(36, 21, 29, .08);
  scroll-margin-top: 6rem;
}
.ep-card .thumb { width: 12rem; border-radius: 6px; }
.ep-card h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; margin: 0 0 .4rem; line-height: 1.25; }
.ep-card p { margin: 0 0 .8rem; }
.ep-card .eyebrow { color: var(--rose); }
.ep-card:target { outline: 3px solid var(--raspberry); }
.soon-pill {
  display: inline-block; padding: .3rem .9rem; border-radius: 999px;
  background: var(--blush); color: var(--berry); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

.genre-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.genre-cards .genre-card { flex: 0 1 calc((100% - 3rem) / 3); }
.genre-cards .genre-card { background: var(--blush-soft); }
.genre-cards .genre-card__more { color: var(--berry); }
.genre-card {
  display: grid; grid-template-columns: 6rem 1fr; gap: 1.2rem; align-items: center;
  background: #fff; border-radius: 10px; padding: 1.2rem 1.4rem;
  box-shadow: 0 6px 20px rgba(36, 21, 29, .08); scroll-margin-top: 6rem;
  color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s;
}
a.genre-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(36, 21, 29, .14); }
.genre-card__more { display: inline-block; margin-top: .5rem; color: var(--rose); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.genre-card img { width: 6rem; height: 6rem; }
.genre-card h2 { font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; margin: 0 0 .3rem; }
.genre-card p { margin: 0; }
.genre-card:target { outline: 3px solid var(--raspberry); }

.soon-box {
  max-width: 40rem; margin: 0 auto; text-align: center;
  background: #fff; border-radius: 12px; padding: 2.5rem 2rem;
  box-shadow: 0 6px 20px rgba(36, 21, 29, .08);
}
.soon-box img { width: 6rem; margin: 0 auto 1rem; }

.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: start; }
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .35rem; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: .85rem 1rem; font: inherit; border: 1px solid #d9c5b7; border-radius: 6px; background: #fff; color: var(--ink);
}
.form-field select {
  appearance: none; cursor: pointer; padding-right: 2.6rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A183D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1rem;
}
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--rose); outline-offset: -1px; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg.is-error { color: var(--berry); }
.cf-turnstile { margin-bottom: 1rem; }
.btn:disabled { opacity: .7; cursor: wait; transform: none; }
.contact-aside .socials { gap: 1.2rem; margin-top: 1rem; }
.contact-aside .socials a { color: var(--berry); }
.contact-aside .socials svg { width: 1.8rem; height: 1.8rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255, 247, 242, .75); padding: 2.8rem 0 2rem; font-size: .9rem; }
.site-footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; }
.site-footer img { width: 10rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
.site-footer ul a { color: var(--cream); text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.site-footer ul a:hover { color: var(--raspberry); }
.site-footer p { margin: 0; }
.site-footer .disclaimer {
  max-width: 46rem; margin-top: .6rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(215, 164, 93, .2);
  font-size: .74rem; line-height: 1.55; color: rgba(255, 247, 242, .55);
}
.site-footer .disclaimer p + p { margin-top: .6rem; }
.site-footer .disclaimer strong { color: rgba(255, 247, 242, .8); letter-spacing: .04em; }

/* ---------- responsive ---------- */
/* ---------- quotes page: notes pinned to a wall ---------- */
.quotes__next { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem; font-size: 1.05rem; }
.gquote-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.quotes .script { font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--berry); margin-bottom: .3rem; }
.quotes .lede { margin-bottom: 2.8rem; }
/* masonry: notes flow down three columns (two, then one on smaller screens) */
.qwall { columns: 3 18rem; column-gap: 2.2rem; }
.qnote {
  position: relative; break-inside: avoid; display: inline-block; width: 100%;
  margin: 0 0 2.4rem; padding: 1.5rem 1.7rem 1.2rem;
  text-align: center; color: var(--ink);
  transform: rotate(-1.6deg);
}
.qnote:nth-child(3n+2) { transform: rotate(1.4deg); }
.qnote:nth-child(3n) { transform: rotate(-.6deg); }
.qnote::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 12px 40px 16px 36px;
  filter: url(#brush);
}
.qnote--blush::before { background: rgba(243, 198, 199, .9); }
.qnote--rose::before  { background: rgba(201, 79, 109, .88); }
.qnote--green::before { background: rgba(33, 76, 58, .9); border-radius: 36px 14px 40px 12px; }
.qnote--paper::before { background: #FBF1E6; filter: url(#torn); border-radius: 2px; box-shadow: 0 8px 22px rgba(36, 21, 29, .18); }
.qnote--rose, .qnote--green { color: var(--cream); }
.qnote blockquote { margin: 0; }
.qnote blockquote p { margin: 0; font-family: var(--font-script); font-size: 1.75rem; line-height: 1.2; }
.qnote figcaption { margin-top: .6rem; font-size: .95rem; }
.qnote figcaption .heart { display: block; margin: 0 auto .35rem; width: 1.1rem; height: 1.1rem; vertical-align: 0; stroke: currentColor; }
.qnote--green .heart { stroke: var(--gold); }
.qnote__who { display: block; font-family: var(--font-serif); font-weight: 600; }
.qnote cite { display: block; font-family: var(--font-serif); font-style: italic; }
.qnote__tags { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.qnote__tags li {
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid currentColor; opacity: .75;
}
/* on the berry wall the notes stand out more with a soft shadow */
/* Quotes and Best Book Lines pages: Soft Blush wall; the blush notes switch to light blush so they still stand out */
.quotes--page { background: var(--blush); }
.quotes--page .qnote--blush::before { background: var(--blush-soft); }

/* ---------- genre landing pages (colors come from tools/genres.py as --g-* variables) ---------- */
.ghero {
  position: relative; overflow: hidden; text-align: center; color: var(--cream);
  padding: 2.2rem 0 3.4rem;
  background:
    var(--motif),
    radial-gradient(ellipse at 50% 38%, var(--g-glow), transparent 62%),
    linear-gradient(160deg, var(--g-dark), var(--g-dark2));
}
.ghero .wrap { position: relative; }
.ghero__back {
  position: absolute; left: var(--gutter); top: 0;
  color: rgba(255, 247, 242, .8); text-decoration: none; font-size: .85rem; font-weight: 700; letter-spacing: .06em;
}
.ghero__back:hover { color: var(--cream); }
.ghero__icon {
  width: clamp(7rem, 14vw, 10rem); height: auto; margin: 1.2rem auto .4rem;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
  animation: ghero-float 6s ease-in-out infinite;
}
@keyframes ghero-float { 50% { transform: translateY(-8px) rotate(-3deg); } }
.ghero .eyebrow { color: var(--g-accent); margin-bottom: 0; }
.ghero h1 { color: var(--g-accent); font-size: clamp(3.2rem, 8vw, 5.4rem); margin: 0; line-height: 1.1; }
.ghero__blurb { max-width: 34rem; margin: .4rem auto 0; font-size: 1.15rem; color: rgba(255, 247, 242, .9); }
/* thrillers: a strip of crime-scene tape */
.ghero__tape {
  position: absolute; left: -10%; right: -10%; bottom: 1.4rem;
  transform: rotate(-3deg); background: var(--gold); color: var(--ink);
  padding: .45rem 0; white-space: nowrap; overflow: hidden; box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
  font-weight: 700; letter-spacing: .25em; font-size: .85rem;
}
.ghero--tape { padding-bottom: 5.2rem; }
/* horror: blood dripping from the top edge */
.ghero__drips { position: absolute; left: 0; top: 0; width: 100%; height: 5rem; fill: var(--berry); }
.ghero--drips { padding-top: 4.8rem; }
/* every genre / host hero: a silk bookmark ribbon hanging from the top edge, in the theme's colors */
.ghero__ribbon {
  position: absolute; top: 0; right: clamp(1.5rem, 9vw, 9rem); width: clamp(1.6rem, 2.6vw, 2.4rem); height: auto;
  fill: var(--g-ribbon, var(--berry)); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
  transform-origin: top center; animation: ribbon-sway 7s ease-in-out infinite;
}
.ghero__ribbon-shine { fill: rgba(255, 247, 242, .14); }
.ghero__tassel { fill: var(--g-tassel, var(--gold)); }
.ghero--drips .ghero__ribbon { z-index: 1; }
@keyframes ribbon-sway { 50% { transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .ghero__ribbon { animation: none; } }
.ghero--drips .ghero__back { top: -2rem; }

.gpage .section .script { color: var(--g-ink); font-size: clamp(2.2rem, 4.5vw, 3rem); margin-bottom: .8rem; }
.gsoft { background: var(--g-soft); }
.gintro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }
.gintro p { font-size: 1.1rem; margin: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem; }
.chips li {
  padding: .45rem 1rem; border-radius: 999px;
  background: var(--g-soft); color: var(--g-ink); border: 1px solid color-mix(in srgb, var(--g-ink) 30%, transparent);
  font-size: .9rem; font-weight: 700;
}
.gpage .ep-card { max-width: 52rem; margin-left: auto; margin-right: auto; background: #fff; }
.gpage .ep-card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; margin: 0 0 .4rem; line-height: 1.25; }
.gpage .ep-card a.soon-pill { text-decoration: none; }
.gpage .qwall { margin-bottom: 1rem; }
.gmore { margin-top: 1rem; --per-row: 9; }

/* ---------- book recs: monthly Top 10 lists, each in its genre's colors (--g-* from tools/genres.py) ---------- */
.btn--ghost { background: transparent; color: var(--rose); box-shadow: inset 0 0 0 2px var(--rose); }
.btn--ghost:hover { color: #fff; }
.recs-month { padding: 3rem 0; }
.recs-month .eyebrow { color: var(--rose); margin-bottom: 0; }
.recs-month .script { color: var(--berry); font-size: clamp(3rem, 7vw, 4.4rem); margin: 0 0 .4rem; }
.recs-jump { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.recs-jump a {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem 1rem .3rem .35rem;
  background: #fff; border-radius: 999px; box-shadow: 0 3px 10px rgba(36, 21, 29, .08);
  color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.recs-jump a:hover { color: var(--berry); box-shadow: 0 5px 14px rgba(36, 21, 29, .15); }
.recs-jump img { width: 2.2rem; height: 2.2rem; }
.recs-wall { background: var(--blush); }
.recs-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 2.2rem 0 0; }
.recs-wall > .wrap > .recs-links:first-child { margin: 0 0 2.2rem; }

.recs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; align-items: start; }
.recs-grid--one { grid-template-columns: minmax(0, 46rem); justify-content: center; margin-top: 1.6rem; }
.recs-grid--compact { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.8rem; }
.recs {
  background: var(--g-soft); border-radius: 14px; overflow: hidden; scroll-margin-top: 6rem;
  box-shadow: 0 10px 30px rgba(36, 21, 29, .12);
}
.recs__head {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.6rem;
  background:
    var(--motif),
    radial-gradient(ellipse at 15% 50%, var(--g-glow), transparent 60%),
    linear-gradient(135deg, var(--g-dark), var(--g-dark2));
}
.recs__head img { width: 4rem; height: 4rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.recs__head .eyebrow { color: var(--g-accent); margin: 0; opacity: .85; }
.recs .recs__head .script { color: var(--g-accent); font-size: 2.5rem; line-height: 1; margin: 0; } /* beats .gpage .section .script on genre pages */
.recs__body { padding: 1.5rem 1.6rem 1.6rem; }

/* painted book covers: spine shadow and two gold bands, colored from the genre theme */
.bk {
  --bk: var(--g-dark2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.8rem; aspect-ratio: 2 / 3; border-radius: 2px 4px 4px 2px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0 9%, rgba(255, 255, 255, .15) 9% 12%, transparent 12%),
    linear-gradient(transparent 16%, rgba(215, 164, 93, .9) 16% 19%, transparent 19% 80%, rgba(215, 164, 93, .9) 80% 83%, transparent 83%),
    var(--bk);
  box-shadow: 2px 3px 6px rgba(36, 21, 29, .3);
}
.bk--1 { --bk: var(--g-ink); }
.bk--2 { --bk: #9C6B3A; }
.bk--3 { --bk: var(--g-dark); }
.bk--4 { --bk: var(--forest); }
.bk--photo { display: block; height: auto; object-fit: cover; background: none; }   /* real cover image */
.bk--big { width: 6.5rem; }
.bk--big span {
  padding: 0 .45rem 0 .85rem; font-family: var(--font-serif); font-weight: 600; font-size: .78rem; line-height: 1.2;
  color: var(--cream); text-align: center; overflow: hidden; max-height: 55%;
}

.recs__pick {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.2rem; align-items: center;
  background: #fff; border-radius: 10px; padding: 1.1rem 1.2rem; margin-bottom: 1rem;
  box-shadow: 0 4px 14px rgba(36, 21, 29, .08);
}
.recs__badge {
  display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .4rem; padding: .2rem .7rem;
  border-radius: 999px; background: var(--g-ink); color: var(--cream);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.recs__badge svg { width: .8rem; height: .8rem; fill: var(--gold); }
.recs__pick h4 { font-family: var(--font-serif); font-weight: 600; font-size: 1.35rem; line-height: 1.2; margin: 0; }
.recs__note { margin: .5rem 0 0; font-size: .95rem; font-style: italic; }

.recs__top { list-style: none; margin: 0; padding: 0; }
.recs__top li {
  display: grid; grid-template-columns: 2rem 2.8rem 1fr; gap: .9rem; align-items: center;
  padding: .75rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--g-ink) 25%, transparent);
}
.recs__num {
  text-align: center;
  font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.35rem; color: var(--g-ink);
}
.recs__title { display: block; font-family: var(--font-serif); font-weight: 600; line-height: 1.25; }
.recs__author { display: block; font-size: .85rem; opacity: .75; }
.recs__top li:last-child { border-bottom: 0; }
/* "Picked by" with the host's headshot */
.picked { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: .78rem; color: var(--g-ink); }
.picked img {
  width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px color-mix(in srgb, var(--g-ink) 45%, transparent);
}
.picked strong { font-weight: 700; }
.recs__pick .picked { margin-top: .8rem; font-size: .85rem; }
.recs__pick .picked img { width: 2.2rem; height: 2.2rem; }
.recs__more {
  display: inline-block; margin-top: 1.1rem; color: var(--g-ink); text-decoration: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.recs__more:hover { text-decoration: underline; color: var(--g-ink); }

/* compact version for the archive */
.recs--compact .recs__head { padding: .8rem 1.2rem; }
.recs--compact .recs__head img { width: 3rem; height: 3rem; }
.recs.recs--compact .recs__head .script { font-size: 2rem; }
.recs--compact .recs__body { padding: 1rem 1.2rem 1.2rem; }
.recs--compact .recs__top li { grid-template-columns: 1.6rem 2rem 1fr; gap: .7rem; padding: .55rem 0; }
.recs--compact .bk { width: 2rem; }
.recs--compact .recs__num { font-size: 1.1rem; }
.recs--compact .recs__title { font-size: .95rem; }

.recs-archive { margin: 0 0 1.6rem; }
.recs-archive summary {
  display: flex; align-items: center; justify-content: center; gap: 1rem; cursor: pointer; list-style: none;
  padding: .7rem 1.5rem; border-radius: 12px; color: var(--cream);
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 79, 109, .4), transparent 70%), var(--ink);
}
.recs-archive summary::-webkit-details-marker { display: none; }
.recs-archive summary .script { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--blush); }
.recs-archive__count { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.recs-archive summary::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--blush); transition: transform .2s; }
.recs-archive[open] summary::after { transform: rotate(45deg); }
.recs-archive[open] summary { margin-bottom: 1.8rem; }

/* ---------- back-to-top arrow (every page) ---------- */
.to-top {
  position: fixed; right: clamp(.9rem, 2.5vw, 2rem); bottom: clamp(.9rem, 2.5vw, 2rem); z-index: 50;
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--rose); color: #fff; box-shadow: 0 8px 20px rgba(36, 21, 29, .3);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--raspberry); color: #fff; transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.to-top svg { width: 1.4rem; height: 1.4rem; }

/* ---------- merch (preview products, drawn as SVG in tools/merch.py) ---------- */
.merch-intro { margin-bottom: 2.6rem; }
.merch-intro:last-child { margin-bottom: 0; }
.merch-intro__berry { color: var(--berry); font-weight: 700; }
.merch-intro .eyebrow { color: var(--rose); margin-bottom: 0; }
.merch-intro .script { color: var(--berry); font-size: clamp(2.6rem, 5vw, 3.6rem); margin: 0 0 .4rem; }
.merch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.merch-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 26px rgba(36, 21, 29, .09); transition: transform .25s, box-shadow .25s;
}
.merch-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(36, 21, 29, .15); }
.merch-card__art { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.merch-card__art--blush { background: radial-gradient(circle at 50% 40%, #FFF3F1, #F6D6D6); }
.merch-card__art--sage  { background: radial-gradient(circle at 50% 40%, #F6F5EC, #DCE3D4); }
.merch-card__art--cream { background: radial-gradient(circle at 50% 40%, #FFFBF5, #F1E3D3); }
.merch-art { width: 88%; height: 88%; transition: transform .35s; }
.merch-card:hover .merch-art { transform: scale(1.04) rotate(-1.5deg); }
.merch-card__badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 1; padding: .3rem .8rem; border-radius: 999px;
  background: var(--berry); color: var(--cream); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.merch-card__body { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.5rem 1.5rem; }
.merch-card__body .eyebrow { color: var(--rose); margin: 0 0 .2rem; }
.merch-card__body h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin: 0 0 .4rem; }
.merch-card__body p { margin: 0 0 1rem; font-size: .95rem; }
.merch-card__buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.merch-card__price { font-family: var(--font-serif); font-weight: 600; font-size: 1.4rem; color: var(--berry); }
.merch-cta {
  padding: 3.5rem 0; color: var(--cream);
  background: radial-gradient(ellipse at 50% 0%, rgba(224, 82, 125, .35), transparent 60%), var(--berry);
}
.merch-cta .script { color: var(--blush); font-size: clamp(2.4rem, 5vw, 3.2rem); margin: 0 0 .3rem; }
.merch-cta p { margin: 0 0 1.2rem; color: rgba(255, 247, 242, .9); }


@media (max-width: 1080px) {
  .nav ul { gap: 1.1rem; }
  .latest .wrap { gap: 2.5rem 4rem; }
  .genres__grid { --per-row: 4; }
}
/* small laptops / sideways tablets: tighten the menu so all items stay on one line until the phone menu takes over */
@media (min-width: 901px) and (max-width: 1060px) {
  .nav ul { gap: .85rem; }
  .nav a, .nav__parent { font-size: .74rem; letter-spacing: .08em; }
  .site-header .socials { gap: .7rem; }
  .site-header .socials svg { width: 1.1rem; height: 1.1rem; }
}
/* narrower screens: card and quote stacked above the books */
@media (max-width: 1150px) {
  .corner { grid-template-columns: 1fr; min-height: 0; }
  .corner__form { justify-self: center; margin: 2.5rem var(--gutter) 1rem; width: min(100% - 2 * var(--gutter), 34rem); }
  .corner__quotes { position: relative; inset: auto; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem; padding: 1.5rem var(--gutter) calc(100vw * .28); }
  .corner__quote { flex-basis: 20rem; }
  .corner__quote blockquote { padding: 1.3rem 1.6rem 1.1rem; }
  .corner__quote p { font-size: 1.55rem; }
  .corner__quote svg { width: 1.3rem; height: 1.3rem; }
  .corner__quote cite { font-size: .9rem; }
  .corner__quote blockquote { transform: rotate(-3deg); }
  .corner__quote--green blockquote { transform: rotate(2deg); }
}
@media (max-width: 900px) {
  /* Tablets and phones: logo and text on top, full photo underneath */
  .hero { container-type: normal; }
  .hero .wrap { padding: 0 var(--gutter); }
  .hero__content { width: auto; max-width: 27rem; margin: 0 auto; padding: 2rem 0 2.5rem; }
  .hero__logo { margin-bottom: 1.4rem; }
  .hero__logo img { width: 100%; }
  .brush-tag { font-size: clamp(1.6rem, 5.5vw, 2.15rem); margin-bottom: 1.5rem; }
  .pillars { font-size: .78rem; margin-bottom: 1.8rem; }
  .hero .only-wide { display: none; }
  .hero .only-narrow { display: block; }
  .hero br.only-narrow { display: inline; }
  .hero .btn--lg { font-size: 1.15rem; position: static; }
  .nav-toggle { display: block; }
  .site-header .socials { display: none; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink); border-bottom: 1px solid rgba(215, 164, 93, .25);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: .5rem var(--gutter) 1rem; }
  .nav a { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(255, 247, 242, .08); }
  .nav a[aria-current="page"] { border-bottom-color: rgba(255, 247, 242, .08); }
  /* phone menu: the dropdown's links sit indented under its label */
  .nav__parent { width: 100%; padding: .8rem 0; cursor: default; border-bottom: 1px solid rgba(255, 247, 242, .08); }
  .nav__drop.is-current > .nav__parent { border-bottom-color: rgba(255, 247, 242, .08); }
  .nav__chev { display: none; }
  .nav .nav__sub { display: flex; position: static; transform: none; min-width: 0; padding: 0 0 0 1.2rem; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .nav .nav__sub a { padding: .7rem 0; border-bottom: 1px solid rgba(255, 247, 242, .08); }
  .nav .nav__sub a:hover { background: none; }
  .features ul { grid-template-columns: repeat(3, 1fr); gap: 1.5rem 0; }
  .features li:nth-child(4) { border-left: 0; }
  .corner__vine { right: -1rem; width: 10rem; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .latest .wrap { grid-template-columns: 1fr; }
  .ep-card { grid-template-columns: 1fr; }
  .ep-card .thumb { width: 100%; aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .features ul { grid-template-columns: repeat(2, 1fr); }
  .features li:nth-child(odd) { border-left: 0; }
  .features li:nth-child(4) { border-left: 1px solid rgba(201, 79, 109, .3); }
  .features li:last-child { grid-column: 1 / -1; }
  .genres__grid { --per-row: 2; }
  .subscribe { flex-direction: column; gap: .6rem; }
  .subscribe input { border-right: 1px solid #d9c5b7; border-radius: 6px; }
  .subscribe .btn { border-radius: 999px; justify-content: center; }
  .genre-card { grid-template-columns: 4.5rem 1fr; }
  .genre-card img { width: 4.5rem; height: 4.5rem; }
  .corner__form { padding: 2rem 1.5rem 2.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .genres__grid img, .controls .play, .to-top { transition: none; }
}

@media (max-width: 1000px) {
  .genre-cards .genre-card { flex-basis: calc((100% - 1.5rem) / 2); }
  .gintro { grid-template-columns: 1fr; gap: 2rem; }
  .gmore { --per-row: 5; }
}
@media (max-width: 640px) {
  .genre-cards .genre-card { flex-basis: 100%; }
  .gmore { --per-row: 3; }
  .ghero__back { position: static; display: inline-block; }
  .ghero--drips .ghero__back { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .ghero__icon { animation: none; }
  .genre-card { transition: none; }
}

@media (max-width: 1000px) {
  .recs-grid { grid-template-columns: minmax(0, 1fr); }
  .recs-grid--compact { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
}
@media (max-width: 560px) {
  .recs .recs__head .script { font-size: 2.1rem; }
  .recs__body { padding: 1.2rem 1.1rem 1.3rem; }
  .recs__pick { grid-template-columns: 5rem 1fr; gap: .9rem; padding: 1rem; }
  .bk--big { width: 5rem; }
  .bk--big span { font-size: .65rem; }
}

@media (max-width: 1000px) { .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (max-width: 600px) { .merch-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .merch-card, .merch-art { transition: none; } }

/* ---------- YouTube (home) ---------- */
.youtube { padding: 4rem 0; }
.youtube h2 { font-size: clamp(2.4rem, 4vw, 3.2rem); margin: 0 0 1.5rem; }
.yt-empty { max-width: 34rem; margin: 0 auto 1.6rem; font-size: 1.1rem; }
.yt-grid { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); text-align: left; }
.yt-card {
  display: flex; flex-direction: column; height: 100%; background: var(--cream); border-radius: 10px; overflow: hidden;
  color: var(--ink); text-decoration: none; box-shadow: 0 6px 20px rgba(36, 21, 29, .08); border-top: 4px solid var(--rose);
  transition: transform .2s, box-shadow .2s;
}
.yt-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(36, 21, 29, .14); }
.yt-card__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
/* YouTube thumbnails are 4:3 with the video letterboxed inside; scale up so the black bars fall outside the frame */
.yt-card__thumb img { position: absolute; left: 0; top: 50%; width: 100%; height: 133.4%; object-fit: cover; transform: translateY(-50%); }
.yt-card__play {
  position: absolute; inset: 0; margin: auto; width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--rose); color: var(--cream); box-shadow: 0 6px 16px rgba(36, 21, 29, .35);
  transition: background .2s;
}
.yt-card:hover .yt-card__play { background: var(--raspberry); }
.yt-card__play svg { width: 1.4rem; height: 1.4rem; margin-left: .2rem; }
.yt-card__body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.yt-card__title { font-family: var(--font-serif); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.yt-card__date { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); }

/* ---------- host Read More pages (/about/<name>/): the host's sheet on a genre-style header ---------- */
.card.host .host__more { margin-top: 1.4rem; }
.hsheet { padding-bottom: 4rem; }
.hsheet .ghero__blurb { font-family: var(--font-serif); font-style: italic; }
.hsheet__frame { margin: 2.2rem auto 0; max-width: 54rem; }
.hsheet__frame a { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 247, 242, .12); transition: transform .25s; }
.hsheet__frame a:hover { transform: translateY(-4px); }
.hsheet__frame img { width: 100%; height: auto; }
.hsheet__frame figcaption { margin-top: .9rem; font-size: .85rem; color: rgba(255, 247, 242, .75); }
.hpage .section .script { color: var(--berry); }
.crew { list-style: none; margin: 1rem 0 2rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; }
.crew a { display: flex; flex-direction: column; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; }
.crew img { width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; border: 4px solid var(--cream); box-shadow: 0 0 0 2px var(--rose); transition: transform .2s; }
.crew a:hover { color: var(--rose); }
.crew a:hover img { transform: translateY(-4px); }
/* full-size sheet viewer (opened by main.js) */
html.is-zoomed { overflow: hidden; }
.zoom {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 3.5rem 1rem 2rem;
  border: 0; background: transparent; overflow: auto; cursor: zoom-out;
}
.zoom::backdrop { background: rgba(36, 21, 29, .92); }
.zoom img { display: block; width: min(100%, 1440px); height: auto; margin: 0 auto; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.zoom img.fit { width: auto; max-width: 100%; max-height: calc(100vh - 5.5rem); }
.zoom__close {
  position: fixed; top: .8rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--rose); color: var(--cream); font-size: 1.8rem; line-height: 1; box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.zoom__close:hover { background: var(--raspberry); }

/* ---------- coded "Get to Know Me" sheet (Read More pages; data in tools/sheets.py) ---------- */
.sheetx { --sx-hand: "Caveat", "Segoe Print", cursive; --sx-brush: "Kaushan Script", "Great Vibes", cursive; margin-top: 1.5rem; }
.sheetx__board {
  max-width: 1040px; margin: 0 auto; padding: 1.1rem; border-radius: 10px; position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 38px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 84px),
    linear-gradient(160deg, #5a2a22, #3a1814 60%, #4a1c20);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  text-align: left; color: #24151D;
}
.sx-title { display: grid; grid-template-columns: 1fr minmax(0, 2.2fr) 1fr; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.sx-paper {
  position: relative; text-align: center; padding: 1.3rem 1rem 1.1rem; color: #24151D; isolation: isolate;
}
.sx-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #F6E9D3;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35); filter: url(#torn);
}
.sx-paper h2 { margin: 0; font-family: var(--sx-brush); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.9rem); line-height: 1; color: #7A183D; }
.sx-edition { margin: .15rem 0 .2rem; font-family: var(--font-serif); font-weight: 600; font-size: clamp(1rem, 2.6vw, 1.7rem); letter-spacing: .12em; text-transform: uppercase; }
.sx-tag { margin: 0; font-family: var(--sx-hand); font-size: clamp(.95rem, 2vw, 1.25rem); font-style: italic; }
.sx-deco { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.sx-deco > img { width: 4.6rem; height: 4.6rem; }
.sx-mug, .sx-candle { display: flex; align-items: center; gap: .3rem; background: #F6E9D3; padding: .3rem .5rem; border-radius: 8px; transform: rotate(-3deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.sx-mug img, .sx-candle img { width: 2.2rem; height: 2.2rem; }
.sx-mug i, .sx-candle i { font-family: var(--sx-hand); font-style: normal; font-size: .95rem; line-height: 1.05; }
.sx-spines { display: flex; flex-direction: column; gap: .2rem; width: 90%; }
.sx-spines span { font-family: var(--sx-brush); font-size: .95rem; color: #E8C27E; padding: .15rem .6rem; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.sx-spines span:nth-child(1) { background: #1f3a4d; }
.sx-spines span:nth-child(2) { background: #214C3A; margin-left: .6rem; }
.sx-spines span:nth-child(3) { background: #5c1f55; }
.sx-grid { display: grid; grid-template-columns: 1.1fr .9fr 1.1fr; gap: .9rem; align-items: start; }
.sx-col { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.sx-note {
  position: relative; padding: .8rem .95rem .9rem; border-radius: 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
  font-size: .98rem; line-height: 1.3; overflow: hidden;
}
.sx-note--pink { background: #F6A9C4; }
.sx-note--sage { background: #D8DEBD; }
.sx-note--cream { background: #F6E5CB; }
.sx-note--chalk { background: #1F4636; color: #F4EFE2; border: 3px solid #8a6a43; }
.sx-note h3 { margin: 0 0 .45rem; font-family: var(--sx-hand); font-weight: 700; font-size: 1.85rem; line-height: 1.05; color: #24151D; }
.sx-note--chalk h3 { color: #F6E9D3; }
.sx-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.sx-checks li { display: flex; align-items: flex-start; gap: .5rem; }
.sx-box { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; border: 2px solid #24151D; border-radius: 2px; position: relative; background: rgba(255, 255, 255, .35); }
.is-on .sx-box::after {
  content: ""; position: absolute; left: .18rem; top: -.12rem; width: .35rem; height: .7rem;
  border: solid #24151D; border-width: 0 .17rem .17rem 0; transform: rotate(40deg);
}
.sx-fields { margin: 0 0 .4rem; display: grid; gap: .35rem; }
.sx-fields div { display: block; }
.sx-fields dt { display: inline; margin-right: .35rem; }
.sx-fields dd { display: inline; margin: 0; font-family: var(--sx-hand); font-size: 1.3rem; font-weight: 500; line-height: 1.15; border-bottom: 1px dotted rgba(36, 21, 29, .45); }
.sx-note--chalk .sx-fields dd { border-color: rgba(244, 239, 226, .5); }
.sx-hand { margin: .4rem 0 0; font-family: var(--sx-hand); font-size: 1.3rem; line-height: 1.15; }
.sx-hand b { font-family: var(--font-body, Lato, sans-serif); font-size: .95rem; font-weight: 400; }
.sx-other { margin: .5rem 0 0; font-family: var(--sx-hand); font-size: 1.3rem; line-height: 1.1; }
.sx-other span { font-family: var(--font-body, Lato, sans-serif); font-size: .95rem; }
.sx-bucket em { font-family: var(--sx-hand); font-style: normal; font-size: 1.2rem; line-height: 1.1; }
.sx-bucket li { align-items: flex-start; }
.sx-aside { margin: .5rem 0 0; max-width: 8rem; margin-left: auto; font-family: var(--sx-hand); font-size: 1.15rem; line-height: 1.05; text-align: center; transform: rotate(-4deg); }
.sx-art { position: absolute; right: .5rem; top: .5rem; width: 3.6rem; height: 3.6rem; opacity: .9; pointer-events: none; }
.sx-about, .sx-note:has(.sx-art) { padding-right: 4.6rem; }
.sx-photo { margin: 0; padding: .6rem .6rem 1.8rem; background: #FBF4E6; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); transform: rotate(-1deg); position: relative; }
.sx-photo::before { content: ""; position: absolute; left: 50%; top: -.7rem; width: 6rem; height: 1.4rem; transform: translateX(-50%); background: rgba(246, 169, 196, .85); }
.sx-photo img { display: block; width: 100%; height: auto; }
.sx-rating { margin: .4rem 0 0; }
.sx-stars { color: transparent; -webkit-text-stroke: 1.5px #E8C27E; font-size: 1.5rem; letter-spacing: .1em; }
.sx-stars .on { color: #E8C27E; }
.sx-books { list-style: none; counter-reset: bk; margin: 0; padding: 0; display: grid; gap: .45rem; font-family: var(--sx-hand); font-size: 1.2rem; line-height: 1.1; }
.sx-books li { counter-increment: bk; display: flex; align-items: center; gap: .6rem; }
.sx-books li::before { content: counter(bk); flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: #3A0A1E; color: #F6E9D3; font-family: var(--font-body, Lato, sans-serif); font-size: .85rem; }
.sx-books strong { font-weight: 700; }
.sx-hot { font-size: 1.45rem; }
.sx-sticker { margin: .9rem .3rem .2rem; padding: .5rem .8rem; background: #F6E9D3; text-align: center; font-family: var(--sx-hand); font-size: 1.3rem; line-height: 1.1; transform: rotate(-3deg); box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
@media (max-width: 860px) {
  .sheetx__board { padding: .7rem; }
  .sx-title { grid-template-columns: 1fr; }
  .sx-deco { display: none; }
  .sx-grid { display: flex; flex-direction: column; }
  .sx-col { display: contents; }
  .sx-note, .sx-photo { order: var(--o); }
  .sx-photo { max-width: 22rem; width: 100%; align-self: center; }
}
@media (max-width: 360px) {
  .pillars { font-size: .7rem; letter-spacing: .08em; }   /* keep two words per line on small phones */
}