:root{--szn-brown:#4e392c;--szn-cream:#f4efe5;--szn-sand:#c8b79f;--szn-ink:#30251e}
.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--szn-cream);color:var(--szn-ink);padding:14px 20px;text-decoration:none;font:600 14px "DM Sans",sans-serif}.skip-link:focus{top:12px}
.portfolio-nav{position:absolute;inset:0 0 auto;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px;padding:0 clamp(22px,5vw,80px);border-bottom:1px solid #f4efe526;color:#f4efe5;font-family:"DM Sans",Arial,sans-serif}
.portfolio-nav .wordmark{font-size:12px;font-weight:700;letter-spacing:.18em;text-decoration:none;white-space:nowrap;color:inherit}
.portfolio-nav nav{display:flex;align-items:center;gap:clamp(18px,3vw,42px)}.portfolio-nav nav a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.portfolio-nav nav a:hover,.portfolio-nav nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.portfolio-nav.on-light{color:var(--szn-ink);border-color:#4e392c25}
.portfolio-footer{padding:70px clamp(22px,5vw,80px) 28px;background:#2e241e;color:#f4efe5;font-family:"DM Sans",Arial,sans-serif}
.footer-invite{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-bottom:45px;border-bottom:1px solid #f4efe52d}.footer-invite p{margin:0 0 12px;font-size:11px;letter-spacing:.16em}.footer-invite h2{font:400 clamp(42px,6vw,78px)/1.05 "Instrument Serif",Georgia,serif;margin:0}.footer-invite>a{font-size:16px;color:inherit;text-underline-offset:7px;line-height:2}
.portfolio-footer .footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px;padding-top:25px;font-size:11px}.footer-row a{color:inherit;text-decoration:none}.footer-row .footer-brand{font-weight:700;letter-spacing:.16em}.footer-row nav{display:flex;flex-wrap:wrap;gap:24px}.footer-row nav a:hover{text-decoration:underline;text-underline-offset:5px}
.project-switcher{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:70px auto;max-width:1280px;width:calc(100% - 10vw)}.project-switcher a{display:flex;flex-direction:column;gap:12px;padding:30px 0;border-top:1px solid #4e392c45;text-decoration:none;color:inherit}.project-switcher span{font:600 10px "DM Sans",sans-serif;letter-spacing:.15em}.project-switcher strong{font:400 clamp(27px,4vw,46px)/1.12 "Instrument Serif",Georgia,serif}.project-switcher a:last-child{text-align:right;align-items:flex-end}
:focus-visible{outline:3px solid #ac7853;outline-offset:5px}
@media(max-width:600px){.portfolio-nav{min-height:68px;gap:10px}.portfolio-nav .wordmark{font-size:10px;letter-spacing:.1em}.portfolio-nav nav{gap:16px}.portfolio-nav nav a{font-size:10px;letter-spacing:.04em}.footer-invite{align-items:flex-start;flex-direction:column}.portfolio-footer{padding-top:52px}.project-switcher{gap:18px}.project-switcher strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.portfolio-nav{display:flex}
.portfolio-nav .nav-right{display:flex;align-items:center}
.nav-social{display:flex;align-items:center;gap:4px;margin-left:clamp(10px,2vw,28px);padding-left:clamp(10px,2vw,24px);border-left:1px solid currentColor;border-left-color:color-mix(in srgb,currentColor 30%,transparent)}
.nav-social a{display:inline-grid;place-items:center;width:34px;height:34px;color:inherit;border-radius:50%;opacity:.82;transition:opacity .2s,background-color .2s}
.nav-social a:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}
.portfolio-nav nav{margin-left:auto}
@media(max-width:600px){.nav-social{gap:0;margin-left:8px;padding-left:6px}.nav-social a{width:30px;height:30px}.nav-social svg{width:14px;height:14px}}
@media(max-width:400px){.portfolio-nav{padding:0 14px}.portfolio-nav nav{gap:12px}}

.portfolio-nav .wordmark{display:inline-flex;align-items:center;gap:10px}
.brand-mark{flex:none;display:block}
@media(max-width:600px){.portfolio-nav .wordmark{gap:7px}.brand-mark{width:22px;height:22px}}
@media(max-width:400px){.portfolio-nav .wordmark span{display:none}.brand-mark{width:28px;height:28px}}