/* Shared site chrome (nav + footer) for every bearhole.dk page.
 * One source of truth — the markup is stamped in by build-chrome.js, the look
 * lives here. Self-contained: only depends on the Space Grotesk / Space Mono
 * fonts every page already loads, so it renders identically on any page
 * regardless of that page's own <style>. Edit here, then `npm run build`. */

:root{
  --wb-bg:#07080d; --wb-panel:#08090f; --wb-line:#12172070;
  --wb-teal:#00E5C0; --wb-teal2:#00c9a9;
  --wb-t1:#e7ebf0; --wb-t2:#b6bcc6; --wb-t3:#6b7280; --wb-t4:#5a6270;
}

/* ---- NAV -------------------------------------------------------------- */
.site-nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:28px; padding:14px 40px; background:rgba(7,8,13,.78);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--wb-line);
  font-family:'Space Grotesk',system-ui,sans-serif;
}
.site-nav a{text-decoration:none;color:var(--wb-t2)}
.site-nav .brand{display:flex; align-items:center; gap:11px}
.site-nav .brand img{filter:drop-shadow(0 0 8px rgba(0,229,192,.35))}
.site-nav .brand .name{font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--wb-t1)}
.site-nav .alpha{
  font-family:'Space Mono',ui-monospace,monospace; font-size:9px; font-weight:700;
  letter-spacing:.14em; color:#05060a; background:linear-gradient(90deg,var(--wb-teal),var(--wb-teal2));
  padding:3px 6px; border-radius:4px; margin-left:2px;
}
.site-nav .links{display:flex; gap:26px; margin-left:18px; font-size:14px; font-weight:500}
.site-nav .links a:hover{color:var(--wb-t1)}
.site-nav .links a[aria-current="page"]{color:var(--wb-teal)}
.site-nav .right{margin-left:auto; display:flex; align-items:center; gap:16px}
.site-nav .right .src{font-size:14px; font-weight:600; color:var(--wb-t1)}
.site-nav .right .src:hover{color:var(--wb-teal)}

.glitch{color:var(--wb-teal); display:inline-block; animation:wb-glitch 3s steps(1) infinite}
@keyframes wb-glitch{
  0%,38%,100%{text-shadow:none}
  40%{text-shadow:-2px 0 #ff2e63,2px 0 var(--wb-teal)}
  44%{text-shadow:-3px 0 var(--wb-teal),3px 0 #ff2e63}
  46%{text-shadow:none}
  70%{text-shadow:-2px 0 #05d9e8,2px 0 #ff2e63}
  72%{text-shadow:none}
}
@media(prefers-reduced-motion:reduce){.glitch{animation:none}}

.site-nav .dl{
  background:var(--wb-teal); color:#05060a; font-weight:700; border-radius:11px;
  padding:9px 18px; font-size:14px; transition:transform .12s,box-shadow .12s;
}
.site-nav .dl:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,229,192,.35)}

@media(max-width:900px){
  .site-nav{gap:14px; padding:12px 20px}
  .site-nav .links{display:none}
}

/* ---- FOOTER ----------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--wb-line); background:var(--wb-panel); padding:44px 40px;
  font-family:'Space Grotesk',system-ui,sans-serif;
}
.site-footer a{text-decoration:none; color:var(--wb-t2)}
.site-footer .top{
  max-width:1120px; margin:0 auto; display:flex; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.site-footer .about{max-width:300px}
.site-footer .about .name{display:flex; align-items:center; gap:10px}
/* Only the outer wordmark span gets the light colour — a `> span` so it doesn't
   out-specify the nested `.glitch`, which must stay teal (was rendering the
   footer "hole" light-with-glitch instead of teal-with-glitch). */
.site-footer .about .name > span{font-weight:700; font-size:17px; color:var(--wb-t1)}
.site-footer .about p{font-size:13px; color:var(--wb-t3); line-height:1.6; margin:14px 0 0}
.site-footer .cols{display:flex; gap:56px; flex-wrap:wrap}
.site-footer .col h4{
  font-family:'Space Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--wb-t4); margin:0 0 12px;
}
.site-footer .col nav{display:flex; flex-direction:column; gap:9px; font-size:14px}
.site-footer .col nav a:hover{color:var(--wb-teal)}
.site-footer .bottom{
  max-width:1120px; margin:32px auto 0; padding-top:24px;
  border-top:1px solid var(--wb-line); font-family:'Space Mono',ui-monospace,monospace;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12px; color:var(--wb-t4);
}
.site-footer .bottom .made{display:inline-flex; align-items:center; gap:8px; color:var(--wb-t3)}
.site-footer .bottom .made svg{border-radius:2px}
.site-footer .bottom .torpor{display:inline-flex; align-items:center; gap:7px; color:#8a929c}
.site-footer .bottom .torpor img{border-radius:50%}
.site-footer .bottom .torpor b{letter-spacing:.12em; display:inline-block; transform-origin:center}
/* Torpor's resting heartbeat — one soft lub-dub every 7.5s (8 bpm, "a bear in
   torpor"), matching torpor.dk. Applied to the TORPOR wordmark. */
@keyframes wb-torpor-beat{
  0%,90%,100%{transform:scale(1)}
  3%{transform:scale(1.14)} 6%{transform:scale(1.02)}
  9%{transform:scale(1.08)} 13%{transform:scale(1)}
}
body:not(.a11y-reduce-motion) .site-footer .bottom .torpor b{animation:wb-torpor-beat 7.5s ease-out infinite}
@media(prefers-reduced-motion:reduce){.site-footer .bottom .torpor b{animation:none}}
.site-footer .bottom .torpor:hover{color:var(--wb-teal)}
@media(max-width:900px){.site-footer{padding:36px 20px}}