/* ==========================================================================
   PORTFOLIO v3 — real project archive (114 projects from the live resume).
   Filter bar: site.css §16. Informational cards (no links: there are no case-study pages).
   ========================================================================== */
.pf-hero{position:relative;overflow:hidden;padding-block:clamp(var(--s6),7vw,var(--s12)) calc(var(--s6) + 118px)}   /* v11: peek via shared rule; no +28vw reserve */
.pf-hero__grid{position:relative;z-index:1;display:grid;gap:var(--s3)}
.pf-hero .eyebrow{justify-self:start}
.pf-hero__title{font-size:var(--t-hero);color:var(--midnight)}
.pf-hero__sig{direction:ltr;text-align:left;font-weight:500;font-size:var(--t-h2);letter-spacing:.02em;color:var(--blue)}
.pf-hero__lead{max-width:36ch;color:var(--deep)}

.pf{padding-top:0}
.pcases{list-style:none;margin:0;padding:var(--s5) 0 0;display:grid;grid-template-columns:1fr;gap:12px}
.pcase{min-width:0;display:grid;align-content:start;gap:10px;padding:clamp(18px,2vw,26px);border:1px solid var(--mist);border-radius:var(--radius);background:var(--white);cursor:default;transition:border-color .35s var(--e-out)}
.pcase[hidden]{display:none}
.pcase__head{display:flex;align-items:center;gap:14px}
.pcase__logo{flex:none;width:52px;height:52px;border-radius:13px;overflow:hidden;outline:1px solid var(--mist);outline-offset:-1px}
.pcase__logo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.8;transition:filter .35s var(--e-out),opacity .35s var(--e-out)}
.pcase__tag{font-size:var(--t-micro);color:var(--blue);line-height:1.6}
.pcase__n{font-size:var(--t-h3);font-weight:600;line-height:1.45;color:var(--midnight);overflow-wrap:anywhere}
.pcase__role{font-size:var(--t-small);line-height:1.7;color:var(--deep)}
.pcase__p{font-size:var(--t-body);line-height:1.8;color:var(--midnight)}
@media (hover:hover){.pcase:hover{border-color:var(--blue)}.pcase:hover .pcase__logo img{filter:none;opacity:1}}
@media (hover:none){.pcase.is-live{border-color:var(--blue)}.pcase.is-live .pcase__logo img{filter:none;opacity:1}}


@media (min-width:640px){.pcases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){
  .pf-hero{padding-bottom:clamp(var(--s8),6vw,var(--s10))}
  .pf-hero__grid{grid-template-columns:repeat(12,1fr);column-gap:var(--col-gap);align-items:end}
  .pf-hero .eyebrow,.pf-hero__title{grid-column:1/-1}
  .pf-hero__sig{grid-column:1/7;grid-row:3;text-align:right}
  .pf-hero__lead{grid-column:1/6;grid-row:4}
  .pcases{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================================
   v12 · Billboard & strabord showcase (top of the page). Flat white field, 16:9 thumbnails, first design featured
   2×2 on desktop. Click → full-size lightbox (gallery.js). Same radius / Mist hairline as the archive cards.
   ========================================================================== */
.pf-bb + .pf-bb{padding-top:0}   /* consecutive showcases share one gap */
.pf-bb__t{display:flex;align-items:center;gap:14px;font-size:var(--t-h2);font-weight:600;line-height:1.4;color:var(--midnight);margin-bottom:clamp(var(--s3),3vw,var(--s5))}
.pf-bb__t::before{content:"";width:10px;height:10px;background:var(--blue);flex:none}
.pf-bb__t::after{content:"";flex:1;height:1px;background:var(--mist)}
.bb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.1vw,16px)}
.bb{min-width:0}
.bb:first-child{grid-column:1/-1}
@media (max-width:1023.98px){.bb--wide{grid-column:1/-1}}   /* set by the build only when the 2-col grid would leave an orphan */
.bb__btn{position:relative;display:block;width:100%;padding:0;border:0;border-radius:clamp(12px,1.4vw,var(--radius));overflow:hidden;background:var(--mist);cursor:zoom-in;aspect-ratio:var(--ar,1000/562);isolation:isolate}
.bb__btn img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--e-out)}
.bb__btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,7,36,.06);pointer-events:none}
.bb__zoom{position:absolute;bottom:10px;left:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--midnight);opacity:0;transform:scale(.8);transition:opacity var(--d-fast),transform var(--d-mid) var(--e-spark)}
.bb__zoom svg{width:18px;height:18px}
.bb__btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (hover:hover){.bb__btn:hover img{transform:scale(1.04)}.bb__btn:hover .bb__zoom,.bb__btn:focus-visible .bb__zoom{opacity:1;transform:none}}
@media (hover:none){.bb__zoom{opacity:1;transform:none;width:32px;height:32px;bottom:8px;left:8px}.bb__zoom svg{width:15px;height:15px}}
@media (min-width:1024px){
  .bb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bb:first-child{grid-column:span 2;grid-row:span 2}
  .bb:first-child .bb__btn{height:100%}
}

/* lightbox: Midnight backdrop (flat), image as large as the viewport allows, pill nav like the resume lightbox */
.glb{padding:0;border:0;background:transparent;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;overflow:hidden;color:var(--white)}
.glb[open]{display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;gap:14px;padding:clamp(56px,6vh,72px) clamp(12px,3vw,48px) clamp(16px,3vh,32px)}
.glb::backdrop{background:rgba(0,7,36,.92)}
.glb__fig{margin:0;min-height:0;width:100%;height:100%;display:grid;place-items:center}
.glb__img{max-width:min(100%,1000px);max-height:100%;width:auto;height:auto;border-radius:clamp(10px,1.2vw,18px);display:block;user-select:none;-webkit-user-drag:none}
.glb__x{position:absolute;top:14px;left:14px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--white);color:var(--midnight);cursor:pointer}
.glb__x svg{width:18px;height:18px}
.glb__nav{display:flex;align-items:center;gap:14px}
.glb__b{font:inherit;font-size:var(--t-small);font-weight:500;padding:10px 20px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:transparent;color:var(--white);cursor:pointer;transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast)}
.glb__b:disabled{opacity:.35;cursor:default}
.glb__pos{font-size:var(--t-small);color:var(--mist);min-width:6ch;text-align:center;font-variant-numeric:tabular-nums}
.glb__x:focus-visible,.glb__b:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media (hover:hover){.glb__b:not(:disabled):hover{background:var(--white);color:var(--midnight);border-color:var(--white)}.glb__x:hover{background:var(--blue);color:var(--white)}}
@media (prefers-reduced-motion:no-preference){
  .glb[open] .glb__img{animation:glbIn .45s var(--e-out)}
  .glb[open]::backdrop{animation:glbFade .3s var(--e-out)}
  .glb__img.is-swap{animation:glbSwap .35s var(--e-out)}
}
@keyframes glbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes glbFade{from{opacity:0}to{opacity:1}}
@keyframes glbSwap{from{opacity:.25;transform:translateX(-12px)}to{opacity:1;transform:none}}