* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body { margin: 0; }
.wrap { margin-inline: auto; }
a { color: inherit; text-decoration: none; }
.skip { position: fixed; top: -90px; padding: 12px; z-index: 10; }
.skip:focus { top: 0; background: var(--accent); color: var(--bg); }
.header { display: flex; justify-content: space-between; align-items: center; }
.author span { display: block; margin-top: 6px; }
.header nav { display: flex; }
.hero { padding-top: 32px; }
.eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; }
.hero-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 24px 0 28px; }
body.case-supergas h1 { margin: 0; font-size: clamp(60px, 12vw, 150px); }
.hero-heading p { max-width: 26ch; margin: 0; font-size: 20px; line-height: 1.45; }
figure { margin: 0; }
.main-film video, .scene-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; }
.case-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; padding-block: 42px; }
.case-overview p { margin: 0; font-size: 16px; line-height: 1.65; }
.case-overview .section-label { margin-bottom: 10px; font-size: 13px; }
.case-scenes { padding: 34px 0 44px; border-top: 1px solid var(--line); }
.case-scenes h2 { margin: 0 0 24px; }
.scene-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 24px 0; border-top: 1px solid var(--line); font-size: 13px; }

@media (max-width: 760px) {
  .hero { padding-top: 22px; }
  .hero-heading { display: block; margin: 20px 0; }
  .hero-heading p { margin-top: 16px; font-size: 17px; }
  .case-overview, .scene-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .case-overview { padding-block: 28px; }
}