html { scroll-behavior: auto; scroll-padding-top: 92px; }
.page.is-active { animation: none; }
.about-film { position: relative; isolation: isolate; overflow: hidden; min-height: 620px; min-height: min(760px, calc(100svh - 72px)); background: #091720; color: #fff; }
.about-film__media { position: absolute; inset: 0 0 0 22%; z-index: -2; }
.about-film__media img, .about-film__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.about-film__media video { opacity: 0; transition: opacity 250ms ease; }
.about-film.is-playing .about-film__media video { opacity: 1; }
.about-film::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #091720 4%, rgba(9,23,32,.94) 22%, rgba(9,23,32,.5) 48%, rgba(9,23,32,.08) 78%), linear-gradient(0deg, rgba(9,23,32,.72), transparent 28%); }
.about-film__content { display: flex; flex-direction: column; justify-content: center; min-height: inherit; padding-block: 70px 120px; }
.about-film__content h1 { margin: 0; max-width: 17ch; color: #fff; font-family: var(--font-body); font-size: clamp(2.8rem, 4.7vw, 4.8rem); font-weight: 600; line-height: 1.06; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 2px 20px #07101840; }
.about-film__label { margin: 0 0 24px; color: #dae9d0; font-size: .95rem; font-weight: 500; }
.about-film__word { white-space: nowrap; }
.about-film__bottom { position: absolute; bottom: 30px; left: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.about-film__continue { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; font-size: .9rem; font-weight: 500; text-decoration: none; }
.about-film__continue svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.about-film__continue:hover { text-decoration: underline; text-underline-offset: 5px; }
.about-film__toggle { min-height: 44px; padding: 10px 16px; border: 1px solid #adbdc2; border-radius: 6px; background: #091720b8; color: #fff; font-size: .8rem; cursor: pointer; }
.about-film :focus-visible { outline: 2px solid #c5eb64; outline-offset: 5px; }
.about-film__toggle[hidden] { display: none; }
.about-story { padding-block: clamp(45px, 6vw, 78px); border-bottom: 1px solid var(--paper-line); scroll-margin-top: 0; }
.about-story__inner { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(30px, 5vw, 65px); align-items: start; }
.about-story h2 { max-width: 17ch; font-family: var(--font-body); font-size: clamp(2rem, 3.1vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.about-story__copy { max-width: 64ch; }
.about-story p { color: var(--ink-soft); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.7; }
.about-story p + p { margin-top: 20px; }
.about-story strong { color: var(--ink); font-weight: 600; }
#page-about .section { scroll-margin-top: 0; }
@media (max-width: 900px) {
  .nav__links:not(.is-open) { display: none; }
  .nav__links.is-open { display: flex; transform: none; }
  .about-film { min-height: 580px; }
  .about-film__media { left: 15%; }
  .about-film__content h1 { max-width: 16ch; font-size: clamp(2.8rem, 5.5vw, 4rem); }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 84px; }
  .about-film { min-height: 0; }
  .about-film__media { inset: 0 0 auto; height: auto; aspect-ratio: 16 / 9; }
  .about-film__media img, .about-film__media video { object-fit: contain; object-position: center top; }
  .about-film::after { background: linear-gradient(0deg, #091720 0%, #091720 48%, rgba(9,23,32,.3) 72%, transparent 90%); }
  .about-film__content { min-height: 0; padding-top: calc(56.25vw - 10px); padding-bottom: 95px; }
  .about-film__label { margin-bottom: 16px; font-size: .83rem; }
  .about-film__content h1 { max-width: 19ch; font-size: clamp(2.05rem, 8.7vw, 3.35rem); line-height: 1.07; letter-spacing: -.035em; }
  .about-film__bottom { bottom: 22px; gap: 16px; }
  .about-film__continue { font-size: .82rem; }
  .about-film__toggle { padding: 9px 12px; font-size: .76rem; }
  .about-story__inner { grid-template-columns: 1fr; gap: 25px; }
  .about-story h2 { max-width: 22ch; }
}
@media (prefers-reduced-motion: reduce) {
  .about-film__media video { transition: none; }
}