@font-face { font-family: "Mea Culpa"; src: url("../fonts/palace/meaculpa-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Aboreto"; src: url("../fonts/palace/aboreto-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mate"; src: url("../fonts/palace/mate-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* PALACE GATES (theme key "palace", round 36): a royal welcome; our own design. Intro: a pair of wrought gates
   (core/themes/palace/_parts.php) with your crest where they meet and light behind them; tap and the crest lifts, the
   gates swing open and you walk into the light. Cover: the crest (shield, initials, a small crown, laurel), names in a
   grand script, the date written out in words, the photo in a gilded arch, the reply button at the top of a gold
   staircase. Sections: gold filigree over headings, roman numerals, a wax seal on the reply card (core/dress.php).
   Palette: --gate the ironwork, --gold/--gold2 the gilding, --sky the light behind the gates.
   Royal Navy & Gold (original), Chocolate & Gold, Ivory Palace. Type: Mea Culpa (names), Aboreto (capitals), Mate (text). */
:root {
  --bg: #0f1a33; --paper: #15213f; --tone: #172546; --ink: #f3ead6; --muted: #b6ae9c; --line: rgba(243, 234, 214, .15);
  --accent: #d3ad5b; --accent-ink: #0f1a33; --gold: #d3ad5b; --gold2: #f5dc9a; --sky: #2a3f6e; --gate: var(--gold);
  --display: "Aboreto", "Trajan Pro", Georgia, serif; --text: "Mate", Georgia, serif; --script: "Mea Culpa", cursive;
  --radius: 2px; --maxw: 540px;
  --gilt: linear-gradient(115deg, color-mix(in srgb, var(--gold) 80%, #000) 0%, var(--gold) 28%, var(--gold2) 46%, var(--gold) 62%, color-mix(in srgb, var(--gold) 75%, #000) 100%);
}
body { font-family: var(--text); font-size: 1.04rem; line-height: 1.7; color: var(--ink); background: var(--bg); }

/* drawings */
.pl-gate { display: block; width: 100%; height: 100%; overflow: visible; }
.pl-iron, .pl-iron * { fill: none; stroke: var(--gate); stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pl-iron .pl-tip { fill: var(--gold); stroke: none; }
.pl-crest { display: block; overflow: visible; }
.pl-crest .pl-laurel ellipse { fill: var(--gold); opacity: .9; }
.pl-crest .pl-crown { fill: var(--gold); }
.pl-crest .pl-shield { fill: color-mix(in srgb, var(--bg) 70%, transparent); stroke: var(--gold); stroke-width: 2.5; }
.pl-crest .pl-shield.is-in { fill: none; stroke-width: 1; }
.pl-crest .pl-ini { font: 400 30px var(--display); fill: var(--gold2); letter-spacing: 2px; }

/* ---------- intro: the gates open ---------- */
.pl-intro { --intro-ms: 2400; overflow: hidden; background: radial-gradient(60% 45% at 50% 52%, color-mix(in srgb, var(--gold2) 55%, var(--sky)), var(--sky) 55%, color-mix(in srgb, var(--sky) 55%, #000) 110%);
  transition: opacity .6s ease 1.8s, visibility 0s linear 2.4s; }
.pl-start { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; perspective: 1000px; overflow: hidden; }
.pl-court { position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 60%, color-mix(in srgb, #fff 55%, transparent), transparent 70%); opacity: .5; transition: opacity 1s ease .4s; }
.pl-gates { position: absolute; left: 0; right: 0; bottom: 0; height: 84svh; display: flex; transform-style: preserve-3d; transition: transform 1.6s cubic-bezier(.5, 0, .2, 1) .5s; }
.pl-g { flex: 1; height: 100%; transition: transform 1.3s cubic-bezier(.5, 0, .25, 1); }
.pl-g.is-l { transform-origin: 0 50%; } .pl-g.is-r { transform-origin: 100% 50%; } .pl-g.is-r .pl-gate { transform: scaleX(-1); }
.pl-crest.is-intro { position: absolute; left: 50%; top: 40%; width: min(42vw, 170px); height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45)); transition: transform 1s cubic-bezier(.5, 0, .2, 1), opacity .7s ease .2s; }
.pl-for { position: absolute; left: 0; right: 0; top: 12%; font: 400 2.4rem/1.1 var(--script); color: var(--gold2); text-shadow: 0 2px 10px rgba(0, 0, 0, .4); } .pl-for b { font-weight: 400; }
.pl-tap { position: absolute; left: 0; right: 0; bottom: 6%; font: 400 .7rem var(--display); letter-spacing: .3em; color: var(--ink); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); animation: pl-pulse 3s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: .4; } }
.is-opening .pl-g.is-l { transform: rotateY(-108deg); } .is-opening .pl-g.is-r { transform: rotateY(108deg); }
.is-opening .pl-gates { transform: translateZ(260px); }
.is-opening .pl-crest.is-intro { transform: translate(-50%, -160%) scale(.7); opacity: 0; }
.is-opening .pl-court { opacity: 1; }
.is-opening .pl-tap, .is-opening .pl-for { opacity: 0; animation: none; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .pl-tap { animation: none; } .pl-g, .pl-gates, .pl-crest.is-intro { transition-duration: .01s !important; } }

/* ---------- cover ---------- */
.t-palace .pl-hero { display: block; justify-items: normal; align-items: normal; min-height: 100svh; padding: 34px var(--gutter) 30px; text-align: center;
  background: radial-gradient(90% 40% at 50% 0, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), var(--bg); }
.pl-crest.is-top { width: min(38vw, 150px); height: auto; margin: 0 auto 18px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 35%, transparent)); }
.pl-hero .hero-guest { margin: 0 0 6px; font: 400 2.2rem/1.2 var(--script); color: var(--gold2); } .pl-hero .hero-guest b { font-weight: 400; }
.pl-hero .hero-k, .t-palace .sh-k { margin: 0; font: 400 .68rem/1.7 var(--display); letter-spacing: .32em; color: var(--accent); text-wrap: balance; }
.t-palace .hero-t { margin: 8px 0 0; font: 400 clamp(3.4rem, min(19vw, calc(165vw / var(--nl, 7))), 6.6rem)/1.02 var(--script); letter-spacing: 0;
  background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .1em; }
.t-palace .hero-t span { display: block; }
.t-palace .hero-t i { display: block; margin: -2px 0 4px; font: 400 .26em/1 var(--display); letter-spacing: .3em; font-style: normal; }
.pl-hero .hero-line { margin: 14px auto 0; max-width: 21em; color: var(--muted); text-wrap: balance; }
.pl-frame { width: min(70vw, 290px); aspect-ratio: 4 / 5; margin: 34px auto 0; padding: 7px; border-radius: 999px 999px 3px 3px; background: var(--gilt); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7); }
.pl-ph { width: 100%; height: 100%; border-radius: 999px 999px 2px 2px; background: var(--paper); box-shadow: 0 0 0 2px var(--bg); }
.pl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-ph .hero-media-tag { bottom: 10px; font-size: .5rem; }
.pl-decree { display: grid; gap: 4px; margin: 30px auto 0; }
.pl-decree span:first-child { font: 400 1.18rem/1.4 var(--text); font-style: italic; color: var(--ink); }
.pl-decree span:last-child { font: 400 .74rem var(--display); letter-spacing: .3em; color: var(--gold); }
.pl-where { margin: 10px auto 0; font: 400 .74rem var(--display); letter-spacing: .2em; color: var(--muted); }
.pl-stairs { position: relative; display: grid; justify-items: center; margin-top: 26px; }
.t-palace .hero-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 12px 40px; border: 0; border-radius: 0;
  background: var(--gilt); color: var(--accent-ink); font: 400 .8rem var(--display); letter-spacing: .3em; text-decoration: none; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.pl-steps { display: block; width: min(92%, 420px); height: 74px; margin-top: -2px;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, transparent) 0 2px, transparent 2px 14px), linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, transparent), transparent);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); -webkit-mask: linear-gradient(#000, rgba(0, 0, 0, .25)); mask: linear-gradient(#000, rgba(0, 0, 0, .25)); }

/* ---------- sections: gold filigree ---------- */
.t-palace .s:not(.s-hero) { padding-top: 84px; padding-bottom: 84px; }
.t-palace .s:nth-of-type(even):not(.s-hero):not(.s-closing) { background: var(--tone); }
.t-palace .sh { margin-bottom: 36px; }
.t-palace .sh::before { content: ""; display: block; width: 180px; height: 22px; margin: 0 auto 16px; background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 12H64M136 12H200M64 12c8-12 20-12 28 0s20 12 28 0M64 12c8 12 20 12 28 0M108 12c8-12 20-12 28 0'/%3E%3C/g%3E%3Ccircle cx='100' cy='12' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M0 12H64M136 12H200M64 12c8-12 20-12 28 0s20 12 28 0M64 12c8 12 20 12 28 0M108 12c8-12 20-12 28 0'/%3E%3C/g%3E%3Ccircle cx='100' cy='12' r='4'/%3E%3C/svg%3E") center / contain no-repeat; }
.t-palace .sh-t { font: 400 clamp(1.5rem, 7.2vw, 2.1rem)/1.25 var(--display); letter-spacing: .14em; color: var(--ink); }
.t-palace .sh-n { font: 400 .8rem var(--display); color: var(--gold); letter-spacing: .2em; }
.t-palace .cd-u b { font: 400 clamp(2.2rem, 10vw, 2.8rem)/1 var(--display); color: var(--accent); }
.t-palace .cd-u span { font: 400 .56rem var(--display); letter-spacing: .24em; }
.t-palace .vn-c, .t-palace .dr-roles > div, .t-palace .rs, .t-palace .rs-done, .t-palace .gl-c, .t-palace .gl-it {
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: var(--radius); background: var(--paper); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px color-mix(in srgb, var(--gold) 28%, transparent); }
.t-palace .vn-l, .t-palace .dr-roles dt, .t-palace .bio-r, .t-palace .tml-d { font: 400 .6rem var(--display); letter-spacing: .22em; color: var(--gold); }
.t-palace .vn-n, .t-palace .pp-h, .t-palace .tml-t { font: 400 1.1rem/1.35 var(--display); letter-spacing: .06em; color: var(--ink); }
.t-palace .tl-time { color: var(--gold); font: 400 .8rem var(--display); letter-spacing: .1em; }
.t-palace .tl-title { font: 400 1.08rem var(--text); }
.t-palace .f-in, .t-palace .ch span { border-radius: var(--radius); background: var(--bg); border-color: var(--line); color: var(--ink); }
.t-palace .rs-btn, .t-palace .gl-btn { border-radius: 0; background: var(--gilt); color: var(--accent-ink); font: 400 .78rem var(--display); letter-spacing: .26em; }
.t-palace .btn-line { min-height: 46px; border-radius: 0; border-color: var(--gold); color: var(--ink); font: 400 .7rem var(--display); letter-spacing: .22em; }
.t-palace .btn-line:hover { background: var(--gold); color: var(--accent-ink); }
.t-palace .faq summary { font: 400 1.08rem var(--text); }
.t-palace .gal-i img, .t-palace .gal-ph { border-radius: 999px 999px 2px 2px; }
.t-palace .tml::before { background: var(--gold); width: 1px; opacity: .6; }
.t-palace .tml-dot { background: var(--bg); border: 2px solid var(--gold); }

/* ---------- closing ---------- */
.t-palace .pl-end { padding: 90px var(--gutter) 110px; text-align: center; background: radial-gradient(80% 40% at 50% 0, color-mix(in srgb, var(--gold) 18%, transparent), transparent), var(--bg); }
.t-palace .pl-end > * { margin-left: auto; margin-right: auto; }
.pl-crest.is-end { width: min(34vw, 130px); height: auto; margin-bottom: 24px; }
.t-palace .pl-end .cl-line { font: 400 1.2rem/1.6 var(--text); font-style: italic; max-width: 19em; text-wrap: balance; }
.t-palace .pl-end .cl-sign { margin-top: 10px; font: 400 3.2rem/1.1 var(--script); background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-palace .pl-end .cl-tag { font: 400 .66rem var(--display); letter-spacing: .24em; color: var(--gold); }
.t-palace body.is-demo .pl-end { padding-bottom: 140px; }