/* Victor Contractors — project detail page.
   Shared by every page in this directory so the template exists once, not per file.
   Same tokens as index.html; deliberately no scrubbed video anywhere on these pages
   (the homepage hero already spends 13.9MB — that budget is gone). */

:root{
  --ink:#191817;
  --ink-dim:rgba(25,24,23,.56);
  --ink-line:rgba(25,24,23,.14);
  --bone:#F2EEE8;
  --bone-2:#E3DDD3;
  --bone-dim:rgba(242,238,232,.74);
  --orange:#E8551D;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bone);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--bone)}
img{display:block;max-width:100%}

.label{font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.wrap{max-width:1240px;margin:0 auto;padding:0 5vw}

/* ---------- nav ---------- */
/* No colour flip here: a detail page has no dark pinned hero to sit over, so the
   bar is ink on bone from the first pixel and stays put. */
.nav{position:sticky;top:0;z-index:50;background:var(--bone);
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 5vw;border-bottom:1px solid var(--ink-line)}
.nav .mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.nav .mark span{font-weight:500;font-size:11.5px;letter-spacing:.28em}
.nav .back{color:var(--ink);text-decoration:none;opacity:.68;transition:opacity .2s}
.nav .back:hover{opacity:1}

/* Vertical rhythm below uses padding-TOP only: these classes sit on the same
   element as .wrap, and a padding shorthand would wipe its 5vw gutter. */

/* ---------- opener ---------- */
.open{padding-top:9vh}
.open .idx{color:rgba(25,24,23,.38)}
.open h1{font-weight:600;font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.02;
  letter-spacing:-.025em;padding:18px 0 0;max-width:20ch;text-wrap:balance}
.open .where{padding-top:20px;color:var(--ink-dim);font-size:16px}
.hero-shot{margin-top:6vh;aspect-ratio:16/9;background:var(--bone-2);overflow:hidden;
  position:relative}
.hero-shot img{width:100%;height:100%;object-fit:cover}
/* Missing photography is stated, not faked with a broken-image box. */
.ph{display:flex;flex-direction:column;justify-content:flex-end;padding:32px;
  background:var(--bone-2)}
.ph .ph-n{position:absolute;top:-2vh;right:2vw;font-weight:600;
  font-size:clamp(6rem,17vw,15rem);line-height:.8;color:rgba(25,24,23,.07);
  pointer-events:none}
.ph .ph-note{color:var(--ink-dim);position:relative}
/* The imagery on these pages is indicative, not Victor's own job photography.
   Said once under the opener shot and again in the facts flag, so the page never
   passes a stand-in off as a finished record. */
.shot-note{padding-top:14px;color:var(--ink-dim)}

/* ---------- brief ---------- */
.brief{padding-top:11vh}
.brief-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 48px}
.brief .body{grid-column:span 7}
.brief p{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;text-wrap:pretty}
.brief p + p{padding-top:18px;color:var(--ink-dim)}
.brief .aside{grid-column:9 / span 4}
.brief .aside .label{display:block;padding-bottom:14px;color:var(--ink-dim)}
.brief .aside ul{list-style:none}
.brief .aside li{font-size:15px;line-height:1.45;padding:0 0 10px}

/* ---------- before / after: his actual value prop ---------- */
.ba{padding-top:11vh}
.ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ba figure{margin:0}
/* 16:9 matches the frames the photography is actually shot in — cropping a wide
   interior into 4:3 threw away the depth that makes the before/after read. */
.ba .frame{aspect-ratio:16/9;background:var(--bone-2);overflow:hidden;position:relative}
.ba .frame img{width:100%;height:100%;object-fit:cover}
.ba figcaption{padding:14px 0 0;margin-top:12px;border-top:1px solid var(--ink-line);
  color:var(--ink-dim);display:flex;justify-content:space-between;gap:14px}

/* ---------- detail shots ---------- */
.shots{padding-top:11vh;display:grid;grid-template-columns:repeat(12,1fr);gap:20px 48px}
.shots .s{grid-column:span 4}
/* Square, not 3:4: the detail shots are square crops, and three squares in a row
   sit better under a 16:9 pair than three portraits do. */
.shots .s .frame{aspect-ratio:1/1;background:var(--bone-2);overflow:hidden;position:relative}
.shots .s .frame img{width:100%;height:100%;object-fit:cover}
.ba .frame img{width:100%;height:100%;object-fit:cover}
.shots .s .cap{padding:13px 0 0;margin-top:12px;border-top:1px solid var(--ink-line);
  color:var(--ink-dim);font-size:14px;line-height:1.45}

/* ---------- scope facts ---------- */
.facts{padding-top:11vh}
.facts-inner{border-top:1px solid var(--ink);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 48px;padding-top:30px}
.facts dt{color:var(--ink-dim);padding-bottom:11px}
.facts dd{font-size:16px;font-weight:500;line-height:1.35}
.facts .flag{padding-top:5vh;color:var(--ink-dim)}

/* ---------- next project: the page never dead-ends ---------- */
.next{margin-top:12vh;background:var(--ink);color:var(--bone)}
.next a{display:block;text-decoration:none;color:inherit;padding:11vh 5vw}
.next .in{max-width:1240px;margin:0 auto;
  display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.next .label{color:rgba(242,238,232,.5)}
.next h2{font-weight:600;font-size:clamp(1.75rem,4vw,3rem);line-height:1.05;
  letter-spacing:-.022em;padding-top:16px}
.next .arrow{font-size:clamp(1.5rem,3vw,2.2rem);opacity:.55;transition:transform .4s ease,opacity .3s}
.next a:hover .arrow{transform:translateX(10px);opacity:1}

.foot{padding:0 5vw}
.foot-inner{max-width:1240px;margin:0 auto;padding:7vh 0;
  display:block}
.foot-contact{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 48px}
.foot-item .label{display:block;color:var(--ink-dim);margin-bottom:12px}
.foot-item p,.foot-item a{color:var(--ink);font-size:14px;line-height:1.55;text-decoration:none}
.foot-meta{margin-top:7vh;padding-top:22px;border-top:1px solid var(--ink-line);
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:18px}
.foot .line{color:var(--ink-dim)}
.foot a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink-line);padding-bottom:2px}
.foot a:hover{border-color:var(--ink)}

/* ---------- reveal (cheap: opacity + transform, fires once) ---------- */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1)}
.rise.up{opacity:1;transform:none}

@media(max-width:820px){
  .brief-grid{grid-template-columns:1fr;gap:6vh}
  .brief .body,.brief .aside{grid-column:1}
  /* Two 4:3 frames side by side at 375 are 160px wide — a before/after you cannot
     read. Stacked, the pair still reads as a pair because the captions say so. */
  .ba .pair{grid-template-columns:1fr;gap:5vh}
  .shots{grid-template-columns:1fr}
  .shots .s{grid-column:1}
  /* Five fact columns at this width give each one ~60px: one word a line. */
  .facts-inner{grid-template-columns:1fr 1fr;gap:5vh 32px}
  .next .in{flex-direction:column;align-items:flex-start;gap:10px}
  .open h1{max-width:none}
  .foot-contact{grid-template-columns:1fr 1fr;gap:36px 24px}
}
@media(max-width:460px){.foot-contact{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){
  .rise{opacity:1;transform:none;transition:none}
  .next .arrow{transition:none}
}