/* hackers.nu /random — C64 screen, readable long-form */
@font-face { font-family:"Press Start 2P"; src:url("/assets/fonts/pressstart-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Share Tech Mono"; src:url("/assets/fonts/sharetechmono-400.woff2") format("woff2"); font-weight:400; font-display:swap; }

:root {
  --border: #6c5fd6;
  --screen: #4338c9;
  --text:   #cdc6fa;
  --bright: #ffffff;
  --px: "Press Start 2P", "Courier New", monospace;
  --mono: "Share Tech Mono", "Courier New", monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  line-height: 1.75;
  display: grid;
  place-items: start center;
  padding: clamp(0.6rem, 3vw, 2.5rem);
  min-height: 100vh;
  -webkit-font-smoothing: none;
}
a { color: var(--bright); text-decoration: none; }
a:hover, a:focus-visible { color: var(--screen); background: var(--bright); outline: none; }

.screen {
  width: min(820px, 100%);
  background: var(--screen);
  border: clamp(10px, 3vw, 26px) solid var(--border);
  padding: clamp(1rem, 4vw, 2.6rem);
  position: relative;
  overflow: hidden;
}
.screen::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,0.12) 2px 4px);
  mix-blend-mode: multiply;
}
.screen > * { position: relative; z-index: 1; }

.boot { font-family: var(--px); font-size: clamp(0.6rem, 1.9vw, 0.72rem); line-height:1.9; white-space: pre-wrap; }
.boot .b { color: var(--bright); }

h1 {
  font-family: var(--px);
  font-size: clamp(0.95rem, 4.2vw, 1.6rem);
  color: var(--bright);
  line-height: 1.45;
  letter-spacing: 0.03em;
  margin: 1.6em 0 0.5em;
}
h2 {
  font-family: var(--px);
  font-size: clamp(0.72rem, 2.4vw, 0.86rem);
  color: var(--bright);
  line-height: 1.7;
  margin: 2.4em 0 0.9em;
}
.crumbs { font-size: 0.92em; margin-bottom: 0.4em; }
.meta { font-size: 0.92em; margin-bottom: 1.6em; }
.meta span::after { content: "  ·  "; color: var(--text); opacity: 0.6; }
.meta span:last-child::after { content: ""; }

/* player + download */
.deck { border: 2px solid var(--text); padding: clamp(0.9rem, 3vw, 1.3rem); margin: 1.4em 0 0.6em; }
.deck audio { width: 100%; display: block; }
.actions { display: flex; flex-wrap: wrap; gap: 0.8em; margin-top: 1.1em; }
.btn {
  font-family: var(--px);
  font-size: clamp(0.6rem, 1.9vw, 0.7rem);
  line-height: 1.6;
  border: 2px solid var(--bright);
  color: var(--bright);
  padding: 0.75em 1em;
  display: inline-block;
}
.btn:hover, .btn:focus-visible { background: var(--bright); color: var(--screen); }
.hint { font-size: 0.88em; opacity: 0.85; margin-top: 0.9em; }

/* lyrics */
.lyrics { margin-top: 0.6em; }
.lyrics section { margin: 2.2em 0; }
.lyrics h3 {
  font-family: var(--px);
  font-size: clamp(0.62rem, 2vw, 0.72rem);
  color: var(--bright);
  line-height: 1.8;
  margin-bottom: 0.9em;
}
.lyrics h3::before { content: "["; }
.lyrics h3::after  { content: "]"; }
.lyrics p { white-space: pre-line; margin: 0 0 1.2em; }
.lyrics p:last-child { margin-bottom: 0; }
.lyrics section.chorus p { color: var(--bright); }
.lyrics section.breakdown p { letter-spacing: 0.06em; }

/* index listing */
.tracks { list-style: none; margin: 1.4em 0; }
.tracks li { border-top: 2px solid var(--text); padding: 1.1em 0; }
.tracks li:last-child { border-bottom: 2px solid var(--text); }
.tracks a.t { font-family: var(--px); font-size: clamp(0.68rem, 2.2vw, 0.8rem); line-height:1.7; display:inline-block; }
.tracks a.t::before { content: "> "; color: var(--text); }
.tracks a.t:hover::before, .tracks a.t:focus-visible::before { color: var(--screen); }
.tracks .sub { display: block; font-size: 0.92em; margin-top: 0.5em; }

footer { margin-top: 3em; font-size: 0.92em; }
footer a { text-decoration: underline; }
.cursor {
  display:inline-block; width:0.6em; height:1em;
  background: var(--bright); vertical-align:-0.12em; margin-left:0.15em;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .cursor { animation:none; } }