/* Scroll Craft is vendored unchanged; the Saraya scene is authored here. */
:root {
  --sc-canvas: #101b16;
  --sc-surface: #17251e;
  --sc-ink: #f5f1e8;
  --sc-ink-soft: #c1c6b9;
  --sc-accent: #d4b77c;
  --sc-accent-ink: #17251e;
  --sc-font-display: Georgia, "Times New Roman", serif;
  --sc-font-text: Arial, Tahoma, sans-serif;
}
/* The supplied 1600 x 1800 PNG, with its original alpha and colors. */
.brand.brand-file, .teaser-end h2 .brand.brand-file {
  position: relative; display: block; width: 108px; padding: 0; background: transparent;
  border-radius: 0; line-height: 0; box-shadow: none;
}
/* Preserve the stone pixels; the wordmark is the designer's original SVG
   outline artwork, aligned to the final PNG. No raster mask or substitute font. */
.brand-file > img { position: static; width: 100%; height: auto; max-width: 100%; clip-path: inset(0 0 22% 0); }
.brand-file > .brand-vector-wordmark {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.brand.brand-file.footer-brand { width: 76px; margin-inline-end: 10px; }
.brand-file.teaser-wordmark { width: 72px; }
.teaser-end h2 .brand-file.brand-reveal { width: 230px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .site-header .brand.brand-file { width: 92px; }
}
/* Only the real timber doors rotate. Text and stone stay in place. */
.invitation.emblem-gate { padding: 0; overflow: visible; isolation: isolate; background: var(--forest-deep); }
.gate-stage {
  position: relative; min-height: 650px; height: 100svh; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 70px);
  padding: 60px max(var(--page-pad), calc((100vw - 1420px) / 2));
  background: var(--forest-deep); overflow: clip;
}
.gate-motion-ready .gate-stage { position: sticky; top: 0; }
.gate-visual { min-width: 0; display: grid; place-items: center; }
.gate-art {
  position: relative; width: min(100%, 660px, 74.88svh); aspect-ratio: 480 / 500;
  /* Soft photographic edges, no frame or logo backing. */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(0deg, transparent, #000 10%, #000 91%, transparent);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}
.gate-world { position: absolute; inset: 0; }
.gate-interior, .gate-facade { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate-interior { z-index: 0; }
.gate-facade { z-index: 2; pointer-events: none; }
.gate-calligraphy { opacity: var(--gate-reveal, 1); }
.gate-doorway {
  position: absolute; left: 29.583333%; top: 22.6%; width: 40.625%; height: 61.4%;
  perspective: 600px; perspective-origin: 50% 50%; z-index: 1;
}
.gate-leaf { position: absolute; top: 0; height: 100%; backface-visibility: hidden; }
.gate-leaf > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gate-leaf-left { left: 0; width: 50.256411%; transform-origin: left center; transform: rotateY(var(--gate-angle, 86deg)); }
.gate-leaf-right { right: 0; width: 49.743589%; transform-origin: right center; transform: rotateY(calc(-1 * var(--gate-angle, 86deg))); }
.gate-leaf-shade { fill: #070b08; opacity: var(--gate-door-shade, .32); }
.emblem-gate .invitation-content { position: relative; text-align: start; width: 100%; max-width: 630px; }
.emblem-gate .eyebrow { font-size: 9px; margin-bottom: 28px; letter-spacing: .19em; }
.emblem-gate h2 { font-size: clamp(40px, 4.35vw, 72px); line-height: 1.12; text-wrap: balance; }
.emblem-gate p[data-i18n="invitationCopy"] { margin-top: 28px; color: #c1c6b9; font-size: 13px; line-height: 1.9; }
.emblem-gate .button { margin-top: 30px; min-height: 52px; }
.emblem-gate .share-feedback { margin-top: 10px; min-height: 18px; }
[dir="rtl"] .gate-visual { direction: ltr; }
/* Static fallback is open doors and complete calligraphy, without pinning. */
.gate-static.emblem-gate { height: auto !important; }
.gate-static .gate-stage { height: auto; min-height: 720px; }
@media (max-width: 760px) {
  .brand.brand-file { width: 84px; }
  .brand-file.teaser-wordmark { width: 60px; }
  .teaser-end h2 .brand-file.brand-reveal { width: 190px; }
  .gate-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; min-height: 610px; padding: 24px 22px 22px; }
  .gate-visual { min-height: 0; height: 100%; }
  .gate-art { width: min(100%, 42svh); max-height: none; }
  .emblem-gate .invitation-content { text-align: center; margin-inline: auto; }
  .emblem-gate h2 { font-size: clamp(30px, 7.8vw, 45px); line-height: 1.16; }
  .emblem-gate .eyebrow { font-size: 7px; margin-bottom: 16px; }
  .emblem-gate p[data-i18n="invitationCopy"] { font-size: 11px; margin-top: 18px; }
  .emblem-gate .button { margin-top: 21px; min-height: 48px; }
  .gate-static .gate-stage { min-height: 660px; grid-template-rows: 325px auto; }
  .gate-static .gate-art { width: 310px; max-width: 100%; }
  [dir="rtl"] .emblem-gate h2 { font-size: clamp(27px, 7vw, 38px); line-height: 1.45; }
  [dir="rtl"] .emblem-gate .eyebrow { font-size: 10px; }
}
@media (max-height: 720px) and (max-width: 760px) {
  .gate-stage { min-height: 575px; padding-block: 12px; gap: 10px; }
  .gate-art { width: min(100%, 41svh); }
  .emblem-gate .eyebrow { margin-bottom: 10px; }
  .emblem-gate p[data-i18n="invitationCopy"] { margin-top: 12px; }
  .emblem-gate .button { margin-top: 14px; min-height: 46px; }
}
@media (max-height: 540px) and (min-width: 761px) {
  .gate-stage { min-height: 410px; padding-block: 24px; gap: 25px; }
  .gate-art { width: 65svh; }
  .emblem-gate h2 { font-size: 36px; }
  .emblem-gate .eyebrow { margin-bottom: 16px; }
  .emblem-gate p[data-i18n="invitationCopy"] { margin-top: 14px; }
  .emblem-gate .button { margin-top: 16px; }
  .teaser-end h2 .brand-file.brand-reveal { width: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  .emblem-gate { height: auto !important; }
  .gate-stage { height: auto; min-height: 720px; }
  .gate-leaf-left { transform: rotateY(86deg) !important; }
  .gate-leaf-right { transform: rotateY(-86deg) !important; }
  .gate-calligraphy { opacity: 1 !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .gate-stage { min-height: 660px; grid-template-rows: 325px auto; }
  .gate-art { width: 310px; max-width: 100%; }
}