/* =========================================================================
   Dream Big Festival
   ========================================================================= */

:root{
  --sky-top:#2B1B4F;
  --sky-mid:#8E3B8F;
  --sky-low:#F26A4B;
  --horizon:#FFC48A;
  --ink:#14101C;
  --paper:#FFF7EE;
  --gold:#F5B841;

  --accent:#F5B841;
  --accent-2:#F26A4B;
  --surface:#171122;
  --surface-2:#1B1526;
  --field:#120E1C;

  /* the button's shape, kept as tokens so it stays one decision */
  --btn-radius:0px;
  --btn-bw:1px;
  --btn-pad:12px 22px;
  --btn-track:.16em;
  --btn-shadow:none;
  --btn-bg:transparent;
  --btn-fg:var(--paper);
  --btn-bd:color-mix(in srgb, var(--paper) 50%, transparent);
  --btn-hover-bg:var(--paper);
  --btn-hover-fg:var(--ink);

  --display:'Anton', 'Arial Narrow', system-ui, sans-serif;
  --body:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:1120px;
  --pad:clamp(16px, 4vw, 48px);
}

*,*::before,*::after{ box-sizing:border-box; }
/* One curve for every hover and state change. Mixed easings across a page are
   what make it feel assembled rather than designed. */
:root{ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:.22s; --t-slow:.4s; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.6;
}
/* clip, not hidden, and on both boxes. overflow-x:hidden on body alone
   propagates to the viewport and lets an over-wide child widen the layout
   viewport on a phone — which is what made every sub-page lay out at 677px
   instead of 390. clip also does not create a scroll container, so the
   position:sticky elements inside keep working; hidden would break them. */
html, body{ overflow-x:clip; }
img{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ width:min(var(--wrap), 100% - var(--pad)*2); margin-inline:auto; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--accent); color:var(--ink); padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

.display{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:.01em;
  line-height:.95;
  font-size:clamp(30px, 4.8vw, 68px);
  margin:.08em 0 .28em;
  text-transform:uppercase;
}
.eyebrow{
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); margin:0 0 4px; font-weight:600;
}

/* =========================================================================
   HERO — one long image scrolling down the page
   -------------------------------------------------------------------------
   No pin, no sticky, no parallax on any plate. Every band is in ordinary
   document flow and travels with the page, which is the whole point: the
   visitor should read it as a single tall photograph, not as cards floating
   over a backdrop. The one exception is the sky, which drifts on its own so
   the top of the page is never a still.
   ========================================================================= */

.hero{ position:relative; background:#000; }

.scene{
  position:relative; display:block;
  /* Every vertical measurement in the hero derives from these three, so the
     plate overlaps stay exact at any width. */
  --skyH:128svh;
  --cityH:clamp(320px, 44vw, 900px);
  /* The city plate's own sky is ramped to nothing over its top 32%. That ramp
     must land entirely on the sky band — the moment any of it hangs below,
     the ramp composites against black instead and draws a hard line straight
     across the page. Lifting by 38% keeps a margin. */
  --cityLift:calc(var(--cityH) * -0.38);
}

.band{ position:relative; width:100%; }

/* ---- 1 · sky ------------------------------------------------------------ */

.band--sky{
  height:var(--skyH);
  overflow:hidden;
  display:grid; place-items:center;
  background:var(--sky-top);
}

.sky{ position:absolute; inset:0; overflow:hidden; }

.sky__base{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* max-width:none is load-bearing: the global img{max-width:100%} reset
     clamps the computed width and silently kills the fill. */
  max-width:none;
  object-fit:cover; object-position:50% 46%;
}

/* Two drifting copies at different speeds and amplitudes. Both use the
   mirrored 2x tile, and both ping-pong rather than wrap, so there is never a
   seam and never a restart jump. */
.sky__drift, .sky__clouds{
  position:absolute; top:-6%; left:-30%;
  width:160%; height:112%;
  background-repeat:no-repeat; background-position:center;
  background-size:100% 100%;
  pointer-events:none;
}

.sky__drift{
  background-image:url("../plates/sky-drift.webp");
  opacity:.5;
  /* held off the horizon so the skyline edge stays crisp */
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 52%, transparent 86%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 52%, transparent 86%);
  animation:skyDrift 78s ease-in-out infinite alternate;
}

.sky__clouds{
  background-image:url("../plates/sky-clouds.webp");
  mix-blend-mode:soft-light;
  opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 90%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 58%, transparent 90%);
  animation:skyClouds 47s ease-in-out infinite alternate;
}

/* slow warm breathing where the sun is */
.sky__glow{
  position:absolute; left:50%; bottom:-14%;
  width:130%; height:70%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,
    rgba(255,150,96,.42) 0%, rgba(255,110,110,.18) 42%, rgba(255,110,110,0) 72%);
  mix-blend-mode:screen;
  animation:skyGlow 13s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes skyDrift{
  from{ transform:translate3d(0,0,0) scale(1.00); }
  to  { transform:translate3d(-9%,-1.4%,0) scale(1.045); }
}
@keyframes skyClouds{
  from{ transform:translate3d(3%,.8%,0) scale(1.03); }
  to  { transform:translate3d(-7%,-.6%,0) scale(1.00); }
}
@keyframes skyGlow{
  from{ opacity:.42; transform:translateX(-50%) scaleY(.94); }
  to  { opacity:.78; transform:translateX(-50%) scaleY(1.06); }
}

/* the title — same face as every other heading on the site */
.titleblock{
  position:relative; z-index:3;
  margin:0; margin-bottom:16svh;
  display:grid; justify-items:center; gap:.04em;
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.88;
  text-align:center;
  color:var(--paper);
  text-shadow:0 2px 40px rgba(12,6,20,.75), 0 1px 3px rgba(12,6,20,.5);
}
.titleblock__l1{ font-size:clamp(52px, 8.6vw, 132px); letter-spacing:-.008em; }
.titleblock__l2{ font-size:clamp(52px, 8.6vw, 132px); letter-spacing:-.008em; }
.titleblock__meta{
  margin-top:.9em;
  display:flex; align-items:center; justify-content:center;
  gap:.9em; flex-wrap:wrap;
  font-family:var(--body);
  font-size:clamp(10px,1.05vw,13px);
  letter-spacing:.34em; text-indent:.34em;
  font-weight:600;
  color:color-mix(in srgb, var(--paper) 72%, transparent);
}
.titleblock__pres{ letter-spacing:.34em; }
/* the presenting credit is set in the same type as the rest of the line, so
   it reads as a line of copy rather than a logo dropped into one */
.titleblock__by{ color:var(--paper); }
.titleblock__sep{ opacity:.5; }

.scrollcue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:3;
  margin:0; font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 60%, transparent);
}

/* ---- 2 · the city ------------------------------------------------------- */

.band--city{
  height:var(--cityH);
  margin-top:var(--cityLift);
  z-index:2;
}
.cityplate{
  position:absolute; inset:0;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover; object-position:50% 50%;
  z-index:2;
}

/* "Created by" rises from behind the towers and settles just above the
   roofline, where it then stays for good — it is part of the image. */
.createdby{
  position:absolute; left:50%; top:9%;
  transform:translateX(-50%);
  z-index:1;                     /* behind the buildings, on purpose */
  margin:0; white-space:nowrap;
  font-family:var(--display);
  font-size:clamp(18px,2.6vw,36px);
  letter-spacing:.4em; text-indent:.4em;
  text-transform:uppercase;
  /* the same white as the title, and the same shadow, so it reads as bright
     against the sky rather than washing out into it */
  color:var(--paper);
  text-shadow:0 2px 40px rgba(12,6,20,.75), 0 1px 3px rgba(12,6,20,.5);
  opacity:0;
}

/* ---- 3 · the transition, and the partners laid on the image ------------- */

/* Not a section — just the black the two plates fade into and out of, and
   cut to the same length as the run between the stage and the performer, so
   the page has one rhythm rather than two. */
.band--fade{ height:3svh; background:#000; z-index:1; }

/* The marks run on a track that starts a third of the way down the city plate
   and finishes near the foot of the stage, so they cross the black instead of
   sitting in a block of their own. Absolute, so they add no page height. */
.brandtrack{
  position:absolute; left:0; right:0; z-index:5;
  top:calc(var(--skyH) + var(--cityLift) + var(--cityH) * 0.34);
  /* Height comes from the marks, not from the box. Sharing a fixed box out
     between five rows looked even until you noticed the marks are wildly
     different heights — a square badge next to a wordmark — and the tall ones
     ate their neighbours' room. A fixed gap between rows is the thing that
     actually reads as even. */
  height:auto;
  --brand-gap:clamp(64px, 10svh, 140px);
  --brand-lead:clamp(52px, 9svh, 130px);
  display:flex; flex-direction:column; gap:var(--brand-gap);
  /* the marks fly in from beyond the edge; without this they widen the
     document and the whole page gets a horizontal scrollbar */
  overflow:hidden;
  pointer-events:none;
}
.brandrow{
  flex:0 0 auto;
  display:flex; align-items:center;
  padding:0 clamp(16px, 6vw, 120px);
}
/* an extra beat after the opening mark, so the second one is still arriving
   at the fold while "Created by" is in full view */
.brandrow:first-child{ margin-bottom:var(--brand-lead); }
.brandrow--l{ justify-content:flex-start; }
.brandrow--r{ justify-content:flex-end; }
.brand{
  /* No shadow, no blur, no lift. A shadow is what makes a mark read as a
     sticker sitting on top of the page instead of part of the image. */
  filter:none;
  opacity:0;
  display:block; text-decoration:none;
  /* the track is pointer-events:none so the black never eats a click; the
     marks themselves have to opt back in */
  pointer-events:auto;
  transition:transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease);
}
.brand img{ width:100%; height:auto; display:block; }
.brand::after{
  content:'What they run on site \2197';
  display:block; margin-top:.9em;
  font-size:clamp(9px,.78vw,11px); letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--accent);
  opacity:0; transform:translateY(-6px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.brandrow--r .brand::after{ text-align:right; }
.brand:hover, .brand:focus-visible{
  transform:translateY(-6px);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
.brand:hover::after, .brand:focus-visible::after{ opacity:1; transform:none; }
.brand:focus-visible{ outline:2px solid var(--accent); outline-offset:14px; }
@media (hover:none){
  .brand::after{ opacity:.85; transform:none; }
}

/* ---- 4 · the stage ------------------------------------------------------ */

.band--stage{
  height:clamp(560px, 92vw, 1560px);
  background:#000;
  overflow:hidden;
  z-index:1;
}
.band--stage img{
  position:absolute; inset:0;
  width:100%; height:100%;
  max-width:none;
  object-fit:cover; object-position:50% 42%;
}

/* ---- the bar --------------------------------------------------------- */

.topbar{
  position:absolute; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:22px var(--pad);
}
.topbar__mark{
  font-family:var(--display); letter-spacing:.08em; text-transform:uppercase;
  font-size:clamp(14px,1.5vw,19px); text-decoration:none; color:var(--paper);
}
.topbar__nav{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); }
.topbar__nav a{
  text-decoration:none; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; opacity:.82;
  transition:opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.topbar__nav a:hover{ opacity:1; color:var(--accent); }
.topbar__cta{
  color:var(--ink); background:var(--paper);
  padding:10px 18px;
}
.topbar__cta:hover{ background:var(--accent); color:var(--ink); }

/* =========================================================================
   ARTISTS
   ========================================================================= */

.artists{ position:relative; background:var(--ink); }
/* the deep purple from the hero resolves into the photograph */
.artists__fade{
  position:absolute; inset:0 0 auto 0; height:34%;
  background:linear-gradient(to bottom, #000 0%, rgba(8,5,14,.82) 30%, rgba(21,12,36,.42) 62%, rgba(21,12,36,0) 100%);
  z-index:2; pointer-events:none;
}
.artists__intro{ z-index:3; }
.artists__cover{ position:relative; height:70svh; overflow:hidden; }
.artists__cover img{
  width:100%; height:100%; object-fit:cover; object-position:68% 38%;
}
.artists__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(20,16,28,.55) 0%,
    rgba(20,16,28,.12) 32%,
    rgba(20,16,28,.72) 78%,
    var(--ink) 100%);
}
.artists__intro{
  position:absolute; left:var(--pad); bottom:clamp(40px,8vw,90px);
  max-width:min(560px, 70vw);
}

.artists__list{ padding:clamp(30px,6vw,70px) 0 clamp(60px,10vw,120px); }
.lineup{ list-style:none; margin:0; padding:0; }
.lineup--head{
  display:grid; gap:clamp(6px,1.2vw,14px);
  padding-bottom:clamp(24px,4vw,44px);
  margin-bottom:clamp(24px,4vw,44px);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent);
}
.lineup--head li{
  font-family:var(--display);
  font-size:clamp(34px,7.6vw,104px);
  line-height:.98; letter-spacing:.01em; text-transform:uppercase;
  color:var(--paper);
}
.lineup--rest{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:clamp(10px,1.6vw,20px) clamp(18px,3vw,40px);
}
.lineup--rest li{
  font-size:clamp(15px,1.5vw,20px); font-weight:500; color:var(--paper);
}
.lineup__more{
  margin-top:clamp(28px,5vw,56px);
  font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 55.0%, transparent);
}

/* =========================================================================
   PASSES
   ========================================================================= */

.passes{
  position:relative;
  padding:clamp(70px,11vw,140px) 0 clamp(80px,12vw,150px);
  background:var(--ink);
}
.passes__lede{
  max-width:52ch; margin:0 0 clamp(34px,5vw,58px);
  color:color-mix(in srgb, var(--paper) 72%, transparent);
}
.passes__includes{
  margin:0 0 clamp(34px,5vw,60px);
  padding:clamp(20px,2.6vw,28px) 0 0;
  border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.passes__includes h3{
  margin:0 0 14px; font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:color-mix(in srgb, var(--paper) 50%, transparent); font-weight:600;
}
.passes__includes ul{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px clamp(20px,3.4vw,44px);
  grid-template-columns:repeat(auto-fit, minmax(238px,1fr));
}
.passes__includes li{ font-size:13.5px; color:color-mix(in srgb, var(--paper) 78%, transparent); }

/* ---- tiers: a rate card, not a set of friendly boxes -------------------- */
.cards{ border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); }

.tier{
  display:grid; gap:clamp(10px,1.6vw,26px);
  grid-template-columns:1fr;
  padding:clamp(24px,3vw,34px) 0;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent);
  transition:background .25s ease;
}
@media (min-width:900px){
  .tier{ grid-template-columns:minmax(190px,1.05fr) minmax(140px,.75fr) 2.5fr auto; align-items:start; }
}
.tier:hover{ background:color-mix(in srgb, var(--paper) 2.8%, transparent); }

.tier__kicker{
  margin:0 0 6px; font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 42%, transparent); font-weight:600;
}
.tier__name{
  margin:0; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(28px,3.4vw,46px); line-height:.95; letter-spacing:-.005em;
  color:var(--paper);
}
.tier__days{ margin:8px 0 0; font-size:12.5px; color:color-mix(in srgb, var(--paper) 50%, transparent); }

.tier__price{
  margin:0; font-family:var(--display);
  font-size:clamp(34px,4.4vw,60px); line-height:.95;
  color:var(--paper); font-variant-numeric:tabular-nums;
}
.tier__unit{
  display:block; margin-top:8px;
  font-family:var(--body); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:color-mix(in srgb, var(--paper) 38%, transparent); font-weight:600;
}

.tier__list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.tier__list li{
  font-size:13.5px; line-height:1.5; color:color-mix(in srgb, var(--paper) 82%, transparent);
  padding:5px 0;
  border-top:1px solid color-mix(in srgb, var(--paper) 7.0%, transparent);
}
.tier__list li:first-child{
  border-top:0; padding-top:0;
  color:color-mix(in srgb, var(--paper) 50%, transparent);
}

.tier__act{ align-self:start; }
.btn{
  display:inline-block;
  font:inherit; font-weight:700; letter-spacing:var(--btn-track); text-transform:uppercase;
  font-size:10.5px; cursor:pointer; text-decoration:none;
  padding:var(--btn-pad); border-radius:var(--btn-radius);
  border:var(--btn-bw) solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  box-shadow:var(--btn-shadow);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--btn-hover-bg); color:var(--btn-hover-fg); border-color:var(--btn-hover-bg); }
.btn--ghost{ border-color:color-mix(in srgb, var(--paper) 28.0%, transparent); color:color-mix(in srgb, var(--paper) 78%, transparent); }

.passes__note{
  margin-top:clamp(26px,4vw,44px);
  font-size:12.5px; color:color-mix(in srgb, var(--paper) 45%, transparent);
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.footer{ background:var(--ink); border-top:1px solid color-mix(in srgb, var(--paper) 12%, transparent); padding:clamp(40px,6vw,72px) 0 28px; }
.footer__grid{
  display:grid; gap:clamp(24px,4vw,48px);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:820px){ .footer__grid{ grid-template-columns:1.2fr .7fr 1.5fr; } }
.footer__mark{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.07em;
  font-size:20px; margin:0 0 6px;
}
.footer__meta{ margin:0; font-size:13.5px; color:color-mix(in srgb, var(--paper) 55.0%, transparent); }
.footer__nav{ display:grid; gap:8px; }
.footer__nav a{
  text-decoration:none; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:color-mix(in srgb, var(--paper) 70%, transparent);
}
.footer__nav a:hover{ color:var(--accent); }
.footer__partners{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,2.4vw,30px);
}
.footer__partners img{
  height:clamp(20px,2.2vw,28px); width:auto;
  filter:grayscale(1) brightness(1.7) contrast(.75);
  opacity:.55; transition:opacity .25s ease, filter .25s ease;
}
.footer__partners img:hover{ opacity:.95; filter:grayscale(1) brightness(2); }
.footer__legal{
  margin:clamp(34px,5vw,56px) 0 0;
  text-align:center; font-size:12px; color:color-mix(in srgb, var(--paper) 34%, transparent);
}

/* =========================================================================
   Reveals + responsive + reduced motion
   ========================================================================= */

.reveal{ opacity:0; transform:translateY(18px); }
.no-js-motion .reveal{ opacity:1; transform:none; }

@media (max-width:900px){
  .scene{ --skyH:100svh; --cityH:clamp(300px,58vw,520px); }
  .titleblock{ margin-bottom:10svh; }
  .titleblock__l1{ font-size:clamp(34px,11vw,64px); }
  .titleblock__l2{ font-size:clamp(24px,7.6vw,44px); }
  .createdby{ font-size:clamp(15px,4.4vw,24px); letter-spacing:.26em; text-indent:.26em; top:7%; }
  .brandrow{ padding:0 clamp(14px,8vw,60px); }
  .band--fade{ height:6svh; }
  /* the stage has to outlast the track: on a phone the marks are relatively
     taller than the bands, so the last one lands past a desktop-proportioned
     stage and hangs into the artists section */
  .band--stage{ height:clamp(980px, 265vw, 1320px); }
  .topbar__nav a:not(.topbar__cta):not(.topbar__bag){ display:none; }
  .artists__cover{ height:66svh; }
}

@media (prefers-reduced-motion:reduce){
  .brandrow{ padding:clamp(14px,3vw,34px) clamp(16px,6vw,120px); }
  .brand{ transform:none !important; opacity:1 !important; width:min(240px,40vw) !important; }
  .createdby{ opacity:1 !important; transform:translateX(-50%) !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .scrollcue span{ animation:none; }
  .sky__drift, .sky__clouds, .sky__glow{ animation:none !important; }
  *{ scroll-behavior:auto !important; }
}

/* =========================================================================
   PASSES DETAIL PAGE (passes.html)
   ========================================================================= */

.pagebar{
  position:sticky; top:0; z-index:60;
  background:rgba(20,16,28,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 10%, transparent);
}
.pagebar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 0;
}
.pagebar__mark{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:16px; text-decoration:none;
}
.pagebar__nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,28px); }
.pagebar__nav a{
  text-decoration:none; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:600; color:color-mix(in srgb, var(--paper) 72%, transparent);
}
.pagebar__nav a:hover{ color:var(--accent); }
.pagebar__back{ color:var(--accent) !important; }

.pagehead{
  position:relative; overflow:clip;
  min-height:38svh; display:flex; align-items:flex-end;
  padding:clamp(46px,7vw,84px) 0 clamp(26px,3.6vw,44px);
}
.pagehead__sky{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:cover; object-position:50% 62%;
}
.pagehead__land{
  position:absolute; left:50%; bottom:-6%;
  width:190%; max-width:none; height:auto;
  transform:translateX(-50%);
  opacity:.92;
}
/* the bag and checkout pages want the work, not the view */
.pagehead--slim{ min-height:34svh; padding:clamp(56px,8vw,96px) 0 clamp(24px,3.4vw,40px); }
.pagehead--slim .pagehead__land{ width:132%; bottom:-2%; opacity:.62; }
.pagehead::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:58%;
  background:linear-gradient(to bottom, rgba(10,7,16,0), rgba(10,7,16,.72) 46%, var(--ink) 100%);
  z-index:1;
}
.pagehead__in{ position:relative; z-index:2; }
.pagehead__title{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,58px); line-height:1;
  margin:.08em 0 .3em;
  color:#FFF6E6;
  filter:drop-shadow(0 2px 0 rgba(74,20,44,.85)) drop-shadow(0 14px 26px rgba(22,8,32,.7));
}
.pagehead__lede{
  margin:0; max-width:46ch; font-size:clamp(14px,1.3vw,17px);
  color:color-mix(in srgb, var(--paper) 90%, transparent);
  text-shadow:0 2px 14px rgba(20,10,30,.7);
}

.passdetail{ padding:clamp(50px,8vw,96px) 0 clamp(20px,3vw,36px); background:var(--ink); }
.passdetail__grid{ border-top:1px solid color-mix(in srgb, var(--paper) 22%, transparent); }
.pcard{
  display:flex; flex-direction:column;
  padding:clamp(20px,2.2vw,28px);
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--paper) 15%, transparent);
  background:color-mix(in srgb, var(--paper) 4%, transparent);
}
.pcard--vip{ border-color:color-mix(in srgb, var(--paper) 26%, transparent); }
.pcard--backstage{
  border-color:rgba(245,184,65,.55);
  background:linear-gradient(168deg, rgba(245,184,65,.10), color-mix(in srgb, var(--paper) 4%, transparent) 55%);
}
.pcard__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}
.pcard__name{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(19px,1.9vw,25px); margin:0 0 1px;
}
.pcard__price{
  font-family:var(--display); font-size:clamp(26px,2.7vw,36px);
  line-height:1; margin:0; color:var(--accent); white-space:nowrap;
}

.compare{ padding:clamp(50px,8vw,96px) 0; background:var(--ink); }
.compare__scroll{
  margin-top:clamp(20px,3vw,34px);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid color-mix(in srgb, var(--paper) 13%, transparent); border-radius:14px;
}
.ctable{ width:100%; border-collapse:collapse; font-size:13px; min-width:820px; }
.ctable th, .ctable td{ padding:11px 12px; text-align:center; }
.ctable thead th{
  position:sticky; top:0; z-index:2;
  background:#1b1626;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  vertical-align:bottom;
}
.ctable__nm{
  display:block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.05em; font-size:14px; color:var(--paper);
}
.ctable__pr{ display:block; font-size:11px; color:var(--accent); margin-top:2px; }
.ctable__feat{
  text-align:left; font-weight:500; color:color-mix(in srgb, var(--paper) 82%, transparent);
  min-width:280px;
}
.ctable tbody tr{ border-bottom:1px solid color-mix(in srgb, var(--paper) 7.0%, transparent); }
.ctable__group th{
  text-align:left; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); background:color-mix(in srgb, var(--paper) 4.5%, transparent); padding-top:14px; padding-bottom:14px;
}
.ctable .is-yes{ color:var(--accent); font-size:15px; }
.ctable .is-no{ color:color-mix(in srgb, var(--paper) 24%, transparent); }
.ctable .is-val{ color:var(--paper); font-weight:600; font-size:12.5px; }
.compare__hint{
  margin:12px 0 0; font-size:12px; color:color-mix(in srgb, var(--paper) 40%, transparent);
}
@media (min-width:900px){ .compare__hint{ display:none; } }

.faq{ padding:clamp(40px,7vw,90px) 0 clamp(60px,10vw,120px); background:var(--ink); }
.faq__list{ margin-top:clamp(18px,3vw,30px); display:grid; gap:2px; }
.faq__item{
  border-top:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  padding:6px 0;
}
.faq__item:last-of-type{ border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent); }
.faq__item summary{
  cursor:pointer; list-style:none;
  padding:16px 30px 16px 0; position:relative;
  font-size:clamp(15px,1.4vw,18px); font-weight:600;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--accent); font-size:20px; line-height:1;
}
.faq__item[open] summary::after{ content:"\2212"; }
.faq__item p{
  margin:0 0 18px; max-width:64ch;
  color:color-mix(in srgb, var(--paper) 72%, transparent); font-size:14.5px;
}

/* =========================================================================
   SHARED SUB-PAGE FURNITURE
   ========================================================================= */

.page{ background:var(--ink); }
.sect{ padding:clamp(38px,5.6vw,70px) 0 clamp(44px,6.6vw,84px); }

.pagebar__cta{
  color:var(--ink) !important; background:var(--paper);
  padding:9px 16px;
}
.pagebar__cta:hover{ background:var(--accent); }
.pagebar__nav a[aria-current="page"]{ color:var(--accent); }

/* ---- lineup ------------------------------------------------------------ */
.day{ padding:clamp(30px,5vw,56px) 0; border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.day:first-child{ border-top:0; padding-top:0; }
.day__head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(20px,3vw,34px); }
.day__name{
  margin:0; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(30px,4.4vw,60px); line-height:1; color:var(--paper);
}
.day__meta{ margin:0; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 42%, transparent); }
.day__stages{
  display:grid; gap:clamp(20px,3vw,38px);
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
}
.stage__name{
  margin:0 0 12px; padding-bottom:9px;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); font-weight:700;
}
.stage__acts{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.stage__acts li{ font-size:14.5px; color:color-mix(in srgb, var(--paper) 80%, transparent); }
.stage__acts li.is-head{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(17px,1.7vw,22px); color:var(--paper); letter-spacing:.01em;
  margin-bottom:2px;
}

/* ---- merch ------------------------------------------------------------- */
.shop{ display:grid; gap:clamp(20px,3vw,40px); }
.prod{
  display:grid; gap:clamp(18px,3vw,40px);
  grid-template-columns:1fr;
  padding-bottom:clamp(28px,4vw,48px);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent);
}
@media (min-width:760px){ .prod{ grid-template-columns:minmax(240px,.85fr) 1.4fr; align-items:start; } }
.prod__img{ background:#1b1620; }
.prod__img img{ width:100%; height:auto; display:block; }
.prod__top{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding-bottom:12px; border-bottom:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent);
}
.prod__name{
  margin:0; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(22px,2.6vw,34px); line-height:1; color:var(--paper);
}
.prod__price{
  margin:0; font-family:var(--display); font-size:clamp(22px,2.6vw,34px);
  line-height:1; color:var(--paper); font-variant-numeric:tabular-nums;
}
.prod__note{ margin:14px 0 20px; font-size:14px; color:color-mix(in srgb, var(--paper) 72%, transparent); max-width:52ch; }
.prod__sizes{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.sizebtn{
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.1em;
  padding:9px 14px; cursor:pointer; border-radius:0;
  border:1px solid color-mix(in srgb, var(--paper) 30%, transparent); background:transparent;
  color:color-mix(in srgb, var(--paper) 80%, transparent);
  transition:border-color .18s ease, color .18s ease;
}
.sizebtn:hover{ border-color:var(--paper); color:var(--paper); }
.sizebtn.is-on{ border-color:var(--paper); background:var(--paper); color:var(--ink); }

/* ---- gallery ----------------------------------------------------------- */
.gal{ display:grid; gap:clamp(12px,1.8vw,22px); grid-template-columns:1fr; }
@media (min-width:820px){
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal__item--wide{ grid-column:1 / -1; }
}
.gal__item{ margin:0; }
.gal__item img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; }
.gal__item--wide img{ aspect-ratio:21/9; }
.gal__item figcaption{
  margin-top:10px; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:color-mix(in srgb, var(--paper) 50%, transparent);
}

/* ---- info -------------------------------------------------------------- */
.info__venue{
  margin:0 0 clamp(26px,4vw,44px); padding-bottom:clamp(20px,3vw,30px);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(18px,2.2vw,28px); color:var(--paper); letter-spacing:.02em;
}
.info{ display:grid; gap:0; }
.info__row{
  display:grid; gap:6px clamp(20px,4vw,52px);
  grid-template-columns:1fr;
  padding:clamp(20px,2.8vw,30px) 0;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}
@media (min-width:820px){ .info__row{ grid-template-columns:minmax(200px,.8fr) 2.2fr; } }
.info__h{
  margin:0; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(16px,1.7vw,22px); color:var(--paper); letter-spacing:.02em;
}
.info__p{ margin:0; font-size:14.5px; color:color-mix(in srgb, var(--paper) 76%, transparent); max-width:62ch; }

/* ---- explore band ------------------------------------------------------ */
.explore{ background:var(--ink); padding:clamp(20px,3vw,40px) 0 clamp(60px,9vw,110px); }
.explore__grid{
  display:grid; gap:0; grid-template-columns:1fr;
  border-top:1px solid color-mix(in srgb, var(--paper) 20%, transparent);
}
@media (min-width:760px){ .explore__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .explore__grid{ grid-template-columns:repeat(4,1fr); } }
.xcard{
  display:block; text-decoration:none;
  padding:clamp(24px,3vw,36px) clamp(16px,2vw,26px) clamp(30px,4vw,44px) 0;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent);
  transition:background .22s ease;
}
@media (min-width:760px){
  .xcard{ border-right:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent); padding-left:clamp(16px,2vw,26px); }
  .xcard:nth-child(2n){ border-right:0; }
}
@media (min-width:1100px){
  .xcard{ border-right:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent); }
  .xcard:nth-child(2n){ border-right:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent); }
  .xcard:last-child{ border-right:0; }
  .xcard:first-child{ padding-left:0; }
}
.xcard:hover{ background:color-mix(in srgb, var(--paper) 4%, transparent); }
.xcard__k{
  display:block; font-size:10px; letter-spacing:.24em; font-weight:700;
  color:color-mix(in srgb, var(--paper) 34%, transparent); margin-bottom:14px;
}
.xcard__t{
  display:block; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(22px,2.4vw,32px); line-height:1; color:var(--paper); margin-bottom:10px;
}
.xcard__d{ display:block; font-size:13.5px; color:color-mix(in srgb, var(--paper) 62%, transparent); max-width:26ch; }
.lineup__more a, .passes__more a{
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 35%, transparent); padding-bottom:3px;
}
.lineup__more a:hover, .passes__more a:hover{ border-bottom-color:var(--paper); }

/* =========================================================================
   BAG, CHECKOUT AND THE DEMO NOTICE (cart.html, checkout.html)
   -------------------------------------------------------------------------
   Same rate-card language as the passes: sharp corners, hairline rules,
   tabular numerals. A basket should feel like a receipt, not a toy.
   ========================================================================= */

.pagebar__bag{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; text-decoration:none; opacity:.82;
}
.pagebar__bag:hover, .topbar__bag:hover{ opacity:1; color:var(--accent); }
.pagebar__bag span, .topbar__bag span{
  min-width:18px; height:18px; padding:0 5px;
  display:inline-grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--paper) 34%, transparent);
  font-size:10px; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.pagebar__bag.has-items span, .topbar__bag.has-items span{
  background:var(--accent); border-color:var(--accent); color:var(--ink);
}
.topbar__bag{
  display:inline-flex; align-items:center; gap:7px;
  text-decoration:none; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600; opacity:.82;
}

.checkout__grid{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){
  .checkout__grid{ grid-template-columns:1.55fr .95fr; }
  .summary{ position:sticky; top:96px; }
}

/* ---- line items ---------------------------------------------------------- */

.bag{ list-style:none; margin:0; padding:0; border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.bagline{
  display:grid; gap:clamp(12px,2vw,22px); align-items:center;
  grid-template-columns:74px 1fr auto auto;
  padding:clamp(16px,2.4vw,24px) 0;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}
.bagline__fig{
  width:74px; height:74px; overflow:hidden;
  background:var(--surface-2); display:grid; place-items:center;
}
.bagline__fig img{ width:100%; height:100%; object-fit:cover; }
.bagline__tag{
  font-family:var(--display); text-transform:uppercase;
  font-size:11px; letter-spacing:.14em; color:color-mix(in srgb, var(--paper) 60%, transparent);
  text-align:center; padding:0 6px;
}
.bagline__name{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(17px,1.9vw,23px); margin:0; line-height:1.05;
}
.bagline__var{ margin:5px 0 0; font-size:13px; color:color-mix(in srgb, var(--paper) 60%, transparent); }
.bagline__rm{
  margin-top:9px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 45%, transparent); text-decoration:underline; text-underline-offset:3px;
}
.bagline__rm:hover{ color:var(--accent); }
.bagline__price{
  margin:0; font-family:var(--display); font-size:clamp(17px,2vw,24px);
  font-variant-numeric:tabular-nums; text-align:right; min-width:96px;
}

.qty{ display:inline-flex; align-items:center; border:1px solid color-mix(in srgb, var(--paper) 28.0%, transparent); }
.qty button{
  width:34px; height:34px; border:0; background:none; color:var(--paper);
  font:inherit; font-size:16px; line-height:1; cursor:pointer;
}
.qty button:hover{ background:color-mix(in srgb, var(--paper) 12%, transparent); }
.qty span{
  min-width:34px; text-align:center; font-variant-numeric:tabular-nums;
  border-inline:1px solid color-mix(in srgb, var(--paper) 28.0%, transparent); line-height:34px;
}

.bag__cont{ margin-top:26px; font-size:13px; color:color-mix(in srgb, var(--paper) 60%, transparent); }
.bag__cont a{ color:inherit; }

.bag__empty{ border:1px solid color-mix(in srgb, var(--paper) 16%, transparent); padding:clamp(28px,5vw,56px); }
.bag__empty h2{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(24px,3.4vw,40px); margin:0 0 10px;
}
.bag__empty p{ margin:0 0 18px; color:color-mix(in srgb, var(--paper) 66%, transparent); max-width:46ch; }
.bag__empty-act{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---- the summary --------------------------------------------------------- */

.summary{ border:1px solid color-mix(in srgb, var(--paper) 20%, transparent); padding:clamp(20px,2.6vw,30px); background:var(--surface); }
.summary__h{
  font-family:var(--display); text-transform:uppercase; font-weight:400;
  font-size:clamp(15px,1.6vw,19px); letter-spacing:.06em;
  margin:0 0 16px; padding-bottom:14px;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.summary__items{ list-style:none; margin:0 0 16px; padding:0; font-size:13.5px; }
.summary__items li{
  display:grid; grid-template-columns:1fr auto auto; gap:12px;
  padding:7px 0; color:color-mix(in srgb, var(--paper) 80%, transparent);
}
.summary__items em{ font-style:normal; color:color-mix(in srgb, var(--paper) 45%, transparent); }
.summary__q{ font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--paper) 45%, transparent); }
.summary__rows{ margin:0; padding:14px 0 0; border-top:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent); }
.summary__rows div{ display:flex; justify-content:space-between; gap:16px; padding:6px 0; }
.summary__rows dt{ font-size:13.5px; color:color-mix(in srgb, var(--paper) 70%, transparent); }
.summary__rows dt span{ display:block; font-size:11px; color:color-mix(in srgb, var(--paper) 38%, transparent); }
.summary__rows dd{ margin:0; font-variant-numeric:tabular-nums; font-size:14px; }
.summary__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  margin:16px 0 20px; padding-top:16px;
  border-top:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 65%, transparent);
}
.summary__total strong{
  font-family:var(--display); font-weight:400; letter-spacing:.01em;
  font-size:clamp(26px,3.2vw,38px); color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.summary__fine{ margin:16px 0 0; font-size:11.5px; line-height:1.5; color:color-mix(in srgb, var(--paper) 42%, transparent); }

.btn--full{ display:block; width:100%; text-align:center; padding:15px 22px;
  background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--full:hover{ background:var(--accent); border-color:var(--accent); }
.btn--full.is-off{ pointer-events:none; opacity:.35; }

/* ---- the form ------------------------------------------------------------ */

.steps{
  display:flex; flex-wrap:wrap; gap:clamp(14px,3vw,38px);
  list-style:none; margin:0 0 clamp(28px,4vw,46px); padding:0 0 16px;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 42%, transparent); counter-reset:s;
}
.steps li{ counter-increment:s; }
.steps li::before{ content:counter(s,decimal-leading-zero) ' '; color:var(--accent); }

.co{ margin:0; }
.co__block{
  border:0; border-top:1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  margin:0; padding:clamp(22px,3vw,34px) 0;
}
.co__block:first-of-type{ border-top:0; padding-top:0; }
.co__block legend{
  padding:0; font-family:var(--display); font-weight:400;
  text-transform:uppercase; font-size:clamp(18px,2.2vw,26px);
  letter-spacing:.03em; margin-bottom:18px;
}
.fld{ margin-bottom:16px; }
.fld label{
  display:block; margin-bottom:7px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 55.0%, transparent);
}
.fld input{
  width:100%; font:inherit; font-size:15px; color:var(--paper);
  background:var(--field); border:1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  border-radius:0; padding:12px 14px;
}
.fld input:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.fld input::placeholder{ color:color-mix(in srgb, var(--paper) 28.0%, transparent); }
.fld2, .fld3{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width:620px){
  .fld2{ grid-template-columns:1fr 1fr; }
  .fld3{ grid-template-columns:1.4fr .8fr .8fr; }
}

.opt{ display:grid; gap:0; border:1px solid color-mix(in srgb, var(--paper) 20%, transparent); }
.opt__row{
  display:flex; align-items:flex-start; gap:14px; cursor:pointer;
  padding:16px 18px; border-bottom:1px solid color-mix(in srgb, var(--paper) 14.0%, transparent);
}
.opt__row:last-child{ border-bottom:0; }
.opt__row:hover{ background:color-mix(in srgb, var(--paper) 4%, transparent); }
.opt__row input{ margin-top:3px; accent-color:var(--accent); width:16px; height:16px; }
.opt__row strong{
  display:block; font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:.05em; font-size:15px;
}
.opt__row em{ display:block; font-style:normal; font-size:13px; color:color-mix(in srgb, var(--paper) 55.0%, transparent); margin-top:3px; }
.opt__row--tight{ border:1px solid color-mix(in srgb, var(--paper) 20%, transparent); margin:20px 0; }

.co__ship{ margin-top:20px; }
.co__note{ margin:14px 0 0; font-size:12px; color:color-mix(in srgb, var(--paper) 45%, transparent); }
.co__warn{
  margin:0 0 20px; padding:14px 16px;
  border:1px solid rgba(245,184,65,.42); background:rgba(245,184,65,.07);
  font-size:13px; color:color-mix(in srgb, var(--paper) 82%, transparent);
}

.review{ border:1px solid color-mix(in srgb, var(--paper) 18%, transparent); padding:clamp(16px,2.2vw,24px); }
.review dl{ margin:0; }
.review div{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding:9px 0; border-bottom:1px solid color-mix(in srgb, var(--paper) 10%, transparent);
}
.review div:last-child{ border-bottom:0; }
@media (min-width:560px){ .review div{ grid-template-columns:minmax(150px,.7fr) 2fr; gap:16px; } }
.review dt{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 45%, transparent); }
.review dd{ margin:0; font-size:14.5px; }

.btn--buy{
  display:block; width:100%; padding:18px 22px;
  background:var(--accent); border-color:var(--accent); color:var(--ink);
  font-size:12px; letter-spacing:.2em;
}
.btn--buy:hover{ background:var(--paper); border-color:var(--paper); }
.btn--buy:disabled{ opacity:.3; pointer-events:none; }

/* ---- the notice ---------------------------------------------------------- */

body.is-locked{ overflow:hidden; }
.modal{ position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:var(--pad); }
/* .modal sets display:grid, which outranks the browser's own [hidden] rule.
   Without this the closed dialog stays laid out and its scrim silently eats
   every click on the page. */
.modal[hidden]{ display:none; }
.modal__scrim{ position:absolute; inset:0; background:rgba(6,4,10,.82); }
.modal__box{
  position:relative; z-index:1;
  width:min(560px,100%); background:var(--surface);
  border:1px solid color-mix(in srgb, var(--paper) 28.0%, transparent);
  padding:clamp(26px,4vw,44px);
}
.modal__box h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,38px); line-height:1.02; margin:0 0 14px;
}
.modal__box p{ margin:0 0 14px; color:color-mix(in srgb, var(--paper) 74%, transparent); font-size:14.5px; }
.modal__box .btn{ margin-top:8px; }

/* ---- the "added" confirmation -------------------------------------------- */

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%);
  z-index:880; display:flex; align-items:center; gap:16px;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  padding:13px 18px; font-size:13px;
  transition:transform var(--t-slow) var(--ease);
  max-width:min(520px, calc(100% - 32px));
}
.toast.is-on{ transform:translate(-50%,0); }
.toast a{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--accent); text-decoration:none; white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){ .toast{ transition:none; } }

/* =========================================================================
   THE TITLE
   -------------------------------------------------------------------------
   Gold BIG with a white outline thrown down and to the right, so the light
   reads as coming from the top left — the same corner the sky is lit from.

   Two rules hold it together.

   line-height on the enlarged word is never below 1. Anton's glyphs fill
   their em box, so a line-height of .8 leaves the letters painting outside
   the box that generated them and the line below gets walked on.

   Clearance is reserved, not borrowed. --big-lift raises the word off its
   baseline; the line is handed that back plus --big-clear, and --big-clear
   also pays for the thrown copy, which is absolutely positioned and so
   contributes nothing to layout of its own. Without that the outline lands
   on FESTIVAL even though the word itself does not.
   ========================================================================= */

.titleblock__l1{ display:block; }
.tb-big{
  font-weight:inherit;
  --big-size:1.5em;
  --big-lift:.06em;
  --throw:.075em;
  --big-clear:calc(.075em + var(--throw));
  display:inline-block;
  position:relative;
  font-size:var(--big-size);
  line-height:1;
  vertical-align:baseline;
  bottom:var(--big-lift);
  margin-bottom:calc(var(--big-clear) - var(--big-lift));
  color:var(--accent);
  /* -webkit-text-stroke inherits, so the face has to turn it off */
  -webkit-text-stroke:0;
  text-shadow:none;
  /* an isolated parent lets a negative-z-index child paint behind this
     element's own letters but still in front of the page */
  isolation:isolate;
}
.tb-big::before{
  content:attr(data-word);
  position:absolute; left:0; top:0; z-index:-1;
  transform:translate(var(--throw), var(--throw));
  color:transparent;
  -webkit-text-stroke:clamp(3px, .34vw, 4.5px) var(--paper);
}

/* =========================================================================
   THE WORDMARK
   -------------------------------------------------------------------------
   Three lines stepped in from each other, so the lockup reads as a staircase
   rather than a stack. BIG carries the accent, the same way it does in the
   hero, so the mark and the title are obviously the same idea at two sizes.
   ========================================================================= */

.mark{
  display:inline-flex; flex-direction:column;
  font-family:var(--display); font-weight:400;
  text-transform:uppercase; line-height:.86;
  letter-spacing:.005em;
  font-size:var(--mark-size, 22px);
  color:var(--paper);
}
.mark__l{ display:block; }
/* the stagger: each line starts where the last one was going */
.mark__l--2{ margin-left:.62em; color:var(--accent); }
.mark__l--3{ margin-left:1.24em; }

.mark[data-scale="sm"]{ --mark-size:15px; }
.mark[data-scale="lg"]{ --mark-size:clamp(30px, 6.2vw, 54px); }

/* in a bar the staircase would be three lines tall, so it lies down instead
   and keeps only the step as a hint of the full lockup */
.mark--row{ flex-direction:row; align-items:baseline; gap:.3em; line-height:1; }
.mark--row .mark__l--2, .mark--row .mark__l--3{ margin-left:0; }
.mark--row .mark__l--2{ position:relative; top:-.06em; }
.mark--row .mark__l--3{ position:relative; top:.06em; }

/* =========================================================================
   THE ANNOUNCEMENT BAR
   ========================================================================= */

.announce{
  position:relative; z-index:70;
  background:var(--surface);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  color:var(--paper);
}
.announce__in{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:8px var(--pad);
}
.announce__say{
  margin:0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--paper) 70%, transparent);
  min-width:0;
}
.announce__say b{ color:var(--accent); font-weight:700; }
/* the detail is what gives up room first; the line itself always stays, or
   the bar reads as an orphaned button */
@media (max-width:900px){ .announce__say b{ display:none; } }
.announce__cta{
  flex:0 0 auto;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  text-decoration:none; color:var(--accent);
  display:inline-flex; align-items:center; min-height:26px;
  transition:color var(--t-fast) var(--ease);
}
.announce__cta:hover{ color:var(--paper); }

/* =========================================================================
   THE STICKY HEADER
   -------------------------------------------------------------------------
   Deliberately absent for the whole first screen. It only exists once you
   are past the hero, it only comes back when you scroll up — the direction
   that means you are looking for it — and it leaves the moment you carry on
   down. Slim, blurred, low contrast: present when wanted, gone when not.
   ========================================================================= */

.stuckbar{
  position:fixed; inset:0 0 auto 0; z-index:80;
  transform:translateY(-102%);
  transition:transform var(--t-slow) var(--ease), opacity var(--t-fast) var(--ease);
  opacity:0;
  background:color-mix(in srgb, var(--ink) 84%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
          backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 10%, transparent);
}
.stuckbar.is-on{ transform:none; opacity:1; }
.stuckbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:11px var(--pad);
}
.stuckbar__mark{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  font-size:13px; text-decoration:none; color:var(--paper);
  white-space:nowrap;
}
.stuckbar__nav{ display:flex; align-items:center; gap:clamp(12px,1.8vw,26px); }
.stuckbar__nav a{
  text-decoration:none; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600;
  color:color-mix(in srgb, var(--paper) 62%, transparent);
  transition:color var(--t-fast) var(--ease);
}
.stuckbar__nav a:hover,
.stuckbar__nav a[aria-current="page"]{ color:var(--paper); }
.stuckbar__bag{
  display:inline-flex; align-items:center; gap:6px;
  text-decoration:none; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:600;
  color:color-mix(in srgb, var(--paper) 62%, transparent);
}
.stuckbar__bag span{
  min-width:17px; height:17px; padding:0 5px;
  display:inline-grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius:var(--btn-radius);
  font-size:9.5px; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.stuckbar__bag.has-items span{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.stuckbar__cta{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  text-decoration:none; padding:8px 15px;
  border:var(--btn-bw) solid var(--btn-bd); border-radius:var(--btn-radius);
  background:var(--btn-bg); color:var(--btn-fg);
}
.stuckbar__cta:hover{ background:var(--btn-hover-bg); color:var(--btn-hover-fg); }
@media (max-width:820px){
  .stuckbar__nav a:not(.stuckbar__bag){ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .stuckbar{ transition:none; }
}

/* =========================================================================
   PARTNERS PAGE (partners.html)
   ========================================================================= */

.pjump{
  display:flex; align-items:center; gap:clamp(18px,3.4vw,52px);
  flex-wrap:wrap;
  padding-bottom:clamp(26px,4vw,44px);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}
.pjump a{
  display:block; flex:0 0 auto;
  opacity:.55; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pjump a:hover, .pjump a:focus-visible{ opacity:1; transform:translateY(-2px); }
.pjump img{ height:clamp(24px,3.2vw,42px); width:auto; }

.pcard{
  display:grid; gap:clamp(20px,3vw,44px); grid-template-columns:1fr;
  padding:clamp(34px,5vw,64px) 0;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  scroll-margin-top:96px;
}
.pcard:last-child{ border-bottom:0; }
@media (min-width:860px){
  .pcard{ grid-template-columns:minmax(200px,.8fr) 2.1fr; align-items:start; }
}
.pcard__mark{ position:sticky; top:104px; }
@media (max-width:859px){ .pcard__mark{ position:static; } }
.pcard__mark a{ display:block; }
.pcard__mark img{ width:min(100%,240px); height:auto; }
.pcard__name{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,3.6vw,46px); line-height:1; margin:.06em 0 .34em;
}
.pcard__about{
  margin:0 0 clamp(20px,2.6vw,30px); max-width:62ch;
  font-size:clamp(15px,1.15vw,17.5px);
  color:color-mix(in srgb, var(--paper) 82%, transparent);
}
.pcard__h{
  margin:0 0 10px; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--accent);
}
.pcard__list{
  list-style:none; margin:0 0 clamp(22px,2.8vw,32px); padding:0;
  border-top:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  max-width:64ch;
}
.pcard__list li{
  padding:11px 0 11px 20px; position:relative;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 8%, transparent);
  font-size:14.5px; color:color-mix(in srgb, var(--paper) 78%, transparent);
}
.pcard__list li::before{
  content:''; position:absolute; left:2px; top:19px;
  width:6px; height:1px; background:var(--accent);
}
.pcard__support{
  margin:0 0 18px; max-width:56ch;
  font-size:14.5px; color:color-mix(in srgb, var(--paper) 78%, transparent);
}

.footer__partners a{ display:block; }

/* =========================================================================
   THE PHONE MENU
   ========================================================================= */

.navbtn{
  display:none;
  width:42px; height:42px; padding:0; cursor:pointer;
  background:none; border:0;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.navbtn span{
  display:block; width:22px; height:2px; background:var(--paper);
  transition:transform .2s ease;
}
.navbtn[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.navbtn[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.navpanel{
  position:fixed; inset:0; z-index:920;
  background:color-mix(in srgb, var(--ink) 96%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  display:grid;
}
.navpanel[hidden]{ display:none; }
.navpanel__in{
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(20px,4vh,40px);
  padding:clamp(70px,12vh,120px) var(--pad) clamp(28px,5vh,48px);
  height:100%;
}
.navpanel__close{
  position:absolute; top:14px; right:calc(var(--pad) - 8px);
  width:48px; height:48px; padding:0; cursor:pointer;
  background:none; border:0; color:var(--paper);
  font-size:32px; line-height:1;
}
.navpanel__nav{ display:flex; flex-direction:column; }
.navpanel__nav a{
  display:flex; align-items:center; min-height:60px;
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(26px,7.4vw,40px); line-height:1;
  letter-spacing:.01em; text-decoration:none;
  color:color-mix(in srgb, var(--paper) 70%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}
.navpanel__nav a[aria-current="page"]{ color:var(--accent); }
.navpanel__foot{ display:flex; flex-direction:column; gap:14px; }
.navpanel__bag{
  display:flex; align-items:center; justify-content:space-between;
  min-height:48px; text-decoration:none;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:color-mix(in srgb, var(--paper) 72%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--paper) 12%, transparent);
}
.navpanel__bag span{
  min-width:26px; height:26px; padding:0 8px;
  display:inline-grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius:var(--btn-radius);
  font-size:12px; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.navpanel__bag.has-items span{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

/* =========================================================================
   MOBILE
   -------------------------------------------------------------------------
   Nothing hidden, nothing smaller than it needs to be, and no section that
   asks you to scroll back and forth to take it in. Where a desktop layout
   could only shrink, it is replaced rather than squeezed.
   ========================================================================= */

@media (max-width:820px){
  /* one button, one full-screen panel — see header.js */
  .navbtn{ display:flex; }
  .topbar__nav a:not(.topbar__cta):not(.topbar__bag),
  .pagebar__nav a:not(.pagebar__cta):not(.pagebar__bag),
  .stuckbar__nav a:not(.stuckbar__cta):not(.stuckbar__bag){ display:none; }
  .pagebar__nav{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
}

@media (max-width:640px){
  /* the sky owns the first screen: the city and the opening mark both crept
     above the fold when this was shorter */
  .scene{ --skyH:104svh; --cityH:clamp(300px,58vw,520px); }

  /* The title is the one thing that should be BIGGER on a phone, not smaller
     — it is the whole first screen and there is nothing to share it with. */
  .titleblock__l1{ font-size:clamp(50px,14.5vw,86px); }
  .titleblock__l2{ font-size:clamp(50px,14.5vw,86px); }
  .titleblock{ margin-bottom:11svh; }
  .titleblock__meta{ gap:.5em; letter-spacing:.18em; text-indent:.18em; font-size:10px; }
  .titleblock__sep{ display:none; }

  /* the portrait plate is already the right shape, so it needs no cover-crop
     drama; the drift layers move less, because on a narrow frame the same
     percentage travels a lot further across what you can see */
  .sky__base{ object-position:50% 50%; }
  .sky__drift, .sky__clouds{ left:-14%; width:128%; }
  .sky__drift{ background-image:url("../plates/sky-tall-drift.webp"); opacity:.42; }
  .sky__clouds{ background-image:url("../plates/sky-tall-clouds.webp"); opacity:.42; }
  @keyframes skyDrift{ from{ transform:translate3d(0,0,0) scale(1); }
                       to{ transform:translate3d(-4%,-.6%,0) scale(1.02); } }
  @keyframes skyClouds{ from{ transform:translate3d(1.5%,.4%,0) scale(1.015); }
                        to{ transform:translate3d(-3%,-.3%,0) scale(1); } }

  .topbar{ padding:12px var(--pad); }

  /* one mark per screen, centred, at a size that reads */
  .brandrow{ justify-content:center !important; padding:0 var(--pad); }
  .brand{ width:min(54vw, 280px) !important; }
  .brand::after{ text-align:center !important; font-size:10px; }
  .band--fade{ height:6svh; }
  /* the stage has to outlast the track: on a phone the marks are relatively
     taller than the bands, so the last one otherwise hangs past the stage */
  .band--stage{ height:clamp(980px, 265vw, 1320px); }

  .stuckbar__in{ padding:8px var(--pad); }
  .pagebar__mark, .topbar__mark, .stuckbar__mark{ display:inline-flex; align-items:center; }

  /* a tighter rhythm throughout, so a section is closer to one screen */
  .sect{ padding-block:clamp(32px,7vw,52px); }
  .display{ font-size:clamp(27px,7.6vw,38px); }
  .pagehead{ min-height:30svh; padding:clamp(40px,9vw,64px) 0 clamp(20px,4vw,32px); }
  .artists__cover{ height:56svh; }
  .artists__intro{ padding-bottom:6svh; }

  /* thumbs, not cursors */
  .footer__nav a, .lineup__more a, .passes__more a, .bag__cont a{
    display:inline-flex; align-items:center; min-height:42px;
  }
  .footer__partners a{ display:inline-flex; align-items:center; min-height:44px; }
  .footer__partners{ gap:16px; }
  .sizebtn{ min-height:44px; min-width:52px; }
  .announce__in{ padding:7px var(--pad); }

  /* ---- passes: a rate-card row is a desktop shape. On a phone each tier
     becomes a block — name and price on one line, then what you get, then
     the button — so a whole tier is one glance. ---- */
  .tier{
    display:grid; gap:0 12px;
    grid-template-columns:1fr auto;
    grid-template-areas:"id price" "list list" "act act";
    padding:18px 0;
    border-bottom:1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  }
  .tier > div:first-child{ grid-area:id; }
  .tier__price{ grid-area:price; text-align:right; white-space:nowrap;
                margin:0; font-size:clamp(24px,7.4vw,34px); }
  .tier__price .tier__unit{ display:block; font-size:10px; margin-top:2px; }
  .tier__list{ grid-area:list; margin:12px 0 14px; }
  .tier__act{ grid-area:act; display:block; }
  .tier__kicker{ margin:0 0 2px; }
  .tier__name{ font-size:clamp(22px,6.4vw,30px); margin:0; }
  .tier__days{ margin:3px 0 0; font-size:12.5px; }
  .tier__list li{ padding:8px 0 8px 16px; font-size:13.5px; }
  .tier__act .btn{ display:block; width:100%; text-align:center; padding:14px; }

  /* ---- the comparison table keeps its feature column in view, so a value is
     never orphaned from the row it belongs to ---- */
  .compare__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ctable{ font-size:12px; min-width:640px; }
  .ctable th, .ctable td{ padding:9px 10px; }
  .ctable__feat{
    position:sticky; left:0; z-index:2;
    background:var(--ink);
    min-width:140px; max-width:140px;
  }
  .ctable thead th{ position:sticky; top:0; background:var(--ink); z-index:1; }
  .ctable thead th.ctable__feat{ z-index:3; }
  .compare__hint{ display:block; }

  /* ---- the bag stops being a four-column table ---- */
  .bagline{ grid-template-columns:60px 1fr; row-gap:12px; padding:14px 0; }
  .bagline__fig{ width:60px; height:60px; }
  .qty{ grid-column:1 / 2; }
  .bagline__price{ grid-column:2 / 3; text-align:right; align-self:center; }

  .steps{ gap:10px; font-size:10px; padding-bottom:12px; margin-bottom:24px; }
  .summary{ position:static !important; }
  .checkout__grid{ gap:24px; }
  .co__block{ padding:18px 0; }

  .pjump{ gap:18px; padding-bottom:22px; }
  .pjump a{ display:inline-flex; align-items:center; min-height:44px; }
  .pjump img{ height:24px; }
  .pcard{ padding:22px 0; gap:16px; }
  .pcard__mark img{ width:min(56%,170px); }

  .prod{ gap:14px; }
  .gal{ gap:10px; }
  .footer{ padding-block:clamp(30px,6vw,48px); }
}

@media (max-width:420px){
  .titleblock__l1, .titleblock__l2{ font-size:clamp(46px,15vw,70px); }
  .titleblock__meta{ font-size:9.5px; }
  .brand{ width:min(62vw, 250px) !important; }
}

/* the panel mark sits above the links, at the size the footer uses */
.navpanel__mark{
  position:absolute; top:clamp(18px,4vh,34px); left:var(--pad);
  text-decoration:none;
}
.footer__mark .mark{ --mark-size:clamp(26px,4.4vw,40px); }
.pagebar__mark .mark, .topbar__mark .mark, .stuckbar__mark .mark{ line-height:1; }