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

      :root {
        /* Slightly brighter teal so the page reads clearly as “green” */
        --teal:     #0c8c82;
        --orange:   #e8622a;
        --orange-lt:#f0854d;
        --gold:     #c9a84c;
        --gold-lt:  #e2c97e;
        --cream:    #f5f0e8;
        --navy:     #0d1f3c;
        /* Intro — candles mimic .page fade; lead = ms before .page starts (keep ms) */
        --intro-content-dur:     600ms;
        --intro-candle-lead:    200ms;
        --intro-map-lead:        40ms;
        /* Overlay alpha: “dark room” start → final (JS sets --dim-opacity-target) */
        --intro-dim-from:        0.52;
      }

      body {
        color: #fff;
        font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
        font-weight: 300;
        overflow-x: hidden;
        min-height: 100vh;
        background-color: var(--teal);
      }

      body::after {
        content: '';
        position: fixed;
        inset: 0;
        background:
          radial-gradient(ellipse at 50% 0%,   rgba(255,255,255,0.12) 0%, transparent 58%),
          radial-gradient(ellipse at 100% 100%, rgba(8,95,88,0.35)     0%, transparent 62%),
          radial-gradient(ellipse at 0%   100%, rgba(8,95,88,0.28)     0%, transparent 52%);
        pointer-events: none;
        z-index: 0;
        opacity: 1;
      }

      /* ── Z-INDEX STACK ──────────────────────────────────────────
         0  body::after  (bg gradients)
         1  #hp-dim      (dark atmosphere overlay)
         2  #hp-candles  (candle layer)
         3  .page        (all content)
         9999 #hp-toggle (invisible button)
      ─────────────────────────────────────────────────────────── */

      #hp-dim {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: rgba(0, 0, 0, var(--intro-dim-from, 0.52));
        opacity: 1;
        transition: background var(--intro-content-dur) ease;
      }

      body.intro-reveal-content #hp-dim {
        background: rgba(0, 0, 0, var(--dim-opacity-target, 0.22));
      }

      #hp-candles {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity var(--intro-content-dur) ease,
                    transform var(--intro-content-dur) ease;
      }

      body.intro-candles-in #hp-candles {
        opacity: 1;
        transform: translateY(0);
      }

      #hp-toggle {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 10001;
        -webkit-tap-highlight-color: transparent;
        outline: none;
      }

      .page {
        position: relative;
        z-index: 3;
        max-width: 680px;
        margin: 0 auto;
        padding: 0 20px 40px;
        text-align: center;
      }

      /* One fade layer for copy + hero image (multiply on img breaks parent opacity fades) */
      .page-inner {
        isolation: isolate;
        opacity: 0;
        transform: translateY(18px);
        transition: opacity var(--intro-content-dur) ease,
                    transform var(--intro-content-dur) ease;
      }

      body.intro-reveal-content .page-inner {
        opacity: 1;
        transform: translateY(0);
      }

      .save-image-wrap {
        margin: 20px auto 0;
        max-width: 500px;
      }
      .save-image {
        width: 100%;
        height: auto;
        display: block;
        /* no mix-blend-mode: multiply here — it breaks smooth fades on an opacity-animated ancestor */
        filter: contrast(1.05) saturate(1.1);
      }

      .celebration {
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
        font-size: clamp(1.8rem, 6vw, 2.8rem);
        color: var(--cream);
        margin: 12px 0 4px;
        text-shadow: 1px 2px 8px rgba(0,0,0,0.3);
      }

      .gold-rule {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 10px auto;
        max-width: 500px;
      }
      .gold-rule::before, .gold-rule::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--gold), transparent);
      }
      .gold-rule span { font-size: 0.7rem; color: var(--gold); }

      .events {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin: 14px 0;
      }
      @media (max-width: 480px) { .events { grid-template-columns: 1fr; } }

      .card {
        background: rgba(6,90,84,0.6);
        border: 1px solid var(--gold);
        border-radius: 4px;
        padding: 18px 16px;
        transition: transform 0.3s, background 0.3s;
      }
      .card:hover { background: rgba(6,90,84,0.85); transform: translateY(-2px); }

      .card-label {
        font-size: 0.6rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gold-lt);
        margin-bottom: 8px;
      }
      .card-date-big {
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
        font-size: clamp(1.8rem, 5vw, 2.4rem);
        color: var(--cream);
        line-height: 1;
        margin-bottom: 2px;
      }
      .card-year {
        font-size: 0.7rem;
        letter-spacing: 0.2em;
        color: var(--gold-lt);
        margin-bottom: 10px;
      }
      .card hr {
        border: none;
        border-top: 1px solid rgba(201,168,76,0.3);
        margin: 8px 0;
      }
      .card-note {
        font-size: 0.8rem;
        line-height: 1.55;
        color: rgba(245,240,232,0.8);
      }
      .card-note strong {
        display: block;
        color: var(--cream);
        font-weight: 600;
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 3px;
      }
      .card-tag {
        display: inline-block;
        margin-top: 10px;
        padding: 4px 10px;
        border: 1px solid var(--navy);
        border-radius: 2px;
        font-size: 0.58rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--gold-lt);
      }

      .flourish {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 6px 0;
      }
      .flourish svg { width: 80px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1; }
      .flourish-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

      .contact-section {
        margin-bottom: 20px;
      }
      .section-label {
        font-size: 0.62rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gold-lt);
        margin-bottom: 8px;
      }
      .contact-grid { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
      .contact-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(6,90,84,0.6);
        border: 1px solid rgba(201,168,76,0.5);
        border-radius: 3px;
        padding: 10px 16px;
        text-decoration: none;
        color: var(--cream);
        font-size: 0.8rem;
        transition: background 0.3s, border-color 0.3s;
      }
      .contact-pill:hover { background: rgba(6,90,84,0.9); border-color: var(--gold); }
      .contact-pill svg {
        width: 14px; height: 14px;
        stroke: var(--gold-lt); fill: none;
        stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
        flex-shrink: 0;
      }
      .pill-sub { display: block; font-size: 0.62rem; color: var(--gold-lt); margin-top: 1px; }

      .map-section {
        margin: 4px 0 20px;
      }
      .map-venue-name {
        font-family: Georgia, 'Times New Roman', serif;
        font-style: italic;
        font-size: clamp(1.4rem, 4vw, 1.9rem);
        color: var(--cream);
        margin-bottom: 10px;
      }
      #map {
        width: 100%; height: 260px;
        border-radius: 6px;
        border: 2px solid var(--gold);
      }
      .map-directions {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 10px;
        padding: 8px 20px;
        background: var(--orange);
        border-radius: 3px;
        text-decoration: none;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        transition: background 0.3s;
      }
      .map-directions:hover { background: var(--orange-lt); }
      .map-directions svg {
        width: 14px; height: 14px;
        stroke: currentColor; fill: none;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
      }

      footer {
        border-top: 1px solid rgba(201,168,76,0.3);
        padding-top: 14px;
        font-size: 0.65rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(245,240,232,0.5);
      }
      footer span { color: var(--gold-lt); }

      /* ── CANDLE ELEMENT STYLES ──────────────────────────────── */

      .hp-c {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        animation-name: hp-bob;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: var(--bspd, 3.5s);
        animation-delay: var(--bdly, 0s);
      }

      .hp-g {
        position: absolute;
        border-radius: 50%;
        filter: blur(var(--gblur, 10px));
        animation-name: hp-flicker;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: var(--fspd, 1.8s);
        animation-delay: var(--fdly, 0s);
      }

      .hp-f {
        position: relative;
        width: 2px;
        height: 4px;
        border-radius: 50%;
        background: transparent;
        transform-origin: center bottom;
        animation-name: hp-flicker;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-duration: var(--fspd, 1.8s);
        animation-delay: var(--fdly, 0s);
      }

      .hp-k {
        width: 2px;
        background: linear-gradient(to top, #1a0d00, #5a4020);
        border-radius: 1px 1px 0 0;
      }

      .hp-w {
        border-radius: 3px 3px 1px 1px;
        box-shadow:
          inset -4px 0 10px rgba(0,0,0,0.22),
          inset  2px 0  5px rgba(255,255,255,0.10),
          inset  0 -8px 12px rgba(0,0,0,0.15);
      }

      @keyframes hp-bob {
        0%,100% { transform: translateY(0); }
        50%      { transform: translateY(var(--bamt, -6px)); }
      }

      @keyframes hp-flicker {
        0%   { transform: scaleX(1.00) scaleY(1.00) skewX( 0.0deg); opacity: 1.00; }
        15%  { transform: scaleX(0.84) scaleY(1.06) skewX(-1.8deg); opacity: 0.87; }
        30%  { transform: scaleX(1.08) scaleY(0.93) skewX( 1.2deg); opacity: 0.96; }
        48%  { transform: scaleX(0.91) scaleY(1.04) skewX(-0.8deg); opacity: 0.82; }
        63%  { transform: scaleX(1.05) scaleY(0.96) skewX( 1.5deg); opacity: 0.94; }
        80%  { transform: scaleX(0.88) scaleY(1.07) skewX(-1.2deg); opacity: 0.88; }
        100% { transform: scaleX(1.00) scaleY(1.00) skewX( 0.0deg); opacity: 1.00; }
      }

.venue-popup .leaflet-popup-content-wrapper {
      background:rgba(6,90,84,0.95); border:2px solid #c9a84c; border-radius:4px;
      color:#f5f0e8; font-family:'Trebuchet MS',sans-serif; font-size:.85rem;
      line-height:1.6; box-shadow:0 4px 16px rgba(0,0,0,0.4);
    }
    .venue-popup .leaflet-popup-content b { color:#e2c97e; font-weight:600; display:block; margin-bottom:2px; }
    .venue-popup .leaflet-popup-tip { background:rgba(6,90,84,0.95); }
    .venue-popup .leaflet-popup-close-button { color:#c9a84c !important; }