/* =========================================================================
   post.css — a single episode's written version.

   THE BODY COPY HERE IS NOT UPPERCASE. The brand voice runs in caps on
   the marketing pages, and these posts are nine hundred to eighteen
   hundred words long -- all-caps at that length is genuinely hard to
   read, so the prose is sentence case at a comfortable size and the
   caps treatment stays on the headings and the furniture around it.

   THE PROSE IS STYLED BY ELEMENT inside .prose, not by class, because
   the markup comes out of the content pipeline as plain h2/h3/p/ul and
   nothing is going to add classes to it.
   ========================================================================= */

.post-head {
  background: var(--blush);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) calc(8vw + clamp(1.5rem, 4vw, 2.5rem));
  position: relative;
  text-align: center;
}

.post-head__scallop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 8vw;
  min-height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8C25 8 50 8 100 0v8z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.post-head__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin-bottom: 1.1rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
}

.post-head__ep {
  padding: 0.25rem 0.75rem;
  border-radius: 300px;
  background: var(--white);
  color: var(--brown);
  font-weight: 600;
}

.post-head h1 {
  font-size: var(--display-md);
  line-height: var(--lh-md);
  max-width: 20ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* -------------------------------------------------------------------------
   the writing
   ------------------------------------------------------------------------- */

.post-body { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }

/* Measured: the original ran its posts 872px wide at a 1280 viewport,
   much wider than the 68ch this started at. Wider measure, smaller
   type and smaller headings together are what stop a 1,200-word post
   reading as a wall. */
.prose {
  max-width: 872px;
  margin-inline: auto;
  font-size: clamp(0.95rem, 0.92rem + 0.14vw, 1.03rem);
  line-height: 1.7;
  color: var(--brown);
}

.prose > * + * { margin-top: 1.15em; }

.prose h2,
.prose h3,
.prose h4 {
  color: var(--rose);
  line-height: 1.2;
  text-wrap: balance;
}

.prose h2 { font-size: var(--display-xxs); line-height: 1.17; margin-top: 2.3em; }
.prose h3 { font-size: 1.18em; line-height: 1.25; margin-top: 2em; }
.prose h4 { font-size: 1.05em; margin-top: 1.8em; }

/* The posts open on a heading, and a top margin there would push it
   away from the scallop for no reason. */
.prose > :first-child { margin-top: 0; }

.prose strong { color: var(--brown); font-weight: 600; }
.prose em { font-style: italic; }

.prose a {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.prose a:hover { color: var(--brown); }

.prose ul,
.prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--rose); }

.prose blockquote {
  margin-inline: 0;
  padding: 1.1em 1.4em;
  border-left: 3px solid var(--rose);
  background: var(--blush);
  border-radius: 0 1rem 1rem 0;
  font-style: italic;
}

.prose blockquote p + p { margin-top: 0.8em; }

.prose hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin-block: 2.5em;
}

.prose img { border-radius: 1rem; margin-inline: auto; }

/* -------------------------------------------------------------------------
   share
   ------------------------------------------------------------------------- */

.post-share {
  max-width: 872px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.post-share__label {
  font-size: var(--body);
  text-transform: uppercase;
  color: var(--taupe);
}

.post-share ul {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-share a,
.post-share button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blush);
  color: var(--brown);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.post-share a:hover,
.post-share button:hover { background: var(--rose); color: var(--white); }

.post-share svg { width: 17px; height: 17px; fill: currentColor; }

/* -------------------------------------------------------------------------
   prev / next
   ------------------------------------------------------------------------- */

.post-nav {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  max-width: 872px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

@media (min-width: 640px) {
  .post-nav { grid-template-columns: 1fr 1fr; }
}

.post-nav a {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.35rem;
  border: 1.5px solid var(--hairline);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.post-nav a:hover { border-color: var(--rose); background: var(--blush); }

.post-nav__dir {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
}

.post-nav__title {
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--rose);
}

.post-nav a:last-child:nth-child(2),
.post-nav a.is-next { text-align: right; }

/* -------------------------------------------------------------------------
   the episode, embedded

   The post is the written version of a video that already exists, and
   until now the page never said so. The player is a click-to-load
   facade (site.js), so a reader who came to read is not charged a
   megabyte of YouTube and a cookie for the privilege.
   ------------------------------------------------------------------------- */

.post-watch {
  max-width: 872px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.post-watch .featured__video { aspect-ratio: 16 / 9; }

/* -------------------------------------------------------------------------
   related episodes

   Thirty-seven posts linked only as a chain is a thin structure. These
   give every post several ways in, which spreads authority across the
   library instead of pooling it in the newest few.
   ------------------------------------------------------------------------- */

.post-related {
  max-width: 872px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
}

.post-related h2 {
  font-size: var(--display-xxs);
  line-height: 1.17;
  margin-bottom: 1.1rem;
}

.post-related ul {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .post-related ul { grid-template-columns: repeat(3, 1fr); }
}

.post-related a {
  display: grid;
  gap: 0.4rem;
  height: 100%;
  padding: 1rem 1.2rem;
  border: 1.5px solid var(--hairline);
  border-radius: 1rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.post-related a:hover { border-color: var(--rose); background: var(--blush); }

.post-related__ep {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--taupe);
}

.post-related__title {
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--rose);
}

/* -------------------------------------------------------------------------
   share row

   The buttons and the links are the same 40px circle, because to a
   reader they are the same kind of control. The native share button
   ships hidden and site.js reveals it only where navigator.share
   exists, so nothing ever renders as a button that cannot work.
   ------------------------------------------------------------------------- */

.post-share__status {
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  color: var(--taupe);
  /* holds its line so the row does not jump when a message appears */
  min-height: 1.5em;
  min-width: 9ch;
}

.post-share li button[hidden] { display: none; }