/* Shared header: compact desktop navigation and an accessible mobile disclosure. */
body:is(.home-page,.about-page,.project-page) .site-header { position:fixed; top:clamp(1.5rem,3vw,3rem); left:clamp(1.2rem,3.5vw,4rem); right:clamp(1.2rem,3.5vw,4rem); z-index:50; display:flex; flex-direction:row; justify-content:space-between; align-items:flex-start; gap:2rem; padding:0; pointer-events:none; transition:transform 340ms cubic-bezier(.22,1,.36,1),opacity 300ms ease; }
body:is(.home-page,.about-page,.project-page) .site-header .site-title { position:relative; z-index:53; width:auto; height:auto; margin:0; padding:0; overflow:visible; clip:auto; white-space:normal; border:0; opacity:1!important; transform:none!important; animation:none!important; }
.site-brand-link { display:inline-flex; flex-direction:column; gap:.55rem; width:max-content; color:#f1eee5; pointer-events:auto; text-decoration:none; }
.site-brand-mark-wrap { display:block; position:relative; width:100%; aspect-ratio:795/254; }
.site-brand-mark { position:absolute; inset:0; display:block; width:100%; height:100%; }
.site-brand-name { font-family:'Instrument Sans',sans-serif; font-size:clamp(.39rem,.47vw,.49rem); font-weight:500; line-height:1.3; letter-spacing:.17em; white-space:nowrap; text-transform:uppercase; }
body:is(.home-page,.about-page,.project-page) .site-header .site-nav { position:static; display:flex; flex-direction:column; align-items:flex-end; gap:.75rem; width:auto; margin:0; padding:.25rem 0; background:none; border:0; transform:none; opacity:1; animation:none; pointer-events:auto; }
body:is(.home-page,.about-page,.project-page) .site-header .site-nav>a,body:is(.home-page,.about-page,.project-page) .site-header .site-projects summary { font-family:'Instrument Sans',sans-serif; font-size:clamp(.62rem,.75vw,.78rem); font-weight:440; line-height:1.4; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.82); min-width:0; }
body:is(.home-page,.about-page,.project-page) .site-header .site-nav>a:hover,body:is(.home-page,.about-page,.project-page) .site-header .site-projects summary:hover { color:#fff; }
body:is(.home-page,.about-page,.project-page) .site-header .site-projects { position:relative; }
body:is(.home-page,.about-page,.project-page) .site-header .site-projects-panel { position:static; top:auto; right:auto; width:max-content; max-width:calc(100vw - 2.4rem); background:rgba(5,5,5,.96); padding:0 .8rem; z-index:51; }
body:is(.home-page,.about-page,.project-page) .site-header .site-projects-panel a { color:rgba(244,241,232,.8); padding:.15rem 0; }
body:is(.home-page,.about-page,.project-page) .site-header .site-projects-panel a:last-child { margin-bottom:.6rem; }
body:is(.home-page,.about-page,.project-page) .site-header.header-hidden { transform:translateY(calc(-100% - 4rem)); opacity:0; pointer-events:none; }
body:is(.home-page,.about-page,.project-page) .site-header:focus-within { transform:none; opacity:1; }
.site-menu-toggle { display:none; }
.site-header a:focus-visible,.site-header summary:focus-visible,.site-menu-toggle:focus-visible { outline:1px solid #f1eee5; outline-offset:6px; }
.js .site-brand-link { animation:navigationEnter 820ms cubic-bezier(.22,1,.36,1) both; }
.js body:is(.home-page,.about-page,.project-page) .site-header .site-nav { animation:navigationEnter 780ms cubic-bezier(.22,1,.36,1) 250ms both; }
@keyframes navigationEnter { from { opacity:0; translate:0 -6px; } to { opacity:1; translate:0 0; } }
@media(max-width:980px) {
  body:is(.home-page,.about-page,.project-page) .site-header { top:1.5rem; gap:1rem; }
  .site-menu-toggle { display:inline-flex; align-items:center; gap:.65rem; padding:.45rem 0 .45rem .65rem; border:0; background:none; color:#f1eee5; font:440 .7rem/1.4 'Instrument Sans',sans-serif; letter-spacing:.17em; text-transform:uppercase; cursor:pointer; pointer-events:auto; z-index:53; }
  .site-menu-icon { position:relative; display:block; width:16px; height:10px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; transition:transform .25s; }
  .site-menu-toggle[aria-expanded=true] .site-menu-icon { border-bottom:0; height:1px; transform:rotate(45deg); }
  .site-menu-toggle[aria-expanded=true] .site-menu-icon::after { content:''; position:absolute; inset:-1px 0 0; border-top:1px solid currentColor; transform:rotate(90deg); }
  .js body:is(.home-page,.about-page,.project-page) .site-header .site-nav { position:fixed; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.7rem; width:100%; height:100dvh; padding:7rem 8vw 3rem; background:#050505; visibility:hidden; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .3s ease,transform .3s ease,visibility .3s; animation:none; }
  .js body.mobile-menu-open .site-header .site-nav { visibility:visible; opacity:1; pointer-events:auto; transform:none; }
  body.mobile-menu-open { overflow:hidden; }
  body.mobile-menu-open .site-header { transform:none; opacity:1; }
  body:is(.home-page,.about-page,.project-page) .site-header .site-brand-link { position:relative; z-index:53; }
  body:is(.home-page,.about-page,.project-page) .site-header .site-nav>a,body:is(.home-page,.about-page,.project-page) .site-header .site-projects summary { font-size:.92rem; }
  body:is(.home-page,.about-page,.project-page) .site-header .site-projects-panel { position:static; background:none; padding:0; width:auto; max-width:100%; justify-items:start; }
  body:is(.home-page,.about-page,.project-page) .site-header .site-projects { justify-items:start; }
  body:is(.home-page,.about-page,.project-page) .site-header .site-projects-panel a { white-space:normal; font-size:.9rem; }
  body.project-page .portfolio-layout { padding-top:7rem; }
  body.about-page .about-grid { padding-top:7rem; }
  body.journal-page main { padding-top:7rem; }
}
@media(prefers-reduced-motion:reduce) { body:is(.home-page,.about-page,.project-page) .site-header,body:is(.home-page,.about-page,.project-page) .site-header .site-nav,.site-menu-icon { transition:none!important; } .js .site-brand-link,.js body:is(.home-page,.about-page,.project-page) .site-header .site-nav { animation:none!important; } }