/* ============================================
   MOONLESS INTERNATIONAL · STYLES
   Aesthetic: editorial midnight cinema
   ============================================ */

:root {
  /* Color */
  --ink:        #0A0908;       /* near-black, the moonless sky */
  --ink-deep:   #050403;       /* deepest shadow */
  --ink-soft:   #14110F;       /* surface, slightly lifted */
  --ink-line:   #1F1B17;       /* hairline borders */
  --cream:      #F2EAD8;       /* aged paper */
  --cream-dim:  #D9CFB9;       /* secondary text */
  --gold:       #C8A560;       /* champagne / dim brass */
  --gold-soft:  #8E7848;
  --ember:      #B8341B;       /* theatre curtain red */
  --mist:       #6F685C;       /* tertiary text */

  /* Type */
  --serif:  'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans:   'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Layout */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --max:    1400px;
  --max-narrow: 1100px;
}

/* -------- RESET + BASE -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

::selection { background: var(--ember); color: var(--cream); }

/* -------- AMBIENT LAYERS -------- */

/* Film grain overlay */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Subtle starfield in background */
.stars {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stars span {
  position: absolute;
  width: 1px; height: 1px;
  background: var(--cream-dim);
  border-radius: 50%;
  opacity: 0.5;
  animation: twinkle 4s infinite ease-in-out;
}
.stars span:nth-child(1)  { top: 8%;  left: 12%; animation-delay: 0s; }
.stars span:nth-child(2)  { top: 14%; left: 78%; animation-delay: 0.4s; }
.stars span:nth-child(3)  { top: 22%; left: 33%; animation-delay: 1.1s; width: 2px; height: 2px; }
.stars span:nth-child(4)  { top: 31%; left: 64%; animation-delay: 1.7s; }
.stars span:nth-child(5)  { top: 38%; left: 8%;  animation-delay: 2.3s; }
.stars span:nth-child(6)  { top: 41%; left: 91%; animation-delay: 0.8s; width: 2px; height: 2px; }
.stars span:nth-child(7)  { top: 53%; left: 24%; animation-delay: 3.0s; }
.stars span:nth-child(8)  { top: 57%; left: 48%; animation-delay: 1.4s; }
.stars span:nth-child(9)  { top: 62%; left: 71%; animation-delay: 2.1s; }
.stars span:nth-child(10) { top: 68%; left: 18%; animation-delay: 0.2s; width: 2px; height: 2px; }
.stars span:nth-child(11) { top: 73%; left: 83%; animation-delay: 2.8s; }
.stars span:nth-child(12) { top: 78%; left: 41%; animation-delay: 1.6s; }
.stars span:nth-child(13) { top: 82%; left: 6%;  animation-delay: 3.2s; }
.stars span:nth-child(14) { top: 86%; left: 56%; animation-delay: 0.6s; }
.stars span:nth-child(15) { top: 91%; left: 88%; animation-delay: 2.4s; width: 2px; height: 2px; }
.stars span:nth-child(16) { top: 5%;  left: 47%; animation-delay: 1.0s; }
.stars span:nth-child(17) { top: 17%; left: 95%; animation-delay: 1.9s; }
.stars span:nth-child(18) { top: 46%; left: 38%; animation-delay: 0.3s; }
.stars span:nth-child(19) { top: 65%; left: 95%; animation-delay: 2.6s; }
.stars span:nth-child(20) { top: 95%; left: 33%; animation-delay: 1.2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.4); }
}

/* -------- HELPERS -------- */
.serif-italic {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: -0.005em;
}

.aperture {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  position: relative;
  flex-shrink: 0;
}
.aperture::before {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
}
.aperture--lg { width: 32px; height: 32px; }
.aperture--lg::before { inset: 6px; }

/* -------- LOGO PLACEMENTS -------- */
/* The logo is a JPG with a black background — blend it with the site's ink */
.nav__logo {
  height: 48px;
  width: auto;
  display: block;
  /* Mix-blend lighten makes the black bg disappear into the ink */
  mix-blend-mode: lighten;
  transition: transform 0.3s ease;
}
.nav__brand:hover .nav__logo { transform: scale(1.04); }

.footer__logo {
  height: 64px;
  width: auto;
  display: block;
  mix-blend-mode: lighten;
  flex-shrink: 0;
}

.logo-display {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-deep);
  border: 1px solid var(--gold-soft);
  overflow: hidden;
  isolation: isolate;
}
.logo-display::before {
  /* Subtle inner gold frame */
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(200, 165, 96, 0.25);
  pointer-events: none;
  z-index: 2;
}
.logo-display img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: lighten;
}

/* -------- NAV (existing - logo replaces aperture) -------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem var(--gutter);
  background: rgba(10, 9, 8, 0.7);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--ink-line);
  transition: background 0.4s, border-color 0.4s;
}
.nav.scrolled {
  background: rgba(5, 4, 3, 0.92);
}

.nav__brand {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.nav__brand-text .dot { color: var(--gold); margin: 0 0.25em; }
.nav__brand-text em {
  font-style: italic;
  font-weight: 400;
  color: var(--cream-dim);
}

.nav__links {
  display: flex;
  gap: 2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream-dim);
}
.nav__links a {
  position: relative;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--gold); }
.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.nav__cta:hover {
  background: var(--gold);
  color: var(--ink-deep);
}

@media (max-width: 800px) {
  .nav__links { display: none; }
}

/* -------- HERO -------- */
.hero {
  position: relative;
  z-index: 1;
  padding: 9rem var(--gutter) 4rem;
  max-width: var(--max);
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.hero::before {
  /* Soft radial glow behind hero, like a far-off house light */
  content: '';
  position: absolute;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80vmax; height: 80vmax;
  background: radial-gradient(circle, rgba(200, 165, 96, 0.06) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.hero__overline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 1s 0.2s forwards;
}
.dot-sep { color: var(--gold); font-size: 0.5em; }

.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
  line-height: 0.9;
  letter-spacing: -0.025em;
  width: 100%;
}
.hero__line {
  display: block;
  font-size: clamp(4rem, 14vw, 13rem);
  color: var(--cream);
  opacity: 0;
  animation: fadeUp 1.2s 0.4s forwards;
}
.hero__sub {
  display: block;
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.45em;
  color: var(--cream-dim);
  margin-top: 1.75rem;
  opacity: 0;
  animation: fadeUp 1s 0.7s forwards;
}

.hero__lede {
  margin: 3rem auto 0;
  max-width: 36rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--cream-dim);
  opacity: 0;
  animation: fadeUp 1s 0.9s forwards;
}
.hero__lede em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

.hero__meta {
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 3rem;
  margin: 3rem auto 2.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  opacity: 0;
  animation: fadeUp 1s 1.1s forwards;
}
.meta-block { display: flex; flex-direction: column; gap: 0.35rem; align-items: center; }
.meta-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mist);
}
.meta-value {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
}

/* -------- COUNTDOWN -------- */
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin: 1rem 0 2.75rem;
  opacity: 0;
  animation: fadeUp 1s 1.3s forwards;
}
.countdown__overline {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--gold);
  padding-left: 0.42em;
}
.countdown__clock {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.4rem, 2vw, 1.75rem);
  padding: 1.25rem clamp(0.5rem, 3vw, 2rem);
  border-top: 1px solid var(--gold-soft);
  border-bottom: 1px solid var(--gold-soft);
  position: relative;
}
.countdown__clock::before,
.countdown__clock::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold);
  background: var(--ink);
  transform: rotate(45deg);
  top: 50%;
  margin-top: -4px;
}
.countdown__clock::before { left: -4px; }
.countdown__clock::after  { right: -4px; }

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: clamp(56px, 11vw, 110px);
}
.countdown__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1;
  color: var(--cream);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.countdown__label {
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--mist);
}
.countdown__sep {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--gold-soft);
  line-height: 1;
  align-self: flex-start;
  margin-top: 0.15em;
}

@media (max-width: 580px) {
  .countdown__clock { gap: 0.35rem; padding: 1rem 0.5rem; }
  .countdown__sep   { font-size: 1.5rem; margin-top: 0.25em; }
  .countdown__label { letter-spacing: 0.18em; font-size: 0.6rem; }
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 1s 1.5s forwards;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--mist);
  opacity: 0;
  animation: fadeIn 1s 1.6s forwards;
}
.scroll-cue__line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 2s infinite ease-in-out;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50%      { transform: scaleY(0.3); transform-origin: top; }
}

/* -------- BUTTONS -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-radius: 999px;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--cream);
  color: var(--ink-deep);
  border: 1px solid var(--cream);
}
.btn--primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-deep);
  transform: translateY(-2px);
}
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(242, 234, 216, 0.3);
}
.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.btn--sm { padding: 0.7rem 1.2rem; font-size: 0.72rem; }
.btn--lg { padding: 1.1rem 2rem; font-size: 0.85rem; }

/* -------- MARQUEE -------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-deep);
}
.marquee__track {
  display: flex;
  gap: 4rem;
  animation: scroll 50s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--gold);
  white-space: nowrap;
  font-weight: 400;
}
.marquee__track span {
  flex-shrink: 0;
  padding-right: 4rem;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

/* -------- BLOCK (generic section) -------- */
.block {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 7rem var(--gutter);
}

.block__index {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 2rem;
}

.block__h {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0 0 2rem;
  color: var(--cream);
  max-width: 18ch;
}

.block__lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--cream-dim);
  max-width: 44ch;
  margin: 0;
}

/* -------- DISCIPLINES -------- */
.disciplines {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto 4rem;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.discipline {
  position: relative;
  padding: 2.5rem 2rem 2rem;
  border: 1px solid var(--ink-line);
  background: linear-gradient(180deg, var(--ink-soft) 0%, var(--ink) 100%);
  transition: border-color 0.4s, transform 0.4s;
  display: flex;
  flex-direction: column;
}
.discipline:hover {
  border-color: var(--gold-soft);
  transform: translateY(-4px);
}
.discipline:hover .discipline__icon {
  color: var(--gold);
  transform: rotate(20deg) scale(1.1);
}

.discipline__num {
  position: absolute;
  top: 1.5rem; right: 1.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--mist);
}
.discipline__icon {
  font-size: 2.5rem;
  color: var(--gold-soft);
  margin-bottom: 1.5rem;
  transition: transform 0.4s, color 0.4s;
  font-family: var(--serif);
}
.discipline__title {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--cream);
}
.discipline__body {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cream-dim);
  margin: 0 0 1.75rem;
}
.discipline__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-bottom: 1.75rem;
}
.discipline__cats li {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: var(--cream-dim);
}
.discipline__link {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ink-line);
  transition: gap 0.25s;
}
.discipline__link:hover { gap: 0.85rem; color: var(--cream); }

@media (max-width: 950px) {
  .disciplines { grid-template-columns: 1fr; }
}

/* -------- TIMELINE / DATES -------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 3rem;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.timeline__item {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
  transition: background 0.3s;
}
.timeline__item:last-child { border-right: 0; }
.timeline__item:hover { background: var(--ink-soft); }

.timeline__tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.timeline__label {
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cream-dim);
  font-weight: 500;
}
.timeline__date {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--cream);
  line-height: 1.1;
}
.timeline__note {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--mist);
  margin-top: auto;
}

.timeline__item--festival {
  background: linear-gradient(180deg, rgba(184, 52, 27, 0.08), transparent);
}
.timeline__item--festival .timeline__tag { color: var(--ember); }
.timeline__item--festival .timeline__date { color: var(--gold); }

@media (max-width: 950px) {
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline__item { border-bottom: 1px solid var(--ink-line); }
  .timeline__item:nth-child(2n) { border-right: 0; }
}
@media (max-width: 580px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline__item { border-right: 0; }
}

/* -------- EXPERIENCE -------- */
.experience__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.experience__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 2rem;
  margin-top: 3rem;
}
.experience__list li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: 1rem;
  color: var(--cream);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ink-line);
}
.experience__list span {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--gold);
  letter-spacing: 0.15em;
  flex-shrink: 0;
}

@media (max-width: 950px) {
  .experience__grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 580px) {
  .experience__list { grid-template-columns: 1fr; }
}

/* -------- FRAME (image treatment) -------- */
.frame {
  margin: 0;
  position: relative;
  overflow: hidden;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.85) brightness(0.85);
  transition: filter 0.6s, transform 1.2s;
}
.frame:hover img { filter: contrast(1.1) saturate(1) brightness(0.95); transform: scale(1.02); }
.frame::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--gold-soft);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.frame figcaption {
  margin-top: 0.85rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mist);
}
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--portrait { aspect-ratio: 4 / 5; }

/* -------- WHY GRID -------- */
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 4rem;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.why__card {
  background: var(--ink);
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: background 0.3s;
}
.why__card:hover { background: var(--ink-soft); }
.why__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--gold);
}
.why__card h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--cream);
}
.why__card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--cream-dim);
  margin: 0;
}
.why__card em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
}

@media (max-width: 950px) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .why__grid { grid-template-columns: 1fr; } }

/* -------- VENUE -------- */
.venue {
  position: relative;
  z-index: 1;
  background: var(--ink-deep);
  padding: 7rem 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.venue__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.venue__visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  position: relative;
}
.venue__visual .frame--tall { grid-column: 1; grid-row: 1 / 3; }
.venue__visual .frame--wide { grid-column: 2; grid-row: 2; aspect-ratio: 1 / 1; }
.venue__visual::before {
  content: '';
  position: absolute;
  top: -1.5rem; right: -1.5rem;
  width: 60%; height: 60%;
  border: 1px solid var(--gold-soft);
  z-index: -1;
  opacity: 0.5;
}

.venue__details {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
}
.venue__details > div {
  border-top: 1px solid var(--ink-line);
  padding-top: 1rem;
}
.venue__details dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.venue__details dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
}

@media (max-width: 950px) {
  .venue__inner { grid-template-columns: 1fr; gap: 3rem; }
  .venue__visual { margin-bottom: 1rem; }
}

/* -------- ABOUT -------- */
.about__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 5rem;
  align-items: start;
}
.about__body {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--cream-dim);
  margin: 1.5rem 0 0;
  max-width: 50ch;
}
.about__body strong {
  color: var(--cream);
  font-weight: 600;
}
.about__numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ink-line);
}
.about__numbers > div {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.about__numbers strong {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -0.02em;
  line-height: 1;
}
.about__numbers span {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mist);
}

@media (max-width: 950px) {
  .about__grid { grid-template-columns: 1fr; gap: 3rem; }
}

/* -------- SPONSORS -------- */
.sponsors__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
}

/* -------- FINAL CTA -------- */
.cta {
  position: relative;
  z-index: 1;
  padding: 8rem var(--gutter);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(200, 165, 96, 0.1), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(184, 52, 27, 0.08), transparent 60%),
    var(--ink-deep);
  border-top: 1px solid var(--ink-line);
  overflow: hidden;
}
.cta::before {
  /* Big aperture mark behind */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  opacity: 0.15;
  pointer-events: none;
}
.cta::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px; height: 400px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  opacity: 0.1;
  pointer-events: none;
}
.cta__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-narrow);
  margin: 0 auto;
}
.cta__overline {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ember);
  display: inline-block;
  margin-bottom: 2rem;
  position: relative;
}
.cta__overline::before, .cta__overline::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px; height: 1px;
  background: var(--ember);
  opacity: 0.5;
}
.cta__overline::before { right: calc(100% + 1rem); }
.cta__overline::after { left: calc(100% + 1rem); }
.cta__h {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 1.5rem;
  color: var(--cream);
}
.cta__sub {
  max-width: 38ch;
  margin: 0 auto 3rem;
  font-size: 1.1rem;
  color: var(--cream-dim);
  line-height: 1.55;
}
.cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* -------- FOOTER -------- */
.footer {
  position: relative;
  z-index: 1;
  background: var(--ink-deep);
  padding: 5rem var(--gutter) 2rem;
  border-top: 1px solid var(--ink-line);
}
.footer__top {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer__name {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.footer__tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0.3rem 0 0;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.footer__cols h4 {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.footer__cols ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer__cols a {
  font-size: 0.92rem;
  color: var(--cream-dim);
  transition: color 0.2s;
}
.footer__cols a:hover { color: var(--gold); }

.footer__bottom {
  max-width: var(--max);
  margin: 4rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mist);
}
.footer__bottom p { margin: 0; }

@media (max-width: 950px) {
  .footer__top { grid-template-columns: 1fr; gap: 3rem; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer__cols { grid-template-columns: 1fr; }
}

/* -------- SCROLL REVEAL -------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* -------- PREFERS REDUCED MOTION -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .stars span { animation: none; opacity: 0.4; }
  .marquee__track { animation: none; }
}