/* A compact floating frame, with icons drawn from the shared Arcan grid. */
:root{--header-height:116px}
.header{position:fixed;inset:18px var(--gutter) auto;min-height:78px;padding:12px 20px 12px 24px;gap:20px;border:1px solid #e7d6be32;border-radius:2px 14px 2px 14px;background:#14293ced;box-shadow:0 10px 36px #0718241a;backdrop-filter:blur(20px);transition:transform .3s ease,background-color .25s ease,box-shadow .25s ease;transform:translateY(0);color:var(--pearl)}
.header.header-hidden{transform:translateY(calc(-100% - 26px));pointer-events:none}
.header:focus-within,.header.menu-is-open{transform:translateY(0);pointer-events:auto}
.header.header-scrolled{background:#14293cf7;box-shadow:0 12px 40px #07182430}
.header .brand{margin:0;flex:none;padding:0;padding-inline-end:20px;border-inline-end:1px solid #e7d6be25}
.header .brand img{width:160px;height:auto}
.header nav{display:flex;position:static;align-items:center;gap:10px;padding:0;background:none}
.header nav .nav-item{position:relative;display:flex;align-items:center;justify-content:center;gap:0;width:48px;min-width:48px;min-height:48px;padding:0;line-height:1.2;border:0;border-radius:2px;color:var(--sand);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.header .nav-symbol{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:1px solid #e7d6be30;border-radius:2px;background:#e7d6be06;transition:background-color .2s ease,border-color .2s ease}
.header .nav-symbol svg{display:block;width:26px;height:26px;stroke-width:1.9}
.header .nav-full{display:none}
.header nav .nav-item:hover .nav-symbol,.header nav .nav-item:focus-visible .nav-symbol{background:#e7d6be12;border-color:#e7d6be65}
.header nav .nav-item[aria-current]{color:var(--sand)}
.header nav .nav-item[aria-current]::after{content:"";position:absolute;bottom:3px;left:calc(50% - 9px);width:18px;height:1px;background:var(--sand)}
.header .nav-tooltip{position:absolute;top:calc(100% + 22px);left:50%;transform:translate(-50%,-5px);white-space:nowrap;padding:10px 14px;border:1px solid #e7d6be35;background:#14293c;color:var(--pearl);font-size:.8125rem;font-weight:400;line-height:1.5;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
.header .nav-tooltip::before{content:"";position:absolute;left:0;right:0;top:-23px;height:23px}
.header .nav-tooltip::after{content:"";position:absolute;left:calc(50% - 3px);top:-4px;width:6px;height:6px;background:var(--ink);border-top:1px solid #e7d6be35;border-left:1px solid #e7d6be35;transform:rotate(45deg)}
.header .nav-item:hover .nav-tooltip,.header .nav-item:focus-visible .nav-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.header.labels-dismissed .nav-tooltip{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.header .menu-toggle{display:none}
.canvas-page .header{view-transition-name:arcan-header}
.canvas-page.cinematic-page main{padding-top:0}
html{scroll-padding-top:132px}

@media(max-width:1100px){
 :root{--header-height:104px}
 .header{inset:12px var(--gutter) auto;min-height:72px;padding:12px 18px;gap:1rem;border-radius:2px 12px 2px 12px}
 .header .brand{border:0;padding:0}
 .header .brand img{width:150px}
 .header.header-hidden{transform:none;pointer-events:auto}
 .header .menu-toggle{display:flex;align-items:center;gap:12px;color:var(--pearl);font-size:.875rem;min-height:44px;padding:8px 10px;border:1px solid #e7d6be35;border-radius:2px;background:transparent}
 .header .menu-toggle>span{font-size:20px;line-height:1}
 .header nav{display:none;position:absolute;inset:calc(100% + 10px) -1px auto;padding:12px 18px;background:#14293cfb;border:1px solid #e7d6be32;border-radius:2px 12px 2px 12px;box-shadow:0 20px 45px #07182438;flex-direction:column;align-items:stretch;gap:0;max-height:calc(100dvh - 118px);overflow-y:auto;overscroll-behavior:contain}
 .header nav.is-open{display:flex}
 .header nav .nav-item{justify-content:flex-start;gap:20px;width:100%;min-height:72px;padding:12px 0;border:0;border-bottom:1px solid #e7d6be20;border-radius:0}
 .header nav .nav-item:last-child{border-bottom:0}
 .header .nav-tooltip{display:none}
 .header .nav-full{display:block;font-family:var(--font-display);font-size:1.0625rem;line-height:1.5;font-weight:500}
 .header nav .nav-item[aria-current]::after{left:15px;top:auto;bottom:15px;width:18px;height:1px}
 html{scroll-padding-top:116px}
}
@media(max-width:420px){.header{gap:8px}.header .menu-toggle{font-size:.75rem}}
@media(max-width:380px){.header{padding-inline:12px}.header .brand img{width:116px}.header .menu-toggle{gap:8px;padding-inline:8px}.header nav{padding-inline:12px}}
/* Ordinary document navigation remains the fallback when this API is unavailable. */
::view-transition{background:#14293c url('/assets/hero-start.jpg') center/cover no-repeat;pointer-events:none}
::view-transition-group(root){animation:none}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;animation-duration:.52s;animation-timing-function:cubic-bezier(.65,0,.3,1);animation-fill-mode:both}
::view-transition-old(root){animation-name:arcan-plane-out}
::view-transition-new(root){animation-name:arcan-plane-in}
::view-transition-group(arcan-header){z-index:10;animation-duration:.52s}
::view-transition-old(arcan-header){animation:arcan-header-out .16s ease both}
::view-transition-new(arcan-header){animation:arcan-header-in .18s .12s ease both}
@keyframes arcan-plane-out{from{clip-path:polygon(0 0,110% 0,100% 100%,0 100%)}to{clip-path:polygon(0 0,-10% 0,-20% 100%,0 100%)}}
@keyframes arcan-plane-in{from{clip-path:polygon(120% 0,120% 0,120% 100%,110% 100%)}to{clip-path:polygon(0 0,100% 0,100% 100%,-10% 100%)}}
@keyframes arcan-header-out{to{opacity:0}}
@keyframes arcan-header-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .header{transition:none}
 .header .nav-item,.header .nav-symbol,.header .nav-tooltip{transition:none!important}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}