:root {
  color-scheme: light;
  --paper: #f4e8e3;
  --ink: #5a303a;
  --muted: #79555b;
  --wine: #733d47;
  --line: #c3a19a;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--wine); outline-offset: 10px; }
[hidden] { display: none !important; }
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, #fffaf6a6 0%, transparent 70%),
    radial-gradient(ellipse at 0 100%, #d6adab38, transparent 65%);
}
#experience { position: relative; }
.cover {
  min-height: 100svh; padding: 48px 24px 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.cover-heading { text-align: center; margin-bottom: 42px; transition: opacity .55s ease, transform .7s ease; }
.eyebrow { font-family: Arial, sans-serif; font-size: .875rem; letter-spacing: .19em; text-transform: uppercase; font-weight: 400; line-height: 1.6; }
h1 { font-size: clamp(2.2rem, 4.5vw, 4.5rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.18; margin: 16px 0 0; }
.ampersand { font-style: italic; display: inline-block; color: #94656d; font-size: .8em; margin: 0 .1em; }
.envelope-space { width: min(580px, 80vw); perspective: 1500px; padding-top: 20px; }
.envelope {
  width: 100%; aspect-ratio: 3 / 2; display: block; border: 0; padding: 0;
  position: relative; cursor: pointer; background: transparent;
  transform: translateZ(0) rotate(-3deg); transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .65s ease;
}
.envelope img { width: 100%; height: 100%; object-fit: fill; display: block; }
.envelope-shadow { position: absolute; inset: 0; box-shadow: 0 28px 45px -12px #6c3c3b3b, 0 3px 8px #6134341c; border-radius: 2px; transition: opacity .7s; }
.envelope-interior, .envelope-pocket, .envelope-flap { position: absolute; inset: 0; border-radius: 2px; }
.envelope-interior { z-index: 0; overflow: hidden; }
.envelope-interior img { filter: brightness(.87) saturate(.75); }
.envelope-pocket { z-index: 3; clip-path: polygon(0 0, 50% 66%, 100% 0, 100% 100%, 0 100%); }
.envelope-flap { z-index: 4; transform-origin: center top; clip-path: polygon(0 0, 100% 0, 50% 66%); transition: transform 1s cubic-bezier(.45,.05,.2,1) .22s, filter 1s .22s; }
.little-card {
  position: absolute; left: 7%; top: 9%; width: 86%; height: 85%; z-index: 2;
  background: #fffbf5; color: var(--ink); padding: 7% 5%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  box-shadow: 0 0 0 1px #eee0d4, 0 2px 12px #70424220;
  transition: transform .95s cubic-bezier(.22,1,.36,1) .9s;
}
.little-eyebrow { text-transform: uppercase; font: .875rem/1.4 Arial,sans-serif; letter-spacing: .16em; }
.little-names { font-size: clamp(1.1rem, 3vw, 2.5rem); margin: 6% 0; letter-spacing: -.035em; }
.little-names em { font-weight: 400; font-size: .85em; padding: 0 .1em; }
.little-date { font-size: .875rem; }
.seal { position: absolute; z-index: 5; width: 22%; aspect-ratio: 1; left: 39%; top: 45.5%; filter: drop-shadow(0 4px 3px #53222342); transition: transform .42s ease, opacity .3s ease; }
.seal span, .small-seal span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .16em; color: #f0c5b7; font-size: clamp(1rem, 2vw, 1.4rem); text-shadow: 0 1px #51232e; }
.seal i, .small-seal i { font-size: .7em; }
.cover-footer { text-align: center; margin-top: 42px; transition: opacity .4s ease, transform .5s ease; }
.open-hint { color: var(--wine); font-size: 1rem; letter-spacing: .03em; margin: 0 0 25px; }
.cover-date { font: .875rem/1.6 Arial,sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0; }
@media (hover:hover) {
  .envelope:not(.is-opening):hover { transform: translateY(-5px) rotate(-1deg); }
  .envelope:not(.is-opening):hover .seal { transform: scale(1.04); }
}
.opening .cover-heading { opacity: 0; transform: translateY(-15px); }
.opening .cover-footer { opacity: 0; transform: translateY(10px); }
.envelope.is-opening { transform: rotate(0); pointer-events: none; cursor: default; }
.is-opening .seal { transform: translateY(9px) scale(1.14); opacity: 0; }
.is-opening .envelope-flap { transform: rotateX(180deg); filter: brightness(.9); animation: flap-depth 1.2s forwards; }
.is-opening .little-card { transform: translateY(-56%); }
.opening.leaving .envelope { opacity: 0; transform: translateY(32px) scale(1.04); }
.opening.leaving .envelope-shadow { opacity: 0; }
@keyframes flap-depth { 0%, 60% { z-index: 4; } 61%, 100% { z-index: 1; } }
.invitation { min-height: 100svh; padding: 48px 24px 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.invitation-sheet { width: min(100%, 620px); background: #fffaf4; padding: 17px; box-shadow: 0 18px 70px #77424a10, 0 0 0 1px #eadbd2; }
.invitation-border { border: 1px solid var(--line); padding: 38px clamp(22px,6vw,62px) 30px; text-align: center; position: relative; }
.invitation-eyebrow { margin: 0 0 28px; }
h2 { margin: 0; font-size: clamp(3.3rem, 7vw, 4.8rem); line-height: 1; font-weight: 400; letter-spacing: -.055em; }
h2:focus { outline: none; }
h2 span { display: block; }
h2 em { font-size: .56em; font-weight: 400; display: block; margin: .12em 0 .15em; color: #9b6870; }
.invitation-line { font-size: 1.05rem; font-style: italic; margin: 25px 0 28px; line-height: 1.5; }
.continue-link { display: inline-block; color: var(--wine); font-size: 1rem; line-height: 1.6; text-underline-offset: 5px; margin: 0 0 16px; }
.date-lockup { display: flex; align-items: center; justify-content: center; gap: 25px; margin: 0 auto 30px; }
.date-lockup > span:not(.date-day) { font: .875rem/1.6 Arial,sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.date-day { font-size: 3.3rem; line-height: 1; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 3px 25px 7px; }
.story { font-size: 1rem; line-height: 1.85; margin: 0; color: #66464b; text-wrap: pretty; }
.closing { font-size: 1.05rem; font-style: italic; line-height: 1.6; margin: 24px 0 10px; }
.small-seal { position: relative; width: 70px; height: 70px; margin: 15px auto 0; }
.small-seal img { display: block; width: 100%; height: 100%; }
.small-seal span { font-size: .875rem; }
.replay { background: none; border: 0; border-bottom: 1px solid #b38e91; color: #79555b; padding: 6px 0; font-size: .875rem; cursor: pointer; margin-top: 24px; line-height: 1.5; }
.invitation.is-revealing { animation: reveal-sheet .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes reveal-sheet { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript { position: fixed; inset: auto 15px 15px; background: #fffaf4; color: var(--ink); padding: 20px; line-height: 1.5; text-align: center; }
@media (max-width: 520px) {
  .cover { padding: 40px 22px 30px; }
  .cover-heading { margin-bottom: 50px; }
  .eyebrow { font-size: .875rem; letter-spacing: .12em; }
  h1 { max-width: 310px; font-size: 2.85rem; margin: 19px auto 0; }
  h1 .ampersand { display: block; line-height: 1; margin: .03em 0 .08em; font-size: .56em; }
  .envelope-space { width: min(390px, 86vw); padding-top: 8px; }
  .cover-footer { margin-top: 48px; }
  .open-hint { margin-bottom: 30px; }
  .cover-date { letter-spacing: .065em; }
  .invitation { padding: 24px 16px; }
  .invitation-sheet { padding: 10px; }
  .invitation-border { padding: 30px 18px 22px; }
  .invitation-eyebrow { margin-bottom: 25px; }
  h2 { font-size: clamp(2.7rem, 12vw, 4.2rem); }
  .date-lockup { gap: 16px; }
  .date-day { padding-left: 16px; padding-right: 16px; font-size: 2.8rem; }
  .story { line-height: 1.75; }
}
@media (max-height: 700px) and (min-width: 521px) {
  .cover { padding-top: 22px; padding-bottom: 22px; }
  .cover-heading { margin-bottom: 22px; }
  h1 { font-size: 3rem; }
  .envelope-space { width: min(450px, 65vw); padding-top: 0; }
  .cover-footer { margin-top: 28px; }
  .open-hint { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}