/* TAN St. Canard is a licensed commercial font (tan-type.com) and can't be
     hosted here. This @font-face lets it load automatically if it's ever
     installed on the visitor's device or self-hosted later; Bungee is the
     stand-in in the meantime and matches the poster's chunky 70s look. */
  @font-face{
    font-family:'TAN St. Canard';
    src: local('TAN St. Canard'), local('TANStCanard'), local('TAN St Canard');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }

  :root{
    --black:#0d0d0d;
    --near-black:#161616;
    --cream:#ffffff;
    --cream-dark:#ffffff;
    --blue:#1591fb;
    --blue-deep:#0a5fb8;
    --white:#ffffff;
    --ink:#181410;
    --max:1120px;
    --radius:18px;
    --shadow: 0 14px 32px rgba(0,0,0,0.18);
    --border-w:76px;
    --display-font:'TAN St. Canard','Bungee', system-ui, sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; overflow-x:hidden;}
  body{
    margin:0;
    background:#ffffff;
    color:var(--ink);
    font-family:'Poppins', sans-serif;
    font-size:21px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    padding-left:var(--border-w);
    padding-right:var(--border-w);
    overflow-x:hidden;
    width:100%;
  }
  @media (max-width:700px){
    body{padding-left:0; padding-right:0; font-size:19px;}
  }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

  h1,h2,h3{
    font-family:var(--display-font);
    font-weight:400;
    line-height:1.15;
    margin:0 0 0.5em 0;
    letter-spacing:0.5px;
  }
  h2{font-size:clamp(2.4rem, 5vw, 3.4rem); color:var(--black);}
  h3{font-size:clamp(1.5rem, 3vw, 1.9rem);}
  p{margin:0 0 1.1em 0;}
  .lede{font-size:1.35rem; max-width:64ch;}

  .eyebrow{
    font-family:var(--display-font);
    color:var(--blue);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:1.1rem;
    display:inline-block;
    margin-bottom:0.9em;
  }
  .eyebrow-lg{
    font-size:clamp(1.6rem, 3.4vw, 2.3rem);
    letter-spacing:1.5px;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:var(--display-font);
    font-size:1.3rem;
    letter-spacing:0.5px;
    text-decoration:none;
    background:var(--blue);
    color:var(--white);
    padding:20px 36px;
    border-radius:999px;
    box-shadow:var(--shadow);
    border:3px solid var(--blue);
    transition:transform .18s ease, background .18s ease, color .18s ease;
    min-height:56px;
  }
  .btn:hover{background:var(--white); color:var(--blue); transform:translateY(-2px);}

  /* ---------- Vinyl record decorations ---------- */
  @keyframes spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
  .vinyl{
    width:56px; height:56px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    flex:0 0 auto;
    animation:spin 6s linear infinite;
  }
  .vinyl.white-label{background-image:url("assets/vinyl-white.png");}
  .vinyl.blue-label{background-image:url("assets/vinyl-blue.png");}
  .record-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    flex-wrap:nowrap;
    padding:18px 12px;
    max-width:100%;
  }
  /* discs shrink together to fit the row instead of wrapping to a second
     line on narrow screens */
  .record-row .vinyl{
    width:auto;
    flex:1 1 0;
    min-width:0;
    max-width:56px;
    aspect-ratio:1/1;
  }
  @media (max-width:480px){
    .record-row{gap:6px; padding:14px 8px;}
  }

  /* fixed rotating vinyl borders down each side of the whole site */
  .side-border{
    position:fixed;
    top:0; bottom:0;
    width:var(--border-w);
    background:var(--black);
    z-index:60;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-evenly;
    padding:14px 0;
    overflow:hidden;
  }
  .side-border.left{left:0;}
  .side-border.right{right:0;}
  .side-border .vinyl{width:46px; height:46px;}
  @media (max-width:700px){ .side-border{display:none;} }

  /* ---------- Top nav ---------- */
  .site-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(13,13,13,0.97);
    backdrop-filter:blur(6px);
    border-bottom:3px solid var(--blue);
  }
  .site-nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:14px; padding-bottom:14px;
    gap:20px;
  }
  .nav-logo img{height:44px; width:auto;}
  .nav-links{
    display:flex; gap:32px; list-style:none; margin:0; padding:0;
  }
  .nav-links a{
    color:var(--white);
    text-decoration:none;
    font-weight:600;
    font-size:1.1rem;
    padding:8px 4px;
    border-bottom:2px solid transparent;
  }
  .nav-links a:hover{border-color:var(--blue);}
  .nav-cta{
    font-family:var(--display-font);
    font-size:1.05rem;
    background:var(--blue);
    color:var(--white);
    padding:12px 22px;
    border-radius:999px;
    text-decoration:none;
    white-space:nowrap;
  }

  @media (max-width:820px){
    .nav-links{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    background:var(--black);
    color:var(--white);
    position:relative;
    overflow:hidden;
    text-align:center;
  }
  .hero-inner{
    position:relative;
    padding:60px 24px 20px;
    max-width:880px;
    margin:0 auto;
  }
  .hero-logo{
    max-width:560px;
    width:100%;
    margin:0 auto 18px;
  }
  .hero .sub{
    font-family:var(--display-font);
    color:var(--blue);
    font-size:clamp(1.3rem, 3vw, 1.9rem);
    margin-bottom:0.7em;
  }
  .hero p.tagline{
    font-size:1.4rem;
    color:var(--white);
    max-width:52ch;
    margin-left:auto;
    margin-right:auto;
  }
  .hero .next-event-label{
    margin-top:20px;
  }

  .facts{
    list-style:none;
    margin:20px 0 34px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    align-items:center;
  }
  .facts li{
    font-size:1.3rem;
    font-weight:600;
  }
  .facts b{
    font-family:var(--display-font);
    font-weight:400;
    color:var(--blue);
    margin-right:0.4em;
  }

  .hero-bottom-space{padding-bottom:50px;}

  /* ---------- Statement banner ---------- */
  .statement{
    background:var(--blue);
    color:var(--black);
    text-align:center;
    padding:56px 24px;
    overflow-x:hidden;
  }
  .statement h2{
    color:var(--black);
    /* font-size is derived from the space actually left over after the
       fixed-width side borders and section padding are subtracted, so the
       line always fits in one row instead of being clipped by overflow. */
    font-size:clamp(0.8rem, calc((100vw - 200px) / 30), 2.8rem);
    margin:0;
    line-height:1.45;
    white-space:nowrap;
  }
  .statement .line2{white-space:nowrap;}
  .statement .diamond{color:var(--white); margin:0 0.5em; font-size:0.8em;}
  @media (max-width:700px){
    /* "Just dance dance dance" drops to its own centred line, and each
       line gets its own fitted size so neither runs off the screen */
    .statement h2{
      white-space:normal;
      font-size:clamp(1.1rem, calc((100vw - 48px) / 15), 2.4rem);
    }
    .statement .line2{
      display:block;
      margin-top:0.35em;
    }
  }

  /* ---------- About / vibe section ---------- */
  .about{
    padding:80px 24px;
    background-color:#ffffff;
  }
  .about .grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:52px;
    align-items:center;
  }
  /* grid items default to a min-width based on their content, which lets a
     wide child (e.g. a nowrap heading) force the whole grid — and the page
     — wider than the viewport. min-width:0 lets them shrink properly. */
  .about .grid > div{min-width:0;}
  @media (max-width:860px){
    .about .grid{grid-template-columns:1fr;}
  }
  .about-logo-mark{
    width:min(460px, 100%);
    height:auto;
    margin-bottom:24px;
  }
  .about-card{
    background-color:#ffffff;
    /* a repeating triple wavy-line tile with matching, mathematically
       consistent corner arcs (verified against wide, tall and square
       boxes) used as a border-image. Because the border thickness is a
       fixed pixel value rather than a stretched image, the gap to the
       text stays identical on every side regardless of the card's shape. */
    border-style:solid;
    border-width:50px;
    border-image-source:url("assets/wavy-border.svg");
    border-image-slice:50;
    border-image-repeat:round;
    padding:36px 32px;
  }
  .about-card h3{
    margin-bottom:14px;
    color:var(--blue-deep);
    white-space:nowrap;
    font-size:clamp(0.95rem, 6vw, 1.9rem);
  }
  .about-card ul{margin:0; padding-left:1.3em;}
  .about-card li{margin-bottom:0.7em; font-size:1.2rem;}
  @media (max-width:700px){
    /* the wavy line frame needs real width to read properly; on phones it
       gets swapped for a plain, simple border instead */
    .about-card{
      border-style:solid;
      border-width:3px;
      border-color:var(--black);
      border-image:none;
      padding:26px 22px;
      border-radius:var(--radius);
    }
  }

  /* ---------- Tickets ---------- */
  .tickets{
    background:var(--black);
    color:var(--white);
    padding:82px 24px 28px;
    text-align:center;
  }
  .tickets h2{color:var(--white);}
  .tickets .lede{margin:0 auto 8px; text-align:center;}
  .ticket-box{
    background:var(--white);
    color:var(--ink);
    max-width:560px;
    width:100%;
    margin:32px auto 0;
    border-radius:var(--radius);
    padding:32px 28px;
    box-shadow:var(--shadow);
    border:3px solid var(--blue);
    text-align:left;
    overflow:hidden;
  }
  .ticket-box .tt-widget{min-height:60px; max-width:100%;}
  /* the Ticket Tailor embed can otherwise render its button/iframe at a
     fixed width wider than a narrow phone screen */
  .ticket-box .tt-widget,
  .ticket-box .tt-widget *{max-width:100% !important; box-sizing:border-box;}
  .ticket-box iframe{width:100% !important;}
  @media (max-width:700px){
    /* strip back every layer of side padding around the widget so it gets
       as close to the full screen width as possible, since Ticket Tailor's
       own embed needs real room to lay itself out without clipping */
    .tickets{padding:60px 6px 24px;}
    .tickets .wrap{padding:0 4px;}
    .ticket-box{
      max-width:100%;
      padding:16px 8px;
      border-width:2px;
      border-radius:12px;
    }
  }
  .policy-note{
    max-width:560px;
    margin:30px auto 0;
    font-size:1.15rem;
    color:var(--white);
  }

  /* ---------- Footer ---------- */
  footer{
    background:var(--black);
    color:var(--white);
    padding:28px 24px 34px;
    text-align:center;
  }
  footer .footer-logo{height:60px; width:auto; margin:0 auto;}
  footer .footer-link{
    display:inline-block;
    margin-top:18px;
    color:var(--blue);
    font-weight:600;
    font-size:1.1rem;
    text-decoration:none;
    border-bottom:2px solid var(--blue);
  }

  /* ---------- Mailing list popup ---------- */
  .mailing-backdrop{
    position:fixed; inset:0;
    background:rgba(10,10,10,0.78);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    z-index:100;
  }
  .mailing-backdrop[hidden]{display:none;}
  .mailing-modal{
    position:relative;
    background:var(--cream);
    color:var(--ink);
    max-width:460px;
    width:100%;
    border-radius:var(--radius);
    border:3px solid var(--blue);
    box-shadow:var(--shadow);
    padding:40px 32px 32px;
  }
  .mailing-modal h3{color:var(--blue-deep); margin-bottom:0.4em;}
  .mailing-modal p{font-size:1.1rem;}
  .mailing-close{
    position:absolute; top:14px; right:14px;
    width:40px; height:40px;
    border-radius:50%;
    border:2px solid var(--black);
    background:var(--white);
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
  }
  .mailing-form{display:flex; flex-direction:column; gap:14px; margin-top:14px;}
  .mailing-form label{font-weight:600; font-size:1.05rem; margin-bottom:4px; display:block;}
  .mailing-form input{
    width:100%;
    font-family:'Poppins', sans-serif;
    font-size:1.1rem;
    padding:12px 14px;
    border-radius:10px;
    border:2px solid var(--black);
    background:var(--white);
    color:var(--ink);
  }
  .mailing-form input:focus{outline:3px solid var(--blue); outline-offset:1px;}
  .mailing-form .btn{
    justify-content:center;
    margin-top:6px;
    font-size:1.1rem;
    padding:16px 24px;
  }
  .mailing-success{font-size:1.15rem; font-weight:600; color:var(--blue-deep);}

  section{scroll-margin-top:76px;}
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }