@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Instrument+Serif:ital@0;1&display=swap');

@font-face {
  font-family: "Great Vibes";
  src: url("great-vibes.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --cream: #fff7e7;
  --paper: #f3ead7;
  --ink: #34372a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Pinyon Script", "Great Vibes", "Instrument Serif", Georgia, serif;
  --display: "Instrument Serif", Georgia, serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: #161b15; color: var(--cream); font-family: var(--serif); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--cream); outline-offset: 8px; }
h1, p { margin: 0; }
h1:focus { outline: none; }

.scene {
  min-height: 100vh;
  min-height: 100svh;
  padding: 42px 20px;
  isolation: isolate;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  overflow: hidden;
}
.scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(22,24,16,.19) 20%, rgba(12,15,12,.54) 100%),
    linear-gradient(rgba(14,19,14,.31), rgba(14,19,14,.31)),
    url("florals.webp") center 48% / cover,
    #22291c;
}
.small {
  font-size: clamp(.78rem, 2.6vw, .98rem);
  font-weight: 600;
  letter-spacing: .23em;
  text-transform: uppercase;
}
.announcement { margin-bottom: 14px; }
.cover h1 {
  font: 400 clamp(3.1rem, 11.5vw, 7.1rem)/1.15 var(--script);
  padding-inline: .12em;
  text-shadow: 0 2px 23px #121810;
}
.cover h1 span { display: inline-block; }
.cover h1 .ampersand { font-size: .66em; padding-inline: .08em; }
.open-link { display: grid; justify-items: center; gap: 32px; margin-top: clamp(35px, 7vh, 66px); }
.envelope {
  position: relative;
  display: block;
  width: min(404px, 79vw);
  aspect-ratio: 1.49;
  border-radius: 4px;
  perspective: 950px;
  background: #dadad6;
  box-shadow: 0 22px 65px #090d08bd, 0 4px 10px #0e110c80;
  transition: transform .35s;
}
.open-link:hover .envelope { transform: translateY(-5px); }
.letter, .folds, .flap { position: absolute; inset: 0; border-radius: inherit; }
.letter {
  inset: auto 8% 6%;
  aspect-ratio: 1.39;
}
.folds {
  background:
    linear-gradient(146deg, transparent 49.5%, #dededb 50%, #f8f8f6 51%, transparent 52%) left bottom / 52% 100% no-repeat,
    linear-gradient(214deg, transparent 49.5%, #dededb 50%, #fafaf9 51%, transparent 52%) right bottom / 52% 100% no-repeat,
    linear-gradient(155deg, #fff, #ececea 70%, #fafaf9);
}
.flap {
  background: linear-gradient(180deg, #fcf5e9 5%, #ede0c8 73%, #c7b596 100%);
  clip-path: polygon(0 0,100% 0,100% 3%,53% 63%,50% 65%,47% 63%,0 3%);
  transform-origin: top;
}
.seal {
  position: absolute;
  top: 60%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 17%;
  aspect-ratio: .92;
  transform: translate(-50%, -50%);
  border-radius: 46% 53% 42% 55% / 51% 43% 57% 46%;
  background:
    radial-gradient(ellipse at 20% 19%, #fff 0, transparent 51%),
    radial-gradient(ellipse at 75% 23%, #fcfcf9 0, transparent 42%),
    linear-gradient(143deg, #f9f9f6 10%, #e2e2da 75%, #fdfdfb);
  box-shadow: 2px 5px 7px #29292354, inset 2px 2px 3px #fff, inset -2px -3px 4px #9a9a8a69;
}
.seal::before {
  content: "";
  position: absolute;
  inset: 13% 14%;
  border-radius: 47% 50% 46% 49% / 48% 45% 53% 51%;
  background: radial-gradient(ellipse at 63% 70%, #fbfbf9, #edede7);
  box-shadow: inset 2px 2px 4px #85857a73, inset -2px -2px 3px #fff, 0 1px 2px #fff;
}
.seal-monogram {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .12em;
  font: italic 400 clamp(.67rem, 3.2vw, 1.08rem)/.9 Georgia, serif;
  color: #74746a;
  text-shadow: 0 1px #fff;
}
.seal-monogram > span { display: block; width: 1.1em; text-align: center; }
.open-label, .back { padding: 0 3px 7px; border-bottom: 1px solid #f6ead096; }
.open-link:hover .open-label, .back:hover { border-bottom-color: var(--cream); }

.reveal { display: none; padding: 0; align-content: start; justify-items: stretch; }
.reveal:target { display: block; }
.reveal:target + .cover { display: none; }
.reveal::before { content: none; }
.reveal-hero {
  width: 100%;
  display: grid;
  justify-items: center;
  padding: clamp(62px, 10vw, 105px) 0 clamp(52px, 11vw, 96px);
  background: linear-gradient(#10150e52, #10150e88), url("florals.webp") 54% center / cover, #22291c;
}
.stationery {
  --lace: clamp(22px, 6.1vw, 39px);
  isolation: isolate;
}
.stationery::before, .stationery::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.stationery::before {
  inset: calc(var(--lace) * .72);
  background: repeating-linear-gradient(0deg, #86868608 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 45% 34%, #fff, #f3f3f1);
}
.stationery::after {
  inset: 0;
  border: var(--lace) solid transparent;
  border-image: url("card-lace.png") 80 round;
}
.letter { --lace: clamp(16px, 4.4vw, 29px); }
.card {
  position: relative;
  color: #191917;
  width: min(540px, 90%);
  aspect-ratio: 1.39;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: calc(var(--lace) + 4px) calc(var(--lace) + 6px);
  transform-origin: top left;
  filter: drop-shadow(0 8px 18px #0a0d0890);
}
.card h1 { font: 400 clamp(2.1rem, 10.5vw, 4.45rem)/1.12 var(--script); white-space: nowrap; }
.card-names, .date, .location, .formal { font-variant: small-caps; font-weight: 500; }
.card-names, .date { margin-top: 12px; font-size: clamp(1.1rem, 5vw, 1.8rem); }
.reveal-details { margin-top: clamp(22px, 6vw, 42px); padding: 0 16px; text-shadow: 0 2px 10px #10130e; }
.join { font: 400 clamp(1.8rem, 7.3vw, 3.8rem)/1.2 var(--script); }
.location { margin-top: 10px; font-size: clamp(1.3rem, 5.3vw, 2rem); }
.formal { margin-top: 22px; font-size: clamp(1rem, 4.8vw, 1.55rem); }
.reveal-footer { width: 100%; background: #f6f6f4; color: #161616; padding: 32px 16px 30px; }
.countdown { margin: 0 auto 26px; max-width: 500px; }
.countdown-title { margin-top: 19px; font: 400 clamp(1.25rem, 5.1vw, 2rem)/1.2 var(--serif); }
.countdown-values { display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); }
.countdown-values > div { position: relative; }
.countdown-values span, .countdown-values > div:not(:last-child)::after {
  font: 400 clamp(1.85rem, 10vw, 4.7rem)/1.02 Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown-values span { display: block; }
.countdown-values > div:not(:last-child)::after {
  content: ":";
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(50%);
}
.countdown-values small { display: block; margin-top: 9px; text-transform: uppercase; font-size: clamp(.67rem, 3.15vw, .94rem); }
.back { display: inline-block; border-color: #7b7769; }
.back:hover, .back:focus-visible { border-color: #282c23; outline-color: #282c23; }
.back span { margin-right: 5px; }

.is-opening .flap { animation: lift .48s ease-in-out forwards; z-index: 1; }
.is-opening .seal { animation: dissolve .32s ease forwards; z-index: 2; }
.is-opening .letter { animation: slide .56s .18s ease-out both; z-index: 3; }
.announcement,
.cover h1 span,
.open-label,
.reveal:target .card-names,
.reveal:target .reveal-details > :not(.join) {
  animation: ink-in 1.05s cubic-bezier(.2,.65,.25,1) var(--fade-delay, .12s) both;
}

.cover .first-name { --fade-delay: .32s; }
.cover .ampersand { --fade-delay: .48s; }
.cover .second-name { --fade-delay: .62s; }
.open-label { --fade-delay: .93s; }
.card-names { --fade-delay: 1.32s; }
.location { --fade-delay: 2.55s; }
.formal { --fade-delay: 1.07s; }

@keyframes ink-in {
  from { opacity: 0; transform: translateY(7px); }
}
@keyframes lift { to { transform: rotateX(167deg); } }
@keyframes dissolve { to { opacity: 0; } }
@keyframes slide { to { transform: translateY(-46%); } }

@media (max-width: 480px) {
  .scene::before { background-position: center, center, 53% center; }
  .open-link { gap: 25px; }
  .cover h1 { font-size: clamp(2.65rem, 11.5vw, 3.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.cover {
  padding-block: clamp(48px, 8svh, 82px);
}
.cover::before {
  background:
    linear-gradient(#12151037, #10140e60),
    url("florals.webp") 37% center / cover,
    #22291c;
}
.cover .announcement, .cover .open-label {
  font-weight: 500;
  letter-spacing: .04em;
  font-size: clamp(1rem, 4.4vw, 1.31rem);
  text-shadow: 0 2px 9px #151710;
}
.cover .announcement { margin-bottom: clamp(19px, 4vw, 29px); }
.cover h1 {
  font-size: clamp(3.55rem, 14vw, 5.3rem);
  line-height: .99;
}
.cover h1 .second-name { display: block; margin-top: .1em; }
.cover .open-link { margin-top: clamp(28px, 5vw, 47px); gap: clamp(22px, 5vw, 36px); }
.cover .open-label { border-bottom-color: transparent; }
.cover .open-link:hover .open-label { border-bottom-color: var(--cream); }
.cover .envelope { width: min(425px, 83vw); aspect-ratio: 1.46; }
.flap {
  background: none;
  clip-path: none;
}
.flap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, #57575108 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #fff 4%, #f6f6f4 61%, #e1e1dc 100%);
  clip-path: polygon(0 0,100% 0,100% 3%,52% 61%,50% 63%,48% 61%,0 3%);
}
.flap-lace {
  position: absolute;
  top: 1%;
  width: 64%;
  height: 10%;
  background: url("envelope-lace.png") left center / auto 100% repeat-x;
  filter: drop-shadow(0 2px 1px #6e6e6555);
}
.flap-lace.left { left: 0; transform: rotate(39deg); transform-origin: left top; }
.flap-lace.right { right: 0; transform: rotate(-39deg); transform-origin: right top; }
.venue-address {
  display: inline-block;
  margin-top: 6px;
  font-size: clamp(1rem, 4.7vw, 1.34rem);
  line-height: 1.23;
  text-decoration: underline;
  text-decoration-color: #fff7e773;
  text-underline-offset: 4px;
  --fade-delay: 2.8s;
}
.venue-address:hover { text-decoration-color: var(--cream); }
.reveal-details .formal { --fade-delay: 3.02s; }

@font-face {
  font-family: "Pinyon Script";
  src: url("pinyon-script.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
.cover h1 { font-family: "Pinyon Script", var(--script); line-height: 1.05; }
.type-line { display: inline-block; position: relative; }
.type-preview { display: none; position: absolute; inset: 0; text-align: left; white-space: pre; }
.is-typing .type-original { opacity: 0; }
.is-typing .type-preview { display: block; }
.join { font-size: clamp(1.42rem, 7.1vw, 3.55rem); }
.cover .first-name { --fade-delay: .44s; }
.cover .ampersand { --fade-delay: .64s; }
.cover .second-name { --fade-delay: .84s; }
.cover .open-label { --fade-delay: 1.21s; }
@media (prefers-reduced-motion: reduce) {
  .is-typing .type-original { opacity: 1; }
  .is-typing .type-preview { display: none; }
}