/* ==========================================================================
   Sweet Homes — Season One
   Design tokens and measurements follow the Claude Design handoff exactly.
   ========================================================================== */

:root {
  --cream: #f7efd6;
  --cream-card: #fdf8e7;
  --green: #003420;
  --ink: #00160d;
  --yellow: #e9b10e;
  --ochre: #b98a0b;

  --rule-on-cream: rgba(0, 52, 32, 0.35);
  --rule-on-green: rgba(247, 239, 214, 0.4);

  --pad-side: clamp(40px, 7vw, 96px);
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);

  /* How far full-bleed art may drift behind its section, as a share of the
     section's height. Raising this makes the parallax more dramatic; the image
     is inset by the same amount so nothing can show through behind it. Above
     ~16% the extra magnification starts to cost visible sharpness. */
  --drift: 12%;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Marcellus", Georgia, "Times New Roman", serif;
  --body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: var(--body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

/* Every <picture> below wraps an image that fills its section. The picture box
   has to come out of flow too — left in flow it claims a grid row / flex slot
   of its own and knocks the chapter content off centre. (display:contents is
   not the fix here: it hoists the <source> elements into the grid instead.) */
.chapter > picture,
.split__media > picture,
.player > picture,
.friend__photo > picture {
  position: absolute;
  inset: 0;
}

a {
  color: var(--green);
}
a:hover {
  color: var(--ochre);
}

::selection {
  background: var(--yellow);
  color: var(--green);
}

:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* The browser's own [hidden] rule is a UA-sheet default, so ANY author
   `display` beats it — .signup and .inquiry__form both set display:flex, which
   meant a form the script had marked hidden after a successful submit stayed
   on screen with "SENDING…" frozen on its button, reading as a failed submit
   while the thank-you message sat underneath it. Make hidden mean hidden. */
[hidden] {
  display: none !important;
}

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Motion primitives — reveals and image settle.
   Hidden states only apply once JS is confirmed, so a script failure can never
   leave the page blank.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.js [data-reveal]:not(.is-in) {
  transform: translateY(26px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* The push-in. Composes with the parallax drift, which main.js applies through
   the separate `translate` property so the two never overwrite each other. */
.js [data-settle] {
  transition: transform 2.4s var(--ease);
  transform: scale(1.12);
}
.js [data-settle].is-in {
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   Fixed chrome — scroll progress + chapter timeline rail
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--yellow);
  z-index: 60;
  transform-origin: left center;
  will-change: width;
}

.timeline {
  position: fixed;
  right: clamp(10px, 1.8vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 13px;
  mix-blend-mode: difference;
  color: var(--cream);
}

.timeline__item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--cream);
  opacity: 0.28;
  transition: opacity 0.45s ease, transform 0.45s var(--ease);
}
.timeline__item.is-passed {
  opacity: 0.55;
}
.timeline__item.is-active {
  opacity: 1;
  transform: translateX(-6px);
}

.timeline__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1;
  opacity: 0;
  white-space: nowrap;
  /* Collapsed rather than merely transparent, so a hidden label claims no
     width — otherwise the rail's hit area reaches ~155px across the copy. */
  max-width: 0;
  overflow: hidden;
  transition: opacity 0.45s ease, max-width 0.45s var(--ease);
}
/* The label is only shown when the page margins are genuinely wide enough to
   hold it clear of the body copy — at narrower widths it printed straight
   through the hero synopsis. Below that it is available on hover/focus. */
@media (min-width: 1560px) {
  .timeline__item.is-active .timeline__label {
    opacity: 1;
    max-width: 14em;
  }
}
.timeline__item:hover .timeline__label,
.timeline__item:focus-visible .timeline__label {
  opacity: 1;
  max-width: 14em;
}

.timeline__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1;
}

.timeline__tick {
  display: block;
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--ease);
}
.timeline__item.is-active .timeline__tick {
  width: 26px;
}

/* Phones: there is no margin for the rail to live in without sitting on the
   copy, and a 1px tick is not a usable tap target. The progress bar carries
   position on small screens instead. */
@media (max-width: 699px) {
  .timeline {
    display: none;
  }
}

/* Tablets and small laptops: numerals and ticks, tightened up. */
@media (min-width: 700px) and (max-width: 1000px) {
  .timeline {
    gap: 11px;
  }
  .timeline__tick {
    width: 9px;
  }
  .timeline__item.is-active .timeline__tick {
    width: 20px;
  }
}

/* Around 1280px the 1160px content rail leaves only ~60px of margin, which is
   just short of the rail's width. Pull it tight to the edge through that band. */
@media (min-width: 1000px) and (max-width: 1559px) {
  .timeline {
    right: 9px;
  }
  .timeline__tick {
    width: 10px;
  }
  .timeline__item.is-active .timeline__tick {
    width: 22px;
  }
}

/* --------------------------------------------------------------------------
   Shared chapter typography
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--yellow);
  margin: 0;
}
.eyebrow--cream {
  color: var(--ochre);
}

.statement {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4.6vw, 54px);
  color: var(--cream);
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 2px 30px rgba(0, 22, 13, 0.5);
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Full-bleed chapter scaffold
   -------------------------------------------------------------------------- */

.chapter {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.chapter--center {
  display: grid;
  place-items: center;
}
.chapter--bottom {
  display: flex;
  align-items: flex-end;
}
.chapter--middle {
  display: flex;
  align-items: center;
}

/* Full-bleed art is inset by --drift top and bottom, so it has that much room
   to travel behind the section without ever exposing an edge.
   main.js measures the real overflow off the rendered box and clamps its drift
   to it, so the two can't fall out of step — the old version hard-coded a 6%
   inset against a drift that reached 14% of the viewport, and what showed
   through at the section edges was this element's dark backdrop. */
.chapter__media {
  position: absolute;
  inset: calc(-1 * var(--drift)) 0;
  width: 100%;
  height: calc(100% + 2 * var(--drift));
  object-fit: cover;
}

.chapter__scrim {
  position: absolute;
  inset: 0;
}
.scrim-38 {
  background: rgba(0, 22, 13, 0.38);
}
.scrim-42 {
  background: rgba(0, 22, 13, 0.42);
}
.scrim-55 {
  background: rgba(0, 22, 13, 0.55);
}
.scrim-corner {
  background: linear-gradient(15deg, rgba(0, 22, 13, 0.78) 0%, rgba(0, 22, 13, 0.25) 55%, rgba(0, 22, 13, 0) 100%);
}
.scrim-bottom {
  background: linear-gradient(0deg, rgba(0, 22, 13, 0.8) 0%, rgba(0, 22, 13, 0.2) 45%, rgba(0, 22, 13, 0) 75%);
}
.scrim-left {
  background: linear-gradient(90deg, rgba(0, 22, 13, 0.82) 0%, rgba(0, 22, 13, 0.45) 60%, rgba(0, 22, 13, 0.15) 100%);
}

.chapter__centered {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vh, 22px);
  padding: 0 6vw;
}

.chapter__panel {
  position: relative;
  padding: var(--pad-side);
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   00 · The trailer
   -------------------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vh, 28px);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 48px) clamp(56px, 8vh, 84px);
  position: relative;
  background: var(--cream);
}

.hero__rail {
  width: min(1160px, 94vw);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 28px);
}
.hero__rule {
  flex: 1;
  height: 1px;
  background: var(--rule-on-cream);
}
.hero__marker {
  font-family: var(--mono);
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.28em;
  white-space: nowrap;
}
.hero__logo {
  width: clamp(120px, 14vw, 180px);
  height: auto;
  margin: 0 clamp(6px, 1vw, 14px);
}

/* A column: the headline row, then the network logos beneath it. The logos have
   to stay out of that row — as a third flex item they land beside the synopsis,
   and nested in the headline's column they deepen it, which drags the
   bottom-aligned synopsis down past the headline. */
.hero__lede {
  width: min(1160px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.6vh, 30px);
  margin: clamp(6px, 1.5vh, 14px) 0 clamp(4px, 1vh, 10px);
}

/* Headline and synopsis side by side, bottoms flush — so the paragraph reads as
   set against the headline rather than trailing off under it. Below the wrap
   point they stack and the alignment is moot. */
.hero__headline {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 56px);
}

.hero__title {
  flex: 1 1 min(560px, 100%);
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 68px);
  line-height: 1.18;
  text-wrap: pretty;
}

/* Keeps each sentence of the headline whole — see the comment on the markup.
   The widest beat, "One Sweet Home.", still fits the column at the 34px floor,
   so this never forces a horizontal overflow. */
.hero__beat {
  display: inline-block;
  white-space: nowrap;
}

.chip {
  display: inline-block;
  background: var(--yellow);
  color: var(--green);
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 0.16em;
  padding: 0.45em 0.7em;
  line-height: 1;
  margin-bottom: 0.5em;
  white-space: nowrap;
}

.hero__synopsis {
  flex: 1 1 min(320px, 100%);
  margin: 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.8;
  font-weight: 300;
  text-wrap: pretty;
}

.player {
  width: min(1160px, 94vw);
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  box-shadow: 0 30px 80px -30px rgba(0, 52, 32, 0.55);
  overflow: hidden;
}
.player__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player__button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 22, 13, 0.14);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.4s ease;
}
.player__button:hover {
  background: rgba(0, 22, 13, 0.02);
}
.player__disc {
  width: clamp(64px, 8vw, 92px);
  height: clamp(64px, 8vw, 92px);
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--ease);
}
.player__button:hover .player__disc {
  transform: scale(1.06);
}
.player__disc::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--green);
  margin-left: 6px;
}

.player__toast {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 10px 16px;
  white-space: nowrap;
}

/* Scroll cue — a rising "01" and a line that grows then retreats.
   Pinned to the viewport rather than the section, because the hero runs taller
   than the screen on short laptops and a cue below the fold invites nothing.
   It fades out as soon as the reader takes the hint. */
.cue {
  position: fixed;
  left: 50%;
  bottom: clamp(18px, 3vh, 30px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 40;
  transition: opacity 0.5s ease;
}
.cue.is-gone {
  opacity: 0;
}
.cue__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--green);
  overflow: hidden;
  height: 1.2em;
  display: block;
}
.cue__num span {
  display: block;
  animation: riseNum 3.4s var(--ease) infinite;
}
.cue__line {
  width: 1px;
  height: 34px;
  background: var(--green);
  opacity: 0.5;
  animation: cueGrow 3.4s var(--ease) infinite;
}

@keyframes cueGrow {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  45% {
    transform: scaleY(1);
    transform-origin: top;
  }
  55% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}
@keyframes riseNum {
  0%,
  20% {
    transform: translateY(120%);
    opacity: 0;
  }
  60%,
  80% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-10%);
    opacity: 0;
  }
}

/* Phones: the masthead's two nowrap markers plus the wordmark are wider than
   the screen, so stack the wordmark over the markers and drop the rules. */
@media (max-width: 720px) {
  .hero__rail {
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(10px, 2.5vh, 16px) 18px;
  }
  .hero__rule {
    display: none;
  }
  .hero__logo {
    order: -2;
    flex: none;
    width: min(210px, 54vw);
    margin-inline: auto;
  }
  /* Zero-height full-width flex item: forces the markers onto their own line
     under the wordmark without letting flex-basis stretch the logo itself. */
  .hero__rail::before {
    content: "";
    order: -1;
    flex-basis: 100%;
    height: 0;
  }
  .hero__marker {
    letter-spacing: 0.2em;
  }
}

/* Short laptop screens: tighten the hero's vertical rhythm so more of the
   trailer (and its play button) clears the fold. */
@media (max-height: 820px) and (min-width: 760px) {
  .hero {
    padding-top: clamp(20px, 3vw, 40px);
    padding-bottom: clamp(28px, 4vh, 48px);
    gap: clamp(12px, 1.8vh, 20px);
  }
  .hero__logo {
    width: clamp(104px, 11vw, 144px);
  }
  .hero__synopsis {
    font-size: 14px;
    line-height: 1.7;
  }
}

/* --------------------------------------------------------------------------
   Premiere band
   -------------------------------------------------------------------------- */

.band {
  min-height: 420px;
  background: var(--green);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 8vh, 88px) clamp(16px, 4vw, 48px);
}

/* Stacked and centred by default; two columns once there is room for both to
   read as columns rather than as squeezed halves. 1160px matches the trailer
   player's rail above it, so the two sections share an edge. */
.band__inner {
  width: min(1160px, 100%);
  display: grid;
  gap: clamp(32px, 5vh, 48px);
  justify-items: center;
  align-items: center;
}

.band__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.4vh, 32px);
}

.band__title {
  font-family: var(--display);
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  font-weight: 400;
  /* The tracking adds a trailing space that reads as a left bias once the
     block is aligned rather than centred. */
  margin-right: -0.22em;
}

/* The signup's own headline, above the field. */
.band__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 44ch;
}

/* ── Side by side: premiere details left, signup right ────────────────────── */
@media (min-width: 820px) {
  .band__inner {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    justify-items: stretch;
  }
  .band__lead,
  .band__cta {
    align-items: flex-start;
    text-align: left;
  }
  .band__title {
    text-align: left;
  }
  .platforms--band {
    justify-content: flex-start;
  }
  /* A quiet rule in the gap, in the same language as the divider between the
     two platform logos and the rules either side of the masthead. */
  .band__cta {
    border-left: 1px solid rgba(247, 239, 214, 0.2);
    padding-left: clamp(40px, 5vw, 72px);
    max-width: none;
  }
  .band__cta-sub {
    max-width: 38ch;
  }
}
.band__cta-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 30px);
  text-wrap: balance;
}
.band__cta-sub {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(247, 239, 214, 0.8);
  text-wrap: pretty;
}

.platforms {
  display: flex;
  align-items: center;
  gap: clamp(22px, 4vw, 44px);
  flex-wrap: wrap;
  justify-content: center;
}
.platforms__divider {
  width: 1px;
  height: 38px;
  background: rgba(247, 239, 214, 0.35);
}
.platforms img {
  width: auto;
}
.platforms--band .logo-hgtv {
  height: clamp(34px, 4.5vw, 52px);
}
.platforms--band .logo-da {
  height: clamp(44px, 5.5vw, 64px);
}
.platforms--watch .logo-hgtv {
  height: clamp(36px, 4.8vw, 56px);
}
.platforms--watch .logo-da {
  height: clamp(46px, 6vw, 68px);
}
.platforms--watch .platforms__divider {
  height: 40px;
  background: rgba(247, 239, 214, 0.4);
}
/* Deliberately smaller than the band and watch lockups — under the headline
   these are a credit, not the billing. Roughly three-quarters the band size,
   with the gap and divider scaled to match so the row stays in proportion. */
.platforms--hero {
  justify-content: flex-start;
  gap: clamp(14px, 2.2vw, 26px);
}
/* Same mono treatment as the masthead's SEASON ONE / SMITH LAKE, AL. Tucked
   slightly closer to the first logo than the logos are to each other, so it
   reads as a label on the row rather than a third item in it. */
.platforms__label {
  font-family: var(--mono);
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ochre);
  white-space: nowrap;
  margin-right: calc(-1 * clamp(2px, 0.5vw, 6px));
}
.platforms--hero .logo-hgtv {
  height: clamp(26px, 3.3vw, 38px);
}
.platforms--hero .logo-da {
  height: clamp(32px, 4vw, 47px);
}
.platforms--hero .platforms__divider {
  height: 26px;
  background: var(--rule-on-cream);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.signup {
  display: flex;
  width: min(420px, 100%);
}
.signup--next {
  width: min(440px, 100%);
  margin-top: 6px;
}

.field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--rule-on-green);
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cream);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
}
.signup .field {
  border-right: none;
}
.field::placeholder {
  color: rgba(247, 239, 214, 0.5);
}
.field:focus-visible {
  border-color: var(--yellow);
  outline: none;
}

.btn {
  background: var(--yellow);
  color: var(--green);
  border: 1px solid var(--yellow);
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--cream);
  border-color: var(--cream);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.form-note {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--yellow);
  line-height: 1.5;
  /* The inquiry thank-you runs to four sentences; unconstrained it sets as one
     1400px line on a wide screen. Hold it to a readable measure. */
  max-width: 62ch;
}
.form-note--error {
  color: #ffb4a2;
}
.form-note--inline {
  padding: 8px 0;
}

/* --------------------------------------------------------------------------
   02 · The Idea — split
   -------------------------------------------------------------------------- */

.split {
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100vw), 1fr));
  background: var(--cream);
}
.split__media {
  position: relative;
  overflow: hidden;
  min-height: min(70vh, 560px);
}
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.5vh, 26px);
  padding: var(--pad-side);
}
.split__eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  margin: 0;
}
.split__lede {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.45;
  max-width: 24em;
  text-wrap: pretty;
}
.split__copy {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  font-weight: 300;
  max-width: 46ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   03 / 04 / 09 · panel copy
   -------------------------------------------------------------------------- */

.panel--thought {
  max-width: 760px;
}
.panel--house {
  max-width: 820px;
}
.panel--next {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vh, 24px);
}

.panel__eyebrow {
  margin: 0 0 1.6em;
}
.panel--next .panel__eyebrow {
  margin: 0;
}

.quote {
  margin: 0 0 1.2em;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.65;
  font-weight: 300;
  text-wrap: pretty;
}
.quote__kicker {
  margin: 0 0 1.6em;
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 32px);
}

.panel__h2 {
  margin: 0 0 0.7em;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.35;
  text-wrap: pretty;
}
.panel__copy {
  margin: 0 0 1em;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.65;
  font-weight: 300;
  max-width: 52ch;
  text-wrap: pretty;
}
.spec {
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.14em;
  color: var(--yellow);
}

.panel--next .panel__h2 {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 46px);
}
.panel--next .panel__copy {
  margin: 0;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.7;
  max-width: none;
}

.follow {
  border-top: 1px solid rgba(247, 239, 214, 0.25);
  padding-top: clamp(18px, 3vh, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.follow__title {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 24px);
}
.follow__sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(247, 239, 214, 0.8);
}

/* --------------------------------------------------------------------------
   08 · Watch
   -------------------------------------------------------------------------- */

.watch {
  position: relative;
  text-align: center;
  color: var(--cream);
  padding: 0 6vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 28px);
}
.watch__h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 44px);
  text-wrap: pretty;
  max-width: 20em;
}

/* --------------------------------------------------------------------------
   07 · The Friends — bios
   -------------------------------------------------------------------------- */

.friends {
  background: var(--cream);
  padding: clamp(56px, 9vh, 110px) 0 clamp(64px, 10vh, 120px);
}
.friends__head {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 20px);
  padding: 0 clamp(20px, 5vw, 72px);
  margin-bottom: clamp(8px, 2vh, 18px);
}
.friends__h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: 0.06em;
}
.friends__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: clamp(18px, 2.5vw, 32px);
  padding: clamp(10px, 2vh, 20px) clamp(20px, 5vw, 72px) 0;
  max-width: 1280px;
}
.friend {
  background: var(--cream-card);
  border: 1px solid rgba(0, 52, 32, 0.14);
  display: flex;
  flex-direction: column;
}
.friend__photo {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #efe4c2;
}
.friend__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.friend__body {
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.friend__name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.2vw, 25px);
  letter-spacing: 0.04em;
}
.friend__tag {
  margin: 0;
  font-style: italic;
  font-size: 15px;
  color: rgba(0, 52, 32, 0.75);
}
.friend__bio {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 300;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--green);
  color: var(--cream);
  padding: clamp(48px, 8vh, 88px) clamp(20px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 44px);
}
.footer__logo {
  width: clamp(150px, 18vw, 220px);
  height: auto;
}
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  align-items: baseline;
  font-size: 14px;
  font-weight: 300;
}
.footer__credit {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(247, 239, 214, 0.7);
}
.footer__meta a {
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-on-green);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.footer__meta a:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}
/* Inherits the credit line's mono/uppercase treatment rather than the link
   styling around it — it reads as one sentence with one word live. */
.footer__credit-link {
  color: inherit;
  letter-spacing: inherit;
}
.footer__credit-link:hover {
  color: var(--yellow);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.inquiry {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(247, 239, 214, 0.2);
  padding-top: clamp(28px, 4vh, 44px);
}
.inquiry__title {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 28px);
}
.inquiry__sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(247, 239, 214, 0.8);
  margin-bottom: 8px;
}
.inquiry__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(520px, 100%);
}
.inquiry__form textarea.field {
  resize: vertical;
  border-right: 1px solid var(--rule-on-green);
}
.inquiry__form .btn {
  align-self: flex-start;
  padding: 12px 28px;
}

.footer__legal {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(247, 239, 214, 0.45);
}

/* --------------------------------------------------------------------------
   Trailer overlay
   -------------------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 22, 13, 0.94);
  display: grid;
  place-items: center;
  padding: 4vw;
}
.overlay[hidden] {
  display: none;
}
.overlay__frame {
  width: min(1200px, 94vw);
  aspect-ratio: 16 / 9;
  border: none;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
}
.overlay__close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: var(--cream);
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 0.3s ease;
}
.overlay__close:hover {
  color: var(--yellow);
}

body.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Reduced motion — kill parallax and transforms, keep the fades.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js [data-reveal]:not(.is-in),
  .js [data-reveal].is-in {
    transform: none;
  }
  .js [data-settle],
  .js [data-settle].is-in {
    transform: none;
    transition: none;
  }
  .chapter__media {
    translate: none !important;
  }
  .cue__num span,
  .cue__line {
    animation: none;
  }
  .cue__line {
    transform: none;
  }
  .player__button:hover .player__disc {
    transform: none;
  }
}