*,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  :root {
      --bg: #0d0d0d;
      --fg: #f0ece4;
      --accent: #ff3d2e;
      --muted: rgba(240, 236, 228, 0.38);
      --nav-h: 72px;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      background: var(--bg);
      color: var(--fg);
      font-family: 'DM Sans', sans-serif;
      min-height: 300vh;
      cursor: none;
      overflow-x: hidden;
  }

  .cursor {
      position: fixed;
      width: 10px;
      height: 10px;
      background: var(--accent);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      mix-blend-mode: difference;
  }

  .cursor-ring {
      position: fixed;
      width: 36px;
      height: 36px;
      border: 1px solid rgba(240, 236, 228, 0.5);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      transition: width 0.3s, height 0.3s, opacity 0.3s;
  }

  body:has(a:hover) .cursor-ring,
  body:has(button:hover) .cursor-ring {
      width: 56px;
      height: 56px;
      opacity: 0.5;
  }

  @media (hover: none) {

      .cursor,
      .cursor-ring {
          display: none;
      }

      body {
          cursor: auto;
      }
  }

  nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      padding: 0 clamp(1.5rem, 5vw, 4rem);
      background: rgba(13, 13, 13, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      transition: background 0.5s, backdrop-filter 0.5s;
  }

  nav.scrolled {
      background: rgba(13, 13, 13, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
  }

  nav::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 2px;
      width: var(--scroll-pct, 0%);
      background: var(--accent);
      transition: width 0.1s linear;
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      flex-shrink: 0;
  }

  .logo-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.7rem;
      color: var(--fg);
      letter-spacing: 0.06em;
      line-height: 1;
  }

  .logo-dot {
      width: 7px;
      height: 7px;
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
      transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1);
  }

  .logo:hover .logo-dot {
      transform: scale(2.2);
  }

  .spacer {
      flex: 1;
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 0.15rem;
      list-style: none;
  }

  .nav-links li a {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.45rem 0.9rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      border-radius: 2px;
      transition: color 0.2s;
      overflow: hidden;
  }

  .nav-links li a .link-num {
      font-size: 0.55rem;
      opacity: 0.5;
      transition: opacity 0.2s, color 0.2s;
  }

  .nav-links li a::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(240, 236, 228, 0.05);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
  }

  .nav-links li a:hover {
      color: var(--fg);
  }

  .nav-links li a:hover::before {
      transform: scaleX(1);
  }

  .nav-links li a:hover .link-num {
      opacity: 1;
  }

  .nav-links li a.active {
      color: var(--fg);
  }

  .nav-links li a.active .link-num {
      color: var(--accent);
      opacity: 1;
  }

  .nav-cta {
      margin-left: 1.5rem;
      position: relative;
      padding: 0.55rem 1.5rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--bg);
      background: var(--fg);
      border: none;
      border-radius: 2px;
      cursor: none;
      overflow: hidden;
      transition: color 0.35s;
      flex-shrink: 0;
  }

  .nav-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: translateX(-101%);
      transition: transform 0.35s cubic-bezier(.25, .8, .25, 1);
  }

  .nav-cta:hover {
      color: var(--fg);
  }

  .nav-cta:hover::before {
      transform: translateX(0);
  }

  .nav-cta span {
      position: relative;
      z-index: 1;
  }

  .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      width: 40px;
      height: 40px;
      background: none;
      border: 1px solid rgba(240, 236, 228, 0.15);
      border-radius: 2px;
      cursor: none;
      padding: 0 10px;
      margin-left: 1rem;
      position: relative;
      z-index: 1100;
  }

  .hamburger .bar {
      width: 100%;
      height: 1.5px;
      background: var(--fg);
      display: block;
      transform-origin: center;
      transition: transform 0.4s cubic-bezier(.23, 1, .32, 1), opacity 0.25s;
      margin: 4px 0;
  }

  .hamburger.open .bar:nth-child(1) {
      transform: translateY(5.5px) rotate(45deg);
  }

  .hamburger.open .bar:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
  }

  .hamburger.open .bar:nth-child(3) {
      transform: translateY(-5.5px) rotate(-45deg);
  }

  .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 1040;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s;
      backdrop-filter: blur(4px);
  }

  .overlay.show {
      opacity: 1;
      pointer-events: auto;
  }

  .mobile-menu {
      position: fixed;
      top: 0;
      right: 0;
      width: min(420px, 100vw);
      height: 100dvh;
      background: #111;
      z-index: 1050;
      display: flex;
      flex-direction: column;
      padding: calc(var(--nav-h) + 2.5rem) 2.5rem 2.5rem;
      transform: translateX(100%);
      transition: transform 0.55s cubic-bezier(.86, 0, .07, 1);
      border-left: 1px solid rgba(240, 236, 228, 0.06);
  }

  .mobile-menu.open {
      transform: translateX(0);
  }

  .mobile-close-bar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      padding: 0 2.5rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.62rem;
      color: var(--muted);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(240, 236, 228, 0.07);
      justify-content: space-between;
  }

  .close-x {
      font-size: 1.3rem;
      cursor: none;
      color: var(--muted);
      transition: color 0.2s;
      background: none;
      border: none;
      line-height: 1;
      padding: 0;
  }

  .close-x:hover {
      color: var(--fg);
  }

  .mobile-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      flex: 1;
  }

  .mobile-links li {
      border-bottom: 1px solid rgba(240, 236, 228, 0.07);
      overflow: hidden;
  }

  .mobile-links li a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.2rem 0;
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2rem, 7vw, 2.8rem);
      letter-spacing: 0.05em;
      color: var(--fg);
      text-decoration: none;
      opacity: 0.3;
      transition: opacity 0.2s, padding-left 0.3s cubic-bezier(.25, .8, .25, 1), transform 0.5s cubic-bezier(.86, 0, .07, 1);
      transform: translateY(110%);
  }

  .mobile-menu.open .mobile-links li:nth-child(1) a {
      transform: translateY(0);
      transition-delay: 0.07s;
  }

  .mobile-menu.open .mobile-links li:nth-child(2) a {
      transform: translateY(0);
      transition-delay: 0.13s;
  }

  .mobile-menu.open .mobile-links li:nth-child(3) a {
      transform: translateY(0);
      transition-delay: 0.19s;
  }

  .mobile-menu.open .mobile-links li:nth-child(4) a {
      transform: translateY(0);
      transition-delay: 0.25s;
  }

  .mobile-menu.open .mobile-links li:nth-child(5) a {
      transform: translateY(0);
      transition-delay: 0.31s;
  }

  .mobile-links li a:hover {
      opacity: 1;
      padding-left: 0.5rem;
  }

  .mobile-links li a .arrow {
      font-size: 1rem;
      opacity: 0;
      transition: opacity 0.2s, transform 0.3s;
      font-family: 'DM Sans', sans-serif;
      transform: translateX(-8px);
  }

  .mobile-links li a:hover .arrow {
      opacity: 1;
      transform: translateX(0);
  }

  .mobile-bottom {
      padding-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      transform: translateY(20px);
      opacity: 0;
      transition: transform 0.4s 0.37s, opacity 0.4s 0.37s;
  }

  .mobile-menu.open .mobile-bottom {
      transform: translateY(0);
      opacity: 1;
  }

  .mobile-cta {
      width: 100%;
      padding: 1rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--bg);
      background: var(--fg);
      border: none;
      border-radius: 2px;
      cursor: none;
      position: relative;
      overflow: hidden;
      transition: color 0.35s;
  }

  .mobile-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: translateX(-101%);
      transition: transform 0.35s cubic-bezier(.25, .8, .25, 1);
  }

  .mobile-cta:hover {
      color: var(--fg);
  }

  .mobile-cta:hover::before {
      transform: translateX(0);
  }

  .mobile-cta span {
      position: relative;
      z-index: 1;
  }

  .mobile-social {
      display: flex;
      gap: 1.2rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      color: var(--muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
  }

  .mobile-social a {
      color: inherit;
      text-decoration: none;
      transition: color 0.2s;
  }

  .mobile-social a:hover {
      color: var(--fg);
  }

  @media (max-width: 768px) {

      .nav-links,
      .nav-cta {
          display: none;
      }

      .hamburger {
          display: flex;
      }
  }

  @media (min-width: 769px) {

      .mobile-menu,
      .overlay {
          display: none !important;
      }
  }







  /* hero */
  /* hero */
  /* ── HERO ── */
  .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      /* keep content on right without full-width wrapper */
  }

  /* full-screen video */
  .hero-video-wrap {
      position: absolute;
      inset: 0;
      z-index: 0;
  }

  .hero-video-wrap video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      opacity: 0;
      transition: opacity 1.2s ease;
  }

  .hero-video-wrap video.loaded {
      opacity: 1;
  }

  /* layered overlay: darkens video so text pops */
  .hero-video-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
        background:
            linear-gradient(10deg,
                rgba(13, 13, 13, 0.25) 0%,
                rgba(13, 13, 13, 0.1) 30%,
                rgba(13, 13, 13, 0.55) 60%,
                rgba(13, 13, 13, 0.88) 100%),
            linear-gradient(120deg,
                rgba(13, 13, 13, 0.4) 0%,
                transparent 25%,
                transparent 75%,
                rgba(13, 13, 13, 0.5) 100%);
      z-index: 1;
  }

  /* placeholder while no video */
  .video-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      background: #0d0d0d;
      z-index: 0;
  }

  .video-placeholder .ph-icon {
      width: 64px;
      height: 64px;
      border: 1px solid rgba(240, 236, 228, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .video-placeholder .ph-icon svg {
      opacity: 0.2;
  }

  .video-placeholder p {
      font-family: 'DM Mono', monospace;
      font-size: 0.6rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(240, 236, 228, 0.18);
  }

  /* text sits above everything, aligned to the right */
  .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
      padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(2rem, 6vh, 4rem);
      background: rgb(0, 0, 0);
      border-radius: 4px;
      margin-right: 40px;
      margin-bottom: 40px;
      max-width: 90%;
      padding: 20px;
  }

  .hero-sub {
      flex-direction: row-reverse;
  }

  .hero-sub p {
      text-align: right;
  }

  .hero-label {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.2rem;
      opacity: 0;
      animation: fadeUp 0.6s ease forwards 0.3s;
  }

  .hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2rem, 8vw, 8rem);
      line-height: 0.88;
      color: var(--fg);
      opacity: 0;
      animation: fadeUp 0.7s ease forwards 0.5s;
  }

  .hero-title .line2 {
      -webkit-text-stroke: 1px rgba(240, 236, 228, 0.35);
      color: transparent;
  }

  .hero-sub {
      margin-top: 2rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      opacity: 0;
      animation: fadeUp 0.7s ease forwards 0.75s;
  }

  .hero-sub p {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(1.4rem, 3vw, 2.8rem);
      font-weight: 400;
      color: #f0ece4;
      letter-spacing: 0.1em;
      line-height: 1;
  }

  .hero-line {
      width: 40px;
      height: 1px;
      background: var(--accent);
      flex-shrink: 0;
  }

  @keyframes fadeUp {
      from {
          opacity: 0;
          transform: translateY(28px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @media (max-width: 768px) {
      .hero {
          height: 100svh;
          align-items: flex-end;
      }

      .hero-video-wrap::after {
          background: linear-gradient(to top,
                  rgba(13, 13, 13, 0.95) 0%,
                  rgba(13, 13, 13, 0.5) 40%,
                  rgba(13, 13, 13, 0.2) 70%,
                  rgba(13, 13, 13, 0.4) 100%);
      }

      .hero-title {
          font-size: clamp(4.5rem, 20vw, 9rem);
      }
  }

  .section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'DM Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      color: rgba(240, 236, 228, 0.12);
      text-transform: uppercase;
      border-top: 1px solid rgba(240, 236, 228, 0.05);
  }

  /* hero */





  /* ── STORY SECTION ── */
  .story {
      position: relative;
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      overflow: hidden;
      border-top: 1px solid rgba(240, 236, 228, 0.05);
      background:
          radial-gradient(ellipse 80% 60% at 20% 50%, rgba(255, 61, 46, 0.07) 0%, transparent 60%),
          radial-gradient(ellipse 60% 80% at 80% 20%, rgba(240, 236, 228, 0.05) 0%, transparent 50%),
          linear-gradient(145deg, #2a1f18 0%, #1a1614 40%, #1c1a10 70%, #141418 100%);
  }

  /* grain overlay */
  .story::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.55;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-repeat: repeat;
      background-size: 180px 180px;
      mix-blend-mode: overlay;
  }

  .story-content,
  .story-image-wrap {
      position: relative;
      z-index: 1;
  }

  /* left: text */
  .story-content {
      padding: clamp(4rem, 10vw, 8rem) clamp(2rem, 6vw, 5rem) clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 4rem);
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
  }

  .story-eyebrow {
      display: flex;
      align-items: center;
      gap: 1rem;
  }

  .story-eyebrow-line {
      width: 32px;
      height: 1px;
      background: var(--accent);
      flex-shrink: 0;
  }

  .story-eyebrow span {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
  }

  .story-heading {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3.5rem, 6vw, 7rem);
      line-height: 0.9;
      color: var(--fg);
  }

  .story-heading .outline {
      -webkit-text-stroke: 1px rgba(240, 236, 228, 0.25);
      color: transparent;
  }

  .story-body {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
  }

  .story-body p {
      font-family: 'DM Sans', sans-serif;
      font-size: clamp(0.9rem, 1.2vw, 1.05rem);
      font-weight: 300;
      line-height: 1.9;
      color: rgba(240, 236, 228, 0.62);
  }

  .story-body p strong {
      color: var(--fg);
      font-weight: 500;
  }

  .story-body .story-quote {
      border-left: 2px solid var(--accent);
      padding-left: 1.2rem;
      font-style: italic;
      color: rgba(240, 236, 228, 0.45);
      font-size: 0.9rem;
  }

  /* right: small image box */
  .story-image-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(2rem, 5vw, 4rem);
  }

  .story-image-box {
      width: 420px;
      height: 420px;
      flex-shrink: 0;
      overflow: hidden;
      border: 1px solid rgba(240, 236, 228, 0.08);
  }

  .story-image-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
  }

  @media (max-width: 768px) {
      .story {
          grid-template-columns: 1fr;
      }

      .story-content {
          padding: 4rem 1.5rem 2rem;
          gap: 1.8rem;
      }

      .story-image-wrap {
          padding: 0 1.5rem 4rem;
          justify-content: flex-start;
      }

      .story-image-box {
          width: 100%;
          height: 72vw;
      }

      .story-heading {
          font-size: clamp(3rem, 14vw, 5rem);
      }
  }

    .story-image-wrap {
      overflow: visible;
  }

  .story {
      overflow: visible;
  }

  .autoShowImage {
      animation: autoShowAnimation both;
      animation-timeline: view(60% 20%);
  }

  @keyframes autoShowAnimation {
      from {
          opacity: 0;
          transform: translateX(200px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }


  .autoShowContent {
      animation: autoShowContentAnimation both;
      animation-timeline: view(60% 40%);
  }

  @keyframes autoShowContentAnimation {
      from {
          opacity: 0;
          transform: translateY(200px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @media (max-width: 768px) {
      .autoShowImage {
          animation: autoShowContentAnimationMobile both;
          animation-timeline: view(60% 10%);
      }

      .autoShowContent {
          animation: autoShowContentAnimationMobile both;
          animation-timeline: view(60% 10%);
      }

      @keyframes autoShowContentAnimationMobile {
          from {
              opacity: 0;
              transform: translateY(100px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
  }



  /* -----MERCH-------- */
  /* ── MERCH SECTION ── */
  .merch {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 600px;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-top: 1px solid rgba(240, 236, 228, 0.05);
  }

  .merch-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      z-index: 0;
  }

  .merch-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
          linear-gradient(90deg,
              rgba(13, 13, 13, 0.25) 0%,
              rgba(13, 13, 13, 0.1) 30%,
              rgba(13, 13, 13, 0.55) 60%,
              rgba(13, 13, 13, 0.88) 100%),
          linear-gradient(180deg,
              rgba(13, 13, 13, 0.4) 0%,
              transparent 25%,
              transparent 75%,
              rgba(13, 13, 13, 0.5) 100%);
  }

  .merch-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 clamp(2rem, 8vw, 8rem) 0 0;
      width: 50%;
  }

  .merch-eyebrow {
      font-family: 'DM Mono', monospace;
      font-size: 0.68rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1rem;
  }

  .merch-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(6rem, 14vw, 16rem);
      line-height: 0.88;
      color: var(--fg);
      letter-spacing: 0.02em;
  }

  .merch-btn {
      margin-top: 2.5rem;
      position: relative;
      display: inline-block;
      padding: 0.9rem 2.5rem;
      font-family: 'DM Mono', monospace;
      font-size: 0.72rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--bg);
      background: var(--fg);
      text-decoration: none;
      border-radius: 2px;
      overflow: hidden;
      transition: color 0.35s;
  }

  .merch-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: translateX(-101%);
      transition: transform 0.35s cubic-bezier(.25, .8, .25, 1);
  }

  .merch-btn:hover {
      color: var(--fg);
  }

  .merch-btn:hover::before {
      transform: translateX(0);
  }

  .merch-btn span {
      position: relative;
      z-index: 1;
  }

  @media (max-width: 768px) {
      .merch {
          height: 100svh;
          justify-content: center;
      }

      .merch-overlay {
          background:
              linear-gradient(180deg,
                  rgba(13, 13, 13, 0.4) 0%,
                  rgba(13, 13, 13, 0.2) 30%,
                  rgba(13, 13, 13, 0.65) 70%,
                  rgba(13, 13, 13, 0.9) 100%);
      }

      .merch-content {
          width: 100%;
          align-items: center;
          text-align: center;
          padding: 0 1.5rem;
          justify-content: center;
          padding-bottom: clamp(3rem, 10vh, 6rem);
          height: 100%;
      }

      .merch-bg {
          object-fit: cover;
          object-position: right center;
      }

      .merch-title {
          font-size: clamp(5rem, 22vw, 9rem);
      }
  }


  .autoShowContentMerch {
      animation: autoShowContentMerchAnimation both;
      animation-timeline: view(60% 20%);
  }

  @keyframes autoShowContentMerchAnimation {
      from {
          opacity: 0;
          transform: translateX(-200px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @media (max-width: 768px) {
      .autoShowContentMerch {
          animation: autoShowContentMerchAnimationMobile both;
          animation-timeline: view(60% 10%);
      }

      @keyframes autoShowContentMerchAnimationMobile {
          from {
              opacity: 0;
              transform: translateY(100px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
  }

  /* -----MERCH-------- */






  /* -----Latest RELEASE-------- */
/* ── LATEST RELEASE ── */
.release {
  position: relative;
  background:
  radial-gradient(ellipse 60% 60% at 75% 40%, rgba(255,61,46,0.18) 0%, transparent 55%),
  radial-gradient(ellipse 40% 40% at 20% 70%, rgba(255,61,46,0.08) 0%, transparent 50%),
  linear-gradient(145deg, #2a1a14 0%, #1c1410 50%, #181510 100%);
  border-top: 1px solid rgba(240,236,228,0.05);
  overflow: hidden;
}

.release::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

.release-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
}

.release-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.release-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.release-eyebrow-line {
  width: 32px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.release-eyebrow span {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.release-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 8vw, 9rem);
  line-height: 0.88;
  color: var(--fg);
}
.release-outline {
  -webkit-text-stroke: 1px rgba(240,236,228,0.25);
  color: transparent;
}

.release-body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* 16:9 responsive iframe */
.release-video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid rgba(240,236,228,0.07);
}
.release-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.release-meta {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  overflow: visible;
}

.release-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.release-song-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 5vw, 5.5rem);
  line-height: 0.9;
  color: var(--fg);
  letter-spacing: 0.03em;
}

.release-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(240,236,228,0.55);
}

.release-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.release-btn-primary {
  position: relative;
  display: inline-block;
  padding: 0.75rem 2rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  text-decoration: none;
  border-radius: 2px;
  overflow: hidden;
  transition: color 0.35s;
  flex-shrink: 0;
}
.release-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
}
.release-btn-primary:hover { color: var(--fg); }
.release-btn-primary:hover::before { transform: translateX(0); }
.release-btn-primary span { position: relative; z-index: 1; }

.release-btn-ghost {
  display: inline-block;
  padding: 0.75rem 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.release-btn-ghost:hover { color: var(--fg); }
.release-btn-ghost span { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .release-body {
    grid-template-columns: 1fr;
  }
  .release-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .release-meta { gap: 1rem; }
  .release-song-title { font-size: clamp(2.5rem, 12vw, 4rem); }
}

.release-body {
  overflow: visible;
}

.release {
  overflow: visible;
}

.release-inner {
  overflow: visible;
}

  .autoShowContentLatest {
      animation: autoShowContentLatestAnimation both;
      animation-timeline: view(60% 20%);
  }

  @keyframes autoShowContentLatestAnimation {
      from {
          opacity: 0;
          transform: translateY(200px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  @media (max-width: 768px) {
      .autoShowContentLatest {
          animation: autoShowContentMerchAnimationMobile both;
          animation-timeline: view(60% 10%);
      }

      @keyframes autoShowContentLatestAnimationMobile {
          from {
              opacity: 0;
              transform: translateY(100px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
  }
  /* -----Latest RELEASE-------- */




  /* -------- TOUR DATES -------- */
/* ── TOUR SECTION ── */
.tour {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(240,236,228,0.05);
  overflow: visible;
  background: linear-gradient(135deg, #0f0d0a 0%, #0d0d0d 50%, #0a0d0f 100%);
}

/* grain */
.tour::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* watermark wrapper — only this clips */
.tour-watermark-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.tour-watermark {
  position: absolute;
  right: -0.04em;
  bottom: -0.1em;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(12rem, 25vw, 26rem);
  line-height: 1;
  -webkit-text-stroke: 1px rgba(240,236,228,0.045);
  color: transparent;
  user-select: none;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* artist image — only this clips */
.tour-bg-wrap {
  position: absolute;
  top: 0; right: 0;
  width: 42%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.tour-artist-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(25%) brightness(0.85);
}
.tour-img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      #0d0d0d 0%,
      rgba(13,13,13,0.9) 25%,
      rgba(13,13,13,0.35) 60%,
      rgba(13,13,13,0.1) 100%
    ),
    linear-gradient(180deg,
      rgba(13,13,13,0.7) 0%,
      transparent 20%,
      transparent 75%,
      rgba(13,13,13,0.85) 100%
    );
}


/* main layout */
.tour-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  padding: clamp(6rem, 10vw, 10rem) clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

/* sticky left header */
.tour-header {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.tour-eyebrow {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tour-eyebrow-line {
  width: 32px; height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}
.tour-eyebrow span {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.tour-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 6vw, 7.5rem);
  line-height: 0.88;
  color: var(--fg);
}
.tour-outline {
  -webkit-text-stroke: 1px rgba(240,236,228,0.22);
  color: transparent;
}

.tour-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(240,236,228,0.38);
}

.tour-header::after {
  content: '';
  display: block;
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, rgba(255,61,46,0.6), transparent);
}

/* tour list */
.tour-list {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
}

.tour-item {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  align-items: center;
  gap: 1.8rem;
  padding: 1.5rem 1.2rem;
  border-bottom: 1px solid rgba(240,236,228,0.06);
  position: relative;
  transition: background 0.3s, padding-left 0.35s cubic-bezier(.25,.8,.25,1);
  border-radius: 2px;
  cursor: default;
}
.tour-item:first-child {
  border-top: 1px solid rgba(240,236,228,0.06);
}

/* red left bar on hover */
.tour-item::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.3s cubic-bezier(.25,.8,.25,1);
}
.tour-item:hover {
  background: rgba(240,236,228,0.025);
  padding-left: 1.8rem;
}
.tour-item:hover::before { transform: scaleY(1); }

.tour-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  gap: 2px;
  flex-shrink: 0;
}
.tour-month {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}
.tour-day {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.6rem;
  color: var(--fg);
  line-height: 1;
}

.tour-info {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.tour-venue {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.9rem);
  letter-spacing: 0.03em;
  color: var(--fg);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tour-location {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.3);
}
.tour-city { color: rgba(240,236,228,0.55); }

.tour-status {
  font-family: 'DM Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
  flex-shrink: 0;
  white-space: nowrap;
}
.tour-status.available {
  color: #4ade80;
  background: rgba(74,222,128,0.07);
  border: 1px solid rgba(74,222,128,0.18);
}
.tour-status.soldout {
  color: rgba(240,236,228,0.22);
  background: rgba(240,236,228,0.03);
  border: 1px solid rgba(240,236,228,0.07);
}

.tour-ticket {
  position: relative;
  display: inline-block;
  padding: 0.65rem 1.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  text-decoration: none;
  border-radius: 2px;
  overflow: hidden;
  transition: color 0.35s;
  flex-shrink: 0;
  white-space: nowrap;
}
.tour-ticket::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
}
.tour-ticket:hover { color: var(--fg); }
.tour-ticket:hover::before { transform: translateX(0); }
.tour-ticket span { position: relative; z-index: 1; }
.tour-ticket.disabled {
  background: rgba(240,236,228,0.06);
  color: rgba(240,236,228,0.2);
  pointer-events: none;
}
.tour-ticket.disabled::before { display: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .tour-bg-wrap { width: 38%; }
}

@media (max-width: 900px) {
  .tour-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .tour-header {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 2rem;
  }
  .tour-header::after { display: none; }
  .tour-subtitle { display: none; }
  .tour-bg-wrap { width: 45%; opacity: 0.5; }
}

@media (max-width: 768px) {
  .tour-watermark { display: none; }
  .tour-bg-wrap {
    width: 100%;
    height: 40%;
    top: auto;
    bottom: 0;
    opacity: 0.3;
  }
  .tour-img-overlay {
    background: linear-gradient(180deg,
      #0d0d0d 0%,
      rgba(13,13,13,0.5) 40%,
      transparent 100%
    );
  }
  .tour-bg-wrap::before { display: none; }
  .tour-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-bottom: 10rem;
  }
  .tour-header {
    position: static;
    flex-direction: column;
    gap: 1rem;
  }
  .tour-header::after { display: none; }
  .tour-item {
    grid-template-columns: 52px 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.5rem 1rem;
    padding: 1.1rem 0.5rem;
  }
  .tour-item:hover { padding-left: 0.8rem; }
  .tour-status { display: none; }
  .tour-ticket {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    padding: 0.5rem 1rem;
  }
  .tour-day { font-size: 2rem; }
  .tour-venue { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
}




/* ==========FOOTER=========== */
/* ── FOOTER ── */
.footer {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(255,61,46,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0d0d0d 0%, #080808 100%);
  border-top: 1px solid rgba(240,236,228,0.06);
  overflow: hidden;
}

/* grain */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  z-index: 0;
}

.footer-bg-text {
  position: absolute;
  bottom: -0.2em;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 18vw, 18rem);
  white-space: nowrap;
  -webkit-text-stroke: 1px rgba(240,236,228,0.035);
  color: transparent;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.04em;
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── TOP ROW ── */
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  width: fit-content;
}
.footer-logo-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  color: var(--fg);
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color 0.2s;
}
.footer-logo-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
}
.footer-logo:hover .footer-logo-dot { transform: scale(2.2); }

.footer-tagline {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.85;
  color: rgba(240,236,228,0.35);
  max-width: 24ch;
}

.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.footer-social-link {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.35);
  text-decoration: none;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(240,236,228,0.1);
  border-radius: 2px;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.footer-social-link:hover {
  color: var(--fg);
  border-color: rgba(240,236,228,0.3);
  background: rgba(240,236,228,0.04);
}

/* nav groups */
.footer-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.footer-nav-heading {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer-nav-list li a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(240,236,228,0.45);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.25s cubic-bezier(.25,.8,.25,1);
  display: inline-block;
}
.footer-nav-list li a:hover {
  color: var(--fg);
  padding-left: 0.4rem;
}

/* ── DIVIDER ── */
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240,236,228,0.08) 20%,
    rgba(240,236,228,0.08) 80%,
    transparent 100%
  );
}

/* ── BOTTOM ROW ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  flex-wrap: wrap;
}

.footer-copy {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(240,236,228,0.22);
}

.footer-credit {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(240,236,228,0.22);
  text-align: center;
}
.footer-credit span {
  color: rgba(240,236,228,0.45);
  font-style: italic;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}
.footer-legal a {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,236,228,0.22);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: rgba(240,236,228,0.6); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2rem;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 1.5rem;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
  .footer-credit { text-align: left; }
  .footer-bg-text { font-size: clamp(4rem, 22vw, 8rem); }
}
/* ==========FOOTER=========== */