:root {
  --ink: #0a0a0c;
  --ink-2: #17151a;
  --ink-3: #211e24;
  --paper: #f3f1f7;
  --muted: #9d97ac;
  --accent: #cda355;
  --accent-dark: #a67c34;
  --crimson: #c81e3a;
  --crimson-dark: #9f1239;

  --cat-concert: #cda355;
  --cat-festival: #ffb703;
  --cat-nightlife: #00b39a;
  --cat-comedy: #ffd60a;
  --cat-theatre: #d62839;
  --cat-sports: #2e7d32;
  --cat-conference: #6b7a8f;
  --cat-other: #8d99ae;

  --gradient-brand: linear-gradient(135deg, #f2c879 0%, #cda355 50%, #8a6423 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(205,163,85,0.18), rgba(138,100,35,0.14));
  --glow-accent: 0 10px 40px -8px rgba(205,163,85,0.45), 0 4px 14px -6px rgba(138,100,35,0.3);
  --glow-accent-lg: 0 20px 60px -12px rgba(205,163,85,0.5), 0 8px 20px -8px rgba(138,100,35,0.35);
}

/* ============ Reset (Tailwind-preflight equivalent) ============ */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: rgba(255,255,255,0.1); }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; overflow-x: hidden; }
body { margin: 0; line-height: inherit; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; background: none; }
button { text-transform: none; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
input::placeholder, textarea::placeholder { opacity: 1; }

/* ============ App-specific custom classes ============ */
[x-cloak] { display: none !important; }

html { color-scheme: dark; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0912; }
::-webkit-scrollbar-thumb { background: #2a2438; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #3a3050; }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
}

.text-gradient {
  position: relative;
  color: var(--paper);
  white-space: nowrap;
}
.text-gradient::after {
  content: '';
  position: absolute;
  left: -0.06em; right: -0.06em; bottom: 0.1em;
  height: 0.14em;
  background: var(--gradient-brand);
  border-radius: 999px;
  z-index: -1;
  transform: skewX(-8deg);
}

.bg-radial-fade {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* Ticket-stub silhouette: notches cut on the left/right edges like a real ticket */
.ticket-stub {
  position: relative;
  -webkit-mask-image:
    radial-gradient(circle 10px at 0 50%, transparent 10px, black 10.5px),
    radial-gradient(circle 10px at 100% 50%, transparent 10px, black 10.5px);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect;
}

.blob {
  background: var(--accent) !important;
  filter: none;
  opacity: 1;
  border-radius: 3px !important;
  animation: none;
}

.animate-in {
  animation: fadeUp 0.5s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-ping {
  animation: ping 1.6s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.7; }
  75%, 100% { transform: scale(1.8); opacity: 0; }
}

/* Stepper number input: hide native spin buttons, we render our own +/- controls */
input.qty::-webkit-outer-spin-button,
input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.qty { -moz-appearance: textfield; }

@media (prefers-reduced-motion: reduce) {
  .blob, .animate-in, .animate-ping { animation: none !important; }
}

/* ============ Self-hosted utility layer (generated; covers exactly what the templates use) ============ */
.absolute{position:absolute;}
.antialiased{-webkit-font-smoothing:antialiased;}
.aspect-\[16\/10\]{aspect-ratio:16 / 10;}
.backdrop-blur-lg{backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
.bg-amber-500\/15{background-color:rgba(245,158,11,0.15);}
.bg-black\/70{background-color:rgba(0,0,0,0.7);}
.bg-brand-500{background-color:#cda355;}
.bg-brand-500\/10{background-color:rgba(205,163,85,0.1);}
.bg-brand-500\/30{background-color:rgba(205,163,85,0.3);}
.bg-clip-text{-webkit-background-clip:text; background-clip:text;}
.bg-emerald-400{background-color:#34d399;}
.bg-emerald-500\/10{background-color:rgba(16,185,129,0.1);}
.bg-emerald-500\/15{background-color:rgba(16,185,129,0.15);}
.bg-flame-500{background-color:#cda355;}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-from,transparent), var(--tw-to,transparent));}
.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-from,transparent), var(--tw-to,transparent));}
.bg-gradient-to-t{background-image:linear-gradient(to top, var(--tw-from,transparent), var(--tw-to,transparent));}
.bg-ink{background-color:#0a0912;}
.bg-ink-2{background-color:#14111f;}
.bg-ink-3{background-color:#1d1830;}
.bg-ink\/80{background-color:rgba(10,10,12,0.8);}
.bg-red-500\/10{background-color:rgba(239,68,68,0.1);}
.bg-red-500\/15{background-color:rgba(239,68,68,0.15);}
.bg-transparent{background-color:transparent;}
.bg-white{background-color:#ffffff;}
.bg-white\/10{background-color:rgba(255,255,255,0.1);}
.bg-white\/5{background-color:rgba(255,255,255,0.05);}
.blur-sm{filter:blur(4px);}
.border{border-width:1px; border-style:solid; border-color:rgba(255,255,255,0.1);}
.border-b{border-bottom-width:1px; border-style:solid;}
.border-brand-400\/30{border-color:rgba(224,184,112,0.3);}
.border-dashed{border-style:dashed;}
.border-emerald-500\/30{border-color:rgba(16,185,129,0.3);}
.border-red-500\/30{border-color:rgba(239,68,68,0.3);}
.border-t{border-top-width:1px; border-style:solid;}
.border-white\/10{border-color:rgba(255,255,255,0.1);}
.border-white\/15{border-color:rgba(255,255,255,0.15);}
.border-white\/5{border-color:rgba(255,255,255,0.05);}
.bottom-0{bottom:0;}
.duration-500{transition-duration:500ms;}
.fixed{position:fixed;}
.flex{display:flex;}
.flex-1{flex:1 1 0%;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.font-bold{font-weight:700;}
.font-display{font-family:'Space Grotesk', sans-serif;}
.font-medium{font-weight:500;}
.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;}
.font-sans{font-family:'Inter', sans-serif;}
.font-semibold{font-weight:600;}
.from-black\/90{--tw-from:rgba(0,0,0,0.9);}
.from-brand-400{--tw-from:#e0b870;}
.from-brand-500{--tw-from:#cda355;}
.from-brand-700\/40{--tw-from:rgba(90,66,20,0.4);}
.from-ink{--tw-from:#0a0912;}
.from-white{--tw-from:#ffffff;}
.gap-1{gap:0.25rem;}
.gap-10{gap:2.5rem;}
.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.h-10{height:2.5rem;}
.h-1\.5{height:0.375rem;}
.h-16{height:4rem;}
.h-20{height:5rem;}
.h-32{height:8rem;}
.h-4{height:1rem;}
.h-5{height:1.25rem;}
.h-7{height:1.75rem;}
.h-\[70vh\]{height:70vh;}
.h-8{height:2rem;}
.h-9{height:2.25rem;}
.h-96{height:24rem;}
.h-full{height:100%;}
.hidden{display:none;}
.inline-block{display:inline-block;}
.inline-flex{display:inline-flex;}
.inset-0{top:0; right:0; bottom:0; left:0;}
.inset-x-0{left:0; right:0;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.leading-\[1\.05\]{line-height:1.05;}
.leading-snug{line-height:1.375;}
.leading-tight{line-height:1.25;}
.-left-24{left:-6rem;}
.max-w-2xl{max-width:42rem;}
.max-w-3xl{max-width:48rem;}
.max-w-7xl{max-width:80rem;}
.max-w-lg{max-width:32rem;}
.max-w-md{max-width:28rem;}
.max-w-none{max-width:none;}
.max-w-xl{max-width:36rem;}
.max-w-xs{max-width:20rem;}
.min-h-\[70vh\]{min-height:70vh;}
.mt-1{margin-top:0.25rem;}
.mt-10{margin-top:2.5rem;}
.mt-12{margin-top:3rem;}
.mt-2{margin-top:0.5rem;}
.mt-24{margin-top:6rem;}
.mt-3{margin-top:0.75rem;}
.mt-4{margin-top:1rem;}
.mt-5{margin-top:1.25rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.-mx-4{margin-left:-1rem; margin-right:-1rem;}
.mx-auto{margin-left:auto; margin-right:auto;}
.object-cover{object-fit:cover;}
.opacity-30{opacity:0.3;}
.opacity-50{opacity:0.5;}
.opacity-\[0\.06\]{opacity:0.06;}
.overflow-hidden{overflow:hidden;}
.overflow-x-auto{overflow-x:auto;}
.p-16{padding:4rem;}
.p-3{padding:0.75rem;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.pb-16{padding-bottom:4rem;}
.pb-4{padding-bottom:1rem;}
.place-items-center{place-items:center;}
.pointer-events-none{pointer-events:none;}
.prose{max-width:65ch;}
.prose-invert{color:#d4d4d8;}
.pt-16{padding-top:4rem;}
.pt-4{padding-top:1rem;}
.pt-6{padding-top:1.5rem;}
.px-3{padding-left:0.75rem; padding-right:0.75rem;}
.px-4{padding-left:1rem; padding-right:1rem;}
.px-5{padding-left:1.25rem; padding-right:1.25rem;}
.px-6{padding-left:1.5rem; padding-right:1.5rem;}
.py-1{padding-top:0.25rem; padding-bottom:0.25rem;}
.py-12{padding-top:3rem; padding-bottom:3rem;}
.py-1\.5{padding-top:0.375rem; padding-bottom:0.375rem;}
.py-16{padding-top:4rem; padding-bottom:4rem;}
.py-2{padding-top:0.5rem; padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem; padding-bottom:0.625rem;}
.py-3{padding-top:0.75rem; padding-bottom:0.75rem;}
.py-4{padding-top:1rem; padding-bottom:1rem;}
.relative{position:relative;}
.-right-24{right:-6rem;}
.right-3{right:0.75rem;}
.rounded-2xl{border-radius:1.5rem;}
.rounded-full{border-radius:9999px;}
.rounded-lg{border-radius:0.75rem;}
.rounded-xl{border-radius:1rem;}
.rounded-3xl{border-radius:2rem;}
.scroll-smooth{scroll-behavior:smooth;}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.5);}
.shadow-glow{box-shadow:0 4px 16px -4px rgba(0,0,0,0.4);}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -4px rgba(0,0,0,.3);}
.shrink-0{flex-shrink:0;}
.min-w-0{min-width:0;}
.truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.break-words{overflow-wrap:break-word; word-break:break-word;}
.whitespace-nowrap{white-space:nowrap;}
.sticky{position:sticky;}
.tabular-nums{font-variant-numeric:tabular-nums;}
.text-\[10px\]{font-size:10px;}
.text-\[11px\]{font-size:11px;}
.text-2xl{font-size:1.5rem; line-height:2rem;}
.text-3xl{font-size:1.875rem; line-height:2.25rem;}
.text-4xl{font-size:2.25rem; line-height:2.5rem;}
.text-amber-300{color:#fcd34d;}
.text-amber-400{color:#fbbf24;}
.text-brand-100{color:#ede9fe;}
.text-brand-300{color:#c4b5fd;}
.text-center{text-align:center;}
.text-emerald-200{color:#a7f3d0;}
.text-emerald-400{color:#34d399;}
.text-flame-400{color:#e0b870;}
.text-left{text-align:left;}
.text-lg{font-size:1.125rem; line-height:1.75rem;}
.text-red-200{color:#fecaca;}
.text-red-300{color:#fca5a5;}
.text-red-400{color:#f87171;}
.text-sm{font-size:0.875rem; line-height:1.25rem;}
.text-transparent{color:transparent;}
.text-white{color:#ffffff;}
.text-white\/20{color:rgba(255,255,255,0.2);}
.text-xl{font-size:1.25rem; line-height:1.75rem;}
.text-xs{font-size:0.75rem; line-height:1rem;}
.text-zinc-100{color:#f4f4f5;}
.text-zinc-200{color:#e4e4e7;}
.text-zinc-300{color:#d4d4d8;}
.text-zinc-400{color:#a1a1aa;}
.text-zinc-500{color:#71717a;}
.text-zinc-600{color:#52525b;}
.to-flame-500{--tw-to:#cda355;}
.to-flame-500\/30{--tw-to:rgba(205,163,85,0.3);}
.to-ink\/40{--tw-to:rgba(10,10,12,0.4);}
.top-0{top:0;}
.top-10{top:2.5rem;}
.top-20{top:5rem;}
.-top-24{top:-6rem;}
.top-24{top:6rem;}
.top-3{top:0.75rem;}
.to-transparent{--tw-to:transparent;}
.to-zinc-400{--tw-to:#a1a1aa;}
.tracking-tight{letter-spacing:-0.025em;}
.tracking-wide{letter-spacing:0.025em;}
.tracking-widest{letter-spacing:0.1em;}
.transition{transition-property:color,background-color,border-color,box-shadow,transform,filter,opacity; transition-duration:150ms; transition-timing-function:cubic-bezier(.4,0,.2,1);}
.underline{text-decoration:underline;}
.uppercase{text-transform:uppercase;}
.via-ink\/80{--tw-via:rgba(10,10,12,0.8);}
.w-10{width:2.5rem;}
.w-1\.5{width:0.375rem;}
.w-16{width:4rem;}
.w-20{width:5rem;}
.w-32{width:8rem;}
.w-4{width:1rem;}
.w-5{width:1.25rem;}
.w-7{width:1.75rem;}
.w-8{width:2rem;}
.w-80{width:20rem;}
.w-9{width:2.25rem;}
.w-96{width:24rem;}
.w-full{width:100%;}
.-z-10{z-index:-10;}
.z-40{z-index:40;}
.z-50{z-index:50;}

.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,0.1);}
.hover\:border-brand-400\/40:hover{border-color:rgba(224,184,112,0.4);}
.hover\:border-brand-400\/60:hover{border-color:rgba(224,184,112,0.6);}
.hover\:brightness-110:hover{filter:brightness(1.1);}
.hover\:shadow-glow:hover{box-shadow:0 8px 24px -6px rgba(0,0,0,0.45);}
.hover\:text-brand-200:hover{color:#ddd6fe;}
.hover\:text-white:hover{color:#ffffff;}
.hover\:text-zinc-200:hover{color:#e4e4e7;}
.hover\:-translate-y-1:hover{transform:translateY(-0.25rem);}

.focus\:border-brand-400:focus{border-color:#e0b870;}
.focus\:outline-none:focus{outline:2px solid transparent; outline-offset:2px;}
.focus\:ring-1:focus{box-shadow:0 0 0 1px var(--ring-color, #cda355);}
.focus\:ring-brand-400:focus{--ring-color:#e0b870;}

.disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}
.disabled\:opacity-40:disabled{opacity:0.4;}

.placeholder\:text-zinc-500::placeholder{color:#71717a;}

.selection\:bg-brand-500\/40::selection{background-color:rgba(205,163,85,0.4);}

.group:hover .group-hover\:bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-from,transparent), var(--tw-to,transparent));}
.group:hover .group-hover\:from-brand-500{--tw-from:#cda355;}
.group:hover .group-hover\:scale-105{transform:scale(1.05);}
.group:hover .group-hover\:text-white{color:#ffffff;}
.group:hover .group-hover\:to-flame-500{--tw-to:#cda355;}

.space-y-2>*+*{margin-top:0.5rem;}
.space-y-3>*+*{margin-top:0.75rem;}
.space-y-4>*+*{margin-top:1rem;}
.space-y-5>*+*{margin-top:1.25rem;}

@media (min-width:640px){
.sm\:border-l{border-left-width:1px; border-style:solid;}
.sm\:border-t-0{border-top-width:0;}
.sm\:flex-row{flex-direction:row;}
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sm\:inline-block{display:inline-block;}
.sm\:items-center{align-items:center;}
.sm\:mx-0{margin-left:0; margin-right:0;}
.sm\:pt-24{padding-top:6rem;}
.sm\:px-0{padding-left:0; padding-right:0;}
.sm\:px-6{padding-left:1.5rem; padding-right:1.5rem;}
.sm\:text-5xl{font-size:3rem; line-height:1;}
.sm\:text-6xl{font-size:3.75rem; line-height:1;}
.sm\:text-2xl{font-size:1.5rem; line-height:2rem;}
.sm\:px-5{padding-left:1.25rem; padding-right:1.25rem;}
.sm\:py-2\.5{padding-top:0.625rem; padding-bottom:0.625rem;}
.sm\:gap-3{gap:0.75rem;}
.sm\:text-sm{font-size:0.875rem; line-height:1.25rem;}
}

@media (min-width:768px){
.md\:flex{display:flex;}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.md\:hidden{display:none;}
.md\:text-7xl{font-size:4.5rem; line-height:1;}
}

@media (min-width:1024px){
.lg\:col-span-1{grid-column:span 1 / span 1;}
.lg\:col-span-2{grid-column:span 2 / span 2;}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.lg\:px-8{padding-left:2rem; padding-right:2rem;}
}

/* ============ Motion & interaction polish ============ */

/* Scroll reveal: paired with static/js/motion.js's IntersectionObserver */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="scale"] { transform: translateY(0) scale(0.96); }
[data-reveal="scale"].is-visible { transform: translateY(0) scale(1); }

/* Navbar: a floating rounded pill that tightens and deepens its shadow on scroll */
.header-inner {
  transition: padding 0.35s ease, box-shadow 0.35s ease;
}
header[data-site-header].is-scrolled .header-inner {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.75);
}

/* Active nav link indicator: animated underline that grows from the center */
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; height: 2px; width: 0;
  background: var(--accent); border-radius: 2px;
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

/* Buttons: tactile press feedback everywhere .btn-press is applied */
.btn-press { transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; }
.btn-press:active { transform: scale(0.96); }

/* Accessible, on-brand focus ring (keyboard nav only) */
:focus-visible {
  outline: 2px solid #e0b870;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Animated gradient text shimmer for hero headline accents */
.text-gradient {
  background-size: 200% auto;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Confetti burst: small CSS-particle celebration on the order-success page */
.confetti-burst {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 60; overflow: hidden;
}
.confetti-burst span {
  position: absolute; top: -10px; width: 8px; height: 14px; background: var(--bg, #cda355);
  border-radius: 2px;
  animation: confetti-fall 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) var(--delay, 0ms) both;
}
@keyframes confetti-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x, 0), 100vh) rotate(var(--rot, 180deg)); opacity: 0; }
}

/* Smooth cross-page navigation where the browser supports the View Transitions API */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .event-card, .btn-press, .text-gradient { animation: none !important; transition: none !important; }
}

/* ============ Functional category color chips ============ */
.cat-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25rem 0.6rem 0.25rem 0.5rem;
  border-radius: 999px;
  color: var(--ink);
}
.cat-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.cat-chip[data-cat="concert"] { background: var(--cat-concert); }
.cat-chip[data-cat="festival"] { background: var(--cat-festival); }
.cat-chip[data-cat="nightlife"] { background: var(--cat-nightlife); color: var(--paper); }
.cat-chip[data-cat="comedy"] { background: var(--cat-comedy); }
.cat-chip[data-cat="theatre"] { background: var(--cat-theatre); color: var(--paper); }
.cat-chip[data-cat="sports"] { background: var(--cat-sports); color: var(--paper); }
.cat-chip[data-cat="conference"] { background: var(--cat-conference); color: var(--paper); }
.cat-chip[data-cat="other"] { background: var(--cat-other); color: var(--ink); }

/* Text-only variant (eyebrows) */
.cat-text[data-cat="concert"] { color: var(--cat-concert); }
.cat-text[data-cat="festival"] { color: var(--cat-festival); }
.cat-text[data-cat="nightlife"] { color: var(--cat-nightlife); }
.cat-text[data-cat="comedy"] { color: var(--cat-comedy); }
.cat-text[data-cat="theatre"] { color: var(--cat-theatre); }
.cat-text[data-cat="sports"] { color: var(--cat-sports); }
.cat-text[data-cat="conference"] { color: var(--cat-conference); }
.cat-text[data-cat="other"] { color: var(--cat-other); }

/* Placeholder art (no cover image yet) tinted by category instead of a decorative gradient */
.cat-wash[data-cat="concert"] { background: color-mix(in srgb, var(--cat-concert) 22%, var(--ink-3)); }
.cat-wash[data-cat="festival"] { background: color-mix(in srgb, var(--cat-festival) 22%, var(--ink-3)); }
.cat-wash[data-cat="nightlife"] { background: color-mix(in srgb, var(--cat-nightlife) 22%, var(--ink-3)); }
.cat-wash[data-cat="comedy"] { background: color-mix(in srgb, var(--cat-comedy) 22%, var(--ink-3)); }
.cat-wash[data-cat="theatre"] { background: color-mix(in srgb, var(--cat-theatre) 22%, var(--ink-3)); }
.cat-wash[data-cat="sports"] { background: color-mix(in srgb, var(--cat-sports) 22%, var(--ink-3)); }
.cat-wash[data-cat="conference"] { background: color-mix(in srgb, var(--cat-conference) 22%, var(--ink-3)); }
.cat-wash[data-cat="other"] { background: color-mix(in srgb, var(--cat-other) 22%, var(--ink-3)); }

/* ============ Solid accent utilities (no gradients as decoration) ============ */
.bg-accent { background-color: var(--accent); }
.text-accent { color: var(--accent); }
.border-accent { border-color: var(--accent); }
a.bg-accent:hover, button.bg-accent:hover { background-color: var(--accent-dark); }

/* ============ Typography: a real workhorse face, with a poster face reserved
   for the handful of true hero moments (not applied to every heading) ============ */
.font-display { font-family: 'Archivo', sans-serif; letter-spacing: -0.01em; }
.font-sans, body { font-family: 'Archivo', sans-serif; }
.font-poster {
  font-family: 'Bebas Neue', 'Archivo Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.88;
  font-weight: 400; /* Bebas Neue only ships one weight */
}

/* ============ Added utilities for the redesign pass ============ */
.text-ink{color:var(--ink);}
.w-fit{width:fit-content;}
.bg-ink\/90{background-color:rgba(10,10,12,0.9);}
.bg-ink-2\/90{background-color:rgba(23,21,26,0.72);}
.group:hover .group-hover\:bg-accent{background-color:var(--accent);}
.group:hover .group-hover\:text-ink{color:var(--ink);}
.border-l-4{border-left-width:4px;}

/* Additional utilities introduced by the redesign's poster-style headlines */
.pt-12{padding-top:3rem;}
.text-5xl{font-size:3rem; line-height:1;}
.text-6xl{font-size:3.75rem; line-height:1;}
.text-white\/25{color:rgba(255,255,255,0.25);}
.hover\:border-white\/25:hover{border-color:rgba(255,255,255,0.25);}
.hover\:border-white\/40:hover{border-color:rgba(255,255,255,0.4);}
@media (min-width:640px){
.sm\:text-7xl{font-size:4.5rem; line-height:1;}
}

/* ============ Hero background slideshow ============ */
.hero-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center 30%;
  filter: saturate(0.85) contrast(1.12) brightness(0.9);
  transition: opacity 1.6s ease;
  transform: scale(1);
}
.hero-slide.is-active {
  opacity: 1;
  animation: kenburns 7s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
/* Duotone: warm the photography toward the brand gold instead of leaving raw stock-photo color.
   A radial glow (not a flat tint) sits behind the hero copy for depth, echoing the reference's
   ambient-light treatment rather than a single crushing dark overlay. */
.hero-slideshow::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(205,163,85,0.22) 0%, transparent 70%),
    linear-gradient(160deg, rgba(138,100,35,0.22) 0%, rgba(10,10,12,0.1) 45%, rgba(10,10,12,0.45) 100%);
  mix-blend-mode: multiply;
  z-index: 1;
}
.hero-slideshow::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(10,10,12,0.48);
  z-index: 2;
}

/* Slide progress dots */
.hero-dots { position: absolute; left: 0; right: 0; bottom: 1.5rem; z-index: 3; display: flex; gap: 6px; }
.hero-dot { width: 22px; height: 3px; background: rgba(255,255,255,0.25); transition: background 0.3s ease; }
.hero-dot.is-active { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active { animation: none; }
}

/* ============ Homepage hero countdown (flat numbers, no boxes) ============ */
.hero-countdown { display: flex; align-items: baseline; justify-content: center; gap: 1.75rem; }
.hero-countdown .unit { display: flex; flex-direction: column; align-items: center; }
.hero-countdown .num {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1; color: var(--paper); font-variant-numeric: tabular-nums;
}
.hero-countdown .lbl { margin-top: 0.4rem; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hero-countdown .sep { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vw, 3.25rem); color: var(--accent); align-self: flex-start; margin-top: -0.1em; }

/* Extra utilities for the taller centered hero */
.max-w-4xl{max-width:56rem;}
.min-h-\[100vh\]{min-height:100vh;}
.mt-14{margin-top:3.5rem;}
.px-8{padding-left:2rem; padding-right:2rem;}
.hover\:underline:hover{text-decoration:underline;}

/* ============ Dashboard utilities ============ */
.border-collapse{border-collapse:collapse;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,0.05);}
.inline{display:inline;}
.max-w-6xl{max-width:72rem;}
.min-w-\[560px\]{min-width:560px;}
.min-w-\[720px\]{min-width:720px;}
.ml-2{margin-left:0.5rem;}
.ml-3{margin-left:0.75rem;}
.py-10{padding-top:2.5rem; padding-bottom:2.5rem;}
.text-right{text-align:right;}
@media (min-width:640px){
.sm\:col-span-2{grid-column:span 2 / span 2;}
.sm\:col-span-4{grid-column:span 4 / span 4;}
.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

/* ============ Crimson: functional urgency/scarcity accent (not decorative) ============ */
.bg-crimson{background-color:var(--crimson);}
.text-crimson{color:var(--crimson);}
.border-crimson{border-color:var(--crimson);}
.h-3\.5{height:0.875rem;}
.w-3\.5{width:0.875rem;}
.hover\:border-accent:hover{border-color:var(--accent);}
.hover\:text-accent:hover{color:var(--accent);}

/* ============ Additional utilities: dashboard gallery/lineup UI ============ */
.divide-y>*+*{border-top-width:1px; border-top-style:solid;}
.divide-white\/5>*+*{border-top-color:rgba(255,255,255,0.05);}
.h-24{height:6rem;}
.hover\:text-red-200:hover{color:#fecaca;}
.px-2{padding-left:0.5rem; padding-right:0.5rem;}
.py-0\.5{padding-top:0.125rem; padding-bottom:0.125rem;}
.right-1{right:0.25rem;}
.top-1{top:0.25rem;}
.aspect-square{aspect-ratio:1 / 1;}
.h-12{height:3rem;}
.w-12{width:3rem;}
.hover\:opacity-90:hover{opacity:0.9;}
@media (min-width:640px){
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.py-14{padding-top:3.5rem; padding-bottom:3.5rem;}
.border-\[3px\]{border-width:3px;}
.border-white\/20{border-color:rgba(255,255,255,0.2);}
.bg-emerald-500\/90{background-color:rgba(16,185,129,0.9);}
.bg-amber-500\/90{background-color:rgba(245,158,11,0.9);}
.bg-red-500\/90{background-color:rgba(239,68,68,0.9);}
.divide-x>*+*{border-left-width:1px; border-left-style:solid;}
.divide-white\/10>*+*{border-left-color:rgba(255,255,255,0.1);}
.leading-relaxed{line-height:1.625;}
@media (min-width:1024px){
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============ Visual refresh: rounded, gradient, animated ============ */

/* Primary CTA button: solid crimson — the site's action color. No gradient,
   no colored glow; a plain, confident fill with a crisp flat shadow. */
.btn-primary {
  background-color: var(--crimson);
  color: #fff;
  box-shadow: 0 2px 0 0 var(--crimson-dark);
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-primary:hover { background-color: #e0223f; }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--crimson-dark); }

/* Event card: no border — definition comes from the bg-ink-3 vs page-background
   contrast plus a neutral ambient shadow, which deepens (not colors) on hover. */
.event-card {
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
}

/* Soft drifting background blobs — used behind the hero for depth without
   the flat grain-texture overlay that was removed earlier. Blurred, low
   opacity, slow motion; never placed over text. */
.hero-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
  animation: blob-drift 18s ease-in-out infinite;
}
.hero-blob.blob-a {
  width: 32rem; height: 32rem;
  background: radial-gradient(circle at 30% 30%, #cda355, transparent 70%);
  top: -8rem; left: -10rem;
  animation-delay: 0s;
}
.hero-blob.blob-b {
  width: 26rem; height: 26rem;
  background: radial-gradient(circle at 60% 40%, #8a6423, transparent 70%);
  bottom: -10rem; right: -8rem;
  animation-delay: -6s;
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3%, -4%) scale(1.08); }
  66% { transform: translate(-3%, 3%) scale(0.96); }
}

/* Wordmark: a subtle hover scale — cheap but effective micro-interaction
   that makes the brand mark feel crafted rather than static. */
.brand-mark { display: inline-flex; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.brand-mark:hover { transform: scale(1.035); }

/* Staggered entrance for grids of cards (paired with data-reveal in motion.js) */
[data-reveal-stagger] { transition-delay: calc(var(--stagger-i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .hero-blob, .btn-gradient, .brand-mark { animation: none !important; transition: none !important; }
}

/* Embedded venue map: slight desaturation + darkening so the Google Maps
   iframe sits naturally inside the dark theme instead of glaring white. */
.map-embed { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); }

/* Comparison panel tints: pairs the crimson 'problem' column with a matching
   accent 'solution' column as real color blocks, not just colored text. */
.bg-crimson\/10 { background-color: rgba(200, 30, 58, 0.1); }
.bg-accent\/10 { background-color: rgba(124, 58, 237, 0.1); }

/* Hero bleed: pulls the first section up behind the floating nav pill so the
   background image reaches the very top of the viewport instead of sitting
   below a solid strip of page background. min-height adds the same offset
   back so the section still reaches the true viewport bottom — without this,
   the pulled-up top shortens the box and the next section peeks in early. */
.-mt-hero-offset { margin-top: -80px; isolation: isolate; }
.hero-full-bleed { margin-top: -80px; min-height: calc(100vh + 80px); isolation: isolate; }
@media (min-width: 640px) {
  .-mt-hero-offset { margin-top: -92px; }
  .hero-full-bleed { margin-top: -92px; min-height: calc(100vh + 92px); }
}

/* Extra top padding on hero content so headlines clear the floating nav
   regardless of how flex vertical-centering places the content block. */
.pt-28 { padding-top: 7rem; }
@media (min-width: 640px) {
  .sm\:pt-32 { padding-top: 8rem; }
}

/* ============ Ticket card (order success / my-tickets) ============ */
.cat-edge { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 1; }
.cat-edge[data-cat="concert"] { background: var(--cat-concert); }
.cat-edge[data-cat="festival"] { background: var(--cat-festival); }
.cat-edge[data-cat="nightlife"] { background: var(--cat-nightlife); }
.cat-edge[data-cat="comedy"] { background: var(--cat-comedy); }
.cat-edge[data-cat="theatre"] { background: var(--cat-theatre); }
.cat-edge[data-cat="sports"] { background: var(--cat-sports); }
.cat-edge[data-cat="conference"] { background: var(--cat-conference); }
.cat-edge[data-cat="other"] { background: var(--cat-other); }

.ticket-watermark { filter: brightness(0) invert(1); }

/* Perforated seam between the ticket info panel and the QR stub — two circular
   notches punched into the card's top/bottom edge (clipped by overflow-hidden
   on the card), plus a dashed tear line down the seam itself. */
.ticket-notch-row { border-left: 1.5px dashed rgba(10, 10, 12, 0.2); }
.ticket-notch-row::before,
.ticket-notch-row::after {
  content: '';
  position: absolute;
  left: -11px;
  width: 22px; height: 22px;
  background: var(--ink);
  border-radius: 50%;
}
.ticket-notch-row::before { top: -11px; }
.ticket-notch-row::after { bottom: -11px; }

@media (max-width: 639px) {
  .ticket-notch-row { border-left: none; border-top: 1.5px dashed rgba(10, 10, 12, 0.2); }
  .ticket-notch-row::before, .ticket-notch-row::after { top: -11px; bottom: auto; }
  .ticket-notch-row::before { left: -11px; }
  .ticket-notch-row::after { left: auto; right: -11px; }
}