/* ---- site chrome: shared by every project page ----
   the back link, the neon arrow, and the chrome faces — identical on all pages.
   colour comes from --tint, set per page (the project's pastel from projects.ts). */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600&family=Space+Grotesk:wght@400;500&display=swap');

.site-back{
  position:fixed;left:clamp(16px,2.4vw,40px);top:calc(46px + 1.2vh);z-index:9000;
  display:flex;flex-direction:column;align-items:center;gap:.45em;
  color:var(--tint,#fff);text-decoration:none;
  font-family:'Outfit','Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  opacity:.75;transition:opacity .3s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.site-back:hover,.site-back:focus-visible{opacity:1}
.site-back:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.site-back .arr{
  font-size:1.05rem;letter-spacing:0;line-height:1;
  text-shadow:0 0 3px currentColor,0 0 9px currentColor,0 0 20px currentColor;
  animation:chromeShimmer 2.8s ease-in-out infinite;
}
@keyframes chromeShimmer{0%,100%{filter:brightness(1)}42%{filter:brightness(1.35)}56%{filter:brightness(.92)}70%{filter:brightness(1.22)}}
@media (prefers-reduced-motion:reduce){.site-back .arr{animation:none}}
@media (max-width:700px){.site-back{font-size:.64rem;top:1.8vh}}

/* every arrow glyph on every page carries the same neon (chrome.js wraps them) */
.chrome-arrow{
  text-shadow:0 0 3px currentColor,0 0 9px currentColor,0 0 20px currentColor;
  animation:chromeShimmer 2.8s ease-in-out infinite;display:inline-block;
}
@media (prefers-reduced-motion:reduce){.chrome-arrow{animation:none}}

/* inside the portfolio's iframe the back link is hidden — the portfolio is already around the page */
.framed .site-back{display:none}

/* the menu strap — a thin black band across the top, the same on every page */
.site-strap{
  position:fixed;top:0;left:0;width:100vw;z-index:9001;
  display:flex;align-items:flex-start;justify-content:center;gap:clamp(.9rem,2.6vw,2.2rem);
  padding:0 3.5rem;overflow-x:auto;scrollbar-width:none;box-sizing:border-box;pointer-events:none;
  /* a shadow, not a colour: dark at the very top, gone by 120px — the page shows through */
  background:linear-gradient(to bottom,rgba(0,0,0,.6) 0,rgba(0,0,0,.45) 24px,rgba(0,0,0,.3) 48px,rgba(0,0,0,.16) 72px,rgba(0,0,0,.06) 96px,rgba(0,0,0,0) 120px);height:120px;
}
.site-strap a{height:64px;display:flex;align-items:center;pointer-events:auto}
.site-strap::-webkit-scrollbar{display:none}
.site-strap a{
  font-family:'Outfit','Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(.58rem,.95vw,.7rem);letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  color:var(--strapink,rgba(255,255,255,.45));text-decoration:none;white-space:nowrap;padding:.35em .1em;transition:color .35s ease;
}
.site-strap a:hover{color:var(--strapinkhi,rgba(255,255,255,.85))}
.site-strap a.is-current{text-shadow:0 0 6px currentColor,0 0 18px currentColor,0 0 42px currentColor;animation:chromeShimmer 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.site-strap a.is-current{animation:none}}
@media (max-width:700px){.site-strap{justify-content:center;flex-wrap:wrap;align-content:flex-start;gap:0 .8rem;padding:8px 2.8rem 0;overflow:hidden}.site-strap a{height:24px;font-size:.52rem;letter-spacing:.14em;padding:0}}
/* the Astria pages' own top-right chip drops under the strap */
.backchip{top:56px !important}

/* the side arrows on project pages */
.site-up{position:fixed;top:0;height:64px;display:grid;place-items:center;z-index:9002;padding:.4em .6em;
  font-family:'Outfit','Space Grotesk',sans-serif;font-weight:500;font-size:1.15rem;line-height:1;opacity:.6;text-decoration:none;transition:opacity .3s ease}
.site-up:hover{opacity:1}
.site-up-l{left:clamp(16px,2.4vw,40px)} .site-up-r{right:clamp(16px,2.4vw,40px)}
.site-up .chrome-arrow{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.site-up-l.is-up .chrome-arrow{transform:rotate(90deg)} .site-up-r.is-up .chrome-arrow{transform:rotate(-90deg)}
.site-up-l.is-up:hover .chrome-arrow{transform:rotate(90deg) scale(1.25)} .site-up-r.is-up:hover .chrome-arrow{transform:rotate(-90deg) scale(1.25)}
.site-back{display:none}

/* ---- the footer: the top strap mirrored at the bottom — one line, icons, folds away ---- */
.site-foot{
  position:fixed;bottom:0;left:0;width:100vw;height:120px;z-index:9001;box-sizing:border-box;
  display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(.9rem,2.2vw,1.8rem);padding:0 clamp(16px,2.4vw,40px);
  pointer-events:none;overflow:hidden;white-space:nowrap;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0,rgba(0,0,0,.45) 24px,rgba(0,0,0,.3) 48px,rgba(0,0,0,.16) 72px,rgba(0,0,0,.06) 96px,rgba(0,0,0,0) 120px);
  color:var(--strapink,rgba(255,255,255,.55));
  font-family:'Outfit','Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(.58rem,.95vw,.7rem);letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.site-foot>*{height:64px;display:flex;align-items:center;pointer-events:auto}
.site-foot nav{gap:1.1rem}
.site-foot nav a{display:flex;align-items:center;color:inherit;transition:color .3s ease}
.site-foot nav a:hover{color:var(--strapinkhi,#fff)}
.site-foot nav svg{width:17px;height:17px;display:block}
.site-foot .credit{opacity:.75}
.site-foot.is-folded{transform:translateY(64px)}
.site-foot nav{padding-right:2.4rem}
/* the small toggle at the corner: folds the footer away, brings it back; remembered per browser */
.site-fold{
  position:fixed;right:clamp(10px,1.4vw,22px);bottom:0;height:64px;width:28px;z-index:9002;display:grid;place-items:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--strapink,rgba(255,255,255,.55));
  font-family:'Outfit',sans-serif;font-size:.95rem;line-height:1;opacity:.7;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.site-fold:hover{opacity:1;color:var(--strapinkhi,#fff)}
.site-fold.is-folded{transform:rotate(180deg)}
@media (max-width:700px){.site-foot{padding:0 1rem;gap:.8rem}}

.framed .site-foot,.framed .site-fold{display:none}