/* ==========================================================================
   Phrane — responsive.css
   Intentional mobile / tablet compositions rather than shrunken desktops.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1280px — laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .work-grid .project-card--large { grid-column: span 7; }
  .work-grid .project-card--standard { grid-column: span 5; }
  .work-grid .project-card--tall { grid-column: span 4; }
}

/* --------------------------------------------------------------------------
   ≤ 1024px — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --header-h: 72px;
  }

  .site-header__status {
    display: none;
  }

  .intro__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .intro__aside {
    flex-direction: row;
    align-items: baseline;
    gap: 18px;
    border-left: 0;
    border-top: 1px solid rgba(232, 221, 197, 0.18);
    padding: 16px 0 0;
  }

  .featured__grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .index-grid {
    grid-template-columns: 1fr;
  }
  .index-grid__item {
    border-right: 0;
    border-bottom: 1px solid rgba(232, 221, 197, 0.12);
  }
  .index-grid__item:last-child {
    border-bottom: 0;
  }

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

  .project-copy {
    grid-template-columns: 1fr;
  }

  .project-related__grid {
    grid-template-columns: 1fr 1fr;
  }

  .about {
    grid-template-columns: 1fr;
  }
  .disciplines {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__meta {
    align-items: flex-start;
  }
}

/* --------------------------------------------------------------------------
   ≤ 768px — mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
  }

  .cursor {
    display: none;
  }

  .site-header__brand-note {
    display: none;
  }

  .menu__inner {
    grid-template-rows: auto 1fr auto;
    padding-top: calc(var(--header-h) + 24px);
  }
  .menu__list {
    justify-content: flex-start;
    padding-top: 20px;
  }
  .menu__link {
    font-size: clamp(2.2rem, 10vw, 3.4rem);
  }
  .menu__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .hero__inner {
    justify-content: flex-end;
    padding-top: calc(var(--header-h) + 20px);
  }
  .hero__title {
    font-size: clamp(4rem, 22vw, 8rem);
  }
  .hero__nav {
    flex-direction: column;
    gap: 14px;
    margin-top: 32px;
  }
  .hero__scroll {
    display: none;
  }
  .hero__sub {
    margin-top: 22px;
  }

  .intro {
    padding: 80px var(--gutter);
  }
  .intro__lede {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }
  .intro__aside-count {
    font-size: 2.6rem;
  }

  .featured__grid {
    gap: 48px;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .work-grid .project-card--large,
  .work-grid .project-card--standard,
  .work-grid .project-card--wide,
  .work-grid .project-card--tall,
  .work-grid .project-card--standard:nth-of-type(3n) {
    grid-column: span 1;
  }
  .project-card--wide .project-card__media,
  .project-card--large .project-card__media {
    aspect-ratio: 4 / 5;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 10px;
  }
  .gallery__item:nth-child(n) {
    grid-column: span 1;
    grid-row: span 1;
  }
  .gallery__item:nth-child(6n + 1) {
    grid-column: span 2;
  }
  .gallery__item:nth-child(6n + 6) {
    grid-column: span 2;
    grid-row: span 1;
  }
  .gallery__meta {
    opacity: 1;
    transform: none;
    left: 10px;
    bottom: 10px;
    right: 10px;
  }
  .gallery__caption {
    font-size: 0.9rem;
  }

  .film-entry {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "num title arrow"
      "num role role";
    row-gap: 8px;
  }
  .film-entry__num { grid-area: num; }
  .film-entry__title { grid-area: title; }
  .film-entry__role { grid-area: role; }
  .film-entry__loc { display: none; }
  .film-entry__arrow { grid-area: arrow; align-self: center; }
  .film-preview {
    display: none;
  }

  .project-hero__title {
    font-size: clamp(2.8rem, 14vw, 5rem);
  }
  .project-body {
    grid-template-columns: 1fr;
  }
  .project-media--full,
  .project-media--half,
  .project-media--third {
    grid-column: span 1;
  }
  .project-media--full { aspect-ratio: 4 / 3; }
  .project-media--half { aspect-ratio: 4 / 3; }
  .project-media--third { aspect-ratio: 3 / 4; }

  .project-related__grid {
    grid-template-columns: 1fr;
  }

  .page-head__title {
    font-size: clamp(3rem, 18vw, 5.5rem);
  }

  .contact-hero__line {
    font-size: clamp(2.4rem, 14vw, 4rem);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .lightbox__bar {
    gap: 14px;
    flex-wrap: wrap;
  }
  .lightbox__project {
    order: 3;
    width: 100%;
    text-align: left;
  }
  .lightbox__nav {
    width: 44px;
    height: 44px;
  }
}

/* --------------------------------------------------------------------------
   ≤ 480px — small phones
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hero__eyebrow {
    gap: 8px;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
  .hero__title {
    font-size: clamp(3.6rem, 24vw, 6rem);
  }
  .hero__nav-word {
    font-size: 1.2rem;
  }

  .project-card__body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "meta";
  }
  .project-card__index {
    display: none;
  }

  .contact-form__submit {
    width: 100%;
    justify-content: space-between;
  }
}