<!DOCTYPE html>
<html lang="en">
<head><meta name="generator" content="Cloudrizz" /><!-- Built and deployed with Cloudrizz — https://cloudrizz.com — apps from a chat, hosted on a global edge. -->
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png" href="wedding_logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Olav & Tonje — 15. mai 2027 · Rygge & Moss</title>
  <meta property="og:title" content="Olav & Tonje — 15. mai 2027" />
  <meta property="og:description" content="Du er hjertelig invitert til å feire bryllupet vårt i Rygge kirke og på Rundhuset i Moss." />
  <meta property="og:image" content="https://assets.metaliving.ai/envelope.png" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://wedding-edef78.cloudrizz.app/" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content="https://assets.metaliving.ai/envelope.png" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Montserrat:wght@200;300;400;500&family=Dancing+Script:wght@400;500&family=Parisienne&display=swap" rel="stylesheet" />
  <script>
    if (new URLSearchParams(location.search).has('invitasjon')) {
      document.documentElement.classList.add('invite-mode');
    }
  </script>
  <style>
    :root {
      --gold: #6f8557;
      --gold-light: #9caf88;
      --gold-dark: #55703f;
      --navy: #2c3c30;
      --navy-mid: #e8f0e1;
      --cream: #faf7f2;
      --cream-dark: #f0ead8;
      --bg: #f5f9f2;
      --bg-soft: #ebf2e4;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; font-size: 120%; }

    body {
      background: var(--navy);
      color: var(--cream);
      font-family: 'Montserrat', sans-serif;
      overflow-x: hidden;
    }

    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--navy); }
    ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 2px; }

    #hero-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 1.5rem 3rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: background 0.4s, backdrop-filter 0.4s;
    }
    nav.scrolled {
      background: rgba(28, 46, 36, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(156, 175, 136, 0.15);
    }
    .nav-logo img {
      height: 42px;
      width: auto;
      display: block;
      filter: brightness(0) invert(1);
      opacity: 0.92;
    }
    .nav-links { display: flex; gap: 2.5rem; list-style: none; }
    .nav-links a {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.65rem;
      font-weight: 400;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(44, 60, 49, 0.7);
      text-decoration: none;
      transition: color 0.3s;
    }
    .nav-links a:hover { color: var(--gold); }

    #hero {
      position: relative;
      height: 100vh;
      min-height: 700px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .hero-video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(28,46,36,0.9) 0%, rgba(47,74,58,0.7) 50%, rgba(28,46,36,0.9) 100%);
      z-index: 1;
    }

    .hero-overline {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.6rem;
      font-weight: 400;
      letter-spacing: 0.5em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 2rem;
      opacity: 0;
      animation: fadeUp 1s ease 0.3s forwards;
    }

    .hero-names {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(4rem, 10vw, 9rem);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -0.01em;
      color: var(--cream);
      opacity: 0;
      animation: fadeUp 1.2s ease 0.6s forwards;
    }

    .hero-ampersand {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      color: var(--gold);
      font-weight: 300;
    }

    .hero-divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.8rem 0;
      opacity: 0;
      animation: fadeUp 1s ease 0.9s forwards;
    }
    .hero-divider-line {
      width: 80px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold));
    }
    .hero-divider-line.right {
      background: linear-gradient(90deg, var(--gold), transparent);
    }
    .hero-divider-diamond {
      width: 6px; height: 6px;
      background: var(--gold);
      transform: rotate(45deg);
    }

    .hero-date {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.75rem;
      font-weight: 300;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: rgba(44, 60, 49, 0.8);
      opacity: 0;
      animation: fadeUp 1s ease 1.1s forwards;
    }

    .hero-location {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-size: 1.3rem;
      font-weight: 300;
      color: var(--gold-light);
      margin-top: 0.5rem;
      opacity: 0;
      animation: fadeUp 1s ease 1.3s forwards;
    }

    .hero-cta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.55rem;
      margin: 3.5rem auto 0;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      opacity: 0;
      animation: fadeUp 1s ease 1.6s forwards;
    }
    .hero-cta-label {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.58rem;
      font-weight: 300;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: rgba(156,175,136,0.65);
    }
    .hero-cta-chevron {
      width: 18px;
      height: 18px;
      border-right: 1px solid rgba(156,175,136,0.55);
      border-bottom: 1px solid rgba(156,175,136,0.55);
      transform: rotate(45deg);
      animation: ctaBounce 1.8s ease-in-out infinite;
    }
    @keyframes ctaBounce {
      0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 0.55; }
      50%       { transform: rotate(45deg) translateY(5px); opacity: 1; }
    }

    section {
      position: relative;
      overflow: hidden;
    }

    .section-label {
      font-size: 0.58rem;
      font-weight: 400;
      letter-spacing: 0.5em;
      text-transform: uppercase;
      color: var(--gold);
      display: block;
      margin-bottom: 1rem;
    }

    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 300;
      line-height: 1.1;
      color: var(--cream);
    }

    .gold-line {
      width: 50px;
      height: 1px;
      background: var(--gold);
      margin: 1.5rem auto;
    }

    #countdown {
      background: #DAE6CC;
      border-top: 1px solid rgba(156, 175, 136, 0.15);
      border-bottom: 1px solid rgba(156, 175, 136, 0.15);
      padding: 5rem 2rem;
    }

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

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

    .countdown-number {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3rem, 6vw, 5.5rem);
      font-weight: 300;
      color: var(--gold);
      line-height: 1;
      min-width: 2ch;
      text-align: center;
    }

    .countdown-label {
      font-size: 0.55rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(44, 60, 49, 0.5);
    }

    .countdown-sep {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3rem;
      font-weight: 300;
      color: rgba(156, 175, 136, 0.3);
      align-self: flex-start;
      margin-top: 0.5rem;
    }

    #story {
      background: var(--cream);
      color: var(--navy);
      padding: 8rem 2rem 3rem;
    }

    #story .section-label { color: var(--gold-dark); }
    #story .section-title { color: var(--navy); }

    .story-timeline {
      max-width: 960px;
      margin: 4rem auto 0;
    }

    .story-moment {
      display: flex;
      align-items: center;
      gap: 4rem;
      padding: 4rem 0;
      border-bottom: 1px solid rgba(130, 150, 95, 0.18);
    }

    .story-moment:last-child { border-bottom: none; }
    .story-moment:nth-child(even) { flex-direction: row-reverse; }

    .story-moment-img-wrap {
      flex: 0 0 44%;
      max-width: 44%;
      min-width: 0;
      position: relative;
      overflow: hidden;
      border-radius: 2px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
      opacity: 0;
      transform: translateX(-48px);
      transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease;
    }

    .story-moment:nth-child(even) .story-moment-img-wrap { transform: translateX(48px); }

    .story-moment-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(108deg, transparent 32%, rgba(156, 175, 136, 0.18) 50%, transparent 68%);
      transform: translateX(-110%);
      pointer-events: none;
      transition: transform 0.75s ease;
    }

    .story-moment-img-wrap:hover::after { transform: translateX(110%); }

    .story-moment-img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
      transform: scale(1.08);
      filter: saturate(0.65);
      transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s ease;
    }

    .story-moment .story-moment-img-wrap:hover .story-moment-img { transform: scale(1.05); transition-duration: 0.65s; }

    .story-moment-content {
      flex: 1;
      min-width: 0;
      opacity: 0;
      transform: translateX(48px);
      transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 1s ease 0.18s;
    }

    .story-moment:nth-child(even) .story-moment-content { transform: translateX(-48px); }

    .story-moment-label {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 0.2rem;
      opacity: 0;
      transition: opacity 0.6s ease 0.45s, letter-spacing 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
    }

    .story-year {
      font-family: 'Cormorant Garamond', serif;
      font-size: 3.5rem;
      font-weight: 300;
      color: var(--gold-dark);
      line-height: 1;
      margin-bottom: 0.5rem;
      opacity: 0;
      transform: translateY(16px);
      filter: blur(6px);
      transition: opacity 0.85s ease 0.58s, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.58s, filter 0.75s ease 0.58s;
    }

    .story-text {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.8;
      color: #566b5d;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.85s ease 0.72s, transform 0.85s ease 0.72s;
    }

    .story-moment.story-visible .story-moment-img-wrap { transform: translateX(0); opacity: 1; }
    .story-moment.story-visible .story-moment-img { transform: scale(1); filter: saturate(1); }
    .story-moment.story-visible .story-moment-content { transform: translateX(0); opacity: 1; }
    .story-moment.story-visible .story-moment-label { opacity: 1; letter-spacing: 0.25em; }
    .story-moment.story-visible .story-year { opacity: 1; transform: translateY(0); filter: blur(0); }
    .story-moment.story-visible .story-text { opacity: 1; transform: translateY(0); }

    #venue {
      position: relative;
      overflow: hidden;
      min-height: 780px;
    }

    #venue-map {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    #venue-map .leaflet-control-container { z-index: 10; }

    .venue-map-overlay {
      position: absolute;
      inset: 0;
      background: rgba(238, 246, 232, 0.68);
      z-index: 1;
      pointer-events: none;
    }

    .venue-content {
      position: relative;
      z-index: 2;
      min-height: 780px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .venue-header {
      text-align: center;
      padding: 5rem 2rem 2.5rem;
      background: rgba(240,246,233,0.72);
      backdrop-filter: blur(6px);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .venue-header .gold-line { margin: 1.2rem auto; }

    .venue-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      flex: 1;
      padding: 2rem 2rem 8rem;
      max-width: 1256px;
      margin: auto;
    }

    .venue-left {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    @media (max-width: 900px) {
      /* Keep map as absolute background on mobile - no dedicated height slot */
      #venue { min-height: 0; }
      #venue-map {
        position: absolute !important;
        inset: 0;
        height: 100% !important;
        pointer-events: none;
      }
      /* Hide map markers on mobile - they float oddly on non-interactive map */
      #venue-map .leaflet-marker-pane,
      #venue-map .leaflet-shadow-pane,
      #venue-map .leaflet-popup-pane { display: none !important; }
      .venue-content { min-height: auto; }
      .venue-cards   { grid-template-columns: 1fr; padding: 1rem 1rem 3rem; }
      .venue-left    { padding: 0; }
      .venue-header  { padding: 4rem 1.25rem 1.5rem; }
    }


    .venue-card {
      background: rgba(255,255,255,0.93);
      border: 1px solid rgba(111,133,87,0.16);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(44,60,49,0.12);
      display: flex;
      flex-direction: column;
      backdrop-filter: blur(10px);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      margin-bottom: 1.4rem;
    }

    .venue-card:last-child { margin-bottom: 0; }

    .venue-card:hover {
      box-shadow: 0 20px 56px rgba(44,60,49,0.18);
      transform: translateY(-3px);
    }

    .venue-img-wrap {
      position: relative;
      height: 190px;
      overflow: hidden;
    }

    .venue-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s ease;
    }

    .venue-card:hover .venue-img { transform: scale(1.05); }

    .venue-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(28,46,36,0.65) 0%, transparent 55%);
    }

    .venue-img-label {
      position: absolute;
      bottom: 1.2rem;
      left: 1.4rem;
    }

    .venue-img-label .venue-tag {
      display: inline-block;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.5rem;
      font-weight: 400;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.95);
      background: rgba(44,60,49,0.5);
      border: 1px solid rgba(255,255,255,0.22);
      padding: 0.3rem 0.7rem;
      border-radius: 2px;
      backdrop-filter: blur(4px);
    }

    .venue-body { padding: 1.3rem 1.5rem 0.8rem; flex: 1; }

    .venue-card-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-weight: 400;
      color: var(--navy);
      margin-bottom: 0.6rem;
      line-height: 1.1;
    }

    .venue-meta-row { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
    .venue-meta-item { display: flex; flex-direction: column; gap: 0.1rem; }

    .venue-info-label {
      font-size: 0.49rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold-dark);
      font-weight: 500;
    }

    .venue-info-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.92rem;
      font-weight: 400;
      color: var(--navy);
      line-height: 1.4;
    }

    .venue-card-footer {
      padding: 0.85rem 1.5rem 1.3rem;
      border-top: 1px solid rgba(111,133,87,0.12);
    }

    .venue-book-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.53rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: #ffffff;
      background: var(--gold-dark);
      padding: 0.65rem 1.4rem;
      text-decoration: none;
      border-radius: 2px;
      transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
    }

    .venue-book-btn:hover {
      background: var(--gold);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(85,112,63,0.3);
    }

    @media (max-width: 900px) {
      #venue { min-height: auto; }
      #venue-map { position: relative; height: 320px; }
      .venue-map-overlay { display: none; }
      .venue-content { grid-template-columns: 1fr; padding: 5rem 1.5rem 4rem; min-height: auto; }
    }

    #schedule {
      background: var(--cream);
      color: var(--navy);
      padding: 8rem 2rem;
    }

    #schedule .section-label { color: var(--gold-dark); }
    #schedule .section-title { color: var(--navy); }

    .timeline { max-width: 600px; margin: 4rem auto 0; position: relative; }

    .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0; bottom: 0;
      width: 1px;
      background: linear-gradient(to bottom, transparent, var(--gold-dark) 10%, var(--gold-dark) 90%, transparent);
      transform: translateX(-50%);
    }

    .timeline-item {
      display: grid;
      grid-template-columns: 1fr 40px 1fr;
      gap: 0 1rem;
      margin-bottom: 3rem;
      align-items: start;
    }

    .timeline-item:nth-child(odd) .timeline-content { grid-column: 1; text-align: right; }
    .timeline-item:nth-child(odd) .timeline-dot { grid-column: 2; }
    .timeline-item:nth-child(odd) .timeline-empty { grid-column: 3; }
    .timeline-item:nth-child(even) .timeline-empty { grid-column: 1; }
    .timeline-item:nth-child(even) .timeline-dot { grid-column: 2; }
    .timeline-item:nth-child(even) .timeline-content { grid-column: 3; }

    .timeline-dot {
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--gold-dark);
      border: 2px solid var(--cream);
      box-shadow: 0 0 0 3px var(--gold-dark);
      margin: 0 auto;
      margin-top: 4px;
      position: relative;
      z-index: 1;
    }

    .timeline-time { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--gold-dark); text-transform: uppercase; margin-bottom: 0.25rem; }
    .timeline-event { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 500; color: var(--navy); margin-bottom: 0.2rem; }
    .timeline-desc { font-size: 0.8rem; color: #7e9183; line-height: 1.5; }

    #faq {
      background: var(--cream);
      color: var(--navy);
      padding: 8rem 2rem;
    }

    #faq .section-label { color: var(--gold-dark); }
    #faq .section-title { color: var(--navy); }

    .faq-list { max-width: 780px; margin: 4rem auto 0; }

    .faq-item { border-bottom: 1px solid rgba(111, 133, 87, 0.18); }
    .faq-item:first-of-type { border-top: 1px solid rgba(111, 133, 87, 0.18); }

    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      padding: 1.6rem 0.25rem;
      cursor: pointer;
      list-style: none;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--navy);
      transition: color 0.3s ease;
    }

    .faq-question::-webkit-details-marker { display: none; }
    .faq-question::marker { display: none; content: ''; }
    .faq-question:hover { color: var(--gold-dark); }
    .faq-q-text { flex: 1; min-width: 0; }

    .faq-toggle {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(111, 133, 87, 0.4);
      border-radius: 50%;
      color: var(--gold-dark);
      font-family: 'Montserrat', sans-serif;
      font-size: 1rem;
      font-weight: 300;
      line-height: 1;
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    }

    .faq-item[open] .faq-toggle {
      transform: rotate(45deg);
      background: var(--gold-dark);
      color: var(--cream);
      border-color: var(--gold-dark);
    }

    .faq-answer { padding: 0 0.25rem 1.8rem; max-width: 92%; }

    .faq-answer p {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      font-weight: 400;
      line-height: 1.8;
      color: #566b5d;
    }

    .faq-answer p + p { margin-top: 0.8rem; }

    .faq-answer a {
      color: var(--gold-dark);
      text-decoration: none;
      border-bottom: 1px solid rgba(111, 133, 87, 0.35);
      transition: color 0.25s ease, border-color 0.25s ease;
    }
    .faq-answer a:hover { color: var(--navy); border-bottom-color: var(--navy); }

    .faq-item[open] .faq-answer { animation: faqFadeIn 0.55s ease; }

    @keyframes faqFadeIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      #faq { padding: 6rem 1.25rem; }
      .faq-question { font-size: 1.1rem; gap: 1.2rem; }
      .faq-answer { max-width: 100%; }
    }

    /* ── RSVP form ── */
    .rsvp-form {
      max-width: 640px;
      margin: 3.5rem auto 0;
      display: flex;
      flex-direction: column;
      gap: 1.6rem;
    }

    .rsvp-field { display: flex; flex-direction: column; gap: 0.5rem; }

    .rsvp-label {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.55rem;
      font-weight: 500;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--gold-dark);
    }

    .rsvp-label span { color: #c0392b; margin-left: 2px; }

    .rsvp-input,
    .rsvp-textarea {
      background: rgba(255,255,255,0.85);
      border: 1px solid rgba(111,133,87,0.3);
      border-radius: 3px;
      padding: 0.85rem 1rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      color: var(--navy);
      transition: border-color 0.2s, box-shadow 0.2s;
      outline: none;
      width: 100%;
    }

    .rsvp-input:focus,
    .rsvp-textarea:focus {
      border-color: var(--gold-dark);
      box-shadow: 0 0 0 3px rgba(85,112,63,0.12);
      background: #fff;
    }

    .rsvp-textarea { resize: vertical; min-height: 90px; }

    .rsvp-hint {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.82rem;
      font-style: italic;
      color: rgba(44,60,49,0.5);
    }

    .rsvp-checks { display: flex; flex-wrap: wrap; gap: 0.6rem; }

    .rsvp-check-label {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      color: var(--navy);
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(111,133,87,0.25);
      border-radius: 3px;
      padding: 0.5rem 1rem;
      transition: background 0.2s, border-color 0.2s;
      user-select: none;
    }

    .rsvp-check-label input[type=checkbox] { display: none; }

    .rsvp-check-label.checked {
      background: rgba(85,112,63,0.12);
      border-color: var(--gold-dark);
      color: var(--gold-dark);
    }

    .rsvp-check-dot {
      width: 12px; height: 12px;
      border: 1.5px solid rgba(111,133,87,0.5);
      border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s, border-color 0.2s;
    }

    .rsvp-check-label.checked .rsvp-check-dot {
      background: var(--gold-dark);
      border-color: var(--gold-dark);
    }

    .rsvp-check-dot::after {
      content: '';
      width: 5px; height: 5px;
      background: #fff;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
      opacity: 0;
      transition: opacity 0.15s;
    }

    .rsvp-check-label.checked .rsvp-check-dot::after { opacity: 1; }

    /* Guest cards */
    .rsvp-guest-card {
      background: rgba(255,255,255,0.75);
      border: 1px solid rgba(111,133,87,0.25);
      border-radius: 4px;
      padding: 1.1rem 1.2rem 1rem;
      margin-bottom: 0.75rem;
      position: relative;
    }
    .rsvp-guest-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.8rem;
    }
    .rsvp-guest-card-title {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.54rem;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold-dark);
    }
    .rsvp-guest-remove {
      background: none;
      border: 1px solid rgba(111,133,87,0.3);
      border-radius: 50%;
      width: 22px; height: 22px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      color: rgba(44,60,49,0.45);
      font-size: 1rem;
      line-height: 1;
      transition: border-color 0.2s, color 0.2s;
    }
    .rsvp-guest-remove:hover { border-color: #c0392b; color: #c0392b; }
    .rsvp-guest-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
    @media (max-width: 520px) { .rsvp-guest-fields { grid-template-columns: 1fr; } }
    .rsvp-guest-fields .rsvp-field { gap: 0.35rem; }
    .rsvp-guest-fields .rsvp-field.full { grid-column: 1 / -1; }

    /* Alkohol radio toggle */
    .rsvp-radio-group { display: flex; gap: 0.5rem; }
    .rsvp-radio-label {
      display: flex; align-items: center; gap: 0.4rem;
      cursor: pointer;
      font-family: 'Cormorant Garamond', serif;
      font-size: 1rem;
      color: var(--navy);
      background: rgba(255,255,255,0.82);
      border: 1px solid rgba(111,133,87,0.25);
      border-radius: 3px;
      padding: 0.45rem 0.9rem;
      transition: background 0.2s, border-color 0.2s;
      user-select: none;
    }
    .rsvp-radio-label input[type=radio] { display: none; }
    .rsvp-radio-label.checked {
      background: rgba(85,112,63,0.12);
      border-color: var(--gold-dark);
      color: var(--gold-dark);
    }

    .rsvp-add-guest {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.58rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--gold-dark);
      background: transparent;
      border: 1px solid rgba(85,112,63,0.4);
      border-radius: 2px;
      padding: 0.7rem 1.4rem;
      cursor: pointer;
      margin-top: 0.2rem;
      transition: background 0.2s, border-color 0.2s;
    }
    .rsvp-add-guest:hover { background: rgba(85,112,63,0.08); border-color: var(--gold-dark); }

    .rsvp-submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.62rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: #fff;
      background: var(--gold-dark);
      border: none;
      border-radius: 2px;
      padding: 1.1rem 2.8rem;
      cursor: pointer;
      transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
      align-self: flex-start;
    }

    .rsvp-submit:hover {
      background: var(--gold);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(85,112,63,0.3);
    }

    .rsvp-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

    .rsvp-success { display: none; text-align: center; padding: 3rem 2rem; }
    .rsvp-success-icon { font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.7; }
    .rsvp-success h3 { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300; color: var(--navy); margin-bottom: 0.5rem; }
    .rsvp-success p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; color: #566b5d; }

    footer {
      background: var(--navy);
      border-top: 1px solid rgba(156, 175, 136, 0.15);
      padding: 4rem 2rem;
      text-align: center;
    }

    .footer-names {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--gold);
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }

    .footer-sub {
      font-size: 0.65rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(44, 60, 49, 0.35);
    }

    #fireworks-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      transition: opacity 1s;
    }

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

    @keyframes scrollPulse {
      0%, 100% { opacity: 1; transform: scaleY(1); }
      50% { opacity: 0.4; transform: scaleY(0.6); }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
    }
    .nav-hamburger span {
      width: 22px;
      height: 1px;
      background: var(--gold);
      display: block;
      transition: all 0.3s;
    }

    .bg-text {
      position: absolute;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(5rem, 15vw, 14rem);
      font-weight: 300;
      color: rgba(156, 175, 136, 0.04);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      letter-spacing: 0.1em;
    }

    .venue-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #2f4a3a 0%, #1f3a2c 50%, #1c2e24 100%);
      position: relative;
      overflow: hidden;
    }

    .sun-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 1.5rem;
      animation: float 3s ease infinite;
    }

    @media (max-width: 768px) {
      nav { padding: 1.2rem 1.5rem; }
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }

      .story-moment,
      .story-moment:nth-child(even) {
        flex-direction: column;
        gap: 2rem;
        padding: 3rem 0;
      }

      .story-moment-img-wrap,
      .story-moment:nth-child(even) .story-moment-img-wrap {
        flex: none;
        max-width: 100%;
        width: 100%;
        transform: none;
        opacity: 1;
      }

      .story-moment-content,
      .story-moment:nth-child(even) .story-moment-content {
        transform: none;
        opacity: 1;
      }

      .timeline::before { left: 20px; }
      .timeline-item { grid-template-columns: 40px 1fr; gap: 0 1rem; }
      .timeline-item:nth-child(odd) .timeline-content { grid-column: 2; text-align: left; }
      .timeline-item:nth-child(odd) .timeline-dot { grid-column: 1; }
      .timeline-item:nth-child(odd) .timeline-empty { display: none; }
      .timeline-item:nth-child(even) .timeline-empty { display: none; }
      .timeline-item:nth-child(even) .timeline-dot { grid-column: 1; }
      .timeline-item:nth-child(even) .timeline-content { grid-column: 2; }

      .countdown-grid { gap: 2rem; }
      .countdown-sep { display: none; }
    }

    #invite-overlay { display: none; }

    html.invite-mode body { overflow: hidden; }

    html.invite-mode #invite-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--navy);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 1;
      transition: opacity 1s ease;
      animation: overlayFadeIn 0.9s ease both;
    }
    #invite-overlay.fade-out { opacity: 0; pointer-events: none; }

    #invite-overlay::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(156,175,136,0.09) 0%, transparent 70%),
        radial-gradient(ellipse 30% 30% at 20% 80%, rgba(156,175,136,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 30% 30% at 80% 20%, rgba(156,175,136,0.04) 0%, transparent 60%);
      pointer-events: none;
    }

    @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

    .invite-hint {
      margin-top: 2.2rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.78rem;
      letter-spacing: 0.38em;
      text-transform: uppercase;
      color: rgba(156,175,136,0.55);
      animation: hintFloat 2.8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes hintFloat {
      0%, 100% { opacity: 0.35; transform: translateY(0); }
      50%       { opacity: 1;    transform: translateY(-4px); }
    }

    .envelope {
      position: relative;
      width: 320px;
      height: 220px;
      cursor: pointer;
      filter: drop-shadow(0 28px 56px rgba(0,0,0,0.55)) drop-shadow(0 0 80px rgba(156,175,136,0.18));
      animation: envelopeRise 1s cubic-bezier(0.34,1.2,0.64,1) 0.35s both;
    }
    @keyframes envelopeRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }

    .env-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(165deg, #eaf0dc 0%, #d5dec3 100%);
      border-radius: 4px;
      z-index: 0;
    }

    .env-fold-left {
      position: absolute;
      top: 0; left: 0;
      width: 50%; height: 100%;
      background: linear-gradient(140deg, #dbe3c8 0%, #bcc9a8 100%);
      clip-path: polygon(0 0, 0 100%, 100% 50%);
      z-index: 2;
    }
    .env-fold-right {
      position: absolute;
      top: 0; right: 0;
      width: 50%; height: 100%;
      background: linear-gradient(220deg, #dbe3c8 0%, #bcc9a8 100%);
      clip-path: polygon(100% 0, 100% 100%, 0 50%);
      z-index: 2;
    }
    .env-fold-bottom {
      position: absolute;
      bottom: 0; left: 0;
      width: 100%; height: 115px;
      background: linear-gradient(0deg, #b6c59c 0%, #c2cfa8 100%);
      clip-path: polygon(0 100%, 50% 0, 100% 100%);
      z-index: 3;
    }
    .env-flap {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 118px;
      background: linear-gradient(175deg, #cdd9b6 0%, #b8c79e 100%);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      transform-origin: top center;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 5;
    }
    .envelope.open .env-flap { transform: rotateX(-180deg); }

    .env-seal {
      position: absolute;
      top: 96px;
      left: 50%;
      transform: translateX(-50%);
      width: 44px; height: 44px;
      background: radial-gradient(circle at 38% 32%, #aebf8e 0%, #6a8050 55%, #54663f 100%);
      border-radius: 50%;
      z-index: 6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.72rem;
      font-style: italic;
      color: #f4f9ec;
      letter-spacing: 0.04em;
      box-shadow: 0 2px 10px rgba(0,0,0,0.35), inset 0 1px 2px rgba(255,255,255,0.25);
      transition: opacity 0.25s 0.15s, transform 0.25s 0.15s;
    }
    .envelope.open .env-seal { opacity: 0; transform: translateX(-50%) scale(0.7); }

    .env-letter {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 83%;
      height: 72%;
      background: linear-gradient(180deg, #fbfdf8 0%, #eef3e1 100%);
      border-radius: 3px 3px 0 0;
      z-index: 1;
      box-shadow: 0 -3px 14px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 0.4rem;
      transition: transform 0.68s cubic-bezier(0.34, 1.3, 0.64, 1) 0.38s;
    }
    .envelope.open .env-letter { transform: translateX(-50%) translateY(-108px); }
    .env-letter-names { font-family: 'Dancing Script', cursive; font-size: 1.25rem; color: #5f7548; line-height: 1; }
    .env-letter-rule { width: 60%; height: 1px; background: linear-gradient(90deg, transparent, #9caf88, transparent); }
    .env-letter-date { font-family: 'Cormorant Garamond', serif; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: #6f8557; }

    .env-letter-card-content { display: none; flex-direction: column; align-items: center; width: 100%; }
    .env-letter-peek { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

    .invite-card-pre {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.58rem;
      font-weight: 300;
      letter-spacing: 0.42em;
      text-transform: uppercase;
      color: #6f8557;
      margin-bottom: 0.9rem;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
    }
    .env-letter.show .env-letter-card-content .invite-card-pre { opacity: 1; transform: translateY(0); }

    .invite-card-main {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.8rem, 8vw, 4rem);
      font-weight: 300;
      font-style: italic;
      color: #3f4d30;
      line-height: 1;
      margin-bottom: 1.4rem;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
    }
    .env-letter.show .env-letter-card-content .invite-card-main { opacity: 1; transform: translateY(0); }

    .invite-card-rule {
      width: 50%;
      height: 1px;
      background: linear-gradient(90deg, transparent, #9caf88, transparent);
      margin: 0 auto 1.4rem;
      opacity: 0;
      transition: opacity 0.5s ease 0.55s;
    }
    .env-letter.show .env-letter-card-content .invite-card-rule { opacity: 1; }

    .invite-card-names {
      font-family: 'Dancing Script', cursive;
      font-size: 1.7rem;
      color: #5f7548;
      margin-bottom: 0.55rem;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease 0.65s, transform 0.5s ease 0.65s;
    }
    .env-letter.show .env-letter-card-content .invite-card-names { opacity: 1; transform: translateY(0); }

    .invite-names-photo {
      display: none;
      width: 100%;
      max-width: 480px;
      height: auto;
      border-radius: 3px;
      object-fit: cover;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18);
      margin-bottom: 0.9rem;
      opacity: 0;
      transform: scale(0.72) translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.65s, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.65s, box-shadow 0.7s ease 0.65s;
    }
    html.invite-mode .invite-names-photo { display: block; }
    html.invite-mode .env-letter.show .env-letter-card-content .invite-names-photo {
      opacity: 1;
      transform: scale(1) translateY(0);
      box-shadow: 0 12px 40px rgba(0,0,0,0.32);
    }

    .invite-card-date {
      font-family: 'Cormorant Garamond', serif;
      font-size: 0.68rem;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: #6f8557;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.5s ease 0.8s, transform 0.5s ease 0.8s;
    }
    .env-letter.show .env-letter-card-content .invite-card-date { opacity: 1; transform: translateY(0); }

    .invite-card-btn {
      margin-top: 2rem;
      padding: 0.6rem 2rem;
      font-family: 'Montserrat', sans-serif;
      font-size: 0.62rem;
      font-weight: 400;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: #5f7548;
      background: transparent;
      border: 1px solid rgba(95,117,72,0.45);
      border-radius: 2px;
      cursor: pointer;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.5s ease 1.1s, transform 0.5s ease 1.1s, background 0.2s, color 0.2s;
    }
    .invite-card-btn:hover { background: rgba(95,117,72,0.08); }
    .env-letter.show .env-letter-card-content .invite-card-btn { opacity: 1; transform: translateY(0); }

    #gallery { background: var(--cream); padding: 0 2rem 8rem; }

    .gallery-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      grid-template-rows: 260px 260px;
      gap: 0.6rem;
      max-width: 1100px;
      margin: 2rem auto 0;
    }

    .gallery-item { position: relative; overflow: hidden; border-radius: 2px; cursor: pointer; }
    .gallery-item:nth-child(1) { grid-row: span 2; }
    .gallery-item:nth-child(4) { grid-column: span 2; }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: none;
      transform: scale(1.07);
      transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), filter 1.3s ease;
    }

    .gallery-item:nth-child(1) img, .gallery-item:nth-child(3) img { filter: saturate(0.6) brightness(0.85); }
    .gallery-item:nth-child(1):hover img, .gallery-item:nth-child(3):hover img { filter: saturate(1) brightness(1); }

    .gallery-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(108deg, transparent 32%, rgba(156, 175, 136, 0.2) 50%, transparent 68%);
      transform: translateX(-110%);
      pointer-events: none;
      transition: transform 0.75s ease;
    }
    .gallery-item:hover::after { transform: translateX(110%); }
    .gallery-item:hover img { filter: saturate(1) brightness(1); transform: scale(1.03); transition-duration: 0.65s; }

    .gallery-item-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(28,46,36,0.45) 0%, transparent 55%);
      pointer-events: none;
    }

    .gallery-item::before {
      content: '';
      position: absolute;
      inset: 0;
      border: 1px solid rgba(156, 175, 136, 0);
      transition: border-color 0.4s ease;
      z-index: 2;
      pointer-events: none;
    }
    .gallery-item:hover::before { border-color: rgba(156, 175, 136, 0.3); }

    @media (max-width: 768px) {
      .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 0.5rem; }
      .gallery-item:nth-child(1), .gallery-item:nth-child(4) { grid-row: unset; grid-column: unset; }
      .gallery-item img { aspect-ratio: 1 / 1; height: auto; filter: none; transform: none; }
      .gallery-item:hover img { transform: none; }
    }

    .section-bg-img {
      position: absolute;
      top: -20%;
      left: 0;
      width: 100%;
      height: 140%;
      object-fit: cover;
      opacity: 0.06;
      filter: saturate(0) blur(1px);
      pointer-events: none;
      z-index: 0;
      will-change: transform;
    }

    /* ============================================================
       LYST & LUFTIG  ·  spring light theme
       ============================================================ */
    body { background: var(--bg); color: var(--navy); }
    #venue   { background: var(--bg-soft); }
    footer   { background: var(--bg); }

    nav.scrolled {
      background: rgba(247, 250, 244, 0.92);
      border-bottom: 1px solid rgba(111, 133, 87, 0.16);
    }
    .nav-links a, nav.scrolled .nav-links a { color: rgba(44,60,49,0.85) !important; }
    .nav-links a:hover, nav.scrolled .nav-links a:hover { color: var(--gold) !important; }
    .nav-hamburger span, nav.scrolled .nav-hamburger span { background: var(--navy); }
    .nav-logo img, nav.scrolled .nav-logo img { filter: none; opacity: 1; }

    .section-title { color: var(--navy); }
    .countdown-number { color: var(--gold-dark); }

    #rsvp {
      background: var(--navy-mid);
      padding: 0;
      border-top: 1px solid rgba(156, 175, 136, 0.1);
      overflow: clip;
    }
    .rsvp-content {
      padding: 8rem 2rem;
      position: relative;
      z-index: 1;
    }

    .faq-item[open] .faq-toggle { color: var(--navy); }
    .footer-names { color: var(--gold-dark); }

    .hero-illus { position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
    .hero-video-overlay {
      background: radial-gradient(ellipse 74% 68% at 50% 46%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.82) 32%, rgba(255,255,255,0.42) 58%, rgba(255,255,255,0.0) 84%);
    }
    .hero-names    { color: #243528 !important; text-shadow: 0 2px 18px rgba(255,255,255,0.96), 0 1px 2px rgba(255,255,255,0.92) !important; }
    .hero-overline { color: #46603c !important; text-shadow: 0 1px 9px rgba(255,255,255,0.96) !important; margin-bottom: 5.4rem !important; }
    .hero-date     { font-family: 'Montserrat', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.4em !important; font-size: 0.8rem !important; color: #283a2c !important; font-weight: 500 !important; margin-top: 1.4rem !important; text-shadow: 0 1px 9px rgba(255,255,255,0.97) !important; }
    .hero-location { font-family: 'Montserrat', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.32em !important; font-size: 0.72rem !important; color: #324a30 !important; font-weight: 500 !important; margin-top: 0.9rem !important; text-shadow: 0 1px 9px rgba(255,255,255,0.97) !important; }
    .hero-cta-label{ color: #324a30 !important; text-shadow: 0 1px 9px rgba(255,255,255,0.92) !important; }
    .hero-ampersand { color: var(--gold-dark) !important; }
    .hero-divider-diamond { background: var(--gold-dark); }
    .hero-divider-line       { background: linear-gradient(90deg, transparent, var(--gold-dark)); }
    .hero-divider-line.right { background: linear-gradient(90deg, var(--gold-dark), transparent); }
    .hero-divider { margin: 3rem 0 2.4rem !important; }
    .hero-names {
      font-family: 'Parisienne', cursive !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      line-height: 0.92 !important;
      font-size: clamp(3.8rem, 9.5vw, 8.5rem) !important;
      margin-top: 0.4rem !important;
    }
    .hero-ampersand {
      font-family: 'Parisienne', cursive !important;
      font-style: normal !important;
      font-size: 0.6em !important;
    }

  </style>
</head>
<body>

<div id="invite-overlay">
  <div class="envelope" id="invite-envelope">
    <div class="env-bg"></div>
    <div class="env-letter" id="env-letter-el">
      <div class="env-letter-peek"></div>
      <div class="env-letter-card-content">
        <div class="invite-card-pre">Du er herved invitert til</div>
        <div class="invite-card-main">Bryllup</div>
        <div class="invite-card-rule"></div>
        <img class="invite-names-photo" src="bilder/6117798_432026.jpg" alt="Olav &amp; Tonje" />
        <div class="invite-card-names">Olav &amp; Tonje</div>
        <div class="invite-card-date">15. mai 2027 · Rygge & Moss</div>
        <button class="invite-card-btn" id="invite-card-btn">Gå videre</button>
      </div>
    </div>
    <div class="env-fold-left"></div>
    <div class="env-fold-right"></div>
    <div class="env-fold-bottom"></div>
    <div class="env-flap"></div>
    <div class="env-seal"><img src="wedding_logo.png" alt="O&T" style="width:68%;height:68%;object-fit:contain;filter:brightness(0) invert(1);opacity:0.88;"></div>
  </div>
  <div class="invite-hint">Klikk for å åpne</div>
</div>

<nav id="navbar">
  <div class="nav-logo"><a href="#top"><img src="wedding_logo.png" alt="O & T" /></a></div>
  <ul class="nav-links">
    <li><a href="#story">Vår historie</a></li>
    <li><a href="#gallery">Bilder</a></li>
    <li><a href="#venue">Lokale</a></li>
    <li><a href="#schedule">Program</a></li>
    <li><a href="#rsvp">Svar på invitasjon</a></li>
    <li><a href="#faq">Spørsmål</a></li>
  </ul>
  <div class="nav-hamburger" id="hamburger">
    <span></span><span></span><span></span>
  </div>
</nav>

<section id="hero">
  <svg class="hero-illus" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Vaarlig illustrasjon med eukalyptus og blomster">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#f6faf0"/><stop offset="55%" stop-color="#eef5e6"/><stop offset="100%" stop-color="#e4eedb"/></linearGradient>
<radialGradient id="glow" cx="50%" cy="36%" r="48%"><stop offset="0%" stop-color="#fffef8" stop-opacity="0.8"/><stop offset="100%" stop-color="#fffef8" stop-opacity="0"/></radialGradient>
</defs>
<rect width="1440" height="900" fill="url(#sky)"/>
<circle cx="720" cy="320" r="400" fill="url(#glow)"/>
<path d="M0,806 Q360,760 720,792 T1440,782 L1440,900 L0,900 Z" fill="#e3ecd9"/>
<path d="M0,852 Q480,820 960,846 T1440,840 L1440,900 L0,900 Z" fill="#d7e4c8"/>
<path d="M-20.0,150.0 Q120.0,40.0 300.0,70.0" fill="none" stroke="#6f8557" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(49.2,122.7) rotate(24.1)"><ellipse rx="21.2" ry="10.2" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(33.7,95.9) rotate(-83.9)"><ellipse rx="21.2" ry="10.2" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(88.3,103.7) rotate(30.7)"><ellipse rx="20.2" ry="9.8" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(76.7,76.6) rotate(-77.3)"><ellipse rx="20.2" ry="9.8" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(128.8,89.5) rotate(37.6)"><ellipse rx="19.1" ry="9.4" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(120.9,62.8) rotate(-70.4)"><ellipse rx="19.1" ry="9.4" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(170.7,80.3) rotate(44.5)"><ellipse rx="18.1" ry="9.0" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(166.4,54.4) rotate(-63.5)"><ellipse rx="18.1" ry="9.0" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(214.2,76.0) rotate(51.2)"><ellipse rx="17.0" ry="8.6" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(213.0,51.3) rotate(-56.8)"><ellipse rx="17.0" ry="8.6" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(259.2,76.5) rotate(57.6)"><ellipse rx="15.9" ry="8.2" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(260.7,53.4) rotate(-50.4)"><ellipse rx="15.9" ry="8.2" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(306.0,82.0) rotate(63.5)"><ellipse rx="14.9" ry="7.8" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(309.5,60.6) rotate(-44.5)"><ellipse rx="14.9" ry="7.8" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(300.0,70.0) rotate(9.5)"><ellipse cx="7.5" rx="17.5" ry="8.8" fill="#8aa17a" opacity="0.92"/></g>
<path d="M-10.0,250.0 Q150.0,180.0 250.0,120.0" fill="none" stroke="#6f8557" stroke-width="1.9" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(48.5,210.9) rotate(-78.6)"><ellipse rx="16.1" ry="7.8" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(58.3,232.3) rotate(29.4)"><ellipse rx="16.1" ry="7.8" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(106.8,184.0) rotate(-79.8)"><ellipse rx="15.3" ry="7.5" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(116.5,204.1) rotate(28.2)"><ellipse rx="15.3" ry="7.5" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(159.9,158.0) rotate(-81.2)"><ellipse rx="14.5" ry="7.2" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(169.6,176.8) rotate(26.8)"><ellipse rx="14.5" ry="7.2" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(208.0,132.8) rotate(-82.9)"><ellipse rx="13.7" ry="6.9" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(217.7,150.3) rotate(25.1)"><ellipse rx="13.7" ry="6.9" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(251.0,108.4) rotate(-85.0)"><ellipse rx="12.9" ry="6.5" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(260.7,124.6) rotate(23.0)"><ellipse rx="12.9" ry="6.5" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(250.0,120.0) rotate(-31.0)"><ellipse cx="5.7" rx="13.3" ry="6.6" fill="#8aa17a" opacity="0.92"/></g>
<path d="M1460.0,150.0 Q1320.0,40.0 1140.0,70.0" fill="none" stroke="#6f8557" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(1390.8,122.7) rotate(-204.1)"><ellipse rx="21.2" ry="10.2" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1406.3,95.9) rotate(-96.1)"><ellipse rx="21.2" ry="10.2" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1351.7,103.7) rotate(-210.7)"><ellipse rx="20.2" ry="9.8" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1363.3,76.6) rotate(-102.7)"><ellipse rx="20.2" ry="9.8" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1311.2,89.5) rotate(-217.6)"><ellipse rx="19.1" ry="9.4" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1319.1,62.8) rotate(-109.6)"><ellipse rx="19.1" ry="9.4" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1269.3,80.3) rotate(-224.5)"><ellipse rx="18.1" ry="9.0" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1273.6,54.4) rotate(-116.5)"><ellipse rx="18.1" ry="9.0" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1225.8,76.0) rotate(-231.2)"><ellipse rx="17.0" ry="8.6" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1227.0,51.3) rotate(-123.2)"><ellipse rx="17.0" ry="8.6" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1180.8,76.5) rotate(122.4)"><ellipse rx="15.9" ry="8.2" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1179.3,53.4) rotate(230.4)"><ellipse rx="15.9" ry="8.2" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1134.0,82.0) rotate(116.5)"><ellipse rx="14.9" ry="7.8" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1130.5,60.6) rotate(224.5)"><ellipse rx="14.9" ry="7.8" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1140.0,70.0) rotate(170.5)"><ellipse cx="7.5" rx="17.5" ry="8.8" fill="#8aa17a" opacity="0.92"/></g>
<path d="M1450.0,250.0 Q1290.0,180.0 1190.0,120.0" fill="none" stroke="#6f8557" stroke-width="1.9" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(1391.5,210.9) rotate(-101.4)"><ellipse rx="16.1" ry="7.8" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1381.7,232.3) rotate(-209.4)"><ellipse rx="16.1" ry="7.8" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1333.2,184.0) rotate(-100.2)"><ellipse rx="15.3" ry="7.5" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1323.5,204.1) rotate(-208.2)"><ellipse rx="15.3" ry="7.5" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1280.1,158.0) rotate(-98.8)"><ellipse rx="14.5" ry="7.2" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1270.4,176.8) rotate(-206.8)"><ellipse rx="14.5" ry="7.2" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1232.0,132.8) rotate(-97.1)"><ellipse rx="13.7" ry="6.9" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1222.3,150.3) rotate(-205.1)"><ellipse rx="13.7" ry="6.9" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1189.0,108.4) rotate(-95.0)"><ellipse rx="12.9" ry="6.5" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1179.3,124.6) rotate(-203.0)"><ellipse rx="12.9" ry="6.5" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1190.0,120.0) rotate(-149.0)"><ellipse cx="5.7" rx="13.3" ry="6.6" fill="#8aa17a" opacity="0.92"/></g>
<path d="M70.0,905.0 Q150.0,820.0 120.0,740.0" fill="none" stroke="#6f8557" stroke-width="2.2" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(112.1,874.4) rotate(-0.4)"><ellipse rx="18.7" ry="9.0" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(89.9,858.6) rotate(-108.4)"><ellipse rx="18.7" ry="9.0" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(127.8,844.6) rotate(-9.1)"><ellipse rx="17.8" ry="8.7" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(104.7,832.9) rotate(-117.1)"><ellipse rx="17.8" ry="8.7" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(137.2,814.8) rotate(-19.7)"><ellipse rx="16.8" ry="8.3" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(113.6,807.9) rotate(-127.7)"><ellipse rx="16.8" ry="8.3" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(140.0,785.5) rotate(-31.7)"><ellipse rx="15.9" ry="7.9" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(116.9,783.8) rotate(-139.7)"><ellipse rx="15.9" ry="7.9" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(136.5,757.0) rotate(-44.4)"><ellipse rx="15.0" ry="7.6" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(114.9,760.1) rotate(-152.4)"><ellipse rx="15.0" ry="7.6" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(127.0,729.5) rotate(-56.6)"><ellipse rx="14.0" ry="7.2" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(107.8,736.6) rotate(-164.6)"><ellipse rx="14.0" ry="7.2" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(120.0,740.0) rotate(-110.6)"><ellipse cx="6.6" rx="15.4" ry="7.7" fill="#8aa17a" opacity="0.92"/></g>
<path d="M1370.0,905.0 Q1290.0,820.0 1320.0,740.0" fill="none" stroke="#6f8557" stroke-width="2.2" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(1327.9,874.4) rotate(-179.6)"><ellipse rx="18.7" ry="9.0" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1350.1,858.6) rotate(-71.6)"><ellipse rx="18.7" ry="9.0" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1312.2,844.6) rotate(-170.9)"><ellipse rx="17.8" ry="8.7" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1335.3,832.9) rotate(-62.9)"><ellipse rx="17.8" ry="8.7" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1302.8,814.8) rotate(-160.3)"><ellipse rx="16.8" ry="8.3" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1326.4,807.9) rotate(-52.3)"><ellipse rx="16.8" ry="8.3" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1300.0,785.5) rotate(-148.3)"><ellipse rx="15.9" ry="7.9" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1323.1,783.8) rotate(-40.3)"><ellipse rx="15.9" ry="7.9" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1303.5,757.0) rotate(-135.6)"><ellipse rx="15.0" ry="7.6" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(1325.1,760.1) rotate(-27.6)"><ellipse rx="15.0" ry="7.6" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(1313.0,729.5) rotate(-123.4)"><ellipse rx="14.0" ry="7.2" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(1332.2,736.6) rotate(-15.4)"><ellipse rx="14.0" ry="7.2" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(1320.0,740.0) rotate(-69.4)"><ellipse cx="6.6" rx="15.4" ry="7.7" fill="#8aa17a" opacity="0.92"/></g>
<path d="M560.0,902.0 Q610.0,852.0 580.0,800.0" fill="none" stroke="#6f8557" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(587.6,883.8) rotate(-0.7)"><ellipse rx="13.6" ry="6.6" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(571.5,872.3) rotate(-108.7)"><ellipse rx="13.6" ry="6.6" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(599.8,852.1) rotate(-20.9)"><ellipse rx="12.9" ry="6.3" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(581.6,847.2) rotate(-128.9)"><ellipse rx="12.9" ry="6.3" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(598.2,820.5) rotate(-45.0)"><ellipse rx="12.2" ry="6.0" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(580.6,823.3) rotate(-153.0)"><ellipse rx="12.2" ry="6.0" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(584.2,790.5) rotate(-66.0)"><ellipse rx="11.6" ry="5.8" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(569.7,798.9) rotate(-174.0)"><ellipse rx="11.6" ry="5.8" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(580.0,800.0) rotate(-120.0)"><ellipse cx="4.8" rx="11.2" ry="5.6" fill="#8aa17a" opacity="0.92"/></g>
<path d="M880.0,902.0 Q830.0,852.0 860.0,800.0" fill="none" stroke="#6f8557" stroke-width="1.6" stroke-linecap="round" opacity="0.8"/>
<g transform="translate(852.4,883.8) rotate(-179.3)"><ellipse rx="13.6" ry="6.6" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(868.5,872.3) rotate(-71.3)"><ellipse rx="13.6" ry="6.6" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(840.2,852.1) rotate(-159.1)"><ellipse rx="12.9" ry="6.3" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(858.4,847.2) rotate(-51.1)"><ellipse rx="12.9" ry="6.3" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(841.8,820.5) rotate(-135.0)"><ellipse rx="12.2" ry="6.0" fill="#7d9670" opacity="0.9"/></g>
<g transform="translate(859.4,823.3) rotate(-27.0)"><ellipse rx="12.2" ry="6.0" fill="#9caf88" opacity="0.9"/></g>
<g transform="translate(855.8,790.5) rotate(-114.0)"><ellipse rx="11.6" ry="5.8" fill="#b3c4a0" opacity="0.9"/></g>
<g transform="translate(870.3,798.9) rotate(-6.0)"><ellipse rx="11.6" ry="5.8" fill="#8aa17a" opacity="0.9"/></g>
<g transform="translate(860.0,800.0) rotate(-60.0)"><ellipse cx="4.8" rx="11.2" ry="5.6" fill="#8aa17a" opacity="0.92"/></g>
<g transform="translate(250,95)"><ellipse cx="10.3" cy="0.0" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 10.3 0.0)" opacity="0.95"/><ellipse cx="3.2" cy="9.8" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 3.2 9.8)" opacity="0.95"/><ellipse cx="-8.4" cy="6.1" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -8.4 6.1)" opacity="0.95"/><ellipse cx="-8.4" cy="-6.1" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -8.4 -6.1)" opacity="0.95"/><ellipse cx="3.2" cy="-9.8" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 3.2 -9.8)" opacity="0.95"/><circle r="3.5" fill="#cdb86a"/></g>
<g transform="translate(300,140)"><ellipse cx="8.1" cy="0.0" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 8.1 0.0)" opacity="0.95"/><ellipse cx="2.5" cy="7.7" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 2.5 7.7)" opacity="0.95"/><ellipse cx="-6.6" cy="4.8" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -6.6 4.8)" opacity="0.95"/><ellipse cx="-6.6" cy="-4.8" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -6.6 -4.8)" opacity="0.95"/><ellipse cx="2.5" cy="-7.7" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 2.5 -7.7)" opacity="0.95"/><circle r="2.8" fill="#cdb86a"/></g>
<g transform="translate(150,60)"><ellipse cx="7.2" cy="0.0" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 7.2 0.0)" opacity="0.95"/><ellipse cx="2.2" cy="6.8" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 2.2 6.8)" opacity="0.95"/><ellipse cx="-5.8" cy="4.2" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -5.8 4.2)" opacity="0.95"/><ellipse cx="-5.8" cy="-4.2" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -5.8 -4.2)" opacity="0.95"/><ellipse cx="2.2" cy="-6.8" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 2.2 -6.8)" opacity="0.95"/><circle r="2.4" fill="#cdb86a"/></g>
<g transform="translate(1190,95)"><ellipse cx="10.3" cy="0.0" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 10.3 0.0)" opacity="0.95"/><ellipse cx="3.2" cy="9.8" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 3.2 9.8)" opacity="0.95"/><ellipse cx="-8.4" cy="6.1" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -8.4 6.1)" opacity="0.95"/><ellipse cx="-8.4" cy="-6.1" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -8.4 -6.1)" opacity="0.95"/><ellipse cx="3.2" cy="-9.8" rx="6.4" ry="4.3" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 3.2 -9.8)" opacity="0.95"/><circle r="3.5" fill="#cdb86a"/></g>
<g transform="translate(1140,140)"><ellipse cx="8.1" cy="0.0" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 8.1 0.0)" opacity="0.95"/><ellipse cx="2.5" cy="7.7" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 2.5 7.7)" opacity="0.95"/><ellipse cx="-6.6" cy="4.8" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -6.6 4.8)" opacity="0.95"/><ellipse cx="-6.6" cy="-4.8" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -6.6 -4.8)" opacity="0.95"/><ellipse cx="2.5" cy="-7.7" rx="5.0" ry="3.4" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 2.5 -7.7)" opacity="0.95"/><circle r="2.8" fill="#cdb86a"/></g>
<g transform="translate(1290,60)"><ellipse cx="7.2" cy="0.0" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 7.2 0.0)" opacity="0.95"/><ellipse cx="2.2" cy="6.8" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 2.2 6.8)" opacity="0.95"/><ellipse cx="-5.8" cy="4.2" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -5.8 4.2)" opacity="0.95"/><ellipse cx="-5.8" cy="-4.2" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -5.8 -4.2)" opacity="0.95"/><ellipse cx="2.2" cy="-6.8" rx="4.5" ry="3.0" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 2.2 -6.8)" opacity="0.95"/><circle r="2.4" fill="#cdb86a"/></g>
<g transform="translate(120,772)"><ellipse cx="9.0" cy="0.0" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 9.0 0.0)" opacity="0.95"/><ellipse cx="2.8" cy="8.6" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 2.8 8.6)" opacity="0.95"/><ellipse cx="-7.3" cy="5.3" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -7.3 5.3)" opacity="0.95"/><ellipse cx="-7.3" cy="-5.3" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -7.3 -5.3)" opacity="0.95"/><ellipse cx="2.8" cy="-8.6" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 2.8 -8.6)" opacity="0.95"/><circle r="3.1" fill="#cdb86a"/></g>
<g transform="translate(1320,772)"><ellipse cx="9.0" cy="0.0" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(0 9.0 0.0)" opacity="0.95"/><ellipse cx="2.8" cy="8.6" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(72 2.8 8.6)" opacity="0.95"/><ellipse cx="-7.3" cy="5.3" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(144 -7.3 5.3)" opacity="0.95"/><ellipse cx="-7.3" cy="-5.3" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(216 -7.3 -5.3)" opacity="0.95"/><ellipse cx="2.8" cy="-8.6" rx="5.6" ry="3.8" fill="#ffffff" stroke="#cdd9c4" stroke-width="0.6" transform="rotate(288 2.8 -8.6)" opacity="0.95"/><circle r="3.1" fill="#cdb86a"/></g>
</svg>
  <div class="hero-video-overlay"></div>
  <canvas id="hero-canvas"></canvas>
  <canvas id="fireworks-canvas"></canvas>

  <div style="position:relative;z-index:3;text-align:center;padding:0 1rem;">
    <div class="hero-overline">Du er hjertelig invitert til å feire</div>
    <h1 class="hero-names">
      Olav<br/>
      <span class="hero-ampersand">&amp;</span><br/>
      Tonje
    </h1>
    <div class="hero-divider" style="justify-content:center;">
      <div class="hero-divider-line"></div>
      <div class="hero-divider-diamond"></div>
      <div class="hero-divider-line right"></div>
    </div>
    <p class="hero-date">15 · Mai · 2027</p>
    <p class="hero-location">Rygge kirke · Rundhuset, Moss</p>
    <button class="hero-cta" onclick="document.getElementById('countdown').scrollIntoView({behavior:'smooth'})">
      <span class="hero-cta-label">Bla nedover for mer</span>
      <div class="hero-cta-chevron"></div>
    </button>
  </div>
</section>

<section id="countdown">
  <div style="text-align:center; margin-bottom:3rem;" class="reveal">
    <span class="section-label">Tid for bryllup</span>
    <h2 class="section-title" id="countdown-title" style="font-size:clamp(2rem,4vw,3rem);">Den store dagen nærmer seg</h2>
    <div class="gold-line"></div>
  </div>
  <div class="countdown-grid reveal">
    <div class="countdown-item"><span class="countdown-number" id="cd-days">000</span><span class="countdown-label">Dager</span></div>
    <span class="countdown-sep">:</span>
    <div class="countdown-item"><span class="countdown-number" id="cd-hours">00</span><span class="countdown-label">Timer</span></div>
    <span class="countdown-sep">:</span>
    <div class="countdown-item"><span class="countdown-number" id="cd-minutes">00</span><span class="countdown-label">Minutter</span></div>
    <span class="countdown-sep">:</span>
    <div class="countdown-item"><span class="countdown-number" id="cd-seconds">00</span><span class="countdown-label">Sekunder</span></div>
  </div>
</section>

<section id="story">
  <div class="bg-text" style="top:5%;right:-5%;transform:rotate(-5deg);">Kjærlighet</div>
  <div style="text-align:center;" class="reveal">
    <span class="section-label">Slik gikk det til</span>
    <h2 class="section-title" style="font-size:clamp(2.5rem,5vw,4rem);">Vår historie</h2>
    <div class="gold-line"></div>
  </div>
  <div class="story-timeline">
    <div class="story-moment">
      <div class="story-moment-img-wrap"><img class="story-moment-img" src="2019.jpg" alt="Trondheim 2019" /></div>
      <div class="story-moment-content">
        <div class="story-moment-label">2019</div>
        <div class="story-year">Vi møttes</div>
        <p class="story-text">Vi møttes i Trondheim i 2019. På første date ble det Superhero‑pizza og et par øl, og egentlig trengtes det ikke mer for å vite at kjemien stemte. Tonje studerte til å bli sivilingeniør i bygg‑ og miljøteknikk, mens Olav jobbet som dataingeniør i Apex.</p>
      </div>
    </div>
    <div class="story-moment">
      <div class="story-moment-img-wrap"><img class="story-moment-img" src="2020.jpg" alt="Korona og Heimdal" /></div>
      <div class="story-moment-content">
        <div class="story-moment-label">2020 — Heimdal</div>
        <div class="story-year">Kaos & snikflytting</div>
        <p class="story-text">Tonje dro til Danmark. Olav planla besøk i København — men korona slo til. Tonje returnerte til Norge og bodde noen uker hos Olav. Da Olav overtok toppetasjeleiligheten på Heimdal snek Tonje seg gradvis inn — bit for bit — inntil hun plutselig bare bodde der. Der nøt hun penthouse-livstil og skrev masteroppgaven sin med Pizzabakeren lett tilgjengelig på bakkeplan.</p>
      </div>
    </div>
    <div class="story-moment">
      <div class="story-moment-img-wrap"><img class="story-moment-img" src="2025.jpg" alt="Asker og Oslo" /></div>
      <div class="story-moment-content">
        <div class="story-moment-label">Asker — Oslo</div>
        <div class="story-year">Eventyr & storbyliv</div>
        <p class="story-text">Studiene over, eventyrene i gang. To og et halvt år i Asker med turer i naturen og sitt første cruiseeventyr på Østersjøen — de oppdaget at de elsket å reise. Da begge fikk jobb i Oslo tok de steget inn i storbyen. Konserter, musikaler, kino og treningssenter fyller hverdagen, og Gardermoen er alltid i nærheten når reiselysten slår til.</p>
      </div>
    </div>
    <div class="story-moment">
      <div class="story-moment-img-wrap"><img class="story-moment-img" src="2026.jpg" alt="Forlovelsen" /></div>
      <div class="story-moment-content">
        <div class="story-moment-label">8. februar 2026</div>
        <div class="story-year">Ja!</div>
        <p class="story-text">På Koh Tao i Thailand, under blå himmel og sol, var de på snorkling med privat guide da Olav gikk på kne. De hadde akkurat svømt med baby-hai og sjøskilpadde — og midt i alt det magiske spurte han. Tonje sa ja.</p>
      </div>
    </div>
  </div>
</section>

<section id="gallery">
  <div style="text-align:center; max-width:960px; margin:0 auto 0;" class="reveal">
    <div class="gold-line" style="margin:0 auto 2rem;"></div>
    <p class="story-year" style="opacity:1;transform:none;filter:none;transition:none;">15. Mai 2027 gifter vi oss</p>
  </div>
  <div class="gallery-grid reveal">
    <div class="gallery-item"><img src="bilder/6118092_432026.jpg" alt="Olav og Tonje" /><div class="gallery-item-overlay"></div></div>
    <div class="gallery-item"><img src="bilder/2015-08-05_16-23-57.jpeg" alt="Olav og Tonje" /><div class="gallery-item-overlay"></div></div>
    <div class="gallery-item"><img src="bilder/6026415_3302026.png" alt="Olav og Tonje" style="object-position: center 15%;" /><div class="gallery-item-overlay"></div></div>
    <div class="gallery-item"><img src="bilder/2025-07-05_02-31-14.jpeg" alt="Olav og Tonje" /><div class="gallery-item-overlay"></div></div>
  </div>
</section>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<section id="venue">
  <div id="venue-map"></div>
  <div class="venue-content">
    <div class="venue-header reveal">
      <span class="section-label">Stedet det skjer</span>
      <h2 class="section-title" style="font-size:clamp(2.2rem,4vw,3.5rem);">Sted</h2>
      <div class="gold-line"></div>
      <p style="font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:rgba(44,60,49,0.82); line-height:1.9; font-weight:300; max-width:560px; margin:0 auto;">
        Vi gifter oss i Rygge kirke kl.&nbsp;12.30, og feirer videre med middag, taler og dans p&aring; Rundhuset i Moss.
      </p>
    </div>
    <div class="venue-cards">
      <div class="venue-left">
        <div class="venue-card reveal">
          <div class="venue-img-wrap">
            <img class="venue-img" src="rygge_kirke.jpg" alt="Rygge kirke" />
            <div class="venue-overlay"></div>
            <div class="venue-img-label"><span class="venue-tag">Vielse</span></div>
          </div>
          <div class="venue-body">
            <div style="display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:0.7rem;">
              <p class="venue-card-name" style="margin-bottom:0;">Rygge kirke</p>
              <span style="font-family:'Montserrat',sans-serif; font-size:0.55rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dark); white-space:nowrap;">Kl. 12.30</span>
            </div>
            <p style="font-family:'Cormorant Garamond',serif; font-size:0.95rem; font-weight:400; line-height:1.8; color:#566b5d;">En av Norges eldste kirker, med røtter tilbake til 1100-tallet. Den romanske steinkirken ligger vakkert til i Rygge, bare et steinkast fra Oslofjorden.</p>
          </div>
          <div class="venue-card-footer">
            <a href="https://www.google.com/maps/search/?api=1&amp;query=Rygge+kirke+Moss" class="venue-book-btn" target="_blank" rel="noopener">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              Vis i kart
            </a>
          </div>
        </div>
        <div class="venue-card reveal">
          <div class="venue-img-wrap">
            <img class="venue-img" src="rundhuset.jpg" alt="Rundhuset i Nesparken" />
            <div class="venue-overlay"></div>
            <div class="venue-img-label"><span class="venue-tag">Fest &amp; middag</span></div>
          </div>
          <div class="venue-body">
            <div style="display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:0.7rem;">
              <p class="venue-card-name" style="margin-bottom:0;">Rundhuset i Nesparken</p>
              <span style="font-family:'Montserrat',sans-serif; font-size:0.55rem; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold-dark); white-space:nowrap;">Ettermiddag &amp; kveld</span>
            </div>
            <p style="font-family:'Cormorant Garamond',serif; font-size:0.95rem; font-weight:400; line-height:1.8; color:#566b5d;">Et unikt rundbygg midt i Nesparken ved Mossefjorden, omgitt av gammel eikeskog og vakker natur. Den intime atmosfæren og panoramautsikten gjør det til en perfekt ramme for middag, taler og dans.</p>
          </div>
          <div class="venue-card-footer">
            <a href="https://www.google.com/maps/search/?api=1&amp;query=Rundhuset+Nesparken+Moss" class="venue-book-btn" target="_blank" rel="noopener">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              Vis i kart
            </a>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</section>
<script>
(function() {
  function initVenueMap() {
    if (typeof L === 'undefined') { setTimeout(initVenueMap, 100); return; }
    var map = L.map('venue-map', { scrollWheelZoom: false, zoomControl: true, center: [59.45, 10.44], zoom: 11 });
    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/">CARTO</a>',
      maxZoom: 19
    }).addTo(map);
    function makeIcon(glowing, label) {
      var shadow = glowing ? 'box-shadow:0 0 0 7px rgba(85,112,63,0.22),0 0 22px rgba(85,112,63,0.45);' : 'box-shadow:0 2px 8px rgba(0,0,0,0.3);';
      var html = '<div style="position:relative;display:flex;align-items:center;gap:7px;pointer-events:none;">'+
        '<div style="flex-shrink:0;width:14px;height:14px;background:#55703f;border:2.5px solid #fff;border-radius:50%;'+shadow+'transition:box-shadow 0.2s;"></div>'+
        '<div style="background:rgba(255,255,255,0.92);border:1px solid rgba(85,112,63,0.25);border-radius:3px;padding:3px 8px;white-space:nowrap;font-family:Montserrat,sans-serif;font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:#3a5230;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(44,60,49,0.1);">'+label+'</div>'+
        '</div>';
      return L.divIcon({ className: '', html: html, iconSize: [180, 24], iconAnchor: [7, 12], popupAnchor: [90, -12] });
    }
    var kirkeMarker = L.marker([59.3783, 10.7223], {icon: makeIcon(false, 'Rygge kirke')}).addTo(map)
      .bindPopup('<b style="font-family:serif;font-size:1rem;">Rygge kirke</b><br/><span style="font-size:0.8rem;color:#55703f;">Vielse &middot; Kl. 12.30</span>');
    var rundhusMarker = L.marker([59.4344, 10.6582], {icon: makeIcon(false, 'Rundhuset')}).addTo(map)
      .bindPopup('<b style="font-family:serif;font-size:1rem;">Rundhuset i Nesparken</b><br/><span style="font-size:0.8rem;color:#55703f;">Fest &amp; middag</span>');
    rundhusMarker.on('mouseover', function() { this.setIcon(makeIcon(true, 'Rundhuset')); this.openPopup(); });
    rundhusMarker.on('mouseout',  function() { this.setIcon(makeIcon(false, 'Rundhuset')); });
    kirkeMarker.on('mouseover',   function() { this.setIcon(makeIcon(true, 'Rygge kirke')); this.openPopup(); });
    kirkeMarker.on('mouseout',    function() { this.setIcon(makeIcon(false, 'Rygge kirke')); });
  }
  initVenueMap();
})();
</script>

<section id="schedule">
  <div class="bg-text" style="top:10%;right:-5%;transform:rotate(-3deg);color:rgba(111,133,87,0.05);">15.V</div>
  <div style="text-align:center;" class="reveal">
    <span class="section-label">Dagen utspiller seg</span>
    <h2 class="section-title" style="font-size:clamp(2.5rem,5vw,4rem);">Program</h2>
    <div class="gold-line"></div>
    <p style="font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.4rem; font-weight:300; color:#566b5d; margin-top:2rem;">Kommer når bryllupet nærmer seg.</p>
  </div>
</section>

<!-- ══════════════════════════════════════ RSVP ══ -->
<section id="rsvp">
  <img class="section-bg-img" src="bilder/SUM_4612_2.jpg" alt="" aria-hidden="true" style="object-position: center 25%;" />
  <div class="rsvp-content">
    <div style="text-align:center;" class="reveal">
      <span class="section-label" style="color:var(--gold);">Bli med oss</span>
      <h2 class="section-title" style="font-size:clamp(2.5rem,5vw,4rem);">Svar på invitasjon</h2>
      <div class="gold-line"></div>
      <p style="font-size:0.85rem; color:rgba(44,60,49,0.55); max-width:540px; margin:0 auto; line-height:1.9; letter-spacing:0.03em;">
        Fyll ut skjemaet nedenfor og send inn ditt svar.<br/>
        Svarfrist: <strong style="color:var(--gold);">10. januar 2027</strong>.
      </p>
    </div>

    <div class="rsvp-success" id="rsvp-success">
      <div class="rsvp-success-icon">🌿</div>
      <h3>Tusen takk!</h3>
      <p>Vi har mottatt svaret ditt og gleder oss til å feire med deg.</p>
    </div>

    <form class="rsvp-form reveal" id="rsvp-form" onsubmit="return false;">

      <div class="rsvp-field">
        <label class="rsvp-label">Postadresse for takkekort <span>*</span></label>
        <input class="rsvp-input" type="text" id="rsvp-adresse" placeholder="Gatenavn 1, 0000 By" required />
      </div>

      <div class="rsvp-field">
        <label class="rsvp-label">E-postadresse <span>*</span></label>
        <input class="rsvp-input" type="email" id="rsvp-epost" placeholder="navn@epost.no" required />
      </div>

      <div class="rsvp-field">
        <label class="rsvp-label">Telefonnummer</label>
        <input class="rsvp-input" type="tel" id="rsvp-telefon" placeholder="+47 000 00 000" />
      </div>

      <div class="rsvp-field">
        <label class="rsvp-label">Deltakere <span>*</span></label>
        <span class="rsvp-hint" style="margin-bottom:0.8rem;">Legg til én person om gangen. Inkluder deg selv og evt. følge / barn.</span>
        <div id="rsvp-guests"></div>
        <button type="button" class="rsvp-add-guest" id="rsvp-add-guest-btn" onclick="addGuest()">+ Legg til person</button>
      </div>

      <button class="rsvp-submit" id="rsvp-submit" type="button" onclick="submitRsvp()">Send inn svar</button>

    </form>
  </div>
</section>

<section id="faq">
  <div class="bg-text" style="top:8%;left:-5%;transform:rotate(-4deg);color:rgba(111,133,87,0.05);">Spørsmål</div>
  <div style="text-align:center;" class="reveal">
    <h2 class="section-title" style="font-size:clamp(2.5rem,5vw,4rem);">Spørsmål &amp; svar</h2>
    <div class="gold-line"></div>
  </div>
  <div class="faq-list reveal">
    <details class="faq-item">
      <summary class="faq-question"><span class="faq-q-text">Kan jeg ta med følge?</span><span class="faq-toggle" aria-hidden="true">+</span></summary>
      <div class="faq-answer"><p>Ja, kjæreste/samboer/kone/mann/barn er invitert.</p></div>
    </details>
    <details class="faq-item">
      <summary class="faq-question"><span class="faq-q-text">Hva med overnatting?</span><span class="faq-toggle" aria-hidden="true">+</span></summary>
      <div class="faq-answer"><p>Vi planlegger å bo på Hotell Riviera i Moss. Det finnes mange muligheter for overnatting i Moss— Airbnb, hoteller og campingplasser er alle gode alternativer.</p></div>
    </details>
    <details class="faq-item">
      <summary class="faq-question"><span class="faq-q-text">Praktisk info om lokalet</span><span class="faq-toggle" aria-hidden="true">+</span></summary>
      <div class="faq-answer"><p>Rundhuset leies for anledningen, og siden vi selv står for drikkevarene blir det fri bar hele kvelden. Vi går for en heidundranes fest — så drikk opp og dans!</p></div>
    </details>
    <details class="faq-item">
      <summary class="faq-question"><span class="faq-q-text">Hva om jeg har flere spørsmål?</span><span class="faq-toggle" aria-hidden="true">+</span></summary>
      <div class="faq-answer"><p>Bare ta kontakt med oss direkte — vi svarer så godt vi kan. Send en e-post til <a href="mailto:olav.telseth@gmail.com">olav.telseth@gmail.com</a>. Vi oppdaterer også denne siden fortløpende etter hvert som vi får flere detaljer på plass.</p></div>
    </details>
  </div>
</section>

<footer>
  <div class="footer-names reveal">Olav <span style="font-style:italic;color:rgba(156,175,136,0.6);">&amp;</span> Tonje</div>
  <p class="footer-sub reveal" style="margin-top:0.5rem;">15. mai 2027 · Rygge & Moss</p>
  <div class="gold-line reveal" style="margin:2rem auto;"></div>
</footer>

<script>
(function() {
  const canvas = document.getElementById('hero-canvas');
  const ctx = canvas.getContext('2d');
  let W, H, particles = [], mouseX = 0, mouseY = 0;
  function resize() { W = canvas.width = canvas.offsetWidth; H = canvas.height = canvas.offsetHeight; }
  class Star {
    constructor() { this.reset(); }
    reset() {
      this.x = Math.random() * W; this.y = Math.random() * H;
      this.r = Math.random() * 1.2 + 0.2;
      this.alpha = Math.random() * 0.7 + 0.1;
      this.speed = Math.random() * 0.15 + 0.02;
      this.pulse = Math.random() * Math.PI * 2;
      this.pulseSpeed = Math.random() * 0.015 + 0.005;
      this.drift = (Math.random() - 0.5) * 0.08;
      this.gold = Math.random() < 0.15;
    }
    draw() {
      this.pulse += this.pulseSpeed; this.x += this.drift; this.y -= this.speed;
      const a = this.alpha * (0.7 + 0.3 * Math.sin(this.pulse));
      ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
      ctx.fillStyle = this.gold ? `rgba(156,175,136,${a})` : `rgba(200,220,255,${a * 0.6})`;
      ctx.fill();
      if (this.y < -5 || this.x < -5 || this.x > W + 5) this.reset();
    }
  }
  function init() { resize(); particles = Array.from({ length: 180 }, () => new Star()); }
  function drawAurora() {
    const t = Date.now() * 0.0003;
    for (let i = 0; i < 3; i++) {
      const grd = ctx.createRadialGradient(W*(0.2+i*0.3+Math.sin(t+i)*0.08), H*(0.4+Math.cos(t*0.7+i)*0.15), 0, W*(0.2+i*0.3), H*0.5, W*0.4);
      const hue = [220,190,200][i];
      grd.addColorStop(0, `hsla(${hue},60%,35%,0.04)`); grd.addColorStop(1, 'transparent');
      ctx.fillStyle = grd; ctx.fillRect(0,0,W,H);
    }
  }
  function loop() { ctx.clearRect(0,0,W,H); drawAurora(); particles.forEach(p => p.draw()); requestAnimationFrame(loop); }
  window.addEventListener('resize', () => { resize(); });
  window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; });
  init(); loop();
})();

function updateCountdown() {
  const target = new Date('2027-05-15T00:00:00');
  const now = new Date();
  const diff = target - now;
  if (diff <= 0) {
    ['cd-hours','cd-minutes','cd-seconds'].forEach(id => { document.getElementById(id).textContent = '00'; });
    document.getElementById('cd-days').textContent = '000';
    document.getElementById('countdown-title').textContent = 'Den store dagen er her';
    return;
  }
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  document.getElementById('cd-days').textContent    = String(d).padStart(3, '0');
  document.getElementById('cd-hours').textContent   = String(h).padStart(2, '0');
  document.getElementById('cd-minutes').textContent = String(m).padStart(2, '0');
  document.getElementById('cd-seconds').textContent = String(s).padStart(2, '0');
}
updateCountdown();
setInterval(updateCountdown, 1000);

const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach((el, i) => { el.style.transitionDelay = `${(i % 3) * 0.1}s`; observer.observe(el); });

const storyObserver = new IntersectionObserver((entries) => {
  entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('story-visible'); storyObserver.unobserve(e.target); } });
}, { threshold: 0.18, rootMargin: '0px 0px -60px 0px' });
document.querySelectorAll('.story-moment').forEach(el => storyObserver.observe(el));

const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => { navbar.classList.toggle('scrolled', window.scrollY > 60); });

(function() {
  const canvas = document.getElementById('fireworks-canvas');
  const ctx = canvas.getContext('2d');
  let W, H, rockets = [], particles = [], active = false;
  function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
  resize(); window.addEventListener('resize', resize);
  const COLORS = ['#9caf88','#c4d4b0','#f6faee','#7da683','#5f7548','#4f7a55','#9caf88','#c4d4b0','#ffffff'];
  class Rocket {
    constructor() { this.x = W*(0.2+Math.random()*0.6); this.y = H; this.targetY = H*(0.1+Math.random()*0.35); this.speed = 12+Math.random()*8; this.color = COLORS[Math.floor(Math.random()*COLORS.length)]; this.trail = []; this.exploded = false; }
    update() {
      this.trail.push({x:this.x,y:this.y,a:1}); if(this.trail.length>12) this.trail.shift();
      this.y -= this.speed; if(this.y<=this.targetY){this.explode();return false;} return true;
    }
    explode() {
      this.exploded=true; const n=120+Math.floor(Math.random()*80);
      for(let i=0;i<n;i++){const angle=(Math.PI*2*i)/n+(Math.random()-0.5)*0.5; const speed=2+Math.random()*6; const c2=Math.random()<0.3?COLORS[Math.floor(Math.random()*COLORS.length)]:this.color; particles.push(new Particle(this.x,this.y,Math.cos(angle)*speed,Math.sin(angle)*speed,c2));}
    }
    draw() {
      this.trail.forEach((t,i)=>{ctx.beginPath();ctx.arc(t.x,t.y,3,0,Math.PI*2);ctx.fillStyle=`rgba(156,175,136,${i/this.trail.length*0.6})`;ctx.fill();});
      ctx.beginPath();ctx.arc(this.x,this.y,5,0,Math.PI*2);ctx.fillStyle=this.color;ctx.fill();
    }
  }
  class Particle {
    constructor(x,y,vx,vy,color){this.x=x;this.y=y;this.vx=vx;this.vy=vy;this.color=color;this.alpha=1;this.decay=0.008+Math.random()*0.012;this.gravity=0.06;this.r=2.5+Math.random()*3;}
    update(){this.x+=this.vx;this.y+=this.vy;this.vy+=this.gravity;this.vx*=0.98;this.alpha-=this.decay;return this.alpha>0;}
    draw(){ctx.globalAlpha=this.alpha;ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fillStyle=this.color;ctx.fill();}
  }
  let lastLaunch=0;
  function loop(){
    const hasParticles=rockets.length>0||particles.length>0;
    if(!active&&!hasParticles){requestAnimationFrame(loop);return;}
    ctx.globalCompositeOperation='destination-out'; ctx.fillStyle='rgba(0,0,0,0.1)'; ctx.fillRect(0,0,W,H);
    ctx.globalCompositeOperation='lighter';
    if(active){const now=Date.now();if(now-lastLaunch>600+Math.random()*400){rockets.push(new Rocket());lastLaunch=now;}}
    rockets=rockets.filter(r=>{r.draw();return r.update();});
    particles=particles.filter(p=>{p.draw();return p.update();});
    ctx.globalCompositeOperation='source-over'; ctx.globalAlpha=1;
    requestAnimationFrame(loop);
  }
  const scheduleSection=document.getElementById('schedule');
  let fwTriggered=false;
  const fwObserver=new IntersectionObserver(entries=>{
    entries.forEach(e=>{
      if(e.isIntersecting&&!fwTriggered){
        fwTriggered=true; rockets=[];particles=[];active=true;canvas.style.opacity='1';
        setTimeout(()=>{active=false;setTimeout(()=>{canvas.style.opacity='0';ctx.clearRect(0,0,W,H);rockets=[];particles=[];},2000);},6000);
      }
    });
  },{threshold:0.4});
  fwObserver.observe(scheduleSection);
  function launchHeroFireworks(){
    rockets=[];particles=[];active=true;canvas.style.opacity='1';
    for(let i=0;i<3;i++){setTimeout(()=>{const r=new Rocket();r.x=W*(0.3+Math.random()*0.4);rockets.push(r);},i*800);}
    setTimeout(()=>{active=false;canvas.style.transition='opacity 1.5s ease-out';canvas.style.opacity='0';setTimeout(()=>{ctx.clearRect(0,0,W,H);rockets=[];particles=[];},1500);},4000);
  }
  if(document.documentElement.classList.contains('invite-mode')){window.__launchHeroFireworks=launchHeroFireworks;}else{setTimeout(launchHeroFireworks,1500);}
  loop();
})();

(function(){
  const params=new URLSearchParams(window.location.search);
  if(!params.has('invitasjon')) return;
  history.replaceState(null,'',window.location.pathname);
  const overlay=document.getElementById('invite-overlay');
  const envelope=document.getElementById('invite-envelope');
  const letterEl=document.getElementById('env-letter-el');
  const peekEl=letterEl.querySelector('.env-letter-peek');
  const cardContentEl=letterEl.querySelector('.env-letter-card-content');
  const hint=document.querySelector('.invite-hint');
  function blockScroll(e){e.preventDefault();}
  document.addEventListener('touchmove',blockScroll,{passive:false});
  document.addEventListener('wheel',blockScroll,{passive:false});
  function unblockScroll(){document.removeEventListener('touchmove',blockScroll);document.removeEventListener('wheel',blockScroll);}
  envelope.addEventListener('click',function onOpen(){
    envelope.removeEventListener('click',onOpen);
    envelope.classList.add('open');
    setTimeout(()=>{
      const lr=letterEl.getBoundingClientRect();
      const vCX=window.innerWidth/2; const vCY=window.innerHeight/2;
      const cardW=Math.min(440,window.innerWidth*0.85);
      peekEl.style.display='none'; cardContentEl.style.display='flex';
      document.body.appendChild(letterEl);
      letterEl.style.position='fixed'; letterEl.style.left=(vCX-cardW/2)+'px';
      letterEl.style.top='-9999px'; letterEl.style.bottom='auto'; letterEl.style.right='auto';
      letterEl.style.width=cardW+'px'; letterEl.style.height='auto';
      letterEl.style.padding='3.5rem 3rem 3rem'; letterEl.style.textAlign='center';
      letterEl.style.boxShadow='0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(156,175,136,0.2)';
      letterEl.style.borderRadius='6px'; letterEl.style.overflow='hidden';
      letterEl.style.zIndex='10001'; letterEl.style.background='linear-gradient(160deg,#fbfdf8 0%,#ecf1de 100%)';
      letterEl.style.display='flex'; letterEl.style.flexDirection='column';
      letterEl.style.alignItems='center'; letterEl.style.gap='0';
      letterEl.style.transition='none'; letterEl.style.transform='none';
      const cardH=letterEl.offsetHeight; const finalTop=vCY-cardH/2;
      letterEl.style.top=finalTop+'px';
      const dx=(lr.left+lr.width/2)-vCX; const dy=(lr.top+lr.height/2)-vCY;
      const scaleX=lr.width/cardW; const scaleY=lr.height/cardH;
      letterEl.style.transform=`translate(${dx}px,${dy}px) scale(${scaleX},${scaleY})`;
      envelope.style.transition='opacity 0.4s ease'; envelope.style.opacity='0';
      if(hint){hint.style.transition='opacity 0.3s';hint.style.opacity='0';}
      requestAnimationFrame(()=>requestAnimationFrame(()=>{
        letterEl.style.transition='transform 0.85s cubic-bezier(0.34,1.05,0.64,1)';
        letterEl.style.transform='none';
        setTimeout(()=>{
          letterEl.style.overflow='visible'; letterEl.classList.add('show');
          envelope.style.display='none';
          document.getElementById('invite-card-btn').addEventListener('click',function dismiss(){
            unblockScroll();
            overlay.style.animation='none'; overlay.offsetHeight;
            overlay.style.transition='opacity 1.1s ease'; overlay.style.opacity='0'; overlay.style.pointerEvents='none';
            setTimeout(()=>{ letterEl.style.transition='opacity 0.9s ease,transform 1s ease'; letterEl.style.opacity='0'; letterEl.style.transform='translateY(-14px)'; },150);
            setTimeout(()=>{
              document.documentElement.classList.remove('invite-mode');
              overlay.style.display='none'; letterEl.remove();
              if(window.__launchHeroFireworks){setTimeout(window.__launchHeroFireworks,400);}
            },1200);
          });
        },800);
      }));
    },1050);
  });
})();

document.getElementById('hamburger').addEventListener('click',()=>{
  const links=document.querySelector('.nav-links');
  const isOpen=links.style.display==='flex';
  links.style.display=isOpen?'none':'flex'; links.style.flexDirection='column';
  links.style.position='fixed'; links.style.top='0'; links.style.right='0';
  links.style.bottom='0'; links.style.width='240px';
  links.style.background='rgba(28,46,36,0.98)'; links.style.padding='6rem 2rem 2rem';
  links.style.gap='2.5rem'; links.style.borderLeft='1px solid rgba(156,175,136,0.15)';
  if(!isOpen){ links.querySelectorAll('a').forEach(a=>{a.addEventListener('click',()=>{links.style.display='none';},{once:true});});}
});

// ── RSVP FORM ────────────────────────────────────────────────────
var guestCount = 0;

function addGuest(defaultNavn) {
  guestCount++;
  var idx = guestCount;
  var container = document.getElementById('rsvp-guests');
  var card = document.createElement('div');
  card.className = 'rsvp-guest-card';
  card.id = 'guest-card-' + idx;
  card.innerHTML =
    '<div class="rsvp-guest-card-header">' +
      '<span class="rsvp-guest-card-title">Person ' + idx + '</span>' +
      (idx > 1 ? '<button type="button" class="rsvp-guest-remove" onclick="removeGuest(' + idx + ')" title="Fjern">×</button>' : '') +
    '</div>' +
    '<div class="rsvp-guest-fields">' +
      '<div class="rsvp-field full">' +
        '<label class="rsvp-label">Navn <span>*</span></label>' +
        '<input class="rsvp-input" type="text" id="guest-navn-' + idx + '" placeholder="Fornavn Etternavn" required />' +
      '</div>' +
      '<div class="rsvp-field full">' +
        '<label class="rsvp-label">Matallergier / preferanser</label>' +
        '<input class="rsvp-input" type="text" id="guest-allergier-' + idx + '" placeholder="F.eks. glutenintolerant, vegetar, nøttallergi…" />' +
      '</div>' +
      '<div class="rsvp-field full">' +
        '<label class="rsvp-label">Alkohol <span>*</span></label>' +
        '<div class="rsvp-radio-group" id="guest-alkohol-' + idx + '">' +
          '<label class="rsvp-radio-label"><input type="radio" name="alkohol-' + idx + '" value="Ja" /> Ja</label>' +
          '<label class="rsvp-radio-label"><input type="radio" name="alkohol-' + idx + '" value="Nei" /> Nei</label>' +
        '</div>' +
      '</div>' +
    '</div>';
  container.appendChild(card);
  // Radio toggle styling
  card.querySelectorAll('.rsvp-radio-label').forEach(function(label) {
    var rb = label.querySelector('input[type=radio]');
    rb.addEventListener('change', function() {
      card.querySelectorAll('.rsvp-radio-label').forEach(function(l) { l.classList.remove('checked'); });
      if (rb.checked) label.classList.add('checked');
    });
  });
  if (defaultNavn) document.getElementById('guest-navn-' + idx).value = defaultNavn;
}

function removeGuest(idx) {
  var card = document.getElementById('guest-card-' + idx);
  if (card) card.remove();
  // Re-number visible cards
  var cards = document.querySelectorAll('.rsvp-guest-card');
  cards.forEach(function(c, i) {
    var title = c.querySelector('.rsvp-guest-card-title');
    if (title) title.textContent = 'Person ' + (i + 1);
  });
}

// Init with one empty guest
addGuest();

async function submitRsvp() {
  var adresse = document.getElementById('rsvp-adresse').value.trim();
  var epost   = document.getElementById('rsvp-epost').value.trim();
  var telefon = document.getElementById('rsvp-telefon').value.trim();

  if (!adresse || !epost) {
    alert('Vennligst fyll ut adresse og e-postadresse.');
    return;
  }
  if (!epost.includes('@')) {
    alert('Vennligst oppgi en gyldig e-postadresse.');
    return;
  }

  // Collect guests from active cards
  var guests = [];
  var cards = document.querySelectorAll('.rsvp-guest-card');
  var valid = true;
  cards.forEach(function(card) {
    var navnEl = card.querySelector('input[type=text]');
    var allergierEl = card.querySelectorAll('input[type=text]')[1];
    var checkedRadio = card.querySelector('input[type=radio]:checked');
    var navn = navnEl ? navnEl.value.trim() : '';
    var allergier = allergierEl ? allergierEl.value.trim() : '';
    var alkohol = checkedRadio ? checkedRadio.value : '';
    if (!navn) { alert('Vennligst fyll ut navn for alle gjester.'); valid = false; return; }
    if (!alkohol) { alert('Vennligst velg alkohol (Ja/Nei) for alle gjester.'); valid = false; return; }
    guests.push({ navn: navn, allergier: allergier, alkohol: alkohol });
  });
  if (!valid || guests.length === 0) return;

  var btn = document.getElementById('rsvp-submit');
  btn.disabled = true;
  btn.textContent = 'Sender...';

  try {
    var res = await fetch('/api/rsvp', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ adresse: adresse, epost: epost, telefon: telefon, guests: guests })
    });
    var data;
    try { data = await res.json(); } catch(e) { data = {}; }
    if (res.ok && data.ok !== false) {
      document.getElementById('rsvp-form').style.display = 'none';
      var s = document.getElementById('rsvp-success');
      s.style.display = 'block';
      s.scrollIntoView({ behavior: 'smooth', block: 'center' });
    } else {
      var errMsg = (data && data.error) ? data.error : ('HTTP ' + res.status);
      throw new Error(errMsg);
    }
  } catch(e) {
    btn.disabled = false;
    btn.textContent = 'Send inn svar';
    alert('Kunne ikke sende svar. Prøv igjen eller kontakt oss direkte.\n\nDetaljer: ' + e.message);
  }
}

// ── RSVP BACKGROUND PARALLAX ─────────────────────────────────────
(function() {
  var section = document.getElementById('rsvp');
  var img     = section && section.querySelector('.section-bg-img');
  if (!img) return;
  function update() {
    var rect     = section.getBoundingClientRect();
    var scrolled = -rect.top;
    img.style.transform = 'translateY(' + (scrolled * 0.3) + 'px)';
  }
  window.addEventListener('scroll', update, { passive: true });
  update();
})();
</script>
</body>
</html>
