/* Frame 04 — THE STORY  (rip-and-replace v7)
   Static 3-beat editorial sequence. One beat visible at a time via
   .is-active. No fades, no opacity inheritance traps. */

.frame[data-frame="04"] {
  background: #000;
  overflow: hidden;
  cursor: pointer;
}

.frame[data-frame="04"] .story-stage {
  position: absolute;
  inset: 0;
}

/* ---------- Beat container (auto-rotating crossfade) ---------- */
.frame[data-frame="04"] .story-beat {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in-out;
}
.frame[data-frame="04"] .story-beat.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Photo (full-bleed, no fade, no filter) ---------- */
.frame[data-frame="04"] .story-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  z-index: 1;
}

/* ---------- Full-bleed black darken over photo ---------- */
.frame[data-frame="04"] .story-darken {
  position: absolute;
  inset: 0;
  background: #000000;
  opacity: 0.30;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Letterbox bars ---------- */
.frame[data-frame="04"] .letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  background: #000000;
  pointer-events: none;
  z-index: 6;
}
.frame[data-frame="04"] .letterbox--top    { top: 0; }
.frame[data-frame="04"] .letterbox--bottom { bottom: 0; }

/* ---------- Top-left headline ---------- */
.frame[data-frame="04"] .story-headline {
  position: absolute;
  top: 64px;
  left: 40px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.frame[data-frame="04"] .story-headline-line {
  font-family: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
  font-size: 46px;
  line-height: 1.0;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
  opacity: 1;
}
.frame[data-frame="04"] .story-headline-line--white {
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
}
.frame[data-frame="04"] .story-headline-line--gold {
  color: #d4a017;
  -webkit-text-fill-color: #d4a017;
}

/* ---------- Top-right serial mark ---------- */
.frame[data-frame="04"] .story-serial {
  position: absolute;
  top: 64px;
  right: 40px;
  z-index: 5;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #d4a017;
  -webkit-text-fill-color: #d4a017;
  text-transform: uppercase;
  opacity: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- Bottom-left scrim plate (its own element, sibling of text) ----------
   Plate sits at z-index 3 with background #000 and opacity 0.55.
   Text sits at z-index 4 at the same coordinates, opacity 1.
   The plate is NOT an ancestor of the text, so the 0.55 element-opacity
   does not bleed into the white. */
.frame[data-frame="04"] .story-scrim-plate {
  position: absolute;
  left: 40px;
  bottom: 60px;
  width: 440px;
  height: auto;
  /* Plate is sized to match the text block — same width, padded vertically
     to account for the 28px text padding on each side. We use top/bottom
     anchoring on a sized rectangle: width 440px, computed height matches
     content via a sibling that drives layout (the .story-text block).
     Since we're absolute-positioned, we explicitly size the plate to
     overlap the text exactly: 440px wide, auto height won't work for an
     absolute element, so we mirror the text block's box with bottom:60px
     and a min-height. The text block's own padding gives the cushion. */
  min-height: 180px;
  padding: 0;
  background: #000000;
  opacity: 0.55;
  z-index: 3;
  pointer-events: none;
}

.frame[data-frame="04"] .story-text {
  position: absolute;
  left: 40px;
  bottom: 60px;
  width: 440px;
  padding: 28px;
  box-sizing: border-box;
  z-index: 4;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The plate sizes itself off the same absolute coordinates as the text,
   so they share the same box. Both use box-sizing:border-box-equivalent
   geometry: left:40px / bottom:60px / width:440px. The text block's
   padding pushes its content inward; the plate is unpadded and fills
   the rectangle. */
.frame[data-frame="04"] .story-scrim-plate {
  box-sizing: border-box;
  /* F04 precision v8 — museum-card hairline border */
  outline: 0.5px solid #d4a017;
}

/* ---------- Text elements inside .story-text ---------- */
.frame[data-frame="04"] .story-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 3.5px;
  color: #d4a017;
  -webkit-text-fill-color: #d4a017;
  text-transform: uppercase;
  opacity: 1;
  margin: 0;
}

.frame[data-frame="04"] .story-italic {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  opacity: 1;
  margin: 0;
}

.frame[data-frame="04"] .story-body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #FFFFFF;
  -webkit-text-fill-color: #FFFFFF;
  opacity: 1;
  margin: 0;
}

/* ---------- Reduced motion: no-op (nothing animates anyway) ---------- */
@media (prefers-reduced-motion: reduce) {
  .frame[data-frame="04"] .story-photo { animation: none; transform: none; }
}

/* ============================================================
   F04 PRECISION PASS — v8 (additive only)
   Museum-card corner brackets, photo corner brackets, eyebrow rule,
   two-line serial mark, aspect-ratio marker, frame counter.
   All gold #d4a017. Sits above darken (z2) below text (z4) where
   relevant; serial+aspect+frame-count sit at z5 alongside headline.
   ============================================================ */

/* ---------- A2. Plate L-bracket corner marks ----------
   Each bracket is a 12x12 box with two adjacent 1px gold borders.
   Anchored to the same rectangle as the plate (left:40 / bottom:60 /
   width:440 / min-height:180). */
.frame[data-frame="04"] .story-plate-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.8;
}
.frame[data-frame="04"] .story-plate-corner--tl {
  left: 40px;
  bottom: calc(60px + 180px - 12px);
  border-top:  1px solid #d4a017;
  border-left: 1px solid #d4a017;
}
.frame[data-frame="04"] .story-plate-corner--tr {
  left: calc(40px + 440px - 12px);
  bottom: calc(60px + 180px - 12px);
  border-top:   1px solid #d4a017;
  border-right: 1px solid #d4a017;
}
.frame[data-frame="04"] .story-plate-corner--bl {
  left: 40px;
  bottom: 60px;
  border-bottom: 1px solid #d4a017;
  border-left:   1px solid #d4a017;
}
.frame[data-frame="04"] .story-plate-corner--br {
  left: calc(40px + 440px - 12px);
  bottom: 60px;
  border-bottom: 1px solid #d4a017;
  border-right:  1px solid #d4a017;
}

/* ---------- A3. Hairline rule under the eyebrow ---------- */
.frame[data-frame="04"] .story-eyebrow-rule {
  width: 48px;
  height: 0.5px;
  background: #d4a017;
  margin: 6px 0 0 0;
  align-self: flex-start;
}

/* ---------- B4. Photo L-bracket corner marks ----------
   18x18 boxes with 1.2px gold borders. Photo's visible rectangle is
   inset 36px top/bottom by letterbox bars. Inset another 16px. */
.frame[data-frame="04"] .story-photo-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.75;
}
.frame[data-frame="04"] .story-photo-corner--tl {
  top: calc(36px + 16px);
  left: 16px;
  border-top:  1.2px solid #d4a017;
  border-left: 1.2px solid #d4a017;
}
.frame[data-frame="04"] .story-photo-corner--tr {
  top: calc(36px + 16px);
  right: 16px;
  border-top:   1.2px solid #d4a017;
  border-right: 1.2px solid #d4a017;
}
.frame[data-frame="04"] .story-photo-corner--bl {
  bottom: calc(36px + 16px);
  left: 16px;
  border-bottom: 1.2px solid #d4a017;
  border-left:   1.2px solid #d4a017;
}
.frame[data-frame="04"] .story-photo-corner--br {
  bottom: calc(36px + 16px);
  right: 16px;
  border-bottom: 1.2px solid #d4a017;
  border-right:  1.2px solid #d4a017;
}

/* ---------- B5. Serial mark — two-line stacked ----------
   Override the v7 single-line .story-serial styling. The new container
   is a right-aligned flex column; children own type styles. */
.frame[data-frame="04"] .story-serial {
  position: absolute;
  top: calc(36px + 18px);
  right: 32px;
  z-index: 5;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color: #d4a017;
  -webkit-text-fill-color: #d4a017;
  text-transform: uppercase;
  opacity: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* unset v7 single-line bits */
  font-size: initial;
  letter-spacing: initial;
  white-space: normal;
}
.frame[data-frame="04"] .story-serial-num {
  font-size: 13px;
  letter-spacing: 2.5px;
  line-height: 1;
}
.frame[data-frame="04"] .story-serial-rule {
  width: 50px;
  height: 0.5px;
  background: #d4a017;
  opacity: 0.6;
  margin: 6px 0;
}
.frame[data-frame="04"] .story-serial-tag {
  font-size: 11px;
  letter-spacing: 4px;
  line-height: 1;
}

/* ---------- B6. Aspect ratio marker (bottom-left of photo) ---------- */
.frame[data-frame="04"] .story-aspect {
  position: absolute;
  bottom: calc(36px + 12px);
  left: 32px;
  z-index: 5;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #d4a017;
  -webkit-text-fill-color: #d4a017;
  text-transform: uppercase;
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- B7. Frame counter (bottom-right of photo) ---------- */
.frame[data-frame="04"] .story-frame-count {
  position: absolute;
  bottom: calc(36px + 12px);
  right: 32px;
  z-index: 5;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: #d4a017;
  -webkit-text-fill-color: #d4a017;
  text-transform: uppercase;
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
}


/* ---------- Click-through progress indicator ---------- */
.frame[data-frame="04"] .story-progress {
  position: absolute;
  bottom: 64px;
  right: 40px;
  z-index: 7;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(245, 243, 238, 0.7);
  pointer-events: none;
  transition: color 0.4s ease;
}
.frame[data-frame="04"] .story-progress.is-cta {
  color: #d4a017;
  letter-spacing: 4px;
}