/* Limit WordPress theme overrides to the ButtonBash page wrapper. */
body.bb-homepage-canvas { margin: 0 !important; padding: 0 !important; background: #050509 !important; }
#buttonbash-site { width: 100%; max-width: none; margin: 0; padding: 0; isolation: isolate; text-align: left; }
#buttonbash-site *, #buttonbash-site *::before, #buttonbash-site *::after { box-sizing: border-box; }
#buttonbash-site :where(header,footer,main,section,article,nav,div,p,h1,h2,h3,ul,li,a,span,img) { margin: 0; padding: 0; border-radius: 0; letter-spacing: normal; }
#buttonbash-site :where(h1,h2,h3,p,a,span,b,i,li) { color: inherit; }
#buttonbash-site h1, #buttonbash-site h2, #buttonbash-site h3 { color: #f7f7ff; font-weight: 400; -webkit-text-fill-color: currentColor; }
#buttonbash-site a { text-decoration: none; }
#buttonbash-site img { display: block; border: 0; box-shadow: none; }
#buttonbash-site a::before, #buttonbash-site a::after { content: none; }

/*
PURPOSE:
ButtonBash offline homepage stylesheet.

USAGE:
Loaded by index.html during local development.

NOTES:
Uses the established ButtonBash color palette and typography.
Keep shared layout and visual rules here before WordPress integration.
*/
#buttonbash-site {--bb-black:#050509;--bb-blue:#139cff;--bb-pink:#ff1ba6;--bb-yellow:#ffd21e;--bb-green:#68ff2f;--bb-white:#f7f7ff;--bb-copy:#dce2ff;--bb-muted:#a5c2d6;--bb-border:#24516a;--bb-heading:'Press Start 2P',monospace;--bb-shell:1260px;color-scheme:dark}
/* Shared typography, keyboard access, and page layout. */
#buttonbash-site * {box-sizing:border-box}

#buttonbash-site {margin:0;background:var(--bb-black);color:var(--bb-white);font:20px/1.25 'VT323',monospace}

#buttonbash-site a {color:inherit;text-underline-offset:4px}

#buttonbash-site a:focus-visible {outline:3px solid var(--bb-yellow);outline-offset:5px}

#buttonbash-site p {margin:0}

#buttonbash-site h1, #buttonbash-site h2, #buttonbash-site h3 {margin:0}

#buttonbash-site h1, #buttonbash-site h2 {font-family:var(--bb-heading)}

#buttonbash-site img {max-width:100%}

#buttonbash-site [id] {scroll-margin-top:20px}

#buttonbash-site .shell {width:min(var(--bb-shell),calc(100% - 48px));margin-inline:auto}

#buttonbash-site .skip-link {position:absolute;z-index:100;left:16px;top:8px;padding:12px;background:var(--bb-yellow);color:var(--bb-black);transform:translateY(-180%)}

#buttonbash-site .skip-link:focus {transform:none}

#buttonbash-site .text-link {color:#60d9ff;font-size:17px;text-transform:uppercase;white-space:nowrap}

#buttonbash-site .meta, #buttonbash-site .archive-note {color:var(--bb-muted);font-size:16px}

#buttonbash-site .archive-note {margin-top:8px}

#buttonbash-site .pink {--accent:var(--bb-pink)}

#buttonbash-site .blue {--accent:var(--bb-blue)}

#buttonbash-site .yellow {--accent:var(--bb-yellow)}

#buttonbash-site .green {--accent:var(--bb-green)}

#buttonbash-site .purple {--accent:#c17aff}

#buttonbash-site .white {--accent:var(--bb-copy)}
/* A compact masthead keeps navigation and editorial content close together. */
#buttonbash-site .site-header {border-bottom:2px solid var(--bb-pink);box-shadow:0 0 16px #ff1ba64a;position:relative;z-index:2;background:#03060c}

#buttonbash-site .header-inner {min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:26px;padding-block:16px}

#buttonbash-site .brand {text-decoration:none;display:inline-flex;flex-direction:column;flex-shrink:0}

#buttonbash-site .wordmark {display:block;text-transform:uppercase;white-space:nowrap;font:21px/1.3 var(--bb-heading);letter-spacing:-1.5px;text-shadow:2px 3px #553515,0 0 10px #ffb32150}

#buttonbash-site .wordmark>span {color:#ffbe31}

#buttonbash-site .wordmark b {color:var(--bb-blue);font-weight:inherit;text-shadow:2px 3px #243889,0 0 10px #139cff55}

#buttonbash-site .tagline {color:#55d6ff;text-transform:uppercase;font-size:12px;letter-spacing:.8px;margin-top:6px;text-align:center}

#buttonbash-site .main-nav {display:flex;gap:17px;align-items:center;flex-wrap:wrap}

#buttonbash-site .main-nav a {font-family:var(--bb-heading);font-size:8px;text-transform:uppercase;text-decoration:none;min-height:36px;display:flex;align-items:center;white-space:nowrap}

#buttonbash-site .main-nav a:hover {color:var(--bb-blue)}

#buttonbash-site .main-nav [aria-current] {color:#60d9ff;border:1px solid var(--bb-blue);padding:8px;box-shadow:0 0 9px #139cff55}

#buttonbash-site .main-nav .nav-cta {color:#ff68c5;border:1px solid var(--bb-pink);padding:8px 10px}

#buttonbash-site .header-motto {font-size:13px;line-height:.9;color:#60d9ff;text-transform:uppercase;position:relative;padding-right:35px}

#buttonbash-site .header-motto i {position:absolute;right:0;top:0;width:26px;height:39px;background:linear-gradient(transparent 0 5px,var(--bb-blue) 5px 7px,transparent 7px 15px,var(--bb-pink) 15px 17px,transparent 17px 25px,var(--bb-yellow) 25px 27px,transparent 27px)}
/* Static scanlines add CRT texture without animation or external artwork. */
#buttonbash-site .hero {
  position: relative;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #050712 url("../assets/video/buttonbash-hero-montage-poster.webp") center center / contain no-repeat;
}

#buttonbash-site .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(3,6,13,.99) 0%,
      rgba(3,6,13,.96) 23%,
      rgba(3,6,13,.83) 36%,
      rgba(3,6,13,.46) 53%,
      rgba(3,6,13,.10) 72%,
      rgba(3,6,13,0) 88%),
    linear-gradient(0deg,
      rgba(5,5,9,.82) 0%,
      rgba(5,5,9,.24) 15%,
      rgba(5,5,9,0) 40%),
    linear-gradient(180deg,
      rgba(5,5,9,.22) 0%,
      rgba(5,5,9,0) 22%);
}

#buttonbash-site .hero-inner {
  position: relative;
  z-index: 2;
  padding: 30px 24px 22px;
  min-height: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

#buttonbash-site .hero-copy {max-width:570px}

#buttonbash-site .hero-wordmark {font-size:21px;margin-bottom:12px}

#buttonbash-site .hero h1 {font-size:clamp(29px,4vw,49px);text-transform:uppercase;line-height:1.16;letter-spacing:-1.5px;text-shadow:3px 3px #782889,-2px -1px #48c8ff,0 0 14px #139cff66}

#buttonbash-site .hero-copy>p {font-size:23px;margin-top:13px;text-shadow:0 2px 5px #000;max-width:470px}

#buttonbash-site .hero-actions {display:flex;flex-wrap:wrap;gap:14px;margin:18px 0 12px}

#buttonbash-site .button {display:inline-flex;min-height:48px;align-items:center;justify-content:center;padding:14px 21px;font:10px/1.6 var(--bb-heading);text-transform:uppercase;color:#050509;text-decoration:none;border:1px solid transparent;box-shadow:0 0 14px #139cff22}

#buttonbash-site .button-blue {background:var(--bb-blue)}

#buttonbash-site .button-pink {background:var(--bb-pink)}

#buttonbash-site .button:hover {border-color:var(--bb-white);text-decoration:underline}

#buttonbash-site .hero-tag {display:flex;gap:16px;align-items:center;color:#60d9ff;font-size:19px;text-transform:uppercase}

#buttonbash-site .sprites {display:inline-flex;gap:10px;align-items:center;font-size:31px;line-height:1}

#buttonbash-site .sprites i {font-style:normal;color:var(--bb-blue);text-shadow:0 0 8px currentColor}

#buttonbash-site .sprites i:nth-child(2) {color:var(--bb-green)}

#buttonbash-site .sprites i:nth-child(3) {color:var(--bb-yellow)}

#buttonbash-site .sprites i:nth-child(4) {color:var(--bb-pink)}
/* Editorial cards reuse the existing guide titles and summaries. */
#buttonbash-site .publication {position:relative;padding:14px 24px 12px;border:1px solid var(--bb-blue);border-radius:12px 12px 3px 3px;box-shadow:0 0 14px #139cff65,inset 0 0 25px #139cff0c;background:linear-gradient(110deg,#02090e,#02070b);margin-bottom:10px}

#buttonbash-site .section {padding:0 0 19px}

#buttonbash-site .section-heading {display:flex;align-items:center;gap:24px;margin-bottom:12px}

#buttonbash-site .section-heading h2 {font-size:17px;line-height:1.5;text-transform:uppercase;text-shadow:2px 2px #862b8b,-1px -1px #42bfff;white-space:nowrap}

#buttonbash-site .section-heading h2 span {color:#60d9ff;text-shadow:none}

#buttonbash-site .section-heading>p {color:#70d7f5;font-size:14px;text-transform:uppercase}

#buttonbash-site .section-heading .text-link {margin-left:auto}

#buttonbash-site .featured-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

#buttonbash-site .guide-card {border:1px solid var(--bb-border);display:flex;flex-direction:column;background:#030c12}

#buttonbash-site .card-image {position:relative;overflow:hidden}

#buttonbash-site .art {object-fit:cover;height:auto;background-color:#111425;display:block;width:100%}

#buttonbash-site .badge {position:absolute;top:9px;left:9px;background:var(--accent);color:#050509;padding:5px 8px;font:8px/1.4 var(--bb-heading);text-transform:uppercase}

#buttonbash-site .card-copy {padding:9px 12px 11px;display:flex;flex-direction:column;flex:1}

#buttonbash-site .card-copy h3, #buttonbash-site .story h3 {font:12px/1.6 var(--bb-heading)}

#buttonbash-site .card-copy>p {font-size:19px;color:var(--bb-copy);margin:8px 0 10px}

#buttonbash-site .card-copy .meta {margin-top:auto}

#buttonbash-site .topic-grid, #buttonbash-site .latest-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

#buttonbash-site .topic-card {border:1px solid var(--accent);text-decoration:none;position:relative;background:#050b11;overflow:hidden}

#buttonbash-site .topic-card>div:last-child {min-height:47px;display:flex;align-items:center;gap:9px;padding:7px 10px}

#buttonbash-site .topic-card h3 {font:9px/1.5 var(--bb-heading);text-transform:uppercase}

#buttonbash-site .topic-symbol {font-size:30px;color:var(--accent)}

#buttonbash-site .arrow {color:var(--accent);margin-left:auto}

#buttonbash-site .topic-card:hover {box-shadow:0 0 12px color-mix(in srgb,var(--accent),transparent 60%)}

#buttonbash-site .story .card-image {border:1px solid var(--bb-border)}

#buttonbash-site .story h3 {font-size:10px;margin:8px 0}

#buttonbash-site .story p {font-size:18px;color:var(--bb-copy);margin-bottom:8px}

#buttonbash-site .bottom-grid {display:grid;grid-template-columns:1.15fr 1fr;gap:30px}

#buttonbash-site .bottom-grid .section-heading {gap:12px}

#buttonbash-site .bottom-grid h2 {font-size:14px}

#buttonbash-site .bottom-grid .section-heading>p {font-size:12px}

#buttonbash-site .system-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}

#buttonbash-site .system {border:1px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:99px;background:linear-gradient(135deg,#101c25,#03080c);padding:10px 4px}

#buttonbash-site .system>span {font-size:32px;color:var(--accent);line-height:1;text-shadow:0 0 10px color-mix(in srgb,var(--accent),transparent 60%)}

#buttonbash-site .system b {font:7px/1.4 var(--bb-heading)}
/* Live events stay secondary to the publication; no unconfirmed dates are shown. */
#buttonbash-site .event-list {display:grid;gap:8px}

#buttonbash-site .event-row {display:grid;grid-template-columns:49px 1fr 10px;gap:13px;align-items:center;border:1px solid var(--bb-border);border-left:3px solid var(--accent);padding:6px 10px}

#buttonbash-site .date-block {background:var(--accent);color:var(--bb-black);display:flex;align-items:center;flex-direction:column;padding:4px;font-size:16px}

#buttonbash-site .date-block b {font:14px/1.5 var(--bb-heading)}

#buttonbash-site .event-row h3 {font-size:20px;font-weight:400;line-height:1.1}

#buttonbash-site .event-row p, #buttonbash-site .event-row .meta {font-size:15px;color:var(--bb-copy)}

#buttonbash-site .event-row>span {color:var(--accent)}

#buttonbash-site .booking {border:2px solid var(--bb-pink);border-radius:9px;padding:15px 20px;display:flex;align-items:center;gap:24px;box-shadow:0 0 12px #ff1ba640;margin:0 -16px 0}

#buttonbash-site .booking h2 {font-size:17px;text-transform:uppercase;line-height:1.55;text-shadow:2px 2px #a32391,-1px -1px #139cff;flex-shrink:0}

#buttonbash-site .booking>p {padding-left:23px;border-left:1px solid var(--bb-yellow);font-size:17px;color:#70d7f5;max-width:340px}

#buttonbash-site .booking .button {margin-left:auto;white-space:nowrap}

#buttonbash-site .site-footer {padding:16px 0 18px}

#buttonbash-site .footer-top {display:flex;align-items:center;justify-content:space-between;gap:24px}

#buttonbash-site .footer-top .wordmark {font-size:17px}

#buttonbash-site .footer-top .tagline {font-size:10px}

#buttonbash-site .footer-top>p {font-size:17px;color:var(--bb-copy)}

#buttonbash-site .footer-bottom {display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid #20394a;padding-top:12px;margin-top:14px;font-size:14px;color:var(--bb-muted)}
/* Smaller screens retain every navigation item without a scripted menu. */
@media(max-width:1150px){

#buttonbash-site .header-motto {display:none}

#buttonbash-site .main-nav {gap:12px}

#buttonbash-site .wordmark {font-size:19px}

#buttonbash-site .main-nav a {font-size:7px}

#buttonbash-site .section-heading {gap:15px}

#buttonbash-site .section-heading h2 {font-size:15px}

#buttonbash-site .section-heading>p {font-size:12px}

#buttonbash-site .booking {gap:16px}

#buttonbash-site .booking>.sprites {display:none}

#buttonbash-site .booking h2 {font-size:15px}

#buttonbash-site .bottom-grid {gap:22px}

#buttonbash-site .bottom-grid .section-heading>p {display:none}}
@media(max-width:900px){

#buttonbash-site .header-inner {flex-wrap:wrap;gap:12px}

#buttonbash-site .main-nav {width:100%;justify-content:space-between}

#buttonbash-site .hero-copy {max-width:500px}

#buttonbash-site .section-heading>p {display:none}

#buttonbash-site .publication {padding-inline:16px}

#buttonbash-site .featured-grid {gap:12px}

#buttonbash-site .card-copy {padding:10px}

#buttonbash-site .card-copy h3 {font-size:10px}

#buttonbash-site .topic-grid, #buttonbash-site .latest-grid {grid-template-columns:repeat(2,minmax(0,1fr))}

#buttonbash-site .bottom-grid {grid-template-columns:1fr}

#buttonbash-site .system-grid {max-width:650px}

#buttonbash-site .booking {flex-wrap:wrap;margin-inline:-8px}

#buttonbash-site .booking>p {flex:1;min-width:180px}

#buttonbash-site .booking .button {margin-left:0}

#buttonbash-site .footer-top>p {display:none}

#buttonbash-site .section-heading h2 {white-space:normal}}
@media(max-width:600px){

#buttonbash-site .shell {width:calc(100% - 24px)}

#buttonbash-site .header-inner {padding-block:13px}

#buttonbash-site .main-nav {justify-content:flex-start;gap:4px 16px}

#buttonbash-site .main-nav a {font-size:7px;min-height:34px}

#buttonbash-site .hero-inner {padding:25px 8px 22px}

#buttonbash-site .hero-overlay {background:linear-gradient(90deg,#03060deb,#03060d50),linear-gradient(0deg,#050509,transparent 60%)}

#buttonbash-site .hero h1 {font-size:clamp(25px,7vw,40px);letter-spacing:-1px}

#buttonbash-site .hero-copy>p {font-size:21px}

#buttonbash-site .hero-wordmark {font-size:18px}

#buttonbash-site .hero-actions {gap:10px}

#buttonbash-site .button {padding:12px;font-size:8px;min-height:44px}

#buttonbash-site .hero-tag {font-size:15px;gap:10px}

#buttonbash-site .hero-tag .sprites {font-size:23px;gap:5px}

#buttonbash-site .publication {padding:14px 12px 10px;border-radius:8px}

#buttonbash-site .section-heading {gap:8px;flex-wrap:wrap}

#buttonbash-site .section-heading h2 {font-size:13px}

#buttonbash-site .section-heading .text-link {font-size:15px}

#buttonbash-site .featured-grid {grid-template-columns:1fr;gap:16px}

#buttonbash-site .card-copy h3 {font-size:12px}

#buttonbash-site .card-copy>p {font-size:20px}

#buttonbash-site .topic-grid, #buttonbash-site .latest-grid {gap:12px}

#buttonbash-site .topic-card>div:last-child {padding:8px;gap:5px}

#buttonbash-site .topic-card h3 {font-size:7px}

#buttonbash-site .topic-symbol {font-size:20px}

#buttonbash-site .story h3 {font-size:9px}

#buttonbash-site .story p {font-size:18px}

#buttonbash-site .badge {font-size:6px;padding:4px;top:6px;left:6px}

#buttonbash-site .system-grid {grid-template-columns:repeat(3,minmax(0,1fr))}

#buttonbash-site .system {min-height:84px}

#buttonbash-site .system b {font-size:8px}

#buttonbash-site .booking {display:grid;grid-template-columns:1fr;gap:12px;padding:17px}

#buttonbash-site .booking h2 {font-size:14px}

#buttonbash-site .booking>p {border-left:0;padding-left:0;font-size:19px}

#buttonbash-site .booking .button {justify-self:start}

#buttonbash-site .footer-top {flex-wrap:wrap;gap:15px}

#buttonbash-site .footer-bottom {font-size:15px}

#buttonbash-site .event-row {gap:9px;padding:7px}

#buttonbash-site .event-row h3 {font-size:19px}

#buttonbash-site .event-row .meta {font-size:14px}

#buttonbash-site .desktop-break {display:none}}
@media(prefers-reduced-motion:reduce){

#buttonbash-site {scroll-behavior:auto}}

#buttonbash-site .art-guitars { aspect-ratio: 325 / 104; }

#buttonbash-site .art-wii { aspect-ratio: 307 / 104; }

#buttonbash-site .art-repair { aspect-ratio: 324 / 104; }

#buttonbash-site .art-rhythm { aspect-ratio: 235 / 68; }

#buttonbash-site .art-retro { aspect-ratio: 235 / 66; }

#buttonbash-site .art-bench { aspect-ratio: 235 / 66; }

#buttonbash-site .art-friends { aspect-ratio: 235 / 67; }

#buttonbash-site .art-event { aspect-ratio: 234 / 76; }

#buttonbash-site .art-dj { aspect-ratio: 232 / 76; }

#buttonbash-site .art-snes { aspect-ratio: 231 / 76; }

#buttonbash-site .art-neon { aspect-ratio: 234 / 76; }
/* Preserve the reference header logo, tagline, and arcade characters as one proportional artwork viewport. */
#buttonbash-site .header-logo-art {
  display: block;
  width: 280px;
  aspect-ratio: 480 / 150;
  object-fit: contain;
  height: auto;
}

#buttonbash-site .site-header { background: #000207; }

#buttonbash-site .header-inner { min-height: 108px; padding-block: 10px; gap: 20px; }

#buttonbash-site .header-brand { align-self: center; }
@media (max-width: 900px) {

#buttonbash-site .header-inner { flex-wrap: wrap; gap: 10px; }

#buttonbash-site .main-nav { width: 100%; justify-content: flex-start; gap: 6px 18px; }
}
@media (max-width: 600px) {

#buttonbash-site .header-logo-art { width: min(280px, calc(100vw - 32px)); }

#buttonbash-site .header-inner { gap: 8px; }

#buttonbash-site .main-nav { gap: 4px 16px; }
}

/* Standalone WebP photos use native image elements instead of screenshot background offsets. */

#buttonbash-site .hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

#buttonbash-site .hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  filter: brightness(.72) contrast(1.14) saturate(.92);
  transform: none;
}

/* Editorial film grain adds texture to the live footage without altering the source video. */
#buttonbash-site .hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 1;
  pointer-events: none;
  opacity: .19;
  background-image: url("../assets/video/buttonbash-film-grain.webp");
  background-repeat: repeat;
  background-size: 192px 192px;
  mix-blend-mode: soft-light;
  animation: bb-film-grain .48s steps(2,end) infinite;
}

/* Existing scanline treatment stays subtle beneath the page copy. */
#buttonbash-site .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .13;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.03) 0,
    rgba(255,255,255,.03) 1px,
    transparent 1px,
    transparent 4px
  );
}

@keyframes bb-film-grain {
  0% { transform: translate3d(-2%,1%,0); }
  25% { transform: translate3d(1%,-2%,0); }
  50% { transform: translate3d(2%,2%,0); }
  75% { transform: translate3d(-1%,-1%,0); }
  100% { transform: translate3d(-2%,1%,0); }
}

@media(max-width:900px) {
  #buttonbash-site .hero {
    aspect-ratio: auto;
    min-height: 620px;
  }

  #buttonbash-site .hero-inner {
    min-height: 620px;
    height: auto;
  }

  #buttonbash-site .hero-video {
    object-position: center center;
    filter: brightness(.64) contrast(1.12) saturate(.90);
  }

  #buttonbash-site .hero-overlay {
    background:
      linear-gradient(90deg,
        rgba(3,6,13,.98) 0%,
        rgba(3,6,13,.88) 44%,
        rgba(3,6,13,.42) 77%,
        rgba(3,6,13,.16) 100%),
      linear-gradient(0deg,rgba(5,5,9,.82),transparent 48%);
  }
}

@media(max-width:600px) {
  #buttonbash-site .hero {
    aspect-ratio: auto;
    min-height: 610px;
  }

  #buttonbash-site .hero-inner {
    min-height: 610px;
    height: auto;
  }

  #buttonbash-site .hero-video {
    object-fit: contain;
    object-position: center top;
    filter: brightness(.54) contrast(1.10) saturate(.88);
  }

  #buttonbash-site .hero-overlay {
    background:
      linear-gradient(90deg,rgba(3,6,13,.95),rgba(3,6,13,.68)),
      linear-gradient(0deg,rgba(5,5,9,.86),transparent 62%);
  }

  #buttonbash-site .hero::before {
    opacity: .15;
  }
}

@media(prefers-reduced-motion:reduce) {
  #buttonbash-site .hero-video {
    display: none;
  }

  #buttonbash-site .hero::before {
    animation: none;
  }
}