:root {
  --bg: #faf9f7;
  --bg-card: #fff;
  --text: #2c2a28;
  --text-muted: #6b6560;
  --accent: #8b7355;
  --accent-soft: #c4b5a0;
  --border: #e8e4df;
  --error: #b85450;
  --shadow: 0 4px 24px rgba(44, 42, 40, 0.08);
  --radius: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Login page ----- */
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: linear-gradient(160deg, #f5f2ee 0%, #ebe6e0 100%);
}

.login-page .login-card {
  flex: 0 0 auto;
}

.login-page .site-footer {
  margin-top: 2rem;
  padding-bottom: 1.5rem;
}

/* ── Envelope Intro ──────────────────────────────────────────────────────── */
.envelope-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(0.5rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background: #cbbba5 url('/images/envelope-bg.jpg') center / cover no-repeat;
  overflow: hidden;
}

/* White-out layer that covers everything */
.envelope-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
}

/* Phase: white wash covers the screen */
.envelope-overlay.phase-whiteout::before {
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.33, 0, 0.2, 1);
}

/* Phase: white fades to reveal homepage */
.envelope-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s cubic-bezier(0.2, 0, 0, 1);
}

/* Zoomed-in initial view centered on the wax seal */
.envelope-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  transform: scale(3.2);
  transform-origin: 50% 62%;
}

.envelope {
  position: relative;
  width: clamp(340px, 72vw, 560px);
  cursor: pointer;
  perspective: 1200px;
  transform-style: preserve-3d;
  isolation: isolate;
}

/* Hold sealed opaque, then short fade — avoids long semi-transparent blend (double seal / ghosting) */
@keyframes envelopeSealLift {
  0%, 86% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* ── Sealed envelope (visible on top) ──────────────────────────────────── */
.env-sealed {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
  transition: filter 0.3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── 30%-open envelope (under sealed; revealed when sealed lifts) ─ */
.env-open {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ── Envelope assets / card (inside open envelope, fades in after open) ── */
.env-assets {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}

/* Hint sits outside the scaled scene so font size is readable on all iPhones */
.envelope-hint {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  margin-top: clamp(0.65rem, 2.5vh, 1.1rem);
  max-width: 18rem;
  padding: 0 1.25rem;
  box-sizing: border-box;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.95rem, 3.6vw, 1.12rem);
  font-style: italic;
  color: #4a3f35;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
  animation: hintPulse 2.5s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}

/* ── Hover on sealed envelope ──────────────────────────────────────────── */
.envelope:not(.opening):hover .env-sealed {
  filter: brightness(1.02);
}

/* Hide hint when animation starts */
.envelope-overlay.animating .envelope-hint {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ── Opening: sealed stays full-opacity most of the run, then lifts quickly (see keyframes) ─ */
.envelope.opening .env-sealed {
  animation: envelopeSealLift 2.5s ease-out forwards;
}

.envelope.opening .env-open {
  opacity: 1;
}

/* Keep assets hidden to avoid flash after envelope opens; whiteout follows open state */
.envelope.opening .env-assets {
  opacity: 0;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .envelope {
    width: clamp(300px, 88vw, 440px);
  }

  .envelope-scene {
    transform: scale(4.5);
  }
}

/* Wider “small” iPhones (e.g. 11 / XR at ~414px) show more of the envelope PNG edge; zoom slightly to match tighter devices */
@media (max-width: 600px) and (min-width: 411px) and (max-width: 428px) {
  .envelope-scene {
    transform: scale(5.05);
    transform-origin: 50% 59%;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .envelope-scene {
    transform: scale(1);
  }

  .envelope.opening .env-sealed {
    animation: none;
    opacity: 0;
    visibility: hidden;
  }

  .envelope-overlay.phase-whiteout::before {
    transition-duration: 0.25s;
  }

  .envelope-overlay.fade-out {
    transition-duration: 0.35s;
  }
}

/* ── Login Card ──────────────────────────────────────────────────────────── */
.login-card {
  width: 100%;
  max-width: 380px;
  padding: 2.5rem 2rem;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  z-index: 10;
}

.login-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.login-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 1.75rem;
  font-weight: 300;
}

.login-form input {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  margin-bottom: 0.75rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form input::placeholder {
  color: var(--text-muted);
}

.login-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15);
}

.login-form button {
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.login-form button:hover {
  background: #7a6549;
}

.login-form button:active {
  transform: scale(0.98);
}

.login-error {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--error);
  min-height: 1.25em;
}

.household-picker {
  margin-top: 1rem;
  text-align: center;
}

.picker-label {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.picker-option {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border, #e0dcd5);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.picker-option:hover {
  border-color: var(--accent);
  background: rgba(139, 115, 85, 0.06);
}

/* ----- Wedding / site pages ----- */
.wedding-page {
  padding: 0 1.5rem 4rem;
  max-width: 720px;
  margin: 0 auto;
  flex: 1 0 auto;
}

/* ===========================================
   HOME PAGE: Editorial Split-Hero Design
   =========================================== */

/* Task 1 & 2: Top Hero Container - Warm Paper with Subtle Depth */
.page-home {
  background: #f9f7f4;
}

.page-home .wedding-main {
  padding: 0;
  max-width: none;
}

.hero-top {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 3.5rem 2rem 3rem;
  background: linear-gradient(
    180deg,
    #faf8f5 0%,
    #f7f5f1 100%
  );
}

/* Subtle vignette at top for depth */
.hero-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.hero-top-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* Task 3: Typography Contrast Hierarchy */
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.hero-greeting {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 2.8vw, 1.35rem);
  font-weight: 400;
  color: #7a6a5a;
  margin: 0 0 0.75rem;
  letter-spacing: 0.03em;
}

.hero-subhead {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 400;
  font-style: italic;
  color: #4a4a4a;
  margin: 0 0 2rem;
  letter-spacing: 0.03em;
}

/* Task 4: Countdown - Crisp Ink-Like Styling for Light Background */
.countdown-wrapper {
  margin: 0 0 2rem;
}

.page-home .countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}

.page-home .countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.25rem;
}

.page-home .countdown-item span:first-child {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 600;
  color: #1a1a1a;
  text-shadow: none;
  line-height: 1;
}

.page-home .countdown-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.35rem;
}

.countdown-separator {
  font-size: 1.5rem;
  color: #ccc;
  font-weight: 300;
  line-height: 1;
  margin-top: -0.5rem;
}

/* Task 5: Visual Anchor - Divider */
.hero-divider {
  width: 60px;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
  border: none;
  margin: 0 auto 1.5rem;
}

.hero-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: #777;
  line-height: 1.6;
  margin: 0;
}

.hero-body-luna {
  margin-top: 1rem;
}

.hero-body a {
  color: inherit;
  text-decoration: underline;
}

.hero-body a:hover {
  color: var(--accent, #7a6549);
}

/* Hero Image Section - Blurred Background Extension */
.hero-image-section {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  min-height: auto;
  padding: 3.5rem 2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1c1f1c;
}

/* Blurred background layer - extends the photo feel full-width */
.hero-image-section::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: url('/images/photo-canopy.jpg') no-repeat center 85%;
  background-size: cover;
  filter: blur(28px) brightness(0.7);
  transform: scale(1.15);
  pointer-events: none;
  z-index: 0;
}

/* Subtle vignette */
.hero-image-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Sharp image on top - scales naturally with viewport */
.hero-feature-image {
  display: block;
  width: 90%;
  max-width: 1600px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(16px);
  animation: fadeInUp 0.8s ease-out 0.15s forwards;
  position: relative;
  z-index: 2;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-image-caption {
  margin-top: 1.75rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.4s forwards;
  position: relative;
  z-index: 2;
}

/* Desktop: crop top 10% of hero image */
@media (min-width: 901px) {
  .hero-feature-image {
    aspect-ratio: 614 / 553;
    object-fit: cover;
    object-position: center bottom;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .hero-top {
    padding: 3rem 1.5rem 2.5rem;
  }
  
  .hero-image-section {
    min-height: auto;
    padding: 2.5rem 1.25rem;
  }
  
  .hero-feature-image {
    max-width: 1000px;
  }
  
  .page-home .countdown-item {
    padding: 0 1rem;
  }
  
  .countdown-separator {
    font-size: 1.25rem;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero-top {
    padding: 2.5rem 1.25rem 2rem;
  }
  
  .hero-subhead {
    margin-bottom: 1.5rem;
  }
  
  .countdown-wrapper {
    margin-bottom: 1.5rem;
  }
  
  .page-home .countdown {
    gap: 0.25rem;
  }
  
  .page-home .countdown-item {
    padding: 0 0.6rem;
  }
  
  .page-home .countdown-item span:first-child {
    font-size: 1.75rem;
  }
  
  .page-home .countdown-label {
    font-size: 0.6rem;
  }
  
  .countdown-separator {
    font-size: 1rem;
    margin-top: -0.25rem;
  }
  
  .hero-divider {
    width: 50px;
    margin-bottom: 1.25rem;
  }
  
  .hero-body {
    font-size: 0.95rem;
  }
  
  .hero-image-section {
    min-height: auto;
    padding: 1.5rem 0.5rem;
  }
  
  .hero-feature-image {
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  }
  
  .hero-image-caption {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
  }
}

/* Site header & nav */
.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.site-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.site-logo:hover {
  color: var(--accent);
}

.site-logo .amp {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* Hamburger toggle (hidden on desktop) */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text);
}

.site-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-open .site-nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .site-nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .site-nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.site-nav a {
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 400;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--accent);
}

.logout-link {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 400;
}

.logout-link:hover {
  color: var(--accent);
}

/* Mobile: hamburger menu */
@media (max-width: 768px) {
  .site-nav-toggle {
    display: flex;
  }

  .site-header.is-open {
    z-index: 1000;
  }

  .site-nav-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 0 1.5rem;
    margin: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(44, 42, 40, 0.08);
    display: none;
    z-index: 1000;
  }

  .site-header.is-open .site-nav-wrap {
    display: flex;
  }

  .site-nav {
    flex-direction: column;
    gap: 0;
    padding: 0 1rem;
  }

  .site-nav a {
    display: block;
    padding: 0.75rem 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
  }

  .site-nav a:last-child {
    border-bottom: none;
  }

  .logout-link {
    display: block;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
  }
}

/* Page hero (title + tagline) */
.page-hero {
  text-align: center;
  margin-bottom: 2.5rem;
}

.page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  margin: 0 0 0.35rem;
  letter-spacing: 0.02em;
}

.page-hero .tagline {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 300;
  margin: 0;
}

.page-hero .hero-script {
  font-family: 'Ballet', cursive;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 0.25rem;
  letter-spacing: 0.02em;
}

.page-hero .hero-subtext {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
}

/* AI Assistant (Luna) page */
.page-assistant .assistant-section {
  max-width: 42rem;
  margin: 0 auto;
}

.assistant-disclaimer {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.assistant-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.assistant-language-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.assistant-language-select {
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.assistant-messages {
  min-height: 12rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 1rem 0;
  margin-bottom: 1rem;
}

.assistant-message {
  margin-bottom: 1rem;
}

.assistant-message-label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.assistant-message-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.assistant-message-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
}

.assistant-message--user .assistant-message-label { color: var(--text); }
.assistant-message-content {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}

.assistant-form {
  margin-top: 0.5rem;
}

.assistant-input-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

.assistant-input-row textarea {
  flex: 1;
  min-height: 2.5rem;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  background: var(--bg);
  color: var(--text);
}

.assistant-input-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.assistant-input-row .btn-primary {
  margin-top: 0;
  flex-shrink: 0;
}

.assistant-loading {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.page-schedule .page-hero {
  padding-bottom: 0;
  border-bottom: 1.5px solid var(--text);
  margin-bottom: 2rem;
  text-align: left;
}

/* Content sections */
.content-section {
  padding: 0 0.5rem;
}

.content-section h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
  color: var(--text);
}

.content-section h2:first-child {
  margin-top: 0;
}

.content-section p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.content-note,
.content-section .content-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

.wedding-main .welcome {
  text-align: center;
  padding: 0 1rem;
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.wedding-main .welcome p {
  margin: 0;
}

/* Schedule */
/* ── Event Cards (Schedule page) ─────────────────────────────────────────── */
.event-cards-section {
  max-width: 900px;
  margin: 0 auto;
}

.event-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}

.event-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.event-row-photo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-row-photo img {
  width: 100%;
  height: auto;
  display: block;
}

.event-row-details {
  text-align: center;
}

.event-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.event-card {
  text-align: center;
}

.event-card-photo {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
  aspect-ratio: 4 / 3;
}

.event-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.event-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
}

.event-card-date {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.25rem;
}

.event-card-time {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.event-card-description {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 0.85rem;
}

.event-card-note {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.event-card-location {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.15rem;
}

.event-card-address {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.event-card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.event-card-link {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.event-card-link:hover {
  text-decoration: underline;
}

.event-card-btn {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  padding: 0.5rem 1.75rem;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: background 0.2s ease, color 0.2s ease;
}

.event-card-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Add to calendar dropdown (Schedule page) */
.add-to-calendar {
  position: relative;
}

.add-to-calendar-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: 1.5px solid var(--accent);
  padding: 0.5rem 1rem;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.2s ease, color 0.2s ease;
}

.add-to-calendar-btn:hover {
  background: var(--accent);
  color: #fff;
}

.add-to-calendar-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.25rem;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 10;
  padding: 0.25rem 0;
}

.add-to-calendar-dropdown[hidden] {
  display: none;
}

.add-to-calendar-option {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  padding: 0.5rem 1rem;
  text-align: left;
}

.add-to-calendar-option:hover {
  background: var(--bg);
  color: var(--accent);
}

@media (max-width: 600px) {
  .event-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .event-cards-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .event-card-name {
    font-size: 1.5rem;
  }
}

.schedule-date {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}

.schedule-date:first-of-type {
  margin-top: 0;
}

.schedule-venue {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--text-muted);
  margin: 1.5rem 0 0.25rem;
}

.schedule-venue:first-of-type {
  margin-top: 0.5rem;
}

.schedule-address {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.schedule-item .schedule-address {
  grid-column: 2;
  font-size: 0.85rem;
  margin: 0;
}

.schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.schedule-item {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.5rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-time {
  font-weight: 500;
  color: var(--accent);
  font-size: 0.95rem;
}

.schedule-label {
  font-weight: 500;
  color: var(--text);
}

.schedule-detail {
  grid-column: 2;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Shuttle Info */
.shuttle-info {
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.shuttle-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

.shuttle-note {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.shuttle-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shuttle-list li {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
}

.shuttle-list li:last-child {
  border-bottom: none;
}

.shuttle-time {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  color: var(--text);
  min-width: 7rem;
  font-size: 0.88rem;
}

.shuttle-route {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* RSVP form */
.rsvp-form .form-row {
  margin-bottom: 1.25rem;
}

.rsvp-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
}

.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.12);
}

.rsvp-form textarea {
  resize: vertical;
  min-height: 4rem;
}

.btn-primary {
  margin-top: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #7a6549;
}

.form-message {
  margin-top: 1rem;
  font-size: 0.95rem;
  min-height: 1.25em;
}

.form-message.success {
  color: var(--accent);
}

.form-message.error {
  color: var(--error);
}

.rsvp-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-style: italic;
}

.rsvp-member-block {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border, #e0dcd5);
  border-radius: var(--radius, 8px);
  background: var(--bg-card, #faf9f6);
}

.rsvp-member-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.rsvp-member-name {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.rsvp-divider {
  border: none;
  border-top: 1px solid var(--border, #e0dcd5);
  margin: 1.5rem 0;
}

.form-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* FAQs */
.faq-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  padding: 2.5rem 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.faq-card-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
  font-style: italic;
}

.faq-group-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 2.25rem 0 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}

.faq-card-note + .faq-group-title {
  margin-top: 0;
}

.faq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

.faq-row:last-child,
.faq-row-last {
  border-bottom: none;
  padding-bottom: 0;
}

.faq-label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.faq-q h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.faq-a p {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}

.faq-a a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 400;
}

.faq-a a:hover {
  text-decoration: underline;
}

.faq-palette {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.faq-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .faq-card {
    padding: 1.5rem 1.25rem;
  }

  .faq-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.25rem 0;
  }

  .faq-q h3 {
    font-size: 1.2rem;
  }

  .faq-group-title {
    font-size: 0.95rem;
    margin: 1.75rem 0 0.25rem;
  }
}

/* Page photos */
.page-photo {
  margin: 0 -0.5rem 2rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.page-photo img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 400px;
  object-fit: cover;
}

.page-photo-small img {
  max-height: 280px;
}

/* Travel page section banners */
.travel-banner {
  margin: 1.5rem -0.5rem 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 160px;
}

.travel-banner img {
  width: 100%;
  height: 160px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.travel-banner-hero {
  max-width: 800px;
  margin: 0 auto 2rem;
  max-height: none;
  border-radius: var(--radius);
}

.travel-banner-hero img {
  height: auto;
  max-height: 320px;
}

.page-travel .page-hero {
  margin-bottom: 1rem;
}

.page-travel .content-section h2 {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--text-muted);
  margin-bottom: 0.75rem;
}

.story-hero-image {
  margin: 0 auto 2.5rem;
  max-width: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.story-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Photo Slideshow — Our Story hero: edge-to-edge viewport width */
.story-slideshow {
  width: 100vw;
  max-width: none;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 0;
  margin-bottom: 0.75rem;
  border-radius: 0;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Viewport box only; images scale uniformly (object-fit: cover) — adjust crop via object-position, not stretch */
.story-slideshow .slideshow-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 88vh;
  background: transparent;
  overflow: hidden;
}

.story-slideshow .slide {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  transition: none;
}

.story-slideshow .slide.active,
.story-slideshow .slide.prev {
  transition: transform 0.8s ease-in-out;
}

.story-slideshow .slide.active {
  transform: translateX(0);
}

.story-slideshow .slide.prev {
  transform: translateX(-100%);
}

.story-slideshow .slide img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--carousel-object-position, 50% 45%);
  display: block;
}

/* 20251117-153815 (00005): mobile keeps feet pinned to bottom edge */
.story-slideshow .slide img.carousel-crop--from-top {
  object-position: center bottom;
}

/* Desktop: pure bottom clipped head; ~58% keeps feet while restoring headroom (between center and bottom) */
@media (min-width: 768px) {
  .story-slideshow .slide img.carousel-crop--from-top {
    object-position: 50% 58%;
  }
}

/* 20251117-155726 / 155728: mobile default hero crop */
.story-slideshow .slide img.carousel-crop--from-top-desktop {
  object-position: 50% 45%;
}

/*
 * Desktop: ~10% less bottom / ~10% more top vs center bottom (was 100%).
 * 90% keeps feet in frame but trims a bit more below subject than bottom.
 */
@media (min-width: 768px) {
  .story-slideshow .slide img.carousel-crop--from-top-desktop {
    object-position: 50% 90%;
  }
}

/* Countdown - Base Styles */
.countdown-section {
  margin-bottom: 2rem;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4rem;
}

.countdown-item span:first-child {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.countdown-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Timeline (Our Story) */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-soft);
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateX(-5px);
}

.timeline-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.timeline-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.timeline-content p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.timeline-photo {
  margin: 1.5rem 0 2rem 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.timeline-photo img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 350px;
  object-fit: cover;
}

/* Dual Timeline - full-width grid (full viewport width), centered content */
.story-timeline-wrap {
  width: 100vw;
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0.5rem 0 0; /* top padding so silhouettes aren't clipped */
  box-sizing: border-box;
  background:
    linear-gradient(rgba(220, 220, 220, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 220, 220, 0.3) 1px, transparent 1px),
    linear-gradient(135deg, #f8f9fa 0%, #fff 50%, #fafafa 100%);
  background-size: 25px 25px, 25px 25px, 100% 100%;
  border-radius: var(--radius);
  /* Horizontal clip only: icons can sit wide; timeline header maps bleed vertically */
  overflow-x: hidden;
  overflow-y: visible;
}

.story-timeline-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.story-timeline-wrap .story-timeline-inner {
  padding-top: 2.75rem; /* clearance for header maps that extend above the boxes */
}

.dual-timeline {
  position: relative;
  z-index: 1;
}

/* Ensure timeline content stays above background icons */
.dual-timeline > * {
  position: relative;
  z-index: 1;
}

/* Story background scattered SVG doodles — 200 icons */
.si {
  position: absolute;
  pointer-events: none;
  opacity: 0.48;
  z-index: 0;
  animation: si-float 10s ease-in-out infinite;
  transform: rotate(var(--si-r, 0deg));
}

@keyframes si-float {
  0%, 100% { transform: translateY(0px)  rotate(var(--si-r, 0deg)); }
  50%       { transform: translateY(-8px) rotate(var(--si-r, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .si { animation: none; }
}

.si-1 { top: 20px; right: 82%; width: 46px; --si-r: 8deg; animation-delay: -1s; }
.si-2 { top: 49px; left: 4%; width: 52px; --si-r: -10deg; animation-delay: -2s; }
.si-3 { top: 81px; right: 32%; width: 58px; --si-r: -17deg; animation-delay: -3s; }
.si-4 { top: 112px; left: 18%; width: 64px; --si-r: 11deg; animation-delay: -4s; }
.si-5 { top: 141px; right: 87%; width: 70px; --si-r: 10deg; animation-delay: -5s; }
.si-6 { top: 177px; left: 12%; width: 42px; --si-r: -14deg; animation-delay: -6s; }
.si-7 { top: 211px; right: 5%; width: 48px; --si-r: 14deg; animation-delay: -7s; }
.si-8 { top: 239px; left: 12%; width: 54px; --si-r: -7deg; animation-delay: -8s; }
.si-9 { top: 270px; right: 30%; width: 60px; --si-r: -11deg; animation-delay: -9s; }
.si-10 { top: 306px; left: 78%; width: 66px; --si-r: 17deg; animation-delay: 0s; }
.si-11 { top: 334px; right: 72%; width: 72px; --si-r: 7deg; animation-delay: -1s; }
.si-12 { top: 365px; left: 92%; width: 44px; --si-r: -8deg; animation-delay: -2s; }
.si-13 { top: 401px; right: 54%; width: 50px; --si-r: 20deg; animation-delay: -3s; }
.si-14 { top: 432px; left: 58%; width: 56px; --si-r: -3deg; animation-delay: -4s; }
.si-15 { top: 464px; right: 1%; width: 62px; --si-r: -5deg; animation-delay: -5s; }
.si-16 { top: 494px; left: 90%; width: 68px; --si-r: -15deg; animation-delay: -6s; }
.si-17 { top: 528px; right: 44%; width: 40px; --si-r: 3deg; animation-delay: -7s; }
.si-18 { top: 560px; left: 20%; width: 46px; --si-r: 5deg; animation-delay: -8s; }
.si-19 { top: 591px; right: 98%; width: 52px; --si-r: 15deg; animation-delay: -9s; }
.si-20 { top: 624px; left: 14%; width: 58px; --si-r: -20deg; animation-delay: 0s; }
.si-21 { top: 653px; right: 49%; width: 64px; --si-r: 8deg; animation-delay: -1s; }
.si-22 { top: 682px; left: 46%; width: 70px; --si-r: -10deg; animation-delay: -2s; }
.si-23 { top: 715px; right: 78%; width: 42px; --si-r: -17deg; animation-delay: -3s; }
.si-24 { top: 747px; left: 6%; width: 48px; --si-r: 11deg; animation-delay: -4s; }
.si-25 { top: 782px; right: 69%; width: 54px; --si-r: 10deg; animation-delay: -5s; }
.si-26 { top: 811px; left: 49%; width: 60px; --si-r: -14deg; animation-delay: -6s; }
.si-27 { top: 840px; right: 71%; width: 66px; --si-r: 14deg; animation-delay: -7s; }
.si-28 { top: 872px; left: 81%; width: 72px; --si-r: -7deg; animation-delay: -8s; }
.si-29 { top: 905px; right: 74%; width: 44px; --si-r: -11deg; animation-delay: -9s; }
.si-30 { top: 936px; left: 91%; width: 50px; --si-r: 17deg; animation-delay: 0s; }
.si-31 { top: 965px; right: 6%; width: 56px; --si-r: 7deg; animation-delay: -1s; }
.si-32 { top: 996px; left: 38%; width: 62px; --si-r: -8deg; animation-delay: -2s; }
.si-33 { top: 1025px; right: 30%; width: 68px; --si-r: 20deg; animation-delay: -3s; }
.si-34 { top: 1054px; left: 49%; width: 40px; --si-r: -3deg; animation-delay: -4s; }
.si-35 { top: 1086px; right: 59%; width: 46px; --si-r: -5deg; animation-delay: -5s; }
.si-36 { top: 1119px; left: 21%; width: 52px; --si-r: -15deg; animation-delay: -6s; }
.si-37 { top: 1152px; right: 46%; width: 58px; --si-r: 3deg; animation-delay: -7s; }
.si-38 { top: 1183px; left: 86%; width: 64px; --si-r: 5deg; animation-delay: -8s; }
.si-39 { top: 1215px; right: 90%; width: 70px; --si-r: 15deg; animation-delay: -9s; }
.si-40 { top: 1244px; left: 78%; width: 42px; --si-r: -20deg; animation-delay: 0s; }
.si-41 { top: 1274px; right: 69%; width: 48px; --si-r: 8deg; animation-delay: -1s; }
.si-42 { top: 1305px; left: 21%; width: 54px; --si-r: -10deg; animation-delay: -2s; }
.si-43 { top: 1340px; right: 49%; width: 60px; --si-r: -17deg; animation-delay: -3s; }
.si-44 { top: 1372px; left: 82%; width: 66px; --si-r: 11deg; animation-delay: -4s; }
.si-45 { top: 1408px; right: 29%; width: 72px; --si-r: 10deg; animation-delay: -5s; }
.si-46 { top: 1441px; left: 8%; width: 44px; --si-r: -14deg; animation-delay: -6s; }
.si-47 { top: 1472px; right: 5%; width: 50px; --si-r: 14deg; animation-delay: -7s; }
.si-48 { top: 1505px; left: 52%; width: 56px; --si-r: -7deg; animation-delay: -8s; }
.si-49 { top: 1537px; right: 9%; width: 62px; --si-r: -11deg; animation-delay: -9s; }
.si-50 { top: 1568px; left: 73%; width: 68px; --si-r: 17deg; animation-delay: 0s; }
.si-51 { top: 1601px; right: 28%; width: 40px; --si-r: 7deg; animation-delay: -1s; }
.si-52 { top: 1636px; left: 51%; width: 46px; --si-r: -8deg; animation-delay: -2s; }
.si-53 { top: 1671px; right: 19%; width: 52px; --si-r: 20deg; animation-delay: -3s; }
.si-54 { top: 1703px; left: 18%; width: 58px; --si-r: -3deg; animation-delay: -4s; }
.si-55 { top: 1734px; right: 96%; width: 64px; --si-r: -5deg; animation-delay: -5s; }
.si-56 { top: 1770px; left: 69%; width: 70px; --si-r: -15deg; animation-delay: -6s; }
.si-57 { top: 1802px; right: 96%; width: 42px; --si-r: 3deg; animation-delay: -7s; }
.si-58 { top: 1836px; left: 75%; width: 48px; --si-r: 5deg; animation-delay: -8s; }
.si-59 { top: 1870px; right: 47%; width: 54px; --si-r: 15deg; animation-delay: -9s; }
.si-60 { top: 1901px; left: 18%; width: 60px; --si-r: -20deg; animation-delay: 0s; }
.si-61 { top: 1937px; right: 64%; width: 66px; --si-r: 8deg; animation-delay: -1s; }
.si-62 { top: 1966px; left: 97%; width: 72px; --si-r: -10deg; animation-delay: -2s; }
.si-63 { top: 1994px; right: 15%; width: 44px; --si-r: -17deg; animation-delay: -3s; }
.si-64 { top: 2024px; left: 81%; width: 50px; --si-r: 11deg; animation-delay: -4s; }
.si-65 { top: 2054px; right: 88%; width: 56px; --si-r: 10deg; animation-delay: -5s; }
.si-66 { top: 2088px; left: 77%; width: 62px; --si-r: -14deg; animation-delay: -6s; }
.si-67 { top: 2117px; right: 50%; width: 68px; --si-r: 14deg; animation-delay: -7s; }
.si-68 { top: 2151px; left: 77%; width: 40px; --si-r: -7deg; animation-delay: -8s; }
.si-69 { top: 2186px; right: 68%; width: 46px; --si-r: -11deg; animation-delay: -9s; }
.si-70 { top: 2218px; left: 71%; width: 52px; --si-r: 17deg; animation-delay: 0s; }
.si-71 { top: 2246px; right: 88%; width: 58px; --si-r: 7deg; animation-delay: -1s; }
.si-72 { top: 2275px; left: 88%; width: 64px; --si-r: -8deg; animation-delay: -2s; }
.si-73 { top: 2311px; right: 97%; width: 70px; --si-r: 20deg; animation-delay: -3s; }
.si-74 { top: 2343px; left: 83%; width: 42px; --si-r: -3deg; animation-delay: -4s; }
.si-75 { top: 2376px; right: 15%; width: 48px; --si-r: -5deg; animation-delay: -5s; }
.si-76 { top: 2408px; left: 56%; width: 54px; --si-r: -15deg; animation-delay: -6s; }
.si-77 { top: 2438px; right: 59%; width: 60px; --si-r: 3deg; animation-delay: -7s; }
.si-78 { top: 2466px; left: 93%; width: 66px; --si-r: 5deg; animation-delay: -8s; }
.si-79 { top: 2498px; right: 65%; width: 72px; --si-r: 15deg; animation-delay: -9s; }
.si-80 { top: 2528px; left: 65%; width: 44px; --si-r: -20deg; animation-delay: 0s; }
.si-81 { top: 2557px; right: 81%; width: 50px; --si-r: 8deg; animation-delay: -1s; }
.si-82 { top: 2589px; left: 82%; width: 56px; --si-r: -10deg; animation-delay: -2s; }
.si-83 { top: 2625px; right: 78%; width: 62px; --si-r: -17deg; animation-delay: -3s; }
.si-84 { top: 2656px; left: 20%; width: 68px; --si-r: 11deg; animation-delay: -4s; }
.si-85 { top: 2689px; right: 98%; width: 40px; --si-r: 10deg; animation-delay: -5s; }
.si-86 { top: 2719px; left: 70%; width: 46px; --si-r: -14deg; animation-delay: -6s; }
.si-87 { top: 2755px; right: 1%; width: 52px; --si-r: 14deg; animation-delay: -7s; }
.si-88 { top: 2788px; left: 63%; width: 58px; --si-r: -7deg; animation-delay: -8s; }
.si-89 { top: 2816px; right: 15%; width: 64px; --si-r: -11deg; animation-delay: -9s; }
.si-90 { top: 2849px; left: 40%; width: 70px; --si-r: 17deg; animation-delay: 0s; }
.si-91 { top: 2880px; right: 8%; width: 42px; --si-r: 7deg; animation-delay: -1s; }
.si-92 { top: 2911px; left: 73%; width: 48px; --si-r: -8deg; animation-delay: -2s; }
.si-93 { top: 2940px; right: 11%; width: 54px; --si-r: 20deg; animation-delay: -3s; }
.si-94 { top: 2975px; left: 9%; width: 60px; --si-r: -3deg; animation-delay: -4s; }
.si-95 { top: 3011px; right: 17%; width: 66px; --si-r: -5deg; animation-delay: -5s; }
.si-96 { top: 3041px; left: 85%; width: 72px; --si-r: -15deg; animation-delay: -6s; }
.si-97 { top: 3076px; right: 71%; width: 44px; --si-r: 3deg; animation-delay: -7s; }
.si-98 { top: 3106px; left: 34%; width: 50px; --si-r: 5deg; animation-delay: -8s; }
.si-99 { top: 3142px; right: 78%; width: 56px; --si-r: 15deg; animation-delay: -9s; }
.si-100 { top: 3176px; left: 28%; width: 62px; --si-r: -20deg; animation-delay: 0s; }
.si-101 { top: 3212px; right: 97%; width: 68px; --si-r: 8deg; animation-delay: -1s; }
.si-102 { top: 3243px; left: 92%; width: 40px; --si-r: -10deg; animation-delay: -2s; }
.si-103 { top: 3275px; right: 52%; width: 46px; --si-r: -17deg; animation-delay: -3s; }
.si-104 { top: 3308px; left: 57%; width: 52px; --si-r: 11deg; animation-delay: -4s; }
.si-105 { top: 3344px; right: 58%; width: 58px; --si-r: 10deg; animation-delay: -5s; }
.si-106 { top: 3373px; left: 32%; width: 64px; --si-r: -14deg; animation-delay: -6s; }
.si-107 { top: 3404px; right: 9%; width: 70px; --si-r: 14deg; animation-delay: -7s; }
.si-108 { top: 3437px; left: 3%; width: 42px; --si-r: -7deg; animation-delay: -8s; }
.si-109 { top: 3473px; right: 30%; width: 48px; --si-r: -11deg; animation-delay: -9s; }
.si-110 { top: 3504px; left: 1%; width: 54px; --si-r: 17deg; animation-delay: 0s; }
.si-111 { top: 3533px; right: 91%; width: 60px; --si-r: 7deg; animation-delay: -1s; }
.si-112 { top: 3561px; left: 30%; width: 66px; --si-r: -8deg; animation-delay: -2s; }
.si-113 { top: 3590px; right: 5%; width: 72px; --si-r: 20deg; animation-delay: -3s; }
.si-114 { top: 3623px; left: 10%; width: 44px; --si-r: -3deg; animation-delay: -4s; }
.si-115 { top: 3659px; right: 31%; width: 50px; --si-r: -5deg; animation-delay: -5s; }
.si-116 { top: 3691px; left: 86%; width: 56px; --si-r: -15deg; animation-delay: -6s; }
.si-117 { top: 3726px; right: 28%; width: 62px; --si-r: 3deg; animation-delay: -7s; }
.si-118 { top: 3762px; left: 17%; width: 68px; --si-r: 5deg; animation-delay: -8s; }
.si-119 { top: 3797px; right: 32%; width: 40px; --si-r: 15deg; animation-delay: -9s; }
.si-120 { top: 3832px; left: 53%; width: 46px; --si-r: -20deg; animation-delay: 0s; }
.si-121 { top: 3863px; right: 13%; width: 52px; --si-r: 8deg; animation-delay: -1s; }
.si-122 { top: 3892px; left: 85%; width: 58px; --si-r: -10deg; animation-delay: -2s; }
.si-123 { top: 3926px; right: 46%; width: 64px; --si-r: -17deg; animation-delay: -3s; }
.si-124 { top: 3960px; left: 53%; width: 70px; --si-r: 11deg; animation-delay: -4s; }
.si-125 { top: 3995px; right: 94%; width: 42px; --si-r: 10deg; animation-delay: -5s; }
.si-126 { top: 4023px; left: 87%; width: 48px; --si-r: -14deg; animation-delay: -6s; }
.si-127 { top: 4052px; right: 8%; width: 54px; --si-r: 14deg; animation-delay: -7s; }
.si-128 { top: 4086px; left: 94%; width: 60px; --si-r: -7deg; animation-delay: -8s; }
.si-129 { top: 4119px; right: 14%; width: 66px; --si-r: -11deg; animation-delay: -9s; }
.si-130 { top: 4150px; left: 25%; width: 72px; --si-r: 17deg; animation-delay: 0s; }
.si-131 { top: 4181px; right: 69%; width: 44px; --si-r: 7deg; animation-delay: -1s; }
.si-132 { top: 4216px; left: 18%; width: 50px; --si-r: -8deg; animation-delay: -2s; }
.si-133 { top: 4250px; right: 24%; width: 56px; --si-r: 20deg; animation-delay: -3s; }
.si-134 { top: 4282px; left: 60%; width: 62px; --si-r: -3deg; animation-delay: -4s; }
.si-135 { top: 4313px; right: 10%; width: 68px; --si-r: -5deg; animation-delay: -5s; }
.si-136 { top: 4348px; left: 71%; width: 40px; --si-r: -15deg; animation-delay: -6s; }
.si-137 { top: 4377px; right: 7%; width: 46px; --si-r: 3deg; animation-delay: -7s; }
.si-138 { top: 4413px; left: 2%; width: 52px; --si-r: 5deg; animation-delay: -8s; }
.si-139 { top: 4442px; right: 97%; width: 58px; --si-r: 15deg; animation-delay: -9s; }
.si-140 { top: 4473px; left: 22%; width: 64px; --si-r: -20deg; animation-delay: 0s; }
.si-141 { top: 4507px; right: 63%; width: 70px; --si-r: 8deg; animation-delay: -1s; }
.si-142 { top: 4542px; left: 28%; width: 42px; --si-r: -10deg; animation-delay: -2s; }
.si-143 { top: 4576px; right: 8%; width: 48px; --si-r: -17deg; animation-delay: -3s; }
.si-144 { top: 4606px; left: 49%; width: 54px; --si-r: 11deg; animation-delay: -4s; }
.si-145 { top: 4634px; right: 50%; width: 60px; --si-r: 10deg; animation-delay: -5s; }
.si-146 { top: 4666px; left: 59%; width: 66px; --si-r: -14deg; animation-delay: -6s; }
.si-147 { top: 4698px; right: 55%; width: 72px; --si-r: 14deg; animation-delay: -7s; }
.si-148 { top: 4734px; left: 85%; width: 44px; --si-r: -7deg; animation-delay: -8s; }
.si-149 { top: 4769px; right: 20%; width: 50px; --si-r: -11deg; animation-delay: -9s; }
.si-150 { top: 4800px; left: 38%; width: 56px; --si-r: 17deg; animation-delay: 0s; }
.si-151 { top: 4831px; right: 8%; width: 62px; --si-r: 7deg; animation-delay: -1s; }
.si-152 { top: 4867px; left: 8%; width: 68px; --si-r: -8deg; animation-delay: -2s; }
.si-153 { top: 4900px; right: 8%; width: 40px; --si-r: 20deg; animation-delay: -3s; }
.si-154 { top: 4928px; left: 75%; width: 46px; --si-r: -3deg; animation-delay: -4s; }
.si-155 { top: 4963px; right: 65%; width: 52px; --si-r: -5deg; animation-delay: -5s; }
.si-156 { top: 4999px; left: 21%; width: 58px; --si-r: -15deg; animation-delay: -6s; }
.si-157 { top: 5027px; right: 66%; width: 64px; --si-r: 3deg; animation-delay: -7s; }
.si-158 { top: 5056px; left: 24%; width: 70px; --si-r: 5deg; animation-delay: -8s; }
.si-159 { top: 5085px; right: 77%; width: 42px; --si-r: 15deg; animation-delay: -9s; }
.si-160 { top: 5114px; left: 87%; width: 48px; --si-r: -20deg; animation-delay: 0s; }
.si-161 { top: 5145px; right: 52%; width: 54px; --si-r: 8deg; animation-delay: -1s; }
.si-162 { top: 5174px; left: 73%; width: 60px; --si-r: -10deg; animation-delay: -2s; }
.si-163 { top: 5205px; right: 75%; width: 66px; --si-r: -17deg; animation-delay: -3s; }
.si-164 { top: 5233px; left: 80%; width: 72px; --si-r: 11deg; animation-delay: -4s; }
.si-165 { top: 5262px; right: 54%; width: 44px; --si-r: 10deg; animation-delay: -5s; }
.si-166 { top: 5298px; left: 41%; width: 50px; --si-r: -14deg; animation-delay: -6s; }
.si-167 { top: 5330px; right: 27%; width: 56px; --si-r: 14deg; animation-delay: -7s; }
.si-168 { top: 5363px; left: 31%; width: 62px; --si-r: -7deg; animation-delay: -8s; }
.si-169 { top: 5395px; right: 51%; width: 68px; --si-r: -11deg; animation-delay: -9s; }
.si-170 { top: 5425px; left: 86%; width: 40px; --si-r: 17deg; animation-delay: 0s; }
.si-171 { top: 5457px; right: 59%; width: 46px; --si-r: 7deg; animation-delay: -1s; }
.si-172 { top: 5490px; left: 97%; width: 52px; --si-r: -8deg; animation-delay: -2s; }
.si-173 { top: 5519px; right: 2%; width: 58px; --si-r: 20deg; animation-delay: -3s; }
.si-174 { top: 5554px; left: 80%; width: 64px; --si-r: -3deg; animation-delay: -4s; }
.si-175 { top: 5583px; right: 10%; width: 70px; --si-r: -5deg; animation-delay: -5s; }
.si-176 { top: 5619px; left: 28%; width: 42px; --si-r: -15deg; animation-delay: -6s; }
.si-177 { top: 5655px; right: 34%; width: 48px; --si-r: 3deg; animation-delay: -7s; }
.si-178 { top: 5685px; left: 45%; width: 54px; --si-r: 5deg; animation-delay: -8s; }
.si-179 { top: 5714px; right: 32%; width: 60px; --si-r: 15deg; animation-delay: -9s; }
.si-180 { top: 5747px; left: 37%; width: 66px; --si-r: -20deg; animation-delay: 0s; }
.si-181 { top: 5777px; right: 57%; width: 72px; --si-r: 8deg; animation-delay: -1s; }
.si-182 { top: 5813px; left: 91%; width: 44px; --si-r: -10deg; animation-delay: -2s; }
.si-183 { top: 5845px; right: 79%; width: 50px; --si-r: -17deg; animation-delay: -3s; }
.si-184 { top: 5881px; left: 2%; width: 56px; --si-r: 11deg; animation-delay: -4s; }
.si-185 { top: 5917px; right: 39%; width: 62px; --si-r: 10deg; animation-delay: -5s; }
.si-186 { top: 5946px; left: 18%; width: 68px; --si-r: -14deg; animation-delay: -6s; }
.si-187 { top: 5978px; right: 15%; width: 40px; --si-r: 14deg; animation-delay: -7s; }
.si-188 { top: 6007px; left: 96%; width: 46px; --si-r: -7deg; animation-delay: -8s; }
.si-189 { top: 6043px; right: 20%; width: 52px; --si-r: -11deg; animation-delay: -9s; }
.si-190 { top: 6075px; left: 37%; width: 58px; --si-r: 17deg; animation-delay: 0s; }
.si-191 { top: 6106px; right: 92%; width: 64px; --si-r: 7deg; animation-delay: -1s; }
.si-192 { top: 6139px; left: 27%; width: 70px; --si-r: -8deg; animation-delay: -2s; }
.si-193 { top: 6171px; right: 65%; width: 42px; --si-r: 20deg; animation-delay: -3s; }
.si-194 { top: 6206px; left: 33%; width: 48px; --si-r: -3deg; animation-delay: -4s; }
.si-195 { top: 6234px; right: 12%; width: 54px; --si-r: -5deg; animation-delay: -5s; }
.si-196 { top: 6268px; left: 36%; width: 60px; --si-r: -15deg; animation-delay: -6s; }
.si-197 { top: 6296px; right: 1%; width: 66px; --si-r: 3deg; animation-delay: -7s; }
.si-198 { top: 6329px; left: 17%; width: 72px; --si-r: 5deg; animation-delay: -8s; }
.si-199 { top: 6361px; right: 21%; width: 44px; --si-r: 15deg; animation-delay: -9s; }
.si-200 { top: 6396px; left: 71%; width: 50px; --si-r: -20deg; animation-delay: 0s; }
.si-201 { top: 6430px; right: 72%; width: 56px; --si-r: 8deg; animation-delay: -1s; }
.si-202 { top: 6458px; left: 15%; width: 62px; --si-r: -10deg; animation-delay: -2s; }
.si-203 { top: 6487px; right: 89%; width: 68px; --si-r: -17deg; animation-delay: -3s; }
.si-204 { top: 6517px; left: 70%; width: 40px; --si-r: 11deg; animation-delay: -4s; }
.si-205 { top: 6545px; right: 48%; width: 46px; --si-r: 10deg; animation-delay: -5s; }
.si-206 { top: 6581px; left: 19%; width: 52px; --si-r: -14deg; animation-delay: -6s; }
.si-207 { top: 6615px; right: 17%; width: 58px; --si-r: 14deg; animation-delay: -7s; }
.si-208 { top: 6643px; left: 40%; width: 64px; --si-r: -7deg; animation-delay: -8s; }
.si-209 { top: 6676px; right: 6%; width: 70px; --si-r: -11deg; animation-delay: -9s; }
.si-210 { top: 6709px; left: 27%; width: 42px; --si-r: 17deg; animation-delay: 0s; }
.si-211 { top: 6740px; right: 86%; width: 48px; --si-r: 7deg; animation-delay: -1s; }
.si-212 { top: 6769px; left: 46%; width: 54px; --si-r: -8deg; animation-delay: -2s; }
.si-213 { top: 6805px; right: 53%; width: 60px; --si-r: 20deg; animation-delay: -3s; }
.si-214 { top: 6835px; left: 31%; width: 66px; --si-r: -3deg; animation-delay: -4s; }
.si-215 { top: 6865px; right: 23%; width: 72px; --si-r: -5deg; animation-delay: -5s; }
.si-216 { top: 6899px; left: 4%; width: 44px; --si-r: -15deg; animation-delay: -6s; }
.si-217 { top: 6929px; right: 95%; width: 50px; --si-r: 3deg; animation-delay: -7s; }
.si-218 { top: 6962px; left: 53%; width: 56px; --si-r: 5deg; animation-delay: -8s; }
.si-219 { top: 6993px; right: 35%; width: 62px; --si-r: 15deg; animation-delay: -9s; }
.si-220 { top: 7023px; left: 90%; width: 68px; --si-r: -20deg; animation-delay: 0s; }
.si-221 { top: 7052px; right: 49%; width: 40px; --si-r: 8deg; animation-delay: -1s; }
.si-222 { top: 7080px; left: 61%; width: 46px; --si-r: -10deg; animation-delay: -2s; }
.si-223 { top: 7111px; right: 26%; width: 52px; --si-r: -17deg; animation-delay: -3s; }
.si-224 { top: 7146px; left: 45%; width: 58px; --si-r: 11deg; animation-delay: -4s; }
.si-225 { top: 7178px; right: 30%; width: 64px; --si-r: 10deg; animation-delay: -5s; }
.si-226 { top: 7209px; left: 4%; width: 70px; --si-r: -14deg; animation-delay: -6s; }
.si-227 { top: 7240px; right: 52%; width: 42px; --si-r: 14deg; animation-delay: -7s; }
.si-228 { top: 7273px; left: 36%; width: 48px; --si-r: -7deg; animation-delay: -8s; }
.si-229 { top: 7302px; right: 36%; width: 54px; --si-r: -11deg; animation-delay: -9s; }
.si-230 { top: 7335px; left: 83%; width: 60px; --si-r: 17deg; animation-delay: 0s; }
.si-231 { top: 7371px; right: 52%; width: 66px; --si-r: 7deg; animation-delay: -1s; }
.si-232 { top: 7407px; left: 43%; width: 72px; --si-r: -8deg; animation-delay: -2s; }
.si-233 { top: 7435px; right: 15%; width: 44px; --si-r: 20deg; animation-delay: -3s; }
.si-234 { top: 7467px; left: 23%; width: 50px; --si-r: -3deg; animation-delay: -4s; }
.si-235 { top: 7499px; right: 5%; width: 56px; --si-r: -5deg; animation-delay: -5s; }
.si-236 { top: 7528px; left: 77%; width: 62px; --si-r: -15deg; animation-delay: -6s; }
.si-237 { top: 7562px; right: 45%; width: 68px; --si-r: 3deg; animation-delay: -7s; }
.si-238 { top: 7595px; left: 56%; width: 40px; --si-r: 5deg; animation-delay: -8s; }
.si-239 { top: 7631px; right: 15%; width: 46px; --si-r: 15deg; animation-delay: -9s; }
.si-240 { top: 7665px; left: 74%; width: 52px; --si-r: -20deg; animation-delay: 0s; }
.si-241 { top: 7696px; right: 33%; width: 58px; --si-r: 8deg; animation-delay: -1s; }
.si-242 { top: 7724px; left: 91%; width: 64px; --si-r: -10deg; animation-delay: -2s; }
.si-243 { top: 7758px; right: 1%; width: 70px; --si-r: -17deg; animation-delay: -3s; }
.si-244 { top: 7794px; left: 69%; width: 42px; --si-r: 11deg; animation-delay: -4s; }
.si-245 { top: 7825px; right: 47%; width: 48px; --si-r: 10deg; animation-delay: -5s; }
.si-246 { top: 7859px; left: 9%; width: 54px; --si-r: -14deg; animation-delay: -6s; }
.si-247 { top: 7892px; right: 80%; width: 60px; --si-r: 14deg; animation-delay: -7s; }
.si-248 { top: 7925px; left: 85%; width: 66px; --si-r: -7deg; animation-delay: -8s; }
.si-249 { top: 7954px; right: 93%; width: 72px; --si-r: -11deg; animation-delay: -9s; }
.si-250 { top: 7986px; left: 65%; width: 44px; --si-r: 17deg; animation-delay: 0s; }
.si-251 { top: 8018px; right: 86%; width: 50px; --si-r: 7deg; animation-delay: -1s; }
.si-252 { top: 8052px; left: 42%; width: 56px; --si-r: -8deg; animation-delay: -2s; }
.si-253 { top: 8086px; right: 90%; width: 62px; --si-r: 20deg; animation-delay: -3s; }
.si-254 { top: 8118px; left: 71%; width: 68px; --si-r: -3deg; animation-delay: -4s; }
.si-255 { top: 8148px; right: 25%; width: 40px; --si-r: -5deg; animation-delay: -5s; }
.si-256 { top: 8182px; left: 86%; width: 46px; --si-r: -15deg; animation-delay: -6s; }
.si-257 { top: 8216px; right: 87%; width: 52px; --si-r: 3deg; animation-delay: -7s; }
.si-258 { top: 8246px; left: 79%; width: 58px; --si-r: 5deg; animation-delay: -8s; }
.si-259 { top: 8278px; right: 52%; width: 64px; --si-r: 15deg; animation-delay: -9s; }
.si-260 { top: 8314px; left: 1%; width: 70px; --si-r: -20deg; animation-delay: 0s; }
.si-261 { top: 8346px; right: 37%; width: 42px; --si-r: 8deg; animation-delay: -1s; }
.si-262 { top: 8377px; left: 56%; width: 48px; --si-r: -10deg; animation-delay: -2s; }
.si-263 { top: 8410px; right: 60%; width: 54px; --si-r: -17deg; animation-delay: -3s; }
.si-264 { top: 8445px; left: 57%; width: 60px; --si-r: 11deg; animation-delay: -4s; }
.si-265 { top: 8476px; right: 66%; width: 66px; --si-r: 10deg; animation-delay: -5s; }
.si-266 { top: 8511px; left: 95%; width: 72px; --si-r: -14deg; animation-delay: -6s; }
.si-267 { top: 8541px; right: 85%; width: 44px; --si-r: 14deg; animation-delay: -7s; }
.si-268 { top: 8570px; left: 37%; width: 50px; --si-r: -7deg; animation-delay: -8s; }
.si-269 { top: 8606px; right: 85%; width: 56px; --si-r: -11deg; animation-delay: -9s; }
.si-270 { top: 8639px; left: 12%; width: 62px; --si-r: 17deg; animation-delay: 0s; }
.si-271 { top: 8670px; right: 87%; width: 68px; --si-r: 7deg; animation-delay: -1s; }
.si-272 { top: 8702px; left: 29%; width: 40px; --si-r: -8deg; animation-delay: -2s; }
.si-273 { top: 8733px; right: 19%; width: 46px; --si-r: 20deg; animation-delay: -3s; }
.si-274 { top: 8761px; left: 6%; width: 52px; --si-r: -3deg; animation-delay: -4s; }
.si-275 { top: 8792px; right: 61%; width: 58px; --si-r: -5deg; animation-delay: -5s; }
.si-276 { top: 8821px; left: 59%; width: 64px; --si-r: -15deg; animation-delay: -6s; }
.si-277 { top: 8855px; right: 81%; width: 70px; --si-r: 3deg; animation-delay: -7s; }
.si-278 { top: 8886px; left: 92%; width: 42px; --si-r: 5deg; animation-delay: -8s; }
.si-279 { top: 8920px; right: 64%; width: 48px; --si-r: 15deg; animation-delay: -9s; }
.si-280 { top: 8954px; left: 32%; width: 54px; --si-r: -20deg; animation-delay: 0s; }
.si-281 { top: 8984px; right: 84%; width: 60px; --si-r: 8deg; animation-delay: -1s; }
.si-282 { top: 9012px; left: 97%; width: 66px; --si-r: -10deg; animation-delay: -2s; }
.si-283 { top: 9041px; right: 55%; width: 72px; --si-r: -17deg; animation-delay: -3s; }
.si-284 { top: 9072px; left: 23%; width: 44px; --si-r: 11deg; animation-delay: -4s; }
.si-285 { top: 9108px; right: 60%; width: 50px; --si-r: 10deg; animation-delay: -5s; }
.si-286 { top: 9136px; left: 72%; width: 56px; --si-r: -14deg; animation-delay: -6s; }
.si-287 { top: 9167px; right: 16%; width: 62px; --si-r: 14deg; animation-delay: -7s; }
.si-288 { top: 9202px; left: 18%; width: 68px; --si-r: -7deg; animation-delay: -8s; }
.si-289 { top: 9237px; right: 86%; width: 40px; --si-r: -11deg; animation-delay: -9s; }
.si-290 { top: 9273px; left: 72%; width: 46px; --si-r: 17deg; animation-delay: 0s; }
.si-291 { top: 9306px; right: 97%; width: 52px; --si-r: 7deg; animation-delay: -1s; }
.si-292 { top: 9341px; left: 79%; width: 58px; --si-r: -8deg; animation-delay: -2s; }
.si-293 { top: 9377px; right: 55%; width: 64px; --si-r: 20deg; animation-delay: -3s; }
.si-294 { top: 9413px; left: 58%; width: 70px; --si-r: -3deg; animation-delay: -4s; }
.si-295 { top: 9443px; right: 96%; width: 42px; --si-r: -5deg; animation-delay: -5s; }
.si-296 { top: 9478px; left: 58%; width: 48px; --si-r: -15deg; animation-delay: -6s; }
.si-297 { top: 9510px; right: 97%; width: 54px; --si-r: 3deg; animation-delay: -7s; }
.si-298 { top: 9541px; left: 82%; width: 60px; --si-r: 5deg; animation-delay: -8s; }
.si-299 { top: 9573px; right: 67%; width: 66px; --si-r: 15deg; animation-delay: -9s; }
.si-300 { top: 9608px; left: 81%; width: 72px; --si-r: -20deg; animation-delay: 0s; }
.si-301 { top: 9639px; right: 36%; width: 44px; --si-r: 8deg; animation-delay: -1s; }
.si-302 { top: 9674px; left: 10%; width: 50px; --si-r: -10deg; animation-delay: -2s; }
.si-303 { top: 9706px; right: 31%; width: 56px; --si-r: -17deg; animation-delay: -3s; }
.si-304 { top: 9738px; left: 43%; width: 62px; --si-r: 11deg; animation-delay: -4s; }
.si-305 { top: 9771px; right: 70%; width: 68px; --si-r: 10deg; animation-delay: -5s; }
.si-306 { top: 9800px; left: 18%; width: 40px; --si-r: -14deg; animation-delay: -6s; }
.si-307 { top: 9830px; right: 30%; width: 46px; --si-r: 14deg; animation-delay: -7s; }
.si-308 { top: 9864px; left: 89%; width: 52px; --si-r: -7deg; animation-delay: -8s; }
.si-309 { top: 9894px; right: 91%; width: 58px; --si-r: -11deg; animation-delay: -9s; }
.si-310 { top: 9925px; left: 9%; width: 64px; --si-r: 17deg; animation-delay: 0s; }
.si-311 { top: 9959px; right: 53%; width: 70px; --si-r: 7deg; animation-delay: -1s; }
.si-312 { top: 9992px; left: 70%; width: 42px; --si-r: -8deg; animation-delay: -2s; }
.si-313 { top: 10027px; right: 54%; width: 48px; --si-r: 20deg; animation-delay: -3s; }
.si-314 { top: 10055px; left: 27%; width: 54px; --si-r: -3deg; animation-delay: -4s; }
.si-315 { top: 10089px; right: 50%; width: 60px; --si-r: -5deg; animation-delay: -5s; }
.si-316 { top: 10117px; left: 98%; width: 66px; --si-r: -15deg; animation-delay: -6s; }
.si-317 { top: 10151px; right: 62%; width: 72px; --si-r: 3deg; animation-delay: -7s; }
.si-318 { top: 10179px; left: 46%; width: 44px; --si-r: 5deg; animation-delay: -8s; }
.si-319 { top: 10211px; right: 97%; width: 50px; --si-r: 15deg; animation-delay: -9s; }
.si-320 { top: 10245px; left: 54%; width: 56px; --si-r: -20deg; animation-delay: 0s; }
.si-321 { top: 10281px; right: 96%; width: 62px; --si-r: 8deg; animation-delay: -1s; }
.si-322 { top: 10317px; left: 78%; width: 68px; --si-r: -10deg; animation-delay: -2s; }
.si-323 { top: 10348px; right: 63%; width: 40px; --si-r: -17deg; animation-delay: -3s; }
.si-324 { top: 10379px; left: 35%; width: 46px; --si-r: 11deg; animation-delay: -4s; }
.si-325 { top: 10413px; right: 63%; width: 52px; --si-r: 10deg; animation-delay: -5s; }
.si-326 { top: 10441px; left: 50%; width: 58px; --si-r: -14deg; animation-delay: -6s; }
.si-327 { top: 10474px; right: 86%; width: 64px; --si-r: 14deg; animation-delay: -7s; }
.si-328 { top: 10508px; left: 93%; width: 70px; --si-r: -7deg; animation-delay: -8s; }
.si-329 { top: 10538px; right: 60%; width: 42px; --si-r: -11deg; animation-delay: -9s; }
.si-330 { top: 10568px; left: 80%; width: 48px; --si-r: 17deg; animation-delay: 0s; }
.si-331 { top: 10604px; right: 4%; width: 54px; --si-r: 7deg; animation-delay: -1s; }
.si-332 { top: 10638px; left: 76%; width: 60px; --si-r: -8deg; animation-delay: -2s; }
.si-333 { top: 10666px; right: 11%; width: 66px; --si-r: 20deg; animation-delay: -3s; }
.si-334 { top: 10700px; left: 18%; width: 72px; --si-r: -3deg; animation-delay: -4s; }
.si-335 { top: 10735px; right: 24%; width: 44px; --si-r: -5deg; animation-delay: -5s; }
.si-336 { top: 10763px; left: 34%; width: 50px; --si-r: -15deg; animation-delay: -6s; }
.si-337 { top: 10797px; right: 42%; width: 56px; --si-r: 3deg; animation-delay: -7s; }
.si-338 { top: 10828px; left: 59%; width: 62px; --si-r: 5deg; animation-delay: -8s; }
.si-339 { top: 10861px; right: 44%; width: 68px; --si-r: 15deg; animation-delay: -9s; }
.si-340 { top: 10895px; left: 36%; width: 40px; --si-r: -20deg; animation-delay: 0s; }
.si-341 { top: 10929px; right: 33%; width: 46px; --si-r: 8deg; animation-delay: -1s; }
.si-342 { top: 10958px; left: 61%; width: 52px; --si-r: -10deg; animation-delay: -2s; }
.si-343 { top: 10986px; right: 96%; width: 58px; --si-r: -17deg; animation-delay: -3s; }
.si-344 { top: 11022px; left: 7%; width: 64px; --si-r: 11deg; animation-delay: -4s; }
.si-345 { top: 11055px; right: 29%; width: 70px; --si-r: 10deg; animation-delay: -5s; }
.si-346 { top: 11084px; left: 84%; width: 42px; --si-r: -14deg; animation-delay: -6s; }
.si-347 { top: 11112px; right: 97%; width: 48px; --si-r: 14deg; animation-delay: -7s; }
.si-348 { top: 11140px; left: 32%; width: 54px; --si-r: -7deg; animation-delay: -8s; }
.si-349 { top: 11171px; right: 3%; width: 60px; --si-r: -11deg; animation-delay: -9s; }
.si-350 { top: 11201px; left: 31%; width: 66px; --si-r: 17deg; animation-delay: 0s; }
.si-351 { top: 11231px; right: 61%; width: 72px; --si-r: 7deg; animation-delay: -1s; }
.si-352 { top: 11260px; left: 73%; width: 44px; --si-r: -8deg; animation-delay: -2s; }
.si-353 { top: 11291px; right: 60%; width: 50px; --si-r: 20deg; animation-delay: -3s; }
.si-354 { top: 11323px; left: 48%; width: 56px; --si-r: -3deg; animation-delay: -4s; }
.si-355 { top: 11353px; right: 78%; width: 62px; --si-r: -5deg; animation-delay: -5s; }
.si-356 { top: 11382px; left: 21%; width: 68px; --si-r: -15deg; animation-delay: -6s; }
.si-357 { top: 11414px; right: 14%; width: 40px; --si-r: 3deg; animation-delay: -7s; }
.si-358 { top: 11442px; left: 40%; width: 46px; --si-r: 5deg; animation-delay: -8s; }
.si-359 { top: 11476px; right: 51%; width: 52px; --si-r: 15deg; animation-delay: -9s; }
.si-360 { top: 11507px; left: 10%; width: 58px; --si-r: -20deg; animation-delay: 0s; }
.si-361 { top: 11538px; right: 14%; width: 64px; --si-r: 8deg; animation-delay: -1s; }
.si-362 { top: 11570px; left: 88%; width: 70px; --si-r: -10deg; animation-delay: -2s; }
.si-363 { top: 11599px; right: 73%; width: 42px; --si-r: -17deg; animation-delay: -3s; }
.si-364 { top: 11627px; left: 45%; width: 48px; --si-r: 11deg; animation-delay: -4s; }
.si-365 { top: 11663px; right: 55%; width: 54px; --si-r: 10deg; animation-delay: -5s; }
.si-366 { top: 11696px; left: 9%; width: 60px; --si-r: -14deg; animation-delay: -6s; }
.si-367 { top: 11732px; right: 83%; width: 66px; --si-r: 14deg; animation-delay: -7s; }
.si-368 { top: 11765px; left: 2%; width: 72px; --si-r: -7deg; animation-delay: -8s; }
.si-369 { top: 11799px; right: 63%; width: 44px; --si-r: -11deg; animation-delay: -9s; }
.si-370 { top: 11828px; left: 56%; width: 50px; --si-r: 17deg; animation-delay: 0s; }
.si-371 { top: 11861px; right: 82%; width: 56px; --si-r: 7deg; animation-delay: -1s; }
.si-372 { top: 11896px; left: 91%; width: 62px; --si-r: -8deg; animation-delay: -2s; }
.si-373 { top: 11926px; right: 56%; width: 68px; --si-r: 20deg; animation-delay: -3s; }
.si-374 { top: 11956px; left: 94%; width: 40px; --si-r: -3deg; animation-delay: -4s; }
.si-375 { top: 11992px; right: 84%; width: 46px; --si-r: -5deg; animation-delay: -5s; }
.si-376 { top: 12024px; left: 79%; width: 52px; --si-r: -15deg; animation-delay: -6s; }
.si-377 { top: 12060px; right: 62%; width: 58px; --si-r: 3deg; animation-delay: -7s; }
.si-378 { top: 12095px; left: 56%; width: 64px; --si-r: 5deg; animation-delay: -8s; }
.si-379 { top: 12127px; right: 42%; width: 70px; --si-r: 15deg; animation-delay: -9s; }
.si-380 { top: 12158px; left: 12%; width: 42px; --si-r: -20deg; animation-delay: 0s; }
.si-381 { top: 12190px; right: 58%; width: 48px; --si-r: 8deg; animation-delay: -1s; }
.si-382 { top: 12221px; left: 97%; width: 54px; --si-r: -10deg; animation-delay: -2s; }
.si-383 { top: 12256px; right: 73%; width: 60px; --si-r: -17deg; animation-delay: -3s; }
.si-384 { top: 12290px; left: 44%; width: 66px; --si-r: 11deg; animation-delay: -4s; }
.si-385 { top: 12318px; right: 64%; width: 72px; --si-r: 10deg; animation-delay: -5s; }
.si-386 { top: 12351px; left: 24%; width: 44px; --si-r: -14deg; animation-delay: -6s; }
.si-387 { top: 12386px; right: 28%; width: 50px; --si-r: 14deg; animation-delay: -7s; }
.si-388 { top: 12419px; left: 34%; width: 56px; --si-r: -7deg; animation-delay: -8s; }
.si-389 { top: 12452px; right: 36%; width: 62px; --si-r: -11deg; animation-delay: -9s; }
.si-390 { top: 12484px; left: 72%; width: 68px; --si-r: 17deg; animation-delay: 0s; }
.si-391 { top: 12512px; right: 67%; width: 40px; --si-r: 7deg; animation-delay: -1s; }
.si-392 { top: 12543px; left: 11%; width: 46px; --si-r: -8deg; animation-delay: -2s; }
.si-393 { top: 12574px; right: 93%; width: 52px; --si-r: 20deg; animation-delay: -3s; }
.si-394 { top: 12608px; left: 63%; width: 58px; --si-r: -3deg; animation-delay: -4s; }
.si-395 { top: 12644px; right: 98%; width: 64px; --si-r: -5deg; animation-delay: -5s; }
.si-396 { top: 12675px; left: 89%; width: 70px; --si-r: -15deg; animation-delay: -6s; }
.si-397 { top: 12710px; right: 83%; width: 42px; --si-r: 3deg; animation-delay: -7s; }
.si-398 { top: 12745px; left: 58%; width: 48px; --si-r: 5deg; animation-delay: -8s; }
.si-399 { top: 12773px; right: 12%; width: 54px; --si-r: 15deg; animation-delay: -9s; }
.si-400 { top: 12805px; left: 29%; width: 60px; --si-r: -20deg; animation-delay: 0s; }
.si-401 { top: 12839px; right: 89%; width: 66px; --si-r: 8deg; animation-delay: -1s; }
.si-402 { top: 12870px; left: 40%; width: 72px; --si-r: -10deg; animation-delay: -2s; }
.si-403 { top: 12903px; right: 61%; width: 44px; --si-r: -17deg; animation-delay: -3s; }
.si-404 { top: 12939px; left: 68%; width: 50px; --si-r: 11deg; animation-delay: -4s; }
.si-405 { top: 12972px; right: 55%; width: 56px; --si-r: 10deg; animation-delay: -5s; }
.si-406 { top: 13008px; left: 43%; width: 62px; --si-r: -14deg; animation-delay: -6s; }
.si-407 { top: 13041px; right: 90%; width: 68px; --si-r: 14deg; animation-delay: -7s; }
.si-408 { top: 13076px; left: 35%; width: 40px; --si-r: -7deg; animation-delay: -8s; }
.si-409 { top: 13108px; right: 33%; width: 46px; --si-r: -11deg; animation-delay: -9s; }
.si-410 { top: 13139px; left: 16%; width: 52px; --si-r: 17deg; animation-delay: 0s; }
.si-411 { top: 13170px; right: 41%; width: 58px; --si-r: 7deg; animation-delay: -1s; }
.si-412 { top: 13199px; left: 96%; width: 64px; --si-r: -8deg; animation-delay: -2s; }
.si-413 { top: 13235px; right: 98%; width: 70px; --si-r: 20deg; animation-delay: -3s; }
.si-414 { top: 13265px; left: 25%; width: 42px; --si-r: -3deg; animation-delay: -4s; }
.si-415 { top: 13296px; right: 95%; width: 48px; --si-r: -5deg; animation-delay: -5s; }
.si-416 { top: 13331px; left: 36%; width: 54px; --si-r: -15deg; animation-delay: -6s; }
.si-417 { top: 13367px; right: 77%; width: 60px; --si-r: 3deg; animation-delay: -7s; }
.si-418 { top: 13399px; left: 13%; width: 66px; --si-r: 5deg; animation-delay: -8s; }
.si-419 { top: 13430px; right: 38%; width: 72px; --si-r: 15deg; animation-delay: -9s; }
.si-420 { top: 13461px; left: 47%; width: 44px; --si-r: -20deg; animation-delay: 0s; }
.si-421 { top: 13491px; right: 39%; width: 50px; --si-r: 8deg; animation-delay: -1s; }
.si-422 { top: 13519px; left: 91%; width: 56px; --si-r: -10deg; animation-delay: -2s; }
.si-423 { top: 13555px; right: 17%; width: 62px; --si-r: -17deg; animation-delay: -3s; }
.si-424 { top: 13587px; left: 6%; width: 68px; --si-r: 11deg; animation-delay: -4s; }
.si-425 { top: 13615px; right: 71%; width: 40px; --si-r: 10deg; animation-delay: -5s; }
.si-426 { top: 13647px; left: 90%; width: 46px; --si-r: -14deg; animation-delay: -6s; }
.si-427 { top: 13677px; right: 82%; width: 52px; --si-r: 14deg; animation-delay: -7s; }
.si-428 { top: 13712px; left: 14%; width: 58px; --si-r: -7deg; animation-delay: -8s; }
.si-429 { top: 13740px; right: 74%; width: 64px; --si-r: -11deg; animation-delay: -9s; }
.si-430 { top: 13772px; left: 61%; width: 70px; --si-r: 17deg; animation-delay: 0s; }
.si-431 { top: 13807px; right: 57%; width: 42px; --si-r: 7deg; animation-delay: -1s; }
.si-432 { top: 13840px; left: 24%; width: 48px; --si-r: -8deg; animation-delay: -2s; }
.si-433 { top: 13868px; right: 33%; width: 54px; --si-r: 20deg; animation-delay: -3s; }
.si-434 { top: 13903px; left: 15%; width: 60px; --si-r: -3deg; animation-delay: -4s; }
.si-435 { top: 13932px; right: 52%; width: 66px; --si-r: -5deg; animation-delay: -5s; }
.si-436 { top: 13967px; left: 10%; width: 72px; --si-r: -15deg; animation-delay: -6s; }
.si-437 { top: 13995px; right: 20%; width: 44px; --si-r: 3deg; animation-delay: -7s; }
.si-438 { top: 14025px; left: 73%; width: 50px; --si-r: 5deg; animation-delay: -8s; }
.si-439 { top: 14057px; right: 11%; width: 56px; --si-r: 15deg; animation-delay: -9s; }
.si-440 { top: 14088px; left: 16%; width: 62px; --si-r: -20deg; animation-delay: 0s; }
.si-441 { top: 14124px; right: 98%; width: 68px; --si-r: 8deg; animation-delay: -1s; }
.si-442 { top: 14158px; left: 78%; width: 40px; --si-r: -10deg; animation-delay: -2s; }
.si-443 { top: 14189px; right: 67%; width: 46px; --si-r: -17deg; animation-delay: -3s; }
.si-444 { top: 14223px; left: 58%; width: 52px; --si-r: 11deg; animation-delay: -4s; }
.si-445 { top: 14258px; right: 39%; width: 58px; --si-r: 10deg; animation-delay: -5s; }
.si-446 { top: 14292px; left: 40%; width: 64px; --si-r: -14deg; animation-delay: -6s; }
.si-447 { top: 14320px; right: 79%; width: 70px; --si-r: 14deg; animation-delay: -7s; }
.si-448 { top: 14349px; left: 98%; width: 42px; --si-r: -7deg; animation-delay: -8s; }
.si-449 { top: 14380px; right: 81%; width: 48px; --si-r: -11deg; animation-delay: -9s; }
.si-450 { top: 14411px; left: 34%; width: 54px; --si-r: 17deg; animation-delay: 0s; }
.si-451 { top: 14440px; right: 21%; width: 60px; --si-r: 7deg; animation-delay: -1s; }
.si-452 { top: 14471px; left: 23%; width: 66px; --si-r: -8deg; animation-delay: -2s; }
.si-453 { top: 14507px; right: 10%; width: 72px; --si-r: 20deg; animation-delay: -3s; }
.si-454 { top: 14537px; left: 1%; width: 44px; --si-r: -3deg; animation-delay: -4s; }
.si-455 { top: 14571px; right: 58%; width: 50px; --si-r: -5deg; animation-delay: -5s; }
.si-456 { top: 14606px; left: 38%; width: 56px; --si-r: -15deg; animation-delay: -6s; }
.si-457 { top: 14634px; right: 30%; width: 62px; --si-r: 3deg; animation-delay: -7s; }
.si-458 { top: 14666px; left: 91%; width: 68px; --si-r: 5deg; animation-delay: -8s; }
.si-459 { top: 14698px; right: 90%; width: 40px; --si-r: 15deg; animation-delay: -9s; }
.si-460 { top: 14733px; left: 10%; width: 46px; --si-r: -20deg; animation-delay: 0s; }
.si-461 { top: 14764px; right: 34%; width: 52px; --si-r: 8deg; animation-delay: -1s; }
.si-462 { top: 14795px; left: 55%; width: 58px; --si-r: -10deg; animation-delay: -2s; }
.si-463 { top: 14824px; right: 70%; width: 64px; --si-r: -17deg; animation-delay: -3s; }
.si-464 { top: 14855px; left: 83%; width: 70px; --si-r: 11deg; animation-delay: -4s; }
.si-465 { top: 14885px; right: 35%; width: 42px; --si-r: 10deg; animation-delay: -5s; }
.si-466 { top: 14915px; left: 10%; width: 48px; --si-r: -14deg; animation-delay: -6s; }
.si-467 { top: 14943px; right: 22%; width: 54px; --si-r: 14deg; animation-delay: -7s; }
.si-468 { top: 14975px; left: 77%; width: 60px; --si-r: -7deg; animation-delay: -8s; }
.si-469 { top: 15007px; right: 57%; width: 66px; --si-r: -11deg; animation-delay: -9s; }
.si-470 { top: 15036px; left: 60%; width: 72px; --si-r: 17deg; animation-delay: 0s; }
.si-471 { top: 15068px; right: 90%; width: 44px; --si-r: 7deg; animation-delay: -1s; }
.si-472 { top: 15102px; left: 35%; width: 50px; --si-r: -8deg; animation-delay: -2s; }
.si-473 { top: 15138px; right: 70%; width: 56px; --si-r: 20deg; animation-delay: -3s; }
.si-474 { top: 15173px; left: 57%; width: 62px; --si-r: -3deg; animation-delay: -4s; }
.si-475 { top: 15202px; right: 77%; width: 68px; --si-r: -5deg; animation-delay: -5s; }
.si-476 { top: 15230px; left: 56%; width: 40px; --si-r: -15deg; animation-delay: -6s; }
.si-477 { top: 15263px; right: 78%; width: 46px; --si-r: 3deg; animation-delay: -7s; }
.si-478 { top: 15295px; left: 4%; width: 52px; --si-r: 5deg; animation-delay: -8s; }
.si-479 { top: 15324px; right: 30%; width: 58px; --si-r: 15deg; animation-delay: -9s; }
.si-480 { top: 15352px; left: 98%; width: 64px; --si-r: -20deg; animation-delay: 0s; }
.si-481 { top: 15384px; right: 74%; width: 70px; --si-r: 8deg; animation-delay: -1s; }
.si-482 { top: 15412px; left: 98%; width: 42px; --si-r: -10deg; animation-delay: -2s; }
.si-483 { top: 15442px; right: 61%; width: 48px; --si-r: -17deg; animation-delay: -3s; }
.si-484 { top: 15478px; left: 84%; width: 54px; --si-r: 11deg; animation-delay: -4s; }
.si-485 { top: 15513px; right: 36%; width: 60px; --si-r: 10deg; animation-delay: -5s; }
.si-486 { top: 15543px; left: 75%; width: 66px; --si-r: -14deg; animation-delay: -6s; }
.si-487 { top: 15577px; right: 82%; width: 72px; --si-r: 14deg; animation-delay: -7s; }
.si-488 { top: 15612px; left: 12%; width: 44px; --si-r: -7deg; animation-delay: -8s; }
.si-489 { top: 15647px; right: 45%; width: 50px; --si-r: -11deg; animation-delay: -9s; }
.si-490 { top: 15681px; left: 43%; width: 56px; --si-r: 17deg; animation-delay: 0s; }
.si-491 { top: 15714px; right: 86%; width: 62px; --si-r: 7deg; animation-delay: -1s; }
.si-492 { top: 15743px; left: 21%; width: 68px; --si-r: -8deg; animation-delay: -2s; }
.si-493 { top: 15776px; right: 53%; width: 40px; --si-r: 20deg; animation-delay: -3s; }
.si-494 { top: 15811px; left: 37%; width: 46px; --si-r: -3deg; animation-delay: -4s; }
.si-495 { top: 15845px; right: 98%; width: 52px; --si-r: -5deg; animation-delay: -5s; }
.si-496 { top: 15881px; left: 5%; width: 58px; --si-r: -15deg; animation-delay: -6s; }
.si-497 { top: 15916px; right: 12%; width: 64px; --si-r: 3deg; animation-delay: -7s; }
.si-498 { top: 15949px; left: 33%; width: 70px; --si-r: 5deg; animation-delay: -8s; }
.si-499 { top: 15982px; right: 15%; width: 42px; --si-r: 15deg; animation-delay: -9s; }
.si-500 { top: 16016px; left: 66%; width: 48px; --si-r: -20deg; animation-delay: 0s; }

/* Desktop — thin out icons so they're never too close (similar density to mobile) */
@media (min-width: 701px) {
  .timeline-icons-layer .si:nth-child(2n) {
    visibility: hidden;
  }
}

/* Mobile — scale down, keep all visible */
@media (max-width: 700px) {
  .si { opacity: 0.5; }
  [class*="si-"] { width: 32px !important; }
}

/* Line name badges — room for map silhouettes that extend past the header boxes */
.timeline-headers {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 1rem;
  margin-bottom: 0;
  align-items: center;
  position: relative;
  min-height: 230px;
  padding: 2.25rem 0.35rem 3.5rem;
  box-sizing: border-box;
}

.timeline-tip {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  margin: 0.15rem 0 1.5rem;
  opacity: 0.8;
}

/* Icons only appear below timeline-headers and timeline-tip */
.timeline-icons-layer {
  position: absolute;
  top: 288px; /* below headers + tip + silhouette bleed */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  /* si-* rules position icons up to ~16000px top; without clip they extend page scroll past real content */
  overflow: hidden;
}

/* Proportional Timeline Container */
.timeline-proportional {
  position: relative;
  min-height: 500px;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
}

/* Vertical track lines - positioned in center column */
.timeline-track {
  position: absolute;
  top: 0;
  bottom: -80px;
  border-radius: 3px;
}

.timeline-track-jon {
  left: calc(50% - 40px + 22px);
  width: 5px;
  background: #0062a8;
}

.timeline-track-lisa {
  left: calc(50% + 40px - 30px);
  width: 8px;
  background: #e60012;
}

/* Events positioned absolutely within proportional timeline */
.timeline-proportional .timeline-event {
  position: absolute;
  padding: 0.5rem 1rem;
}

.timeline-proportional .timeline-jon {
  right: calc(50% + 40px);
  text-align: right;
  padding-right: 1.5rem;
}

.timeline-proportional .timeline-lisa {
  left: calc(50% + 40px);
  text-align: left;
  padding-left: 1.5rem;
}

/* Ensure event descriptions are visible in proportional timeline */
.timeline-proportional .event-desc {
  display: block;
  font-size: 0.85rem;
  color: #666;
  margin-top: 0.25rem;
}

/* Station markers for proportional timeline - positioned on the lines */
.timeline-proportional .timeline-jon::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 0.5rem;
  width: 14px;
  height: 22px;
  background: #fff;
  border: 3px solid #0062a8;
  border-radius: 7px;
  z-index: 3;
  transform: translateX(50%);
}

.timeline-proportional .timeline-lisa::after {
  content: '';
  position: absolute;
  left: -26px;
  top: 0.5rem;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 4px solid #e60012;
  border-radius: 50%;
  z-index: 3;
  transform: translateX(-50%);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.timeline-header .line-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  margin-right: 0.65rem;
}

/* Jon - Taipei MRT style (rounded pill badges, clean aesthetic) */
.timeline-header-jon {
  justify-content: center;
  color: #444;
  text-transform: none;
  border: 2px solid #0062a8;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  min-height: 64px;
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}

/* Washington map — larger than the header box, sits behind frosted ::after */
.timeline-header-jon::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(82.65625vw, 301.875px);
  height: min(82.65625vw, 301.875px);
  transform: translate(-50%, -50%);
  background: url('/images/washington-silhouette.png') center / contain no-repeat;
  filter: brightness(0) url('/images/silhouette-thin-filter.svg#silhouette-erode');
  opacity: 0.1;
  pointer-events: none;
}

.timeline-header-jon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  background-image: linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65));
  pointer-events: none;
}

.timeline-header-jon .line-code,
.timeline-header-jon .line-name {
  position: relative;
  z-index: 2;
}

.timeline-header-jon .line-code {
  border-radius: 10px;
  background: linear-gradient(180deg, #0062a8 0%, #004d87 100%);
  box-shadow: 0 2px 4px rgba(0, 98, 168, 0.3);
}

/* Lisa - Tokyo Metro style (circular badges, bold) */
.timeline-header-lisa {
  justify-content: center;
  color: #333;
  text-transform: none;
  letter-spacing: 0.5px;
  border: 2px solid #e60012;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  min-height: 64px;
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}

.timeline-header-lisa::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(78.5234375vw, 282.684375px);
  height: min(78.5234375vw, 282.684375px);
  transform: translate(-50%, -50%);
  background: url('/images/oahu-silhouette.png') center / contain no-repeat;
  filter: brightness(0) url('/images/silhouette-thin-filter.svg#silhouette-erode');
  opacity: 0.1;
  pointer-events: none;
}

.timeline-header-lisa::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.9);
  background-image: linear-gradient(rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.68));
  pointer-events: none;
}

.timeline-header-lisa .line-code,
.timeline-header-lisa .line-name {
  position: relative;
  z-index: 2;
}

.timeline-header-lisa .line-code {
  border-radius: 50%;
  background: #e60012;
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px #e60012;
}

.timeline-lines-label {
  width: 80px;
}

.line-name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
  text-transform: uppercase;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.5px;
}

.line-surname {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 2px;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

/* Jon - Chinese surname styling */
.timeline-header-jon .line-surname {
  font-family: "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: #0062a8;
  letter-spacing: 0;
}

/* Lisa - Japanese surname styling */
.timeline-header-lisa .line-surname {
  font-family: "Hiragino Kaku Gothic Pro", "Yu Gothic", "Meiryo", sans-serif;
  color: #e60012;
}

/* Main timeline row structure */
.timeline-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  margin-bottom: 0;
  min-height: 100px;
  position: relative;
}

/* Row with absolute positioning for events (matches proportional timeline style) */
.row-before-converge {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: start;
  position: relative;
  min-height: 100px;
  z-index: 2;
}

.row-before-converge .timeline-connector {
  width: 80px;
  position: relative;
  height: 100%;
}

.row-before-converge .timeline-jon {
  text-align: right;
}

.row-before-converge .timeline-lisa {
  text-align: left;
}

/* Station markers for row-before-converge - match proportional timeline positioning */
.row-before-converge .timeline-jon::after {
  right: -1.5rem;
  top: 1.1rem;
  transform: translateX(50%);
  z-index: 5;
}

.row-before-converge .timeline-lisa::after {
  left: -26px;
  top: 1.1rem;
  transform: translateX(-50%);
  z-index: 5;
}

/* Station events */
.timeline-event {
  padding: 0.5rem 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeline-event.empty {
  visibility: hidden;
}

/* Jon stations - Taipei MRT style (pill/rounded rectangle markers) */
.timeline-jon {
  text-align: right;
  align-items: flex-end;
  padding-right: 1.5rem;
}

.timeline-jon::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 1.1rem;
  width: 14px;
  height: 22px;
  background: #fff;
  border: 3px solid #0062a8;
  border-radius: 7px;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transform: translateX(50%);
}

/* Lisa stations - Tokyo Metro style (bold circular markers) */
.timeline-lisa {
  text-align: left;
  align-items: flex-start;
  padding-left: 1.5rem;
}

.timeline-lisa::after {
  content: '';
  position: absolute;
  left: -26px;
  top: 1.1rem;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 4px solid #e60012;
  border-radius: 50%;
  z-index: 3;
  transform: translateX(-50%);
}

/* Station labels - Base styles */
.event-year {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #666;
  letter-spacing: 0.5px;
}

.event-place {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin: 0.15rem 0;
  letter-spacing: -0.25px;
}

.event-desc {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  color: #888;
  font-style: normal;
}

.event-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #222;
  margin: 0.25rem 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Jon - Taipei MRT typography (clean, bilingual-inspired) */
/* Jon - consistent typography */
.timeline-jon .event-year {
  font-size: 0.8rem;
  color: #0062a8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-jon .event-place {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.timeline-jon .event-desc {
  font-size: 0.85rem;
  color: #666;
  font-weight: 400;
}

/* Lisa - consistent typography (matching Jon) */
.timeline-lisa .event-year {
  font-size: 0.8rem;
  color: #e60012;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline-lisa .event-place {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
}

.timeline-lisa .event-desc {
  font-size: 0.85rem;
  color: #666;
  font-weight: 400;
}

/* Rail lines (connector area) */
.timeline-connector {
  position: relative;
  width: 80px;
}

.connector-line {
  position: absolute;
  top: 0;
  height: 100%;
}

/* Hide connector lines when converge row lines extend through */
.timeline-connector.no-lines .connector-line {
  display: none;
}

/* Jon - Taipei MRT line with metro-style curves */
.connector-line.connector-jon {
  background: #0062a8;
  left: 18px;
  width: 5px;
  border-radius: 3px;
}

/* Lisa - Tokyo Metro line with metro-style curves */
.connector-line.connector-lisa {
  background: #e60012;
  left: 50px;
  width: 8px;
  border-radius: 3px;
}

/* Lines now consistent across all rows for proper alignment */

/* Lines now use consistent styling without circular caps */

.connector-dot {
  display: none;
}

/* Converging rows - Interchange station (blending both styles) */
.timeline-row-converge {
  grid-template-columns: 1fr 80px 1fr;
  min-height: 140px;
  position: relative;
  margin-top: 2rem;
  z-index: 1;
}

.timeline-row-converge .timeline-event.timeline-shared {
  grid-column: 1 / -1;
  text-align: center;
  align-items: center;
  padding: 1.5rem 1.25rem;
  position: relative;
  z-index: 5;
  background: #fff;
  max-width: 300px;
  margin: 0 auto;
}

/* Interchange station marker - split style (Taipei left, Tokyo right) */
.timeline-row-converge .timeline-event.timeline-shared::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  background: #fff;
  border-radius: 12px;
  z-index: -1;
  border-left: 4px solid #0062a8;
  border-right: 5px solid #e60012;
  border-top: 4px solid #666;
  border-bottom: 4px solid #666;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.timeline-row-converge .timeline-event.timeline-shared::after {
  content: '轉乘 Transfer 乗換';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #0062a8 0%, #333 50%, #e60012 100%);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Lines that pass through converge points */
.timeline-row-converge::before,
.timeline-row-converge::after {
  content: '';
  position: absolute;
  top: -20px;
  height: calc(100% + 40px);
  z-index: 1;
}

/* Taipei MRT line (thinner) - matches timeline-track-jon position */
.timeline-row-converge::before {
  left: calc(50% - 18px);
  width: 5px;
  border-radius: 3px;
  background: #0062a8;
}

/* Tokyo Metro line (thicker) - matches timeline-track-lisa position */
.timeline-row-converge::after {
  left: calc(50% + 10px);
  width: 8px;
  border-radius: 3px;
  background: #e60012;
}

/* Extension for first date row to connect from proportional timeline */
.timeline-row-converge.extends-from-timeline::before,
.timeline-row-converge.extends-from-timeline::after {
  top: -80px;
  height: calc(100% + 100px);
}

/* Special extension for engagement row to connect to 2020 events */
.timeline-row-converge.extends-to-2020::before,
.timeline-row-converge.extends-to-2020::after {
  top: -120px;
  height: calc(100% + 140px);
}

/* Final station - Terminal style (combined heritage) */
.timeline-row-final .timeline-event.timeline-shared::before {
  border: none;
  background: 
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #0062a8 0%, #0062a8 48%, #e60012 52%, #e60012 100%) border-box;
  border: 5px solid transparent;
  border-radius: 16px;
}

.timeline-row-final .timeline-event.timeline-shared::after {
  content: '終點站 Terminal 終点';
  background: linear-gradient(90deg, #0062a8 0%, #222 50%, #e60012 100%);
  padding: 5px 14px;
  font-size: 0.65rem;
}

.timeline-row-final::before,
.timeline-row-final::after {
  height: 50%;
  top: 0;
}

/* Photos between stations */
.dual-timeline .timeline-photo {
  margin: 1.5rem auto;
  max-width: 500px;
  position: relative;
  z-index: 4;
  border: 3px solid #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  overflow: hidden;
}

.dual-timeline .timeline-photo:has(+ .timeline-photo) {
  margin-bottom: 0;
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dual-timeline .timeline-photo + .timeline-photo {
  margin-top: 0;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dual-timeline .timeline-photo img {
  display: block;
  max-height: none;
  object-fit: contain;
}

/* Hide lines on photos */
.dual-timeline .timeline-photo::before,
.dual-timeline .timeline-photo::after {
  display: none;
}

/* Side by side photos */
.timeline-photo-pair {
  display: flex;
  margin: 1.5rem auto;
  max-width: 700px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.timeline-photo-half {
  flex: 1;
}

.timeline-photo-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Clickable timeline events */
.clickable-event {
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.clickable-event:hover {
  background-color: rgba(230, 0, 18, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Image Modal */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.image-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 0;
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  z-index: 1;
}

.modal-content img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.modal-content-scroll {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  width: min(90vw, 100%);
  max-width: 90vw;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}

.modal-content-scroll::-webkit-scrollbar {
  display: none;
}

/* One flex page per image = full scroller width so portrait/landscape stay visually centered */
.modal-content-scroll img {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  max-height: 85vh;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border-radius: 0;
  box-sizing: border-box;
}

.modal-scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 2;
}

.modal-scroll-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background 0.3s ease;
}

.modal-scroll-dot.active {
  background: rgba(255, 255, 255, 0.9);
}

/* Left/right arrows on image modal (above scroller + overlay) */
.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10002;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.2s ease, opacity 0.2s ease;
}

.modal-arrow:hover {
  background: #fff;
}

.modal-arrow:disabled,
.modal-arrow.hidden {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.modal-arrow-prev {
  left: 1rem;
}

.modal-arrow-next {
  right: 1rem;
}

.modal-close-fixed {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  background: #fff;
  border: none;
  color: #333;
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.modal-close-fixed:hover {
  background: #eee;
}

.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.modal-close:hover {
  opacity: 1;
}

/* Vertical connector between timeline rows */
.timeline-connector-vertical {
  position: relative;
  height: 40px;
  width: 100%;
  margin-top: -30px;
}

.timeline-connector-vertical::before,
.timeline-connector-vertical::after {
  content: '';
  position: absolute;
  top: 0;
  height: calc(100% + 20px);
}

/* Taipei MRT line (blue, thinner) - matches converge row position */
.timeline-connector-vertical::before {
  left: calc(50% - 22px);
  width: 5px;
  border-radius: 3px;
  background: #0062a8;
}

/* Tokyo Metro line (red, thicker) - matches converge row position */
.timeline-connector-vertical::after {
  left: calc(50% + 10px);
  width: 8px;
  border-radius: 3px;
  background: #e60012;
}

/* Responsive */
@media (max-width: 700px) {
  .story-timeline-wrap {
    background-size: 15px 15px, 15px 15px, 100% 100%;
    padding-top: 0.5rem;
  }

  .story-timeline-inner {
    padding: 1rem;
  }

  .story-timeline-wrap .story-timeline-inner {
    padding-top: 1.85rem;
  }

  .timeline-headers {
    grid-template-columns: 1fr 30px 1fr;
    margin-bottom: 0;
    gap: 0.5rem;
    min-height: 195px;
    padding: 1.75rem 0.15rem 2.75rem;
  }

  .timeline-icons-layer {
    top: 248px; /* below headers + tip + silhouette bleed on mobile */
  }

  .timeline-header-jon::before {
    width: min(93.4375vw, 215.625px);
    height: min(93.4375vw, 215.625px);
  }

  .timeline-header-lisa::before {
    width: min(80.571875vw, 177.53125px);
    height: min(80.571875vw, 177.53125px);
  }

  .timeline-tip {
    margin: -0.3rem 0 1.25rem;
  }

  .timeline-header {
    font-size: 0.55rem;
    gap: 0.25rem;
    padding: 0.5rem;
    justify-content: center;
  }
  
  .timeline-header-jon,
  .timeline-header-lisa {
    flex-direction: column;
    text-align: center;
    min-height: 4.25rem;
    padding: 0.45rem 0.5rem;
    justify-content: center;
  }
  
  .timeline-header-jon .line-code,
  .timeline-header-lisa .line-code {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    margin-right: 0;
    margin-bottom: 0.2rem;
  }

  .timeline-header-jon .line-code {
    border-radius: 5px;
  }

  .timeline-header-lisa .line-code {
    border-radius: 50%;
  }
  
  /* Silhouettes on mobile - larger and more visible */
  .timeline-header-jon {
    background-size: 100% 100%, 200px 200px;
  }

  .timeline-header-lisa {
    background-size: 100% 100%, 170px 170px;
  }

  .line-surname {
    font-size: 0.6rem;
  }
  
  .line-name {
    font-size: 0.7rem;
    letter-spacing: 0.35px;
  }

  .timeline-lines-label {
    width: 30px;
  }

  .timeline-row {
    grid-template-columns: 1fr 50px 1fr;
    min-height: 85px;
  }

  .timeline-connector {
    width: 50px;
  }
  
  .row-before-converge {
    grid-template-columns: 1fr 50px 1fr;
    min-height: 85px;
  }
  
  .row-before-converge .timeline-connector {
    width: 50px;
  }
  
  .row-before-converge .timeline-jon::after {
    right: -13px;
    top: 0.9rem;
    transform: none;
    z-index: 5;
  }
  
  .row-before-converge .timeline-lisa::after {
    left: -10px;
    top: 0.9rem;
    transform: translateX(-50%);
    z-index: 5;
  }

  .connector-line.connector-jon {
    left: 12px;
    width: 4px;
  }

  .connector-line.connector-lisa {
    left: 32px;
    width: 6px;
  }

  .timeline-event {
    padding: 0.4rem 0.75rem;
  }

  /* Taipei style - smaller pill - centered on the track line */
  .timeline-jon::after {
    width: 10px;
    height: 16px;
    border-width: 2px;
    border-radius: 5px;
    top: 0.9rem;
    right: -1.5rem;
    transform: translateX(50%);
  }

  /* Tokyo style - smaller circle - centered on the track line */
  .timeline-lisa::after {
    width: 12px;
    height: 12px;
    border-width: 2px;
    top: 0.9rem;
    left: -10px;
    transform: translateX(-50%);
  }

  .timeline-jon .event-place,
  .timeline-lisa .event-place {
    font-size: 0.85rem;
  }

  .event-year {
    font-size: 0.65rem;
  }

  .event-desc {
    display: block;
    font-size: 0.75rem;
  }

  .timeline-row-converge {
    min-height: 120px;
    grid-template-columns: 1fr 50px 1fr;
  }

  .timeline-row-converge .timeline-event.timeline-shared {
    max-width: 200px;
    padding: 1rem 0.75rem;
  }

  .timeline-row-converge .timeline-event.timeline-shared::before {
    border-width: 3px;
  }

  .timeline-row-converge .timeline-event.timeline-shared::after {
    font-size: 0.5rem;
    padding: 3px 8px;
  }

  .timeline-row-converge .timeline-event.timeline-shared .event-desc {
    display: block;
    font-size: 0.7rem;
  }

  .timeline-row-converge::before {
    left: calc(50% - 19px);
    width: 4px;
    top: -15px;
    height: calc(100% + 30px);
  }

  .timeline-row-converge::after {
    left: calc(50% + 12px);
    width: 6px;
    top: -15px;
    height: calc(100% + 30px);
  }
  
  .timeline-track {
    bottom: -60px;
  }
  
  .timeline-track-jon {
    left: calc(50% - 25px + 6px);
    width: 4px;
  }
  
  .timeline-track-lisa {
    left: calc(50% + 25px - 13px);
    width: 6px;
  }
  
  .timeline-proportional {
    grid-template-columns: 1fr 50px 1fr;
  }
  
  .timeline-proportional .timeline-jon {
    right: calc(50% + 25px);
    padding-right: 1rem;
  }
  
  .timeline-proportional .timeline-lisa {
    left: calc(50% + 25px);
    padding-left: 1rem;
  }
  
  .timeline-proportional .timeline-jon::after {
    right: -13px;
    width: 10px;
    height: 16px;
    border-width: 2px;
    transform: none;
  }
  
  .timeline-proportional .timeline-lisa::after {
    left: -10px;
    width: 12px;
    height: 12px;
    border-width: 2px;
    transform: translateX(-50%);
  }
  
  .timeline-row-converge.extends-from-timeline::before,
  .timeline-row-converge.extends-from-timeline::after {
    top: -80px;
    height: calc(100% + 100px);
  }
  
  .timeline-row-converge.extends-to-2020::before,
  .timeline-row-converge.extends-to-2020::after {
    top: -100px;
    height: calc(100% + 120px);
  }

  .timeline-connector-vertical::before {
    left: calc(50% - 19px);
    width: 4px;
  }

  .timeline-connector-vertical::after {
    left: calc(50% + 12px);
    width: 6px;
  }

  .dual-timeline .timeline-photo {
    margin: 1rem auto;
  }

  .dual-timeline .timeline-photo::before,
  .dual-timeline .timeline-photo::after {
    display: none;
  }

  .timeline-row-final .timeline-event.timeline-shared::after {
    font-size: 0.55rem;
  }
}

/* Generic form styles */
.form-row {
  margin-bottom: 1.25rem;
}

.form-row label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.35rem;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.12);
}

.form-row input[type="file"] {
  padding: 0.5rem;
  background: var(--bg);
}

/* RSVP attending/plusone details */
.attending-details,
.plusone-details {
  padding: 1rem;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.plusone-details {
  margin-left: 1rem;
  border-left: 3px solid var(--accent-soft);
}

/* Song list */
.song-list {
  margin-top: 1rem;
}

.song-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.song-item:last-child {
  border-bottom: none;
}

.song-requester {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Quiz */
.quiz-question {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.quiz-question:last-child {
  border-bottom: none;
}

.quiz-q {
  margin: 0 0 0.75rem;
  color: var(--text);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background 0.15s;
}

.quiz-option:hover {
  background: var(--bg);
}

.quiz-option input {
  width: auto;
}

.quiz-results {
  margin-top: 2rem;
  text-align: center;
}

.quiz-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.score-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 600;
  color: var(--accent);
}

.score-label {
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* Guestbook */
.guestbook-list {
  margin-top: 1.5rem;
}

.guestbook-entry {
  padding: 1.25rem;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 1rem;
}

.gb-message {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text);
  margin: 0 0 0.5rem;
  line-height: 1.5;
}

.gb-author {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Photo gallery */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.photo-item {
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
}

.photo-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.photo-caption,
.photo-uploader {
  padding: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.photo-caption {
  color: var(--text);
}

/* Seating */
.seating-form {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 2rem;
}

.seating-form .form-row {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}

.seating-result {
  margin-bottom: 2rem;
}

.seating-found,
.seating-not-found {
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}

.seating-found {
  background: rgba(139, 115, 85, 0.1);
}

.seating-found .table-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0.5rem 0 0;
}

.seating-not-found {
  background: var(--bg);
  color: var(--text-muted);
}

.seating-chart {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.table-card {
  background: var(--bg);
  border-radius: 8px;
  padding: 1rem;
}

.table-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.table-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.table-card li {
  padding: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Carpool */
.carpool-list {
  margin-top: 1.5rem;
}

.carpool-post {
  padding: 1rem;
  background: var(--bg);
  border-radius: 8px;
  margin-bottom: 1rem;
  border-left: 4px solid var(--accent);
}

.carpool-type {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: rgba(139, 115, 85, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.carpool-details {
  margin: 0.5rem 0;
  color: var(--text);
}

.carpool-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Live stream */
.livestream-info {
  background: var(--bg);
  padding: 1.5rem;
  border-radius: 8px;
  margin: 1.5rem 0;
}

.livestream-info h2 {
  margin-top: 0;
}

.livestream-player {
  margin-top: 1.5rem;
}

.livestream-placeholder {
  background: var(--bg);
  padding: 3rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  border: 2px dashed var(--border);
}

.livestream-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Bingo */
.bingo-card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 1.5rem 0;
  max-width: 500px;
}

.bingo-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.75rem;
  background: var(--bg);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  line-height: 1.2;
}

.bingo-cell:hover {
  background: var(--border);
}

.bingo-cell.marked {
  background: var(--accent);
  color: #fff;
  transform: scale(0.95);
}

.bingo-cell.free {
  background: var(--accent-soft);
  font-weight: 600;
}

.btn-secondary {
  padding: 0.65rem 1.25rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  margin-right: 0.5rem;
}

.btn-secondary:hover {
  background: var(--accent);
  color: #fff;
}

/* Fun page grid */
.fun-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.fun-card {
  display: block;
  padding: 1.5rem;
  background: var(--bg);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.fun-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.fun-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.fun-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Packing list */
.packing-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.packing-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.packing-list li:last-child {
  border-bottom: none;
}

.packing-list label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.packing-list input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent);
}

/* Empty states */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 2rem 1rem;
  font-style: italic;
}

/* Print styles for bingo */
@media print {
  .site-header,
  .btn-secondary,
  #bingo-new {
    display: none !important;
  }
  
  .bingo-card {
    max-width: 100%;
  }
  
  .bingo-cell {
    border: 1px solid #ccc;
  }
}

/* Site Footer with Family Crest */
.site-footer {
  margin-top: auto;
  padding: 2rem 1rem 1.5rem;
  text-align: center;
  flex-shrink: 0;
}

.page-home .site-footer {
  position: fixed;
  bottom: -0.75rem;
  right: -0.25rem;
  left: auto;
  z-index: 10;
  padding: 0;
  text-align: right;
}

.page-home .footer-crest {
  width: 100px;
}

.page-home .footer-names,
.page-home .footer-date {
  display: none;
}

.page-home .scroll-to-top {
  bottom: 8rem;
}

.page-home.wedding-page {
  padding-bottom: 0;
}

.footer-crest {
  width: 120px;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  background: transparent;
  border: none;
}

.footer-crest:hover {
  opacity: 1;
}

.footer-names {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: -1.5rem;
  letter-spacing: 0.02em;
}

/* Adjust footer overlap for smaller screens */
@media (max-width: 600px) {
  .footer-names {
    margin-top: -1rem;
  }
  
  .footer-crest {
    width: 100px;
  }
}

.footer-date {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
  z-index: 1000;
}

.scroll-to-top span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: var(--text);
  transform: translateY(-2px);
}

.scroll-to-top:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .scroll-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
  }
  .page-home .scroll-to-top {
    bottom: 7rem;
  }
}