/* ==========================================================================
   3030 terminal skin — applied to every content page (not / or /classic/).
   Replaces the old site header with the HUD bar, adds CRT dressing,
   command palette and ink transitions. Copy comes from /loc.js.
   ========================================================================== */

:root {
  --t-bg: #0e1826;
  --t-panel: #182535;
  --t-ink: #f4f1ea;
  --t-dim: #8fa3bb;
  --t-pink: #fa5c79;
  --t-teal: #37d3de;
  --t-led: #7dffa0;
  --t-mono: 'Space Mono', ui-monospace, Menlo, monospace;
}

/* retire the old squarespace header; HUD replaces it */
.header { display: none !important; }
body { padding-top: 56px !important; }

/* ---- CRT overlays (injected divs) ---- */
.t-scan {
  position: fixed; inset: 0; pointer-events: none; z-index: 9990;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
}
.t-vig {
  position: fixed; inset: 0; pointer-events: none; z-index: 9991;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(3,7,14,.38) 100%);
}

/* ---- HUD ---- */
.t-hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem 1.1rem;
  background: rgba(10,17,28,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(55,211,222,.3);
  font-family: var(--t-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  box-sizing: border-box;
}
.t-hud a { text-decoration: none; }
.t-hud .t-path { color: var(--t-teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.t-hud nav { display: flex; gap: .95rem; flex-wrap: wrap; }
.t-hud nav a { color: var(--t-dim); text-transform: uppercase; }
.t-hud nav a:hover, .t-hud nav a.here { color: var(--t-pink); }
.t-hud .t-right { margin-left: auto; display: flex; gap: 1rem; color: var(--t-dim); white-space: nowrap; align-items: center; }
.t-hud .t-ok { color: var(--t-led); }
.t-hud kbd {
  border: 1px solid rgba(255,255,255,.25); border-radius: 4px;
  padding: 0 .3em; font-family: inherit; font-size: .95em; cursor: pointer; color: var(--t-dim);
}
.t-hud .t-socials { display: flex; gap: .45rem; align-items: center; }
.t-hud .t-socials a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 6px;
  background: #000; border: 1px solid rgba(255,255,255,.2);
  transition: background .15s ease, border-color .15s ease;
}
.t-hud .t-socials svg { width: 25px; height: 25px; fill: #fff; }
.t-hud .t-socials a:hover { background: var(--t-pink); border-color: var(--t-pink); }
@media (max-width: 1100px) { .t-hud .t-clock { display: none; } }
@media (max-width: 720px) {
  .t-hud { gap: .8rem; }
  .t-hud .t-path, .t-hud .t-clock { display: none; }
}

/* ---- ink transition ---- */
#t-ink { position: fixed; inset: 0; z-index: 10050; pointer-events: none; display: none; }
#t-ink.play { display: block; }
#t-ink svg { position: absolute; width: 340vmax; height: 340vmax; transform: translate(-50%, -50%) scale(0); }
#t-ink.play svg { animation: t-splat .5s cubic-bezier(.6, 0, .8, 1) forwards; }
@keyframes t-splat { to { transform: translate(-50%, -50%) scale(1); } }
#t-ink.in { display: block; }
#t-ink.in svg { animation: t-unsplat .55s cubic-bezier(.2, 0, .4, 1) forwards; }
@keyframes t-unsplat {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(0); }
}

/* ---- command palette ---- */
#t-pal {
  position: fixed; inset: 0; z-index: 10060; display: none;
  background: rgba(6,11,19,.72); backdrop-filter: blur(3px);
  padding-top: 14vh;
}
#t-pal.open { display: block; }
#t-pal .t-pal-box {
  width: min(560px, 92vw); margin: 0 auto;
  background: var(--t-panel); border: 1px solid var(--t-teal); border-radius: 3px;
  box-shadow: 0 0 30px rgba(55,211,222,.25), inset 0 0 24px rgba(0,0,0,.5);
  overflow: hidden;
}
#t-pal input {
  width: 100%; border: 0; outline: 0; background: #1d2c40; color: var(--t-ink);
  font-family: var(--t-mono); font-size: .95rem; padding: .85rem 1.1rem; box-sizing: border-box;
}
#t-pal input::placeholder { color: var(--t-dim); }
#t-pal .t-pal-list { max-height: 46vh; overflow-y: auto; padding: .4rem 0; }
#t-pal .t-pal-list a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.1rem; text-decoration: none; color: var(--t-ink);
  font-size: .88rem; font-family: 'Poppins', sans-serif;
}
#t-pal .t-pal-list a small { font-family: var(--t-mono); color: var(--t-dim); font-size: .66rem; align-self: center; white-space: nowrap; }
#t-pal .t-pal-list a.sel, #t-pal .t-pal-list a:hover { background: rgba(250,92,121,.18); }
#t-pal .t-pal-list a.sel small { color: var(--t-pink); }

@media (prefers-reduced-motion: reduce) {
  #t-ink.play svg { animation-duration: .01s; }
}