/* Font Face Declarations */
@font-face {
  font-family: 'Beach Bound Script Thin';
  src: url('./assets/img/fonts/Beach Bound Script Thin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Fallback for Beach Bound Script if OTF doesn't load */
@font-face {
  font-family: 'Beach Bound Script Fallback';
  src: local('Brush Script MT'), local('Lucida Handwriting'), local('cursive');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'ALTMariaClara-Regular';
  src: url('./assets/img/fonts/ALTMariaClara-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== THEME (PDF) ========== */
:root{
  --bg:#F7F4EE;        /* cream paper */
  --paper:#fff;
  --ink:#1e1d1b;
  --muted:#6d6a66;
  --accent:#0e7a53;    /* accent button */
  --olive:#8E9575;     /* green sections/strips */
  --rule:#e6e1d9;
  --coral:      #D87563;   /* filled */
  --coral-700:  #C96450;   /* hover */
  --coral-800:  #B85744;   /* active */
  --btn-radius: 28px;

  /* Fonts (close to the PDF) */
  --display:"Bodoni Moda", serif;   /* replaces previous display font */
  --hand:"Great Vibes", cursive;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --sticky:84px;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
body{padding-top:80px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
section[id],footer[id]{scroll-margin-top:calc(var(--sticky) + 20px)}

/* Desktop scroll fixes for navigation */
@media (min-width: 721px) {
  section[id] {
    scroll-margin-top: 75px !important;
  }
  
  #our-story {
    scroll-margin-top: 75px !important;
  }
  
  #stay {
    scroll-margin-top: 75px !important;
  }
  
  #travel {
    scroll-margin-top: 75px !important;
  }
  
  #schedule {
    scroll-margin-top: 75px !important;
  }
  
  #rsvp {
    scroll-margin-top: 75px !important;
  }
  
  #faq {
    scroll-margin-top: 75px !important;
  }
}

  /* Email link styling: match surrounding text and underline by default; highlight in blue on hover */
  .fine a, .mini a {
    color: inherit; /* use surrounding text color */
    text-decoration: underline; /* underline by default so it's visible */
    transition: color 150ms ease-in-out;
    cursor: pointer;
  }
  .fine a:hover, .mini a:hover {
    color: #1e66d0; /* blue on hover */
  }


/* ========== COMMON ========== */
.container{max-width:1300px;margin:0 auto;padding:0 40px}
.center{text-align:center}
/* Make checkbox-style groups look like events selection */
.radio-group.checkbox-style { 
  display:flex; 
  flex-direction:column; 
  gap:8px; 
  padding: 0;
  border: none;
  background: transparent;
  align-items: flex-start;
}
.radio-group.checkbox-style .radio-option { 
  padding:12px 8px; 
  border:none; 
  border-radius:6px;
  background: transparent; 
  display:flex; 
  align-items:center; 
  gap:12px; 
  transition: all 0.2s ease;
  width: 100%;
  cursor: pointer;
}
.radio-group.checkbox-style .radio-option:hover {
  background: rgba(216, 117, 99, 0.05);
  border-color: transparent;
}
.radio-group.checkbox-style .radio-option input[type="checkbox"] { 
  width:16px; 
  height:16px; 
  margin:0; 
  flex:0 0 16px; 
  appearance:none; 
  -webkit-appearance:none; 
  border-radius:3px; 
  border:2px solid #D87563; 
  background: #fff;
  transition: all 0.2s ease;
  cursor: pointer;
}
.radio-group.checkbox-style .radio-option input[type="checkbox"]:checked { 
  background: #D87563 !important; 
  box-shadow: inset 0 0 0 1px #fff; 
  position: relative;
}
.radio-group.checkbox-style .radio-option input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}
.radio-group.checkbox-style .radio-option label{ 
  margin:0; 
  display:flex; 
  align-items:center;
  font-family: "PlusJakartaSans-Light", "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #1a1917;
  cursor: pointer;
  flex: 1;
  line-height: 1.4;
}
.radio-group.checkbox-style .radio-option input[type="checkbox"]:checked + label{
  font-weight: 600;
  color: #D87563 !important;
}

.kicker{letter-spacing:.18em;font-size:16px;color:#59564f;text-transform:uppercase}  /* increased by 30% */
.muted{color:#615e58;font-size:1.3em;}  /* increased by 30% */
.mini{font-size:16px}  /* increased by 30% */

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1px solid var(--ink);background:var(--paper)}
.btn-outline{background:var(--paper)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-ghost{background:transparent;border:1px solid #fff;color:#fff}

/* Display headings */
.display-center{font-family:var(--display);text-align:center;font-size:54px;line-height:1.05;letter-spacing:.01em;margin:0 0 28px}
.display-left{font-family:var(--display);font-size:57px;line-height:1.1;margin:10px 0 6px}  /* increased by 30% */

/* ======= Refined HEADER (compact height + centered line at logo level) ======= */

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  background-color: #faf7f1 !important; /* match page background */
}

/* inner grid */
.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 10px 40px; /* smaller height than before */
  position: relative;
}

/* full-width decorative line at logo level */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%; /* centers the line vertically with nav text */
  height: 1px;
  background-color: rgba(35, 31, 32, 0.4);
  z-index: 0;
}

/* navigation sections */
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  z-index: 2; /* keep above line */
  background-color: #faf7f1;
  padding: 0 8px; /* so background masks line */
}

.nav-left {
  justify-content: flex-start;
}
.nav-right {
  justify-content: flex-end;
}

.nav a {
  text-decoration: none;
  color: #231f1f;
  transition: opacity 0.2s ease;
}
.nav a:hover {
  opacity: 0.6;
}

/* RSVP button */
.rsvp-btn {
  border: 1px solid #231f1f;
  background: transparent;
  color: #231f1f;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.rsvp-btn:hover {
  transform: translateY(-1px);
}

/* centered logo / brand */
.brand {
  display: grid;
  place-items: center;
  text-align: center;
  color: #231f1f;
  padding: 0 20px;
  background-color: #faf7f1; /* hides line under logo */
  position: relative;
  z-index: 3;
  margin-bottom: 20px; /* prevent overlap with first section */
}

.brand-line {
  font-family: "Bodoni Moda", serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.01em;
  display: block;
}

.brand-script {
  margin-top: 4px;
  font-family: "Beach Bound Script Thin", "Alex Brush", "Great Vibes", cursive !important;
  font-size: 22px;
  line-height: 1;
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .header-inner {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 20px;
  }

  .brand {
    order: -1;
    margin-bottom: 30px; /* more space on smaller screens */
  }

  .site-header::after {
    display: none; /* hide full-width line on small screens */
  }
}


/* ========== FESTIVAL BANNER ========== */
.banner-h1{font-family:var(--display);text-align:center;font-size:44px;line-height:1.15;margin:46px 0 22px}
.days-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;justify-items:center;margin:8px 0 10px}
.day-num span{font-family:var(--display);font-size:64px;display:block}
.day-num small{display:block;text-align:center;font-size:14px}
.tiny-note{text-align:center;color:var(--muted);margin:8px 0 14px}
.hero-cta{display:flex;gap:12px;justify-content:center;margin:8px 0 38px}
.cream{background:var(--bg)}

/* ========== OUR STORY ========== */
.ourstory{background:var(--olive);padding:60px 0}
.story-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:520px 1fr;gap:42px;align-items:start;padding:0 20px}
.story-photo img{width:100%;border:8px solid rgba(255,255,255,.35)}
.section-title{font-family:var(--display);font-size:72px;line-height:.9;margin:0 0 8px}
.hand{font-family:var(--hand);font-size:28px;color:#fff;text-align:right;margin:6px 0 16px}
.lead{font-family:var(--display);font-size:20px}



/* Title */
.display-center{
  font-family:var(--display);
  font-size:56px; line-height:1.05; letter-spacing:.01em;
  margin:0 0 34px;
}

/* 3 vertical columns */
.days{
  display:grid;
  grid-template-columns:repeat(3,minmax(320px,1fr));
  gap:100px;
  align-items:start;
}

/* Headings centered per column */
.day{ text-align:center; }
.day__tag{ letter-spacing:.18em; font-size:13px; opacity:.95; margin-bottom:6px; }
.day__title{ font-family:var(--display); font-size:64px; line-height:1.03; margin:0 0 6px; }
.day__subtitle{ font-family:var(--hand); font-size:30px; margin-bottom:20px; }

/* Details left, narrow width to mimic comp */
.day__time{ font-family:var(--sans); font-weight:700; letter-spacing:.06em; margin:12px 0 12px; font-size:15px; }
.day__meta, .acts { max-width:340px; margin:0 auto; text-align:left; }
.day__meta{ font-family:var(--sans); font-size:14px; line-height:1.62; opacity:.96; }
.day__kicker{
  letter-spacing:.22em; font-size:12px; margin:20px 0 12px;
  text-align:left; max-width:330px; margin-left:auto; margin-right:auto;
}

/* Artist list */
.acts{ list-style:none; padding:0; display:grid; gap:12px; }
.acts li{ display:block; }                  /* stack name, then time */

/* Name styles (you’ll assign classes per act) */
.act{ display:block; font-family:var(--display); line-height:1.12; }
.act--caps{ text-transform:uppercase; letter-spacing:.02em; }
.act--script{ font-family:var(--hand); font-size:26px; }

/* size tiers */
.act--xl{ font-size:32px; font-weight:700; }        /* biggest (e.g., Daddy Jack Band) */
.act--lg{ font-size:28px; font-weight:700; }        /* headline (e.g., G-COMBO, ANDREA CASTELLS) */
.act--md{ font-size:22px; }                         /* regular (e.g., JAZZ BAND, 86HZ) */

/* DJ label look */
.act--dj{
  font-family:var(--sans);
  font-weight:700; letter-spacing:.18em;
  font-size:12px; text-transform:uppercase;
}

/* time ALWAYS below name */
.act__time{
  display:block;                     /* <— ensures below */
  font-family:var(--sans);
  font-size:12px; opacity:.95;
  margin-top:2px;
}
.act__sub{
  display:block;
  font-family:var(--sans);
  font-size:12px; opacity:.95;
  margin-top:2px;
}
.act__note{ display:block; font-family:var(--sans); font-size:12px; opacity:.85; margin-top:2px; }

@media (max-width:1100px){ .days{gap:70px} .day__title{font-size:56px} }
@media (max-width:840px){
  .days{grid-template-columns:1fr; gap:60px}
  .lineup-inner{padding:100px 20px 120px}
  .display-center{font-size:44px}
}


/* ========== TRAVEL ========== */
.travel .travel-photos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin:42px 0 22px}
.underline{border:0;height:1px;background:#cfcabf;width:300px;margin:10px 0 26px}
.travel-columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}

/* ========== MAP BAND ========== */
.directions .map{height:360px;background-size:cover;background-position:center;border-top:24px solid var(--olive);border-bottom:24px solid var(--olive)}

/* ========== STAY & RATES ========== */
.stay{padding:30px 0 61px 0}  /* increased by 20% */
.stay-grid{
  display:grid;
  /* Keep a stable minimum for the image and allow the copy column to be wider
     so text wraps less on wide screens. Preserve the roomy desktop gap. */
  grid-template-columns: minmax(420px, 1fr) minmax(560px, 1.2fr);
  gap: 288px; /* keep the large white space on desktop; media queries will tighten */
}  /* increased by 50% (192 * 1.5) */
.stay-img{border:8px solid #e8e3d8}
.stay-left-img{margin-top:16px;max-width:520px}
.stay-right-img{max-width:520px;margin-bottom:14px}
.fine{color:#7a766e;font-size:1.3em;}  /* increased by 30% */

/* Stay left section - increase all text by 30% */
.stay-left p{font-size:1.3em;}
.stay-left .underline{margin:13px 0 16px;border-width:2px;}  /* increased margins and thickness by 30% */
.stay-left strong{font-size:1em;}
.stay__copy strong{font-size:1em;}

/* ========== RSVP BAND (match schedule look) ========== */
.rsvp-block{
  position:relative; color:#fff; min-height:520px;
  background-image:
    linear-gradient(0deg, rgba(63,77,55,.20), rgba(63,77,55,.20)),
    linear-gradient(0deg, rgba(0,0,0,.08),  rgba(0,0,0,.08)),
    url("/assets/img/6.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.rsvp-inner{ max-width:1000px; margin:0 auto; padding:90px 24px 110px; text-align:center; }
.rsvp-inner .display-center{ font-size:48px; margin-bottom:10px; }


/* ========== FAQ & GREEN STRIP ========== */
.faq-footer .faq-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin:14px 0 32px}
.green-strip{background:var(--olive);color:#111;margin-top:24px}
.strip-inner{max-width:1300px;margin:0 auto;padding:18px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ========== MODAL ========== */
.modal-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:16px}
.modal-backdrop.show{display:flex}
.modal{width:min(792px,100%);background:var(--paper);border-radius:16px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.modal header h3{font-family:var(--display);margin:0 0 6px}
.modal-header{
  margin-bottom: 32px;
  margin-top: 20px;
  padding-bottom: 20px;
  position: relative;
  border-bottom: 2px solid #8E9575; /* Olive line below the title */
  border-top: none; /* Ensure no line on top */
}
.modal-header h3{
  font-family: "Beach Bound Script Thin", "Beach Bound", cursive;
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #2c2a28;
  margin: 0;
  border-top: none; /* Ensure no line above the title */
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-2 label{
  font-family: "PlusJakartaSans-Light", "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #1a1917;
  margin-bottom: 8px;
  display: block;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* Half size for events selection title */
.grid-2 .events-selection label,
.grid-2 .events-selection > label {
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* Half size for email label specifically */
.grid-2 label[for="email"],
.grid-2 input[name="email"] + label,
.grid-2 .email-label,
.grid-2 label:has(+ input[name="email"]) {
  font-size: 7px;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

/* Alternative selector for email label */
.grid-2 div:has(input[name="email"]) label {
  font-size: 7px;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
}

/* Target the specific events question title */
.grid-2 .events-selection h3,
.grid-2 .events-selection .question-title {
  font-size: 12px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
}
.grid-2 input,.grid-2 select,.grid-2 textarea{
  width:100%;
  padding:12px 16px;
  border:1.5px solid #d4d0c8;
  border-radius:8px;
  background:#fff;
  font-family: "PlusJakartaSans-Light", "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 300;
  color: #1a1917;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.grid-2 input:focus,.grid-2 select:focus,.grid-2 textarea:focus{
  outline: none;
  border-color: #D87563;
  box-shadow: 0 0 0 4px rgba(216, 117, 99, 0.12), 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
textarea{
  min-height:100px;
  resize:vertical;
  line-height: 1.5;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-weight: 500;
}

/* Removed compact styling - now using standard field sizes */

/* Make these fields take up less space in the grid */
.grid-2 .half-size {
  grid-column: span 1;
}

/* Special styling for compact fields */
.grid-2 .compact-field {
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 6px;
}

/* Better spacing for form sections */
.grid-2 > div {
  margin-bottom: 16px;
}

/* Spacing for radio groups */
.radio-group {
  margin-bottom: 20px;
}

/* Spacing for checkbox groups */
.radio-group.checkbox-style {
  margin-bottom: 20px;
}

/* Events selection takes half space */
.grid-2 .events-selection {
  grid-column: span 1;
  max-width: 50%;
  width: 50%;
  flex-shrink: 1;
}

/* Ensure the checkbox group inside is also constrained */
.grid-2 .events-selection .radio-group.checkbox-style {
  max-width: 100%;
  width: 100%;
}

/* Full-width events selection when in single column */
.grid-2 .events-selection.full-width {
  grid-column: span 2;
  max-width: 100%;
}

/* Better layout for events and party size */
.grid-2 .events-party-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* Constrain events selection to exactly half width */
.grid-2 .events-party-row .events-selection {
  width: 100%;
  max-width: 100%;
}

/* Party size field styling */
.grid-2 .party-size-field {
  display: flex;
  flex-direction: column;
}

.grid-2 .party-size-field input {
  width: 100%;
  max-width: 120px;
}

/* All secondary fields - make them look like top boxes */
.grid-2 input[name="email"],
.grid-2 input[name="phone"],
.grid-2 input[name="country"],
.grid-2 input[name="dietary_needs"] {
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1.5px solid #d4d0c8;
  width: 100%;
  max-width: none;
}

/* Override for fields in contact-fields grid to match top boxes */
.grid-2 .contact-fields input[name="email"],
.grid-2 .contact-fields input[name="phone"],
.grid-2 .contact-fields input[name="country"],
.grid-2 .contact-fields input[name="dietary_needs"] {
  width: 100%;
  max-width: none;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1.5px solid #d4d0c8;
}

/* 2x2 grid layout for secondary fields */
.grid-2 .secondary-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* 2x2 grid layout for contact fields in the red area - make them look like top boxes */
.grid-2 .contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
}

/* Contact fields positioned in the right area */
.grid-2 .contact-info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
}

/* Individual contact field styling */
.grid-2 .contact-info-section > div {
  display: flex;
  flex-direction: column;
}

/* Individual field containers for side-by-side layout */
.grid-2 .contact-fields > div {
  display: flex;
  flex-direction: column;
}

/* Ensure fields in side-by-side grid are properly sized */
.grid-2 .contact-fields input[name="email"],
.grid-2 .contact-fields input[name="phone"],
.grid-2 .contact-fields input[name="country"],
.grid-2 .contact-fields input[name="dietary_needs"] {
  width: 100%;
  max-width: none;
}

/* Better layout for contact information */
.grid-2 .contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Full-width dietary restrictions */
.grid-2 .dietary-field {
  grid-column: span 2;
}

/* Room preference and villa sharing in one row */
.grid-2 .room-preferences {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Responsive adjustments for better mobile layout */
@media (max-width: 768px) {
  .grid-2 .events-party-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .grid-2 .events-selection {
    max-width: 100%;
    grid-column: span 2;
  }
  
  .grid-2 .contact-info {
    grid-template-columns: 1fr;
  }
  
  .grid-2 .room-preferences {
    grid-template-columns: 1fr;
  }
  
  .grid-2 .secondary-fields {
    grid-template-columns: 1fr;
  }
  
  .grid-2 .contact-fields {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    grid-column: 1;
    grid-row: auto;
  }
  
  .grid-2 .contact-info-section {
    grid-column: 1;
    grid-row: auto;
  }
  
  /* On very small screens, stack all fields */
  @media (max-width: 480px) {
    .grid-2 .contact-fields {
      grid-template-columns: 1fr;
    }
  }
  
  /* Reset field widths on mobile for better usability */
  .grid-2 input[name="email"],
  .grid-2 input[name="phone"],
  .grid-2 input[name="country"],
  .grid-2 input[name="dietary_needs"] {
    width: 100%;
    max-width: none;
  }
}
.actions{display:flex;gap:16px;justify-content:flex-end;margin-top:32px}
.actions .btn{
  font-family: "ALTMariaClara-Regular", "Playfair Display", "Cormorant Garamond", serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.actions .btn:not(.btn-accent){
  background: #fff;
  border: 2px solid #e8e4e0;
  color: #2c2a28;
}
.actions .btn:not(.btn-accent):hover{
  background: #f8f7f5;
  border-color: #D87563;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.actions .btn-accent{
  background: #D87563;
  border: 2px solid #D87563;
  color: #fff;
}
.actions .btn-accent:hover{
  background: #C96450;
  border-color: #C96450;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(216, 117, 99, 0.4);
}
.req-dot{color:#D87563;margin-left:4px;font-size: 16px}
.radio-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: transparent;
  align-items: flex-start;
}
.radio-option{
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}
.radio-option:hover{
  background: transparent;
  border-color: transparent;
}
.radio-option input[type="radio"]{
  margin-right: 10px;
  width: 12px;
  height: 12px;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 2px;
  border: 1px solid #C7A882;
  background: #fff;
  transition: all 0.2s ease;
}
.radio-option input[type="radio"]:checked{
  background: #D87563 !important;
  box-shadow: inset 0 0 0 1px #fff;
}
.radio-option label{
  cursor: pointer;
  margin: 0;
  font-family: "PlusJakartaSans-Light", "Plus Jakarta Sans", sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #1a1917;
  line-height: 1.4;
  display: flex;
  align-items: center;
}
.radio-option input[type="radio"]:checked + label{
  font-weight: 600;
  color: #D87563 !important;
}

/* Removed conflicting alignment rules for cleaner styling */

/* ========== RESPONSIVE ========== */
@media (max-width:1200px){
  .header-inner{padding:0 16px}
}
@media (max-width:1024px){
  .hero-split{grid-template-columns:1fr 360px 1fr}
  .story-grid{grid-template-columns:1fr;gap:20px}
  .faq-footer .faq-cols,.strip-inner,.travel-columns{grid-template-columns:1fr 1fr}
}
@media (max-width:840px){
  .days{grid-template-columns:1fr;gap:40px}
  .lineup-inner{padding:80px 20px 90px}
  .display-center{font-size:42px}
}
@media (max-width:720px){
  .header-inner{grid-template-columns:1fr auto 1fr;gap:10px}
  .nav{gap:14px}
  .brand-title{font-size:18px}
  .brand-script{font-size:20px}
  .brand-logo{height:36px}
  .brand{margin-bottom: 25px;} /* ensure spacing on mobile */

  .days-row{grid-template-columns:1fr;gap:10px}

  .stay-grid,.travel-columns,.faq-footer .faq-cols,.strip-inner{grid-template-columns:1fr}
  .banner-h1,.display-left{font-size:36px}
}


/* Title */
.display-center{font-family:var(--display);font-size:56px;line-height:1.05;letter-spacing:.01em;margin:0 0 30px}

/* Three equal vertical columns */
.days{
  display:grid; grid-template-columns:repeat(3,minmax(300px,1fr));
  gap:72px; align-items:start;
}
.day{ text-align:center; }                         /* headings centered */
.day__tag{letter-spacing:.18em;font-size:12px;opacity:.95;margin-bottom:6px}
.day__title{font-family:var(--display);font-size:54px;line-height:1.03;margin:0 0 6px}
.day__subtitle{font-family:var(--hand);font-size:26px;margin-bottom:18px}

/* Keep details left-aligned within a narrow column for PDF feel */
.day__meta,.acts{max-width:320px;margin:0 auto;text-align:left}
.day__time{font-family:var(--sans);font-weight:700;letter-spacing:.06em;margin:12px 0 12px}
.day__meta{font-family:var(--sans);font-size:13px;line-height:1.6;opacity:.96}
.day__kicker{letter-spacing:.22em;font-size:12px;margin:18px 0 10px;text-align:left;max-width:320px;margin-left:auto;margin-right:auto}

/* Artist tiers */
.acts{list-style:none;padding:0;display:grid;gap:8px}
.acts li{display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:baseline}
.act{font-family:var(--display);font-size:20px;line-height:1.15}
.act--feature{font-size:26px}
.act--headline{font-size:30px;font-weight:700;letter-spacing:.01em}
.act--dj{font-family:var(--sans);font-weight:700;letter-spacing:.18em;font-size:12px}
.act__sub{font-family:var(--sans);font-size:12px;opacity:.95;width:100%}
.act__time{font-family:var(--sans);font-size:12px;opacity:.95}
.act__note{font-family:var(--sans);font-size:12px;opacity:.85}

@media (max-width:1100px){ .days{gap:48px} .day__title{font-size:48px} }
@media (max-width:840px){
  .days{grid-template-columns:1fr;gap:40px}
  .display-center{font-size:44px}
  .lineup-inner{padding:90px 20px 100px}
}
/* ---- Base styling ---- */
body {
  margin: 0;
  font-family: 'Libre Baskerville', serif;
  background-color: #f6f3ec;
  color: #2d2d2d;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---- Header ---- */
.header {
  background-color: #f6f3ec;
  text-align: center;
  border-bottom: none;
  padding: 0.5rem 0 0 0;
  position: relative;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-right: auto;
}

.nav-center {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.header-line {
  width: 100%;
  height: 1px;
  background: #e6e1d9;
  margin: 18px 0 0 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.logo-line {
  height: 1px;
  width: 60px;
  background-color: rgba(0, 0, 0, 0.5);
}

.logo-text h1 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 1px;
}

.logo-text .subtitle {
  font-family: 'Great Vibes', cursive;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 400;
}

.rsvp-btn {
  border: 1px solid #000;
  border-radius: 25px;
  padding: 6px 18px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.rsvp-btn:hover {
  background-color: #000;
  color: #fff;
}

/* ---- Intro Section ---- */
.intro-section {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 100vh; /* was 95vh */
  margin: 0;
  padding: 0;  .side {
    flex: 1;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    height: 100%;
  }
  min-height: 600px;
  position: relative;
}

.side {
  flex: 1;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  height: 100%;
}

.left-image {
  background-image: url('assets/img/9.jpg');
  /* Optional — slight background overlay for better text legibility */
  position: relative;
}

.left-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(139, 145, 115, 0.5);
}

.right-image {
  background-image: url('assets/img/4.jpg');
}

.center {
  flex: 0 0 420px;
  background-color: #8b9173;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  min-height: 600px;
  font-family: 'Bodoni Moda', serif;
  letter-spacing: 0.02em;
}

.center h1 {
  font-size: 2.7rem;
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
  letter-spacing: 0.01em;
}

.center h2 {
  font-size: 1.3rem;
  font-family: 'Bodoni Moda', serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0 0 1.5rem 0;
}

.center h3 {
  font-size: 1.1rem;
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin: 1.5rem 0 0 0;
}

.center p {
  font-size: 1.2rem;
  margin: 0 0 1.5rem 0;
  color: #fff;
  font-family: 'Bodoni Moda', serif;
  letter-spacing: 0.05em;
}

/* Optional — slight background overlay on sides for color balance */
.left-image::after,
.right-image::after {
  content: none;
}

/* ===== Directions (isolated) ===== */

/* If your travel columns use floats, this prevents the next section from being swallowed.
   Harmless if you don't use floats. */
#travel .travel-columns::after { content:""; display:block; clear:both; }

/* Banner */
.directions-banner{
  position: relative;
  width: 100%;
  min-height: 520px;       /* height like the PDF */
  margin: 0;               /* full-bleed */
  padding: 0;
  overflow: hidden;

  /* Use your existing image */
  background:
    linear-gradient(0deg, rgba(0,0,0,0.22), rgba(0,0,0,0.22)),
    url("assets/img/7.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Overlay layer that holds the button near the bottom */
.directions-banner__overlay{
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 40px;
}

/* Button sits on top of image, reuses your .btn / .btn-ghost look */
.directions-banner__btn{
  color: #fff;
  border: 1px solid rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(2px);
  padding: 10px 24px;
  border-radius: 999px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  transition: transform .2s ease, background .2s ease;
}
.directions-banner__btn:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,0.4);
}

@media (max-width: 720px){
  .directions-banner{ min-height: 380px; }
  .directions-banner__overlay{ padding-bottom: 24px; }
}
/* ===== Intro/Hero tune to match PDF ===== */

/* Make the middle (green) column ~10% wider than the sides */
.hero-split{
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;   /* was 1fr 1fr 1fr */
  min-height: 528px;                      /* ~10% taller than ~480px */
}

/* Bigger, cleaner olive panel with centered content */
.hero-center{
  background: var(--olive);
  display:grid; place-items:center;
  padding: 72px 24px;                     /* a touch more breathing room */
  color:#fff; text-align:center;
}

/* Kill any white card look */
.date-card{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Typography scale & spacing */
.date-top,
.date-bot{
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 14px;                        /* was smaller */
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: .95;
}

.slashes{
  margin: 12px 0;                         /* opens vertical rhythm */
  letter-spacing: .3em;
  opacity: .9;
}

.date-main{
  display:flex; align-items: baseline; justify-content:center;
  gap: 12px;
}

/* Big numbers like the PDF */
.date-main .big{
  font-family: var(--display, "Bodoni Moda", serif);
  font-size: 72px;                        /* larger headline */
  line-height: 1;
  letter-spacing: .01em;
}

/* The small month in caps */
.date-main .small{
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
  transform: translateY(3px);             /* align optically with big numbers */
  opacity: .95;
}

/* Make sure side images still behave */
.hero-pane{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Mobile: stack but keep the middle panel visually dominant */
@media (max-width: 900px){
  .hero-split{ 
    grid-template-columns: 1fr; 
    min-height: 60vh; 
  }
  .hero-center{ 
    order: 2; 
    padding: 40px 20px; 
    min-height: 50vh;
  }
  .hero-pane {
    order: 1;
    min-height: 25vh;
  }
  .hero-pane.right-image {
    order: 3;
  }
  .date-main .big{ font-size: 56px; }
  .date-main .small{ font-size: 13px; }
}

/* Very small screens */
@media (max-width: 520px){
  .hero-split{ min-height: calc(70vh * 0.9); } /* 10% smaller */
  .hero-center{ 
    min-height: calc(45vh * 0.9); /* 10% smaller */
    padding: 30px 16px;
  }
  .hero-pane {
    min-height: 20vh;
  }
  .date-top, .date-bot{ font-size: calc(12px * 1.2); } /* 20% bigger */
  .slashes{ margin: 8px 0; }
  .date-main .big{ font-size: 48px; }
  .date-main .small{ font-size: 11px; }
}
/* === Hero tweaks (5% narrower center, alignment, bigger location labels) === */

/* 1) Reduce green column ~5% (from 1.20fr -> 1.15fr) */
.hero-split{
  grid-template-columns: 1fr 1.15fr 1fr;
}

/* 2) Ensure the content is perfectly centered & evenly spaced */
.hero-center{
  display: grid;
  place-items: center;
  padding: 72px 24px;              /* keep the airy feel */
}
.date-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                       /* even vertical rhythm */
  text-align: center;              /* align all lines */
}

/* 3) Bigger top/bottom location labels */
.date-top,
.date-bot{
  font-family: var(--sans, "Inter", system-ui, sans-serif);
  font-size: 16px;                 /* was ~14px → larger per your request */
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: .98;
}

/* keep the slashes nicely spaced */
.slashes{
  margin: 12px 0;
  letter-spacing: .30em;
  opacity: .9;
}

/* (unchanged) main date styling stays centered */
.date-main{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
/* === HERO — match screenshot (stacked date, bigger MAY, serif location labels) === */

/* keep the ~5% slimmer center column you liked */
.hero-split{
  grid-template-columns: 1fr 1.10fr 1fr;
}

/* center everything, no card background */
.hero-center{
  display: grid;
  place-items: center;
  padding: 72px 24px;
}
.date-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;                 /* even vertical rhythm */
  text-align: center;
}

/* Top/bottom location labels -> serif and a bit larger */
.date-top,
.date-bot{
  font-family: var(--display, "Bodoni Moda", serif);
  font-size: 26px;           /* ↑ 30% bigger from 20px */
  line-height: 1.25;
  letter-spacing: .02em;     /* tighter, more elegant */
  text-transform: uppercase;
  color: rgba(255,255,255,.96);
}

/* Small separators */
.slashes{
  margin: 10px 0;
  letter-spacing: .3em;
  color: rgba(255,255,255,.9);
}

/* Stack the date: 19–21 / MAY / 2026 (all centered) */
.date-main{
  display: grid;
  justify-items: center;
  gap: 10px;
}

/* 19–21 and 2026 — large serif */
.date-main .big{
  font-family: var(--display, "Bodoni Moda", serif);
  font-size: 86px;           /* adjust here for exact look */
  line-height: 1.03;
  letter-spacing: .01em;
  color: #fff;
}

/* MAY — BIG, centered, on its own line */
.date-main .small{
  grid-row: auto;
  font-family: var(--display, "Bodoni Moda", serif);
  font-size: 62px;           /* bigger than before; tweak 58–66 */
  line-height: 1.05;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  transform: none;           /* remove previous baseline nudge */
}

/* Responsive tuning */
@media (max-width: 900px){
  .hero-center{ padding: 56px 20px; }
  .date-main .big{ font-size: 64px; }
  .date-main .small{ font-size: 44px; }
  .date-top, .date-bot{ font-size: 21px; }
}
@media (max-width: 520px){
  .date-main .big{ font-size: 52px; }
  .date-main .small{ font-size: 36px; }
  .date-top, .date-bot{ font-size: 18px; }
}
/* Use a more delicate display serif everywhere that references var(--display) */
:root{
  --display: "Cormorant Garamond", serif;
}

/* Hero — refined, delicate look */
.date-top,
.date-bot{
  font-family: var(--display);
  font-weight: 400;               /* light but not too faint */
  font-size: 26px;                /* 30% bigger from 20px */
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.25;
  color: rgba(255,255,255,.98);
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: lining-nums proportional-nums;
}

/* Stack: 19–21 / MAY / 2026 — lighter & elegant */
.date-main{
  display: grid; justify-items: center; gap: 10px;
}

/* 19–21 and 2026 */
.date-main .big{
  font-family: var(--display);
  font-weight: 300;               /* lighter stroke for delicacy */
  font-size: 86px;                /* keep your current size */
  line-height: 1.03;
  letter-spacing: .005em;         /* slightly tighter for this face */
  color: #fff;
  font-variant-numeric: lining-nums proportional-nums;
}

/* MAY — big & centered */
.date-main .small{
  font-family: var(--display);
  font-weight: 400;               /* tiny bit heavier than numbers */
  font-size: 62px;                /* keep current size */
  line-height: 1.05;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
}

/* Optional: make the brand up top a shade finer too */
.brand-line{
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .01em;
}
.brand-script{
  /* try Beach Bound Script Thin first; Alex Brush as backup, then Great Vibes */
  font-family: "Beach Bound Script Thin", "Alex Brush", "Allura", "Great Vibes", cursive !important;
  font-weight: 400;
  font-size: 29px;        /* increased by 10% from 26px */
  line-height: 1;
  letter-spacing: .02em;  /* slight spacing like the reference */
  display: block;
  margin-top: 6px;        /* tiny lift to tuck closer to the title */
  transform: translateY(1px); /* nudge baseline for nicer optical alignment */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px){
  .brand-script{ font-size: 31px; }
}
@media (min-width: 1024px){
  .brand-script{ font-size: 33px; }
}

/* === FESTIVAL section — match target look === */

/* cream band + wider inner width like the mock */
.festival-banner{
  background: #faf7f1;
  padding: 80px 0 56px;
}
.festival-banner .container.narrow{
  max-width: 1100px;  /* a little wider than before */
}

/* Big elegant title */
.festival-banner .banner-h1{
  font-family: var(--display, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.12;
  letter-spacing: .02em;
  text-align: center;
  margin: 0 0 44px;
}

/* 3 columns centered, with generous gaps */
.festival-banner .days-row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(28px, 7vw, 120px);
  align-items: start;
  justify-items: center;
  max-width: 980px;
  margin: 0 auto 36px;
}

/* Big day numbers */
.festival-banner .day-num > span{
  display: block;
  font-family: var(--display, "Cormorant Garamond", serif);
  font-weight: 300;
  font-size: clamp(60px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: .005em;
  margin-bottom: 10px;
  color: var(--ink);
  text-align: center;
}

/* Labels under each number (two lines) */
.festival-banner .day-num > small{
  display: block;
  font-family: var(--display, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  opacity: .95;
}

/* Paragraph note centered & a touch larger */
.festival-banner .tiny-note{
  font-family: var(--display, "Cormorant Garamond", serif);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.5;
  text-align: center;
  max-width: 720px;
  margin: 14px auto 0;
  color: var(--ink);
  opacity: .92;
}

/* Hide the two CTAs to match the screenshot */
.festival-banner .hero-cta{ display: none; }

/* Responsive */
@media (max-width: 900px){
  .festival-banner{ padding: 64px 0 44px; }
  .festival-banner .days-row{
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 520px;
  }
}
/* ===== OUR STORY — overlay title + script subtitle + refined typography ===== */
.ourstory{
  background: var(--olive);
  padding: clamp(60px, 9vw, 120px) 0;
}

/* two columns: image (fixed max) + text; title/subtitle positioned on the grid */
.story-grid{
  display:grid;
  /* Keep a large, fixed visual gutter on wide screens, but allow columns to expand.
     We'll reduce the gap via media queries as the viewport narrows. */
  grid-template-columns: minmax(420px, 1fr) minmax(560px, 1.2fr);
  gap: 288px; /* preserve the roomy whitespace on desktop */
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* photo clean — no border/frame */
.story-photo img{
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 0;
}

/* big “OUR STORY” overlapping the image */
.section-title{
  position: absolute;
  left: clamp(48px, 6vw, 80px);
  top: clamp(8px, 4.5vw, 36px);
  z-index: 3;
  margin: 0;

  font-family: var(--display, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(64px, 8.6vw, 118px);
  line-height: .9;
  letter-spacing: .01em;
  color: #23201f; /* deep ink like the mock */
}

/* give the right column top padding so copy starts below the script subtitle */
.story-copy{
  padding-top: clamp(90px, 15vw, 180px);
  color: #23201f;
}

/* script subtitle (first .hand in this section) on the top-right */
.ourstory .story-copy .hand:first-of-type{
  position: absolute;
  right: clamp(36px, 6vw, 80px);
  top: clamp(36px, 8vw, 110px);
  z-index: 2;

  font-family: var(--hand, "Great Vibes", cursive);
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.1;
  color: #fff;
  text-align: right;
  max-width: 52%;
}

/* lead paragraph: larger, elegant serif */
.story-copy .lead{
  font-family: var(--display, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
  margin: 0 0 14px;
}

/* body paragraphs */
.story-copy p{
  font-family: var(--display, "Cormorant Garamond", serif);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
  max-width: 64ch;
}

/* --- responsive stack --- */
@media (max-width: 900px){
  .story-grid{ grid-template-columns: 1fr; }
  .section-title{
    position: static; margin: 0 0 8px; text-align: left;
  }
  .ourstory .story-copy .hand:first-of-type{
    position: static; right: auto; top: auto;
    text-align: left; max-width: none; margin: 6px 0 16px; color: #fff;
  }
  .story-copy{ padding-top: 0; }
  .story-photo{ order: 2; } /* image below text on mobile (as in many editorial layouts) */
}
/* === Our Story: finer title position & script placement === */

/* expose the photo-column width + the grid gap so we can align to them */
.story-grid{
  --photo-col: clamp(320px, 42vw, 520px);      /* matches your left column width */
  --col-gap:  clamp(28px, 5vw, 64px);          /* matches the gap you set */
}

/* Title: a bit smaller; sit mostly in the text column with only “ST” on the photo */
.section-title{
  font-size: clamp(54px, 6.6vw, 90px);         /* ↓ from the previous size */
  line-height: .9;

  /* start the title at the text column, but pull it left by ~two letters
     so only “ST” overlaps the image */
  left: calc(var(--photo-col) + var(--col-gap) - 10ch);
  top:  clamp(8px, 3.5vw, 28px);
  z-index: 3;
}

/* Script line: more top-right of the section */
.ourstory .story-copy .hand:first-of-type{
  right: clamp(18px, 5vw, 60px);               /* further right */
  top:   clamp(6px, 3vw, 24px);                /* hgher up */
  max-width: 46%;
  text-align: right;
}
/* === OUR STORY — wider canvas, photo left, copy right, precise overlays === */

/* Wider working area + bigger gap between photo and text */
.ourstory .story-grid{
  /* expose reusable measurements for precise positioning */
  --photo-col: clamp(420px, 46vw, 640px);
  --col-gap:  clamp(40px, 6vw, 96px);

  max-width: min(92vw, 1440px);      /* give the section more width */
  padding-left: clamp(20px, 3.5vw, 48px);
  padding-right: clamp(20px, 4vw, 64px);

  grid-template-columns: minmax(380px, var(--photo-col)) 1fr;
  gap: var(--col-gap);
}

/* Nudge the photo closer to the band’s left edge */
.ourstory .story-photo{ margin-left: 0; }
.ourstory .story-photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* Title smaller, with only “ST” overlapping the photo edge */
.ourstory .section-title{
  font-size: clamp(48px, 5.9vw, 82px);   /* smaller than before */
  line-height: .9;
  /* sit in the text column, but pull left by ~2 letters so only “ST” overlaps */
  left: calc(var(--photo-col) + var(--col-gap) - 5ch);
  top:  clamp(6px, 3.2vw, 24px);
  z-index: 3;
}

/* Script line higher and more to the right */
.ourstory .story-copy .hand:first-of-type{
  position: absolute;
  right: clamp(28px, 7vw, 110px);        /* more right */
  top:   clamp(4px, 2.4vw, 18px);        /* higher */
  max-width: 44%;
  text-align: right;
}

/* Give the right column breathing room so text starts further right
   and reads like the mock */
.ourstory .story-copy{
  padding-top: clamp(86px, 14vw, 170px);
  padding-right: clamp(12px, 3vw, 32px);
  max-width: 820px;                      /* keeps the measure elegant */
}

/* Elegant serif sizes (unchanged if you liked them) */
.ourstory .story-copy .lead{
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}
.ourstory .story-copy p{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
}

/* Mobile stack remains tidy */
@media (max-width: 900px){
  .ourstory .story-grid{
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ourstory .section-title{
    position: static; margin: 0 0 6px; left: auto; top: auto;
  }
  .ourstory .story-copy .hand:first-of-type{
    position: static; right: auto; top: auto; max-width: none; text-align: left;
    margin: 6px 0 12px;
  }
  .ourstory .story-copy{ padding-top: 0; max-width: none; }
}
/* === OUR STORY — only "STORY" overlaps, "OUR" above the photo === */

/* keep these sizing helpers from earlier (safe to redefine) */
.ourstory .story-grid{
  --photo-col: clamp(420px, 46vw, 640px);
  --col-gap:  clamp(40px, 6vw, 96px);
}

/* Title: two lines (OUR / STORY), smaller, higher, with only STORY overlapping */
.ourstory .section-title{
  font-size: clamp(48px, 5.8vw, 78px);
  line-height: .92;
  /* force a wrap after "OUR" without touching HTML */
  max-width: 9ch;                     /* ~width of "OUR" → next word breaks */
  /* anchor to start of text column, then pull left ~2ch so STORY crosses onto the photo */
  left: calc(var(--photo-col) + var(--col-gap) - 5ch);
  /* lift the block so "OUR" sits above the image top */
  top: clamp(-200px, -2.8vw, -12px);
  z-index: 3;
}

/* Script line even more top-right */
.ourstory .story-copy .hand:first-of-type{
  right: clamp(32px, 8vw, 120px);
  top: clamp(-4px, 1.4vw, 14px);      /* higher than before */
  max-width: 42%;
  text-align: right;
}

/* Give body copy a touch more room on the right */
.ourstory .story-copy{
  padding-top: clamp(86px, 14vw, 170px);
  padding-right: clamp(16px, 4vw, 40px);
  max-width: 820px;
}
/* === OUR STORY — use more of the page + controllable title offset === */

/* Wider canvas + larger column gap */
.ourstory .story-grid{
  position: relative;

  /* knobs */
  --photo-col: clamp(520px, 48vw, 860px); /* wider photo column */
  --col-gap:  clamp(48px, 7vw, 120px);    /* bigger gap between photo/text */
  --title-top: -140px;                    /* <<< raise/lower the title here */

  max-width: min(96vw, 1600px);           /* use more of the viewport */
  padding-left: clamp(12px, 2vw, 32px);
  padding-right: clamp(12px, 2vw, 32px);

  display: grid;
  grid-template-columns: minmax(420px, var(--photo-col)) 1fr;
  gap: var(--col-gap);
  align-items: start;
}

/* Photo hugs the left nicely */
.ourstory .story-photo{ margin-left: 0; }
.ourstory .story-photo img{ width: 100%; height: auto; display:block; }

/* Title: OUR on its own line above the photo; only STORY overlaps the image */
.ourstory .section-title{
  font-size: clamp(46px, 5.6vw, 76px);
  line-height: .92;
  max-width: 9ch; /* forces "OUR" to break before "STORY" */

  /* Start at text column and pull left ~2ch → only "STORY" touches the image */
  left: calc(var(--photo-col) + var(--col-gap) - 2ch);

  /* direct variable instead of clamp so your negative values take effect */
  top: var(--title-top);
  z-index: 3;
}

/* Script line higher and farther right */
.ourstory .story-copy .hand:first-of-type{
  position: absolute;
  right: clamp(32px, 8vw, 140px);
  top: clamp(-10px, 1vw, 12px);
  max-width: 42%;
  text-align: right;
}

/* Give the copy more room and push it to the right */
.ourstory .story-copy{
  padding-top: clamp(120px, 16vw, 220px);
  padding-right: clamp(16px, 4vw, 48px);
  max-width: 1000px; /* wider measure so it uses the page */
}

/* Lead/body sizes (kept elegant) */
.ourstory .story-copy .lead{
  font-size: clamp(18px, 1.9vw, 26px);
  line-height: 1.55;
}
.ourstory .story-copy p{
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
}

/* Mobile: stack neatly */
@media (max-width: 900px){
  .ourstory .story-grid{
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ourstory .section-title{
    position: static; left: auto; top: auto; margin: 0 0 6px;
  }
  .ourstory .story-copy .hand:first-of-type{
    position: static; right: auto; top: auto; max-width: none; text-align: left;
    margin: 6px 0 12px;
  }
  .ourstory .story-copy{ padding-top: 0; max-width: none; }
}
/* === OUR STORY — fix photo size, widen text column, preserve overlays === */

/* choose the exact photo width you want on desktop */
.ourstory .story-grid{
  --photo-fixed: 640px;               /* ← set the size you want (e.g., 620, 680) */
  --col-gap: clamp(48px, 7vw, 120px);
  --title-top: -75px;                /* raise/lower the title block here */

  max-width: min(96vw, 1600px);       /* use more of the page */
  padding-inline: clamp(12px, 2vw, 32px);

  display: grid;
  grid-template-columns: var(--photo-fixed) 1fr; /* photo stays fixed; text gets the rest */
  gap: var(--col-gap);
  align-items: start;
}

/* keep the image at the fixed width */
.ourstory .story-photo{
  width: var(--photo-fixed);
  flex: 0 0 var(--photo-fixed);
}
.ourstory .story-photo img{
  width: var(--photo-fixed);
  max-width: none;                    /* don’t let outer rules shrink it */
  height: auto;
  display: block;
}

/* title: OUR above photo; only STORY overlaps image slightly */
.ourstory .section-title{
  font-size: clamp(46px, 5.8vw, 76px);
  line-height: .92;
  max-width: 9ch;                     /* forces break after OUR */
  left: calc(var(--photo-fixed) + var(--col-gap) - 4.8ch); /* only “STORY” crosses onto photo */
  top: var(--title-top);              /* now your -200px will take effect */
  z-index: 3;
}

/* script up & right */
.ourstory .story-copy .hand:first-of-type{
  position: absolute;
  right: clamp(32px, 8vw, 140px);
  top: clamp(-10px, 1vw, 12px);
  max-width: 42%;
  text-align: right;
}

/* give copy more room on the right */
.ourstory .story-copy{
  padding-top: clamp(120px, 16vw, 220px);
  padding-right: clamp(16px, 4vw, 48px);
  max-width: 1000px;
}

/* responsive: gently reduce photo width before stacking */
@media (max-width: 1200px){
  .ourstory .story-grid{ --photo-fixed: 520px; }
}
@media (max-width: 1000px){
  .ourstory .story-grid{ --photo-fixed: 460px; }
}
@media (max-width: 900px){
  .ourstory .story-grid{
    grid-template-columns: 1fr;
    gap: 20px;
    --photo-fixed: auto;              /* normal responsive image when stacked */
  }
  .ourstory .section-title{
    position: static; left: auto; top: auto;
    margin: 0 0 6px;
  }
  .ourstory .story-copy .hand:first-of-type{
    position: static; right: auto; top: auto; max-width: none; text-align: left;
    margin: 6px 0 12px;
  }
  .ourstory .story-copy{ padding-top: 0; max-width: none; }
}

/* === OUR STORY — easy controls for the script line position === */
.ourstory .story-grid{
  /* knobs you can tweak */
  --script-top: -26px;   /* more negative = higher; positive = lower */
  --script-right: 3.5vw; /* smaller = closer to the right edge; larger = more inward */
}

/* apply the knobs */
.ourstory .story-copy .hand:first-of-type{
  position: absolute;
  top: var(--script-top);
  right: var(--script-right);
  max-width: 40%;
  text-align: right;
  z-index: 2;
}
/* ===== RSVP banner (isolated) ===== */
.rsvp-hero{
  --rsvp-img: url("assets/img/rsvp.jpg");  /* <- change to your deck image path */
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0; padding: 0;
  background: transparent;                 /* kill inherited olive */
}

/* background image + subtle dark overlay */
.rsvp-hero__bg{
  position: absolute; inset: 0;
  background: var(--rsvp-img) center/cover no-repeat;
  transform: translateZ(0);
}
.rsvp-hero::before{
  content:"";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.32);             /* readable text over photo */
}

/* centered content */
.rsvp-hero__inner{
  position: relative; z-index: 1;
  width: min(1100px, 92vw);
  padding: 72px 20px;
  text-align: center; color: #fff;
}

/* title + copy */
.rsvp-title{
  font-family: "ALTMariaClara-Regular", var(--display, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.1;
  margin: 0 0 10px;
}
.rsvp-sub{
  font-family: "ALTMariaClara-Regular", var(--display, "Cormorant Garamond", serif);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.45;
  max-width: 760px;
  margin: 0 auto 18px;
  opacity: .95;
}

/* CTA pill */
.rsvp-cta{
  display: inline-block;
  border: 1px solid rgba(255,255,255,.9);
  color: #fff; background: transparent;
  border-radius: 999px;
  padding: 10px 22px;
  letter-spacing: .18em; text-transform: uppercase;
  font-size: 12px;
  transition: transform .2s ease, background .2s ease;
  backdrop-filter: blur(1px);
}
.rsvp-cta:hover{ transform: translateY(-2px); background: rgba(0,0,0,.15); }

/* make sure nothing inside #rsvp paints an olive box */
#rsvp .container, #rsvp .panel, #rsvp .card{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* responsive */
@media (max-width: 720px){
  .rsvp-hero{ min-height: 420px; }
  .rsvp-hero__inner{ padding: 56px 16px; }
}
html.no-scroll, body.no-scroll { overflow: hidden; }
/* modal visibility + no-scroll helper */
.modal-backdrop[aria-hidden="true"] { display: none; }
.modal-backdrop { display: flex; }

html.no-scroll { overflow: hidden; }
/* ----- anchor scrolling offset for sticky header ----- */
:root { --header-offset: 0px; }   /* JS will calculate the exact height */

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset);
}

/* when scrolled to an element via JS or hash, also respect the offset */
section[id], .anchor-target {
  scroll-margin-top: var(--header-offset);
}

/* ===== Compact intro hero (force ~50% viewport height) ===== */
:root{
  --intro-height: 65vh;   /* change to 45vh / 55vh if you want */
  --intro-scale: 0.88;    /* scales the date block so it fits the shorter height */
}

.hero-split{
  min-height: var(--intro-height) !important;
  height: var(--intro-height) !important;      /* cap total height */
  display: grid;                                /* keep your 3-col grid */
}

/* make each column respect the new height */
.hero-split > *{
  min-height: inherit !important;
}

/* center content vertically with tighter padding */
.hero-center{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 28px !important;              /* reduce vertical padding */
}

/* shrink the date stack uniformly (keeps look, reduces footprint) */
.hero-center .date-card{
  transform: scale(var(--intro-scale));
  transform-origin: center;
}

/* if your side panes need it */
.hero-pane{ min-height: inherit !important; }

/* mobile: keep a bit taller for legibility */
@media (max-width: 900px){
  :root{
    --intro-height: 58vh;
    --intro-scale: 0.92;
  }
}
/* === HERO SPLIT: don't clip on zoom; keep 50% as a MIN, not a hard cap === */
:root{
  --intro-height: 70vh; /* your target height, now a minimum */
}

/* Let the grid stretch; do NOT force a fixed height */
.hero-split{
  min-height: var(--intro-height) !important;
  height: auto !important;              /* <-- was a hard cap before */
  align-items: stretch !important;
  overflow: visible !important;
}

/* Make columns respect the min-height but allow them to grow */
.hero-split > *{
  min-height: var(--intro-height) !important;
  height: auto !important;
  overflow: visible !important;
}

/* Keep the center stack vertically centered, but allow overflow to be visible */
.hero-center{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-block: 24px !important;
  overflow: visible !important;
}

/* If you added a scale on the date block earlier, keep it gentle */
.hero-center .date-card{
  transform-origin: center;
  /* Optional: remove scale completely if you'd like
     transform: none;
  */
}

/* On very short viewports, give the hero a bit more room so nothing clips */
@media (max-height: 700px){
  :root{ --intro-height: vh; }
}
/* ================================
   MOBILE UPGRADE – HERO SPLIT
   (phones and very small screens)
   ================================ */
@media (max-width: 560px){

  /* 1) Stack the hero into a single column:
        TOP photo  •  CENTER green date block  •  BOTTOM photo */
  .hero-split{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    gap: 0 !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 50vh !important;    /* much larger margin to ensure section is completely below header */
  }

  /* If your side panes use any of these class names, they'll behave the same */
  .hero-split .hero-pane,
  .hero-split .hero-left,
  .hero-split .hero-right{
    height: 34vh;                    /* nice, not too tall */
    min-height: 240px;               /* keep some presence on tiny screens */
    order: 1;                        /* default: put one pane first ... */
  }
  
  /* Left panel image - no additional margin needed since entire section is pushed down */
  .hero-split .hero-left{
    margin-top: 0;                    /* no additional margin since entire section is pushed down */
  }
  .hero-split .hero-right{ 
    order: 3; 
    height: 70vh;                    /* significantly increased to show much more of the right image */
    min-height: 600px;               /* increased to show more image content */
  } /* ...and the other one last */

  /* Make the photos fill the space nicely */
  .hero-split .hero-pane img,
  .hero-split .hero-left img,
  .hero-split .hero-right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 2) Center the green date block and let it breathe */
  .hero-split .hero-center{
    order: 2;
    min-height: 29vh;                /* reduced from 52vh for mobile */
    padding: 20px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* If you wrapped the date in a "date-card" (or similar), scale it a touch */
  .hero-split .hero-center .date-card{
    transform: scale(.92);
    transform-origin: center;
  }

  /* 3) The big headline after the hero – make it fit and center on mobile */
  .intro-title,
  .festival-title,
  .display-left{
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.15;
    max-width: 28ch;
    margin: 24px auto 12px;
    text-align: center;
    padding: 0 16px;
  }

  /* If you have the 19/20/21 “mini schedule” row, stack it */
  .weekend-grid,
  .weekend-nums,
  .grid-3{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center;
    max-width: 520px;
    margin-inline: auto;
  }

  /* Trim extra vertical spacing around the intro block */
  .intro-blurb,
  .kicker,
  .lead-copy{
    padding-inline: 16px;
    max-width: 620px;
    margin-inline: auto;
  }
}

/* Optional: very small devices – keep the date readable */
@media (max-width: 360px){
  .hero-split .hero-center{ min-height: 31vh; }
  .hero-split .hero-center .date-card{ transform: scale(.88); }
}
/* ===============================
   MOBILE OPTIMIZATION (≤ 560px wide)
   =============================== */
@media (max-width: 560px){
  /* Header optimization */
  .site-header{ 
    padding-block: 8px; 
  }
  
  .site-header .brand, .site-header .site-title{
    font-size: 18px; 
    line-height: 1.05;
  }
  
  .site-header nav,
  .header-nav, .primary-nav, .main-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    justify-content: center;
  }
  
  .site-header nav a,
  .header-nav a, .primary-nav a, .main-nav a{
    font-size: 12px;
    padding: 6px 6px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  
  .rsvp-btn, .rsvp-pill{
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Festival banner mobile optimization */
  .intro-title, .festival-title, .display-left{
    text-align: center;
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1.15;
    margin: 22px auto 10px;
    max-width: 28ch;
    padding: 0 16px;
  }
}

/* Very small phones */
@media (max-width: 360px){
  .hero-split{ min-height: 62vh; }
  .hero-split .hero-center .date-card{ transform: scale(.90); }
}
/* =========================================
   MOBILE FIXES (≤ 560px)
   - Header fits all buttons
   - Hero split: center green column, slim sides
   ========================================= */
@media (max-width: 560px){

  /* ============ HEADER ============ */
  .site-header{
    padding-block: 8px;
  }

  /* Put brand on its own line, nav below; smaller brand */
  .header-inner, .site-header .header-inner{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    align-items: center;
    justify-items: center;
  }

  .site-header .brand,
  .site-header .site-title{
    font-size: 20px;            /* ↓ shrink logo */
    line-height: 1.05;
    margin: 0;
  }

  /* Nav shows ALL items: wrap into 2 lines if needed */
  .header-nav, .primary-nav, .main-nav, .site-header nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    width: 100%;
  }
  .header-nav a, .primary-nav a, .main-nav a, .site-header nav a{
    font-size: 12px;
    padding: 6px 6px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  /* RSVP pill smaller but still obvious */
  .rsvp-btn, .rsvp-pill{
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Remove any center-line adornment if it steals space */
  .header-rule, .header-line { display:none; }


  /* ============ HERO SPLIT ============ */
  /* Stop the wide "full-bleed" hack on phones; keep 3 columns */
  .hero-split{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns: 20% 60% 20% !important; /* sides slimmer, green wider */
    align-items: stretch;
    min-height: 58vh;
    height: auto;
    overflow: hidden;
  }

  /* If your left/right use these class names; otherwise this still covers most setups */
  .hero-split .hero-left,
  .hero-split .hero-right,
  .hero-split .hero-pane{
    min-height: 58vh;
  }

  /* Photos fill the slender side columns cleanly */
  .hero-split .hero-left img,
  .hero-split .hero-right img,
  .hero-split .hero-pane img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Middle green column truly centered */
  .hero-split .hero-center{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 10px !important;
    min-height: 58vh;
    overflow: visible;
  }

  /* If your date block has a wrapper like .date-card, keep it tidy */
  .hero-split .hero-center .date-card{
    transform-origin: center;
    transform: scale(.94);
  }
}

/* Very small phones: give hero a touch more height so date never clips */
@media (max-width: 360px){
  .hero-split{ min-height: 62vh; }
  .hero-split .hero-center .date-card{ transform: scale(.90); }
}
/* =========================================================
   MOBILE REFINEMENTS (≤ 480–560px)
   - Header fits all buttons
   - Hero split: center green column, slim side photos
   - Prevent right-edge clipping / stray white gutter
   ========================================================= */
@media (max-width: 560px){

  /* ---------- HEADER ---------- */
  .site-header{
    padding-block: 6px;
  }

  /* Put brand on first row, nav below; shrink brand a bit */
  .header-inner{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    align-items: center;
    justify-items: center;
  }

  .site-header .brand,
  .site-header .site-title{
    font-size: 18px;            /* smaller logo text */
    line-height: 1.05;
    margin: 0;
  }

  .site-header nav{
    display: flex;
    flex-wrap: wrap;            /* allow a second line if needed */
    gap: 6px 10px;
    justify-content: center;
    width: 100%;
  }
  .site-header nav a{
    font-size: 12px;
    padding: 6px 6px;
    letter-spacing: .08em;
    white-space: nowrap;
  }
  .rsvp-btn, .rsvp-pill{
    padding: 6px 10px;
    font-size: 12px;
  }
  /* Hide decorative header line on tiny screens */
  .header-rule, .header-line { display:none; }


  /* ---------- HERO SPLIT ---------- */
  /* Kill any desktop “full-bleed” hacks on phones */
  .hero-split{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns: 20% 60% 20% !important; /* green wider, sides slimmer */
    gap: 0 !important;
    align-items: stretch;
    min-height: 58vh;
    height: auto;
    overflow: hidden;            /* no horizontal scroll */
  }

  /* Side columns (photos) */
  .hero-split .hero-left,
  .hero-split .hero-right,
  .hero-split .left,
  .hero-split .right,
  .hero-split .hero-pane{
    min-height: 58vh;
  }
  .hero-split .hero-left img,
  .hero-split .hero-right img,
  .hero-split .left img,
  .hero-split .right img,
  .hero-split .hero-pane img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Middle green column perfectly centered */
  .hero-split .hero-center,
  .hero-split .center{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px 10px !important;
    min-height: 58vh;
    overflow: visible;
  }

  /* If your date stack has a wrapper (e.g., .date-card), keep it tidy */
  .hero-split .hero-center .date-card,
  .hero-split .center .date-card{
    transform-origin: center;
    transform: scale(.94);       /* little scale to fit shorter height nicely */
  }

  /* ---------- PREVENT RIGHT-EDGE CUT-OFFS GLOBALLY ---------- */
  html, body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;          /* remove stray horizontal scroll/gutter */
  }
  .container, .container-fluid, .page, .wrapper{
    max-width: 100% !important;
  }
}

/* Very small phones: nudge hero a bit taller so nothing clips */
@media (max-width: 360px){
  .hero-split{ min-height: 62vh; }
  .hero-split .hero-center .date-card,
  .hero-split .center .date-card{ transform: scale(.90); }
}
/* =========================================================
   MOBILE OVERRIDES (≤ 560px)
   - Center the green column in hero split (full-bleed)
   - Slim side photos
   - Reduce header height ~40% so all buttons are visible
   ========================================================= */
@media (max-width: 560px){

  /* ---------- HEADER (≈ 40% smaller) ---------- */
  .site-header{
    padding-block: 4px;              /* was ~8–12px */
  }

  /* Brand on its own row, nav below; compact spacing */
  .header-inner{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 4px;
    align-items: center;
    justify-items: center;
  }

  /* Smaller logo/brand */
  .site-header .brand,
  .site-header .site-title{
    font-size: 16px;                 /* ↓ down ~40% */
    line-height: 1.05;
    margin: 0;
  }
  .site-header .brand-subline,
  .site-header .wedding-subtitle{
    font-size: 10px;
  }

  /* Compact, two-line capable nav */
  .site-header nav{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    justify-content: center;
    width: 100%;
  }
  .site-header nav a{
    font-size: 11px;
    padding: 4px 6px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .rsvp-btn, .rsvp-pill{
    font-size: 11px;
    padding: 4px 10px;
  }
  .header-rule, .header-line{ display:none; }  /* free more space */


  /* ---------- HERO SPLIT ---------- */
  /* Make the hero full-bleed and centered;
     the grid guarantees the middle column is exactly centered */
  .hero-split{
    /* full viewport width while staying in the normal flow */
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    transform: none !important;

    display: grid !important;
    /* slimmer sides, wider center (green) */
    grid-template-columns:
      minmax(12vw, 18%)    /* left photo  */
      minmax(56vw, 64%)    /* green center*/
      minmax(12vw, 18%)    /* right photo */
      !important;

    gap: 0 !important;
    align-items: stretch;
    min-height: 58vh;
    height: auto;
    box-sizing: border-box;
    overflow: hidden;                         /* no right-edge overflow */
  }

  .hero-split > *{
    min-height: inherit;
  }

  /* Middle (green) column perfectly centered and vertically aligned */
  .hero-split .hero-center,
  .hero-split .center{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 8px !important;
    overflow: visible;
  }

  /* Side photos fill their slender columns neatly */
  .hero-split .hero-left img,
  .hero-split .hero-right img,
  .hero-split .left img,
  .hero-split .right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* If you have a wrapper around the date (e.g. .date-card), keep it tidy */
  .hero-split .hero-center .date-card,
  .hero-split .center .date-card{
    transform-origin: center;
    transform: scale(.94);
  }

  /* Global safety: remove any accidental horizontal scrolling */
  html, body{ max-width: 100%; overflow-x: hidden; }
}

/* Very small phones: give a touch more height so date never clips */
@media (max-width: 360px){
  .hero-split{ min-height: 62vh; }
  .hero-split .hero-center .date-card,
  .hero-split .center .date-card{ transform: scale(.90); }
}
/* -------- Festival / Intro block -------- */
.festival-section { padding: clamp(36px, 6vw, 72px) 0; }
.festival-wrap {
  width: min(980px, 92vw);
  margin-inline: auto;
  text-align: center;
}

.hotel-kicker{
  font-family: var(--display, "Cormorant Garamond", serif);
  letter-spacing: .02em;
  font-size: clamp(16px, 1.6vw, 24px);
  margin: 0 0 6px;
  opacity: .9;
}
.hotel-rule{
  width: min(220px, 40%);
  height: 1px;
  border: 0;
  background: currentColor;
  opacity: .25;
  margin: 0 auto clamp(16px, 2vw, 24px);
}

.festival-title{
  font-family: "ALTMariaClara-Regular", var(--display, "Cormorant Garamond", serif);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.08;
  font-size: clamp(30px, 5.4vw, 64px);
  margin: 0 auto clamp(24px, 4vw, 42px);
  max-width: 28ch;
}

.festival-days{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4px, 1vw, 12px);
  align-items: start;
  justify-items: center;
  margin: 0 auto clamp(20px, 4vw, 36px);
  width: min(1000px, 96%);
}
.festival-days .num{
  font-family: "ALTMariaClara-Regular", var(--display, "Cormorant Garamond", serif);
  font-weight: normal;
  font-size: clamp(36px, 6vw, 76px);
  line-height: 1;
  margin-bottom: 8px;
}
.festival-days .desc{
  font-family: "ALTMariaClara-Regular", var(--display, "Cormorant Garamond", serif);
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.35;
  margin: 0;
}

.festival-note{
  font-family: var(--display, "Cormorant Garamond", serif);
  font-size: clamp(13px, 1.2vw, 18px);
  opacity: .9;
  margin: clamp(12px, 2.4vw, 20px) auto clamp(18px, 3.5vw, 28px);
  max-width: 62ch;
}

/* button matches your olive pill style */
.btn-olive{
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.btn-olive:hover{ background: rgba(0,0,0,.06); transform: translateY(-1px); }
.festival-cta{ margin-inline: auto; }

/* small screens tighten spacing a bit */
@media (max-width: 560px){
  .festival-wrap{ width: min(780px, 92vw); }
  .festival-days{ gap: 3px; }
}

/* ===== RSVP MODAL: stacking + polish ===== */
.no-scroll, .no-scroll body { overflow: hidden; }

/* Backdrop covers the whole page and sits above everything */
#rsvpModal.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 99999;               /* very high so nothing overlaps */
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s ease, visibility .4s ease;
}

/* Hidden state */
#rsvpModal[aria-hidden="true"]{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The modal panel itself */
#rsvpModal .modal{
  position: relative;
  z-index: 100000;
  width: min(960px, 96vw);
  max-height: min(90vh, 100%);
  overflow: auto;
  background: linear-gradient(135deg, #faf9f7 0%, #f5f3f0 100%);
  border-radius: 24px;
  box-shadow: 
    0 32px 80px rgba(0,0,0,.25),
    0 16px 40px rgba(0,0,0,.15),
    0 0 0 1px rgba(255,255,255,.8);
  transform: translateY(0);
  padding: 0;
  border: 1px solid rgba(142, 149, 117, 0.2);
  animation: modalSlideIn 0.4s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Removed the gradient line at the top of the modal */
#rsvpModal .modal form,
#rsvpModal .modal header{
  position: relative;
  z-index: 2;
}
#rsvpModal .modal form{
  padding: 0 36px 36px 36px;
}
#rsvpModal .modal header{
  padding: 24px 36px 0 36px;
}

/* Close button (top-right) */
#rsvpModal .modal-close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  background: #fff;
  color: #666;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  transition: all .3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
#rsvpModal .modal-close:hover{ 
  background: #f8f8f8; 
  transform: scale(1.1);
  border-color: #D87563;
  color: #D87563;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
#rsvpModal .modal-close:active{ 
  transform: scale(0.95); 
}

/* Make sure background content never sits above the modal */
.section-title, .hand, .festival-cta, .rsvp-hero, .hero-split,
#festival, #our-story, #faq, #stay, #travel { z-index: 1; position: relative; }

/* Reduce modal content size by 10% for desktop */
@media (min-width: 769px) {
  #rsvpModal .modal-header {
    margin-bottom: 28px;
    margin-top: 16px;
    padding-bottom: 18px;
  }
  
  #rsvpModal .modal-header h3 {
    font-size: 38px;
  }
  
  #rsvpModal .grid-2 {
    gap: 18px;
  }
  
  #rsvpModal .grid-2 .grid-2 {
    gap: 11px;
  }
  
  #rsvpModal .grid-2 label {
    font-size: 14px;
    margin-bottom: 7px;
  }
  
  #rsvpModal .grid-2 input,
  #rsvpModal .grid-2 select,
  #rsvpModal .grid-2 textarea {
    padding: 11px 14px;
    font-size: 15px;
  }
  
  #rsvpModal .radio-group {
    gap: 11px;
    margin-top: 7px;
  }
  
  #rsvpModal .radio-option {
    padding: 11px 14px;
  }
  
  #rsvpModal .radio-option label {
    font-size: 15px;
  }
  
  #rsvpModal .actions {
    margin-top: 28px;
    gap: 12px;
  }
  
  #rsvpModal .actions .btn {
    padding: 12px 28px;
    font-size: 14px;
  }
  
  #rsvpModal textarea {
    min-height: 108px;
  }
  
  /* Ensure coral focus styling for modal inputs */
  #rsvpModal .grid-2 input:focus,
  #rsvpModal .grid-2 select:focus,
  #rsvpModal .grid-2 textarea:focus {
    outline: none;
    border-color: #D87563;
    box-shadow: 0 0 0 4px rgba(216, 117, 99, 0.12), 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
  }
}

/* Modal scroll only when viewport is too small */
@media (max-height: 800px) {
  .modal {
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
}

@media (max-height: 700px) {
  .modal {
    max-height: 95vh !important;
  }
}

/* Modal responsive improvements */
@media (max-width: 1024px) {
  #rsvpModal .modal form {
    padding: 0 24px 30px 24px !important;
  }
  
  #rsvpModal .modal header {
    padding: 16px 24px 0 24px !important;
  }
}

/* Strong mobile override specifically for the #stay section to avoid hidden content */
@media (max-width: 1024px) {
  section#stay .stay-grid.container, section#stay .stay-grid, section#stay .stay__grid {
    display: flex !important;
    flex-direction: column !important; /* left column first */
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    overflow: visible !important;
  }

  section#stay .stay-grid > .stay-left,
  section#stay .stay-grid > .stay__right,
  section#stay .stay__grid > .stay-left,
  section#stay .stay__grid > .stay__right {
    order: unset !important; /* allow the container's column-reverse to control order */
    width: 100% !important;
    flex: 0 0 auto !important;
    position: relative !important;
    margin: 0 !important;
    left: auto !important;
    top: auto !important;
  }

  /* Ensure title and hero images are not absolutely positioned and flow in the document */
  section#stay .stay__title, section#stay .stay__hero, section#stay .stay-left-img {
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 12px !important;
  }

  /* Reset any float/overflow on ancestor containers */
  section#stay, section#stay .container { overflow: visible !important; }
}

@media (max-width: 768px) {
  .modal-backdrop {
    padding: 12px !important;
    align-items: center !important;
  }
  
  #rsvpModal .modal {
    width: 100% !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 14px !important;
  }
  
  #rsvpModal .modal form {
    padding: 0 18px 20px 18px !important;
  }
  
  #rsvpModal .modal header {
    padding: 10px 18px 0 18px !important;
  }
  
  .modal-header {
    margin-bottom: 18px !important;
    margin-top: 8px !important;
    padding-bottom: 12px !important;
  }
  
  .modal-header h3 {
    font-size: 26px !important;
  }
  
  /* Force grid-2 layout on mobile */
  #rsvpModal form > .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  /* Full-width items that should span both columns */
  #rsvpModal .grid-2 > div[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }
  
  /* Nested grid-2 inside full-width items */
  #rsvpModal .grid-2 .grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  
  #rsvpModal .grid-2 label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  
  #rsvpModal .grid-2 input,
  #rsvpModal .grid-2 select,
  #rsvpModal .grid-2 textarea {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  
  #rsvpModal .radio-group {
    gap: 6px !important;
    margin-top: 4px !important;
  }
  
  #rsvpModal .radio-option {
    padding: 8px 10px !important;
  }
  
  #rsvpModal .radio-option label {
    font-size: 12px !important;
    font-weight: 700 !important;
  }
  
  #rsvpModal .radio-option input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }
  
  #rsvpModal .actions {
    margin-top: 18px !important;
    gap: 8px !important;
  }
  
  #rsvpModal .actions .btn {
    padding: 10px 18px !important;
    font-size: 12px !important;
  }
  
  #rsvpModal .modal-close {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 18px !important;
  }
  
  #rsvpModal textarea {
    min-height: 70px !important;
  }
}

@media (max-width: 480px) {
  #rsvpModal .modal {
    max-width: 100% !important;
    padding: 10px !important;
  }
  
  #rsvpModal .modal form {
    padding: 0 12px 16px 12px !important;
  }
  
  #rsvpModal .modal header {
    padding: 8px 12px 0 12px !important;
  }
  
  #rsvpModal .modal-header h3 {
    font-size: 22px !important;
  }
  
  /* Keep 2-column grid even on very small screens */
  #rsvpModal .grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  
  #rsvpModal .grid-2 label {
    font-size: 10px !important;
  }
  
  #rsvpModal .grid-2 input,
  #rsvpModal .grid-2 select,
  #rsvpModal .grid-2 textarea {
    font-size: 12px !important;
    padding: 7px 9px !important;
  }
  
  #rsvpModal .radio-option {
    padding: 7px 9px !important;
  }
  
  #rsvpModal .radio-option label {
    font-size: 11px !important;
    font-weight: 700 !important;
  }
}

/* ---------- OUR STORY – polaroid layout ---------- */

.ourstory.revamp {
  background: var(--olive, #8b946f);
  position: relative;
  overflow: hidden;
}

.os-grid {
  /* 12-col grid with good breathing room */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  padding-block: clamp(70px, 7vw, 110px);
  position: relative;
  align-items: start;
}

/* Title left */
.ourstory.revamp .section-title {
  grid-column: 1 / 5;
  margin: 0;
  line-height: 0.92;
}

/* script on the top-right */
.os-hand {
  grid-column: 9 / -1;
  justify-self: end;
  margin-top: .2rem;
}

/* copy columns (leave tall top margin so polaroids can overlap them) */
.os-copy {
  font-size: clamp(16px, 1.05vw + 12px, 18px);
  line-height: 1.65;
  color: #1f261c;
}
.os-left  { grid-column: 1 / 5;  margin-top: clamp(160px, 14vw, 230px); }
.os-right { grid-column: 9 / -1; margin-top: clamp(160px, 14vw, 230px); }

/* center stack of polaroids */
.polaroids {
  grid-column: 5 / 9;            /* sits in the middle */
  position: relative;
  min-height: clamp(420px, 48vw, 560px);
  margin-top: clamp(-70px, -6vw, -100px);  /* pull up into the title area a bit */
  z-index: 5;                    /* sits above text */
  pointer-events: none;          /* cards are decorative; clicks pass through */
}

/* each card */
.polaroid {
  position: absolute;
  width: clamp(180px, 45%, 260px);
  aspect-ratio: 3/4;
  background: #fff;
  padding: 9px 9px 22px;         /* smaller bottom “polaroid” area */
  border-radius: 6px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    0 22px 40px rgba(0,0,0,.10);
}
.polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* positions/angles – closer together */
.polaroid.p1 { top:   0;   left:  -6%; transform: rotate(-4deg); }
.polaroid.p2 { top:  -8%;  right: -4%; transform: rotate( 5deg); }
.polaroid.p3 { bottom:-6%; left:  -10%; transform: rotate( 3deg); }
.polaroid.p4 { bottom:-10%; right: -6%; transform: rotate(-3deg); }

/* ---------- responsive tweaks ---------- */
@media (max-width: 1100px) {
  .os-left, .os-right { margin-top: clamp(200px, 28vw, 300px); }
}
@media (max-width: 880px) {
  .os-grid { gap: 18px; }
  .ourstory.revamp .section-title, .os-left, .os-right, .os-hand { grid-column: 1 / -1; }
  .ourstory.revamp .section-title { text-align: center; }
  .os-hand { justify-self: center; text-align: center; }
  
  /* Clean 2x2 grid for mobile - no polaroid effects */
  .polaroids { 
    grid-column: 1 / -1; 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 0 20px;
    margin: 30px auto;
    max-width: 500px;
    min-height: auto;
    position: relative;
  }
  
  .polaroid { 
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  
  .polaroid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }
  
  /* Reset all polaroid positions for grid */
  .polaroid.p1,
  .polaroid.p2,
  .polaroid.p3,
  .polaroid.p4 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
  }
  
  .os-left, .os-right { margin-top: 30px; }
}
/* ---------- OUR STORY – polaroid layout (rev 2) ---------- */

.ourstory.revamp {
  background: var(--olive, #8b946f);
  position: relative;
  overflow: hidden;
}

/* A single place to control stack height across breakpoints */
:root { --os-stack-h: clamp(300px, 34vw, 440px); }

.os-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: clamp(16px, 2vw, 24px);
  padding-block: clamp(70px, 7vw, 110px);
  position: relative;                 /* required for absolute stack */
  align-items: start;
}

/* Title left, script on the right */
.ourstory.revamp .section-title {
  grid-column: 1 / 5;
  margin: 0;
  line-height: .92;
}
.os-hand{
  grid-column: 9 / -1;
  justify-self: end;
  margin-top: .2rem;
}

/* Text columns start **below** the stack */
.os-copy{
  font-size: clamp(16px, 1.05vw + 12px, 18px);
  line-height: 1.65;
  color: #1f261c;
}
/* push copy down by stack height so photos sit above it */
.os-left  { grid-column: 1 / 5;  margin-top: calc(var(--os-stack-h) + clamp(18px, 2.5vw, 36px)); }
.os-right { grid-column: 9 / -1; margin-top: calc(var(--os-stack-h) + clamp(18px, 2.5vw, 36px)); }

/* ---------------- centered absolute polaroid stack ---------------- */

.polaroids{
  position: absolute;                 /* sits on top of the grid */
  top: clamp(110px, 9.5vw, 150px);    /* distance from top of section */
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, 62vw);            /* overall stack width */
  height: var(--os-stack-h);          /* controls how tall the stack is */
  z-index: 6;                         /* above text */
  pointer-events: none;               /* decorative */
}

/* each polaroid card */
.polaroid{
  position: absolute;
  width: clamp(180px, 33%, 280px);
  aspect-ratio: 3/4;
  background: #fff;
  padding: 8px 8px 18px;              /* slimmer white border & footer */
  border-radius: 6px;
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    0 22px 40px rgba(0,0,0,.10);
}
.polaroid img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* tighter, slightly overlapping placement */
.polaroid.p1{ top:  0%;  left:  3%; transform: rotate(-4deg); }
.polaroid.p2{ top: -6%; right:  4%; transform: rotate( 5deg); }
.polaroid.p3{ bottom:-6%; left: 10%; transform: rotate( 3deg); }
.polaroid.p4{ bottom:-10%; right: 6%; transform: rotate(-3deg); }

/* ---------------- responsive tweaks ---------------- */
@media (max-width: 980px){
  :root { --os-stack-h: clamp(280px, 58vw, 420px); }
  .polaroid{ width: clamp(160px, 38%, 240px); }
  .polaroid.p1{ left:  2%; transform: rotate(-3deg); }
  .polaroid.p2{ right: 2%; transform: rotate( 3deg); }
  .polaroid.p3{ left:  6%; transform: rotate( 2deg); }
  .polaroid.p4{ right: 4%; transform: rotate(-2deg); }
}

@media (max-width: 780px){
  /* stack everything but keep the stacked look */
  .ourstory.revamp .section-title,
  .os-hand,
  .os-left,
  .os-right { grid-column: 1 / -1; }

  .ourstory.revamp .section-title { text-align: center; }
  .os-hand { justify-self: center; text-align: center; }

  .polaroids{
    width: min(620px, 86vw);
    top: clamp(90px, 11vw, 130px);
  }
  :root { --os-stack-h: clamp(280px, 80vw, 420px); }
  .polaroid{ width: clamp(150px, 45%, 220px); }
}
/* =========================================
   OUR STORY — POLAROID REVAMP
   ========================================= */
:root{
  --olive: #808c6b;              /* already in your palette */
  --cream: #f5efe8;              /* light text on olive */
  --cream-80: rgba(245,239,232,.86);
  --shadow-1: 0 8px 24px rgba(0,0,0,.18);
  --shadow-2: 0 18px 50px rgba(0,0,0,.22);
}

.ourstory.v2{
  background: var(--olive);
  color: var(--cream);
}

.ourstory.v2 .story-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(56px,6vw,96px) 20px clamp(72px,8vw,120px);
  position: relative;
}

/* Title + hand script kept above photos */
.ourstory.v2 .story-head{
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(16px,2.5vw,24px);
}

.ourstory.v2 .story-title{
  font-family: "Bodoni Moda", serif;
  line-height: .92;
  letter-spacing: .5px;
  font-size: clamp(40px, 6vw, 96px);
  margin: 0;
  color: var(--cream);
}

.ourstory.v2 .story-hand{
  margin: clamp(4px,1vw,8px) 6px 0 auto;
  text-align: right;
  color: var(--cream);
  opacity: .95;
  font-size: clamp(18px, 1.6vw, 24px);
}

/* Collage container */
.ourstory.v2 .story-canvas{
  position: relative;
  height: clamp(420px, 44vw, 560px);
  margin-top: clamp(8px,1.5vw,16px);
}

/* Two stacks positioned close to center so they nearly overlap */
.ourstory.v2 .stack{
  position: absolute;
  top: 0;
}
.ourstory.v2 .stack-left{  left: 42%; transform: translateX(-50%) rotate(-1.5deg); }
.ourstory.v2 .stack-right{ right: 42%; transform: translateX(50%) rotate(1.5deg); }

/* Polaroid frame */
.ourstory.v2 .polaroid{
  position: absolute;
  width: clamp(180px, 22vw, 260px);
  background: #fff;
  border-radius: 8px;
  padding: 14px 14px 38px;           /* bigger bottom for polaroid white */
  box-shadow: var(--shadow-1);
}
.ourstory.v2 .polaroid img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: var(--shadow-2);
}

/* Individual placements + subtle angles (close together / slight overlap) */
.ourstory.v2 .p1{ top: 16px;   left: -8px;  transform: rotate(-7deg); }
.ourstory.v2 .p2{ top: 170px;  left: 52px;  transform: rotate(6deg);  }

.ourstory.v2 .p3{ top: 0;      right: -8px; transform: rotate(7deg);  }
.ourstory.v2 .p4{ top: 180px;  right: 56px; transform: rotate(-6deg); }

/* Copy below the collage — two columns */
.ourstory.v2 .story-text{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px,4vw,64px);
  margin-top: clamp(28px,4vw,56px);
}
.ourstory.v2 .story-lead{
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--cream);
}
.ourstory.v2 .story-body{
  font-family: "Libre Baskerville", serif;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.75;
  color: var(--cream-80);
}

/* --- Responsive tweaks --- */
@media (max-width: 980px){
  .ourstory.v2 .stack-left{  left: 50%; transform: translateX(-60%) rotate(-1deg); }
  .ourstory.v2 .stack-right{ right: 50%; transform: translateX(60%) rotate(1deg); }

  .ourstory.v2 .p1{ top: 8px;  left: -18px; }
  .ourstory.v2 .p2{ top: 160px; left: 36px;  }

  .ourstory.v2 .p3{ top: -6px; right: -18px; }
  .ourstory.v2 .p4{ top: 166px; right: 34px; }
}

@media (max-width: 780px){
  .ourstory.v2 .story-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .ourstory.v2 .story-hand{ text-align: left; margin-left: 0; }

  .ourstory.v2 .story-canvas{
    height: clamp(420px, 90vw, 560px);
  }
  .ourstory.v2 .stack-left,
  .ourstory.v2 .stack-right{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .ourstory.v2 .p1{ top: 0;   left: -76px; }
  .ourstory.v2 .p2{ top: 160px; left: -8px; }
  .ourstory.v2 .p3{ top: 20px; right: auto; left: 64px; }
  .ourstory.v2 .p4{ top: 200px; right: auto; left: 120px; }

  .ourstory.v2 .story-text{
    grid-template-columns: 1fr;
  }
}
/* --- Coral palette from mood board --- */
:root{
  /* tweak if you want it a bit warmer/cooler */
  --coral: #D96E5A;
  --coral-700: #C25745;
  --coral-contrast: #ffffff;
}

/* Filled buttons that should be coral */
.rsvp-btn,                /* header RSVP pill */
#cta-rsvp,                /* "Confirm your presence" under the festival block */
.festival-cta,            /* same, if used elsewhere */
.btn-accent               /* modal submit, general accent buttons */
{
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: var(--coral-contrast) !important;
}

.rsvp-btn:hover,
#cta-rsvp:hover,
.festival-cta:hover,
.btn-accent:hover{
  background: var(--coral-700) !important;
  border-color: var(--coral-700) !important;
}

/* Ghost-style RSVP CTA in the RSVP section */
#rsvp .btn-ghost.rsvp-cta{
  color: var(--coral) !important;
  border-color: var(--coral) !important;
  background: transparent !important;
}
#rsvp .btn-ghost.rsvp-cta:hover{
  background: var(--coral) !important;
  color: var(--coral-contrast) !important;
}

/* Focus ring for accessibility */
.rsvp-btn:focus-visible,
#cta-rsvp:focus-visible,
.festival-cta:focus-visible,
.btn-accent:focus-visible,
#rsvp .btn-ghost.rsvp-cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(217, 110, 90, 0.35);
}
/* Unified coral button */
.btn--coral{
  background: var(--coral);
  color: #fff;
  border: 1px solid var(--coral);
  border-radius: var(--btn-radius);
  padding: 12px 22px;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}

.btn--coral:hover{
  background: var(--coral-700);
}

.btn--coral:active{
  background: var(--coral-800);
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.12);
}
/* Ensure both are filled coral even if something adds ghost styles */
.rsvp-hero .rsvp-cta,
.festival-section .festival-cta{
  background: var(--coral) !important;
  color:#fff !important;
  border-color: var(--coral) !important;
}
.rsvp-hero .rsvp-cta:hover,
.festival-section .festival-cta:hover{
  background: var(--coral-700) !important;
}
/* ============== OUR STORY v2 ============== */
.story-v2{
  --olive: #8a9371; /* current site olive */
  background: var(--olive);
  padding: clamp(56px, 7vw, 96px) 0;
  color: #fff;
}
.story-shell{
  width: min(1200px, 92vw);
  margin: 0 auto;
  position: relative;
}

/* Title (top-left) */
.story-title{
  font-family: var(--display-font, "Bodoni Moda", serif);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 80px);
  line-height: .92;
  letter-spacing: .02em;
  color: #fff;
  margin: 0;
}

/* Handwritten (top-right) */
.story-hand{
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  right: clamp(12px, 4vw, 60px);
  font-family: "Beach Bound Script Thin", "Great Vibes", cursive;
  font-size: clamp(33px, 3.9vw, 49px);
  line-height: 1.25;
  color: #fff;
  opacity: .9;
  text-align: right;
  margin: 0;
}

/* Polaroid cluster – sits above the copy */
.polaroid-cluster{
  position: relative;
  width: 100%;
  margin-top: clamp(28px, 5vw, 36px);
  /* height creates the “room” the cluster occupies above the text */
  height: clamp(260px, 36vw, 420px);
}

.polaroid{
  --paper: #fbfbf7;   /* creamy paper */
  position: absolute;
  display: inline-block;
  background: var(--paper);
  border-radius: 6px;
  box-shadow:
    0 12px 24px rgba(0,0,0,.18),
    0 2px 6px rgba(0,0,0,.12);
  padding: clamp(8px, 1.25vw, 14px);
  /* extra white at the bottom for the polaroid look */
  padding-bottom: clamp(22px, 3vw, 32px);
  transform-origin: 50% 50%;
}

.polaroid img{
  display: block;
  width: clamp(180px, 28vw, 320px);
  height: clamp(180px, 28vw, 320px);
  object-fit: cover;
  border-radius: 4px;
}

/* Individual placement / tilt */
.polaroid.p1{
  left: 12%;
  top: 18%;
  transform: rotate(-7deg);
  z-index: 2;
}
.polaroid.p2{
  left: 40%;
  top: -6%;
  transform: rotate(5deg);
  z-index: 3; /* top-most */
}
.polaroid.p3{
  left: 56%;
  top: 24%;
  transform: rotate(-3deg);
  z-index: 2;
}

/* Copy block — two columns under the cluster */
.story-copy{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  margin-top: clamp(220px, 32vw, 380px); /* ensures copy starts below photos */
  align-items: start;
}

.story-copy .lede{
  font-family: var(--display-font, "Bodoni Moda", serif);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  letter-spacing: .01em;
  margin: 0;
  color: #fff;
}

.story-copy .body{
  font-family: "Libre Baskerville", "Cormorant Garamond", serif;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
  color: #fff;
  opacity: .95;
}
.story-copy .body p{ margin: 0 0 1em; }

/* --------- Responsive tweaks --------- */
@media (max-width: 960px){
  .polaroid img{
    width: clamp(160px, 36vw, 260px);
    height: clamp(160px, 36vw, 260px);
  }
  .polaroid.p1{ left: 4%;  top: 16%;  }
  .polaroid.p2{ left: 36%; top: -8%; }
  .polaroid.p3{ left: 60%; top: 22%; }
}

@media (max-width: 720px){
  .story-hand{ 
    position: static; 
    text-align: left; 
    margin-top: 14px;
    font-size: clamp(43px, 5.1vw, 64px) !important;
  }

  .polaroid-cluster{
    height: clamp(300px, 75vw, 420px);
  }
  .polaroid.p1{ left: 0%;  top: 24%; transform: rotate(-6deg); }
  .polaroid.p2{ left: 26%; top: 0%;  transform: rotate(5deg);  }
  .polaroid.p3{ left: 52%; top: 28%; transform: rotate(-3deg); }

  .story-copy{
    grid-template-columns: 1fr;
    margin-top: clamp(260px, 90vw, 520px); /* more vertical room for the photos */
    gap: 22px;
  }
}
/* ===== OUR STORY v3 (4 photos, shorter section) ===== */
.story-v3{
  --olive:#8a9371;
  --paper:#fbfbf7;
  background:var(--olive);
  padding: clamp(48px,6vw,72px) 0;
  color:#fff;
}
.story-v3 .story-shell{
  width:min(1200px,92vw);
  margin:0 auto;
  position:relative;
}

/* Title – black & overlapping a bit */
.story-v3 .story-title{
  position:relative;
  z-index:5;                 /* above the photos just a touch */
  color:#1a1a1a;             /* black */
  font-family: var(--display-font,"Bodoni Moda",serif);
  font-weight:400;
  font-size: clamp(40px,6vw,76px);
  line-height:.9;
  letter-spacing:.02em;
  margin:0 0 clamp(12px,2vw,16px);
  pointer-events:none;
}

/* Handwritten note */
.story-v3 .story-hand{
  position:absolute;
  top: clamp(14px,2vw,24px);
  right: clamp(8px,4vw,56px);
  margin:0;
  font-family:"Beach Bound Script Thin", "Great Vibes", cursive;
  font-size: clamp(33px,3.8vw,49px);
  line-height:1.2;
  color:#fff;
  opacity:.9;
  text-align:right;
}

/* Polaroid cluster (shorter + centered band) */
.story-v3 .polaroid-cluster{
  position:relative;
  width:100%;
  height: clamp(230px,30vw,340px);   /* compact height so the section isn’t tall */
  margin-top: clamp(6px,1vw,10px);
}

/* Card */
.story-v3 .polaroid{
  position:absolute;
  background:var(--paper);
  border-radius:6px;
  padding: clamp(8px,1vw,12px);
  padding-bottom: clamp(18px,2.2vw,26px); /* polaroid lip */
  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    0 2px 6px rgba(0,0,0,.12);
}
.story-v3 .polaroid img{
  display:block;
  width: clamp(160px,18vw,240px);
  height: clamp(160px,18vw,240px);
  object-fit:cover;
  border-radius:4px;
}

/* Placement – all visible on 1366×768 at 100% */
.story-v3 .polaroid.p1{ left:10%; top:18%; transform:rotate(-6deg); z-index:2; }
.story-v3 .polaroid.p2{ left:30%; top:-4%; transform:rotate(4deg);  z-index:3; }
.story-v3 .polaroid.p3{ left:50%; top:16%; transform:rotate(-3deg); z-index:2; }
.story-v3 .polaroid.p4{ left:70%; top:-2%; transform:rotate(5deg);  z-index:1; }

/* Copy block under the cluster */
.story-v3 .story-copy{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px,4vw,44px);
  margin-top: clamp(170px,28vw,300px);   /* starts just below the photos */
}
.story-v3 .story-copy .lede{
  font-family: var(--display-font,"Bodoni Moda",serif);
  font-size: clamp(20px,2.4vw,28px);
  line-height:1.45;
  margin:0;
  color:#fff;
}
.story-v3 .story-copy .body{
  font-family:"Libre Baskerville","Cormorant Garamond",serif;
  font-size: clamp(15px,1.25vw,18px);
  line-height:1.7;
  opacity:.95;
}
.story-v3 .story-copy .body p{ margin:0 0 1em; }

/* --- Responsive tweaks --- */
@media (max-width: 980px){
  .story-v3 .polaroid img{ width: clamp(150px,24vw,210px); height: clamp(150px,24vw,210px); }
  .story-v3 .polaroid.p1{ left:2%;  top:22%; }
  .story-v3 .polaroid.p2{ left:26%; top:-6%; }
  .story-v3 .polaroid.p3{ left:50%; top:20%; }
  .story-v3 .polaroid.p4{ left:70%; top:0%;  }
}

@media (max-width: 720px){
  .story-v3 .story-hand{ 
    position:absolute; 
    top:10px; 
    right:20px; 
    text-align:right; 
    margin:0;
    font-size: clamp(43px, 4.9vw, 64px) !important;
  }
  .story-v3 .polaroid-cluster{ height: clamp(280px,80vw,440px); }
  /* keep all cards on screen */
  .story-v3 .polaroid.p1{ left:0%;  top:26%; transform:rotate(-5deg); }
  .story-v3 .polaroid.p2{ left:22%; top:2%;  transform:rotate(4deg);  }
  .story-v3 .polaroid.p3{ left:46%; top:26%; transform:rotate(-3deg); }
  .story-v3 .polaroid.p4{ left:66%; top:0%;  transform:rotate(3deg);  }
  .story-v3 .story-copy{ grid-template-columns:1fr; margin-top: clamp(240px,92vw,520px); }
}
/* --- Our Story tweaks: tighter lip + less space to text --- */

/* 1) Polaroid frame: ~20% smaller white area (border + lip) */
.story-v3 .polaroid{
  /* was padding: clamp(8px,1vw,12px); */
  padding: clamp(6px,0.8vw,9px);

  /* was padding-bottom: clamp(18px,2.2vw,26px); */
  padding-bottom: clamp(14px,1.8vw,21px);
}

/* 2) Bring the copy closer to the photos */
.story-v3 .story-copy{
  /* was margin-top: clamp(170px,28vw,300px); */
  margin-top: clamp(120px,5vw,210px);
}

/* Optional: slightly lower the cluster’s overall height so the section is tighter */
.story-v3 .polaroid-cluster{
  /* was height: clamp(230px,30vw,340px); */
  height: clamp(210px,30vw,310px);
}


/* --- Our Story: remove polaroid UI, keep tilt/overlap --- */
.story-v3 .polaroid{
  /* kill the faux polaroid look */
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* if we had decorative pseudo-elements, hide them */
.story-v3 .polaroid::before,
.story-v3 .polaroid::after{ display:none; }

.story-v3 .polaroid img{
  display:block;
  width:100%;
  height:auto;
  border:0;          /* make sure no extra white border is added */
  box-shadow:none;   /* remove img shadows too */
}

/* keep the tilt on the wrapper (classes you already use) */
.story-v3 .polaroid.tilt-left   { transform: rotate(-6deg); }
.story-v3 .polaroid.tilt-right  { transform: rotate( 5deg); }
.story-v3 .polaroid.tilt-mid    { transform: rotate(-2deg); }

/* optional: gentle hover lift (still without frames) */
.story-v3 .polaroid{
  transition: transform .25s ease, filter .25s ease;
}
@media (hover:hover){
  .story-v3 .polaroid:hover{ transform: translateY(-4px) rotate(var(--hover-rot, 0deg)); }
}

/* tighten spacing between photos and copy since frames are gone */
.story-v3 .story-copy{
  margin-top: clamp(90px, 16vw, 180px);
}

/* allow the cluster to be a touch tighter */
.story-v3 .polaroid-cluster{
  gap: clamp(8px, 1vw, 16px);
  margin-bottom: clamp(24px, 4vw, 48px);
}

/* let sections stop under the header, not behind it */
:root{ --header-h: 80px; }    /* will be updated by JS below */
[id]{ scroll-margin-top: calc(var(--header-h) + 10px); }



/* --- hero split keeps green middle column --- */
.hero-split{
  display: grid;
  grid-template-columns: 1fr minmax(240px, 32vw) 1fr;
  align-items: stretch;
}
.hero-pane{ min-height: clamp(420px, 60vw, 720px); background-size: cover; background-position: center; }
.hero-center{ background: var(--olive); } /* your green */

/* tablet: slightly wider middle column */
@media (max-width: 900px){
  .hero-split{ grid-template-columns: 1fr minmax(200px, 44vw) 1fr; }
}




/* --- OUR STORY section (no polaroid frame, keep tilt, overlap the title) --- */
.story-v3{
  position: relative;
  overflow: visible; /* do NOT clip tilted images */
}

/* Title sits on top of the cluster a little */
.story-v3 .story-head{
  position: relative;
  z-index: 5;
  margin-bottom: -0.75rem; /* overlaps the cluster slightly */
}
.story-v3 .story-head .title{
  line-height: .9;
}

/* cluster */
.story-v3 .cluster-wrap{
  position: relative;
  z-index: 2;            /* below title, above background */
  overflow: visible;
  margin-bottom: clamp(16px, 3vw, 60px);
}
.story-v3 .photo{
  display: block;
  width: min(280px, 28vw);    /* desktop sizing */
  height: auto;
  border: 0;
  box-shadow: none;           /* you’re baking the frame into the image */
  will-change: transform;
  transition: transform .2s ease;
}
.story-v3 .photo.tilt-left  { transform: rotate(-6deg); }
.story-v3 .photo.tilt-right { transform: rotate( 6deg); }
.story-v3 .photo.tilt-mid   { transform: rotate(-2deg); }

/* Let the cluster sit closer to the copy */
.story-v3 .story-copy{
  margin-top: clamp(12px, 2.5vw, 24px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 30vw, 60px);
}
.story-v3 .lede{ color: #fff; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.6; }
.story-v3 .body{ color: #fff; opacity: .92; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.7; }

/* phone/tablet – keep everything visible & readable */
@media (max-width: 900px){
  .story-v3 .photo{ width: min(42vw, 220px); }
  .story-v3 .story-copy{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .story-v3 .photo{ width: min(45vw, 200px); }
  .story-v3 .cluster-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: center;
  }
  /* make sure the title still overlaps slightly on mobile */
  .story-v3 .story-head{ margin-bottom: -0.5rem; }
}
/* cluster + copy baseline */
.story-v3 { position: relative; }
.story-v3 .story-copy { position: relative; z-index: 2; }   /* text above cluster when tight */
.story-v3 .story-cluster { position: relative; z-index: 1; }

/* The important part: give the cluster a generous bottom margin
   so the rotated corners don’t overlap the copy */
.story-v3 .story-cluster {
  margin-bottom: clamp(80px, 10vw, 160px);  /* adjust to taste */
}
/* OUR STORY – make copy sit BELOW the tilted photos */
.story-v3 .story-cluster{
  position: relative;
  z-index: 2;                               /* photos above background */
  margin-bottom: clamp(140px, 14vw, 220px); /* pushes text below the spill */
}

/* Copy starts normally (no negative margins) */
.story-v3 .story-copy{
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* Keep title overlapping the top of the cluster (optional) */
.story-v3 .story-head{
  position: relative;
  z-index: 3;              /* above photos */
  margin-bottom: -0.5rem;  /* slight overlap; remove if you don’t want it */
}

/* Tighter spacer on smaller screens */
@media (max-width: 900px){
  .story-v3 .story-cluster{ margin-bottom: clamp(80px, 12vw, 140px); }
}
/* ===== OUR STORY – tunable spacing ===== */
.story-v3{
  /* knobs (defaults) – you can override these per-section inline */
  --story-gap-desktop: 400px;   /* space below the photo cluster before the white paragraph */
  --story-gap-mobile:  100px;   /* the same space on phones/tablets */
  --title-overlap:     -20px;   /* negative pulls the title down over the photos; positive pushes it up */
  --title-left-nudge:   0px;    /* optional fine horizontal nudge for the title */
}

/* title block */
.story-v3 .story-head{
  position: relative;
  z-index: 3;
  margin-bottom: var(--title-overlap);
  left: var(--title-left-nudge);
}

/* photo cluster */
.story-v3 .story-cluster{
  position: relative;
  z-index: 2;
  margin-bottom: var(--story-gap-desktop);  /* << main control for space before text */
  overflow: visible;
}

/* white copy block under the photos */
.story-v3 .story-copy{
  position: relative;
  z-index: 1;
  margin-top: 0; /* keep text right after the cluster margin we set above */
}

/* responsive knob */
@media (max-width: 900px){
  .story-v3 .story-cluster{ margin-bottom: var(--story-gap-mobile); }
}

/* ===== Weekend schedule (hero-like section) ===== */
:root{
  --cream: #F6F1EA;
  --olive: #7F8865;            /* section wash */
  --olive-deep: #5E6A4A;
  --coral: #E37E66;
}

#schedule.lineup{
  /* keep your section id/class; ensure background image via your existing rule */
  position: relative;
  color: var(--cream);
  overflow: hidden;
}

/* Olive filter overlay on the bg image */
#schedule.lineup::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(95, 108, 79, .55) 0%,
      rgba(95, 108, 79, .55) 100%
    );
  pointer-events:none;
  z-index:0;
}

/* inner container (so content sits above overlay) */
#schedule .wknd{
  position: relative;
  z-index: 1;
  padding: clamp(48px, 8vw, 96px)  clamp(16px, 4vw, 64px);
  text-align: center;
}

/* Main heading */
.wknd__title-top{
  display:block;
  font-family: "Libre Baskerville", serif; /* or your Bodoni */
  font-size: clamp(36px, 6vw, 80px);
  letter-spacing: .04em;
}
.wknd__title-sub{
  display:block;
  margin-top: .25em;
  font-family: "Libre Baskerville", serif;
  font-style: italic;
  font-size: clamp(18px, 2.3vw, 28px);
  opacity: .95;
}

/* 3-column grid */
.wknd__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(28px, 4vw, 48px);
}

/* Day card */
.day{
  display:flex; flex-direction:column; align-items:center;
}

/* Nickname (script) slightly overlaps the day title */
.day__nick{
  font-family: "Great Vibes", cursive;   /* your script */
  font-size: clamp(28px, 3.6vw, 44px);
  color: var(--cream);
  margin-bottom: -0.25em;               /* small overlap */
  transform: translateY(6px);           /* visual tuck */
}

/* Day name (big serif) */
.day__name{
  font-family: "Libre Baskerville", serif; /* or Bodoni */
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.05;
  margin: 0 0 .35em;
}

/* Small line: Day number + range time */
.day__meta{
  display:flex; gap: .75rem;
  align-items:center;
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .9;
}
.day .kicker{ opacity:.8; }
.day .time{ font-weight:600; }

/* Acts list */
.acts{ list-style:none; padding:0; margin: 1rem 0 0; width:min(420px, 92%); }
.act{ margin: .75rem 0; }
.act__name{
  display:block;
  font-family: "Libre Baskerville", serif;
  font-size: clamp(17px, 2.2vw, 21px);
}
.act__note{
  font-size: .85em;
  opacity: .8;
}
.act__time{
  display:block;
  margin-top: .25rem;
  font-size: clamp(13px, 1.6vw, 15px);
  opacity:.9;
}

/* Emphasis levels */
.act--feature .act__name{
  font-weight: 700;
  letter-spacing: .02em;
}
.act--headline .act__name{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* “repeat” artists (same look wherever they appear) */
.act--repeat .act__name{
  font-weight: 600;
  letter-spacing: .02em;
}

/* Optional coral dot before a headline act (accent) */
.act--headline .act__name::before{
  content:"";
  display:inline-block;
  width:.45em; height:.45em; margin-right:.5em;
  border-radius:999px; background:var(--coral);
  vertical-align:middle; transform: translateY(-1px);
}

/* Small helper paragraphs (venue/dress) if you add them later */
.day p.small{
  width:min(480px, 95%);
  margin:.6rem auto 0;
  font-size: clamp(12px, 1.4vw, 14px);
  opacity:.9;
  line-height:1.55;
}

/* --- Responsive --- */
@media (max-width: 1100px){
  .wknd__grid{ gap: clamp(20px, 4vw, 32px); }
}
@media (max-width: 900px){
  .wknd__grid{
    grid-template-columns: 1fr;
    max-width: 680px;
    margin-left:auto; margin-right:auto;
  }
  .day{ padding-bottom: .5rem; }
}
/* --- section shell --- */
.wknd{
  position: relative;
  padding: clamp(56px,6vw,80px) 0 clamp(80px,8vw,120px);
  color: #f6f3ec;
  text-align: center;
  overflow: hidden;
}
.wknd__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(68,86,63,.62), rgba(68,86,63,.62)), /* olive veil */
    url('assets/img/5.jpg') center/cover no-repeat;          /* your image */
  z-index:-1;
}

/* title */
.wknd__title{ margin:0 0 clamp(120px,8vw,150px); }
.wknd__title .kicker{
  display:block; font: 400 clamp(36px,5.5vw,64px) "ALTMariaClara-Regular", "Bodoni Moda", serif; letter-spacing:.02em;
}
.wknd__title .sub{
  display:block; font: 400 clamp(16px,2.2vw,22px) "ALTMariaClara-Regular", "Libre Baskerville", serif; opacity:.9;
  margin-top: -0.1em;
}

/* 3-column grid */
.wknd__grid{
  display:grid;
  grid-template-columns: repeat(3,minmax(260px,1fr));
  gap: clamp(24px,3vw,48px);
  max-width: 1200px; margin: 0 auto;
  text-align:left;
}

/* day header */
.day__nick{ 
  margin:0 0 .25rem; 
  font: 400 clamp(20px,2.6vw,28px) "Beach Bound Script Thin", "Great Vibes", cursive; 
  color:#f4e7c6; 
  opacity:.95;
  transform: rotate(-6deg) translateY(-8px);
  z-index: 2;
  position: relative;
}
.day__name{ margin:.1rem 0 .4rem; font:700 clamp(28px,3.3vw,40px) "ALTMariaClara-Regular", "Bodoni Moda", serif; }
.day__meta{ display:flex; align-items:baseline; gap:.6rem; margin: .1rem 0 1rem; }
.day__meta .label{ font:600 12px "Inter",system-ui; letter-spacing:.12em; opacity:.8; text-transform:uppercase; }
.day__meta .hours{ font:600 14px "Libre Baskerville", serif; }

/* small notes BEFORE lineup */
.day__notes{
  list-style:none; padding:0; margin:0 0 .9rem;
  font: 400 clamp(12px,1.6vw,14px) "Libre Baskerville", serif;
  opacity:.92;
}
.day__notes li{ margin:.25rem 0; }

/* LINEUP title */
.lineup-title{
  font-family: "ALTMariaClara-Regular", "Bodoni Moda", serif;
  font-size: clamp(18px,2.2vw,24px);
  font-weight: 400;
  color: #F4E7C6;
  margin: clamp(16px,2vw,20px) 0 clamp(8px,1vw,12px);
  text-align: left;
  letter-spacing: .02em;
}

/* lineup */
.lineup{ list-style:none; padding:0; margin: .25rem 0 0; }
.act{
  position:relative;
  padding-left: 0;            /* we’ll add bullets with ::before, but can be off */
  margin: .55rem 0 .65rem;
}
.act::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#e0795f; opacity:.95;
  position:absolute; left:-14px; top:.6rem;
}
.act.no-dot::before{ display:none; } /* remove bullet when requested */

.act .who{
  display:block;
  font: 700 clamp(16px,2vw,20px) "Libre Baskerville", serif;
  letter-spacing:.02em;
}
.act .time{
  display:block;
  margin-top:.15rem;
  font: 400 clamp(12px,1.6vw,14px) "Libre Baskerville", serif;
  opacity:.95;
}
.act .note, .act .subnote{
  display:block; margin-top:.1rem;
  font: 400 clamp(12px,1.5vw,13px) "Libre Baskerville", serif; opacity:.85;
}

/* Make the script wordmark look even and aligned like others */
.hand{ font-family: "Great Vibes", cursive; font-weight:400; }

/* responsiveness */
@media (max-width: 980px){
  .wknd__grid{ grid-template-columns: 1fr; }
  .wknd{ text-align:left; }
}
/* WEEKEND section */
.wknd{
  position: relative;
  color: #f6f3ec;
  text-align: center;

  /* background image + olive filter */
  background:
    linear-gradient(rgba(68,86,63,.62), rgba(68,86,63,.62)),
    url("assets/img/5.jpg") center/cover no-repeat fixed;

  /* spacing + height so it feels bigger */
  padding: clamp(56px,6vw,80px) 0 clamp(140px,10vw,180px);
  min-height: 120vh;
}

/* make sure nothing is painting over it */
.wknd .day{ background: transparent; }

/* WEEKEND — kill accidental card backgrounds on each day */
.wknd .day,
.wknd .day::before,
.wknd .day::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* keep the global section background only */
.wknd{
  position: relative;
  color: #f6f3ec;
  text-align: center;
  /* section image + olive veil */
 background:
    linear-gradient(rgba(68,86,63,.62), rgba(68,86,63,.62)),
    url("assets/img/5.jpg") center/cover no-repeat; /* no 'fixed' */
  background-attachment: scroll; /* belt-and-suspenders */
  padding: clamp(56px,6vw,80px) 0 clamp(140px,10vw,180px);
  min-height: 120vh;
}
/* WEEKEND — force the 3 columns to be transparent */
#schedule.lineup .wknd .day,
#schedule.lineup .wknd .day > *,
#schedule.lineup .wknd .day::before,
#schedule.lineup .wknd .day::after {
  background: transparent !important;
  box-shadow: none !important;
}

/* the lists too (some themes add a card bg to UL) */
#schedule.lineup .wknd .lineup,
#schedule.lineup .wknd .acts {
  background: transparent !important;
  box-shadow: none !important;
}
/* Section shell with one big background */
#schedule.lineup .wknd{
  position: relative;
  color: #fff;
  text-align: center;
  padding: clamp(56px,6vw,80px) 0 clamp(140px,10vw,180px);
  min-height: 120vh;

  /* hero image + olive filter (no per-day images) */
  background:
    linear-gradient(rgba(68,86,63,.62), rgba(68,86,63,.62)),
    url("assets/img/5.jpg") center/cover no-repeat fixed;
}
/* Big 'WEEKEND' + 'schedule' */
#schedule.lineup .wknd__title { 
  margin: 0 0 clamp(28px,3.5vw,40px);
  color:#fff;                     /* pure white title */
}
#schedule.lineup .wknd__title .kicker{
  display:block;
  font: 700 clamp(44px,6vw,84px) "Bodoni Moda", serif;
  letter-spacing:.02em;
}
#schedule.lineup .wknd__title .sub{
  display:block;
  font: 400 clamp(18px,2.3vw,26px) "Libre Baskerville", serif;
  opacity:.95;
}
/* Day heading bloc */
#schedule.lineup .wknd .day__nick{
  margin:0 0 .25rem;
  font: 400 clamp(22px,2.8vw,32px) "Great Vibes", cursive;
  color:#F4E7C6;                 /* creamy script, like the mock */
}
#schedule.lineup .wknd .day__name{
  margin:.1rem 0 .5rem;
  color:#fff;                    /* white day name */
  font: 700 clamp(30px,3.5vw,44px) "Bodoni Moda", serif;
}
#schedule.lineup .wknd .day__meta{
  color:#fff;
  opacity:.9;
}
#schedule.lineup .wknd .act .who{
  color:#fff;
  font: 700 clamp(16px,2vw,20px) "Libre Baskerville", serif;
  letter-spacing:.02em;
}
#schedule.lineup .wknd .act .time{
  color:#fff;
  opacity:.9;
}
#schedule.lineup .wknd .act .note,
#schedule.lineup .wknd .act .subnote{
  color:#fff;
  opacity:.85;
}

/* remove the coral bullet when you don’t want one */
#schedule.lineup .wknd .act.no-dot::before{ display:none; }
/* 3 columns -> 1 column on mobile */
#schedule.lineup .wknd__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(24px,3vw,48px);
  max-width: 1200px;
  margin: 0 auto;
  align-items: start; /* Ensure all columns start at the same height */
}

/* Align all lineups at the same height on desktop */
@media (min-width: 981px) {
  #schedule .wknd__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
  }
  
  #schedule .wknd__grid .day {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
  }
  
  /* Add more space between dress code and lineup titles */
  #schedule .day__notes {
    margin-bottom: 2rem !important; /* Increased spacing before lineup */
  }
  
  /* Force lineup titles to align horizontally using absolute positioning */
  #schedule .lineup-title {
    position: absolute !important;
    top: 400px !important; /* Fixed position for all lineup titles */
    left: 0;
    right: 0;
    margin: 0 !important;
    z-index: 10;
    text-align: center !important; /* Center the lineup titles */
  }
  
  /* Force lineup content to align horizontally */
  #schedule .lineup {
    position: absolute !important;
    top: 430px !important; /* Position content below aligned titles */
    left: 0;
    right: 0;
    margin: 0 !important;
    z-index: 10;
    text-align: center !important; /* Center the lineup content */
  }
  
  /* Center individual lineup items */
  #schedule .lineup .act {
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Center lineup item text elements */
  #schedule .lineup .act .who,
  #schedule .lineup .act .time,
  #schedule .lineup .act .subnote {
    text-align: center !important;
  }
  
  /* Ensure day content doesn't interfere with lineup positioning */
  #schedule .day__notes {
    max-height: 380px !important; /* Limit height to prevent overlap */
    overflow: hidden;
  }
  
  /* Add more space at the end of the weekend section */
  #schedule .wknd {
    padding-bottom: 20rem !important; /* Even more bottom padding for better look */
    padding-top: 4rem !important; /* Add top padding for better spacing */
  }
  
  /* Ensure the grid has enough space for all content */
  #schedule .wknd__grid {
    margin-bottom: 12rem !important; /* Significantly increased margin below the grid */
    margin-top: 2rem !important; /* Add top margin for better spacing */
  }
  
  /* Add extra space after the lineup content */
  #schedule .lineup {
    padding-bottom: 8rem !important; /* Even more padding below lineup content */
  }
  
  /* Add more space between lineup items for better readability */
  #schedule .lineup .act {
    margin-bottom: 1.5rem !important; /* Increased spacing between lineup items */
  }
  
  /* Add more space around the lineup title */
  #schedule .lineup-title {
    margin-bottom: 2rem !important; /* More space below lineup title */
  }
}

/* Force all day containers to have equal height */
#schedule.lineup .wknd__grid .day {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 980px){
  #schedule .wknd__grid{ grid-template-columns:1fr; }
  
  /* Mobile-specific weekend schedule improvements - target correct selectors */
  #schedule .day .day__nick.hand {
    font-size: 50px !important; /* Much larger for mobile */
    line-height: 1.1 !important;
  }
  
  #schedule .day h3.day__name {
    font-size: 60px !important; /* Much larger for mobile */
    line-height: 1.1 !important;
  }
  
  /* Reduce spacing between day description and lineup */
  #schedule .day__notes {
    margin-bottom: 0.2rem !important; /* Further reduce spacing */
  }
  
  #schedule .lineup-title {
    margin-top: 0.2rem !important; /* Further reduce spacing */
  }
  
  /* Tighten spacing in day meta (DAY ONE, time) */
  #schedule .day__meta {
    margin-bottom: 0.5rem !important; /* Reduce spacing after time */
  }
  
  /* Tighten spacing between day__meta and day__notes */
  #schedule .day__meta + .day__notes {
    margin-top: 0.3rem !important; /* Reduce gap between time and venue info */
  }
  
  /* Reduce spacing between lineup items */
  #schedule .lineup .act {
    margin: 0.3rem 0 !important; /* Reduce from .55rem 0 .65rem */
  }
  
  /* Add subtle line between days */
  #schedule .day:not(:last-child) {
    border-bottom: 1px solid rgba(244, 231, 198, 0.2);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
}

/* guard against any forgotten backgrounds */
#schedule.lineup .wknd * {
  background-image: none !important;   /* only if you still see stray images */
}

/* === ALIGNMENT IMPROVEMENTS === */
/* Ensure day headers are aligned horizontally */
#schedule.lineup .wknd .day {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto; /* day__nick, day__name, day__meta, day__notes, lineup-title + lineup */
  gap: 0.5rem;
  align-items: start;
  text-align: center;
  min-height: 100%; /* Ensure all days have same height */
}

/* Align day meta (DAY ONE, DAY TWO, DAY THREE) consistently */
#schedule.lineup .wknd .day__meta {
  margin: 0.5rem 0 1rem 0; /* Consistent top/bottom margins */
  text-align: center;
}

/* Ensure lineup titles are aligned across all three days */
#schedule.lineup .wknd .lineup-title {
  margin: 1.5rem 0 0.8rem 0; /* Consistent spacing above lineup */
  text-align: center;
  position: relative;
  top: 0; /* Reset any positioning */
}

/* Align day notes (venue, dress code) consistently */
#schedule.lineup .wknd .day__notes {
  margin: 0 0 1.2rem 0; /* Consistent bottom margin before lineup */
  text-align: left;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Ensure lineup items have consistent spacing */
#schedule.lineup .wknd .lineup {
  margin-top: 0.5rem;
}

/* Create consistent row heights for better alignment - handled above */

/* Ensure lineup sections start at consistent heights */
#schedule.lineup .wknd .lineup-title {
  grid-row: 5; /* Force lineup title to be in the same row across all days */
  margin-top: 0; /* Remove top margin since grid handles spacing */
  position: relative;
  z-index: 2;
  top: 0; /* Reset any positioning */
  margin-bottom: 0.5rem; /* Consistent bottom margin */
}

/* Force lineup content to start at exact same position */
#schedule.lineup .wknd .lineup {
  position: relative;
  top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* Create a fixed height container for lineup sections */
#schedule.lineup .wknd .day__notes {
  flex: 0 0 auto; /* Don't grow or shrink */
  height: 10rem; /* Increased height to match middle column */
  overflow: hidden; /* Hide overflow if content is too long */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Force all lineup sections to start at the same height */
#schedule.lineup .wknd .day {
  position: relative;
}

/* Ensure lineup titles are at the same vertical position */
#schedule.lineup .wknd .lineup-title {
  position: absolute;
  top: 10rem; /* Position at the bottom of the day__notes container */
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}

/* Align lineup content (performers and times) consistently */
#schedule.lineup .wknd .lineup {
  position: absolute;
  top: 10.5rem; /* Position right after the lineup title */
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  min-height: 8rem; /* Ensure minimum height for consistent alignment */
}

/* Ensure first lineup item starts at same position */
#schedule.lineup .wknd .lineup .act:first-child {
  margin-top: 0; /* Remove top margin from first act */
  padding-top: 0.25rem; /* Small consistent padding */
}

/* Consistent spacing between lineup title and first act */
#schedule.lineup .wknd .lineup-title + .lineup {
  margin-top: 0.75rem; /* Consistent gap between title and first lineup item */
}

/* Ensure all lineup items have consistent spacing */
#schedule.lineup .wknd .lineup .act {
  margin: 0.4rem 0; /* Consistent vertical spacing between acts */
}

/* Responsive alignment adjustments */
@media (max-width: 980px) {
  /* On mobile, stack vertically but maintain consistent spacing */
  #schedule.lineup .wknd .day {
    grid-template-rows: auto auto auto auto auto; /* Remove 1fr to prevent stretching */
    gap: 0.75rem;
  }
  
  #schedule.lineup .wknd .day__notes {
    height: auto; /* Remove fixed height on mobile for better flow */
    min-height: auto;
    position: relative; /* Reset positioning on mobile */
  }
  
  /* Reset absolute positioning on mobile */
  #schedule.lineup .wknd .lineup-title {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }
  
  #schedule.lineup .wknd .lineup {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    min-height: auto; /* Remove min-height on mobile */
    padding-top: 0.25rem; /* Smaller padding on mobile */
  }
}

@media (max-width: 768px) {
  /* Further mobile adjustments */
  #schedule.lineup .wknd .day__meta {
    margin: 0.3rem 0 0.8rem 0; /* Tighter spacing on small screens */
  }
  
  #schedule.lineup .wknd .day__notes {
    margin: 0 0 1rem 0; /* Consistent bottom margin */
  }
  
  /* Optimize lineup spacing for small screens */
  #schedule.lineup .wknd .lineup {
    padding-top: 0.2rem; /* Minimal padding on small screens */
  }
  
  #schedule.lineup .wknd .lineup .act {
    margin: 0.3rem 0; /* Tighter spacing between acts on mobile */
  }
}
/* =========================================
   WEEKEND / schedule — matches your DOM
   ========================================= */

/* 0) One hero background with an olive wash */
#schedule.lineup{
  position: relative;
  color:#fff;
  overflow: hidden;
  background:
    linear-gradient(rgba(68,86,63,.62), rgba(68,86,63,.62)),
    url("assets/img/5.jpg") center/cover no-repeat fixed;
}

/* 1) KILL any per-column backgrounds/shadows that were added earlier */
#schedule.lineup .day,
#schedule.lineup .day::before,
#schedule.lineup .day::after,
#schedule.lineup .day > *,
#schedule.lineup .acts {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 2) Section paddings so it breathes like a hero */
#schedule.lineup .lineup-inner{
  position: relative;
  padding: clamp(64px,7vw,96px)  clamp(16px,3.5vw,48px)
           clamp(150px,11vw,200px);
}

/* 3) Title: big white WEEKEND + smaller “schedule” */
#schedule.lineup h2.display-center{
  margin: 0 0 clamp(28px,3.5vw,40px);
  color:#fff;
  font: 700 clamp(52px,7vw,96px) "Bodoni Moda", serif;
  letter-spacing:.02em;
  text-align:center;
}
#schedule.lineup h2.display-center .light{
  display:block;
  margin-top:.25em;
  color:#fff;
  font: 400 clamp(20px,2.5vw,30px) "Libre Baskerville", serif;
  opacity:.95;
}

/* 4) Three columns on desktop, stack on mobile */
#schedule.lineup .days{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(24px,3vw,48px);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 980px){
  #schedule.lineup .days{ grid-template-columns: 1fr; }
}

/* 5) Head of each day */
#schedule.lineup .day__subtitle.hand{            /* Welcome Party / Ceremony + Party / … */
  margin:0 0 .15rem;
  color:#F4E7C6;                                  /* creamy script */
  font: 400 clamp(22px,2.8vw,32px) "Great Vibes", cursive;
  line-height:1;
}
#schedule.lineup .day__title{                     /* Friday / Saturday / Sunday */
  margin:.1rem 0 .5rem;
  color:#fff;
  font: 700 clamp(30px,3.5vw,44px) "Bodoni Moda", serif;
  line-height:1.05;
}
#schedule.lineup .day__tag,
#schedule.lineup .day__time{
  color:#fff; opacity:.9;
  font: 600 12px/1.2 "Inter", system-ui;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#schedule.lineup .day__time{ font-size:14px; }

/* 6) Small day notes (your paragraphs above the lineup) */
#schedule.lineup .day p{
  color:#fff; opacity:.92;
  font: 400 clamp(12px,1.6vw,14px) "Libre Baskerville", serif;
  margin:.35rem 0;
}

/* 7) Lineup list (acts) */
#schedule.lineup .acts{ list-style:none; padding:0; margin:.75rem 0 0; }
#schedule.lineup .acts li{
  position:relative;
  margin:.55rem 0 .65rem;
  padding-left:0;                                   /* remove any old padding */
}
#schedule.lineup .acts li::before{                 /* coral bullet for emphasis rows */
  content:""; width:6px; height:6px; border-radius:50%;
  background:#E37E66; opacity:.95;
  position:absolute; left:-14px; top:.6rem;
}
#schedule.lineup .acts li.no-dot::before{ display:none; } /* use class="no-dot" when you don't want a bullet */

#schedule.lineup .acts .act,
#schedule.lineup .acts .act span,
#schedule.lineup .acts .act div{ color:#fff; }     /* make sure text is white */

#schedule.lineup .acts .act .who{                  /* artist name */
  display:block;
  font: 700 clamp(16px,2vw,20px) "Libre Baskerville", serif;
  letter-spacing:.02em;
}
#schedule.lineup .acts .act .time{                 /* time below artist */
  display:block;
  margin-top:.15rem;
  font: 400 clamp(12px,1.6vw,14px) "Libre Baskerville", serif;
  opacity:.95;
}
#schedule.lineup .acts .act .note{                 /* small extra note */
  display:block; margin-top:.1rem;
  font: 400 clamp(12px,1.5vw,13px) "Libre Baskerville", serif; opacity:.85;
}
/* ================================
   WEEKEND (matches your <section id="schedule" class="wknd">)
   ================================ */

/* Section shell */
#schedule.wknd{
  position: relative;
  color: #fff;
  text-align: center;
  padding: clamp(40px,4vw,60px) 0 clamp(180px,12vw,240px);
  overflow: hidden;
  min-height: 140vh;
}

/* One big background with olive veil */
#schedule.wknd .wknd__bg{
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(68,86,63,.62), rgba(68,86,63,.62)),
    url("assets/img/5.jpg") center/cover no-repeat fixed;
}

/* Title */
#schedule.wknd .wknd__title{ margin: 0 0 clamp(100px,8vw,120px); padding-top: 0; }
#schedule.wknd .wknd__title .kicker{
  display:block;
  color:#fff;
  font: 400 clamp(56px,8vw,100px) "ALTMariaClara-Regular", "Bodoni Moda", serif;
  letter-spacing:.02em;
}
#schedule.wknd .wknd__title .sub{
  display:block;
  color:#fff;
  opacity:.95;
  font: 400 clamp(24px,3vw,36px) "ALTMariaClara-Regular", "Libre Baskerville", serif;
}

/* Grid */
#schedule.wknd .wknd__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(32px,4vw,64px);
  max-width: 1200px;
  margin: 0 auto;
  text-align:left;
}
@media (max-width: 980px){
  #schedule.wknd {
    padding-top: clamp(30px,3vw,40px);
  }
  
  #schedule.wknd .wknd__grid{ 
    grid-template-columns: 1fr; 
    gap: clamp(78px,10vw,117px);
  }
  
  /* Make schedule bigger on mobile */
  #schedule.wknd .wknd__title{
    margin-bottom: clamp(28px,3.5vw,40px);
  }
  
  #schedule.wknd .wknd__title .kicker{
    font-size: clamp(64px,10vw,80px);
  }
  
  #schedule.wknd .wknd__title .sub{
    font-size: clamp(28px,4vw,32px);
  }
  
  #schedule.wknd .day__nick{
    font-size: clamp(32px,5vw,38px);
    margin-bottom: .6rem;
  }
  
  #schedule.wknd .day__name{
    font-size: clamp(44px,6vw,52px);
    margin-bottom: 1rem;
  }
  
  #schedule.wknd .day__meta{
    margin-bottom: 2rem;
  }
  
  #schedule.wknd .day__notes{
    font-size: clamp(15px,2vw,17px);
    margin-bottom: 1.5rem;
  }
  
  #schedule.wknd .act .who,
  #schedule.wknd .act .name{
    font-size: clamp(20px,3vw,24px);
  }
  
  #schedule.wknd .act .time{
    font-size: clamp(15px,2.2vw,17px);
  }
  
  #schedule.wknd .act.act--script .who,
  #schedule.wknd .act.act--script .name{
    font-size: clamp(26px,4vw,32px);
  }
}

/* Head of each day */
#schedule.wknd .day__nick{
  margin:0 0 .4rem;
  color:#F4E7C6;
  font: 400 clamp(28px,3.5vw,40px) "Beach Bound Script Thin", "Great Vibes", cursive;
  line-height:1;
  transform: rotate(-6deg) translateY(-8px);
  z-index: 2;
  position: relative;
}
#schedule.wknd .day__name{
  margin:.2rem 0 .8rem;
  color:#fff;
  font: 700 clamp(38px,4.5vw,56px) "ALTMariaClara-Regular", "Bodoni Moda", serif;
  line-height:1.05;
}
#schedule.wknd .day__meta{
  display:flex; gap:.8rem; align-items:baseline;
  margin:.2rem 0 1.5rem;
  color:#fff; opacity:.9;
}
#schedule.wknd .day__meta .label{
  font:600 14px/1.2 "Inter",system-ui; letter-spacing:.12em; text-transform:uppercase;
}
#schedule.wknd .day__meta .hours{
  font:600 16px/1.2 "Libre Baskerville", serif;
}

/* Day notes BEFORE lineup */
#schedule.wknd .day__notes{
  list-style:none; padding:0; margin:0 0 1.2rem;
  font: 400 clamp(14px,1.8vw,16px) "Libre Baskerville", serif; opacity:.92;
}
#schedule.wknd .day__notes li{ margin:.35rem 0; }

/* Lineup list */
#schedule.wknd .lineup{ list-style:none; padding:0; margin:.25rem 0 0; }
#schedule.wknd .act{
  position:relative; margin:.55rem 0 .65rem; padding-left:0;
}
#schedule.wknd .act::before{         /* coral bullet; add class no-dot to remove */
  content:""; width:6px; height:6px; border-radius:50%;
  background:#E37E66; opacity:.95;
  position:absolute; left:-14px; top:.6rem;
}
#schedule.wknd .act.no-dot::before{ display:none; }

/* Names + times (support both .who and .name like your Sunday column) */
#schedule.wknd .act .who,
#schedule.wknd .act .name{
  display:block;
  color:#fff;
  font: 700 clamp(18px,2.2vw,24px) "Libre Baskerville", serif;
  letter-spacing:.02em;
}
#schedule.wknd .act .time{
  display:block; margin-top:.2rem;
  color:#fff; opacity:.95;
  font: 400 clamp(14px,1.8vw,16px) "Libre Baskerville", serif;
}
#schedule.wknd .act .note,
#schedule.wknd .act .subnote{
  display:block; margin-top:.15rem;
  color:#fff; opacity:.85;
  font: 400 clamp(13px,1.6vw,15px) "Libre Baskerville", serif;
}
/* Script style for the "Rivelino" row you marked with act--script */
#schedule.wknd .act.act--script .who,
#schedule.wknd .act.act--script .name{
  font-family:"Great Vibes", cursive; font-weight:400; font-size: clamp(24px,2.8vw,32px);
}

/* — Hard overrides to neutralize old per-day cards/backgrounds — */
#schedule.wknd article.day,
#schedule.wknd article.day::before,
#schedule.wknd article.day::after{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}


/* ==== WKND — force-clean anything old that is still styling columns/lists ==== */
#schedule.wknd article.day,
#schedule.wknd article.day::before,
#schedule.wknd article.day::after {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* If any older rule added a panel to the list itself */
#schedule.wknd .lineup,
#schedule.wknd ul.lineup {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* And to each list item (acts) */
#schedule.wknd .lineup > li,
#schedule.wknd ul.lineup > li {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

/* For good measure, strip any stray background images anywhere inside the day */
#schedule.wknd article.day * {
  background-image: none !important;
}

/* Keep your coral bullets; remove them by adding .no-dot on the <li> if needed */
#schedule.wknd .lineup > li { position: relative; }
#schedule.wknd .lineup > li::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:#E37E66; position:absolute; left:-14px; top:.6rem;
}
#schedule.wknd .lineup > li.no-dot::before { display:none; }

/* Typography (kept here so it wins against old rules) */
#schedule.wknd .lineup .who,
#schedule.wknd .lineup .name {
  display:block;
  color:#fff;
  font: 700 clamp(16px,2vw,20px) "Libre Baskerville", serif;
  letter-spacing:.02em;
}
#schedule.wknd .lineup .time { 
  display:block; margin-top:.15rem;
  color:#fff; opacity:.95;
  font: 400 clamp(12px,1.6vw,14px) "Libre Baskerville", serif;
}
#schedule.wknd .lineup .note,
#schedule.wknd .lineup .subnote { 
  display:block; margin-top:.1rem; color:#fff; opacity:.85;
  font: 400 clamp(12px,1.5vw,13px) "Libre Baskerville", serif;
}

/* Script variant (your “Rivelino”) */
#schedule.wknd .lineup .act--script .who,
#schedule.wknd .lineup .act--script .name {
  font-family: "Great Vibes", cursive; font-weight:400;
  font-size: clamp(20px,2.4vw,26px);
}
/* Hide lineup bullets on Day 1 (Friday) and Day 2 (Saturday) */
#schedule.wknd .day:nth-of-type(1) .lineup > li::before,
#schedule.wknd .day:nth-of-type(2) .lineup > li::before {
  display: none !important;
}
/* --- WEEKEND section: tighter, scrolling bg, stacked meta --- */

/* Shorter section + scrolling (non-fixed) background */
#schedule.wknd{
  /* slightly tighter vertical rhythm */
  padding: clamp(40px,5vw,68px) 0 clamp(80px,7vw,110px);
  min-height: auto;                 /* don't force a tall hero */
}

/* If you set the background on .wknd previously with "fixed",
   replace it with this .wknd__bg layer so it scrolls with the section */
#schedule.wknd .wknd__bg{
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(68,86,63,.62), rgba(68,86,63,.62)), /* olive veil */
    url("assets/img/5.jpg") center/cover no-repeat;          /* NO 'fixed' */
  z-index: -1;
}

/* Title a touch tighter to save space */
#schedule.wknd .wknd__title { margin: 0 0 clamp(22px,2.8vw,32px); }

/* Reduce column gap a bit for a denser layout */
#schedule.wknd .wknd__grid{
  gap: clamp(18px, 3vw, 36px);
}

/* Stack 'DAY ONE' above the hours on each card */
#schedule.wknd .day__meta{
  display: flex;
  flex-direction: column;   /* stack */
  align-items: center;
  gap: .15rem;
  margin-top: .25rem;
}
#schedule.wknd .day__meta .label{
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}
#schedule.wknd .day__meta .hours{
  font-weight: 600;
}

/* Mobile: keep it comfy and not too tall */
@media (max-width: 980px){
  #schedule.wknd{
    padding: clamp(32px,6vw,48px) 0 clamp(64px,8vw,88px);
  }
  #schedule.wknd .wknd__grid{ grid-template-columns: 1fr; }
}
/* --- Weekend size & layout knobs --- */
:root{
  --wk-pad: clamp(36px, 5vw, 72px);  /* top/bottom padding */
  --wk-min: 80vh;                    /* section height */
}

/* smaller section */
#schedule.wknd{
  padding: var(--wk-pad) 0 calc(var(--wk-pad) + 20px);
  min-height: var(--wk-min);
}

/* lighter title (not bold-heavy) */
#schedule .wknd__title{ margin: 0 0 clamp(20px,3vw,30px); }
#schedule .wknd__title .kicker{
  font-family: "ALTMariaClara-Regular", "Bodoni Moda", serif;
  font-weight: 300;                  /* lighter */
  letter-spacing: .03em;
  font-size: clamp(40px, 6vw, 72px);
  color: #fff;
}
#schedule .wknd__title .sub{
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(16px,2.2vw,24px);
  color: #fff; opacity: .95;
}

/* tighter columns to reduce depth */
#schedule .wknd__grid{
  max-width: 1100px;
  gap: clamp(16px, 3vw, 28px);
  margin: 0 auto;
}

/* stack meta so hours sit under “DAY ONE/TWO/THREE” */
#schedule .day__meta{
  display: flex; flex-direction: column;
  align-items: center; gap: .2rem;
}
/* === WEEKEND compact sizing overrides (put LAST) === */
:root{
  /* dials you can change */
  --wk-pad: clamp(28px, 4.5vw, 56px);  /* top/bottom padding */
  --wk-min: 10vh;                      /* overall section height */
  --wk-gap: clamp(14px, 2.5vw, 26px);  /* gap between the three columns */
  --wk-title-gap: clamp(14px, 2.8vw, 22px); /* space under the big title */
}

/* force these to win over earlier rules */
#schedule.wknd{
  padding: var(--wk-pad) 0 var(--wk-pad) !important;
  min-height: var(--wk-min) !important;
  background-attachment: scroll; /* keep image scrolling with section */
}

/* slightly tighten the content */
#schedule .wknd__title{ margin: 0 0 var(--wk-title-gap) !important; }
#schedule .wknd__grid{
  max-width: 1080px;
  gap: var(--wk-gap) !important;
  margin: 0 auto;
}

/* put the hours under the DAY label (and tighten space) */
#schedule .day__meta{
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: .15rem;
  margin-bottom: .6rem;
}

/* trim small notes and lineup spacing a touch */
#schedule .day__notes{ margin: 0 0 .7rem !important; }
#schedule .lineup{ margin-top: .35rem !important; }
/* --- WEEKEND: collapse to content + 40px (put LAST) --- */
#schedule.wknd{
  position: relative;
  /* kill any earlier min-height or big padding */
  min-height: auto !important;
  padding-top: clamp(28px, 4.5vw, 56px) !important;
  padding-bottom: 200px !important;
  background-attachment: scroll; /* bg follows section while scrolling */
}

/* tighten internal spacing so content height is honest */
#schedule .wknd__title{ margin-bottom: clamp(12px, 2.2vw, 20px) !important; }
#schedule .wknd__grid{ gap: clamp(14px, 2.5vw, 26px) !important; }
#schedule .day__notes{ margin-bottom: .6rem !important; }
#schedule .lineup{ margin-top: .35rem !important; }

/* hours line directly under "DAY ONE/TWO/THREE" */
#schedule .day__meta{
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: .15rem;
  margin-bottom: .6rem !important;
}

/* ensure no hidden bottom margin adds extra space */
#schedule .wknd__grid > .day:last-child { margin-bottom: 0 !important; }
/* --- Travel & Getting There --- */
:root{
  --cream: #F6F1EA;
  --ink:   #1b1b1b;
  --olive: #7F8865;
  --rule:  rgba(27,27,27,.18);
}

.travel{
  background: var(--cream);
  color: var(--ink);
}

/* Photos row */
.travel__media{
  display: grid;
  /* balanced proportions for equal visual gaps */
  grid-template-columns: 0.32fr 0.36fr 0.32fr;
  /* increase the distance between photos (approx +20%) */
  gap: clamp(46px, 4.6vw, 70px);
  align-items: center;
  /* reduced horizontal gutters so images sit closer to the text/title */
  padding: clamp(10px, 1.8vw, 22px) clamp(3px, 0.8vw, 12px) 0;
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  /* Remove any bottom margin/padding to eliminate gaps */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.travel__img{
  width: 100%;
  height: auto;            /* avoid forcing height — prevents stretching */
  object-fit: cover;      /* preserves aspect ratio while allowing cropping */
  display: block;
}
.travel__img--big{
  width: 100%;
  height: auto;
  max-height: 680px;       /* cap center image visually but don't force exact height */
}

/* Ensure all travel image containers have no padding/margin */
.travel__media > * {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Center image container - ensure no padding/margin */
.travel__media > *:nth-child(2) {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Center image - larger than side images */
.travel__media > *:nth-child(2) img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
  max-width: none;
  object-fit: cover;
  max-height: 450px; /* Larger than side images (300px) */
  border: none;
  outline: none;
}

/* Side images - 30% smaller than middle image */
.travel__media > *:nth-child(1) img,
.travel__media > *:nth-child(3) img {
  width: 90%; /* Slightly smaller to compensate for visual gap perception */
  height: auto;
  margin: 0 auto;
  display: block;
  max-width: none;
  object-fit: contain; /* Prevent stretching, maintain aspect ratio */
  max-height: 300px; /* Limit height to make them 30% smaller than middle */
}

/* Title block */
.travel__head{
  /* align title padding with the content grid for a neat left edge */
  padding: 0 clamp(4px, 1.0vw, 12px) 0;
  /* ensure the heading lines up exactly with the text grid on very wide screens */
  box-sizing: border-box;
  /* make the title follow the left edge of the text grid on wide screens */
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  /* Remove any top margin/padding to eliminate gaps */
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.travel__title{
  font-family: "ALTMariaClara-Regular", "Bodoni Moda", "Libre Baskerville", serif;
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.08;
  margin: 0 0 .35rem;
}
.travel__rule{
  height: 1px;
  width: clamp(220px, 22vw, 320px);
  background: var(--rule);
  margin: .6rem 0 1.2rem;
}
.travel__kicker{
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
  font-weight: 700;
  font-size: clamp(16.8px, 2.16vw, 21.6px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 1;
  margin: 0 0 .6rem;
}

/* 3-column info grid with vertical dividers */
.travel__grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(18px, 2.6vw, 44px);
  /* match horizontal padding to the title block so the text aligns with the heading */
  /* slightly reduced left/right padding so the text box sits closer to the images */
  padding: 0 clamp(4px, 1.0vw, 12px) clamp(48px, 6vw, 72px);
  max-width: 1480px;        /* increased so the text box is wider */
  margin-left: auto;
  margin-right: auto;
}
.travel__col{
  padding-left: clamp(16px, 2vw, 22px);
  border-left: 1px solid var(--rule);
}
.travel__col:first-child{
  border-left: none;
  padding-left: 0;
}

/* elegant text */
.travel__sub{
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
  font-weight: 700;
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 .6rem;
}
.travel p{
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.6;
  margin: 0 0 .9rem;
}

/* small divider inside col 1 between Airports / By car */
.travel__mini-rule{
  height: 1px;
  background: var(--rule);
  width: 100%;
  margin: .9rem 0 1rem;
}

/* tidy list in column 2 */
.travel__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.travel__list li{
  padding: .35rem 0;
  border-bottom: 1px solid rgba(27,27,27,.08);
}
.travel__list li:last-child{ border-bottom: 0; }

/* Responsive */
@media (max-width: 980px){
  /* stack into a two-column then single-column flow; center image becomes full width */
  .travel__media{ 
    grid-template-columns: 1fr 1fr; 
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .travel__img--big{ grid-column: 1 / -1; }
  .travel__grid{ grid-template-columns: 1fr; }
  .travel__col{ border-left: none; border-top: 1px solid var(--rule); padding: 1rem 0 0; }
  .travel__col:first-child{ border-top: 0; padding-top: 0; }
  
  /* Ensure no gap between images and title on mobile */
  .travel__head {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* On narrower screens stack images vertically and show center image first */
@media (min-width: 1200px) {
  /* reduce these gutters to cut a lot of the side white/rail space */
  .travel__media{ padding-left: 16px; padding-right: 16px; }
  .travel__grid{ padding-left: 16px; padding-right: 16px; }
  /* keep the title block aligned with the grid */
  .travel__head{ padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 1600px) {
  /* gentle cap for ultra-wide screens without huge whitespace */
  .travel__media{ padding-left: 28px; padding-right: 28px; gap: 28px; }
  .travel__grid{ padding-left: 28px; padding-right: 28px; }
  .travel__head{ padding-left: 28px; padding-right: 28px; }
}


/* Make sure images never get stretched by any other rule */
#travel .travel__media img, #travel .travel__media picture img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* Highly-specific overrides: proportional sizing with equal gaps
   Use specificity + !important to win over any other generic image rules. */
#travel .travel__media > *:nth-child(2) {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
#travel .travel__media > *:nth-child(2) img {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
  object-fit: cover;
  max-height: 450px;
  border: none;
  outline: none;
}
#travel .travel__media > *:nth-child(1) img,
#travel .travel__media > *:nth-child(3) img {
  width: 90%;
  height: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  max-height: 300px;
}

/* Tighten the left/right border spacing on very large screens so it's a bit tighter */
@media (min-width: 1200px) {
  /* reduce these gutters to cut a lot of the side white/rail space */
  .travel__media{ padding-left: 30px; padding-right: 30px; }
  .travel__grid{ padding-left: 30px; padding-right: 30px; }
  /* keep the title block aligned with the grid */
  .travel__head{ padding-left: 30px; padding-right: 30px; }
}

@media (min-width: 1600px) {
  /* gentle cap for ultra-wide screens without huge whitespace */
  .travel__media{ padding-left: 50px; padding-right: 50px; gap: 36px; }
  .travel__grid{ padding-left: 50px; padding-right: 50px; }
  .travel__head{ padding-left: 50px; padding-right: 50px; }
}
/* ============== GET DIRECTIONS section ============== */
:root{
  /* only if you don't already have these */
  --olive: #7F8865;
}

/* Make sure the banner can host overlays */
.directions-banner{
  position: relative;
  overflow: hidden;                 /* keeps rails tidy at the edges */
  min-height: clamp(260px, 40vh, 460px);
}

/* Olive rails on both sides */
.directions-banner::before,
.directions-banner::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(18px, 3.8vw, 56px);  /* adjust thickness here */
  background: var(--olive);
  z-index: 1;                       /* below button, above map */
  pointer-events: none;
}
.directions-banner::before{ left: 0; }
.directions-banner::after { right: 0; }

/* Center the button near the bottom */
.directions-banner__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: clamp(14px, 3.5vw, 28px);
  z-index: 2;                       /* above the rails/map */
}

/* Button style to match the reference */
.directions-banner__btn{
  font: 700 clamp(12px, 1.4vw, 14px) "Libre Baskerville", serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.18);      /* subtle glassy feel */
  backdrop-filter: blur(2px);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.directions-banner__btn:hover{
  background: rgba(255,255,255,.08);
  border-color: #fff;
}

/* If your map is an <iframe>, make sure it fills the section */
.directions-banner iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
}

/* Ensure our wrapper fills the banner and stacks behind the overlay/content */
.directions-map{
  position: absolute;
  inset: 0;
  z-index: 0; /* behind overlay buttons */
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.directions-banner__overlay > .directions-map { z-index: 0; }
.directions-banner__overlay > *:not(.directions-map){ z-index: 1; position: relative; }
/* default (phones) */
:root{ --rail-w: 18px; }                 /* rail width */

/* tablets */
@media (min-width: 640px){
  :root{ --rail-w: 36px; }
}

/* laptops */
@media (min-width: 1024px){
  :root{ --rail-w: 56px; }
}

/* big/ultra-wide */
@media (min-width: 1440px){
  :root{ --rail-w: 72px; }
}

.directions-banner::before,
.directions-banner::after{
  width: var(--rail-w);
}
/* ===== STAY & RATES ===== */
.stay{
  --gap: clamp(42px, 12vw, 288px);  /* increased by 50% */
  --title-size: clamp(44px, 7.8vw, 99px);  /* increased by 30% */
  padding-block: clamp(16px, 2.4vw, 28px);  /* increased by 20% */
}

.stay__grid{
  display: grid;
  grid-template-columns: 0.735fr 1.5fr;  /* purple section increased 50%, green reduced 30% */
  align-items: start;
  gap: var(--gap);
}

/* Right column */
.stay__right{ position: relative; }

/* Image wrapper so we can position the title over it */
.stay__hero{
  position: relative;
  margin: 0;
  line-height: 0; /* remove stray gaps around the image */
}
.stay__hero img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 0;
}

/* Overlapping title - DESKTOP ONLY */
@media (min-width: 1025px) {
  .stay__title{
    position: absolute;
    /* Tweak these two values to fine-tune the overlap - move title higher up */
    top: clamp(-800px, -5vw, -35px);
    left: clamp(-30px, -1.5vw, -12px);
    font-family: "Bodoni Moda", "Libre Baskerville", serif; /* same family you use elsewhere */
    font-weight: 200;                 /* not ultra-bold like the mock */
    font-size: var(--title-size);
    line-height: .9;
    letter-spacing: .02em;
    color: #1d1d1d;                   /* black-ish to match the site headings */
    z-index: 2;                       /* sits above the image */
    pointer-events: none;
  }
}

/* Right copy aligned to the right edge */
.stay__copy{
  max-width: 800px;
  margin-left: auto;                /* push against the right edge */
  text-align: right;
  padding-top: clamp(12px, 2vw, 20px);
}
.stay__copy h3{
  margin: clamp(18px, 2.9vw, 26px) 0 .4em;  /* increased by 30% */
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);  /* increased by 30% */
  letter-spacing: .12em;
  text-transform: uppercase;
}
.stay__copy p{
  margin: 0 0 1em;
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
  font-size: clamp(18px, 2.1vw, 21px);  /* increased by 30% */
  line-height: 1.6;
  opacity: .95;
}

/* ----- Responsive: stack on tablet/phone ----- */
@media (max-width: 980px){
  /* Stack columns vertically on small screens; show the right column first */
  .stay__grid, .stay-grid {
    /* switch to a column stack with reversed order so the right column appears above the left */
    display: flex;
    flex-direction: column-reverse;
    gap: clamp(16px, 4vw, 28px); /* add comfortable vertical spacing */
  }
  .stay__title{
    /* bring the title inside the image area a bit on small screens */
    top: clamp(px, 2vw, 18px);
    left: clamp(8px, 3vw, 18px);
    color: #1d1d1d;
  }
  .stay__copy{
    max-width: 100%;
    text-align: left;               /* easier to read on phones */
    margin: clamp(8px, 2vw, 16px) auto 0;
  }
}

/* Smooth gap transitions for responsive design */
@media (max-width: 1200px) {
  .stay-grid, .stay__grid { 
    gap: clamp(15px, 8vw, 160px); /* Smooth transition from 160px to 15px */
  }
}
@media (max-width: 1024px) {
  .stay-grid, .stay__grid { 
    gap: clamp(15px, 6vw, 96px); /* Smooth transition from 96px to 15px */
  }
}
/* — RSVP “hero” — */
.rsvp-hero{
  position: relative;
  color: var(--cream);
  text-align: center;
  padding: clamp(56px,7vw,88px) 0 clamp(42px,6vw,70px);
  
  /* your background image stays on the element as you have it */
  overflow: hidden;
}

/* coral side columns that grow with screen width */
.rsvp-hero::before,
.rsvp-hero::after{
  content:"";
  position:absolute; inset:0;
  width: clamp(18px, 5vw, 56px);   /* adjustable column breadth */
  background: var(--coral);
  z-index: 0;
}
.rsvp-hero::before{ right:auto; }
.rsvp-hero::after{  left:auto;  right:0; }

/* keep RSVP content above the columns */
.rsvp-hero > *{ position: relative; z-index: 1; }

/* RSVP title + blurb */
.rsvp-hero .rsvp-title,
#rsvp .rsvp-title{
  font-family: "Bodoni Moda", "Libre Baskerville", serif;
  font-weight: 400;                 /* not bold */
  font-size: clamp(36px,5.5vw,64px);
  letter-spacing:.02em;
  margin: 0 0 .25em;
}
.rsvp-hero .rsvp-sub{
  font-family: "Libre Baskerville", serif;
  font-size: clamp(14px,1.8vw,18px);
  line-height: 1.7;
  max-width: 900px;
  margin: 0 auto .9rem;
  opacity:.95;
}

/* RSVP button matches coral style, slight darken on hover */
.rsvp-hero .btn,
#rsvp .btn{
  background: var(--coral);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .8rem 1.4rem;
  font: 700 12px/1.1 "Inter", system-ui, sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.rsvp-hero .btn:hover{ background: var(--coral-deep); }
/* RSVP background image + subtle dark veil (sits UNDER the coral columns) */
.rsvp-hero{
  /* replace this path with your RSVP hero photo */
  background:
    linear-gradient(rgba(10,10,10,.22), rgba(10,10,10,.22)),
    url("assets/img/6.jpg") center/cover no-repeat !important;

  /* keep your previous spacing/colors */
  position: relative;
  color: #fff;
}

/* keep the coral columns behind content but above the bg image */
.rsvp-hero::before,
.rsvp-hero::after{
  content:"";
  position:absolute; inset:0;
  width: clamp(18px, 5vw, 56px);
  background: var(--coral);
  z-index: 0;              /* columns above the bg but below text */
}
.rsvp-hero::before{ right:auto; }
.rsvp-hero::after{  left:auto;  right:0; }

.rsvp-hero > *{ position: relative; z-index: 1; }  /* text above everything */
/* ========== FAQ section ========== */
.faq-footer {
  background: var(--cream);          /* you already have this token */
  font-family: "Libre Baskerville", serif;
  color: #2b2b2b;
}

/* Big headline "FAQ'S" – coral, refined serif, centered */
.faq-footer h2.display-center{
  margin: clamp(16px, 3vw, 28px) 0 clamp(24px, 4vw, 40px);
  text-align: center;
  font-family: "ALTMariaClara-Regular", "Bodoni Moda", "Libre Baskerville", serif;
  font-weight: 500;                  /* not too heavy */
  letter-spacing: .02em;
  font-size: clamp(40px, 5.2vw, 72px);
  color: var(--coral);
}

/* 3 equal columns with subtle vertical dividers */
.faq-footer .faq-cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(20px, 3vw, 48px);
  max-width: 1200px;
  margin: 0 auto;
}
.faq-footer .faq-cols > div{
  padding: 0 clamp(10px, 2vw, 24px);
  position: relative;
}
.faq-footer .faq-cols > div + div::before{
  content:"";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(227,126,102,.35);   /* coral divider */
}

/* Small section titles (kickers) */
.faq-footer .kicker{
  margin: 1.25rem 0 .5rem;
  font: 700 clamp(11px, 1.4vw, 14px) "ALTMariaClara-Regular", "Libre Baskerville", serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral);                 /* coral, per request */
}

/* Body copy */
.faq-footer p{
  margin: .4rem 0 .8rem;
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.75;
  color: #2b2b2b;
}

/* Add a thin separator line before each new sub-section */
.faq-footer .kicker:not(:first-child){
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(227,126,102,.28);
}

/* Stack columns on small screens */
@media (max-width: 900px){
  .faq-footer .faq-cols{
    grid-template-columns: 1fr;
  }
  .faq-footer .faq-cols > div + div::before{ display:none; }
}

/* ========== CONTACT STRIP (green -> coral) ========== */
.faq-footer .green-strip{
  background: var(--coral) !important;     /* swap to coral */
  color: #fff;
  margin-top: clamp(28px, 4vw, 48px);
}
.faq-footer .green-strip .strip-inner{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(14px, 2.2vw, 22px) clamp(12px, 3vw, 24px);
}
.faq-footer .green-strip .kicker{
  color: #fff;
  letter-spacing: .12em;
  font-weight: 700;
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
}
.faq-footer .green-strip .mini{
  display: inline-block;
  margin-top: .25rem;
  font: 400 clamp(13px, 1.5vw, 15px) "ALTMariaClara-Regular", "Libre Baskerville", serif;
  opacity: .95;
}

/* Responsive for the strip as well */
@media (max-width: 800px){
  .faq-footer .green-strip .strip-inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* === FAQ: keep headline + kickers BLACK === */
.faq-footer h2.display-center{
  color: #141414;                 /* black title */
  font-weight: 500;               /* same elegant weight */
}

.faq-footer .kicker{
  color: #141414;                 /* black kickers */
}

/* (optional) keep coral for dividers only */
.faq-footer .faq-cols > div + div::before,
.faq-footer .kicker:not(:first-child){
  /* leave these as-is if you liked the coral separators */
  color: inherit;
}

/* === Coral contact strip: smaller typography === */
.faq-footer .green-strip{
  background: var(--coral) !important;
}

.faq-footer .green-strip .strip-inner{
  padding: clamp(10px, 1.6vw, 16px) clamp(12px, 2.4vw, 20px);
  row-gap: 6px;
}

.faq-footer .green-strip .kicker{
  font-size: clamp(10px, 1.05vw, 12px);   /* smaller */
  letter-spacing: .14em;
  font-weight: 700;
  color: #fff;
  font-family: "ALTMariaClara-Regular", "Libre Baskerville", serif;
}

.faq-footer .green-strip .mini{
  font-size: clamp(11px, 1.15vw, 13px);   /* smaller info text */
  opacity: .95;
  color: #fff;
}
/* --- Stay & Rates: give the section breathing room and a stack context --- */
#stay-rates,
.stay-rates,
section.stayrates {
  position: relative;           /* new stacking context so it sits above the map's overlay */
  z-index: 1;
  background: var(--cream, #f6f1ea);
  
  /* make it start below the map banner */
  padding-top: clamp(38px, 4.8vw, 84px);  /* increased by 20% */

  /* and give extra room at the bottom so nothing clips */
  padding-bottom: clamp(48px, 7.2vw, 120px);  /* increased by 20% */

  /* ensure the section is tall enough on sparse content screens */
  min-height: clamp(780px, 95vh, 1200px);
}

/* If your right image is inside a figure/wrapper, prevent it from
   pulling the section’s height by absolute/float styles elsewhere */
#stay-rates img,
.stay-rates img,
section.stayrates img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* In case the directions banner used negative margins or fixed bg,
   make sure we’re not visually tucked under it */
#directions {
  margin-bottom: 0;     /* keep sections flush */
}
/* === DIRECTIONS (map banner) — contain everything === */
#directions.directions-banner{
  position: relative;          /* creates its own stacking context */
  z-index: 0;                  /* lives “under” the next section */
  overflow: hidden;            /* nothing can spill into the next section */
  /* If you previously used background-attachment: fixed, disable it here: */
  background-attachment: scroll;
}

/* the overlay (button layer) must be confined inside the banner */
#directions .directions-banner__overlay{
  position: absolute;
  inset: 0;                    /* top:0 right:0 bottom:0 left:0 */
  display: grid;
  place-items: center;
  padding-bottom: clamp(24px, 5vw, 56px);
  z-index: 1;                  /* above the map but below the next section */
}

/* keep the button clickable even though overlay is a grid */
#directions .directions-banner__btn{
  pointer-events: auto;
}

/* side olive columns: make sure they're ABSOLUTE (not fixed)
   so they end with the section and never overlap the next one */
#directions.directions-banner::before,
#directions.directions-banner::after{
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(22px, 6vw, 100px);  /* auto-scales by screen width */
  background: var(--olive, #7F8865);
  z-index: 0;                      /* under the overlay & button */
}
#directions.directions-banner::before{ left: 0; }
#directions.directions-banner::after { right: 0; }

/* guard against any negative margins that may cause overlap */
#directions.directions-banner{ margin-bottom: 0 !important; }

/* === STAY & RATES — ensure it sits above the banner and has some top space === */
#stay-rates,
.stay-rates,
section.stayrates{
  position: relative;
  z-index: 2;                     /* paint above #directions */
  padding-top: clamp(34px, 4.2vw, 72px);  /* increased by 20% */
  /* optional: a little bottom space so nothing touches the next section */
  padding-bottom: clamp(43px, 6vw, 96px);  /* increased by 20% */
  background: var(--cream, #F6F1EA);
}

/* If your map banner had an unusually small height, give it one so it
   doesn’t pull the next section upward visually */
#directions.directions-banner{
  min-height: clamp(320px, 55vh, 520px);
}

/* 1) Make the map banner a solid block with a bit of extra depth */
#directions.directions-banner{
  position: relative;
  display: block;
  min-height: clamp(360px, 55vh, 560px); /* keep the banner tall enough */
  padding-bottom: clamp(64px, 10vh, 140px); /* <- adds space INSIDE the banner */
  margin-bottom: 0;                         /* no collapsed margins */
  z-index: 1;
}

/* 2) The overlay (with the button) stays inside the banner */
#directions .directions-banner__overlay{
  position: absolute;
  inset: 0;                 /* sticks to the banner edges (incl. padding) */
  display: grid;
  place-items: center;
}

/* 3) Start the next section lower & keep it above the banner */
:is(#stay-rates, .stay-rates, section.stayrates){
  position: relative;
  z-index: 2;
  margin-top: clamp(64px, 8vw, 160px);   /* “two paragraphs” worth of space */
}
/* --- DIRECTIONS: keep the button near the top, centered horizontally --- */
#directions .directions-banner__overlay{
  position:absolute;
  inset:0;
  /* no grid centering here so it doesn't pull the button to the middle */
}

#directions .directions-banner__btn{
  position:absolute;
  top:clamp(28px, 6vh, 72px);   /* adjust to taste -> this lifts it back up */
  left:50%;
  transform:translateX(-50%);
  z-index:2;
}

/* --- Add OUTSIDE space below the map so the next section never overlaps --- */
#directions.directions-banner{
  margin-bottom: clamp(80px, 10vh, 140px);  /* creates the gap after the banner */
  padding-bottom: 0;                        /* keep overlay/btn sizing unaffected */
  position:relative;
  z-index:1;
}

/* --- Ensure the Stay & Rates section starts below the banner and sits above it --- */
#stay-rates,
.stay-rates,
section.stayrates{
  margin-top: 0 !important;   /* we’re using the banner's margin instead */
  position:relative;
  z-index:2;
}
/* DIRECTIONS — overlay anchors the button to the bottom center */
#directions .directions-banner__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;               /* <- bottom */
  justify-content: center;             /* <- centered */
  padding-bottom: clamp(24px, 5vh, 56px);
}

/* Button can be static inside the flex container */
#directions .directions-banner__btn{
  position: static;
  transform: none;
}
/* Choose the selector you use for this section (keep all 3 if you’re unsure) */
#stay-rates::before,
.stay-rates::before,
section.stayrates::before{
  content: "";
  display: block;
  height: clamp(48px, 4.8vw, 84px);   /* increased by 20% */
}

/* Make sure the section paints above the map */
#stay-rates,
.stay-rates,
section.stayrates{
  position: relative;
  z-index: 2;
}

/* If your title uses a negative top margin, neutralize it at section start */
#stay-rates .sr-title,
.stay-rates .sr-title,
section.stayrates .sr-title{
  margin-top: 0;            /* cancel any negative pull into the map */
  position: relative; 
  z-index: 2;
}

/* Optional: keep the title overlapping the photo only (desktop),
   by absolutely positioning it inside the photo wrapper. */
#stay-rates .sr-photo-wrap,
.stay-rates .sr-photo-wrap,
section.stayrates .sr-photo-wrap{
  position: relative;
}

@media (min-width: 900px){
  #stay-rates .sr-title,
  .stay-rates .sr-title,
  section.stayrates .sr-title{
    position: absolute;
    /* tune these two to taste so it sits partly over the right image */
    top: clamp(-40px, -5vw, -24px);
    left: clamp(-12px, -1vw, -8px);
  }
}
/* --- STAY & RATES: safe overlap, no more map collision --- */
.stay__hero{ position: relative; } /* keep title anchored to the photo */

.stay__title{
  /* small, controlled overlap over the right photo only */
  top: clamp(-32px, -2.2vw, -14px) !important;
  left: clamp(-14px, -1.2vw, -8px) !important;

  /* optional: if you want zero overlap, just use top: 0 */
  /* top: 0 !important; */
}

/* gap below the map, before Stay & Rates */
#stay-rates::before{
  content:"";
  display:block;
  height: clamp(48px, 4.8vw, 84px);  /* increased by 20% */
}
/* === STAY & RATES — roomy top padding + tunable title overlap === */
.stay, #stay-rates, .stay-rates, section.stayrates{
  /* bigger white space INSIDE the section */
  --stay-pad-top: clamp(72px, 7.2vw, 156px);   /* increased by 20% */
  padding-top: var(--stay-pad-top) !important;

  position: relative;
  z-index: 2;                                  /* above the map section */
  background: var(--cream, #f6f1ea);
}

/* keep the title anchored to the photo but with a gentle overlap */
.stay__hero{ position: relative; }
.stay__title{
  /* subtle overlap you can adjust freely */
  --stay-title-top: clamp(-800px, -2.6vw, -12px); /* <— make more negative = higher */
  top: var(--stay-title-top) !important;
  left: clamp(-14px, -1.2vw, -8px) !important;
}

/* if you previously used a fake spacer before the section, kill it */
#stay-rates::before,
.stay-rates::before,
section.stayrates::before{
  display: none !important;
}

/* keep the Directions button at the bottom of its banner */
#directions .directions-banner__overlay{
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: clamp(24px, 5vh, 56px);
}
/* Stay & Rates — give roomy top padding (edit this if needed) */
#stay-rates,
.stay,
.stay-rates,
section.stayrates{
  --stay-pad-top: clamp(96px, 8.4vw, 192px); /* increased by 20% */
  padding-top: var(--stay-pad-top) !important;
  position: relative;
  z-index: 2;
}

/* Title: kill the clamp; let us set any offset */
.stay__hero{ position: relative; }
.stay__title{
  top: var(--sr-title-top, -70px) !important;   /* <- set this wherever you want */
  left: var(--sr-title-left, -50px) !important; /* fine-tune horizontally */
}

/* =========================================================
   COMPREHENSIVE MOBILE OPTIMIZATION
   - Consolidates all mobile styles and overrides conflicts
   - Ensures green column stays centered on mobile
   ========================================================= */

/* Mobile Hero Section - Clean Implementation */
@media (max-width: 900px) {
  .hero-split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 70vh !important;
    gap: 0 !important;
  }
  
  .hero-center {
    order: 2 !important;
    min-height: 50vh !important;
    padding: 40px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-pane.left-image {
    order: 1 !important;
    min-height: 30vh !important;
  }
  
  .hero-pane.right-image {
    order: 3 !important;
    min-height: 25vh !important;
  }
  
  .date-main .big {
    font-size: 56px !important;
  }
  
  .date-main .small {
    font-size: 13px !important;
  }
}

@media (max-width: 520px) {
  .hero-split {
    min-height: calc(75vh * 0.9) !important; /* 10% smaller */
  }
  
  .hero-center {
    min-height: calc(45vh * 0.9) !important; /* 10% smaller */
    padding: 30px 16px !important;
  }
  
  .hero-pane {
    min-height: 20vh !important;
  }
  
  .date-top, .date-bot {
    font-size: calc(12px * 1.2) !important; /* 20% bigger */
  }
  
  .slashes {
    margin: 8px 0 !important;
  }
  
  .date-main .big {
    font-size: 48px !important;
  }
  
  .date-main .small {
    font-size: 11px !important;
  }
}

/* Mobile Header Optimization */
@media (max-width: 720px) {
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #faf7f1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }
  
  /* Add padding to body to account for fixed header - 20% smaller */
  body {
    padding-top: 60px !important;
  }
  
  .header-inner {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 6px 15px !important;
  }
  
  .brand {
    order: -1 !important;
  }
  
  .brand-line {
    font-size: 28px !important;
    line-height: 1 !important;
  }
  
  .brand-script {
    font-size: 18px !important;
    margin-top: 2px !important;
  }
  
  .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    justify-content: center !important;
  }
  
  .nav a {
    font-size: 10px !important;
    padding: 4px 4px !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
  }
  
  .rsvp-btn {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

/* Mobile Typography and Spacing */
@media (max-width: 900px) {
  .display-center {
    font-size: 42px !important;
  }
  
  .display-left {
    font-size: 36px !important;
  }
  
  .banner-h1 {
    font-size: 36px !important;
  }
  
  .festival-title {
    font-size: clamp(24px, 7vw, 34px) !important;
    text-align: center !important;
    line-height: 1.15 !important;
    margin: 22px auto 10px !important;
    max-width: 28ch !important;
    padding: 0 16px !important;
  }
}

/* Mobile Grid Layouts */
@media (max-width: 900px) {
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  /* Our Story Section - Clean 2x2 Grid for Mobile */
  .story-v3 .story-shell {
    position: relative !important;
  }
  
  .story-v3 .story-cluster,
  .story-v3 .polaroid-cluster {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    margin-top: 60px !important;
    margin-bottom: 30px !important;
    padding: 0 20px !important;
    position: relative !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: auto !important;
  }
  
  .story-v3 .polaroid {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: -5px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    justify-self: center !important;
    align-self: center !important;
  }
  
  .story-v3 .polaroid.p1 {
    transform: rotate(-6deg) !important;
  }
  
  .story-v3 .polaroid.p2 {
    transform: rotate(4deg) !important;
  }
  
  .story-v3 .polaroid.p3 {
    transform: rotate(-3deg) !important;
  }
  
  .story-v3 .polaroid.p4 {
    transform: rotate(5deg) !important;
  }
  
  .story-v3 .polaroid img {
    width: 100% !important;
    max-width: 180px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
  }
  
  /* Ensure text is not covered */
  .story-v3 .story-copy {
    margin-top: 30px !important;
    position: static !important;
    z-index: 1 !important;
  }
  
  /* Keep subtitle on the right side */
  .story-v3 .story-hand {
    position: absolute !important;
    top: 10px !important;
    right: 20px !important;
    text-align: right !important;
    margin: 0 !important;
    font-size: clamp(16px, 4vw, 22px) !important;
  }
  
  .stay-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(560px, 1.2fr);
    align-items: start;
    gap: 288px; /* match .stay-grid */
  }
  
  .stay__title {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 0 20px 0 !important;
    text-align: center !important;
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  
  .stay-left {
    order: 2 !important;
  }
  
  .display-left {
    font-size: 24px !important;
    margin: 0 0 15px 0 !important;
  }
  
  .stay__hero {
    position: relative !important;
    margin-top: 0 !important;
  }
  
  .stay__hero img {
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }
  
  .stay-left-img {
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
  }
  
  .stay__right img {
    width: 100% !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
  }
  
  /* Force proper order */
  .stay {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .travel-columns {
    grid-template-columns: 1fr !important;
  }
  
  /* Getting There Section - Keep original web format, just reduce image sizes */
  .travel__media {
    display: grid !important;
    grid-template-columns: 0.32fr 0.36fr 0.32fr !important; /* Keep original 3-column layout */
    gap: 26px !important; /* Keep original gap */
    margin: 42px 0 22px !important; /* Keep original margins */
  }
  
  /* Ensure no gap between images and title on small mobile */
  .travel__head {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Reduce image sizes by 50% but keep original layout */
  .travel__img {
    width: 100% !important;
    height: 100px !important; /* 50% of 200px */
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  
  .travel__img--big {
    height: 150px !important; /* 50% of 300px */
  }
  
  /* Keep original 3-column grid for content */
  .travel__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* Keep original 3-column layout */
    gap: 28px !important; /* Keep original gap */
  }
  
  .travel__col {
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(27,27,27,.08) !important;
    padding-top: 0.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .travel__col:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Compact the travel section more on mobile */
  .travel__grid {
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .travel__col h3,
  .travel__col p {
    margin-bottom: 0.3rem !important;
  }
  
  .travel__list li {
    padding: 0.2rem 0 !important;
  }
  
  /* Make travel section h3 titles use strong styling */
  .travel__col h3 {
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 1em !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: block !important;
    margin-bottom: 0.3rem !important;
    color: var(--ink) !important;
    font-style: normal !important;
    text-decoration: none !important;
  }
  
  /* Override any existing travel__sub styling to match strong */
  .travel__sub {
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 1em !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: block !important;
    margin-bottom: 0.3rem !important;
    color: var(--ink) !important;
    font-style: normal !important;
    text-decoration: none !important;
  }
  
  /* Style "OUR RECOMMENDATIONS AND MORE INFORMATION" to match strong elements */
  .travel__sub {
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 1em !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: block !important;
    margin-bottom: 0.3rem !important;
    color: var(--ink) !important;
  }
  
  /* Remove purple boxes and reduce spacing between divs */
  .travel__col {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding-top: 0.3rem !important;
    margin-top: 0.3rem !important;
    margin-bottom: 0.3rem !important;
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
  }
  
  .travel__col:first-child {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Remove any purple dashed borders */
  .travel__col * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Target any pseudo-elements that might be creating purple boxes */
  .travel__col::before,
  .travel__col::after {
    display: none !important;
  }
  
  .faq-footer .faq-cols {
    grid-template-columns: 1fr !important;
  }
  
  .strip-inner {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile Modal Optimization */
@media (max-width: 560px) {
  .modal {
    margin: 10px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }
  
  .modal-header {
    padding: 16px 20px 12px !important;
  }
  
  .modal-body {
    padding: 0 20px 20px !important;
  }
  
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Additional Mobile Fixes for Better Control */
@media (max-width: 720px) {
  /* Force header to be truly fixed */
  .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 9999 !important;
  }
  
  /* Ensure body has proper spacing */
  body {
    padding-top: 90px !important;
  }
  
  /* Fix section scrolling - ensure sections start at the right position */
  section[id] {
    scroll-margin-top: 70px !important;
  }
  
  #our-story {
    scroll-margin-top: 70px !important;
  }
  
  #stay {
    scroll-margin-top: 70px !important;
  }
  
  #travel {
    scroll-margin-top: 70px !important;
  }
  
  #schedule {
    scroll-margin-top: 70px !important;
  }
  
  #rsvp {
    scroll-margin-top: 70px !important;
  }
  
  #faq {
    scroll-margin-top: 70px !important;
  }
  
  /* Our Story - Clean grid layout for smaller screens */
  .story-v3 .story-cluster,
  .story-v3 .polaroid-cluster {
    grid-auto-rows: auto !important;
    gap: 6px !important;
    padding: 0 15px !important;
    max-width: 400px !important;
    margin-top: 50px !important;
  }
  
  .story-v3 .polaroid {
    width: auto !important;
    max-width: 100% !important;
    margin: -8px !important;
    padding: 0 !important;
    background: transparent !important;
    justify-self: center !important;
    align-self: center !important;
  }
  
  .story-v3 .polaroid img {
    width: 100% !important;
    max-width: 160px !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
  }
  
  /* Stay & Rates - Even smaller photos on very small screens */
  .stay__hero img {
    height: 80px !important;
  }
  
  .stay-left-img,
  .stay__right img {
    height: 80px !important;
  }
  
  /* Stay & Rates - Force title to very top */
  .stay {
    position: relative !important;
  }
  
  .stay__title {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 0 20px 0 !important;
    padding: 20px 0 0 0 !important;
  }
}

/* ========== COMPREHENSIVE MOBILE & IPAD RESPONSIVE FIXES ========== */

/* Global mobile fixes */
@media (max-width: 1024px) {
  /* Ensure all containers fit within viewport with smooth transitions */
  .container {
    max-width: 100% !important;
    padding: 0 clamp(15px, 4vw, 20px) !important; /* Smooth padding transition */
  }
  
  /* Fix hero section with smooth transitions */
  .hero-split {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: clamp(20px, 5vw, 40px) clamp(15px, 4vw, 20px) !important; /* Smooth padding transition */
  }
  
  .hero-center {
    padding: 40px 20px !important;
    text-align: center !important;
  }
  
  /* Fix festival section */
  .festival-banner {
    padding: 40px 20px !important;
  }
  
  .festival-days {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    max-width: 100% !important;
  }
  
  /* Fix story section */
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 0 20px !important;
  }
  
  .story-photo {
    margin: 0 auto !important;
    max-width: 100% !important;
  }
  
  /* Fix weekend section */
  .wknd__grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 0 20px !important;
  }
  
  /* Fix travel section */
  .travel__media {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px !important;
  }
  
  .travel__grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 0 20px 40px !important;
  }
  
  /* Fix stay section with smooth transitions */
  .stay__grid {
    grid-template-columns: 1fr !important;
    gap: clamp(15px, 4vw, 30px) !important; /* Smooth gap transition */
  }
  
  /* Override the large gap for smaller screens */
  .stay-grid {
    gap: clamp(15px, 4vw, 30px) !important; /* Smooth gap transition */
  }
  
  .stay__copy {
    max-width: 100% !important;
    text-align: left !important;
    margin: 15px 0 !important;
  }
  
  /* Increase image sizes on mobile */
  .stay__hero img {
    height: 200px !important;
    object-fit: cover !important;
  }
  
  .stay-left-img {
    height: 180px !important;
    object-fit: cover !important;
  }
  
  /* Fix RSVP section */
  .rsvp-hero__inner {
    padding: 40px 20px !important;
    width: 100% !important;
  }
  
  /* Fix FAQ section */
  .faq-footer .faq-cols {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    padding: 0 20px !important;
  }
  
  .faq-footer .green-strip .strip-inner {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 20px !important;
  }
}

/* iPad specific fixes */
@media (max-width: 768px) and (min-width: 481px) {
  .container {
    padding: 0 30px !important;
  }
  
  .hero-center {
    padding: 50px 30px !important;
  }
  
  .festival-banner {
    padding: 50px 30px !important;
  }
  
  .story-grid {
    padding: 0 30px !important;
  }
  
  .wknd__grid {
    padding: 0 30px !important;
  }
  
  .travel__grid {
    padding: 0 30px 50px !important;
  }
  
  .faq-footer .faq-cols {
    padding: 0 30px !important;
  }
  
  /* iPad Stay section improvements */
  .stay__grid {
    gap: 20px !important;
  }
  
  .stay-grid {
    gap: 20px !important;
  }
  
  .stay__hero img {
    height: 250px !important;
  }
  
  .stay-left-img {
    height: 220px !important;
  }
}

/* Mobile specific fixes */
@media (max-width: 480px) {
  .container {
    padding: 0 15px !important;
  }
  
  .hero-center {
    padding: 30px 15px !important;
  }
  
  .festival-banner {
    padding: 30px 15px !important;
  }
  
  .story-grid {
    padding: 0 15px !important;
  }
  
  .wknd__grid {
    padding: 0 15px !important;
  }
  
  .travel__grid {
    padding: 0 15px 30px !important;
  }
  
  .faq-footer .faq-cols {
    padding: 0 15px !important;
  }
  
  /* Mobile Stay section improvements */
  .stay__grid {
    gap: 10px !important;
  }
  
  .stay-grid {
    gap: 10px !important;
  }
  
  .stay__copy {
    margin: 10px 0 !important;
  }
  
  .stay__hero img {
    height: 160px !important;
  }
  
  .stay-left-img {
    height: 140px !important;
  }
  
  /* Ensure all text is readable */
  .festival-title {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2 !important;
  }
  
  .day__name {
    font-size: clamp(20px, 5vw, 24px) !important;
  }
  
  .day__nick {
    font-size: clamp(16px, 4vw, 20px) !important;
  }
}

/* Final override: ensure Stay section stacks with left column first on mobile */
@media (max-width: 1024px) {
  /* Target the grid/container used in markup and force left column first */
  .stay .stay-grid, .stay .stay__grid, .stay-grid, .stay__grid {
    display: flex !important;
    flex-direction: column !important; /* left column first */
    align-items: stretch !important;
    gap: 20px !important;
  }

  /* Ensure correct ordering for the inner blocks */
  .stay-left { 
    order: 2 !important; 
    width: 100% !important; 
    display: flex !important;
    flex-direction: column !important;
  }
  .stay__right { order: 1 !important; width: 100% !important; }
  
  /* Move the right column image (10.jpg) to the very top of the section - HIGH SPECIFICITY */
  section#stay .stay__right .stay__hero,
  .stay .stay__right .stay__hero,
  .stay__right .stay__hero {
    display: block !important;
    order: -3 !important; /* Make this the absolute first element */
    width: 50% !important;
    height: auto !important;
    margin: 0 auto 20px auto !important;
    max-width: 300px !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  
  
  /* Make the right column image the same size */
  section#stay .stay__hero img,
  .stay .stay__hero img,
  .stay__hero img {
    width: 50% !important;
    height: auto !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    max-width: 300px !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  
  /* Move the left column image (2.jpg) above the text - HIGH SPECIFICITY */
  section#stay .stay-left .stay-left-img,
  .stay .stay-left .stay-left-img,
  .stay-left .stay-left-img {
    order: -1 !important; /* Appears above the text content */
    width: 50% !important;
    height: auto !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    max-width: 300px !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* Left-align all content in mobile except images */
  .stay-left {
    text-align: left !important;
  }
  
  /* Override text-align for images to center them */
  .stay-left .stay-img.stay-left-img {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  
  /* Ensure the parent container allows centering */
  .stay-left {
    text-align: left !important;
  }
  
  /* Force centering for the specific image */
  section#stay .stay-left .stay-img.stay-left-img {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    align-self: center !important; /* For flexbox centering */
  }
  
  /* Use flexbox to center images in parent containers */
  .stay-left {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center all children */
    justify-content: flex-start !important;
  }
  
  /* Override flex alignment for text content to be left-aligned */
  .stay-left h2,
  .stay-left p,
  .stay-left .kicker,
  .stay-left .fine {
    align-self: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }
  
  /* Force image centering with flexbox */
  .stay-left .stay-img.stay-left-img {
    align-self: center !important;
    margin: 0 auto 10px auto !important;
    width: 60% !important;
    max-width: 360px !important;
    min-width: 240px !important;
  }
  
  /* Extra specific rule for image 2.jpg */
  .stay-left img[src="assets/img/2.jpg"] {
    align-self: center !important;
    margin: 0 auto 10px auto !important;
    width: 60% !important;
    max-width: 360px !important;
    min-width: 240px !important;
  }
  
  .stay__copy {
    text-align: left !important;
  }
  
  /* Make the main title bigger and bold on mobile */
  .stay-left .display-left {
    font-size: clamp(28px, 6vw, 36px) !important;  /* reduced size to fit 2 lines better */
    font-weight: 700 !important;
    line-height: 1.2 !important;  /* increased line-height for better 2-line display */
    text-align: left !important;
    white-space: normal !important;  /* ensure line breaks work */
  }

  /* Override conflicting rules for stay images - HIGH SPECIFICITY */
  section#stay .stay-left .stay-img.stay-left-img,
  section#stay .stay-left .stay-left-img,
  .stay .stay-left .stay-img.stay-left-img,
  .stay .stay-left .stay-left-img,
  .stay-left .stay-img.stay-left-img,
  .stay-left .stay-left-img {
    width: 50% !important;
    height: auto !important;
    max-width: 300px !important;
    object-fit: cover !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    order: -1 !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  
  /* Override ALL conflicting height rules for stay__hero img - MAXIMUM SPECIFICITY */
  section#stay .stay__right .stay__hero img,
  section#stay .stay__hero img,
  .stay .stay__right .stay__hero img,
  .stay .stay__hero img,
  .stay__right .stay__hero img,
  .stay__hero img {
    width: 50% !important;
    height: auto !important;
    max-width: 300px !important;
    object-fit: cover !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    order: -3 !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
  
  /* Ensure the stay__hero container also has the same size constraints */
  section#stay .stay__right .stay__hero,
  .stay .stay__right .stay__hero,
  .stay__right .stay__hero {
    width: 50% !important;
    max-width: 300px !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
    order: -3 !important;
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  
  /* FINAL OVERRIDE: Force both images to be the same size on mobile - 20% bigger */
  section#stay .stay__right .stay__hero img {
    width: 60% !important; /* 20% bigger than 50% */
    height: auto !important;
    max-width: 360px !important; /* 20% bigger than 300px */
    min-width: 240px !important; /* 20% bigger than 200px */
    object-fit: cover !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
  }
  
  section#stay .stay-left .stay-img.stay-left-img {
    width: 60% !important; /* 20% bigger than 50% */
    height: auto !important;
    max-width: 360px !important; /* 20% bigger than 300px */
    min-width: 240px !important; /* 20% bigger than 200px */
    object-fit: cover !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
  }

  /* MOBILE: Hide original title and create new left-aligned one */
  .stay__title {
    display: none !important;
  }
  
  /* Create new title below image, above inventory text */
  .stay__copy::before {
    content: "STAY &\A RATES";
    display: block !important;
    font-family: "Bodoni Moda", "Libre Baskerville", serif !important;
    font-weight: 200 !important;
    font-size: calc(var(--title-size) * 0.9) !important; /* 10% smaller */
    line-height: 0.9 !important;
    letter-spacing: 0.02em !important;
    color: #1d1d1d !important;
    text-align: left !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    white-space: pre-line !important;
    order: -1 !important; /* Above inventory text */
  }

  /* MOBILE: Left-align FAQ title */
  .faq-footer h2.display-center {
    text-align: left !important;
  }
  
  /* Use flexbox to center the right column image */
  .stay__right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Center all children */
  }
  
  /* Override flex alignment for text content to be left-aligned */
  .stay__right h3,
  .stay__right p {
    align-self: flex-start !important;
    text-align: left !important;
  }
  
  /* Center the hero image with flexbox */
  .stay__right .stay__hero {
    align-self: center !important;
  }
  
  .stay .stay__right .stay__hero img,
  .stay__right .stay__hero img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  
  .stay .stay-left .stay-img.stay-left-img,
  .stay-left .stay-img.stay-left-img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  
  /* Reduce the green section height by 50% - reduce padding and spacing */
  section#stay {
    padding-top: 48px !important; /* Reduced from 96px */
    padding-bottom: 48px !important; /* Reduced from 96px */
  }
  
  section#stay .stay-grid.container {
    gap: 10px !important; /* Reduced from 20px */
    margin-bottom: 0 !important;
  }
  
  section#stay .stay-left {
    margin-bottom: 10px !important;
  }
  
  section#stay .stay__right {
    margin-bottom: 10px !important;
  }
  
  /* Reduce spacing between text elements */
  section#stay .stay-left p {
    margin-bottom: 8px !important;
  }
  
  section#stay .stay-left .kicker {
    margin-bottom: 8px !important;
  }
  
  section#stay .stay-left .fine {
    margin-bottom: 8px !important;
  }
  
  /* FAQ Mobile Styles: Bold h5.kickers, 10% bigger, perfectly left-aligned text, reduced margins */
  .faq-footer h5.kicker {
    font-weight: 700 !important; /* Make h5.kickers bold */
    font-size: clamp(14.52px, 1.815vw, 18.48px) !important; /* 10% bigger than previous */
    text-align: left !important; /* Left-align h5.kickers */
    margin: 1.25rem 0 .5rem !important;
    margin-left: 0 !important; /* Force left alignment */
    padding-left: 0 !important; /* Remove any left padding */
  }
  
  .faq-footer p {
    text-align: left !important; /* Left-align all paragraph text */
    margin: .4rem 0 .8rem !important;
    margin-left: 0 !important; /* Force left alignment */
    padding-left: 0 !important; /* Remove any left padding */
  }
  
  .faq-footer .green-strip h5.kicker {
    text-align: left !important; /* Left-align contact strip h5.kickers */
    font-weight: 700 !important; /* Make contact h5.kickers bold */
    font-size: clamp(13.2px, 1.375vw, 15.84px) !important; /* 10% bigger than previous */
    margin-left: 0 !important; /* Force left alignment */
    padding-left: 0 !important; /* Remove any left padding */
  }
  
  .faq-footer .green-strip .mini {
    text-align: left !important; /* Left-align contact strip text */
    font-size: clamp(17.16px, 1.98vw, 19.8px) !important; /* 10% bigger than previous */
    margin-left: 0 !important; /* Force left alignment */
    padding-left: 0 !important; /* Remove any left padding */
  }
  
  /* Align all footer text and use consistent font size */
  .faq-footer .green-strip .strip-inner {
    text-align: left !important;
  }
  
  .faq-footer .green-strip .kicker,
  .faq-footer .green-strip .mini {
    font-size: clamp(12px, 1.2vw, 14px) !important; /* Same size as "NEED HELP" text */
    font-family: "Libre Baskerville", serif !important; /* Same font as "NEED HELP" text */
    font-weight: 400 !important; /* Normal weight like "NEED HELP" text */
    letter-spacing: normal !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
  }
  
  /* Keep hyperlinks functional */
  .faq-footer .green-strip a {
    color: #fff !important;
    text-decoration: underline !important;
  }
  
  /* Mobile: Force left alignment for all footer text */
  @media (max-width: 1024px) {
    .faq-footer .green-strip .strip-inner {
      text-align: left !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
    }
    
    .faq-footer .green-strip .kicker,
    .faq-footer .green-strip .mini,
    .faq-footer .green-strip h5,
    .faq-footer .green-strip p,
    .faq-footer .green-strip div {
      text-align: left !important;
      margin-left: 0 !important;
      padding-left: 0 !important;
      justify-self: flex-start !important;
      align-self: flex-start !important;
    }
    
  /* Force all text elements to be left-aligned */
  .faq-footer .green-strip * {
    text-align: left !important;
  }
}

/* Medium screens (iPad Pro) - Use mobile formatting */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Use mobile header for iPad Pro */
  .header {
    padding: 12px 0 !important;
    background: #FAF7F1 !important;
  }
  
  .header-inner {
    flex-direction: column !important;
    gap: 15px !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 0 20px !important;
  }
  
  .nav {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
  }
  
  .nav a {
    font-size: 14px !important;
    padding: 8px 12px !important;
    color: #2D2D2D !important;
    background: transparent !important;
  }
  
  .brand {
    order: -1 !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  
  .brand .kicker {
    font-size: 24px !important;
    color: #2D2D2D !important;
  }
  
  .brand .sub {
    font-size: 18px !important;
    color: #2D2D2D !important;
  }
  
  .rsvp-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
    background: #E37E66 !important;
    color: white !important;
    border-radius: 4px !important;
  }
  
  /* Weekend schedule - Use mobile formatting */
  #schedule .wknd__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    display: grid !important;
  }
  
  #schedule .day {
    padding: 20px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    position: relative !important;
    display: block !important;
    text-align: center !important;
  }
  
  #schedule .day:last-child {
    border-bottom: none !important;
  }
  
  /* Center day nicknames (Welcome Party, Ceremony + Party) */
  #schedule .day__nick {
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  
  /* Center day names (Friday, Saturday) */
  #schedule .day__name {
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  
  /* Center day meta (DAY ONE, DAY TWO, hours) */
  #schedule .day__meta {
    text-align: center !important;
    margin-bottom: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  #schedule .day__meta .label {
    text-align: center !important;
    display: block !important;
    margin-bottom: 5px !important;
    width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
    align-self: center !important;
  }
  
  #schedule .day__meta .hours {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    justify-self: center !important;
    align-self: center !important;
  }
  
  /* Force center alignment for label and hours spans */
  #schedule .day__meta span.label,
  #schedule .day__meta span.hours {
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  
  /* ULTIMATE CENTERING - Force day__meta to center */
  #schedule .day__meta {
    text-align: center !important;
    margin: 0 auto 15px auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Override any existing styles that might be causing left alignment */
  #schedule .day__meta * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Travel section - Keep web layout for iPad Pro */
  #travel .travel__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
  }
  
  #travel .travel__col {
    display: block !important;
    width: 100% !important;
    margin-bottom: 25px !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
  
  #travel .travel__media {
    width: 100% !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
  }
  
  /* Responsive image sizing based on screen width */
  @media (min-width: 769px) and (max-width: 900px) {
    #travel .travel__media {
      height: 120px !important;
    }
    
    #travel .travel__media img {
      height: 120px !important;
      object-fit: cover !important;
    }
  }
  
  @media (min-width: 901px) and (max-width: 1024px) {
    #travel .travel__media {
      height: 180px !important;
    }
    
    #travel .travel__media img {
      height: 180px !important;
      object-fit: cover !important;
    }
  }
  
  /* Additional responsive sizing for different iPad Pro orientations */
  @media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    #travel .travel__media {
      height: 140px !important;
    }
    
    #travel .travel__media img {
      height: 140px !important;
    }
  }
  
  @media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
    #travel .travel__media {
      height: 160px !important;
    }
    
    #travel .travel__media img {
      height: 160px !important;
    }
  }
  
  #travel .travel__head {
    margin-bottom: 20px !important;
    margin-top: 20px !important;
  }
  
  #travel .travel__head h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }
  
  #travel .travel__sub {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  
  /* Ensure proper spacing between images and text */
  #travel .travel__media {
    margin-bottom: 25px !important;
  }
  
  #travel .travel__grid {
    margin-top: 20px !important;
  }
  
  /* Prevent text overlap with images */
  #travel .travel__col {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
  }
  
  /* Ensure text has proper spacing from images */
  #travel .travel__col h3 {
    margin-top: 15px !important;
    margin-bottom: 10px !important;
  }
  
  #travel .travel__col p {
    margin-bottom: 12px !important;
    line-height: 1.5 !important;
  }
  
  /* ULTIMATE OVERLAP PREVENTION - Force clear separation */
  #travel .travel__media {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 30px !important;
    clear: both !important;
  }
  
  #travel .travel__head {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 30px !important;
    margin-bottom: 25px !important;
    clear: both !important;
  }
  
  #travel .travel__grid {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 30px !important;
    clear: both !important;
  }
  
  /* Force all text content to be below images */
  #travel .travel__col {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    clear: both !important;
  }
  
  /* Prevent any absolute positioning that could cause overlap */
  #travel .travel__media * {
    position: static !important;
  }
  
  #travel .travel__head * {
    position: static !important;
  }
  
  #travel .travel__grid * {
    position: static !important;
  }
  
  /* Ensure images don't float or cause layout issues */
  #travel .travel__media img {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* iPad Pro Travel Section - Images at top, minimal end space */
  #travel {
    overflow: visible !important;
    position: relative !important;
    padding: 20px 0 !important;
  }
  
  /* Put all images together at the top */
  #travel .travel__media {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  
  #travel .travel__media img {
    width: 200px !important;
    height: 150px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  
  /* Text content below images */
  #travel .travel__head {
    display: block !important;
    width: 100% !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    clear: both !important;
  }
  
  /* Use mobile-style single column layout for text */
  #travel .travel__grid {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
  }
  
  #travel .travel__col {
    display: block !important;
    width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    clear: both !important;
  }
  
  /* Force all text to be below images with massive margins */
  #travel .travel__head,
  #travel .travel__grid,
  #travel .travel__col {
    margin-top: 50px !important;
  }
  
  /* Ensure no element can overlap */
  #travel * {
    position: static !important;
    float: none !important;
    transform: none !important;
  }
  
  /* Center day notes */
  #schedule .day__notes {
    text-align: center !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 1rem !important;
  }
  
  #schedule .day__notes li {
    text-align: center !important;
  }
  
  /* Center lineup titles */
  #schedule .lineup-title {
    position: static !important;
    margin-top: 20px !important;
    margin-bottom: 15px !important;
    font-size: 14px !important;
    letter-spacing: 0.1em !important;
    text-align: center !important;
  }
  
  /* Center lineup content */
  #schedule .lineup {
    position: static !important;
    margin-top: 10px !important;
    text-align: center !important;
  }
  
  #schedule .lineup .act {
    margin: 8px 0 !important;
    padding: 5px 0 !important;
    text-align: center !important;
  }
  
  #schedule .lineup .act .who,
  #schedule .lineup .act .time,
  #schedule .lineup .act .subnote {
    text-align: center !important;
  }
}
  
  /* Reduce FAQ margins by 50% and ensure left alignment */
  .faq-footer .faq-cols {
    padding: 0 10px !important; /* Reduced from 20px-30px to 10px */
    gap: 15px !important; /* Reduced gap */
  }
  
  .faq-footer .faq-cols > div {
    text-align: left !important;
    padding: 0 5px !important; /* Reduced padding */
  }
  
  /* Reduce green strip margins by 50% */
  .faq-footer .green-strip .strip-inner {
    padding: 10px !important; /* Reduced from 20px */
  }
  
  
  /* ULTIMATE OVERRIDE: Force centering with absolute positioning */
  section#stay .stay__right .stay__hero img,
  section#stay .stay-left .stay-img.stay-left-img,
  .stay .stay__right .stay__hero img,
  .stay .stay-left .stay-img.stay-left-img,
  .stay__hero img,
  .stay-left-img {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
  }
  
  /* EXTRA SPECIFIC: Target image 2.jpg with maximum specificity */
  img.stay-img.stay-left-img[src="assets/img/2.jpg"] {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
    width: 60% !important;
    max-width: 360px !important;
    min-width: 240px !important;
  }
}

/* FORCE CENTER IMAGE 2.jpg IN MIDDLE OF MOBILE PAGE */
@media (max-width: 1024px) {
  /* Force center image 2.jpg in the middle of the page */
  img[src="assets/img/2.jpg"] {
    display: block !important;
    width: 50% !important;
    max-width: 300px !important;
    min-width: 200px !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }
  
  /* Override ALL possible selectors for image 2.jpg */
  .stay-left img[src="assets/img/2.jpg"],
  .stay-left .stay-img[src="assets/img/2.jpg"],
  .stay-left .stay-left-img[src="assets/img/2.jpg"],
  section#stay .stay-left img[src="assets/img/2.jpg"],
  section#stay .stay-left .stay-img[src="assets/img/2.jpg"],
  section#stay .stay-left .stay-left-img[src="assets/img/2.jpg"] {
    display: block !important;
    width: 50% !important;
    max-width: 300px !important;
    min-width: 200px !important;
    height: auto !important;
    margin: 0 auto 10px auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }
  
  /* Force parent container to center everything */
  .stay-left,
  section#stay .stay-left {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  
  /* Keep text content left-aligned */
  .stay-left h2,
  .stay-left p,
  .stay-left .kicker,
  .stay-left .fine,
  section#stay .stay-left h2,
  section#stay .stay-left p,
  section#stay .stay-left .kicker,
  section#stay .stay-left .fine {
    text-align: left !important;
    align-self: flex-start !important;
    width: 100% !important;
  }
}

/* FORCE CENTER IMAGE 2.jpg - MAXIMUM SPECIFICITY */
@media (max-width: 1024px) {
  /* Target the exact image with all possible selectors */
  img.stay-img.stay-left-img[src="assets/img/2.jpg"],
  .stay-left img.stay-img.stay-left-img[src="assets/img/2.jpg"],
  section#stay .stay-left img.stay-img.stay-left-img[src="assets/img/2.jpg"] {
    display: block !important;
    margin: 0 auto 10px auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 60% !important;
    max-width: 360px !important;
    min-width: 240px !important;
    height: auto !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  /* Force parent container to center */
  .stay-left {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  /* Keep text left-aligned */
  .stay-left h2,
  .stay-left p,
  .stay-left .kicker,
  .stay-left .fine {
    text-align: left !important;
    align-self: flex-start !important;
    width: 100% !important;
  }
}

/* MOBILE ONLY - REMOVE IMAGE SPACE AND MOVE TEXT UP */
@media (max-width: 1024px) {
  /* Target the specific image with maximum specificity */
  img[src="assets/img/2.jpg"],
  .stay-left img[src="assets/img/2.jpg"],
  .stay-left .stay-img[src="assets/img/2.jpg"],
  .stay-left .stay-left-img[src="assets/img/2.jpg"],
  section#stay .stay-left img[src="assets/img/2.jpg"],
  section#stay .stay-left .stay-img[src="assets/img/2.jpg"],
  section#stay .stay-left .stay-left-img[src="assets/img/2.jpg"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  
  /* Remove the container space for the hidden image */
  .stay-left .stay-left-img,
  .stay-left .stay-img {
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  /* Move text up by removing image space */
  .stay-left h2.display-left {
    margin-top: -20px !important;
    padding-top: 0 !important;
    margin-bottom: 10px !important;
  }
  
  /* Remove any spacing from the image container */
  .stay-left > .stay-left-img,
  .stay-left > .stay-img {
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }
  
  /* Force image size increase with maximum specificity */
  section#stay .stay__right .stay__hero img[src="assets/img/10.jpg"],
  section#stay .stay__hero img[src="assets/img/10.jpg"],
  .stay .stay__right .stay__hero img[src="assets/img/10.jpg"],
  .stay .stay__hero img[src="assets/img/10.jpg"],
  .stay__right .stay__hero img[src="assets/img/10.jpg"],
  .stay__hero img[src="assets/img/10.jpg"],
  img[src="assets/img/10.jpg"] {
    width: 400px !important;
    height: 500px !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 20px auto !important;
    object-fit: cover !important;
  }
  
  /* Reset container formatting */
  .stay__hero {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  section#stay .stay__right {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}