/* ==========================================================================
   Design tokens, base type, and layout helpers.
   Section/component styles are added in later tasks.
   ========================================================================== */

/* Obviously — OH no Type Co., self-hosted (woff2).
   NOTE: files supplied under a DESKTOP license; secure a webfont license
   from OH no Type Co. before this site is served publicly. */
@font-face{
  font-family:"Obviously"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../assets/fonts/Obviously-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Obviously"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../assets/fonts/Obviously-Bold.woff2") format("woff2");
}
@font-face{
  font-family:"Obviously Wide"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../assets/fonts/Obviously-WideBold.woff2") format("woff2");
}
@font-face{
  font-family:"Obviously Wide"; font-weight:900; font-style:normal; font-display:swap;
  src:url("../assets/fonts/Obviously-WideBlack.woff2") format("woff2");
}

:root{
  /* brand */
  --c-blue:#2A00B8; --c-white:#FFFFFF; --c-black:#1A1A1A;
  --c-lime:#DAF94B; --c-pink:#F392D4; --c-orange:#F46A2A;
  --c-violet:#6E22C4; --c-sky:#6ED3F5;
  /* layout */
  --maxw:1280px; --gutter-mobile:22px; --gutter-desktop:35px;
  --gutter:var(--gutter-mobile);
  /* type */
  --font-display:"Obviously","Alexandria",system-ui,sans-serif;
  --font-wide:"Obviously Wide","Obviously","Alexandria",system-ui,sans-serif;
  --font-body:"Obviously","Alexandria",system-ui,sans-serif;
}
@media (min-width:1024px){ :root{ --gutter:var(--gutter-desktop); } }

body{ font-family:var(--font-body); color:var(--c-black); background:var(--c-white); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

h1{ font-family:var(--font-wide); font-weight:900; line-height:.95; letter-spacing:-.02em;
    font-size:clamp(2.75rem,10vw,7.5rem); }
h2{ font-family:var(--font-wide); font-weight:800; line-height:1.05;
    font-size:clamp(2rem,6vw,3.5rem); text-align:center; }

.section{ padding-block:clamp(48px,8vw,96px); }

/* Below-the-fold sections skip render/layout work until scrolled near.
   `auto` intrinsic size lets the browser remember real dimensions after
   first render, keeping scroll position + CLS stable. Hero is excluded. */
#tickets, #lineup, #merch, #sponsors, .footer{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}

/* Section background helpers */
.section--lime{ background:var(--c-lime); color:var(--c-black); }
.section--blue{ background:var(--c-blue); color:var(--c-white); }
.section--violet{ background:var(--c-violet); color:var(--c-white); }
.section--sky{ background:var(--c-sky); color:var(--c-black); }

/* ==========================================================================
   Buttons — shared component
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1;
  padding:14px 24px; border:2px solid transparent; border-radius:2px;
  cursor:pointer; text-align:center; transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--lime{ background:var(--c-lime); color:var(--c-black); }
.btn--lime-outline{ background:transparent; border-color:var(--c-lime); color:var(--c-lime); }
.btn--lime-outline:hover{ background:var(--c-lime); color:var(--c-black); }
.btn--black{ background:var(--c-black); color:var(--c-white); }
.btn--violet{ background:var(--c-violet); color:var(--c-white); }

/* Shared visible focus state */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--c-lime); outline-offset:3px; border-radius:2px;
}

/* ==========================================================================
   NAV + DRAWER
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--c-black); color:var(--c-white);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px;
}
/* Mobile: logo flows between burger and Tickets button, centered in the
   available space and size-capped so it never overlaps the button.
   Desktop restores true viewport-centering (see the >=768px block). */
.nav__logo{ flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.nav__logo img{ height:auto; max-height:38px; max-width:100%; width:auto; }
.nav__tickets{ padding:10px 18px; font-size:.85rem; }
.nav__burger{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px; background:transparent; border:0; cursor:pointer;
}
.nav__burger span{ display:block; height:2px; width:100%; background:var(--c-white); border-radius:2px; }

.drawer{
  background:var(--c-black); color:var(--c-white);
  border-top:1px solid rgba(255,255,255,.12);
}
.drawer__list{ display:flex; flex-direction:column; padding:12px var(--gutter) 24px; }
.drawer__list a{
  display:block; padding:14px 0; font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; font-size:1.5rem; letter-spacing:-.02em;
}
body.is-locked{ overflow:hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--c-blue); color:var(--c-white);
  padding-block:clamp(40px,7vw,72px);
}
/* Textured doodle pattern layer: sits on the blue bg, below text + shapes */
.hero__pattern{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-color:#6E6EF5;
  -webkit-mask:url("../assets/img/hero-pattern.png") top center / cover no-repeat;
          mask:url("../assets/img/hero-pattern.png") top center / cover no-repeat;
  opacity:.85;
}
.hero__inner{ position:relative; z-index:2; text-align:center; }
.hero__title{ margin-bottom:14px; white-space:nowrap; font-size:clamp(1.5rem,7.8vw,7rem); }
.hero__title-lime{ color:var(--c-lime); }
.hero__title-white{ color:var(--c-lime); }
.hero__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 24px; align-items:baseline;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; font-size:clamp(.8rem,2.4vw,1rem); margin-bottom:22px;
}
.hero__venue{ color:var(--c-lime); }
.hero__date{ color:var(--c-lime); }
.hero__lineup{ display:flex; flex-direction:column; align-items:center; margin-bottom:36px; }
.hero__lineup-head{
  font-family:var(--font-wide); font-weight:900; line-height:1;
  color:var(--c-blue); background:var(--c-white);
  padding:.14em .45em; border-radius:6px;
  letter-spacing:-.01em; font-size:clamp(2.6rem,9vw,5rem);
}
.hero__lineup-sub{
  font-family:var(--font-wide); font-weight:900; line-height:1; color:var(--c-white);
  letter-spacing:-.01em; font-size:clamp(1.9rem,6vw,3.4rem); margin-top:clamp(16px,3.5vw,28px);
}
.hero__lineup-rest{
  display:block; max-width:24ch; margin-top:12px;
  font-family:var(--font-display); font-weight:800; color:var(--c-white);
  line-height:1.5; font-size:clamp(1rem,3.2vw,1.7rem);
}
.hero__lineup .lineup-div{
  display:inline-block; width:clamp(14px,1.9vw,19px); height:auto;
  vertical-align:-0.15em; margin:0 .12em; will-change:transform;
}
/* Giant lime ticket CTA button (matches Figma) */
.hero__ticket-cta{
  display:inline-block; margin-bottom:clamp(48px,9vw,96px);
  background:var(--c-lime); color:var(--c-blue);
  font-family:var(--font-wide); font-weight:900; line-height:.95; letter-spacing:-.02em;
  text-transform:uppercase; text-align:center;
  font-size:clamp(1.6rem,6vw,3.75rem);
  padding:clamp(16px,3.2vw,30px) clamp(26px,6vw,60px);
  border-radius:6px; transition:transform .15s ease;
}
.hero__ticket-cta:hover{ transform:translateY(-3px); }
.hero__about{ max-width:640px; margin-inline:auto; }
.hero__about-title{
  text-align:center; color:var(--c-white);
  font-size:clamp(1.75rem,5vw,2.75rem); margin-bottom:14px;
}
.hero__about-body{
  font-size:clamp(1rem,2.4vw,1.35rem); line-height:1.45; max-width:56ch; margin-inline:auto;
  font-weight:500;
}
/* Floating decorative shapes (motion hooks) */
.hero .shape{ position:absolute; z-index:1; pointer-events:none; opacity:.95; }
.hero .shape--star{ width:clamp(90px,14vw,190px); top:14%; right:-2%; }
.hero .shape--squiggle{ width:clamp(70px,10vw,140px); top:34%; left:-4%; }
.hero .shape--blob{ width:clamp(90px,12vw,170px); bottom:24%; right:4%; }
.hero .shape--note{ width:clamp(70px,9vw,120px); bottom:2%; left:2%; }

/* ==========================================================================
   TICKETS
   ========================================================================== */
#tickets h2{ margin-bottom:clamp(28px,5vw,48px); }
.ticket-cards{
  display:grid; grid-template-columns:1fr; gap:24px;
  max-width:1180px; margin-inline:auto;
}
.ticket-card{
  background:var(--c-white); color:var(--c-black);
  border-radius:8px; padding:26px 28px;
  display:flex; flex-direction:column;
}
.ticket-card--vip{ border:2px solid #8733FF; box-shadow:inset 0 0 15px rgba(110,34,196,.18); }
.ticket-card__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.ticket-pill{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:.7rem; letter-spacing:-.01em; color:var(--c-white);
  padding:6px 10px 7px; border-radius:30px;
}
.ticket-pill--violet{ background:var(--c-violet); }
.ticket-pill--blue{ background:var(--c-blue); }
.ticket-card__name{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,4vw,2.2rem);
  letter-spacing:-.02em; line-height:1;
}
.ticket-card__dates{
  font-weight:500; color:#353535; font-size:.9rem; text-transform:uppercase;
  letter-spacing:.01em; margin:10px 0;
}
.ticket-card__dates span{ margin:0 6px; }
.ticket-card__price{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,7vw,3.4rem);
  letter-spacing:-.02em; line-height:1; margin-bottom:18px;
}
.ticket-card__divider{ border:0; border-top:2px dashed rgba(0,0,0,.2); margin:0 0 16px; }
.ticket-card__features{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.ticket-card__features li{
  position:relative; padding-left:18px; color:#353535; font-size:.95rem; line-height:1.3;
}
.ticket-card__features li::before{
  content:"•"; position:absolute; left:2px; top:0; color:var(--c-black);
}
.ticket-card__buy{ margin-top:auto; width:100%; }
/* Disabled "Coming Soon" state for pre-launch buttons */
.btn.is-soon{
  background:var(--c-black); color:var(--c-white); opacity:.45;
  cursor:default; pointer-events:none;
}
.btn.is-soon:hover{ transform:none; }

/* Grouped ticket list (Lollapalooza-style rows) */
.ticket-group{ max-width:900px; margin-inline:auto; }
.ticket-group + .ticket-group{ margin-top:clamp(32px,6vw,56px); }
.ticket-group__title{
  font-family:var(--font-wide); font-weight:800; text-transform:uppercase;
  color:var(--c-black); letter-spacing:-.01em; text-align:left;
  font-size:clamp(1.4rem,4.5vw,2.3rem); margin-bottom:16px;
}
.ticket-list{ display:flex; flex-direction:column; gap:16px; }
.ticket-row{
  position:relative;
  background:var(--c-white); color:var(--c-black); border-radius:8px;
}
.ticket-row__summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 24px; cursor:pointer; list-style:none;
}
.ticket-row__summary::-webkit-details-marker{ display:none; }
.ticket-row__summary:focus-visible{ outline:3px solid var(--c-blue); outline-offset:2px; border-radius:8px; }
.ticket-row__main{ display:flex; flex-direction:column; gap:4px; }
.ticket-row__kind{ font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:#555; }
.ticket-row__tier{
  font-family:var(--font-wide); font-weight:800; text-transform:uppercase; line-height:1;
  font-size:clamp(1.6rem,5vw,2.2rem);
}
.ticket-row__end{ display:flex; align-items:center; gap:16px; }
.ticket-row__price{ display:flex; flex-direction:column; gap:4px; text-align:right; }
.ticket-row__from{ font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:#555; }
.ticket-row__amt{
  font-family:var(--font-wide); font-weight:800; line-height:1;
  font-size:clamp(1.6rem,5vw,2.2rem);
}
.ticket-row__chev{
  width:11px; height:11px; flex:none;
  border-right:3px solid var(--c-black); border-bottom:3px solid var(--c-black);
  transform:rotate(45deg); margin-top:-4px; transition:transform .2s ease;
}
.ticket-row[open] .ticket-row__chev{ transform:rotate(225deg); margin-top:4px; }
.ticket-row__status{
  position:absolute; top:-11px; right:18px;
  background:var(--c-black); color:var(--c-white);
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:.64rem; letter-spacing:.04em; padding:5px 11px; border-radius:20px;
}
.ticket-row__features{
  margin:0 24px; padding:16px 0 22px 20px;
  border-top:1px dashed rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:9px;
}
.ticket-row__features li{ position:relative; padding-left:16px; color:#333; font-size:.98rem; line-height:1.3; }
.ticket-row__features li::before{ content:"\2022"; position:absolute; left:0; color:var(--c-black); }

/* ==========================================================================
   LINEUP
   ========================================================================== */
#lineup h2{ margin-bottom:clamp(20px,4vw,32px); }
.daytoggle{
  display:flex; gap:4px; width:max-content; margin:0 auto clamp(28px,5vw,44px);
  padding:5px; background:rgba(0,0,0,.28); border-radius:40px;
}
.daytoggle__tab{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:1rem; letter-spacing:-.01em; color:var(--c-white);
  background:transparent; border:0; cursor:pointer;
  padding:10px 26px; border-radius:30px; transition:background .15s ease, color .15s ease;
}
.daytoggle__tab.is-active{ background:var(--c-white); color:var(--c-black); }
.lineup-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2.4vw,26px);
}
/* Single act (e.g. ATEEZ on Day 2): center it and give it a larger frame */
.lineup-grid.lineup-grid--single{ grid-template-columns:min(80%,460px); justify-content:center; }
.lineup-grid--single .artist-card__name{ text-align:center; }
/* Day headliner (P1Harmony / ATEEZ): larger, spans two columns */
.artist-card--headliner{ grid-column:span 2; }
.artist-card--headliner .artist-card__name{ font-size:clamp(1.3rem,3vw,1.9rem); }

/* ==========================================================================
   PRE-LAUNCH GATE (client-side curtain only — see js/gate.js)
   ========================================================================== */
html.is-gated body > header,
html.is-gated body > main,
html.is-gated body > footer{ display:none !important; }
.gate{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--c-blue); color:var(--c-white);
}
.gate__box{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; width:100%; max-width:420px;
}
.gate__logo{ width:72px; height:auto; margin-bottom:4px; }
.gate__title{
  font-family:var(--font-wide); font-weight:900; color:var(--c-lime);
  font-size:clamp(1.8rem,7vw,2.8rem); line-height:1; letter-spacing:-.01em;
}
.gate__msg{ font-size:.98rem; line-height:1.5; opacity:.9; }
.gate__input{
  width:100%; padding:14px 16px; border-radius:6px; border:2px solid transparent;
  background:var(--c-white); color:var(--c-black);
  font-family:var(--font-body); font-size:1rem;
}
.gate__input:focus-visible{ outline:3px solid var(--c-lime); outline-offset:2px; }
.gate__btn{
  width:100%; padding:14px 20px; border:0; border-radius:6px; cursor:pointer;
  background:var(--c-lime); color:var(--c-blue);
  font-family:var(--font-wide); font-weight:900; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:-.01em;
}
.gate__btn:hover{ transform:translateY(-2px); }
.gate__err{ color:var(--c-lime); font-weight:700; font-size:.9rem; }

/* ==========================================================================
   FAQ PAGE
   ========================================================================== */
.faq-header{ background:var(--c-blue); color:var(--c-white); text-align:center; }
.faq-title{
  font-family:var(--font-wide); font-weight:900; line-height:1; color:var(--c-lime);
  letter-spacing:-.02em; font-size:clamp(2.6rem,10vw,5.5rem); margin-bottom:14px;
}
.faq-intro{
  max-width:52ch; margin-inline:auto; line-height:1.5;
  font-size:clamp(1rem,2.4vw,1.2rem); color:var(--c-white);
}
.faq-list{ display:flex; flex-direction:column; gap:14px; max-width:900px; margin-inline:auto; }
.faq-item{ background:var(--c-white); color:var(--c-black); border-radius:8px; }
.faq-item__q{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:800; line-height:1.3;
  font-size:clamp(1rem,2.6vw,1.25rem);
}
.faq-item__q::-webkit-details-marker{ display:none; }
.faq-item__q:focus-visible{ outline:3px solid var(--c-blue); outline-offset:2px; border-radius:8px; }
.faq-item__chev{
  width:11px; height:11px; flex:none;
  border-right:3px solid var(--c-black); border-bottom:3px solid var(--c-black);
  transform:rotate(45deg); margin-top:-4px; transition:transform .2s ease;
}
.faq-item[open] .faq-item__chev{ transform:rotate(225deg); margin-top:4px; }
.faq-item__a{
  margin:0 24px; padding:16px 0 22px;
  border-top:1px dashed rgba(0,0,0,.18);
  color:#333; line-height:1.55; font-size:1rem;
}
.faq-item__a a{ color:var(--c-blue); text-decoration:underline; }
.faq-contact{
  text-align:center; margin-top:clamp(28px,5vw,44px);
  font-family:var(--font-display); font-weight:700; color:var(--c-black);
  font-size:clamp(1rem,2.4vw,1.15rem);
}
.faq-contact a{ color:var(--c-blue); text-decoration:underline; text-underline-offset:3px; }

/* Poster lineup (alternate version) */
.lineup-poster{ display:block; width:100%; max-width:760px; height:auto; margin-inline:auto; border-radius:10px; }

/* index-poster.html — poster in hero replaces title/lineup copy */
.page--poster .lineup-poster--hero{
  max-width:min(760px, 92vw);
  margin-bottom:clamp(32px,6vw,56px);
}
.page--poster .hero__ticket-cta{ margin-bottom:clamp(48px,9vw,96px); }

.artist-card{ display:flex; flex-direction:column; gap:12px; }
.artist-card img{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:12px; background:rgba(255,255,255,.08);
}
.artist-card__name{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1rem,2.2vw,1.4rem); letter-spacing:-.01em; color:var(--c-white);
}

/* ==========================================================================
   MERCH
   ========================================================================== */
#merch h2{ color:var(--c-white); margin-bottom:clamp(28px,5vw,48px); }
.merch-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,2vw,22px);
  margin-bottom:clamp(28px,5vw,44px);
}
.merch-tile{
  display:block; background:var(--c-white); border-radius:6px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.merch-tile img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.merch-tile:hover{ transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.3); }
.merch-cta{ display:flex; justify-content:center; }
.merch-soon{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; color:var(--c-lime);
  font-size:clamp(1.25rem,3.5vw,1.75rem);
}

/* ==========================================================================
   SPONSORS
   ========================================================================== */
#sponsors h2{ margin-bottom:clamp(28px,5vw,48px); }
.sponsor-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(24px,5vw,56px) clamp(28px,6vw,72px);
}
.sponsor-row li{ display:flex; align-items:center; justify-content:center; }
.sponsor-row img{ height:clamp(24px,3.2vw,38px); width:auto; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--c-black); color:var(--c-white); padding-block:clamp(40px,6vw,64px); }
.footer__top{
  display:flex; flex-direction:column; gap:24px;
  align-items:center; text-align:center;
  padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer__logo{ height:clamp(24px,4vw,40px); width:auto; }
.footer__social{ display:flex; gap:20px; align-items:center; }
.footer__social a{ display:flex; color:var(--c-white); transition:color .15s ease; }
.footer__social a:hover{ color:var(--c-lime); }
.footer__bottom{
  display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center;
  padding-top:26px;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:12px 22px; justify-content:center; }
.footer__legal a{ font-size:.85rem; color:rgba(255,255,255,.75); }
.footer__legal a:hover{ color:var(--c-white); }
.footer__copy{ font-size:.8rem; color:rgba(255,255,255,.55); }

/* ==========================================================================
   Responsive — desktop (>=768px)
   ========================================================================== */
@media (min-width:768px){
  .ticket-cards{ grid-template-columns:repeat(3,1fr); }
  .lineup-grid{ grid-template-columns:repeat(4,1fr); }
  .merch-grid{ grid-template-columns:repeat(4,1fr); }
  .footer__top{ flex-direction:row; justify-content:space-between; text-align:left; }
  .footer__bottom{ flex-direction:row; justify-content:space-between; text-align:left; }
  /* Desktop has room to dead-center the logo over the full nav width */
  .nav__logo{ position:absolute; left:50%; transform:translateX(-50%); flex:0 0 auto; }
  .nav__logo img{ max-width:none; max-height:none; height:38px; }
}

/* Respect reduced motion for the hover lifts / transitions */
@media (prefers-reduced-motion:reduce){
  .btn, .merch-tile, .footer__social a, .daytoggle__tab{ transition:none; }
  .btn:hover, .merch-tile:hover{ transform:none; }
}