/* ============================================================
   n0lakh — signal archive
   Design tokens
   ============================================================ */
:root {
  --void:      #030204;   /* base background — near-total black */
  --bruise:    #0d0813;   /* raised surfaces / cards */
  --bruise-2:  #150d1f;   /* card hover / borders */
  --violet:    #5b2aa8;   /* primary accent — used sparingly */
  --pink:      #c41d70;   /* signal accent — rarest color in the system */
  --gold:      #a3813d;   /* almost never used; reserve for a single detail */
  --bone:      #cdc4d6;   /* primary text — desaturated, not pure white */
  --dim:       #675a72;   /* secondary text */
  --static:    #211a2b;   /* borders, dividers — barely visible */

  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;

  --max-w: 980px;
}

* { box-sizing: border-box; }

::selection {
  background: var(--violet);
  color: var(--void);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* ---- ambient atmosphere: grain + scanlines + vignette ---- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

body::before {
  /* scanlines */
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

body::after {
  /* grain via SVG turbulence */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.04;
  mix-blend-mode: overlay;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(2, 1, 4, 0.88) 100%);
}

/* ---- rare glitch flicker, triggered at random intervals by script.js ---- */
@keyframes glitchFlicker {
  0%   { transform: none; filter: none; }
  8%   { transform: translate(-2px, 1px); filter: hue-rotate(25deg) contrast(1.3); }
  16%  { transform: translate(2px, -1px) skewX(0.6deg); filter: none; }
  24%  { transform: translate(-1px, 0); }
  32%  { transform: none; filter: none; }
  100% { transform: none; filter: none; }
}

body.glitching {
  animation: glitchFlicker 0.35s steps(3, end);
}

body.glitching .page,
body.glitching .hero {
  animation: glitchFlicker 0.35s steps(3, end);
}

/* ---- chromatic-split text, applied to a few key elements ---- */
.glitch-text {
  position: relative;
}

body.glitching .glitch-text {
  text-shadow: 1.5px 0 var(--pink), -1.5px 0 var(--violet);
}

/* ---- corner transmissions: fixed cryptic fragments, barely legible ---- */
.glyph-corner {
  position: fixed;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  color: var(--static);
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.55;
  white-space: nowrap;
}

.glyph-tl { top: 14px; left: 18px; }
.glyph-br { bottom: 14px; right: 18px; text-align: right; }

@media (max-width: 700px) {
  .glyph-corner { display: none; }
}

/* ============================================================
   Invisible, mouse-only link.
   No text content (nothing to select with Ctrl+A), excluded from
   tab order and screen readers (tabindex="-1" + aria-hidden), and
   with no background or border — the only way to find it is to
   move the mouse over the exact spot and notice the cursor change.
   Duplicate this element wherever you want to hide an entry point,
   and adjust top/left/right/bottom to place it. Point its href at
   a page built from template.html.
   ============================================================ */
.void-node {
  position: fixed;
  width: 60px;
  height: 60px;
  background: transparent;
  cursor: pointer;
  z-index: 50;
}

/* ---- quiet return link, used on secret / hidden pages ---- */
.return-link-quiet {
  display: inline-block;
  margin-top: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--static);
  text-decoration: none;
  border-bottom: 1px solid var(--static);
  padding-bottom: 3px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.return-link-quiet:hover {
  color: var(--bone);
  border-color: var(--pink);
}

/* ---- silent visit-count whisper (see script.js) ---- */
.visit-whisper {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--dim);
  margin: -30px 0 30px;
  min-height: 14px;
}

/* ============================================================
   Icon row: simple side-by-side clickable images with even
   spacing. Use instead of a <table> layout — flexbox handles the
   gap natively, no empty spacer cells needed.
   ============================================================ */
.icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
}

.icon-row img {
  display: block;
}

.icon-row a {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.icon-row a:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

/* ============================================================
   Hidden text — invisible until selected (Ctrl+A or a manual
   drag-select). The text is genuinely present in the page, just
   colored to match the background, so it stays selectable and
   still readable by screen readers — it's just not visible to
   the eye until highlighted.
   ============================================================ */
.hidden-text {
  color: var(--void);
}

.hidden-text::selection {
  color: var(--bone);
  background: var(--pink);
}

/* ---- focus visibility ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--pink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Layout shell
   ============================================================ */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px 80px;
}

/* ---- site header / nav (all inner pages) ---- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  border-bottom: 1px solid var(--static);
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 16px;
}

.site-header .wordmark {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--bone);
  text-decoration: none;
}

.site-header .wordmark span {
  color: var(--pink);
}

nav.crypt-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
}

nav.crypt-nav a {
  position: relative;
  color: var(--dim);
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

nav.crypt-nav a:hover,
nav.crypt-nav a:focus-visible,
nav.crypt-nav a[aria-current="page"] {
  color: var(--bone);
  border-color: var(--static);
  background: var(--bruise);
}

nav.crypt-nav a[aria-current="page"]::before {
  content: "// ";
  color: var(--pink);
}

/* ============================================================
   Homepage
   ============================================================ */
.hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  position: relative;
  z-index: 1;
}

.hero .logo-slot {
  width: 132px;
  height: 132px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .logo-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(123, 63, 228, 0.45));
}

.hero .designation {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--dim);
  text-transform: uppercase;
  margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: 0.06em;
  margin: 0 0 22px;
  color: var(--bone);
}

.hero .tagline {
  max-width: 560px;
  color: var(--dim);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.75;
  margin: 0 0 46px;
}

.hero .tagline em {
  color: var(--bone);
  font-style: italic;
}

nav.crypt-nav.home-nav {
  gap: 2px;
  border: 1px solid var(--static);
  background: rgba(21, 12, 34, 0.5);
  backdrop-filter: blur(2px);
}

nav.crypt-nav.home-nav a {
  padding: 14px 22px;
  border-right: 1px solid var(--static);
  border-color: transparent transparent transparent transparent;
}

nav.crypt-nav.home-nav a:not(:last-child) {
  border-right: 1px solid var(--static);
}

.hero-footnote {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.25em;
  color: var(--static);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ============================================================
   Page heading (inner pages)
   ============================================================ */
.page-head {
  margin-bottom: 56px;
}

.page-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pink);
  margin: 0 0 10px;
}

.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 0 0 14px;
  color: var(--bone);
}

.page-head p {
  color: var(--dim);
  font-style: italic;
  max-width: 620px;
  margin: 0;
}

/* ============================================================
   Music page
   ============================================================ */
.category-block {
  margin-bottom: 64px;
}

.category-block h2 {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px solid var(--static);
  padding-bottom: 12px;
  margin: 0 0 24px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.category-block h2::before {
  content: attr(data-index);
  color: var(--pink);
  font-size: 12px;
}

.track-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
}

.track-card {
  background: var(--bruise);
  border: 1px solid var(--static);
  padding: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.track-card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.track-card:nth-child(3n+2) { transform: rotate(0.4deg); }
.track-card:nth-child(4n)   { transform: rotate(-0.3deg) translateY(4px); }

.track-card:hover {
  border-color: var(--violet);
  transform: translateY(-2px) rotate(0deg);
}

.track-cover {
  aspect-ratio: 1;
  width: 100%;
  margin-bottom: 14px;
  background: linear-gradient(155deg, var(--bruise-2), var(--void) 70%);
  border: 1px solid var(--static);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--static);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.track-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(123,63,228,0.06) 0 2px, transparent 2px 10px);
}

.track-number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pink);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}

.track-title {
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: var(--bone);
}

.track-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--static);
  padding-bottom: 2px;
}

.track-link:hover {
  color: var(--bone);
  border-color: var(--pink);
}

/* ============================================================
   Art page
   ============================================================ */
.art-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px;
}

.art-card {
  border: 1px solid var(--static);
  background: var(--bruise);
  transition: transform 0.2s ease;
}

.art-card:nth-child(3n+1) { transform: rotate(0.5deg); }
.art-card:nth-child(3n+2) { transform: rotate(-0.4deg) translateY(3px); }

.art-card:hover { transform: rotate(0deg) translateY(-2px); }

.art-frame {
  aspect-ratio: 4/5;
  background: linear-gradient(200deg, var(--bruise-2), var(--void) 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--static);
  font-family: var(--font-mono);
  color: var(--static);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.art-meta {
  padding: 14px 16px;
}

.art-index {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pink);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 4px;
}

.art-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--bone);
}

/* ============================================================
   Videos / games list pages
   ============================================================ */
.entry-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--static);
}

.entry {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--static);
}

.entry:nth-child(3n+2) { padding-left: 14px; }
.entry:nth-child(4n)   { padding-left: 28px; }

.entry-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--static);
  padding: 2px 6px;
  margin-right: 8px;
  display: inline-block;
}

.entry-index {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pink);
  letter-spacing: 0.1em;
}

.entry-body h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  color: var(--bone);
  font-weight: 500;
}

.entry-body p {
  margin: 0;
  color: var(--dim);
  font-size: 0.95rem;
  font-style: italic;
  max-width: 55ch;
}

.entry-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid var(--static);
}

.entry-link:hover {
  color: var(--bone);
  border-color: var(--pink);
}

@media (max-width: 560px) {
  .entry {
    grid-template-columns: 50px 1fr;
  }
  .entry-link {
    grid-column: 2;
  }
}

/* ============================================================
   Blog log entries
   ============================================================ */

.log-entry {
  border-bottom: 1px solid var(--static);
  padding: 32px 0;
}

.log-entry:first-child {
  padding-top: 0;
}

.log-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.log-meta .log-date { color: var(--pink); }

.log-entry h3 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bone);
}

.log-entry .log-body {
  color: var(--bone);
  white-space: pre-wrap;
  line-height: 1.8;
}

.log-entry .delete-btn {
  margin-top: 14px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--static);
  cursor: pointer;
}

.log-entry .delete-btn:hover {
  color: var(--pink);
}

.empty-state {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--static);
  text-transform: uppercase;
  padding: 40px 0;
  text-align: center;
  border: 1px dashed var(--static);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  margin-top: 90px;
  padding-top: 28px;
  border-top: 1px solid var(--static);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--static);
  text-transform: uppercase;
}

.site-footer .status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- scramble text utility ---- */
.scramble {
  display: inline-block;
}