:root{
    --cream:#FBFAF8;
    --cream-deep:#F4F1EC;
    --blush:#F6C9D4;
    --blush-deep:#E8A0AE;
    --rose:#D8798D;
    --gold:#F0B4C0;
    --gold-deep:#D8899C;
    --gold-light:#FBDEE4;
    --ink:#5A4A4E;
    --ink-soft:#8C7A7E;
    --paper: radial-gradient(120% 140% at 50% -10%, #FFFFFF 0%, #FBFAF8 55%, #F4F1EC 100%);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Jost', sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }
  ::selection{background:var(--blush);color:var(--ink);}

  h1,h2,h3,.serif{font-family:'Cormorant Garamond', serif;}
  .script{font-family:'Parisienne', cursive; font-weight:400;}
  .eyebrow{
    font-family:'Jost',sans-serif;
    letter-spacing:.32em;
    text-transform:uppercase;
    font-size:11px;
    color:var(--gold-deep);
    font-weight:500;
  }
  a{color:inherit;}

  /* ---------- reduced motion ---------- */
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  /* ================= ENVELOPE INTRO ================= */
  #envelope-screen{
    position:fixed; inset:0; z-index:999;
    background: linear-gradient(180deg,#3E2530 0%, #2B1820 100%);
    display:flex; align-items:center; justify-content:center;
    transition: opacity .9s ease, visibility .9s ease;
  }
  #envelope-screen.hidden{opacity:0; visibility:hidden; pointer-events:none;}
  .env-wrap{
    position:relative;
    width:min(320px, 78vw);
    aspect-ratio: 1.42 / 1;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .env-hint{
    position:absolute; top:-46px; left:0; right:0; text-align:center;
    color:#F6D8E0; font-family:'Jost',sans-serif; font-size:11px;
    letter-spacing:.28em; text-transform:uppercase;
    opacity:.85;
  }
  .env-body{
    position:absolute; inset:0;
    background: linear-gradient(160deg,#FDEFF3,#F8D9E1);
    border-radius:3px;
    box-shadow: 0 30px 60px rgba(0,0,0,.55);
  }
  .env-flap{
    position:absolute; top:0; left:0; right:0; height:62%;
    background: linear-gradient(160deg,#FBE4EA,#F3C7D2);
    clip-path: polygon(0 0, 100% 0, 50% 78%);
    transform-origin: top center;
    transition: transform 1s cubic-bezier(.6,.05,.2,1);
    box-shadow: 0 6px 18px rgba(0,0,0,.12) inset;
    z-index:3;
  }
  .env-wrap.open .env-flap{ transform: rotateX(178deg); }
  .env-shadow-fold{
    position:absolute; left:0; right:0; bottom:0; top:34%;
    background: linear-gradient(200deg, transparent 48%, rgba(0,0,0,.06) 50%, transparent 52%),
                linear-gradient(160deg, transparent 48%, rgba(0,0,0,.06) 50%, transparent 52%);
    z-index:2;
  }
  .env-seal{
    position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
    width:64px; height:64px; border-radius:50%;
    background: radial-gradient(circle at 32% 28%, #F0A9BA, #D9748C 70%, #B85870 100%);
    box-shadow: 0 8px 16px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.35);
    display:flex; align-items:center; justify-content:center;
    z-index:5;
    transition: transform .6s ease, opacity .6s ease;
  }
  .env-wrap.open .env-seal{ transform:translate(-50%,-50%) scale(.4); opacity:0; }
  .env-seal span{ font-family:'Cormorant Garamond',serif; font-size:20px; color:#5A2A3A; letter-spacing:1px; }
  .env-card{
    position:absolute; left:8%; right:8%; bottom:6%; top:14%;
    background: var(--paper);
    border:1px solid var(--gold-light);
    border-radius:2px;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding:16px;
    transform: translateY(0%);
    transition: transform 1s cubic-bezier(.6,.05,.2,1) .15s;
    z-index:1;
  }
  .env-wrap.open .env-card{ transform: translateY(-46%); }
  .env-card p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:14px; color:var(--ink-soft); margin:0; }

  /* ================= LAYOUT ================= */
  main{ opacity:0; transition:opacity .8s ease; }
  main.show{ opacity:1; }

  section{
    position:relative;
    padding:120px 24px;
    max-width:640px;
    margin:0 auto;
    text-align:center;
  }
  .divider{
    width:1px; height:64px; background:linear-gradient(var(--gold-deep), transparent);
    margin:0 auto 34px;
  }
  .divider.flip{ background:linear-gradient(transparent, var(--gold-deep)); margin:34px auto 0; }

  /* ---------- HERO ---------- */
  #hero{
    background: var(--paper);
    padding-top:70px;
    min-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .arch-illustration{ width:min(280px,70vw); height:auto; margin-bottom:8px; color:var(--gold-deep); }
  .hero-names{
    font-size:clamp(48px,11vw,76px);
    line-height:1;
    margin:6px 0 10px;
    color:var(--rose);
  }
  .hero-sub{
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:19px;
    color:var(--ink-soft);
    letter-spacing:.02em;
  }
  .palm{ position:absolute; bottom:26px; width:70px; opacity:.55; color:var(--gold-deep); }
  .palm.left{ left:14px; transform:scaleX(-1); }
  .palm.right{ right:14px; }
  .scroll-cue{
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
    font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep);
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .scroll-cue::after{
    content:''; width:1px; height:26px; background:var(--gold-deep);
    animation: cueMove 1.8s ease-in-out infinite;
  }
  @keyframes cueMove{ 0%,100%{ transform:scaleY(.4); opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }

  /* ---------- GALLERY ---------- */
  #gallery{ background:var(--cream); }
  .gallery-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
    margin-top:36px;
  }
  .gallery-grid .tall{ grid-row: span 2; }
  .gallery-photo{
    position:relative;
    width:100%;
    height:100%;
    min-height:150px;
    border-radius:4px;
    overflow:hidden;
    background:linear-gradient(160deg, var(--gold-light), var(--blush));
    box-shadow:0 12px 26px rgba(216,121,141,.18);
  }
  .gallery-grid .tall .gallery-photo{ min-height:320px; }
  .gallery-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .gallery-photo .ph-fallback{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; color:var(--gold-deep); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  }
  .gallery-photo .ph-fallback svg{ width:34px; height:34px; opacity:.7; }
  @media (max-width:480px){
    .gallery-grid{ grid-template-columns: repeat(2, 1fr); gap:10px; }
    .gallery-grid .tall .gallery-photo{ min-height:220px; }
  }

  /* ---------- SCRATCH REVEAL ---------- */
  #reveal{ background:var(--cream); }
  .scratch-row{
    display:flex; justify-content:center; gap:18px; margin:36px 0 8px; flex-wrap:wrap;
  }
  .scratch-tile{
    position:relative; width:96px; height:96px; border-radius:50%;
    box-shadow: 0 10px 24px rgba(169,99,110,.18);
  }
  .scratch-tile canvas{ position:absolute; inset:0; border-radius:50%; cursor:grab; touch-action:none; }
  .scratch-under{
    position:absolute; inset:0; border-radius:50%;
    background:var(--paper);
    border:1px solid var(--gold-light);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
  .scratch-under .val{ font-family:'Cormorant Garamond',serif; font-size:30px; color:var(--rose); font-weight:600;}
  .scratch-under .lbl{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); margin-top:2px;}
  .scratch-caption{ margin-top:18px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
  .date-reveal{
    margin-top:38px; font-family:'Cormorant Garamond',serif; font-size:30px; color:var(--ink);
    opacity:0; transform:translateY(10px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .date-reveal.show{ opacity:1; transform:translateY(0); }

  /* ---------- COUNTDOWN ---------- */
  #countdown{ background:var(--paper); }
  .count-grid{ display:flex; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; }
  .count-cell{
    width:82px; padding:16px 0; border:1px solid var(--gold-light);
    background:#fff;
  }
  .count-cell .n{ font-family:'Cormorant Garamond',serif; font-size:32px; color:var(--rose); display:block; }
  .count-cell .l{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
  .lights{ width:100%; max-width:420px; margin:40px auto 0; display:block; color:var(--gold); }

  /* ---------- DETAILS ---------- */
  #details{ background:var(--cream); }
  .crest{ width:120px; margin:0 auto 22px; color:var(--gold-deep); }
  .venue-name{ font-size:26px; margin:0 0 6px; }
  .venue-addr{ color:var(--ink-soft); font-size:15px; margin:0 0 26px; line-height:1.7; }
  .btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .btn{
    font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    padding:14px 26px; border:1px solid var(--gold-deep); background:transparent; color:var(--ink);
    cursor:pointer; text-decoration:none; display:inline-block; transition:background .3s, color .3s;
  }
  .btn.solid{ background:var(--rose); border-color:var(--rose); color:#fff; }
  .btn:hover{ background:var(--gold-deep); border-color:var(--gold-deep); color:#fff; }
  .btn.solid:hover{ background:var(--ink); border-color:var(--ink); }

  /* ---------- TIMELINE ---------- */
  #timeline{ background:var(--paper); }
  .tl-list{ position:relative; margin-top:40px; padding-left:0; }
  .tl-item{ position:relative; padding:26px 0; }
  .tl-time{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
  .tl-title{ font-size:24px; margin:4px 0 4px; }
  .tl-desc{ font-size:14px; color:var(--ink-soft); font-family:'Cormorant Garamond',serif; font-style:italic; }
  .tl-dot{ width:7px; height:7px; border-radius:50%; background:var(--rose); margin:0 auto 10px; }

  /* ---------- DRESS CODE ---------- */
  #dress{ background:var(--cream); }
  .dress-note{ color:var(--ink-soft); font-size:15px; line-height:1.8; max-width:440px; margin:0 auto; }
  .palette-dots{ display:flex; justify-content:center; gap:12px; margin-top:26px; }
  .palette-dots span{ width:22px; height:22px; border-radius:50%; display:inline-block; box-shadow:0 2px 6px rgba(0,0,0,.15); }

  /* ---------- GIFTS ---------- */
  #gifts{ background:var(--paper); }
  .env-icon{ width:70px; margin:0 auto 20px; color:var(--gold-deep); }
  .gift-note{ color:var(--ink-soft); font-size:15px; line-height:1.8; max-width:440px; margin:0 auto 22px; }
  .gift-box{
    border:1px dashed var(--gold-deep); padding:18px 22px; display:inline-block;
    font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--ink);
  }

  /* ---------- RSVP ---------- */
  #rsvp{ background:var(--cream); }
  form{ margin-top:32px; text-align:left; display:grid; gap:18px; }
  .attend-toggle{ display:flex; gap:12px; justify-content:center; margin-bottom:6px; }
  .attend-toggle button{
    flex:1; max-width:220px; padding:14px 10px; border:1px solid var(--gold-deep);
    background:#fff; font-family:'Jost',sans-serif; font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; cursor:pointer; color:var(--ink); transition:.25s;
  }
  .attend-toggle button.active{ background:var(--rose); border-color:var(--rose); color:#fff; }
  label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:6px; }
  input, textarea{
    width:100%; border:none; border-bottom:1px solid var(--blush-deep); background:transparent;
    font-family:'Jost',sans-serif; font-size:15px; color:var(--ink); padding:8px 2px; outline:none;
  }
  input:focus, textarea:focus{ border-color:var(--rose); }
  textarea{ resize:vertical; min-height:64px; }
  .submit-btn{
    margin-top:8px; padding:16px; border:none; background:var(--rose); color:#fff;
    font-family:'Jost',sans-serif; letter-spacing:.2em; text-transform:uppercase; font-size:12px;
    cursor:pointer; transition:background .3s;
  }
  .submit-btn:hover{ background:var(--ink); }
  .rsvp-success{ display:none; text-align:center; padding:30px 10px; font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--rose); }
  .rsvp-success.show{ display:block; }
  form.hide{ display:none; }

  /* ---------- FOOTER ---------- */
  footer{ text-align:center; padding:90px 24px 60px; background:var(--paper); }
  .footer-names{ font-size:34px; color:var(--rose); margin-bottom:26px; }
  .door{ width:120px; margin:0 auto; color:var(--gold-deep); }
  .footer-note{ margin-top:22px; font-size:12px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase; }

  @media (max-width:480px){
    section{ padding:90px 18px; }
    .count-cell{ width:70px; }
  }