/* Our Story extends the existing editorial type, colors and section rhythm. */
.story-dark { --text: var(--white); --muted: var(--white); --line: var(--yellow); background: var(--black); color: var(--white); }
.story-dark h2, .story-dark h3 { color: var(--yellow); }
.story-dark .note-number { color: var(--white); }
.story-opening { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 7%; align-items: center; padding-block: var(--section-space); }
.story-opening h1 { font-family: var(--display-font); font-weight: 400; font-size: clamp(48px, 6.1vw, 94px); letter-spacing: -.065em; line-height: .98; margin-bottom: 38px; }
.story-opening h1 .display-line + .display-line { margin-top: .04em; }
.story-opening-copy > p:last-child { margin-top: 24px; }
.story-portrait { margin: 0; min-width: 0; }
.story-portrait img { width: 100%; height: auto; }
.story-portrait figcaption { padding-top: 14px; font-size: 13px; }
.story-timeline { align-items: start; padding-block: var(--section-space); }
.story-room-photo, .story-construction-photo { margin: 0; min-width: 0; }
.story-room-photo img, .story-construction-photo img { width: 100%; height: auto; }
.story-construction-photo { margin-top: 24px; }
.story-timeline .space-notes > div { border-top: 2px solid var(--yellow); }
.story-timeline .note-number { font-family: var(--display-font); font-size: 24px; letter-spacing: -.03em; }
@media (max-width: 760px) {
  .story-opening { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .story-opening h1 { font-size: clamp(44px, 10.3vw, 76px); margin-bottom: 28px; }
}