@font-face { font-family: "Monsieur La Doulaise"; src: url("../fonts/gilded/monsieur-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("../fonts/gilded/cinzeldeco-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; src: url("../fonts/gilded/goudy-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sorts Mill Goudy"; src: url("../fonts/gilded/goudy-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* GRAND BALLROOM (theme key "gilded"): gilded baroque frames, a crystal chandelier and white roses on silk walls.
   Art: assets/img/gilded/corner.webp (one baroque corner, rotated for all four) and chandelier.webp, both original;
   roses are Mille Roses' sprites. Intro: tall ballroom doors with gilded panels under a garland of white roses and a
   gold plaque with the monogram; tap and the doors swing open into candlelight.
   Type: Monsieur La Doulaise (names) · Cinzel Decorative (titles) · Sorts Mill Goudy (reading). */
:root {
  --bg: #efe6d4; --wall: #efe6d4; --trellis: rgba(169, 131, 56, .2); --door: #f7f1e4; --door-2: #e8dcc4; --card: #fffbf2; --paper: #fffdf8; --glow: #ffffff;
  --ink: #2c2518; --muted: #6b5f4b; --line: rgba(44, 37, 24, .14); --accent: #8a6720; --accent-ink: #2b2108;
  --gold-1: #7a5418; --gold-2: #c99a3c; --gold-3: #f6e2a4; --rose-fx: none;
  --script: "Monsieur La Doulaise", "Pinyon Script", cursive; --display: "Cinzel Decorative", "Cinzel", Georgia, serif; --text: "Sorts Mill Goudy", Georgia, serif;
  --radius: 4px; --maxw: 520px;
  --goldbar: linear-gradient(135deg, var(--gold-1), var(--gold-3) 22%, var(--gold-2) 40%, var(--gold-1) 58%, var(--gold-3) 78%, var(--gold-2));
}
body { color: var(--ink); font-family: var(--text); background-color: var(--wall);
  background-image: radial-gradient(var(--trellis) 1.6px, transparent 2.2px), repeating-linear-gradient(45deg, transparent 0 37px, var(--trellis) 37px 38px), repeating-linear-gradient(-45deg, transparent 0 37px, var(--trellis) 37px 38px);
  background-size: 53.7px 53.7px, auto, auto; }
.gd-goldtx, .t-gilded .hero-t { background: linear-gradient(170deg, var(--gold-1), var(--gold-2) 30%, var(--gold-3) 48%, var(--gold-2) 64%, var(--gold-1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gd-c { position: absolute; z-index: 2; width: var(--cs); height: auto; transform: rotate(var(--cr)); pointer-events: none; }
.gd-c.is-tl { left: -6px; top: -6px; } .gd-c.is-tr { right: -6px; top: -6px; } .gd-c.is-br { right: -6px; bottom: -6px; } .gd-c.is-bl { left: -6px; bottom: -6px; }
.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"); }

/* ---------- intro: the ballroom doors ---------- */
.gd-intro { --intro-ms: 2800; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; background: inherit; background-color: var(--wall);
  transition: opacity .7s ease 2s, visibility 0s linear 2.8s; }
.gd-doorway { position: relative; --u: min(86vw, 440px); width: var(--u); height: min(76svh, 660px); perspective: 1400px;
  border: 12px solid transparent; border-bottom: 0; border-image: var(--goldbar) 1; box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .35); }
.gd-light { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, #fffaf0, #f6dd9c 38%, #c08b35 85%); }
.gd-door { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; flex-direction: column; gap: 4%; padding: 9% 10% 6%; cursor: pointer;
  background: linear-gradient(90deg, var(--door), var(--door-2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform 1.7s cubic-bezier(.55, 0, .25, 1) .3s; }
.gd-door.is-l { left: 0; transform-origin: 0 50%; } .gd-door.is-r { right: 0; transform-origin: 100% 50%; background: linear-gradient(270deg, var(--door), var(--door-2)); }
.gd-panel { position: relative; --cs: clamp(26px, 9vw, 40px); border: 2px solid var(--gold-2); box-shadow: inset 0 0 0 5px var(--door), inset 0 0 0 6px color-mix(in srgb, var(--gold-2) 70%, transparent), inset 0 8px 18px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .4); }
.gd-panel.is-up { flex: 3; } .gd-panel.is-low { flex: 1.15; }
.gd-panel .gd-c { left: auto; top: auto; right: auto; bottom: auto; }
.gd-panel .gd-c.is-tl { left: 2px; top: 2px; } .gd-panel .gd-c.is-tr { right: 2px; top: 2px; } .gd-panel .gd-c.is-br { right: 2px; bottom: 2px; } .gd-panel .gd-c.is-bl { left: 2px; bottom: 2px; }
.gd-handle { position: absolute; top: 47%; width: 9px; height: 70px; border-radius: 5px; background: var(--goldbar); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); }
.gd-door.is-l .gd-handle { right: 9%; } .gd-door.is-r .gd-handle { left: 9%; }
.gd-garland { position: absolute; z-index: 3; left: -12px; top: calc(var(--u) * -.06); width: calc(var(--u) + 24px); height: 0; }
.gd-plaque { position: absolute; z-index: 4; left: 50%; top: 52%; width: min(56vw, 240px); aspect-ratio: 5 / 4; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink); background: radial-gradient(circle at 45% 38%, var(--glow), var(--card) 60%);
  box-shadow: 0 0 0 4px var(--gold-2), 0 0 0 7px var(--card), 0 0 0 9px var(--gold-1), 0 20px 40px -12px rgba(0, 0, 0, .6); transition: transform .8s ease, opacity .5s ease .1s; }
.gd-for { font: italic 400 .86rem/1.2 var(--text); color: var(--muted); max-width: 78%; } .gd-for b { font-style: normal; font-weight: 400; color: var(--ink); }
.gd-mono { font: 400 clamp(2.9rem, 14vw, 3.8rem)/1.25 var(--script); padding: 0 .2em; }
.gd-mono i { font-style: normal; font-size: .65em; }
.gd-tap { font: 400 .62rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); animation: gd-pulse 2.4s ease-in-out infinite; }
@keyframes gd-pulse { 50% { opacity: .45; } }
.is-opening .gd-plaque { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
.is-opening .gd-door.is-l { transform: rotateY(-102deg); } .is-opening .gd-door.is-r { transform: rotateY(102deg); }

/* ---------- cover ---------- */
.t-gilded .gd-hero { position: relative; display: block; place-items: normal; min-height: 100svh; padding: 0 0 80px; text-align: center; overflow: hidden; }
.gd-ceiling { position: relative; height: clamp(190px, 52vw, 290px); }
.gd-ceiling::before { content: ""; position: absolute; left: 50%; top: 40px; width: 140%; height: 120%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 236, 180, .55), transparent); pointer-events: none; }
.gd-chand { position: absolute; left: 50%; top: -18px; width: min(88vw, 440px); height: auto; transform-origin: 50% 0; animation: gd-sway 7s ease-in-out infinite alternate; translate: -50% 0; }
@keyframes gd-sway { from { rotate: -.7deg; } to { rotate: .7deg; } }
.gd-sparks { position: absolute; inset: 0; pointer-events: none; }
.gd-sparks i { position: absolute; left: var(--x); top: var(--y); width: 7px; height: 7px; background: radial-gradient(#fff 0 25%, rgba(255, 255, 255, .5) 40%, transparent 70%); opacity: 0; animation: gd-tw var(--d) ease-in-out var(--w) infinite; }
@keyframes gd-tw { 50% { opacity: 1; transform: scale(1.6); } }
.gd-frame { position: relative; z-index: 2; --u: min(86vw, 440px); --cs: calc(var(--u) * .26); width: var(--u); margin: -26px auto 0; padding: 13px; background: var(--goldbar); border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 3px rgba(0, 0, 0, .18), 0 34px 60px -30px rgba(0, 0, 0, .7); }
.gd-frame > .gd-c { left: auto; top: auto; right: auto; bottom: auto; }
.gd-frame > .gd-c.is-tl { left: -8px; top: -8px; } .gd-frame > .gd-c.is-tr { right: -8px; top: -8px; } .gd-frame > .gd-c.is-br { right: -8px; bottom: -8px; } .gd-frame > .gd-c.is-bl { left: -8px; bottom: -8px; }
.gd-spray { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; }
.gd-spray.is-a { left: 4px; top: 4px; } .gd-spray.is-b { right: 4px; bottom: 4px; }
.gd-in { position: relative; padding: calc(var(--u) * .2) calc(var(--u) * .12) calc(var(--u) * .16); background: radial-gradient(ellipse at 50% 28%, var(--glow), var(--card) 70%);
  box-shadow: inset 0 0 0 1px var(--gold-1), inset 0 0 0 8px var(--card), inset 0 0 0 9px color-mix(in srgb, var(--gold-2) 60%, transparent), inset 0 0 40px rgba(0, 0, 0, .14); }
.gd-photo { position: relative; width: 74%; margin: 0 auto 20px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50%; background: var(--paper);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--gold-2), 0 0 0 9px var(--card), 0 0 0 10px var(--gold-1), 0 18px 30px -18px rgba(0, 0, 0, .6); }
.gd-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd-photo .ph-slot { border-radius: 50%; }
.gd-hero .hero-media-tag { bottom: 16%; font-size: .56rem; white-space: normal; width: 70%; max-width: none; text-align: center; line-height: 1.3; }
.gd-hero .hero-guest { margin: 0 0 6px; font: italic 400 1.02rem var(--text); color: var(--muted); } .gd-hero .hero-guest b { font-style: normal; font-weight: 400; color: var(--ink); }
.gd-hero .hero-k { margin: 0; font: 400 .66rem/1.7 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.t-gilded .hero-t { margin: 10px 0 4px; font: 400 clamp(2.9rem, 14vw, 4.1rem)/1.3 var(--script); letter-spacing: 0; padding: 0 .25em; }
.t-gilded .hero-t span { display: block; font-size: calc(1em * var(--fit, 1)); }
.t-gilded .hero-t i { display: block; margin: -.2em 0; font: 400 .42em/1.4 var(--display); }
.gd-hero .hero-line { margin: 8px auto 0; max-width: 18em; font: italic 400 1.04rem/1.5 var(--text); color: var(--muted); }
.gd-when { display: flex; flex-direction: column; gap: 4px; margin: 18px 0 0; }
.gd-when span:first-child { font: 400 .72rem/1.6 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.gd-when span:last-child { font: italic 400 1rem var(--text); color: var(--muted); }
.gd-hero .hero-cta, .t-gilded .rs-btn { display: inline-block; margin-top: 22px; padding: 14px 40px; border: 0; border-radius: 2px; color: var(--accent-ink); font: 400 .74rem var(--display); letter-spacing: .22em; text-transform: uppercase;
  background: var(--goldbar); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 10px 22px -10px var(--gold-1); }

/* ---------- sections: gilded panels ---------- */
.t-gilded .s:not(.s-hero) { position: relative; width: calc(100% - 36px); max-width: var(--maxw); margin: 0 auto 46px; padding: 66px 26px 54px; background: radial-gradient(ellipse at 50% 0, var(--glow), var(--card) 70%);
  box-shadow: 0 0 0 1px var(--gold-1), 0 0 0 5px var(--card), 0 0 0 7px var(--gold-2), 0 30px 50px -30px rgba(0, 0, 0, .65); }
.t-gilded .s:not(.s-hero)::before, .t-gilded .s:not(.s-hero)::after { content: ""; position: absolute; z-index: 2; width: 74px; height: 74px; background: url("../img/gilded/corner.webp") 0 0 / contain no-repeat; pointer-events: none; }
.t-gilded .s:not(.s-hero)::before { left: -12px; top: -12px; }
.t-gilded .s:not(.s-hero)::after { right: -12px; bottom: -12px; transform: rotate(180deg); }
.t-gilded .s-hero + .s { margin-top: 20px; }
.t-gilded .sh-k { font: 400 2.6rem/1.3 var(--script); letter-spacing: 0; text-transform: none; color: var(--accent); }
.t-gilded .sh-t { margin-top: 0; font: 400 clamp(1.05rem, 5vw, 1.3rem)/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.t-gilded .sh::after { content: ""; display: block; width: 90px; height: 8px; margin: 14px auto 0; background: radial-gradient(circle, var(--gold-2) 0 3px, transparent 3.5px) center / 8px 8px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left center / 38px 1px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right center / 38px 1px no-repeat; }
.t-gilded .cd-u b { font: 400 2.2rem var(--display); color: var(--ink); }
.t-gilded .cd-u span { letter-spacing: .14em; }
.t-gilded .tl-time { font-style: italic; color: var(--accent); }
.t-gilded .tl-title { font-weight: 400; }
.t-gilded .vn-c, .t-gilded .gl-it, .t-gilded .gl-c, .t-gilded .dr-roles > div, .t-gilded .rs-form { border: 1px solid color-mix(in srgb, var(--gold-2) 60%, transparent); border-radius: var(--radius); background: var(--paper); }
.t-gilded .vn-n { font: 400 1.1rem var(--display); }
.t-gilded .btn-line { border-radius: 2px; font: 400 .66rem var(--display); letter-spacing: .16em; text-transform: uppercase; border-color: var(--gold-2); }
.t-gilded .faq summary { font-weight: 400; }
.t-gilded .sw-dot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }

/* gallery: a salon wall of gilded frames */
.gd-salon { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.gd-gf { position: relative; --cs: 44px; margin: 0; text-align: center; padding: 8px; background: var(--goldbar); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 14px 22px -14px rgba(0, 0, 0, .6); }
.gd-gf.is-0 { grid-column: 1 / -1; } .gd-gf.is-0 .gd-gimg { aspect-ratio: 16 / 10; }
.gd-gimg { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.gd-gf figcaption { position: absolute; left: 0; right: 0; bottom: -2px; transform: translateY(100%); padding-top: 4px; font: 400 1.5rem/1.2 var(--script); color: var(--accent); }
.gd-salon { padding-bottom: 26px; row-gap: 44px; }

/* closing */
.gd-close { text-align: center; }
.gd-cchand { display: block; width: 74%; height: auto; margin: -24px auto -36px; }
.gd-oval { position: relative; --u: min(56vw, 250px); width: var(--u); aspect-ratio: 4 / 5; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, var(--glow), var(--card) 65%);
  box-shadow: 0 0 0 3px var(--gold-2), 0 0 0 7px var(--card), 0 0 0 9px var(--gold-1), 0 20px 34px -20px rgba(0, 0, 0, .6); }
.gd-spray.is-c { left: 50%; bottom: 0; top: auto; }
.gd-omono { margin: 0; font: 400 clamp(3rem, 14vw, 4rem)/1.3 var(--script); padding: 0 .2em; }
.gd-omono i { font-style: normal; font-size: .62em; }
.t-gilded .cl-line { margin: 0 auto; max-width: 20em; font: italic 400 clamp(1rem, 4.4vw, 1.15rem)/1.5 var(--text); }
.t-gilded .cl-sign { margin: 6px 0 0; font: 400 clamp(2rem, 9vw, 2.6rem)/1.3 var(--script); color: var(--accent); }
.t-gilded .cl-tag { font: 400 .72rem var(--display); letter-spacing: .14em; }
.t-gilded .inv .s-closing.gd-close, body.is-demo .inv .s-closing.gd-close { padding-bottom: 54px; margin-bottom: 150px; }

@media (prefers-reduced-motion: reduce) { .gd-chand, .gd-sparks i, .gd-tap { animation: none; } }
.mr-s:not(.is-f) { filter: var(--rose-fx); }
.gd-hero .hero-media-tag { font-size: .62rem; }
.t-gilded .gl-btn { background: var(--goldbar); color: var(--accent-ink); }