:root {
      --red-950: #103a61;
      --red-900: #185981;
      --red-800: #287bb5;
      --red-700: #4a9fd0;
      --gold: #d7ad5b;
      --gold-soft: #f3d995;
      --ivory: #fff8e9;
      --ink: #173d59;
      --serif: "Cormorant Garamond", Georgia, serif;
      --sans: "Manrope", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--ivory);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.6;
      overflow-x: hidden;
    }
    button, input { font: inherit; }
    button { cursor: pointer; }

    .opening-screen {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 28px 20px;
      color: white;
      text-align: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 35%, rgba(184,222,246,.18), transparent 28%),
        linear-gradient(145deg, #358ec5, #103a61 78%);
      transition: opacity .7s ease, visibility .7s ease;
    }
    .opening-screen::before,
    .opening-screen::after {
      content: "";
      position: absolute;
      left: -10%;
      width: 120%;
      height: 92px;
      background: center / auto 76px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='none' stroke='%23e5bd66' stroke-width='2'%3E%3Cpath d='M0 40h25c0-18 17-28 30-18 11 8 7 25-7 25-12 0-18-15-9-24C50 11 68 18 80 40c12-22 30-29 41-17 9 9 3 24-9 24-14 0-18-17-7-25 13-10 30 0 30 18h25'/%3E%3Cpath d='M80 0v80M68 40l12-13 12 13-12 13z'/%3E%3C/g%3E%3C/svg%3E");
      opacity: .6;
    }
    .opening-screen::before { top: 8px; }
    .opening-screen::after { bottom: 8px; transform: rotate(180deg); }
    .opening-screen.opened { opacity: 0; visibility: hidden; pointer-events: none; }
    .opening-content { position: relative; z-index: 2; width: min(390px, 100%); }
    .opening-kicker { margin: 0 0 42px; color: var(--gold-soft); font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    .envelope-button { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; }
    .envelope-wrap { position: relative; display: block; width: min(340px, 86vw); height: 226px; margin: 0 auto; perspective: 1100px; filter: drop-shadow(0 26px 32px rgba(6,28,49,.34)); transition: transform .2s ease; }
    .envelope-back { position: absolute; inset: 0; border: 1px solid rgba(255, 224, 157, .4); background: #2c82b9; }
    .letter-card {
      position: absolute;
      left: 7%;
      bottom: 7%;
      z-index: 2;
      width: 86%;
      height: 82%;
      display: grid;
      place-items: center;
      padding: 22px;
      color: var(--red-900);
      border: 1px solid var(--gold);
      background: var(--ivory);
      transform: translateY(0);
      transition: transform .85s cubic-bezier(.22,.8,.28,1) .38s;
    }
    .letter-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(215,173,91,.48); pointer-events: none; }
    .letter-card strong { display: block; font: italic 600 3.25rem/.85 var(--serif); }
    .letter-card em { display: block; margin-top: 10px; color: #3c7599; font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
    .envelope-pocket { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
    .envelope-pocket::before,
    .envelope-pocket::after { content: ""; position: absolute; inset: 0; }
    .envelope-pocket::before { background: linear-gradient(142deg, #499ed0, #1b6297); clip-path: polygon(0 0, 55% 64%, 0 100%); }
    .envelope-pocket::after { background: linear-gradient(215deg, #398fc5, #18547f); clip-path: polygon(100% 0, 45% 64%, 100% 100%); }
    .envelope-front { position: absolute; inset: 0; z-index: 4; background: linear-gradient(165deg, #499fd1, #226b9f); clip-path: polygon(0 100%, 0 76%, 50% 38%, 100% 76%, 100% 100%); }
    .envelope-flap {
      position: absolute;
      inset: 0 0 auto;
      z-index: 6;
      height: 63%;
      background: linear-gradient(165deg, #67b2dc, #256b9d);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      transform-origin: 50% 0;
      backface-visibility: hidden;
      transition: transform .72s cubic-bezier(.4,0,.2,1);
    }
    .seal {
      position: absolute;
      left: 50%;
      top: 51%;
      z-index: 7;
      width: 62px;
      height: 62px;
      display: grid;
      place-items: center;
      border: 2px solid #f0d58e;
      border-radius: 50%;
      color: #1c5077;
      background: radial-gradient(circle at 35% 30%, #f4df9e, #c3953e 72%);
      box-shadow: 0 5px 15px rgba(44,0,8,.35);
      transform: translate(-50%, -50%);
      transition: opacity .2s ease .1s, transform .35s ease;
      font: 600 1.7rem var(--serif);
    }
    .seal::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(24,71,106,.42); border-radius: 50%; }
    .open-label { display: inline-block; margin-top: 31px; padding-bottom: 6px; border-bottom: 1px solid rgba(243,217,149,.72); color: var(--gold-soft); font-size: .92rem; letter-spacing: .05em; transition: opacity .25s ease; }
    .envelope-button:hover .envelope-wrap { transform: translateY(-3px); }
    .envelope-button:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 12px; }
    .opening-screen.opening .envelope-flap { z-index: 1; transform: rotateX(180deg); }
    .opening-screen.opening .seal { opacity: 0; transform: translate(-50%, -35%) scale(.72); }
    .opening-screen.opening .letter-card { z-index: 5; transform: translateY(-102px); }
    .opening-screen.opening .open-label { opacity: 0; }
    body.locked { overflow: hidden; }
    body.locked .page { transform: scale(.985); filter: blur(6px); }

    .page { position: relative; min-height: 100vh; }
    .page::before {
      content: "";
      position: fixed;
      inset: 0;
      opacity: .035;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cpath fill='%23185981' d='M70 0c8 22 17 31 39 39-22 8-31 17-39 39-8-22-17-31-39-39C53 31 62 22 70 0Zm0 62c8 22 17 31 39 39-22 8-31 17-39 39-8-22-17-31-39-39 22-8 31-17 39-39Z'/%3E%3C/svg%3E");
      z-index: 20;
    }

    .hero {
      min-height: 100svh;
      position: relative;
      display: grid;
      place-items: end center;
      padding: max(360px, 58svh) 22px 72px;
      color: white;
      text-align: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 14%, rgba(191,226,249,.25), transparent 33%),
        linear-gradient(145deg, var(--red-700), var(--red-950));
    }
    .hero-gallery {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: var(--red-950);
    }
    .hero-gallery::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(7,29,49,.08), rgba(7,29,49,.18) 45%, rgba(7,29,49,.88)),
        radial-gradient(circle at 50% 30%, transparent 25%, rgba(8,34,56,.28) 100%);
    }
    .photo-slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.06);
      animation: photoCycle 14s ease-in-out infinite paused;
      will-change: opacity, transform;
    }
    .photo-slide:first-child { object-position: center 18%; }
    .photo-slide:nth-child(2) { object-position: center 28%; animation-delay: 7s; }
    body.invitation-started .photo-slide { animation-play-state: running; }
    .light-sweep {
      position: absolute;
      inset: -20% -45%;
      z-index: 1;
      opacity: 0;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 40%, rgba(255,224,151,.16) 49%, transparent 58%);
      transform: translateX(-35%);
    }
    body.invitation-started .light-sweep { animation: sweep 5.5s ease-in-out 1.7s infinite; }
    .gold-dust {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: .55;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 16% 24%, rgba(255,220,140,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 18%, rgba(255,220,140,.7) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 67% 58%, rgba(255,220,140,.5) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 67%, rgba(255,220,140,.55) 0 1.5px, transparent 2.5px);
      background-size: 190px 230px, 230px 270px, 170px 210px, 250px 300px;
      animation: dust 10s linear infinite paused;
    }
    body.invitation-started .gold-dust { animation-play-state: running; }
    }
    .hero::before, .hero::after {
      content: "";
      position: absolute;
      left: -12%;
      width: 124%;
      height: 90px;
      background: center / auto 74px repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='none' stroke='%23e5bd66' stroke-width='2.5'%3E%3Cpath d='M0 40h25c0-18 17-28 30-18 11 8 7 25-7 25-12 0-18-15-9-24C50 11 68 18 80 40c12-22 30-29 41-17 9 9 3 24-9 24-14 0-18-17-7-25 13-10 30 0 30 18h25'/%3E%3Cpath d='M80 0v80M68 40l12-13 12 13-12 13z'/%3E%3C/g%3E%3C/svg%3E");
      opacity: .78;
      z-index: 1;
    }
    .hero::before { top: 8px; }
    .hero::after { bottom: 4px; transform: rotate(180deg); }
    .hero-content { position: relative; z-index: 2; max-width: 640px; animation: rise .9s ease both; }
    .eyebrow {
      margin: 0 0 16px;
      color: var(--gold-soft);
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .23em;
      text-transform: uppercase;
    }
    .hero h1 {
      margin: 0;
      font: italic 600 clamp(3.8rem, 16vw, 6.5rem)/.95 var(--serif);
      color: #fffaf0;
      text-shadow: 0 6px 30px rgba(6,29,50,.35);
    }
    .hero .event-name {
      margin: 16px 0 0;
      font: 500 clamp(1.15rem, 4vw, 1.45rem)/1.2 var(--serif);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold-soft);
    }
    .hero-date {
      width: fit-content;
      margin: 20px auto 0;
      padding: 12px 24px;
      border-block: 1px solid rgba(243, 217, 149, .7);
      font-size: 1rem;
      letter-spacing: .12em;
    }
    .hero-invitation { margin: 32px 0 0; color: var(--gold-soft); font: 500 clamp(1.1rem, 4vw, 1.5rem)/1.3 var(--serif); letter-spacing: .22em; }
    .scroll-cue {
      position: absolute;
      bottom: 23px;
      left: 50%;
      z-index: 3;
      width: 28px;
      height: 28px;
      border-right: 1px solid var(--gold-soft);
      border-bottom: 1px solid var(--gold-soft);
      transform: translateX(-50%) rotate(45deg);
      opacity: .7;
      animation: bob 1.8s ease-in-out infinite;
    }

    main { overflow: hidden; }
    #invite .lead { font-family: var(--serif); font-size: clamp(1.35rem, 4.8vw, 1.65rem); font-weight: 600; line-height: 1.5; color: #fff8ed; text-wrap: pretty; }
    .invite-name { display: block; margin: 18px 0 24px; color: var(--gold-soft); font: italic 600 clamp(2.8rem, 10vw, 4.5rem)/1.1 var(--serif); }
    .section.photo-section { position: relative; isolation: isolate; overflow: hidden; color: white; background: #103a61; padding-top: max(360px, 48svh); padding-bottom: 70px; }
    .section-backdrop { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform: scale(1.04); transition: transform 2s ease-out; }
    .photo-section.visible .section-backdrop { transform: scale(1); }
    .photo-section::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,28,47,.08) 15%, rgba(7,28,47,.28) 40%, rgba(7,28,47,.86) 65%, #0d304f 100%); }
    .photo-section h2, .photo-section .signature { color: var(--gold-soft); }
    .photo-section .lead { text-shadow: 0 2px 10px rgba(0,0,0,.4); }
    @media (min-width: 800px) { .section-backdrop { object-position: center 38%; } .section.photo-section { padding-top: 58svh; } }
    @media (prefers-reduced-motion: reduce) { .section-backdrop { transform: none; transition: none; } }
    .section { padding: 80px max(22px, calc((100vw - 760px) / 2)); text-align: center; }
    .section.red { color: white; background: linear-gradient(160deg, var(--red-800), var(--red-950)); }
    .ornament { display: flex; align-items: center; gap: 12px; width: min(220px, 70%); margin: 0 auto 24px; color: var(--gold); }
    .ornament::before, .ornament::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .65; }
    .ornament span { font-size: 1.3rem; transform: rotate(45deg); }
    h2 { margin: 0 0 22px; font: 600 clamp(2.6rem, 10vw, 4.5rem)/1 var(--serif); color: var(--red-800); }
    .red h2 { color: var(--gold-soft); }
    .lead { max-width: 610px; margin: 0 auto; font-size: 1.05rem; }
    .signature { margin: 30px 0 0; color: var(--red-800); font: italic 600 1.8rem var(--serif); }

    .date-card {
      max-width: 620px;
      margin: 40px auto 0;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      color: var(--gold-soft);
    }
    .date-card .side { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
    .date-card .day { padding: 0 25px; border-inline: 1px solid rgba(243,217,149,.42); }
    .date-card strong { display: block; font: 600 5.2rem/.85 var(--serif); color: white; }
    .date-card small { display: block; margin-top: 10px; font-size: .82rem; letter-spacing: .16em; }

    .countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; max-width: 620px; margin: 46px auto 0; }
    .countdown div { padding: 18px 4px 15px; border: 1px solid rgba(243,217,149,.3); background: rgba(255,255,255,.05); }
    .countdown strong { display: block; font: 600 clamp(1.8rem, 8vw, 3rem)/1 var(--serif); color: white; }
    .countdown span { font-size: .68rem; letter-spacing: .09em; color: var(--gold-soft); }

    .details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 670px; margin: 38px auto 0; }
    .detail { padding: 30px 18px; border: 1px solid rgba(24,89,129,.16); background: rgba(255,255,255,.62); }
    .detail svg { width: 28px; height: 28px; color: var(--red-800); }
    .detail h3 { margin: 12px 0 6px; font: 600 1.55rem var(--serif); color: var(--red-800); }
    .detail p { margin: 0; color: #4b718b; }
    .map-link {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      margin-top: 15px;
      padding: 8px 17px;
      border: 1px solid var(--red-800);
      color: var(--red-800);
      font-size: .88rem;
      font-weight: 600;
      text-decoration: none;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }
    .map-link:hover { color: white; background: var(--red-800); transform: translateY(-2px); }

    .rsvp-button, .submit-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 12px 27px;
      border: 1px solid var(--gold-soft);
      border-radius: 0;
      color: var(--red-950);
      background: var(--gold-soft);
      font-weight: 600;
      letter-spacing: .03em;
      box-shadow: 0 14px 38px rgba(6,28,48,.25);
      transition: transform .2s, background .2s;
    }
    .rsvp-button:hover, .submit-button:hover { transform: translateY(-2px); background: white; }
    .rsvp-note { margin: 16px 0 0; color: rgba(255,255,255,.72); font-size: .86rem; }
    .music-button {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px solid rgba(243,217,149,.8);
      color: var(--gold-soft);
      background: rgba(20,70,110,.92);
      box-shadow: 0 8px 28px rgba(9,31,51,.32);
      font-size: 1.25rem;
    }

    footer { padding: 40px 20px 90px; color: var(--gold-soft); background: #103653; text-align: center; }
    footer p { margin: 0; font: italic 600 2rem var(--serif); }

    dialog { width: min(92vw, 460px); border: 0; padding: 0; color: var(--ink); background: var(--ivory); box-shadow: 0 30px 90px rgba(7,28,47,.45); }
    dialog::backdrop { background: rgba(7,28,47,.78); backdrop-filter: blur(4px); }
    .dialog-inner { position: relative; padding: 42px 28px 30px; text-align: center; border: 2px solid var(--gold); outline: 7px solid var(--ivory); outline-offset: -9px; }
    .close { position: absolute; top: 12px; right: 13px; width: 38px; height: 38px; border: 0; background: transparent; color: var(--red-800); font-size: 1.7rem; }
    dialog h2 { font-size: 2.7rem; margin-bottom: 10px; }
    dialog p { margin: 0 0 22px; }
    label { display: block; margin: 0 0 16px; text-align: left; font-size: .9rem; font-weight: 600; color: #365f7b; }
    input[type="text"] { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid #a9c5d8; color: var(--ink); background: white; outline: none; }
    input[type="text"]:focus { border-color: var(--red-700); box-shadow: 0 0 0 3px rgba(74,159,208,.12); }
    .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
    .choice { position: relative; }
    .choice input { position: absolute; opacity: 0; }
    .choice span { display: block; padding: 12px 8px; border: 1px solid #a9c5d8; background: white; text-align: center; }
    .choice input:checked + span { border-color: var(--red-800); color: white; background: var(--red-800); }
    .submit-button { width: 100%; border-color: var(--red-800); color: white; background: var(--red-800); }
    .success { display: none; padding: 30px 0; }
    .success.visible { display: block; }
    .success .check { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 18px; border: 1px solid var(--gold); border-radius: 50%; color: white; background: var(--red-800); font-size: 1.8rem; }
    .toast { position: fixed; left: 50%; bottom: 82px; z-index: 30; transform: translate(-50%, 14px); width: max-content; max-width: calc(100vw - 30px); padding: 10px 16px; color: white; background: #103350; opacity: 0; pointer-events: none; transition: .25s; box-shadow: 0 8px 25px rgba(0,0,0,.25); }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
    .reveal.visible { opacity: 1; transform: none; }
    @keyframes rise { from { opacity: 0; transform: translateY(24px); } }
    @keyframes bob { 0%,100% { margin-bottom: 0; } 50% { margin-bottom: -8px; } }
    @keyframes photoCycle {
      0% { opacity: 0; transform: scale(1.06); }
      7%, 44% { opacity: 1; }
      50%, 100% { opacity: 0; transform: scale(1.14); }
    }
    @keyframes sweep {
      0%, 35% { opacity: 0; transform: translateX(-35%); }
      50% { opacity: 1; }
      70%, 100% { opacity: 0; transform: translateX(35%); }
    }
    @keyframes dust { to { background-position: 18px -80px, -26px -110px, 12px -70px, -20px -120px; } }
    @media (max-width: 520px) {
      .opening-kicker { margin-bottom: 34px; }
      .envelope-wrap { height: 214px; }
      .section { padding-block: 66px; }
      .details { grid-template-columns: 1fr; }
      .date-card .day { padding-inline: 18px; }
      .date-card strong { font-size: 4.2rem; }
      .countdown div { padding-inline: 2px; }
    }
    @media (min-width: 800px) {
      .photo-slide { object-fit: contain; }
      .hero-gallery { background: #103350; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
      .opening-screen.opening .letter-card { transform: translateY(-70px); }
      .photo-slide:first-child { opacity: 1; transform: none; }
      .photo-slide:nth-child(2), .light-sweep, .gold-dust { display: none; }
    }
  
/* Pending event data keeps the original layout without invented details. */
.map-link[aria-disabled="true"]{opacity:.55;cursor:default}.map-link[aria-disabled="true"]:hover{color:var(--red-800);background:transparent;transform:none}.choice input:focus-visible + span{outline:2px solid var(--red-700);outline-offset:3px}#hero:focus{outline:none}