/* ── palette: gameboy dark ── */
:root {
  --green: #84c040;
  --green-bright: #9cd44a;
  --green-dim: #5a8830;
  --link: #a8d848;
  --link-hover: #bce858;
  --text: #c4ccc4;
  --text-dim: #788078;
  --border: rgba(132, 192, 64, 0.16);
  --bg: #101210;
  --max-w: 52rem;
  --mono: "JetBrains Mono", "Menlo", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

a:hover { color: var(--link-hover); }

strong { color: var(--green-bright); font-weight: 600; }

/* ── header ── */
.site-header {
  padding: 2.5rem 1.5rem 2rem;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}

h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--green);
  animation: crt-flicker 11s step-end infinite;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  91% { opacity: 1; }
  91.5% { opacity: 0.82; }
  92% { opacity: 1; }
  94.5% { opacity: 0.9; }
  95% { opacity: 1; }
  97.8% { opacity: 0.75; }
  98.2% { opacity: 1; }
  98.5% { opacity: 0.88; }
  99% { opacity: 1; }
}

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green);
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8rem;
}

.social a {
  color: var(--text-dim);
  text-decoration: none;
}

.social a::before { content: "→ "; color: var(--green-dim); }
.social a:hover { color: var(--green); }

/* ── panels ── */
.panel {
  padding: 3rem 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}

.panel--releases  { background: #101210; --section-accent: var(--green-dim); }
.panel--intro     { background: #0e100e; }
.panel--r6        { background: #101010; --section-accent: var(--green-dim); }
.panel--ftwd      { background: #0e100e; --section-accent: var(--green-dim); }
.panel--dias      { background: #10120e; --section-accent: var(--green-bright); }
.panel--corporate { background: #100e10; --section-accent: var(--green-dim); }
.panel--thalia    { background: #0e1010; --section-accent: var(--green-dim); }

.label {
  margin: 0 0 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--section-accent, var(--green-dim));
}

.lead { margin: 0 0 1rem; max-width: 42rem; }
.contact { margin: 0; color: var(--text-dim); }

.panel p { margin: 0 0 0.85rem; max-width: 42rem; }

.meta {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ── embeds ── */
.embed {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.embed iframe {
  display: block;
  width: 100%;
  border: 0;
}

.embed--spotify iframe { height: 352px; }
.embed--soundcloud iframe { height: 300px; }
.embed--bandcamp iframe { height: 120px; }

.embed-grid--releases .embed--bandcamp iframe {
  height: 472px;
}

.embed--video {
  aspect-ratio: 16 / 9;
}

.embed--video iframe {
  height: 100%;
  aspect-ratio: 16 / 9;
}

.embed-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .embed-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.embed-grid--releases { margin-top: 1rem; }

@media (min-width: 640px) {
  .embed-grid--releases {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── footer ── */
.site-footer {
  padding: 2.5rem 1.5rem 3rem;
  max-width: var(--max-w);
  margin: 0 auto;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.site-footer p { margin: 0 0 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  h1 { animation: none; }
}