:root {
  color-scheme: light;
  font-family: Georgia, "Times New Roman", serif;
  color: #514c43;
  background: #f5f2ec;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --envelope-width: max(100%, 100dvh);
  --flap-height: 55dvh;

  /* Opening delays, measured from the click. */
  --decoration-hide-delay: 0s;
  --flap-open-delay: 0.15s;
  --bottom-slide-delay: 0.55s;
  --top-slide-delay: 0.55s;
  --cover-hide-delay: 1.95s;

  /* Closing delays, measured from the replay click. */
  --flap-close-delay: 1s;
  --seal-return-delay: 1.8s;
  --caption-return-delay: 1.8s;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 280px;
  overflow: hidden;
}

body:has(input:checked) {
  overflow: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid #796746;
  outline-offset: 6px;
}

/* The native checkbox is the only state: all motion is handled by CSS. */
.toggle,
.toggle input,
.envelope-hit-area {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.toggle {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  justify-content: center;
  min-width: 194px;
  padding: 15px 24px;
  border: 1px solid #ada08c;
  border-radius: 3px;
  font:
    12px Arial,
    sans-serif;
  letter-spacing: 0.035em;
  background: #fcfaf6;
  box-shadow: 0 3px 16px #514c4310;
}

.toggle:hover {
  background: #ede6db;
}

.toggle:focus-within {
  outline: 2px solid #796746;
  outline-offset: 5px;
}

.toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.toggle span span {
  margin-left: 15px;
}

.when-open {
  display: none;
}

body:has(input:checked) .when-closed {
  display: none;
}

body:has(input:checked) .when-open {
  display: inline;
}

/* Fill wide viewports; center and crop the sides on narrow viewports. */
.cover {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  visibility: visible;
  transition: visibility 0s;
}

.lower-shell {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--envelope-width);
  height: 100dvh;
  transform: translate(-50%, 0);
  transition: transform 0.95s var(--ease);
}

.fold {
  position: absolute;
  inset: 0;
}

.fold-left {
  background: linear-gradient(110deg, #e8decd, #ded1bd);
  clip-path: polygon(0 0, 50% 55%, 0 100%);
}

.fold-right {
  background: linear-gradient(250deg, #e8decd, #d8cbb6);
  clip-path: polygon(100% 0, 50% 55%, 100% 100%);
}

.fold-bottom {
  background: linear-gradient(0deg, #e8ddcb, #f0e7d8);
  clip-path: polygon(0 100%, 50% 55%, 100% 100%);
}

.upper-shell {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--envelope-width);
  /* The flap hinges directly on the viewport's top edge. */
  height: 0;
  perspective: 1600px;
  z-index: 2;
  transform: translate(-50%, 0);
  transition: transform 0.95s var(--ease);
}

.flap {
  position: absolute;
  top: 100%;
  width: 100%;
  height: var(--flap-height);
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: rotateX(0deg);
  /* On replay, return the shell before closing the flap. */
  transition: transform 0.8s var(--ease) var(--flap-close-delay);
}

.flap-face {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
}

.flap-front {
  background: linear-gradient(#f0e6d6, #e0d2bb);
}

/* Mirror the back triangle so it occupies the same surface as the front. */
.flap-back {
  transform: rotateX(180deg);
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  background: linear-gradient(#cfc1aa, #e4d8c5);
}

.seal {
  position: absolute;
  z-index: 3;
  top: var(--flap-height);
  left: 50%;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px double #b29a72;
  background: #c7ae83;
  color: #75603e;
  box-shadow:
    0 3px 5px #63503533,
    inset 0 0 0 4px #d4bf9d;
  transform: translate(-50%, -50%);
  font-size: 26px;
  font-style: italic;
  transition:
    opacity 0.2s var(--seal-return-delay),
    transform 0.2s var(--seal-return-delay);
}

.seal span {
  font-size: 15px;
  margin: 0 2px;
}

.envelope-hit-area {
  position: absolute;
  inset: 0;
  z-index: 4;
  cursor: pointer;
}

/* First flip the top; then pull the lower body down and open flap up. */
body:has(input:checked) .seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition-delay: var(--decoration-hide-delay);
}

body:has(input:checked) .cover-caption {
  opacity: 0;
  transition-delay: var(--decoration-hide-delay);
}

body:has(input:checked) .flap {
  transform: rotateX(-180deg);
  transition-delay: var(--flap-open-delay);
}

body:has(input:checked) .lower-shell {
  transform: translate(-50%, 105dvh);
  transition-delay: var(--bottom-slide-delay);
}

body:has(input:checked) .upper-shell {
  transform: translate(-50%, -105dvh);
  transition-delay: var(--top-slide-delay);
}

body:has(input:checked) .cover {
  visibility: hidden;
  pointer-events: none;
  transition-delay: var(--cover-hide-delay);
}

/* Prevent covered links from receiving focus before the website is revealed. */
main {
  visibility: hidden;
  transition: visibility 0s;
}

body:has(input:checked) main {
  visibility: visible;
}

nav {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px clamp(24px, 6vw, 90px);
}

.monogram {
  font-size: 26px;
  font-style: italic;
}

.monogram span {
  color: #a28c68;
  margin: 0 2px;
}

.hero {
  position: relative;
  overflow: clip;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);

  opacity: 0.15;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-size: clamp(66px, 12vw, 132px);
  font-weight: normal;
  line-height: 0.95;
  margin: 0;
}

h1 span {
  font-size: 0.6em;
  font-style: italic;
  color: #a28c68;
}

.ornament {
  color: #a28c68;
  font-size: 2rem;
  margin: 26px 0 14px;
}

.intro {
  line-height: 1.8;
  color: #8a8277;
  margin: 0;
}

.discover {
  margin-top: 36px;
  font: Arial, sans-serif;
  letter-spacing: 0.08em;
}

.discover span {
  display: block;
  margin-top: 16px;
}

.celebration {
  padding: 95px 24px;
  text-align: center;
  background: #ede7dc;
  scroll-margin-top: 20px;
}

h2 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.1;
  font-weight: normal;
  letter-spacing: -0.035em;
  margin: 0 0 25px;
}

.celebration > p:not(.eyebrow) {
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.8;
  color: #877a67;
}

.details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
  margin: 65px auto;
  gap: 32px;
}

.detail-number {
  font: Arial, sans-serif;
  color: #9b8665;
}

h3 {
  font-weight: normal;
  font-size: 25px;
  margin: 16px 0 10px;
}

.details p {
  color: #877a67;
  line-height: 1.7;
}

.signoff {
  font-style: italic;
}

footer {
  padding: 28px 24px 110px;
  text-align: center;
  font: Arial, sans-serif;
  color: #a29684;
  letter-spacing: 0.08em;
}

@media (max-width: 600px) {
  .details {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cover-caption {
    letter-spacing: 0.03em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}