@property --x { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --y { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --r { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --s { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --h { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --flip { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --tx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ty { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --flap { syntax: '<number>'; inherits: true; initial-value: 0; }

/* Defaults = theme "sage-paper". Everything below reads the theme tokens only. */
:root {
  --paper: #f4f0dd; --ink: #33332f; --accent: #738561; --accent2: #a98a52;
  --font-display: "Gilda Display", Georgia, serif; --font-body: "EB Garamond", Georgia, serif; --font-script: "Homemade Apple", cursive;
  --shadow: 44, 36, 24;
  --hi: color-mix(in srgb, var(--paper) 78%, transparent);
  --table: color-mix(in srgb, var(--paper) 82%, var(--ink));
  --env: color-mix(in srgb, var(--accent) 84%, var(--ink));
  --env-lo: color-mix(in srgb, var(--env) 90%, white);
  --env-flap: color-mix(in srgb, var(--env) 94%, white);
  --card-accent: color-mix(in srgb, var(--accent) 55%, var(--ink));
  --lab: var(--accent-ink);
  --rule: color-mix(in srgb, var(--ink) 30%, transparent);
}
html { background: var(--table); overflow-x: clip; }
body { color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.42; overflow-x: clip; }

.track { width: 1px; pointer-events: none; }
.track i { display: block; width: 1px; }
.table { position: fixed; inset: 0; overflow: hidden; background: var(--table) url(/assets/fine-linen.webp) center / cover; background-blend-mode: multiply; }
.pieces { position: absolute; inset: 0; }

.window {
  position: absolute; left: -24%; top: -26%; width: 96%; height: 124%; pointer-events: none; z-index: 90; opacity: .16;
  background:
    radial-gradient(38% 26% at 28% 20%, #fff6dd 34%, transparent 100%),
    radial-gradient(38% 26% at 72% 20%, #fff6dd 34%, transparent 100%),
    radial-gradient(38% 26% at 28% 52%, #fff6dd 34%, transparent 100%),
    radial-gradient(38% 26% at 72% 52%, #fff6dd 34%, transparent 100%),
    radial-gradient(38% 22% at 50% 84%, #fff6dd 20%, transparent 100%);
  transform: rotate(-13deg); mix-blend-mode: soft-light;
}
.table::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 89; background: radial-gradient(120% 110% at 26% 16%, transparent 44%, rgba(var(--shadow), .15) 100%); }

/* ---- a piece of stationery ---- */
.unit {
  --w: 440px; --mh: 600px; --pad: 50px;
  position: absolute; left: 50%; top: 50%; width: var(--w); perspective: 1500px; cursor: pointer;
  transform: translate(-50%, -50%) translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--r) * 1deg)) scale(var(--s));
  transition:
    --x 1250ms cubic-bezier(.24, .72, .2, 1), --y 1250ms cubic-bezier(.24, .72, .2, 1),
    --r 1250ms cubic-bezier(.24, .72, .2, 1), --s 1250ms cubic-bezier(.24, .72, .2, 1),
    --h 900ms cubic-bezier(.3, .6, .25, 1), --tx 950ms ease-out, --ty 950ms ease-out,
    --flip 1350ms cubic-bezier(.32, .1, .2, 1), --flap 1400ms cubic-bezier(.3, .2, .2, 1);
}
.unit.is-instant { transition: none; }
.unit.is-active { cursor: default; }
.unit.can-turn { cursor: pointer; }
.paper { position: relative; display: grid; transform-style: preserve-3d; transform: translateZ(calc(var(--h) * 150px)) rotateX(calc(var(--tx) * 1deg)) rotateY(calc((var(--ty) + var(--flip)) * 1deg)); }
.face {
  grid-area: 1 / 1; position: relative; isolation: isolate; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  min-height: var(--mh); padding: var(--pad); background: var(--paper) url(/assets/fine-cotton.webp) center / 900px; background-blend-mode: multiply;
  display: flex; flex-direction: column; gap: 26px; color: var(--ink);
  box-shadow: 0 1px 0 var(--paper-3), inset 0 0 0 1px color-mix(in srgb, var(--paper) 50%, transparent);
}
.face--back { transform: rotateY(180deg); }

.sh { position: absolute; inset: var(--ins, 0); pointer-events: none; border-radius: 1px; }
.sh--c { box-shadow: 0 1px 1.5px rgba(var(--shadow), .46), 0 2px 5px rgba(var(--shadow), .24); opacity: calc(1 - var(--h) * 4); }
.sh--a { box-shadow: 1px 6px 16px rgba(var(--shadow), .24), 3px 16px 40px rgba(var(--shadow), .16); opacity: calc(1 - var(--h) * 1.5); }
.sh--f {
  box-shadow: 8px 26px 56px rgba(var(--shadow), .32), 18px 60px 110px rgba(var(--shadow), .24);
  background: rgba(var(--shadow), .42); opacity: calc(var(--h) * 3);
  transform: translate(calc(var(--h) * 34px), calc(var(--h) * 58px)) scale(calc(1 + var(--h) * .05)) scaleX(max(.1, pow(cos(calc(var(--flip) * 1deg)), 2)));
}

/* Stocks: tinted by the theme paper, textured by the scans */
.deckle .face { background: none; box-shadow: none; padding: calc(var(--pad) + 24px); }
.deckle .face::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--paper) url(/assets/fine-deckle.webp) center / 100% 100% no-repeat; background-blend-mode: multiply;
  -webkit-mask: url(/assets/fine-deckle.webp) center / 100% 100% no-repeat; mask: url(/assets/fine-deckle.webp) center / 100% 100% no-repeat;
}
.deckle .sh { --ins: 24px; }
.cream .face { background-color: var(--paper-2); background-image: url(/assets/paper-sage-paper.webp); background-size: 900px; background-blend-mode: multiply; box-shadow: 0 1px 0 var(--paper-3), inset 0 0 0 1px color-mix(in srgb, var(--paper) 40%, transparent); }
.sagecard .face { background: var(--card-accent) url(/assets/fine-envelope.webp) center / 760px; background-blend-mode: soft-light; box-shadow: 0 1px 0 color-mix(in srgb, var(--card-accent) 70%, black), inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--paper); }

/* Type: pressed */
.v-names, .v-h, .v-count__n {
  text-shadow: 0 1px 0 var(--hi), 0 -.5px 0 rgba(30, 26, 20, .3);
  -webkit-mask: url(/assets/letterpress-ink-texture.webp) center / 620px; mask: url(/assets/letterpress-ink-texture.webp) center / 620px;
  padding-block: .06em;
}
.sagecard .v-h { color: var(--paper); text-shadow: 0 -1px 0 rgba(20, 24, 14, .5), 0 1px 0 rgba(255, 255, 255, .12); }
.v-kicker, .v-hosts span, .v-count__l, .v-dl dt, .v-date b {
  font: 500 10.5px/1.4 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--lab); text-shadow: 0 1px 0 var(--hi);
}
.sagecard .v-kicker { color: var(--paper); text-shadow: none; }
.v-h { font: 400 40px/1.08 var(--font-display); margin-bottom: 22px; }
.v-prose p + p { margin-top: 12px; }
.v-prose, .v-small, .v-venue__addr { font-size: 19px; line-height: 1.36; }
.v-small { margin-top: 8px; }
.v-link {
  display: inline-flex; align-items: center; min-height: 44px; align-self: flex-start; margin-top: auto;
  font: 500 10.5px/1.4 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--lab);
}
.sect { display: flex; flex-direction: column; }
.sect + .sect { padding-top: 26px; border-top: 1px solid var(--rule); }
.face > .sect:only-child, .face > .gift { flex: 1; }
.v-dl { display: grid; gap: 16px; }
.v-dl dt { margin-bottom: 4px; }
.v-dl dd { font-size: 19.5px; line-height: 1.3; }
.v-faq { display: grid; gap: 20px; }
.v-faq dt { font: 500 18.5px/1.28 var(--font-body); margin-bottom: 4px; }
.v-faq dd { font-size: 17px; line-height: 1.38; }
.v-faq div + div { padding-top: 20px; border-top: 1px solid var(--rule); }
.v-timeline { display: flex; flex-direction: column; }
.v-timeline li { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; padding: 14px 0 15px; border-top: 1px solid var(--rule); }
.v-timeline li:last-child { border-bottom: 1px solid var(--rule); }
.v-timeline time { font: 400 28px/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--lab); }
.v-timeline__label { font-size: 22px; }
.v-timeline p { grid-column: 2; font-size: 16px; line-height: 1.3; margin-top: 3px; color: var(--ink-soft); }
.v-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.v-extra__img { width: 100%; max-height: 220px; object-fit: cover; margin-bottom: 16px; }
.v-guest { font: italic 400 20px/1.2 var(--font-body); color: var(--lab); margin-bottom: 10px; }

/* Envelope */
.p-env { --w: 590px; }
.env { position: relative; height: 410px; transform-style: preserve-3d; }
.env__in { position: absolute; inset: 0; background: var(--paper) url(/assets/paper-sage-envelope-liner.webp) center top / 560px; background-blend-mode: multiply; box-shadow: inset 0 26px 34px -12px rgba(var(--shadow), .55); }
.env__body { position: absolute; inset: 0; }
.env__body i { position: absolute; inset: 0; background: var(--env) url(/assets/fine-envelope.webp) center / 760px; background-blend-mode: soft-light; }
.env__body i:nth-child(1) { clip-path: polygon(0 0, 50% 54%, 0 100%); }
.env__body i:nth-child(2) { clip-path: polygon(100% 0, 50% 54%, 100% 100%); }
.env__low { position: absolute; inset: 0; }
.env__low::before { content: ''; position: absolute; inset: -3px 0 0; background: rgba(var(--shadow), .34); clip-path: polygon(0 100%, 48% 50%, 50% 48.5%, 52% 50%, 100% 100%); }
.env__low i { position: absolute; inset: 0; background: var(--env-lo) url(/assets/fine-envelope.webp) center / 760px; background-blend-mode: soft-light; clip-path: polygon(0 100%, 48% 50%, 50% 48.5%, 52% 50%, 100% 100%); }
.env__flap { position: absolute; left: 0; right: 0; top: 0; height: 62%; transform-origin: 50% 0; transform-style: preserve-3d; transform: rotateX(calc(var(--flap) * 1deg)); }
.flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flap-face i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 52.5% 95%, 51% 98%, 50% 99%, 49% 98%, 47.5% 95%); }
.flap-out::before { content: ''; position: absolute; inset: 0 0 -4px; background: rgba(var(--shadow), .38); clip-path: polygon(0 0, 100% 0, 52.5% 95%, 51% 98%, 50% 99%, 49% 98%, 47.5% 95%); }
.flap-out i { background: var(--env-flap) url(/assets/fine-envelope.webp) center / 760px; background-blend-mode: soft-light; }
.flap-in { transform: rotateX(180deg); }
.flap-in i { background: var(--paper) url(/assets/paper-sage-envelope-liner.webp) center / 560px; background-blend-mode: multiply; clip-path: polygon(0 100%, 100% 100%, 52.5% 5%, 51% 2%, 50% 1%, 49% 2%, 47.5% 5%); }
/* The wax seal takes the theme's accent: the scan is only used for its relief */
.seal { display: block; isolation: isolate; background: var(--accent2); -webkit-mask: url(/assets/fine-seal.webp) center / contain no-repeat; mask: url(/assets/fine-seal.webp) center / contain no-repeat; aspect-ratio: 1; }
.seal img { width: 100%; height: 100%; filter: grayscale(1) contrast(1.25) brightness(1.1); mix-blend-mode: multiply; }
.env__seal { position: absolute; left: 50%; top: 100%; width: 136px; transform: translate(-50%, -62%); }
.env__sealsh { position: absolute; left: 50%; top: 100%; width: 118px; height: 118px; border-radius: 50%; transform: translate(-50%, -58%); box-shadow: 1px 4px 7px rgba(var(--shadow), .55), 0 1px 2px rgba(var(--shadow), .5); }

/* Cards */
.p-main { --w: 500px; --mh: 700px; --pad: 66px; }
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__olive { width: 218px; margin: -8px 0 26px; }
.hero__olive img { width: 100%; height: 118px; object-fit: cover; filter: contrast(1.05); mix-blend-mode: multiply; }
.hero .v-names { font: 400 76px/1.02 var(--font-display); margin-top: 22px; overflow-wrap: anywhere; }
.hero .v-names em { display: block; font: italic 400 34px/1.2 var(--font-body); color: var(--lab); margin: 2px 0; }
.hero .v-date { margin-top: auto; padding-top: 22px; font-size: 21px; line-height: 1.32; }
.hero .v-date b { display: block; margin-bottom: 9px; }
.hero .v-date__time { display: block; font-size: 19px; color: var(--ink-soft); }
.hero .v-place { font-size: 20px; margin-top: 18px; }
.hero .v-place::before { content: ''; display: block; width: 56px; height: 1px; margin: 0 auto 16px; background: var(--rule); }
.hero .v-hosts { margin-top: 10px; font-size: 19px; }
.v-count { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 0; margin: 12px 0; text-align: center; }
.v-count__cell { padding: 6px 0; }
.v-count__cell:nth-child(odd) { border-right: 1px solid var(--rule); }
.v-count__n { display: block; font: 400 64px/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; }
.sect--countdown { justify-content: center; text-align: center; }
.sect--countdown .v-small { font-size: 20px; }
.sect--countdown .v-kicker { text-align: center; }

.p-prog { --w: 440px; --mh: 640px; --pad: 50px; }
.p-det { --w: 480px; --mh: 640px; --pad: 50px; }
.p-venue { --w: 760px; --mh: 548px; --pad: 38px; }
.venue { flex: 1; display: grid; grid-template-columns: 1.62fr 1fr; gap: 30px; align-items: stretch; }
.venue__frame { position: relative; min-height: 0; }
.venue__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; mix-blend-mode: multiply; }
.venue__copy { display: flex; flex-direction: column; }
.venue__copy .v-h { margin: 18px 0 8px; font-size: 22px; }
.v-venue__name { font: 400 40px/1.08 var(--font-display); margin: 6px 0 4px; }
.v-venue__loc { margin-bottom: 18px; color: var(--lab); font-size: 20px; font-style: italic; }
.venue__copy .v-h { font: 500 10.5px/1.4 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--lab); margin: 0; -webkit-mask: none; mask: none; text-shadow: none; }

.p-rsvp { --w: 470px; --mh: 650px; --pad: 44px; }
.mini { position: absolute; left: -72px; right: 52px; bottom: -34px; height: 300px; transform: rotate(-3.6deg); background: var(--env) url(/assets/fine-envelope.webp) center / 640px; background-blend-mode: soft-light; box-shadow: 0 1px 2px rgba(var(--shadow), .42), 2px 10px 24px rgba(var(--shadow), .26); }
.mini::after { content: ''; position: absolute; inset: 0; background: var(--env-lo) url(/assets/fine-envelope.webp) center / 640px; background-blend-mode: soft-light; clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 2%, 50% 60%, 0 2%); opacity: .9; }
.p-rsvp .sect { flex: 1; }
.p-rsvp .v-h { text-align: center; margin-bottom: 14px; }
.p-rsvp .v-intro { text-align: center; margin: -6px 0 12px; font-style: italic; }
.p-rsvp .v-rsvp { overflow-y: auto; overscroll-behavior: contain; max-height: min(560px, calc(100svh - 250px)); padding: 2px 4px 6px; margin: 0 -4px; }

.p-gift { --w: 440px; --mh: 560px; --pad: 50px; }
.gift { display: flex; flex-direction: column; text-align: center; align-items: center; }
.gift .v-h { font-size: 36px; margin: 6px 0 18px; }
.gift .v-prose { font-size: 18.5px; line-height: 1.4; }
.v-iban { margin: 22px 0 8px; font: 500 14px/1.5 var(--font-body); letter-spacing: .12em; overflow-wrap: anywhere; }
.v-copy { min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font: 500 10px/1.4 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: inherit; }
.v-copy span { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.sign { margin-top: auto; padding-top: 14px; font: 400 25px/1.9 var(--font-script); transform: rotate(-3deg); }

@media (max-width: 820px) {
  body { font-size: 17px; }
  .p-env { --w: min(350px, 88vw); }
  .env { height: 244px; }
  .env__in, .flap-in i { background-size: 330px; }
  .env__seal { width: 88px; }
  .env__sealsh { width: 76px; height: 76px; }
  .p-main { --w: min(358px, 94vw); --mh: 540px; --pad: 46px; }
  .deckle .face { padding: calc(var(--pad) + 16px) calc(var(--pad) + 8px); }
  .deckle .sh { --ins: 18px; }
  .hero__olive { width: 168px; margin: -14px 0 12px; }
  .hero__olive img { height: 90px; }
  .hero .v-names { font-size: 56px; margin-top: 16px; }
  .hero .v-names em { font-size: 28px; }
  .hero .v-date { font-size: 19px; }
  .hero .v-place { font-size: 18.5px; }
  .v-count__n { font-size: 54px; }
  .p-prog, .p-det, .p-venue, .p-gift, .unit { --w: min(350px, 92vw); --pad: 28px; }
  .p-main { --w: min(358px, 94vw); --pad: 46px; }
  .p-prog { --mh: 560px; }
  .p-det { --mh: 570px; }
  .p-gift { --mh: 540px; }
  .p-rsvp { --w: min(346px, 90vw); --mh: 560px; --pad: 26px; }
  .v-h { font-size: 34px; margin-bottom: 18px; }
  .v-timeline li { grid-template-columns: 78px 1fr; }
  .v-timeline time { font-size: 25px; }
  .v-timeline__label { font-size: 20px; }
  .v-faq { gap: 15px; }
  .v-faq div + div { padding-top: 15px; }
  .v-faq dd { font-size: 16.5px; }
  .v-dl dd { font-size: 18px; }
  .p-venue { --mh: 620px; }
  .venue { grid-template-columns: 1fr; gap: 18px; grid-template-rows: 240px 1fr; }
  .unit:not(.is-active):not(.is-all) .mini { opacity: 0; }
  .mini { transition: opacity .9s ease-out; left: -24px; right: 24px; bottom: -22px; }
  .p-rsvp .v-h { font-size: 30px; margin-bottom: 8px; }
  .p-rsvp .v-rsvp { max-height: calc(100svh - 230px); }
  .gift .v-h { font-size: 32px; }
  .gift .v-prose { font-size: 17px; }
  .v-iban { font-size: 12px; letter-spacing: .04em; }
  .sign { font-size: 21px; }
}

.is-dark .hero__olive img, .is-dark .venue__art { filter: invert(1); mix-blend-mode: screen; }
.is-dark .face .engr { filter: invert(1); mix-blend-mode: screen; }