@font-face {
  font-family:'Great Vibes';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/great-vibes.9d76b8c67f.ttf') format('truetype');
}
:root {
  --paper:#f5f0e6;
  --background:#e9e1d4;
  --ink:#342822;
  --muted:#6a5d52;
  --wax:#6d1f2b;
  --gold:#9a753e;
  --line:#b5a384;
  --botanical:#69735e;
  font-family:Georgia,'Times New Roman',serif;
  color:var(--ink);
  background:var(--background);
  font-synthesis:none;
  scroll-behavior:smooth
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-underline-offset:5px
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:default
}
a,button {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--wax);
  outline-offset:6px
}
h1:focus {
  outline:none
}
[hidden] {
  display:none!important
}
.eyebrow,.wordmark,.caption,.footer-caption,.event-number,.pending-note,.draft-banner,.opening-footer,.envelope-label,.letter-label {
  font-family:Arial,Helvetica,sans-serif
}
.eyebrow {
  display:block;
  font-size:10px;
  letter-spacing:.24em;
  line-height:1.8
}
.wordmark {
  font-size:10px;
  letter-spacing:.2em;
  text-decoration:none
}
.draft-banner {
  background:var(--wax);
  color:var(--paper);
  padding:10px 20px;
  text-align:center;
  font-size:10px;
  letter-spacing:.14em;
  line-height:1.7
}
.draft-banner span {
  margin-left:12px;
  letter-spacing:.02em;
  font-size:11px
}
.site-header {
  padding:28px clamp(22px,5vw,80px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #9a753e24;
  gap:20px
}
.site-header>a:last-child {
  font-size:13px;
  text-decoration:none;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:20px
}
.hero {
  min-height:760px;
  min-height:min(900px,100svh);
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:var(--paper);
  background-image:url('../assets/paper.da16ae8661.webp')
}
.hero-inner {
  position:relative;
  z-index:1;
  padding:100px 24px 80px;
  text-align:center;
  max-width:850px;
  margin:auto;
  width:100%
}
h1 {
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.045em;
  font-size:clamp(40px,7.5vw,88px);
  margin:34px 0;
  overflow-wrap:anywhere
}
h1>span {
  display:block
}
h1 em {
  display:block;
  font-size:.48em;
  line-height:1.8;
  font-weight:400;
  color:var(--gold);
  letter-spacing:0
}
.gold-rule {
  height:1px;
  width:80px;
  background:var(--gold);
  margin:32px auto
}
.invitation-line {
  max-width:480px;
  margin:24px auto;
  font-size:18px;
  line-height:1.8;
  overflow-wrap:anywhere
}
.family-line {
  font-size:16px;
  line-height:1.7;
  max-width:480px;
  margin:20px auto
}
.principal-date {
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  letter-spacing:.18em;
  line-height:1.8;
  margin-top:30px
}
.scroll-link {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  min-height:44px;
  margin-top:38px;
  font-size:13px;
  text-decoration:none
}
.scroll-link span {
  font-size:22px;
  color:var(--gold)
}
.hero-botanical {
  position:absolute;
  bottom:-70px;
  left:-70px;
  max-width:440px;
  width:45%;
  height:auto;
  opacity:.75;
  pointer-events:none
}
.section {
  padding:96px clamp(22px,7vw,120px);
  max-width:1440px;
  margin:auto;
  scroll-margin-top:30px
}
.section-intro {
  max-width:600px;
  margin:0 auto 58px;
  text-align:center
}
h2 {
  font-weight:400;
  letter-spacing:-.035em;
  font-size:clamp(34px,4.5vw,54px);
  line-height:1.15;
  margin:20px 0
}
.section-intro p {
  color:var(--muted);
  font-size:17px;
  line-height:1.7
}
.events-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:28px;
  max-width:1020px;
  margin:auto
}
.event-card {
  background:var(--paper);
  padding:clamp(28px,5vw,56px);
  border:1px solid #b5a38475;
  position:relative;
  overflow-wrap:anywhere
}
.event-card:before {
  content:'';
  position:absolute;
  inset:8px;
  border:1px solid #b5a38440;
  pointer-events:none
}
.event-number {
  display:flex;
  gap:18px;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.12em
}
.event-number span {
  font-size:9px;
  letter-spacing:.18em
}
.event-card h3 {
  font-size:clamp(28px,4vw,40px);
  font-weight:400;
  margin:38px 0 18px;
  line-height:1.2
}
.event-date {
  font-size:17px;
  line-height:1.8
}
.event-date span {
  color:var(--muted);
  font-size:15px
}
.venue {
  margin:32px 0 0;
  padding-top:28px;
  border-top:1px solid #b5a38460
}
.venue h4 {
  font-weight:400;
  font-size:22px;
  margin:12px 0
}
.address {
  font-size:16px;
  line-height:1.7;
  white-space:pre-line;
  user-select:text
}
.detail {
  line-height:1.7;
  font-size:16px
}
.detail strong {
  font-weight:400;
  color:var(--muted);
  font-size:13px
}
.event-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 24px;
  margin-top:26px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  background:var(--wax);
  color:var(--paper);
  border:1px solid var(--wax);
  padding:16px 26px;
  text-decoration:none;
  font-size:14px;
  min-height:48px;
  transition:transform .15s,background .15s
}
.button:hover {
  background:#531821
}
.button:active {
  transform:scale(.98)
}
.small {
  padding:12px 20px
}
.text-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:44px;
  padding:10px 0;
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:14px
}
.pending-note {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin:24px 0 0
}
.rsvp,.contact {
  text-align:center;
  border-top:1px solid #9a753e35;
  max-width:1000px
}
.rsvp .button {
  margin-top:18px
}
.caption {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  max-width:380px;
  margin:20px auto
}
.contact p {
  line-height:1.7
}
footer {
  padding:72px 24px 40px;
  text-align:center;
  background:var(--paper);
  border-top:1px solid #b5a38455
}
footer p {
  font-size:21px;
  font-style:italic;
  margin:24px 0
}
.footer-mark {
  font-size:20px;
  letter-spacing:.08em;
  color:var(--gold)
}
.footer-caption {
  display:block;
  font-size:9px;
  letter-spacing:.2em;
  margin-top:48px;
  color:var(--muted)
}
.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
}
.skip-content {
  position:fixed;
  top:8px;
  left:8px;
  background:var(--paper);
  padding:14px;
  z-index:20;
  transform:translateY(-200%)
}
.skip-content:focus {
  transform:none
}
/* The optional native dialog is installed only after working JS controls exist. */dialog {
  border:0;
  margin:0;
  padding:0;
  max-width:none;
  max-height:none;
  width:100%;
  height:100%;
  height:100svh;
  background:var(--background);
  color:var(--ink);
  overflow:auto
}
dialog::backdrop {
  background:var(--background)
}
body.opening-active {
  overflow:hidden
}
.opening-top {
  position:relative;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:22px clamp(20px,4vw,56px);
  padding-top:max(22px,env(safe-area-inset-top))
}
.opening-top a {
  display:inline-flex;
  align-items:center;
  gap:18px;
  min-height:44px;
  font-size:13px;
  text-decoration:none;
  border-bottom:1px solid #9a753e50
}
.opening-composition {
  display:flex;
  align-items:center;
  flex-direction:column;
  min-height:calc(100% - 150px);
  justify-content:center;
  padding:12px 20px 30px
}
.opening-eyebrow {
  text-align:center;
  color:var(--muted);
  font-size:9px;
  margin:0 0 26px
}
.scene {
  width:min(78vw,360px,calc((100svh - 320px)*.8));
  min-width:150px;
  aspect-ratio:4/5;
  flex:none;
  container-type:inline-size;
  position:relative
}
.envelope {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:none;
  border:0;
  padding:0;
  isolation:isolate
}
.envelope:focus-visible {
  outline-offset:15px
}
.envelope-art {
  display:block;
  position:absolute;
  inset:0;
  transform-style:flat;
  filter:none
}
.paper {
  background-color:var(--paper);
  background-image:url('../assets/paper.da16ae8661.webp');
  background-size:340px 340px
}
.envelope-back {
  position:absolute;
  inset:0;
  box-shadow:0 18px 32px #34282220,0 2px 4px #34282215;
  border:1px solid #d4c8b5;
  border-radius:2px
}
.envelope-lining {
  position:absolute;
  inset:3px;
  background:#d7d9c9 url('../assets/lining.8e8cfbf40e.webp') center/cover
}
.letter {
  position:absolute;
  inset:5% 6% 3%;
  z-index:2;
  border:1px solid #d4c8b5;
  box-shadow:0 1px 7px #34282215;
  display:block
}
.letter-border {
  position:absolute;
  inset:6%;
  border:1px solid #b5a38480;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:18%
}
.letter-label {
  font-size:clamp(6px,1.5vw,8px);
  letter-spacing:.18em
}
.letter-monogram {
  font-size:clamp(15px,4vw,26px);
  margin:28px 0 12px;
  color:var(--gold)
}
.letter-rule {
  width:35px;
  height:1px;
  background:var(--gold);
  margin:12px 0 25px
}
.pocket {
  position:absolute;
  inset:0;
  z-index:4;
  clip-path:polygon(0 0,50% 43%,100% 0,100% 100%,0 100%);
  background-image:linear-gradient(151deg,transparent 49.8%,#b5a38422 50%,transparent 50.4%),linear-gradient(209deg,transparent 49.8%,#b5a38422 50%,transparent 50.4%),url('../assets/paper.da16ae8661.webp');
  border:1px solid #d6cab7
}
.envelope-label {
  position:absolute;
  bottom:12%;
  left:0;
  right:0;
  text-align:center;
  font-size:8px;
  letter-spacing:.24em;
  color:var(--muted)
}
.embossed-sprig {
  position:absolute;
  inset:47% 20% 13%;
  background:url('../assets/emboss.16e7be64e9.svg') center/contain no-repeat;
  opacity:.6
}
.flap {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:43%;
  z-index:5;
  transform-origin:50% 0;
  transform-style:flat
}
.flap-front,.flap-inside {
  position:absolute;
  inset:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  backface-visibility:visible;
  -webkit-backface-visibility:visible
}
.flap-front {
  background-color:#f0e9dd;
  background-image:linear-gradient(#ffffff18,#b5a3841f),url('../assets/paper.da16ae8661.webp')
}
.flap-inside {
  opacity:0;
  background:#d7d9c9 url('../assets/lining.8e8cfbf40e.webp') center/cover
}
.seal {
  display:grid;
  place-items:center;
  position:absolute;
  width:29%;
  height:23.2%;
  top:31.4%;
  left:35.5%;
  z-index:6;
  background:radial-gradient(circle,#762331 50%,#5e1824 63%,transparent 64%);
  border-radius:45%;
  filter:drop-shadow(1px 3px 2px #34282230)
}
.seal img {
  position:absolute;
  inset:-8%;
  width:116%;
  height:116%;
  object-fit:contain
}
.seal-monogram {
  position:relative;
  color:#e5b395;
  opacity:.8;
  letter-spacing:.015em;
  font-size:clamp(8px,2vw,12px);
  max-width:80%;
  overflow-wrap:anywhere;
  text-shadow:0 1px 1px #3e0a19;
  text-align:center
}
.envelope:active .seal {
  filter:brightness(.97)
}
.opening-copy {
  text-align:center;
  margin-top:30px;
  position:relative;
  z-index:8;
  pointer-events:none
}
.opening-copy h2 {
  font-size:clamp(22px,3.2vw,30px);
  line-height:1.35;
  letter-spacing:-.025em;
  margin:0
}
.opening-copy h2 em {
  font-weight:400
}
.opening-copy p {
  font-family:Arial,Helvetica,sans-serif;
  font-size:10px;
  letter-spacing:.13em;
  color:var(--muted);
  margin:20px 0 16px
}
.tiny-rule {
  display:block;
  width:22px;
  height:1px;
  margin:auto;
  background:var(--gold)
}
.opening-footer {
  text-align:center;
  font-size:8px;
  letter-spacing:.23em;
  color:var(--muted);
  padding:0 20px max(20px,env(safe-area-inset-bottom));
  margin:0
}
.is-animating .envelope-art,.is-animating .seal,.is-animating .flap,.is-animating .letter {
  will-change:transform,opacity
}
@media(min-width:900px) {
  .scene {
    width:min(340px,calc((100svh - 330px)*.8))
  }
  .opening-copy {
    margin-top:38px
  }
  .opening-eyebrow {
    margin-bottom:32px
  }
}
@media(max-width:480px) {
  .draft-banner span {
    display:block;
    margin-left:0
  }
  .site-header {
    padding:16px 20px
  }
  .site-header .wordmark {
    font-size:8px;
    letter-spacing:.13em
  }
  .site-header>a:last-child {
    font-size:12px;
    gap:8px
  }
  .hero {
    min-height:700px;
    min-height:calc(100svh - 100px)
  }
  .hero-inner {
    padding:70px 22px
  }
  .hero-botanical {
    width:65%;
    bottom:-20px;
    left:-55px;
    opacity:.5
  }
  .section {
    padding-top:68px;
    padding-bottom:68px
  }
  .section-intro {
    margin-bottom:36px
  }
  .opening-top .wordmark {
    font-size:8px;
    letter-spacing:.13em
  }
  .opening-top {
    padding:12px 18px
  }
  .opening-top a {
    font-size:12px;
    gap:8px
  }
  .opening-composition {
    min-height:calc(100% - 100px)
  }
  .opening-footer {
    font-size:7px;
    letter-spacing:.15em
  }
  .opening-eyebrow {
    font-size:8px;
    letter-spacing:.17em
  }
}
@media(max-height:600px) {
  .opening-eyebrow {
    margin-bottom:12px
  }
  .opening-copy {
    margin-top:18px
  }
  .opening-copy h2 {
    font-size:20px
  }
  .opening-copy p {
    margin:10px 0
  }
  .opening-composition {
    padding-top:0;
    padding-bottom:16px
  }
  .scene {
    width:min(44vw,calc((100svh - 235px)*.8));
    min-width:110px
  }
  .opening-footer {
    font-size:7px
  }
  .letter-monogram {
    margin:12px 0 0
  }
  .letter-rule {
    margin:8px 0
  }
  .envelope-label {
    font-size:6px
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
@media print {
  dialog,.draft-banner,.site-header,.skip-content,#replay,.scroll-link {
    display:none!important
  }
  .hero {
    min-height:0
  }
  .hero-inner {
    padding:35px
  }
  .section {
    padding:30px
  }
  .event-card {
    break-inside:avoid
  }
  .hero-botanical {
    display:none
  }
}
/* Keep the bypass and opening instructions in view on short screens. */dialog[open] {
  display:grid;
  grid-template-rows:auto 1fr auto
}
.opening-composition {
  min-height:0
}
@media(min-width:900px) {
  .scene {
    width:min(340px,calc((100svh - 360px)*.8))
  }
}
.hero {
  background-image:linear-gradient(#f5f0e680,#f5f0e680),url('../assets/paper.da16ae8661.webp');
  background-size:340px 340px
}

/* Each word stays intact during its entrance; spaces still wrap naturally. */
.reveal-word {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  transform-origin: 15% 100%;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .scroll-link span { transition: transform .35s ease; }
  .scroll-link:hover span { transform: translateY(5px); }
  .text-button { transition: color .25s ease, border-color .25s ease; }
  .text-button:hover { color: var(--wax); border-color: var(--wax); }
}
.guest-welcome { font: italic 19px/1.6 Georgia,serif; color:var(--wax); margin:0 auto 30px; max-width:450px; overflow-wrap:anywhere; }
.guest-note { max-width:430px; font-size:17px; font-style:italic; color:var(--muted); line-height:1.8; margin:24px auto; overflow-wrap:anywhere; }
/* The monogram scales with the envelope, not the wider phone viewport. */
.seal-monogram {
  font-size:clamp(10px,6cqw,22px);
  line-height:1;
  letter-spacing:.015em;
  white-space:nowrap;
  overflow-wrap:normal;
  max-width:none;
}
.invitation-lead { max-width:480px; margin:26px auto; font-size:18px; line-height:1.8; }
.opening-copy h2 { overflow-wrap:anywhere; }
@media(max-width:480px) {
  .opening-top { padding-top:max(12px,env(safe-area-inset-top)); }
  .opening-eyebrow { margin-bottom:36px; }
}
.envelope-label { overflow-wrap:anywhere; padding:0 10px; line-height:1.8; }
.opening-copy { max-width:440px; width:100%; }

/* Flowing calligraphy and restrained gold details inspired by wedding stationery. */
h1 {
  font-family:'Great Vibes',Georgia,serif;
  font-size:clamp(48px,9vw,100px);
  line-height:1.3;
  letter-spacing:normal;
}
h1 em { font-family:Georgia,serif; font-size:.3em; line-height:1.6; }
h1 .reveal-word { overflow-wrap:normal; }
.hero-inner::before {
  content:'';
  position:absolute;
  inset:30px 12px;
  border:1px solid #9a753e40;
  border-radius:48% 48% 4px 4px / 180px 180px 4px 4px;
  pointer-events:none;
  z-index:-1;
}
.gold-rule {
  width:170px;
  height:28px;
  background:url('../assets/wedding-flourish.6fb1241766.svg') center/contain no-repeat;
  margin:22px auto;
}
.event-card { border-top:3px solid var(--gold); }
@media(max-width:480px) {
  h1 { font-size:clamp(44px,12.8vw,61px); margin:26px 0; }
  .hero-inner::before { inset:18px 10px; border-radius:48% 48% 4px 4px / 110px 110px 4px 4px; }
}

.invitation-status { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:30px; text-align:center; line-height:1.7; }