/* ============================================================
   LUMA Integration — Projects index (archive)
   Extracted verbatim from the design prototype's inline <style>.
   ============================================================ */
/* The prototype's 140–200px top padding assumed the transparent nav, which is
   positioned absolutely and sits over the page. Projects uses the solid nav,
   which is sticky and takes its own ~66px in the flow, so that allowance was
   being added below the bar instead of behind it. */
.page-head{padding:clamp(64px,7vw,96px) 0 clamp(48px,5vw,72px);}
.page-head .h1{max-width:13ch;}
.page-head .lead{max-width:52ch;margin-top:24px;}
.filter{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:clamp(36px,4vw,52px);
  padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--line);}
.filter .count{margin-left:auto;font-size:14px;color:var(--stone);}

/* Every card is the same size: one column, one crop height, one title size. */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,40px) clamp(20px,2vw,28px);}
.pcard{display:flex;flex-direction:column;gap:18px;cursor:pointer;}
.pcard .media{width:100%;height:clamp(240px,24vw,320px);object-fit:cover;display:block;transition:opacity .3s var(--ease);}
.pcard:hover .media{opacity:.92;}
/* The meta block is a fixed shape — two title lines, one location line, one row
   of tags — so a long project name or a wordy location cannot make one card
   taller than the rest. Each part reserves its space whether it is filled or not. */
.pcard-meta{display:flex;flex-direction:column;gap:11px;}
.pcard-top{display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.pcard-top h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.25;
  min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;transition:color .2s var(--ease);}
.pcard:hover .pcard-top h3{color:var(--gold-deep);}
.pcard-loc{font-size:14px;line-height:1.4;min-height:1.4em;max-width:100%;color:var(--stone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard-tags{display:flex;gap:8px;flex-wrap:nowrap;overflow:hidden;min-height:30px;}

.loadmore{display:flex;justify-content:center;margin-top:clamp(48px,6vw,80px);}

/* graceful empty state */
.proj-empty{padding:clamp(40px,6vw,80px) 0;text-align:center;color:var(--ink-soft);}
.proj-empty .lead{max-width:46ch;margin:14px auto 0;}

@media(max-width:980px){
  .proj-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  .proj-grid{grid-template-columns:1fr;}
  .filter .count{display:none;}
}