/* SCENE 14 — GRMH PRODUCTIONS (ink). Cinematic chapter: 60vh parallax
   still band, four hairline portal-door cards, visible terms as a
   small ruled list, italic display close. CSS keeps everything visible
   by default: hidden/initial states are set only in the non-static JS
   branch. */

.s14 { padding-block: 150px 150px; }

.s14-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.s14-name { font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.s14 .pill {
  position: relative;
  top: -4px; /* baseline nudge; transform stays free for the JS tweens */
}

.s14-h2 {
  margin-top: var(--rhythm-eyebrow);
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  max-width: 26ch;
}
.s14-h2 + .s14-body { margin-top: var(--rhythm-headline); }

/* ---------- the 60vh parallax still band ---------- */

.s14-band {
  position: relative;
  height: 60vh;
  margin-top: 120px;
  overflow: hidden;
}
.s14-media {
  position: absolute;
  inset: -10% 0; /* travel headroom: the scrub never reveals an edge */
  will-change: transform;
}
/* quiet ink wash so the band sits inside the chapter, not apart */
.s14-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(18, 22, 26, .42) 0%,
    rgba(18, 22, 26, .08) 30%,
    rgba(18, 22, 26, .08) 70%,
    rgba(18, 22, 26, .46) 100%);
}

/* ---------- the four portal doors: hairline cards ---------- */

.s14-doors {
  margin-top: 120px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.s14-door {
  position: relative;
  display: block;
  border: 1px solid var(--hair);
  padding: 34px 30px 38px;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.s14-door:hover {
  border-color: var(--gold);
  background: rgba(189, 154, 95, .05);
}
/* the doorframe: a 1px vertical line that opens on hover */
.s14-door::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  right: 26px;
  width: 1px;
  background: var(--gold);
  opacity: .35;
  transform: scaleY(.35);
  transform-origin: top center;
  transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.s14-door:hover::after { transform: scaleY(1); opacity: .8; }

.s14-door-num {
  display: block;
  font-size: .66rem;
  font-weight: 300;
  letter-spacing: .24em;
  color: var(--gold);
}
.s14-door-title {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 340;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.s14-door-line {
  display: block;
  margin-top: 12px;
  padding-right: 28px; /* clear of the doorframe line */
  font-size: .86rem;
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--bone) 66%, transparent);
  max-width: 44ch;
}

/* ---------- the five terms: small ruled list, always visible ---------- */

.s14-terms { margin-top: 120px; max-width: 62ch; }
.s14-terms li {
  position: relative;
  padding: 14px 0 16px;
  font-size: .78rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--bone) 62%, transparent);
}
.s14-term-rule {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: .35;
}
.s14-term-rule--end { top: auto; bottom: 0; }

/* ---------- closing line: italic display, alone ---------- */

.s14-close {
  margin-top: 140px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: color-mix(in srgb, var(--bone) 88%, transparent);
  max-width: 30ch;
}

@media (max-width: 899px) {
  .s14 { padding-block: 104px 104px; }
  .s14-band { height: 48vh; margin-top: 88px; }
  .s14-doors { grid-template-columns: 1fr; margin-top: 88px; }
  .s14-terms { margin-top: 88px; }
  .s14-close { margin-top: 96px; }
}
@media (max-width: 480px) {
  .s14 .pill { white-space: normal; }
  .s14-door { padding: 28px 22px 30px; }
}