/* tokens.css */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02FF, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/cinzel-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
}

:root {
  --limestone: #f1ebdd;
  --bone: #fbf7ee;
  --obsidian: #100e0b;
  --charcoal: #25211c;
  --umber: #655e53;
  --amber: #d8a84e;
  --amber-dark: #77510f;
  --oxidized: #496b64;
  --light-rule: rgba(37, 33, 28, .2);
  --dark-rule: rgba(251, 247, 238, .2);
  --display: "Cinzel", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shell: 76rem;
  --gutter: clamp(1.125rem, 4vw, 3rem);
  --step-1: .5rem;
  --step-2: 1rem;
  --step-3: 1.5rem;
  --step-4: 2.5rem;
  --step-5: 4rem;
  --step-6: 6rem;
  --step-7: 9rem;
}


/* base.css */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
  background: var(--obsidian);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--charcoal);
  background: var(--limestone);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.gallery-open { overflow: hidden; }

img { display: block; max-width: 100%; }

a { color: inherit; }

button,
input { font: inherit; }

h1,
h2,
h3,
p,
figure,
dl,
dd { margin: 0; }

h1,
h2,
h3 { font-family: var(--display); font-weight: 600; }

h2 {
  max-width: 13ch;
  font-size: clamp(2.3rem, 9vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.shell-width { width: min(100% - (2 * var(--gutter)), var(--shell)); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 1200;
  top: .75rem;
  left: .75rem;
  padding: .75rem 1rem;
  color: var(--obsidian);
  background: var(--amber);
  font-weight: 800;
  transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

::selection { color: var(--obsidian); background: var(--amber); }

.kicker {
  color: var(--oxidized);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.kicker--amber { color: var(--amber); }

.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 3.5rem;
  width: min(100%, 22rem);
  padding: .9rem 1.1rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.action--primary { color: var(--obsidian); background: var(--amber); }
.action--primary:hover { background: #e7bb68; }

.section-light { padding-block: var(--step-6); background: var(--limestone); }

.section-heading { display: grid; gap: var(--step-3); margin-bottom: var(--step-5); }
.section-heading > p { max-width: 38rem; color: var(--umber); font-size: clamp(1rem, 2vw, 1.2rem); }
.section-heading .kicker { margin-bottom: var(--step-2); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* hero.css */
.site-header {
  position: absolute;
  z-index: 10;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
  padding-inline: var(--gutter);
  border-bottom: 1px solid var(--light-rule);
  color: var(--charcoal);
}

.site-header__brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.site-header__brand img { width: 2rem; height: 2rem; }
.site-header__brand span,
.site-header > p { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.site-header > p { color: var(--umber); }

.hero { min-height: 100svh; padding-top: 4.25rem; background: var(--bone); }

.hero__copy {
  display: grid;
  align-content: center;
  gap: var(--step-3);
  min-height: 32rem;
  padding: var(--step-5) var(--gutter);
}

.hero h1 {
  display: grid;
  max-width: 8ch;
  font-size: clamp(3.15rem, 16vw, 8.5rem);
  line-height: .78;
  letter-spacing: -.065em;
}

.hero h1 span:last-child { margin-left: .58em; color: var(--amber-dark); }

.hero__descriptor {
  max-width: 36rem;
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  line-height: 1.45;
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 38rem;
  border-block: 1px solid var(--light-rule);
}

.event-facts div { min-width: 0; padding: .8rem .5rem .8rem 0; }
.event-facts div + div { padding-left: .6rem; border-left: 1px solid var(--light-rule); }
.event-facts dt { color: var(--umber); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.event-facts dd { margin-top: .25rem; font-size: clamp(.72rem, 2.7vw, .95rem); font-weight: 750; line-height: 1.25; }

.hero__aperture { position: relative; min-height: 20rem; overflow: hidden; background: var(--obsidian); }
.hero__picture,
.hero__picture img { width: 100%; height: 100%; }
.hero__picture img { position: absolute; inset: 0; object-fit: cover; object-position: var(--focal-mobile); }
.hero__aperture figcaption {
  position: absolute;
  inset: auto var(--gutter) 1rem;
  display: flex;
  justify-content: space-between;
  color: var(--bone);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}


/* commerce-shell.css */
.tickets {
  position: relative;
  padding-block: var(--step-6);
  color: var(--bone);
  background: var(--obsidian);
}

.tickets::before {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  content: "";
}

.tickets__intro { display: grid; gap: var(--step-4); margin-bottom: var(--step-4); }
.tickets__intro h2 { margin-block: .8rem 1.2rem; }
.tickets__intro > div > p:last-child { max-width: 34rem; color: rgba(251, 247, 238, .7); }

.trust-list { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--dark-rule); list-style: none; }
.trust-list li { display: flex; gap: 1rem; padding-block: .85rem; border-bottom: 1px solid var(--dark-rule); font-size: .78rem; font-weight: 700; }
.trust-list span { color: var(--amber); font-family: var(--display); }

.ticket-widget-shell { position: relative; min-height: 13rem; }
.ticket-placeholder { display: grid; justify-items: start; gap: .8rem; padding: 2rem 0; border-top: 1px solid var(--dark-rule); }
.ticket-placeholder__signal { width: 2.75rem; height: 2px; background: var(--amber); animation: ticket-pulse 1.1s ease-in-out infinite alternate; }
.ticket-placeholder p { color: rgba(251, 247, 238, .68); }
.ticket-placeholder a,
.ticket-noscript a { color: var(--amber); font-weight: 800; }
.ticket-widget-shell.is-loaded .ticket-placeholder { display: none; }

.mobile-ticket {
  position: fixed;
  z-index: 900;
  right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  left: max(.75rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  padding: .7rem 1rem;
  color: var(--obsidian);
  background: var(--amber);
  text-decoration: none;
  transform: translateY(calc(100% + 2rem));
  transition: transform 160ms ease;
}

.mobile-ticket small,
.mobile-ticket strong { display: block; }
.mobile-ticket small { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.mobile-ticket strong { font-size: .92rem; text-transform: uppercase; }
.mobile-ticket.is-visible { transform: translateY(0); }
.consent-obscures-action .mobile-ticket { visibility: hidden; }

@keyframes ticket-pulse { to { width: 6rem; opacity: .42; } }


/* content.css */
.programme { border-bottom: 1px solid var(--light-rule); }

.programme__rail,
.lineup__artists { margin: 0 auto; padding: 0; list-style: none; }

.programme__rail li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--step-3);
  padding-block: var(--step-3);
  border-top: 1px solid var(--light-rule);
}

.programme__rail li:last-child { border-bottom: 1px solid var(--light-rule); }
.programme__rail > li > span { color: var(--oxidized); font-family: var(--display); font-size: .85rem; }
.programme__rail h3 { font-size: clamp(1.25rem, 5vw, 2rem); line-height: 1.15; }
.programme__rail p { max-width: 36rem; margin-top: .5rem; color: var(--umber); }

.lineup { padding-top: var(--step-7); }

.lineup__artists li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: var(--step-3);
  padding-block: 1.1rem;
  border-top: 1px solid var(--light-rule);
}

.lineup__artists li:last-child { border-bottom: 1px solid var(--light-rule); }
.lineup__artists > li > span { color: var(--oxidized); font-family: var(--display); font-size: .8rem; }
.lineup__artists div { display: grid; gap: .35rem; }
.lineup__artists strong { font-family: var(--display); font-size: clamp(1.7rem, 8vw, 5.7rem); font-weight: 600; letter-spacing: -.045em; line-height: .95; }
.lineup__artists small { color: var(--umber); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.lineup__performances { display: grid; gap: 1rem; margin-top: var(--step-4); }
.lineup__performances > p { color: var(--oxidized); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lineup__performances ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.lineup__performances li { font-weight: 750; }

.closing { padding-block: var(--step-6); color: var(--bone); background: var(--charcoal); }
.closing .shell-width { display: grid; gap: var(--step-4); }
.closing h2 { max-width: 12ch; }

.site-footer { padding-block: var(--step-5) var(--step-4); color: var(--bone); background: var(--obsidian); }
.partners { padding-bottom: var(--step-5); }
.partners__logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 1.5rem; margin-top: var(--step-3); }
.partners__logos img { width: 100%; max-height: 4rem; object-fit: contain; filter: grayscale(1) brightness(1.8); opacity: .62; }

.site-footer__base { display: grid; gap: var(--step-3); padding-top: var(--step-3); border-top: 1px solid var(--dark-rule); }
.site-footer__base > div { display: flex; align-items: center; gap: .8rem; }
.site-footer__base > div img { width: 2.5rem; filter: invert(1); }
.site-footer__base strong,
.site-footer__base span { display: block; }
.site-footer__base strong { font-size: .78rem; letter-spacing: .1em; }
.site-footer__base span,
.site-footer__base > p { color: rgba(251, 247, 238, .52); font-size: .7rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.site-footer nav a { font-size: .76rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .25rem; }
.privacy-control { width: fit-content; min-height: 2.75rem; padding: 0; border: 0; color: var(--amber); background: transparent; cursor: pointer; font-size: .75rem; font-weight: 800; }


/* gallery.css */
.gallery { padding-top: var(--step-7); }

.gallery__sequence { display: grid; gap: var(--step-4); }
.gallery__item { display: grid; gap: .8rem; }
.gallery__item a { display: block; overflow: hidden; background: var(--charcoal); }
.gallery__item picture,
.gallery__item img { width: 100%; }
.gallery__item img { aspect-ratio: 4 / 3; object-fit: cover; transition: opacity 140ms ease; }
.gallery__item a:hover img { opacity: .88; }
.gallery__item figcaption { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; color: var(--umber); font-size: .78rem; }
.gallery__item figcaption span { color: var(--oxidized); font-family: var(--display); }

.lightbox {
  width: min(100% - 1.5rem, 76rem);
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 3.5rem 1rem 1rem;
  border: 1px solid rgba(251, 247, 238, .28);
  color: var(--bone);
  background: var(--obsidian);
  opacity: 0;
  transition: opacity 120ms ease;
}

.lightbox[open] { opacity: 1; }
.lightbox::backdrop { background: rgba(16, 14, 11, .92); }
.lightbox__close { position: absolute; top: .65rem; right: .8rem; min-height: 2.75rem; padding: 0 .6rem; border: 0; color: var(--bone); background: transparent; cursor: pointer; }
.lightbox figure { display: grid; justify-items: center; gap: .75rem; }
.lightbox figure img { max-height: calc(100dvh - 10rem); width: auto; object-fit: contain; }
.lightbox figure figcaption { max-width: 44rem; text-align: center; font-size: .8rem; }
.lightbox__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-top: .8rem; }
.lightbox__controls button { min-height: 2.75rem; border: 1px solid var(--dark-rule); color: var(--bone); background: transparent; cursor: pointer; }
.lightbox__controls button:last-child { justify-self: stretch; }
.lightbox__controls p { min-width: 3rem; text-align: center; font-size: .7rem; }


/* responsive.css */
@media (min-width: 48rem) {
  .section-light,
  .tickets,
  .closing { padding-block: var(--step-7); }

  .section-heading--split { grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); align-items: end; }
  .section-heading--split > p { justify-self: end; }

  .tickets__intro { grid-template-columns: minmax(0, 1fr) minmax(18rem, .65fr); align-items: end; }
  .programme__rail li { grid-template-columns: 5rem minmax(0, 1fr); padding-block: var(--step-4); }
  .lineup__artists li { grid-template-columns: 5rem minmax(0, 1fr); padding-block: 1.5rem; }
  .lineup__artists div { grid-template-columns: minmax(0, 1fr) 14rem; align-items: baseline; }

  .gallery__sequence { grid-template-columns: repeat(12, 1fr); gap: var(--step-4) 1.5rem; }
  .gallery__item--1 { grid-column: 1 / 9; }
  .gallery__item--2 { grid-column: 9 / 13; align-self: end; }
  .gallery__item--3 { grid-column: 1 / 6; }
  .gallery__item--4 { grid-column: 6 / 13; margin-top: var(--step-5); }
  .gallery__item--5 { grid-column: 2 / 6; }
  .gallery__item--6 { grid-column: 6 / 13; }
  .gallery__item--2 img,
  .gallery__item--5 img { aspect-ratio: 4 / 5; }

  .closing .shell-width { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .closing .kicker { grid-column: 1 / -1; }
  .site-footer__base { grid-template-columns: 1fr 1fr; align-items: center; }
  .partners__logos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .site-header { width: 47%; border-right: 1px solid var(--light-rule); }
  .site-header > p { display: none; }
  .hero { display: grid; grid-template-columns: 47% 53%; min-height: 100svh; padding-top: 0; }
  .hero__copy { min-height: 100svh; padding: 8rem var(--gutter) 4rem; }
  .hero__aperture { min-height: 100svh; }
  .hero__picture img { object-position: var(--focal-desktop); }
  .mobile-ticket { right: max(1.5rem, env(safe-area-inset-right)); left: auto; width: 20rem; }
}

@media (max-width: 25rem) {
  .site-header > p { max-width: 9rem; text-align: right; }
  .hero__copy { min-height: 30rem; }
  .hero h1 { font-size: clamp(2.9rem, 15.5vw, 4rem); }
  .event-facts dd { font-size: .68rem; }
  .partners__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-height: 42rem) and (orientation: landscape) {
  .hero__copy { min-height: auto; padding-block: 6.5rem 2rem; }
  .hero__aperture { min-height: 100svh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --light-rule: rgba(37, 33, 28, .48); --dark-rule: rgba(251, 247, 238, .48); }
  .kicker { color: #294d46; }
}