/* ============================================================
   AMOR — brand system
   Bold type, black/white, generous negative space, no stock imagery.
   Placeholder "covers" are pure CSS gradients/marks, swap for real
   photography later via the admin panel.
   ============================================================ */

:root {
  /* Navy is the default theme — nightlife-brand convention (dark
     background, one saturated accent reserved for CTAs), and it reads far
     better against event photography/video than a light background does.
     See the strategy notes shipped alongside this site for the reasoning.
     The original light "paper" theme is still available, fully intact,
     as an opt-in preview via ?theme=paper on any URL — see the
     :root[data-theme='paper'] block below. */
  --ink: #f4f5fa;
  --paper: #0a0f22;
  --paper-dim: #101a33;
  --line: rgba(255, 255, 255, 0.14);
  --muted: #9aa3bf;
  --accent: #ff5457; /* brightened red — kept AA-contrast on navy */
  --accent-2: #5b78ff; /* electric indigo, secondary accent */
  --accent-2-dim: #3d54c9;
  --gold: #dab876;
  --radius: 2px;
  --max: 1180px;
  --serif-fallback: 'Times New Roman', Georgia, serif;
  --band-ink: #05070f;
  --surface: #101a33; /* card/input/stat-box backgrounds */
  --nav-surface: rgba(10, 15, 34, 0.88);
  --lede: #c7cde0;
}

/* ---------- Paper theme (legacy/opt-in) ----------
   The original light theme — burgundy-on-paper. Preview any page with
   ?theme=paper. Nothing else about the markup changes; this block just
   remaps the same variables + a handful of hardcoded card surfaces back
   to their original light-mode values. */
:root[data-theme='paper'] {
  --ink: #0a0a0a;
  --paper: #fafaf8;
  --paper-dim: #f0efec;
  --line: #dedcd6;
  --muted: #6b6a65;
  --accent: #b1191f;
  --accent-2: #3d5bf6;
  --accent-2-dim: #2a3fb0;
  --gold: #a8863d;
  --band-ink: #0a0a10;
  --surface: #fff;
  --nav-surface: rgba(250, 250, 248, 0.92);
  --lede: #333;
}
:root[data-theme='paper'] body {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(61, 91, 246, 0.09), transparent 60%),
    radial-gradient(900px 460px at -10% 8%, rgba(177, 25, 31, 0.07), transparent 55%),
    var(--paper);
}
:root[data-theme='paper'] .nav { border-bottom-color: var(--line); }
:root[data-theme='paper'] .alert-error { background: #fbe9e9; border: 1px solid var(--accent); color: #7a1116; }
:root[data-theme='paper'] .alert-ok { background: #eef6ec; border: 1px solid #3f7a3f; color: #244f24; }
:root[data-theme='paper'] .ticker { background: linear-gradient(90deg, #000 0%, #14142a 45%, #1a1030 75%, #000 100%); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(91, 120, 255, 0.16), transparent 60%),
    radial-gradient(900px 460px at -10% 8%, rgba(255, 84, 87, 0.10), transparent 55%),
    var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.display {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); text-transform: uppercase; }
.h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: -0.01em; }
.eyebrow {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-weight: 700;
}
.lede { font-size: 1.1rem; color: var(--lede); max-width: 60ch; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-surface);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.wordmark { font-weight: 900; font-size: 1.4rem; letter-spacing: 0.02em; text-transform: uppercase; }
.wordmark .dot { color: var(--accent); }
.logo-badge {
  display: inline-flex; align-items: center;
  background: #000;
  padding: 7px 12px;
  border-radius: var(--radius);
  line-height: 0;
}
.logo-badge img { height: 30px; width: auto; display: block; }
.logo-badge.logo-badge-lg { padding: 10px 16px; }
.logo-badge.logo-badge-lg img { height: 46px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.nav-links a:hover { color: var(--accent); }
.nav-cta { border: 1.5px solid var(--ink); padding: 8px 16px; border-radius: var(--radius); white-space: nowrap; }
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px 2px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); }
.nav-toggle-input { display: none; }
.nav-mobile { display: none; }

@media (max-width: 780px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top: 1px solid transparent;
    transition: max-height .2s ease;
  }
  .nav-mobile a {
    padding: 14px 24px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 1px solid var(--line);
  }
  .nav-toggle-input:checked ~ .nav-mobile {
    max-height: 400px;
    border-top: 1px solid var(--line);
  }
}

/* ---------- Ticker ---------- */
.ticker {
  background: linear-gradient(90deg, #000 0%, #14142a 45%, #1a1030 75%, #000 100%);
  color: #f5f5f5; /* the ticker strip is always dark by design, in both themes — not tied to --paper, which flips meaning in the navy theme */
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid #000;
}
.ticker-track {
  display: inline-block;
  padding: 9px 0;
  animation: ticker-scroll 22s linear infinite;
  will-change: transform;
}
.ticker-track span {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 14px;
}
.ticker-dot { color: var(--accent); padding: 0 !important; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Page transitions ----------
   Default state (no class) is fully visible — this only animates if the
   JS in animations.js actually runs and adds .page-enter first. A visitor
   with JS disabled or blocked just sees the normal, un-animated page. */
[data-page-main].page-enter {
  opacity: 0;
  transform: translateY(14px);
}
[data-page-main].page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .38s ease, transform .38s ease;
}
[data-page-main].page-leave {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: opacity .2s ease, transform .2s ease;
}

/* ---------- Hero line-split (for the entrance animation) ---------- */
.hero .display .line-mask { display: block; overflow: hidden; }
.hero .display .line-inner { display: block; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  [data-page-main] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: all .15s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: #2a2a2a; }
.btn-accent { border-color: var(--accent); color: var(--accent); }
.btn-accent:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-sm { padding: 8px 16px; font-size: 0.72rem; }

/* ---------- Sections ---------- */
section { padding: 72px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.hr { border: none; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Hero ---------- */
.hero { padding: 96px 0 64px; position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; z-index: 0; inset: -10% -10% auto auto;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(61,91,246,0.16) 0%, rgba(61,91,246,0.05) 45%, transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
/* Real event-photo crossfade behind the homepage headline (see the
   "Homepage hero photos" admin card) — the decorative blue radial blob
   below is for the plain-background state only, so it's suppressed once
   real photos are in rotation. */
.hero-has-bg::before { display: none; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation-name: hero-bg-fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.hero-bg-scrim {
  position: absolute; inset: 0;
  /* Darkens toward the left/top where the headline sits, lighter toward the
     right, so the white text stays readable against whatever's underneath. */
  background:
    linear-gradient(100deg, rgba(5,7,15,0.92) 0%, rgba(5,7,15,0.72) 45%, rgba(5,7,15,0.5) 100%),
    linear-gradient(0deg, var(--paper) 0%, transparent 18%);
}
/* @keyframes hero-bg-fade itself is generated per-page in views/home.js,
   sized to however many hero photos are actually uploaded — the visible
   "on" window has to be 1/N of the cycle, which isn't expressible with a
   static rule here since N varies. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { animation: none; opacity: 0; }
  .hero-bg img:first-child { opacity: 1; }
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center; }
/* Single-column hero (home page, since the disco ball's removal left it
   with nothing to put in a second column) — same left-column look as
   .hero-grid's first track, just not split into a grid at all. */
.hero-solo { max-width: 640px; }
.hero .display { margin: 18px 0 22px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; border-top: 1px solid var(--line); padding-top: 28px; }
.hero-stat b { display: block; font-size: 2.2rem; font-weight: 900; }
.hero-stat span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Cover placeholders (no stock imagery) ---------- */
.cover {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: var(--ink);
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover .mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 2.6rem; letter-spacing: 0.05em;
  opacity: 0.9; text-transform: uppercase;
}
.cover .label {
  position: relative; z-index: 2; padding: 18px;
  width: 100%;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent 70%);
}
.cover .label .eyebrow { color: rgba(255,255,255,0.75); }
.cover .label h4 { color: #fff; font-size: 1.15rem; text-transform: uppercase; }

.cover-1 { background: linear-gradient(160deg, #0a0a0a 0%, #2b2b2b 55%, #b1191f 140%); }
.cover-2 { background: linear-gradient(160deg, #14141a 0%, #3a3a44 55%, #a8863d 140%); }
.cover-3 { background: radial-gradient(circle at 30% 20%, #262626 0%, #0a0a0a 60%); }
.cover-4 { background: linear-gradient(200deg, #0a0a0a, #58151a 80%); }
.cover-5 { background: linear-gradient(135deg, #0a0a0a, #1c1c1c 40%, #6b6a65 160%); }
.cover-6 { background: linear-gradient(160deg, #101014, #26262e 60%, #b1191f 160%); }

.cover-sm { aspect-ratio: 1 / 1; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .faq-grid { grid-template-columns: 1fr; } }

/* /contact — styled like a chat widget, but it's a plain server-rendered
   form (no JS, no live chat) that saves to the contact_messages table —
   see the lib/db.js note on why there's no real-time send behind it. */
.chat-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.chat-box-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-dim);
}
.chat-box-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(160deg, #0a0a0a 0%, #2b2b2b 55%, var(--accent) 140%);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.95rem;
}
.chat-box-title { font-weight: 800; font-size: 0.92rem; }
.chat-box-subtitle { font-size: 0.75rem; color: var(--muted); }
.chat-box-thread { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble {
  max-width: 85%; padding: 10px 14px; border-radius: 14px;
  font-size: 0.88rem; line-height: 1.6;
}
.chat-bubble-them {
  align-self: flex-start;
  background: var(--paper-dim); color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-bubble-me {
  align-self: flex-end;
  background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-box-form { padding: 0 20px 20px; }
.chat-box .alert { margin: 0 20px 16px; }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface);
}

/* DJ subsection on the Events page — deliberately impersonal (an "AMOR
   Resident DJ" role, not a bio), kept secondary to the event listings
   above it. */
.dj-section {
  display: flex; gap: 28px; align-items: flex-start;
}
@media (max-width: 640px) { .dj-section { flex-direction: column; align-items: center; text-align: center; } }
.dj-mark {
  flex: 0 0 auto;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(160deg, #0a0a0a 0%, #2b2b2b 55%, #b1191f 140%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 2.1rem; letter-spacing: 0.04em;
}
.dj-content { flex: 1 1 auto; min-width: 0; }
.dj-genre-tag {
  display: inline-block;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 4px 11px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--muted);
}
.dj-upcoming { margin: 18px 0 4px; }
.dj-upcoming-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 8px; }
.dj-set-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dj-set-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.86rem; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.dj-set-list a { font-weight: 700; }
.dj-set-list span { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 640px) { .dj-set-list li { flex-direction: column; gap: 2px; } }
/* PLACEHOLDER: styled box standing in for a real SoundCloud/Mixcloud
   <iframe> — replace .dj-mix-placeholder with the embed once there's a
   real link, the surrounding .dj-mix-embed wrapper can stay. */
.dj-mix-embed { margin: 18px 0 0; }
.dj-mix-placeholder {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 18px; text-align: center;
  font-size: 0.8rem; color: var(--muted);
  background: var(--surface-2, rgba(255,255,255,0.02));
}

.event-card .cover { margin-bottom: 14px; }
.event-card h3 { font-size: 1.15rem; text-transform: uppercase; margin-bottom: 4px; }
.event-meta { font-size: 0.8rem; color: var(--muted); margin-bottom: 10px; }

/* ---------- Membership plans ---------- */
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan.featured {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2), 0 18px 40px -20px rgba(61,91,246,0.45);
  position: relative;
}
.plan.featured::before {
  content: 'MOST POPULAR';
  position: absolute; top: -12px; left: 26px;
  background: var(--accent-2); color: #fff; font-size: 0.65rem; letter-spacing: 0.1em;
  padding: 4px 10px; font-weight: 700;
}
.plan .price { font-size: 2.4rem; font-weight: 900; margin: 10px 0 4px; }
.plan .price span { font-size: 0.9rem; font-weight: 600; color: var(--muted); text-transform: none; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 26px; flex: 1; }
.plan li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.plan li:first-child { border-top: none; }

/* ---------- Team / leaderboard ---------- */
.rep-card { text-align: center; padding: 26px 16px; }
.rep-avatar {
  width: 74px; height: 74px; border-radius: 50%;
  /* Was --ink bg / #fff text — on the navy theme --ink is near-white, so
     this rendered as invisible white-on-white initials. Use the accent
     for a visible, on-brand chip in both themes instead. */
  background: var(--accent); color: #fff;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; margin: 0 auto 14px;
}
.rep-code { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.rep-avatar-photo { object-fit: cover; background: var(--surface); }

.leaderboard { width: 100%; border-collapse: collapse; }
.leaderboard th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--ink);
}
.leaderboard td { padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.leaderboard tr:hover td { background: var(--paper-dim); }
.rank { font-weight: 900; font-size: 1.1rem; width: 40px; }
.rank-1 { color: var(--accent); }
.rank-2, .rank-3 { color: var(--gold); }
.pill {
  display: inline-block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 100px; border: 1px solid var(--line); font-weight: 700;
}
.pill-active { border-color: var(--ink); }

/* Admin-togglable urgency badge on event cards/pages — set from
   /admin/events, never automatic, so it stays honest rather than a
   fabricated always-on "hurry up" banner. */
.badge-selling-fast {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--accent); color: #fff;
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 100px;
}
.attendee-count {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--muted); margin: 10px 0 0;
}
.attendee-count b { color: var(--ink); }

/* ---------- Forms ---------- */
.form-card { max-width: 440px; margin: 0 auto; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 7px; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 0.95rem; font-family: inherit; background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 90px; }

.waitlist-box { padding: 18px; border: 1.5px solid var(--line); border-radius: var(--radius); }
.waitlist-form input[type="email"] {
  width: 100%; padding: 12px 14px; margin-bottom: 10px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 0.95rem; font-family: inherit; background: var(--surface); color: var(--ink);
}
.waitlist-form input[type="email"]:focus { outline: none; border-color: var(--ink); }

.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 0.88rem; margin-bottom: 20px; }
.alert-error { background: #fbe9e9; border: 1px solid var(--accent); color: #7a1116; }
.alert-ok { background: #eef6ec; border: 1px solid #3f7a3f; color: #244f24; }

/* ---------- Dashboard ---------- */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0 46px; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }
.stat-box { border: 1px solid var(--line); padding: 24px; border-radius: var(--radius); background: var(--surface); }
.stat-box b { display: block; font-size: 2.1rem; font-weight: 900; }
.stat-box span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

table.simple { width: 100%; border-collapse: collapse; }
table.simple th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--ink); }
table.simple td { padding: 12px 10px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }

.tabs { display: flex; gap: 4px; margin-bottom: 30px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs a { padding: 10px 16px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; border-bottom: 2px solid transparent; color: var(--muted); }
.tabs a.active { color: var(--ink); border-color: var(--ink); }

/* ---------- Countdown bar ---------- */
.countdown-bar {
  background: linear-gradient(90deg, var(--accent-2-dim), var(--accent-2));
  color: #fff;
}
.countdown-bar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 24px; flex-wrap: wrap;
}
.countdown-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.countdown-value { font-size: 0.85rem; font-weight: 900; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }

/* ---------- Photo gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery .cover { aspect-ratio: 1/1; }
.gallery .cover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery .cover.cover-video::after {
  content: '▶';
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; padding-left: 2px;
}

/* ---------- Photo gallery lightbox (zero-JS, CSS :target) ---------- */
.gallery-item { display: block; position: relative; }
.gallery-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox:target { display: flex; }
.lightbox-scrim { position: absolute; inset: 0; background: rgba(4,6,14,0.92); }
.lightbox-frame {
  position: relative; z-index: 1;
  max-width: min(92vw, 1000px); max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
}
.lightbox-frame img, .lightbox-frame video {
  max-width: 100%; max-height: 80vh; border-radius: 6px;
  display: block;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7);
}
.lightbox-caption { color: rgba(255,255,255,0.75); font-size: 0.85rem; margin-top: 12px; text-align: center; }
.lightbox-close {
  position: absolute; top: -18px; right: -18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: #111;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; line-height: 1; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1; text-decoration: none;
  backdrop-filter: blur(4px);
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: -8px; }
.lightbox-next { right: -8px; }
@media (max-width: 700px) {
  .lightbox { padding: 16px; }
  .lightbox-close { top: -14px; right: 0; }
  .lightbox-prev { left: -4px; }
  .lightbox-next { right: -4px; }
}

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 48px 0; margin-top: 60px; background: var(--band-ink); color: rgba(255,255,255,0.85); }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-links { display: flex; gap: 20px; font-size: 0.82rem; }
.footer-links a:hover { color: var(--accent-2); }
.fine { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 20px; }
/* Deliberately quiet — a small credit line, not a callout. No divider, no
   icon/badge treatment, no brighter link color: it should read as part of
   the fine print, not something drawing the eye. This is the only place a
   name or handle appears anywhere on the site. */
.footer-credit {
  margin-top: 18px;
  font-size: 0.68rem; color: rgba(255,255,255,0.38);
}
.footer-credit a { color: rgba(255,255,255,0.38); text-decoration: none; }
.footer-credit a:hover { color: rgba(255,255,255,0.6); text-decoration: underline; }

/* ---------- Dark bands ----------
   Full-bleed dark sections used sparingly to break up the paper background
   and give the site some depth/colour instead of feeling like one flat page. */
.band-dark {
  background:
    radial-gradient(700px 380px at 15% 0%, rgba(61,91,246,0.28), transparent 60%),
    radial-gradient(700px 420px at 90% 100%, rgba(177,25,31,0.22), transparent 60%),
    var(--band-ink);
  color: #fff;
  position: relative;
}
.band-dark .muted { color: rgba(255,255,255,0.6); }
.band-dark .lede { color: rgba(255,255,255,0.78); }
.band-dark .eyebrow { color: rgba(255,255,255,0.55); }
.band-dark .btn { border-color: rgba(255,255,255,0.75); color: #fff; }
.band-dark .btn:hover { background: #fff; color: var(--ink); }
.band-dark .btn-solid { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.band-dark .btn-solid:hover { background: #2c47d6; border-color: #2c47d6; }
.band-dark .hr { border-color: rgba(255,255,255,0.14); }

/* ---------- Hero ticket (Events page) ----------
   Pure CSS/HTML — no JS, no external library, no CDN dependency. Replaces
   the old disco ball (all three tiers of it removed) with a levitating,
   slowly turntable-spinning event ticket that links straight into the buy
   flow. Mirrors the visual language of the existing 3D ticket modal below
   (white card, dark stub, perforation with punched circular notches) for
   consistency across the site — see ".ticket-perf" for the same clipped-
   circle notch trick this reuses. Because it's plain CSS, the no-JS and
   reduced-motion fallbacks are nearly free: there's no script to fail, so
   "JS disabled" already looks identical to normal, and reduced-motion just
   freezes the animations at one flattering angle instead of an empty state. */
.hero-ticket-stage {
  position: relative;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A large perspective distance relative to the ticket's 300px width keeps
     the apparent size essentially constant through the spin — a tighter
     value (this was 1400px) makes a flat plane visibly balloon/shrink as it
     approaches edge-on, which read as a sizing bug rather than a clean flip. */
  perspective: 3600px;
}
.hero-ticket-shadow {
  position: absolute; left: 50%; bottom: 96px;
  width: 220px; height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 55%, transparent 75%);
  filter: blur(3px);
  animation: hero-ticket-shadow 4.5s ease-in-out infinite;
}
.hero-ticket-bob { animation: hero-ticket-bob 4.5s ease-in-out infinite; }
.hero-ticket-spin {
  position: relative;
  width: 300px; height: 168px;
  transform-style: preserve-3d;
  animation: hero-ticket-spin 17s linear infinite;
}
.hero-ticket-stage:hover .hero-ticket-spin,
.hero-ticket-stage:focus-visible .hero-ticket-spin { filter: brightness(1.06); }
.hero-ticket-face {
  position: absolute; inset: 0;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,0.55);
}
.hero-ticket-front { background: #f7f5ef; color: #17181d; }
/* Back face — same off-white card stock as the front (so it still reads as
   one physical object, not two different props), with a single spade image
   centered on it. AMOR's first-ever event was literally called "Ace", so
   the flip carries meaning — back is where it started, front is what's
   coming up next. */
.hero-ticket-back {
  transform: rotateY(180deg);
  align-items: center; justify-content: center;
  background: #f7f5ef;
}
.hero-ticket-back-spade { width: 78px; height: 94px; fill: #15161c; }
.hero-ticket-main { flex: 1 1 auto; padding: 18px 16px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.hero-ticket-wordmark { display: block; font-weight: 900; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-ticket-eyebrow { display: block; margin-top: 4px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #7a7d8c; }
.hero-ticket-serial { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.62rem; letter-spacing: 0.06em; color: #9a9da8; }
.hero-ticket-foil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
/* Perforation divider between the main face and the stub — a dashed line
   plus two circular notches clipped by .hero-ticket-face's overflow:hidden
   so only the inner half of each circle shows, exactly like .ticket-perf
   below does horizontally; this one runs vertically. */
.hero-ticket-perf { position: relative; width: 0; border-left: 2px dashed rgba(20,20,25,0.18); }
.hero-ticket-perf::before, .hero-ticket-perf::after {
  content: ''; position: absolute; left: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--paper);
}
.hero-ticket-perf::before { top: -9px; }
.hero-ticket-perf::after { bottom: -9px; }
.hero-ticket-stub {
  flex: 0 0 64px; padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #efece3, #e6e2d5);
}
.hero-ticket-stub-label {
  font-weight: 800; font-size: 0.62rem; letter-spacing: 0.16em;
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  color: #4a4c55;
}
.hero-ticket-barcode { width: 20px; height: 46px; background: repeating-linear-gradient(90deg, #2a2b31 0 2px, transparent 2px 4px); }
@keyframes hero-ticket-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
@keyframes hero-ticket-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@keyframes hero-ticket-shadow {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.3; transform: translateX(-50%) scale(0.82); }
}
@media (max-width: 900px) { .hero-ticket-stage { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-ticket-bob, .hero-ticket-shadow { animation: none; }
  .hero-ticket-spin { animation: none; transform: rotateY(-22deg); }
}

/* ---------- 3D ticket modal ----------
   Triggered by JS (public/js/ticket-modal.js) on click of any
   [data-ticket-trigger] link. The link keeps a real href, so with JS
   disabled/blocked it just navigates to Fatsoma directly — this modal is
   pure enhancement on top of that. */
.ticket-modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 6, 12, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ticket-modal-backdrop.open { opacity: 1; pointer-events: auto; }
.ticket-modal { perspective: 1400px; width: 100%; max-width: 400px; }
.ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.55);
  transform: rotateY(-90deg) scale(0.92);
  opacity: 0;
  transform-origin: left center;
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), opacity .35s ease;
}
.ticket-modal-backdrop.open .ticket-card { transform: rotateY(0deg) scale(1); opacity: 1; }
.ticket-modal-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  background: none; border: none; color: rgba(0,0,0,0.4);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px;
}
.ticket-modal-close:hover { color: var(--ink); }
.ticket-card-main {
  padding: 30px 26px 22px;
  background:
    radial-gradient(500px 200px at 100% 0%, rgba(61,91,246,0.14), transparent 60%),
    radial-gradient(500px 200px at 0% 100%, rgba(177,25,31,0.10), transparent 60%),
    #fff;
}
.ticket-eyebrow { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.2em; color: var(--accent-2); font-weight: 800; margin-bottom: 8px; }
.ticket-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 18px; }
.ticket-row { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.ticket-row span { color: var(--muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }
.ticket-perf {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--line);
  margin: 0 22px;
}
.ticket-perf::before, .ticket-perf::after {
  content: '';
  position: absolute; top: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--band-ink);
}
.ticket-perf::before { left: -33px; }
.ticket-perf::after { right: -33px; }
.ticket-card-stub {
  padding: 20px 26px 26px;
  background: var(--band-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ticket-stub-label {
  font-weight: 900; letter-spacing: 0.14em; font-size: 0.78rem;
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  color: rgba(255,255,255,0.55);
}
.ticket-card-stub .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) {
  .ticket-card { transition: opacity .2s ease; transform: none !important; }
}

/* ---------- Admin ---------- */
.admin-table-wrap { overflow-x: auto; }
.badge-role { font-size: 0.65rem; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--line); border-radius: 100px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }