/* ============================================================
   LUMA Integration — Project detail (single-project)
   Extracted verbatim from the design prototype's inline <style>.
   ============================================================ */
/* As on the projects index: this page carries the solid nav, which is sticky and
   occupies its own height, so the overlay-nav top allowance is not needed here. */
.pd-head{padding:clamp(60px,6.5vw,92px) 0 clamp(36px,4vw,52px);}
.pd-back{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--stone);margin-bottom:26px;transition:color .2s var(--ease);white-space:nowrap;}
.pd-back .arr{transition:transform .2s var(--ease);}
.pd-back:hover{color:var(--ink);}
.pd-back:hover .arr{transform:translateX(-4px);}
.pd-head .h1{max-width:16ch;}
.pd-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-top:20px;}
.pd-loc{font-size:18px;color:var(--slate);}
.pd-tags{display:flex;gap:8px;flex-wrap:wrap;}

.pd-hero{width:100%;}
.pd-hero .media{width:100%;height:clamp(360px,56vw,720px);object-fit:cover;object-position:center center;display:block;}

.pd-main{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:start;}
.pd-facts{position:sticky;top:110px;display:flex;flex-direction:column;}
.fact{display:flex;flex-direction:column;gap:5px;padding:18px 0;border-top:1px solid var(--line);}
.fact:last-child{border-bottom:1px solid var(--line);}
.fact .k{font-size:13.5px;color:var(--stone);}
.fact .v{font-size:16.5px;font-weight:500;color:var(--ink);}
.pd-prose .h2{max-width:18ch;}
.pd-prose p{margin-top:22px;font-size:18px;line-height:1.62;color:var(--ink-soft);}
.pd-scope{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.pd-scope .s{background:var(--paper);padding:18px 22px;display:flex;align-items:center;gap:13px;font-size:15.5px;font-weight:500;}
.pd-scope .s .mk{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;}

/* Justified gallery ------------------------------------------------
   Rows are built in PHP (luma_justified_rows) and each shot carries an
   inline flex-grow equal to its aspect ratio. With flex-basis:0 the browser
   splits the row's free space in exact proportion to those ratios, so every
   image in a row lands on the same height, the row runs flush to both
   margins, and no photograph is cropped to get there. */
.pd-gallery{--pd-gap:clamp(16px,1.6vw,24px);
  display:flex;flex-direction:column;gap:var(--pd-gap);}
.pd-row{display:flex;gap:var(--pd-gap);align-items:flex-start;}
.pd-shot{margin:0;flex:1 1 0;min-width:0;}
.pd-shot .media{display:block;width:100%;height:auto;}
/* Trailing row that cannot fill the width: narrowed to the share it can fill
   (--pd-fill is written inline per row), which lands its shots on the same
   height as a full row. It stays a single un-wrapped line, so the vertical
   gap between every row in the gallery is the one gap. */
.pd-row.is-short{max-width:var(--pd-fill,100%);}

.pd-quote{text-align:center;}
.pd-quote blockquote{max-width:22ch;margin:0 auto;font-weight:700;font-size:clamp(28px,3.6vw,46px);line-height:1.14;letter-spacing:-.025em;color:#fff;}
.pd-quote .cite{margin-top:32px;font-size:15px;color:rgba(255,255,255,.6);}

.pd-next{position:relative;display:block;min-height:clamp(320px,34vw,460px);overflow:hidden;background:var(--charcoal-deep);}
.pd-next .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.pd-next .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(35,39,42,.25),rgba(35,39,42,.78));}
.pd-next .inner{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:clamp(56px,7vw,96px) var(--gutter);height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit;}
.pd-next .lbl{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:12px;}
.pd-next h2{color:#fff;}
.pd-next .go{margin-top:18px;}

@media(max-width:880px){
  .pd-main{grid-template-columns:1fr;}
  .pd-facts{position:static;flex-direction:row;flex-wrap:wrap;gap:0 36px;}
  .pd-facts .fact{flex:1;min-width:140px;}
  .pd-scope{grid-template-columns:1fr;}
}
/* Below phone width a justified row leaves each shot too small to read, so the
   gallery falls back to one image per line at its natural height. */
@media(max-width:620px){
  .pd-row,.pd-row.is-short{flex-wrap:wrap;max-width:100%;}
  .pd-row .pd-shot{flex:1 1 100%;max-width:100%;}
}