/* ================================================================
   SPRING — Desktop/PC Responsive Styles
   Mobile-first base: max-width 520px, single-column card layout.
   Below: progressive enhancement for wider screens.
   ================================================================ */

/* ─── Logo Panel (white bg, black text, centered, smaller) ─── */
.logo-panel{
  background:#fff;
  padding:28px var(--gutter);
  text-align:center;
}
.logo-wordmark{
  display:inline-block;
  color:#000;
  font-size:clamp(26px,3.5vw,40px);
  letter-spacing:-.04em;
  font-weight:400;
}
.logo-wordmark sup{
  font-size:7px;
  vertical-align:super;
  margin-left:2px;
}

/* ─── Gallery thumbnails: uniform SQUARE across all breakpoints ──
   Crops each image to 1:1 via object-fit:cover. Clicking still opens
   the original (uncropped) full image in the lightbox. ─── */
.gallery-item{
  cursor:zoom-in;
}
.gallery-item picture,
.gallery-item picture img,
.gallery-item img{
  display:block;
  width:100%;
}
.gallery-item picture img,
.gallery-item img{
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center;
}

/* ─── TABLET (≥768px) ───────────────────────────────────────── */
@media (min-width:768px){

  :root{
    --gutter:32px;
  }

  /* Neutralise mobile card-shell — full-width canvas */
  body{
    padding:0;
  }
  .site-shell{
    max-width:100%;
    overflow:visible;
    box-shadow:none!important;
  }

  /* ── Header ── */
  .site-header{
    min-height:80px;
    padding:18px var(--gutter) 16px;
  }
  .brand{
    font-size:16px;
  }
  .site-header nav{
    gap:28px;
    font-size:15px;
  }

  /* ── Home Intro ── */
  .home-intro{
    min-height:62svh;
    padding:120px var(--gutter) 24px;
  }
  .home-intro h1{
    max-width:680px;
    font-size:clamp(56px,6.5vw,88px);
  }
  .intro-foot{
    margin-top:72px;
  }

  /* ── Work List (2 columns) ── */
  .work-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding:0 var(--gutter);
  }
  .project-card{
    margin:0;
  }
  .project-card-media{
    aspect-ratio:1/1.14;
  }
  .project-card-copy h2{
    font-size:clamp(36px,3.2vw,56px);
  }

  /* ── Footer ── */
  .site-footer{
    padding-top:20svh;
  }
  .footer-intro{
    padding:0 var(--gutter) 80px;
  }
  .footer-intro h2{
    font-size:clamp(48px,5vw,80px);
    max-width:900px;
  }
  .footer-body{
    margin:56px 0 0 36%;
    font-size:15px;
  }
  .contact-grid{
    padding:40px var(--gutter);
    grid-template-columns:1fr 160px;
    gap:40px;
  }
  .contact-phone{
    font-size:22px;
  }
  .logo-panel{
    padding:36px var(--gutter);
  }
  .footer-bottom,
  .project-footer{
    padding:16px var(--gutter) 32px;
  }

  /* ── Project Hero ── */
  .project-hero{
    padding:14svh var(--gutter) 64px;
  }
  .project-hero h1{
    font-size:clamp(72px,8vw,140px);
  }
  .project-statement{
    max-width:560px;
    font-size:30px;
    margin-top:40px;
  }
  .project-rule{
    margin:56px 0 16px;
  }
  .project-description{
    grid-template-columns:1fr 140px;
    gap:40px;
    max-width:680px;
  }

  /* ── Film ── */
  .film-section,
  .project-gallery{
    padding:0 var(--gutter);
  }

  /* ── Gallery (single continuous grid: all thumbs flow in order) ── */
  .project-gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
  }
  /* gallery-group is now just a semantic wrapper; display:contents lets
     its .gallery-item children join the parent grid so rows never break
     between orientation groups (no empty cells / no separate rows). ── */
  .gallery-group{
    display:contents;
  }
  .gallery-item{
    margin:0!important;
  }

  /* ── Credits ── */
  .project-credits{
    padding:14svh var(--gutter);
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
  .credit-name{
    font-size:34px;
    margin-top:28px;
  }

  /* ── Next Project ── */
  .next-project{
    padding:0 var(--gutter) 24px;
  }
  .next-project strong{
    font-size:clamp(64px,6vw,110px);
  }
  .next-project picture img{
    aspect-ratio:2.2/1;
  }
}


/* ─── DESKTOP (≥1024px) ────────────────────────────────────── */
@media (min-width:1024px){

  :root{
    --gutter:48px;
  }

  /* ── Header ── */
  .site-header{
    min-height:88px;
    padding:22px var(--gutter) 20px;
  }
  .brand{
    font-size:17px;
  }
  .site-header nav{
    gap:32px;
  }

  /* ── Home Intro ── */
  .home-intro{
    min-height:68svh;
    padding:160px var(--gutter) 32px;
  }
  .home-intro h1{
    max-width:820px;
    font-size:clamp(68px,5.5vw,96px);
  }
  .intro-foot{
    margin-top:88px;
  }
  .intro-kicker{
    font-size:11px;
  }

  /* ── Work List (4 columns) ── */
  .work-list{
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .project-card-copy h2{
    font-size:clamp(24px,1.8vw,40px);
  }
  .project-card-copy p{
    font-size:11px;
  }

  /* ── Footer ── */
  .footer-intro{
    padding:0 var(--gutter) 120px;
  }
  .footer-intro h2{
    font-size:clamp(56px,4.2vw,88px);
    max-width:1100px;
  }
  .footer-intro .eyebrow{
    margin-bottom:28px;
  }
  .footer-body{
    margin:64px 0 0 40%;
    font-size:16px;
    line-height:1.4;
  }
  .contact-grid{
    padding:56px var(--gutter);
    grid-template-columns:1fr 200px;
    gap:56px;
  }
  .contact-phone{
    font-size:24px;
  }
  .contact-note{
    font-size:12px;
  }
  .logo-panel{
    padding:40px var(--gutter);
  }
  .footer-bottom,
  .project-footer{
    padding:20px var(--gutter) 40px;
  }

  /* ── Project Hero ── */
  .project-hero{
    padding:16svh var(--gutter) 80px;
  }
  .project-hero h1{
    font-size:clamp(88px,7vw,150px);
  }
  .project-statement{
    max-width:640px;
    font-size:34px;
    margin-top:48px;
  }
  .project-description{
    grid-template-columns:1fr 180px;
    gap:56px;
    max-width:760px;
    font-size:16px;
  }

  /* ── Gallery (uniform square thumbnails, max 4 per row, continuous) ──
     One single 4-column grid for the whole gallery: every thumbnail is
     the same size and they fill row-by-row in source order, no matter how
     the orientation groups were split in the HTML. ── */
  .project-gallery{
    grid-template-columns:repeat(4,1fr);
    gap:24px;
  }
  .gallery-group{
    display:contents;
  }
  /* thumbnail affordance */
  .gallery-item{
    cursor:zoom-in;
  }
  .gallery-item img{
    transition:opacity .2s ease;
  }
  .gallery-item:hover img{
    opacity:.82;
  }
  /* kill any residual staggered offsets (clean square grid) */
  .gallery-item,
  .gallery-item:nth-child(even),
  .gallery-item:nth-child(3n+2){
    margin:0!important;
  }

  /* ── Credits ── */
  .project-credits{
    padding:16svh var(--gutter);
    gap:56px;
  }
  .credit-name{
    font-size:38px;
  }

  /* ── Next Project ── */
  .next-project strong{
    font-size:clamp(72px,5vw,120px);
  }
  .next-project picture img{
    aspect-ratio:2.5/1;
  }
}


/* ─── LARGE DESKTOP (≥1440px) ───────────────────────────────── */
@media (min-width:1440px){

  :root{
    --gutter:64px;
  }

  .site-shell{
    max-width:1600px;
    margin:0 auto;
  }

  /* ── Home Intro ── */
  .home-intro{
    min-height:72svh;
    padding:180px var(--gutter) 40px;
  }
  .home-intro h1{
    max-width:900px;
    font-size:clamp(80px,5vw,112px);
  }

  /* ── Work List ── */
  .work-list{
    gap:32px;
  }
  .project-card-copy h2{
    font-size:clamp(28px,2vw,48px);
  }

  /* ── Footer ── */
  .footer-intro h2{
    font-size:clamp(64px,3.8vw,96px);
    max-width:1200px;
  }

  /* ── Project Hero ── */
  .project-hero h1{
    font-size:clamp(96px,6.2vw,168px);
  }
  .project-statement{
    max-width:720px;
    font-size:38px;
  }
  .project-description{
    max-width:820px;
  }

  /* ── Gallery ── */
  .project-gallery{
    gap:32px;
  }

  /* ── Credits ── */
  .project-credits{
    gap:64px;
  }
  .credit-name{
    font-size:42px;
  }

  /* ── Next Project ── */
  .next-project strong{
    font-size:clamp(80px,4.5vw,136px);
  }
}

/* ─── Lightbox (click a gallery thumbnail to view the full image) ─── */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:5vmin;
  background:rgba(12,12,12,.94);
  cursor:zoom-out;
}
.lightbox.open{
  display:flex;
}
.lightbox-img{
  max-width:92vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.lightbox-close{
  position:fixed;
  top:18px;
  right:22px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.lightbox-close:hover{
  background:rgba(255,255,255,.28);
}
.lightbox-cap{
  position:fixed;
  bottom:20px;
  left:0;
  right:0;
  text-align:center;
  color:rgba(255,255,255,.82);
  font-size:13px;
  letter-spacing:.05em;
}