.portfolio-skip{position:absolute;left:16px;top:-80px;z-index:30;padding:10px 14px;background:var(--portfolio-next-bg);color:var(--portfolio-next-ink)}
.portfolio-skip:focus{top:12px}
.portfolio-header{position:absolute;inset:0 0 auto;z-index:12;border-bottom:1px solid currentColor;background:var(--portfolio-header-bg);color:var(--portfolio-header-ink);border-color:var(--portfolio-rule)}
.portfolio-header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.portfolio-brand{font-size:17px;font-weight:700;letter-spacing:-.04em;text-decoration:none;white-space:nowrap}
.portfolio-brand span{color:var(--portfolio-accent)}
.portfolio-nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,36px);font-size:13px}
.portfolio-nav a,.portfolio-mobile-nav a{text-decoration:none;color:inherit;transition:color .2s ease}
.portfolio-nav a:hover,.portfolio-mobile-nav a:hover,.portfolio-nav a:focus-visible,.portfolio-mobile-nav a:focus-visible{color:var(--portfolio-accent)}
.portfolio-nav .portfolio-nav-work{color:var(--portfolio-accent)}
.portfolio-mobile-menu{display:none}
.portfolio-next{background:var(--portfolio-next-bg);color:var(--portfolio-next-ink);padding:clamp(78px,10vw,150px) 0}
.portfolio-next-label{display:block;color:var(--portfolio-next-muted);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:30px}
.portfolio-next-link{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 0 30px;border-bottom:1px solid var(--portfolio-next-muted);text-decoration:none}
.portfolio-next-title{font:clamp(56px,10vw,148px)/.88 Georgia,serif;letter-spacing:-.07em;overflow-wrap:anywhere}
.portfolio-next-arrow{display:grid;place-items:center;width:clamp(52px,7vw,96px);aspect-ratio:1;border:1px solid currentColor;border-radius:50%;flex:none;transition:background .2s,color .2s,transform .2s}
.portfolio-next-arrow svg{width:42%;height:42%}
.portfolio-next-link:hover .portfolio-next-arrow,.portfolio-next-link:focus-visible .portfolio-next-arrow{background:var(--portfolio-next-ink);color:var(--portfolio-next-bg);transform:translate(3px,-3px)}
.portfolio-next-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:26px;font-size:14px}
.portfolio-next-bottom a{text-underline-offset:5px}
.portfolio-contact{padding:clamp(72px,9vw,120px) 0;background:var(--portfolio-contact-bg);color:var(--portfolio-contact-ink)}
.portfolio-contact .wrap{display:flex;justify-content:space-between;align-items:end;gap:30px}
.portfolio-contact p{margin:0 0 20px;opacity:.7}
.portfolio-contact h2{font:clamp(55px,8vw,118px)/.88 Georgia,serif;letter-spacing:-.065em;margin:0}
.portfolio-contact a{display:inline-flex;align-items:center;gap:12px;border:1px solid currentColor;padding:16px 20px;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.portfolio-contact a:hover,.portfolio-contact a:focus-visible{background:var(--portfolio-contact-ink);color:var(--portfolio-contact-bg)}
.portfolio-contact a svg{width:18px;height:18px}
.portfolio-footer{background:var(--portfolio-header-bg);color:var(--portfolio-header-ink);border-top:1px solid var(--portfolio-rule);padding:28px 0 36px;font-size:13px}
.portfolio-footer .wrap{display:flex;justify-content:space-between;gap:24px}
.portfolio-footer a{text-underline-offset:5px}
@media(max-width:760px){
  .portfolio-header-inner{min-height:66px}
  .portfolio-brand{font-size:15px}
  .portfolio-nav{display:none}
  .portfolio-mobile-menu{display:block;position:relative}
  .portfolio-mobile-menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;cursor:pointer}
  .portfolio-mobile-menu summary::-webkit-details-marker{display:none}
  .portfolio-mobile-menu summary svg{width:21px;height:21px}
  .portfolio-mobile-nav{position:absolute;right:0;top:calc(100% + 10px);display:grid;width:min(280px,calc(100vw - 32px));padding:8px 18px;background:var(--portfolio-header-bg);color:var(--portfolio-header-ink);border:1px solid var(--portfolio-rule);box-shadow:0 18px 40px #0005}
  .portfolio-mobile-nav a{padding:11px 0;border-bottom:1px solid var(--portfolio-rule)}
  .portfolio-mobile-nav a:last-child{border-bottom:0}
  .portfolio-next-link{align-items:center}
  .portfolio-next-title{font-size:clamp(50px,14vw,80px)}
  .portfolio-next-bottom{display:grid;gap:12px}
  .portfolio-contact .wrap{display:grid;justify-content:start}
  .portfolio-contact h2{font-size:clamp(57px,14vw,82px)}
  .portfolio-contact a{width:max-content}
  .portfolio-footer .wrap{display:grid;gap:12px}
}