/* One palette sampled from the generated envelope's unembellished paper.
   Keep physical highlights/shadows in the artwork; all UI uses these tokens. */
:root{
  color-scheme:light;
  --burgundy:#6c2e31;
  --burgundy-rgb:108 46 49;
  --burgundy-dark:#4e181a;
  --ink:var(--burgundy);
  --names:var(--serif);
  --rose:#9a5d58;
  --muted:#775052;
  --gold:#a47b41;
  --paper:#fcf5ec;
  --letter-paper:#fff9ef;
}
html{background:var(--burgundy)}
html[data-invitation-state="open"]{background:var(--paper)}
body{background:var(--burgundy);color:var(--ink)}
body.invitation-closed{background:var(--burgundy);overscroll-behavior:none}
main,.date-section,.celebration-section,.closing-section{background-color:var(--paper)}
.letter-section{background:var(--paper)}
.section-intro,.text-button,.countdown>p,.countdown-values small,.date-unit,.family-parents,.schedule-event p,.closing-tagline{color:var(--muted)}
.eyebrow,.script-heading,.date-value,.family-name,.closing-love>span,.venue-arch h3,.schedule-time,.schedule-event h3{color:var(--burgundy)}
.invitation-letter{background:var(--letter-paper)}
.invitation-letter>p,.invitation-letter h3,.invitation-letter em{color:var(--burgundy)}
.invitation-letter>p{color:var(--muted)}
.letter-back{background:var(--burgundy) url('/assets/wedding-v2/embossed-envelope.webp') center top/cover no-repeat}
.letter-front{background:var(--burgundy) url('/assets/wedding-v2/embossed-envelope.webp') center bottom/100% auto no-repeat}
.letter-front>span,.letter-front>small{color:#f8e3be}
.music-toggle{background:var(--burgundy);border-color:#c4a46c;box-shadow:0 2px 15px rgb(var(--burgundy-rgb)/15%)}
.outline-button{color:var(--burgundy)}
.outline-button:hover{background:var(--burgundy);color:var(--paper)}
/* Fill Safari's changing visual viewport instead of leaving an svh strip. */
.opening{height:100dvh;background:var(--burgundy)}
.envelope-scene{width:max(100cqw,56.25dvh);height:max(100dvh,177.778cqw)}
.cover-hint{bottom:calc(38px + env(safe-area-inset-bottom,0px))}
/* No circular outline on touch or programmatic focus. Keyboard navigation
   retains an image highlight and an underlined instruction, without a ring. */
.opening:focus,.seal-button:focus,.seal-button:focus-visible{outline:none;box-shadow:none}
.seal-button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.seal-button:focus-visible img{filter:brightness(1.2) drop-shadow(0 0 6px #e3c18b80)}
.opening:has(.seal-button:focus-visible) .cover-hint p{text-decoration:underline;text-underline-offset:5px}
@media(max-width:760px){body,body.invitation-open{background:var(--paper)}body.invitation-closed{background:var(--burgundy)}}

/* One typeface for both partners and every monogram, including the seal. */
.family-name,.letter-signoff>span,.closing-love>span,.letter-front>span,.letter-front>span i,.footer-monogram,.footer-monogram>span,.seal-monogram{
  font-family:var(--names);font-weight:400;font-style:normal;
}
.family-name{font-size:42px;line-height:1.2}
.closing-love>span{font-size:42px}
.letter-front>span{letter-spacing:2px}
.letter-front>span i,.footer-monogram>span{font-style:italic}
.footer-monogram{letter-spacing:3px}
.footer-monogram>span{display:inline-block;margin:0 6px}
.seal-face{position:relative;display:block;width:100%;height:100%}
.seal-monogram{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.1em;padding-top:.04em;font-size:clamp(32px,9cqw,58px);line-height:1;color:#e6c17c;text-shadow:0 1px 1px #4e181a,0 -1px 0 #fff0c7;pointer-events:none}
.seal-monogram i{font-size:.6em;font-style:italic}
@media(max-width:370px){.family-name,.closing-love>span{font-size:38px}}