/* ============================================================
   SIXTEENGRAMS — GLOBAL STYLES  (mobile-first, black + acid green)
   ------------------------------------------------------------
   The look is deliberately "terminal / tape rip": monospace
   everywhere, hairline green rules, near-square corners, heavy
   grain. It reads as a file index, not a marketing page —
   which is what a 60-track SoundCloud catalog actually is.
   ============================================================ */

:root{
  /* ---- Palette: black, with green as the only chromatic voice ---- */
  --bg:            #030805;
  --bg-2:          #05100a;
  --bg-3:          #0a1910;
  --surface:       rgba(0,230,118,.05);
  --surface-2:     rgba(0,230,118,.11);
  --border:        rgba(90,255,170,.16);
  --border-strong: rgba(90,255,170,.34);
  --text:          #ecfff3;
  --muted:         #8ab5a0;
  --muted-2:       #78a08c;   /* 5.1:1 on --bg — small metadata type still passes AA */

  --accent:        #00e676;   /* acid green — 12.1:1 on --bg */
  --on-accent:     #03140a;   /* text ON the accent: green is luminous, so
                                white would sit at 1.7:1. Black reads 11.4:1. */
  --accent-2:      #6cffb5;
  --accent-3:      #b4ffd9;
  --glow:          rgba(0,230,118,.55);

  /* ---- Type ---- */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ---- Metrics ---- */
  --nav-h: 56px;
  --dock-h: 68px;
  --radius: 4px;
  --radius-sm: 3px;
  --ease: cubic-bezier(.2,.7,.3,1);
  --maxw: 900px;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* Ambient green wash — one bloom top, one bottom-right, nothing else. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(110% 70% at 50% -12%, rgba(0,230,118,.20), transparent 62%),
    radial-gradient(80% 55% at 100% 108%, rgba(0,150,80,.16), transparent 60%);
}

/* Film grain + faint scanlines. The grain is what keeps flat black
   from looking like an empty div on an OLED phone. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.020) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.5; mix-blend-mode:overlay;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* Keyboard focus is always visible — never removed, only restyled. */
:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
  border-radius:2px;
}

::selection{ background:var(--accent); color:var(--on-accent); }

/* ---------- Typography helpers ---------- */
.mono{ font-family:var(--font-mono); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-2); font-weight:500;
}
.lede{ color:var(--muted); font-size:1rem; max-width:52ch; }

/* A hairline rule with a green nub on the left — used as a section marker. */
.rule{
  height:1px; background:var(--border); margin:0; position:relative; border:0;
}
.rule::before{
  content:""; position:absolute; left:0; top:0; width:52px; height:1px;
  background:var(--accent);
}

/* ============================================================
   NAV  (top bar + full-screen drawer)
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg, rgba(3,8,5,.92), rgba(3,8,5,.6) 60%, rgba(3,8,5,0));
  backdrop-filter:blur(12px);
}
.brand{
  font-family:var(--font-mono); font-weight:800; font-size:.92rem;
  letter-spacing:-.02em; display:inline-flex; align-items:center; gap:1px;
}
.brand .g{ color:var(--accent-2); }

.burger{
  width:44px; height:44px; display:grid; place-items:center; margin-right:-10px;
}
.burger span{
  display:block; width:19px; height:2px; background:var(--text);
  position:relative; transition:.28s var(--ease);
}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:19px; height:2px;
  background:var(--text); transition:.28s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ top:0; transform:rotate(45deg); background:var(--accent-2); }
body.menu-open .burger span::after{ top:0; transform:rotate(-45deg); background:var(--accent-2); }

/* Drawer */
.drawer{
  position:fixed; inset:0; z-index:70;
  background:rgba(3,8,5,.9); backdrop-filter:blur(26px);
  display:flex; flex-direction:column; justify-content:center; padding:0 24px;
  opacity:0; visibility:hidden; transition:opacity .32s var(--ease), visibility .32s;
}
body.menu-open .drawer{ opacity:1; visibility:visible; }
.drawer nav{ display:flex; flex-direction:column; align-items:flex-start; max-width:var(--maxw); margin:0 auto; width:100%; }
.drawer nav > a{
  font-family:var(--font-mono); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.9rem,10vw,3rem); letter-spacing:-.035em; line-height:1.14;
  color:var(--text); display:flex; align-items:baseline; gap:14px;
  transform:translateY(12px); opacity:0;
  transition:color .2s, transform .45s var(--ease), opacity .45s var(--ease);
}
.drawer nav > a .idx{
  font-size:.6rem; font-weight:500; letter-spacing:.16em;
  color:var(--muted-2); transform:translateY(-.6em);
}
.drawer nav > a:hover,.drawer nav > a.active{ color:var(--accent-2); }
.drawer nav > a.active .idx{ color:var(--accent-2); }
body.menu-open .drawer nav > a{ transform:translateY(0); opacity:1; }
body.menu-open .drawer nav > a:nth-child(1){ transition-delay:.05s; }
body.menu-open .drawer nav > a:nth-child(2){ transition-delay:.10s; }
body.menu-open .drawer nav > a:nth-child(3){ transition-delay:.15s; }
body.menu-open .drawer nav > a:nth-child(4){ transition-delay:.20s; }
body.menu-open .drawer nav > a:nth-child(5){ transition-delay:.25s; }

.menu-socials{ display:flex; gap:20px; margin-top:30px; }
.menu-socials a{
  width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--border); color:var(--muted);
  transition:color .2s, border-color .2s, background .2s;
}
.menu-socials a:hover{ color:var(--accent-2); border-color:var(--border-strong); background:var(--surface); }
.menu-socials svg{ width:19px; height:19px; }

.drawer-foot{
  position:absolute; bottom:26px; left:24px; right:24px;
  display:flex; gap:12px; align-items:center;
  font-family:var(--font-mono); color:var(--muted-2); font-size:.68rem; letter-spacing:.1em;
}

/* ============================================================
   Shared components
   ============================================================ */
.page{
  padding:calc(var(--nav-h) + 30px) 18px calc(var(--dock-h) + 70px);
  max-width:var(--maxw); margin:0 auto;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7ch;
  font-family:var(--font-mono); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 22px; min-height:44px; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  transition:background .2s var(--ease), border-color .2s, transform .12s var(--ease);
}
.btn:hover{ background:var(--surface-2); border-color:var(--accent); }
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
  box-shadow:0 6px 28px -10px var(--glow);
}
.btn-primary:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.btn svg{ width:15px; height:15px; }

.tag{
  display:inline-flex; align-items:center; gap:.5ch;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:4px 8px; border:1px solid var(--border); color:var(--muted);
  border-radius:2px;
}
.tag--hot{ border-color:var(--accent); color:var(--accent-2); background:var(--surface); }

.footer-note{
  font-family:var(--font-mono); text-align:center;
  color:var(--muted-2); font-size:.66rem; letter-spacing:.14em;
  margin-top:48px; text-transform:uppercase;
}

/* "created by proddvniel" credit — every page except home */
.site-credit{
  text-align:center; padding:18px 20px 34px;
  font-family:var(--font-mono); color:var(--muted-2);
  font-size:.68rem; letter-spacing:.1em;
}
.site-credit a{ color:var(--muted); border-bottom:1px solid var(--border-strong); }
.site-credit a:hover{ color:var(--accent-2); }

/* Reveal-on-scroll utility */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================
   FLYER LIGHTBOX  (shared by the home card and the Live page)
   ------------------------------------------------------------
   Only ever rendered once app.js has confirmed EVENT.flyer
   actually loads, so a missing file degrades to nothing at all
   rather than a broken image.
   ============================================================ */
.fly{
  position:fixed; inset:0; z-index:120;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:20px;
  background:rgba(2,6,4,.94); backdrop-filter:blur(18px);
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease), visibility .28s;
}
.fly.open{ opacity:1; visibility:visible; }

.fly-img{
  max-width:min(92vw, 620px); max-height:74vh; width:auto; height:auto;
  object-fit:contain;
  border:1px solid var(--border-strong); border-radius:var(--radius);
  box-shadow:0 40px 90px -30px #000, 0 0 80px -30px var(--glow);
  transform:scale(.97); transition:transform .28s var(--ease);
}
.fly.open .fly-img{ transform:scale(1); }

.fly-cap{
  font-family:var(--font-mono); text-align:center;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); max-width:46ch;
}
.fly-cap b{ color:var(--text); font-weight:700; display:block; margin-bottom:6px; letter-spacing:.2em; }

.fly-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

.fly-x{
  position:absolute; top:14px; right:14px;
  width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--muted); background:rgba(3,8,5,.6);
  transition:color .18s, border-color .18s, background .18s;
}
.fly-x:hover{ color:var(--text); border-color:var(--border-strong); background:var(--surface); }
.fly-x svg{ width:16px; height:16px; }

/* The clickable flyer thumbnail. Used on the home card and the Live page. */
.flyer-btn{
  display:block; position:relative; overflow:hidden;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-3); line-height:0;
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.flyer-btn:hover{ border-color:var(--accent); transform:translateY(-2px); }
.flyer-btn img{ width:100%; height:100%; object-fit:cover; }
.flyer-btn .flyer-cta{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 8px 7px; line-height:1.2;
  background:linear-gradient(to top, rgba(2,6,4,.94), transparent);
  font-family:var(--font-mono); font-weight:700;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-2); text-align:center;
}