/* ═══════════════════════════════════════════════════════════════════
   Souk Exhibit — Premium Design System
   Palette: Cream · Gold · Amber · Terracotta · Dark Brown · Olive
═══════════════════════════════════════════════════════════════════ */

:root {
  --cream:       #FAF7F2;
  --warm-white:  #FFFDF8;
  --gold:        #C9A84C;
  --gold-light:  #E8C96A;
  --gold-dim:    #9A7A30;
  --amber:       #D97706;
  --terracotta:  #C1440E;
  --terracotta-light: #E05A22;
  --dark-brown:  #1C0F0A;
  --brown-mid:   #3D2010;
  --olive:       #5C6B2E;
  --charcoal:    #2D3748;
  --souk-bg:     #F5EFE4;

  --font-body: 'Poppins', sans-serif;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-xl: 48px;

  --shadow-soft: 0 4px 24px rgba(28,15,10,0.08);
  --shadow-card: 0 8px 40px rgba(28,15,10,0.12);
  --shadow-hero: 0 20px 80px rgba(28,15,10,0.3);
  --shadow-gold: 0 8px 32px rgba(201,168,76,0.3);

  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--dark-brown);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* No element should ever exceed the viewport width */
img, video, iframe, embed, object { max-width: 100%; }

::selection { background: var(--gold); color: var(--dark-brown); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── Loader ─────────────────────────────────────────────────── */
#loader { transition: opacity 0.6s ease, visibility 0.6s ease; }
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-arc {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: arc-draw 1.2s ease forwards;
}
@keyframes arc-draw { to { stroke-dashoffset: 0; } }

/* ── Navigation ──────────────────────────────────────────────── */
#navbar { --nav-text: #FFFDF8; --nav-bg: transparent; }
#navbar.scrolled {
  --nav-text: #1C0F0A;
  background: rgba(250,247,242,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,168,76,0.15);
  box-shadow: 0 4px 30px rgba(28,15,10,0.08);
}
#navbar.hero-mode { --nav-text: #FFFDF8; }
#navbar .nav-logo-text,
#navbar .nav-link { color: var(--nav-text); }
#navbar .nav-logo-sub { color: rgba(201,168,76,0.8); }
#navbar.hero-mode .nav-logo-sub { color: rgba(201,168,76,0.7); }
#navbar.scrolled .nav-logo-sub { color: rgba(201,168,76,0.8); }
.nav-link.nav-active { color: var(--gold) !important; }
.hamburger-line { background: var(--nav-text); }
#navbar.scrolled .hamburger-line { background: var(--dark-brown); }

/* Mobile menu open */
#mobile-menu.open { max-height: 600px !important; }
#menu-toggle.open .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#menu-toggle.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menu-toggle.open .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Typography ─────────────────────────────────────────────── */
.display-xl {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.display-lg {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.display-md {
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
}
.text-gradient-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 9999px;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1.4rem; font-size: 0.8rem; }

.btn-gold {
  background: var(--gold);
  color: var(--dark-brown);
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
}
.btn-gold:hover {
  background: var(--gold-light);
  box-shadow: 0 8px 32px rgba(201,168,76,0.45);
  transform: translateY(-2px) scale(1.02);
}

.btn-outline-cream {
  background: transparent;
  color: var(--warm-white);
  border: 1.5px solid var(--warm-white);
  backdrop-filter: blur(8px);
  transition: all var(--transition);
}
.btn-outline-cream:hover {
  background: var(--warm-white);
  color: var(--dark-brown);
  border-color: var(--warm-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,253,248,0.2);
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--dark-brown);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(201,168,76,0.3);
}

.btn-dark {
  background: var(--dark-brown);
  color: var(--cream);
}
.btn-dark:hover {
  background: var(--brown-mid);
  transform: translateY(-2px);
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--warm-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}
.card-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.card:hover .card-image { transform: scale(1.05); }

/* Glass card */
.glass-card {
  background: rgba(255,253,248,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius-md);
}
.glass-card-dark {
  background: rgba(28,15,10,0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: var(--radius-md);
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(201,168,76,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(193,68,14,0.08) 0%, transparent 50%),
    linear-gradient(160deg, #1C0F0A 0%, #2C1A10 40%, #3D2010 100%);
}
.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero-bg-image.loaded { transform: scale(1); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(28,15,10,0.3) 0%,
    rgba(28,15,10,0.2) 40%,
    rgba(28,15,10,0.7) 100%
  );
}

.hero-section-soft .hero-bg-image {
  opacity: 0.22;
}
.hero-section-soft .hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(28,15,10,0.24) 0%,
    rgba(28,15,10,0.14) 40%,
    rgba(28,15,10,0.62) 100%
  );
}
.hero-section-soft .hero-title {
  max-width: 42rem;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
}
.hero-section-soft .hero-title span {
  display: block;
}
.hero-section-soft .hero-label {
  opacity: 0.75;
}

/* ── Sections ───────────────────────────────────────────────── */
.section-pad { padding: 8rem 1.5rem; }
.section-pad-sm { padding: 5rem 1.5rem; }
.section-pad-lg { padding: 10rem 1.5rem; }

.section-title { margin-bottom: 1rem; }
.section-intro { max-width: 560px; color: #5A4030; line-height: 1.75; }

/* Alternating section backgrounds */
.bg-souk { background: var(--souk-bg); }
.bg-cream-alt { background: #F0E8D8; }

/* ── Stats ──────────────────────────────────────────────────── */
.stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold), var(--amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #7A5840;
}

/* ── Countdown ─────────────────────────────────────────────── */
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}
.countdown-number {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  transition: transform 0.3s ease;
}
.countdown-number.flip { transform: rotateX(90deg); }
.countdown-label {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  opacity: 0.7;
}
.countdown-divider {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--gold);
  opacity: 0.4;
  line-height: 1;
  margin-top: -0.25rem;
}

/* ── Vendor Cards ──────────────────────────────────────────── */
.vendor-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}
.vendor-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card);
}
.vendor-card .vendor-cover {
  height: 280px;
  background: linear-gradient(135deg, var(--souk-bg), #E8D8C0);
  position: relative;
  overflow: hidden;
}
.vendor-card .vendor-cover > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.vendor-card:hover .vendor-cover > img { transform: scale(1.06); }
/* top scrim — just for the badges */
.vendor-cover-gradient {
  position: absolute;
  top: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(to bottom, rgba(28,15,10,.50) 0%, transparent 100%);
  pointer-events: none;
}
/* frosted glass panel */
.vendor-glass-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 13px 14px 15px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(18, 9, 4, 0.55);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: 11px;
}
/* logo square */
.vendor-glass-logo {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 18px; color: #c9a84c;
}
.vendor-glass-logo img { width: 100%; height: 100%; object-fit: cover; }
/* text column */
.vendor-glass-text { flex: 1; min-width: 0; }
.vendor-glass-name {
  font-size: 14px; font-weight: 700; color: #fff;
  line-height: 1.25;
}
.vendor-glass-desc {
  font-size: 11px; color: rgba(255,255,255,.52);
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* icon links — stacked on the right */
.vendor-glass-links {
  display: flex; flex-direction: column; gap: 5px; flex-shrink: 0;
}
.vendor-glass-links a {
  width: 27px; height: 27px;
  border-radius: 7px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.70);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.vendor-glass-links a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.vendor-glass-links svg { width: 12px; height: 12px; }
.vendor-category-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  background: var(--souk-bg);
  color: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
}

/* ── Edition Cards ─────────────────────────────────────────── */
.edition-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/5;
  cursor: pointer;
}
.edition-card .edition-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #2C1810 0%, #1C0F0A 100%);
  transition: transform 0.6s ease;
}
.edition-card:hover .edition-cover { transform: scale(1.05); }
.edition-card .edition-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28,15,10,0.95) 30%, rgba(28,15,10,0.2) 100%);
}
.edition-card .edition-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
}
.edition-number-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.4);
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

/* ── Gallery ───────────────────────────────────────────────── */
.gallery-grid {
  columns: 2 200px;
  column-gap: 1rem;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gallery-item img {
  width: 100%;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item .gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,15,10,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* Lightbox */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(28,15,10,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(10px);
}
#lightbox.open { opacity: 1; visibility: visible; }
#lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 12px; }

/* ── Testimonials ───────────────────────────────────────────── */
.testimonial-card {
  background: var(--warm-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(201,168,76,0.1);
  position: relative;
  overflow: hidden;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -0.5rem;
  left: 1.5rem;
  font-size: 8rem;
  line-height: 1;
  color: rgba(201,168,76,0.08);
  font-family: Georgia, serif;
  pointer-events: none;
}
.star-rating { color: var(--gold); font-size: 0.875rem; letter-spacing: 0.1em; }

/* ── Sponsor logos ─────────────────────────────────────────── */
.sponsor-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(28,15,10,0.08);
  background: var(--warm-white);
  transition: all var(--transition);
  filter: grayscale(60%) opacity(0.7);
}
.sponsor-logo-wrap:hover {
  filter: grayscale(0%) opacity(1);
  border-color: rgba(201,168,76,0.3);
  box-shadow: var(--shadow-gold);
  transform: scale(1.05);
}

/* ── Forms ──────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7A5840;
}
.form-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1.5px solid rgba(28,15,10,0.12);
  border-radius: var(--radius-sm);
  background: var(--warm-white);
  color: var(--dark-brown);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
}
.form-input::placeholder { color: rgba(28,15,10,0.35); }
select.form-input { cursor: pointer; }

/* ── Feature highlight row ─────────────────────────────────── */
.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  background: rgba(201,168,76,0.12);
  border: 1.5px solid rgba(201,168,76,0.25);
  transition: all var(--transition);
}
.highlight-item:hover {
  background: rgba(201,168,76,0.18);
  border-color: rgba(201,168,76,0.35);
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(201,168,76,0.15);
}
.highlight-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: rgba(201,168,76,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ── Food Souk Section ─────────────────────────────────────── */
.food-souk-section {
  position: relative;
  background: linear-gradient(160deg, #1C0F0A 0%, #2C1408 50%, #1A0A05 100%);
  overflow: hidden;
}
.food-souk-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(201,168,76,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(193,68,14,0.1) 0%, transparent 50%);
}
.football-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='%23C9A84C' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* ── Parallax wrapper ──────────────────────────────────────── */
.parallax-img {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Scroll reveal (before GSAP kicks in) ──────────────────── */
.reveal { opacity: 0; transform: translateY(40px); }
.reveal.visible { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease, transform 0.7s ease; }

/* ── Swiper customisation ──────────────────────────────────── */
.swiper-pagination-bullet { background: var(--gold); opacity: 0.4; }
.swiper-pagination-bullet-active { opacity: 1; transform: scale(1.3); }
.swiper-button-next, .swiper-button-prev {
  color: var(--gold);
  background: rgba(250,247,242,0.9);
  width: 44px; height: 44px;
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
  transition: all var(--transition);
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background: var(--gold);
  color: var(--dark-brown);
}
.swiper-button-next::after, .swiper-button-prev::after { font-size: 1rem; font-weight: 700; }

/* ── Blog / Post ────────────────────────────────────────────── */
.post-card { border-radius: var(--radius-md); overflow: hidden; background: var(--warm-white); box-shadow: var(--shadow-soft); transition: all var(--transition); }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.post-category-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: var(--souk-bg);
  color: var(--gold-dim);
  display: inline-block;
}

/* ── Admin ──────────────────────────────────────────────────── */
.admin-sidebar { width: 260px; background: var(--dark-brown); min-height: 100vh; flex-shrink: 0; }
.admin-nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.25rem; border-radius: 10px;
  color: rgba(250,247,242,0.6);
  font-size: 0.875rem; font-weight: 500;
  transition: all var(--transition); text-decoration: none;
  margin-bottom: 2px;
}
.admin-nav-link:hover, .admin-nav-link.active {
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}
.admin-card {
  background: var(--warm-white);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

/* ── Misc / Utilities ────────────────────────────────────────── */
.divider-gold {
  width: 60px; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--amber));
  border-radius: 2px;
  margin: 1rem 0;
}
.tag-pill {
  display: inline-flex; align-items: center;
  gap: 0.4rem; padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.75rem; font-weight: 500;
  background: rgba(201,168,76,0.1);
  color: var(--gold-dim);
  border: 1px solid rgba(201,168,76,0.2);
}
.page-hero {
  padding: 8rem 1.5rem 6rem;
  background: linear-gradient(160deg, #1C0F0A 0%, #2C1810 100%);
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}
.page-hero.page-hero-tight {
  padding-top: 8rem;
  padding-bottom: 6rem;
}
.page-hero.page-hero-tight::after {
  bottom: -1px;
}
.page-hero.page-hero-soft {
  /* Top padding must clear the fixed navbar (80px tall) with room to spare,
     or the hero label/heading reads as jammed against the nav. Bottom
     padding must clear the ::after curved cutout (80px tall) with room to
     spare, or multi-line subtitle text gets visually clipped by the cream
     curve underneath it. */
  padding: 6rem 1.5rem 6rem;
  background: linear-gradient(160deg, #2A1F18 0%, #3B2B22 100%);
}
.page-hero.page-hero-soft .section-label {
  color: rgba(201,168,76,0.85);
  margin-bottom: 1.25rem;
}
.page-hero.page-hero-soft h1 {
  max-width: 44rem;
  margin: 0 auto;
  margin-bottom: 1.6rem;
}
.page-hero.page-hero-soft p {
  margin-top: 0;
  line-height: 1.75;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 80px;
  background: var(--cream);
  clip-path: ellipse(55% 100% at 50% 100%);
}

/* Section immediately after page hero - reduce top padding */
.section-after-hero {
  padding-top: 2rem;
}

/* ── Scroll animations ──────────────────────────────────────── */
/* .section-anim / .stagger-item used to hide at opacity:0 and rely on
   GSAP's ScrollTrigger to reveal them on scroll. That system proved
   unreliable in testing — the GSAP tween could report itself as "active"
   without ever actually completing (browser rAF throttling, timing edge
   cases), leaving real page content permanently invisible with no
   fallback able to detect and correct it. These classes are now plain,
   inert hooks with no opacity behavior at all, so this content is always
   visible regardless of what JS does or doesn't do. See main.js's
   initAnimations() for the full explanation. */
.stagger-group { display: flex; flex-wrap: wrap; gap: inherit; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes pulse-gold {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(201,168,76,0); }
}
.float { animation: float 4s ease-in-out infinite; }
.pulse-gold { animation: pulse-gold 2s ease infinite; }

/* Shimmer skeleton */
.skeleton {
  background: linear-gradient(90deg, #E8D8C0 25%, #F0E8D8 50%, #E8D8C0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 768px) {
  .section-pad { padding: 5rem 1.25rem; }
  .section-pad-sm { padding: 3.5rem 1.25rem; }
  .section-pad-lg { padding: 7rem 1.25rem; }
  .page-hero { padding: 6rem 1.25rem 4rem; margin-bottom: 2rem; }
  .gallery-grid { columns: 1 160px; }
  .admin-sidebar { width: 100%; min-height: auto; }

  /* ── Countdown: shrink so 4 units + 3 dividers fit a 375 px screen ── */
  .countdown-unit   { min-width: 48px; }
  .countdown-number { font-size: 1.5rem; }
  .countdown-divider { font-size: 1.2rem; }
  #main-countdown   { gap: 0.5rem; }

  /* ── Misc layout helpers ── */
  .highlight-item { padding: 1rem; }
  .btn-lg { padding: 0.85rem 1.5rem; font-size: 0.9rem; }
}

/* Extra-small phones (≤ 360 px) */
@media (max-width: 360px) {
  .countdown-unit   { min-width: 40px; }
  .countdown-number { font-size: 1.25rem; }
  .countdown-divider { font-size: 1rem; }
}