:root {
  --color-primary: #1D1D1F;
  --color-accent: #1B4D72;
  --color-accent-light: #2A6FA8;
  --color-text: #1D1D1F;
  --color-text-light: #6E6E73;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F5F7;
  --color-bg-card: #FFFFFF;
  --color-border: #D2D2D7;
  --color-success: #34C759;
  --color-error: #FF3B30;
  --max-width: 1100px;
  --radius: 16px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #F5F5F7;
    --color-text: #F5F5F7;
    --color-text-light: #A1A1A6;
    --color-bg: #000000;
    --color-bg-alt: #1D1D1F;
    --color-bg-card: #1D1D1F;
    --color-border: #424245;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Nav ---- */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.3s;
}

@media (prefers-color-scheme: dark) {
  nav {
    background: rgba(0, 0, 0, 0.8);
  }
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
}

.nav-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.02em;
  /* Icon + wordmark side-by-side, vertically centered. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-logo-mark {
  display: block;
  border-radius: 6px; /* Soft-corner the iOS app icon a touch */
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 28px;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--color-accent);
}

/* ---- Hero ---- */

.hero {
  position: relative;
  padding: 150px 0 90px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Decorative blue glow behind the hero, evokes the iOS app icon's
   rosette gradient without overwhelming the type. Pure CSS so we don't
   pull in another asset. */
.hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(27, 77, 114, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(42, 111, 168, 0.10), transparent 50%);
}
@media (prefers-color-scheme: dark) {
  .hero-glow {
    background:
      radial-gradient(ellipse at 50% -10%, rgba(42, 111, 168, 0.30), transparent 55%),
      radial-gradient(ellipse at 80% 30%, rgba(27, 77, 114, 0.22), transparent 50%);
  }
}

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--color-primary);
  margin-bottom: 22px;
}

.hero .subtitle {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.5;
}

.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.hero-platforms {
  margin-top: 14px;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  color: var(--color-text-light);
}

/* App Store badge — official Apple branding. Per Apple's marketing
   guidelines, the badge must keep its aspect ratio and not be modified
   beyond uniform scaling. We pick the height (no width override) so
   the SVG's intrinsic 119.66:40 ratio handles the rest. Minimum 40px
   height per Apple. Soft drop shadow on hover to read as tappable
   without cluttering the badge itself. */
.app-store-badge {
  display: inline-block;
  height: 56px;
  border-radius: 8px;
  transition: transform 0.18s ease, filter 0.18s ease;
  text-decoration: none;
  line-height: 0;
}
.app-store-badge svg {
  height: 100%;
  width: auto;
  display: block;
}
.app-store-badge:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}
.app-store-badge:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}
/* Until APP_STORE_URL is set, the badge stays visible (Apple's branding
   should not be hidden) but reads as muted so users don't expect the
   tap to land somewhere. Kept above 0.5 so the wordmark is still
   legible. */
.app-store-badge--soon {
  opacity: 0.6;
  cursor: default;
  pointer-events: auto; /* keep title/aria visible even when "disabled" */
}
.app-store-badge--soon:hover {
  transform: none;
  filter: none;
}

/* Generic .btn pill, kept for the contact form + any other CTAs. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-accent-light);
}

.btn-secondary {
  background: var(--color-bg-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-border);
}

.btn svg {
  width: 20px;
  height: 20px;
}

/* ---- Show Card (featured show) ---- */

.show-section {
  padding: 60px 0;
}

.show-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 768px) {
  .show-card {
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 24px;
  }
}

.show-card h3 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.show-card .show-org {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 20px;
}

.show-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.show-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--color-text-light);
}

.show-meta-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.show-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.show-actions .btn {
  width: 100%;
  justify-content: center;
}

.show-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 980px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(27, 77, 114, 0.1);
  color: var(--color-accent);
  margin-bottom: 12px;
}

@media (prefers-color-scheme: dark) {
  .show-badge {
    background: rgba(42, 111, 168, 0.2);
    color: var(--color-accent-light);
  }
}

/* ---- Features ---- */

.features {
  padding: 80px 0;
  background: var(--color-bg-alt);
}

.features h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 48px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}

.feature-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* ---- Contact ---- */

.contact {
  padding: 80px 0;
}

.contact h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.contact .section-subtitle {
  text-align: center;
  color: var(--color-text-light);
  margin-bottom: 36px;
  font-size: 1.05rem;
}

.contact-narrow {
  max-width: 520px;
}

.unified-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: flex;
  gap: 10px;
}

.form-row input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 980px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.2s;
}

.form-row input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(27, 77, 114, 0.15);
}

.honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.submit-btn {
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 600;
  background: var(--color-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.submit-btn:hover {
  background: var(--color-accent-light);
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Segmented control */
.mode-toggle {
  position: relative;
  display: flex;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 4px;
}

.mode-btn {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-light);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.25s;
  border-radius: 8px;
}

.mode-btn.active {
  color: var(--color-text);
}

.mode-indicator {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: var(--color-bg-card);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mode-toggle[data-active="message"] .mode-indicator {
  transform: translateX(100%);
}

/* Animated message fields */
.message-fields {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s, margin 0.35s;
  opacity: 0;
  margin-top: 0;
}

.message-fields.visible {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}

.message-fields-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-fields input,
.message-fields textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.2s;
}

.message-fields input:focus,
.message-fields textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(27, 77, 114, 0.15);
}

.message-fields textarea {
  resize: vertical;
  min-height: 100px;
}

.form-message {
  display: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

.form-message.success {
  background: rgba(52, 199, 89, 0.1);
  color: var(--color-success);
  border: 1px solid rgba(52, 199, 89, 0.2);
}

.form-message.error {
  background: rgba(255, 59, 48, 0.1);
  color: var(--color-error);
  border: 1px solid rgba(255, 59, 48, 0.2);
}

/* ---- Footer ---- */

footer {
  padding: 32px 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

footer p {
  font-size: 0.8rem;
  color: var(--color-text-light);
}

footer a {
  color: var(--color-accent);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ---- Responsive ---- */

@media (max-width: 600px) {
  .hero { padding: 120px 0 60px; }
  .features, .contact { padding: 60px 0; }
  #shows { padding: 60px 0 40px; }
  .nav-links { gap: 16px; }
  .form-row { flex-direction: column; }
  .form-row input { border-radius: 12px; }
  .submit-btn { width: 100%; border-radius: 12px; }
  .app-store-badge { height: 50px; }
  .show-row a {
    padding: 14px 16px;
    column-gap: 12px;
    grid-template-columns: 44px 1fr auto auto;
  }
  .show-row .show-logo { width: 44px; height: 44px; }
  .show-row .show-name { font-size: 1rem; }
}

/* ---- Shows list ---- */

#shows {
  padding: 80px 0 60px;
}
#shows h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  text-align: center;
}
#shows .section-subtitle {
  text-align: center;
  color: var(--color-text-light);
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 1rem;
}

#shows .shows-group {
  margin-bottom: 32px;
}
#shows .shows-group h3 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-light);
  margin-bottom: 10px;
  padding: 0 4px;
}
#shows ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* Each row is a CSS grid with three columns:
     1. Name + meta (stacked across the two rows)
     2. Status badge
     3. Trailing chevron
   The chevron lives in a pseudo-element so the markup stays clean —
   landing.js renders only name/meta/badge spans. */
.show-row a {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "logo  name  badge chev"
    "logo  meta  badge chev";
  column-gap: 14px;
  row-gap: 2px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.show-row .show-logo {
  grid-area: logo;
  align-self: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.show-row .show-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.show-row .show-logo--placeholder {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}
.show-row a::after {
  content: '';
  grid-area: chev;
  align-self: center;
  width: 16px;
  height: 16px;
  background-color: var(--color-text-light);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5.5 3l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5.5 3l5 5-5 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  opacity: 0.55;
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
.show-row a:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(27, 77, 114, 0.10);
}
.show-row a:hover::after {
  opacity: 1;
  background-color: var(--color-accent);
  transform: translateX(2px);
}
.show-row a:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.show-row .show-name {
  grid-area: name;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  min-width: 0;
}
.show-row .show-meta {
  grid-area: meta;
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-weight: 400;
}
.show-row .show-badge {
  grid-area: badge;
  align-self: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: none;
  margin-bottom: 0;
}
.badge-live     { background: rgba(52, 199, 89, 0.15);  color: #1f8a3e; }
.badge-upcoming { background: rgba(0, 113, 227, 0.12);  color: #0071e3; }
.badge-past     { background: rgba(120, 120, 128, 0.16); color: var(--color-text-light); }
@media (prefers-color-scheme: dark) {
  .badge-live     { background: rgba(52, 199, 89, 0.18);  color: #4cd964; }
  .badge-upcoming { background: rgba(82, 158, 255, 0.18); color: #82b1ff; }
  .badge-past     { background: rgba(160, 160, 170, 0.18); color: #b3b3b8; }
}

.loading, .empty, .error {
  padding: 32px 16px;
  text-align: center;
  color: var(--color-text-light);
  font-size: 0.95rem;
}
.error a { color: var(--color-accent); }