/* ================================================================
   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;
}

/* ─── 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 (orientation-grouped, top-aligned) ── */
  .project-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
  }
  .gallery-group{
    display:contents;
  }
  .gallery-group:last-child{
    margin-bottom:0;
  }
  .gallery-item{
    margin:0!important;
  }
  .gallery-item picture{
    display:block;
    width:100%;
  }
  .gallery-item img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    cursor:zoom-in;
    transition:transform .4s ease,filter .4s ease;
  }
  .gallery-item:hover img{
    transform:scale(1.03);
    filter:brightness(1.04);
  }
  .gallery-item figcaption{
    display:none;
  }

  /* ── 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 Gallery (PC: up to 4 thumbnails/row) ── */
  .project-gallery{
    grid-template-columns:repeat(4,1fr);
  }

  /* ── 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 (3 columns, top-aligned) ── */
  .gallery-group{
    grid-template-columns:1fr;
    gap:24px;
  }
  .gallery-group.count-1{
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }
  /* kill any residual staggered offsets */
  .gallery-item,
  .gallery-item:nth-child(even),
  .gallery-item:nth-child(3n+2){
    margin-top: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 ── */
  .gallery-group{
    gap:32px;
  }

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

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

/* ── Gallery Lightbox (click thumbnail → full image) ── */
.gl-overlay{
  position:fixed;inset:0;z-index:9999;
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:4vmin;background:rgba(15,14,13,.94);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.gl-overlay.is-open{display:flex;}
.gl-overlay img{
  max-width:92vw;max-height:80vh;width:auto;height:auto;object-fit:contain;
  background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.gl-caption{
  color:#f3efe9;margin-top:16px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;opacity:.82;text-align:center;
}
.gl-close,.gl-prev,.gl-next{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-family:inherit;line-height:1;opacity:.78;transition:opacity .2s;
}
.gl-close:hover,.gl-prev:hover,.gl-next:hover{opacity:1;}
.gl-close{top:16px;right:22px;font-size:40px;}
.gl-prev,.gl-next{top:50%;transform:translateY(-50%);font-size:52px;padding:8px 16px;}
.gl-prev{left:12px;}
.gl-next{right:12px;}