/* =========================================================================
   home.css — the five sections of the front page, in page order.

   The measurements these are built from, taken off the live site at a
   1280px viewport. "pad" is the real inset from the section edge to
   the first and last piece of content:

     section          pad top / bottom    content width
     hero                160 / 145            88%
     listen & follow      36 /  36            37.8%
     confessional         73 /  73            45.5%
     get the tea          36 /  73           100%  (the marquee is full bleed)
     featured episodes    84 /  84            92%

   THE HERO'S BOTTOM PADDING INCLUDES THE CURVE. The measured 145px is
   the 8vw sweep (102px at 1280) plus about 43px of real space, so the
   rule below is written as the sweep plus that remainder -- otherwise
   the gap grows and shrinks with the viewport for no visible reason.

   THE CURVED EDGE: the saved config calls it "scalloped" at 100vw wide
   and 8vw tall, which sounds like a row of bumps and is not -- one
   scallop spans the full viewport, so it renders as a single sweep
   rising to the right. The real clip path, read off the live site:

     c 0.25,0  0.5,0  1,-0.065

   a cubic that stays flat for half its run and then lifts, which is
   why a plain arc looks wrong here.

   THE TEA SECTION IS NOT A TWO-COLUMN GRID. Measured at 1280, the copy
   runs 429px from the left edge of the content area and the image is
   331px hard against the right, with 255px of nothing between them.
   Two equal columns would close that gap and lose the layout, so the
   middle is its own empty track.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. hero
   ------------------------------------------------------------------------- */

.hero {
  background: var(--blush);
  /* The original header is position:absolute and floats over the hero,
     so its measured 160px to the tagline is 160px from the top of the
     PAGE. Ours is sticky and in flow, so the hero only owes the
     difference -- about 42px at every width once the header height is
     taken off. Stacking the full 160 under the bar is what made the
     top look empty. */
  padding-top: clamp(40px, 36px + 0.5vw, 52px);
  padding-bottom: calc(8vw + 43px);
  position: relative;
  text-align: center;
}

.hero__tagline {
  font-size: var(--display-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--track);
  /* the original lets this run the full 88% column rather than
     setting it in a narrow measure */
  margin-inline: auto;
}

/* One sweep across the viewport: white rising from nothing on the left
   to the full 8vw on the right, painted over the blush. */
.hero__scallop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* -1px kills the hairline gap on fractional DPR */
  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;
}

/* -------------------------------------------------------------------------
   2. listen & follow
   ------------------------------------------------------------------------- */

.listen { text-align: center; }

.listen h2 {
  font-size: var(--display-md);
  line-height: var(--lh-md);
  margin-bottom: 25px;
}

/* -------------------------------------------------------------------------
   3. confessional
   ------------------------------------------------------------------------- */

.confess { text-align: center; }

.confess h2 {
  font-size: var(--display-md);
  line-height: var(--lh-md);
  margin-bottom: 25px;
}

.confess__rules {
  margin: 16px 0 36px;
  padding: 0;
  display: grid;
  gap: 0;
  justify-items: center;
}

.confess__rules li {
  list-style: none;
  font-weight: 700;        /* the original wraps each line in <strong> */
}

.confess__form {
  display: grid;
  gap: 16px;
  text-align: left;
}

.field { display: grid; gap: 6px; }

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--body);
  line-height: var(--body-lh);
  text-transform: uppercase;
  color: var(--brown);
}

.field__hint { color: var(--taupe); opacity: 0.8; }

/* Measured: 39px tall, 8/15 padding, pill, transparent, with a hairline
   brown outline. Not a filled box -- the original is all outline. */
.field input,
.field textarea {
  width: 100%;
  padding: 8px 15px;
  background: transparent;
  border: 1px solid var(--brown);
  border-radius: 300px;
  font-size: var(--body);
  line-height: var(--body-lh);
  color: var(--brown);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field textarea {
  min-height: 9rem;
  /* a pill-shaped multi-line box clips its own first line */
  border-radius: 18px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--taupe); opacity: 0.65; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(180, 157, 150, 0.3);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: #b4564c; }

.field__error {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: #9c4238;
}

.field__error:empty { display: none; }

/* The honeypot. Off-screen rather than display:none, because some bots
   skip hidden inputs but fill positioned ones. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.confess__submit { justify-self: center; margin-top: 8px; min-width: 12rem; }

.form__status {
  text-align: center;
  font-size: var(--body);
  text-transform: uppercase;
  min-height: 1.5em;
}

.form__status[data-state="ok"] { color: #3f7256; }
.form__status[data-state="error"] { color: #9c4238; }

/* -------------------------------------------------------------------------
   4. get the tea
   ------------------------------------------------------------------------- */

/* Measured 36 top / 73 bottom -- the only section on the page whose two
   edges differ, because the marquee carries its own breathing room at
   the top and the block below it does not. */
.tea {
  overflow: hidden;
  padding-top: var(--pad-s);
  padding-bottom: var(--pad-m);
}

.tea .marquee { margin-bottom: 36px; }

/* 429 / 255 / 331 of the 1113px content area, measured at 1280 */
.tea__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 880px) {
  .tea__grid {
    /* the fourth track is the right gutter: the image stops about
       98px short of the content edge, not flush against it */
    grid-template-columns: 38.5% auto 29.7% 8.8%;
    gap: 0;
  }
  .tea__copy { grid-column: 1; }
  .tea__art { grid-column: 3; }
}

.tea__copy { display: grid; gap: 16px; justify-items: start; }
.tea__copy .btn { margin-top: 20px; }

.tea__copy h2 {
  font-size: var(--display-lg);
  line-height: var(--lh-lg);
}

/* Square. Squarespace cropped the source to a portrait slot that
   changed shape at every breakpoint; the artwork is 1:1 and is meant
   to be seen that way. */
.tea__art {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tea__art img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------------
   5. featured episodes
   ------------------------------------------------------------------------- */

.featured { text-align: center; }

.featured h2 {
  font-size: var(--display-sm);
  line-height: var(--lh-sm);
  margin-bottom: 36px;
}

/* measured: two 576px players with a 10px gutter inside a 1162px column */
.featured__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 36px;
}

@media (min-width: 760px) {
  .featured__grid { grid-template-columns: 1fr 1fr; }
}