/* =========================================================================
   bs.css — BOBBYSHAKES.COM · VOL. 6 design system
   One stylesheet, whole-site shell: tokens, header, nav, Squeeze chip,
   live banner, sections, tiles, FLYAHS band, footer.
   Page-specific styles stay inline on each page.
   Load with a version bump:  <link rel="stylesheet" href="bs.css?v=6">
   ========================================================================= */

:root{
  --ink:#0b0a09; --panel:#13110e; --panel2:#181511;
  --line:rgba(230,185,92,.14); --line2:rgba(230,185,92,.30);
  --gold:#e6b95c; --gold-soft:#b99767; --gold-hi:#f0cd84;
  --text:#f2ede4; --dim:#9b948a;
  --red:#b3382e; --live:#e23b3b;
  --maxw:1080px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--text);font-family:'Inter',system-ui,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:var(--gold);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;width:100%}
.mono{font-family:'Space Mono',monospace}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---- header ---- */
.hdr{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  background:rgba(11,10,9,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hdr .wrap{display:flex;align-items:center;gap:14px;padding:12px 20px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;flex:0 0 auto}
.brandimg{height:46px;width:auto;display:block}
.brandtxt{font-family:'Archivo',sans-serif;font-weight:900;font-size:19px;letter-spacing:.1em;color:var(--text)}
.brandtxt span{color:var(--gold)}
.brandtxt small{display:block;font-family:'Space Mono',monospace;font-weight:400;font-size:9px;
  letter-spacing:.28em;color:var(--gold-soft);margin-top:2px}
@media(max-width:560px){.brandimg{height:38px}}

/* Squeeze audio chip */
.fm{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;white-space:nowrap;
  padding:8px 14px 8px 12px;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);background:rgba(24,21,17,.72);border:1px solid var(--line2);border-radius:100px;
  transition:border-color .25s,color .25s,transform .25s,box-shadow .25s}
.fm:hover,.fm:focus-visible{border-color:var(--gold);color:var(--gold-hi);transform:translateY(-1px)}
.fm .ico{display:inline-flex;align-items:center;justify-content:center;width:15px;height:13px;color:var(--gold)}
.fm .eq{display:none;align-items:flex-end;gap:2px;width:15px;height:13px}
.fm .eq i{flex:1;background:var(--gold);border-radius:1px;height:40%}
.fm.playing .tri{display:none}
.fm.playing .eq{display:inline-flex}
.fm.playing .eq i{animation:eq .9s ease-in-out infinite}
.fm.playing .eq i:nth-child(2){animation-delay:.18s}
.fm.playing .eq i:nth-child(3){animation-delay:.36s}
@keyframes eq{0%,100%{height:28%}50%{height:100%}}
.fm.armed{border-color:var(--gold);color:var(--gold-hi);animation:fmpulse 2.1s ease-in-out infinite}
@keyframes fmpulse{0%,100%{box-shadow:0 0 0 0 rgba(230,185,92,0)}50%{box-shadow:0 0 22px 2px rgba(230,185,92,.34)}}

/* nav */
nav.main{display:flex;gap:3px;flex-wrap:wrap;margin-left:auto}
nav.main a{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);padding:8px 11px;border-radius:8px;transition:color .2s,background .2s}
nav.main a:hover{color:var(--text);background:var(--panel)}
nav.main a.on{color:#15120d;background:var(--gold);font-weight:700}
@media(max-width:680px){
  .hdr .wrap{gap:10px}
  nav.main{width:100%;order:3;justify-content:center;gap:2px}
  nav.main a{flex:1;text-align:center;padding:8px 5px;font-size:10px}
  .fm{margin-left:auto}
}

/* ---- live banner (Monday #SHAKESCITYUNCUT) ---- */
.livebar{display:none;text-decoration:none}
.livebar.on{display:flex;align-items:center;gap:13px;justify-content:center;
  background:linear-gradient(90deg,#1a0c0c,#241010,#1a0c0c);
  border-bottom:1px solid var(--gold-soft);padding:11px 18px;color:var(--text)}
.livebar .dot{width:9px;height:9px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 rgba(226,59,59,.7);animation:lpulse 1.6s infinite}
.livebar.soon .dot{background:var(--gold);animation:none}
.livebar .lbl{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-size:11px;color:var(--gold)}
.livebar .ttl{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--text)}
.livebar .go{margin-left:4px;font-family:'Space Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-soft);
  padding:6px 11px;border-radius:4px;transition:background .2s,color .2s}
.livebar:hover .go{background:var(--gold);color:#0a0a0a}
@keyframes lpulse{0%{box-shadow:0 0 0 0 rgba(226,59,59,.6)}70%{box-shadow:0 0 0 8px rgba(226,59,59,0)}100%{box-shadow:0 0 0 0 rgba(226,59,59,0)}}
@media(max-width:520px){.livebar .ttl{display:none}}

/* ---- section shell ---- */
section.blk{padding:48px 0;border-bottom:1px solid var(--line)}
.eyebrow{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:10px}
h2.t{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(26px,4.5vw,40px);
  text-transform:uppercase;letter-spacing:.01em;margin-bottom:14px;line-height:1}
h2.t span{color:var(--gold)}
.lede{color:var(--dim);max-width:620px}

/* ---- tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:26px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;
  transition:transform .25s var(--ease),border-color .25s;display:block}
.tile:hover{transform:translateY(-3px);border-color:var(--line2)}
.tile .tt{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text)}
.tile .td{color:var(--dim);font-size:13.5px;margin-top:6px}
.tile .tm{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--gold);
  margin-top:14px;text-transform:uppercase}

/* ---- FLYAHS band ---- */
.band{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,#191307,#0e0c08);border:1px solid var(--line2);
  border-radius:16px;padding:22px;margin-top:30px;flex-wrap:wrap}
.band .bt{font-family:'Archivo',sans-serif;font-weight:900;font-size:20px;text-transform:uppercase}
.band .bt span{color:var(--gold)}
.band .bd{color:var(--dim);font-size:13.5px;margin-top:4px}
.band a.go{flex:none;font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--gold);color:#15120d;padding:11px 18px;border-radius:10px;
  transition:transform .2s var(--ease)}
.band a.go:hover{transform:translateY(-2px)}

/* ---- footer ---- */
.ftr{margin-top:auto;border-top:1px solid var(--line);padding:30px 0 46px;color:var(--dim);
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;line-height:2}
.ftr .wrap{display:block}
.ftr a{color:var(--gold-soft)}
.ftr a:hover{color:var(--gold)}
.ftr .row2{margin-top:4px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}