/*
 * Template "Pesantren Kecil" (Khitanan) — the warm daytime world of a little santri.
 * Warm parchment + a deep primary (forest green by default; teak, navy, maroon in the variants) + terracotta
 * accent + soft gold + teak wood. Signature motifs, all drawn in CSS / inline SVG (no image assets):
 * the sarung check (a plaid woven from CSS stripes) with a gold tumpal edge, a langgar with a three-tier
 * roof and a louvred teak window, a lampu teplok, a bedug, a rehal with an open book, a peci, tasbih beads,
 * a ketupat, a kalender sobek, a student card, a timetable pinned on teak, and a ruled exercise book.
 * Mobile-first, one column (~460px) on a deep sarung-woven backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (titles, buttons, the sarung ground)   --inv-accent (terracotta: tiles, stamps, labels)
 *   --inv-background (parchment)   --inv-text   --inv-deep (dark sections)   --inv-wood (teak)   --inv-gold
 * Everything else is mixed from those, so a new variant only needs these seven colours.
 *
 * Section tones (set on each section in its partial): .psk-tone--paper (parchment), --glow (parchment with a
 * lamp glow), --sage (a soft tint of the primary), --deep (the dark colour), --wood (teak grain), --clay
 * (a terracotta band). Light and dark alternate down the page.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished (shutters open, stamps pressed, flame still).
 *
 * Contents: 1 base · 2 textures, sarung check & section tones · 3 shared pieces (heading + tasbih, roof,
 *           window, stamp, lamp) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Hijau Hutan & Jati" variant (the variant's colours override these) */
    --inv-primary: #1d5e40;
    --inv-accent: #c4532b;
    --inv-background: #f7eedb;
    --inv-text: #2a2118;
    --inv-deep: #0f3626;
    --inv-wood: #8a5227;
    --inv-gold: #e3a83a;
    --inv-radius: 14px;

    --psk-display: 'Young Serif', Georgia, 'Times New Roman', serif;
    --psk-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --psk-col: 460px;
    --psk-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    --psk-cream: color-mix(in srgb, #fff 30%, var(--inv-background));
    /* the accent and gold are too light for small text on parchment: text uses darker mixes (≥ 4.5:1) */
    --psk-accent-ink: color-mix(in srgb, var(--inv-accent) 78%, #000);
    --psk-gold-ink: color-mix(in srgb, var(--inv-gold) 50%, #3a2100);
    --psk-title: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-deep));
    --psk-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --psk-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --psk-line: color-mix(in srgb, var(--inv-primary) 20%, transparent);
    --psk-drop: 0 18px 34px -20px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* textures (inline SVG noise): the grain of teak and the tooth of paper, black with alpha */
    --psk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .11' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 0 0 0 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --psk-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* the sarung check: one stripe sequence, woven both ways over the ground colour */
    --psk-stripes:
        transparent 0 5px,
        color-mix(in srgb, var(--inv-gold) 85%, transparent) 5px 7px,
        transparent 7px 9px,
        color-mix(in srgb, var(--inv-accent) 72%, transparent) 9px 17px,
        transparent 17px 19px,
        color-mix(in srgb, var(--inv-gold) 85%, transparent) 19px 21px,
        transparent 21px 31px,
        rgb(255 255 255 / .38) 31px 32px,
        transparent 32px 44px;

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-gold);
    --inv-ambient-2: var(--inv-accent);
    /* the credit under the closing keeps the deep colour (it sits under a sarung band) */
    --inv-end-bg: var(--inv-deep);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--psk-sans);
    font-size: 15px;
    line-height: 1.65;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--inv-primary); }

.psk-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* the one column of the page; every section paints its own full-width background */
.psk-main { max-width: var(--psk-col); margin: 0 auto; }
.psk-branding {
    max-width: var(--psk-col); margin: 0 auto;
    --inv-branding-keep: 1; background: var(--inv-deep); color: rgb(255 255 255 / .8);
}

.psk-section { position: relative; isolation: isolate; overflow: hidden; padding: 4.5rem 1.4rem; text-align: center; }
.psk-section > p { margin: 0 auto 1rem; max-width: 34ch; }

.psk-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.95; color: var(--inv-primary); }
.psk-amp { font-family: var(--psk-display); color: var(--inv-gold); }

/* a small rounded link with an icon (Instagram) */
.psk-chip {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 2.25rem; padding: .3rem .85rem;
    border-radius: 999px; font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--inv-primary);
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--psk-line);
}
.psk-chip .psk-icon { width: 1rem; height: 1rem; }
.psk-icon { width: 1.15rem; height: 1.15rem; flex: none; }
.psk-crescent { display: block; fill: currentColor; }

/* ---------- 2. textures, sarung check & section tones ---------- */

/* the sarung check: gold / terracotta / white stripes woven both ways, darker checks, a fine twill */
.psk-sarung {
    background-color: var(--inv-primary);
    background-image:
        repeating-linear-gradient(45deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, var(--psk-stripes)),
        repeating-linear-gradient(0deg, var(--psk-stripes)),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px),
        repeating-linear-gradient(0deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px);
}
/* a band: the check with a gold rule and a row of gold tumpal teeth along its lower edge */
.psk-sarung--band { position: relative; height: 30px; box-shadow: inset 0 -3px 0 var(--inv-gold), inset 0 3px 0 color-mix(in srgb, var(--inv-gold) 70%, transparent); }
.psk-sarung--band::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px;
    background: conic-gradient(from -45deg at 50% 100%, var(--inv-gold) 90deg, transparent 0) 0 0 / 16px 8px repeat-x;
}
.psk-section__band { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 1; }
.psk-section__band--top { top: 0; bottom: auto; }

/* parchment: warm paper with a tooth and a ghost of the sarung check */
.psk-tone--paper, .psk-tone--glow {
    background-color: var(--inv-background);
    background-image:
        var(--psk-tooth),
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-gold) 18%, transparent), transparent 75%),
        radial-gradient(60% 28% at 0% 100%, color-mix(in srgb, var(--inv-accent) 10%, transparent), transparent 75%);
}
.psk-tone--paper::before, .psk-tone--glow::before, .psk-tone--sage::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .035;
    background:
        repeating-linear-gradient(90deg, var(--inv-primary) 0 2px, transparent 2px 22px, var(--inv-primary) 22px 23px, transparent 23px 44px),
        repeating-linear-gradient(0deg, var(--inv-primary) 0 2px, transparent 2px 22px, var(--inv-primary) 22px 23px, transparent 23px 44px);
}
/* parchment with the warm pool of a lamp in the middle (prayer) */
.psk-tone--glow {
    background-image:
        var(--psk-tooth),
        radial-gradient(60% 45% at 50% 45%, color-mix(in srgb, var(--inv-gold) 30%, transparent), transparent 75%),
        radial-gradient(80% 40% at 50% 100%, color-mix(in srgb, var(--inv-wood) 14%, transparent), transparent 75%);
}
/* sage: a soft wash of the primary */
.psk-tone--sage {
    background-color: color-mix(in srgb, var(--inv-primary) 12%, var(--inv-background));
    background-image: var(--psk-tooth), radial-gradient(80% 40% at 50% 0%, rgb(255 255 255 / .45), transparent 75%);
}

/* deep: the dark colour with a glow of the primary and the ghost of a sarung weave in gold */
.psk-tone--deep {
    color: var(--inv-background);
    background-color: var(--inv-deep);
    background-image:
        radial-gradient(90% 45% at 15% 0%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 75%),
        radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent 75%);
}
.psk-tone--deep::before, .psk-tone--clay::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
    background:
        repeating-linear-gradient(90deg, var(--inv-gold) 0 2px, transparent 2px 22px, var(--inv-gold) 22px 23px, transparent 23px 44px),
        repeating-linear-gradient(0deg, var(--inv-gold) 0 2px, transparent 2px 22px, var(--inv-gold) 22px 23px, transparent 23px 44px);
}
.psk-tone--deep a:not(.inv-button) { color: var(--inv-gold); }
.psk-tone--deep .psk-arabic { color: var(--inv-gold); }

/* wood: teak boards with a real grain and soft plank joints */
.psk-tone--wood {
    color: var(--inv-background);
    background-color: color-mix(in srgb, var(--inv-wood) 80%, #1a0c02);
    background-image:
        linear-gradient(180deg, rgb(0 0 0 / .25), transparent 18%, transparent 82%, rgb(0 0 0 / .3)),
        repeating-linear-gradient(180deg, transparent 0 118px, rgb(0 0 0 / .28) 118px 120px, rgb(255 255 255 / .06) 120px 121px),
        var(--psk-grain),
        linear-gradient(100deg, color-mix(in srgb, var(--inv-wood) 85%, #fff) 0%, var(--inv-wood) 40%, color-mix(in srgb, var(--inv-wood) 70%, #000) 100%);
    background-size: auto, auto, 480px 240px, auto;
}

/* clay: a terracotta band with the gold weave */
.psk-tone--clay {
    color: #fff;
    background-color: var(--inv-accent);
    background-image: radial-gradient(80% 50% at 50% 0%, rgb(255 255 255 / .18), transparent 75%), linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .14));
}

/* a client photo behind a section, under a strong gradient of the section's own tone */
.psk-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.psk-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 40%; --inv-parallax: 40px; }
.psk-bgphoto::after { content: ''; position: absolute; inset: 0; }
.psk-tone--deep .psk-bgphoto::after {
    background:
        radial-gradient(90% 50% at 20% 10%, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent),
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-deep) 90%, transparent),
            color-mix(in srgb, var(--inv-deep) 72%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 94%, transparent));
}

/* ---------- 3. shared pieces ---------- */

/* section heading: small caps eyebrow, a serif title with an accent last word, a string of tasbih beads */
.psk-heading { margin: 0 0 2.1rem; }
.psk-heading--left { text-align: left; }
.psk-heading__eyebrow {
    margin: 0 0 .55rem; font-size: .7rem; font-weight: 800; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase;
    color: var(--psk-accent-ink);
}
.psk-heading__title {
    margin: 0; font-family: var(--psk-display); font-size: 2.3rem; font-weight: 400; line-height: 1.08;
    letter-spacing: -.01em; color: var(--psk-title);
}
.psk-heading__title em { font-style: normal; color: var(--psk-accent-ink); }
.psk-tasbih { display: block; width: 7.6rem; height: auto; margin: .65rem auto 0; overflow: visible; }
.psk-heading--left .psk-tasbih { margin-left: 0; }
.psk-tasbih__cord { fill: none; stroke: color-mix(in srgb, var(--inv-wood) 60%, transparent); stroke-width: 1; }
.psk-tasbih__bead { fill: var(--inv-wood); }
.psk-tasbih__shine { fill: #fff; opacity: .45; }
.psk-tasbih__imam { fill: var(--inv-accent); }
.psk-tasbih__tassel { fill: var(--inv-accent); stroke: var(--inv-accent); stroke-width: 1.2; }

.psk-tone--deep .psk-heading__eyebrow, .psk-tone--wood .psk-heading__eyebrow { color: var(--inv-gold); }
.psk-tone--deep .psk-heading__title, .psk-tone--wood .psk-heading__title { color: var(--inv-background); }
.psk-tone--deep .psk-heading__title em, .psk-tone--wood .psk-heading__title em { color: var(--inv-gold); }
.psk-tone--deep .psk-tasbih__bead, .psk-tone--wood .psk-tasbih__bead { fill: var(--inv-gold); }
.psk-tone--deep .psk-tasbih__cord, .psk-tone--wood .psk-tasbih__cord { stroke: color-mix(in srgb, var(--inv-gold) 55%, transparent); }
.psk-tone--clay .psk-heading__eyebrow { color: color-mix(in srgb, #fff 88%, transparent); }
.psk-tone--clay .psk-heading__title, .psk-tone--clay .psk-heading__title em { color: #fff; }
.psk-tone--clay .psk-heading__title em { text-decoration: underline 3px var(--inv-gold); text-underline-offset: .18em; }
.psk-tone--clay .psk-tasbih__bead { fill: var(--inv-gold); }
.psk-tone--clay .psk-tasbih__imam, .psk-tone--clay .psk-tasbih__tassel { fill: var(--inv-deep); stroke: var(--inv-deep); }
.psk-tone--clay .psk-tasbih__cord { stroke: rgb(255 255 255 / .5); }

/* the langgar roof (sections/_roof) */
.psk-roof { display: block; width: 100%; height: auto; overflow: visible; }
.psk-roof__vent rect { fill: color-mix(in srgb, var(--inv-wood) 65%, #000); }
.psk-roof__slats { stroke: color-mix(in srgb, var(--inv-wood) 80%, #fff); stroke-width: 2.4; }
.psk-roof__rows path { stroke: color-mix(in srgb, var(--inv-accent) 55%, #000); stroke-width: 1.3; opacity: .55; }
.psk-roof__fascia { fill: var(--inv-wood); }
.psk-roof__edge { fill: none; stroke-width: 1.6; }
/* outline version (closing): gold lines only */
.psk-roof--line .psk-roof__tile { fill: color-mix(in srgb, var(--inv-gold) 10%, transparent); stroke: var(--inv-gold); stroke-width: 2.2; stroke-linejoin: round; }
.psk-roof--line .psk-roof__rows path { stroke: var(--inv-gold); opacity: .28; stroke-width: 1; }
.psk-roof--line .psk-roof__light { display: none; }
.psk-roof--line .psk-roof__fascia { fill: none; stroke: var(--inv-gold); stroke-width: 1.2; }
.psk-roof--line .psk-roof__vent rect { fill: none; }
.psk-roof--line .psk-roof__slats { stroke: var(--inv-gold); stroke-width: 1; opacity: .6; }

/* the teak window with louvred shutters (cover): the frame holds the photo, the shutters fold open beside it */
.psk-window { --win: 12rem; position: relative; width: var(--win); aspect-ratio: 4 / 5; perspective: 900px; }
.psk-window__frame {
    position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: 6px;
    border: calc(var(--win) * .05) solid var(--inv-wood);
    background: var(--inv-deep);
    box-shadow:
        inset 0 0 0 2px var(--inv-gold),
        0 0 0 1.5px color-mix(in srgb, var(--inv-wood) 60%, #000),
        0 18px 30px -14px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
/* a carved transom (roster) between the roof and the window */
.psk-window::before {
    content: ''; position: absolute; z-index: 2; left: -4%; right: -4%; top: calc(var(--win) * -.11); height: calc(var(--win) * .11);
    border-radius: 3px 3px 0 0;
    background:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--inv-wood) 50%, #000) 0 28%, transparent 30%) 0 0 / calc(var(--win) * .09) 100%,
        linear-gradient(180deg, color-mix(in srgb, var(--inv-wood) 85%, #fff), var(--inv-wood));
    box-shadow: inset 0 -2px 0 var(--inv-gold);
}
.psk-window__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.psk-window__empty {
    position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
    background:
        radial-gradient(80% 55% at 50% 26%, color-mix(in srgb, var(--inv-gold) 40%, transparent), transparent 70%),
        linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
}
.psk-window__empty .psk-crescent { position: absolute; left: 50%; top: 14%; width: 26%; transform: translateX(-50%) rotate(-20deg); color: var(--inv-gold); }
.psk-window__empty span { margin-top: 20%; font-family: var(--psk-display); font-size: calc(var(--win) * .42); line-height: 1; text-shadow: 0 6px 18px rgb(0 0 0 / .3); }
.psk-window__empty--many span { font-size: calc(var(--win) * .22); white-space: nowrap; }
/* shutters: louvred teak leaves hinged on the frame edges; the open position is the default */
.psk-window__shutter {
    position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; border-radius: 3px;
    border: calc(var(--win) * .028) solid color-mix(in srgb, var(--inv-wood) 80%, #000);
    background:
        repeating-linear-gradient(180deg,
            color-mix(in srgb, var(--inv-wood) 60%, #000) 0 2px,
            color-mix(in srgb, var(--inv-wood) 88%, #fff) 2px 5px,
            var(--inv-wood) 5px 9px),
        var(--inv-wood);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--inv-gold) 55%, transparent);
    backface-visibility: visible;
}
.psk-window__shutter--left { left: 0; transform-origin: 0 50%; transform: rotateY(-128deg); }
.psk-window__shutter--right { right: 0; transform-origin: 100% 50%; transform: rotateY(128deg); }

/* a round ink stamp (terracotta) on a paper disc: date on the cover, "santri cilik" on the card, RSVP */
.psk-stamp {
    --stamp: 4.4rem;
    position: absolute; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: var(--stamp); aspect-ratio: 1; border-radius: 50%; line-height: 1; text-align: center;
    color: var(--psk-accent-ink); background: color-mix(in srgb, var(--psk-paper) 92%, transparent);
    box-shadow:
        inset 0 0 0 2.5px var(--psk-accent-ink),
        inset 0 0 0 5px color-mix(in srgb, var(--psk-paper) 92%, transparent),
        inset 0 0 0 6.2px var(--psk-accent-ink),
        0 8px 16px -8px color-mix(in srgb, var(--inv-deep) 70%, transparent);
    transform: rotate(-12deg);
}
.psk-stamp__top { font-family: var(--psk-display); font-size: calc(var(--stamp) * .38); }
.psk-stamp__bottom { margin-top: .12rem; font-size: calc(var(--stamp) * .15); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.psk-stamp--small { --stamp: 3.6rem; position: relative; }
.psk-stamp--small .psk-stamp__bottom { font-size: .58rem; letter-spacing: .12em; }

/* the teplok lamp (sections/_lamp) */
.psk-lamp { display: block; overflow: visible; }

/* ---------- 4. cover ---------- */
.psk-cover {
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 3.1rem 1.25rem 2.1rem;
    isolation: isolate; color: var(--inv-text);
    background-color: var(--inv-background);
    background-image:
        var(--psk-tooth),
        radial-gradient(70% 40% at 50% 24%, color-mix(in srgb, var(--inv-gold) 34%, transparent), transparent 70%),
        radial-gradient(60% 30% at 0% 100%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 75%),
        radial-gradient(60% 30% at 100% 100%, color-mix(in srgb, var(--inv-primary) 14%, transparent), transparent 75%);
    transition: opacity .9s ease;
}
.psk-cover__band { position: absolute; left: 0; right: 0; top: 0; height: 22px; }
.psk-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

/* the langgar: roof, transom, window with shutters, sill (sized from --win) */
.psk-cover { --win: min(54vw, 14rem, calc(36svh * .8)); }
.psk-cover__langgar { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(var(--win) * 1.62); }
.psk-cover__roof { position: relative; z-index: 3; width: 100%; margin-bottom: calc(var(--win) * .1); filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.psk-cover__window { --win: inherit; }
.psk-cover__sill {
    position: relative; z-index: 3; width: calc(var(--win) * 1.32); height: calc(var(--win) * .06); margin-top: -2px; border-radius: 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-wood) 75%, #fff), var(--inv-wood) 45%, color-mix(in srgb, var(--inv-wood) 60%, #000));
    box-shadow: 0 10px 14px -6px color-mix(in srgb, var(--inv-deep) 50%, transparent);
}
.psk-cover__stamp { --stamp: calc(var(--win) * .36); z-index: 4; right: calc(var(--win) * -.36); bottom: 6%; }

.psk-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1.25rem; text-align: center; }
.psk-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0;
    font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .26em; text-transform: uppercase; color: var(--psk-accent-ink);
}
.psk-cover__title::before, .psk-cover__title::after { content: ''; width: .45rem; height: .45rem; background: var(--inv-gold); transform: rotate(45deg); }
.psk-cover__names {
    margin: .35rem 0 0; font-family: var(--psk-display); font-weight: 400; font-size: 3.5rem; line-height: 1;
    letter-spacing: -.015em; color: var(--psk-title); overflow-wrap: anywhere;
}
.psk-cover--many .psk-cover__names { font-size: 2.5rem; }
.psk-cover__date { margin: .5rem 0 0; font-size: .92rem; font-weight: 700; color: var(--inv-primary); }
.psk-cover__quote { max-width: 31ch; margin: .4rem 0 0; font-size: .93rem; font-style: italic; font-weight: 500; line-height: 1.45; color: var(--psk-muted); }
.psk-cover__guest {
    position: relative; width: min(100%, 18.5rem); margin: .95rem 0 0; padding: .5rem 1rem .6rem 1.35rem; border-radius: 10px;
    text-align: left; background: var(--psk-paper); box-shadow: inset 0 0 0 1.5px var(--psk-line), 0 10px 18px -12px color-mix(in srgb, var(--inv-deep) 60%, transparent);
    overflow: hidden;
}
/* a strip of sarung along the slip's left edge */
.psk-cover__guest::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
    background-color: var(--inv-primary);
    background-image: repeating-linear-gradient(0deg, var(--psk-stripes)), repeating-linear-gradient(0deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px);
}
.psk-cover__guest p { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-cover__guest-name { display: block; font-family: var(--psk-display); font-size: 1.15rem; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
.psk-cover__open {
    margin-top: 1rem; min-height: 3rem; padding: .7rem 1.9rem; font-weight: 700; letter-spacing: .02em;
    color: var(--inv-background); background: var(--inv-primary);
    box-shadow: 0 4px 0 0 var(--inv-deep), 0 0 0 2px color-mix(in srgb, var(--inv-gold) 70%, transparent), 0 12px 20px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}

/* opening: the cover fades and lifts away (never blocks: .9s) */
.psk-cover--leave { transition: opacity .9s ease .1s; }
.psk-cover--gone { opacity: 0; }
.psk-cover--gone .psk-cover__inner { transform: translateY(-2.5rem); }

/* ---------- 5. sections ---------- */

/* opening: the teplok hanging from the top edge, its warm pool of light, the words below; a band at the foot */
.psk-opening { padding: 0 1.6rem 5.8rem; }
.psk-opening__lamp { width: 5.4rem; height: auto; margin: 0 auto .2rem; }
.psk-opening__body { position: relative; max-width: 22rem; margin: 0 auto; }
.psk-opening__body::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: -5rem; width: 26rem; height: 22rem; transform: translateX(-50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-gold) 22%, transparent), transparent);
}
.psk-opening__basmalah { margin: 0 0 .9rem; font-size: 1.95rem; }
.psk-opening__greeting { margin: 0 auto 1rem; max-width: 22ch; font-family: var(--psk-display); font-size: 1.5rem; line-height: 1.3; color: #fff; }
.psk-opening__message { margin: 0 auto; max-width: 31ch; font-size: .98rem; color: var(--psk-cream-muted); }

/* child: the student card(s) and the wali santri slip */
.psk-child__list { display: grid; gap: 2rem; }
.psk-card {
    position: relative; overflow: hidden; border-radius: 18px; text-align: left; background: var(--psk-paper);
    box-shadow: 0 0 0 1px var(--psk-line), 0 22px 34px -20px color-mix(in srgb, var(--inv-deep) 80%, transparent);
    transform: rotate(-1.2deg);
}
.psk-card--flip { transform: rotate(1.2deg); }
/* a faint langgar watermark behind the fields */
.psk-card::after {
    content: ''; position: absolute; right: -1.5rem; bottom: -1.5rem; z-index: 0; width: 9rem; aspect-ratio: 1; pointer-events: none;
    border-radius: 50%; border: 10px double color-mix(in srgb, var(--inv-primary) 8%, transparent);
}
.psk-card__head { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; }
.psk-card__head::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-deep) 92%, transparent) 30%, color-mix(in srgb, var(--inv-deep) 35%, transparent));
}
.psk-card__emblem { position: relative; width: 2.6rem; height: 2.6rem; flex: none; }
.psk-card__emblem circle { fill: var(--psk-paper); stroke: var(--inv-gold); stroke-width: 3; }
.psk-card__emblem-roof { fill: var(--inv-accent); }
.psk-card__emblem-base { fill: var(--inv-primary); }
.psk-card__titles { position: relative; display: flex; flex-direction: column; line-height: 1.2; color: #fff; }
.psk-card__kind { font-size: .82rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.psk-card__sub { font-size: .7rem; font-weight: 600; letter-spacing: .06em; color: var(--inv-gold); }
.psk-card__body { position: relative; z-index: 1; display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 1rem .4rem; }
.psk-card__photo {
    position: relative; align-self: start; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px;
    border: 4px solid #fff; box-shadow: 0 0 0 1px var(--psk-line), 6px 6px 0 0 color-mix(in srgb, var(--inv-primary) 22%, transparent);
    background: linear-gradient(170deg, var(--inv-primary), var(--inv-deep));
}
.psk-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.psk-card__initial { display: grid; place-items: center; height: 100%; font-family: var(--psk-display); font-size: 3rem; color: #fff; }
.psk-card__fields { display: grid; gap: .45rem; margin: 0; }
.psk-card__field { padding-bottom: .3rem; border-bottom: 1.5px dotted var(--psk-line); }
.psk-card__field dt { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-card__field dd { margin: 0; font-size: .92rem; font-weight: 700; line-height: 1.3; color: var(--inv-text); }
.psk-card__name { margin: .05rem 0 0; font-family: var(--psk-display); font-size: 1.32rem; font-weight: 400; line-height: 1.15; color: var(--psk-title); overflow-wrap: anywhere; }
.psk-card__foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem 1rem 1rem; }
.psk-card__stamp { flex: none; margin: -.4rem .1rem 0 0; }
.psk-child__wali {
    position: relative; margin: 2.4rem 0 0; padding: 1.35rem 1.3rem 1.3rem; border-radius: 16px; text-align: left; color: var(--inv-background);
    background-color: color-mix(in srgb, var(--inv-wood) 80%, #1a0c02);
    background-image: var(--psk-grain), linear-gradient(110deg, color-mix(in srgb, var(--inv-wood) 85%, #fff), var(--inv-wood) 45%, color-mix(in srgb, var(--inv-wood) 70%, #000));
    background-size: 480px 240px, auto;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 45%, transparent), var(--psk-drop);
}
.psk-child__wali-label { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-gold); }
.psk-child__wali-of { margin: .3rem 0 .1rem; font-size: .84rem; font-style: italic; color: var(--psk-cream-muted); }
.psk-child__wali-names { display: flex; flex-direction: column; margin: 0; font-family: var(--psk-display); font-size: 1.3rem; line-height: 1.3; color: #fff; }
.psk-child__wali-names .psk-amp { font-size: 1rem; }
.psk-child__address { display: flex; align-items: flex-start; gap: .5rem; margin: .9rem 0 0; padding-top: .85rem; font-size: .86rem; color: var(--psk-cream-muted); border-top: 1px dashed color-mix(in srgb, var(--inv-background) 35%, transparent); }
.psk-child__address .psk-icon { margin-top: .15rem; color: var(--inv-gold); }

/* message: the peci on top of a parchment letter with a folded corner and a sarung edge */
.psk-message { padding-bottom: 4.8rem; }
.psk-message__letter {
    position: relative; max-width: 23rem; margin: 3.2rem auto 0; padding: 2.6rem 1.4rem 1.6rem 1.9rem; text-align: left; color: var(--inv-text);
    background:
        linear-gradient(225deg, transparent 1.6rem, var(--psk-paper) 1.6rem);
    border-radius: 6px 0 6px 6px;
    filter: drop-shadow(0 18px 22px rgb(0 0 0 / .35));
}
/* the folded corner */
.psk-message__letter::after {
    content: ''; position: absolute; top: 0; right: 0; width: 2.26rem; height: 2.26rem;
    background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--inv-background) 70%, var(--inv-wood)) 50%);
    border-bottom-left-radius: 6px;
}
/* the sarung edge along the left */
.psk-message__letter::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; border-radius: 6px 0 0 6px;
    background-color: var(--inv-primary);
    background-image: repeating-linear-gradient(0deg, var(--psk-stripes)), repeating-linear-gradient(0deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px);
}
.psk-message__peci { position: absolute; left: 50%; top: -2.6rem; width: 6.2rem; height: auto; transform: translateX(-50%) rotate(-4deg); }
.psk-peci__band { stroke: var(--inv-gold); }
.psk-message__quote { margin: 0; }
.psk-message__quote p { margin: 0; font-family: var(--psk-display); font-size: 1.17rem; line-height: 1.55; color: var(--inv-text); }
.psk-message__from {
    display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; font-size: .74rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; color: var(--psk-accent-ink);
}
.psk-message__from::before { content: ''; width: 1.8rem; height: 2px; background: var(--inv-accent); }

/* events: a tear-off calendar beside the name, then a white card with a sarung top edge */
.psk-event + .psk-event { margin-top: 3.2rem; }
.psk-event__top { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.2rem; text-align: left; }
.psk-event--flip .psk-event__top { flex-direction: row-reverse; text-align: right; }
.psk-calendar {
    position: relative; display: flex; flex-direction: column; align-items: center; flex: none; width: 6.1rem; margin: 0; padding: 1.35rem .3rem .55rem;
    border-radius: 6px 6px 3px 3px; background: #fff; line-height: 1.1; transform: rotate(-3deg);
    box-shadow:
        0 0 0 1px var(--psk-line),
        3px 3px 0 -1px #fff, 3px 3px 0 0 var(--psk-line),
        6px 6px 0 -1px #fff, 6px 6px 0 0 var(--psk-line),
        0 18px 24px -14px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.psk-event--flip .psk-calendar { transform: rotate(3deg); }
/* the binding strip with two rings */
.psk-calendar__rings {
    position: absolute; left: 0; right: 0; top: 0; height: .95rem; border-radius: 6px 6px 0 0; background: var(--inv-accent);
}
.psk-calendar__rings::before, .psk-calendar__rings::after {
    content: ''; position: absolute; top: -.35rem; width: .5rem; height: .85rem; border-radius: 999px;
    background: linear-gradient(90deg, #8d8d8d, #f2f2f2 45%, #8d8d8d); box-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.psk-calendar__rings::before { left: 1.3rem; }
.psk-calendar__rings::after { right: 1.3rem; }
.psk-calendar__weekday { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-calendar__day { font-family: var(--psk-display); font-size: 3.1rem; line-height: 1; color: var(--inv-primary); }
.psk-calendar__month { margin-top: .15rem; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-align: center; color: var(--psk-muted); }
.psk-event__title { min-width: 0; }
.psk-event__count { font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-event__name { margin: .15rem 0 0; font-family: var(--psk-display); font-size: 1.75rem; font-weight: 400; line-height: 1.12; color: var(--psk-title); overflow-wrap: anywhere; }
.psk-event__card {
    position: relative; overflow: hidden; padding: 1.4rem 1.1rem 1.25rem; border-radius: 18px; background: #fff; text-align: left;
    box-shadow: 0 0 0 1px var(--psk-line), var(--psk-drop);
}
.psk-event__card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px;
    background-color: var(--inv-primary);
    background-image: repeating-linear-gradient(90deg, var(--psk-stripes)), repeating-linear-gradient(90deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px);
}
.psk-event__media { margin-bottom: 1.05rem; }
.psk-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 45%; border-radius: 12px; }
.psk-event__rows { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.psk-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.psk-event__rows .psk-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-primary); background: color-mix(in srgb, var(--inv-primary) 12%, #fff); }
.psk-event__rows li > span { padding-top: .3rem; }
.psk-event__venue { display: block; font-weight: 700; }
.psk-event__address { display: block; font-size: .85rem; color: var(--psk-muted); }
.psk-event .inv-maps { margin-top: 1.15rem; text-align: center; }
.psk-event .inv-maps .inv-button { width: 100%; font-weight: 700; }
.psk-event .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: the bedug, then round drum heads with teak rims and pegs; the calendar card below */
.psk-bedug { display: block; width: 12.5rem; height: auto; margin: -.6rem auto 1rem; overflow: visible; filter: drop-shadow(0 14px 14px rgb(0 0 0 / .35)); }
.psk-bedug__stand { fill: none; stroke: color-mix(in srgb, var(--inv-wood) 70%, #000); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.psk-bedug__ring { fill: none; stroke: color-mix(in srgb, var(--inv-gold) 70%, var(--inv-wood)); stroke-width: 4; }
.psk-bedug__grain { fill: none; stroke: rgb(0 0 0 / .18); stroke-width: 1.2; }
.psk-bedug__peg { fill: var(--inv-gold); stroke: color-mix(in srgb, var(--inv-gold) 50%, #000); stroke-width: .8; }
.psk-bedug__mallet { stroke: color-mix(in srgb, var(--inv-wood) 50%, #fff); stroke-width: 4; stroke-linecap: round; }
.psk-bedug__head { fill: var(--inv-accent); }
.psk-countdown .inv-countdown { gap: clamp(.55rem, 2.8vw, .85rem); }
.psk-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(3.9rem, 18vw, 4.6rem); min-width: 0; aspect-ratio: 1; padding: 0; border-radius: 50%;
    color: var(--inv-text);
    background: radial-gradient(circle at 40% 35%, #fdf5e2, #e2c897);
    box-shadow:
        0 0 0 5px var(--inv-wood),
        0 0 0 6.5px color-mix(in srgb, var(--inv-wood) 50%, #000),
        0 14px 22px -8px rgb(0 0 0 / .55);
    outline: 2.5px dotted var(--inv-gold); outline-offset: 1px;
}
.psk-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--psk-display); font-size: 1.7rem; line-height: 1; color: var(--psk-title); }
.psk-countdown .inv-countdown__label { margin-top: .12rem; font-size: .54rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-countdown .inv-countdown__done { font-family: var(--psk-display); font-size: 1.3rem; color: var(--inv-gold); }
.psk-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.psk-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 700;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 10%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-background) 55%, transparent);
}
.psk-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--inv-gold); box-shadow: 0 4px 0 0 color-mix(in srgb, var(--inv-gold) 55%, #3a2100); }
.psk-countdown .inv-cal {
    --inv-cal-bg: var(--psk-paper); --inv-cal-mark: var(--inv-accent);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 16px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--inv-wood) 85%, #000), 0 22px 40px -24px rgb(0 0 0 / .7);
}
.psk-countdown .inv-cal__month { font-family: var(--psk-display); font-size: 1.45rem; color: var(--psk-title); }

/* prayer: an open book (two curved pages, leather cover, page edges) resting on the rehal */
.psk-prayer { padding-bottom: 4rem; }
.psk-book { position: relative; max-width: 22.5rem; margin: 0 auto; filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--inv-deep) 40%, transparent)); }
.psk-book__pages {
    position: relative; z-index: 1; padding: 2.5rem 1.35rem 2rem; color: var(--inv-text);
    background-color: var(--psk-paper);
    background-image:
        linear-gradient(90deg, transparent 42%, rgb(0 0 0 / .07) 49.6%, rgb(0 0 0 / .13) 50%, rgb(0 0 0 / .07) 50.4%, transparent 58%),
        radial-gradient(48% 14% at 25% 0%, rgb(255 255 255 / .9), transparent),
        radial-gradient(48% 14% at 75% 0%, rgb(255 255 255 / .9), transparent),
        linear-gradient(180deg, transparent 85%, rgb(0 0 0 / .05));
    border-radius: 46% 46% 6px 6px / 1.6rem 1.6rem 6px 6px;
    /* the fold dips at the top centre */
    -webkit-mask: radial-gradient(2.4rem 1.1rem at 50% 0, transparent 97%, #000 100%);
    mask: radial-gradient(2.4rem 1.1rem at 50% 0, transparent 97%, #000 100%);
}
.psk-book__cover { position: relative; padding: 0 7px; }
/* the leather cover peeking out at the sides and below */
.psk-book__cover::before {
    content: ''; position: absolute; inset: 1.4rem 0 0; border-radius: 10px 10px 8px 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-deep));
}
/* the stacked page edges */
.psk-book__edges {
    position: relative; display: block; height: 8px; margin: -1px 0 6px; border-radius: 0 0 4px 4px;
    background: repeating-linear-gradient(180deg, var(--psk-paper) 0 2px, color-mix(in srgb, var(--psk-paper) 78%, var(--inv-wood)) 2px 3px);
}
.psk-book__arabic { margin: 0 0 1rem; font-size: 1.6rem; color: var(--inv-primary); }
.psk-book__text { margin: 0; }
.psk-book__text p { margin: 0; font-family: var(--psk-display); font-size: 1.04rem; line-height: 1.6; }
.psk-book__text cite { display: inline-block; margin-top: .9rem; font-style: normal; font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-rehal { position: relative; display: block; width: 92%; height: auto; margin: -.3rem auto 0; }
.psk-rehal__carve { fill: none; stroke: color-mix(in srgb, var(--inv-gold) 70%, transparent); stroke-width: 1.5; }
.psk-rehal__cut { fill: color-mix(in srgb, var(--inv-wood) 40%, #000); }
.psk-rehal__grain { stroke: rgb(255 255 255 / .16); stroke-width: 1.4; }

/* rundown: the timetable sheet pinned on the teak board */
.psk-timetable {
    position: relative; margin: 0 .2rem; padding: 0 0 .4rem; border-radius: 6px; text-align: left; color: var(--inv-text);
    background: var(--psk-paper) var(--psk-tooth); transform: rotate(-.6deg);
    box-shadow: 0 2px 0 rgb(255 255 255 / .4) inset, 0 24px 36px -18px rgb(0 0 0 / .7);
}
.psk-timetable__pin {
    position: absolute; z-index: 2; top: -.45rem; width: 1.05rem; height: 1.05rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-gold) 40%, #fff), var(--inv-gold) 45%, color-mix(in srgb, var(--inv-gold) 50%, #3a2100));
    box-shadow: 0 3px 4px rgb(0 0 0 / .45);
}
.psk-timetable__pin--left { left: 1rem; }
.psk-timetable__pin--right { right: 1rem; }
.psk-timetable__head {
    position: relative; display: grid; grid-template-columns: 5.1rem minmax(0, 1fr); padding: .75rem 0 .65rem; border-radius: 6px 6px 0 0;
    font-size: .7rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #fff;
}
.psk-timetable__head::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--inv-deep) 62%, transparent); }
.psk-timetable__head span { position: relative; padding: 0 1rem; }
.psk-timetable__list { margin: 0; padding: 0; list-style: none; }
.psk-timetable__row { display: grid; grid-template-columns: 5.1rem minmax(0, 1fr); border-bottom: 1px solid color-mix(in srgb, var(--inv-primary) 16%, transparent); }
.psk-timetable__row:last-child { border-bottom: 0; }
.psk-timetable__time {
    display: flex; flex-direction: column; justify-content: center; padding: .7rem .5rem .7rem 1rem;
    font-family: var(--psk-display); font-size: 1.1rem; line-height: 1.1; color: var(--psk-title);
    border-right: 3px double color-mix(in srgb, var(--inv-accent) 55%, transparent);
    font-variant-numeric: tabular-nums;
}
.psk-timetable__time small { font-family: var(--psk-sans); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-timetable__body { padding: .75rem 1rem .75rem .9rem; }
.psk-timetable__body h3 { margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.35; }
.psk-timetable__body p { margin: .1rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--psk-muted); }
.psk-timetable__row:nth-child(even) { background: color-mix(in srgb, var(--inv-primary) 5%, transparent); }

/* story: the ruled exercise book (blue lines every 28px, a red margin, punched holes) */
.psk-notebook {
    --rule: 28px;
    position: relative; padding: 2rem 1.1rem 1.3rem 3.1rem; border-radius: 4px 12px 12px 4px; text-align: left;
    background-color: #fffdf7;
    background-image:
        radial-gradient(circle at 1.15rem 50%, var(--inv-background) 0 .38rem, color-mix(in srgb, var(--inv-wood) 30%, transparent) .4rem, transparent .46rem),
        linear-gradient(90deg, transparent 2.45rem, rgb(214 64 64 / .5) 2.45rem 2.55rem, transparent 2.55rem),
        repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 1px), rgb(66 120 190 / .22) calc(var(--rule) - 1px) var(--rule));
    background-size: 100% 3.5rem, auto, auto;
    background-position: 0 1rem, 0 0, 0 2rem;
    box-shadow: 0 0 0 1px var(--psk-line), 6px 6px 0 -1px #fffdf7, 6px 6px 0 0 var(--psk-line), var(--psk-drop);
}
.psk-notebook__list { display: grid; gap: var(--rule); margin: 0; padding: 0; list-style: none; }
.psk-note { display: flow-root; }
.psk-note__year {
    display: inline-block; margin: 0 0 .35rem -.2rem; padding: .05rem .6rem; border-radius: 4px;
    font-family: var(--psk-display); font-size: 1.15rem; line-height: var(--rule); color: #fff; background: var(--inv-accent); transform: rotate(-2deg);
}
.psk-note__photo { position: relative; float: right; width: 44%; margin: .2rem -.2rem .6rem 1rem; padding: 6px 6px 18px; background: #fff; box-shadow: 0 10px 18px -10px rgb(0 0 0 / .45); transform: rotate(3deg); }
.psk-note--flip .psk-note__photo { float: left; margin: .2rem 1rem .6rem 0; transform: rotate(-3deg); }
.psk-note__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.psk-tape { position: absolute; z-index: 1; left: 50%; top: -.55rem; width: 3.8rem; height: 1.1rem; transform: translateX(-50%) rotate(-5deg); opacity: .88; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.psk-note__body h3 { margin: 0; font-family: var(--psk-display); font-size: 1.22rem; font-weight: 400; line-height: var(--rule); color: var(--psk-title); }
.psk-note__body p { margin: 0; font-size: .9rem; line-height: var(--rule); color: var(--inv-text); }

/* gallery: a sarung band on top, a small roof over the first photo in a teak frame */
.psk-gallery { padding-top: 5rem; }
.psk-gallery__roof { width: 74%; margin: -.6rem auto -2px; position: relative; z-index: 1; }
.psk-gallery .inv-gallery { gap: .7rem; }
.psk-gallery .inv-gallery__item { border-radius: 6px; box-shadow: 0 0 0 4px var(--inv-wood), 0 0 0 5px var(--inv-gold), 0 16px 26px -16px rgb(0 0 0 / .8); }
.psk-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; margin-bottom: .4rem; }

/* live streaming: a deep notice card with a sarung top edge */
.psk-stream__card {
    position: relative; overflow: hidden; max-width: 23rem; margin: 0 auto; padding: 2.6rem 1.3rem 1.8rem; border-radius: 18px; color: var(--inv-background);
    background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 70%), linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--psk-drop);
}
.psk-stream__band { position: absolute; left: 0; right: 0; top: 0; height: 12px; }
.psk-stream__icon { display: inline-grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; color: #fff; background: var(--inv-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-gold) 60%, transparent); }
.psk-stream__icon .psk-icon { width: 1.7rem; height: 1.7rem; }
.psk-stream__eyebrow { margin: .8rem 0 0; font-size: .68rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-gold); }
.psk-stream__title { margin: .1rem 0 .4rem; font-family: var(--psk-display); font-size: 1.95rem; font-weight: 400; line-height: 1.1; color: #fff; }
.psk-stream__card p { margin: 0 auto .4rem; max-width: 30ch; font-size: .9rem; }
.psk-stream__note { opacity: .9; font-size: .85rem !important; }
.psk-stream__card .inv-button { margin-top: .7rem; min-height: 2.75rem; background: var(--inv-gold); color: var(--inv-deep); font-weight: 700; }

/* RSVP: the attendance book (ruled cream sheet, red margin, sarung spine) and the stamp after sending */
.psk-rsvp__sheet {
    position: relative; padding: 1.5rem 1.1rem 1.4rem 1.85rem; border-radius: 6px 16px 16px 6px; color: var(--inv-text);
    background-color: var(--psk-paper);
    background-image:
        linear-gradient(90deg, transparent 1.35rem, rgb(214 64 64 / .4) 1.35rem 1.45rem, transparent 1.45rem),
        repeating-linear-gradient(180deg, transparent 0 27px, rgb(66 120 190 / .12) 27px 28px);
    box-shadow: 0 24px 40px -22px rgb(0 0 0 / .75);
}
.psk-rsvp__sheet::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 6px 0 0 6px;
    background-color: var(--inv-primary);
    background-image: repeating-linear-gradient(0deg, var(--psk-stripes)), repeating-linear-gradient(0deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px);
}
.psk-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--psk-muted); }
.psk-rsvp__sent { margin-bottom: 1rem; }
.psk-rsvp__stamp { --stamp: 5.6rem; position: relative; margin: 0 auto .6rem; }
.psk-stamp__word { font-family: var(--psk-display); font-size: 1rem; line-height: 1.05; padding: 0 .5rem; }
html.inv-anim .psk-rsvp__sent .psk-rsvp__stamp { animation: psk-press .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.psk-rsvp__thanks { margin: 0; font-family: var(--psk-display); font-size: 1.6rem; color: var(--psk-title); }
.psk-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--psk-muted); }
.psk-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--inv-primary); }

/* gift: cream envelopes, two per row (terracotta flap, gold seal); the hanging ketupat */
.psk-gift { padding-top: 5rem; }
.psk-gift__ketupat { position: absolute; top: 0; right: 9%; width: 3rem; height: auto; transform-origin: 50% 0; }
.psk-ketupat__string { stroke: color-mix(in srgb, var(--inv-gold) 70%, transparent); stroke-width: 1.4; }
.psk-ketupat__body { fill: #c9b14a; stroke: #7f6b1c; stroke-width: 1.2; }
.psk-ketupat__weave { stroke: #8a7a26; stroke-width: 1.2; opacity: .85; }
.psk-ketupat__tail { fill: #9ab048; }
.psk-gift__intro { color: var(--psk-cream-muted); }
.psk-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.psk-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.psk-gift .inv-gift__account,
.psk-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2rem .75rem 1rem; border-radius: 12px; color: var(--inv-text); background: var(--psk-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .7);
}
.psk-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.35rem;
    background: var(--inv-accent); clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%);
}
.psk-gift .inv-gift__account::after {
    content: ''; position: absolute; left: 50%; top: .62rem; width: 1.05rem; height: 1.05rem; margin-left: -.525rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-gold) 40%, #fff), var(--inv-gold) 55%, color-mix(in srgb, var(--inv-gold) 55%, #3a2100));
    box-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.psk-gift .inv-gift__account p, .psk-gift .inv-gift__address p { margin: 0; }
.psk-gift .inv-gift__bank { font-weight: 700; font-size: .85rem; color: var(--inv-primary); }
.psk-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.psk-gift .inv-gift__logo img { max-width: 5rem; }
.psk-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700;
    letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text);
}
.psk-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--psk-muted); overflow-wrap: anywhere; }
.psk-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 700; }
.psk-gift .inv-gift__address { margin-top: .8rem; padding-top: 1.2rem; font-size: .875rem; border-top: 6px solid var(--inv-gold); }
.psk-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: cream chips on the terracotta band */
.psk-cohosts { padding-top: 5.2rem; }
.psk-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.psk-cohosts__list li {
    padding: .5rem 1rem; border-radius: 999px; font-family: var(--psk-display); font-size: 1rem; line-height: 1.3;
    color: var(--inv-deep); background: var(--psk-paper); box-shadow: 0 3px 0 0 color-mix(in srgb, var(--inv-accent) 55%, #000);
}

/* contacts: white cards with the initial on a deep disc and a WhatsApp button */
.psk-contacts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.psk-contacts__list > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .45rem); }
.psk-contact {
    display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1.15rem .7rem 1rem; border-radius: 16px;
    background: #fff; box-shadow: 0 0 0 1px var(--psk-line), 0 12px 20px -16px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.psk-contact__avatar {
    display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: .55rem; border-radius: 50%;
    font-family: var(--psk-display); font-size: 1.45rem; color: #fff;
    background: var(--inv-primary); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--inv-gold);
}
.psk-contact p { margin: 0; }
.psk-contact__name { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.psk-contact__role { font-size: .78rem; color: var(--psk-muted); }
.psk-contact__button { margin-top: .7rem; min-height: 2.5rem; padding: .45rem .9rem; font-size: .8rem; font-weight: 700; }
.psk-contact__button .psk-icon { width: 1.05rem; height: 1.05rem; }
.psk-contact__phone { margin-top: .5rem !important; font-size: .85rem; }

/* health protocol: white chips */
.psk-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.psk-protocol__list li {
    display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    background: #fff; box-shadow: inset 0 0 0 1px var(--psk-line);
}
.psk-protocol__list .psk-icon { width: 1rem; height: 1rem; color: var(--inv-primary); }
.psk-protocol__note { font-size: .88rem; color: var(--psk-muted); }

/* vendors: book-like labels with a coloured spine, two per row */
.psk-vendors__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.psk-vendors__list > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.psk-vendor {
    position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .9rem .6rem .9rem 1.1rem; border-radius: 6px 12px 12px 6px;
    background: #fff; box-shadow: 0 0 0 1px var(--psk-line), 0 10px 16px -14px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.psk-vendor::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 6px 0 0 6px; background: var(--inv-primary); }
.psk-vendor:nth-child(3n + 2)::before { background: var(--inv-accent); }
.psk-vendor:nth-child(3n)::before { background: var(--inv-gold); }
.psk-vendor__role { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--psk-accent-ink); }
.psk-vendor__name { margin-top: .15rem; font-family: var(--psk-display); font-size: 1.08rem; line-height: 1.2; color: var(--psk-title); overflow-wrap: anywhere; }
.psk-vendor__link { display: inline-flex; align-items: center; gap: .3rem; min-height: 2rem; font-size: .76rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.psk-vendor__link .psk-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the deep colour, the roof outline over the thanks, a sarung band */
.psk-closing { padding: 3.4rem 1.6rem 0; }
.psk-closing--photo { padding-top: 0; }
.psk-closing__photo { position: relative; z-index: -1; height: min(96vw, 24rem); margin: 0 -1.6rem; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); }
.psk-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.psk-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 32%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 62%, var(--inv-deep) 97%);
}
.psk-closing__body { position: relative; max-width: 22rem; margin: 0 auto; padding-bottom: 1.4rem; }
.psk-closing--photo .psk-closing__body { margin-top: -6.5rem; }
.psk-closing__roof { width: 10rem; margin: 0 auto .8rem; }
.psk-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-gold); }
.psk-closing__title { margin: 0 0 .7rem; font-family: var(--psk-display); font-size: clamp(1.9rem, 8.5vw, 2.4rem); font-weight: 400; line-height: 1.05; color: #fff; }
.psk-closing__title em { font-style: normal; color: var(--inv-gold); }
.psk-closing__message { margin: 0 auto; max-width: 30ch; font-size: .92rem; line-height: 1.6; color: var(--psk-cream-muted); }
.psk-closing__salam { margin: .8rem 0 0; font-family: var(--psk-display); font-size: 1.02rem; line-height: 1.4; color: var(--inv-gold); }
.psk-closing__signature { margin: .85rem 0 .1rem; font-size: .84rem; color: var(--psk-cream-muted); }
.psk-closing__names { margin: 0; font-family: var(--psk-display); font-size: clamp(2.1rem, 9.5vw, 2.4rem); line-height: 1.1; color: var(--inv-gold); overflow-wrap: anywhere; }
.psk-closing__band { margin: 0 -1.6rem 8px; }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.psk-main .inv-form { gap: 1rem; text-align: left; }
.psk-main .inv-form label, .psk-main .inv-form__choices legend { font-size: .82rem; font-weight: 700; color: var(--inv-text); }
.psk-main .inv-form input:not([type=radio]):not([type=checkbox]),
.psk-main .inv-form select,
.psk-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 10px;
    font: 400 .95rem/1.4 var(--psk-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 24%, transparent);
    transition: box-shadow .2s ease;
}
.psk-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.psk-main .inv-form input:not([type=radio]):focus-visible,
.psk-main .inv-form select:focus-visible,
.psk-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 4px color-mix(in srgb, var(--inv-gold) 40%, transparent);
}
.psk-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 700; box-shadow: 0 4px 0 0 var(--inv-deep); }
.psk-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.psk-main .inv-form__notice { text-align: center; }

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.psk-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.psk-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.psk-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .45rem;
    min-height: 5.4rem; padding: .85rem .3rem .75rem; border-radius: 12px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 22%, transparent);
    transition: background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.psk-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.psk-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--inv-primary) 12%, #fff);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.psk-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.3rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--psk-choice-icon) center / contain no-repeat; mask: var(--psk-choice-icon) center / contain no-repeat;
}
.psk-rsvp .inv-form__choices label:nth-of-type(1) {
    --psk-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.psk-rsvp .inv-form__choices label:nth-of-type(2) {
    --psk-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.psk-rsvp .inv-form__choices label:nth-of-type(3) {
    --psk-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E");
}
.psk-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-primary); transform: translateY(-3px);
    box-shadow: 0 4px 0 0 var(--inv-deep), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.psk-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.psk-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.psk-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-gold); outline-offset: 3px; }

/* wishes: the form on a white sheet with a sarung spine, the wishes as notes in a scroll box */
.psk-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.psk-wishes .inv-form {
    position: relative; overflow: hidden; padding: 1.3rem 1.1rem 1.3rem 1.6rem; border-radius: 6px 16px 16px 6px; background: #fff;
    box-shadow: 0 0 0 1px var(--psk-line), var(--psk-drop);
}
.psk-wishes .inv-form::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
    background-color: var(--inv-primary);
    background-image: repeating-linear-gradient(0deg, var(--psk-stripes)), repeating-linear-gradient(0deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px);
}
.psk-wishes .inv-wishes__list { margin-top: 1.4rem; }
.psk-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 14px; background: color-mix(in srgb, var(--inv-primary) 7%, transparent); box-shadow: inset 0 0 0 1px var(--psk-line);
}
.psk-wishes .inv-wish { padding: .75rem .9rem; border-radius: 10px; background: #fffdf7; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 4px solid var(--inv-accent); }
.psk-wishes .inv-wish__name { font-weight: 700; color: var(--inv-primary); }
.psk-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.psk-wishes .inv-wish__time { font-size: .72rem; color: var(--psk-muted); }

/* ---------- 7. shared components ---------- */
.psk-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, #fff 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--psk-sans);
}

/* ---------- 8. screen sizes ---------- */

/* short phones: the langgar and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .psk-cover { --win: min(48vw, 12.5rem, calc(31svh * .8)); padding-top: 2.6rem; padding-bottom: 1.8rem; }
    .psk-cover__text { margin-top: 1rem; }
    .psk-cover__names { font-size: 3.05rem; }
    .psk-cover--many .psk-cover__names { font-size: 2.25rem; }
    .psk-cover__quote { font-size: .9rem; }
    .psk-cover__guest { margin-top: .8rem; }
    .psk-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .psk-cover { --win: min(44vw, calc(27svh * .8)); padding-top: 2.4rem; padding-bottom: 1.5rem; }
    .psk-cover__text { margin-top: .8rem; }
    .psk-cover__names { font-size: 2.6rem; }
    .psk-cover--many .psk-cover__names { font-size: 1.95rem; }
    .psk-cover__date { margin-top: .3rem; font-size: .84rem; }
    .psk-cover__quote { font-size: .85rem; line-height: 1.35; }
    .psk-cover__guest { padding: .4rem .85rem .5rem 1.2rem; }
    .psk-cover__guest-name { font-size: 1.05rem; }
    .psk-cover__open { min-height: 2.75rem; padding: .6rem 1.6rem; }
}
/* very short screens (in-app browsers): a smaller langgar and quote, so everything fits */
@media (max-height: 600px) {
    .psk-cover { --win: min(40vw, calc(24svh * .8)); padding-top: 2.55rem; }
    .psk-cover__names { font-size: 2.3rem; }
    .psk-cover__quote { font-size: .82rem; line-height: 1.3; }
}

/* wide screens: the phone-width column on a deep backdrop with the sarung weave */
@media (min-width: 560px) {
    body.psk-body {
        background:
            radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    body.psk-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .1;
        background:
            repeating-linear-gradient(90deg, var(--psk-stripes)),
            repeating-linear-gradient(0deg, var(--psk-stripes));
    }
    .psk-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes psk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes psk-roof-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes psk-photo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes psk-open-left { from { transform: rotateY(0deg); } to { transform: rotateY(-128deg); } }
@keyframes psk-open-right { from { transform: rotateY(0deg); } to { transform: rotateY(128deg); } }
@keyframes psk-press { 0% { opacity: 0; transform: rotate(-12deg) scale(1.8); } 60% { opacity: 1; transform: rotate(-12deg) scale(.94); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes psk-flicker {
    0%, 100% { transform: scale(1, 1); opacity: 1; }
    30% { transform: scale(.94, 1.06) translateX(.3px); opacity: .92; }
    55% { transform: scale(1.04, .95); opacity: 1; }
    80% { transform: scale(.97, 1.03) translateX(-.3px); opacity: .95; }
}
@keyframes psk-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes psk-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* cover (≤ 2.5 s, once): the roof settles (0–.8 s), the photo fades in behind the closed shutters (.2–1 s),
   the shutters swing open (.75–1.75 s), the date stamp is pressed (1.6–2.2 s); the text follows its inv-enter delays */
html.inv-anim .psk-cover__roof { animation: psk-roof-in .8s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .psk-window__frame { animation: psk-photo-in .8s ease .2s both; }
html.inv-anim .psk-cover__window .psk-window__shutter--left { animation: psk-open-left 1s cubic-bezier(.45, 0, .2, 1) .75s both; }
html.inv-anim .psk-cover__window .psk-window__shutter--right { animation: psk-open-right 1s cubic-bezier(.45, 0, .2, 1) .75s both; }
html.inv-anim .psk-cover__stamp { animation: psk-press .6s cubic-bezier(.3, 1.4, .5, 1) 1.6s both; }

/* the teplok flame flickers softly, its glow breathes; the ketupat sways on its string */
.psk-lamp__flame { transform-box: fill-box; transform-origin: 50% 100%; }
html.inv-anim .psk-lamp__flame { animation: psk-flicker 2.6s ease-in-out infinite; }
html.inv-anim .psk-lamp__glow { animation: psk-glow 3.2s ease-in-out infinite; }
html.inv-anim .psk-gift__ketupat { animation: psk-sway 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .psk-cover, .psk-cover--leave, .psk-cover__inner { transition: none; }
}

/* ---------- 10. intro scene "Pagi di Serambi Langgar" (scene.json + sections/_scene) ---------- */
.psk-scene-rays {
    width: 100%; height: 100%;
    background: repeating-conic-gradient(from 0deg at 50% 16%, color-mix(in srgb, var(--inv-gold) 20%, transparent) 0 5deg, transparent 5deg 13deg);
    -webkit-mask: radial-gradient(70% 55% at 50% 16%, #000 10%, transparent 75%); mask: radial-gradient(70% 55% at 50% 16%, #000 10%, transparent 75%);
}
.psk-scene-roof { filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--inv-deep) 30%, transparent)); }
.inv-scene__art > .psk-scene-roof { height: auto; }
.psk-scene-post {
    width: 100%; height: 100%; border-radius: 3px;
    background: var(--psk-grain), linear-gradient(90deg, color-mix(in srgb, var(--inv-wood) 70%, #fff), var(--inv-wood) 45%, color-mix(in srgb, var(--inv-wood) 60%, #000));
    background-size: 240px 480px, auto;
    box-shadow: inset 0 10px 0 -4px var(--inv-gold), 0 10px 18px -8px rgb(0 0 0 / .4);
}
.psk-scene-floor {
    width: 100%; height: 100%;
    background-color: var(--inv-wood);
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-wood) 55%, #000) 0 5px, color-mix(in srgb, var(--inv-gold) 55%, var(--inv-wood)) 5px 7px, transparent 7px),
        repeating-linear-gradient(180deg, transparent 0 26px, rgb(0 0 0 / .18) 26px 28px),
        var(--psk-grain),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-wood) 85%, #fff), color-mix(in srgb, var(--inv-wood) 70%, #000));
    background-size: auto, auto, 480px 240px, auto;
}
.psk-scene-runner { height: 100%; box-shadow: 0 8px 12px -6px rgb(0 0 0 / .4), inset 0 -3px 0 var(--inv-gold), inset 0 3px 0 color-mix(in srgb, var(--inv-gold) 70%, transparent); }
.psk-scene-hang { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; }
.psk-scene-hang__cord { flex: 1 1 0; min-height: 1.2rem; width: 2px; margin-bottom: -2px; background: color-mix(in srgb, var(--inv-wood) 70%, #000); }
.psk-scene-hang .psk-lamp { flex: none; width: 100%; height: auto; }
.inv-scene__art > .psk-scene-ketupat { width: 100%; height: 100%; }
.psk-scene-ketupat, .psk-scene-bedug { overflow: visible; }
.inv-scene__art > .psk-scene-bedug { margin: 0; width: 100%; height: 100%; filter: drop-shadow(0 10px 8px rgb(0 0 0 / .3)); }
.psk-scene-peci { overflow: visible; filter: drop-shadow(0 8px 6px rgb(0 0 0 / .3)); }
.psk-scene-peci .psk-tasbih__bead { fill: var(--inv-gold); }
.psk-scene-peci .psk-tasbih__cord { stroke: var(--inv-gold); }

/* the card: a "kartu santri" — parchment with a sarung-check header and a gold tumpal edge */
body.psk-body .inv-intro--scene .inv-scene__card {
    top: 50%; aspect-ratio: auto; padding: 3.1rem 1.3rem 1.5rem; overflow: hidden; border-radius: 18px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    color: var(--inv-text);
    background: var(--psk-tooth), radial-gradient(90% 70% at 50% 60%, var(--psk-paper), var(--psk-cream));
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-gold) 70%, transparent), 0 0 0 5px var(--psk-paper), 0 0 0 6.5px var(--psk-line), 0 26px 40px -22px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
body.psk-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.65rem;
    background-color: var(--inv-primary);
    background-image:
        repeating-linear-gradient(45deg, rgb(0 0 0 / .08) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, var(--psk-stripes)),
        repeating-linear-gradient(0deg, var(--psk-stripes)),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .2) 0 22px, transparent 22px 44px);
    box-shadow: inset 0 -3px 0 var(--inv-gold);
}
body.psk-body .inv-intro--scene .inv-scene__card::after {
    content: ''; position: absolute; left: 0; right: 0; top: 1.65rem; height: 8px;
    background: conic-gradient(from -45deg at 50% 100%, var(--inv-gold) 90deg, transparent 0) 0 0 / 16px 8px repeat-x;
    transform: scaleY(-1);
}
body.psk-body .inv-scene__card .inv-intro__label { color: var(--psk-accent-ink); font: 800 .7rem/1.3 var(--psk-sans); letter-spacing: .24em; }
body.psk-body .inv-scene__card .inv-intro__names { color: var(--psk-title); font: 400 clamp(2.3rem, 11vw, 3.1rem)/1.08 var(--psk-display); font-family: var(--psk-display) !important; }
body.psk-body .inv-scene__card .inv-intro__rule { width: 6.5rem; height: 3px; background: radial-gradient(circle, var(--inv-wood) 0 2.4px, transparent 2.8px) 0 50% / 9px 6px repeat-x; }
body.psk-body .inv-scene__card .inv-intro__date { color: var(--psk-muted); font: 700 .86rem/1.3 var(--psk-sans); letter-spacing: .04em; }
body.psk-body .inv-intro--scene .inv-intro__skip { background: var(--psk-paper); color: var(--inv-text); border-color: var(--psk-line); }