@import url('https://fonts.googleapis.com/css2?family=Bitcount+Single&family=VT323&display=swap');

/* ===== Chismos@ · shared Y2K / Web 1.0 chrome =====
   Linked AFTER each page's inline <style> so these rules win on source order.
   CSS url() paths are relative to THIS file (assets/), so they work from
   both root pages and /posts/ pages.
   NOTE: @import MUST be the very first line of this file. CSS specs require
   @import to precede every other rule; otherwise browsers drop it and the
   custom fonts (VT323, Bitcount Single) silently fall back to Menlo. */

/* Big pixel-logo header */
header.site{padding:24px 24px 4px;text-align:center}
header.site .logo{max-width:min(1000px,92vw);height:auto;image-rendering:pixelated;display:inline-block}

/* Centered Web 1.0 nav (overrides old frosted sticky bar) */
nav#site-nav{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
  padding:10px 24px 14px;font-weight:600;font-size:17px;color:var(--pink);
  text-transform:uppercase;letter-spacing:.01em;
  background:none!important;border:none!important;position:static;height:auto;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
nav#site-nav .nav-link{color:var(--pink)}
nav#site-nav a:hover{opacity:.6}
nav#site-nav .socials{display:flex;gap:12px;align-items:center}
nav#site-nav .social-icon{color:var(--pink);display:flex;opacity:1}
nav#site-nav .social-icon:hover{opacity:.6;color:var(--pink)}
nav#site-nav .btn-join{background:var(--pink);color:#fff;border:none;border-radius:7px;
  padding:8px 16px;font-family:inherit;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.01em}
nav#site-nav .btn-join:hover{background:var(--pink-dark)}
nav#site-nav .nav-toggle{display:none;flex-direction:column;justify-content:center;
  gap:5px;background:none;border:none;width:42px;height:42px}
nav#site-nav .nav-toggle span{display:block;width:26px;height:3px;background:var(--pink)}

/* Heart marquee */
.cm-marquee{overflow:hidden;white-space:nowrap;padding:12px 0}
.cm-marquee .row{display:inline-flex;align-items:center;gap:16px;
  animation:cmMarch 26s linear infinite;font-size:30px;font-weight:600;color:#ec008c}
.cm-marquee .row span{display:inline-flex;align-items:center;gap:16px;white-space:nowrap}
.cm-marquee img{width:30px;height:28px}
@keyframes cmMarch{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Animated divider strip */
.cm-divider{width:100%;height:56px;background:url("figma/divider.gif") repeat-x center/auto 100%}

/* Red italic section label, like the landing */
.cm-label{color:#ff0004;font-weight:700;font-style:italic;font-size:24px}

@media(max-width:820px){
  /* Nav-link visibility (open/closed state) — hamburger + socials positioning
     is handled by the mobile-header block lower in this file. */
  nav#site-nav{gap:14px;padding-top:6px}
  nav#site-nav .nav-link,nav#site-nav .btn-join{display:none;width:100%;justify-content:center}
  nav#site-nav.open{flex-direction:column;padding-top:46px}
  nav#site-nav.open .nav-link,nav#site-nav.open .btn-join{display:flex}
}

/* ===== Floating iPod-clickwheel Radio Chismosa (subpages) ===== */
.cm-radio{position:fixed;left:16px;bottom:16px;z-index:600;height:118px;width:372px;
  max-width:calc(100vw - 32px);border:1px solid #000;border-radius:50px;display:flex;align-items:center;
  padding-left:12px;background:radial-gradient(ellipse 60% 55% at 50% 45%,#fff,#cfcfcf 55%,#9a9a9a);
  box-shadow:0 4px 16px rgba(0,0,0,.3)}
.cm-radio .cm-wheel{position:relative;width:102px;height:102px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 36%,#fdfdfd,#e6e6e6 42%,#c4c4c4 72%,#ababab);
  border:1px solid #9a9a9a;box-shadow:0 2px 5px rgba(0,0,0,.3),inset 0 2px 4px rgba(255,255,255,.95),inset 0 -5px 10px rgba(0,0,0,.16)}
.cm-radio .cm-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 46% 34%,#fff,#efefef 58%,#dadada);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.95),0 1px 3px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.05)}
.cm-radio .cm-btn{position:absolute;background:none;border:none;color:#2c2c2c;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.cm-radio .cm-btn:hover{color:var(--pink)}
.cm-radio .cm-play{left:50%;top:6px;transform:translateX(-50%);font-size:13px}
.cm-radio .cm-stop{left:50%;bottom:7px;transform:translateX(-50%);font-size:11px}
.cm-radio .cm-prev{left:8px;top:50%;transform:translateY(-50%);letter-spacing:-2px}
.cm-radio .cm-next{right:8px;top:50%;transform:translateY(-50%);letter-spacing:-2px}
.cm-radio .cm-title{font-weight:900;font-size:16px;color:#ff0004;margin-left:auto;padding:0 14px;text-align:center;line-height:1.15}
.cm-radio .cm-title small{display:block;font-weight:600;font-size:9px;color:#555;text-transform:uppercase;letter-spacing:.05em;margin-top:3px;max-width:130px}
@media(max-width:600px){.cm-radio{height:92px;width:248px;border-radius:46px}.cm-radio .cm-wheel{width:76px;height:76px}.cm-radio .cm-title{font-size:13px;padding:0 8px}}

/* ===== Y2K content treatment for subpages ===== */
.page-header{background:#ffe600!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:4px solid var(--pink)!important}
.page-title{color:#ff0004!important;font-style:italic;font-size:30px!important}
.ig-handle a,.side-title,.venue-list-title,.ig-strip-title,.venue-cat,.venue-name{color:var(--pink)!important}
/* chunky filter buttons */
.filters{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:3px solid var(--pink)!important}
.filter-btn{border:2px solid #000!important;border-radius:0!important;font-weight:700!important;background:#fff!important;color:#000!important}
.filter-btn:hover,.filter-btn.active{background:var(--pink)!important;color:#fff!important;border-color:#000!important}
/* solid bordered panels (no frosted glass) */
.ig-card{border:3px solid var(--pink)!important;border-radius:0!important;background:#fff!important}
.cal-card,.side-card{border:3px solid var(--pink)!important;border-radius:0!important;background:#fff!important}
.venue-list-wrap{border:3px solid var(--pink)!important}
.venue-list-title{background:#ffe600!important;backdrop-filter:none!important}
.post-body{border:3px solid var(--pink)!important;border-radius:0!important}
.post-cover{border:3px solid #000!important}
.ig-strip-card{border:2px solid #000!important;border-radius:0!important}
/* hide dead old player bar if still present */
#player-bar{display:none!important}

/* ===== Extended Join modal: interests + category ===== */
.join-form .field-block{margin-top:4px}
.join-form .field-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#111;margin-bottom:6px}
.join-form .pill-grid{display:flex;flex-wrap:wrap;gap:6px}
.join-form .pill-check{position:relative;display:inline-flex;align-items:center}
.join-form .pill-check input{position:absolute;opacity:0;pointer-events:none}
.join-form .pill-check span{display:inline-block;border:2px solid #000;background:#fff;color:#111;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;cursor:pointer;border-radius:0}
.join-form .pill-check input:checked + span{background:#ff00ab;color:#fff}
.join-form .pill-check input:focus-visible + span{outline:2px solid #ff00ab;outline-offset:2px}
.join-form select{width:100%;padding:11px 14px;border:1px solid #e0e0e0;background:#f4f4f4;font-family:inherit;font-size:14px}
.join-form select:focus{outline:none;border-color:#ff00ab;background:#fff}

/* ===========================================================================
   VISUAL REV — VT323 dot-matrix titles · less GIF · Y2K Spotify
   (the @import for these fonts is at the very top of this file.)
   =========================================================================== */

:root{
  --font-title:'Bitcount Single','Inter',sans-serif;
  --font-dot:'VT323','Menlo','Courier New',monospace;
}

/* All titles → VT323 dot-matrix in brand pink (batch 2 follow-up).
   List is exhaustive — every page-level title class lands here. VT323 is
   ~30% narrower than Inter at the same px, so we also bump size where the
   title was previously sized for chunkier fonts. */
.page-title,.post-title,.recap-title,.pname,.shop-title,
.label-red,.cm-label,
.title,                       /* about.html, recaps.html */
.ev-title,                    /* event.html */
.h-about,                     /* about.html big headline */
.about-wrap .title,
.about-wrap h3,
.services h2,                 /* about: "We can help with" */
.contact h2,                  /* about: "Get in touch" */
.contact-card h2,
.modal-box h2,
.modal-title{
  font-family:var(--font-dot)!important;
  color:var(--pink)!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:.04em!important;
  line-height:1!important;
}
/* VT323 renders small — bump sizes so titles feel like titles */
.label-red{font-size:34px!important}
.cm-label{font-size:32px!important}
.page-title{font-size:44px!important}
.post-title,.recap-title,.pname,.shop-title,.title{font-size:60px!important}
.h-about{font-size:96px!important}
.services h2,.contact h2,.contact-card h2,.modal-box h2,.modal-title{font-size:42px!important}
.ev-title{font-size:54px!important}
@media(max-width:680px){
  .label-red{font-size:28px!important}
  .page-title,.h-about{font-size:56px!important}
  .post-title,.recap-title,.pname,.shop-title,.title{font-size:44px!important}
  .ev-title{font-size:38px!important}
  .services h2,.contact h2{font-size:32px!important}
}

/* Dot-matrix display style for live music track + scrolling type +
   small display labels (TV, footer "work with us", etc.).
   All forced to brand --pink — overrides hardcoded var(--red), #555, #ec008c
   etc. in per-page inline <style> blocks. */
.cm-radio .cm-title,.cm-radio .cm-title small,
.radio .rtitle,.radio .rtitle small,
.panel-label,.carousel-label-mini,#c-label,
.recap-cell .cap,
.tv-label,                    /* "CHISMOSA TV" */
.work,                        /* footer "work with us!" */
.cm-marquee,.cm-marquee .row,
.marquee,.marquee .row{       /* homepage HEART marquee uses .marquee not .cm-marquee */
  font-family:var(--font-dot)!important;
  color:var(--pink)!important;
  letter-spacing:.04em;
}
.tv-label{font-size:38px!important;font-style:normal!important;text-shadow:2px 2px 0 #fff!important}
.work{font-size:30px!important}
/* Marquee hearts row pink (overrides #ec008c) */
.marquee .row,.cm-marquee .row{color:var(--pink)!important}
.cm-radio .cm-title{font-size:22px}
.cm-radio .cm-title small{font-size:14px;letter-spacing:.08em}

/* Stars.gif is now a real body background (see html/body rule lower in this
   file). The old body::before approach is killed there too. */

/* Faster marquee + recap auto-scroll (batch 2: "Faster scroll") */
.cm-marquee .row{animation-duration:14s!important}
.marquee .row{animation-duration:14s!important}
.recaps-track{animation-duration:14s!important}

/* Social icons visibility is now governed by the mobile-header block
   below (line ~234), which centers them on the same flex band as the logo. */

/* Y2K-bevel Spotify button */
.spotify-link{
  background:linear-gradient(180deg,#3eea7a 0%,#1db954 50%,#147a36 100%)!important;
  color:#fff!important;border:2px solid #000!important;border-radius:6px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18),3px 3px 0 #000!important;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  font-family:var(--ui)!important;
  transition:transform .08s,box-shadow .08s;
}
.spotify-link:hover{
  transform:translate(-1px,-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18),4px 4px 0 #000!important;
}
.spotify-link:active{transform:translate(2px,2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(0,0,0,.18),1px 1px 0 #000!important}

/* DVD bouncing cursor removed per batch 2 — keep desktop @ cursor only.
   On touch devices the @ cursor never appears (no mouse), force hidden so it
   never flashes on initial render. */
@media(hover:none) and (pointer:coarse){
  #cur,#custom-cursor,#dvd-cursor,.spark{display:none!important}
}

/* ============================================================================
   VISUAL REV BATCH 2
   - Solid yellow body bg (no gradient) on every page
   - Smaller mobile logo so hamburger fits on the same line
   - Hide footer sticker.gif on mobile
   - Y2K Join modal form (chunky borders + hard shadow + Bitcount headline)
   - Hard-shadow Shop-now CTA already lives in index.html, just normalize
   ========================================================================== */

/* Solid yellow background everywhere + stars.gif tiled ON TOP of the yellow.
   The previous body::before approach with z-index:-1 was being painted BEHIND
   the body's own background, so the stars were never visible. Now stars live
   as a real background-image on body itself — full opacity, always visible.
   Path is relative to chrome.css (which is in /assets/). */
html{background:var(--yellow,#ffe600)!important;background-image:none!important}
/* Stars.gif at ~60% opacity over solid yellow — layered as two background
   images: a 40% yellow scrim sits on top of the gif so the stars read at
   roughly 60% effective opacity without needing a pseudo-element. */
body{
  background-color:var(--yellow,#ffe600)!important;
  background-image:
    linear-gradient(rgba(255,230,0,.4), rgba(255,230,0,.4)),
    url("figma/stars.gif")!important;
  background-repeat:repeat,repeat!important;
  background-size:auto,180px auto!important;
  background-attachment:fixed,fixed!important;
}
/* Kill the old broken pseudo-element approach */
body::before{display:none!important}

/* Mobile/tablet header: ONE horizontal band where hamburger, logo, and
   social icons all sit on the same vertical centerline.
   Trick: make <body> the positioning context, force <nav> to position:static
   so it doesn't trap absolute children, then pin the hamburger and socials
   to top:0 + flex-align-center so they vertically center on the header band. */
@media(max-width:900px){
  body{position:relative}
  /* Header itself becomes a flex band — logo perfectly centered */
  header.site{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:8px 64px!important;
    min-height:72px;
    position:relative;
    text-align:center;
  }
  header.site a{display:flex;align-items:center}
  header.site .logo{
    max-width:min(220px,55vw)!important;
    max-height:56px!important;width:auto!important;
    image-rendering:pixelated;
    display:block;
  }
  /* Defeat the inline `nav{position:relative}` so absolute children look
     past nav and anchor against body instead. */
  nav#site-nav,nav{position:static!important}
  /* Hamburger: left edge of header band, vertically centered */
  nav#site-nav .nav-toggle,nav .nav-toggle{
    position:absolute!important;
    top:0!important;left:10px!important;
    height:72px!important;width:42px!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    gap:5px;background:none;border:none;
    transform:none!important;
    z-index:5;
  }
  /* Social icons: right edge of header band, vertically centered.
     Stays put even when the hamburger menu is open. */
  nav#site-nav .socials,nav .socials{
    position:absolute!important;
    top:0!important;right:14px!important;
    height:72px!important;width:auto!important;
    display:flex!important;align-items:center!important;
    gap:10px;margin:0!important;
    transform:none!important;
    z-index:5;
  }
  nav#site-nav.open .socials,nav.open .socials{
    position:absolute!important;top:0!important;right:14px!important;
    margin:0!important;justify-content:flex-end!important;
  }
}
@media(max-width:600px){
  header.site{padding:6px 56px!important;min-height:60px}
  header.site .logo{max-width:min(180px,52vw)!important;max-height:46px!important}
  nav#site-nav .nav-toggle,nav .nav-toggle{height:60px!important}
  nav#site-nav .socials,nav .socials{height:60px!important;gap:8px}
}
@media(max-width:480px){
  header.site{padding:4px 52px!important;min-height:54px}
  header.site .logo{max-height:40px!important}
  nav#site-nav .nav-toggle,nav .nav-toggle{height:54px!important;width:38px!important;left:8px!important}
  nav#site-nav .socials,nav .socials{height:54px!important;right:10px!important;gap:6px}
}

/* Hide footer sticker on mobile (per batch 2 "remove this gif" on mobile) */
@media(max-width:900px){
  footer .sticker,footer img[src*="sticker.gif"]{display:none!important}
}

/* Force social icons visible on EVERY breakpoint, even when nav is closed.
   This wins over both index.html's inline `nav .socials{display:none}` and
   chrome.css's own earlier rule. */
nav#site-nav .socials{display:flex!important;gap:12px;align-items:center}
@media(max-width:900px){
  nav#site-nav .socials,nav .socials{
    display:flex!important;width:auto!important;
    position:absolute!important;right:14px!important;top:-58px!important;margin:0!important;gap:10px;
  }
  /* When the hamburger panel is OPEN, let the socials sit inline with the links */
  nav#site-nav.open .socials,nav.open .socials{position:static!important;margin:6px auto!important;justify-content:center;top:auto!important;right:auto!important}
}
@media(max-width:480px){
  nav#site-nav .socials,nav .socials{right:10px!important;gap:7px}
  nav#site-nav .social-icon svg,nav .social-icon svg{width:18px!important;height:18px!important}
}

/* ---- JOIN MODAL: Y2K ---- */
.modal-overlay{background:rgba(0,0,0,.75)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.modal-box{
  background:#fff!important;
  border:4px solid #000!important;border-top:4px solid #000!important;border-radius:0!important;
  box-shadow:8px 8px 0 var(--pink)!important;
  padding:30px 26px 22px!important;
}
.modal-box h2,.modal-title{
  font-family:var(--font-title)!important;color:var(--pink)!important;
  font-size:34px!important;font-weight:400!important;font-style:normal!important;
  letter-spacing:.02em!important;line-height:1!important;margin-bottom:6px!important;
}
.modal-box p{font-size:13px;color:#444;line-height:1.55;margin-bottom:16px}
.modal-close{font-family:var(--ui)!important;color:#000!important;font-weight:900!important;font-size:18px!important}
.modal-close:hover{color:var(--pink)!important}

.join-form{display:flex;flex-direction:column;gap:10px}
.join-form input[type=text],
.join-form input[type=email],
.join-form input[type=tel],
.join-form select{
  padding:11px 13px!important;
  border:2px solid #000!important;border-radius:0!important;
  background:#fff!important;
  font-family:var(--ui)!important;font-size:14px!important;color:#111!important;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.06)!important;
}
.join-form input:focus,.join-form select:focus{
  outline:none!important;border-color:var(--pink)!important;
  box-shadow:inset 2px 2px 0 rgba(255,0,171,.12),3px 3px 0 var(--pink)!important;
}
.join-form .field-block{margin-top:6px}
.join-form .field-label{
  display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--pink);margin-bottom:6px;
  font-family:var(--ui);
}
.join-form .pill-grid{display:flex;flex-wrap:wrap;gap:6px}
.join-form .pill-check span{
  border:2px solid #000!important;background:#fff!important;color:#000!important;
  font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  padding:6px 10px;border-radius:0!important;box-shadow:2px 2px 0 #000;
  transition:transform .06s,box-shadow .06s;
}
.join-form .pill-check input:checked + span{background:var(--pink)!important;color:#fff!important;box-shadow:2px 2px 0 var(--pink)}
.join-form .pill-check:hover span{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #000}
.join-form .consent-row,.join-form .consent{
  display:flex;gap:9px;align-items:flex-start;
  padding:10px;background:var(--yellow);border:2px solid #000;
  font-size:11px;line-height:1.5;color:#222;
}
.join-form .consent-row input,.join-form .consent input{margin-top:2px;accent-color:var(--pink)}
.join-form .btn-submit{
  background:var(--pink)!important;color:#fff!important;
  border:3px solid #000!important;border-radius:0!important;
  padding:13px!important;font-weight:800!important;text-transform:uppercase!important;
  letter-spacing:.06em!important;font-family:var(--ui)!important;
  box-shadow:4px 4px 0 #000!important;
  transition:transform .08s,box-shadow .08s;
}
.join-form .btn-submit:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000!important}
.join-form .btn-submit:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000!important}
.form-success h2{font-family:var(--font-title);color:var(--pink);font-weight:400;font-style:normal}