.works{background:#f5f4ef}.works-top{margin-bottom:48px}.portfolio-list{display:grid;gap:72px}.portfolio-project{min-width:0}.portfolio-preview{height:clamp(440px,54vw,690px);display:block;overflow:hidden;position:relative;isolation:isolate;color:#18312a;background:#d8c7ad}.portfolio-preview img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.portfolio-preview:hover img{transform:scale(1.035)}.portfolio-preview:focus-visible{outline:3px solid #c6ae67;outline-offset:4px}.portfolio-preview-top,.portfolio-preview-copy{position:absolute;z-index:2;left:5%;right:5%;display:flex}.portfolio-preview-top{top:5%;align-items:center;justify-content:space-between;gap:20px;font:600 11px var(--sans);letter-spacing:.14em}.portfolio-preview-top b{font:600 28px var(--serif);letter-spacing:.07em}.portfolio-preview-top b span{font:700 9px var(--sans);vertical-align:top}.portfolio-preview-copy{top:34%;flex-direction:column;align-items:flex-start}.portfolio-preview-copy small{font:700 10px var(--sans);letter-spacing:.2em;margin-bottom:22px}.portfolio-preview-copy strong{font:500 clamp(51px,6vw,91px)/.91 var(--serif);letter-spacing:-.045em}.portfolio-preview-copy strong em{font-weight:400}.portfolio-preview-copy>span{font:700 12px var(--sans);border-bottom:1px solid currentColor;padding:9px 0;margin-top:30px}.portfolio-preview-open{position:absolute;z-index:2;right:4%;bottom:7%;width:56px;height:56px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font-size:25px;transition:background .2s,color .2s,transform .2s}.portfolio-preview:hover .portfolio-preview-open{background:currentColor;transform:rotate(45deg)}.portfolio-project-meta{padding:22px 0 0;display:flex;justify-content:space-between;align-items:end;gap:20px}.portfolio-project-meta>div>span{font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--green2)}.portfolio-project-meta h3{font:600 clamp(30px,3vw,42px)/1.1 var(--sans);letter-spacing:-.05em;margin:10px 0 7px}.portfolio-project-meta p{margin:0;color:var(--muted);font-size:13px}.portfolio-project-meta>a{font-weight:700;font-size:13px;white-space:nowrap;border-bottom:1px solid var(--green);padding-bottom:7px;color:var(--green)}.portfolio-project-meta>a span{margin-left:16px}.portfolio-noma .portfolio-preview{color:#fff;background:#18352d}.portfolio-noma .portfolio-preview:after,.portfolio-atlas .portfolio-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,15,12,.73),transparent 78%);z-index:1}.portfolio-noma .portfolio-preview-top b{font:700 30px var(--sans);letter-spacing:-.07em}.portfolio-noma .portfolio-preview-copy strong{font-family:var(--sans);font-weight:500;letter-spacing:-.07em}.portfolio-noma .portfolio-preview-copy strong em{font:italic 500 .95em var(--serif);letter-spacing:-.03em}.portfolio-atlas .portfolio-preview{color:#fff;background:#203344}.portfolio-atlas .portfolio-preview-top b{font:700 30px var(--sans);letter-spacing:-.08em}.portfolio-atlas .portfolio-preview-copy strong{font:600 clamp(52px,6vw,90px)/.96 var(--sans);letter-spacing:-.08em}.portfolio-disclaimer{border-top:1px solid var(--line);padding-top:20px;margin:72px 0 0;color:var(--muted);font-size:12px}
@media(max-width:760px){.portfolio-list{gap:54px}.portfolio-preview{height:560px}.portfolio-preview img{object-position:64% center}.portfolio-aurora .portfolio-preview img{object-position:66% center}.portfolio-preview-top,.portfolio-preview-copy{left:7%;right:7%}.portfolio-preview-top{top:6%}.portfolio-preview-top>span{display:none}.portfolio-preview-copy{top:34%}.portfolio-preview-copy strong{font-size:clamp(48px,11vw,76px)}.portfolio-noma .portfolio-preview:after,.portfolio-atlas .portfolio-preview:after{background:linear-gradient(90deg,rgba(2,15,12,.7),rgba(2,15,12,.08))}.portfolio-project-meta{align-items:start;flex-direction:column}.portfolio-project-meta>a{margin-top:4px}.portfolio-disclaimer{margin-top:55px}}
@media(max-width:480px){.portfolio-preview{height:490px}.portfolio-preview-copy{top:32%}.portfolio-preview-copy strong,.portfolio-atlas .portfolio-preview-copy strong{font-size:48px}.portfolio-preview-copy small{font-size:9px}.portfolio-preview-open{width:44px;height:44px;font-size:21px}.portfolio-project-meta h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.portfolio-preview img,.portfolio-preview-open{transition:none}}
.portfolio-aurora .portfolio-preview-top{justify-content:flex-start;gap:clamp(32px,6vw,80px)}