/* ================================================
   CKLAD — Boutique Event
   styles.css

   Design reference: 1440 × 824 px (Figma)
   All measurements expressed as vw/vh fractions
   so the layout scales proportionally at any size.

   Key fractions:
     1px horizontal = 0.06944vw  (1/1440 * 100)
     1px vertical   = 0.12136vh  (1/824  * 100)
   ================================================ */

/* ------------------------------------------------
   Global: disable selection, drag, and touch callout
   ------------------------------------------------ */
*, *::before, *::after {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* ------------------------------------------------
   Google Fonts
   ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap');

/* ------------------------------------------------
   Custom Fonts  (/fonts/ directory)
   ------------------------------------------------ */
@font-face {
  font-family: 'Kharkiv Tone';
  src: url('assets/fonts/Kharkiv Tone.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Miklos';
  src: url('assets/fonts/Miklos-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------
   Design Tokens
   ------------------------------------------------ */
:root {
  --red:   #c70000;
  --black: #000000;
  --white: #ffffff;

  --font-ui:      'Kharkiv Tone', sans-serif;
  --font-display: 'Miklos', serif;
  --font-partner: 'Montserrat', sans-serif;

  /* 26px at 1440px, scales fluid; capped at 34px (~1880px viewport) */
  --text-base: clamp(14px, 1.806vw, 34px);

  /* 40px at 1440px, scales fluid */
  --side-pad: clamp(20px, 2.778vw, 60px);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; }

a {
  text-decoration: none;
  color: inherit;
}

/* ================================================
   Hero Section
   ================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--black);
}

/* — Background photo — */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  animation: slow-zoom 8s infinite alternate ease-in-out;
  transform-origin: center center;
}

@keyframes slow-zoom {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.05); }
}

/* — Bottom decorative CKLAD silhouette —
   Figma: inset 59.59% -4.37% -7.29% -4.37%
   SVG viewBox: 1566 × 393 → aspect ratio ~3.98:1
   Width = 108.74% of hero (100% + 2×4.37%) -------- */
.hero__overlay {
  position: absolute;
  top: 59.59%;
  left: -4.37%;
  width: 108.74%;
  aspect-ratio: 1566 / 393;
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------
   Navigation — fixed, persists across all sections
   ------------------------------------------------ */
.hero__nav {
  position: fixed;
  top: 4.85vh;
  left: 0;
  right: 0;
  padding: 0 var(--side-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: clamp(32px, 4vw, 76px);
  z-index: 100;
}

/* Menu button — left column, stick to left edge */
.hero__nav #menu-open {
  justify-self: start;
}

/* Instagram link — right column, push to the right */
.hero__nav .nav-link:last-child {
  justify-self: end;
}

.nav-link {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--white);
  font-feature-settings: 'lnum' 1;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}

.nav-link:hover { opacity: 0.72; }

/* Top-center brand icon
   Figma: 56 × 57.2px  SVG viewBox: 56 × 57.2147
   Cap at ~74px (56 × 1920/1440) so it doesn't outgrow 1920px screens */
.hero__logo-icon {
  width: 3.89vw;
  max-width: 74px;
  min-width: 32px;
  aspect-ratio: 56 / 57.2147;
  object-fit: contain;
}

/* ------------------------------------------------
   Center Branding — CKLAD logo + tagline
   Figma: w=363px, centered at 50% / 50%
   SVG viewBox: 363 × 91.1224
   ------------------------------------------------ */
.hero__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Scales fluid; cap at 484px (363 × 1920/1440) so 1920px screens stay proportional */
  width: 25.21vw;
  max-width: 484px;
  min-width: 200px;
}

/* Clip-path reveal wrapper */
.hero__brand-wrap {
  display: block;
  overflow: hidden;
}

.hero__brand {
  width: 100%;
  aspect-ratio: 363 / 91.1224;
  object-fit: contain;
  animation: brand-reveal 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.4s;
}

@keyframes brand-reveal {
  0%   { transform: translateY(105%); }
  100% { transform: translateY(0); }
}

.hero__tagline-wrap {
  display: block;
  overflow: hidden;
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--white);
  text-align: center;
  margin-top: 0.49vh;      /* ~4px at 824px */
  animation: brand-reveal 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.65s;
}

/* ------------------------------------------------
   Side Info — Date and Location
   top: calc(50% - 13px) ≈ 50% (visual center)
   date left: ~5.66vw
   location right: ~5.56vw, max-width 366px
   ------------------------------------------------ */
.hero__date,
.hero__location {
  position: absolute;
  top: 50%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  font-feature-settings: 'lnum' 1;
}

.hero__date {
  left: var(--side-pad);
  transform: translateY(-50%);
  white-space: nowrap;
}

.hero__location {
  right: var(--side-pad);
  transform: translateY(-50%);
  text-align: right;
  max-width: 25.42vw;
}

/* ------------------------------------------------
   CTA Button
   Figma: top 594px → 594/824 = 72.09vh
   padding: 19.7px 32.8px
   ------------------------------------------------ */
.hero__cta-wrap {
  position: absolute;
  top: 72.09vh;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  padding: 4px;               /* prevent pill-edge clipping */
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-base);                  /* 26px at 1440px */
  padding: 2.39vh 2.28vw;                       /* 19.7px / 32.8px at 1440×824 */
  border-radius: 999px;
  white-space: nowrap;
  animation: brand-reveal 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: 0.9s;
}

.hero__cta:hover {
  background: var(--white);
  color: var(--red);
}

/* ------------------------------------------------
   Schedule — bottom center
   Figma: top ~786px → bottom ~38px → 4.61vh from bottom
   ------------------------------------------------ */
.hero__schedule {
  position: absolute;
  bottom: 4.61vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--white);
  font-feature-settings: 'lnum' 1;
  white-space: nowrap;
  text-align: center;
}

/* ------------------------------------------------
   Sponsor — bottom left
   Figma: left 40px, top 779px (bottom 45px)
   SAMI logo: 100 × 10.9px
   SVG viewBox: 100 × 10.9001
   ------------------------------------------------ */
.hero__sponsor {
  position: absolute;
  bottom: 5.46vh;
  left: var(--side-pad);
  display: flex;
  flex-direction: column;
  gap: 0.49vh;             /* 4px at 824px */
  width: 12.01vw;          /* 173/1440 × 100 */
  max-width: 173px;
  min-width: 80px;
}

/* SAMI logo: viewBox 100 × 10.9 */
.hero__sponsor-logo {
  width: 6.94vw;           /* 100/1440 × 100 */
  max-width: 100px;
  aspect-ratio: 100 / 10.9001;
  object-fit: contain;
  object-position: left;
}

.hero__sponsor p {
  font-family: var(--font-partner);
  font-weight: 400;
  font-size: max(10px, 1.042vw); /* 15/1440 × 100 */
  color: var(--white);
  text-align: left;
  font-feature-settings: 'lnum' 1;
}

/* ================================================
   Hero — fade elements when menu is open
   Elements that fade: logo-icon, date, location, cta, schedule, sponsor, menu-open btn
   Elements that stay: hero__bg, hero__center (brand), instagram link
   ================================================ */
.hero__logo-icon,
.hero__center,
.hero__date,
.hero__location,
.hero__schedule,
.hero__sponsor,
#menu-open {
  transition: opacity 0.35s ease;
}

.hero__cta {
  transition:
    opacity          0.35s ease,
    background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    color            0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero.menu-active .hero__logo-icon,
.hero.menu-active .hero__center,
.hero.menu-active .hero__date,
.hero.menu-active .hero__location,
.hero.menu-active .hero__cta,
.hero.menu-active .hero__schedule,
.hero.menu-active .hero__sponsor,
.hero.menu-active #menu-open {
  opacity: 0;
  pointer-events: none;
}

/* ================================================
   Responsive — tablet / mobile
   ================================================ */
/* ---- Mobile (handled in separate file later) ---- */
@media (max-width: 768px) {
  .hero__date,
  .hero__location {
    display: none;
  }

  .hero__schedule {
    white-space: normal;
    width: 88%;
    bottom: 3vh;
  }

  .hero__center {
    width: 62vw;
    min-width: unset;
    max-width: unset;
  }

  .hero__logo-icon {
    width: 8vw;
    max-width: 40px;
    min-width: 28px;
  }

  .hero__cta {
    padding: 3vw 6vw;
  }

  .hero__sponsor {
    width: 28vw;
    min-width: unset;
    max-width: unset;
  }

  .hero__sponsor-logo {
    width: 20vw;
    max-width: 80px;
  }
}

@media (max-width: 480px) {
  .hero__center { width: 78vw; }
  .hero__logo-icon { width: 10vw; }
}

/* ================================================
   Hero — mobile (≤600px)
   Based on Figma 375×812 layout
   ================================================ */
@media (max-width: 600px) {
  /* Hide desktop CKLAD silhouette — too wide for mobile */
  .hero__overlay { display: none; }

  /* Background: allow slow-zoom same as desktop */

  /* Nav: icon left, menu right; hide instagram */
  .hero__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 13px;
    padding: 0 5.33vw;   /* 20px at 375px */
    height: auto;
  }

  .hero__logo-icon {
    order: -1;
    width: 9.07vw;       /* 34px at 375px */
    min-width: 28px;
    max-width: 48px;
  }

  .hero__nav #menu-open {
    order: 1;
    font-size: 5.33vw;   /* 20px at 375px */
  }

  /* Hide instagram link */
  .hero__nav a.nav-link { display: none; }

  /* CKLAD logo + Boutique Event */
  .hero__center {
    top: 18.7vh;
    left: 50%;
    transform: translateX(-50%);
    width: 79.47vw;      /* 298px at 375px */
    min-width: unset;
    max-width: unset;
  }

  .hero__tagline { font-size: 5.6vw; }   /* 21px at 375px */

  /* Date + Location: show stacked, centered */
  .hero__date,
  .hero__location {
    display: block;
    top: auto;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 79.47vw;      /* 298px at 375px */
    text-align: center;
    font-size: 5.33vw;   /* 20px at 375px */
    max-width: unset;
    white-space: normal;
  }

  .hero__date     { top: 41.5vh; }
  .hero__location { top: 45.2vh; }

  /* CTA */
  .hero__cta-wrap { top: 58.1vh; }

  .hero__bg {
    animation: slow-zoom 8s infinite alternate ease-in-out;
  }

  .hero__cta {
    font-size: 5.33vw;       /* 20px at 375px */
    padding: 4vw 6.67vw;     /* 15px 25px at 375px */
    min-width: 61.33vw;      /* 230px at 375px */
    animation: cta-invert 5s ease-in-out infinite;
  }

  /* Sponsor: tracks below CTA — offset = button height (~14vw) + gap (3vw) */
  .hero__sponsor {
    position: absolute;
    bottom: auto;
    top: calc(58.1vh + 17vw);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 30.67vw;      /* 115px at 375px */
    min-width: unset;
    max-width: unset;
    align-items: center;
    gap: 4px;
  }

  /* White logo on mobile */
  .hero__sponsor-logo {
    width: 21.07vw;      /* 79px at 375px */
    max-width: unset;
    object-position: center;
    filter: brightness(0) invert(1);
  }

  .hero__sponsor p {
    text-align: center;
    font-size: 2.67vw;   /* 10px at 375px */
  }

  /* Schedule */
  .hero__schedule {
    bottom: 4.2vh;
    font-size: 4vw;      /* 15px at 375px */
    width: 90vw;
    white-space: normal;
  }
}

/* ================================================
   Menu button reset (it's a <button> styled as a link)
   ================================================ */
button.nav-link {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ================================================
   Slide-in Menu
   ================================================ */

/* Overlay — covers the viewport, invisible until open */
.menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
  /* delay visibility until panel has slid back out */
  transition: visibility 0s 0.42s;
}

.menu.is-open {
  pointer-events: all;
  visibility: visible;
  transition: visibility 0s;
}

/* Panel — red slab, slides in from left */
/* Figma: left -19px, width 739px → 51.3vw, border-radius 0 50px 50px 0 */
.menu__panel {
  position: absolute;
  top: 0;
  left: -20px;                               /* slight bleed so left edge isn't visible */
  width: clamp(400px, 51.3vw, 820px);
  height: 100%;
  background: var(--red);
  border-radius: 0 clamp(30px, 3.47vw, 50px) clamp(30px, 3.47vw, 50px) 0;
  transform: translateX(-100%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

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

/* ---- Close button ---- */
.menu__close {
  position: absolute;
  top: 4.85vh;
  left: calc(20px + var(--side-pad));        /* 20px panel bleed + side-pad */
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.97vw, 14px);
  height: clamp(32px, 4vw, 76px);           /* matches hero nav height so text centers at same y */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-feature-settings: 'lnum' 1;
}

/* × icon SVG */
.menu__close-icon {
  display: block;
  width: clamp(20px, 2.15vw, 31px);
  height: clamp(20px, 2.15vw, 31px);
  flex-shrink: 0;
  object-fit: contain;
}

.menu__close-label {
  line-height: 1;
}

.menu__close:hover .menu__close-label {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- Nav links ---- */
.menu__nav {
  position: absolute;
  top: 50%;
  left: calc(20px + var(--side-pad));       /* 20px panel bleed + side-pad */
  right: var(--side-pad);                   /* 40px from panel right edge */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.74vw, 25px);
}

.menu__link {
  font-family: var(--font-ui);
  font-size: clamp(28px, 3.47vw, 50px);    /* 50px at 1440px */
  color: var(--white);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: text-decoration 0s;
}

/* Underline appears only on hover */
.menu__link:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ---- Sponsor ---- */
.menu__sponsor {
  position: absolute;
  bottom: 6.92vh;
  left: calc(20px + var(--side-pad));       /* 20px panel bleed + side-pad */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu__sponsor-logo {
  width: clamp(60px, 6.94vw, 100px);
  aspect-ratio: 100 / 10.9001;
  object-fit: contain;
  object-position: left;
}

.menu__sponsor p {
  font-family: var(--font-partner);
  font-weight: 400;
  font-size: max(10px, 1.042vw);
  color: var(--white);
  text-align: left;
  font-feature-settings: 'lnum' 1;
}

/* ================================================
   About Section
   ================================================ */
.about {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--black);
}

/* — Decorative backdrop shape
   SVG viewBox matches section exactly (1440 × 824),
   internal paths & blur are handled within the SVG itself */
.about__bg-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.50;
  pointer-events: none;
  user-select: none;
}

/* blur overlay div no longer needed — SVG has foreignObject blur built in */
.about__bg-blur { display: none; }

/* — Center content
   Figma: Frame 13 — 808 × 272.23px, vertically + horizontally centered */
.about__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.39vw, 20px);
  width: clamp(280px, 56.11vw, 808px);
}

/* Logo + "повертається" stacked group */
.about__logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 0.69vw, 10px);
}

/* Red logo via CSS mask — lets us recolor the white SVG to red */
.about__brand {
  width: clamp(140px, 17.71vw, 255px);   /* Figma: 255px at 1440px */
  aspect-ratio: 363 / 91.1224;
  background-color: var(--red);
  -webkit-mask: url('assets/CKLAD_main_logo.svg') no-repeat center / contain;
          mask: url('assets/CKLAD_main_logo.svg') no-repeat center / contain;
}

.about__returns {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--red);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1;
  font-feature-settings: 'lnum' 1;
}

.about__description-block {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.39vw, 20px);
}

.about__description {
  font-family: var(--font-ui);
  font-size: clamp(11px, 1.39vw, 20px);  /* Figma: 20px */
  line-height: 1.4;
  color: var(--white);
  text-align: center;
  font-feature-settings: 'lnum' 1;
}

.about__accent {
  color: var(--red);
}

/* — Genre ticker
   Figma: Frame 14 — 1477px wide, gap 50px, color #C70000, bottom of section */
.about__ticker {
  position: absolute;
  bottom: 4.85vh;
  left: 0;
  right: 0;
  overflow: hidden;
}

.about__ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.about__ticker-track span {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--red);
  font-feature-settings: 'lnum' 1;
  padding-right: clamp(25px, 3.47vw, 50px);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* ================================================
   About section — mobile (≤600px)
   Must come AFTER all about base styles to win cascade
   ================================================ */
@media (max-width: 600px) {
  .about { height: 100svh; }

  .about__center {
    left: 5.33vw;
    transform: translateY(-50%);
    width: 89.33vw;
    align-items: flex-start;
    gap: 10.67vw;              /* ~40px at 375px — bigger space between logo & text */
  }

  /* Logo group: centered within the container */
  .about__logo-group {
    align-self: center;
    align-items: center;
    gap: 1.6vw;
  }

  .about__brand { width: 65vw; }

  .about__returns {
    font-size: 5.33vw;
    text-align: center;
  }

  .about__description-block { gap: 4vw; }

  .about__description {
    text-align: left;
    font-size: 4vw;
  }

  .about__ticker-track span { font-size: 5.33vw; }
}

/* ---- Scroll reveal ---- */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-down {
  opacity: 0;
  transform: translateY(-36px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.reveal-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════
   Artists Section
   ══════════════════════════════════════ */

.artists {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  display: flex;
  background: var(--black);
}

.artist {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
}

.artist__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: filter 0.45s ease;
}

.artist__dimmer {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.artist:hover .artist__dimmer {
  opacity: 0.80;
}

/* Content anchored to bottom of each column */
.artist__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--side-pad) clamp(20px, 6.55vh, 54px);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.46vh, 20px);
}

/* Bio + insta: hidden by default, expands on hover */
.artist__info {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.22vh, 16px);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}

.artist:hover .artist__info {
  max-height: 400px;
  opacity: 1;
}

.artist__bio {
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.11vw, 16px);
  line-height: 1.5;
  color: var(--white);
}

.artist__insta {
  display: block;
  width: clamp(28px, 2.78vw, 40px);
  height: clamp(28px, 2.78vw, 40px);
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}

.artist__insta:hover {
  opacity: 0.75;
}

.artist__insta svg {
  width: 100%;
  height: 100%;
}

/* ================================================
   Tickets Section
   Figma: 1440 × 824 — two-column layout
   Left: tiers + CTA (left 40px, vertically centered)
   Right: black rounded panel (left 762px → 52.92vw,
          top 106px, width 680px, height 678px,
          border-radius 60px 0 0 60px)
   ================================================ */
.tickets {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--black);
}

/* — Mirrored background photo — */
.tickets__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------
   Left column
   Figma: left 40px, vertically centered
   Content spans ~395px max (wider of tiers/heading)
   ------------------------------------------------ */
.tickets__left {
  position: absolute;
  left: var(--side-pad);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.39vw, 20px);
  width: clamp(200px, 27.43vw, 395px);
}

/* "КВИТКИ" — Figma: Kharkiv Tone, 50px line-height, uppercase */
.tickets__heading {
  font-family: var(--font-ui);
  font-size: clamp(28px, 3.47vw, 50px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  font-feature-settings: 'lnum' 1;
  font-weight: 400;
}

.tickets__tiers {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.39vw, 20px);
}

.tickets__tier {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Tier name: Kharkiv Tone 26px, wraps to 2 lines */
.tickets__tier-name {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--white);
  font-feature-settings: 'lnum' 1;
}

/* Availability: Montserrat 15px, muted grey */
/* Price portion of tier name — red */
.tickets__price {
  color: var(--red);
}

.tickets__tier-sub {
  font-family: var(--font-partner);
  font-size: max(9px, 1.042vw);
  line-height: 1.2;
  color: #737373;
  font-feature-settings: 'lnum' 1;
}

/* ------------------------------------------------
   CTA Button
   Default: white bg / red text
   Hover:   red bg / white text
   Same cubic-bezier transition as hero CTA
   ------------------------------------------------ */
.tickets__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  background: var(--white);
  color: var(--red);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  padding: 2.39vh 2.28vw;
  border-radius: 999px;
  white-space: nowrap;
  transition:
    background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    color            0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.tickets__cta:hover {
  background: var(--red);
  color: var(--white);
}

/* ------------------------------------------------
   Right panel
   Figma: left 762px (52.92vw), top 106px (12.86vh)
          width 680px, height 678px (82.28vh)
          border-radius 60px 0 0 60px
   ------------------------------------------------ */
.tickets__panel {
  position: absolute;
  left: 52.92vw;
  top: 12.86vh;
  width: calc(100% - 52.92vw);
  height: 82.28vh;
  background: var(--black);
  border-radius: clamp(30px, 4.17vw, 60px) 0 0 clamp(30px, 4.17vw, 60px);
  overflow: hidden;
}

@keyframes glitch-flicker {
  /* Long stable period */
  0%    { opacity: 1;    text-shadow: none; }

  /* Mild flicker — slight dimming */
  18%   { opacity: 1;    text-shadow: none; }
  18.3% { opacity: 0.75; text-shadow: 2px 0 6px rgba(199,0,0,0.7), -2px 0 4px rgba(199,0,0,0.5); }
  18.6% { opacity: 1;    text-shadow: none; }

  /* Stable */
  19%   { opacity: 1;    text-shadow: none; }

  /* Bad connection — complete dropout */
  40%   { opacity: 1;    text-shadow: none; }
  40.2% { opacity: 0;    text-shadow: none; }
  40.5% { opacity: 1;    text-shadow: 3px 0 8px rgba(199,0,0,0.9), -3px 0 8px rgba(199,0,0,0.7); }
  40.7% { opacity: 0;    text-shadow: none; }
  41%   { opacity: 1;    text-shadow: none; }

  /* Stable */
  41.5% { opacity: 1;    text-shadow: none; }

  /* Double-flicker burst */
  65%   { opacity: 1;    text-shadow: none; }
  65.2% { opacity: 0.6;  text-shadow: -3px 0 10px rgba(199,0,0,0.8), 2px 0 6px rgba(199,0,0,0.6); }
  65.4% { opacity: 1;    text-shadow: none; }
  65.6% { opacity: 0.3;  text-shadow: 3px 0 12px rgba(199,0,0,1.0), -2px 0 6px rgba(199,0,0,0.8); }
  65.9% { opacity: 1;    text-shadow: none; }

  /* Long stable again */
  100%  { opacity: 1;    text-shadow: none; }
}

/* Gradient border
   Center shifted to 3% 50% (slightly inside the panel).
   This separates the straight left edge (~270°) from the
   corner arcs (~0° top-left, ~180° bottom-left), allowing
   the middle of the left side to be independently softened.

   Key angles (678×678 panel, center at ~20px from left):
     Top-left corner arc  → ~357°–4°   (bright 0.50)
     Top edge (L→R)       → 0°–63°     (prolonged fade, reaches 0 at ~60°)
     Right side           → 63°–117°   (0, clipped by overflow:hidden)
     Bottom edge (R→L)    → 117°–183°  (builds from 117°, prolonged)
     Bottom-left corner   → ~172°–184° (moderate 0.26, asymmetric)
     Straight left edge   → 184°–357°  (soft, dips to 0.06 at 270° midpoint) */
.tickets__panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: -4px;   /* bleed past right edge — clipped by overflow:hidden, removes right border */
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg at 3% 50%,
    rgba(255, 255, 255, 0.50)   0deg,   /* top-left corner — bright */
    rgba(255, 255, 255, 0.15)  25deg,   /* top edge slow fade */
    rgba(255, 255, 255, 0.00)  60deg,   /* top edge → 0 just before right corner */
    rgba(255, 255, 255, 0.00) 116deg,   /* right side + bottom-right corner — 0 */
    rgba(255, 255, 255, 0.00) 122deg,   /* clear of right corner */
    rgba(255, 255, 255, 0.18) 140deg,   /* middle of bottom edge — visible peak */
    rgba(255, 255, 255, 0.12) 158deg,   /* bottom edge fading toward left */
    rgba(255, 255, 255, 0.26) 175deg,   /* bottom-left corner — moderate */
    rgba(255, 255, 255, 0.14) 200deg,   /* lower left edge */
    rgba(255, 255, 255, 0.06) 270deg,   /* middle of left side — softest */
    rgba(255, 255, 255, 0.14) 342deg,   /* upper left edge */
    rgba(255, 255, 255, 0.45) 357deg,   /* approaching top-left corner */
    rgba(255, 255, 255, 0.50) 360deg    /* top-left corner — bright (wraps to 0°) */
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Cone icon — centered in panel, 24px from panel top */
.tickets__cone {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 3.54%;
  width: 8.24%;
  min-width: 28px;
  aspect-ratio: 56 / 57.2147;
  object-fit: contain;
}

/* "12 квітня" — centered in panel, 99px from panel top */
.tickets__panel-date {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 14.60%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--white);
  text-transform: uppercase;
  font-feature-settings: 'lnum' 1;
  white-space: nowrap;
  text-align: center;
  animation: glitch-flicker 14s infinite;
}

/* Brand group — centered, 40.85% from panel top */
.tickets__brand-group {
  position: absolute;
  left: 50%;
  top: 40.85%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 53.38%;
  min-width: 160px;
}

/* CKLAD logo in red — CSS mask same technique as .about__brand */
.tickets__brand {
  width: 100%;
  aspect-ratio: 363 / 91.1224;
  background-color: var(--red);
  -webkit-mask: url('assets/CKLAD_main_logo.svg') no-repeat center / contain;
          mask: url('assets/CKLAD_main_logo.svg') no-repeat center / contain;
  animation: glitch-flicker 14s infinite 0.3s;
}

/* "Boutique Event" — Miklos italic, red */
.tickets__panel-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--red);
  text-align: center;
  margin-top: 0.49vh;
  animation: glitch-flicker 14s infinite 0.6s;
}

/* "200 TICKETS ONLY" — centered, near panel bottom */
.tickets__limit {
  position: absolute;
  bottom: 6.91vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  text-transform: uppercase;
  font-feature-settings: 'lnum' 1;
  white-space: nowrap;
  text-align: center;
  animation: glitch-flicker 14s infinite 1.2s;
}

.tickets__limit-num   { color: var(--red); }
.tickets__limit-label { color: var(--white); }

/* Disclaimer — bottom left
   Figma: left 40px, top 672px → bottom ~40px
   Two paragraphs (Ukrainian + English) with a small gap */
.tickets__disclaimer {
  position: absolute;
  left: var(--side-pad);
  bottom: clamp(16px, 4.85vh, 40px);
  width: clamp(180px, 25.97vw, 374px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.46vh, 12px);
}

.tickets__disclaimer p {
  font-family: var(--font-partner);
  font-size: max(9px, 0.903vw);
  line-height: 1.23;
  color: var(--white);
  font-feature-settings: 'lnum' 1;
}

/* ================================================
   Tickets — responsive
   ================================================ */
@media (max-width: 900px) {
  .tickets__panel {
    left: 56vw;
    border-radius: clamp(20px, 3vw, 40px) 0 0 clamp(20px, 3vw, 40px);
  }

  .tickets__left {
    width: clamp(160px, 50vw, 395px);
  }

  .tickets__disclaimer {
    display: none;
  }
}

/* ================================================
   Dress Code Section
   Figma: 1440 × 824
   Left: static text column (left 40px)
   Right: two-column scrolling gallery (each col 25vw)
   ================================================ */
.dresscode {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--black);
  display: flex;
}

/* ---- Background shape (same SVG + opacity as About section) ---- */
.dresscode__bg-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.50;
  pointer-events: none;
  user-select: none;
}

/* ---- Left column wrapper: heading+rules at top, desc at bottom ---- */
.dresscode__left {
  position: absolute;
  left: var(--side-pad);
  top: 22vh;
  bottom: 8vh;
  width: clamp(200px, 38vw, 548px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

.dresscode__main {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.46vh, 12px);
}

.dresscode__heading {
  font-family: var(--font-ui);
  font-size: clamp(28px, 3.47vw, 50px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 400;
  font-feature-settings: 'lnum' 1;
}

.dresscode__rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.22vh, 10px);
}

.dresscode__rules li {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--white);
  font-feature-settings: 'lnum' 1;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
}

/* Bullet dot */
.dresscode__rules li::before {
  content: '•';
  flex-shrink: 0;
  font-size: 0.75em;
  line-height: 1.5;
}

/* ---- Left lower: description block ---- */
.dresscode__desc-block {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.49vh, 4px);
}

/* Uppercase section labels */
.dresscode__desc-label {
  font-family: var(--font-partner);
  font-size: max(9px, 0.903vw);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-top: clamp(6px, 0.73vh, 6px);
}

.dresscode__desc-label:first-child {
  margin-top: 0;
}

/* Body text — regular sentence case */
.dresscode__desc-text {
  font-family: var(--font-partner);
  font-size: max(9px, 0.903vw);
  line-height: 1.4;
  color: var(--white);
}

/* ---- Right gallery ---- */
.dresscode__gallery {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50vw;
  display: flex;
  gap: clamp(8px, 1.11vw, 16px);
  overflow: hidden;
}

/* Each scrolling column */
.dresscode__col {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.11vw, 16px);
  width: 50%;
  will-change: transform;
}

/* Column B — chess offset applied via JS posB init (no CSS margin-top needed) */
.dresscode__col--b {}

.dresscode__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  flex-shrink: 0;
  border-radius: clamp(12px, 1.39vw, 20px);
}

/* Mobile carousel: hidden on desktop */
.dresscode__mob-carousel { display: none; }

/* ================================================
   Dresscode — Mobile (≤600px)
   ================================================ */
@media (max-width: 600px) {

  /* Section: auto-height scrollable column */
  .dresscode {
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  /* Hide desktop elements */
  .dresscode__bg-shape { display: none; }
  .dresscode__gallery  { display: none; }

  /* Left col: static flow, below carousel */
  .dresscode__left {
    position: static;
    width: 100%;
    padding: 6.4vw 5.33vw 10.67vw;
    display: flex;
    flex-direction: column;
    gap: 6.4vw;
  }

  .dresscode__main { gap: 5.33vw; }

  .dresscode__heading {
    font-size: 13.33vw;
    line-height: 1;
  }

  .dresscode__rules { gap: 4vw; }

  .dresscode__rules li {
    font-size: 5.33vw;
    line-height: 1.3;
  }

  .dresscode__desc-label {
    font-size: 3.2vw;
    margin-top: 4vw;
  }

  .dresscode__desc-text {
    font-size: 3.2vw;
    line-height: 1.5;
  }

  /* Mobile carousel */
  .dresscode__mob-carousel {
    display: block;
    padding-top: 5.33vw;
  }

  .dresscode__mob-viewport {
    width: 100%;
    overflow: hidden;
  }

  .dresscode__mob-track {
    display: flex;
    width: 400vw;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .dresscode__mob-slide {
    flex: 0 0 100vw;
    width: 100vw;
    padding: 0 5.33vw;
    box-sizing: border-box;
  }

  .dresscode__mob-img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    border-radius: 4.27vw;
    display: block;
  }

  .dresscode__mob-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.13vw;
    padding: 3.2vw 0;
  }

  .dresscode__mob-dot {
    width: 2.13vw;
    height: 2.13vw;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
  }

  .dresscode__mob-dot.is-active {
    background: var(--white);
  }
}

/* ==============================
   Rules / Entry Section
   ============================== */

.rules {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--black);
}

/* Background photo — mirrored horizontally */
.rules__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  pointer-events: none;
  user-select: none;
}

/* Center block: heading + rules list */
.rules__center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.43vh, 20px);
  width: clamp(280px, 38.82vw, 559px);
}

.rules__heading {
  font-family: var(--font-ui);
  font-size: clamp(28px, 3.47vw, 50px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 400;
  font-feature-settings: 'lnum' 1;
  white-space: nowrap;
}

.rules__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.43vh, 20px);
  width: 100%;
}

.rules__item {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1;
  text-align: center;
  color: var(--white);
  font-feature-settings: 'lnum' 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
}

.rules__item::before {
  content: '•';
  flex-shrink: 0;
  font-size: 0.75em;
  line-height: 1.5;
}

/* Red disclaimer */
/* Design: top 587px on 824px screen = 104px below center block bottom (50% + 71px) */
.rules__disclaimer {
  position: absolute;
  left: 50%;
  top: calc(50% + 175px); /* 50% + 71px (half center height) + 104px gap */
  transform: translateX(-50%);
  width: clamp(180px, 22.22vw, 320px);
  font-family: var(--font-ui);
  font-size: clamp(12px, 1.39vw, 20px);
  line-height: 1.5;
  text-align: center;
  color: var(--red);
  font-feature-settings: 'lnum' 1;
}

/* Footer bar */
.rules__footer {
  position: absolute;
  bottom: clamp(16px, 4.13vh, 34px);
  left: 0;
  right: 0;
  overflow: hidden;
}

.rules__footer-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.rules__footer-link {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1;
  color: var(--red);
  text-decoration: underline;
  text-decoration-color: var(--red);
  white-space: nowrap;
  font-feature-settings: 'lnum' on;
  padding-right: clamp(20px, 3.47vw, 50px);
}

.rules__footer-logo {
  display: block;
  width: clamp(50px, 6.15vw, 88.5px);
  height: clamp(12px, 1.54vw, 22px);
  background-color: var(--red);
  -webkit-mask: url(assets/CKLAD_main_logo.svg) center / contain no-repeat;
  mask: url(assets/CKLAD_main_logo.svg) center / contain no-repeat;
  flex-shrink: 0;
  margin-right: clamp(20px, 3.47vw, 50px);
}

@media (max-width: 600px) {
  .tickets {
    position: relative;
    height: 100vh;
    min-height: unset;
    padding: 0;
    display: block;
  }

  /* picture + img fill the full section */
  .tickets picture {
    display: block;
    position: absolute;
    inset: 0;
  }

  .tickets__bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Content block: fixed from top, matching Figma (274/812 ≈ 34svh) */
  .tickets__left {
    position: absolute;
    left: 4.27vw;
    top: 34svh;
    transform: none;
    width: 87.2vw;
    max-width: 87.2vw;
    display: flex;
    flex-direction: column;
    gap: 5.33vw;
  }

  .tickets__heading {
    font-size: 13.33vw;
    line-height: 13.33vw;
  }

  .tickets__tiers {
    gap: 5.33vw;
  }

  .tickets__tier-name {
    font-size: 5.33vw;
    line-height: 5.33vw;
  }

  .tickets__tier-sub {
    font-size: 4vw;
    line-height: 4.8vw;
  }

  .tickets__cta {
    font-size: 5.33vw;
    padding: 3.99vw 6.67vw;
    background: var(--red);
    color: var(--white);
    animation: cta-invert 5s ease-in-out infinite;
  }

  .tickets__panel    { display: none; }
  .tickets__disclaimer { display: none; }
}

@keyframes cta-invert {
  0%, 80%  { background: var(--red);   color: var(--white); }
  83%, 89% { background: var(--white); color: var(--red);   }
  92%, 100%{ background: var(--red);   color: var(--white); }
}

/* Name: slides up a touch on hover, underline fades in */
.artist__name {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.806vw, 26px);
  line-height: 1;
  color: var(--white);
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent;
  margin-top: 0;
  transition: transform 0.4s ease, text-decoration-color 0.35s ease, margin-top 0.45s ease;
}

.artist:hover .artist__name {
  transform: translateY(clamp(-6px, -0.73vh, -4px));
  text-decoration-color: var(--white);
  margin-top: clamp(28px, 6.07vh, 50px);
}

/* Desktop: track is a transparent flex wrapper */
.artists__track {
  display: flex;
  flex: 1;
  min-width: 0;
}

/* Prevent selection / callout on long-press across the entire artists block */
.artists,
.artists * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Dots: desktop hidden */
.artists__dots {
  display: none;
}

/* ================================================
   Artists — Mobile Carousel (≤600px)
   ================================================ */
@media (max-width: 600px) {

  /* Section: vertical stack — track + dots */
  .artists {
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
  }

  /* Track: all cards in a row, slides via transform */
  .artists__track {
    flex: 1;
    width: 400vw;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* Each card fills one full screen width */
  .artist {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
  }

  /* Photo and dimmer: inset from edges with rounded corners */
  .artist__photo {
    inset: 0 5.33vw;
    width: calc(100% - 10.66vw);
    border-radius: 4.27vw;
  }

  .artist__dimmer {
    inset: 0 5.33vw;
    width: calc(100% - 10.66vw);
    border-radius: 4.27vw;
  }

  /* Content anchored inside the inset */
  .artist__content {
    left: 5.33vw;
    right: 5.33vw;
  }

  /* Expanded state: mirrors desktop hover */
  .artist.is-held .artist__dimmer {
    opacity: 0.80;
  }

  .artist.is-held .artist__info {
    max-height: 400px;
    opacity: 1;
  }

  .artist.is-held .artist__name {
    text-decoration-color: var(--white);
  }

  /* Pagination dots */
  .artists__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.13vw;
    padding: 4vw 0;
    flex-shrink: 0;
  }

  .artists__dot {
    width: 2.13vw;
    height: 2.13vw;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease;
  }

  .artists__dot.is-active {
    background: var(--white);
  }
}

/* ================================================
   Rules — Mobile (≤600px)
   ================================================ */
@media (max-width: 600px) {

  .rules {
    min-height: unset;
    height: 100vh;
  }

  /* picture fills the section absolutely */
  .rules picture {
    display: block;
    position: absolute;
    inset: 0;
  }

  /* bg image: no mirror on mobile */
  .rules picture .rules__bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: none;
  }

  /* Center block: centered, ~40% from top */
  .rules__center {
    left: 50%;
    top: 40vh;
    transform: translate(-50%, -50%);
    width: 89.33vw;
    align-items: center;
    gap: 4vw;
  }

  .rules__heading {
    font-size: 13.33vw;
    line-height: 1;
    text-align: center;
  }

  .rules__list {
    align-items: center;
    gap: 4vw;
  }

  .rules__item {
    font-size: 5.33vw;
    line-height: 1.3;
    text-align: center;
    justify-content: center;
    align-items: flex-start;
  }

  .rules__item-note {
    display: block;
    font-size: 3.73vw;
    opacity: 0.7;
    text-align: center;
  }

  /* Disclaimer: centered, ~72% from top (matches design) */
  .rules__disclaimer {
    left: 50%;
    transform: translateX(-50%);
    top: 72vh;
    bottom: auto;
    width: 80vw;
    font-size: 3.73vw;
    line-height: 1.5;
    text-align: center;
  }

  /* Footer marquee: smaller text */
  .rules__footer-link {
    font-size: 4.27vw;
  }

  .rules__footer-logo {
    width: 13.33vw;
    height: 3.2vw;
  }
}

/* ══════════════════════════════════
   Buy Modal
   ══════════════════════════════════ */
.buy-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.buy-modal.is-open {
  display: flex;
}
.buy-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
}
.buy-modal__box {
  position: relative;
  z-index: 1;
  background: #111;
  border: 1px solid #333;
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 48px);
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.buy-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
  transition: opacity .2s;
}
.buy-modal__close:hover { opacity: 1; }
.buy-modal__title {
  font-family: var(--font-ui);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.buy-modal__tier-info {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.2vw, 18px);
  color: #aaa;
}
.buy-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.buy-modal__input {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--white);
  font-family: var(--font-partner);
  font-size: clamp(14px, 1vw, 16px);
  outline: none;
  transition: border-color .2s;
}
.buy-modal__input::placeholder { color: #555; }
.buy-modal__input:focus { border-color: var(--red); }
.buy-modal__total {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.2vw, 18px);
  color: #aaa;
}
.buy-modal__total strong { color: var(--white); }
.buy-modal__submit {
  background: var(--red);
  color: var(--white);
  border: none;
  border-radius: 100px;
  padding: 14px 32px;
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.2vw, 18px);
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: opacity .2s;
}
.buy-modal__submit:hover:not(:disabled) { opacity: .85; }
.buy-modal__submit:disabled { opacity: .5; cursor: not-allowed; }
.buy-modal__error {
  font-family: var(--font-partner);
  font-size: 14px;
  color: var(--red);
  min-height: 18px;
}

.buy-modal__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.buy-modal__qty-label {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.2vw, 16px);
  color: #aaa;
}
.buy-modal__qty-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}
.buy-modal__qty-btn {
  background: #2a2a2a;
  border: 1px solid #444;
  color: var(--white);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  padding: 0;
}
.buy-modal__qty-btn:hover:not(:disabled) { background: #444; }
.buy-modal__qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.buy-modal__qty-value {
  font-family: var(--font-ui);
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--white);
  min-width: 20px;
  text-align: center;
}