/* ============================================================
   Project detail + gallery — extends career.css
   ============================================================ */

/* ---- detail hero ---- */
.proj-hero{ padding:148px 0 0; }
.crumb{
  display:flex; gap:14px; align-items:center;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--faint); margin-bottom:30px;
}
.crumb a{ color:var(--ink-2); transition:color .2s; }
.crumb a:hover{ color:var(--rust); }
.crumb .sep{ color:var(--line); }

.proj-title{
  font-family:var(--grotesque); font-weight:700;
  font-size:clamp(2.4rem,7vw,5.4rem); line-height:.96;
  letter-spacing:-.02em; margin:0 0 26px; max-width:16ch;
  text-wrap:balance;
}
.proj-sum{
  font-size:clamp(1.05rem,2vw,1.4rem); line-height:1.45;
  color:var(--ink-2); max-width:38ch; margin:0 0 44px; text-wrap:pretty;
}

/* meta row under the rule (Ill Wind device again) */
.meta-rule{ height:1px; background:var(--ink); margin-bottom:22px; }
.meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  padding-bottom:54px;
}
.meta .mk{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); margin-bottom:8px;
}
.meta .mv{ font-size:15px; color:var(--ink); line-height:1.5; }
.meta .mv.mono{ font-family:var(--mono); font-size:13px; }
@media (max-width:620px){ .meta{ grid-template-columns:1fr 1fr; } }

/* big figure placeholder */
.figure{
  aspect-ratio:16/8; width:100%;
  background:var(--paper-raise); border:1px solid var(--line);
  position:relative; overflow:hidden; filter:saturate(.92);
}
.figure::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 15px,
    color-mix(in srgb,var(--slate) 30%,transparent) 15px 16px);
}
.figure .ph{
  position:absolute; left:16px; bottom:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate-deep);
  background:color-mix(in srgb,var(--paper) 72%,transparent); padding:3px 8px;
}
.figure.tall{ aspect-ratio:16/10; }

/* body column */
.proj-body{ padding:clamp(64px,9vw,120px) 0; }
.block{
  display:grid; grid-template-columns:160px 1fr; gap:clamp(20px,4vw,56px);
  padding:40px 0; border-top:1px solid var(--line); align-items:start;
}
.block:first-child{ border-top:1px solid var(--ink); }
.block-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2); padding-top:6px;
}
.block-body{ max-width:60ch; }
.block-body p{ margin:0 0 18px; font-size:17.5px; line-height:1.62; color:var(--ink); text-wrap:pretty; }
.block-body p:last-child{ margin-bottom:0; }
.block-body p .em{ color:var(--rust); }
.block-body .note{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:17px; color:var(--ink-2);
}
@media (max-width:680px){ .block{ grid-template-columns:1fr; gap:14px; } }

/* stats */
.stats{ display:flex; gap:clamp(32px,6vw,80px); flex-wrap:wrap; }
.stat .num{
  font-family:var(--grotesque); font-weight:700;
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; letter-spacing:-.02em;
  color:var(--ink);
}
.stat .num .u{ color:var(--rust); }
.stat .sl{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); margin-top:12px; max-width:22ch;
}

/* prev / next */
.proj-foot{
  border-top:1px solid var(--ink); padding:40px 0 100px;
  display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap;
}
.proj-foot .back{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); transition:color .2s;
}
.proj-foot .back:hover{ color:var(--rust); }
.proj-foot .next{ text-align:right; }
.proj-foot .next .nl{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
}
.proj-foot .next .nt{
  display:flex; align-items:center; gap:12px; justify-content:flex-end;
  font-family:var(--grotesque); font-weight:600; font-size:clamp(1.3rem,3vw,2rem);
  letter-spacing:-.01em; margin-top:6px; color:var(--ink); transition:color .25s;
}
.proj-foot .next:hover .nt{ color:var(--rust); }

/* ============================================================
   Gallery
   ============================================================ */
.gallery{ padding:148px 0 120px; }
.gallery-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px);
  margin-top:50px;
}
@media (max-width:720px){ .gallery-grid{ grid-template-columns:1fr; } }
.gcard{ display:block; }
.gthumb{
  aspect-ratio:16/10; width:100%; background:var(--paper-raise);
  border:1px solid var(--line); position:relative; overflow:hidden;
  filter:saturate(.92); transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.gthumb::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 13px,
    color-mix(in srgb,var(--slate) 28%,transparent) 13px 14px);
}
.gcard:hover .gthumb{ transform:translateY(-5px); }
.gthumb .gn{
  position:absolute; top:14px; left:16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--slate-deep);
}
.gthumb .ph{
  position:absolute; left:16px; bottom:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate-deep); background:color-mix(in srgb,var(--paper) 72%,transparent); padding:2px 7px;
}
.gbody{ padding-top:18px; }
.gbody h3{
  display:flex; align-items:center; gap:12px;
  font-family:var(--grotesque); font-weight:600; font-size:1.5rem; letter-spacing:-.01em;
  margin:0 0 8px; color:var(--ink);
}
.gbody h3 .arr{ font-size:.7em; color:var(--rust); opacity:0; transform:translateX(-5px); transition:.3s; }
.gcard:hover .gbody h3 .arr{ opacity:1; transform:none; }
.gbody p{ margin:0 0 14px; color:var(--ink-2); max-width:40ch; text-wrap:pretty; }