/* shared across every page: site nav, sticky notes, footer */
:root{
  --blue:#448cf2; --yellow:#fff422; --acid:#b5ff27; --pink:#ff579c;
  --ink:#0a0a0a; --kraft:#e5d5ac;
  --head:'Clash Display',sans-serif; --mono:'Space Mono',monospace;
  --body:'Satoshi',sans-serif; --hand:'White Cloth','Caveat',cursive;
}

.site-nav{
  position:fixed; top:24px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:2px;
  background:rgba(10,10,10,.65); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1); border-radius:99px;
  padding:7px 8px; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.site-nav a{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#bbb; text-decoration:none; padding:9px 18px; border-radius:99px; line-height:1;
  transition:color .2s ease, background .2s ease;
}
.site-nav a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.site-nav a.current{ color:#0a0a0a; background:var(--acid); font-weight:700; }
.site-nav .nav-mark{
  font-family:var(--head); font-weight:700; font-size:13px; color:#fff; line-height:1;
  padding:9px 20px 9px 18px; border-right:1px solid rgba(255,255,255,.15); margin-right:6px;
  display:flex; align-items:center;
}

/* sticky note component, reused as nav pins + flavor text */
.sticky{
  position:relative; padding:16px 18px 20px; min-width:120px;
  font-family:var(--hand); font-size:16px; line-height:1.25; color:#241f14;
  box-shadow:3px 6px 14px rgba(0,0,0,.35);
  text-decoration:none; display:inline-block;
}
.sticky.yellow{ background:#f5e94f; }
.sticky.pink{ background:#ff9fc4; }
.sticky.blue{ background:#a9d0ff; }
.sticky.acid{ background:#d4f57a; }
.sticky::before{
  content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 32% 32%, #fff, #b33 45%, #700 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.5);
}
.sticky-label{ font-family:var(--mono); font-weight:700; font-size:9px; text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:4px; opacity:.6; }
a.sticky{ transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; }
a.sticky:hover{ transform:translateY(-4px) rotate(0deg) !important; box-shadow:5px 10px 20px rgba(0,0,0,.45); }

/* -------- custom camera-focus cursor -------- */
input, textarea{ cursor:text; }
.cx-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
  z-index:9999; pointer-events:none;
  opacity:0; transition:width .22s cubic-bezier(.2,.8,.2,1), height .22s cubic-bezier(.2,.8,.2,1), margin .22s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.cx-corner{ position:absolute; width:10px; height:10px; border:2px solid var(--acid); transition:border-color .2s ease; }
.cx-corner.tl{ top:0; left:0; border-right:none; border-bottom:none; }
.cx-corner.tr{ top:0; right:0; border-left:none; border-bottom:none; }
.cx-corner.bl{ bottom:0; left:0; border-right:none; border-top:none; }
.cx-corner.br{ bottom:0; right:0; border-left:none; border-top:none; }
.cx-ring.is-active{ width:24px; height:24px; margin:-12px 0 0 -12px; }
.cx-ring.is-active .cx-corner{ border-color:var(--pink); }
.cx-ring.is-hover{ width:56px; height:56px; margin:-28px 0 0 -28px; }
.cx-dot{
  position:fixed; top:0; left:0; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%;
  background:var(--acid); z-index:9999; pointer-events:none; opacity:0; transition:opacity .2s ease;
}
.cx-label{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#0a0a0a; background:var(--acid); padding:4px 9px; border-radius:99px;
  opacity:0; transition:opacity .25s ease;
  margin:-40px 0 0 -20px;
}
.cx-label.show{ opacity:1; }
.cx-flash{
  position:fixed; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.95); margin:-5px 0 0 -5px;
  z-index:9998; pointer-events:none;
  animation:cxFlash .5s ease-out forwards;
}
@keyframes cxFlash{
  0%{ width:10px; height:10px; opacity:1; margin:-5px 0 0 -5px; }
  100%{ width:130px; height:130px; opacity:0; margin:-65px 0 0 -65px; }
}
@media (hover:none), (pointer:coarse){
  .cx-ring, .cx-dot, .cx-label{ display:none !important; }
}

.site-footer{
  position:relative; z-index:2; text-align:center; padding:50px 20px 40px;
  font-family:var(--mono); font-size:10px; color:#cfcfcf; text-transform:uppercase; letter-spacing:.08em;
  background:#0a0a0a;
}
.site-footer a{ color:var(--acid); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-note{ display:inline-block; margin-top:8px; color:var(--pink); font-family:var(--hand); font-size:14px; text-transform:none; letter-spacing:normal; }

@media (max-width:700px){
  .site-nav{ top:10px; padding:5px; }
  .site-nav a{ padding:7px 10px; font-size:9px; }
  .site-nav .nav-mark{ padding:6px 8px 6px 10px; font-size:10px; }
}