@media (max-width: 1200px) {
  :root {
    --container: min(1460px, calc(100vw - 40px));
    --container-wide: min(1540px, calc(100vw - 20px));
    --container-copy: min(1200px, calc(100vw - 56px));
    --space-4xl: 7rem;
    --space-5xl: 8rem;
  }

  .projects__grid,
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__layout,
  .contact__layout,
  .site-footer__top {
    grid-template-columns: 1fr;
  }

  .gallery__item:nth-child(2),
  .gallery__item:nth-child(5) {
    transform: none;
  }
}

@media (max-width: 860px) {
  :root {
    --header-height: 90px;
    --space-3xl: 4.5rem;
    --space-4xl: 5.5rem;
    --space-5xl: 6.5rem;
  }

  .hero,
  .hero--split .hero__layout,
  .hero__media,
  .hero__overlay-media {
    min-height: 54vh;
  }

  .site-header__inner {
    grid-template-columns: 1fr;
    position: relative;
    min-height: 3.2rem;
  }

  .site-brand {
    justify-self: center;
    margin-inline: auto;
  }

  .menu-toggle {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    padding: calc(var(--header-height) + 1.8rem) 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.96);
    backdrop-filter: blur(14px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.25rem;
    justify-self: stretch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(110%, 0, 0);
    transition:
      transform var(--transition),
      opacity var(--transition),
      visibility 0s linear var(--transition);
    will-change: transform;
    z-index: 1;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition:
      transform var(--transition),
      opacity var(--transition),
      visibility 0s linear 0s;
  }

  .nav-link {
    font-size: 0.88rem;
  }

  .intro {
    padding-top: calc(var(--header-height) + 0.6rem);
  }

  .intro__shell {
    min-height: 72vh;
    padding: 1.5rem;
  }

  .intro__art {
    inset: 0;
    opacity: 1;
  }

  .intro__art-image {
    object-position: 50% 50% !important;
  }

  .hero__media .media-placeholder,
  .hero__overlay-media .media-placeholder {
    background-position: 50% 50% !important;
    background-size: cover !important;
  }

  .hero__content,
  .hero__overlay-panel {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    width: auto;
  }

  .hero--visual-right .hero__content,
  .hero__overlay-panel--right {
    left: 1.25rem;
    right: 1.25rem;
  }

  .media-placeholder--landscape,
  .media-placeholder--portrait-wide,
  .media-placeholder--cinematic,
  .media-placeholder--cinematic-tall,
  .media-placeholder--landscape-tall {
    min-height: 54vh;
  }

  .media-placeholder--portrait {
    min-height: 460px;
  }


}

@media (max-width: 640px) {
  :root {
    --container: min(1460px, calc(100vw - 20px));
    --container-wide: min(1540px, calc(100vw - 12px));
    --container-copy: min(1200px, calc(100vw - 24px));
    --space-3xl: 3.8rem;
    --space-4xl: 4.4rem;
    --space-5xl: 5rem;
  }

  .hero,
  .hero--split .hero__layout,
  .hero__media,
  .hero__overlay-media {
    min-height: 58vh;
  }

  .site-brand {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }

  .site-brand__logo {
    height: 1.95rem;
    max-width: 240px;
  }

  .intro__shell {
    align-content: center;
    min-height: 78vh;
    padding-bottom: 1.5rem;
  }

  .intro__art {
    inset: 0;
    opacity: 1;
  }

  .intro__art-image {
    object-position: 50% 50% !important;
  }

  .hero__media .media-placeholder,
  .hero__overlay-media .media-placeholder {
    background-position: 50% 50% !important;
    background-size: cover !important;
  }

  h1 {
    font-size: clamp(2.7rem, 11vw, 4rem);
  }

  h2 {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  .projects__grid,
  .gallery__grid {
    grid-template-columns: 1fr;
  }

  .button,
  .project-card__body .button {
    width: 100%;
  }
}







@media (max-width: 1980px) {
  .project-modal--gallery .project-modal__dialog {
    width: min(100vw - 24px, 1160px);
    max-width: min(100vw - 24px, 1160px);
  }

  .gallery-modal__content {
    width: 100%;
  }

  .gallery-modal__media-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .gallery-modal__details {
    width: 100%;
  }
}

@media (max-width: 1140px) {
  .gallery-modal__content.is-portrait {
    width: 100%;
  }

  .gallery-modal__media-frame.is-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
  }

  .gallery-modal__content.is-portrait .gallery-modal__details {
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .project-modal__dialog {
    width: min(100vw - 24px, 1680px);
  }

  .project-modal--gallery .project-modal__dialog {
    width: min(100vw - 24px, 1160px);
  }

  .project-modal__layout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .project-modal__rail {
    width: 190px;
    height: auto;
    max-height: none;
    padding: 0 10px;
    margin-top: 1rem;
  }

  .project-modal__content {
    grid-template-rows: minmax(520px, 1fr) auto;
    padding: 1rem 1rem 0;
  }

  .project-modal__media-frame {
    width: min(100%, 1000px);
  }

  .project-modal__details {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    width: min(100%, 1000px);
    justify-self: center;
    padding: 1rem 0 1.05rem;
  }
}

@media (max-width: 860px) {
  .project-modal {
    padding: 0.6rem;
  }

  .project-modal__dialog {
    width: min(100vw - 20px, 1320px);
    min-height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
  }

  .project-modal__layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
  }

  .project-modal__rail {
    order: 2;
    width: 100%;
    height: auto;
    margin-top: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.6rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.85rem 0 max(0.85rem, env(safe-area-inset-bottom));
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .project-modal__thumb {
    flex: 0 0 calc((100% - 1.2rem) / 3);
    width: calc((100% - 1.2rem) / 3);
    aspect-ratio: 1;
    min-height: 0;
  }

  .project-modal__thumb img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .project-modal__content {
    order: 1;
    grid-template-rows: auto auto;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .project-modal__media-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 32dvh;
    max-height: 52dvh;
  }

  .project-modal__media-frame::after {
    inset: 0;
  }

  .project-modal__details {
    padding: 1rem 0.95rem 1.2rem;
    border-top: none;
  }

  .gallery-modal__content {
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .gallery-modal__media-frame,
  .gallery-modal__media-frame.is-portrait {
    width: 100%;
    height: auto;
    min-height: 34dvh;
    max-height: 58dvh;
  }

  .gallery-modal__details {
    padding: 1rem 0.95rem 1.2rem;
  }
}

@media (max-width: 640px) {
  .project-modal {
    padding: 0;
  }

  .project-modal__dialog {
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border: none;
  }

  .project-modal__close {
    top: calc(env(safe-area-inset-top) + 0.7rem);
    right: calc(env(safe-area-inset-right) + 0.7rem);
    width: 2.35rem;
    height: 2.35rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
  }

  .project-modal__rail {
    gap: 0.45rem;
    padding: 0.75rem 0 max(0.75rem, env(safe-area-inset-bottom));
  }

  .project-modal__thumb {
    flex: 0 0 calc((100% - 0.9rem) / 3);
    width: calc((100% - 0.9rem) / 3);
    aspect-ratio: 1;
    min-height: 0;
  }


  .project-modal__content {
    grid-template-rows: auto auto;
    padding: 0;
  }

  .project-modal__media-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 29dvh;
    max-height: 44dvh;
  }

  .project-modal__copy h2 {
    font-size: clamp(1.9rem, 10vw, 2.85rem);
  }

  .project-modal__copy p:last-child {
    font-size: 0.9rem;
    max-width: 100%;
  }

  .project-modal__meta {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .project-modal__meta-item {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .gallery-modal__details h2 {
    font-size: clamp(1.9rem, 10vw, 2.85rem);
  }

  .gallery-modal__details p {
    font-size: 0.9rem;
    max-width: 100%;
  }
}