/*
 * Pangeran Kecil (Khitanan): the child as a little prince for a day. Navy velvet with a gold damask,
 * gold leaf, crowns, laurels, royal parchment and red wax seals.
 * Ornaments: inline SVG symbols in sections/_defs (crown, laurel, shield, star, icons); velvet, damask,
 * parchment, rollers, arches, ribbons and wax are CSS.
 * Colors from the variant: --inv-primary (velvet), --inv-accent (gold), --inv-background (the dark hall),
 * --inv-text (cream), --inv-shade (deepest velvet), --inv-paper (parchment), --inv-ink (text on parchment),
 * --inv-seal (wax). All classes start with "pangeran-kecil-".
 */

:root {
    --inv-primary: #1f2f66;
    --inv-accent: #d4af5a;
    --inv-background: #0b1330;
    --inv-text: #f4ecd6;
    --inv-shade: #070d22;
    --inv-paper: #f5ead0;
    --inv-ink: #2b2214;
    --inv-seal: #a3202a;
    --inv-radius: 10px;

    --pk-w: 460px;
    /* distance from the viewport edge to the column (0 on phones) */
    --pk-edge: max(0px, calc((100vw - var(--pk-w)) / 2));

    --pk-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
    --pk-label: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --pk-serif: 'EB Garamond', 'Garamond', Georgia, serif;

    --pk-gold-bg: linear-gradient(115deg, color-mix(in srgb, var(--inv-accent) 50%, #fff) 0%, var(--inv-accent) 30%, color-mix(in srgb, var(--inv-accent) 70%, #3a2400) 55%, color-mix(in srgb, var(--inv-accent) 72%, #fff) 80%, var(--inv-accent) 100%);
    --pk-gold-v: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 45%, #fff) 0%, var(--inv-accent) 45%, color-mix(in srgb, var(--inv-accent) 60%, #2a1a00) 100%);
    --pk-gold-light: color-mix(in srgb, var(--inv-accent) 72%, #fff);
    --pk-gold-soft: color-mix(in srgb, var(--inv-accent) 40%, transparent);
    /* gold that stays readable on parchment */
    --pk-gold-ink: color-mix(in srgb, var(--inv-accent) 42%, var(--inv-ink));
    --pk-seal-dark: color-mix(in srgb, var(--inv-seal) 72%, #000);

    --pk-damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23d4af5a' stroke-opacity='.085'%3E%3Cpath d='M30 0 60 30 30 60 0 30Z'/%3E%3Cpath d='M30 14c4 6 4 11 0 16-4-5-4-10 0-16Zm0 32c4-6 4-11 0-16-4 5-4 10 0 16ZM14 30c6-4 11-4 16 0-5 4-10 4-16 0Zm32 0c-6 4-11 4-16 0 5-4 10-4 16 0Z'/%3E%3C/g%3E%3C/svg%3E");
    --pk-parchment:
        radial-gradient(ellipse 80% 70% at 50% 45%, transparent 55%, color-mix(in srgb, #8a6a30 22%, transparent) 100%),
        radial-gradient(circle at 18% 22%, color-mix(in srgb, #fff 35%, transparent), transparent 40%),
        linear-gradient(172deg, color-mix(in srgb, var(--inv-paper) 92%, #fff), var(--inv-paper) 45%, color-mix(in srgb, var(--inv-paper) 88%, #a07a3c));
    --pk-wax: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--inv-seal) 62%, #fff) 0, var(--inv-seal) 38%, var(--pk-seal-dark) 100%);
    --pk-crown-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 50'%3E%3Cpath d='M7 39 3.5 14.5 18.5 26 32 7l13.5 19 15-11.5L57 39Z' fill='%23f1d58d'/%3E%3Crect x='6' y='38' width='52' height='8.5' rx='2.2' fill='%23f1d58d'/%3E%3Ccircle cx='3.5' cy='13.5' r='2.8' fill='%23f1d58d'/%3E%3Ccircle cx='32' cy='5.2' r='3.4' fill='%23f1d58d'/%3E%3Ccircle cx='60.5' cy='13.5' r='2.8' fill='%23f1d58d'/%3E%3C/svg%3E");

    /* context tokens: velvet by default, redefined on parchment */
    --pk-fg: var(--inv-text);
    --pk-muted: color-mix(in srgb, var(--inv-text) 84%, transparent);
    --pk-title: var(--inv-text);
    --pk-accent-text: var(--pk-gold-light);
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--inv-background); scroll-behavior: smooth; }

body.pangeran-kecil-body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font: 400 1.1rem/1.65 var(--pk-serif);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.pangeran-kecil-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pangeran-kecil-icon { width: 1.15em; height: 1.15em; flex: none; }
.pangeran-kecil-amp { padding: 0 .25em; font: italic 500 .62em/1 var(--pk-serif); color: var(--pk-gold-light); vertical-align: .12em; }

/* ---------- backdrop (wide screens) and the column ---------- */

.pangeran-kecil-backdrop {
    position: fixed; inset: 0; z-index: 0;
    background:
        radial-gradient(ellipse at center, transparent 20%, rgb(0 0 0 / .65) 100%),
        var(--pk-damask),
        var(--inv-shade);
    background-size: auto, 60px 60px, auto;
}

.pangeran-kecil-page {
    position: relative; z-index: 1;
    width: min(100%, var(--pk-w)); min-height: 100vh; margin: 0 auto;
    overflow-x: clip;
    background:
        radial-gradient(ellipse 130% 40% at 50% 0, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        var(--pk-damask),
        linear-gradient(180deg, var(--inv-background), color-mix(in srgb, var(--inv-primary) 45%, var(--inv-background)) 50%, var(--inv-background));
    background-size: auto, 60px 60px, auto;
}

@media (min-width: 520px) {
    .pangeran-kecil-page { box-shadow: 0 0 0 1px var(--pk-gold-soft), 0 0 0 6px var(--inv-shade), 0 0 0 7px color-mix(in srgb, var(--inv-accent) 22%, transparent), 0 30px 90px rgb(0 0 0 / .7); }
}
@media (max-width: 519px) {
    .pangeran-kecil-backdrop { display: none; }
}

.pangeran-kecil-preview {
    position: fixed; z-index: 60; top: 0; left: 0; right: 0;
    width: min(100%, var(--pk-w)); margin: 0 auto; padding: .35rem .75rem;
    background: var(--inv-accent); color: var(--inv-shade);
    font: 600 .66rem/1.3 var(--pk-label); text-align: center; letter-spacing: .06em;
}

/* ---------- small shared pieces: rule, heading, buttons, chips, rollers, wax ---------- */

.pangeran-kecil-rule {
    position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem;
    width: min(11rem, 60%); margin: 0 auto; color: var(--inv-accent);
}
.pangeran-kecil-rule::before, .pangeran-kecil-rule::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}
.pangeran-kecil-rule::after { background: linear-gradient(270deg, transparent, currentColor); }
.pangeran-kecil-rule svg { width: 1.05rem; height: 1.05rem; flex: none; }

.pangeran-kecil-heading { display: grid; justify-items: center; gap: .3rem; margin-bottom: 1.9rem; }
.pangeran-kecil-heading__crown { width: 2.6rem; height: 2rem; color: var(--inv-seal); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.pangeran-kecil-heading__label {
    font: 600 .7rem/1.4 var(--pk-label); letter-spacing: .3em; text-transform: uppercase; color: var(--pk-accent-text);
}
.pangeran-kecil-heading__title {
    font: 700 clamp(1.65rem, 7.4vw, 2rem)/1.2 var(--pk-display); color: var(--pk-title);
    text-wrap: balance;
}
.pangeran-kecil-heading .pangeran-kecil-rule { margin-top: .45rem; }

.pangeran-kecil-lead { max-width: 24rem; margin: -.6rem auto 1.6rem; color: var(--pk-muted); font-style: italic; }

.inv-button {
    min-height: 2.9rem; padding: .78rem 1.45rem;
    background: var(--pk-gold-bg); color: var(--inv-shade);
    font: 700 .74rem/1.2 var(--pk-label); letter-spacing: .13em; text-transform: uppercase;
    box-shadow: 0 10px 22px -12px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .35);
}
.inv-button--outline {
    background: transparent; color: var(--pk-gold-light);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 75%, transparent);
}
.inv-button:focus-visible { outline: 2px solid var(--pk-gold-light); outline-offset: 3px; }
.inv-button .pangeran-kecil-icon { width: 1.2rem; height: 1.2rem; }

.pangeran-kecil-chip {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem 1rem;
    border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pk-gold-soft);
    color: var(--pk-accent-text); font: 600 .9rem/1.2 var(--pk-serif); text-decoration: none;
}
.pangeran-kecil-chip:focus-visible { outline: 2px solid var(--pk-gold-light); outline-offset: 2px; }

/* the gold rollers of a scroll (cover, RSVP): absolute on a position: relative parent */
.pangeran-kecil-roller {
    position: absolute; z-index: 2; left: -10px; right: -10px; height: 18px; border-radius: 9px;
    background: var(--pk-gold-v);
    box-shadow: 0 6px 12px -4px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .45);
}
.pangeran-kecil-roller::before, .pangeran-kecil-roller::after {
    content: ''; position: absolute; top: -5px; width: 12px; height: 28px; border-radius: 6px;
    background: var(--pk-gold-bg); box-shadow: 0 3px 6px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(0 0 0 / .15);
}
.pangeran-kecil-roller::before { left: -9px; }
.pangeran-kecil-roller::after { right: -9px; }
.pangeran-kecil-roller--top { top: -9px; }
.pangeran-kecil-roller--bottom { bottom: -9px; }

.pangeran-kecil-wax {
    display: grid; place-items: center; border-radius: 50%;
    background: var(--pk-wax);
    box-shadow:
        inset 0 0 0 3px color-mix(in srgb, var(--pk-seal-dark) 70%, transparent),
        3px 2px 0 -1px var(--pk-seal-dark), -2px 3px 0 -1px var(--inv-seal), 1px -3px 0 -1px var(--inv-seal),
        0 8px 14px -6px rgb(0 0 0 / .55);
}
.pangeran-kecil-wax svg { width: 58%; height: 58%; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .35)); }

/* ---------- cover: the decree unrolls ---------- */

.pangeran-kecil-cover {
    position: fixed; inset: 0; z-index: 30;
    width: min(100%, var(--pk-w)); margin: 0 auto;
    overflow-x: hidden; overflow-y: auto;
    color: var(--inv-text);
    background:
        radial-gradient(ellipse 80% 55% at 50% 40%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 75%),
        var(--pk-damask),
        var(--inv-background);
    background-size: auto, 60px 60px, auto;
}
/* a gold double border around the velvet */
.pangeran-kecil-cover::before {
    content: ''; position: fixed; inset: 10px; z-index: 0; pointer-events: none;
    width: calc(min(100vw, var(--pk-w)) - 20px); margin: 0 auto;
    border: 1px solid var(--pk-gold-soft); outline: 1px solid color-mix(in srgb, var(--inv-accent) 22%, transparent); outline-offset: 4px;
}

.pangeran-kecil-cover__inner {
    position: relative; z-index: 1;
    min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.25rem; padding: 2.4rem 1.6rem 2.8rem; text-align: center;
}

.pangeran-kecil-scroll { position: relative; width: min(100%, 21.5rem); margin: 9px 0; }
.pangeran-kecil-scroll__sheet {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1.75rem 1.35rem 1.6rem;
    background: var(--pk-parchment); color: var(--inv-ink);
    box-shadow: 0 24px 50px -20px rgb(0 0 0 / .85), inset 0 0 0 1px color-mix(in srgb, #8a6a30 25%, transparent);
}
/* a thin gold frame inside the parchment */
.pangeran-kecil-scroll__sheet::before {
    content: ''; position: absolute; inset: 14px 10px; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--pk-gold-ink) 45%, transparent);
}
.pangeran-kecil-scroll__kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font: 700 .64rem/1.3 var(--pk-label); letter-spacing: .32em; text-transform: uppercase; color: var(--inv-seal);
}
.pangeran-kecil-scroll__kicker svg { width: .6rem; height: .6rem; color: var(--pk-gold-ink); }
.pangeran-kecil-scroll__title { font: 600 .9rem/1.3 var(--pk-label); letter-spacing: .12em; color: var(--pk-gold-ink); }
.pangeran-kecil-scroll__royal { display: grid; justify-items: center; margin-top: .2rem; }
.pangeran-kecil-scroll__crown { width: 3.6rem; height: 2.8rem; color: var(--inv-seal); filter: drop-shadow(0 5px 6px rgb(60 40 0 / .35)); }
.pangeran-kecil-scroll__prince { margin-top: .1rem; font: italic 500 1rem/1.3 var(--pk-serif); color: color-mix(in srgb, var(--inv-ink) 80%, transparent); }
.pangeran-kecil-scroll__names {
    margin-top: .15rem;
    font: 900 clamp(2.3rem, 11.5vw, 3rem)/1.08 var(--pk-display); color: var(--inv-primary);
    overflow-wrap: anywhere; text-wrap: balance;
}
.pangeran-kecil-scroll__names--many { font-size: clamp(1.55rem, 7.4vw, 2rem); line-height: 1.18; }
.pangeran-kecil-scroll__names .pangeran-kecil-amp { color: var(--pk-gold-ink); }
.pangeran-kecil-scroll .pangeran-kecil-rule { color: var(--pk-gold-ink); margin: .15rem auto; }
.pangeran-kecil-scroll__date { font: 600 .8rem/1.4 var(--pk-label); letter-spacing: .1em; color: var(--inv-ink); }
.pangeran-kecil-scroll__quote { max-width: 17rem; font: italic 400 1.02rem/1.45 var(--pk-serif); color: color-mix(in srgb, var(--inv-ink) 86%, transparent); text-wrap: pretty; }

/* the seal on the lower right corner, with two ribbon tails hanging under the roller */
.pangeran-kecil-scroll__seal { position: absolute; z-index: 3; right: -6px; bottom: -14px; width: 2.8rem; height: 2.8rem; }
.pangeran-kecil-scroll__seal .pangeran-kecil-wax { position: relative; width: 100%; height: 100%; rotate: 12deg; }
.pangeran-kecil-scroll__ribbon { position: absolute; top: 55%; left: 50%; width: 1.9rem; height: 1.3rem; translate: -50% 0; }
.pangeran-kecil-scroll__ribbon::before, .pangeran-kecil-scroll__ribbon::after {
    content: ''; position: absolute; top: 0; width: .8rem; height: 100%;
    background: linear-gradient(90deg, var(--pk-seal-dark), var(--inv-seal) 50%, var(--pk-seal-dark));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}
.pangeran-kecil-scroll__ribbon::before { left: 0; rotate: 14deg; transform-origin: top; }
.pangeran-kecil-scroll__ribbon::after { right: 0; rotate: -10deg; transform-origin: top; }
html.inv-anim .pangeran-kecil-scroll__seal { animation: pangeran-kecil-press .6s cubic-bezier(.3, 1.3, .5, 1) 1.35s both; }
html.inv-anim.inv-opened .pangeran-kecil-scroll__seal { animation: pangeran-kecil-fade-out .3s ease forwards; }

.pangeran-kecil-cover__guest {
    min-width: min(100%, 16rem); padding: .7rem 1.5rem .75rem;
    border: 1px solid var(--pk-gold-soft); border-radius: 4px;
    background: color-mix(in srgb, var(--inv-shade) 55%, transparent);
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--inv-shade) 40%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 18%, transparent);
}
.pangeran-kecil-cover__to { font: 600 .64rem/1.4 var(--pk-label); letter-spacing: .3em; text-transform: uppercase; color: var(--pk-gold-light); }
.pangeran-kecil-cover__guest-name { display: block; margin-top: .15rem; font: 600 1.25rem/1.3 var(--pk-serif); color: var(--inv-text); overflow-wrap: anywhere; }

.pangeran-kecil-open { padding-inline: 1.8rem; font-size: .78rem; }
.pangeran-kecil-open .pangeran-kecil-icon { width: 1.3rem; height: 1.3rem; }

/* entrance: the sheet unrolls from the top while the lower roller travels down, then the crown drops */
html.inv-anim .pangeran-kecil-scroll__sheet { animation: pangeran-kecil-unroll 1s cubic-bezier(.45, .05, .3, 1) .15s backwards; }
html.inv-anim .pangeran-kecil-scroll .pangeran-kecil-roller--bottom { animation: pangeran-kecil-roller-down 1s cubic-bezier(.45, .05, .3, 1) .15s both; }
html.inv-anim .pangeran-kecil-scroll .pangeran-kecil-roller--top { animation: pangeran-kecil-fade-in .4s ease both; }
html.inv-anim .pangeran-kecil-scroll__crown { animation: pangeran-kecil-crown-drop .85s cubic-bezier(.3, 1.45, .5, 1) 1s both; }
html.inv-anim .pangeran-kecil-scroll__names { animation: pangeran-kecil-glow 1.4s ease-out 1.55s both; }

@keyframes pangeran-kecil-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pangeran-kecil-roller-down { from { bottom: calc(100% - 9px); } to { bottom: -9px; } }
@keyframes pangeran-kecil-roll-up { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes pangeran-kecil-roller-up { from { bottom: -9px; } to { bottom: calc(100% - 9px); } }
@keyframes pangeran-kecil-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pangeran-kecil-fade-out { to { opacity: 0; transform: translateY(14px); } }
@keyframes pangeran-kecil-crown-drop {
    0% { opacity: 0; transform: translateY(-64px) rotate(-16deg) scale(1.1); }
    45% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes pangeran-kecil-glow {
    0% { text-shadow: 0 0 0 transparent; }
    35% { text-shadow: 0 0 18px color-mix(in srgb, var(--inv-accent) 85%, transparent); }
    100% { text-shadow: 0 0 0 transparent; }
}

/* opening: the decree rolls back up, the plaque and button fade, then the velvet lifts away */
html.inv-anim.inv-opened .pangeran-kecil-scroll__sheet { animation: pangeran-kecil-roll-up .55s cubic-bezier(.6, 0, .4, 1) forwards; }
html.inv-anim.inv-opened .pangeran-kecil-scroll .pangeran-kecil-roller--bottom { animation: pangeran-kecil-roller-up .55s cubic-bezier(.6, 0, .4, 1) forwards; }
html.inv-anim.inv-opened .pangeran-kecil-cover__guest,
html.inv-anim.inv-opened .pangeran-kecil-open { animation: pangeran-kecil-fade-out .35s ease forwards; }
.pangeran-kecil-cover--leave { transition: opacity .35s ease; }
html.inv-anim .pangeran-kecil-cover--leave { transition: transform .6s cubic-bezier(.7, 0, .3, 1) .5s, opacity .6s ease .5s; }
.pangeran-kecil-cover--gone { opacity: 0; }
html.inv-anim .pangeran-kecil-cover--gone { transform: translateY(-100%); }

/* short screens: the decree tightens so the plaque and "Buka Titah" stay above the fold */
@media (max-height: 760px) {
    .pangeran-kecil-cover__inner { gap: 1rem; padding: 1.8rem 1.5rem 2.4rem; }
    .pangeran-kecil-scroll__sheet { gap: .38rem; padding: 1.45rem 1.25rem 1.35rem; }
    .pangeran-kecil-scroll__crown { width: 3.1rem; height: 2.4rem; }
    .pangeran-kecil-scroll__names { font-size: clamp(2.1rem, 10.5vw, 2.6rem); }
    .pangeran-kecil-scroll__names--many { font-size: clamp(1.45rem, 6.8vw, 1.8rem); }
    .pangeran-kecil-scroll__quote { font-size: .96rem; line-height: 1.4; }
    .pangeran-kecil-cover__guest { padding: .55rem 1.3rem .6rem; }
    .pangeran-kecil-cover__guest-name { font-size: 1.15rem; }
}
@media (max-height: 660px) {
    .pangeran-kecil-cover__inner { gap: .8rem; padding: 1.4rem 1.4rem 2.2rem; }
    .pangeran-kecil-scroll__sheet { gap: .3rem; padding: 1.25rem 1.15rem 1.15rem; }
    .pangeran-kecil-scroll__sheet::before { inset: 10px 8px; }
    .pangeran-kecil-scroll__title { font-size: .8rem; }
    .pangeran-kecil-scroll__crown { width: 2.7rem; height: 2.1rem; }
    .pangeran-kecil-scroll__prince { font-size: .92rem; }
    .pangeran-kecil-scroll__names { font-size: clamp(1.9rem, 9.6vw, 2.3rem); }
    .pangeran-kecil-scroll__names--many { font-size: clamp(1.35rem, 6.4vw, 1.6rem); }
    .pangeran-kecil-scroll__date { font-size: .74rem; }
    .pangeran-kecil-scroll__quote { font-size: .9rem; line-height: 1.38; }
    .pangeran-kecil-cover__to { font-size: .6rem; }
    .pangeran-kecil-cover__guest-name { font-size: 1.08rem; }
    .pangeran-kecil-open { min-height: 2.75rem; padding-block: .7rem; }
}


/* a pointed palace arch: the curve is --pk-arch-h tall (set per element), the rest is straight;
   kept in one rule so the variable resolves on each element */
.pangeran-kecil-window__frame, .pangeran-kecil-window__mat, .pangeran-kecil-window__pane,
.pangeran-kecil-window__photo, .pangeran-kecil-window__pane > .pangeran-kecil-crest,
.pangeran-kecil-arch::before, .pangeran-kecil-arch__inner,
.pangeran-kecil-chapter__art, .pangeran-kecil-chapter__art img, .pangeran-kecil-chapter__numeral {
    clip-path: polygon(0 100%, 0% calc(var(--pk-arch-h) * 1), 0.4% calc(var(--pk-arch-h) * 0.889), 1.6% calc(var(--pk-arch-h) * 0.779), 3.6% calc(var(--pk-arch-h) * 0.671), 6.3% calc(var(--pk-arch-h) * 0.567), 9.7% calc(var(--pk-arch-h) * 0.468), 13.9% calc(var(--pk-arch-h) * 0.376), 18.7% calc(var(--pk-arch-h) * 0.29), 24% calc(var(--pk-arch-h) * 0.212), 29.9% calc(var(--pk-arch-h) * 0.144), 36.2% calc(var(--pk-arch-h) * 0.085), 43% calc(var(--pk-arch-h) * 0.036), 50% 0, 57% calc(var(--pk-arch-h) * 0.036), 63.8% calc(var(--pk-arch-h) * 0.085), 70.1% calc(var(--pk-arch-h) * 0.144), 76% calc(var(--pk-arch-h) * 0.212), 81.3% calc(var(--pk-arch-h) * 0.29), 86.1% calc(var(--pk-arch-h) * 0.376), 90.3% calc(var(--pk-arch-h) * 0.468), 93.7% calc(var(--pk-arch-h) * 0.567), 96.4% calc(var(--pk-arch-h) * 0.671), 98.4% calc(var(--pk-arch-h) * 0.779), 99.6% calc(var(--pk-arch-h) * 0.889), 100% calc(var(--pk-arch-h) * 1), 100% 100%);
}

/* ---------- hero: the palace window ---------- */

.pangeran-kecil-hero {
    position: relative; display: flex; flex-direction: column; align-items: center;
    padding: 4.2rem 1.5rem 2.6rem; text-align: center;
}
.pangeran-kecil-valance {
    position: absolute; top: 0; left: 0; right: 0; height: 2.9rem; pointer-events: none;
    background:
        radial-gradient(circle at 0 2.25rem, color-mix(in srgb, var(--inv-accent) 85%, #fff) 0 3px, transparent 3.6px) 0 0 / 4.5rem 2.9rem repeat-x,
        radial-gradient(ellipse 50% 100% at 50% 0, var(--inv-primary) 0 86%, var(--inv-accent) 86% 100%, transparent 100%) 0 0 / 4.5rem 2.25rem repeat-x,
        linear-gradient(var(--inv-shade), var(--inv-shade)) 0 0 / 100% .5rem no-repeat;
    filter: drop-shadow(0 5px 6px rgb(0 0 0 / .5));
}
.pangeran-kecil-hero__kicker { font: 600 .74rem/1.4 var(--pk-label); letter-spacing: .32em; text-transform: uppercase; color: var(--pk-gold-light); }

.pangeran-kecil-window {
    --pk-window-w: min(66vw, 15.5rem);
    position: relative; width: var(--pk-window-w); margin: 3rem auto 1.5rem;
    filter: drop-shadow(0 26px 34px rgb(0 0 0 / .6));
}
.pangeran-kecil-window__crown {
    position: absolute; z-index: 2; top: -2.6rem; left: 50%; width: 4.2rem; height: 3.3rem; translate: -50% 0;
    color: var(--inv-seal); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .45));
}
.pangeran-kecil-window__frame {
    --pk-arch-h: calc(var(--pk-window-w) * .62);
    aspect-ratio: 3 / 4; padding: 6px; background: var(--pk-gold-bg);
}
.pangeran-kecil-window__mat {
    --pk-arch-h: calc(var(--pk-window-w) * .62 - 8px);
    height: 100%; padding: 4px; background: var(--inv-shade);
}
.pangeran-kecil-window__pane {
    --pk-arch-h: calc(var(--pk-window-w) * .62 - 14px);
    position: relative; height: 100%; padding: 1.5px; background: var(--pk-gold-light);
}
.pangeran-kecil-window__photo, .pangeran-kecil-window__pane > .pangeran-kecil-crest {
    --pk-arch-h: calc(var(--pk-window-w) * .62 - 16px);
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
}
.pangeran-kecil-hero__prince { font: italic 500 1.08rem/1.3 var(--pk-serif); color: var(--pk-muted); }
.pangeran-kecil-hero__names {
    margin-top: .15rem; font: 900 clamp(2.4rem, 12.5vw, 3.2rem)/1.1 var(--pk-display); color: var(--pk-gold-light);
    text-shadow: 0 4px 18px rgb(0 0 0 / .55); overflow-wrap: anywhere; text-wrap: balance;
}
.pangeran-kecil-hero__names:has(.pangeran-kecil-amp) { font-size: clamp(1.7rem, 8vw, 2.2rem); }

.pangeran-kecil-ribbon {
    position: relative; margin-top: 1.1rem; padding: .55rem 1.9rem;
    background: var(--pk-gold-bg); color: var(--inv-shade);
    font: 700 .76rem/1.3 var(--pk-label); letter-spacing: .1em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
}
.pangeran-kecil-hero__scroll { display: block; width: 1px; height: 2.6rem; margin-top: 1.6rem; background: var(--pk-gold-soft); position: relative; overflow: hidden; }
.pangeran-kecil-hero__scroll span { position: absolute; left: -2px; top: 0; width: 5px; height: .8rem; border-radius: 3px; background: var(--pk-gold-light); }
html.inv-anim .pangeran-kecil-hero__scroll span { animation: pangeran-kecil-drip 2.2s ease-in-out infinite; }
@keyframes pangeran-kecil-drip { 0% { transform: translateY(-1rem); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(2.8rem); opacity: 0; } }

/* the crest: shield with the initial(s), when there is no photo */
.pangeran-kecil-crest {
    position: relative; display: grid; place-items: center; width: 100%; height: 100%; container-type: inline-size;
    background:
        radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--inv-primary) 80%, #fff 8%), var(--inv-shade) 80%),
        var(--inv-shade);
}
.pangeran-kecil-crest::before { content: ''; position: absolute; inset: 0; background: var(--pk-damask); background-size: 40px 40px; opacity: .9; }
.pangeran-kecil-crest__badge { position: relative; display: block; width: 48%; }
.pangeran-kecil-crest__shield { display: block; width: 100%; height: auto; aspect-ratio: 80 / 92; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .5)); }
.pangeran-kecil-crest__letter {
    position: absolute; left: 0; right: 0; top: 44%; translate: 0 -50%; text-align: center; white-space: nowrap;
    font: 900 16cqi/1 var(--pk-display); color: var(--pk-gold-light); text-shadow: 0 2px 0 rgb(0 0 0 / .35);
}
.pangeran-kecil-crest__laurel { position: absolute; bottom: 14%; left: 8%; width: 24%; height: auto; aspect-ratio: 64 / 128; color: var(--inv-accent); opacity: .9; }
.pangeran-kecil-crest__laurel--right { left: auto; right: 8%; transform: scaleX(-1); }
.pangeran-kecil-crest--window .pangeran-kecil-crest__badge { margin-top: 22%; }
.pangeran-kecil-crest--window .pangeran-kecil-crest__laurel { bottom: 18%; }
.pangeran-kecil-crest--oval .pangeran-kecil-crest__laurel { display: none; }
.pangeran-kecil-crest--oval .pangeran-kecil-crest__badge { width: 52%; }
.pangeran-kecil-crest--oval .pangeran-kecil-crest__letter { font-size: 18cqi; }

/* ---------- sections ---------- */

.pangeran-kecil-main { position: relative; }
.pangeran-kecil-section { position: relative; padding: 3.6rem 1.5rem; text-align: center; color: var(--pk-fg); }
/* parchment bands: a gold double line top and bottom */
.pangeran-kecil-section--paper {
    --pk-fg: var(--inv-ink);
    --pk-muted: color-mix(in srgb, var(--inv-ink) 82%, transparent);
    --pk-title: var(--inv-primary);
    --pk-accent-text: var(--pk-gold-ink);
    background: var(--pk-parchment);
    box-shadow: inset 0 6px 0 -2px var(--inv-accent), inset 0 9px 0 -2px var(--inv-shade), inset 0 10px 0 -2px var(--pk-gold-soft),
        inset 0 -6px 0 -2px var(--inv-accent), inset 0 -9px 0 -2px var(--inv-shade), inset 0 -10px 0 -2px var(--pk-gold-soft);
}
.pangeran-kecil-section--paper + .pangeran-kecil-section--paper { box-shadow: inset 0 -6px 0 -2px var(--inv-accent), inset 0 -9px 0 -2px var(--inv-shade), inset 0 -10px 0 -2px var(--pk-gold-soft); padding-top: 1.6rem; }
.pangeran-kecil-section--paper:has(+ .pangeran-kecil-section--paper) { box-shadow: inset 0 6px 0 -2px var(--inv-accent), inset 0 9px 0 -2px var(--inv-shade), inset 0 10px 0 -2px var(--pk-gold-soft); padding-bottom: 2rem; }
.pangeran-kecil-section--paper + .pangeran-kecil-section--paper:has(+ .pangeran-kecil-section--paper) { box-shadow: none; }
.pangeran-kecil-section--paper .inv-button { background: var(--inv-primary); color: var(--pk-gold-light); box-shadow: 0 10px 20px -12px rgb(0 0 0 / .6), inset 0 0 0 1px var(--pk-gold-soft); }
.pangeran-kecil-section--paper .inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 60%, transparent); }

/* opening */
.pangeran-kecil-opening { padding-top: 2.4rem; }
.pangeran-kecil-cartouche {
    position: relative; max-width: 21rem; margin: 0 auto 1.6rem; padding: 1rem 1.6rem 1.1rem;
    border: 1px solid var(--pk-gold-soft); border-radius: 999px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-shade) 60%, transparent), 0 0 0 5px color-mix(in srgb, var(--inv-accent) 25%, transparent);
    background: color-mix(in srgb, var(--inv-shade) 45%, transparent);
}
.pangeran-kecil-arabic { font: 400 1.75rem/2 'Amiri', 'Scheherazade New', serif; color: var(--pk-gold-light); }
.pangeran-kecil-opening__greeting { font: 600 .82rem/1.6 var(--pk-label); letter-spacing: .08em; color: var(--pk-gold-light); }
.pangeran-kecil-opening__message { max-width: 24rem; margin: .9rem auto 0; color: var(--pk-muted); }
.pangeran-kecil-flourish { display: flex; align-items: flex-end; justify-content: center; gap: .3rem; margin-top: 1.8rem; color: var(--inv-accent); }
.pangeran-kecil-flourish__laurel { width: 1.5rem; height: 3rem; transform: rotate(-60deg); }
.pangeran-kecil-flourish .pangeran-kecil-flourish__mirror { transform: scaleX(-1) rotate(-60deg); }
.pangeran-kecil-flourish__crown { width: 2.4rem; height: 1.9rem; color: var(--inv-seal); }

/* child: royal portraits */
.pangeran-kecil-princes { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6rem .9rem; }
.pangeran-kecil-prince { --pk-portrait: 12.5rem; display: grid; justify-items: center; gap: .2rem; width: 100%; }
.pangeran-kecil-princes--2 .pangeran-kecil-prince, .pangeran-kecil-princes--3 .pangeran-kecil-prince { --pk-portrait: min(8.6rem, 34vw); width: calc(50% - .45rem); }
.pangeran-kecil-portrait { position: relative; width: var(--pk-portrait); margin: 2.4rem auto 1.4rem; }
.pangeran-kecil-portrait__oval {
    position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: 50%; overflow: hidden;
    box-shadow:
        0 0 0 4px var(--inv-accent), 0 0 0 8px var(--inv-shade), 0 0 0 9.5px var(--pk-gold-light),
        0 22px 40px -12px rgb(0 0 0 / .75);
}
.pangeran-kecil-portrait__oval img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.pangeran-kecil-portrait__crown {
    position: absolute; z-index: 2; top: calc(var(--pk-portrait) * -.22); left: 50%; width: 42%; height: auto; aspect-ratio: 64 / 50; translate: -50% 0;
    color: var(--inv-seal); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .5));
}
.pangeran-kecil-portrait__laurel {
    position: absolute; z-index: 2; bottom: -12%; left: -16%; width: 36%; height: auto; aspect-ratio: 64 / 128;
    color: var(--inv-accent); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .45)); transform-origin: 80% 100%;
}
.pangeran-kecil-portrait__laurel--right { left: auto; right: -16%; transform: scaleX(-1); transform-origin: 20% 100%; }
.pangeran-kecil-prince__nickname { font: 900 clamp(1.8rem, 8vw, 2.2rem)/1.1 var(--pk-display); color: var(--pk-gold-light); }
.pangeran-kecil-prince__name { font: 600 1.2rem/1.35 var(--pk-serif); color: var(--inv-text); overflow-wrap: anywhere; }
.pangeran-kecil-prince__order { font-style: italic; color: var(--pk-muted); }
.pangeran-kecil-prince__born { font: 600 .7rem/1.5 var(--pk-label); letter-spacing: .14em; text-transform: uppercase; color: var(--pk-gold-light); }
.pangeran-kecil-prince .pangeran-kecil-chip { margin-top: .4rem; }
.pangeran-kecil-princes--2 .pangeran-kecil-prince__nickname, .pangeran-kecil-princes--3 .pangeran-kecil-prince__nickname { font-size: 1.4rem; }
.pangeran-kecil-princes--2 .pangeran-kecil-prince__name, .pangeran-kecil-princes--3 .pangeran-kecil-prince__name { font-size: 1rem; line-height: 1.3; }
.pangeran-kecil-princes--2 .pangeran-kecil-prince__order, .pangeran-kecil-princes--3 .pangeran-kecil-prince__order { font-size: .95rem; }
.pangeran-kecil-princes--2 .pangeran-kecil-chip, .pangeran-kecil-princes--3 .pangeran-kecil-chip { font-size: .8rem; padding-inline: .7rem; }

.pangeran-kecil-banner {
    position: relative; max-width: 23rem; margin: 2.6rem auto 0; padding: 1.05rem 2.2rem 1.15rem;
    background: var(--pk-parchment); color: var(--inv-ink);
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
}
.pangeran-kecil-banner::before {
    content: ''; position: absolute; inset: 6px 24px; pointer-events: none;
    border-block: 1px solid color-mix(in srgb, var(--pk-gold-ink) 55%, transparent);
}
.pangeran-kecil-banner__label { font: 700 .64rem/1.4 var(--pk-label); letter-spacing: .28em; text-transform: uppercase; color: var(--inv-seal); }
.pangeran-kecil-banner__parents { margin-top: .2rem; font: 600 1.14rem/1.4 var(--pk-serif); }
.pangeran-kecil-banner__parents span:not(.pangeran-kecil-amp) { display: block; }
.pangeran-kecil-banner__parents .pangeran-kecil-amp { display: block; padding: 0; color: var(--pk-gold-ink); font-size: 1rem; }
.pangeran-kecil-child__address { display: flex; justify-content: center; gap: .45rem; max-width: 22rem; margin: 1.1rem auto 0; color: var(--pk-muted); font-size: 1rem; line-height: 1.5; }
.pangeran-kecil-child__address .pangeran-kecil-icon { margin-top: .2rem; color: var(--pk-gold-light); }

/* message: a sealed letter */
.pangeran-kecil-letter {
    position: relative; max-width: 23rem; margin: 0 auto 1.6rem; padding: 2rem 1.6rem 3.1rem;
    background:
        linear-gradient(225deg, var(--inv-background) 0 1.3rem, transparent 1.3rem),
        linear-gradient(225deg, transparent 1.3rem, color-mix(in srgb, #8a6a30 35%, var(--inv-paper)) 1.3rem 1.42rem, transparent 1.42rem),
        var(--pk-parchment);
    color: var(--inv-ink); text-align: left;
    box-shadow: 0 24px 44px -22px rgb(0 0 0 / .85);
}
.pangeran-kecil-letter::before {
    content: '“'; position: absolute; top: .6rem; left: 1rem;
    font: 900 3.4rem/1 var(--pk-display); color: color-mix(in srgb, var(--pk-gold-ink) 45%, transparent);
}
.pangeran-kecil-letter__text { margin: 0; font: italic 400 1.14rem/1.6 var(--pk-serif); }
.pangeran-kecil-letter__from { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-top: 1rem; font: 700 .76rem/1.4 var(--pk-label); letter-spacing: .12em; color: var(--inv-primary); }
.pangeran-kecil-letter__dash { width: 2rem; height: 1px; background: var(--pk-gold-ink); }
.pangeran-kecil-letter__seal { position: absolute; left: 50%; bottom: -1.7rem; width: 3.6rem; height: 3.6rem; translate: -50% 0; rotate: -8deg; }

/* events: palace charters */
.pangeran-kecil-charters { display: grid; gap: 3.2rem; max-width: 23rem; margin: 2.4rem auto 0; }
.pangeran-kecil-charter {
    position: relative; padding: 2.6rem 1.3rem 1.6rem;
    border-radius: 11rem 11rem 10px 10px / 5rem 5rem 10px 10px;
    background: var(--pk-parchment); color: var(--inv-ink);
    box-shadow: inset 0 0 0 5px var(--inv-paper), inset 0 0 0 6px color-mix(in srgb, var(--pk-gold-ink) 60%, transparent), 0 24px 44px -20px rgb(0 0 0 / .85);
}
.pangeran-kecil-charter__medal {
    position: absolute; top: -1.9rem; left: 50%; translate: -50% 0;
    display: grid; place-items: center; align-content: center; width: 3.8rem; height: 3.8rem; border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--inv-primary) 75%, #fff), var(--inv-primary) 60%, var(--inv-shade));
    box-shadow: 0 0 0 3px var(--inv-accent), 0 0 0 5px var(--inv-shade), 0 10px 16px -6px rgb(0 0 0 / .6);
}
.pangeran-kecil-charter__medal svg { width: 1.7rem; height: 1.35rem; color: var(--inv-seal); }
.pangeran-kecil-charter__medal b { font: 700 .72rem/1 var(--pk-label); color: var(--pk-gold-light); letter-spacing: .08em; }
.pangeran-kecil-charter__photo {
    aspect-ratio: 16 / 10; margin: -.4rem 0 1.1rem;
    border-radius: 9rem 9rem 6px 6px / 3.6rem 3.6rem 6px 6px;
    background: var(--x-photo) center 30% / cover no-repeat, var(--inv-shade);
    box-shadow: 0 0 0 3px var(--inv-accent), 0 0 0 5px var(--inv-paper), 0 0 0 6px var(--pk-gold-soft);
}
.pangeran-kecil-charter__name { font: 700 1.4rem/1.25 var(--pk-display); color: var(--inv-primary); }
.pangeran-kecil-charter__rows { display: grid; gap: .7rem; margin: 1.1rem 0 1.2rem; text-align: left; }
.pangeran-kecil-charter__rows li { display: grid; grid-template-columns: 2.1rem 1fr; align-items: start; gap: .7rem; font-size: 1.05rem; line-height: 1.45; }
.pangeran-kecil-charter__rows .pangeran-kecil-icon {
    width: 2.1rem; height: 2.1rem; padding: .42rem; border-radius: 50%;
    background: var(--inv-primary); color: var(--pk-gold-light); box-shadow: 0 0 0 1.5px var(--inv-accent);
}
.pangeran-kecil-charter__rows span { padding-top: .2rem; }
.pangeran-kecil-charter__rows strong { display: block; font-weight: 600; }
.pangeran-kecil-charter__rows small { display: block; margin-top: .1rem; font-size: .95rem; color: color-mix(in srgb, var(--inv-ink) 82%, transparent); }
.pangeran-kecil-charter .inv-button { background: var(--inv-primary); color: var(--pk-gold-light); box-shadow: 0 10px 20px -12px rgb(0 0 0 / .6), inset 0 0 0 1px var(--pk-gold-soft); }

/* countdown: the hourglass and the gold coins */
.pangeran-kecil-countdown {
    background: radial-gradient(ellipse 70% 45% at 50% 38%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 70%);
}
.pangeran-kecil-hourglass { width: 6.4rem; margin: -.4rem auto 1.4rem; filter: drop-shadow(0 16px 18px rgb(0 0 0 / .55)); }
.pangeran-kecil-hourglass svg { display: block; width: 100%; height: auto; overflow: visible; }
.pangeran-kecil-hourglass__glass { fill: color-mix(in srgb, #fff 10%, transparent); stroke: var(--pk-gold-light); stroke-width: 1.4; }
.pangeran-kecil-hourglass__sand { fill: color-mix(in srgb, var(--inv-accent) 80%, #fff); }
.pangeran-kecil-hourglass__sand--top { transform: translateY(15px); }
.pangeran-kecil-hourglass__sand--bottom { transform: translateY(13px); }
.pangeran-kecil-hourglass__stream { stroke: color-mix(in srgb, var(--inv-accent) 80%, #fff); stroke-width: 1.6; stroke-dasharray: 2 3; }
.pangeran-kecil-hourglass__shine { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 1.6; stroke-linecap: round; }
.pangeran-kecil-hourglass__jewel { fill: var(--inv-seal); }
.pangeran-kecil-hourglass__turn { transform-box: view-box; transform-origin: 40px 62px; }
html.inv-anim .pangeran-kecil-hourglass__turn { animation: pangeran-kecil-turn 9s cubic-bezier(.6, 0, .4, 1) infinite; }
html.inv-anim .pangeran-kecil-hourglass__sand--top { animation: pangeran-kecil-sand-top 9s linear infinite; }
html.inv-anim .pangeran-kecil-hourglass__sand--bottom { animation: pangeran-kecil-sand-bottom 9s linear infinite; }
html.inv-anim .pangeran-kecil-hourglass__stream { animation: pangeran-kecil-stream 9s linear infinite, pangeran-kecil-flow .45s linear infinite; }
@keyframes pangeran-kecil-turn { 0%, 88% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes pangeran-kecil-sand-top { 0% { transform: translateY(0); } 86%, 100% { transform: translateY(38px); } }
@keyframes pangeran-kecil-sand-bottom { 0% { transform: translateY(28px); } 86%, 100% { transform: translateY(0); } }
@keyframes pangeran-kecil-stream { 0%, 84% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes pangeran-kecil-flow { to { stroke-dashoffset: -5; } }

.pangeran-kecil-coins .inv-countdown { gap: .55rem; }
.pangeran-kecil-coins .inv-countdown__item {
    display: grid; place-content: center; width: clamp(3.9rem, 18.5vw, 4.6rem); min-width: 0; aspect-ratio: 1; padding: 0; border-radius: 50%;
    background: var(--pk-gold-bg); color: var(--inv-shade);
    box-shadow: inset 0 0 0 3px rgb(255 255 255 / .28), inset 0 0 0 5px color-mix(in srgb, var(--inv-accent) 55%, #3a2400), 0 12px 20px -10px rgb(0 0 0 / .8);
}
.pangeran-kecil-coins .inv-countdown__value { font: 700 clamp(1.15rem, 5.6vw, 1.45rem)/1 var(--pk-label); }
.pangeran-kecil-coins .inv-countdown__label { margin-top: .15rem; font: 700 .55rem/1 var(--pk-label); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.pangeran-kecil-coins .inv-countdown__done { max-width: 22rem; margin: 0 auto; font-style: italic; color: var(--pk-muted); }
.pangeran-kecil-coins .inv-countdown__actions { margin-top: 1.6rem; gap: .6rem; }
.pangeran-kecil-countdown__date { margin-top: 1.5rem; font: 600 .82rem/1.5 var(--pk-label); letter-spacing: .1em; color: var(--pk-gold-light); }

/* prayer: the palace arch */
.pangeran-kecil-arch { position: relative; max-width: 22rem; margin: 1rem auto 0; padding: 6px; isolation: isolate; }
.pangeran-kecil-arch::before {
    --pk-arch-h: 11.5rem;
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pk-gold-bg);
}
.pangeran-kecil-arch__tip { position: absolute; z-index: 1; top: -2.1rem; left: 50%; width: 1.9rem; height: 1.9rem; translate: -50% 0; color: var(--pk-gold-light); }
.pangeran-kecil-arch__inner {
    --pk-arch-h: calc(11.5rem - 7px);
    padding: 6rem 1.5rem 2rem;
    background: radial-gradient(ellipse at 50% 20%, color-mix(in srgb, var(--inv-primary) 85%, #fff 6%), var(--inv-shade) 85%);
    box-shadow: inset 0 0 0 4px var(--inv-shade);
}
.pangeran-kecil-arch__label { font: 600 .66rem/1.4 var(--pk-label); letter-spacing: .3em; text-transform: uppercase; color: var(--pk-gold-light); margin-bottom: .8rem; }
.pangeran-kecil-arch .pangeran-kecil-arabic { font-size: 1.5rem; line-height: 2.1; }
.pangeran-kecil-arch__text { margin: .9rem 0 0; font: italic 400 1.1rem/1.6 var(--pk-serif); color: var(--pk-muted); }
.pangeran-kecil-arch__text cite { display: block; margin-top: .8rem; font: 700 .72rem/1.4 var(--pk-label); font-style: normal; letter-spacing: .14em; color: var(--pk-gold-light); }

/* rundown: Agenda Istana */
.pangeran-kecil-agenda { position: relative; max-width: 22rem; margin: 0 auto; text-align: left; }
.pangeran-kecil-agenda::before {
    content: ''; position: absolute; top: 1.5rem; bottom: 2.6rem; left: 1.35rem; width: 2px; transform-origin: top;
    background: linear-gradient(var(--inv-accent), var(--pk-gold-ink));
}
.pangeran-kecil-agenda__item { position: relative; display: grid; grid-template-columns: 2.7rem 1fr; gap: .9rem; padding: .55rem 0; }
.pangeran-kecil-agenda__marker {
    position: relative; z-index: 1; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%;
    background: var(--inv-primary); box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 5px var(--inv-paper), 0 6px 10px -4px rgb(0 0 0 / .45);
}
.pangeran-kecil-agenda__marker svg { width: 1.6rem; height: 1.25rem; color: var(--inv-seal); }
.pangeran-kecil-agenda__body { padding: .1rem 0 .4rem; border-bottom: 1px dashed color-mix(in srgb, var(--pk-gold-ink) 40%, transparent); }
.pangeran-kecil-agenda__item:last-child .pangeran-kecil-agenda__body { border-bottom: 0; }
.pangeran-kecil-agenda__time {
    display: inline-block; padding: .18rem .7rem; border-radius: 3px;
    background: var(--pk-gold-bg); color: var(--inv-shade); font: 700 .74rem/1.3 var(--pk-label); letter-spacing: .08em;
}
.pangeran-kecil-agenda h3 { margin-top: .3rem; font: 600 1.15rem/1.35 var(--pk-serif); color: var(--inv-primary); }
.pangeran-kecil-agenda p { font-size: 1rem; color: var(--pk-muted); }

/* story: chronicle chapters */
.pangeran-kecil-chronicle { display: grid; gap: 1.6rem; max-width: 24rem; margin: 0 auto; }
.pangeran-kecil-chapter { display: grid; grid-template-columns: 6.4rem 1fr; grid-template-areas: "art text"; align-items: center; gap: 1.1rem; text-align: left; }
.pangeran-kecil-chapter:nth-child(even) { grid-template-columns: 1fr 6.4rem; grid-template-areas: "text art"; text-align: right; }
.pangeran-kecil-chapter + .pangeran-kecil-chapter { position: relative; padding-top: 1.6rem; }
.pangeran-kecil-chapter + .pangeran-kecil-chapter::before {
    content: ''; position: absolute; top: 0; left: 50%; width: 2.2rem; height: .7rem; translate: -50% 0;
    background: var(--pk-crown-img) center / contain no-repeat; opacity: .55;
}
.pangeran-kecil-chapter__art {
    --pk-arch-h: 3.8rem;
    grid-area: art; aspect-ratio: 3 / 4; padding: 4px; background: var(--pk-gold-bg);
}
.pangeran-kecil-chapter__art img, .pangeran-kecil-chapter__numeral {
    --pk-arch-h: calc(3.8rem - 5px);
    display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover;
}
.pangeran-kecil-chapter__numeral {
    padding-top: 1.2rem; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--inv-primary) 85%, #fff 8%), var(--inv-shade));
    font: 900 1.7rem/1 var(--pk-display); color: var(--pk-gold-light);
}
.pangeran-kecil-chapter__text { grid-area: text; }
.pangeran-kecil-chapter__date {
    display: inline-block; padding: .14rem .65rem; border-radius: 2px;
    background: var(--inv-seal); color: #fff6e6; font: 700 .68rem/1.4 var(--pk-label); letter-spacing: .14em;
}
.pangeran-kecil-chapter h3 { margin-top: .35rem; font: 700 1.12rem/1.3 var(--pk-display); color: var(--pk-gold-light); }
.pangeran-kecil-chapter p { margin-top: .3rem; font-size: 1rem; line-height: 1.55; color: var(--pk-muted); }

/* gallery: gilded frames on the velvet wall */
.pangeran-kecil-gallery { background: linear-gradient(transparent, color-mix(in srgb, var(--inv-shade) 55%, transparent) 20%, color-mix(in srgb, var(--inv-shade) 55%, transparent) 80%, transparent); }
.pangeran-kecil-gallery__wall { padding: 8px; }
.pangeran-kecil-gallery__wall .inv-gallery { gap: 1rem; }
.pangeran-kecil-gallery__wall .inv-gallery__item {
    border-radius: 3px; overflow: hidden;
    box-shadow: 0 0 0 3px var(--inv-accent), 0 0 0 6px var(--inv-shade), 0 0 0 7px var(--pk-gold-soft), 0 16px 26px -12px rgb(0 0 0 / .8);
}
.pangeran-kecil-gallery__wall .inv-gallery__item:first-child,
.pangeran-kecil-gallery__wall .inv-gallery__item:last-child:nth-child(even) { grid-column: span 2; aspect-ratio: 16 / 10; }
.pangeran-kecil-gallery__wall .inv-gallery__item:focus-visible { outline: 2px solid var(--pk-gold-light); outline-offset: 8px; }

/* live streaming: the herald */
.pangeran-kecil-herald {
    position: relative; max-width: 22rem; margin: 1.6rem auto 0; padding: 2.6rem 1.4rem 1.6rem; border-radius: 8px;
    background: color-mix(in srgb, var(--inv-shade) 60%, transparent);
    box-shadow: inset 0 0 0 1px var(--pk-gold-soft), inset 0 0 0 5px color-mix(in srgb, var(--inv-shade) 40%, transparent), inset 0 0 0 6px color-mix(in srgb, var(--inv-accent) 20%, transparent);
}
.pangeran-kecil-herald__medal {
    position: absolute; top: -1.6rem; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%;
    background: var(--pk-gold-bg); color: var(--inv-shade); box-shadow: 0 0 0 4px var(--inv-shade), 0 0 0 5px var(--pk-gold-soft);
}
.pangeran-kecil-herald__medal .pangeran-kecil-icon { width: 1.5rem; height: 1.5rem; }
.pangeran-kecil-herald__label { font: 600 .66rem/1.4 var(--pk-label); letter-spacing: .3em; text-transform: uppercase; color: var(--pk-gold-light); }
.pangeran-kecil-herald__title { margin-top: .2rem; font: 700 1.45rem/1.25 var(--pk-display); }
.pangeran-kecil-herald__text { margin-top: .5rem; color: var(--pk-muted); }
.pangeran-kecil-herald__note { margin-top: .3rem; font-style: italic; color: var(--pk-gold-light); }
.pangeran-kecil-herald .inv-button { margin-top: 1.2rem; }

/* ---------- RSVP: Balasan Titah ---------- */

.pangeran-kecil-reply { position: relative; max-width: 23rem; margin: 9px auto; }
.pangeran-kecil-reply__sheet {
    position: relative; padding: 1.9rem 1.25rem 1.7rem;
    background: var(--pk-parchment); color: var(--inv-ink);
    box-shadow: 0 26px 46px -22px rgb(0 0 0 / .85);
}
.pangeran-kecil-reply__hint { margin-bottom: .2rem; text-align: center; font: 700 .62rem/1.4 var(--pk-label); letter-spacing: .24em; text-transform: uppercase; color: var(--inv-seal); }
.pangeran-kecil-reply.is-sealed .pangeran-kecil-reply__hint { visibility: hidden; height: 0; margin: 0; }

/* the shared forms on parchment (RSVP and wishes) */
.inv-form { gap: 1rem; color: var(--inv-ink); }
.inv-form label, .inv-form__choices legend {
    gap: .3rem; font: 700 .66rem/1.4 var(--pk-label); letter-spacing: .14em; text-transform: uppercase; color: var(--pk-gold-ink);
}
.inv-form input:not([type=radio]):not([type=checkbox]), .inv-form select, .inv-form textarea {
    min-height: 2.9rem; padding: .6rem .8rem; border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--inv-ink) 26%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--pk-gold-ink) 70%, transparent);
    background: color-mix(in srgb, #fff 55%, var(--inv-paper)); color: var(--inv-ink);
    font: 500 1.1rem/1.4 var(--pk-serif); letter-spacing: 0; text-transform: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.inv-form textarea { min-height: 6rem; resize: vertical; }
.inv-form input::placeholder, .inv-form textarea::placeholder { color: color-mix(in srgb, var(--inv-ink) 50%, transparent); }
.inv-form input:focus, .inv-form select:focus, .inv-form textarea:focus {
    outline: none; border-color: var(--inv-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-primary) 22%, transparent);
}
.inv-form option { background: #fff; color: var(--inv-ink); }
.inv-form .inv-button { justify-self: stretch; margin-top: .3rem; background: var(--inv-primary); color: var(--pk-gold-light); box-shadow: 0 12px 22px -12px rgb(0 0 0 / .6), inset 0 0 0 1px var(--pk-gold-soft); }
.inv-form .inv-button--outline { background: transparent; color: var(--inv-primary); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 60%, transparent); }
.inv-form .inv-button:focus-visible { outline-color: var(--inv-primary); }
.inv-form__notice { color: var(--inv-ink); background: color-mix(in srgb, var(--inv-accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--pk-gold-ink) 30%, transparent); font-size: 1rem; text-align: center; font-style: italic; }
.inv-form__error { font-size: 1rem; }
.inv-rsvp__deadline { margin-bottom: .9rem; text-align: center; font-style: italic; color: var(--inv-primary); }

/* attendance: three wax seals; the chosen one is pressed */
.inv-form__choices { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .5rem; }
.inv-form__choices legend { width: 100%; margin-bottom: .6rem; text-align: center; }
.inv-form .inv-form__choices label {
    position: relative; flex: 0 1 5.6rem; aspect-ratio: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    padding: .45rem; border-radius: 50%; cursor: pointer; text-align: center;
    border: 2px dashed color-mix(in srgb, var(--inv-seal) 55%, transparent);
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--inv-seal) 9%, var(--inv-paper)), color-mix(in srgb, #fff 30%, var(--inv-paper)));
    color: var(--pk-seal-dark); font: 700 .66rem/1.15 var(--pk-label); letter-spacing: .06em; text-transform: uppercase;
    transition: transform .2s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.inv-form .inv-form__choices label::before {
    content: ''; width: 1.5rem; height: 1.15rem; background: currentColor; opacity: .55;
    -webkit-mask: var(--pk-crown-img) center / contain no-repeat; mask: var(--pk-crown-img) center / contain no-repeat;
}
.inv-form__choices input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.inv-form .inv-form__choices label:hover { transform: scale(1.04); }
.inv-form .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-primary); outline-offset: 3px; }
.inv-form .inv-form__choices label:has(input:checked) {
    border-color: transparent; background: var(--pk-wax); color: #fff6e6; rotate: -6deg;
    box-shadow:
        inset 0 0 0 4px color-mix(in srgb, var(--pk-seal-dark) 70%, transparent), inset 0 0 0 5.5px color-mix(in srgb, #fff 30%, transparent),
        3px 3px 0 -1px var(--pk-seal-dark), -3px 2px 0 -1px var(--inv-seal), 2px -3px 0 -1px var(--inv-seal), -2px -2px 0 -1px var(--pk-seal-dark),
        0 10px 16px -8px rgb(0 0 0 / .6);
    text-shadow: 0 1px 0 rgb(0 0 0 / .35);
}
.inv-form .inv-form__choices label:has(input:checked)::before { opacity: 1; background: var(--pk-gold-light); }
html.inv-anim .inv-form .inv-form__choices label:has(input:checked) { animation: pangeran-kecil-press .5s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes pangeran-kecil-press {
    0% { transform: scale(1.4); opacity: .3; }
    55% { transform: scale(.9); opacity: 1; }
    78% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* after sending: the answer sheet is sealed with a big stamp */
.inv-rsvp__done { position: relative; padding-top: 8.4rem; }
.inv-rsvp__done::before, .inv-rsvp__done::after { position: absolute; top: .4rem; left: 50%; width: 7.2rem; height: 7.2rem; margin-left: -3.6rem; border-radius: 50%; }
.inv-rsvp__done::before {
    content: ''; background: var(--pk-wax);
    box-shadow:
        inset 0 0 0 5px color-mix(in srgb, var(--pk-seal-dark) 70%, transparent),
        4px 3px 0 -1px var(--pk-seal-dark), -4px 3px 0 -1px var(--inv-seal), 2px -4px 0 -1px var(--inv-seal), -3px -3px 0 -1px var(--pk-seal-dark),
        6px -1px 0 -3px var(--inv-seal), -6px 0 0 -3px var(--pk-seal-dark),
        0 14px 22px -10px rgb(0 0 0 / .6);
    outline: 1.5px dashed color-mix(in srgb, #fff 45%, transparent); outline-offset: -12px;
    rotate: -10deg;
}
.inv-rsvp__done::after {
    content: 'Diterima'; display: grid; place-items: end center; padding-bottom: 1.9rem;
    background: var(--pk-crown-img) center 1.45rem / 2.7rem auto no-repeat;
    font: 700 .78rem/1 var(--pk-label); letter-spacing: .16em; text-transform: uppercase; color: #fff6e6; text-shadow: 0 1px 0 rgb(0 0 0 / .4);
    rotate: -10deg;
}
.pangeran-kecil-reply.is-present .inv-rsvp__done::after { content: 'Hadir'; font-size: 1.05rem; letter-spacing: .22em; }
html.inv-anim .inv-rsvp__done::before, html.inv-anim .inv-rsvp__done::after { animation: pangeran-kecil-stamp .7s cubic-bezier(.3, 1.2, .5, 1) .1s both; }
@keyframes pangeran-kecil-stamp {
    0% { transform: scale(2.3); opacity: 0; }
    55% { transform: scale(.9); opacity: 1; }
    75% { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}

/* ---------- wishes: Kitab Ucapan ---------- */

.pangeran-kecil-book {
    max-width: 23rem; margin: 0 auto; padding: 1.6rem 1.25rem 1.4rem; border-radius: 4px;
    background: var(--pk-parchment); color: var(--inv-ink); text-align: left;
    box-shadow: 0 26px 46px -22px rgb(0 0 0 / .85), inset 0 0 0 5px var(--inv-paper), inset 0 0 0 6px color-mix(in srgb, var(--pk-gold-ink) 50%, transparent);
}
.pangeran-kecil-book.is-sent .inv-form__notice { animation: pangeran-kecil-glow-box 1.6s ease-out both; }
@keyframes pangeran-kecil-glow-box { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
.inv-wishes { --inv-wishes-height: 21rem; }
.inv-wishes__list { gap: .65rem; margin-top: 1.4rem; }
.inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 3px;
    background: color-mix(in srgb, var(--inv-ink) 6%, var(--inv-paper));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-ink) 14%, transparent), inset 0 -14px 16px -14px rgb(0 0 0 / .25);
    scrollbar-color: color-mix(in srgb, var(--inv-primary) 45%, transparent) transparent;
}
.inv-wishes__empty { text-align: center; font-style: italic; color: var(--inv-ink); }
.inv-wish {
    padding: .7rem .85rem; border-radius: 2px;
    background: color-mix(in srgb, #fff 60%, var(--inv-paper)); color: var(--inv-ink);
    border: 1px solid color-mix(in srgb, var(--inv-ink) 12%, transparent); border-left: 3px solid var(--inv-accent);
}
.inv-wish__name { font: 700 .78rem/1.3 var(--pk-label); letter-spacing: .06em; color: var(--inv-primary); }
.inv-wish__name::first-letter { color: var(--inv-seal); font-size: 1.25em; }
.inv-wish__message { font-size: 1.04rem; line-height: 1.5; }
.inv-wish__time { margin-top: .25rem; font: 500 .82rem/1.3 var(--pk-serif); color: color-mix(in srgb, var(--inv-ink) 80%, transparent); opacity: 1; }
.inv-wish__reply { background: color-mix(in srgb, var(--inv-accent) 14%, transparent); }
.inv-wishes__page-button { color: var(--inv-primary); }

/* ---------- gift: the treasury ---------- */

.pangeran-kecil-gift__chest {
    display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: -.8rem auto 1.3rem; border-radius: 50%;
    background: var(--inv-primary); color: var(--pk-gold-light); box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 5px var(--inv-paper), 0 0 0 6px var(--pk-gold-soft);
}
.pangeran-kecil-gift__chest .pangeran-kecil-icon { width: 1.7rem; height: 1.7rem; }
.pangeran-kecil-treasury { max-width: 24rem; margin: 0 auto; }
.pangeran-kecil-treasury .inv-gift__accounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.2rem, 1fr)); gap: .75rem; }
.pangeran-kecil-treasury .inv-gift__account {
    display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 0; padding: 1.1rem .75rem 1rem; border-radius: 8px;
    background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--inv-primary) 80%, #fff 10%), var(--inv-primary) 55%, var(--inv-shade)); color: var(--inv-text);
    box-shadow: inset 0 0 0 1.5px var(--inv-accent), inset 0 0 0 5px var(--inv-primary), inset 0 0 0 6px var(--pk-gold-soft), 0 16px 26px -14px rgb(0 0 0 / .7);
}
.pangeran-kecil-treasury .inv-gift__bank { min-height: 2.25rem; display: grid; place-items: center; font: 700 .8rem/1.3 var(--pk-label); letter-spacing: .1em; color: var(--pk-gold-light); }
.pangeran-kecil-treasury .inv-gift__number { font: 600 1.18rem/1.3 var(--pk-serif); letter-spacing: .05em; overflow-wrap: anywhere; color: #fff; }
.pangeran-kecil-treasury .inv-gift__holder { font-size: .95rem; line-height: 1.35; color: color-mix(in srgb, var(--inv-text) 86%, transparent); overflow-wrap: anywhere; }
.pangeran-kecil-treasury .inv-gift__account .inv-button { margin-top: .5rem; min-height: 2.75rem; padding: .55rem .95rem; background: transparent; color: var(--pk-gold-light); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 75%, transparent); font-size: .66rem; }
.pangeran-kecil-treasury .inv-gift__address { margin-top: .75rem; }
.pangeran-kecil-treasury .inv-gift__address .inv-gift__bank { min-height: 0; }
.pangeran-kecil-treasury .inv-gift__address p:not(.inv-gift__bank):not(.inv-gift__holder) { font-size: 1rem; line-height: 1.5; }

/* ---------- co-hosts: pennants ---------- */

.pangeran-kecil-cohosts__hall { position: relative; max-width: 24rem; margin: 0 auto; padding-top: .3rem; }
.pangeran-kecil-rod {
    position: relative; display: block; height: 8px; margin: 0 .4rem; border-radius: 4px; background: var(--pk-gold-v);
    box-shadow: 0 4px 8px -2px rgb(0 0 0 / .6);
}
.pangeran-kecil-rod::before, .pangeran-kecil-rod::after {
    content: ''; position: absolute; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: var(--pk-gold-bg);
    box-shadow: 0 2px 4px rgb(0 0 0 / .5);
}
.pangeran-kecil-rod::before { left: -10px; }
.pangeran-kecil-rod::after { right: -10px; }
.pangeran-kecil-pennants { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem .8rem; }
.pangeran-kecil-pennant { position: relative; width: calc(50% - .4rem); padding-top: .9rem; }
/* the two cords from the rod */
.pangeran-kecil-pennant::before {
    content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: .9rem;
    border-inline: 1.5px solid var(--pk-gold-soft);
}
.pangeran-kecil-pennant__cloth {
    display: grid; justify-items: center; align-content: start; gap: .45rem; min-height: 100%;
    padding: .9rem .7rem 2.3rem;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .18), transparent 20%, transparent 80%, rgb(0 0 0 / .18)),
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 0 / 100% 4px no-repeat,
        var(--inv-primary);
    color: var(--inv-text);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 1.2rem), 0 100%);
    box-shadow: inset 0 0 0 1.5px var(--pk-gold-soft);
}
.pangeran-kecil-pennant:nth-child(even) .pangeran-kecil-pennant__cloth {
    background:
        linear-gradient(90deg, rgb(0 0 0 / .18), transparent 20%, transparent 80%, rgb(0 0 0 / .18)),
        linear-gradient(var(--inv-accent), var(--inv-accent)) 0 0 / 100% 4px no-repeat,
        var(--inv-seal);
}
.pangeran-kecil-pennant svg { width: 1.8rem; height: 1.4rem; color: var(--inv-shade); }
.pangeran-kecil-pennant span { font: 600 1rem/1.35 var(--pk-serif); overflow-wrap: anywhere; }
html.inv-anim .pangeran-kecil-pennant.is-revealed .pangeran-kecil-pennant__cloth { transform-origin: 50% 0; animation: pangeran-kecil-sway 5s ease-in-out infinite; }
html.inv-anim .pangeran-kecil-pennant:nth-child(even).is-revealed .pangeran-kecil-pennant__cloth { animation-delay: -2.5s; }
@keyframes pangeran-kecil-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* ---------- contacts, protocol, vendors (parchment) ---------- */

.pangeran-kecil-envoys { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .85rem; max-width: 24rem; margin: 0 auto; }
.pangeran-kecil-envoy {
    display: grid; justify-items: center; align-content: start; gap: .2rem; padding: 1.2rem .8rem 1.1rem; border-radius: 6px;
    background: color-mix(in srgb, #fff 45%, var(--inv-paper));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pk-gold-ink) 45%, transparent), 0 12px 22px -16px rgb(0 0 0 / .5);
}
.pangeran-kecil-envoy__badge {
    display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .3rem; border-radius: 50%;
    background: var(--inv-primary); color: var(--pk-gold-light); font: 900 1.15rem/1 var(--pk-display);
    box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 4px color-mix(in srgb, #fff 45%, var(--inv-paper)), 0 0 0 5px var(--pk-gold-soft);
}
.pangeran-kecil-envoy__name { font: 600 1.12rem/1.3 var(--pk-serif); color: var(--inv-ink); }
.pangeran-kecil-envoy__role { font-style: italic; font-size: .98rem; color: var(--pk-muted); }
.pangeran-kecil-envoy .inv-button { margin-top: .55rem; padding-inline: 1.05rem; }
.pangeran-kecil-envoy__phone { margin-top: .4rem; font-weight: 600; }

.pangeran-kecil-protocol__list { display: grid; gap: .55rem; max-width: 20rem; margin: 0 auto; text-align: left; }
.pangeran-kecil-protocol__list li { display: flex; align-items: center; gap: .65rem; }
.pangeran-kecil-protocol__list .pangeran-kecil-icon { width: 1.7rem; height: 1.7rem; padding: .3rem; border-radius: 50%; background: var(--inv-primary); color: var(--pk-gold-light); }
.pangeran-kecil-protocol__note { max-width: 22rem; margin: 1rem auto 0; font-style: italic; color: var(--pk-muted); }

.pangeran-kecil-ledger { display: grid; gap: .8rem; max-width: 22rem; margin: 0 auto; text-align: left; }
.pangeran-kecil-ledger li { display: flex; align-items: baseline; gap: .5rem; }
.pangeran-kecil-ledger__role { flex: none; font: 700 .68rem/1.4 var(--pk-label); letter-spacing: .14em; text-transform: uppercase; color: var(--pk-gold-ink); }
.pangeran-kecil-ledger__dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--pk-gold-ink) 55%, transparent); transform: translateY(-.25rem); }
.pangeran-kecil-ledger__name { max-width: 62%; text-align: right; font: 600 1.06rem/1.35 var(--pk-serif); color: var(--inv-ink); }
.pangeran-kecil-ledger__name a { display: block; font: 500 .9rem/1.4 var(--pk-serif); color: var(--inv-primary); text-decoration: none; }
.pangeran-kecil-ledger__name a:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 2px; }

/* ---------- closing ---------- */

.pangeran-kecil-closing { padding-top: 4.4rem; padding-bottom: 3rem; }
.pangeran-kecil-medallion { position: relative; width: min(11.5rem, 48vw); margin: 0 auto 2.2rem; }
.pangeran-kecil-medallion__ring {
    position: relative; z-index: 1; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    box-shadow: 0 0 0 4px var(--inv-accent), 0 0 0 8px var(--inv-shade), 0 0 0 9.5px var(--pk-gold-light), 0 24px 40px -12px rgb(0 0 0 / .75);
}
.pangeran-kecil-medallion__ring img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pangeran-kecil-medallion__crown { position: absolute; z-index: 2; top: -2.6rem; left: 50%; width: 4rem; height: 3.1rem; translate: -50% 0; color: var(--inv-seal); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .5)); }
.pangeran-kecil-medallion__laurel { position: absolute; z-index: 2; bottom: -14%; left: -20%; width: 40%; height: auto; aspect-ratio: 64 / 128; color: var(--inv-accent); filter: drop-shadow(0 3px 3px rgb(0 0 0 / .45)); }
.pangeran-kecil-medallion__laurel--right { left: auto; right: -20%; transform: scaleX(-1); }
.pangeran-kecil-closing__thanks { font: 900 clamp(1.9rem, 9vw, 2.3rem)/1.2 var(--pk-display); color: var(--pk-gold-light); }
.pangeran-kecil-closing__message { max-width: 24rem; margin: .9rem auto 0; color: var(--pk-muted); }
.pangeran-kecil-closing__salam { margin: 1.1rem auto 1.2rem; font: italic 500 1.08rem/1.5 var(--pk-serif); color: var(--pk-gold-light); }
.pangeran-kecil-closing__signature { margin-top: 1.2rem; font: 600 .78rem/1.6 var(--pk-label); letter-spacing: .14em; text-transform: uppercase; color: var(--pk-gold-light); }
.pangeran-kecil-closing__names { margin-top: .4rem; font: 900 clamp(1.7rem, 8vw, 2.1rem)/1.2 var(--pk-display); color: var(--inv-text); overflow-wrap: anywhere; }

/* ---------- shared components: nav, music, QR, branding, ambient ---------- */

.pangeran-kecil-nav.inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-shade) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 78%, transparent);
    --inv-nav-active: var(--pk-gold-bg);
    border-color: color-mix(in srgb, var(--inv-accent) 55%, transparent);
    box-shadow: 0 14px 34px -12px rgb(0 0 0 / .8), inset 0 1px 0 color-mix(in srgb, var(--inv-accent) 40%, transparent);
    font-family: var(--pk-label); font-weight: 600;
}
.pangeran-kecil-nav .inv-nav__item.is-active { color: var(--inv-shade); }
.pangeran-kecil-nav .inv-nav__item:focus-visible { outline: 2px solid var(--pk-gold-light); outline-offset: 1px; }

.inv-music { right: calc(var(--pk-edge) + 1rem); }
.inv-music__button { background: var(--pk-gold-bg); color: var(--inv-shade); box-shadow: 0 8px 22px -8px rgb(0 0 0 / .7), 0 0 0 2px var(--inv-shade), 0 0 0 3px var(--inv-accent); }
.inv-autoscroll { color: var(--pk-gold-light); background: color-mix(in srgb, var(--inv-shade) 94%, transparent); border-color: color-mix(in srgb, var(--inv-accent) 55%, transparent); font-family: var(--pk-label); }
.inv-autoscroll--running { background: var(--inv-accent); color: var(--inv-shade); }
.inv-qr-tab { right: var(--pk-edge); font-family: var(--pk-label); color: var(--inv-shade); background: var(--pk-gold-bg); border-color: color-mix(in srgb, var(--inv-shade) 60%, transparent); }
.inv-qr-sheet .inv-checkin { font-family: var(--pk-serif); color: var(--inv-ink); }
.inv-checkin__title { color: var(--inv-primary); font-family: var(--pk-label); }

.pangeran-kecil-branding { position: relative; z-index: 1; padding-top: 1.2rem; color: var(--pk-muted); font-family: var(--pk-serif); font-size: .85rem; opacity: 1; }
/* the music player already leaves room for the menu: the page ends 110–150px under the last line */
body.pangeran-kecil-body:has(.inv-music__space) .pangeran-kecil-branding { padding-bottom: 3rem; }
.inv-ambient { --inv-ambient-1: var(--pk-gold-light); --inv-ambient-2: color-mix(in srgb, var(--inv-text) 85%, #fff); }

/* ---------- motion: floating crowns and scroll-drawn details ---------- */

html.inv-anim .pangeran-kecil-heading__crown { animation: pangeran-kecil-float 4.2s ease-in-out infinite; }
html.inv-anim .pangeran-kecil-window__crown, html.inv-anim .pangeran-kecil-medallion__crown { animation: pangeran-kecil-float-x 5s ease-in-out infinite; }
@keyframes pangeran-kecil-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes pangeran-kecil-float-x { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* the default state is the finished drawing; browsers with scroll-driven animations draw it while scrolling */
@supports (animation-timeline: view()) {
    html.inv-anim .pangeran-kecil-agenda::before { animation: pangeran-kecil-draw-y linear both; animation-timeline: view(); animation-range: entry 20% cover 60%; }
    html.inv-anim .pangeran-kecil-heading .pangeran-kecil-rule { animation: pangeran-kecil-draw-x linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    html.inv-anim .pangeran-kecil-portrait__laurel { animation: pangeran-kecil-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    html.inv-anim .pangeran-kecil-portrait__laurel--right { animation-name: pangeran-kecil-grow-right; }
    html.inv-anim .pangeran-kecil-arch__tip { animation: pangeran-kecil-spin linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    @keyframes pangeran-kecil-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes pangeran-kecil-draw-x { from { width: 2rem; opacity: .3; } to { width: min(11rem, 60%); opacity: 1; } }
    @keyframes pangeran-kecil-grow { from { transform: scale(.55) rotate(18deg); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes pangeran-kecil-grow-right { from { transform: scaleX(-1) scale(.55) rotate(18deg); opacity: 0; } to { transform: scaleX(-1); opacity: 1; } }
    @keyframes pangeran-kecil-spin { from { transform: rotate(-180deg) scale(.3); } to { transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}