/* BETTER listening — shared site styles */

/* ---------------------------------------------------------------
   Brand fonts, self-hosted from assets/fonts.
     AGPX   — the logo face. Display sizes only; it turns to mush small.
     Aktiv  — Aktiv Grotesk Light. All reading text and UI.
     BB Mono— BB Manual Mono. Small uppercase labels, dates, buttons.
   Only ONE weight of Aktiv exists (Light), so nothing on this site is
   bold. Hierarchy comes from size, colour and typeface instead — the
   same way the printed posters work. Do not add font-weight: 400
   anywhere; the browser would fake it and it looks smeared.
   --------------------------------------------------------------- */
@font-face {
  font-family: "AGPX";
  src: url("assets/fonts/agpx.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv";
  src: url("assets/fonts/aktiv-light.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Aktiv";
  src: url("assets/fonts/aktiv-light-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "BB Mono";
  src: url("assets/fonts/bbmono.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --grey: #9a9a9a;
  --grey-dark: #161616;
  --panel: #121212;
  --line: #2a2a2a;
  --radius: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Aktiv", -apple-system, sans-serif;
  background: var(--black); color: var(--white);
  line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
/* No bold weight exists — never let the browser fake one.
   Headings and <b> default to bold in the browser's own stylesheet, which
   would smear Aktiv and AGPX, so they are reset here. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
b, strong { font-weight: inherit; }
.pixel { font-family: "BB Mono", monospace; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-block; padding: 11px 24px; border-radius: 99px;
  font-size: 14px; font-weight: 400; border: none; transition: all .18s ease;
}
.btn-white { background: var(--white); color: var(--black); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,255,255,.14); }
.btn-outline { background: transparent; color: var(--white); border: 1px solid #3a3a3a; }
.btn-outline:hover { border-color: var(--white); }
.btn-sm { padding: 8px 16px; font-size: 13px; }

.chip {
  display: inline-block; font-family: "BB Mono", monospace; font-size: 10px;
  padding: 5px 13px; border-radius: 99px; border: 1px solid var(--line); color: var(--grey);
  letter-spacing: .06em; text-transform: uppercase;
}
.chip.live { color: #7bff9e; border-color: #2e5c3a; }

/* Corner logo + dropdown menu (all pages) */
.corner-logo {
  position: fixed; top: 20px; left: 22px; z-index: 120;
}
.corner-logo img { height: 30px; width: auto; }
.menu-root { position: fixed; top: 20px; right: 22px; z-index: 120; text-align: right; }
.menu-btn {
  background: rgba(10,10,10,.7); backdrop-filter: blur(10px);
  border: 1px solid var(--line); color: var(--white);
  font-family: "BB Mono", monospace; font-size: 11px; letter-spacing: .1em;
  padding: 10px 18px; border-radius: 99px; transition: all .15s ease;
}
.menu-btn:hover { border-color: var(--white); }
.menu-drop {
  margin-top: 10px; background: rgba(12,12,12,.95); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  min-width: 210px; display: none; text-align: left;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.menu-drop.open { display: block; animation: dropIn .18s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; } }
.menu-drop a {
  display: block; padding: 14px 20px; font-size: 14px; color: var(--grey);
  border-bottom: 1px solid #1c1c1c; transition: all .12s ease;
}
.menu-drop a:last-child { border-bottom: none; }
.menu-drop a:hover { color: var(--white); background: var(--grey-dark); }
.menu-drop a.current { color: var(--white); font-weight: 400; }
.menu-drop a span { font-family: "BB Mono", monospace; font-size: 9px; color: #555; display: block; letter-spacing: .08em; }

/* Page scaffolding for inner pages */
.page { padding: 110px 0 90px; }
.kicker { font-family: "BB Mono", monospace; font-size: 11px; color: var(--grey); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
/* Page titles use the logo face. It's a pixel font, so no negative tracking. */
h1.title { font-family: "AGPX", monospace; font-size: clamp(28px, 4.6vw, 48px); letter-spacing: 0; line-height: 1.12; }
.page-sub { color: var(--grey); font-size: 16px; margin-top: 10px; max-width: 560px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}

#toast {
  position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--white); color: var(--black); font-size: 13px; font-weight: 400;
  padding: 11px 22px; border-radius: 99px; opacity: 0; pointer-events: none;
  transition: all .3s ease; z-index: 200;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

footer.site-foot { padding: 40px 0; border-top: 1px solid var(--line); }
footer.site-foot .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
footer.site-foot img { height: 20px; }
footer.site-foot span { font-size: 12px; color: #555; }