/* A centered, stacked signature with balanced navigation. */
header{position:fixed;top:0;left:0;right:0;z-index:100;height:156px;justify-content:center;padding:20px 5%;border-bottom:1px solid rgba(221,166,110,.22);background:transparent}
html{scroll-padding-top:170px}
header>.brand{position:relative;z-index:1;flex-direction:column;gap:7px;text-align:center;font-size:18px;letter-spacing:3px}
header>.brand svg{height:48px;width:39px}
header>.brand small{margin-top:8px;font-size:8px;letter-spacing:5px;padding-left:5px}
header>nav{position:absolute;left:5%;right:5%;top:55px;gap:36px}
header>nav .contact-link{margin-left:auto}
@media(min-width:801px) and (max-width:1050px){header>nav{gap:20px;font-size:10px}header>nav .contact-link{padding:17px 18px}header>nav span{margin-left:12px}header>.brand{font-size:16px}}
@media(max-width:800px){header{height:142px;padding:18px 7%}header>.brand{font-size:15px;gap:5px}header>.brand svg{height:43px;width:35px}header>.brand small{font-size:7px;letter-spacing:4px;padding-left:4px}header>.menu{position:absolute;right:7%;top:57px}header>nav{top:132px;left:5%;right:5%;gap:25px}header>nav .contact-link{margin-left:0}}

/* Native luminous cursor, without trailing decorations. */
@media(hover:hover) and (pointer:fine) and (forced-colors:none){
 html,html *,html *::before,html *::after,dialog::backdrop{cursor:url('cursor-amber.svg') 16 16,crosshair!important}
}
/* Touch equivalent of the desktop luminous cursor. */
.touch-cursor{display:none}
@media(hover:none),(pointer:coarse){
  .touch-cursor{display:block;position:fixed;left:0;top:0;width:38px;height:38px;background:url('cursor-amber.svg') center/contain no-repeat;pointer-events:none;z-index:2147483646;opacity:0;transform:translate3d(-100px,-100px,0);filter:brightness(1.12) drop-shadow(0 0 5px #ff9c48);transition:opacity .1s ease,filter .1s ease;will-change:transform,opacity}
  .touch-cursor.is-visible{opacity:1}
  .touch-cursor.is-interactive{filter:brightness(1.42) drop-shadow(0 0 9px #ffc18c)}
}