/* Strive Haus — portfolio, in the poster style of the landing.
   The films are filed in glass folders: folders.css + films.js, data from /work-data.js. */

html { scroll-behavior: smooth; }
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 60; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip-link:focus { top: 16px; }
.lab a { color: inherit; }

/* ---------- Top: the light, the headline ---------- */
.poster.top { height: auto; min-height: 0; overflow: visible; z-index: 0; padding: clamp(170px, 30vh, 280px) 0 clamp(64px, 9vh, 110px); }
.sky { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; pointer-events: none; }
.top-copy { position: relative; z-index: 4; text-align: center; padding: 0 var(--edge); }
.top-copy h1 { margin: 0 auto; max-width: 15em; font: 500 clamp(30px, 3.1vw, 46px)/1.1 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }
.top-copy p { margin: 16px auto 0; max-width: 34em; font: 500 clamp(15px, 1.1vw, 17px)/1.5 var(--sans); color: var(--muted); text-wrap: balance; }

/* one layer of grain over the whole page, so no section has an edge */
.page-grain { position: fixed; inset: 0; z-index: 50; }

/* ---------- The films ---------- */
.films { position: relative; z-index: 2; padding: 0 0 clamp(96px, 12vw, 160px); scroll-margin-top: 24px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 calc(var(--edge) + 24px); }

/* ---------- Closing: STRIVE again, rising into the light ---------- */
.poster.closing { height: 100vh; height: 100svh; min-height: 560px; border-top: 1px solid rgba(10, 10, 10, .06); }
.closing .hero-copy { top: 40%; }
.closing h2 { margin: 0; font: 500 clamp(30px, 3.1vw, 46px)/1.1 var(--sans); letter-spacing: -0.035em; text-wrap: balance; }

@media (max-width: 768px) {
    .wrap { padding: 0 16px; }
    .top-copy { text-align: left; }
    .top-copy .actions { justify-content: flex-start; }
    .top-copy .btn { min-width: 0; }
    .closing .hero-copy { top: 30%; }
    .closing h2 { font-size: clamp(24px, 6.6vw, 30px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }