:root{
    --ink:#081512;
    --ink-2:#0c1f18;
    --panel:rgba(15,36,26,0.86);
    --panel-soft:rgba(9,24,18,0.92);
    --line:rgba(201,162,75,0.28);
    --gold:#C9A24B;
    --gold-bright:#EAC873;
    --cream:#F4EEDB;
    --muted:#9FB6A4;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    min-width:320px;
    color:var(--cream);
    background:
      radial-gradient(circle at 18% 10%, rgba(201,162,75,0.08), transparent 32%),
      radial-gradient(circle at 82% 65%, rgba(201,162,75,0.07), transparent 38%),
      linear-gradient(180deg, #0a1a14 0%, #071309 100%);
    font-family:'Cormorant Garamond', serif;
    font-size:19px;
    line-height:1.65;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  button{font:inherit;cursor:pointer;}
  h1,h2,h3{font-family:'Amiri', serif; margin:0; font-weight:700;}
  .eyebrow{
    font-family:'EB Garamond', serif;
    font-variant:small-caps;
    letter-spacing:.22em;
    font-size:14px;
    color:var(--gold-bright);
  }

  /* Scroll progress */
  .scroll-progress{
    position:fixed; z-index:50; top:0; left:0; width:0; height:2px;
    background:linear-gradient(90deg, #7a5a1e, var(--gold), var(--gold-bright));
    box-shadow:0 0 14px rgba(201,162,75,0.6);
    transition:width .1s linear;
  }

  /* ---------- Gate / Envelope screen ---------- */
  .gate{
    position:fixed; inset:0; z-index:1000;
    display:grid; place-items:center;
    padding:32px 18px;
    background:
      radial-gradient(circle at 50% 30%, rgba(201,162,75,0.10), transparent 40%),
      linear-gradient(160deg, #050f0b 0%, #0b2117 55%, #050f0b 100%);
    transition:transform 1.1s cubic-bezier(.77,0,.175,1), opacity 1.1s ease, visibility 1.1s;
  }
  body.opened .gate{
    transform:translateY(-100%);
    opacity:0; visibility:hidden; pointer-events:none;
  }
  body.locked{height:100vh; overflow:hidden;}
  .gate-card{
    position:relative;
    width:min(440px, 92vw);
    text-align:center;
    padding:52px 30px 40px;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--panel-soft);
    box-shadow:0 30px 80px rgba(0,0,0,.55);
    transition:transform .8s ease, opacity .8s ease;
  }
  body.opened .gate-card{opacity:0; transform:translateY(-60px) scale(.95); pointer-events:none;}
  .gate-arch{width:120px; margin:0 auto 18px;}
  .gate-bismillah{font-family:'Amiri', serif; font-size:26px; color:var(--gold-bright); margin-bottom:6px;}
  .gate-sub{font-size:14px; color:var(--muted); font-style:italic; margin-bottom:26px;}
  .gate-names{font-size:clamp(28px,7vw,36px); margin-bottom:6px;}
  .gate-amp{color:var(--gold); font-style:italic;}
  .gate-tag{font-size:15px; color:var(--muted); margin-bottom:30px;}
  .seal-btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px;
    border:1px solid var(--gold);
    border-radius:999px;
    background:transparent;
    color:var(--gold-bright);
    font-family:'EB Garamond', serif;
    letter-spacing:.14em;
    font-size:14px;
    font-variant:small-caps;
    transition:background .3s ease, color .3s ease, transform .3s ease;
  }
  .seal-btn:hover{background:var(--gold); color:#0a1a14; transform:translateY(-2px);}
  .seal-btn svg{width:16px; height:16px;}

  /* ---------- Star divider ---------- */
  .divider{display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 34px;}
  .divider .rule{height:1px; width:64px; background:linear-gradient(90deg, transparent, var(--line));}
  .divider .rule.right{background:linear-gradient(90deg, var(--line), transparent);}
  .divider svg{width:20px; height:20px; color:var(--gold);}

  /* ---------- Reveal ---------- */
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease;}
  .reveal.is-visible{opacity:1; transform:translateY(0);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative; min-height:100svh; display:grid; place-items:center;
    text-align:center; padding:90px 20px 60px; overflow:hidden;
  }
  .hero-arch{
    position:absolute; top:6%; left:50%; transform:translateX(-50%);
    width:min(560px, 92vw); opacity:.55; pointer-events:none;
  }
  .hero-content{position:relative; z-index:2; max-width:640px;}
  .hero .eyebrow{display:block; margin-bottom:18px;}
  .hero h1{font-size:clamp(38px, 9vw, 64px); line-height:1.15; color:var(--cream);}
  .hero h1 .amp{display:block; color:var(--gold); font-style:italic; font-size:.6em; margin:6px 0;}
  .hero-tagline{margin-top:18px; color:var(--muted); font-size:18px; font-style:italic;}
  .countdown{
    display:flex; justify-content:center; gap:clamp(10px,3vw,22px);
    margin-top:44px; flex-wrap:wrap;
  }
  .countdown .unit{
    min-width:74px; padding:14px 6px;
    border:1px solid var(--line); border-radius:4px; background:var(--panel);
  }
  .countdown .num{font-family:'Amiri',serif; font-size:30px; color:var(--gold-bright); display:block;}
  .countdown .lbl{font-size:12px; letter-spacing:.14em; color:var(--muted); font-variant:small-caps;}
  /* Hero date block */
  .hero-date-block{
    margin-top:32px; padding:18px 28px;
    border:1px solid var(--line); border-radius:4px; background:var(--panel);
    display:inline-block;
  }
  .hero-date-label{
    font-family:'EB Garamond',serif; font-variant:small-caps; letter-spacing:.2em;
    font-size:12px; color:var(--gold-bright); margin-bottom:6px;
  }
  .hero-date-main{
    font-family:'Amiri',serif; font-size:clamp(20px,4vw,26px); color:var(--cream); line-height:1.2;
  }
  .hero-date-sub{
    margin-top:6px; font-size:13.5px; color:var(--muted); font-style:italic;
  }

  /* Hero scroll indicator */
  .hero-scroll{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    margin-top:48px; color:var(--muted); font-size:12px;
    letter-spacing:.15em; font-variant:small-caps;
    transition:color .3s;
    text-decoration:none;
  }
  .hero-scroll:hover{color:var(--gold-bright);}
  .hero-scroll-text{font-family:'EB Garamond',serif;}
  .hero-scroll svg{
    width:26px; height:26px; opacity:.6;
    animation:scroll-bounce 2s ease-in-out infinite;
  }
  @keyframes scroll-bounce{
    0%,100%{transform:translateY(0); opacity:.6;}
    50%{transform:translateY(6px); opacity:1;}
  }

  /* ---------- Section shell ---------- */
  section{padding:90px 20px; position:relative;}
  .section-inner{max-width:960px; margin:0 auto;}
  .section-head{text-align:center; margin-bottom:56px;}
  .section-head h2{font-size:clamp(28px,5vw,40px); color:var(--cream); margin-top:8px;}

  /* Bismillah / verse */
  .verse{
    max-width:680px; margin:0 auto; text-align:center;
    padding:46px 30px; border:1px solid var(--line); border-radius:4px; background:var(--panel);
  }
  .verse p{font-size:22px; font-style:italic; color:var(--cream); margin:0 0 12px;}
  .verse span{font-size:14px; color:var(--muted); font-variant:small-caps; letter-spacing:.1em;}

  /* Couple cards */
  .couple-grid{display:grid; grid-template-columns:1fr; gap:32px;}
  @media(min-width:840px){.couple-grid{grid-template-columns:1fr 1fr;}}
  .person-card{
    border:1px solid var(--line); border-radius:6px; background:var(--panel);
    padding:38px 32px; position:relative;
  }
  .person-card::before{
    content:""; position:absolute; top:-1px; left:24px; right:24px; height:1px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .person-role{font-size:13px; color:var(--gold-bright); font-variant:small-caps; letter-spacing:.18em;}
  .person-name{font-size:clamp(24px,4vw,30px); margin:8px 0 18px; color:var(--cream);}
  .person-facts{list-style:none; margin:0 0 18px; padding:0; font-size:16.5px; color:var(--muted);}
  .person-facts li{padding:7px 0; border-bottom:1px dashed rgba(159,182,164,0.18); display:flex; justify-content:space-between; gap:14px;}
  .person-facts li:last-child{border-bottom:none;}
  .person-facts b{color:var(--cream); font-weight:500; text-align:right;}
  .person-lineage{font-size:15.5px; color:var(--muted); line-height:1.7; margin-top:16px;}
  .person-lineage strong{color:var(--cream); font-weight:500;}
  .map-link{
    display:inline-flex; align-items:center; gap:8px; margin-top:18px;
    font-size:13.5px; letter-spacing:.06em; color:var(--gold-bright);
    border-bottom:1px solid var(--line); padding-bottom:2px;
    font-variant:small-caps;
  }
  .map-link:hover{color:var(--gold);}
  .map-link svg{width:14px; height:14px;}

  /* Siblings */
  .siblings{margin-top:22px;}
  .siblings-title{font-size:13px; color:var(--gold-bright); font-variant:small-caps; letter-spacing:.16em; margin-bottom:10px;}
  .siblings-list{display:flex; flex-wrap:wrap; gap:8px;}
  .siblings-list span{
    font-size:14.5px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; color:var(--cream);
  }

  /* Occupation block */
  .occupation-box{
    margin-top:18px; padding:16px 18px; border-left:2px solid var(--gold); background:rgba(201,162,75,0.05);
    font-size:15.5px; color:var(--muted); line-height:1.7;
  }
  .occupation-box b{color:var(--cream); font-weight:500;}

  /* Event section */
  .event-card{
    max-width:640px; margin:0 auto; text-align:center;
    padding:52px 34px; border:1px solid var(--line); border-radius:6px; background:var(--panel);
    position:relative;
  }
  .event-icon{width:44px; height:44px; margin:0 auto 18px; color:var(--gold);}
  .event-title{font-size:clamp(24px,4vw,30px); color:var(--cream);}
  .event-venue{margin-top:10px; font-size:19px; color:var(--gold-bright); font-style:italic;}
  .event-datetime{margin-top:16px; font-size:16px; color:var(--muted);}
  .directions-btn{
    display:inline-flex; align-items:center; gap:10px; margin-top:28px;
    padding:13px 28px; border:1px solid var(--gold); border-radius:999px;
    color:var(--gold-bright); font-variant:small-caps; letter-spacing:.1em; font-size:14.5px;
    transition:background .3s, color .3s, transform .3s;
  }
  .directions-btn:hover{background:var(--gold); color:#0a1a14; transform:translateY(-2px);}
  .directions-btn svg{width:15px; height:15px;}

  /* Footer / dua */
  .closing{text-align:center; padding:100px 20px 60px;}
  .closing .eyebrow{display:block; margin-bottom:14px;}
  .closing p{max-width:560px; margin:0 auto; font-size:20px; font-style:italic; color:var(--cream);}
  .closing .names{margin-top:28px; font-family:'Amiri',serif; font-size:26px; color:var(--gold-bright);}
  footer{
    text-align:center; padding:34px 20px 44px; font-size:13px; color:var(--muted);
    border-top:1px solid var(--line); opacity:.7;
  }

  /* Ambient stars */
  .stars{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;}
  .stars svg{position:absolute; color:var(--gold); opacity:.18;}

  /* Particle canvas */
  #particleCanvas{
    position:fixed; inset:0; z-index:0;
    pointer-events:none; width:100%; height:100%;
  }

  @media(prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }