/* ============================================================
   BLIND TECHNO — design tokens
   Font: Atkinson Hyperlegible — designed by the Braille Institute
   specifically to keep letterforms distinct for low-vision readers.
   One typeface, used at a generous scale, is the whole design idea:
   legibility is the aesthetic, not a constraint on it.

   Theme: dark by default on every visit (true #000000), with an
   optional manual switch to light. No reliance on system settings.
   ============================================================ */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-700-normal.woff2') format('woff2');
}

:root{
  --blue:   #5B93FF;
  --amber:  #FFB43A;
  --mint:   #2FD9A8;
  --violet: #B98BFF;
  --coral:  #FF7186;
  --sky:    #38BDF8;

  /* Dark is the default palette */
  --bg:        #000000;
  --bg-panel:  #0A0C10;
  --bg-raised: #12151C;
  --text:      #F5F6FA;
  --text-dim:  #A8AFC4;
  --border:    #22262F;
  --shadow:    0 10px 30px -10px rgba(0,0,0,.7);
  --focus:     #8FB2FF;
  --scale: 1;
}

html[data-theme="light"]{
  --bg:        #F6F7FB;
  --bg-panel:  #FFFFFF;
  --bg-raised: #FFFFFF;
  --text:      #10121A;
  --text-dim:  #454B5C;
  --border:    #DDE1EA;
  --shadow:    0 10px 30px -12px rgba(20,24,40,.18);
  --focus:     #1A1FBF;
}

*{ box-sizing: border-box; }
html{ font-size: calc(100% * var(--scale)); scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Atkinson Hyperlegible', 'Segoe UI', Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background: var(--focus); color:#fff;
  padding:.75rem 1.25rem; border-radius:.5rem;
  font-weight:700; z-index:100; transition: top .15s ease;
}
.skip-link:focus{ top:1rem; }

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Header ---------- */
header.site{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding: .75rem 0;
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.brand img{ width:36px; height:36px; border-radius:50%; }
.brand-name{ font-weight:700; font-size:1.05rem; letter-spacing:.01em; }
.brand-name .sub{ display:block; font-weight:400; font-size:.68rem; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase; }

.controls{ display:flex; gap:.5rem; align-items:center; }
.icon-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--bg-raised); color: var(--text);
  border:1px solid var(--border); border-radius: 999px;
  padding:.5rem .9rem; font: inherit; font-size:.82rem; font-weight:700;
  cursor:pointer;
}
.icon-btn:hover{ border-color: var(--focus); }
.icon-btn svg{ width:16px; height:16px; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding: 3.6rem 0 3.2rem;
  text-align:center;
}
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--mint); margin-bottom:.9rem;
}
h1{
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  line-height:1.1; margin:0 0 1rem; letter-spacing:-0.01em;
}
.hero p.lead{
  max-width: 620px; margin: 0 auto 2rem;
  font-size: 1.15rem; color: var(--text-dim);
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-bottom: 2.4rem; }
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .85rem 1.4rem; border-radius: .8rem;
  font-weight:700; font-size:.98rem; text-decoration:none;
  border:2px solid transparent;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background: var(--focus); color:#fff; }
.btn-primary:hover{ filter: brightness(1.1); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--focus); }

/* Signature element: a quiet equalizer waveform, standing in for
   "sound made visible" — the throughline between radio, techno,
   and a community built around listening. */
.waveform{
  display:flex; align-items:flex-end; justify-content:center;
  gap:5px; height:34px; margin: 0 auto; max-width:280px;
}
.waveform span{
  display:block; width:4px; border-radius:3px;
  background: linear-gradient(180deg, var(--blue), var(--mint));
  animation: wave 1.8s ease-in-out infinite;
}
.waveform span:nth-child(1){ height:35%; animation-delay:-1.1s; }
.waveform span:nth-child(2){ height:70%; animation-delay:-0.9s; }
.waveform span:nth-child(3){ height:100%; animation-delay:-0.7s; background: linear-gradient(180deg, var(--violet), var(--mint)); }
.waveform span:nth-child(4){ height:55%; animation-delay:-0.5s; }
.waveform span:nth-child(5){ height:85%; animation-delay:-0.3s; background: linear-gradient(180deg, var(--blue), var(--sky)); }
.waveform span:nth-child(6){ height:45%; animation-delay:-0.15s; }
.waveform span:nth-child(7){ height:65%; animation-delay:0s; }
@keyframes wave{
  0%, 100%{ transform: scaleY(.55); }
  50%{ transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce){
  .waveform span{ animation:none; }
}

/* ---------- Section shell ---------- */
section{ padding: 3rem 0; }
.section-head{ max-width: 640px; margin: 0 auto 2rem; text-align:center; }
.section-head h2{ font-size: clamp(1.4rem, 3vw, 1.85rem); margin:0 0 .5rem; }
.section-head p{ color: var(--text-dim); margin:0; }

/* ---------- Nav tiles (color-coded destinations) ---------- */
.tiles{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tile{
  position:relative;
  display:flex; flex-direction:column; gap:.7rem;
  text-decoration:none; color: var(--text);
  background: var(--bg-panel);
  border:1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--tile-color, var(--blue));
}
.tile:hover{ transform: translateY(-2px); transition: transform .15s ease; }
.tile-icon{
  width:38px; height:38px; border-radius: .6rem;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--tile-color, var(--blue)) 18%, transparent);
  color: var(--tile-color, var(--blue));
}
.tile-icon svg{ width:19px; height:19px; }
.tile h3{ margin:0; font-size:1.05rem; }
.tile p{ margin:0; color: var(--text-dim); font-size:.92rem; }
.tile .go{
  margin-top:auto; font-weight:700; font-size:.82rem;
  color: var(--tile-color, var(--blue));
  display:flex; align-items:center; gap:.35rem;
}

/* ---------- About preview ---------- */
.about-grid{
  display:grid; gap:1.75rem;
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
@media (max-width:820px){ .about-grid{ grid-template-columns:1fr; } }
.about-card{
  background: var(--bg-panel); border:1px solid var(--border);
  border-radius: 1rem; padding: 1.6rem; box-shadow: var(--shadow);
}
.about-card h3{ margin-top:0; }
.team-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap:.5rem .8rem; }
.team-list li{ padding-left:1.1rem; position:relative; font-size:.93rem; }
.team-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.45rem; height:.45rem; border-radius:50%; background: var(--mint);
}

/* ---------- Connect / footer ---------- */
.connect{
  display:grid; gap:.9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
}
.connect a{
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none; color: var(--text);
  background: var(--bg-panel); border:1px solid var(--border);
  border-radius: .9rem; padding: 1rem 1.1rem;
}
.connect a:hover{ border-color: var(--c-color, var(--blue)); }
.connect .ic{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--c-color, var(--blue)) 20%, transparent);
  color: var(--c-color, var(--blue)); flex:none;
}
.connect .ic svg{ width:17px; height:17px; }
.connect strong{ display:block; font-size:.95rem; }
.connect span{ color: var(--text-dim); font-size:.82rem; }

footer{
  border-top:1px solid var(--border);
  padding: 2rem 0; text-align:center;
  color: var(--text-dim); font-size:.88rem;
}
footer a{ text-decoration: underline; }