/* ═══ SECTION 8 — PORTFOLIO ═══ */
.work{position:relative;padding:clamp(80px,13vh,150px) var(--gut) clamp(80px,13vh,150px);
  background:#080808;border-top:1px solid var(--border)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  padding-bottom:clamp(30px,5vh,54px);border-bottom:1px solid var(--border)}
.work-head h2{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.03em;max-width:14ch}
.work-head .aside{font-size:12.5px;line-height:1.6;color:var(--dim);max-width:24ch;text-align:right;flex-shrink:0}
@media(max-width:760px){.work-head{flex-direction:column;align-items:flex-start}.work-head .aside{text-align:left}}

.proj{display:block;position:relative;margin-top:clamp(30px,5.5vh,64px)}
.proj-media{position:relative;overflow:hidden;background:var(--surface-alt);
  clip-path:polygon(0 0,0 0,-38% 100%,-38% 100%);
  transition:clip-path 1.05s cubic-bezier(.65,0,.2,1)}
.proj.is-in .proj-media{clip-path:polygon(0 0,138% 0,100% 100%,0 100%)}
/* dark overlay that fades in on hover / keyboard focus, behind the "VIEW" label (strength: --proj-dim, 0–1) */
.proj{--proj-dim:.6}
.proj-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(8,8,8,var(--proj-dim));opacity:0;transition:opacity .5s ease}
.proj:hover .proj-media::before,.proj:has(.proj-open:focus-visible) .proj-media::before{opacity:1}
/* bottom gradient stays on hover so the client name / type / text remain readable */
.proj-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,8,.82) 0%,rgba(8,8,8,.15) 42%,transparent 70%)}
.proj-media .inner{position:absolute;inset:-9% 0;will-change:transform}
.proj-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.28) brightness(.86);transition:filter .6s ease}
.proj:hover .proj-media img,.proj:has(.proj-open:focus-visible) .proj-media img{filter:grayscale(0) brightness(1)}
.proj-media .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:repeating-linear-gradient(36.5deg,#151515 0 14px,#111 14px 28px)}
.proj-media .ph span{font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--dim)}

.proj.feature .proj-media{aspect-ratio:21/9}
@media(max-width:760px){.proj.feature .proj-media{aspect-ratio:4/3}}

.proj-meta{position:absolute;left:clamp(16px,2.4vw,38px);right:clamp(16px,2.4vw,38px);
  bottom:clamp(16px,2.6vw,34px);z-index:3;display:flex;align-items:flex-end;
  justify-content:space-between;gap:18px;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s ease .38s,transform .8s cubic-bezier(.16,1,.3,1) .38s}
.proj.is-in .proj-meta{opacity:1;transform:none}
.proj-brand{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.15rem,2.7vw,2.4rem);line-height:1;letter-spacing:-.03em}
.proj.feature .proj-brand{font-size:clamp(1.5rem,4vw,3.4rem)}
.proj-type{display:flex;align-items:center;gap:9px;margin-top:10px;
  font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--muted)}
.proj-type::before{content:"";width:6px;height:6px;background:var(--cut);flex-shrink:0}
.proj-idea{margin-top:9px;font-size:clamp(.86rem,1vw,1rem);line-height:1.5;color:var(--muted);max-width:44ch}
@media(max-width:620px){.proj-idea{display:none}}
/* the whole card is one button that opens the gallery; "VIEW" rises in on hover with a lime line under it */
.proj-open{position:absolute;inset:0;z-index:4;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:zoom-in;color:var(--text);font:inherit}
.proj-open:focus-visible{outline:2px solid var(--cut);outline-offset:-2px}
.proj-view{position:relative;display:block;overflow:hidden;padding-bottom:12px}
.proj-view span{display:block;font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.3rem,2.4vw,2.2rem);letter-spacing:.14em;line-height:1;
  transform:translateY(110%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.proj-view::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cut);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.proj:hover .proj-view span,.proj-open:focus-visible .proj-view span{transform:none}
.proj:hover .proj-view::after,.proj-open:focus-visible .proj-view::after{transform:scaleX(1);transition-delay:.12s}

.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(16px,2.4vw,34px)}
@media(max-width:760px){.proj-grid{grid-template-columns:1fr}}
.proj-grid .proj{margin-top:0}
.proj-grid .proj-media{aspect-ratio:4/3}
/* offset the right column so it doesn't read as a plain grid */
@media(min-width:761px){
  .proj-grid .proj:nth-child(even){margin-top:clamp(40px,7vw,110px)}
  .proj-grid .proj:nth-child(odd):not(:first-child){margin-top:clamp(-40px,-7vw,-110px)}
}

.work-foot{margin-top:clamp(46px,8vh,90px);padding-top:clamp(24px,4vh,40px);
  border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:20px}
.work-foot .count{font-size:12.5px;letter-spacing:.03em;color:var(--dim)}
.work-foot .count b{color:var(--text);font-weight:700}
@media(max-width:620px){.work-foot{flex-direction:column;align-items:flex-start}}

/* ═══ PROJECT GALLERY (lightbox) — built by the section 5 script from the six cards ═══ */
.lb{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  background:rgba(8,8,8,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.lb.is-open{opacity:1;visibility:visible;transition:opacity .4s ease}
html.lb-open{overflow:hidden}   /* page behind doesn't scroll while the gallery is open */

.lb-top{display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2.4vh,24px) var(--gut)}
.lb-count{font-size:11px;letter-spacing:.2em;font-weight:700;color:var(--dim)}
.lb-count b{color:var(--cut)}
.lb-close{position:relative;width:44px;height:44px;margin-right:-10px;background:none;border:0;cursor:pointer}
.lb-close::before,.lb-close::after{content:"";position:absolute;left:10px;right:10px;top:21px;height:1.5px;
  background:var(--text);transition:background .3s ease}
.lb-close::before{transform:rotate(45deg)}.lb-close::after{transform:rotate(-45deg)}
.lb-close:hover::before,.lb-close:hover::after{background:var(--cut)}

/* the slider: all six photos in a row, the track slides to the current one */
.lb-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y;cursor:grab}
.lb-stage.is-dragging{cursor:grabbing}
.lb-track{display:flex;height:100%;transition:transform .65s cubic-bezier(.65,0,.35,1)}
.lb-stage.is-dragging .lb-track{transition:none}
.lb-slide{flex:0 0 100%;height:100%;display:grid;place-items:center;
  padding:0 clamp(16px,7vw,120px)}
.lb-slide img{max-width:100%;max-height:100%;object-fit:contain;display:block;user-select:none;
  -webkit-user-drag:none;transform:scale(.96);opacity:.5;
  transition:transform .65s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.lb-slide.is-current img{transform:none;opacity:1}
.lb-slide .lb-missing{font-size:11px;letter-spacing:.16em;font-weight:600;color:var(--dim)}

.lb-nav{position:absolute;top:50%;z-index:2;width:clamp(44px,4.4vw,58px);aspect-ratio:1;border-radius:50%;
  translate:0 -50%;border:1px solid var(--border);background:rgba(8,8,8,.6);cursor:pointer;
  transition:background .3s ease,border-color .3s ease}
.lb-prev{left:clamp(8px,2vw,34px)}.lb-next{right:clamp(8px,2vw,34px)}
.lb-nav::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  border-top:2px solid var(--text);border-right:2px solid var(--text);transition:border-color .3s ease}
.lb-prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.lb-next::before{transform:translate(-70%,-50%) rotate(45deg)}
.lb-nav:hover{background:var(--cut);border-color:var(--cut)}
.lb-nav:hover::before{border-color:#0A0A0A}

.lb-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;
  padding:clamp(14px,2.4vh,24px) var(--gut) clamp(18px,3vh,30px)}
.lb-cap b{display:block;font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:800;
  font-size:clamp(1rem,1.8vw,1.4rem);letter-spacing:-.02em}
.lb-cap i{display:flex;align-items:center;gap:9px;margin-top:8px;font-style:normal;
  font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--muted);text-transform:uppercase}
.lb-cap i::before{content:"";width:6px;height:6px;background:var(--cut);flex-shrink:0}
.lb-thumbs{display:flex;gap:8px}
.lb-thumb{width:clamp(44px,5vw,72px);aspect-ratio:4/3;padding:0;border:1px solid var(--border);cursor:pointer;
  background:var(--surface-alt) center/cover no-repeat;opacity:.45;
  transition:opacity .3s ease,border-color .3s ease}
.lb-thumb:hover{opacity:.8}
.lb-thumb.is-current{opacity:1;border-color:var(--cut)}
@media(max-width:620px){.lb-thumbs{display:none}}   /* phones: swipe + arrows instead */

@media(prefers-reduced-motion:reduce){
  .lb-slide img{transform:none}
  .proj-media{clip-path:none!important}
  .proj-meta{opacity:1;transform:none}
  .proj-media .inner{transform:none!important;inset:0}
}