/* STEP 4 — PORTFOLIO V3
   One navigation system:
   - "Tout" renders 6 category samples.
   - A category filter renders that category's sample + up to 5 more works.
   - Clicking a sample invokes the exact same category renderer as its filter. */
.portfolio{padding-block:clamp(90px,12vw,160px);overflow:hidden}
.portfolio-heading{display:grid;grid-template-columns:1fr .62fr;gap:50px;align-items:end;margin-bottom:48px}
.portfolio h2{margin:0;font:900 clamp(46px,6vw,88px)/.94 var(--heading);letter-spacing:-.065em}
.portfolio h2 span{color:var(--teal)}
.portfolio-heading>p{max-width:470px;margin:0 0 6px auto;color:rgba(255,249,240,.78);font-size:16px;line-height:1.65}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.filter{border:1px solid rgba(255,249,240,.28);border-radius:999px;padding:9px 13px;background:transparent;color:var(--cream);cursor:pointer;font:700 11px var(--heading);transition:.2s var(--ease)}
.filter:hover,.filter.is-active{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.portfolio-card{min-width:0;animation:portfolio-in .35s var(--ease) both}
.portfolio-card[hidden]{display:none}
.portfolio-card-button{
  display:block;width:100%;padding:0;border:0;background:none;
  color:inherit;text-align:left;cursor:pointer;font:inherit;
}
.portfolio-visual{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(255,249,240,.14)}
.portfolio-placeholder-art{
  position:absolute;inset:0;background:var(--teal);
  display:flex;flex-direction:column;justify-content:space-between;padding:20px;
}
.portfolio-placeholder-art:before,.portfolio-placeholder-art:after{content:"";position:absolute;border:1px solid rgba(255,249,240,.45);border-radius:50%;pointer-events:none}
.portfolio-placeholder-art:before{width:72%;aspect-ratio:1;right:-18%;top:12%}
.portfolio-placeholder-art:after{width:48%;aspect-ratio:1;left:-8%;bottom:8%;border-color:rgba(0,26,23,.55)}
.portfolio-placeholder-art.alt{background:var(--dark)}
.portfolio-placeholder-art.warm{background:var(--coral)}
.portfolio-placeholder-art.light{background:var(--cream);color:var(--dark)}
.portfolio-placeholder-art span{position:relative;z-index:1;font:800 10px var(--heading);letter-spacing:.12em}
.portfolio-placeholder-art i{position:relative;z-index:1;align-self:flex-end;font:900 clamp(25px,3vw,42px)/.9 var(--heading);letter-spacing:-.06em;font-style:normal}
.portfolio-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;
}
.portfolio-card-meta{display:flex;justify-content:space-between;gap:14px;padding:14px 2px 0;font-size:11px}
.portfolio-card-meta span{color:rgba(255,249,240,.6)}
.portfolio-card-meta strong{font-family:var(--heading)}
.portfolio-card-button:hover .portfolio-visual{transform:translateY(-3px)}
.portfolio-card-button:hover .portfolio-card-meta strong{color:var(--teal)}
.portfolio-card-button:focus-visible .portfolio-visual{outline:3px solid var(--coral);outline-offset:4px}
@keyframes portfolio-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:850px){.portfolio-heading{grid-template-columns:1fr}.portfolio-heading>p{margin:0}.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.portfolio{padding-block:80px}}
@media(prefers-reduced-motion:reduce){.filter,.portfolio-card-button,.portfolio-visual{transition:none}.portfolio-card{animation:none}}


/* LNK_DT — Portfolio mobile layout: 2 columns / 3 rows */
@media screen and (max-width: 767px) {
  .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* PASS 3.5 — Portfolio media viewer. Existing portfolio layout remains unchanged. */
.portfolio-card-button{cursor:zoom-in}
.portfolio-lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,26,23,.97);color:var(--cream)}
.portfolio-lightbox::backdrop{background:rgba(0,26,23,.94)}
.portfolio-lightbox-shell{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(14px,2vw,28px)}
.portfolio-lightbox-topbar,.portfolio-lightbox-bottombar{display:flex;align-items:center;justify-content:space-between;gap:18px}
.portfolio-lightbox-kicker{margin:0 0 4px;color:var(--yellow);font:800 10px var(--heading);letter-spacing:.12em;text-transform:uppercase}
.portfolio-lightbox-topbar h3{margin:0;font:800 clamp(18px,2.5vw,30px)/1 var(--heading);letter-spacing:-.04em}
.portfolio-lightbox-actions{display:flex;align-items:center;gap:7px}
.portfolio-lightbox-control,.portfolio-lightbox-close,.portfolio-lightbox-nav{border:1px solid rgba(255,249,240,.28);background:rgba(255,249,240,.04);color:var(--cream);cursor:pointer}
.portfolio-lightbox-control{min-width:42px;height:38px;border-radius:999px;font:700 12px var(--heading)}
.portfolio-lightbox-close{width:42px;height:42px;border-radius:50%;font-size:28px;line-height:1}
.portfolio-lightbox-control:hover,.portfolio-lightbox-close:hover,.portfolio-lightbox-nav:hover{background:var(--teal);border-color:var(--teal)}
.portfolio-lightbox-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;outline:none}
.portfolio-lightbox-media{width:min(88vw,1100px);height:min(78vh,820px);display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:pan-y;scrollbar-width:thin}
.portfolio-lightbox-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center center;transition:transform .18s var(--ease);user-select:none;-webkit-user-drag:none}
.lightbox-sample{position:relative;width:min(70vw,620px);height:min(76vh,760px);flex:0 0 auto;transition:transform .18s var(--ease);transform-origin:center center}
.portfolio-lightbox-nav{position:absolute;z-index:2;width:48px;height:48px;border-radius:50%;font-size:38px;line-height:1;display:grid;place-items:center}
.portfolio-lightbox-nav.prev{left:clamp(4px,2vw,28px)}
.portfolio-lightbox-nav.next{right:clamp(4px,2vw,28px)}
.portfolio-lightbox-bottombar{padding-top:12px;color:rgba(255,249,240,.65);font-size:11px}
body.portfolio-lightbox-open{overflow:hidden}
@media(max-width:560px){
  .portfolio-lightbox-shell{padding:12px}
  .portfolio-lightbox-topbar{align-items:flex-start}
  .portfolio-lightbox-control{min-width:36px;height:36px}
  .portfolio-lightbox-close{width:38px;height:38px}
  .portfolio-lightbox-media{width:100%;height:76vh}
  .portfolio-lightbox-bottombar span:last-child{display:none}
  .portfolio-lightbox-nav{width:42px;height:42px;font-size:32px}
}
@media(prefers-reduced-motion:reduce){.portfolio-lightbox-image,.lightbox-sample{transition:none}}