@import "tokens.css";
  
  /* =========================
     Base / Elements
     ========================= */
  * { box-sizing: border-box; }
  
  body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
  }
  
  marquee { margin: 0; padding: 0; }
  
  button {
    padding: var(--space-3) var(--space-5); /* 12px 24px */
    border: var(--border-1) solid var(--color-border);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl); /* 32px */
    line-height: 2.75rem;       /* ~44px */
    color: var(--color-text);
    background: none;
    cursor: pointer;
    transition: border-radius var(--dur-slow) var(--easing-standard);
    border-radius: var(--radius-0);
  }
  
  button:hover { border-radius: 100%; }
  
  /* Focus visibility */
  :where(a, button):focus-visible {
    outline: var(--border-2) solid var(--color-accent);
    outline-offset: 2px;
  }
  
  /* =========================
     Type styles
     ========================= */
  .paragraph {
    font-style: normal;
    font-weight: var(--font-weight-regular);
    font-size: var(--text-xl);     /* 24px */
    line-height: calc(var(--text-xl) * 1.2); /* ~29px */
    letter-spacing: var(--tracking-tight);
    color: var(--color-accent);
  }
  
  .logo {
    font-size: var(--text-4xl);   /* 56px */
    line-height: 4rem;            /* 64px */
    letter-spacing: var(--tracking-title);
    margin-bottom: var(--space-4);/* 16px */
  }
  
  /* =========================
     Layout sections
     ========================= */


  .hero__section {
    height: 60vh;
    background: var(--color-bg-900);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: var(--space-9) var(--space-4) var(--space-10); /* 80px 16px 96px */
    align-items: center;
    color: var(--color-accent);
  }
  
  .home__section {
    background: var(--color-bg-900);
    display: grid;
    gap: var(--space-6); /* 32px */
    margin: 0;
    padding: var(--space-9) var(--container-px) var(--space-10);
    color: var(--color-accent);
    align-items: start;
  }
  
  .links__section {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin: 0;
    padding: var(--space-6) var(--container-px) var(--space-9);
    align-items: center;
    background-color: var(--color-accent);
    color: var(--color-on-accent);
  }
  
  .links__section a { color: var(--color-on-accent); }
  
  .home__music a {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
    padding: var(--space-6) var(--space-7); /* 32px 48px */
    text-decoration: none;
  }
  
  .home__music h3 {
    color: var(--color-on-accent);
    background-color: var(--color-accent);
  }
  
  /* =========================
     Components
     ========================= */
  .marquee__1 {
    background-color: var(--color-accent);
    color: var(--color-on-accent);
  }
  .marquee__2 {
    background-color: var(--color-bg-900);
    color: var(--color-accent);
  }
  
  .navbar {
    display: flex;
    flex-direction: row;
    width: 17.5rem; /* 280px */
    justify-content: space-evenly;
    z-index: var(--z-nav);
  }
  
  .navbar__item { margin-right: var(--space-6); } /* 32px */
  
  .hero__logo { color: var(--color-accent); }
  
  .dates { display: flex; flex-direction: column; }
  
  .date {
    margin-bottom: var(--space-7); /* 48px */
    border-top: var(--border-2) solid var(--color-accent);
  }
  
  .date__link { color: var(--color-accent); }
  
  .music__button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }
  
  .content {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-10);
  }
  .content a {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl); /* 32px */
    line-height: 2.75rem;       /* ~44px */
    color: var(--color-text);
    transition: transform var(--dur-normal) var(--easing-standard);
    transform: translateX(0);
  }
  
  .listen a {
    font-style: normal;
    font-weight: var(--font-weight-bold);
    font-size: var(--text-2xl);
    line-height: 2.75rem;
    color: var(--color-text);
  }
  
  .next_shows, .listen, .merch_info {
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }
  
  .next_shows button { margin-top: var(--space-2); } /* 8px */
  
  .next_shows, .item {
    margin-bottom: var(--space-5);       /* 24px */
    border-top: var(--border-1) solid var(--color-border);
    padding-top: var(--space-2_5);       /* 10px */
  }


  .item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .item img {
    width: 100%;
    margin-bottom: var(--space-4); /* 16px */
  }
  
  .image img { width: 100%; }
  
  .footer_logo { width: 100%; }
  
  .listen {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1.25rem; /* 20px; off-scale by design */
  }
  
  .listen h1 {
    text-decoration: underline;
    padding-bottom: var(--space-4); /* 16px */
  }
  
  .info {
    margin-bottom: var(--space-7); /* 48px */
    border-top: var(--border-1) solid var(--color-border);
    padding-top: var(--space-2_5); /* 10px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .info__link a {
    transition: transform var(--dur-normal) var(--easing-standard);
    transform: translateX(0);
  }
  
  .info__link a:hover { transform: translateX(var(--space-2)); } /* 8px */
  
  
  
  .menu {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--space-4);
  }

  .video.desktop {
    display: visible;
  }
  .video.mobile {
    display: none;
  }
  
  /* =========================
     Media queries
     (Note: CSS custom props can’t be used in MQ conditions)
     ========================= */
  @media (min-width: 320px) {
    .home__section { grid-template-columns: 1fr; }
  
    .main {
      grid-template-columns: 1fr;
    }
  
    .content a,
    .listen a,
    button {
      font-size: var(--text-basis);  /* 24px */
      line-height: 2.25rem;       /* ~36px */
      padding: var(--space-1) var(--space-2);
    }
  
    .logo {
      font-size: 2.5rem;         
      line-height: 4rem;
      text-align: center;       
    }
  
    .listen { flex-direction: column; }
    .content { padding-top: var(--space-2); }

    .menu {
      gap: var(--space-2);
      justify-content: center;
    }

    .video.desktop {
      display: none;
    }
    .video.mobile {
      display: flex;
    }

    

  }
  
  @media (min-width: 782px) {
    .home__section { grid-template-columns: 1fr 1fr; }
    .main { grid-template-columns: 1fr 1fr; }
  
    .content a,
    .listen a,
    button {
      font-size: var(--text-2xl); /* 32px */
      line-height: 2.75rem;       /* ~44px */
    }
  
    .logo {
      font-size: var(--text-4xl); /* 56px */
      line-height: 4rem;
      text-align: left;
    }
  
    .listen { flex-direction: row; }
    .content { padding-top: var(--space-6); } /* 24px -> on-scale */

    .menu {
      justify-content: flex-end;
    }

    .video.desktop {
      display: flex;
    }
    .video.mobile {
      display: none;
    }

    

    
  }
  
  /* =========================
     Reduced motion (nice to have)
     ========================= */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }