/* work.css — page-specific layout for work.html: the results gallery. Wide
   container, a translucent hero nav that darkens on scroll, the section header
   and the 12-column photo grid with placeholders. Chrome (footer, mobile menu,
   to-top, body treatment) and reveal come from the shared layer.
   Cascade: tokens -> base -> site -> animations -> work.css. */

.container{max-width:1180px;padding:0 28px}

/* ---------- hero nav override ---------- */
/* This page opens over the gallery with a near-transparent nav that fades in a
   background + border on scroll (the shared nav is opaque from the start). Only
   the background/border/transition differ; layout is inherited from site.css. */
nav{background:rgba(15,14,12,.55);border-bottom:1px solid transparent;transition:border-color .4s,background .4s}

/* ---------- section shell ---------- */
section{padding:110px 0;position:relative}
.sec-head{margin-bottom:62px;max-width:60ch}
.sec-tag{color:var(--gold);font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;display:block;margin-bottom:18px}
.sec-title{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.05;letter-spacing:-.01em}
.sec-title .em{font-style:italic;color:var(--gold-soft)}

/* ---------- results gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-rows:200px}
.shot{position:relative;overflow:hidden;border-radius:3px;background:var(--panel);border:1px solid var(--line-soft)}
/* placeholder look until real photos are dropped in */
.shot .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink-dim);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  background:repeating-linear-gradient(45deg,rgba(201,165,88,.04) 0 14px,transparent 14px 28px),var(--panel)}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s}
.shot:hover img{transform:scale(1.05)}
.shot .tag{position:absolute;left:14px;bottom:14px;z-index:2;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  background:rgba(15,14,12,.6);backdrop-filter:blur(4px);padding:5px 12px;border-radius:2px;border:1px solid var(--line)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(15,14,12,.55));z-index:1;pointer-events:none}
.g1{grid-column:span 5;grid-row:span 2}
.g2{grid-column:span 4;grid-row:span 1}
.g3{grid-column:span 3;grid-row:span 1}
.g4{grid-column:span 4;grid-row:span 1}
.g5{grid-column:span 3;grid-row:span 1}
.g6{grid-column:span 4;grid-row:span 1}
.g7{grid-column:span 8;grid-row:span 1}
@media(max-width:820px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .g1,.g2,.g3,.g4,.g5,.g6,.g7{grid-column:span 1;grid-row:span 1}
  .g1{grid-column:span 2;grid-row:span 2}
}