/* SJ SMALLPAGE V38 — DARKER FESTIVAL PALETTE + CORRECT SVG GEOMETRY */

.v30-public{
  --sj-black:#09090b;
  --sj-white:#fff;
  --sj-paper:#f3f0eb;
  --sj-pink:#c71863;
  --sj-pink-deep:#8f0f45;
  --sj-yellow:#d6b900;
  --sj-yellow-soft:#e5cc3e;
  --sj-charcoal:#17171b;
  --sj-grey:#8e8b90;

  --fest-ink:var(--sj-black);
  --fest-cream:var(--sj-paper);
  --fest-pink:var(--sj-pink);
  --fest-yellow:var(--sj-yellow);
  --fest-blue:var(--sj-pink);
  --fest-teal:var(--sj-white);
  background:var(--sj-paper)!important;
}

/* Tone down the neon feel */
.v30-hero{
  background:
    radial-gradient(circle at 88% 14%,var(--sj-yellow-soft) 0 72px,transparent 73px),
    linear-gradient(90deg,#fff 0 58%,#ece8ea 58% 100%)!important;
}
.v30-brand span,
.v30-overline,
.v30-hero h1 em,
.v30-section-head>div>span,
.v30-featured>.v30-section-label{color:var(--sj-pink)!important}
.v30-head .nav-work,.v30-btn.dark{background:var(--sj-black)!important;border-color:var(--sj-black)!important}
.v30-btn.line{background:var(--sj-yellow-soft)!important}
.v30-hero-image{box-shadow:20px 22px 0 var(--sj-pink)!important}
.v30-hero-image:before{background:var(--sj-yellow-soft)!important}
.v30-hero-image:after{background:var(--sj-black)!important;color:var(--sj-yellow-soft)!important}

.v34-numbers{background:var(--sj-yellow-soft)!important}
.v35-ticker-group b{color:var(--sj-pink)!important}
.v34-takeover{background:var(--sj-black)!important}
.v34-enter-live{background:var(--sj-yellow-soft)!important}
.v30-fieldnotes,.v35-why-sj,.v30-footer{background:var(--sj-black)!important}
.v34-interlude{background:var(--sj-pink)!important}
.v30-work{background:var(--sj-pink-deep)!important}
.v30-work button{background:var(--sj-yellow-soft)!important}

/* Fix SVG stretching globally for our festival artwork */
.v37-festoon,
.v37-festival-landscape,
.v36-motion-band,
.v36-hero-stage,
.v36-work-svg{
  overflow:hidden;
}
.v37-festoon svg,
.v37-festival-landscape svg,
.v36-motion-band svg,
.v36-stage-svg,
.v36-work-svg svg{
  width:100%;
  height:100%;
  display:block;
}
.v37-festoon svg,
.v37-festival-landscape svg{
  object-fit:contain;
}
.v36-stage-svg{
  object-fit:cover;
}

/* Re-size SVG areas so geometry has room instead of getting squashed */
.v37-festoon{height:105px!important;top:2px!important}
.v37-festival-landscape{
  height:220px!important;
  display:flex;
  justify-content:center;
}
.v37-festival-landscape svg{
  max-width:1450px;
  margin:auto;
}
.v36-motion-band{height:180px!important}
.v36-motion-band svg{max-width:1600px;margin:auto}
.v36-hero-stage .v36-stage-svg{min-width:1200px;left:50%;position:absolute;transform:translateX(-50%)}
.v36-work-svg svg{min-width:1100px;position:absolute;left:50%;transform:translateX(-50%)}

/* Fix icon ribbon proportions */
.v37-icon-card svg{
  width:66px!important;
  height:66px!important;
  flex:0 0 66px;
  aspect-ratio:1/1;
  overflow:visible!important;
}
.v37-icon-card{
  min-height:72px;
  align-items:center!important;
}
.v37-icon-strip{
  padding:22px 0!important;
  background:#fff!important;
}
.v37-icon-track,.v37-icon-set{align-items:center!important}

/* Refine festival icons */
.v37-icon-card .line{stroke:var(--sj-black)!important}
.v37-icon-card .pink{fill:var(--sj-pink)!important}
.v37-icon-card .yellow{fill:var(--sj-yellow-soft)!important}
.v37-tent.yellow{fill:var(--sj-yellow-soft)!important}
.v37-tent.pink{fill:var(--sj-pink)!important}
.v37-stage-roof{fill:var(--sj-pink)!important}
.v37-stage-light{fill:var(--sj-yellow-soft)!important}
.v37-wheel,.v37-wheel-spoke{stroke:var(--sj-yellow-soft)!important}
.v37-bulb circle{fill:var(--sj-yellow-soft)!important}
.v37-bulb.pink circle{fill:var(--sj-pink)!important}

/* Make field scene cleaner */
.v37-ground{fill:#111114!important}
.v37-cloud{stroke:#33333a!important}
.v37-stage-frame{stroke:#f4f0e9!important}
.v37-crowd-dot{fill:#f7f4ee!important}

/* AAA PASS */
.v30-hero-image{position:relative!important;overflow:visible!important}
.v38-lanyard{
  position:absolute;
  width:188px;
  height:296px;
  top:-48px;
  right:-58px;
  z-index:8;
  pointer-events:none;
  transform:rotate(7deg);
  transform-origin:50% 0;
  animation:v38Lanyard 4.8s ease-in-out infinite;
  filter:drop-shadow(0 14px 14px rgba(0,0,0,.18));
}
.v38-lanyard svg{width:100%;height:100%;display:block;overflow:visible}
.v38-cord{
  fill:none;
  stroke:var(--sj-black);
  stroke-width:8;
  stroke-linecap:round;
}
.v38-cord-b{stroke:var(--sj-pink)}
.v38-clip{
  fill:#2a292d;
  stroke:#08080a;
  stroke-width:3;
}
.v38-pass>rect:first-child{
  fill:#f7f2e8;
  stroke:#0b0b0d;
  stroke-width:4;
}
.v38-pass-top{fill:var(--sj-pink)!important}
.v38-hole{fill:#111}
.v38-pass-small{
  font:800 9px 'Space Grotesk',sans-serif;
  letter-spacing:1.1px;
  fill:#fff;
}
.v38-pass-aaa{
  font:900 54px 'Space Grotesk',sans-serif;
  letter-spacing:-4px;
  fill:#0b0b0d;
}
.v38-pass-label{
  font:800 10px 'Space Grotesk',sans-serif;
  letter-spacing:.7px;
  fill:#0b0b0d;
}
.v38-pass-micro{
  font:700 6.8px 'Space Grotesk',sans-serif;
  letter-spacing:.6px;
  fill:#57545a;
}
.v38-pass-wave{
  fill:none;
  stroke:var(--sj-yellow);
  stroke-width:6;
  stroke-linecap:round;
}
@keyframes v38Lanyard{
  0%,100%{transform:rotate(6deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(4px)}
}

/* Motion graphics: smoother and more deliberate */
.v36-beams path{opacity:.045!important}
.v36-ring{stroke:var(--sj-charcoal)!important}
.v36-ring.r2{stroke:var(--sj-pink)!important}
.v36-wave-main{stroke:var(--sj-pink)!important}
.v36-wave-alt{stroke:#36353a!important}
.v36-eq rect{fill:var(--sj-yellow-soft)!important}

.wave1{stroke:var(--sj-pink)!important}
.wave2{stroke:#25252a!important}
.d1,.d3{fill:var(--sj-yellow-soft)!important}
.d2{fill:var(--sj-pink)!important}

.v36-work-beam{fill:var(--sj-yellow-soft)!important;opacity:.07!important}
.v36-work-beam.b2{fill:#fff!important}
.v36-work-ring{stroke:#fff!important}
.v36-work-ring.ring2{stroke:var(--sj-yellow-soft)!important}

/* Mobile */
@media(max-width:800px){
  .v37-festoon{height:70px!important}
  .v37-festival-landscape{height:125px!important}
  .v37-festival-landscape svg{min-width:800px;transform:translateX(-3%)}
  .v36-hero-stage .v36-stage-svg{min-width:900px}
  .v36-motion-band{height:120px!important}
  .v37-icon-card svg{width:48px!important;height:48px!important;flex-basis:48px}
  .v37-icon-card{min-height:52px}
  .v38-lanyard{
    width:128px;
    height:202px;
    top:-26px;
    right:-18px;
    transform:rotate(5deg);
  }
}
@media(max-width:440px){
  .v37-festival-landscape svg{min-width:680px;transform:translateX(-8%)}
  .v38-lanyard{
    width:108px;
    height:170px;
    top:-18px;
    right:-10px;
  }
}
@media(prefers-reduced-motion:reduce){
  .v38-lanyard{animation:none!important}
}
