/* ---------- Project subpage styles (Figma 1:62 images / 2:37 video) ---------- */
:root{
  --bg:#F2F2F2;
  --ink:#000000;
  --font-head:"Helvetica Neue Condensed Bold","HelveticaNeue-CondensedBold",
              "Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --font-body:"Roboto",Arial,sans-serif;

  --grid-cols:12;
  --page-pad:18px;

  /* Header uses the exact same formula as the landing page (index.html)
     so "Noé Felleg / Colorist" sits at an identical position and size
     on every page, regardless of content below it. */
  --fs-head:clamp(20px, min(2.9vw, 5vh), 50px);   /* 50px @1728 — landing reference */
  --fs-title:clamp(26px, 2.9vw, 50px);   /* 50px @1728 */
  --fs-credits:clamp(12px, 0.87vw, 15px);/* 15px @1728 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  min-height:100vh;
}

/* ---------- Header: identical to the landing page ---------- */
.site-header{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  padding-inline:var(--page-pad);
  padding-top:4.9vh; /* matches .page padding-top on the landing page */
}
.name,.role{
  font-family:var(--font-head);
  font-weight:700;
  font-stretch:87.5%;
  font-size:var(--fs-head);
  line-height:normal;
  text-transform:uppercase;
  white-space:nowrap;
  color:inherit;
  text-decoration:none;
}
.name{grid-column:2 / 8}
.role{grid-column:8 / 12;justify-self:end}

/* ---------- Project title + credits, centered ---------- */
.project-head{
  text-align:center;
  margin-top:clamp(48px, 5.6vw, 96px); /* 211-115 @1728 */
  padding-inline:var(--page-pad);
}
.project-title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:var(--fs-title);
  line-height:normal;
}
.project-credits{
  font-weight:300;
  font-size:var(--fs-credits);
  line-height:normal;
  margin-top:clamp(6px, 0.64vw, 11px);
}
.project-credits b{font-weight:700}

/* ---------- Content column: shares the header's grid, so the video/stills
     band lines up edge-to-edge with "Noé Felleg" (left) and "Colorist"
     (right) in every viewport ---------- */
.content{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));
  padding-inline:var(--page-pad);
  margin-top:clamp(40px, 5.7vw, 98px); /* 385-287 @1728 */
  padding-bottom:clamp(60px, 6.5vw, 113px);
}
.content > *{grid-column:2 / 12}

/* ---------- Video embeds: 16:9, full content width ---------- */
.video{
  position:relative;
  aspect-ratio:16 / 9;
  background:#000;
}
.video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.video + .video,
.video + .stills,
.stills + .video{
  margin-top:clamp(40px, 5.5vw, 95px); /* 1237-1142 @1728 */
}

/* ---------- Stills grid: 3 columns, no gaps, 16:9 cells ---------- */
.stills{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.still{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:none;
  cursor:zoom-in;
}
.still img{
  display:block;
  width:100%;
  aspect-ratio:449.444 / 253;
  object-fit:cover;
}

/* ---------- Lightbox: dims the page, shows the still full-size;
     prev/next overlay the image's left/right edges to step through
     the set. Closes via backdrop click or Escape (no X button). ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.85);
  border:0;
  padding:0;
  cursor:default;
}
.lightbox-stage{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  max-width:94vw;
  max-height:92vh;
}
.lightbox-frame{
  position:relative;
  display:flex;
  max-width:80vw;
  max-height:88vh;
}
.lightbox-frame img{
  display:block;
  max-width:80vw;
  max-height:88vh;
  width:auto;
  height:auto;
  object-fit:contain;
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:clamp(32px,4.5vw,48px);
  height:clamp(32px,4.5vw,48px);
  border-radius:50%;
  border:0;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-size:clamp(18px,2.2vw,26px);
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}
.lightbox-nav:hover{background:rgba(0,0,0,.75)}
.lightbox-prev{left:clamp(8px,1.5vw,18px)}
.lightbox-next{right:clamp(8px,1.5vw,18px)}

/* ---------- Mobile: 4-column system, full-width single column ---------- */
@media (max-width:767px){
  :root{
    --grid-cols:4;
    --page-pad:20px;
    --fs-head:clamp(16px, min(5.1vw, 3vh), 24px); /* landing reference */
  }
  .site-header{padding-top:2.7vh} /* matches .page padding-top on the landing page (mobile) */
  .name{grid-column:1 / 3}
  .role{grid-column:3 / 5}
  .content > *{grid-column:1 / 5} /* full-bleed, matching the mobile header's span */
  .stills{grid-template-columns:repeat(2,1fr)}
}