/* Web adaptation of Apple's quiet navigation material and prominent action hierarchy. */
.header#header{--nav-glass:24,21,31;height:72px;padding:10px 16px 10px 24px;border-radius:36px;border:1px solid #ffffff1c;background:rgba(var(--nav-glass),.94);box-shadow:inset 0 1px 0 #ffffff10,0 8px 24px #00000018;isolation:isolate;gap:20px}
.case-page .header#header{--nav-glass:27,24,20}
.header#header:before{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#ffffff06,transparent 55%);box-shadow:none}
.header#header:after{display:none}
.header#header .wordmark{color:#faf8fc;text-shadow:none}
.header#header .desktop-nav{gap:4px}.header#header .desktop-nav a{color:#e2dee8;padding:10px 16px;border-radius:24px;text-shadow:none;transition:background 180ms ease,color 180ms ease}.header#header .desktop-nav a:hover{color:#fff;background:#ffffff0c}
.header#header .nav-contact{border-radius:999px;border:0;box-shadow:none;background-image:none;padding:13px 20px;gap:24px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.header#header{background:rgba(var(--nav-glass),.55);backdrop-filter:blur(10px) saturate(115%) brightness(.65);-webkit-backdrop-filter:blur(10px) saturate(115%) brightness(.65)}}
@media(max-width:600px){.header#header{height:64px;padding:8px 12px 8px 16px;border-radius:32px;gap:12px}.header#header .nav-contact{padding:12px 15px;gap:16px}.header#header .mobile-nav{border-radius:24px;background:rgba(var(--nav-glass),.96);border:1px solid #ffffff16;box-shadow:0 12px 28px #00000024}.header#header{backdrop-filter:blur(6px) saturate(115%) brightness(.65);-webkit-backdrop-filter:blur(6px) saturate(115%) brightness(.65)}}
@media(prefers-reduced-transparency:reduce){.header#header{background:rgb(var(--nav-glass));backdrop-filter:none;-webkit-backdrop-filter:none}.header#header:before{display:none}}

/* Personal portfolio navigation matches the original information architecture. */
.header#header{display:grid;grid-template-columns:1fr auto 1fr}
.header#header .desktop-nav{margin:0;justify-self:center}
.nav-actions{justify-self:end;display:flex;align-items:center;gap:10px}
.nav-linkedin{width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff24;border-radius:50%;font-size:1rem;font-weight:550;transition:background 180ms}
.nav-linkedin:hover{background:#ffffff0c}
@media(max-width:800px){.header#header{display:flex;gap:12px}.header#header .wordmark{font-size:1rem}.header#header .desktop-nav a{padding:10px}.nav-actions{margin-left:auto;gap:8px}.nav-linkedin{width:38px;height:38px}}
@media(max-width:600px){.nav-actions .nav-linkedin{display:none}.header#header .nav-contact{font-size:0.75rem;padding:11px 15px}.header#header .wordmark{font-size:1rem}}

/* A single violet light pass across the personal wordmark. */
.header#header .wordmark{justify-self:start;display:inline-block;position:relative;background-image:linear-gradient(110deg,#faf8fc 0%,#faf8fc 30%,#c3a0f5 40%,#f2e5ff 48%,#b78bea 57%,#c3a0f5 100%);background-size:320% 100%;background-position:0% 50%;background-clip:text;-webkit-background-clip:text;color:transparent;transition:background-position 1000ms cubic-bezier(.22,1,.36,1),text-shadow 700ms ease;outline-offset:8px;border-radius:3px}
.header#header .wordmark>span{color:#b99ae8;transition:color 650ms ease,text-shadow 650ms ease}
@media(hover:hover){.header#header .wordmark:hover{background-position:100% 50%;text-shadow:0 0 20px #b180ed35}.header#header .wordmark:hover>span{color:#e7d4ff;text-shadow:0 0 10px #be8aff99}}
.header#header .wordmark:focus-visible{background-position:100% 50%;outline:1px solid #c3a0f5;text-shadow:0 0 20px #b180ed35}
@media(prefers-reduced-motion:reduce){.header#header .wordmark,.header#header .wordmark>span{transition:none}}
html.no-motion .header#header .wordmark,html.no-motion .header#header .wordmark>span{transition:none}
@media(forced-colors:active){.header#header .wordmark{background:none;color:LinkText}}

/* Match the shared desktop content width; retain mobile outer gutters. */
body[class] .header#header{top:20px;left:50%;transform:translateX(-50%);width:calc(100% - 80px);max-width:1160px;border-radius:36px;border:1px solid #ffffff1c;box-shadow:inset 0 1px 0 #ffffff10,0 8px 24px #00000018;padding:10px 16px 10px 24px}
@media(max-width:700px){body[class] .header#header{left:50%;width:calc(100% - 32px)}}
@media(max-width:600px){body[class] .header#header{border-radius:32px;padding:8px 12px 8px 16px}}