/* ---------- SHOW NOTES ---------- */
.sn-wrap { max-width: 1180px; margin: 0 auto; padding: 34px 40px 0; }
.sn-back { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(15,15,15,0.6); text-decoration: none; }
.sn-back:hover { color: var(--violet); }

.sn-grid { max-width: 1180px; margin: 26px auto 0; padding: 0 40px; display: grid; }

/* --- shared block styling --- */
.ga-title .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--violet); }
.ga-title h1 { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: clamp(42px, 6.4vw, 96px); line-height: 0.92; margin: 14px 0 0; }
.ga-title .sub { font-family: var(--font-hand), cursive; font-size: clamp(24px, 3vw, 38px); color: var(--violet); margin-top: 16px; max-width: 24ch; }

.guest-card .polaroid { --r: -3deg; width: 100%; max-width: 300px; }
.guest-card .role { margin-top: 26px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); }
.guest-card h3 { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: clamp(26px,2.6vw,34px); line-height: 0.98; margin: 8px 0 4px; }
.guest-card .cred { font-size: 14px; font-weight: 600; color: rgba(15,15,15,0.65); }
.guest-card .bio { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(15,15,15,0.78); }

.meta-block { margin-top: 26px; }
.meta-block .facts { display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(15,15,15,0.55); }
.meta-block .facts b { display: block; font-family: var(--font-display), sans-serif; font-size: 22px; letter-spacing: 0; color: var(--ink); margin-top: 4px; }

/* player */
.player .track { cursor: pointer; }
.player-note { margin-top: 12px; font-family: var(--font-hand), cursive; font-size: 19px; color: var(--violet); }
.sn-upcoming-note { margin-top: 26px; font-family: var(--font-hand), cursive; font-size: 26px; color: var(--violet); }
/* Stacked players for a double episode. A single player keeps its own
   22px top margin, so nothing changes for an ordinary episode. */
.players { display: grid; }
.players .player + .player { margin-top: 10px; }
.player[hidden] { display: none; }
.player { margin-top: 22px; background: var(--ink); color: var(--cream); padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 12px 30px rgba(15,15,15,0.28); }
.player .play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--lavender); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.player .play svg { width: 18px; height: 18px; }
.player .pinfo { flex: 1; min-width: 0; }
.player .pinfo .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player .track { margin-top: 8px; height: 4px; background: rgba(245,241,232,0.25); border-radius: 2px; position: relative; }
.player .track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: var(--lavender); border-radius: 2px; }
.player .track::after { content: ""; position: absolute; left: calc(var(--p, 0) * 100%); top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--cream); transform: translate(-50%,-50%); }
.player .time { flex: none; font-size: 12px; color: rgba(245,241,232,0.6); font-variant-numeric: tabular-nums; }
/* the buttons themselves now live in css/listen.css, shared with the
   homepage and the episodes page so all three look identical */
.listen-on { margin-top: 14px; }

/* body sections */
.ga-body section { margin-top: 46px; }
.ga-body section:first-child { margin-top: 0; }
.sec-label { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--violet); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.sec-label::after { content: ""; flex: 1; height: 1.5px; background: rgba(15,15,15,0.14); }
.ga-body h2.blk { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: clamp(26px,3vw,40px); line-height: 1; margin-bottom: 14px; }
.ga-body p.lead { font-size: 17px; line-height: 1.72; color: rgba(15,15,15,0.85); margin-bottom: 14px; max-width: 62ch; }
.ga-body p.lead strong { font-weight: 700; }

/* chapters */
/* Part headings inside the chapter list. A double episode restarts its
   timestamps at 0:00, so without these the list reads as one broken run. */
.chapter-groups { display: grid; gap: 4px; }
.ch-part {
  font-family: var(--font-marker), cursive;
  font-size: 17px; color: var(--violet);
  margin: 22px 0 2px;
}
.chapter-groups > .ch-part:first-child { margin-top: 0; }

.chapters { list-style: none; }
.chapters li { display: grid; grid-template-columns: 68px 1fr; gap: 18px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed rgba(15,15,15,0.18); }
/* Only the rows that go somewhere react to the pointer. A plain row
   turning violet on hover reads as clickable and then does nothing. */
.chapters li.has-link:hover { color: var(--violet); }
/* The <a> is the li's only child, so while the li is still a two-column
   grid the link lands in the 68px timestamp track and the whole row is
   squeezed to it. The li becomes a plain block; the <a> carries the grid. */
.chapters li.has-link { display: block; padding: 0; }
.chapters li.has-link > a {
  display: grid; grid-template-columns: 68px 1fr; gap: 18px;
  align-items: baseline; padding: 12px 0;
  color: inherit; text-decoration: none;
}
.chapters li.has-link > a:hover .ct { border-bottom: 2px solid var(--lavender); }
.chapters li.has-link > a:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.chapters .ts { font-family: var(--font-marker), cursive; font-size: 16px; color: var(--violet); font-variant-numeric: tabular-nums; }
.chapters .ct { font-size: 16px; font-weight: 500; }

/* girls asked */
/* A pinboard, not a table. align-items:start is what stops the grid
   stretching every card to the tallest in its row — that stretching was
   what left short questions floating in a half-empty scrap of paper. */
.asked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-items: start;
  gap: 22px;
}
/* A long question earns more width rather than just running narrow and
   deep. Only once there is room for two columns. */
@media (min-width: 700px) {
  .asked-grid .scrappy.tall { grid-column: span 2; }
}
.asked-grid .scrappy { padding: 22px 26px; }
.asked-grid .scrappy.short { font-size: 27px; }
.asked-grid .scrappy.mid   { font-size: 25px; }
.asked-grid .scrappy.tall  { font-size: 24px; }

/* alternating paper, set on the card rather than by position so the
   pattern survives questions being added or reordered */
.asked-grid .scrappy.lav { background: var(--lilac); }

/* the tilt still varies by position — that is what keeps it hand-pinned */
.asked-grid .scrappy:nth-child(5n+1) { --r: -2deg; }
.asked-grid .scrappy:nth-child(5n+2) { --r: 1.6deg; }
.asked-grid .scrappy:nth-child(5n+3) { --r: -1deg; }
.asked-grid .scrappy:nth-child(5n+4) { --r: 2.2deg; }
.asked-grid .scrappy:nth-child(5n+5) { --r: -1.5deg; }

/* resources */
.res-list { list-style: none; display: grid; gap: 12px; }
/* Same lesson as the shout outs: a flex row makes the link and its
   " — description" separate items, so on a phone the link wrapped into
   a skinny column with the note standing beside it. Normal inline flow,
   arrow positioned out of it. */
.res-list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; }
.res-list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--violet); font-weight: 700; }
.res-list a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--lavender); }
.res-list a:hover { color: var(--violet); }

/* rapid-fire myth-busters */
.myth { list-style: none; display: grid; }
.myth li { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px dashed rgba(15,15,15,0.18); }
.myth .m { font-size: 16px; font-weight: 500; max-width: 46ch; }
.myth .v { flex: none; font-family: var(--font-marker), cursive; font-size: 14px; padding: 4px 13px; border: 2px solid var(--ink); white-space: nowrap; }
.myth .v.yes { background: var(--lavender); }
.myth .v.no { background: transparent; }
.myth .v.cx { background: var(--lilac); }

/* panel note */
.panel-note { background: var(--paper); padding: 26px 30px; border-left: 4px solid var(--lavender); font-size: 15.5px; line-height: 1.6; color: rgba(15,15,15,0.8); }
.panel-note b { color: var(--ink); }

/* related */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rel { display: block; text-decoration: none; color: var(--ink); background: var(--paper); padding: 20px 20px 22px; transition: transform 0.12s ease; }
.rel:hover { transform: translateY(-3px); color: var(--ink); }
.rel .rn { font-family: var(--font-marker), cursive; font-size: 15px; color: var(--violet); }
.rel h4 { font-family: var(--font-display), sans-serif; text-transform: uppercase; font-size: 20px; line-height: 1; margin: 8px 0 6px; }
.rel .rg { font-size: 13px; color: rgba(15,15,15,0.6); }

/* ================= LAYOUT: EDITORIAL (default) ================= */
body[data-sn-layout="editorial"] .sn-grid { grid-template-columns: minmax(0, 760px); justify-content: center; gap: 0; }
body[data-sn-layout="editorial"] .ga-title { text-align: center; margin-bottom: 38px; }
body[data-sn-layout="editorial"] .ga-title .sub { margin-left: auto; margin-right: auto; }
body[data-sn-layout="editorial"] .guest-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center;
  background: var(--paper); padding: 30px; margin-bottom: 34px;
}
body[data-sn-layout="editorial"] .guest-card .polaroid { --r: -3deg; max-width: 220px; }
body[data-sn-layout="editorial"] .guest-card .role { margin-top: 0; }
body[data-sn-layout="editorial"] .meta-block { margin-bottom: 44px; }
body[data-sn-layout="editorial"] .asked-grid { grid-template-columns: repeat(3, 1fr); }

/* ================= LAYOUT: SIDEBAR ================= */
body[data-sn-layout="sidebar"] .sn-grid {
  grid-template-columns: 330px 1fr; gap: 60px; align-items: start;
  grid-template-areas: "side title" "side body";
}
body[data-sn-layout="sidebar"] .ga-title { grid-area: title; margin-bottom: 30px; }
body[data-sn-layout="sidebar"] .sn-side { grid-area: side; position: sticky; top: 90px; }
body[data-sn-layout="sidebar"] .ga-body { grid-area: body; }
body[data-sn-layout="sidebar"] .related-grid { grid-template-columns: 1fr 1fr; }

/* ================= LAYOUT: MAGAZINE ================= */
body[data-sn-layout="magazine"] .sn-wrap { max-width: none; padding: 0; }
body[data-sn-layout="magazine"] .sn-back { position: absolute; top: 84px; left: 40px; z-index: 5; color: rgba(245,241,232,0.7); }
body[data-sn-layout="magazine"] .sn-back:hover { color: #fff; }
body[data-sn-layout="magazine"] .sn-grid {
  max-width: none; margin: 0; padding: 0; gap: 0;
  grid-template-columns: 1.35fr 0.9fr;
  grid-template-areas: "title side" "body body";
}
body[data-sn-layout="magazine"] .ga-title {
  grid-area: title; background: var(--dark); color: var(--cream);
  padding: 120px 60px 80px min(120px, 8vw); display: flex; flex-direction: column; justify-content: center;
}
body[data-sn-layout="magazine"] .ga-title .kicker { color: var(--lilac); }
body[data-sn-layout="magazine"] .ga-title h1 { color: var(--cream); }
body[data-sn-layout="magazine"] .ga-title .sub { color: var(--lilac); }
body[data-sn-layout="magazine"] .sn-side {
  grid-area: side; background: var(--dark); color: var(--cream);
  padding: 90px 60px 80px 20px; display: flex; flex-direction: column; justify-content: center;
}
body[data-sn-layout="magazine"] .guest-card .polaroid { --r: 3deg; max-width: 260px; }
body[data-sn-layout="magazine"] .guest-card .role { color: var(--lilac); }
body[data-sn-layout="magazine"] .guest-card h3 { color: var(--cream); }
body[data-sn-layout="magazine"] .guest-card .cred { color: rgba(245,241,232,0.7); }
body[data-sn-layout="magazine"] .guest-card .bio { color: rgba(245,241,232,0.78); }
body[data-sn-layout="magazine"] .meta-block .facts { color: rgba(245,241,232,0.6); }
body[data-sn-layout="magazine"] .meta-block .facts b { color: var(--cream); }
body[data-sn-layout="magazine"] .listen-on a { color: var(--cream); border-color: rgba(245,241,232,0.5); }
body[data-sn-layout="magazine"] .listen-on a:hover { color: var(--ink); }
body[data-sn-layout="magazine"] .ga-body {
  grid-area: body; column-count: 2; column-gap: 60px;
  max-width: 1180px; margin: 70px auto 0; padding: 0 40px;
}
body[data-sn-layout="magazine"] .ga-body section { break-inside: avoid; margin-top: 34px; }
body[data-sn-layout="magazine"] .ga-body section:first-child { margin-top: 0; }
body[data-sn-layout="magazine"] .related-grid { grid-template-columns: 1fr; }
body[data-sn-layout="magazine"] .asked-grid { grid-template-columns: 1fr; }

@media (max-width: 900px) {
  body[data-sn-layout] .sn-grid,
  body[data-sn-layout="sidebar"] .sn-grid,
  body[data-sn-layout="magazine"] .sn-grid {
    grid-template-columns: 1fr; grid-template-areas: "title" "side" "body"; gap: 34px; padding: 0 20px; max-width: 680px;
  }
  body[data-sn-layout="sidebar"] .sn-side { position: static; }
  body[data-sn-layout="magazine"] .ga-title,
  body[data-sn-layout="magazine"] .sn-side { padding: 40px 24px; }
  body[data-sn-layout="magazine"] .sn-back { position: static; margin: 20px; }
  body[data-sn-layout="magazine"] .ga-body { column-count: 1; margin-top: 34px; }
  body[data-sn-layout="editorial"] .guest-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .sn-wrap { padding: 24px 20px 0; }
  .related-grid, body[data-sn-layout] .related-grid { grid-template-columns: 1fr !important; }
  .asked-grid, body[data-sn-layout] .asked-grid { grid-template-columns: 1fr !important; }
}

/* Transcript links in the show notes. These belong here, not in
   transcript.css — an episode page never loads that file, so the list
   rendered as raw bullets. */
.tr-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tr-parts a {
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--lavender);
  font-size: 16px;
}
.tr-parts a:hover { color: var(--violet); }

/* Shout outs and other footer notes written one-per-line. A small
   lavender mark rather than a bullet, so it reads as credits and not
   as a checklist. */
.panel-note .panel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Deliberately not flex. A flex container makes every child its own
   item, so <strong> and <a> stopped being part of the sentence — the
   gap opened up between them and lines broke between elements rather
   than between words. The text stays in normal inline flow and the
   mark is positioned out of it. */
.panel-note .panel-list li { position: relative; padding-left: 20px; }
.panel-note .panel-list li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lavender);
}

/* Justified body prose — the episode blurb and the guest bio. Hyphens
   keep the word spacing even instead of opening rivers; under 640px the
   column is too narrow to justify cleanly, so phones keep the natural
   right edge on purpose. */
@media (min-width: 640px) {
  .ga-body p.lead,
  .guest-card .bio {
    text-align: justify;
    hyphens: auto;
  }
}