:root {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html {
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: rgba(168, 115, 47, .24);
}

button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

img,
video,
iframe {
  height: auto;
}

@media (max-width: 980px) {
  .topbar {
    position: relative;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-links a,
  .btn,
  .contact-cta {
    min-height: 44px;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    white-space: normal;
  }

  .hero {
    min-height: 620px;
    min-height: min(720px, 100svh);
  }

  .hero-actions {
    gap: 10px;
  }

  .detail-media {
    min-height: 300px;
  }

  .still-grid img {
    min-height: 220px;
  }

  .exposure-meter {
    padding: 14px;
  }

  .exposure-visual svg {
    width: 100%;
    max-width: 360px;
  }

  .exposure-control input {
    min-height: 44px;
  }

  .scene-select select,
  input,
  select,
  textarea {
    min-height: 48px;
    font-size: 16px;
  }

  iframe,
  video {
    width: 100%;
  }

  .footer {
    padding-bottom: 34px;
  }
}

@supports (padding: max(0px)) {
  @media (max-width: 980px) {
    .topbar {
      padding-top: max(16px, env(safe-area-inset-top));
    }

    .topbar,
    .section,
    .page-hero,
    .detail-hero {
      padding-left: max(20px, env(safe-area-inset-left));
      padding-right: max(20px, env(safe-area-inset-right));
    }

    .footer {
      padding-bottom: max(34px, env(safe-area-inset-bottom));
    }
  }
}

@media (max-width: 520px) {
  .hero-actions {
    grid-template-columns: 1fr;
  }

  .page-hero h1,
  .detail-hero h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .credits {
    grid-template-columns: 1fr;
  }

  .exposure-controls {
    grid-template-columns: 1fr;
  }

  .diary-grid,
  .archive-grid,
  .reference-board,
  .reference-video-grid,
  .lab-grid,
  .service-grid,
  .client-grid,
  .contact-cta-grid,
  .project-grid,
  .work-grid,
  .diary-card,
  .archive-card,
  .reference-card,
  .reference-video-card,
  .lab-card,
  .service-card,
  .client-card,
  .contact-cta,
  .project-card {
    max-width: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  .project-card:hover img,
  .work-card:hover img {
    transform: none;
  }
}