@font-face { font-family: "Luxurious Script"; src: url("../fonts/roses/luxurious-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url("../fonts/roses/notodisplay-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Serif Display"; src: url("../fonts/roses/notodisplay-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/roses/spectral-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* MILLE ROSES: the extravagant one. The page is a wall of white roses (a fixed layer behind everything: wall.webp, a
   seamless tile of ~120 original rose drawings); the cover is an ivory arch wrapped in roses with a cascade at its foot;
   every section is an ivory card hung with a rose garland; petals drift down; the closing is a heart of roses.
   Intro: the rose wall is two doors meeting under a seam of roses, an ivory medallion wreathed in roses at the centre;
   tap and the doors part. Roses are tinted per palette with --rose-fx (a CSS filter), so one set of art serves all.
   Type: Luxurious Script (names) · Noto Serif Display (titles) · Spectral (reading). */
:root {
  --bg: #e9e2d6; --paper: #fffdf8; --card: #fffdf8; --ink: #2b2620; --muted: #6b6155; --line: rgba(43, 38, 32, .14);
  --accent: #8f6d22; --accent-ink: #2b2108; --gold-1: #7a5c1c; --gold-2: #c9a44c; --gold-3: #ead293; --glow: #ffffff;
  --rose-fx: none; --veil: rgba(30, 22, 12, .16);
  --script: "Luxurious Script", "Pinyon Script", cursive; --display: "Noto Serif Display", Georgia, serif; --text: "Spectral", Georgia, serif;
  --radius: 14px; --maxw: 520px;
}
body { background: var(--bg); color: var(--ink); font-family: var(--text); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url("../img/roses/wall.webp") 0 0 / 300px; filter: var(--rose-fx); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% 40%, transparent 40%, var(--veil)); }
.mr-s { position: absolute; display: block; left: calc(var(--u) * var(--x, 0) + var(--xp, 0%)); top: calc(var(--u) * var(--y, 0) + var(--yp, 0%)); width: calc(var(--u) * var(--w, .2)); aspect-ratio: 1;
  background: center / contain no-repeat; transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)); pointer-events: none; }
.mr-s.r1 { background-image: url("../img/roses/rose-1.webp"); } .mr-s.r2 { background-image: url("../img/roses/rose-2.webp"); } .mr-s.r3 { background-image: url("../img/roses/rose-3.webp"); } .mr-s.r4 { background-image: url("../img/roses/rose-4.webp"); }
.mr-s.r5 { background-image: url("../img/roses/rose-5.webp"); } .mr-s.r6 { background-image: url("../img/roses/rose-6.webp"); } .mr-s.r7 { background-image: url("../img/roses/rose-7.webp"); } .mr-s.r8 { background-image: url("../img/roses/rose-8.webp"); }
.mr-s.l1 { background-image: url("../img/roses/leaves-1.webp"); } .mr-s.l2 { background-image: url("../img/roses/leaves-2.webp"); } .mr-s.g1 { background-image: url("../img/roses/gyp-1.webp"); } .mr-s.g2 { background-image: url("../img/roses/gyp-2.webp"); }
.mr-s:not(.is-f) { filter: var(--rose-fx); }
.mr-gold, .t-roses .hero-t, .mr-mono { background: linear-gradient(170deg, var(--gold-1) 0%, var(--gold-2) 30%, var(--gold-3) 46%, var(--gold-2) 60%, var(--gold-1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- petals ---------- */
.mr-petals { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.mr-petals i { position: absolute; top: -40px; left: var(--x); width: calc(13px * var(--s)); height: calc(17px * var(--s)); border-radius: 0 100% 0 100%;
  background: radial-gradient(circle at 30% 28%, #fff 0, #f4ede3 55%, #d8cbb8 100%); filter: var(--rose-fx); opacity: .92; box-shadow: 1px 2px 3px rgba(0, 0, 0, .12);
  animation: mr-fall var(--d) linear var(--w) infinite; }
@keyframes mr-fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(var(--k), 55vh) rotate(260deg); } 100% { transform: translate(calc(var(--k) * -1), 110vh) rotate(540deg); } }

/* ---------- intro: the rose-wall doors ---------- */
.mr-intro { --intro-ms: 2700; overflow: hidden; background: transparent; perspective: 1200px; transition: opacity .6s ease 2.1s, visibility 0s linear 2.7s; }
.mr-door { position: absolute; top: 0; bottom: 0; width: 50%; --u: 50vw; background: url("../img/roses/wall.webp") 0 0 / 300px; filter: var(--rose-fx); cursor: pointer;
  transition: transform 1.7s cubic-bezier(.6, 0, .25, 1) .35s; }
.mr-door.is-l { left: 0; transform-origin: 0 50%; box-shadow: inset -18px 0 30px -18px rgba(0, 0, 0, .55); }
.mr-door.is-r { right: 0; transform-origin: 100% 50%; background-position: -50vw 0; box-shadow: inset 18px 0 30px -18px rgba(0, 0, 0, .55); }
.mr-door .mr-s { filter: none; }
.mr-med { position: absolute; z-index: 3; left: 50%; top: 50%; --u: min(66vw, 300px); width: var(--u); aspect-ratio: 1; transform: translate(-50%, -50%); transition: transform .8s cubic-bezier(.5, 0, .3, 1), opacity .6s ease .15s; }
.mr-wreath { position: absolute; inset: 0; }
.mr-med::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle, rgba(28, 18, 8, .55) 30%, rgba(28, 18, 8, .25) 55%, transparent 70%); }
.mr-seal { position: absolute; inset: 15%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; color: var(--ink); background: radial-gradient(circle at 40% 35%, var(--glow), var(--card) 55%, color-mix(in srgb, var(--card) 85%, var(--gold-2)));
  box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 5px var(--card), 0 0 0 6px var(--gold-1), 0 18px 40px -10px rgba(0, 0, 0, .6); }
.mr-for { font: italic 300 .86rem/1.2 var(--display); color: var(--muted); max-width: 80%; }
.mr-for b { font-weight: 400; font-style: normal; color: var(--ink); }
.mr-mono { font: 400 clamp(3rem, 15vw, 4rem)/1.25 var(--script); padding: 0 .12em; }
.mr-mono i { font-size: .62em; margin: 0 .06em; font-style: normal; }
.mr-sd { font: 400 .7rem var(--display); letter-spacing: .24em; text-transform: uppercase; }
.mr-tap { margin-top: 4px; font: italic 300 .8rem var(--display); color: var(--accent); animation: mr-pulse 2.4s ease-in-out infinite; }
@keyframes mr-pulse { 50% { opacity: .45; } }
.mr-burst i { animation: none; opacity: 0; }
.is-opening .mr-med { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
.is-opening .mr-door.is-l { transform: translateX(-100%) rotateY(28deg); }
.is-opening .mr-door.is-r { transform: translateX(100%) rotateY(-28deg); }
.is-opening .mr-burst i { opacity: .95; animation: mr-fall calc(var(--d) * .45) linear calc(var(--w) * .05 + .3s) 1 forwards; }

/* ---------- cover: the rose arch ---------- */
.t-roses .mr-hero { position: relative; display: block; place-items: normal; min-height: 100svh; padding: 96px 0 130px; text-align: center; overflow: hidden; }
.mr-arch { position: relative; --u: min(80vw, 420px); width: var(--u); margin: 0 auto; }
.mr-in { position: relative; z-index: 1; padding: calc(var(--u) * .2) calc(var(--u) * .14) calc(var(--u) * .32);
  border-radius: calc(var(--u) / 2) calc(var(--u) / 2) 16px 16px; background: radial-gradient(90% 60% at 50% 28%, var(--glow), var(--card) 70%);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .65); }
.mr-in::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--gold-2); border-radius: calc(var(--u) / 2 - 10px) calc(var(--u) / 2 - 10px) 8px 8px; pointer-events: none; }
.mr-in::after { content: ""; position: absolute; inset: 15px; border: 1px solid var(--gold-2); opacity: .45; border-radius: calc(var(--u) / 2 - 15px) calc(var(--u) / 2 - 15px) 5px 5px; pointer-events: none; }
.mr-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mr-top { position: absolute; left: 0; top: 0; width: var(--u); height: var(--u); }
.mr-side { position: absolute; left: 0; width: var(--u); top: calc(var(--u) * .52); bottom: calc(var(--u) * .1); }
.mr-foot { position: absolute; left: 0; width: var(--u); bottom: calc(var(--u) * -.1); height: calc(var(--u) * .2); }
.mr-photo { position: relative; width: 78%; margin: 0 auto 18px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 10px 10px; background: var(--paper);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-2), 0 16px 26px -16px rgba(0, 0, 0, .5); }
.mr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mr-photo .ph-slot { border-radius: inherit; }
.mr-hero .hero-media-tag { bottom: 12%; font-size: .56rem; white-space: normal; width: 80%; max-width: none; text-align: center; line-height: 1.3; }
.mr-hero .hero-guest { margin: 0 0 6px; font: italic 300 1rem var(--display); color: var(--muted); }
.mr-hero .hero-guest b { font-style: normal; color: var(--ink); }
.mr-hero .hero-k { margin: 0; font: 400 .7rem/1.6 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.t-roses .hero-t { margin: 6px 0 0; font: 400 clamp(3.1rem, 15vw, 4.4rem)/1.18 var(--script); letter-spacing: 0; padding: 0 .1em; }
.t-roses .hero-t span { display: block; font-size: calc(1em * var(--fit, 1)); }
.t-roses .hero-t i { display: block; margin: -.12em 0 -.08em; font: italic 300 .5em/1.3 var(--display); }
.mr-hero .hero-line { margin: 10px auto 0; max-width: 18em; font: italic 300 1.02rem/1.5 var(--display); color: var(--muted); }
.mr-when { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; }
.mr-when span:first-child { font: 400 .74rem/1.6 var(--display); letter-spacing: .15em; text-transform: uppercase; }
.mr-when span:first-child::after { content: "✦"; display: block; margin: 6px 0 2px; color: var(--gold-2); font-size: .7em; }
.mr-when span:last-child { font: italic 300 .98rem var(--display); color: var(--muted); }
.mr-hero .hero-cta, .t-roses .rs-btn { display: inline-block; margin-top: 22px; padding: 14px 40px; border: 0; border-radius: 999px; color: var(--accent-ink); font: 400 .8rem var(--display); letter-spacing: .24em; text-transform: uppercase;
  background: linear-gradient(170deg, var(--gold-1), var(--gold-2) 35%, var(--gold-3) 50%, var(--gold-2) 65%, var(--gold-1)); box-shadow: 0 10px 22px -10px var(--gold-1); }
.mr-hero > .mr-petals { z-index: 3; }

/* ---------- sections: ivory cards hung with rose garlands ---------- */
.t-roses .s:not(.s-hero) { position: relative; width: calc(100% - 28px); max-width: var(--maxw); margin: 0 auto 72px; padding: 80px 24px 54px; border-radius: 20px;
  background: radial-gradient(90% 50% at 50% 0%, var(--glow), var(--card) 70%); box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .7); }
.t-roses .s-hero + .s { margin-top: 30px; }
.t-roses .s:not(.s-hero)::after { content: ""; position: absolute; inset: 9px; border: 1px solid var(--gold-2); border-radius: 13px; opacity: .55; pointer-events: none; }
.t-roses .s:not(.s-hero)::before { content: ""; position: absolute; z-index: 3; left: -18px; right: -18px; top: -54px; height: 112px; pointer-events: none; filter: var(--rose-fx);
  background: url("../img/roses/rose-1.webp") 2% 60% / 100px no-repeat, url("../img/roses/rose-8.webp") 24% 34% / 116px no-repeat, url("../img/roses/rose-3.webp") 50% 62% / 108px no-repeat,
    url("../img/roses/rose-7.webp") 76% 30% / 118px no-repeat, url("../img/roses/rose-5.webp") 98% 58% / 100px no-repeat,
    url("../img/roses/leaves-1.webp") 13% 0 / 96px no-repeat, url("../img/roses/gyp-1.webp") 37% 0 / 96px no-repeat, url("../img/roses/leaves-2.webp") 63% 0 / 96px no-repeat, url("../img/roses/gyp-2.webp") 88% 0 / 96px no-repeat; }
.t-roses .s:not(.s-hero):nth-of-type(even)::before {
  background: url("../img/roses/rose-6.webp") 0% 40% / 112px no-repeat, url("../img/roses/rose-2.webp") 18% 66% / 96px no-repeat, url("../img/roses/rose-7.webp") 36% 30% / 104px no-repeat,
    url("../img/roses/rose-4.webp") 64% 64% / 112px no-repeat, url("../img/roses/rose-8.webp") 82% 32% / 100px no-repeat, url("../img/roses/rose-1.webp") 100% 64% / 106px no-repeat,
    url("../img/roses/gyp-2.webp") 8% 0 / 90px no-repeat, url("../img/roses/leaves-2.webp") 50% 0 / 100px no-repeat, url("../img/roses/gyp-1.webp") 92% 0 / 90px no-repeat; }
.t-roses .sh-k { font: 400 2.4rem/1.2 var(--script); letter-spacing: 0; text-transform: none; color: var(--accent); }
.t-roses .sh-t { margin-top: 0; font: 400 clamp(1.15rem, 5.2vw, 1.4rem)/1.35 var(--display); letter-spacing: .22em; text-transform: uppercase; }
.t-roses .sh::after { content: "✦"; display: block; margin: 12px auto 0; color: var(--gold-2); font-size: .8rem;
  background: linear-gradient(var(--gold-2), var(--gold-2)) left center / 38% 1px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right center / 38% 1px no-repeat; width: 120px; }
.t-roses .cd-u b { font: 400 2.4rem var(--display); color: var(--ink); }
.t-roses .cd-u span { letter-spacing: .16em; }
.t-roses .tl-time { font-style: italic; color: var(--accent); }
.t-roses .tl-title { font-weight: 400; }
.t-roses .vn-c, .t-roses .gl-it, .t-roses .gl-c, .t-roses .dr-roles > div, .t-roses .rs-form { border: 1px solid color-mix(in srgb, var(--gold-2) 55%, transparent); border-radius: var(--radius); background: var(--paper); }
.t-roses .vn-n { font: 400 1.15rem var(--display); }
.t-roses .btn-line { border-radius: 999px; font: 400 .72rem var(--display); letter-spacing: .18em; text-transform: uppercase; border-color: var(--gold-2); }
.t-roses .faq summary { font-weight: 400; }
.t-roses .sw-dot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }

/* gallery: gilded ovals, a rose tucked at each foot */
.mr-ovals { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; }
.mr-ov { position: relative; margin: 0; text-align: center; }
.mr-oimg { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--gold-2), 0 14px 22px -14px rgba(0, 0, 0, .5); }
.mr-oimg .ph-slot { border-radius: 50%; }
.mr-otuck { position: absolute; left: 50%; top: 88%; --u: 90px; width: 0; height: 0; z-index: 2; }
.mr-ov figcaption { margin-top: 26px; font: 400 1.6rem/1.1 var(--script); color: var(--accent); }

/* closing: a heart of roses */
.mr-close { text-align: center; }
.mr-heart { position: relative; --u: min(70vw, 340px); width: var(--u); height: calc(var(--u) * .95); margin: 0 auto 18px; }
.mr-hroses { position: absolute; inset: 0; }
.mr-hmono { position: absolute; left: 0; right: 0; top: 30%; margin: 0; font: 400 clamp(3.4rem, 17vw, 4.6rem)/1.3 var(--script); text-align: center; }
.mr-hmono i { font-size: .6em; font-style: normal; margin: 0 .05em; }
.t-roses .cl-line { margin: 0 auto; max-width: 20em; font: italic 300 clamp(1rem, 4.4vw, 1.15rem)/1.5 var(--display); }
.t-roses .cl-sign { margin: 6px 0 0; font: 400 clamp(1.9rem, 9vw, 2.6rem)/1.2 var(--script); color: var(--accent); }
.t-roses .cl-tag { font: 400 .78rem var(--display); letter-spacing: .18em; }
.t-roses .s-closing { padding-top: 60px; min-height: 0; }

@media (prefers-reduced-motion: reduce) { .mr-petals i, .mr-tap { animation: none; } .mr-petals { display: none; } }
.t-roses .inv .s-closing.mr-close, body.is-demo .inv .s-closing.mr-close { padding-bottom: 54px; margin-bottom: 150px; }
.mr-hero.no-media .mr-in { padding-top: calc(var(--u) * .38); }
.mr-hero .hero-media-tag { font-size: .62rem; }
.t-roses .gl-btn { background: linear-gradient(170deg, var(--gold-2), var(--gold-3) 50%, var(--gold-2)); color: var(--accent-ink); }
.t-roses .tl-time, .t-roses .hero-guest { font-family: var(--display); font-weight: 300; }