/* Theme tokens come from /js/render/base.css and the doc theme; these are this template's defaults. */
: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;
  --cotton: color-mix(in srgb, var(--paper) 55%, #fff);
  --table: color-mix(in srgb, var(--paper) 82%, var(--ink));
  --wax: color-mix(in srgb, var(--accent) 92%, var(--ink));
  --accent-lit: color-mix(in srgb, var(--accent) 90%, #fff);
  --shadow: 44, 36, 24;
  --hl: rgba(255, 255, 255, .85);
  --wax-filter: none; --engr-filter: none;
}
html.is-dark { --shadow: 0, 0, 0; --hl: rgba(255, 255, 255, .07); --cotton: color-mix(in srgb, var(--paper) 88%, #fff); --engr-filter: invert(.88); }
html { background: var(--table); overflow-x: clip; }
body { color: var(--ink); font-family: var(--font-body); line-height: 1.4; overflow-x: clip; }

.track { width: 1px; pointer-events: none; }

/* ---- the fixed theatre of depth ---- */
.stage { position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; overflow: hidden; background: var(--table); contain: strict; }
.ground { position: absolute; inset: 0; will-change: opacity; visibility: hidden; background-blend-mode: soft-light; }
.g-wax { background: var(--wax) url(/assets/fine-envelope.webp) center / 900px; }
.g-sage { background: var(--accent) url(/assets/fine-envelope.webp) center / 900px; }
.g-deep { background: color-mix(in srgb, var(--accent) 70%, var(--ink)) url(/assets/fine-envelope.webp) center / 900px; }
.g-paper { background: var(--paper) url(/assets/paper-sage-paper.webp) center / 900px; background-blend-mode: multiply; }
.g-cotton { background: var(--cotton) url(/assets/fine-cotton.webp) center / 900px; background-blend-mode: multiply; }

.art { position: absolute; left: 0; top: 0; max-width: none; will-change: transform, opacity; transform-origin: 50% 50%; visibility: hidden; pointer-events: none; filter: var(--engr-filter); }
.art--olive { filter: var(--engr-filter); }
.g-sage ~ .art, .g-deep ~ .art { }

/* The table */
.table { position: absolute; left: -22%; top: -22%; width: 144%; height: 144%; will-change: transform, opacity; background: var(--table) url(/assets/fine-linen.webp) center / cover; background-blend-mode: multiply; }
.env { position: absolute; }
.env::before { content: ''; position: absolute; inset: 0; box-shadow: 1px 8px 22px rgba(var(--shadow), .3), 0 2px 4px rgba(var(--shadow), .4); }
.env__back, .env__body i, .env__low i, .env__flap i, .s-env, .s-env i, .s-mini, .s-mini i:nth-child(2) { background-color: var(--accent); background-image: url(/assets/fine-envelope.webp); background-size: 700px; background-position: center; background-blend-mode: soft-light; }
.env__back { position: absolute; inset: 0; }
.env__body i, .env__low i, .env__flap i { position: absolute; inset: 0; }
.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::before { content: ''; position: absolute; inset: -3px 0 0; background: rgba(var(--shadow), .3); clip-path: polygon(0 100%, 48% 50%, 50% 48.5%, 52% 50%, 100% 100%); }
.env__low i { background-color: var(--accent-lit); 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%; }
.env__flap::before { content: ''; position: absolute; inset: 0 0 -4px; background: rgba(var(--shadow), .34); clip-path: polygon(0 0, 100% 0, 52.5% 95%, 51% 98%, 50% 99%, 49% 98%, 47.5% 95%); }
.env__flap i { background-color: var(--accent-lit); clip-path: polygon(0 0, 100% 0, 52.5% 95%, 51% 98%, 50% 99%, 49% 98%, 47.5% 95%); }
.seal, .seal-shadow, .fresh, .s-env__seal { filter: var(--wax-filter); }
.seal, .seal-shadow { position: absolute; left: 0; top: 0; max-width: none; will-change: transform, opacity; transform-origin: 50% 50%; }
.seal-shadow { border-radius: 50%; filter: none; }
.seal-shadow::after { content: ''; position: absolute; inset: 13%; border-radius: 50%; box-shadow: 0 6px 20px rgba(var(--shadow), .55), 0 3px 8px rgba(var(--shadow), .5); }

/* The closing table: pulled back, the whole suite */
.finale { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; visibility: hidden; background: var(--table) url(/assets/fine-linen.webp) center / cover; background-blend-mode: multiply; }
.s-card, .s-env, .s-mini { position: absolute; }
.s-card { background: var(--cotton) url(/assets/fine-cotton.webp) center / 700px; background-blend-mode: multiply; box-shadow: 0 1px 2px rgba(var(--shadow), .4), 1px 7px 18px rgba(var(--shadow), .24); display: grid; place-items: center; }
.s-card .engr { width: 86%; height: 82%; background: var(--ink); -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; opacity: .92; }
.engr--tables { --art: url(/assets/engrav-tables.webp); }
.engr--ceremony { --art: url(/assets/engrav-ceremony.webp); }
.engr--banquet { --art: url(/assets/engrav-banquet.webp); }
.s-art { max-width: none; filter: var(--engr-filter); }
.s-env { box-shadow: 0 1px 2px rgba(var(--shadow), .4), 1px 8px 20px rgba(var(--shadow), .26); }
.s-env i { position: absolute; inset: 0; background-color: var(--accent-lit); }
.s-env i:nth-child(1) { clip-path: polygon(0 100%, 48% 50%, 50% 48.5%, 52% 50%, 100% 100%); }
.s-env i:nth-child(2) { background: rgba(var(--shadow), .28); clip-path: polygon(0 0, 100% 0, 52.5% 66%, 50% 68.5%, 47.5% 66%); transform: translateY(2px); }
.s-env i:nth-child(3) { clip-path: polygon(0 0, 100% 0, 52.5% 66%, 50% 68.5%, 47.5% 66%); }
.s-env i:nth-child(4) { display: none; }
.s-env__seal { position: absolute; left: 50%; top: 57%; width: 28%; max-width: none; transform: translate(-50%, -50%); }
.s-mini { background-color: color-mix(in srgb, var(--accent) 88%, var(--ink)); background-size: 520px; box-shadow: 0 1px 2px rgba(var(--shadow), .45), 1px 8px 18px rgba(var(--shadow), .3); }
.s-mini i { position: absolute; inset: 0; }
.s-mini i:nth-child(1) { background: rgba(var(--shadow), .28); clip-path: polygon(0 0, 100% 0, 52.5% 56%, 50% 59%, 47.5% 56%); transform: translateY(2px); }
.s-mini i:nth-child(2) { background-color: var(--accent-lit); background-size: 520px; clip-path: polygon(0 0, 100% 0, 52.5% 56%, 50% 59%, 47.5% 56%); }
.fresh, .fresh-shadow { position: absolute; will-change: transform, opacity; transform-origin: 50% 50%; max-width: none; visibility: hidden; }
.fresh-shadow { border-radius: 50%; background: rgba(var(--shadow), .55); filter: none; }

.hint { position: absolute; left: 50%; bottom: max(8px, env(safe-area-inset-bottom)); transform: translateX(-50%); font: 500 10px/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); will-change: opacity; }
.is-embed .hint, .is-guided .hint { display: none; } /* the guide pill sits there */

/* ---- the words: opaque sheets, always at scale 1 at rest ---- */
.cards { position: fixed; left: 0; top: 0; width: 100%; height: 100svh; pointer-events: none; overflow: hidden; }
.card {
  position: absolute; width: var(--w, 24em); pointer-events: none; font-size: clamp(18px, 2.2vh, 21px);
  will-change: transform, opacity; visibility: hidden; color: var(--ink); overscroll-behavior: contain;
  background: var(--cotton) url(/assets/fine-cotton.webp) center / 900px; background-blend-mode: multiply;
  box-shadow: 0 1px 2px rgba(var(--shadow), .44), 2px 14px 34px rgba(var(--shadow), .26), 8px 34px 74px rgba(var(--shadow), .16);
}
.card.is-active { pointer-events: auto; }
.card.is-scroll { overflow-y: auto; scrollbar-width: thin; }
.card__in { padding: 2.2em 2.4em; }
.cream { background-color: var(--paper); background-image: url(/assets/paper-sage-paper.webp); }
.sagecard { background-color: var(--accent); background-image: url(/assets/fine-envelope.webp); background-size: 760px; background-blend-mode: soft-light; color: var(--on-accent);
  --ink: var(--on-accent); --ink-soft: var(--on-accent); --accent-ink: var(--on-accent); --line: color-mix(in srgb, var(--on-accent) 35%, transparent); }
.sagecard .v-h { color: var(--on-accent); text-shadow: none; }
.deckle { background-color: var(--cotton); background-image: url(/assets/fine-cotton.webp); box-shadow: none;
  -webkit-mask: url(/assets/fine-deckle.webp) center / 100% 100% no-repeat; mask: url(/assets/fine-deckle.webp) center / 100% 100% no-repeat; }

/* Type */
.v-h { color: var(--ink); text-shadow: 0 1px 0 var(--hl), 0 -.5px 0 rgba(30, 26, 20, .25); font: 400 2.3em/1.08 var(--font-display); margin-bottom: .55em; }
.v-kicker { font: 500 .58em/1.4 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink); }
.v-small { font-size: 1.08em; line-height: 1.32; }
.v-guest { font: italic 400 1em/1.3 var(--font-body); color: var(--accent-ink); margin-bottom: .4em; }
.v-prose { display: grid; gap: .55em; font-size: 1.04em; line-height: 1.38; }
.v-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .7em; font: 500 .58em/1.4 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent-ink); }

/* Hero */
.card--hero { --w: min(33em, 92vw); text-align: center; z-index: 0; }
.card--hero .card__in { padding: 2.6em 3.4em 5.2em; }
.hero .v-names { font: 400 3.7em/1.04 var(--font-display); margin: .28em 0 .24em; overflow-wrap: anywhere; }
.hero .v-names em { font: italic 400 .62em/1 var(--font-body); color: var(--accent-ink); margin: 0 .28em; }
.hero .v-hosts { font-size: .95em; color: var(--ink-soft); margin-bottom: .5em; }
.hero .v-hosts span { font: 500 .55em/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink); margin-right: .5em; }
.hero .v-date { font-size: 1.14em; line-height: 1.3; }
.hero .v-date b { font: 500 .5em/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: .7em; }
.hero .v-date__time { display: block; font-size: .85em; color: var(--ink-soft); }
.hero .v-place { font-size: 1.04em; font-style: italic; margin-top: .2em; color: var(--accent-ink); }

/* Countdown */
.card--countdown { --w: 22em; text-align: center; }
.v-count { display: grid; grid-template-columns: 1fr 1fr; gap: 1em 0; margin: 1.2em 0; }
.v-count__cell { padding: .3em 0; }
.v-count__cell:nth-child(odd) { border-right: 1px solid var(--line); }
.v-count__n { display: block; font: 400 3.4em/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 0 var(--hl); }
.v-count__l { font: 500 .58em/1.4 var(--font-body); letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink); }

/* Venue */
.card--venue { --w: 23.5em; }
.venue .v-h { margin: .36em 0 .1em; }
.where { color: var(--accent-ink); font-style: italic; font-size: 1.12em; margin-bottom: .8em; }

/* Lists */
.card--timeline { --w: 24em; }
.card--timeline .v-h { margin: 0 0 .5em; }
.v-timeline li { display: grid; grid-template-columns: 5.2em 1fr; align-items: baseline; padding: .68em 0 .76em; border-top: 1px solid var(--line); }
.v-timeline li:last-child { border-bottom: 1px solid var(--line); }
.v-timeline time { font: 400 1.5em/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--accent-ink); }
.v-timeline__label { font-size: 1.2em; }
.v-timeline p { grid-column: 2; font-size: .88em; line-height: 1.35; color: var(--ink-soft); margin-top: .2em; }
.card--menu, .card--story, .card--transport, .card--dress, .card--extra { --w: 25em; }
.card--faq { --w: 26.5em; }
.card--gallery { --w: 28em; }
.v-dl { display: grid; gap: .78em; }
.v-dl dt { font: 500 .56em/1.4 var(--font-body); letter-spacing: .28em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .2em; }
.v-dl dd { font-size: 1.06em; line-height: 1.28; }
.v-faq { display: grid; gap: .86em; }
.v-faq dt { font: 500 1.03em/1.26 var(--font-body); margin-bottom: .16em; }
.v-faq dd { font-size: .96em; line-height: 1.36; }
.v-faq div + div { padding-top: .86em; border-top: 1px solid var(--line); }
.v-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); gap: .5em; }
.v-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.v-extra__img { width: 100%; max-height: 10em; object-fit: cover; margin-bottom: .7em; }
.filler { text-align: center; padding: 1em 0; }
.filler .v-h { margin: .4em 0; }

/* Reply */
.card--rsvp { --w: 25.5em; --vf-ink: var(--ink); --vf-line: var(--ink); --vf-accent: var(--accent-ink); --vf-on-accent: var(--paper); --vf-bg: transparent; }
.card--rsvp .card__in { padding: 1.9em 2.3em 1.6em; }
.card--rsvp .v-h { margin-bottom: .34em; text-align: center; }
.card--rsvp .v-intro { text-align: center; margin-bottom: .8em; color: var(--ink-soft); font-size: .92em; }

/* Gift */
.card--gift { --w: 23.5em; text-align: center; }
.card--gift .v-h { font-size: 2em; }
.card--gift .v-prose { font-size: 1.02em; }
.v-iban { margin: 1em 0 .2em; font: 500 .8em/1.5 var(--font-body); letter-spacing: .1em; overflow-wrap: anywhere; }
.v-copy { min-height: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font: 500 .56em/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: .5em; font: 400 1.34em/1.9 var(--font-script); color: inherit; transform: rotate(-3deg); }

@media (max-width: 820px) {
  .card, .card.card { font-size: 17px; --w: min(354px, calc(100vw - 24px)); }
  .card__in { padding: 1.5em 1.6em; }
  .card--hero { --w: min(350px, 92vw); }
  .card--hero .card__in { padding: 2.2em 1.8em 5.4em; }
  .hero .v-names { font-size: 3em; }
  .v-count__n { font-size: 2.9em; }
  .card--rsvp .card__in { padding: 1.3em 1.5em 1em; }
  .sign { font-size: 1.2em; }
}