@import url("../../sw/style.css?v=20260826-1");

:root {
  --page: #111318;
  --surface: #1b1f26;
  --surface-2: #232832;
  --line: #4b5668;
  --mustard: #bd2535;
  --yellow: #3f9ee8;
  --red: #d84954;
}

.hero h1 span { color: #61aff0; }
.parts-hero button { aspect-ratio: 16 / 10; }
.parts-hero img { height: 100%; object-fit: contain; object-position: center; }
.provenance {
  margin: 42px auto 0;
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid #79869a;
  border-left: 5px solid #d84954;
  background: linear-gradient(120deg, rgb(216 73 84 / 12%), rgb(63 158 232 / 8%));
}
.provenance span { display: block; color: #86c9ff; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.provenance strong { display: block; max-width: 920px; margin-top: 10px; font-size: clamp(1.25rem, 2.5vw, 2rem); line-height: 1.25; }
.story-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.story-grid figure { grid-column: span 4; }
.story-grid figure.wide { grid-column: span 8; }
.story-grid figure.full { grid-column: 1 / -1; }
.story-grid figure.sequence-start { grid-column: 1 / span 4; }
.story-grid figure.portrait button { aspect-ratio: 3 / 4; }
.story-grid figure.wide button, .story-grid figure.full button { aspect-ratio: 16 / 9; }
.story-grid figure.power-plate-profile button { aspect-ratio: 3 / 2; }
.film-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.film-grid figure { margin: 0; border: 1px solid var(--line); background: #090b0e; }
.film-grid video { display: block; width: 100%; max-height: 68vh; background: #000; }
.film-grid figcaption { padding: 11px 14px; color: var(--muted); font-family: var(--mono); font-size: .7rem; }
.final-pair { background: linear-gradient(135deg, rgb(216 73 84 / 8%), rgb(63 158 232 / 9%)); }

@media (max-width: 900px) {
  .story-grid figure, .story-grid figure.wide { grid-column: span 6; }
  .story-grid figure.full { grid-column: 1 / -1; }
  .story-grid figure.sequence-start { grid-column: 1 / span 6; }
}

@media (max-width: 580px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-grid figure, .story-grid figure.wide, .story-grid figure.full { grid-column: auto; }
  .story-grid figure.sequence-start { grid-column: auto; }
  .story-grid figure button, .story-grid figure.wide button, .story-grid figure.full button { aspect-ratio: 4 / 3; }
  .story-grid figure.portrait button { aspect-ratio: 3 / 4; }
  .film-grid { grid-template-columns: 1fr; }
}