:root{
    /* ===== Palette — wedding accent colors + a soft white base ===== */
    --ivory:#FBF8F5;
    --pale-blush:#F3D9D3;
    --clay-blue:#7C93A3;
    --light-grey:#E5E4E2;
    --misty-blue:#B8C4CC;
    --greige:#BFB8AC;
    --dusty-blue:#9FB1BD;
    --dusty-text:#5A86AD;
    --dusty-deep:#8AA1B0;
    --dusty-light:#AEC2CD;
    --dusty-shadow:#6E8A9A;
    --gold:#C9A96A;
    --dark-grey:#4A4A4A;

    --shadow: 0 24px 60px -24px rgba(74,74,74,0.45);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    position:relative;
    background:#fff;
    color:var(--dark-grey);
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    overflow-x:hidden;
  }
  body.locked{ overflow:hidden; height:100vh; height:100dvh; overscroll-behavior:none; }

  h1,h2,h3,.display{ font-family:'Playfair Display', serif; font-weight:500; margin:0; }
  .script{ font-family:'Petit Formal Script', cursive; font-weight:400; line-height:1; }
  .label{ font-family:'Jost', sans-serif; }

  img,video{ max-width:100%; display:block; }

  .eyebrow{
    font-family:'Jost', sans-serif;
    font-size:11px;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--clay-blue);
    font-weight:500;
  }

  .wrap{ max-width:920px; margin:0 auto; padding:0 28px; }
  section{ position:relative; padding:104px 0; }
  #site section + section{ border-top:1px solid #ECE5D8; }
  #venue{ background:#fff; border-bottom:1px solid #ECE5D8; }

  /* subtle overall paper grain */
  body::before{
    content:"";
    position:fixed; inset:0; pointer-events:none; z-index:1;
    opacity:.5; mix-blend-mode:multiply;
    background-image:
      radial-gradient(rgba(74,74,74,.035) 1px, transparent 1px);
    background-size:3px 3px;
  }

  /* ============ TOP NAVIGATION ============ */
  #site section[id], #site header[id]{ scroll-margin-top:76px; }
  .topnav{
    position:sticky; top:0; z-index:900;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:10px 22px; margin:0;
    background:rgba(255,255,255,.75);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:none; border-bottom:1px solid var(--dusty-text); border-radius:0;
    box-shadow:0 10px 24px -18px rgba(74,74,74,.35);
  }
  .topnav .brand{
    display:flex; align-items:center; line-height:0;
    text-decoration:none; white-space:nowrap;
  }
  .topnav .brand img{ height:38px; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; justify-content:flex-end; }
  .nav-links a{
    font-family:'Jost', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--dark-grey); text-decoration:none; padding:9px 12px; border-radius:999px;
    opacity:.8; transition:.25s; white-space:nowrap; flex:0 0 auto;
  }
  /* active/hover only recolor — never resize, so the row can never reflow or reorder */
  .nav-links a:hover{ opacity:1; color:var(--clay-blue); background:rgba(124,147,163,.1); }
  .nav-links a.active{ opacity:1; color:var(--clay-blue); background:rgba(124,147,163,.14); }
  .nav-links a.nav-cta{
    opacity:1; color:#fff; background:var(--dusty-text);
    padding:9px 20px; margin-left:6px;
    box-shadow:0 10px 22px -12px rgba(124,147,163,.65);
  }
  .nav-links a.nav-cta:hover{ background:var(--dark-grey); color:var(--light-grey); }
  .nav-toggle{
    display:none; width:40px; height:40px; background:none; border:1px solid var(--greige);
    border-radius:50%; cursor:pointer; flex:none;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
  }
  .nav-toggle span{ display:block; width:16px; height:1.6px; background:var(--clay-blue); transition:.3s; }
  .topnav.open .nav-toggle span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
  .topnav.open .nav-toggle span:nth-child(2){ opacity:0; }
  .topnav.open .nav-toggle span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

  /* ============ MUSIC TOGGLE ============ */
  .music-toggle{
    position:fixed; right:18px; bottom:18px; z-index:1200;
    width:42px; height:42px; border-radius:50%;
    background:#6b8ea2; border:1px solid #6b8ea2;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 10px 20px -10px rgba(74,74,74,.5), 0 2px 6px -2px rgba(74,74,74,.22);
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
  }
  .music-toggle:hover{ transform:scale(1.06); box-shadow:0 14px 26px -10px rgba(74,74,74,.55), 0 4px 10px -4px rgba(74,74,74,.25); }
  .music-toggle:active{ transform:scale(1.02); box-shadow:0 6px 12px -8px rgba(74,74,74,.45); }
  .music-toggle svg{ width:18px; height:18px; color:var(--ivory); }
  .music-toggle .icon-on{ display:none; }
  .music-toggle.playing .icon-on{ display:block; }
  .music-toggle.playing .icon-off{ display:none; }
  .music-toggle.playing{ background:#6b8ea2; }
  .music-toggle.playing svg{ color:var(--ivory); }

  /* ============ ornament / dividers ============ */
  .flourish{ display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto 40px; }
  .flourish svg{ width:120px; height:20px; flex:none; color:var(--greige); }
  .flourish .rule{ height:1px; flex:1; max-width:70px; background:linear-gradient(90deg, transparent, var(--greige), transparent); }

  .corner-orn{ position:absolute; width:76px; height:76px; opacity:.55; pointer-events:none; }
  .corner-orn.tl{ top:18px; left:18px; }
  .corner-orn.tr{ top:18px; right:18px; transform:scaleX(-1); }

  /* ============ STAGE OVERLAY (envelope + curtain intro) ============ */
  #intro{
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:999;
    width:100%; height:100vh; height:100dvh;
    overscroll-behavior:none;
    background:
      radial-gradient(circle at 18% 12%, rgba(243,217,211,.95), rgba(243,217,211,0) 55%),
      radial-gradient(circle at 88% 18%, rgba(159,177,189,.9), rgba(159,177,189,0) 56%),
      radial-gradient(circle at 50% 96%, rgba(191,184,172,.85), rgba(191,184,172,0) 60%),
      linear-gradient(155deg, #F7E9DE 0%, #EFDDD0 30%, #CBD4D8 72%, #B7C4C9 100%);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    transition: opacity .9s ease, visibility .9s ease;
  }
  #intro.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

  /* watercolor washes — soft irregular blooms, not flat gradients */
  .bloom{
    position:absolute; pointer-events:none; z-index:0;
    filter:blur(46px);
  }
  .bloom.b1{
    width:620px; height:470px; top:-110px; right:-70px;
    border-radius:58% 42% 55% 45% / 48% 60% 40% 52%;
    background:radial-gradient(circle at 38% 44%, rgba(243,217,211,.8), rgba(243,217,211,0) 68%);
  }
  .bloom.b2{
    width:560px; height:450px; bottom:-130px; left:-90px;
    border-radius:45% 55% 48% 52% / 55% 42% 58% 45%;
    background:radial-gradient(circle at 56% 50%, rgba(159,177,189,.5), rgba(159,177,189,0) 66%);
  }
  .bloom.b3{
    width:420px; height:340px; top:16%; left:4%;
    border-radius:62% 38% 50% 50% / 46% 58% 42% 54%;
    background:radial-gradient(circle at 50% 48%, rgba(184,196,204,.4), rgba(184,196,204,0) 62%);
  }
  .bloom.b4{
    width:440px; height:360px; bottom:8%; right:8%;
    border-radius:50% 50% 42% 58% / 58% 44% 56% 42%;
    background:radial-gradient(circle at 48% 52%, rgba(191,184,172,.42), rgba(191,184,172,0) 62%);
  }

  /* hand-drawn botanical sprigs — asymmetric, imperfect, loose */
  .sprig{ position:absolute; pointer-events:none; z-index:0; }
  .sprig.sp1{ top:12px; left:12px; width:150px; height:150px; opacity:.75; }
  .sprig.sp2{ bottom:8px; right:10px; width:118px; height:118px; transform:scaleX(-1); opacity:.6; }

  /* ---- envelope scene (Stage 1 + 2) — full screen, centered, responsive ---- */
  .envelope-scene{
    position:absolute; inset:0; z-index:10;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:24px 20px;
    box-sizing:border-box;
    overflow:hidden;
    text-align:center;
    background:
      radial-gradient(500px 370px at 90% 10%, rgba(159,177,189,.22), rgba(159,177,189,0) 70%),
      radial-gradient(420px 310px at 6% 90%, rgba(184,196,204,.18), rgba(184,196,204,0) 70%),
      radial-gradient(540px 390px at 50% 108%, rgba(191,184,172,.20), rgba(191,184,172,0) 70%),
      radial-gradient(circle at 8% 5%, rgba(140,157,173,.06), rgba(140,157,173,0) 32%),
      radial-gradient(circle at 92% 8%, rgba(140,157,173,.05), rgba(140,157,173,0) 32%),
      #FFFFFF;
    transition: opacity .6s ease .5s, transform .6s ease .5s;
  }
  .envelope-scene.fade-out{ opacity:0; transform:scale(.97); pointer-events:none; }
  .envelope-scene.drop{ transition: opacity .6s ease .5s; }
  .envelope-scene.drop .envlope-wrapper{
    transition: margin-top .8s cubic-bezier(.22,1,.36,1) .5s;
  }
  .envelope-scene.drop.fade-out{ transform:scale(.97); }

  /* envelope wrapper — tall enough for the card to rise clear of the pocket */
  .envlope-wrapper{
    position:relative;
    z-index:1;
    width:706px; height:814px;
    padding-top:180px;
    transform-origin:center center;
    perspective:1600px;
  }
  .env-hint{
    position:absolute; left:0; right:0; top:652px; z-index:1;
    font-family:'Jost',sans-serif; font-size:23px; letter-spacing:.28em; text-transform:uppercase;
    color:#6b8ea2; text-align:center;
  }
  .tap-reveal{
    position:absolute; left:50%; top:0; z-index:20;
    transform:translateX(-50%);
    font-family:'Jost',sans-serif; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--dusty-blue); background:rgba(255,255,255,.85);
    border:1px solid var(--dusty-blue); border-radius:999px; padding:8px 20px;
    cursor:pointer;
    box-shadow:none;
    transition:top .8s cubic-bezier(.22,1,.36,1) .5s, background .3s ease, color .3s ease;
  }
  .tap-reveal::after{ display:none; }
  .tap-reveal:hover{
    background:var(--dusty-blue); color:#fff;
    box-shadow:none;
  }
  .tap-reveal:active{ box-shadow:none; }
  .tap-reveal[hidden]{ display:none; }

  /* ---- static photo envelope (no open animation) ---- */
  .envlope-wrapper.env-static-wrapper{
    position:relative;
    width:min(94vw, 800px, calc((100vh - 110px) * 1.3), calc((100dvh - 110px) * 1.3));
    height:auto;
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);
    margin-inline:auto;
    margin-block:0;
    padding-inline:0;
    box-sizing:border-box;
    align-self:center;
    padding-top:0;
    perspective:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transform:none;
  }
  #envelope.env-static{
    position:relative;
    width:100%; height:auto;
    margin-inline:auto;
    align-self:center;
    background:none;
    box-shadow:none;
    cursor:pointer;
    display:flex; justify-content:center; align-items:center;
    isolation:isolate;
  }
  #envelope.env-static::after{ display:none; }
  /* white backing removed — envelope photo shows directly on the scene */
  #envelope.env-static::before{ display:none; }
  #envelope.env-static .env-photo{
    position:relative; z-index:1;
    width:100%; height:auto; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px);
    object-fit:contain;
    margin-inline:auto;
    display:block;
    user-select:none; -webkit-user-drag:none;
    filter:drop-shadow(0 18px 34px rgba(140,157,173,.30));
    transition:transform .45s cubic-bezier(.22,1,.36,1), filter .45s ease;
  }
  #envelope.env-static:focus-visible{ outline:none; }
  .env-static-wrapper .env-hint{
    position:absolute; left:0; right:0; top:76%; z-index:2;
    width:max-content; max-width:92%;
    margin:0 auto;
    padding:0;
    background:none;
    border-radius:0;
    box-shadow:none;
    font-size:clamp(12px, 1.2vw + 8px, 14px);
    font-weight:400;
    letter-spacing:.2em;
    line-height:1.3;
    color:#6b8ea2;
    text-wrap:balance;
    opacity:1;
    pointer-events:none;
    text-shadow:none;
    background:none;
  }
  @media (max-width:760px){
    .envelope-scene{ padding:14px 10px; }
    .envlope-wrapper.env-static-wrapper{
      width:min(98vw, 640px, calc((100dvh - 90px) * 1.3));
      max-height:calc(100dvh - 20px);
    }
    #envelope.env-static .env-photo{
      max-height:calc(100dvh - 120px);
    }
    .env-static-wrapper .env-hint{
      letter-spacing:.1em;
      font-size:clamp(10px, 2.2vw + 4px, 12px);
      max-width:88%;
    }
  }
  @media (max-width:480px){
    .envelope-scene{ padding:10px 8px; }
    .envlope-wrapper.env-static-wrapper{
      width:min(98vw, calc((100dvh - 80px) * 1.3));
      max-height:calc(100dvh - 16px);
    }
    #envelope.env-static .env-photo{
      max-height:calc(100dvh - 108px);
    }
    .env-static-wrapper .env-hint{
      top:76%;
      letter-spacing:.1em;
      font-size:clamp(9px, 2.4vw + 4px, 11px);
      padding:0;
      max-width:86%;
    }
  }

  #envelope{
    position:relative;
    z-index:1;
    width:706px; height:454px;
    background:#5A86AD;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.45),
      inset 0 -2px 6px rgba(74,74,74,.12);
    cursor:pointer;
  }
  /* soft light falloff shaped exactly like the pocket — edges shaded, center lit */
  #envelope::after{
    content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
    clip-path:polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
    background:
      linear-gradient(90deg, rgba(74,74,74,.14), rgba(74,74,74,0) 12%, rgba(74,74,74,0) 88%, rgba(74,74,74,.14)),
      linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 80%, rgba(110,138,154,.16)),
      repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(74,74,74,.025) 0 1px, transparent 1px 3px);
  }

  .front{ position:absolute; width:0; height:0; z-index:3; }

  /* flap — top triangle, folds back behind everything when open */
  .flap{
    border-left:353px solid transparent;
    border-right:353px solid transparent;
    border-bottom:212px solid transparent;
    border-top:303px solid #5A86AD;
    transform-origin:top center;
    z-index:5;
    filter:drop-shadow(0 4px 5px rgba(74,74,74,.2));
  }
  .open .flap{
    transform:rotateX(180deg);
    transition:transform .55s cubic-bezier(.4,.1,.2,1), z-index .6s;
    z-index:1;
    border-top-color:#7AA5C6;
  }
  .close .flap{
    transform:rotateX(0deg);
    transition:transform .4s .6s ease, z-index 1s;
    z-index:5;
  }

  /* pocket — straight sharp sides, slightly deeper bottom tone */
  .pocket{
    border-left:353px solid #5A86AD;
    border-right:353px solid #5A86AD;
    border-bottom:227px solid #5A86AD;
    border-top:227px solid transparent;
    z-index:3;
  }

  /* golden wax seal holding the flap shut (rendered artwork) */
  .seal{
    position:absolute; left:50%; top:213px; transform:translateX(-50%);
    width:150px; height:150px; z-index:6;
    background:none;
    display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 10px 14px rgba(74,74,74,.4));
    transition:opacity .4s ease, transform .4s ease;
  }
  .seal img{ width:100%; height:auto; display:block; position:relative; }
  /* hand-drawn floral sprigs on the envelope exterior */
  .sprig-f{
    position:absolute; z-index:7; width:172px; pointer-events:none;
    filter:drop-shadow(0 5px 7px rgba(74,74,74,.3));
  }
  .sprig-f svg{ width:100%; height:auto; display:block; }
  .sprig-f.sfl{ left:-52px; top:-48px; }
  .sprig-f.sfr{ right:-52px; top:-48px; transform:scaleX(-1); }
  .open .seal{ opacity:0; transform:translateX(-50%) scale(.5); pointer-events:none; }

  /* letter — misty blue invite card inside the envelope */
  .letter{
    position:absolute; left:36px; top:23px;
    width:634px; height:407px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%),
      repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, var(--misty-blue) 0%, #ACBAC2 100%);
    border:1px solid rgba(138,161,176,.6);
    border-radius:10px;
    box-shadow:
      0 6px 20px rgba(74,74,74,.16),
      inset 0 0 0 6px var(--misty-blue),
      inset 0 0 0 7px rgba(176,134,52,.55);
    overflow:hidden;
    z-index:1;
    will-change:transform;
    backface-visibility:hidden;
  }
  .close .letter{
    transform:translateY(0);
    transition:transform .4s ease, z-index 1s;
    z-index:1;
  }
  .open .letter{
    transform:translateY(-360px);
    transform-origin:center;
    transition:transform .8s cubic-bezier(.22,1,.36,1) .5s, z-index .6s;
    z-index:2;
    box-shadow:
      0 18px 40px rgba(74,74,74,.25),
      inset 0 0 0 6px var(--misty-blue),
      inset 0 0 0 7px rgba(176,134,52,.55);
  }

  .letter-inner{
    position:absolute; inset:0; padding:40px 47px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; user-select:none;
  }
  .letter-inner .script{ font-size:47px; color:var(--dark-grey); text-shadow:0 1px 0 rgba(255,255,255,.6); }
  .letter-inner .amp{ font-size:.55em; font-family:'Playfair Display', serif; font-style:italic; color:var(--dark-grey); padding:0 7px; }
  .letter-inner .tag{
    font-family:'Jost',sans-serif; font-size:14px; font-weight:500; letter-spacing:6.3px; text-transform:uppercase;
    color:var(--dark-grey); margin-top:14px;
  }
  .letter-inner .divider{
    width:144px; height:1px; margin:18px 0 14px;
    background:linear-gradient(90deg, transparent, var(--dark-grey), transparent);
  }
  .letter-inner .date{
    font-family:'Cormorant Garamond', serif; font-size:50px; font-weight:700; letter-spacing:1px; color:var(--dark-grey);
    text-shadow:0 1px 0 rgba(255,255,255,.6);
  }
  .letter-inner .venue{
    font-family:'Jost',sans-serif; font-size:14px; letter-spacing:4.5px; text-transform:uppercase;
    color:var(--dark-grey); opacity:.75; margin-top:14px;
  }
  .letter-inner .mini-countdown{
    font-family:'Jost',sans-serif; font-size:20px; letter-spacing:.12em; color:var(--dark-grey);
    margin-top:18px; opacity:0; transition:opacity .5s ease;
  }
  .letter-inner .mini-countdown.show{ opacity:1; }

  /* monogram revealed once the card is fully scratched */
  .mono-reveal{
    position:absolute; inset:0; background:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    z-index:2; pointer-events:none;
    padding:16px; box-sizing:border-box; overflow:hidden;
    transition: opacity .9s ease;
  }
  .mono-reveal .mono-img{
    width:88%; max-width:530px; max-height:100%; object-fit:contain;
    transform:scale(.9);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
  }
  #envelope.scratch-done .mono-reveal .mono-img{ transform:scale(1); }
  #envelope.scratch-done .letter-inner{ opacity:0; }
  .card-out .letter-inner{ opacity:0; transition:opacity .4s ease; }

  /* scratch layer over the letter */
  .sc-wrap{
    position:absolute; inset:0; z-index:6;
    border-radius:10px; overflow:hidden;
    visibility:hidden;
  }
  .card-out .sc-wrap{ visibility:visible; }
  .sc-wrap canvas{
    position:absolute; inset:0; width:100% !important; height:100% !important;
    cursor:crosshair; touch-action:none;
    transition:opacity .8s ease;
  }
  .sc-wrap.done canvas, .sc-wrap canvas.done{ opacity:0; pointer-events:none !important; }

  /* responsive scaling handled by JS so the envelope fits + centers on any device */

/* ---- confetti ---- */
.confetti-container{ position:fixed; inset:0; pointer-events:none; z-index:1300; overflow:hidden; }
.confetti-piece{
  position:absolute; top:-46px;
  animation-name:confetti-fall; animation-timing-function:linear; animation-fill-mode:forwards;
  animation-duration:var(--dur,3s); animation-delay:var(--delay,0s);
}
.confetti-shape{
  display:block; opacity:.95;
  animation-name:confetti-sway; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  animation-duration:var(--dur2,2s);
}
.confetti-shape.rect{ width:9px; height:15px; border-radius:1px; }
.confetti-shape.circle{ width:10px; height:10px; border-radius:50%; }
.confetti-shape.blossom, .confetti-shape.tulip, .confetti-shape.orchid, .confetti-shape.lily{ background:none !important; }
.confetti-shape.blossom svg, .confetti-shape.tulip svg, .confetti-shape.orchid svg, .confetti-shape.lily svg{ width:16px; height:16px; display:block; overflow:visible; }
.confetti-shape.heart{ background:none !important; width:auto; height:auto; transform:none; }
.confetti-shape.heart::before, .confetti-shape.heart::after{ display:none; }
.confetti-shape.heart svg{ width:8px; height:8px; display:block; overflow:visible; }
.confetti-shape.heart{
  width:10px; height:10px; transform:rotate(45deg);
}
.confetti-shape.heart::before, .confetti-shape.heart::after{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:inherit;
}
.confetti-shape.heart::before{ top:-5px; left:0; }
  .confetti-shape.heart::after{ left:-5px; top:0; }
  .confetti-shape.petal{
    width:9px; height:15px; border-radius:2px 10px 2px 10px;
  }
@keyframes confetti-fall{
  0%{ transform:translateY(0); opacity:0; }
  6%{ opacity:1; }
  100%{ transform:translateY(115vh); opacity:.2; }
}
@keyframes confetti-sway{
  0%{ transform:translateX(0) rotate(0deg); }
  50%{ transform:translateX(var(--drift,20px)) rotate(var(--rot,180deg)); }
  100%{ transform:translateX(0) rotate(0deg); }
}
.flower-fall .confetti-shape{ background:none !important; }

  #site{ opacity:0; transition:opacity 1s ease; position:relative; z-index:1; }
  #site.show{ opacity:1; }

  /* ---- split-photo reveal: the couple's photo that slowly parts ---- */
  #curtains{
    position:fixed; inset:0; z-index:1400; pointer-events:none;
    visibility:visible; opacity:0;
    transition:opacity 1.2s ease;
  }
  #curtains.reveal{ opacity:1; }
  .door-panel{
    position:absolute; top:0; bottom:0; width:50%; z-index:2;
    overflow:hidden;
    background:linear-gradient(180deg, #FCFDFE 0%, #E9EFF5 100%);
    transition: transform 4.5s ease .2s;
  }
  .door-panel.left{ left:0; }
  .door-panel.right{ right:0; }
  /* the photo itself never moves — the covers part over it */
  .c-photo{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%;
    object-fit:cover; object-position:center center;
  }

  /* slim light keyline framing each half */
  .door-panel::before{
    content:""; position:absolute; inset:14px; z-index:2;
    border:1px solid rgba(255,255,255,.6);
    box-shadow:inset 0 0 24px rgba(0,0,0,.18);
    pointer-events:none;
  }
  .door-panel::after{ content:none; }

  #curtains.open .door-panel.left{ transform:translateX(-102%); }
  #curtains.open .door-panel.right{ transform:translateX(102%); }

  /* ============ COUNTDOWN STRIP (replaces hero photo) ============ */
  .countdown-slim{ text-align:center; padding:72px 20px 8px; background:#fff; }
  .countdown-slim .countdown{ margin-top:20px; }

  /* ============ HERO ============ */
  .hero{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; background:#fff; padding:20px 16px;
    position:relative; overflow:hidden;
  }
  /* invitation card — real rectangle shape, mainpage artwork */
  .hero-stage.hero-card{
    position:relative; line-height:0;
    width:min(88vw, 540px, calc((100vh - 100px) * 0.7145)); padding:0; overflow:hidden;
    background:#fff;
    border:1px solid var(--greige);
    border-radius:0;
    box-shadow:0 6px 24px rgba(0,0,0,.08);
  }
  .hero-tag{
    margin:18px 0 0; padding:0; background:transparent; line-height:1.6;
    font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500; font-size:18px; letter-spacing:.04em; text-transform:none;
    color:#8C9DAD; text-align:center; opacity:1;
  }
  .hero-card .eyebrow{ margin:0 0 14px; }
  .hero-names{ font-size:clamp(38px,7vw,56px); color:var(--clay-blue); }
  .hero-names .amp{ font-family:'Playfair Display', serif; font-style:italic; font-size:.6em; color:var(--greige); padding:0 6px; }
  .hero-div{ width:120px; height:1px; margin:20px auto; background:linear-gradient(90deg, transparent, var(--gold, #C9A96A), transparent); }
  .hero-req{ font-style:italic; font-size:17px; color:var(--dark-grey); opacity:.85; margin:0; }
  .hero-date{ margin:20px 0 0; font-family:'Jost', sans-serif; font-size:12.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--dark-grey); }
  .hero-venue{ margin:16px 0 0; font-family:'Petit Formal Script', cursive; font-size:27px; color:var(--clay-blue); }
  .hero-venue span{ display:block; margin-top:8px; font-family:'Jost', sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--dark-grey); opacity:.7; }
  .hero-stage{ position:relative; line-height:0; z-index:1; }
  .hero-stage .hero-img{
    display:block; width:100%; height:auto;
    border-radius:0;
    border:none;
    box-shadow:none;
  }
  .hero .countdown{
    position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
    z-index:2; margin-top:0; line-height:1.4;
    flex-wrap:nowrap; white-space:nowrap; gap:22px;
    text-shadow:0 1px 8px rgba(255,255,255,.6);
  }
  .hero .countdown .unit{ display:flex; flex-direction:column; align-items:center; }
  .hero .countdown .num{ line-height:1.2; margin-bottom:8px; }
  .hero .countdown .lbl{ margin-top:0; line-height:1.2; }
  .hero .arch{ display:none; }
  .hero-inner{ position:relative; z-index:2; }
  .hero .mono-big{ font-family:'Petit Formal Script',cursive; font-size:clamp(50px,9vw,74px); color:var(--clay-blue); margin-bottom:0; }
  .hero .amp{ font-family:'Playfair Display', serif; font-style:italic; font-size:clamp(24px,4vw,32px); color:var(--greige); margin:8px 0; }
  .hero h1{
    font-size:clamp(44px,9vw,76px); letter-spacing:.01em; color:var(--dark-grey); line-height:1.04;
  }
  .hero h1 em{ font-style:italic; font-weight:400; color:var(--clay-blue); }
  .hero .tagline{ margin-top:20px; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:19px; color:var(--clay-blue); letter-spacing:.02em; }
  .hero .date-line{ margin-top:32px; font-family:'Jost', sans-serif; font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:var(--dark-grey); }
  .hero .venue-line{ margin-top:8px; font-size:15px; color:var(--dark-grey); opacity:.75; }

  .countdown{ display:flex; gap:24px; margin-top:46px; flex-wrap:wrap; justify-content:center; }
  .countdown .unit{ text-align:center; min-width:64px; }
  .countdown .num{ font-family:'Playfair Display', serif; font-size:36px; color:#8C9DAD; }
  .countdown .lbl{ font-family:'Jost', sans-serif; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#8C9DAD; opacity:.9; margin-top:4px; }
  .hero .countdown .num{ color:#8C9DAD; }
  .hero .countdown .lbl{ color:#8C9DAD; opacity:.9; }

  /* ============ SECTION HEADS ============ */
  .head{ text-align:center; margin-bottom:56px; }
  .head h2{ font-size:clamp(32px,5vw,46px); color:var(--dark-grey); }
  #gallery .head h2, #story .head h2, #schedule .head h2, #venue .head h2, #attire .head h2, #faq .head h2, #rsvp .head h2, #gift .head h2{ color:var(--dusty-text); }
  .head p.sub{ font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--clay-blue); margin-top:8px; font-size:17px; }

  /* ============ LOVE STORY ============ */
  #story{ background:#fff; }
  #story .frame{ background:#fff; }
  .story-list{ display:flex; flex-direction:column; gap:68px; }
  .story-item{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; }
  .story-item:nth-child(even) .story-media{ order:2; }

  .frame{
    position:relative; background:var(--ivory);
    border:1px solid var(--greige);
    display:flex; align-items:center; justify-content:center;
    padding:8px;
  }
  .frame::before{ content:""; position:absolute; inset:6px; border:1px solid var(--greige); opacity:.5; }
  .frame span{
    font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--dark-grey); opacity:.45; text-align:center;
  }

  /* photo carousel — prev/next through a chapter's photos */
  /* .story-media wraps the frame + the hint line below it */
  .story-media{ display:block; }
  .carousel{
    aspect-ratio:4/5; position:relative; overflow:hidden;
  }
  .car-track{ position:relative; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
  .car-track:active{ cursor:grabbing; }
  .car-slide img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .car-slide{
    position:absolute; inset:0;
    opacity:0; transition:opacity .5s ease;
  }
  .car-slide.active{ opacity:1; }
  .car-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:34px; height:34px; border-radius:50%;
    background:transparent; border:1px solid #fff; color:#fff;
    font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
    cursor:pointer; z-index:2; box-shadow:0 4px 10px -6px rgba(74,74,74,.4);
    transition:background .2s ease;
  }
  /* resting, hover and press all keep the circle transparent — no fill, no scale */
  .car-prev{ left:10px; }
  .car-next{ right:10px; }
  .car-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2; }
  .car-hint{
    position:static; display:block; margin:12px 0 0; padding:0;
    font-family:'Jost', sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:#5A86AD; opacity:1; text-align:center; pointer-events:none;
  }
  .car-dot{ width:6px; height:6px; border-radius:50%; background:#fff; opacity:.55; cursor:pointer; transition:.3s; }
  .car-dot.active{ opacity:1; background:#fff; width:16px; border-radius:3px; }

  .story-text .eyebrow{ display:block; margin-bottom:10px; }
  .story-text h3{ font-size:29px; margin-bottom:10px; color:var(--dusty-text); }
  .story-text p{ font-size:16px; line-height:1.75; color:var(--dark-grey); opacity:.85; }
  /* long story text is clamped — the Read More button reveals the rest */
  .story-body{ position:relative; max-height:132px; overflow:hidden; transition:max-height .4s ease; }
  .story-body::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:54px; pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 78%);
  }
  .story-item.open .story-body{ max-height:2000px; }
  .story-item.open .story-body::after{ opacity:0; }
  .story-more{
    display:none; margin-top:14px; padding:0;
    font-family:'Jost', sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--clay-blue); background:none; border:0; border-bottom:1px solid currentColor;
    cursor:pointer;
  }
  .story-item.clamped .story-more{ display:inline-block; }

  /* ============ PRENUP GALLERY (5 frames) ============ */
  #gallery{ background:#fff; }
  .gallery-mosaic{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:160px;
    gap:10px;
    grid-template-areas:
      "a a b c"
      "a a d e";
  }
  .gallery-mosaic .frame{ padding:6px; overflow:hidden; background:#fff; }
  .gallery-mosaic .frame img.ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .gallery-mosaic .frame span{
    position:relative; z-index:1;
    background:rgba(74,74,74,.55); color:var(--light-grey);
    opacity:1; padding:4px 12px; border-radius:20px; font-size:9px; letter-spacing:.16em;
  }
  .g-a{ grid-area:a; }
  .g-b{ grid-area:b; }
  .g-c{ grid-area:c; }
  .g-d{ grid-area:d; }
  .g-e{ grid-area:e; }

  /* ============ VERSE ============ */
  .verse-section{ background:#fff; padding:112px 0; }
  .verse-wrap{ max-width:640px; margin:0 auto; text-align:center; padding:0 28px; }
  .verse-wrap .mark{ font-family:'Playfair Display', serif; font-size:60px; color:var(--clay-blue); line-height:0; display:block; margin-bottom:14px; }
  .verse-bible{ display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
  .verse-bible img{ width:clamp(92px, 12vw, 132px); height:auto; display:block; margin:0 auto; }
  .verse-wrap blockquote{ margin:0; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(16px,2.6vw,20px); line-height:1.7; color:var(--dark-grey); }
  .verse-wrap cite{ display:block; margin-top:22px; font-style:normal; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--dusty-deep); }

  /* ============ SCHEDULE ============ */
  .schedule-section{ background:#fff; }
  .schedule-section .eyebrow{ color:var(--dusty-text); }
  .schedule-section .head h2{ color:var(--dusty-text); }
  .schedule-section .head p.sub{ color:var(--clay-blue); }
  .schedule-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
  .schedule-col{
    background:#fff; border:1px solid rgba(90,134,173,.45);
    border-radius:999px 999px 6px 6px / 150px 150px 6px 6px;
    padding:64px 26px 52px; text-align:center;
    box-shadow:0 10px 26px -18px rgba(74,74,74,.35);
  }
  .schedule-col h3{ font-size:22px; margin-bottom:22px; text-align:center; padding-left:0; color:var(--dusty-text); font-family:'Playfair Display', serif; }
  .timeline{ position:relative; padding:10px 0 0; }
  .timeline::before{
    content:""; position:absolute; left:31px; top:10px; bottom:12px; width:2px;
    background:#DDE3E8;
  }
  .t-item{ position:relative; padding:0 0 24px 90px; text-align:left; }
  .t-item:last-child{ padding-bottom:4px; }
  .t-ico{
    position:absolute; left:0; top:-6px; width:64px; height:64px; border-radius:50%;
    background:#fff; border:0.5px solid var(--clay-blue); color:var(--clay-blue);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px -8px rgba(74,74,74,.4);
  }
  .t-ico svg{ width:38px; height:38px; display:block; }
  .t-body{ padding-top:6px; }
  .t-body .time{ margin-bottom:5px; }
  .t-body .label{ font-size:20px; }
  .t-item .time{ font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--clay-blue); font-weight:500; }
  .t-item .label{ font-family:'Cormorant Garamond', serif; font-size:19px; margin-top:3px; color:var(--dark-grey); }

  /* ============ VENUE / MAP GUIDE ============ */
  .venue-info{ text-align:center; margin-bottom:56px; }
  .venue-info h3{ font-size:26px; color:var(--dark-grey); }
  .venue-info p{ color:var(--dark-grey); opacity:.75; font-size:15px; margin-top:8px; }
  .btn{
    display:inline-block; margin-top:18px; padding:13px 32px;
    border:1px solid var(--clay-blue); color:var(--clay-blue);
    text-decoration:none; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
    box-shadow:0 10px 22px -12px rgba(124,147,163,.55), 0 2px 6px -2px rgba(74,74,74,.15);
    transition:.3s;
  }
  .btn:hover{
    background:var(--clay-blue); color:var(--light-grey);
    box-shadow:0 16px 30px -12px rgba(124,147,163,.65), 0 4px 10px -4px rgba(74,74,74,.22);
    transform:translateY(-1px);
  }
  .btn:active{ transform:translateY(0); box-shadow:0 8px 16px -10px rgba(124,147,163,.5); }

  .map-card{
    position:relative;
    background:none;
    border:none; box-shadow:none;
    padding:8px 0 0;
  }
  .compass{ position:absolute; top:20px; right:22px; width:44px; height:44px; opacity:.5; color:var(--clay-blue); }
  .map-eyebrow{ text-align:center; margin-bottom:6px; }
  #venue .head .eyebrow{ color:var(--dusty-text); }
  .map-title{ text-align:center; font-family:'Playfair Display', serif; font-style:normal; font-weight:500; font-size:clamp(28px,4.5vw,38px); letter-spacing:.04em; margin:0 0 10px; color:var(--dusty-text); }
  .map-sub{
    text-align:center; color:var(--dark-grey); margin:0 0 16px; line-height:1.45;
  }
  .map-sub span{ display:block; }
  .map-sub .v-row{ display:inline-flex; align-items:center; margin:6px 11px 0; font-family:'Cormorant Garamond', serif; font-size:17px; }
  .map-sub .v-row em{
    font-style:normal; font-family:'Jost', sans-serif; font-size:10px; letter-spacing:.26em;
    text-transform:uppercase; color:#000; margin-right:10px;
  }
  .map-sub .v-row .v-hall{
    font-family:'Jost', sans-serif; font-weight:500; font-size:13px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dusty-text);
    background:rgba(90,134,173,.1); border:1px solid rgba(90,134,173,.35);
    border-radius:999px; padding:3px 12px; margin-left:4px; white-space:nowrap;
    cursor:pointer; transition:.25s;
  }
  .map-sub .v-row .v-hall:hover{ background:var(--dusty-text); color:#fff; }
  .map-sub .v-row .v-hall.active{ background:var(--dusty-text); color:#fff; }
  .map-note{ text-align:center; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--dark-grey); opacity:.7; margin-bottom:30px; }

  /* the frame lives on the stage so the photo can be zoomed inside it without
     scaling up the border, radius or shadow */
  .map-stage{
    position:relative; width:100%; max-width:720px; margin:0 auto; aspect-ratio:1/1;
    overflow:hidden; border:1px solid var(--greige); border-radius:12px;
    box-shadow:0 4px 14px -6px rgba(74,74,74,.35);
  }
  .map-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .map-frame.leaflet-container{ background:#e9edea; font-family:'Jost', sans-serif; z-index:0; }
  .map-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1001; }
  .map-photo[hidden], .map-toggle-row[hidden]{ display:none; }
  .map-toggle-row{ text-align:center; margin:12px 0 0; }
  .map-toggle{
    font-family:'Jost', sans-serif; font-weight:500; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--dusty-text);
    background:rgba(90,134,173,.1); border:1px solid rgba(90,134,173,.35);
    border-radius:999px; padding:4px 14px; cursor:pointer; transition:.25s;
  }
  .map-toggle:hover{ background:var(--dusty-text); color:#fff; }

  /* Leaflet venue map — Google-style popup cards + dusty-blue pins */
  .wed-pin-wrap{ background:none; border:none; }
  .wed-pin{
    display:block; width:26px; height:26px; border-radius:50% 50% 50% 4px;
    transform:rotate(-45deg); background:var(--dusty-text);
    border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35);
    position:relative;
  }
  .wed-pin::after{
    content:""; position:absolute; top:50%; left:50%; width:8px; height:8px;
    border-radius:50%; background:#fff; transform:translate(-50%,-50%);
  }
  .map-frame .leaflet-popup-content-wrapper{
    border-radius:10px; box-shadow:0 6px 20px -6px rgba(74,74,74,.45);
    padding:2px;
  }
  .map-frame .leaflet-popup-content{ margin:12px 14px; line-height:1.4; }
  .map-frame .leaflet-popup-tip{ box-shadow:0 6px 20px -6px rgba(74,74,74,.45); }
  .wed-pop{ text-align:center; }
  .wed-pop .wed-eyebrow{
    font-family:'Jost', sans-serif; font-size:9px; letter-spacing:.24em;
    text-transform:uppercase; color:var(--dusty-text); margin-bottom:2px;
  }
  .wed-pop .wed-name{
    font-family:'Playfair Display', serif; font-size:17px; color:var(--clay-blue);
  }
  .wed-pop .wed-sub{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13.5px;
    color:var(--dark-grey); opacity:.85; margin-top:2px;
  }
  .map-frame .leaflet-control-attribution{ font-size:9px; background:rgba(255,255,255,.75); }
  .map-detail{ margin-top:32px; border-top:1px solid var(--greige); padding-top:22px; text-align:center; min-height:74px; }
  .map-detail .d-name{ font-family:'Playfair Display', serif; font-size:22px; color:var(--clay-blue); }
  .map-detail .d-desc{ font-size:15px; color:var(--dark-grey); opacity:.8; margin-top:6px; max-width:420px; margin-left:auto; margin-right:auto; }
  .map-detail--slim{ min-height:0; }
  .map-detail--slim .d-desc{ margin-top:0; }

  /* ============ PALETTE / DRESS CODE ============ */
  #attire{ background:#fff; }
  /* ============ FLORAL CORNER SPRAYS ============ */
  /* Assets are a1.png / a2.png with the white background flood-filled away and
     the drawing tight-cropped (see tools/cut-attire-corners.mjs), so the line
     art keeps its own fills and stays legible on the white sections.
     Pinned to each section's outer corners and behind the content, so they
     decorate the border only and never sit under text or images. */
  .corner-flower{
    position:absolute; top:16px; z-index:0;
    width:clamp(110px, 12vw, 200px); height:auto;
    pointer-events:none; user-select:none; -webkit-user-drag:none;
  }
  .corner-flower img{ display:block; width:100%; height:auto; }
  .corner-flower.left{ left:0; }
  .corner-flower.right{ right:0; }
  /* lift each section's content wrapper above the sprays */
  #story > .wrap,
  #schedule > .wrap,
  #attire > .wrap{ position:relative; z-index:1; }
  @media (max-width:760px){
    .corner-flower{ width:clamp(80px, 18vw, 130px); top:12px; }
  }
  /* two 1200x1800 guides: shown whole, side by side on wide screens, stacked on narrow */
  .attire-art{
    display:flex; flex-wrap:wrap; gap:28px; justify-content:center; align-items:flex-start;
    margin:0 0 56px;
  }
  .attire-art figure{ margin:0; flex:1 1 320px; max-width:440px; }
  .attire-art img{
    display:block; width:100%; height:auto; margin:0 auto;
    aspect-ratio:1200 / 1800;      /* reserve height so the page height is stable */
    border:1px solid var(--greige); box-shadow:0 4px 14px -6px rgba(74,74,74,.35);
  }

  .unplugged{ margin-top:56px; text-align:center; }
  .hashtag{
    display:inline-block; margin-top:0; padding:0;
    font-family:'Playfair Display', serif; font-style:italic;
    font-size:clamp(20px,3.4vw,30px); line-height:1.3; color:var(--clay-blue);
  }

  /* ============ FAQ ============ */
  #faq{ background:#fff; }
  .faq-list{ max-width:640px; margin:0 auto; text-align:left; }
  .faq-list details{ border-top:1px solid #ECE5D8; padding:18px 4px; }
  .faq-list details:last-child{ border-bottom:1px solid #ECE5D8; }
  .faq-list summary{
    font-family:'Playfair Display', serif; font-size:17px; color:var(--dark-grey);
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .faq-list summary::-webkit-details-marker{ display:none; }
  .faq-list summary::after{ content:"+"; font-family:'Jost', sans-serif; font-size:20px; color:var(--clay-blue); flex:none; }
  .faq-list details[open] summary::after{ content:"–"; }
  .faq-list details p{ margin:12px 0 4px; font-family:'Cormorant Garamond', serif; font-size:16.5px; line-height:1.75; color:var(--dark-grey); opacity:.85; }
  .faq-qr{ margin:20px 0 4px; text-align:center; }
  .faq-qr img{
    width:100%; max-width:560px; height:auto; display:block; margin:0 auto;
    aspect-ratio:1500 / 1050;      /* matches the real 1500x1050 file — the old 1200/1800
                                       reserve stretched the landscape QR into a tall box */
    object-fit:contain;
    background:#fff; border:1px solid #ECE5D8; border-radius:4px; padding:14px;
  }

  /* ============ GIFT GUIDE ============ */
  #gift{ background:#fff; }
  /* pull the heading close to the gift design, and lift the whole section so the
     card sits in the upper part of the viewport instead of being pushed down */
  #gift{ padding-top:48px; }
  #gift .head{ margin-bottom:10px; }
  #gift .head p.sub{ margin-top:2px; }
  .gift-card{
    position:relative;
    background:none; border:0; box-shadow:none;
    padding:0; max-width:720px; margin:0 auto; text-align:center;
  }
  .gift-note{
    font-family:Arial, Helvetica, sans-serif; font-size:16.5px; line-height:1.75;
    color:var(--dark-grey); opacity:.85; margin:0 auto 6px; max-width:540px;
  }
  .gift-note-sub{ margin-bottom:4px; }
  .gift-qr{ margin:0; }
  .gift-qr img{
    width:100%; max-width:100%; height:auto; display:block; margin:0 auto;
    aspect-ratio:964 / 1233;       /* matches the trimmed g1.png — reserve height up
                                       front so the layout never shifts on lazy load */
  }
  .gift-fine{
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:16px; color:var(--dark-grey); opacity:.7; margin:0;
  }

  /* ============ DECORATIVE DIVIDER ============ */
  /* only a flourish band, so trim the section's padding */
  .gift-section{ text-align:center; padding:18px 0; background:#fff; }
  .gift-section .flourish{ margin:0; }

  /* ============ RSVP ============ */
  .rsvp-card{
    position:relative;
    background:#FDFCF9;
    border:1px solid var(--clay-blue);
    box-shadow:var(--shadow);
    padding:54px 34px 50px; max-width:560px; margin:0 auto;
  }
  .rsvp-card::before{
    content:""; position:absolute; inset:8px; pointer-events:none;
    border:1px solid var(--gold, #C9A96A); opacity:.75;
  }
  .rsvp-card::after{
    content:""; position:absolute; inset:12px; pointer-events:none;
    border:1px solid var(--greige); opacity:.5;
  }
  #rsvp{ background:#fff; }
  .rsvp-deadline{ text-align:center; font-family:'Jost',sans-serif; font-size:13px; letter-spacing:.08em; color:var(--dark-grey); opacity:.85; margin-bottom:32px; }
  .rsvp-deadline strong{ color:var(--clay-blue); }
  .field{ margin-bottom:20px; }
  .field label{ display:block; font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dark-grey); opacity:.75; margin-bottom:7px; }
  .field input, .field select, .field textarea{
    width:100%; border:none; border-bottom:1px solid var(--greige); background:transparent;
    padding:9px 2px; font-family:'Cormorant Garamond', serif; font-size:16px; color:var(--dark-grey);
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--clay-blue); }
  .field textarea{ resize:vertical; min-height:70px; }
  .radio-row{ display:flex; gap:22px; }
  .radio-row label{ display:flex; align-items:center; gap:8px; font-size:15px; color:var(--dark-grey); text-transform:none; letter-spacing:0; opacity:1; }
  .radio-row input{ width:auto; accent-color:var(--clay-blue); }
  .submit-btn{
    width:100%; margin-top:10px; padding:14px; background:var(--dusty-text); color:var(--light-grey);
    border:none; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; cursor:pointer; transition:.3s;
    box-shadow:0 12px 24px -12px rgba(90,134,173,.65), 0 2px 6px -2px rgba(74,74,74,.2);
  }
  .submit-btn:hover{ background:var(--dark-grey); box-shadow:0 18px 32px -12px rgba(74,74,74,.6), 0 4px 10px -4px rgba(74,74,74,.25); transform:translateY(-1px); }
  .submit-btn:active{ transform:translateY(0); box-shadow:0 8px 16px -10px rgba(74,74,74,.45); }
  .rsvp-alt{ text-align:center; margin-top:26px; font-size:14px; color:var(--dark-grey); opacity:.8; }
  .rsvp-alt a{ color:var(--clay-blue); }
  .rsvp-thanks{ display:none; text-align:center; }
  .rsvp-thanks.show{ display:block; }
  .rsvp-thanks .script{ font-size:44px; color:var(--clay-blue); }
  .rsvp-form.hide{ display:none; }

  /* ============ FOOTER ============ */
  footer{ text-align:center; padding:84px 24px 64px; background:#fff; }
  footer .script{ font-size:48px; color:var(--clay-blue); }
  /* jc-monogram.png is a pre-transparent, ink-trimmed copy, so no blending needed */
  footer .footer-mono img{
    width:100%; max-width:150px; height:auto; margin:0 auto;
  }
  footer .f-date{ font-size:14px; color:var(--dark-grey); opacity:.55; margin-top:18px; }

  /* ============ RESPONSIVE ============ */
  @media (max-width:760px){
    .topnav{
      top:0; margin:0; padding:10px 12px; gap:10px;
      background:transparent; border:none; border-radius:0; box-shadow:none;
      -webkit-backdrop-filter:none; backdrop-filter:none;
    }
    .topnav .brand{
      width:36px; height:36px; border-radius:50%; padding:0;
      display:flex; align-items:center; justify-content:center;
      background:rgba(255,255,255,.65);
      -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
      border:1px solid rgba(191,184,172,.35);
      box-shadow:0 6px 16px -10px rgba(74,74,74,.35);
    }
    .topnav .brand img{ height:22px; width:auto; filter:none; }
    .nav-toggle{
      display:flex; width:36px; height:36px;
      background:rgba(255,255,255,.65);
      -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
      border:1px solid rgba(191,184,172,.35);
      box-shadow:0 6px 16px -10px rgba(74,74,74,.35);
    }
    .nav-links{
      position:absolute; top:calc(100% + 8px); left:0; right:0;
      display:none; flex-direction:column; align-items:stretch; gap:2px;
      background:rgba(255,255,255,.85);
      -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
      border:1px solid rgba(255,255,255,.75); border-radius:20px;
      box-shadow:0 18px 40px -18px rgba(74,74,74,.35);
      padding:8px;
      max-height:calc(100dvh - 90px); overflow-y:auto;
    }
    .topnav.open .nav-links{ display:flex; }
    .nav-links a{ padding:12px 10px; font-size:12px; }
    .nav-links a.nav-cta{ margin-left:0; }
    .nav-links a.nav-cta{ margin:6px 0 0; text-align:center; }
    section{ padding:76px 0; }
    footer .footer-mono img{ max-width:105px; }
    .story-item{ grid-template-columns:1fr; gap:22px; }
    .story-item:nth-child(even) .story-media{ order:0; }
    .schedule-grid{ grid-template-columns:1fr; gap:46px; }
    .schedule-col{ padding:56px 18px 30px; border-radius:999px 999px 6px 6px / 110px 110px 6px 6px; }
    .timeline::before{ left:27px; }
    .t-item{ padding-left:80px; }
    .t-ico{ width:56px; height:56px; }
    .t-ico svg{ width:32px; height:32px; }
    .countdown{ gap:14px; }
    .countdown .unit{ min-width:52px; }
    /* square frame on phones too - same rule as desktop, so nothing to override */
    .corner-orn{ width:50px; height:50px; }
    .bloom.b1{ width:360px; height:280px; top:-70px; right:-60px; }
    .bloom.b2{ width:340px; height:270px; bottom:-80px; left:-70px; }
    .bloom.b3{ width:260px; height:210px; }
    .bloom.b4{ width:260px; height:210px; }
    .door-panel::before{ inset:10px; }
    .sprig.sp1{ top:8px; left:8px; width:92px; height:92px; opacity:.7; }
    .sprig.sp2{ bottom:6px; right:6px; width:76px; height:76px; opacity:.55; }
    .gallery-mosaic{
      grid-template-columns:1fr 1fr;
      grid-auto-rows:150px;
      grid-template-areas:
        "a a"
        "b c"
        "d e";
    }
    .rsvp-card{ padding:40px 24px; }
    .rsvp-form .radio-row{ flex-direction:column; align-items:flex-start; gap:10px; }
    .hero-tag{ font-size:16px; padding:0 12px; }
    .faq-list summary{ font-size:17px; }
    .gift-card{ padding:0; }
  }
  @media (max-width:400px){
    .hero .countdown{ gap:12px; }
    .hero .countdown .num{ font-size:28px; }
    .map-title{ letter-spacing:0; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

/* ================= PAGE FEEDBACK OVERRIDES (2026-10-05) =================
   Dusty Blue = #5A86AD = var(--dusty-text). Black = #000. */

/* 1. Hero photo — show original colors, no tint/filter */
.hero-stage .hero-img{
  filter:none !important;
  -webkit-filter:none !important;
}

/* 25. Attire palette photo — show original colors */
.attire-art img{
  filter:none !important;
  -webkit-filter:none !important;
}

/* ---- BLACK TEXT (retained from 2026-10-05 round 1) ---- */
#schedule .head p.sub,
#venue .head p.sub,
#faq .head p.sub,
#rsvp .head .eyebrow,
#rsvp .head p.sub,
#gallery .head p.sub,
#story .head p.sub,
#attire .head p.sub,
#gift .head .eyebrow,
.map-eyebrow,
.story-text .eyebrow,
.venue-info p{
  color:#000 !important;
  opacity:1 !important;
}
.story-text p{
  color:#000 !important;
  opacity:1 !important;
}

/* ---- DUSTY BLUE #5A86AD — round 2 (2026-10-05): eyebrows + venue h3 ---- */
#gallery .head .eyebrow,
#story .head .eyebrow,
#venue .head .eyebrow,
#faq .head .eyebrow,
.venue-info h3{
  color:#5A86AD !important;
  opacity:1 !important;
}

/* ---- DUSTY BLUE #5A86AD (items 12-13, 15-16, 20, 22-24, 28-29, 32-35, 37) ---- */

/* 12. Verse citation */
.verse-wrap cite{
  color:#5A86AD !important;
}

/* 13. Schedule eyebrow */
.schedule-section .eyebrow,
#schedule .head .eyebrow{
  color:#5A86AD !important;
}

/* 15-16. Schedule headings + icons + times */
.schedule-col h3{
  color:#5A86AD !important;
}
.t-ico{
  border-color:#5A86AD !important;
  color:#5A86AD !important;
}
.t-item .time{
  color:#5A86AD !important;
}

/* 20. Get Directions button */
.venue-info .btn{
  border-color:#5A86AD !important;
  color:#5A86AD !important;
}
.venue-info .btn:hover{
  background:#5A86AD !important;
  border-color:#5A86AD !important;
  color:#fff !important;
}

/* 22. Map title — Playfair Display upright, dusty blue, keep on one line, bigger a little */
.map-title{
  font-family:'Playfair Display', serif !important;
  font-style:normal !important;
  color:#5A86AD !important;
  white-space:nowrap !important;
  font-size:clamp(32px,5vw,42px) !important;
}

/* 23-24. Ceremony/Reception rows — one line; hall pills dusty blue */
.map-sub{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
}
.map-sub .v-row{
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  white-space:nowrap !important;
  flex-wrap:nowrap !important;
}
.map-sub .v-row .v-hall{
  color:#5A86AD !important;
  border-color:rgba(90,134,173,.35) !important;
  white-space:nowrap !important;
}
.map-sub .v-row .v-hall:hover,
.map-sub .v-row .v-hall.active{
  background:#5A86AD !important;
  color:#fff !important;
}

/* 28. FAQ "+" marker */
.faq-list summary::after{
  color:#5A86AD !important;
}

/* 29. Gift flourish divider */
.gift-section .flourish svg{
  color:#5A86AD !important;
}
.gift-section .flourish .rule{
  background:linear-gradient(90deg, transparent, #5A86AD, transparent) !important;
  height:1px !important;
}
.gift-section .flourish svg{
  height:14px !important;
}
.gift-section .flourish svg path{
  stroke:#5A86AD !important;
  stroke-width:1 !important;
}
.gift-section .flourish svg circle{
  fill:#5A86AD !important;
}

/* 32. Send RSVP button */
.submit-btn{
  background:#5A86AD !important;
  border-color:#5A86AD !important;
  color:#fff !important;
}
.submit-btn:hover{
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
}

/* 33. RSVP deadline date */
.rsvp-deadline strong{
  color:#5A86AD !important;
}

/* 34. RSVP phone link */
.rsvp-alt a{
  color:#5A86AD !important;
}

/* 35-36. RSVP card — dusty-blue outer border, black inner (no gold/yellow) */
.rsvp-card{
  border-color:#5A86AD !important;
}
.rsvp-card::before{
  border-color:#000 !important;
  opacity:.6 !important;
}
.rsvp-card::after{
  border-color:#000 !important;
  opacity:.25 !important;
}

/* 37. Attendance radio fill */
.radio-row input{
  accent-color:#5A86AD !important;
}

/* 22-24 mobile: force map title + venue rows to single line */
@media (max-width:760px){
  .map-title{
    font-size:24px !important;
    letter-spacing:.02em !important;
    white-space:nowrap !important;
  }
  .map-sub .v-row{
    margin:6px 6px 0 !important;
    font-size:15px !important;
  }
  .map-sub .v-row .v-hall{
    font-size:11px !important;
    padding:3px 10px !important;
  }
}
@media (max-width:400px){
  .map-title{
    font-size:20px !important;
    white-space:nowrap !important;
  }
}

/* Attire heading — plain .head h2 so it shares the exact rule as
   "Venue & Wayfinding" (Playfair Display via h1,h2,h3 rule + dusty h2 color) */
#attire .head{
  margin-bottom:32px !important;
}

/* Upper sidebar/menu buttons — Dusty Blue #5A86AD */
.nav-toggle{
  border-color:#5A86AD !important;
}
.nav-toggle span{
  background:#5A86AD !important;
}
.nav-links a.nav-cta{
  background:#5A86AD !important;
  border-color:#5A86AD !important;
  color:#fff !important;
}

/* Photo frames — white background with a dusty blue border.
   The photo fills the frame edge to edge, so the border is drawn as an inset
   outline instead of a box border that the image would cover. */
.frame{
  border:0 !important;
  box-shadow:inset 0 0 0 1px rgba(90,134,173,.4) !important;
}
.frame::before{
  display:none !important;
}
.car-slide.active{
  box-shadow:inset 0 0 0 1px rgba(90,134,173,.95) !important;
}
.car-slide.active::before{
  border-color:#5A86AD !important;
}
/* dots and arrows stay white over the photos, not dusty blue */
.car-dot.active{
  background:#fff !important;
}
.car-arrow{
  border-color:#fff !important;
  color:#fff !important;
}

/* Carousel arrows — no background at any state, no scale or lift */
.car-arrow:hover,
.car-arrow:active{
  transform:translateY(-50%) !important;
  background:transparent !important;
  border-color:#fff !important;
  color:#fff !important;
  box-shadow:0 4px 10px -6px rgba(74,74,74,.4) !important;
}

/* ---- Match the Love Story accent colour (#5A86AD) ---- */
.nav-links a.nav-cta{
  background:#5A86AD !important;
  border-color:#5A86AD !important;
  color:#fff !important;
}
.nav-links a.nav-cta:hover{
  background:#4A7395 !important;
  border-color:#4A7395 !important;
  color:#fff !important;
}
#gallery .head h2,
#schedule .head h2,
.schedule-section .head h2{
  color:#5A86AD !important;
}
/* biblex.png is already drawn in #5A86AD — no recolour needed, keep it as-is */