.portfolio-page{background:var(--paper)}
.nav .current::after{transform:scaleX(1)}
.portfolio-hero{min-height:100svh;padding:145px clamp(24px,7vw,110px) 78px;background:var(--beige);display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center}
.portfolio-hero-copy{max-width:720px}
.portfolio-hero-copy h1{font-size:clamp(58px,7.2vw,108px);color:var(--ink);text-shadow:none;margin-bottom:30px}
.portfolio-hero-copy>p:not(.eyebrow){font-size:17px;line-height:1.85;color:#4b433c;max-width:610px}
.portfolio-hero-collage{display:grid;grid-template-columns:1.05fr .72fr;grid-template-rows:310px 320px;gap:16px;position:relative}
.portfolio-hero-collage figure{margin:0;overflow:hidden;background:#ddd}
.portfolio-hero-collage img{height:100%;object-fit:cover}
.ph-one{grid-row:1/3}.ph-one img{object-position:center}
.ph-two img{object-position:center 58%}
.ph-three img{object-position:center}

.portfolio-work{background:var(--paper)}
.portfolio-work-head{display:grid;grid-template-columns:1.35fr .65fr;gap:7vw;align-items:end;margin-bottom:52px}
.portfolio-work-head h2{margin-bottom:0;max-width:760px}
.portfolio-work-head>p{font-size:15px;line-height:1.8;color:var(--muted);max-width:340px;justify-self:end;margin-bottom:7px}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:38px;border-top:1px solid var(--line);padding-top:22px}
.filter-button{border:1px solid var(--line);background:transparent;padding:11px 16px;text-transform:uppercase;letter-spacing:.13em;font-size:9px;color:#5d544b;cursor:pointer;transition:.22s}
.filter-button:hover,.filter-button.active{background:var(--wine);border-color:var(--wine);color:#fff8ee}

.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:250px;gap:14px}
.portfolio-item{margin:0;position:relative;overflow:hidden;background:#ddd;cursor:zoom-in;outline:none;min-height:0}
.portfolio-item.hidden-item{display:none}
.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .35s}
.portfolio-item::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,8,6,.7) 0%,rgba(12,8,6,0) 50%);opacity:.72;transition:.28s;pointer-events:none}
.portfolio-item figcaption{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;color:#fff8ee;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;transition:.28s}
.portfolio-item figcaption span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.78}
.portfolio-item figcaption strong{font-family:var(--serif);font-size:23px;font-weight:400;text-align:right;line-height:1.05}
.portfolio-item:hover img,.portfolio-item:focus img{transform:scale(1.045)}
.portfolio-item:hover::after,.portfolio-item:focus::after{opacity:.9}
.portfolio-item.tall{grid-row:span 2}.portfolio-item.wide{grid-column:span 2}.portfolio-item.span-2{grid-column:span 2}

.portfolio-film{background:#15110e;color:var(--cream)}
.portfolio-film-head{max-width:870px;margin-bottom:60px}
.portfolio-film-head .eyebrow{color:#bc7a82}
.portfolio-film-head>p:last-child{font-size:17px;line-height:1.85;color:rgba(247,241,232,.72);max-width:680px}
.portfolio-film-grid{display:grid;grid-template-columns:1.45fr .55fr;grid-template-rows:auto auto;gap:22px;align-items:start}
.portfolio-film-grid article{min-width:0}
.portfolio-film-grid video{width:100%;background:#080706;object-fit:cover}
.portfolio-film-main{grid-row:1/3}.portfolio-film-main video{aspect-ratio:16/10}
.portfolio-film-small video{aspect-ratio:16/9}
.portfolio-film-grid article>div{border-top:1px solid rgba(247,241,232,.18);margin-top:13px;padding-top:13px;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.portfolio-film-grid span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#bc7a82}
.portfolio-film-grid strong{font-family:var(--serif);font-weight:400;font-size:25px}

.portfolio-cta{background:var(--wine);color:var(--cream);text-align:center}
.portfolio-cta-inner{max-width:980px;margin:auto}
.portfolio-cta h2{font-size:clamp(52px,7vw,96px)}
.portfolio-cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

.lightbox{position:fixed;z-index:1000;inset:0;background:rgba(11,8,6,.94);display:none;align-items:center;justify-content:center;padding:70px 24px 30px}
.lightbox.open{display:flex}
.lightbox-inner{max-width:min(1200px,92vw);max-height:84vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox img{max-width:100%;max-height:76vh;width:auto;height:auto;object-fit:contain}
.lightbox-caption{margin:0;color:#eee3d6;font-family:var(--serif);font-size:22px;text-align:center}
.lightbox-close{position:absolute;right:28px;top:20px;border:0;background:none;color:#fff8ee;font-family:var(--serif);font-size:48px;line-height:1;cursor:pointer;font-weight:300}

@media(max-width:1100px){
  .portfolio-hero{grid-template-columns:1fr;min-height:auto;gap:48px}.portfolio-hero-copy{max-width:850px}.portfolio-hero-collage{min-height:590px}
  .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:240px}
}
@media(max-width:900px){
  .portfolio-hero{padding-top:120px}.portfolio-work-head{grid-template-columns:1fr}.portfolio-work-head>p{justify-self:start;max-width:600px}
  .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:260px}.portfolio-item.wide,.portfolio-item.span-2{grid-column:span 2}
  .portfolio-film-grid{grid-template-columns:1fr}.portfolio-film-main{grid-row:auto}.portfolio-film-small{max-width:720px}.portfolio-film-small video{aspect-ratio:16/9}
}
@media(max-width:580px){
  .portfolio-hero{padding:105px 22px 70px}.portfolio-hero-copy h1{font-size:clamp(46px,14vw,70px)}
  .portfolio-hero-collage{grid-template-columns:1.05fr .8fr;grid-template-rows:250px 230px;gap:9px;min-height:auto}
  .portfolio-work{padding-top:90px}.portfolio-filters{gap:7px}.filter-button{padding:10px 12px;font-size:8px}
  .portfolio-grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:7px}.portfolio-item.tall{grid-row:span 2}.portfolio-item.wide,.portfolio-item.span-2{grid-column:span 2}.portfolio-item figcaption{left:12px;right:12px;bottom:12px;display:block}.portfolio-item figcaption strong{display:block;text-align:left;font-size:19px;margin-top:4px}.portfolio-item figcaption span{font-size:7px}
  .portfolio-film{padding-top:90px;padding-bottom:90px}.portfolio-film-grid{gap:45px}.portfolio-film-grid strong{font-size:22px}
  .portfolio-cta{padding-top:100px;padding-bottom:100px}.portfolio-cta-actions{flex-direction:column;align-items:stretch}.portfolio-cta-actions .button{width:100%}
  .lightbox{padding:65px 14px 24px}.lightbox-close{right:14px;top:15px}
}