:root {
  --bg-950: #0A0A0A;
  --bg-900: #111111;
  --bg-850: #161616;
  --bg-800: #1C1C1C;
  --bg-700: #272727;
  --gold-200: #F3E3B0;
  --gold-300: #E8CE85;
  --gold-400: #D4AF37;
  --gold-500: #B8942B;
  --gold-600: #96771F;
  --bone-100: #F5F1E8;
  --bone-300: #CFC9BC;
  --bone-400: #A8A196;
  --bone-600: #6E6860;
  --danger: #E5484D;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-950);
  color: var(--bone-100);
  font-family: 'Inter', sans-serif;
}

.font-display { font-family: 'Anton', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

::selection { background: var(--gold-400); color: var(--bg-950); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-950); }
::-webkit-scrollbar-thumb { background: var(--bg-700); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-500); }

/* Signature clipped "bib number tag" corner motif */
.clip-tag { clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.clip-tag-sm { clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.text-gradient-gold {
  background: linear-gradient(120deg, #F3E3B0 0%, #D4AF37 45%, #96771F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  background: rgba(17, 17, 17, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1 !important; transform:none !important; transition:none !important; } }

/* Header */
#site-header { transition: background-color .3s ease, padding .3s ease, backdrop-filter .3s ease; }
#site-header.is-scrolled {
  background: rgba(10,10,10,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(212,175,55,0.12);
  padding-top: .65rem; padding-bottom: .65rem;
}
.nav-link { font-family:'JetBrains Mono',monospace; font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--bone-300); transition:color .2s ease; }
.nav-link:hover, .nav-link.is-active { color: var(--gold-400); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.9rem; font-family:'JetBrains Mono',monospace; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.2em; transition:all .3s ease; cursor:pointer; border:none;
}
.btn-primary { background: var(--gold-400); color:#0A0A0A; box-shadow:0 0 0 1px rgba(212,175,55,.4), 0 24px 44px -20px rgba(212,175,55,.35); }
.btn-primary:hover { background: var(--gold-300); transform: translateY(-2px); }
.btn-outline { background:transparent; color:var(--gold-300); border:1px solid rgba(212,175,55,.5); }
.btn-outline:hover { background:var(--gold-400); color:#0A0A0A; transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--bone-100); padding-left:0; padding-right:0; }
.btn-ghost:hover { color:var(--gold-400); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

.card { border:1px solid rgba(168,161,150,0.14); transition:border-color .3s ease, background-color .3s ease; }
.card:hover { border-color: rgba(212,175,55,.4); }

.chip {
  font-family:'JetBrains Mono',monospace; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
  padding:.55rem 1.1rem; border:1px solid rgba(168,161,150,.28); color:var(--bone-300);
  transition:all .2s ease; background:transparent; cursor:pointer;
}
.chip:hover { border-color: rgba(212,175,55,.6); color: var(--gold-300); }
.chip.is-active { background: var(--gold-400); color:#0A0A0A; border-color: var(--gold-400); }

input, textarea, select {
  background: var(--bg-950); border:1px solid rgba(168,161,150,.28); padding:.9rem 1.1rem;
  font-size:.9rem; color:var(--bone-100); width:100%;
}
input:focus, textarea:focus, select:focus { outline:none; border-color: var(--gold-400); }
input::placeholder, textarea::placeholder { color: var(--bone-600); }
input[type="checkbox"] { width:auto; accent-color: var(--gold-400); }

.field-error { color: var(--danger); font-size: .75rem; margin-top: .35rem; display:none; }
.field-error.is-visible { display:block; }
.field-invalid { border-color: var(--danger) !important; }

/* Countdown */
.countdown-unit {
  background: rgba(17,17,17,.7);
  border: 1px solid rgba(212,175,55,.2);
  min-width: 76px;
}

/* Festival hero glow layers (pure CSS — no external images required) */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 15% 15%, rgba(212,175,55,0.16), transparent 40%),
    radial-gradient(circle at 85% 25%, rgba(212,175,55,0.10), transparent 38%),
    radial-gradient(circle at 50% 90%, rgba(212,175,55,0.08), transparent 45%);
}

/* Hero banner image slot. Drop a file at img/hero-banner.jpg and it is picked
   up automatically (see the HTML comment above #hero-banner). Until then,
   this gradient (matching the site's black/gold palette) fills the space. */
.hero-banner-bg {
  background-image:
    url('img/hero-banner.jpg'),
    radial-gradient(circle at 30% 20%, rgba(212,175,55,0.14), transparent 55%),
    linear-gradient(160deg, #1C1C1C 0%, #0A0A0A 55%, #111111 100%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.hero-beams {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(100deg, rgba(212,175,55,0.05) 0px, rgba(212,175,55,0.05) 2px, transparent 2px, transparent 60px);
  mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%);
}
.grain-overlay {
  position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.modal-backdrop {
  position: fixed; inset: 0; z-index: 70; background: rgba(10,10,10,.92);
  display: none; align-items: center; justify-content: center; padding: 1.25rem;
}
.modal-backdrop.is-open { display: flex; }

#mobile-menu { display: none; }
#mobile-menu.is-open { display: flex; }

/* Admin table */
table.admin-table { border-collapse: collapse; width: 100%; }
table.admin-table th, table.admin-table td {
  padding: .75rem 1rem; text-align: left; font-size: .8rem; border-bottom: 1px solid rgba(168,161,150,.12);
  white-space: nowrap;
}
table.admin-table th {
  font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem;
  color: var(--gold-400); position: sticky; top: 0; background: var(--bg-900);
}
table.admin-table tbody tr:hover { background: rgba(212,175,55,.05); }

/* Sponsor tiles */
.sponsor-tile {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  padding: 1.5rem 1rem;
  border: 1px solid rgba(168,161,150,.14);
  transition: border-color .3s ease, transform .3s ease;
}
.sponsor-tile:hover { border-color: rgba(212,175,55,.4); transform: translateY(-2px); }
.sponsor-logo-box {
  width: 100%; height: 64px; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.sponsor-logo-box img { max-height: 44px; max-width: 100%; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .85; transition: filter .3s ease, opacity .3s ease; }
.sponsor-tile:hover .sponsor-logo-box img { filter: grayscale(0) brightness(1); opacity: 1; }
.sponsor-fallback {
  display: none; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-family: 'JetBrains Mono', monospace; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--bone-400); text-align: center;
}
.sponsor-name { font-family: 'JetBrains Mono', monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bone-400); }
.sponsor-tile-empty { border-style: dashed; border-color: rgba(168,161,150,.2); }
.sponsor-logo-box-empty { border: 1px dashed rgba(168,161,150,.25); align-items: center; justify-content: center; }