/* ============================================================
   Marcelle Lunam — page sections
   About (home), film credits + details, 404 / fallback.
   ============================================================ */

/* ---- Home — About (§6.5) -------------------------------------------------
   Desktop (annotated spec): 180px hero → heading glyph top, heading baseline
   → first body cap ≈ 92px, last body baseline → slash ≈ 123px, slash →
   envelope 95px, envelope → first panel 180px. Left edge 120px. */
.about {
  --about-pad: clamp(4.75rem, 2.963rem + 6.906vw, 11.25rem);   /* 76 → 180: hero → heading glyph, envelope → panel */
  padding: var(--about-pad) var(--gutter);
  background: var(--c-white);
  color: var(--c-ink);
}
.about__heading {
  font-size: var(--fs-h2); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--c-black);
  margin-top: -.14em;   /* so the padding measures to the top of the glyphs, as the spec callout does */
}
.about__body {
  max-width: var(--measure);
  margin-top: clamp(2.25rem, 1.5455rem + 2.7225vw, 4.8125rem);  /* heading baseline → first cap: 92px at 1920 */
  font-size: var(--fs-body); font-weight: var(--fw-light); line-height: var(--lh-body);
}
.about__body p + p { margin-top: .8em; }
.about__body a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.about__slash {
  margin-top: clamp(2.5rem, 1.2625rem + 4.781vw, 7rem);
  font-size: clamp(1.125rem, 0.8157rem + 1.195vw, 2.25rem); font-weight: var(--fw-light); line-height: 1;
  color: var(--c-black);
}
.about__mail {
  display: block;
  width: clamp(5.5rem, 3.9706rem + 5.91vw, 11.0625rem);   /* 88 → 177 */
  margin-top: clamp(3rem, 2.216rem + 3.028vw, 5.85rem);   /* slash → envelope: 48 → 95 */
  color: var(--c-black);
  transition: opacity .2s var(--ease);
}
.about__mail svg { width: 100%; height: auto; }
.about__mail:hover { opacity: .6; }
.about__mail--empty { width: auto; height: 0; margin-top: 0; }

/* ---- Film — credits (§6.7 step 4) ---------------------------------------
   At 1920: panel → STARRING cap 122px, label baseline → names 27px, names
   Medium 38px on a 54px pitch, columns ~110px apart. */
.credits {
  padding: calc(var(--space-xl) - .1em) var(--gutter) 0;
  color: var(--c-ink);
}
.credits__label {
  font-size: var(--fs-label); font-weight: var(--fw-light); line-height: var(--lh-sub);
  letter-spacing: 0;
  text-transform: uppercase;
}
.credits__names {
  display: grid;
  grid-template-columns: repeat(var(--cast-cols, 3), minmax(0, max-content));  /* shrinkable: long names wrap rather than overflow */
  column-gap: clamp(3rem, 0.2rem + 6.4vw, 7.8125rem);   /* 48 (phone/tablet) → 125px (mockup columns 122 / 489 / 915); wider at mid widths per Marcelle */
  row-gap: 0;
  margin: clamp(.5rem, .35rem + .35vw, .8125rem) 0 0;
  padding: 0; list-style: none;
  font-size: var(--fs-name); font-weight: var(--fw-medium); line-height: 1.42;  /* 54px pitch at 38px */
  overflow-wrap: break-word;
  letter-spacing: 0;
  color: var(--c-black);
}
@media (max-width: 1279px) {
  .credits__names { grid-template-columns: repeat(min(2, var(--cast-cols, 3)), minmax(0, max-content)); }
}
@media (max-width: 767px) {
  .credits__names { grid-template-columns: 1fr; line-height: 1.3; }
}

/* ---- Film — synopsis + details (§6.7 step 5) -----------------------------
   Synopsis Light 29/34 at x 120, ≤686px wide. Right column starts at 57.7%
   of the width. Award labels Medium 25px, credit labels Light 21px, values
   Light 31px. Last synopsis baseline → first still panel ≈ 120px. */
.details {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-l);
  padding: clamp(3.5rem, 1.7rem + 6.9vw, 10rem) var(--gutter) clamp(3.5rem, 2.25rem + 4.8vw, 6.8125rem);
  color: var(--c-ink);
}
.details__synopsis {
  max-width: 42.875rem;  /* 686px */
  font-size: var(--fs-synopsis); font-weight: var(--fw-light); line-height: var(--lh-synopsis);
}
.details__synopsis p + p { margin-top: .69em; }   /* 20px at 29px */
.details__heading {
  font-size: var(--fs-details-h); font-weight: var(--fw-light); line-height: var(--lh-sub);
  letter-spacing: 0; text-transform: uppercase;
  margin: -.1em 0 clamp(.75rem, .4rem + 1.4vw, 1.6875rem);
}
.details__list { margin: 0; }
.details__row + .details__row { margin-top: clamp(1rem, .6rem + 1.1vw, 1.725rem); }
.details__row dt { line-height: var(--lh-sub); text-transform: uppercase; }
.details__row--award dt { font-size: var(--fs-label-award); font-weight: var(--fw-medium); letter-spacing: -0.015em; }
.details__row--credit dt { font-size: var(--fs-label); font-weight: var(--fw-light); letter-spacing: 0; }
.details__row dd {
  margin: 0;
  font-size: var(--fs-value); font-weight: var(--fw-light); line-height: 1.1;
}
@media (min-width: 1024px) {
  /* The right column still starts at 57.7% of the width; the synopsis now
     narrows before it touches it (Marcelle, 6 Oct: more space between the
     text blocks at mid widths). */
  .details {
    --details-gap: clamp(3rem, 6vw, 7.5rem);
    grid-template-columns: minmax(0, calc(57.7vw - var(--gutter) - var(--details-gap))) 1fr;
    column-gap: var(--details-gap);
    align-items: start;
  }
}

/* ---- 404 and fallback pages (§7.3, not designed) ------------------------- */
.page-plain { min-height: 100vh; min-height: 100svh; }
.about--plain { padding-top: max(var(--about-pad), 10rem); }
.about--plain .about__body a { color: var(--c-black); }
.about--plain .about__body h2, .about--plain .about__body h3 { font-weight: var(--fw-semibold); color: var(--c-black); margin: 1.5em 0 .5em; line-height: 1.2; }
/* The mockup runs the longest detail value to x 1812, past the 120px gutter. */
@media (min-width: 1024px) {
  .details__side { margin-right: calc(var(--gutter) * -0.25); }
}

/* ---- Film — text carousel (Marcelle, 6 Oct 2026) -------------------------
   Page 1 = cast + synopsis + credits; further pages = free text such as
   "The Music.". Slides share one grid cell, so the section is as tall as the
   tallest page and nothing jumps. Dark dots sit under the text. */
.slideshow--text {
  container-type: normal;
  overflow: visible;
  background: var(--c-white);
  color: var(--c-ink);
  touch-action: pan-y;
  padding-bottom: clamp(2.5rem, 1.75rem + 2.9vw, 5.5rem);
}
.slideshow--text:focus-visible { outline-color: var(--c-black); outline-offset: -6px; }
.slideshow--text .slideshow__track { position: static; display: grid; }
.slideshow--text .slideshow__slide { position: relative; inset: auto; grid-area: 1 / 1; }
.slideshow--text .details { padding-bottom: clamp(2rem, 1.5rem + 2vw, 4rem); }
.slideshow--text .slideshow__dots {
  position: static; transform: none;
  justify-content: center;
}
.slideshow--text .slideshow__dot::before { border-color: var(--c-black); }
.slideshow--text .slideshow__dot[aria-current="true"]::before { background: var(--c-black); }
.slideshow--text .slideshow__dot:focus-visible::before { outline-color: var(--c-black); }
@media (hover: hover) {
  .slideshow--text .slideshow__dot:hover::before { background: rgba(0,0,0,.35); }
  .slideshow--text .slideshow__dot[aria-current="true"]:hover::before { background: var(--c-black); }
}

.info-page { padding: calc(var(--space-xl) - .1em) var(--gutter) 0; }
.info-page__heading {
  font-size: var(--fs-details-h); font-weight: var(--fw-medium); line-height: var(--lh-sub);
  letter-spacing: 0;
  color: var(--c-black);
}
.info-page__body {
  margin-top: clamp(2rem, 1rem + 3.8vw, 5.5rem);
  font-size: var(--fs-synopsis); font-weight: var(--fw-light); line-height: var(--lh-synopsis);
}
.info-page__body p { break-inside: avoid-column; }
.info-page__body p + p { margin-top: .69em; }
.info-page__body a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
.info-page__listen { display: inline-block; margin-top: .69em; }
@media (min-width: 1024px) {
  /* Two columns; the second starts at 57.7% of the width, in line with the
     credits column on page 1. */
  .info-page__body { column-count: 2; column-gap: 15.4vw; }
  .info-page__body p { break-inside: auto; }
}