:root {
  /* Background image and base height (mobile first) */
  --hdr-ratio: 1300 / 700;
  /* match your artwork aspect */
  --hdr-maxw: 1300px;

  /* Rotator geometry (16:9) */
  --stage-w-max: 840px;
  --stage-ratio: 480 / 840;

  /* Mobile anchors (percent of header box) */
  --logo-x: 4%;
  --logo-y: 4%;
  --logo-w: max(15vw, 80px);
  --stage-x: 55%;
  --stage-y: 60%;
  --stage-w: min(92vw, 640px);
  --socials-x: .5%;
  --socials-y: 50%;
  --socials-w: max(5vw, 40px);
  --s-premiere-x: 25%;
  --s-premiere-y: .5%;
  --s-premiere-w: max(55vw, 280px);

  /* Slider (only shows ≥1300) */
  --slide-w: 150px;
  --slide-h: 100px;
  --slide-n: 10;
  --slide-d: 20s;
}

/* ---------- Header block stays in normal flow ---------- */
.site-header {
  display: block;
  background: #000;
}

/* Header artwork box: width clamps to design, height follows width (no overlap) */
.header-art {
  position: relative;
  width: min(100vw, var(--hdr-maxw));
  margin: 0 auto;
  aspect-ratio: var(--hdr-ratio);
  background: var(--hdr-art) no-repeat center top;
  background-size: cover;
  /* swap to contain on very small if you prefer */
  overflow: hidden;
}

.site-header,
.header-art {
  padding-top: var(--nav-h);
}

/* Children positioned by percentage anchors */
#logo {
  position: absolute;
  left: var(--logo-x);
  top: var(--logo-y);
  width: var(--logo-w);
  height: auto;
  z-index: 2;
}

#socials_vertical {
  position: absolute;
  left: var(--socials-x);
  top: var(--socials-y);
  width: var(--socials-w);
  height: auto;
  z-index: 2;
}

#socials_vertical img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  /* or 'cover' if you want them to fill tightly */
}

/* stage block */
.stage {
  position: absolute;
  left: var(--stage-x, 50%);
  top: var(--stage-y, 50%);
  transform: translate(-50%, -50%);
  width: clamp(40vw, var(--stage-w, 86vw), var(--stage-w-max));
  height: calc(clamp(200px, var(--stage-w, 92vw), var(--stage-w-max)) * var(--stage-ratio));
  z-index: 1;
}

/* stage width derived from mobile var; override per breakpoint */
:root {
  --stage-w: var(--stage-w);
}

/* keeps the token valid */

/* Rotator images */
.img-base,
.img-over {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Premiere banner and slider default hidden (mobile/tablet/desktop<1300) */
#sponsor_premiere {
  position: absolute;
  left: var(--s-premiere-x);
  top: var(--s-premiere-y);
  width: var(--s-premiere-w);
  height: auto;
  z-index: 2;
}

#sponsor_premiere .row-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  /* or space-between */
  gap: .75rem;
  flex-wrap: nowrap;
  /* <-- keep single row */
}

#sponsor_premiere .row-logos img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

#sponsor_carousel {
  display: none;
  z-index: 3;
}


/* ---------- Slider guts ---------- */
.slider {
  position: absolute;
  right: 0;
  top: 0;
  /* you can also anchor with percent if desired */
  width: var(--slide-w);
  height: 650px;
  overflow: hidden;
}

.slide-track {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: calc(var(--slide-h) * (var(--slide-n) * 2));
}

.slide {
  flex: 0 0 var(--slide-h);
  width: var(--slide-w);
  height: var(--slide-h);
}

.slide img {
  display: block;
  width: var(--slide-w);
  height: var(--slide-h);
}

@keyframes scroll-vertical {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, calc(-1 * var(--slide-h) * var(--slide-n)), 0);
  }
}

/* ---------- Breakpoints ---------- */

/* Tablet */
@media (min-width: 700px) {
  :root {
    --logo-x: 1%;
    --logo-y: 2%;
    --logo-w: max(25vw, 150px);
    --stage-x: 58%;
    --stage-y: 55%;
    --stage-w: min(75vw, 720px);
    --cell-min: 350px;
    --hdr-ratio: 1300 / 655;
  }
}

/* Desktop (layout targets, still hide slider & premiere) */
@media (min-width: 1024px) {
  :root {
    --logo-x: 0.5%;
    --logo-y: 3%;
    --logo-w: 250px;
    --stage-x: 57%;
    --stage-y: 58%;
    --stage-w: 840px;
    /* cap to design */
    --socials-x: 2%;
    --socials-y: 60%;
    --socials-w: 80px;
    --s-premiere-x: 35%;
    --s-premiere-y: .5%;
    --s-premiere-w: 450px;
    --cell-min: 500px;
  }

  .site-header,
  .header-art {
    padding-top: 0;
  }
}

/* Wide: show premiere + slider and start animation */
@media (min-width: 1300px) {
  :root {
    --logo-x: 0.5%;
    --logo-y: 2%;
    --logo-w: 400px;
    --stage-x: 57%;
    --stage-y: 62%;
    --stage-w: 840px;
    /* cap to design */
    --socials-x: 2%;
    --socials-y: 55%;
    --socials-w: 90px;
    --s-premiere-x: 35%;
    --s-premiere-y: .5%;
    --s-premiere-w: min(55vw, 650px);
    --cell-min: 650px;
  }

  #sponsor_premiere {
    display: block;
  }

  #sponsor_carousel {
    display: block;
  }

  #sponsor_carousel .slide-track {
    animation: scroll-vertical var(--slide-d) linear infinite;
    will-change: transform;
  }
}