/* ============================================================
   Base: reset, page shell, type, shared components
   Owned by Lead — section agents must not restyle these.
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:rgba(101,37,52,.14); }

/* desktop: the invitation is a card on a lace wall ---------- */
@media (min-width: 900px){
  body{
    background:#E7DED6 url("../assets/img/lace-wall.jpg") center/cover fixed no-repeat;
  }
  body::after{
    content:"";
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 40%, rgba(247,244,241,.72) 0%, rgba(238,229,221,.88) 100%);
  }
}

/* the scroll column ---------------------------------------- */
.page{
  position:relative;
  z-index:1;
  max-width:var(--col);
  margin:0 auto;
  background:var(--paper);
  overflow-x:clip;
}
@media (min-width: 900px){
  .page{
    box-shadow:0 40px 120px -30px rgba(58,35,40,.45), 0 2px 8px rgba(58,35,40,.10);
  }
}

/* sections -------------------------------------------------- */
.section{
  position:relative;
  padding:var(--sec-y) var(--pad);
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  isolation:isolate;
}
.section--alt{ background:var(--paper-2); }
.section--dark{ background:var(--maroon); color:var(--cream); }
.section--tight{ padding-top:0; padding-bottom:0; }
.section--flush{ padding-left:0; padding-right:0; }

.section__inner{
  position:relative;
  z-index:2;
  max-width:430px;
  margin:0 auto;
}
.section__inner--wide{ max-width:480px; }
.section__inner--left{ margin-left:0; margin-right:auto; }

/* type ------------------------------------------------------ */
.eyebrow{
  font-family:var(--ff-display);
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}
.section--dark .eyebrow{ color:var(--cream-dim); }

.title{
  font-family:var(--ff-display);
  font-weight:300;
  font-size:clamp(30px, 8.4vw, 42px);
  line-height:1.12;
  letter-spacing:.005em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
.section--dark .title{ color:var(--cream); }
.title--sm{ font-size:clamp(24px, 6.4vw, 31px); }
.title--italic{ font-style:italic; }

.script{
  font-family:var(--ff-script);
  font-weight:400;
  line-height:1.12;
  letter-spacing:0;
  color:var(--ink);
}
.section--dark .script{ color:var(--cream); }

.p{
  font-family:var(--ff-body);
  font-size:15.5px;
  line-height:1.78;
  color:var(--ink-soft);
  margin:0;
  text-wrap:pretty;
}
.p--sm{ font-size:14px; line-height:1.72; }
.section--dark .p{ color:var(--cream-dim); }
.p em{ font-style:italic; }

.smallcaps{
  font-family:var(--ff-display);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.section--dark .smallcaps{ color:var(--cream-dim); }

.rule-v{
  width:1px; height:52px;
  background:linear-gradient(to bottom, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
  margin:0 auto;
}
.rule-h{
  height:1px; width:52px; margin:0 auto;
  background:linear-gradient(to right, transparent, var(--hairline) 25%, var(--hairline) 75%, transparent);
}
.section--dark .rule-v{ background:linear-gradient(to bottom, transparent, var(--cream-line) 18%, var(--cream-line) 82%, transparent); }
.section--dark .rule-h{ background:linear-gradient(to right, transparent, var(--cream-line) 25%, var(--cream-line) 75%, transparent); }

/* buttons --------------------------------------------------- */
.btn{
  --btn-fg:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  padding:14px 30px 13px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:transparent;
  color:var(--btn-fg);
  font-family:var(--ff-display);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
  cursor:pointer;
  transition:background .45s var(--e-soft), color .45s var(--e-soft), border-color .45s var(--e-soft);
}
.btn:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.section--dark .btn{ --btn-fg:var(--cream); border-color:var(--cream-line); }
.section--dark .btn:hover{ background:var(--cream); border-color:var(--cream); color:var(--maroon); }

/* small caps button variant (no pill) */
.btn--ghost{ border-radius:0; padding:10px 2px 9px; border-width:0 0 1px; }
.btn--ghost:hover{ background:transparent; color:var(--maroon); border-color:var(--maroon); }
.section--dark .btn--ghost:hover{ color:var(--cream); border-color:var(--cream); }

/* decorative absolutes -------------------------------------- */
.lace{
  position:absolute;
  left:0;
  width:100%;
  height:auto;
  z-index:1;
  pointer-events:none;
  user-select:none;
}
.lace--top{ top:-1px; }
.lace--bottom{ bottom:-1px; }

.pearl{
  position:absolute;
  top:0;
  width:30px;
  height:420px;
  object-fit:cover;
  object-position:top center;
  opacity:.85;
  z-index:1;
  pointer-events:none;
}
.pearl--l{ left:-6px; }
.pearl--r{ right:-6px; transform:scaleX(-1); }

.blend-multiply{ mix-blend-mode:multiply; }
.blend-screen{ mix-blend-mode:screen; }

/* plaque (hotel cards, form panels) ------------------------- */
.plaque{
  position:relative;
  background:var(--blush);
  color:var(--ink);
  padding:38px 26px 34px;
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}
.plaque::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid var(--blush-line);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  pointer-events:none;
}

/* forms (rsvp) ---------------------------------------------- */
.field{ display:block; margin:0 0 22px; }
.field__label{
  display:block;
  font-family:var(--ff-body);
  font-size:14px;
  letter-spacing:.02em;
  color:var(--cream-dim);
  margin:0 0 9px;
}
.field__hint{
  display:block;
  font-family:var(--ff-display);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(248,241,236,.42);
  margin:0 0 8px;
}
.input,.textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--cream-line);
  border-radius:2px;
  padding:13px 14px;
  color:var(--cream);
  font-family:var(--ff-body);
  font-size:14.5px;
  line-height:1.5;
  transition:border-color .3s var(--e-soft), background .3s var(--e-soft);
}
.input::placeholder,.textarea::placeholder{ color:rgba(248,241,236,.38); }
.input:focus,.textarea:focus{
  outline:none;
  border-color:rgba(248,241,236,.7);
  background:rgba(248,241,236,.04);
}
.textarea{ min-height:96px; resize:vertical; }

/* radio */
.radio{
  display:flex;
  align-items:center;
  gap:11px;
  padding:5px 0;
  cursor:pointer;
  font-family:var(--ff-body);
  font-size:14.5px;
  color:var(--cream-dim);
}
.radio input{
  appearance:none;
  -webkit-appearance:none;
  width:14px; height:14px;
  margin:0;
  border:1px solid var(--cream-line);
  border-radius:50%;
  flex:0 0 auto;
  transition:border-color .25s;
}
.radio input:checked{
  border-color:var(--cream);
  background:radial-gradient(circle at center, var(--cream) 0 3.5px, transparent 4px);
}
.radio:hover input{ border-color:rgba(248,241,236,.7); }

/* chrome ---------------------------------------------------- */
.progress{
  position:fixed;
  right:7px; top:0;
  width:1px; height:100vh;
  background:rgba(58,35,40,.10);
  z-index:55;
  pointer-events:none;
}
.progress__bar{
  display:block;
  width:2px; height:100%;
  transform-origin:top center;
  transform:scaleY(0);
  background:linear-gradient(to bottom, rgba(101,37,52,.15), rgba(101,37,52,.72));
  margin-left:-.5px;
}
.sound-btn{
  position:fixed;
  right:20px; bottom:22px;
  z-index:60;
  width:46px; height:46px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(58,35,40,.10);
  background:rgba(250,246,242,.92);
  backdrop-filter:blur(6px);
  color:var(--maroon);
  cursor:pointer;
  box-shadow:0 6px 22px -8px rgba(58,35,40,.35);
  transition:transform .4s var(--e-expo), opacity .4s;
}
.sound-btn:hover{ transform:scale(1.06); }
.sound-btn svg{ width:17px; height:17px; display:block; }
.sound-btn .ico-off{ display:none; }
.sound-btn[aria-pressed="false"] .ico-on{ display:none; }
.sound-btn[aria-pressed="false"] .ico-off{ display:block; }
@media (min-width: 1440px){ .sound-btn{ right:32px; bottom:30px; } }

/* reveal --------------------------------------------------- */
.js [data-reveal]{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity 1.15s var(--e-soft), transform 1.3s var(--e-expo);
  will-change:opacity, transform;
}
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal="mask"]{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.4s var(--e-expo);
}
.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
}
.js [data-stagger] > *{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .95s var(--e-soft), transform 1.05s var(--e-expo);
}
.js [data-stagger].is-in > *{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js [data-reveal], .js [data-stagger] > *{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  .progress,.sound-btn{ display:none; }
}

/* utils ----------------------------------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.center{ text-align:center; }
.stack > * + *{ margin-top:18px; }
.no-scroll{ overflow:hidden; }

/* white-keyed engravings exported for multiply compositing */
img[src$="villa-medallion.png"],
img[src$="garland.png"],
img[src$="banquet.png"],
img[src$="dress-frame.png"],
img[src$="hotel-ornament-1.png"],
img[src$="hotel-ornament-2.png"],
img[src$="icon-welcome.png"],
img[src$="icon-ceremony.png"],
img[src$="icon-cocktail.png"],
img[src$="icon-dinner.png"],
img[src$="icon-dancing.png"]{ mix-blend-mode:multiply; }