.portfolio-page { background:var(--ink); color:var(--paper); }
.portfolio-page .noise { opacity:.035; }
.portfolio-header { position:absolute; }
.work-hero { min-height:480px; padding:130px 3vw 65px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.work-hero>p { margin:0 0 34px; font:12px DM Mono; letter-spacing:.14em; opacity:.65; }
.work-hero h1 { margin:0; font-size:clamp(72px,10vw,150px); line-height:.78; letter-spacing:-.075em; font-weight:600; }
.work-hero h1 i { display:block; font-family:Playfair Display,serif; font-size:.58em; line-height:1; font-weight:500; letter-spacing:-.04em; }
.work-intro { max-width:580px; margin-top:42px; font-size:16px; line-height:1.55; opacity:.72; }
.portfolio-index { max-width:1500px; margin:auto; padding:0 3vw 110px; }
.filters { display:flex; justify-content:center; gap:12px; align-items:center; }
.filters button { border:1px solid #35414b; border-radius:100px; color:inherit; background:none; padding:12px 22px; font:12px DM Mono; letter-spacing:.08em; cursor:pointer; transition:background .25s,color .25s,border-color .25s; }
.filters button:hover { border-color:#72808b; }.filters button.active { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.project-count { text-align:center; margin:28px 0 30px; font:12px DM Mono; letter-spacing:.14em; opacity:.58; }.project-count span { color:var(--accent); }
.portfolio-list { display:grid; grid-template-columns:repeat(3,1fr); gap:38px 18px; }
.portfolio-row { min-width:0; opacity:1; transition:opacity .3s; text-align:left; border:0; padding:0; color:inherit; background:none; font:inherit; cursor:pointer; }
.portfolio-row.filtered-out { display:none; }
.row-media { position:relative; aspect-ratio:16/10; overflow:hidden; background-size:cover; background-position:center; filter:saturate(.78) contrast(1.03); transition:filter .55s ease,transform .55s cubic-bezier(.22,1,.36,1); }
.row-media:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.3)); opacity:.5; transition:opacity .45s; }
.portfolio-row:hover .row-media { transform:scale(1.012); filter:saturate(.92) contrast(1.02); }.portfolio-row:hover .row-media:after { opacity:.28; }
.card-index,.card-view { position:absolute; z-index:2; top:14px; font:12px DM Mono; letter-spacing:.08em; text-shadow:0 1px 5px #000; }.card-index { left:14px; color:var(--accent); }.card-view { top:auto; bottom:13px; right:14px; opacity:.7; transition:opacity .3s,transform .3s; }.portfolio-row:hover .card-view { opacity:1; transform:translate(2px,-2px); }
.row-title { padding-top:12px; display:block; }.row-title h2 { margin:0 0 7px; font-size:clamp(22px,1.8vw,30px); line-height:1; letter-spacing:-.045em; font-weight:500; }.row-title span { font:12px DM Mono; letter-spacing:.08em; opacity:.65; }
.work-next { max-width:1500px; min-height:auto; margin:0 auto 80px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:35px 3vw; display:grid; grid-template-columns:1fr 2fr; align-items:center; }.work-next p { font:12px DM Mono; letter-spacing:.1em; opacity:.55; }.work-next>a { font-size:clamp(34px,5vw,76px); line-height:.9; letter-spacing:-.06em; }.work-next a i { float:right; color:var(--accent); font-style:normal; }
.all-work { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:30px; font:12px DM Mono; letter-spacing:.1em; margin-bottom:70px; }.all-work span { font-size:clamp(22px,2.3vw,34px); font-family:Manrope; letter-spacing:-.04em; }.all-work b { font-weight:400; opacity:.55; }.all-work i { color:var(--accent); font-size:26px; font-style:normal; transition:transform .3s; }.all-work:hover i { transform:translate(5px,-5px); }
@media (max-width:900px) { .portfolio-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) {
  .work-hero { min-height:510px; padding:120px 20px 65px; }.work-hero h1 { font-size:19vw; }.work-intro { margin-top:42px; font-size:13px; max-width:340px; }.portfolio-index { padding:0 20px 75px; }.filters { justify-content:flex-start; overflow:auto; margin:0 -20px; padding:0 20px 8px; }.filters button { cursor:pointer; white-space:nowrap; padding:11px 18px; }.project-count { margin:22px 0 25px; }.portfolio-list { grid-template-columns:1fr; gap:36px; }.row-media { aspect-ratio:16/10; }.row-title h2 { font-size:29px; }.work-next { margin:0 20px 60px; padding:28px 0; grid-template-columns:1fr; gap:40px; }.work-next>a { font-size:13vw; }.all-work { grid-template-columns:1fr auto; }.all-work b { display:none; }
}