@font-face {
  font-family: "VT323";
  src: url("assets/VT323.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #0a0b0b;
  --panel: #111414;
  --line: #2a3331;
  --text: #d6e2da;
  --dim: #7e8c86;
  --teal: #7fd6c4;
  --rust: #be5434;
  --vcr-blue: #1a2fd6;
  --gutter: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "VT323", ui-monospace, "Courier New", monospace;
  font-size: 22px;
  line-height: 1.35;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
}
body::before { /* smoky backdrop from the Bandcamp art */
  content: "";
  position: fixed; inset: 0;
  background: url("assets/background.webp") center top / cover no-repeat;
  opacity: .35;
  z-index: -1;
}
a { color: var(--teal); }
img { max-width: 100%; height: auto; }
.dim { color: var(--dim); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: var(--gutter); z-index: 100; background: var(--bg); padding: 8px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ------------------------------------------------------------- overlays */
#noise, .scanlines, .tracking, .vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
}
#noise { width: 100%; height: 100%; opacity: .03; }
.scanlines {
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
.vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%); }
.tracking {
  top: -20%; height: 14%; bottom: auto;
  background: linear-gradient(to bottom, transparent, rgba(214,226,218,.05) 40%, rgba(214,226,218,.09) 50%, rgba(214,226,218,.05) 60%, transparent);
  mix-blend-mode: screen;
  animation: tracking 9s linear infinite;
}
@keyframes tracking { 0% { transform: translateY(0); } 100% { transform: translateY(900%); } }

body.fx-off #noise, body.fx-off .scanlines, body.fx-off .tracking { display: none; }
body.fx-off .glitch::before, body.fx-off .glitch::after { display: none; }
body.fx-off .hero, body.fx-off .ch { animation: none; }

/* subtle tape wobble on the whole page */
/* on the hero and headings only, so the press photo can sit above the overlays */
.hero, .ch { animation: wobble 7s steps(1) infinite; }
@keyframes wobble {
  0%, 100% { transform: none; }
  91% { transform: translateX(1px); }
  92% { transform: translateX(-2px) skewX(.4deg); }
  93% { transform: none; }
}

/* ------------------------------------------------------------- OSD */
.osd {
  position: fixed; z-index: 60; pointer-events: none;
  font-size: 26px; letter-spacing: 1px;
  text-shadow: 2px 0 rgba(190,84,52,.6), -2px 0 rgba(127,214,196,.5);
}
.osd-tl { top: 64px; left: var(--gutter); }
.osd-br { bottom: var(--gutter); right: var(--gutter); }
.blink { color: var(--rust); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.music {
  position: fixed; z-index: 65; left: var(--gutter); bottom: var(--gutter);
  font: inherit; font-size: 20px; color: var(--text); cursor: pointer;
  background: rgba(10,11,11,.85); border: 1px solid var(--line); padding: 4px 10px;
  max-width: calc(100vw - 180px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music:hover, .music:focus-visible { border-color: var(--teal); color: var(--teal); }
.music[aria-pressed="true"] { border-color: var(--rust); }

/* ------------------------------------------------------------- boot screen */
#boot {
  position: fixed; inset: 0; z-index: 200;
  background: var(--vcr-blue);
  color: #fff;
  display: grid; place-items: center;
  font-size: 34px;
  transition: opacity .25s;
}
#boot.gone { opacity: 0; pointer-events: none; }
#boot.static { background: #777 url("assets/tile.png"); filter: contrast(2) grayscale(1); }
.boot-osd { position: absolute; }
.boot-tl { top: 24px; left: 24px; }
.boot-br { bottom: 24px; right: 24px; }
.boot-center { text-align: center; }
.boot-center p { margin: 0; font-size: 72px; letter-spacing: 6px; }
.boot-center .boot-small { font-size: 28px; letter-spacing: 2px; }

/* ------------------------------------------------------------- top bar */
.topbar {
  position: sticky; top: 0; z-index: 58;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px var(--gutter);
  background: rgba(10,11,11,.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(3px);
}
.brand { color: var(--text); text-decoration: none; font-size: 30px; letter-spacing: 3px; }
.topbar nav { display: flex; gap: 18px; flex-wrap: wrap; margin-right: auto; }
.topbar nav a { color: var(--text); text-decoration: none; }
.topbar nav a span { color: var(--dim); }
.topbar nav a:hover, .topbar nav a:focus-visible { color: var(--teal); }
#fx-toggle {
  font: inherit; font-size: 18px; color: var(--dim);
  background: none; border: 1px solid var(--line); padding: 2px 8px; cursor: pointer;
}
#fx-toggle:hover { color: var(--text); }

/* ------------------------------------------------------------- hero */
.hero {
  min-height: calc(100svh - 56px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 48px var(--gutter) 64px;
}
.hero-logo {
  width: min(560px, 88vw);
  filter: drop-shadow(0 0 24px rgba(127,214,196,.15)) saturate(.85) contrast(1.05);
  animation: drift 8s ease-in-out infinite;
}
@keyframes drift { 50% { transform: translateY(-6px); filter: drop-shadow(0 0 30px rgba(190,84,52,.18)) saturate(.85); } }
h1 {
  font-weight: normal; font-size: clamp(34px, 6vw, 64px);
  letter-spacing: 4px; line-height: 1; margin: 16px 0 6px;
}
.tagline { color: var(--dim); margin: 0 0 24px; font-size: 24px; }
.lore {
  max-width: 34em; margin: 0 auto 32px;
  color: var(--text); opacity: .8; font-size: 22px;
}

.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  overflow: hidden;
}
.glitch::before { color: var(--rust); transform: translateX(2px); opacity: .55; clip-path: inset(0 0 60% 0); animation: g1 4s steps(1) infinite; }
.glitch::after { color: var(--teal); transform: translateX(-2px); opacity: .5; clip-path: inset(55% 0 0 0); animation: g2 5.5s steps(1) infinite; }
@keyframes g1 { 0%,100% { clip-path: inset(0 0 60% 0); } 47% { clip-path: inset(20% 0 50% 0); transform: translateX(6px); } 49% { clip-path: inset(0 0 60% 0); transform: translateX(2px); } }
@keyframes g2 { 0%,100% { clip-path: inset(55% 0 0 0); } 71% { clip-path: inset(70% 0 10% 0); transform: translateX(-7px); } 73% { clip-path: inset(55% 0 0 0); transform: translateX(-2px); } }

.btn {
  display: inline-block;
  color: var(--bg); background: var(--text);
  padding: 6px 18px; text-decoration: none; letter-spacing: 2px; font-size: 26px;
  box-shadow: 3px 0 0 var(--rust), -3px 0 0 var(--teal);
}
.btn:hover, .btn:focus-visible { background: var(--teal); }
.btn.small { font-size: 20px; padding: 4px 12px; margin-top: 18px; }

/* ------------------------------------------------------------- channels */
.channel { scroll-margin-top: 90px; max-width: 1100px; margin: 0 auto; padding: 72px var(--gutter) 24px; }
.ch {
  font-weight: normal; font-size: 40px; letter-spacing: 3px;
  margin: 0 0 24px; padding-bottom: 8px; border-bottom: 1px dashed var(--line);
}
.ch-no { color: var(--bg); background: var(--text); padding: 0 8px; margin-right: 8px; }
h3 { font-weight: normal; font-size: 26px; letter-spacing: 2px; margin: 0 0 12px; }
.panel { background: rgba(17,20,20,.85); border: 1px solid var(--line); padding: 16px; }

.listen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tracklist ol { list-style: none; padding: 0; margin: 0; }
.tracklist li { padding: 3px 0; border-bottom: 1px solid rgba(42,51,49,.6); }
#bandcamp-player iframe { width: 100%; height: 100%; min-height: 640px; border: 0; display: block; }
.shelf { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tape-label {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; color: var(--text); background: rgba(10,11,11,.6);
  border: 1px solid var(--line); padding: 6px; cursor: pointer;
}
.tape-label img { width: 64px; height: 64px; object-fit: cover; flex: none; filter: saturate(.8); }
.tape-label span { min-width: 0; }
.tape-label:hover, .tape-label:focus-visible { border-color: var(--teal); }
.tape-label[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }
.tape-label[aria-pressed="true"] span::before { content: "▶ "; color: var(--rust); }
.spotify { margin-top: 24px; }
.spotify iframe { width: 100%; border: 0; border-radius: 12px; display: block; }
.profile-card {
  display: flex; align-items: center; gap: 16px; padding: 16px; text-decoration: none;
  color: var(--text); background: rgba(17,20,20,.85); border: 1px solid var(--line);
}
.profile-card img { width: 72px; height: 72px; border-radius: 50%; }
.profile-card strong { display: block; font-weight: normal; font-size: 30px; }
.profile-card small { color: var(--dim); font-size: 18px; }
.profile-card:hover, .profile-card:focus-visible { border-color: var(--teal); }
#bandcamp-player { padding: 0; min-height: 300px; display: grid; }
#bandcamp-player .nosignal { border: 0; }

.video-grid { max-width: 900px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.video { margin: 0; }
.video figcaption { margin-top: 8px; }
.frame16x9 { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); overflow: hidden; }
.frame16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tape {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; background: #000; color: var(--text); font: inherit;
}
.tape img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) contrast(1.05); transition: filter .2s; }
.tape .play {
  position: absolute; left: 16px; top: 12px; font-size: 28px;
  text-shadow: 2px 0 rgba(190,84,52,.7), -2px 0 rgba(127,214,196,.6);
}
.tape:hover img, .tape:focus-visible img { filter: saturate(1) contrast(1.15) brightness(1.1); }
.latest { max-width: 900px; margin-bottom: 32px; }
.video-grid:empty { display: none; }

.feeds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.feed .instagram-media, .feed .tiktok-embed { margin: 0 0 16px !important; }

.links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.links a {
  display: block; padding: 12px 14px; text-decoration: none; color: var(--text);
  background: rgba(17,20,20,.85); border: 1px solid var(--line); font-size: 24px;
}
.links a::before { content: "▶ "; color: var(--rust); }
.links a:hover, .links a:focus-visible { border-color: var(--teal); color: var(--teal); }

.contact-form { max-width: 640px; display: grid; gap: 6px; }
.contact-form label { letter-spacing: 2px; margin-top: 8px; }
.contact-form input, .contact-form textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); padding: 8px 10px; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--teal); outline: none; }
.contact-form button { justify-self: start; margin-top: 16px; border: 0; cursor: pointer; font-family: inherit; }
.contact-form button:disabled { opacity: .5; cursor: wait; }
.honey { position: absolute; left: -9999px; }
.cf-status { margin: 8px 0 0; min-height: 1.4em; }
.cf-status.err { color: var(--rust); }
.cf-status.ok { color: var(--teal); }

/* "no signal" placeholder */
.nosignal {
  position: relative; display: grid; place-items: center; text-align: center;
  min-height: 220px; padding: 24px;
  background: #222 url("assets/tile.png");
  border: 1px solid var(--line);
  color: #fff;
}
.nosignal::before { content: ""; position: absolute; inset: 0; background: rgba(10,11,11,.55); }
.nosignal > * { position: relative; }
.nosignal strong { display: block; font-size: 40px; font-weight: normal; letter-spacing: 4px; }
.nosignal small { color: var(--dim); font-size: 18px; }
.frame16x9 .nosignal { position: absolute; inset: 0; min-height: 0; border: 0; }

.footer { text-align: center; padding: 64px var(--gutter) 72px; color: var(--text); }
.footer p { margin: 4px 0; }

/* ------------------------------------------------------------- stories page */
.stories-link { margin: 18px 0 0; }
.topbar nav a[aria-current="page"] { color: var(--teal); }
.reader .lede { max-width: 40em; font-size: 24px; }
.story-index { list-style: none; padding: 0; margin: 24px 0 0; columns: 2 260px; column-gap: 32px; }
.story-index li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid rgba(42,51,49,.6); }
.story-index a { color: var(--text); text-decoration: none; }
.story-index a:hover, .story-index a:focus-visible { color: var(--teal); }
.story-index .num { display: inline-block; min-width: 3.2em; color: var(--rust); }
.stories { padding-top: 24px; }
.story {
  max-width: 40em; margin: 0 auto 72px; padding: 28px 24px;
  background: rgba(10,11,11,.82); border: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.story-no { margin: 0; color: var(--rust); letter-spacing: 2px; }
.story h2 {
  font-weight: normal; font-size: clamp(30px, 5vw, 42px); line-height: 1.05;
  margin: 4px 0 20px; letter-spacing: 1px; text-wrap: balance;
  text-shadow: 2px 0 rgba(190,84,52,.45), -2px 0 rgba(127,214,196,.4);
}
.story p { margin: 0 0 1em; font-size: 23px; line-height: 1.45; }
.story-video { margin: 0 0 24px; }
.story-video .tape:not(:has(img)) { background: #111 url("assets/tile.png"); }
.null-tape {
  position: relative; display: grid; place-items: center; text-align: center; gap: 4px;
  min-height: 200px; padding: 24px; margin-bottom: 8px;
  background: #222 url("assets/tile.png"); border: 1px solid var(--line);
}
.null-tape::before { content: ""; position: absolute; inset: 0; background: rgba(10,11,11,.6); }
.null-tape > * { position: relative; }
.null-tape strong { font-weight: normal; font-size: 56px; letter-spacing: 8px; text-shadow: 3px 0 rgba(190,84,52,.6), -3px 0 rgba(127,214,196,.5); }
.null-tape small { color: var(--dim); font-size: 20px; }
.story .tape-note { color: var(--dim); letter-spacing: 2px; }
.story-nav { margin-top: 24px !important; font-size: 20px !important; }
.story-nav a { text-decoration: none; }

/* ------------------------------------------------------------- bio, teaser, elsewhere */
.about { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: center; }
.press { margin: 0; position: relative; z-index: 55; border: 1px solid var(--line); box-shadow: 0 0 40px rgba(0,0,0,.6); }
.press img { display: block; width: 100%; filter: contrast(1.05) saturate(.85); }
.osd-label { margin: 0; color: var(--rust); letter-spacing: 2px; }
.about-name { font-weight: normal; font-size: clamp(28px, 4vw, 40px); line-height: 1.05; letter-spacing: 2px; margin: 6px 0 16px; }
.bio { max-width: 36em; margin: 0 0 8px; font-size: 22px; line-height: 1.45; white-space: pre-line; }
.teaser {
  display: grid; gap: 8px; max-width: 760px; padding: 24px; text-decoration: none; color: var(--text);
  background: rgba(10,11,11,.82) url("assets/tile.png"); background-blend-mode: multiply;
}
.teaser:hover, .teaser:focus-visible { border-color: var(--teal); }
.teaser-kicker { color: var(--rust); letter-spacing: 2px; }
.teaser-title { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; text-wrap: balance; }
.teaser-go { color: var(--teal); }
.elsewhere-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 32px; align-items: start; }
.newsletter { max-width: none; }
.nl-copy { margin: 0 0 4px; }
#instagram { margin-top: 24px; }

/* players, feeds and forms sit in front of the static and scanlines,
   so they stay sharp and easy to read and use */
#bandcamp-player, .shelf-wrap, .spotify, .frame16x9, #tiktok, #instagram,
.contact-form, .links a, .teaser {
  position: relative; z-index: 55;
}

/* ------------------------------------------------------------- found tape page */
.found { max-width: 900px; margin: 0 auto; }
.found .warning { color: var(--rust); letter-spacing: 3px; }
.found-grid { display: grid; gap: 32px; margin-top: 24px; }
.found-grid figure { margin: 0; }
.found-grid figcaption { margin-top: 8px; color: var(--dim); }
.null-tape { cursor: pointer; }
.null-tape:hover strong, .null-tape:focus-visible strong { animation: g1 .6s steps(1) infinite; }

/* ------------------------------------------------------------- small screens */
@media (max-width: 760px) {
  body { font-size: 20px; }
  .listen-grid, .feeds, .elsewhere-grid, .about { grid-template-columns: minmax(0, 1fr); }
  .press { max-width: 360px; }
  .topbar nav { gap: 14px; font-size: 19px; order: 3; width: 100%; }
  .topbar nav a span { display: none; }
  .osd { font-size: 20px; }
  .osd-tl { display: none; }
  .channel, .story { scroll-margin-top: 150px; }
  .story { padding: 20px 16px; }
  .story p { font-size: 21px; }
  .ch { font-size: 32px; }
  .video-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tracking { display: none; }
  html { scroll-behavior: auto; }
}