/* ═══════════════════════════════════════════════════════════════
   DULLSTROOM-EVENTS · SHARED STYLESHEET
   Link this file on every page:
   <link rel="stylesheet" href="shared.css" />
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ──────────────────────────────────────────── */
:root {
  --cream:      #f5f0e8;
  --parchment:  #ede5d0;
  --warm-tan:   #c9a97a;
  --rust:       #c0522a;
  --teal:       #2a7d7b;
  --dark:       #1e1a14;
  --mid:        #4a3f2f;
  --light-teal: #e8f4f3;
  --ink:        #2c2416;
  --gold:       #d4a843;
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
}
html { scroll-behavior: smooth; }

body {
	background-color: var(--cream);
	color: var(--ink);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 18px;
	line-height: 1.65;
	overflow-x: hidden;
}

/* ─── TEXTURE OVERLAY ────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   To update the menu, edit ONLY this section.
   The HTML on every page is just: <nav id="site-nav"></nav>
   and the JS below fills it in automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Nav shell ───────────────────────────────────────────────── */
.site-nav {
  background: var(--dark);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(201,169,122,0.15);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
}

/*---- Logo Next to Site name in Menu---*/
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.nav-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* ── Brand / logo ────────────────────────────────────────────── */
.nav-brand {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--warm-tan);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
}
.nav-brand:hover { color: #fff; }

/* ── Link list ───────────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  flex-wrap: nowrap;
}

.nav-links a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(245,240,232,0.55);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 3px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover {
  color: #fff;
  background: rgba(255,255,255,0.07);
}
.nav-links a.active {
  color: var(--warm-tan);
  background: rgba(201,169,122,0.12);
}

/* ── Separator dots ─────────────────────────────────────────── */
.nav-sep {
  color: rgba(201,169,122,0.25);
  font-size: 10px;
  user-select: none;
}

/* ── Hamburger (mobile) ──────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: transparent;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(245,240,232,0.7);
  border-radius: 2px;
  transition: all 0.25s;
}

/* ── Mobile drawer ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--dark);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 12px;
    border-bottom: 1px solid rgba(201,169,122,0.15);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .nav-links.open { display: flex; }

  .nav-links a {
    padding: 12px 28px;
    font-size: 11px;
    border-radius: 0;
  }
	.xmas-weeks img { width: 200px;}
	.tatse-cards img {width: 200px;}
    .nav-sep { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   SHARED PAGE COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Page sub-header (used on inner pages) ───────────────────── */
.page-header {
  background: linear-gradient(160deg, #e8e0cc 0%, #f0e8d5 40%, #e5dcc4 100%);
  text-align: center;
  padding: 60px 20px 50px;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  top: -60px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(42,125,123,0.15) 0%, transparent 70%);
  border-radius: 50%;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -40px; right: -40px;
  width: 320px; height: 320px;
  background: radial-gradient(ellipse at center, rgba(192,82,42,0.12) 0%, transparent 70%);
  border-radius: 50%;
}
.page-header-inner { position: relative; z-index: 2; }

/* ── Labels & pills ──────────────────────────────────────────── */
.event-label {
  display: inline-block;
  border: 2px solid var(--teal);
  border-radius: 3px;
  padding: 6px 24px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}

.page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--rust);
  line-height: 1.05;
  margin-bottom: 6px;
}
.page-title span { color: var(--teal); }

.page-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--mid);
  margin-bottom: 18px;
}

.date-pill {
  display: inline-block;
  background: var(--teal);
  color: var(--cream);
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 2px;
}

.xmas-weeks img
{
	width: 450px;
	padding: 10px;
	vertical-align: top;
}
.taste-cards img
{
	width: 450px;
	padding: 10px;
	vertical-align: top;
}

	
/* ── Shared footer ───────────────────────────────────────────── */
footer {
  background: var(--dark);
  color: rgba(245,240,232,0.45);
  text-align: center;
  padding: 28px 20px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
footer a { color: var(--warm-tan); text-decoration: none; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════
   NAV JAVASCRIPT (injected inline — define menu items here)
   When you want to add/remove/rename a nav item, edit the
   NAV_ITEMS array below. That's the ONLY place you need to change.
   ═══════════════════════════════════════════════════════════════ */

/*
  NOTE: The actual JS lives at the bottom of this comment block.
  It is loaded via <script src="nav.js"></script> on each page,
  OR you can paste the <script> block from nav.js into each HTML.

  See nav.js for the menu definition.
*/


/* ═══════════════════════════════════════════════════════════════
   INDEX PAGE — HERO & CTA
   (styles for index.html home page)
   ═══════════════════════════════════════════════════════════════ */

.hero {
      position: relative; min-height: 100vh;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; padding: 10px 20px 60px;
      background: linear-gradient(160deg, #e8e0cc 0%, #f0e8d5 40%, #e5dcc4 100%);
      overflow: hidden;
    }
    .hero::before {
      content: ''; position: absolute; top: -60px; left: -80px;
      width: 520px; height: 520px;
      background: radial-gradient(ellipse at center, rgba(42,125,123,0.18) 0%, transparent 70%);
      border-radius: 50%;
    }
    .hero::after {
      content: ''; position: absolute; bottom: -40px; right: -60px;
      width: 440px; height: 440px;
      background: radial-gradient(ellipse at center, rgba(192,82,42,0.14) 0%, transparent 70%);
      border-radius: 50%;
    }
    .splash-teal {
      position: absolute; top: 30%; right: -30px;
      width: 260px; height: 260px;
      background: radial-gradient(ellipse, rgba(42,125,123,0.12) 0%, transparent 70%);
      border-radius: 50%;
    }
    .splash-gold {
      position: absolute; bottom: 20%; left: 5%;
      width: 180px; height: 180px;
      background: radial-gradient(ellipse, rgba(212,168,67,0.18) 0%, transparent 70%);
      border-radius: 50%;
    }
    .banner-frame {
      display: inline-block; border: 2.5px solid var(--teal); border-radius: 4px;
      padding: 8px 32px 6px; margin-bottom: 18px; background: rgba(245,240,232,0.7);
    }
    .banner-frame::before, .banner-frame::after { content: '—'; color: var(--warm-tan); margin: 0 8px; }
    .banner-label {
      font-family: 'Josefin Sans', sans-serif; font-size: 11px;
      letter-spacing: 4px; text-transform: uppercase; color: var(--teal);
    }
    .banner-label a { color: inherit; text-decoration: none; }
    .banner-label a:hover { color: var(--rust); }
    .hero-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 900;
      line-height: 1; color: #FF6600; margin-bottom: 4px;
      animation: fadeUp 0.9s ease both;
    }
    .hero-title span { color: var(--teal); }
    .hero-subtitle {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.2rem, 3vw, 1.9rem); font-weight: 400;
      font-style: italic; color: var(--teal); letter-spacing: 2px;
      margin-bottom: 10px; animation: fadeUp 0.9s 0.15s ease both;
    }
    .hero-date-pill {
      display: inline-block; background: var(--teal); color: var(--cream);
      font-family: 'Josefin Sans', sans-serif; font-size: 13px;
      letter-spacing: 3px; text-transform: uppercase;
      padding: 7px 24px; border-radius: 2px; margin: 16px 0 28px;
      animation: fadeUp 0.9s 0.25s ease both;
    }
    .hero-tagline {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--mid);
      max-width: 560px; margin: 0 auto 36px;
      animation: fadeUp 0.9s 0.35s ease both;
    }
    .ornament { text-align: center; color: var(--warm-tan); font-size: 20px; letter-spacing: 12px; margin: 8px 0; }
    .cta-section {
      background: linear-gradient(135deg, var(--rust) 0%, #a8401e 100%);
      color: #fff; text-align: center; padding: 80px 20px;
      position: relative; overflow: hidden;
    }
    .cta-section::before {
      content: '🛵'; position: absolute; font-size: 260px;
      left: -30px; bottom: -30px; opacity: 0.06; line-height: 1; transform: scaleX(-1);
    }
    .cta-section::after {
      content: '🛵'; position: absolute; font-size: 260px;
      right: -30px; top: -30px; opacity: 0.06; line-height: 1;
    }
    .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
    .btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 32px; border-radius: 3px;
      font-family: 'Josefin Sans', sans-serif; font-size: 13px;
      letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
      font-weight: 700; transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
      cursor: pointer; border: none;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }
    .btn-primary  { background: #fff; color: var(--rust); }
    .btn-secondary { background: transparent; border: 2px solid rgba(255,255,255,0.6); color: #fff; }
    .btn-secondary:hover { background: rgba(255,255,255,0.1); }
    .cta-contact {
      margin-top: 32px; font-family: 'Josefin Sans', sans-serif;
      font-size: 13px; letter-spacing: 1px; opacity: 0.8;
    }
    .cta-contact a { color: #fff; text-decoration: underline; }



/* ═══════════════════════════════════════════════════════════════
   EVENT BLOCKS — THEMED COLOUR SYSTEM
   ─────────────────────────────────────────────────────────────
   Each event on the homepage is wrapped in:
     <div class="event-block" data-theme="THEMENAME"> ... </div>

   To add a new event:
     1. Copy an existing event-block div
     2. Change data-theme to one of: xmas | ktm | vespa | taste | default
     3. Change the text/dates/links inside
     4. Paste it ABOVE the previous event (newest on top)

   To add a NEW theme: copy one of the blocks below and adjust colours.
   ═══════════════════════════════════════════════════════════════ */

/* ── Base event block wrapper ──────────────────────────────── */
.event-block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 20px;
  margin: 0;
  border-top: 1px solid rgba(0,0,0,0.06);

  /* CSS custom properties — overridden per theme below */
  --ev-accent:       var(--teal);
  --ev-title:        #FF6600;
  --ev-title-span:   var(--teal);
  --ev-subtitle:     var(--teal);
  --ev-pill-bg:      var(--teal);
  --ev-pill-text:    var(--cream);
  --ev-banner-border:var(--teal);
  --ev-banner-bg:    rgba(245,240,232,0.7);
  --ev-banner-text:  var(--teal);
  --ev-tagline:      var(--mid);
  --ev-ornament:     var(--warm-tan);
  --ev-splash1:      rgba(42,125,123,0.12);
  --ev-splash2:      rgba(192,82,42,0.10);
}

/* Apply theme variables to children */
.event-block .hero-title        { color: var(--ev-title); }
.event-block .hero-title span   { color: var(--ev-title-span); }
.event-block .hero-subtitle     { color: var(--ev-subtitle); }
.event-block .hero-subtitle a   { color: var(--ev-subtitle); text-decoration: none; }
.event-block .hero-subtitle a:hover { opacity: 0.75; }
.event-block .hero-date-pill    { background: var(--ev-pill-bg); color: var(--ev-pill-text); }
.event-block .hero-tagline      { color: var(--ev-tagline); }
.event-block .ornament          { color: var(--ev-ornament); }
.event-block .banner-frame      { border-color: var(--ev-banner-border); background: var(--ev-banner-bg); }
.event-block .banner-frame::before,
.event-block .banner-frame::after { color: var(--ev-accent); }
.event-block .banner-label      { color: var(--ev-banner-text); }
.event-block .banner-label a    { color: var(--ev-banner-text); }
.event-block .banner-label a:hover { opacity: 0.75; }

/* Background splash circles per block */
.event-block::before {
  content: '';
  position: absolute;
  top: -30px; left: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(ellipse at center, var(--ev-splash1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.event-block::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -40px;
  width: 260px; height: 260px;
  background: radial-gradient(ellipse at center, var(--ev-splash2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ── THEME: xmas — Oktoberfest ───────────────────────── */
/* Warm Rustic*/
[data-theme="oktober"] {
--ev-accent: #D69429;
--ev-title: #143859;
--ev-title-span: #e8bb4c;
--ev-subtitle: #4C7B9E;
--ev-pill-bg: #143859;
--ev-pill-text: #FFFFFF;
--ev-banner-border: #D69429;
--ev-banner-bg: rgba(234, 223, 196, 0.85);
--ev-banner-text: #143859;
--ev-tagline: #5E4232;
--ev-ornament: #D69429;
--ev-splash1: rgba(214, 148, 41, 0.1);
--ev-splash2: rgba(20, 56, 89, 0.1);
background: linear-gradient(160deg, #F5F0E6 0%, #EADFC4 100%);
}

/* ── THEME: xmas — Christmas in July ───────────────────────── */
/* White, icy blue, silver — cold & festive                     */
[data-theme="xmas"] {
  --ev-accent:        #4a90d9;
  --ev-title:         #1a5fa8;
  --ev-title-span:    #c0d8f0;
  --ev-subtitle:      #4a90d9;
  --ev-pill-bg:       #1a5fa8;
  --ev-pill-text:     #ffffff;
  --ev-banner-border: #4a90d9;
  --ev-banner-bg:     rgba(220,235,255,0.75);
  --ev-banner-text:   #1a5fa8;
  --ev-tagline:       #2c5282;
  --ev-ornament:      #90bce8;
  --ev-splash1:       rgba(74,144,217,0.14);
  --ev-splash2:       rgba(192,216,240,0.18);
  background: linear-gradient(160deg, #e8f0fa 0%, #f0f6ff 50%, #ddeeff 100%);
}

/* ── THEME: ktm — KTM Roost ─────────────────────────────────── */
/* KTM orange & black — aggressive, rally energy                */
[data-theme="ktm"] {
  --ev-accent:        #e8630a;
  --ev-title:         #e8630a;
  --ev-title-span:    #1a1a1a;
  --ev-subtitle:      #c0500a;
  --ev-pill-bg:       #e8630a;
  --ev-pill-text:     #ffffff;
  --ev-banner-border: #e8630a;
  --ev-banner-bg:     rgba(255,235,220,0.75);
  --ev-banner-text:   #c0500a;
  --ev-tagline:       #3d1f0a;
  --ev-ornament:      #e8630a;
  --ev-splash1:       rgba(232,99,10,0.14);
  --ev-splash2:       rgba(26,26,26,0.08);
  background: linear-gradient(160deg, #fff0e6 0%, #ffe8d6 50%, #ffdcc4 100%);
}

/* ── THEME: vespa — Vespa Weekend ───────────────────────────── */
/* Warm yellow, orange gold — Italian scooter spirit            */
[data-theme="vespa"] {
  --ev-accent:        #d4a843;
  --ev-title:         #c47d0e;
  --ev-title-span:    #2a7d7b;
  --ev-subtitle:      #8a5a0a;
  --ev-pill-bg:       #c47d0e;
  --ev-pill-text:     #fff8e8;
  --ev-banner-border: #d4a843;
  --ev-banner-bg:     rgba(255,248,220,0.80);
  --ev-banner-text:   #8a5a0a;
  --ev-tagline:       #5a3d0a;
  --ev-ornament:      #d4a843;
  --ev-splash1:       rgba(212,168,67,0.18);
  --ev-splash2:       rgba(196,125,14,0.12);
  background: linear-gradient(160deg, #fdf8ec 0%, #fff5d6 50%, #faedc4 100%);
}

/* ── THEME: taste — Taste of Dullstroom ─────────────────────── */
/* Deep wine red & cream — fine dining, wine, sophistication    */
[data-theme="taste"] {
  --ev-accent:        #8b2635;
  --ev-title:         #8b2635;
  --ev-title-span:    #c4a882;
  --ev-subtitle:      #6b1e29;
  --ev-pill-bg:       #8b2635;
  --ev-pill-text:     #f9f0e8;
  --ev-banner-border: #8b2635;
  --ev-banner-bg:     rgba(248,235,230,0.80);
  --ev-banner-text:   #6b1e29;
  --ev-tagline:       #4a1520;
  --ev-ornament:      #c4a882;
  --ev-splash1:       rgba(139,38,53,0.13);
  --ev-splash2:       rgba(196,168,130,0.15);
  background: linear-gradient(160deg, #fcf0ee 0%, #f9e8e6 50%, #f4dcd8 100%);
}

/* ── THEME: dinner — Dinner with Strangers ──────────────────── */
/* Warm teal & cream — social, welcoming, conversational        */
[data-theme="dinner"] {
  --ev-accent:        #2a7d7b;
  --ev-title:         #2a7d7b;
  --ev-title-span:    #c0522a;
  --ev-subtitle:      #1e5e5c;
  --ev-pill-bg:       #2a7d7b;
  --ev-pill-text:     #f5f0e8;
  --ev-banner-border: #2a7d7b;
  --ev-banner-bg:     rgba(232,244,243,0.80);
  --ev-banner-text:   #1e5e5c;
  --ev-tagline:       #2c2416;
  --ev-ornament:      #c9a97a;
  --ev-splash1:       rgba(42,125,123,0.14);
  --ev-splash2:       rgba(192,82,42,0.10);
  background: linear-gradient(160deg, #e8f4f3 0%, #f0faf9 50%, #e2f0ef 100%);
}

/* ── THEME: past — Past Events section ─────────────────────── */
/* Muted, subdued — these have already happened                 */
[data-theme="past"] {
  --ev-accent:        #9a9080;
  --ev-title:         #9a9080;
  --ev-title-span:    #7a7068;
  --ev-subtitle:      #7a7068;
  --ev-pill-bg:       #9a9080;
  --ev-pill-text:     #f5f0e8;
  --ev-banner-border: #c9b896;
  --ev-banner-bg:     rgba(240,236,228,0.70);
  --ev-banner-text:   #7a7068;
  --ev-tagline:       #9a9080;
  --ev-ornament:      #c9b896;
  --ev-splash1:       rgba(154,144,128,0.08);
  --ev-splash2:       rgba(154,144,128,0.06);
  background: linear-gradient(160deg, #f2ede4 0%, #ede8de 50%, #e8e2d8 100%);
  opacity: 0.85;
}


/* ═══════════════════════════════════════════════════════════════
   VESPA WEEKEND PAGE
   (styles for Vespa.html event page)
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO ───────────────────────────────────────────── */
    .hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 60px;
	background: linear-gradient(160deg, #e8e0cc 0%, #f0e8d5 40%, #e5dcc4 100%);
	overflow: hidden;
    }

    /* Watercolour splashes */
    .hero::before {
      content: '';
      position: absolute;
      top: -60px; left: -80px;
      width: 520px; height: 520px;
      background: radial-gradient(ellipse at center, rgba(42,125,123,0.18) 0%, transparent 70%);
      border-radius: 50%;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -40px; right: -60px;
      width: 440px; height: 440px;
      background: radial-gradient(ellipse at center, rgba(192,82,42,0.14) 0%, transparent 70%);
      border-radius: 50%;
    }

    .splash-teal {
      position: absolute;
      top: 30%; right: -30px;
      width: 260px; height: 260px;
      background: radial-gradient(ellipse, rgba(42,125,123,0.12) 0%, transparent 70%);
      border-radius: 50%;
    }
    .splash-gold {
      position: absolute;
      bottom: 20%; left: 5%;
      width: 180px; height: 180px;
      background: radial-gradient(ellipse, rgba(212,168,67,0.18) 0%, transparent 70%);
      border-radius: 50%;
    }

    .hero-inner { position: relative; z-index: 2; max-width: 820px; }

    /* ─── TOP BANNER ─────────────────────────────────────── */
    .banner-frame {
      display: inline-block;
      border: 2.5px solid var(--teal);
      border-radius: 4px;
      padding: 8px 32px 6px;
      margin-bottom: 18px;
      position: relative;
      background: rgba(245,240,232,0.7);
    }
    .banner-frame::before,
    .banner-frame::after {
      content: '—';
      color: var(--warm-tan);
      margin: 0 8px;
    }
    .banner-label {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 11px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--teal);
    }

    .hero-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(3rem, 8vw, 6.5rem);
	font-weight: 900;
	line-height: 1;
	color: #FF6600;
	margin-bottom: 4px;
	animation: fadeUp 0.9s ease both;
    }
    .hero-title span {
      color: var(--teal);
    }

    .hero-subtitle {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.2rem, 3vw, 1.9rem);
      font-weight: 400;
      font-style: italic;
      color: var(--teal);
      letter-spacing: 2px;
      margin-bottom: 10px;
      animation: fadeUp 0.9s 0.15s ease both;
    }

    .hero-date-pill {
      display: inline-block;
      background: var(--teal);
      color: var(--cream);
      font-family: 'Josefin Sans', sans-serif;
      font-size: 13px;
      letter-spacing: 3px;
      text-transform: uppercase;
      padding: 7px 24px;
      border-radius: 2px;
      margin: 16px 0 28px;
      animation: fadeUp 0.9s 0.25s ease both;
    }

    .hero-tagline {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-size: clamp(1.05rem, 2vw, 1.3rem);
      color: var(--mid);
      max-width: 560px;
      margin: 0 auto 36px;
      animation: fadeUp 0.9s 0.35s ease both;
    }

    /* ─── LOGO ROW ───────────────────────────────────────── */
    .logo-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 36px;
      flex-wrap: wrap;
      margin: 32px 0 0;
      animation: fadeUp 0.9s 0.45s ease both;
    }

    .logo-placeholder {
      width: 110px;
      height: 80px;
      border: 2px dashed var(--warm-tan);
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: rgba(245,240,232,0.6);
      transition: border-color 0.2s;
    }
    .logo-placeholder:hover { border-color: var(--teal); }
    .logo-placeholder .lp-icon {
      font-size: 22px;
      opacity: 0.4;
    }
    .logo-placeholder .lp-label {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 9px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--mid);
      opacity: 0.6;
      text-align: center;
      padding: 0 6px;
    }

    .logo-divider {
      width: 1px;
      height: 50px;
      background: var(--warm-tan);
      opacity: 0.4;
    }

    /* ─── DECORATIVE DIVIDER ─────────────────────────────── */
    .ornament {
      text-align: center;
      color: var(--warm-tan);
      font-size: 20px;
      letter-spacing: 12px;
      margin: 8px 0;
    }
    .section-rule {
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 0 auto 40px;
      max-width: 500px;
    }
    .section-rule::before,
    .section-rule::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--warm-tan), transparent);
    }
    .section-rule span {
      font-size: 18px;
      color: var(--warm-tan);
    }

    /* ─── SECTIONS ───────────────────────────────────────── */
    section {
      padding: 70px 20px;
    }
    .container {
      max-width: 900px;
      margin: 0 auto;
    }
    .section-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 700;
      color: var(--rust);
      text-align: center;
      margin-bottom: 8px;
    }
    .section-title.teal { color: var(--teal); }

    .section-intro {
      text-align: center;
      font-size: 1.1rem;
      color: var(--mid);
      max-width: 640px;
      margin: 0 auto 50px;
      font-style: italic;
    }

    /* ─── INTRO BLURB ─────────────────────────────────────── */
    .intro-band {
      background: var(--teal);
      color: var(--cream);
      padding: 60px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }


    .intro-band::before {
      content: '🛵';
      position: absolute;
      font-size: 180px;
      opacity: 0.05;
      top: -20px; right: -10px;
      transform: rotate(-15deg);
      line-height: 1;
    }
    .intro-band h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-style: italic;
      font-weight: 400;
      margin-bottom: 16px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    .intro-band p {
      font-size: 1.05rem;
      opacity: 0.9;
      max-width: 580px;
      margin: 0 auto;
    }
    .pill-tags {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 24px;
    }
    .pill-tag {
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 18px;
      border-radius: 20px;
    }

    /* ─── PROGRAMME ──────────────────────────────────────── */
    .programme-section {
      background: var(--parchment);
      position: relative;
    }
    .programme-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(to right, var(--rust), var(--teal), var(--gold));
    }

    .day-block {
      margin-bottom: 48px;
    }
    .day-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }
    .day-badge {
      background: var(--rust);
      color: #fff;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 6px 18px;
      border-radius: 2px;
      white-space: nowrap;
    }
    .day-badge.saturday { background: var(--teal); }
    .day-badge.sunday   { background: var(--gold); color: var(--ink); }

    .day-title {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      font-style: italic;
      color: var(--mid);
    }

    .event-list { list-style: none; }
    .event-item {
      display: grid;
      grid-template-columns: 70px 1fr;
      gap: 0 20px;
      margin-bottom: 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid rgba(201,169,122,0.3);
      align-items: start;
    }
    .event-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

    .event-time {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--rust);
      padding-top: 3px;
      white-space: nowrap;
    }
    .event-time.teal { color: var(--teal); }

    .event-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .event-venue {
      font-size: 0.92rem;
      color: var(--mid);
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 4px;
    }
    .event-venue::before { content: '📍'; font-size: 12px; }
    .event-notes {
      font-size: 0.92rem;
      color: var(--mid);
      font-style: italic;
    }
    .event-notes li {
      list-style: none;
      padding-left: 14px;
      position: relative;
    }
    .event-notes li::before {
      content: '›';
      position: absolute; left: 0;
      color: var(--warm-tan);
    }

    /* ─── TREASURE HUNT CALLOUT ──────────────────────────── */
    .treasure-card {
      background: linear-gradient(135deg, var(--teal) 0%, #1d5c5b 100%);
      color: #fff;
      border-radius: 8px;
      padding: 40px 40px 36px;
      margin: 40px 0;
      position: relative;
      overflow: hidden;
    }
    .treasure-card::after {
      content: '🕵️';
      position: absolute;
      font-size: 120px;
      right: -10px; bottom: -15px;
      opacity: 0.1;
      line-height: 1;
    }
    .treasure-card h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.7rem;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .treasure-card p {
      opacity: 0.9;
      font-size: 1rem;
      max-width: 560px;
      margin-bottom: 14px;
    }
    .treasure-meta {
      display: flex;
      gap: 24px;
      flex-wrap: wrap;
      margin-top: 20px;
    }
    .treasure-chip {
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 4px;
      padding: 8px 16px;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 12px;
      letter-spacing: 1px;
    }
    .treasure-chip strong {
      display: block;
      font-size: 15px;
      margin-bottom: 2px;
      letter-spacing: 0;
      font-family: 'Playfair Display', serif;
    }

    /* ─── GOODIE BAG ──────────────────────────────────────── */
    .goodie-section { background: var(--cream); }

    .restaurants-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin-top: 28px;
    }
    .restaurant-card {
      border: 1.5px solid var(--warm-tan);
      border-radius: 6px;
      padding: 20px 20px 18px;
      background: rgba(255,255,255,0.5);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .restaurant-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }
    .restaurant-card .rc-icon { font-size: 26px; margin-bottom: 8px; }
    .restaurant-card h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }
    .restaurant-card p {
      font-size: 0.88rem;
      color: var(--mid);
      font-style: italic;
    }

    /* ─── SOCIAL EVENTS ───────────────────────────────────── */
    .events-section { background: var(--parchment); }

    .social-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 36px;
    }
    .social-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0,0,0,0.07);
      transition: transform 0.2s;
    }
    .social-card:hover { transform: translateY(-4px); }
    .social-card-header {
      padding: 20px 24px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .social-card-header.friday  { background: var(--rust); color: #fff; }
    .social-card-header.saturday { background: var(--teal); color: #fff; }
    .social-card-day {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: 0.8;
    }
    .social-card-event {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 700;
    }
    .social-card-time {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 22px;
      font-weight: 700;
      margin-left: auto;
      opacity: 0.7;
    }
    .social-card-body {
      padding: 20px 24px 22px;
    }
    .social-card-body .venue {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 12px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--rust);
      margin-bottom: 8px;
    }
    .social-card-body .venue.teal { color: var(--teal); }
    .social-card-body p {
      font-size: 0.97rem;
      color: var(--mid);
    }
    .social-card-icon {
      font-size: 28px;
      margin-bottom: 10px;
    }

    /* ─── ACCOMMODATION ───────────────────────────────────── */
    .accom-section {
      background: var(--dark);
      color: var(--cream);
      position: relative;
      overflow: hidden;
    }
    .accom-section::before {
      content: '🏨';
      position: absolute;
      font-size: 300px;
      left: -40px; top: -30px;
      opacity: 0.03;
      line-height: 1;
    }
    .accom-section .section-title,
    .accom-section .section-intro { color: var(--cream); }
    .accom-section .section-intro { opacity: 0.75; }

    .accom-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
      margin-bottom: 40px;
    }
    .accom-card {
      border: 1px solid rgba(201,169,122,0.3);
      border-radius: 6px;
      padding: 20px 18px;
      background: rgba(255,255,255,0.04);
      transition: background 0.2s, border-color 0.2s;
    }
    .accom-card:hover {
      background: rgba(255,255,255,0.08);
      border-color: var(--warm-tan);
    }
    .accom-card h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
      color: #fff;
    }
    .accom-card .phone {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 14px;
      letter-spacing: 0.5px;
      color: var(--warm-tan);
    }
    .accom-card .phone::before { content: '📞 '; }

    .ref-box {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--rust);
      color: #fff;
      border-radius: 4px;
      padding: 14px 28px;
      font-family: 'Josefin Sans', sans-serif;
      margin-top: 8px;
    }
    .ref-box .ref-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.75; }
    .ref-box .ref-code  { font-size: 18px; font-weight: 700; letter-spacing: 2px; }

    /* ─── WHY JOIN ─────────────────────────────────────────── */
    .why-section { background: var(--cream); }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 24px;
      margin-top: 36px;
    }
    .why-card {
      text-align: center;
      padding: 28px 16px 24px;
      border-radius: 8px;
      background: var(--parchment);
      border: 1px solid rgba(201,169,122,0.25);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .why-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }
    .why-card .icon { font-size: 34px; margin-bottom: 12px; }
    .why-card h4 {
      font-family: 'Playfair Display', serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--teal);
      margin-bottom: 8px;
    }
    .why-card p { font-size: 0.92rem; color: var(--mid); }

    /* ─── REGISTER CTA ────────────────────────────────────── */
    .cta-section {
      background: linear-gradient(135deg, var(--rust) 0%, #a8401e 100%);
      color: #fff;
      text-align: center;
      padding: 80px 20px;
      position: relative;
      overflow: hidden;
    }
    .cta-section::before {
      content: '🛵';
      position: absolute;
      font-size: 260px;
      left: -30px; bottom: -30px;
      opacity: 0.06;
      line-height: 1;
      transform: scaleX(-1);
    }
    .cta-section::after {
      content: '🛵';
      position: absolute;
      font-size: 260px;
      right: -30px; top: -30px;
      opacity: 0.06;
      line-height: 1;
    }
    .cta-section h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 900;
      margin-bottom: 10px;
    }
    .cta-section p {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 36px;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }

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

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 32px;
      border-radius: 3px;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none;
      font-weight: 700;
      transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
      cursor: pointer;
      border: none;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

    .btn-primary {
      background: #fff;
      color: var(--rust);
    }
    .btn-secondary {
      background: transparent;
      border: 2px solid rgba(255,255,255,0.6);
      color: #fff;
    }
    .btn-secondary:hover { background: rgba(255,255,255,0.1); }

    .cta-contact {
      margin-top: 32px;
      font-family: 'Josefin Sans', sans-serif;
      font-size: 13px;
      letter-spacing: 1px;
      opacity: 0.8;
    }
    .cta-contact a { color: #fff; text-decoration: underline; }

    

    /* ─── ANIMAL RESCUE CALLOUT ───────────────────────────── */
    .rescue-callout {
      background: linear-gradient(to right, rgba(42,125,123,0.08), rgba(42,125,123,0.03));
      border-left: 4px solid var(--teal);
      border-radius: 0 6px 6px 0;
      padding: 16px 20px;
      margin-top: 20px;
      font-size: 0.95rem;
      color: var(--mid);
    }
    .rescue-callout strong { color: var(--teal); }

    

    /* ─── RESPONSIVE ──────────────────────────────────────── */
    @media (max-width: 640px) {
      .event-item { grid-template-columns: 60px 1fr; gap: 0 12px; }
      .treasure-card { padding: 28px 24px; }
      .treasure-meta { flex-direction: column; gap: 12px; }
      .social-card-time { display: none; }
      .accom-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ─── VIDEO SECTION ──────────────────────────────────── */
    .video-section {
      background: var(--dark);
      padding: 70px 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .video-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, rgba(42,125,123,0.15) 0%, transparent 70%);
      pointer-events: none;
    }
    .video-section .section-title {
      color: var(--cream);
      margin-bottom: 8px;
    }
    .video-section .section-rule::before,
    .video-section .section-rule::after {
      background: linear-gradient(to right, transparent, rgba(201,169,122,0.5), transparent);
    }
    .video-wrapper {
	position: relative;
	max-width: 500px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,169,122,0.2);
    }
    .video-wrapper video {
      width: 100%;
      display: block;
    }
    .video-caption {
      font-family: 'Josefin Sans', sans-serif;
      font-size: 11px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: rgba(245,240,232,0.45);
      margin-top: 18px;
    }