/*
   Latest UI reference — Ref/ui use
   --------------------------------
   Detail pages follow the supplied long-form project boards:
   black canvas, centered vertical lockup, condensed category heading,
   full-bleed hero media, centered case-study copy, and a visual montage.
*/
:root{
  --ui-use-gutter:clamp(1rem,6.35vw,4.25rem);
  --ui-use-copy:#aaa7a4;
  --ui-use-soft:#c8c5c2;
}

/* The reference artboards are presentation pages, so the detail view gets
   the whole viewport instead of reserving space for the global rail. */
#screen-work>.work{
  max-width:1080px;
  padding:max(calc(var(--nav-h) + env(safe-area-inset-top,0px)),clamp(2.25rem,5.4vw,4.75rem)) var(--ui-use-gutter)
           clamp(5rem,10vw,10rem);
}
#screen-work .work__logo{
  height:clamp(128px,18vw,220px);
  margin-bottom:clamp(1.5rem,4.5vw,3.35rem);
}
#screen-work .work__kicker{
  margin:0 0 clamp(1.25rem,3vw,2.35rem);
  font-family:"DIN Pro Cond","DIN Pro","Prompt",sans-serif;
  font-size:clamp(2rem,5.55vw,4.2rem);
  font-weight:900;
  letter-spacing:.025em;
  line-height:.96;
  text-align:center;
  text-wrap:balance;
}

/* The artwork touches the content edges in the supplied Project boards. */
#screen-work .work__media{
  width:calc(100% + (2 * var(--ui-use-gutter)));
  max-width:none;
  margin-inline:calc(-1 * var(--ui-use-gutter));
  aspect-ratio:16/9;
  border:0;
  border-radius:0;
  clip-path:none;
}
#screen-work .work__title{
  max-width:100%;
  margin-top:clamp(1.75rem,3.25vw,2.85rem);
  font-family:"DIN Pro Cond","DIN Pro","Prompt",sans-serif;
  font-size:clamp(1.75rem,4.25vw,3.35rem);
  font-weight:900;
  letter-spacing:.025em;
  line-height:1.03;
  text-transform:uppercase;
  text-wrap:balance;
}
#screen-work .work__title--th{
  font-family:"Prompt","DIN Pro",sans-serif;
  letter-spacing:0;
  line-height:1.2;
  text-transform:none;
}
#screen-work .work__subtitle{
  max-width:min(90%,58rem);
  margin-top:.7rem;
  font-size:clamp(1.2rem,2.7vw,2rem);
  line-height:1.3;
}
#screen-work .work__quote,
#screen-work .work__desc{
  max-width:min(90%,56rem);
  text-align:center;
}
#screen-work .work__quote{
  margin-top:clamp(2rem,4vw,3.5rem);
  color:var(--ui-use-soft);
  font-size:clamp(1rem,1.65vw,1.3rem);
  line-height:1.7;
}
#screen-work .work__desc{
  margin-top:clamp(1.1rem,2.2vw,1.8rem);
  color:var(--ui-use-copy);
  font-size:clamp(.95rem,1.45vw,1.16rem);
  line-height:1.9;
}

/* P images already contain the rounded montage rhythm shown in the refs. */
#screen-work .work__gallery{
  display:grid;
  width:100%;
  max-width:960px;
  margin:clamp(2.75rem,6vw,5.25rem) auto 0;
}
#screen-work .work__gallery-item{
  margin:0;
  overflow:hidden;
  border-radius:clamp(10px,1.4vw,18px);
  background:#090909;
}
#screen-work .work__gallery img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:920/434;
  object-fit:cover;
}

/* Latest P artwork is clean, so its label lives in real HTML below it. */
#works .project-card--latest{
  overflow:hidden;
  border-radius:clamp(10px,1.4vw,18px);
  background:#090909;
}
#works .project-card--latest .project-card__reference{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:920/434;
  object-fit:cover;
  border-radius:0;
}
#works .project-card__latest-meta{
  display:block;
  padding:clamp(.85rem,1.8vw,1.25rem) clamp(.9rem,2vw,1.4rem) 1rem;
}
#works .project-card__latest-title{
  display:block;
  color:#fff;
  font-family:"DIN Pro Cond","DIN Pro","Prompt",sans-serif;
  font-size:clamp(1.05rem,2.15vw,1.55rem);
  font-weight:900;
  line-height:1.05;
  text-transform:uppercase;
}
#works .project-card__latest-subtitle{
  display:block;
  margin-top:.3rem;
  color:var(--ui-use-copy);
  font-size:clamp(.85rem,1.25vw,1rem);
  line-height:1.35;
}

@media (max-width:700px){
  #screen-work>.work{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
  #screen-work .work__logo{height:clamp(128px,34vw,170px)}
  #screen-work .work__kicker{font-size:clamp(1.85rem,8.4vw,3rem)}
  #screen-work .work__quote,
  #screen-work .work__desc{max-width:100%}
  #screen-work .work__desc{line-height:1.8}
}

@media (prefers-reduced-motion:reduce){
  #works .project-card--latest,
  #screen-work .work__gallery-item{transition:none}
}