:root{
    --dusk:#0E1119;
    --dusk-2:#151A27;
    --dusk-3:#1D2434;
    --gold:#C9A227;
    --gold-lt:#E7C978;
    --ember:#D98A4E;
    --champagne:#EDE3D2;
    --quiet:#A8A08F;
    --ivory:#F6EFE1;
    --ivory-ink:#1A1710;
    --display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
    --body:"Cormorant Garamond","EB Garamond",Georgia,serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--dusk);
    color:var(--champagne);
    font-family:var(--body);
    font-size:20px;
    font-weight:400;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  }
  a{color:inherit}
  ::selection{background:var(--gold);color:var(--dusk)}
  :focus-visible{outline:2px solid var(--gold-lt);outline-offset:4px;border-radius:2px}

  /* engraved double frame, like the edge of a printed invitation */
  .frame{position:fixed;inset:14px;border:1px solid rgba(201,162,39,.42);pointer-events:none;z-index:40}
  .frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(201,162,39,.18)}
  @media (max-width:640px){.frame{inset:9px}.frame::after{inset:4px}}

  /* paper grain */
  .grain{position:fixed;inset:0;z-index:39;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

  .wrap{width:min(1120px,88vw);margin-inline:auto}
  .narrow{width:min(660px,86vw);margin-inline:auto}

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:14vh 6vw 12vh;isolation:isolate}
  .hero-photo{position:absolute;inset:0;z-index:-2;background-image:var(--hero-img);background-size:cover;background-position:50% 42%}
  .hero-veil{position:absolute;inset:0;z-index:-1;
    background:
      radial-gradient(120% 80% at 50% 30%, rgba(14,17,25,.30) 0%, rgba(14,17,25,.72) 58%, rgba(14,17,25,.94) 100%),
      linear-gradient(180deg, rgba(14,17,25,.72) 0%, rgba(14,17,25,.20) 34%, rgba(14,17,25,.86) 88%, var(--dusk) 100%)}

  .overline{font-size:.86rem;letter-spacing:.34em;color:var(--gold-lt);font-weight:400;margin:0 0 .2rem;text-indent:.34em}
  .hero .date{font-family:var(--display);font-size:clamp(.95rem,1.6vw,1.15rem);letter-spacing:.42em;text-indent:.42em;color:var(--champagne);margin:0 0 clamp(1.4rem,4vh,2.6rem)}

  .names{margin:0;line-height:.86}
  .names .n{
    display:block;font-family:var(--display);font-weight:500;
    font-size:clamp(3.6rem,15.5vw,11rem);
    letter-spacing:.07em;text-indent:.07em;
    color:#FBF6EC;
    text-shadow:0 2px 40px rgba(0,0,0,.45);
  }
  .amp{
    display:block;font-family:var(--display);font-style:italic;font-weight:400;
    font-size:clamp(3.4rem,13vw,9rem);line-height:.7;
    margin:-.06em 0 -.04em;
    background:linear-gradient(170deg,var(--gold-lt) 0%,var(--gold) 45%,#8E6F16 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero .place{margin:clamp(1.8rem,5vh,3rem) auto 0;max-width:34ch;font-size:1.05rem;font-style:italic;color:var(--champagne);letter-spacing:.02em}
  .hero .place em{font-style:normal;letter-spacing:.16em;text-indent:.16em;font-size:.92em}

  .rule-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(1.6rem,4vh,2.4rem) auto 0;max-width:280px}
  .rule-orn i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(201,162,39,.75))}
  .rule-orn i+i{background:linear-gradient(270deg,transparent,rgba(201,162,39,.75))}
  .rule-orn b{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);flex:none}

  .scrollcue{position:absolute;bottom:clamp(22px,4vh,44px);left:50%;transform:translateX(-50%);font-size:.8rem;letter-spacing:.3em;text-indent:.3em;color:rgba(237,227,210,.62);opacity:0;animation:cue 1.2s ease 2.3s forwards}
  @keyframes cue{to{opacity:1}}

  /* staged entrance */
  .rise{opacity:0;transform:translateY(14px);animation:rise 1.1s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.15s}.d2{animation-delay:.45s}.d3{animation-delay:.75s}.d4{animation-delay:1.05s}.d5{animation-delay:1.35s}.d6{animation-delay:1.7s}.d7{animation-delay:2.1s}

  /* ---------- sections ---------- */
  section{position:relative}
  .pad{padding:clamp(5rem,13vh,9rem) 0}
  h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.2;margin:0 0 1.6rem;letter-spacing:.01em}
  .lede{font-size:clamp(1.22rem,2.5vw,1.55rem);line-height:1.62;margin:0 0 1.3rem;color:#F3EBDC}
  .lede + .lede{color:var(--champagne)}
  .center{text-align:center}

  .invite{background:linear-gradient(180deg,var(--dusk) 0%,var(--dusk-2) 100%)}
  .invite .narrow{position:relative}
  .dropline{font-family:var(--display);font-style:italic;color:var(--gold-lt);font-size:clamp(1.05rem,2vw,1.2rem);letter-spacing:.06em;margin:0 0 1.4rem}

  /* ---------- schedule ---------- */
  .schedule{background:var(--dusk-2);border-block:1px solid rgba(201,162,39,.2)}
  .tz{color:var(--quiet);font-style:italic;font-size:1.02rem;margin:-.9rem 0 2.8rem}
  .sched{list-style:none;margin:0;padding:0}
  .sched li{display:grid;grid-template-columns:minmax(0,7.6rem) 26px 1fr;align-items:start;gap:0 1.1rem;padding:0 0 2.4rem}
  .sched li:last-child{padding-bottom:0}
  .sched .t{font-family:var(--display);font-size:clamp(1.05rem,2.2vw,1.35rem);text-align:right;color:var(--gold-lt);letter-spacing:.03em;padding-top:.14em;white-space:nowrap}
  .sched .mark{position:relative;justify-self:center;width:26px;align-self:stretch}
  .sched .mark::before{content:"";position:absolute;top:.62em;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:8px;height:8px;background:var(--gold)}
  .sched .mark::after{content:"";position:absolute;top:1.35em;bottom:-2.4rem;left:50%;transform:translateX(-50%);width:1px;background:linear-gradient(180deg,rgba(201,162,39,.55),rgba(201,162,39,.12))}
  .sched li:last-child .mark::after{display:none}
  .sched h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.12rem,2.3vw,1.4rem);line-height:1.3}
  .sched p{margin:.35rem 0 0;color:var(--quiet);font-size:1.04rem;line-height:1.55}
  @media (max-width:560px){
    .sched li{grid-template-columns:22px 1fr;gap:0 .9rem}
    .sched .t{grid-column:2;text-align:left;padding-top:0;margin-bottom:.15rem}
    .sched .mark{grid-row:1 / span 2;grid-column:1;width:22px}
    .sched .body{grid-column:2}
  }

  /* ---------- join panel ---------- */
  .join{background:linear-gradient(180deg,var(--dusk-2) 0%,var(--dusk) 55%)}
  .card{
    background:var(--ivory);color:var(--ivory-ink);
    padding:clamp(2.2rem,6vw,3.6rem) clamp(1.4rem,5vw,3.4rem) clamp(2.4rem,6vw,3.4rem);
    text-align:center;position:relative;
    box-shadow:0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(201,162,39,.5), 0 0 0 6px rgba(246,239,225,.05);
  }
  .card::before{content:"";position:absolute;inset:9px;border:1px solid rgba(26,23,16,.16);pointer-events:none}
  .card h2{color:var(--ivory-ink);margin-bottom:.5rem}
  .card .sub{color:#4E4739;font-size:1.06rem;margin:0 auto 2rem;max-width:38ch;font-style:italic}

  .count{display:flex;justify-content:center;gap:clamp(.7rem,3.4vw,2.1rem);margin:0 0 2.2rem}
  .count div{min-width:3.4rem}
  .count .num{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,7vw,3rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--ivory-ink);display:block}
  .count .lab{font-size:.86rem;letter-spacing:.13em;color:#7A7161;display:block;margin-top:.5rem}

  .live{display:none;align-items:center;justify-content:center;gap:.6rem;font-family:var(--display);font-size:clamp(1.15rem,3.4vw,1.5rem);color:#8E6F16;margin:0 0 1.9rem}
  .live b{width:9px;height:9px;border-radius:50%;background:#B4232B;animation:pulse 1.8s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(180,35,43,.5)}50%{opacity:.75;box-shadow:0 0 0 9px rgba(180,35,43,0)}}
  body.is-live .live{display:flex}
  body.is-live .count{display:none}
  body.is-over .count,body.is-over .live{display:none}

  .btn{
    display:inline-block;font-family:var(--display);font-size:clamp(1rem,2.6vw,1.18rem);
    letter-spacing:.15em;text-indent:.15em;text-decoration:none;
    background:var(--dusk);color:var(--ivory);
    padding:1.05em 2.4em;border:1px solid var(--dusk);
    transition:background .35s ease,color .35s ease,transform .35s ease;
    box-shadow:inset 0 0 0 1px rgba(201,162,39,.55);
  }
  .btn:hover,.btn:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--dusk);box-shadow:inset 0 0 0 1px rgba(14,17,25,.35)}
  .btn:active{transform:translateY(1px)}

  .fineprint{margin:1.5rem auto 0;font-size:.98rem;color:#6B6353;max-width:34ch;line-height:1.5}
  .linkrow{margin:1.9rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(26,23,16,.14);max-width:30rem}
  .linkrow .lbl{display:block;font-size:.94rem;color:#7A7161;margin-bottom:.45rem}
  .linkrow code{font-family:var(--body);font-size:1.06rem;color:var(--ivory-ink);letter-spacing:.01em;word-break:break-all}
  .miniactions{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;justify-content:center;margin-top:1.1rem}
  .mini{background:none;border:0;padding:.25rem 0;font-family:var(--body);font-size:1rem;color:#5A5344;cursor:pointer;border-bottom:1px solid rgba(26,23,16,.35);transition:color .25s,border-color .25s}
  .mini:hover{color:var(--ivory-ink);border-color:var(--ivory-ink)}

  /* ---------- notes ---------- */
  .notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(2rem,5vw,3.4rem);margin-top:clamp(2.6rem,7vh,4rem)}
  .note h3{font-family:var(--display);font-weight:400;font-size:1.24rem;margin:0 0 .5rem;color:var(--gold-lt)}
  .note p{margin:0;color:var(--quiet);font-size:1.04rem;line-height:1.58}
  .note{border-top:1px solid rgba(201,162,39,.3);padding-top:1.1rem}

  /* ---------- portrait ---------- */
  .portrait{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--dusk-2)}
  .portrait .img{background-image:var(--portrait-img);background-size:cover;background-position:50% 34%;min-height:64vh}
  .portrait .say{display:grid;align-content:center;padding:clamp(3rem,9vw,6rem) clamp(1.6rem,6vw,4.6rem)}
  .portrait blockquote{margin:0;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.55;font-style:italic;color:#F3EBDC}
  .portrait .attrib{margin:1.6rem 0 0;font-family:var(--display);letter-spacing:.22em;text-indent:.22em;font-size:.9rem;color:var(--gold-lt)}
  @media (max-width:820px){.portrait{grid-template-columns:1fr}.portrait .img{min-height:58vh}}

  /* ---------- signoff ---------- */
  .signoff{text-align:center;padding:clamp(5rem,13vh,8rem) 0 clamp(6rem,14vh,9rem);background:var(--dusk)}
  .signoff p{margin:0 0 1.1rem;font-size:1.2rem;font-style:italic;color:var(--quiet)}
  .signoff .sig{font-family:var(--display);font-style:italic;font-size:clamp(2.2rem,7vw,3.4rem);color:var(--gold-lt);line-height:1.25;margin:0}
  .signoff .stamp{margin:2.4rem 0 0;font-family:var(--display);font-size:.86rem;letter-spacing:.34em;text-indent:.34em;color:rgba(168,160,143,.8)}

  /* quiet way across to the other language; the only link that leaves the page */
  .signoff p.langswitch{margin:1.6rem 0 0;font-size:inherit;font-style:normal;color:inherit}
  .langswitch a{
    font-family:var(--display);font-size:.78rem;letter-spacing:.28em;text-indent:.28em;
    color:rgba(201,162,39,.82);text-decoration:none;
    border-bottom:1px solid rgba(201,162,39,.3);padding-bottom:.45em;
    transition:color .35s ease,border-color .35s ease}
  .langswitch a:hover,.langswitch a:focus-visible{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}

  /* ---------- sticky bar ---------- */
  .bar{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.85rem clamp(1.1rem,4vw,2.4rem);
    background:rgba(11,14,21,.93);backdrop-filter:blur(10px);
    border-top:1px solid rgba(201,162,39,.4);
    transform:translateY(115%);transition:transform .5s cubic-bezier(.2,.7,.3,1);
  }
  .bar.show{transform:none}
  .bar .when{font-family:var(--display);font-size:.98rem;letter-spacing:.04em;color:var(--champagne)}
  .bar .when span{display:block;font-family:var(--body);font-style:italic;font-size:.92rem;color:var(--quiet);letter-spacing:0}
  .bar .btn{padding:.72em 1.5em;font-size:.94rem;background:var(--gold);color:var(--dusk);border-color:var(--gold);box-shadow:none;white-space:nowrap}
  .bar .btn:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
  @media (max-width:420px){.bar .when{font-size:.9rem}.bar .when span{display:none}}
  .bar-space{height:78px}

  .toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);z-index:60;background:var(--ivory);color:var(--ivory-ink);padding:.6rem 1.3rem;font-size:1rem;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;box-shadow:0 14px 34px -12px rgba(0,0,0,.7)}
  .toast.show{opacity:1;transform:translate(-50%,0)}

/* Photographs. Both are shot at golden hour, which is where the whole
   palette below comes from. Swap the files, keep the names. */
:root{
  --hero-img:url('../assets/hero.jpg');
  --portrait-img:url('../assets/portrait.jpg');
}