/* Shared page frame and masthead. Keep these dimensions identical on every page. */
:root{--site-width:1280px;--site-gutter:clamp(20px,4.4vw,72px);--site-ink:#3b3b3b}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body,body.body,body.unified-case{width:100%;max-width:none!important;margin:0!important;padding:0!important;background:#fff;color:var(--site-ink)}
.page-shell{width:100%;max-width:none;margin:0;padding:0!important}
.wrap,#main-content,body>.content,.site-footer{width:min(calc(100% - 2 * var(--site-gutter)),var(--site-width))!important;max-width:var(--site-width)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
.page-shell>#main-content{max-width:var(--site-width)!important}
#main-content>.portfolio-header{width:100%!important}
#main-content>.fixed-grid,#main-content>#books-grid,#main-content>.contact-shell,#main-content>.site-first-section{width:100%;max-width:none;margin-top:0!important;padding-left:0;padding-right:0}
#main-content>.site-first-section>.container{width:100%;max-width:none;padding:0;margin:0}
.portfolio-header{display:grid!important;grid-template-columns:170px minmax(0,1fr) 170px!important;align-items:center;gap:24px;min-height:198px!important;padding:28px 0 0!important;margin-top:0!important;margin-bottom:64px!important;border:0;font-family:Inter,system-ui,sans-serif;color:#3b3b3b;line-height:1.2}
.portfolio-header a{color:inherit;text-decoration:none}.portfolio-header p{margin:0}
.portfolio-header .portrait-link{display:block;width:170px}.portfolio-header .portrait-link img{display:block;width:170px;height:170px!important;max-width:100%;object-fit:contain}
.portfolio-header .signature-and-nav{text-align:center}.portfolio-header .identity{display:block;text-align:center;font-size:19px;font-weight:600;line-height:1.2;margin:0}
.portfolio-header .desktop-nav{display:flex;justify-content:center;gap:7px;margin-top:24px}
.portfolio-header .desktop-nav a{font-size:14px;font-weight:400;line-height:1.2;border:1px solid #3b3b3b;border-radius:4px;padding:9px 18px;white-space:nowrap}
.portfolio-header .desktop-nav a:hover{background:#ededed}.portfolio-header .desktop-nav .current{background:#3b3b3b;color:#fff}
.portfolio-header .header-socials{display:flex;justify-content:flex-end;gap:16px}.portfolio-header .header-socials img{width:24px;height:24px;opacity:.77}
.portfolio-header .mobile-nav{display:none;position:relative}.portfolio-header .mobile-nav summary{list-style:none;cursor:pointer;border:1px solid #3b3b3b;border-radius:4px;padding:8px 10px;font-size:14px}.portfolio-header .mobile-nav summary:after{content:' +'}
.portfolio-header .mobile-nav[open] summary:after{content:' −'}.portfolio-header .mobile-nav nav{position:absolute;right:0;top:44px;width:220px;padding:14px 22px;background:#fff;border:1px solid #d8d8d8;z-index:30;box-shadow:0 12px 32px #3b3b3b0d}.portfolio-header .mobile-nav nav a{display:block;padding:13px 0;font-size:14px}
.portfolio-header a:focus-visible,.portfolio-header summary:focus-visible{outline:2px solid #3b3b3b;outline-offset:5px}
.project-heading{padding-top:0!important}.portfolio-footer{margin-top:0}.secondary-content>.container,.secondary-content>.grid{max-width:none;width:100%;margin-top:0;padding:0}
@media(max-width:1068px){.portfolio-header{grid-template-columns:110px minmax(0,1fr)!important;min-height:214px!important}.portfolio-header .portrait-link{width:110px}.portfolio-header .header-socials{display:none}.portfolio-header .desktop-nav a{padding:9px 14px}}
@media(max-width:640px){.portfolio-header{grid-template-columns:54px minmax(0,1fr) auto!important;gap:12px;min-height:82px!important}.portfolio-header .portrait-link,.portfolio-header .portrait-link img{width:54px;height:54px!important}.portfolio-header .identity{font-size:15px;text-align:left}.portfolio-header .desktop-nav{display:none}.portfolio-header .mobile-nav{display:block}.portfolio-header .header-socials{display:none}}
.secondary-content>.blog{border:0;margin:0;max-width:760px;padding:0;font-size:17px;line-height:1.75}.secondary-content{margin-bottom:64px}.unified-case{letter-spacing:normal}
/* Keep the next-project arrow attached to its title rather than the column edge. */
.next-project>div>a{justify-content:flex-start;gap:14px}
.next-project>div>a>span{flex-shrink:0}

/* Shared footer, including pages that do not load case-study.css. */
.portfolio-footer{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid #d8d8d8;padding-block:26px;margin-bottom:12px;font-family:Inter,system-ui,sans-serif;font-size:12px;color:#626262}
.portfolio-footer p{margin:0;font-size:inherit;line-height:1.65}.portfolio-footer nav{display:flex;gap:24px}.portfolio-footer a{color:inherit;text-decoration:none}.portfolio-footer a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:560px){.portfolio-footer{flex-direction:column;gap:18px;font-size:11px}.portfolio-footer nav{gap:20px}}

.portfolio-header .desktop-nav a.current:hover,.portfolio-header .desktop-nav a.current:focus-visible{background:#3b3b3b;color:#fff}

/* Preserve the contact panel’s internal spacing within the shared page frame. */
#main-content>.contact-shell{padding:clamp(24px,5vw,56px)}

/* Shared typography: Inter for site copy; project specimens keep their own type. */
:root{--font-site:Inter,system-ui,sans-serif}
body{font-family:var(--font-site);font-weight:400;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:var(--font-site)}
p.job-years{font-family:var(--font-site)}
.portfolio-header,.portfolio-footer{font-family:var(--font-site)}