*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  background:var(--wall);
  color:var(--text);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
body.modal-open{overflow:hidden}
[id]{scroll-margin-top:82px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:20px;
  padding:14px 24px;
  background:var(--headbg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.logo{font-family:var(--display);font-size:22px;font-weight:var(--display-weight);letter-spacing:var(--display-tracking);text-decoration:none;white-space:nowrap}
.logo em{font-style:normal;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:2px;display:block;margin-top:-4px}
nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:var(--label-tracking);text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:6px;white-space:nowrap;
}
nav a:hover,nav a:focus-visible{color:var(--text);background:var(--panel-2)}

::view-transition-old(root){animation:untapped-fade-out .22s ease both}
::view-transition-new(root){animation:untapped-fade-in .38s cubic-bezier(.2,.75,.2,1) both}
@keyframes untapped-fade-out{to{opacity:.3;filter:blur(2px)}}
@keyframes untapped-fade-in{from{opacity:0;filter:blur(3px)}}

footer{
  max-width:1440px;margin:0 auto;padding:28px 24px 96px;
  display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
  color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.5px;
  border-top:1px solid var(--line);
}
footer .spacer{margin-left:auto}
footer a{color:var(--muted)}