/* Shared tokens + primitives for the home page and the RSVP page */
:root{
  --tux:#070707;          /* tuxedo black */
  --tux-2:#141210;        /* raised black surface */
  --silk:#f6f0e6;         /* invitation paper */
  --silk-2:#ede4d4;
  --gold:#c9a96e;         /* champagne foil */
  --gold-deep:#9a7741;
  --gold-hi:#efdcb2;
  --garnet:#7a1c2a;       /* from the red dress — errors & the heart only */
  --ink:#1b1814;
  --ink-2:#463e35;
  --on-dark:#e9e1d3;
  --on-dark-2:#bcb1a0;
  --foil:linear-gradient(115deg,#8e6b37 0%,#d8bb82 28%,#f4e4bd 46%,#c9a96e 62%,#8e6b37 100%);

  --display:"Bodoni Moda",Didot,"Times New Roman",serif;   /* giant numerals only */
  --serif:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --text:"Jost",system-ui,sans-serif;
  --script:"Pinyon Script",cursive;

  --ease:cubic-bezier(.2,.7,.15,1);
  --gutter:clamp(20px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--text);font-weight:400;font-size:17px;line-height:1.7;color:var(--ink);background:var(--silk);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--tux)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.script{font-family:var(--script);font-weight:400;line-height:1.1}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--text);font-weight:400;font-size:15px;letter-spacing:.06em;padding:16px 30px;border-radius:999px;text-decoration:none;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.btn-foil{background:var(--foil);background-size:160% 100%;background-position:0 0;color:var(--tux);font-weight:500;transition:background-position .6s var(--ease),box-shadow .3s}
.btn-foil:hover{background-position:100% 0;box-shadow:0 10px 30px -14px rgba(201,169,110,.8)}
.btn-line{border:1px solid currentColor}
.on-dark .btn-line{color:var(--gold-hi)}
.btn-line:hover{background:var(--ink);color:var(--silk);border-color:var(--ink)}
.on-dark .btn-line:hover{background:var(--gold);color:var(--tux);border-color:var(--gold)}

/* The ring motif: a photo set inside a gold band */
.ring{position:relative;aspect-ratio:.68;width:100%}
.ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring-photo{position:absolute;inset:5.2%;border-radius:50%;overflow:hidden;background:var(--tux-2)}
.ring-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}