/* Shared site navigation shell. Homepage and page-specific CSS may only refine it. */
:root{--site-edge:16px;--nav-height:104px;--nav-progress:0}

.site-nav{
  position:fixed;
  z-index:90;
  top:12px;
  left:var(--site-edge);
  right:var(--site-edge);
  height:var(--nav-height);
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px clamp(18px,2.2vw,36px);
  border:1px solid rgba(157,133,198,calc(var(--nav-progress) * .42));
  border-radius:30px;
  background:rgba(43,28,71,calc(var(--nav-progress) * .94));
  box-shadow:0 18px 48px rgba(0,0,0,calc(var(--nav-progress) * .34));
  backdrop-filter:blur(calc(var(--nav-progress) * 18px));
  -webkit-backdrop-filter:blur(calc(var(--nav-progress) * 18px));
  transition:border-color .18s ease,box-shadow .18s ease;
}
.site-nav::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:var(--nav-progress);
  background:radial-gradient(circle at 76% 30%,rgba(157,133,198,.12),transparent 18%);
}
.nav-links{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
}
.site-nav .nav-link{
  height:62px;
  min-width:0;
  padding:0 28px;
  font-size:18px;
  text-decoration:none;
}
.site-nav .nav-projects{min-width:150px}
.site-nav .nav-about{min-width:160px}
.site-nav .nav-guides{min-width:140px}
.nav-postit-target{
  position:relative;
  z-index:1;
  margin-left:auto;
  width:176px;
  height:82px;
  flex:0 0 176px;
  pointer-events:none;
}

.nav-morph-postit{
  will-change:top,left,width,height,transform,font-size,padding;
  z-index:140!important;
  transition:box-shadow .22s ease;
  transform-origin:center center;
}
.nav-morph-postit.is-morphing{position:fixed;margin:0}
.nav-morph-postit.is-docked{
  box-shadow:0 22px 48px -10px rgba(0,0,0,.64),0 0 0 1px rgba(0,0,0,.08);
}
.nav-morph-postit.is-docked::before{width:42%;height:12%;top:-6%}
.nav-morph-postit.is-docked .postit-demo-cursor,
.nav-morph-postit.is-contact .postit-demo-cursor{display:none;animation:none}
.nav-morph-postit.is-docked .postit-demo-cursor::after,
.nav-morph-postit.is-contact .postit-demo-cursor::after{display:none;animation:none}

@media(max-width:900px){
  :root{--site-edge:9px;--nav-height:90px}
  .site-nav{top:7px;padding:9px 12px;gap:8px;border-radius:24px}
  .nav-links{gap:9px}
  .site-nav .nav-link{height:52px;padding:0 16px;font-size:14px}
  .site-nav .nav-projects,.site-nav .nav-about,.site-nav .nav-guides{min-width:0}
  .nav-postit-target{width:128px;flex-basis:128px}
}
@media(max-width:620px){
  .site-nav{overflow:visible}
  .site-nav .nav-link{height:46px;padding:0 11px;font-size:12px}
  .nav-postit-target{width:96px;flex-basis:96px}
}

@media(prefers-reduced-motion:reduce){
  .site-nav,.nav-morph-postit{transition:none!important}
}


/* Final navigation composition. */
:root{--scene-top:160px;--site-edge:16px;--nav-height:98px;--nav-progress:0}
.unified-nav.site-nav{top:12px;left:var(--site-edge);right:var(--site-edge);height:var(--nav-height);padding:10px 22px;gap:14px;z-index:150}
.unified-nav .nav-links{flex-wrap:nowrap;gap:12px;max-width:none}
.unified-nav .nav-link{min-width:0!important;padding:0 22px!important;height:56px!important;font-size:16px!important}
.unified-nav .nav-services{background:var(--terracotta);color:white}
.unified-nav .nav-about{background:rgba(139,70,111,.78);color:#fff;border:1px solid rgba(232,209,158,.42)}
.unified-nav .nav-logo{
  flex:0 0 60px;
  display:block;
  line-height:0;
  transform-origin:center;
}
.nav-logo img{
  width:60px;
  height:60px;
  display:block;
  transform-origin:center;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),filter .22s ease;
}
@media(min-width:981px) and (hover:hover) and (pointer:fine){
  .unified-nav .nav-logo:hover img,
  .unified-nav .nav-logo:focus-visible img{
    transform:scale(1.24) rotate(5deg);
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.22));
  }
  .unified-nav .nav-logo:active img{transform:scale(1.10) rotate(3deg)}
}
.unified-nav .nav-postit-target{width:152px;flex:0 0 152px;height:80px;margin-left:auto}
@media(min-width:981px){
  /* Desktop composition: logo left, navigation packed against the reserved post-it slot. */
  .unified-nav .nav-links{margin-left:auto}
  .unified-nav .nav-postit-target{margin-left:0}
}
.nav-morph-postit{position:fixed!important;z-index:170!important;margin:0!important;display:grid;place-items:center;left:calc(100% - 172px);top:22px;width:128px;height:128px;font-size:19px;padding:14px;transition:none!important;min-width:0!important;min-height:0!important;box-sizing:border-box}
.nav-morph-postit .postit-label{font-size:inherit;line-height:.98;pointer-events:none;min-width:0;max-width:100%}
.nav-morph-postit.is-docked .postit-demo-cursor{display:none}
.nav-morph-postit.is-action:hover{translate:0 -2px}
@media(max-width:1100px){
  .unified-nav .nav-link{padding:0 16px!important;font-size:14px!important}
  .unified-nav .nav-links{gap:8px}
}
@media(max-width:980px){
  :root{--scene-top:135px;--nav-height:94px}
  .unified-nav.site-nav{padding:8px 12px;gap:8px}
  .unified-nav .nav-link{height:48px!important;padding:0 12px!important;font-size:13px!important}
  .unified-nav .nav-postit-target{width:104px;flex-basis:104px}
  .nav-logo img{width:44px;height:44px}
  .unified-nav .nav-logo{flex-basis:44px}
}
@media(max-width:620px){
  :root{--site-edge:8px;--nav-height:106px;--scene-top:132px}
  .unified-nav.site-nav{top:8px;padding:8px;gap:5px;border-radius:22px}
  .unified-nav .nav-logo{flex:0 0 34px}
  .nav-logo img{width:34px;height:34px}
  .unified-nav .nav-links{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:none!important}
  .unified-nav .nav-link{width:100%;padding:0 6px!important;font-size:11px!important;height:36px!important;min-width:0!important}
  .unified-nav .nav-postit-target{flex:0 0 76px;width:76px;height:80px}
}
@media(prefers-reduced-motion:reduce){
  .nav-morph-postit{translate:none!important}
  .nav-logo img{transition:none!important;transform:none!important}
}