/**
 * Organic Template - Fluid Shapes + Nature
 *
 * Design Philosophy:
 * - Natural, earthy color palette
 * - Flowing organic shapes and wave dividers
 * - Morphing blob shapes
 * - Warm serif typography
 * - Soft curves and rounded elements
 *
 * Inspired by: Wellness brands, Sustainable design, Nature
 */

@import "./_base.css";

/* Page Background — consumed by _base.css */
:root {
  --tpl-page-bg: #fefae0;
}

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */
:root {
  /* Earth Palette */
  --organic-terracotta: #c9705d;
  --organic-terracotta-text: #8f4c3d; /* Darker variant for WCAG AA 4.5:1 contrast */
  --organic-olive: #606c38;
  --organic-sage: #a7b795;
  --organic-sand: #dda15e;
  --organic-amber: #8b6914;
  --organic-amber-hover: #7a5c10;
  --organic-amber-muted: rgba(139, 105, 20, 0.08);
  --organic-cream: #fefae0;
  --organic-earth: #283618;
  --organic-warm: #faedcd;

  /* Backgrounds */
  --organic-bg: #fefae0;
  --organic-bg-warm: #faedcd;
  --organic-bg-dark: #283618;

  /* Text */
  --organic-text: #283618;
  --organic-text-muted: #606c38;
  --organic-text-light: #fefae0;

  /* Typography */
  --organic-font-display: 'Fraunces', Georgia, serif;
  --organic-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font Sizes */
  --organic-text-xs: 0.75rem;
  --organic-text-sm: 0.875rem;
  --organic-text-base: 1rem;
  --organic-text-lg: 1.125rem;
  --organic-text-xl: 1.25rem;
  --organic-text-2xl: 1.5rem;
  --organic-text-3xl: 2rem;
  --organic-text-4xl: 2.5rem;

  /* Fluid Typography */
  --organic-hero-size: clamp(2.5rem, 7vw, 5rem);
  --organic-section-size: clamp(1.75rem, 4vw, 2.75rem);
  --organic-card-title: clamp(1.125rem, 2.5vw, 1.375rem);

  /* Spacing */
  --organic-space-1: 0.25rem;
  --organic-space-2: 0.5rem;
  --organic-space-3: 0.75rem;
  --organic-space-4: 1rem;
  --organic-space-5: 1.25rem;
  --organic-space-6: 1.5rem;
  --organic-space-8: 2rem;
  --organic-space-10: 2.5rem;
  --organic-space-12: 3rem;
  --organic-space-16: 4rem;
  --organic-space-20: 5rem;
  --organic-space-24: 6rem;

  /* Layout */
  --organic-container-max: 1200px;
  --organic-container-padding: clamp(1.5rem, 5vw, 3rem);

  /* Effects */
  --organic-radius-sm: 1rem;
  --organic-radius-md: 1.5rem;
  --organic-radius-lg: 2rem;
  --organic-radius-xl: 1.5rem;
  --organic-radius-blob: 60% 40% 30% 70% / 60% 30% 70% 40%;

  --organic-shadow-xs: 0 2px 4px rgba(40, 54, 24, 0.04);
  --organic-shadow-soft: 0 4px 6px rgba(40, 54, 24, 0.07), 0 8px 16px rgba(40, 54, 24, 0.1);
  --organic-shadow-md: 0 6px 12px rgba(40, 54, 24, 0.12), 0 12px 24px rgba(40, 54, 24, 0.15);
  --organic-shadow-lg: 0 8px 16px rgba(40, 54, 24, 0.14), 0 16px 32px rgba(40, 54, 24, 0.18);

  /* Transitions */
  --organic-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --organic-transition: 300ms var(--organic-ease-out);
  --organic-transition-slow: 500ms var(--organic-ease-out);
  --organic-blob-speed: 8s;

  /* Line Height */
  --organic-line-height: 1.7;

  /* Derived / Alias tokens (used in section templates) */
  --organic-surface: #faedcd;
  --organic-border: rgba(96, 108, 56, 0.2);
  --organic-accent: #606c38;
  --organic-primary: #606c38;
  --organic-font-serif: 'Fraunces', Georgia, serif;
  --organic-radius-full: 9999px;
  --organic-radius-2xl: 2rem;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
.organic-page {
  font-family: var(--organic-font-body);
  background: var(--organic-bg);
  color: var(--organic-text);
  line-height: var(--organic-line-height);
  /* font-smoothing is in _base.css */
  overflow-x: hidden;
}

/* Selection styling for brand feel */
.organic-page ::selection {
  background: rgba(96, 108, 56, 0.3);
  color: var(--organic-text);
}

/* Font-family defense against citastyle.css globals
   citastyle.css sets font-family: var(--font-sans) on bare p, span, div, etc.
   and font-family: var(--font-montserrat) on h1-h6.
   Inheritance from .organic-page alone doesn't win — need .organic-page X (0,1,1). */
.organic-page p,
.organic-page span,
.organic-page div,
.organic-page ul,
.organic-page ol,
.organic-page li,
.organic-page label,
.organic-page input,
.organic-page textarea,
.organic-page select {
  font-family: var(--organic-font-body);
  letter-spacing: normal;
}

.organic-page h1,
.organic-page h2,
.organic-page h3,
.organic-page h4,
.organic-page h5,
.organic-page h6 {
  font-family: var(--organic-font-display);
  letter-spacing: normal;
}

/* Color defense against citastyle.css globals
   citastyle.css paints bare p with var(--cita-text-primary); guests are forced
   dark, so that resolves to near-white — and an element rule beats inheritance,
   which made rich text (event/ticket descriptions) invisible on the cream
   surfaces (~1.07:1). :where() keeps specificity at (0,1,0) so every classed
   or inline color still wins. */
.organic-page :where(p) {
  color: var(--organic-text);
}

/* Dark sub-surfaces relied on the global near-white before — keep them light. */
.organic-footer :where(p) {
  color: var(--organic-text-light);
}

/* Skip Link */
.organic-skip-link {
  position: absolute;
  top: -100%;
  left: var(--organic-space-4);
  padding: var(--organic-space-3) var(--organic-space-4);
  background: var(--organic-olive);
  color: var(--organic-text-light);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--organic-radius-sm);
  z-index: 10000;
  transition: top var(--organic-transition);
}

.organic-skip-link:focus {
  top: var(--organic-space-4);
}

/* ==========================================================================
   WAVE DIVIDERS
   ========================================================================== */
.organic-wave-divider {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin: -1px 0;
}

.organic-wave-divider svg {
  width: 100%;
  height: clamp(40px, 6vw, 80px); /* Responsive height */
  display: block;
}

.organic-wave-divider--reverse svg {
  transform: rotate(180deg);
}

/* ==========================================================================
   STICKY BAR
   ========================================================================== */
.organic-sticky-bar {
  position: fixed;
  top: var(--cita-banner-h, 0px);
  left: 0;
  right: 0;
  background: rgba(254, 250, 224, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(167, 183, 149, 0.3);
  padding: var(--organic-space-3) var(--organic-space-4);
  z-index: 101;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform var(--organic-transition-slow), opacity var(--organic-transition-slow), top 0.3s ease;
}

.organic-sticky-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
}

.organic-sticky-bar-content {
  max-width: var(--organic-container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--organic-space-4);
}

.organic-sticky-bar-title {
  font-family: var(--organic-font-display);
  font-weight: 600;
  font-size: var(--organic-text-lg);
  color: var(--organic-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.organic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--organic-space-2);
  padding: var(--organic-space-3) var(--organic-space-6);
  font-family: var(--organic-font-body);
  font-size: var(--organic-text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--organic-radius-xl);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--organic-transition);
  white-space: nowrap;
}

.organic-btn:focus-visible {
  outline: 2px solid var(--organic-olive);
  outline-offset: 2px;
}

.organic-btn-primary {
  background: linear-gradient(135deg, #4a5a22, #7a8a48);
  color: var(--organic-text-light);
  border-color: #4a5a22;
  box-shadow: 0 6px 20px rgba(74, 90, 34, 0.2);
}

.organic-btn-primary:hover {
  background: linear-gradient(135deg, #3d4c1a, #606c38);
  border-color: #3d4c1a;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(74, 90, 34, 0.3);
}

.organic-btn-primary:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--organic-shadow-soft);
}

.organic-btn-secondary {
  background: var(--organic-terracotta);
  color: var(--organic-text-light);
  border-color: var(--organic-terracotta);
}

.organic-btn-secondary:hover {
  background: color-mix(in srgb, var(--organic-terracotta) 85%, black);
  transform: translateY(-2px);
}

.organic-btn-secondary:active {
  transform: translateY(0) scale(0.97);
}

.organic-btn-outline {
  background: transparent;
  color: var(--organic-olive);
  border-color: var(--organic-olive);
}

.organic-btn-outline:hover {
  background: var(--organic-olive);
  color: var(--organic-text-light);
}

.organic-btn-outline:active {
  background: var(--organic-olive);
  color: var(--organic-text-light);
  transform: scale(0.97);
}

.organic-btn-outline-light {
  background: transparent;
  color: var(--organic-text-light);
  border-color: rgba(254, 250, 224, 0.6);
}

.organic-btn-outline-light:hover {
  background: var(--organic-text-light);
  color: var(--organic-earth);
}

.organic-btn-outline-light:active {
  background: var(--organic-text-light);
  color: var(--organic-earth);
  transform: scale(0.97);
}

.organic-btn-sm {
  padding: var(--organic-space-2) var(--organic-space-4);
  font-size: var(--organic-text-xs);
}

.organic-btn-lg {
  padding: var(--organic-space-4) var(--organic-space-8);
  font-size: var(--organic-text-base);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.organic-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--organic-space-16) var(--organic-container-padding);
  background: var(--organic-warm);
  text-align: center;
  overflow: hidden;
}

/* Decorative Blobs */
.organic-hero-blob {
  position: absolute;
  opacity: 0.15;
  pointer-events: none;
}

.organic-hero-blob--1 {
  top: 10%;
  left: -10%;
  width: 40vw;
  height: 40vw;
  background: var(--organic-terracotta);
  border-radius: var(--organic-radius-blob);
  animation: blob-morph var(--organic-blob-speed) ease-in-out infinite;
}

.organic-hero-blob--2 {
  bottom: 10%;
  right: -10%;
  width: 35vw;
  height: 35vw;
  background: var(--organic-olive);
  border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  animation: blob-morph var(--organic-blob-speed) ease-in-out infinite reverse;
}

@keyframes blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%; }
}

.organic-hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.organic-hero-label {
  display: inline-block;
  font-family: var(--organic-font-body);
  font-size: var(--organic-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--organic-text-muted);
  margin-bottom: var(--organic-space-4);
}

.organic-hero-title {
  font-family: var(--organic-font-display);
  font-size: var(--organic-hero-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--organic-text);
  margin: 0 0 var(--organic-space-4);
}

.organic-hero-title-accent {
  color: var(--organic-terracotta-text);
  font-style: italic;
}

.organic-hero-subtitle {
  font-size: var(--organic-text-xl);
  color: var(--organic-text-muted);
  margin: 0 0 var(--organic-space-6);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.organic-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--organic-space-6);
  margin-bottom: var(--organic-space-8);
}

.organic-hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--organic-space-2);
  color: var(--organic-text-muted);
  font-size: var(--organic-text-sm);
}

.organic-hero-meta-item svg {
  color: var(--organic-amber);
}

.organic-hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--organic-space-4);
}

.organic-hero-cta-btn {
  min-height: 3.25rem;
}

@media (max-width: 639px) {
  .organic-hero-cta-btn {
    width: 100%;
    max-width: 20rem;
    justify-content: center;
  }
}

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
.organic-main {
  max-width: var(--organic-container-max);
  margin: 0 auto;
  padding: var(--organic-space-12) var(--organic-container-padding);
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.organic-section {
  margin-bottom: var(--organic-space-20);
}

.organic-section--warm {
  background: var(--organic-warm);
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: var(--organic-space-16) var(--organic-container-padding);
}

.organic-section--warm > * {
  max-width: var(--organic-container-max);
  margin-left: auto;
  margin-right: auto;
}

.organic-section-header {
  text-align: center;
  margin-bottom: var(--organic-space-10);
}

.organic-section-label {
  display: inline-block;
  font-family: var(--organic-font-body);
  font-size: var(--organic-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--organic-terracotta-text);
  margin-bottom: var(--organic-space-2);
}

.organic-section-title {
  font-family: var(--organic-font-display);
  font-size: var(--organic-section-size);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--organic-text);
  margin: 0;
  line-height: 1.2;
}

.organic-section-subtitle {
  font-size: var(--organic-text-lg);
  color: var(--organic-text-muted);
  margin-top: var(--organic-space-3);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   BADGES & LINKS
   ========================================================================== */
.organic-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--organic-space-2);
  font-family: var(--organic-font-body);
  font-size: var(--organic-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--organic-terracotta-text);
}

.organic-badge svg {
  color: var(--organic-amber);
}

.organic-link {
  color: var(--organic-olive);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--organic-transition);
}

.organic-link:hover {
  color: var(--organic-amber);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.organic-card {
  background: var(--organic-cream);
  border-radius: var(--organic-radius-lg);
  padding: var(--organic-space-6);
  box-shadow: var(--organic-shadow-soft);
  transition: all var(--organic-transition);
}

.organic-card:hover,
.organic-card:active {
  transform: translateY(-4px);
  box-shadow: var(--organic-shadow-md);
}

.organic-card-title {
  font-family: var(--organic-font-display);
  font-size: var(--organic-card-title);
  font-weight: 600;
  color: var(--organic-text);
  margin: 0 0 var(--organic-space-2);
}

.organic-card-meta {
  font-size: var(--organic-text-sm);
  color: var(--organic-text-muted);
  margin-bottom: var(--organic-space-3);
}

.organic-card-description {
  font-size: var(--organic-text-base);
  color: var(--organic-text);
  line-height: var(--organic-line-height);
}

/* ==========================================================================
   SPEAKERS GRID
   ========================================================================== */
.organic-speakers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--organic-space-6);
  justify-content: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.organic-speaker-card {
  text-align: center;
  padding: var(--organic-space-8) var(--organic-space-6);
}

.organic-speaker-image-wrapper {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--organic-space-4);
}

.organic-speaker-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--organic-radius-blob);
  animation: blob-morph calc(var(--organic-blob-speed) * 1.5) ease-in-out infinite;
}

.organic-speaker-placeholder {
  width: 100%;
  height: 100%;
  background: var(--organic-sage);
  border-radius: var(--organic-radius-blob);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--organic-font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--organic-earth);
  animation: blob-morph calc(var(--organic-blob-speed) * 1.5) ease-in-out infinite;
}

.organic-speaker-keynote {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background: var(--organic-terracotta);
  color: var(--organic-text-light);
  font-size: var(--organic-text-xs);
  font-weight: 600;
  padding: var(--organic-space-1) var(--organic-space-2);
  border-radius: var(--organic-radius-sm);
}

/* ==========================================================================
   PROGRAM TIMELINE
   ========================================================================== */
.organic-program-tabs {
  display: flex;
  justify-content: center;
  gap: var(--organic-space-2);
  margin-bottom: var(--organic-space-8);
  flex-wrap: wrap;
}

.organic-program-tab {
  padding: var(--organic-space-2) var(--organic-space-5);
  font-family: var(--organic-font-body);
  font-size: var(--organic-text-sm);
  font-weight: 600;
  color: var(--organic-text-muted);
  background: transparent;
  border: 2px solid var(--organic-sage);
  border-radius: var(--organic-radius-xl);
  cursor: pointer;
  transition: all var(--organic-transition);
}

.organic-program-tab:hover,
.organic-program-tab:active,
.organic-program-tab.is-active {
  color: var(--organic-text-light);
  background: var(--organic-olive);
  border-color: var(--organic-olive);
}

.organic-timeline {
  position: relative;
  padding-left: var(--organic-space-10);
}

.organic-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--organic-sage), var(--organic-terracotta));
  border-radius: 1rem;
}

.organic-timeline-item {
  position: relative;
  padding-bottom: var(--organic-space-6);
}

.organic-timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--organic-space-10) + 6px);
  top: 8px;
  width: 14px;
  height: 14px;
  background: var(--organic-cream);
  border: 3px solid var(--organic-amber);
  border-radius: 50%;
}

.organic-timeline-time {
  font-family: var(--organic-font-body);
  font-size: var(--organic-text-sm);
  font-weight: 600;
  color: var(--organic-terracotta-text);
  margin-bottom: var(--organic-space-2);
}

.organic-timeline-card {
  background: var(--organic-cream);
  border-radius: var(--organic-radius-md);
  padding: var(--organic-space-5);
  box-shadow: var(--organic-shadow-soft);
}

.organic-timeline-title {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-lg);
  font-weight: 600;
  color: var(--organic-text);
  margin-bottom: var(--organic-space-1);
}

.organic-timeline-speaker {
  font-size: var(--organic-text-sm);
  color: var(--organic-text-muted);
}

.organic-timeline-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--organic-space-1) var(--organic-space-2);
  background: var(--organic-terracotta);
  color: var(--organic-text-light);
  font-size: var(--organic-text-xs);
  font-weight: 600;
  border-radius: var(--organic-radius-sm);
}

/* ==========================================================================
   SPONSORS
   ========================================================================== */
.organic-sponsors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--organic-space-4);
}

.organic-sponsor-card {
  background: var(--organic-cream);
  border-radius: var(--organic-radius-md);
  padding: var(--organic-space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  box-shadow: var(--organic-shadow-soft);
  transition: all var(--organic-transition);
}

.organic-sponsor-card:hover,
.organic-sponsor-card:active {
  transform: translateY(-2px);
  box-shadow: var(--organic-shadow-md);
}

.organic-sponsor-card:focus-visible {
  outline: 2px solid var(--organic-primary, #606c38);
  outline-offset: 2px;
}

/* Tier-specific card sizing */
.organic-sponsor-card--platin {
  min-height: 130px;
  flex-direction: column;
}

.organic-sponsor-card--gold {
  min-height: 110px;
  flex-direction: column;
}

/* Tier-specific grid */
.organic-sponsors-grid--platin {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.organic-sponsors-grid--gold {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.organic-sponsor-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.organic-sponsor-logo {
  max-width: 110px;
  max-height: 45px;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(15%);
  transition: opacity 350ms var(--organic-ease-out),
              filter 350ms var(--organic-ease-out);
}

/* Tier-specific logo sizes */
.organic-sponsor-logo--platin {
  max-width: 150px;
  max-height: 65px;
}

.organic-sponsor-logo--gold {
  max-width: 130px;
  max-height: 55px;
}

.organic-sponsor-card:hover .organic-sponsor-logo {
  opacity: 1;
  filter: grayscale(0%) brightness(1.05);
}

/* ==========================================================================
   CONTENTS
   ========================================================================== */
.organic-contents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--organic-space-6);
}

.organic-content-card {
  background: var(--organic-cream);
  border-radius: var(--organic-radius-lg);
  overflow: hidden;
  box-shadow: var(--organic-shadow-soft);
  transition: all var(--organic-transition);
}

.organic-content-card:hover,
.organic-content-card:active {
  transform: translateY(-4px);
  box-shadow: var(--organic-shadow-md);
}

.organic-content-image {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}

.organic-content-body {
  padding: var(--organic-space-5);
}

.organic-content-type {
  display: inline-flex;
  align-items: center;
  gap: var(--organic-space-1);
  padding: var(--organic-space-1) var(--organic-space-2);
  background: var(--organic-amber-muted);
  color: var(--organic-amber);
  font-size: var(--organic-text-xs);
  font-weight: 600;
  border-radius: var(--organic-radius-sm);
  margin-bottom: var(--organic-space-3);
}

.organic-content-title {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-lg);
  font-weight: 600;
  color: var(--organic-text);
  margin-bottom: var(--organic-space-2);
}

.organic-content-description {
  font-size: var(--organic-text-sm);
  color: var(--organic-text-muted);
  line-height: var(--organic-line-height);
}

/* ==========================================================================
   ANNOUNCEMENTS
   ========================================================================== */
.organic-announcements-list {
  display: flex;
  flex-direction: column;
  gap: var(--organic-space-4);
}

.organic-announcement-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--organic-space-5);
  background: var(--organic-cream);
  border-radius: var(--organic-radius-lg);
  padding: var(--organic-space-5);
  box-shadow: var(--organic-shadow-soft);
  transition: all var(--organic-transition);
}

.organic-announcement-card:hover,
.organic-announcement-card:active {
  box-shadow: var(--organic-shadow-md);
}

.organic-announcement-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--organic-space-3);
  background: var(--organic-olive);
  color: var(--organic-text-light);
  border-radius: var(--organic-radius-md);
  min-width: 60px;
}

.organic-announcement-day {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-2xl);
  font-weight: 600;
  line-height: 1;
}

.organic-announcement-month {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.organic-announcement-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.organic-announcement-title {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-lg);
  font-weight: 600;
  color: var(--organic-text);
  margin-bottom: var(--organic-space-1);
}

.organic-announcement-message {
  font-size: var(--organic-text-sm);
  color: var(--organic-text-muted);
  line-height: var(--organic-line-height);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.organic-footer {
  background: var(--organic-earth);
  color: var(--organic-text-light);
}

.organic-footer-content {
  max-width: var(--organic-container-max);
  margin: 0 auto;
  padding: var(--organic-space-12) var(--organic-container-padding);
}

.organic-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--organic-space-8);
  padding-bottom: var(--organic-space-8);
  border-bottom: 2px solid rgba(254, 250, 224, 0.15);
}

.organic-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--organic-space-3);
}

.organic-footer-title {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-xl);
  font-weight: 600;
  margin: 0;
}

.organic-footer-subheading {
  font-family: var(--organic-font-body);
  font-size: var(--organic-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
  margin: 0;
}

.organic-footer-text {
  font-size: var(--organic-text-sm);
  opacity: 0.95;
  margin: 0;
  line-height: 1.6;
}

.organic-footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--organic-space-2);
}

.organic-footer-nav a {
  position: relative;
  color: var(--organic-text-light);
  text-decoration: none;
  font-size: var(--organic-text-sm);
  opacity: 0.95;
  transition: opacity var(--organic-transition);
}

.organic-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--organic-text-light);
  transition: width 300ms var(--organic-ease-out);
}

.organic-footer-nav a:hover {
  opacity: 1;
}

.organic-footer-nav a:hover::after {
  width: 100%;
}

.organic-footer-actions {
  display: flex;
  flex-direction: row;
  gap: var(--organic-space-3);
  flex-wrap: wrap;
}

.organic-footer-bottom {
  padding-top: var(--organic-space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: var(--organic-text-sm);
  opacity: 0.9;
}

.organic-footer-bottom a {
  color: var(--organic-text-light);
  text-decoration: none;
}

.organic-footer-bottom a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .organic-hero {
    min-height: 70vh;
  }

  .organic-timeline {
    padding-left: var(--organic-space-8);
  }

  .organic-timeline-item::before {
    left: calc(-1 * var(--organic-space-8) + 6px);
  }

  .organic-footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .organic-footer-actions {
    justify-content: center;
  }

  .organic-footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--organic-space-2);
    text-align: center;
  }

  .organic-announcement-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .organic-announcement-date {
    flex-direction: row;
    gap: var(--organic-space-2);
  }

  /* Section navigation: horizontal scroll */
  .organic-program-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .organic-program-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Cards: compact padding */
  .organic-card {
    padding: var(--organic-space-4);
  }

  .organic-speaker-card {
    padding: var(--organic-space-5) var(--organic-space-4);
  }

  /* Cup items: compact */
  .organic-cup-item {
    padding: var(--organic-space-3) var(--organic-space-4);
    gap: var(--organic-space-3);
  }

  .organic-cup-rank {
    font-size: var(--organic-text-2xl);
  }

  /* Location section */
  .organic-location-map {
    height: 200px;
  }

  .organic-location-info {
    padding: var(--organic-space-4);
  }

  /* Section spacing: tighter */
  .organic-section {
    margin-bottom: var(--organic-space-12);
  }

  .organic-section-header {
    margin-bottom: var(--organic-space-6);
  }

  /* Sticky bar */
  .organic-sticky-bar {
    padding: var(--organic-space-2) var(--organic-space-3);
  }
}

/* ═══ Mobile Responsive (Small Screens) ═══ */

@media (max-width: 639px) {
  /* iOS Safari input zoom prevention — centralised in _base.css */

  /* Speakers grid: single column */
  .organic-speakers-grid {
    grid-template-columns: 1fr;
    gap: var(--organic-space-4);
  }

  /* Contents grid: single column */
  .organic-contents-grid {
    grid-template-columns: 1fr;
    gap: var(--organic-space-4);
  }

  /* Program tabs: smaller */
  .organic-program-tab {
    padding: var(--organic-space-2) var(--organic-space-3);
    font-size: var(--organic-text-xs);
  }

  /* Timeline: tighter */
  .organic-timeline {
    padding-left: var(--organic-space-6);
  }

  .organic-timeline-item::before {
    left: calc(-1 * var(--organic-space-6) + 5px);
    width: 12px;
    height: 12px;
  }

  .organic-timeline-card {
    padding: var(--organic-space-3);
  }

  /* Cup grid: tighter */
  .organic-cup-item {
    grid-template-columns: 45px 1fr auto;
    gap: var(--organic-space-2);
    padding: var(--organic-space-2) var(--organic-space-3);
  }

  .organic-cup-rank {
    font-size: var(--organic-text-xl);
  }

  .organic-cup-score {
    font-size: var(--organic-text-xl);
  }

  /* Announcement cards: smaller gaps */
  .organic-announcement-card {
    padding: var(--organic-space-3);
    gap: var(--organic-space-3);
  }

  /* Content body: compact */
  .organic-content-body {
    padding: var(--organic-space-3);
  }

  /* Location: compact */
  .organic-location-info {
    padding: var(--organic-space-3);
  }

  .organic-location-name {
    font-size: var(--organic-text-xl);
  }

  /* Hero: compact */
  .organic-hero {
    min-height: 60vh;
    padding: var(--organic-space-8) var(--organic-container-padding);
  }

  .organic-hero-subtitle {
    font-size: var(--organic-text-base);
  }

  .organic-hero-meta {
    gap: var(--organic-space-3);
  }

  /* Sponsors: smaller gap */
  .organic-sponsors-grid {
    gap: var(--organic-space-3);
  }
}

/* ==========================================================================
   CUP/LEADERBOARD SECTION - Organic Rankings
   ========================================================================== */
.organic-cup-list {
  display: flex;
  flex-direction: column;
  gap: var(--organic-space-3);
}

.organic-cup-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: var(--organic-space-4);
  padding: var(--organic-space-4) var(--organic-space-5);
  background: var(--organic-warm);
  border: 2px solid var(--organic-sage);
  border-radius: var(--organic-radius-xl);
  align-items: center;
  transition: all var(--organic-transition);
}

.organic-cup-item:hover,
.organic-cup-item:active {
  border-color: var(--organic-olive);
  box-shadow: var(--organic-shadow-md);
}

/* Top 3 special styling */
.organic-cup-item:nth-child(1) {
  background: linear-gradient(135deg, var(--organic-olive), var(--organic-sage));
  border-color: var(--organic-olive);
}

.organic-cup-item:nth-child(1) .organic-cup-name,
.organic-cup-item:nth-child(1) .organic-cup-rank,
.organic-cup-item:nth-child(1) .organic-cup-score {
  color: var(--organic-cream);
}

.organic-cup-item:nth-child(2) {
  border-color: var(--organic-terracotta);
}

.organic-cup-item:nth-child(3) {
  border-color: var(--organic-sand);
}

.organic-cup-rank {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-3xl);
  font-weight: 600;
  color: var(--organic-olive);
  text-align: center;
}

.organic-cup-info {
  min-width: 0;
}

.organic-cup-name {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-lg);
  font-weight: 600;
  color: var(--organic-text);
}

.organic-cup-team {
  font-size: var(--organic-text-sm);
  color: var(--organic-text-muted);
}

.organic-cup-score {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-2xl);
  font-weight: 600;
  color: var(--organic-olive);
}

/* ==========================================================================
   LOCATION SECTION - Natural Venue Display
   ========================================================================== */
.organic-location-section {
  background: var(--organic-warm);
  border: 2px solid var(--organic-sage);
  border-radius: var(--organic-radius-2xl);
  overflow: hidden;
}

.organic-location-map {
  width: 100%;
  height: 300px;
  background: var(--organic-bg-dark);
}

.organic-location-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: sepia(20%) saturate(80%);
}

.organic-location-info {
  padding: var(--organic-space-6);
}

.organic-location-name {
  font-family: var(--organic-font-display);
  font-size: var(--organic-text-2xl);
  font-weight: 600;
  color: var(--organic-text);
  margin-bottom: var(--organic-space-2);
}

.organic-location-address {
  font-size: var(--organic-text-base);
  color: var(--organic-text-muted);
  line-height: 1.7;
  margin-bottom: var(--organic-space-4);
}

.organic-location-details {
  display: grid;
  gap: var(--organic-space-3);
}

.organic-location-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--organic-space-3);
}

.organic-location-detail-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--organic-amber);
  border-radius: 50%;
  color: var(--organic-cream);
}

.organic-location-detail-label {
  font-size: var(--organic-text-xs);
  font-weight: 600;
  color: var(--organic-amber);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--organic-space-1);
}

.organic-location-detail-value {
  font-size: var(--organic-text-sm);
  color: var(--organic-text);
}

.organic-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--organic-space-3);
  margin-top: var(--organic-space-4);
  padding-top: var(--organic-space-4);
  border-top: 2px solid var(--organic-sage);
}

/* ==========================================================================
   TICKET CARD STATES
   ========================================================================== */

/* Focus-within for keyboard navigation */
.organic-tickets article:focus-within {
  box-shadow: 0 0 0 2px #606c38, 0 4px 16px rgba(40, 54, 24, 0.2);
}

/* Ticket button focus */
.organic-tickets .ticket-book-btn:focus-visible {
  outline: 2px solid #606c38;
  outline-offset: 2px;
}

/* Hover glow on available cards */
.organic-tickets article:not([class*="cursor-default"]):hover {
  box-shadow: 0 8px 24px rgba(40, 54, 24, 0.15);
}

/* Preview mode */
.tickets-section--preview-disabled {
  pointer-events: none;
  user-select: none;
}

/* ==========================================================================
   TICKETS SECTION - Natural Style Overrides
   Scoped under .organic-page for specificity (0,3,0) over Tailwind (0,1,0).
   ========================================================================== */

/* Checkout CSS variables — override cyan defaults from event-checkout.css */
.organic-page .organic-tickets-wrapper {
  --checkout-primary: #606c38;
  --checkout-primary-hover: #4a5429;
  --checkout-primary-muted: rgba(96, 108, 56, 0.2);
  --checkout-focus-ring: #606c38;
  background: var(--organic-bg);
}

.organic-page .organic-tickets-wrapper .bg-gradient-to-br,
.organic-page .organic-tickets-wrapper .bg-slate-900,
.organic-page .organic-tickets-wrapper .bg-slate-950,
.organic-page .organic-tickets-wrapper .from-slate-900 {
  background: var(--organic-warm);
}

.organic-page .organic-tickets-wrapper .text-emerald-400 {
  color: var(--organic-olive);
}

.organic-page .organic-tickets-wrapper .text-white {
  color: var(--organic-text);
}

.organic-page .organic-tickets-wrapper .text-slate-300,
.organic-page .organic-tickets-wrapper .text-slate-400 {
  color: var(--organic-text-muted);
}

.organic-page .organic-tickets-wrapper .border-slate-700,
.organic-page .organic-tickets-wrapper .border-slate-800 {
  border-color: var(--organic-sage);
  border-width: 2px;
}

.organic-page .organic-tickets-wrapper .rounded-2xl,
.organic-page .organic-tickets-wrapper .rounded-xl {
  border-radius: var(--organic-radius-2xl);
}

.organic-page .organic-tickets-wrapper .rounded-lg {
  border-radius: var(--organic-radius-lg);
}

.organic-page .organic-tickets-wrapper .shadow-2xl,
.organic-page .organic-tickets-wrapper .shadow-lg {
  box-shadow: var(--organic-shadow-md);
}

.organic-page .organic-tickets-wrapper .bg-emerald-700,
.organic-page .organic-tickets-wrapper .bg-cyan-700 {
  background: var(--organic-olive);
  color: var(--organic-cream);
}

.organic-page .organic-tickets-wrapper button:hover {
  box-shadow: var(--organic-shadow-lg);
  transform: translateY(-2px);
}

.organic-page .organic-tickets-wrapper input,
.organic-page .organic-tickets-wrapper select {
  background: var(--organic-cream);
  border: 2px solid var(--organic-sage);
  border-radius: var(--organic-radius-md);
  color: var(--organic-text);
}

.organic-page .organic-tickets-wrapper input:focus,
.organic-page .organic-tickets-wrapper select:focus {
  border-color: var(--organic-olive);
  box-shadow: none;
}

/* Consent Box (Semantic Class) */
.organic-page .organic-tickets-wrapper .checkout-consent-box {
  background: var(--organic-warm);
  border: 2px solid var(--organic-sage);
  border-radius: var(--organic-radius-lg);
  box-shadow: none;
}

/* Opacity-variant backgrounds */
.organic-page .organic-tickets-wrapper .bg-slate-900\/90,
.organic-page .organic-tickets-wrapper .bg-slate-900\/70,
.organic-page .organic-tickets-wrapper .bg-slate-800\/50 {
  background: var(--organic-warm);
}

/* Label text */
.organic-page .organic-tickets-wrapper .text-slate-200 {
  color: var(--organic-text);
}

/* Checkbox border */
.organic-page .organic-tickets-wrapper .border-slate-600 {
  border-color: var(--organic-sage);
}

/* Shadow override */
.organic-page .organic-tickets-wrapper .shadow-inner {
  box-shadow: none;
}

/* Checkbox checked states */
.organic-page .organic-tickets-wrapper input[type="checkbox"]:checked {
  background: var(--organic-olive);
  border-color: var(--organic-olive);
}

/* Focus ring */
.organic-page .organic-tickets-wrapper .focus\:ring-cyan-400:focus,
.organic-page .organic-tickets-wrapper .focus\:ring-emerald-400:focus,
.organic-page .organic-tickets-wrapper .focus\:ring-amber-400:focus {
  --tw-ring-color: var(--organic-olive);
}

/* Links */
.organic-page .organic-tickets-wrapper a.text-cyan-400 {
  color: var(--organic-olive);
}

.organic-page .organic-tickets-wrapper a.hover\:text-cyan-200:hover {
  color: var(--organic-terracotta-text, var(--organic-olive));
}

/* Qty/Wallet buttons (from checkout-enhancements.js) */
.organic-page .organic-tickets-wrapper .bg-slate-800,
.organic-page .organic-tickets-wrapper .bg-slate-800\/80 {
  background: var(--organic-cream);
  border-color: var(--organic-sage);
  color: var(--organic-text);
}

.organic-page .organic-tickets-wrapper .hover\:bg-slate-700:hover {
  background: rgba(96, 108, 56, 0.1);
}

/* Icon accent colors */
.organic-page .organic-tickets-wrapper .text-cyan-300 {
  color: var(--organic-amber);
}
.organic-page .organic-tickets-wrapper .text-cyan-400 {
  color: var(--organic-amber);
}

/* Text color overrides for light background (WCAG AA) */
.organic-page .organic-tickets-wrapper .text-slate-300 {
  color: var(--organic-text-muted);
}
.organic-page .organic-tickets-wrapper .text-slate-400 {
  color: var(--organic-text-muted);
}
.organic-page .organic-tickets-wrapper .text-slate-500 {
  color: var(--organic-text-muted);
}
.organic-page .organic-tickets-wrapper .text-white {
  color: var(--organic-text);
}
.organic-page .organic-tickets-wrapper .text-rose-400 {
  color: var(--checkout-danger, #993322);
}

/* Feedback colors for light background */
.organic-page .organic-tickets-wrapper .text-emerald-300 {
  color: var(--checkout-success, #4a5a22);
}
.organic-page .organic-tickets-wrapper .text-emerald-200 {
  color: var(--checkout-success, #4a5a22);
}
.organic-page .organic-tickets-wrapper .text-amber-300 {
  color: var(--checkout-warning, #8b6914);
}
.organic-page .organic-tickets-wrapper .text-rose-300 {
  color: var(--checkout-danger, #993322);
}

/* Login Panel overrides */
.organic-page .organic-tickets-wrapper [data-login-inline] {
  background: var(--organic-warm);
  border-color: var(--organic-sage);
}
.organic-page .organic-tickets-wrapper [data-login-inline] .text-amber-100 {
  color: var(--organic-text);
}
.organic-page .organic-tickets-wrapper [data-login-inline] .text-slate-300 {
  color: var(--organic-text-muted);
}
.organic-page .organic-tickets-wrapper [data-login-inline] .text-slate-100 {
  color: var(--organic-text);
}
.organic-page .organic-tickets-wrapper [data-login-inline] .bg-slate-800\/80 {
  background: var(--organic-cream);
  border-color: var(--organic-sage);
  color: var(--organic-text);
}
.organic-page .organic-tickets-wrapper [data-login-inline] .placeholder-slate-400::placeholder {
  color: var(--organic-text-muted);
}

/* Checkbox unchecked background */
.organic-page .organic-tickets-wrapper input[type="checkbox"].bg-slate-900 {
  background: var(--organic-cream);
}

/* Border overrides */
.organic-page .organic-tickets-wrapper .border-slate-700 {
  border-color: var(--organic-sage);
}

/* Submit Button – Template Accent */
.organic-page .organic-tickets-wrapper button[type="submit"] {
  background: var(--organic-olive);
  border-color: var(--organic-olive);
  color: var(--organic-cream);
  border-radius: var(--organic-radius-xl);
}
.organic-page .organic-tickets-wrapper button[type="submit"]:hover {
  background: var(--organic-earth);
  border-color: var(--organic-earth);
}

/* Plus-One Add Button */
.organic-page .organic-tickets-wrapper [data-plus-one-add] {
  background: transparent;
  border-color: var(--organic-olive);
  color: var(--organic-olive);
  border-radius: var(--organic-radius-lg);
}
.organic-page .organic-tickets-wrapper [data-plus-one-add]:hover {
  background: rgba(96, 108, 56, 0.1);
}

/* Promo Apply Button */
.organic-page .organic-tickets-wrapper [data-promo-apply] {
  background: transparent;
  border-color: var(--organic-olive);
  color: var(--organic-olive);
  border-radius: var(--organic-radius-lg);
}
.organic-page .organic-tickets-wrapper [data-promo-apply]:hover {
  background: rgba(96, 108, 56, 0.1);
}

/* Price Summary Total – Template Accent */
.organic-page .organic-tickets-wrapper [data-checkout-summary] .text-sm.font-semibold {
  color: var(--organic-olive);
}

/* ==========================================================================
   BASICS SECTION — Description, Keyfacts, Organizers, Tags
   (Moved from basics.html inline <style> for cacheability & maintainability)
   ========================================================================== */
.organic-basics {
  padding: var(--organic-space-8) 0;
}

.organic-basics-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--organic-space-2);
  margin-bottom: var(--organic-space-6);
}

.organic-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--organic-space-1) var(--organic-space-3);
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--organic-surface);
  color: var(--organic-text);
  border: 2px solid var(--organic-border);
  border-radius: var(--organic-radius-full);
  font-family: var(--organic-font-body);
}

.organic-tag--success {
  background: rgba(167, 183, 149, 0.2);
  border-color: var(--organic-sage);
  color: var(--organic-olive);
}

.organic-tag--small {
  padding: var(--organic-space-1) var(--organic-space-2);
  font-size: 0.75rem;
  text-decoration: none;
  transition: all var(--organic-transition);
}

.organic-tag--small:hover {
  background: var(--organic-accent);
  border-color: var(--organic-accent);
  color: var(--organic-cream);
}

/* ─── Event Description (Editor HTML) ─── */
.organic-basics-description {
  max-width: 48rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--organic-text);
  margin-bottom: var(--organic-space-8);
  font-family: var(--organic-font-body);
}

.organic-basics-description p {
  margin-bottom: 1rem;
}

.organic-basics-description h2,
.organic-basics-description h3,
.organic-basics-description h4 {
  color: var(--organic-text);
  font-family: var(--organic-font-display);
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.organic-basics-description h2 { font-size: 1.5rem; font-weight: 600; }
.organic-basics-description h3 { font-size: 1.25rem; font-weight: 600; }
.organic-basics-description h4 { font-size: 1.0625rem; font-weight: 600; }

.organic-basics-description a {
  color: var(--organic-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.organic-basics-description a:hover {
  opacity: 0.8;
}

.organic-basics-description ul,
.organic-basics-description ol {
  padding-left: 1.5em;
  margin-bottom: 1rem;
}

.organic-basics-description li {
  margin-bottom: 0.25rem;
}

.organic-basics-description blockquote {
  border-left: 3px solid var(--organic-sage);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  background: rgba(167, 183, 149, 0.1);
  border-radius: 0 var(--organic-radius-lg) var(--organic-radius-lg) 0;
}

.organic-basics-description img {
  max-width: 100%;
  border-radius: var(--organic-radius-lg);
  margin: 1.5rem 0;
}

/* ─── Keyfacts Grid ─── */
.organic-keyfacts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--organic-space-4);
  margin-bottom: var(--organic-space-8);
}

@media (min-width: 640px) {
  .organic-keyfacts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .organic-keyfacts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.organic-keyfact {
  display: flex;
  align-items: flex-start;
  gap: var(--organic-space-3);
  padding: var(--organic-space-4);
  background: var(--organic-surface);
  border: 2px solid var(--organic-border);
  border-radius: var(--organic-radius-lg);
  transition: all var(--organic-transition);
}

.organic-keyfact:hover {
  border-color: var(--organic-accent);
}

.organic-keyfact-icon {
  flex-shrink: 0;
  color: var(--organic-amber);
}

.organic-keyfact-content {
  flex: 1;
  min-width: 0;
}

.organic-keyfact-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--organic-text-muted);
  margin-bottom: var(--organic-space-1);
  font-family: var(--organic-font-body);
}

.organic-keyfact-value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--organic-text);
  word-break: break-word;
  font-family: var(--organic-font-display);
}

/* ─── Organizers ─── */
.organic-organizers {
  margin-top: var(--organic-space-8);
}

.organic-organizers-header {
  margin-bottom: var(--organic-space-4);
}

.organic-organizers-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--organic-space-4);
}

@media (min-width: 640px) {
  .organic-organizers-list {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.organic-organizer-card {
  display: flex;
  gap: var(--organic-space-4);
  padding: var(--organic-space-4);
  background: var(--organic-surface);
  border: 2px solid var(--organic-border);
  border-radius: var(--organic-radius-lg);
  transition: all var(--organic-transition);
}

.organic-organizer-card:hover {
  border-color: var(--organic-accent);
}

.organic-organizer-avatar {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--organic-sage);
}

.organic-organizer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.organic-organizer-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--organic-cream);
  font-family: var(--organic-font-display);
}

.organic-organizer-info {
  flex: 1;
  min-width: 0;
}

.organic-organizer-name {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  color: var(--organic-text);
  font-family: var(--organic-font-display);
}

.organic-organizer-contact {
  display: block;
  font-size: 0.75rem;
  color: var(--organic-accent);
  margin-top: 0.125rem;
}

.organic-organizer-description {
  font-size: 0.8125rem;
  color: var(--organic-text-muted);
  line-height: 1.6;
  margin: var(--organic-space-2) 0;
  font-family: var(--organic-font-body);
}

.organic-organizer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--organic-space-1);
  margin-top: var(--organic-space-2);
}

/* ==========================================================================
   ACCESS CODE SECTION — Organic Premium Overrides
   Compact, refined, warm nature card. Smaller sizing, tighter spacing,
   elegant details matching Farmer's Market aesthetic.
   ========================================================================== */

/* ─── Section Card ─── */
.organic-page .access-code-section {
  padding: 0.625rem 0.875rem;
  border: 2px solid rgba(167, 183, 149, 0.2);
  border-radius: var(--organic-radius-sm);
  background: rgba(250, 237, 205, 0.35);
  box-shadow: none;
  transition: border-color var(--organic-transition),
              box-shadow var(--organic-transition);
}

.organic-page .access-code-section:hover {
  border-color: rgba(167, 183, 149, 0.35);
  box-shadow: 0 2px 8px rgba(40, 54, 24, 0.06);
}

/* ─── Trigger Button — compact ─── */
.organic-page .access-code-trigger {
  gap: 0.375rem;
  padding: 0.25rem 0.375rem;
  margin: -0.25rem -0.375rem;
  font-family: var(--organic-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--organic-olive);
  border-radius: var(--organic-radius-sm);
  transition: color var(--organic-transition), background var(--organic-transition);
}

.organic-page .access-code-trigger:hover {
  color: var(--organic-earth);
  background: rgba(96, 108, 56, 0.06);
}

.organic-page .access-code-trigger:focus-visible {
  outline: 2px solid var(--organic-olive);
  outline-offset: 2px;
}

/* ─── Icon — smaller, amber accent ─── */
.organic-page .access-code-icon {
  width: 14px;
  height: 14px;
  color: var(--organic-amber);
  opacity: 0.8;
}

.organic-page .access-code-trigger:hover .access-code-icon {
  opacity: 1;
}

/* ─── Trigger text ─── */
.organic-page .access-code-trigger-text {
  font-family: var(--organic-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ─── Chevron — smaller ─── */
.organic-page .access-code-chevron {
  width: 10px;
  height: 10px;
  transition: transform var(--organic-transition), opacity var(--organic-transition);
}

/* ─── Form — tighter spacing ─── */
.organic-page .access-code-form {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 2px solid rgba(167, 183, 149, 0.15);
}

/* ─── Input Group — compact, refined ─── */
.organic-page .access-code-input-group {
  width: auto;
  border: 2px solid rgba(167, 183, 149, 0.3);
  border-radius: var(--organic-radius-sm);
  background: var(--organic-cream);
  overflow: hidden;
  transition: border-color var(--organic-transition),
              box-shadow var(--organic-transition);
}

.organic-page .access-code-input-group:focus-within {
  border-color: var(--organic-olive);
  box-shadow: 0 0 0 3px rgba(96, 108, 56, 0.1);
}

/* ─── Input — smaller, code-like feel ─── */
.organic-page .access-code-input {
  min-width: 120px;
  max-width: 180px;
  padding: 0.375rem 0.625rem;
  font-family: var(--organic-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--organic-text);
  background: transparent;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.organic-page .access-code-input::placeholder {
  color: rgba(96, 108, 56, 0.4);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* ─── Submit Button — compact olive gradient ─── */
.organic-page .access-code-submit {
  padding: 0.375rem 0.625rem;
  background: linear-gradient(135deg, #4a5a22, #7a8a48);
  color: var(--organic-cream);
  border: none;
  transition: background var(--organic-transition),
              transform var(--organic-transition),
              box-shadow var(--organic-transition);
}

.organic-page .access-code-submit svg {
  width: 14px;
  height: 14px;
}

.organic-page .access-code-submit:hover {
  background: linear-gradient(135deg, #3d4c1a, #606c38);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(74, 90, 34, 0.2);
}

.organic-page .access-code-submit:active {
  transform: translateX(0) scale(0.95);
  box-shadow: none;
}

.organic-page .access-code-submit:focus-visible {
  outline: 2px solid var(--organic-olive);
  outline-offset: 2px;
}

/* ─── Clear Button — compact ─── */
.organic-page .access-code-clear {
  padding: 0.375rem;
  border-left: 2px solid rgba(167, 183, 149, 0.2);
  color: var(--organic-text-muted);
  transition: color var(--organic-transition), background var(--organic-transition);
}

.organic-page .access-code-clear svg {
  width: 12px;
  height: 12px;
}

.organic-page .access-code-clear:hover {
  color: var(--organic-terracotta);
  background: rgba(201, 112, 93, 0.06);
}

.organic-page .access-code-clear:focus-visible {
  outline: 2px solid var(--organic-olive);
  outline-offset: -2px;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
/* Universal reduced-motion (*, *::before, *::after) is in _base.css */
@media (prefers-reduced-motion: reduce) {
  .organic-speaker-image,
  .organic-speaker-placeholder,
  .organic-hero-blob--1,
  .organic-hero-blob--2 {
    animation: none;
    border-radius: 50%;
  }

  .organic-btn-primary:hover,
  .organic-btn-secondary:hover,
  .organic-btn-outline:hover,
  .organic-btn-outline-light:hover,
  .organic-card:hover,
  .organic-card:active,
  .organic-content-card:hover,
  .organic-content-card:active,
  .organic-sponsor-card:hover,
  .organic-sponsor-card:active,
  .organic-cup-item:hover,
  .organic-cup-item:active {
    transform: none;
  }
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--organic-olive);
  outline-offset: 2px;
}

/* Explicit focus-visible on interactive elements without dedicated focus styles */
.organic-program-tab:focus-visible,
.organic-content-card:focus-visible,
.organic-announcement-card:focus-visible,
.organic-cup-item:focus-visible {
  outline: 2px solid var(--organic-olive);
  outline-offset: 2px;
}

.organic-footer-nav a:focus-visible {
  outline: 2px solid var(--organic-text-light);
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .organic-card,
  .organic-sponsor-card,
  .organic-timeline-card,
  .organic-announcement-card,
  .organic-content-card,
  .organic-cup-item,
  .organic-location-section {
    border: 2px solid var(--organic-text);
  }

  .organic-btn,
  .organic-page .organic-tickets-wrapper input,
  .organic-page .organic-tickets-wrapper select,
  .organic-page .organic-tickets-wrapper textarea {
    border: 2px solid var(--organic-text);
  }
}

/* ==========================================================================
   SCROLL REVEAL ANIMATION
   ========================================================================== */
.organic-reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease var(--reveal-delay, 0s),
              transform 0.6s ease var(--reveal-delay, 0s);
}

.organic-reveal-init.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .organic-reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   TICKETS UNAVAILABLE BANNER - Earth Tone Overrides
   Override cold cyan/blue/purple colors from tickets-unavailable.css
   ========================================================================== */

.organic-page {
  /* State: Not Started - Olive */
  --tickets-notstarted-bg: rgba(96, 108, 56, 0.08);
  --tickets-notstarted-border: rgba(96, 108, 56, 0.25);
  --tickets-notstarted-icon: #606c38;
  --tickets-notstarted-title: #283618;
  --tickets-notstarted-gradient: linear-gradient(135deg,
    rgba(96, 108, 56, 0.1) 0%,
    rgba(74, 84, 41, 0.05) 100%);

  /* State: Draft - Sand */
  --tickets-draft-bg: rgba(221, 161, 94, 0.08);
  --tickets-draft-border: rgba(221, 161, 94, 0.25);
  --tickets-draft-icon: #dda15e;
  --tickets-draft-title: #283618;
  --tickets-draft-gradient: linear-gradient(135deg,
    rgba(221, 161, 94, 0.1) 0%,
    rgba(180, 131, 76, 0.05) 100%);

  /* State: Sold Out - Terracotta */
  --tickets-soldout-bg: rgba(201, 112, 93, 0.08);
  --tickets-soldout-border: rgba(201, 112, 93, 0.25);
  --tickets-soldout-icon: #c9705d;
  --tickets-soldout-title: #283618;
  --tickets-soldout-gradient: linear-gradient(135deg,
    rgba(201, 112, 93, 0.1) 0%,
    rgba(160, 89, 74, 0.05) 100%);

  /* State: Cancelled - Dark Terracotta */
  --tickets-cancelled-bg: rgba(153, 51, 34, 0.08);
  --tickets-cancelled-border: rgba(153, 51, 34, 0.25);
  --tickets-cancelled-icon: #993322;
  --tickets-cancelled-title: #283618;
  --tickets-cancelled-gradient: linear-gradient(135deg,
    rgba(153, 51, 34, 0.1) 0%,
    rgba(120, 40, 27, 0.05) 100%);

  /* State: Expired - Sand/Amber */
  --tickets-expired-bg: rgba(221, 161, 94, 0.08);
  --tickets-expired-border: rgba(221, 161, 94, 0.25);
  --tickets-expired-icon: #dda15e;
  --tickets-expired-title: #283618;
  --tickets-expired-gradient: linear-gradient(135deg,
    rgba(221, 161, 94, 0.1) 0%,
    rgba(180, 131, 76, 0.05) 100%);

  /* State: Archived - Muted Olive */
  --tickets-archived-bg: rgba(96, 108, 56, 0.06);
  --tickets-archived-border: rgba(96, 108, 56, 0.15);
  --tickets-archived-icon: #7a8a48;
  --tickets-archived-title: #283618;
  --tickets-archived-gradient: linear-gradient(135deg,
    rgba(96, 108, 56, 0.06) 0%,
    rgba(74, 84, 41, 0.03) 100%);
}

/* Icon backgrounds - Organic earth tones */
.organic-page .tickets-unavailable--notstarted .tickets-unavailable-icon {
  background: rgba(96, 108, 56, 0.15);
  color: var(--tickets-notstarted-icon);
}

.organic-page .tickets-unavailable--draft .tickets-unavailable-icon {
  background: rgba(221, 161, 94, 0.15);
  color: var(--tickets-draft-icon);
}

.organic-page .tickets-unavailable--soldout .tickets-unavailable-icon {
  background: rgba(201, 112, 93, 0.15);
  color: var(--tickets-soldout-icon);
}

.organic-page .tickets-unavailable--cancelled .tickets-unavailable-icon {
  background: rgba(153, 51, 34, 0.15);
  color: var(--tickets-cancelled-icon);
}

.organic-page .tickets-unavailable--expired .tickets-unavailable-icon {
  background: rgba(221, 161, 94, 0.15);
  color: var(--tickets-expired-icon);
}

.organic-page .tickets-unavailable--archived .tickets-unavailable-icon {
  background: rgba(96, 108, 56, 0.1);
  color: var(--tickets-archived-icon);
}

/* Featured Badge - Earth/Olive Tones */
.organic-ticket-featured-badge {
  background: linear-gradient(135deg, #f5e6c3 0%, #faedcd 100%);
  color: #283618;
  border-radius: 0 1.5rem 0 1rem;
  z-index: 5;
}

/* ============================================================
   ANNOUNCEMENT POPUP — Organic Template Overrides
   ============================================================ */
/* Warm earth-tone announcement priority overrides */
.organic-announcement-priority {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--organic-radius-sm);
}

.organic-page .announcement-priority--warning {
  color: #993322;
  background: rgba(153,51,34,0.08);
}
.organic-page .announcement-priority--notice {
  color: var(--organic-accent);
  background: rgba(96,108,56,0.08);
}
.organic-page .announcement-priority--info {
  color: var(--organic-text-muted);
  background: rgba(96,108,56,0.05);
}

.organic-page {
  --announcement-popup-bg: #faedcd;
  --announcement-popup-border: rgba(96, 108, 56, 0.3);
  --announcement-popup-accent-color: #c9705d;
  --announcement-popup-text: #283618;
  --checkout-surface-elevated: #f5e6c3;
  --checkout-border-subtle: rgba(96, 108, 56, 0.15);
  --checkout-text-muted: #606c38;
}

/* =============================================================================
   POSTPONEMENT BANNER — Organic Theme Mapping (Earthy Serif, BGB §312d)
   Fraunces display, Nunito body, große weiche Radien + organic-shadow-soft.
   ============================================================================= */
.organic-page .postponement-info-banner {
  --pb-radius-container: var(--organic-radius-md, 1.5rem);
  --pb-radius-cta: var(--organic-radius-full, 9999px);
  --pb-font-display: var(--organic-font-display, 'Fraunces', Georgia, serif);
  --pb-font-body: var(--organic-font-body, 'Nunito', sans-serif);
  --pb-font-cta: var(--organic-font-body, 'Nunito', sans-serif);
  --pb-title-weight: 600;
  --pb-title-size: 1.0625rem;
  --pb-cta-weight: 700;
  --pb-cta-fg-on-accent: var(--organic-cream, #fefae0);
}
.organic-page .postponement-info-banner__cta {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}
.organic-page .postponement--urgent {
  --pb-urgent-bg: rgba(139, 69, 19, 0.1);
  --pb-urgent-border: rgba(139, 69, 19, 0.4);
  --pb-urgent-accent: #8b4513; /* Saddle Brown — WCAG AA 4.9:1 on cream */
  --pb-urgent-fg: #283618;
  --pb-shadow: var(--organic-shadow-soft, 0 4px 6px rgba(40, 54, 24, 0.07), 0 8px 16px rgba(40, 54, 24, 0.1));
}
.organic-page .postponement--info {
  --pb-info-bg: rgba(96, 108, 56, 0.1);
  --pb-info-border: rgba(96, 108, 56, 0.3);
  --pb-info-accent: var(--organic-olive, #606c38);
  --pb-info-fg: #283618;
  --pb-shadow: var(--organic-shadow-soft, 0 4px 6px rgba(40, 54, 24, 0.07), 0 8px 16px rgba(40, 54, 24, 0.1));
}
.organic-page .postponement--neutral {
  --pb-neutral-bg: rgba(96, 108, 56, 0.08);
  --pb-neutral-border: rgba(96, 108, 56, 0.35);
  --pb-neutral-accent: #4a5537; /* Dark sage — WCAG AA 5.2:1 on cream */
  --pb-neutral-fg: #283618;
  --pb-shadow: var(--organic-shadow-xs, 0 2px 4px rgba(40, 54, 24, 0.04));
}
/* Absage (Team-Banner). Flaeche aus der EIGENEN Palette (warmes Creme, damit
   der Baustein nicht kalt auf der Erd-Seite sitzt), Schrift und Akzent aus der
   rohen Palette — beides Referenzen, kein eigener Farbwert (Design-Pin 1).
   Nachgerechnet von der Wache: danger-900 #7f1d1d auf bg-warm #faedcd =
   8.62:1, Akzent danger-700 #b91c1c = 5.56:1 (WCAG 2.2 AA). */
.organic-page .postponement--cancelled {
  --pb-cancelled-bg: var(--organic-bg-warm);
  --pb-cancelled-border: var(--cita-danger-300);
  --pb-cancelled-accent: var(--cita-danger-700);
  --pb-cancelled-fg: var(--cita-danger-900);
  --pb-shadow: var(--organic-shadow-xs, 0 2px 4px rgba(40, 54, 24, 0.04));
}

/* =============================================================================
   TICKETS UNAVAILABLE BANNER — Organic Theme (Earthy Fraunces)
   Fraunces display, Nunito body, large rounded corners, soft nature-tone shadows.
   Überschreibt die Fragmentary-Overrides in tickets-unavailable.css.
   ============================================================================= */
.organic-page .tickets-unavailable-banner {
  --tu-radius: var(--organic-radius-lg, 2rem);
  --tu-radius-icon: 9999px;
  --tu-radius-pill: 9999px;
  --tu-padding-y: 2.75rem;
  --tu-padding-x: 2rem;
  --tu-font-display: var(--organic-font-display, 'Fraunces', Georgia, serif);
  --tu-font-body: var(--organic-font-body, 'Nunito', sans-serif);
  --tu-title-weight: 600;
  --tu-title-size: 1.375rem;
  --tu-title-size-sm: 1.75rem;
  --tu-backdrop-blur: 0px;  /* solid on cream */
  --tu-pattern-opacity: 0.08;
  --tu-border-width: 1px;
  --tu-shadow: var(--organic-shadow-soft, 0 4px 6px rgba(40, 54, 24, 0.07), 0 8px 16px rgba(40, 54, 24, 0.1));
}
.organic-page .tickets-unavailable-banner::before { display: none; }
.organic-page .tickets-unavailable--cancelled::after { animation-duration: 5s; opacity: 0.4; }

.organic-page .tickets-unavailable--cancelled {
  --tickets-cancelled-bg: #fef2f2;
  --tickets-cancelled-border: rgba(185, 28, 28, 0.3);
  --tickets-cancelled-icon: #b91c1c;
  --tickets-cancelled-title: #991b1b;
  --tickets-cancelled-gradient: linear-gradient(135deg, rgba(185, 28, 28, 0.08) 0%, rgba(245, 231, 205, 0) 100%);
}
.organic-page .tickets-unavailable--archived {
  --tickets-archived-bg: rgba(96, 108, 56, 0.08);
  --tickets-archived-border: rgba(96, 108, 56, 0.28);
  --tickets-archived-icon: #4a5537;
  --tickets-archived-title: #283618;
  --tickets-archived-gradient: linear-gradient(135deg, rgba(96, 108, 56, 0.1) 0%, rgba(245, 231, 205, 0) 100%);
}
.organic-page .tickets-unavailable--expired {
  --tickets-expired-bg: rgba(139, 69, 19, 0.08);
  --tickets-expired-border: rgba(139, 69, 19, 0.35);
  --tickets-expired-icon: #8b4513;
  --tickets-expired-title: #5c2e0c;
  --tickets-expired-gradient: linear-gradient(135deg, rgba(188, 108, 37, 0.1) 0%, rgba(245, 231, 205, 0) 100%);
}
.organic-page .tickets-unavailable--soldout {
  --tickets-soldout-bg: rgba(120, 53, 124, 0.08);
  --tickets-soldout-border: rgba(120, 53, 124, 0.35);
  --tickets-soldout-icon: #78357c;
  --tickets-soldout-title: #4a1f4e;
  --tickets-soldout-gradient: linear-gradient(135deg, rgba(120, 53, 124, 0.1) 0%, rgba(245, 231, 205, 0) 100%);
}
.organic-page .tickets-unavailable--soldout {
  box-shadow: var(--organic-shadow-md, 0 6px 12px rgba(40, 54, 24, 0.12), 0 12px 24px rgba(40, 54, 24, 0.15));
}
.organic-page .tickets-unavailable--notstarted {
  --tickets-notstarted-bg: rgba(167, 183, 149, 0.18);
  --tickets-notstarted-border: rgba(96, 108, 56, 0.35);
  --tickets-notstarted-icon: var(--organic-olive, #606c38);
  --tickets-notstarted-title: #283618;
  --tickets-notstarted-gradient: linear-gradient(135deg, rgba(167, 183, 149, 0.2) 0%, rgba(245, 231, 205, 0) 100%);
}
.organic-page .tickets-unavailable--draft {
  --tickets-draft-bg: rgba(188, 108, 37, 0.08);
  --tickets-draft-border: rgba(188, 108, 37, 0.4);
  --tickets-draft-icon: #8b4513;
  --tickets-draft-title: #5c2e0c;
  --tickets-draft-gradient: linear-gradient(135deg, rgba(188, 108, 37, 0.1) 0%, rgba(245, 231, 205, 0) 100%);
}
.organic-page .tickets-unavailable-preview-notice {
  background: rgba(96, 108, 56, 0.1);
  border-color: rgba(96, 108, 56, 0.35);
  color: #283618;
  font-family: var(--organic-font-body, 'Nunito', sans-serif);
  font-weight: 600;
}