/* ===========================================
   Jared & Lindsay — Wedding Website
   Style: Modern + Nature
   =========================================== */

/* --- Custom Properties --- */
:root {
  --cream:        #f0edf7;
  --off-white:    #f8f5fd;
  --dark-green:   #0d0620;
  --forest-green: #2d1060;
  --sage:         #7b6aad;
  --light-sage:   #c4b8e8;
  --gold:         #c49a50;
  --gold-light:   #e6c882;
  --text:         #1a1a1a;
  --text-muted:   #4a3d6e;
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.06);
  --shadow:       0 4px 28px rgba(0,0,0,0.09);
  --radius:       12px;
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Jost', system-ui, sans-serif;
  --ease:         0.3s ease;
  --indigo:       #1a0838;
  --indigo-mid:   #2d1060;
  --indigo-light: #3d1470;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  { font-family: var(--font-sans); font-weight: 300; color: var(--text); background: var(--off-white); line-height: 1.7; }
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
ul    { list-style: none; }
button { font-family: var(--font-sans); }

/* ==========================================
   Navigation
   ========================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 22px 32px;
  transition: background var(--ease), padding var(--ease), box-shadow var(--ease);
}
.nav.scrolled {
  background: rgba(248,245,253,0.95);
  padding: 14px 32px;
  box-shadow: 0 1px 20px rgba(0,0,0,0.07);
  backdrop-filter: blur(10px);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--off-white);
  letter-spacing: 0.12em;
  transition: color var(--ease);
}
.nav.scrolled .nav-logo { color: var(--forest-green); }

.nav-links {
  display: flex;
  gap: 36px;
}
.nav-links a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  transition: color var(--ease);
}
.nav.scrolled .nav-links a { color: var(--text-muted); }
.nav-links a:hover { color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.45);
  color: white;
  padding: 6px 11px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all var(--ease);
}
.nav.scrolled .nav-toggle { border-color: var(--forest-green); color: var(--forest-green); }

/* ==========================================
   Hero
   ========================================== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  color: var(--off-white);
  overflow: hidden;

  /* Dark indigo nebula sky — sunset fading up from horizon */
  background:
    /* Nebula clouds — upper sky */
    radial-gradient(ellipse 75% 55% at 15% 30%, rgba(70,10,150,0.62) 0%, transparent 68%),
    radial-gradient(ellipse 58% 48% at 82% 18%, rgba(28,8,135,0.55) 0%, transparent 64%),
    radial-gradient(ellipse 48% 42% at 52% 50%, rgba(140,18,110,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 42% 38% at 90% 68%, rgba(12,40,140,0.36) 0%, transparent 54%),
    radial-gradient(ellipse 38% 35% at 28% 72%, rgba(80,8,120,0.20) 0%, transparent 50%),
    /* Sunset horizon — wide radial glow rising from below the bottom edge */
    radial-gradient(ellipse 170% 58% at 50% 118%,
      rgba(228,98,18,0.94) 0%,
      rgba(205,60,15,0.76) 14%,
      rgba(162,26,70,0.54) 30%,
      rgba(100,10,80,0.28) 46%,
      transparent 62%),
    /* Dusk colour band — linear fade up from very bottom */
    linear-gradient(180deg,
      transparent 50%,
      rgba(108,14,62,0.28)  65%,
      rgba(175,50,14,0.52)  78%,
      rgba(222,94,18,0.72)  90%,
      rgba(240,116,22,0.88) 100%),
    /* Base dark-indigo sky */
    linear-gradient(150deg, #03010a 0%, #08041a 25%, #110730 50%, #08041a 75%, #040810 100%);
}

/* Animated nebula overlay — slowly breathes/shifts (upper 75% only) */
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 75%;   /* stop well above the sunset band */
  background:
    radial-gradient(ellipse 60% 55% at 35% 45%, rgba(90,15,170,0.42) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 68% 28%, rgba(40,10,160,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 18% 72%, rgba(100,10,80,0.20) 0%, transparent 55%);
  animation: nebulaDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes nebulaDrift {
  0%   { opacity: 0.6; transform: scale(1)    translateX(0px)   translateY(0px); }
  33%  { opacity: 0.9; transform: scale(1.04) translateX(14px)  translateY(-9px); }
  66%  { opacity: 0.7; transform: scale(0.97) translateX(-9px)  translateY(11px); }
  100% { opacity: 1.0; transform: scale(1.06) translateX(7px)   translateY(-5px); }
}

/* Star canvas (JS-driven) */
#heroStars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Pine tree + tent + RV + wedding venue scene at bottom of hero */
.hero::before {
  content: '';
  position: absolute;
  bottom: 50px; left: 0; right: 0;
  height: 300px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%233a7040' fill-opacity='0.82' d='M0 300 L32 215 L64 300 M422 300 L460 205 L498 300 M890 300 L928 212 L966 300 M1395 300 L1420 215 L1445 300'/%3E%3Cpath fill='%231e4a20' fill-opacity='0.96' d='M0 300 L28 172 L56 300 M36 300 L72 145 L108 300 M415 300 L450 162 L485 300 M455 300 L495 136 L535 300 M886 300 L922 154 L958 300 M920 300 L956 138 L992 300 M1390 300 L1416 165 L1442 300 M1408 300 L1430 148 L1452 300'/%3E%3Cpolygon fill='%23284e22' fill-opacity='0.7' points='58,300 80,262 102,300'/%3E%3Cpolygon fill='%234e8844' points='55,300 77,258 99,300'/%3E%3Crect x='76' y='258' width='2' height='42' fill='%23284e22' fill-opacity='0.55'/%3E%3Cellipse cx='135' cy='296' rx='22' ry='10' fill='%23ff7808' fill-opacity='0.30'/%3E%3Cellipse cx='135' cy='298' rx='12' ry='6' fill='%23ffb828' fill-opacity='0.82'/%3E%3Cpolygon fill='%23956c2a' fill-opacity='0.75' points='181,300 222,230 263,300'/%3E%3Cpolygon fill='%23d4a84e' points='178,300 219,226 260,300'/%3E%3Crect x='218' y='226' width='3' height='74' fill='%23704010' fill-opacity='0.55'/%3E%3Cellipse cx='292' cy='296' rx='22' ry='10' fill='%23ff7808' fill-opacity='0.30'/%3E%3Cellipse cx='292' cy='298' rx='12' ry='6' fill='%23ffb828' fill-opacity='0.82'/%3E%3Cpolygon fill='%23856028' fill-opacity='0.7' points='328,300 362,244 396,300'/%3E%3Cpolygon fill='%23c09848' points='325,300 359,240 393,300'/%3E%3Crect x='358' y='240' width='2' height='60' fill='%23705018' fill-opacity='0.55'/%3E%3Crect fill='%23d4b060' fill-opacity='0.20' x='602' y='258' width='234' height='42'/%3E%3Crect fill='%23c8c0a4' x='552' y='268' width='50' height='6' rx='2'/%3E%3Crect fill='%23beb896' x='552' y='277' width='50' height='6' rx='2'/%3E%3Crect fill='%23c8c0a4' x='552' y='286' width='50' height='6' rx='2'/%3E%3Crect fill='%23c8c0a4' x='836' y='268' width='50' height='6' rx='2'/%3E%3Crect fill='%23beb896' x='836' y='277' width='50' height='6' rx='2'/%3E%3Crect fill='%23c8c0a4' x='836' y='286' width='50' height='6' rx='2'/%3E%3Crect fill='%238b6438' x='700' y='238' width='10' height='62'/%3E%3Crect fill='%238b6438' x='748' y='238' width='10' height='62'/%3E%3Crect fill='%23a07840' x='694' y='232' width='70' height='8' rx='2'/%3E%3Cpath fill='%239a7038' fill-opacity='0.92' d='M694 232 Q729 202 764 232 Q729 212 694 232 Z'/%3E%3Cellipse cx='697' cy='220' rx='16' ry='12' fill='%232a5c22' fill-opacity='0.93'/%3E%3Cellipse cx='729' cy='207' rx='22' ry='15' fill='%233a6c2a' fill-opacity='0.93'/%3E%3Cellipse cx='761' cy='220' rx='16' ry='12' fill='%232a5c22' fill-opacity='0.93'/%3E%3Cellipse cx='716' cy='206' rx='5' ry='4' fill='%23f8eaf2' fill-opacity='0.88'/%3E%3Cellipse cx='735' cy='201' rx='5' ry='4' fill='%23fff0f8' fill-opacity='0.88'/%3E%3Cellipse cx='720' cy='196' rx='5' ry='4' fill='%23f8e0ec' fill-opacity='0.82'/%3E%3Cpolygon fill='%23284e22' fill-opacity='0.7' points='1000,300 1022,262 1044,300'/%3E%3Cpolygon fill='%234e8844' points='997,300 1019,258 1041,300'/%3E%3Crect x='1018' y='258' width='2' height='42' fill='%23284e22' fill-opacity='0.55'/%3E%3Cellipse cx='1077' cy='296' rx='22' ry='10' fill='%23ff7808' fill-opacity='0.30'/%3E%3Cellipse cx='1077' cy='298' rx='12' ry='6' fill='%23ffb828' fill-opacity='0.82'/%3E%3Cpath fill='%23d6d1be' d='M1115 300 L1115 252 L1130 240 L1260 240 L1260 300 Z'/%3E%3Crect fill='%23929080' x='1111' y='234' width='153' height='10' rx='2'/%3E%3Crect fill='%234a6c38' x='1115' y='272' width='145' height='8'/%3E%3Cpolygon fill='%2378a0b2' fill-opacity='0.70' points='1115,252 1115,272 1130,267 1130,240'/%3E%3Crect fill='%2378aabb' fill-opacity='0.88' x='1148' y='245' width='21' height='14' rx='2'/%3E%3Crect fill='%2378aabb' fill-opacity='0.88' x='1182' y='245' width='21' height='14' rx='2'/%3E%3Crect fill='%2378aabb' fill-opacity='0.88' x='1216' y='245' width='21' height='14' rx='2'/%3E%3Cellipse cx='1148' cy='299' rx='14' ry='14' fill='%23282828'/%3E%3Cellipse cx='1148' cy='299' rx='8' ry='8' fill='%23484848'/%3E%3Cellipse cx='1228' cy='299' rx='14' ry='14' fill='%23282828'/%3E%3Cellipse cx='1228' cy='299' rx='8' ry='8' fill='%23484848'/%3E%3Cellipse cx='1283' cy='296' rx='22' ry='10' fill='%23ff7808' fill-opacity='0.30'/%3E%3Cellipse cx='1283' cy='298' rx='12' ry='6' fill='%23ffb828' fill-opacity='0.82'/%3E%3Cpolygon fill='%23956c2a' fill-opacity='0.75' points='1306,300 1344,230 1382,300'/%3E%3Cpolygon fill='%23d4a84e' points='1303,300 1341,226 1379,300'/%3E%3Crect x='1340' y='226' width='3' height='74' fill='%23704010' fill-opacity='0.55'/%3E%3Crect x='0' y='296' width='1440' height='4' fill='%230a180a' fill-opacity='0.90'/%3E%3C/svg%3E") no-repeat bottom,
    linear-gradient(180deg,
      transparent              0%,
      rgba(115,14,65,0.20)    32%,
      rgba(182,52,12,0.48)    60%,
      rgba(226,98,16,0.68)    80%,
      rgba(180,72,12,0.28)   100%);
  background-size: 100% 100%, 100% 100%;
  pointer-events: none;
  z-index: 2;
}



.hero-content {
  position: relative;
  z-index: 3;
  padding: 100px 24px 48px;
  max-width: 700px;
}
.hero-pre {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
  font-weight: 400;
}
.hero-names {
  font-family: var(--font-serif);
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.025em;
  margin-bottom: 28px;
}
.hero-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 22px;
  color: var(--gold);
}
.hero-divider-line {
  width: 80px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.hero-divider-icon { font-size: 1.2rem; }

.hero-date {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.hero-venue {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.72);
  margin-bottom: 52px;
}

/* Countdown */
.countdown {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 52px;
}
.countdown-item { text-align: center; min-width: 62px; }
.countdown-item span {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--gold-light);
}
.countdown-item label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  font-size: 1.3rem;
  animation: bounce 2.2s ease-in-out infinite;
  z-index: 3;
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}

/* ==========================================
   Shared Button Styles
   ========================================== */
.btn {
  display: inline-block;
  padding: 13px 34px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--ease);
  text-align: center;
}
.btn-hero {
  border-color: rgba(255,255,255,0.65);
  color: var(--off-white);
  background: transparent;
}
.btn-hero:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--off-white);
}
.btn-primary {
  background: var(--forest-green);
  border-color: var(--forest-green);
  color: var(--off-white);
}
.btn-primary:hover {
  background: var(--dark-green);
  border-color: var(--dark-green);
}
.btn-outline {
  background: transparent;
  border-color: var(--forest-green);
  color: var(--forest-green);
}
.btn-outline:hover {
  background: var(--forest-green);
  color: var(--off-white);
}
.btn-full { width: 100%; }

/* ==========================================
   Shared Section Styles
   ========================================== */
.section { padding: 108px 24px; }
.container { max-width: 1100px; margin: 0 auto; }
.container--narrow { max-width: 620px; margin: 0 auto; }

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 300;
  text-align: center;
  color: var(--forest-green);
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.section-ornament {
  text-align: center;
  color: var(--gold);
  font-size: 1.2rem;
  margin-bottom: 52px;
}
.section-sub {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 44px;
  font-size: 0.95rem;
}
.hidden { display: none !important; }

/* ==========================================
   Our Story
   ========================================== */
.story-section {
  background: var(--cream);
  position: relative;
}
.story-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px;
}
.story-item {
  text-align: center;
  padding: 40px 32px;
  background: var(--cream);
  position: relative;
}
.story-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: var(--light-sage);
}
.story-year {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--light-sage);
  line-height: 1;
  margin-bottom: 14px;
}
.story-item h3 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--forest-green);
  margin-bottom: 14px;
}
.story-item p {
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.85;
}

/* ==========================================
   Event Details
   ========================================== */
.details-section { background: var(--off-white); }
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.detail-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 44px 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--light-sage);
  transition: transform var(--ease), box-shadow var(--ease);
}
.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.detail-icon { font-size: 2rem; margin-bottom: 18px; }
.detail-card h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--forest-green);
  font-weight: 600;
  margin-bottom: 14px;
}
.detail-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  margin-bottom: 3px;
}
.detail-time {
  font-weight: 500;
  color: var(--forest-green) !important;
}
.detail-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--forest-green);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: color var(--ease);
}
.detail-link:hover { color: var(--gold); }

/* ==========================================
   RSVP
   ========================================== */
.rsvp-section {
  background: var(--forest-green);
  color: var(--off-white);
}
.rsvp-section .section-title  { color: var(--off-white); }
.rsvp-section .section-ornament { color: var(--gold-light); }
.rsvp-section .section-sub   { color: rgba(255,255,255,0.68); }
.rsvp-section .section-sub strong { color: var(--gold-light); }

.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 12px 16px;
  color: var(--off-white);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 300;
  outline: none;
  transition: border-color var(--ease), background var(--ease);
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,0.12);
}
.form-group select option { background: var(--dark-green); color: var(--off-white); }
.form-group textarea { resize: vertical; }

.radio-group {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
  color: var(--off-white);
  cursor: pointer;
}
.radio-label input[type="radio"] {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
}

.recaptcha-wrap {
  display: flex;
  justify-content: center;
}

.rsvp-success {
  text-align: center;
  padding: 52px 0;
}
.success-icon {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark-green);
  font-size: 1.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}
.rsvp-success h3 {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 12px;
}
.rsvp-success p { color: rgba(255,255,255,0.7); }

/* ==========================================
   Travel & Registry
   ========================================== */
.travel-section { background: var(--cream); }
.travel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}
.travel-card {
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.travel-card h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--forest-green);
  font-weight: 600;
  margin-bottom: 4px;
}
.travel-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
}
.travel-card a:not(.btn) {
  color: var(--forest-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.travel-card a:not(.btn):hover { color: var(--gold); }
.travel-card .btn { align-self: flex-start; margin-top: 4px; }

.travel-highlight {
  font-weight: 500;
  color: var(--forest-green) !important;
  font-size: 1rem !important;
}
.travel-note {
  font-style: italic;
  color: var(--sage) !important;
  font-size: 0.82rem !important;
}

.registry-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}
.registry-link {
  display: block;
  padding: 11px 18px;
  border: 1.5px solid var(--light-sage);
  border-radius: 4px;
  color: var(--forest-green);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: all var(--ease);
  text-align: center;
}
.registry-link:hover {
  background: var(--forest-green);
  color: var(--off-white);
  border-color: var(--forest-green);
}

/* Nearby lodging list */
.nearby-lodging {
  margin-top: 40px;
  padding: 40px 36px;
  background: var(--off-white);
  border-radius: var(--radius);
  border: 1px solid var(--light-sage);
}
.nl-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  color: var(--forest-green);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.nl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.nl-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: 8px;
  border-left: 3px solid var(--light-sage);
}
.nl-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--forest-green);
  line-height: 1.3;
}
.nl-loc {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.nl-dist {
  font-size: 0.78rem;
  color: var(--sage);
  font-style: italic;
  margin-bottom: 4px;
}
.nl-links {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
}
.nl-links a {
  font-size: 0.82rem;
  color: var(--forest-green);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--ease);
}
.nl-links a:hover { color: var(--gold); }
.nl-note {
  margin-top: 22px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Venue highlights strip */
.venue-highlights {
  margin-top: 56px;
  padding: 40px 36px;
  background: var(--forest-green);
  border-radius: var(--radius);
  color: var(--off-white);
}
.vh-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
  color: var(--gold-light);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.vh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 24px;
}
.vh-item {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.5;
}

/* ==========================================
   Footer
   ========================================== */
.footer {
  background: var(--dark-green);
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding: 52px 24px 36px;
  position: relative;
}
.footer-inner { position: relative; z-index: 1; }
.footer-names {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--off-white);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.footer-date {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.footer-note { font-size: 0.75rem; opacity: 0.55; }

/* Easter egg trigger — intentionally nearly invisible */
.easter-egg-btn {
  position: absolute;
  bottom: 10px;
  right: 14px;
  background: none;
  border: none;
  font-size: 0.85rem;
  opacity: 0.18;
  cursor: pointer;
  transition: opacity var(--ease);
  padding: 4px;
  line-height: 1;
  filter: grayscale(0.6);
}
.easter-egg-btn:hover { opacity: 0.55; filter: grayscale(0); }

/* ==========================================
   Easter Egg Game Modal
   ========================================== */
.game-modal {
  position: fixed;
  inset: 0;
  background: rgba(8,4,18,0.93);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(5px);
}
.game-wrapper {
  background: #0c0520;
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(196,154,80,0.28);
  max-width: 860px;
  width: 100%;
  box-shadow: 0 0 60px rgba(0,0,0,0.6);
}
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.game-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--gold-light);
  letter-spacing: 0.07em;
}
.game-close {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.55);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-close:hover { background: rgba(255,255,255,0.1); color: white; }

.game-canvas-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
}
#gameCanvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Win/loss overlay on top of canvas */
.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.game-overlay.won-state  { background: rgba(8,4,18,0.82); animation: flashGold 0.6s ease 4; }
.game-overlay.lost-state { background: rgba(8,4,18,0.82); }

@keyframes flashGold {
  0%, 100% { background: rgba(8,4,18,0.82); }
  50%       { background: rgba(196,154,80,0.25); }
}

.game-overlay-content {
  text-align: center;
  padding: 32px;
}
#gameOverlayText {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 300;
  color: var(--off-white);
  margin-bottom: 28px;
  line-height: 1.45;
}
.win-line  { color: var(--gold-light); }
.lose-line { color: #ff7b7b; }

.game-controls-hint {
  margin-top: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.28);
  text-align: center;
}

/* ==========================================
   Guest Book
   ========================================== */
.guestbook-section {
  background:
    radial-gradient(ellipse 70% 50% at 20% 40%, rgba(55,8,120,0.50) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 80% 25%, rgba(30,6,110,0.45) 0%, transparent 60%),
    linear-gradient(150deg, #040112 0%, #0c051e 30%, #180840 55%, #0c051e 80%, #04010e 100%);
  color: var(--off-white);
  position: relative;
}
.guestbook-section .section-title  { color: var(--off-white); }
.guestbook-section .section-ornament { color: var(--gold-light); }
.guestbook-section .section-sub   { color: rgba(255,255,255,0.65); }

.gb-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 52px;
}

.btn-gb {
  background: rgba(196,154,80,0.18);
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
}
.btn-gb:hover {
  background: var(--gold);
  color: var(--dark-green);
}

.gb-entries-wrap { margin-top: 8px; }

.gb-empty {
  text-align: center;
  color: rgba(255,255,255,0.4);
  font-style: italic;
  padding: 40px 0;
}

.gb-entries {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gb-entry {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  padding: 28px 32px;
  border-left: 3px solid var(--gold);
  backdrop-filter: blur(6px);
  transition: transform var(--ease), background var(--ease);
}
.gb-entry:hover {
  transform: translateX(5px);
  background: rgba(255,255,255,0.09);
}

.gb-message {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.88);
  line-height: 1.85;
  margin-bottom: 16px;
}

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

.gb-name {
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.gb-date {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.38);
  font-style: italic;
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }

  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 58px; left: 0; right: 0;
    background: rgba(13,6,32,0.97);
    padding: 28px 32px;
    gap: 22px;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav-links.open a { font-size: 0.9rem; color: rgba(255,255,255,0.85); }

  .form-row { grid-template-columns: 1fr; }
  .countdown { gap: 14px; }
  .story-item:not(:last-child)::after { display: none; }
  .story-grid { gap: 0; }
  .story-item { border-bottom: 1px solid var(--light-sage); }
}

@media (max-width: 480px) {
  .section { padding: 80px 20px; }
  .hero-content { padding: 90px 20px 40px; }
  .countdown { gap: 10px; }
  .countdown-item { min-width: 52px; }
}