/*
 * Template "Petualang Kecil" (Aqiqah & Kelahiran, baby boy) — "a little explorer has arrived".
 * A storybook woodland on map-cream paper: layered misty mountain ranges, pines, a mustard sun, woodland
 * animals peeking over the ridges (fox, bear cub, fawn, owl; sections/_sprite), a compass, a camp tent,
 * dotted trails, the photo in a stitched scout badge (sections/_badge), field notes for the birth data.
 * Mobile-first, one column (~460px) on a forest backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (forest green: mountains, titles, the badge band)   --inv-accent (rust: labels, buttons,
 *   the fox, the badge's stitched edge)   --inv-shine (mustard: the sun, accents on forest sections)
 *   --inv-background (map cream)   --inv-text   --inv-deep (forest night: dark sections)
 *   --inv-soft (pale sage: soft sections, hazy far mountains)
 * The landscape is mixed from those, so a new variant only needs these seven colours.
 *
 * Section tones (set on each section in its partial): .pk-tone--map (cream with faint contour lines),
 * --sage (soft tint), --forest (dark), --sun (a mustard band). A forest section that follows a light one
 * rises out of it with a treeline edge.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 artwork colours · 3 section tones & edges · 4 shared pieces (heading, badge,
 *           animals, trail, ridge) · 5 cover · 6 sections in page order · 7 forms · 8 shared components ·
 *           9 screen sizes · 10 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Hutan Pinus" variant (the variant's colours override these) */
    --inv-primary: #2f5d46;
    --inv-accent: #c75b2b;
    --inv-background: #f7efe0;
    --inv-text: #1f2a22;
    --inv-deep: #1a3a2b;
    --inv-shine: #f2b33d;
    --inv-soft: #d5e2c4;
    --inv-radius: 14px;

    --pk-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --pk-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pk-col: 460px;
    --pk-paper: color-mix(in srgb, #fff 62%, var(--inv-background));
    --pk-title: color-mix(in srgb, var(--inv-primary) 82%, var(--inv-deep));
    --pk-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --pk-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --pk-line: color-mix(in srgb, var(--inv-primary) 22%, transparent);
    --pk-sage: color-mix(in srgb, var(--inv-soft) 70%, var(--inv-background));
    --pk-wood: color-mix(in srgb, var(--inv-accent) 70%, #5a2e14);
    --pk-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* topographic contour lines of a trail map (a mask, so it takes any colour) */
    --pk-topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M70 80c22-28 80-24 92 6s-12 58-52 56-62-32-40-62Z'/%3E%3Cpath d='M54 74c30-42 112-36 126 8s-20 80-74 78-84-44-52-86Z'/%3E%3Cpath d='M38 66c38-56 146-48 162 10s-28 102-94 100-108-58-68-110Z'/%3E%3Cpath d='M184 196c16-12 46-8 52 8s-12 30-34 26-32-22-18-34Z'/%3E%3Cpath d='M172 190c22-20 66-14 76 12s-18 46-50 42-48-34-26-54Z'/%3E%3Cpath d='M-20 214c30-10 60 8 64 30M24 -10c-4 30 10 48 26 60'/%3E%3C/svg%3E");
    /* the treeline that a forest section rises with (the part ABOVE the line is painted) */
    --pk-treeline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 36' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V22L390 14L382 22L371 5L360 21L342 15L322 27L302 11L286 24L272 19L262 4L252 19L234 26L212 13L196 24L180 17L170 2L160 17L140 27L120 15L104 24L90 7L80 21L60 13L44 27L30 17L20 3L10 19L0 14Z'/%3E%3C/svg%3E");
    /* the dotted trail under the coloured word of a heading */
    --pk-dots: radial-gradient(circle, currentColor 1.6px, transparent 2.1px) left center / 8px 4px repeat-x;

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-shine);
}

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--pk-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); }

.pk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pk-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 */
.pk-main { max-width: var(--pk-col); margin: 0 auto; }
.pk-branding { max-width: var(--pk-col); margin: 0 auto; }

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

.pk-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--inv-primary); }
.pk-amp { font-family: var(--pk-display); font-weight: 600; color: var(--inv-accent); }

/* ---------- 2. artwork colours (sprite + scenes) ---------- */
.pk-stop--fox-hi { stop-color: color-mix(in srgb, var(--inv-accent) 72%, #ffd2a6); }
.pk-stop--fox { stop-color: var(--inv-accent); }
.pk-stop--fox-lo { stop-color: color-mix(in srgb, var(--inv-accent) 72%, #3a1606); }
.pk-stop--tent-hi { stop-color: color-mix(in srgb, var(--inv-accent) 80%, #fff); }
.pk-stop--tent-lo { stop-color: color-mix(in srgb, var(--inv-accent) 80%, #4a1a08); }
.pk-stop--shine { stop-color: var(--inv-shine); }
.pk-stop--shine-lo { stop-color: color-mix(in srgb, var(--inv-shine) 80%, var(--inv-accent)); }
.pk-stop--far-hi { stop-color: color-mix(in srgb, var(--inv-primary) 42%, var(--inv-background)); }
.pk-stop--far { stop-color: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-soft)); }
.pk-stop--mid-hi { stop-color: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-soft)); }
.pk-stop--mid { stop-color: var(--inv-primary); }
.pk-stop--mist { stop-color: var(--inv-background); }
.pk-fill--shine { fill: var(--inv-shine); }
.pk-fill--accent { fill: var(--inv-accent); }
.pk-blush { fill: var(--inv-accent); opacity: .22; }

.pk-scene { display: block; overflow: visible; }
.pk-m-halo { fill: var(--inv-shine); opacity: .22; }
.pk-m-birds { fill: none; stroke: color-mix(in srgb, var(--inv-deep) 60%, transparent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pk-m-shade { fill: #000; opacity: .13; }
.pk-m-light { fill: #fff; opacity: .16; }
.pk-m-snow { fill: #fffaf0; opacity: .92; }
.pk-m-pine { color: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)); }
.pk-m-pine--dark { color: var(--inv-deep); }
.pk-m-near { fill: color-mix(in srgb, var(--inv-primary) 45%, var(--inv-deep)); }
.pk-m-near-lo { fill: var(--inv-deep); opacity: .55; }
.pk-m-pine--front { color: var(--inv-deep); }
.pk-m-pine--front-dark { color: color-mix(in srgb, var(--inv-deep) 70%, #000); }
.pk-m-ground { fill: var(--inv-background); }
.pk-m-grass { fill: none; stroke: color-mix(in srgb, var(--inv-primary) 70%, transparent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.pk-m-far-solid { fill: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-soft)); }
.pk-m-mid-solid { fill: var(--inv-primary); }
/* ridges at the foot of forest sections: a lighter range behind, a darker one in front */
.pk-m-ridge-back { fill: color-mix(in srgb, var(--inv-primary) 62%, var(--inv-deep)); }
.pk-m-ridge-shade { fill: #000; opacity: .16; }
.pk-m-ridge-front { fill: color-mix(in srgb, var(--inv-deep) 78%, #000); }
.pk-m-ridge-pine { color: color-mix(in srgb, var(--inv-deep) 82%, #000); }

/* ---------- 3. section tones & edges ---------- */

/* map: cream paper with faint contour lines and a warm glow */
.pk-tone--map {
    background:
        radial-gradient(70% 28% at 100% 0%, color-mix(in srgb, var(--inv-shine) 20%, transparent), transparent 75%),
        var(--inv-background);
}
/* sage: a soft wash of the pale sage */
.pk-tone--sage { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 85%, var(--inv-background)), var(--pk-sage)); }
.pk-tone--map::before, .pk-tone--sage::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .085;
    -webkit-mask: var(--pk-topo) center top / 260px 260px repeat; mask: var(--pk-topo) center top / 260px 260px repeat;
}

/* forest: the deep colour with a glow of the primary and a little mustard light */
.pk-tone--forest {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 12% 0%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(60% 30% at 100% 70%, color-mix(in srgb, var(--inv-shine) 10%, transparent), transparent 75%),
        var(--inv-deep);
}
.pk-tone--forest::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-soft); opacity: .06;
    -webkit-mask: var(--pk-topo) center top / 260px 260px repeat; mask: var(--pk-topo) center top / 260px 260px repeat;
}
.pk-tone--forest a:not(.inv-button) { color: var(--inv-shine); }
.pk-tone--forest .pk-arabic { color: var(--inv-shine); }

/* sun: a mustard band */
.pk-tone--sun {
    color: var(--inv-text);
    background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #fff 30%, transparent), transparent 75%), var(--inv-shine);
}
.pk-tone--sun::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-accent); opacity: .12;
    -webkit-mask: var(--pk-topo) center top / 260px 260px repeat; mask: var(--pk-topo) center top / 260px 260px repeat;
}

/* a forest section rising out of a light one: the light colour above a treeline */
.pk-tone--map + .pk-tone--forest { --pk-edge: var(--inv-background); }
.pk-tone--sage + .pk-tone--forest { --pk-edge: var(--pk-sage); }
.pk-tone--sun + .pk-tone--forest { --pk-edge: var(--inv-shine); }
:is(.pk-tone--map, .pk-tone--sage, .pk-tone--sun) + .pk-tone--forest::after {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2.1rem; pointer-events: none;
    background: var(--pk-edge);
    -webkit-mask: var(--pk-treeline) center top / 100% 100% no-repeat; mask: var(--pk-treeline) center top / 100% 100% no-repeat;
}
:is(.pk-tone--map, .pk-tone--sage, .pk-tone--sun) + .pk-tone--forest { padding-top: 5.2rem; }

/* a client photo behind a section, under a strong gradient of the section's own tone */
.pk-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.pk-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 45%; --inv-parallax: 40px; }
.pk-bgphoto::after { content: ''; position: absolute; inset: 0; }
.pk-tone--map .pk-bgphoto::after, .pk-tone--sage .pk-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-background) 90%, transparent),
        color-mix(in srgb, var(--inv-background) 78%, transparent) 45%,
        color-mix(in srgb, var(--inv-background) 96%, transparent));
}
.pk-tone--forest .pk-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) 86%, transparent),
            color-mix(in srgb, var(--inv-deep) 70%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 92%, transparent));
}

/* ---------- 4. shared pieces ---------- */

/* section heading: a rust label with a compass dot and a dotted trail, the rounded title, a coloured word */
.pk-heading { margin: 0 0 2rem; }
.pk-heading--left { text-align: left; }
.pk-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .5rem;
    font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent);
}
.pk-heading__eyebrow::before {
    content: ''; width: .8rem; height: .8rem; flex: none; border-radius: 50%;
    background: radial-gradient(circle, var(--inv-background) 0 1.6px, transparent 2.2px), conic-gradient(from 45deg, var(--inv-accent) 0 25%, var(--inv-shine) 0 50%, var(--inv-accent) 0 75%, var(--inv-shine) 0);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-accent) 35%, transparent);
}
.pk-heading__eyebrow::after { content: ''; width: 1.9rem; height: 4px; flex: none; color: var(--inv-accent); background: var(--pk-dots); opacity: .8; }
.pk-heading__title {
    margin: 0; font-family: var(--pk-display); font-size: 2.45rem; font-weight: 800; line-height: 1.02;
    letter-spacing: -.01em; color: var(--pk-title);
}
.pk-heading__title em { position: relative; display: inline-block; font-style: normal; color: var(--inv-accent); padding-bottom: .1em; }
.pk-heading__title em::after { content: ''; position: absolute; left: .08em; right: .08em; bottom: -.02em; height: 4px; color: var(--inv-shine); background: var(--pk-dots); }
.pk-tone--forest .pk-heading__eyebrow { color: var(--inv-shine); }
.pk-tone--forest .pk-heading__eyebrow::after { color: var(--inv-shine); }
.pk-tone--forest .pk-heading__title { color: #fff; }
.pk-tone--forest .pk-heading__title em { color: var(--inv-shine); }
.pk-tone--forest .pk-heading__title em::after { color: var(--inv-accent); }
.pk-tone--sun .pk-heading__eyebrow { color: var(--inv-deep); }
.pk-tone--sun .pk-heading__eyebrow::after { color: var(--inv-deep); }
.pk-tone--sun .pk-heading__title { color: var(--inv-deep); }
.pk-tone--sun .pk-heading__title em { color: var(--inv-accent); }
.pk-tone--sun .pk-heading__title em::after { color: var(--inv-deep); }

/* icons */
.pk-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* the stitched scout badge (sections/_badge): a rolled rust edge of fine radial stitches, a primary band
   with a dashed cream stitch line, the round photo; --b = diameter, --b-pos = crop */
.pk-badge {
    --b: 12rem; --b-pos: center 30%;
    position: relative; width: var(--b); height: var(--b); margin: 0; flex: none; padding: calc(var(--b) * .035); border-radius: 50%;
    background:
        radial-gradient(circle, transparent 62%, rgb(0 0 0 / .18) 70%, transparent 71%),
        repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--inv-accent) 82%, #fff) 0 1.6deg, color-mix(in srgb, var(--inv-accent) 82%, #3a1606) 1.6deg 3.2deg);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 60%, #3a1606), 0 22px 34px -18px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
.pk-badge__band {
    position: relative; width: 100%; height: 100%; padding: calc(var(--b) * .05); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 55%, color-mix(in srgb, var(--inv-primary) 70%, #000));
    box-shadow: inset 0 2px 3px rgb(0 0 0 / .3);
}
/* the dashed stitch line, sewn in the middle of the band */
.pk-badge__band::before {
    content: ''; position: absolute; inset: calc(var(--b) * .022); border-radius: 50%; pointer-events: none;
    border: 2px dashed color-mix(in srgb, var(--inv-background) 85%, transparent);
}
.pk-badge__window {
    position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
    background: var(--inv-soft); box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-shine) 90%, transparent);
}
.pk-badge__window::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 3px 10px rgb(0 0 0 / .22); }
.pk-badge__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--b-pos); }
.pk-badge__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 70%, #fff), var(--inv-background));
}
.pk-badge__land { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-badge__initial {
    position: relative; margin-top: -12%; font-family: var(--pk-display); font-weight: 800; line-height: 1;
    font-size: calc(var(--b) * .38); color: var(--inv-accent); text-shadow: 0 3px 0 #fff, 0 8px 16px rgb(0 0 0 / .15);
}
.pk-badge__initial--many { font-size: calc(var(--b) * .2); white-space: nowrap; }

/* animals (sections/_animal) */
.pk-animal { position: absolute; display: block; pointer-events: none; }
.pk-animal svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .18)); }

/* the dotted trail divider (sections/_trail) */
.pk-trail { display: block; width: min(100%, 18rem); height: auto; margin: 0 auto; overflow: visible; }
.pk-trail--flip { transform: scaleX(-1); }
.pk-trail__path { stroke: var(--inv-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 8; }
.pk-trail__pole { stroke: color-mix(in srgb, var(--inv-text) 70%, transparent); stroke-width: 2; stroke-linecap: round; }
.pk-trail__flag { fill: var(--inv-shine); }
.pk-trail__pin { fill: var(--inv-accent); }

/* a ridge at the foot of a forest section (sections/_scene "ridge") */
.pk-ridge { position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1; width: 100%; height: 5.5rem; pointer-events: none; }

/* ---------- 5. cover ---------- */
.pk-cover {
    --pk-d: min(66vw, 17rem, 35svh);
    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; isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(50% 30% at 82% 6%, color-mix(in srgb, var(--inv-shine) 40%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 75%, var(--inv-background)) 0%, var(--inv-background) 48%);
    transition: opacity .9s ease;
}
/* the landscape: grows to fill the screen; the art is anchored at its foot */
.pk-cover__scene {
    position: relative; isolation: isolate; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: 100%; max-width: 640px; min-height: calc(var(--pk-d) + 6.4rem); padding: 0 0 .45rem;
}
.pk-cover__back { position: absolute; left: 0; bottom: 1.6rem; z-index: -3; width: 100%; height: auto; }
.pk-cover__front { position: absolute; left: 0; bottom: -1px; z-index: -1; width: 100%; height: auto; }
.pk-cover__compass {
    position: absolute; z-index: -2; left: max(5%, calc(50% - 12.5rem)); top: 2.6rem; width: 3.3rem; height: 3.3rem;
    transform: rotate(-14deg); filter: drop-shadow(0 6px 8px rgb(0 0 0 / .18));
}
.pk-compass__needle { transform-origin: 50px 50px; transform-box: view-box; }

.pk-cover__title {
    position: relative; display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .32rem .85rem .34rem;
    border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; background: var(--inv-accent); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--inv-accent) 90%, #000);
}
.pk-cover__title::before, .pk-cover__title::after { content: ''; width: .32rem; height: .32rem; border-radius: 50%; background: var(--inv-shine); }

.pk-badge--cover { --b: var(--pk-d); --b-pos: center 6%; }

/* the fox and the bear peek over the forest hill beside the badge (their foot hides behind the hill) */
.pk-cover__fox, .pk-cover__bear { z-index: -2; }
.pk-cover__fox { width: calc(var(--pk-d) * .46); left: max(-.6rem, calc(50% - var(--pk-d) * .5 - var(--pk-d) * .36)); bottom: calc(min(100vw, 640px) * .1); }
.pk-cover__bear { width: calc(var(--pk-d) * .42); right: max(-.4rem, calc(50% - var(--pk-d) * .5 - var(--pk-d) * .33)); bottom: calc(min(100vw, 640px) * .085); }

.pk-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; padding: .4rem 1.4rem 1.5rem; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }
.pk-cover__label {
    margin: 0; font-size: .7rem; font-weight: 800; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent);
}
.pk-cover__name {
    margin: .1rem 0 0; max-width: 100%; font-family: var(--pk-display); font-size: 3.6rem; font-weight: 800; line-height: .98;
    letter-spacing: -.015em; color: var(--pk-title); overflow-wrap: anywhere; text-wrap: balance;
}
.pk-cover--many .pk-cover__name { font-size: 2.5rem; line-height: 1.05; }
.pk-cover__meta { display: flex; flex-direction: column; align-items: center; margin-top: .35rem; }
.pk-cover__date { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .94rem; font-weight: 700; color: var(--inv-deep); }
.pk-cover__tent { width: 1.9rem; height: auto; flex: none; }
.pk-cover__quote { max-width: 31ch; margin: .2rem 0 0; font-size: .88rem; font-style: italic; line-height: 1.45; color: var(--pk-muted); }
.pk-cover__guest {
    width: min(100%, 19rem); margin: .85rem 0 0; padding: .45rem 1rem .55rem; border-radius: 14px; background: var(--pk-paper);
    box-shadow: inset 0 0 0 4px var(--pk-paper), inset 0 0 0 5.5px color-mix(in srgb, var(--inv-primary) 40%, transparent), 0 10px 22px -16px color-mix(in srgb, var(--inv-deep) 60%, transparent);
    outline: 1.5px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent); outline-offset: -6px;
}
.pk-cover__guest p { margin: 0; font-size: .62rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }
.pk-cover__guest-name { display: block; font-family: var(--pk-display); font-size: 1.22rem; font-weight: 700; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.pk-cover__open {
    display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem; min-height: 3rem; padding: .7rem 1.6rem .7rem 1.8rem;
    font-family: var(--pk-display); font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 85%, #fff), var(--inv-accent) 60%); color: #fff;
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--inv-accent) 70%, #000), 0 14px 24px -12px color-mix(in srgb, var(--inv-accent) 90%, #000);
}
.pk-cover__arrow { width: 1.15rem; height: 1.15rem; }

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

/* ---------- 6. sections ---------- */

/* ridges: the wrapper is a revealed child of the section, laid at its foot */
.pk-ridge-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 5.5rem; pointer-events: none; }
.pk-ridge-wrap .pk-ridge { position: absolute; inset: auto 0 -1px; z-index: 1; height: 100%; }
.pk-ridge-wrap .pk-animal { z-index: 0; }

/* opening: the owl on its branch, a field-journal frame with a stitch line and a compass on top */
.pk-opening { padding: 5.2rem 1.5rem 8rem; }
.pk-opening__owl { position: absolute; z-index: 1; top: 1.2rem; right: -.6rem; width: 6.4rem; pointer-events: none; }
.pk-opening__owl .pk-animal { position: relative; width: 100%; }
.pk-opening__frame {
    position: relative; max-width: 21.5rem; margin: 0 auto; padding: 3rem 1.4rem 2.3rem; border-radius: 26px;
    background: color-mix(in srgb, var(--inv-deep) 50%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 55%, transparent), 0 24px 40px -26px rgb(0 0 0 / .7);
}
.pk-opening__frame::before {
    content: ''; position: absolute; inset: 7px; border-radius: 20px; pointer-events: none;
    border: 1.5px dashed color-mix(in srgb, var(--inv-background) 38%, transparent);
}
.pk-opening__compass { position: absolute; left: 50%; top: -2.1rem; width: 4.2rem; height: 4.2rem; margin-left: -2.1rem; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .35)); }
.pk-opening__basmalah { margin: 0 0 .6rem; font-size: 1.85rem; }
.pk-opening__greeting { margin: 0 auto .7rem; max-width: 20ch; font-family: var(--pk-display); font-size: 1.4rem; font-weight: 700; line-height: 1.25; color: #fff; }
.pk-opening__message { margin: 0 auto; max-width: 30ch; color: var(--pk-cream-muted); }

/* baby: badge + nickname, the full name, field notes, the trail sign; parents on a forest card */
.pk-babies { text-align: left; padding-bottom: 4.8rem; }
.pk-baby__trail { margin: 2.2rem auto 2rem; }
.pk-baby__intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.pk-baby__badge { position: relative; }
.pk-badge--baby { --b: min(10.5rem, 43vw); --b-pos: center 40%; }
.pk-baby--many .pk-badge--baby { --b: min(8.4rem, 36vw); }
.pk-baby__compass { position: absolute; right: -.5rem; bottom: .1rem; width: 2.9rem; height: 2.9rem; transform: rotate(18deg); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .25)); }
.pk-baby__nickname {
    margin: 0 0 .55rem; font-family: var(--pk-display); font-weight: 800; font-size: 3.5rem; line-height: .92;
    letter-spacing: -.02em; color: var(--pk-title); overflow-wrap: anywhere;
}
.pk-baby--many .pk-baby__nickname { font-size: 2.7rem; }
.pk-baby__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.pk-baby__chip {
    padding: .2rem .65rem; border-radius: 6px; font-size: .72rem; font-weight: 800; line-height: 1.4; letter-spacing: .04em;
    color: var(--inv-deep); background: var(--inv-soft);
}
.pk-baby__chip--accent { color: #fff; background: var(--inv-accent); }
.pk-baby__name {
    margin: 1.3rem 0 1.25rem; font-family: var(--pk-display); font-size: 1.55rem; font-weight: 700; line-height: 1.15;
    color: var(--inv-text); overflow-wrap: anywhere; text-wrap: balance;
}

/* field notes: ruled paper held by a strip of rust tape */
.pk-notes {
    position: relative; margin: 0 6px 0 0; padding: 1.15rem 1.1rem .4rem; border-radius: 6px 22px 6px 6px;
    background:
        repeating-linear-gradient(180deg, transparent 0 25px, color-mix(in srgb, var(--inv-primary) 12%, transparent) 25px 26px) 0 3.1rem / 100% calc(100% - 3.1rem) no-repeat,
        var(--pk-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent), 6px 7px 0 0 color-mix(in srgb, var(--inv-soft) 90%, var(--inv-primary)), var(--pk-drop);
    transform: rotate(-.6deg);
}
.pk-notes__tape {
    position: absolute; left: 1.4rem; top: -.7rem; width: 5.2rem; height: 1.4rem; transform: rotate(-4deg);
    background: color-mix(in srgb, var(--inv-accent) 72%, transparent);
    box-shadow: 0 2px 4px rgb(0 0 0 / .12);
}
.pk-notes__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .4rem; padding: .3rem 0 .55rem;
    border-bottom: 2px solid color-mix(in srgb, var(--inv-accent) 60%, transparent);
    font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent);
}
.pk-notes__no { font-family: var(--pk-display); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--pk-title); }
.pk-notes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.pk-notes__cell { min-width: 0; padding: .75rem .2rem .7rem; }
.pk-notes__cell:nth-child(odd) { padding-right: .8rem; border-right: 1.5px dashed var(--pk-line); }
.pk-notes__cell:nth-child(even) { padding-left: .9rem; }
.pk-notes__cell:nth-child(n+3) { border-top: 1.5px dashed var(--pk-line); }
.pk-notes__cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.pk-notes__cell dt { display: flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pk-muted); }
.pk-notes__cell dt .pk-icon { width: 1rem; height: 1rem; color: var(--inv-accent); }
.pk-notes__cell dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem; margin: .1rem 0 0; }
.pk-notes__num { font-family: var(--pk-display); font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; color: var(--inv-primary); }
.pk-baby--many .pk-notes__num { font-size: 2.3rem; }
.pk-notes__unit { font-size: .95rem; font-weight: 800; color: var(--inv-accent); }
.pk-notes__month { font-size: .76rem; font-weight: 700; line-height: 1.25; color: var(--inv-deep); }
.pk-notes__place { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: center; gap: .7rem; margin: 0 -.2rem; padding: .7rem 0 .85rem; border-top: 2px solid color-mix(in srgb, var(--inv-accent) 60%, transparent); }
.pk-notes__map { width: 100%; height: auto; overflow: visible; }
.pk-notes__map-path { stroke: var(--inv-primary); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .1 6; }
.pk-notes__place p { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--inv-text); }
.pk-notes__place small { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--pk-muted); }

/* the name meaning on a wooden trail sign: an arrow plank with wood grain and two nails */
.pk-sign {
    position: relative; margin: 1.8rem 0 0; padding: 1.05rem 2.8rem 1.15rem 1.2rem; color: #fff;
    clip-path: polygon(0 0, calc(100% - 1.8rem) 0, 100% 50%, calc(100% - 1.8rem) 100%, 0 100%);
    border-radius: 10px 0 0 10px;
    background:
        radial-gradient(circle at 1rem 1rem, #f5e2c4 0 2.4px, #6b3a1c 2.6px 3.4px, transparent 3.6px),
        radial-gradient(circle at 1rem calc(100% - 1rem), #f5e2c4 0 2.4px, #6b3a1c 2.6px 3.4px, transparent 3.6px),
        repeating-linear-gradient(176deg, transparent 0 9px, rgb(0 0 0 / .07) 9px 10px, transparent 10px 17px, rgb(255 255 255 / .06) 17px 18px),
        linear-gradient(180deg, color-mix(in srgb, var(--pk-wood) 80%, #fff), var(--pk-wood) 45%, color-mix(in srgb, var(--pk-wood) 80%, #000));
}
.pk-sign figcaption { padding-left: .9rem; font-size: .66rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.pk-sign blockquote { margin: .3rem 0 0; padding-left: .9rem; font-size: 1rem; font-weight: 600; line-height: 1.5; color: #fffaf0; }

/* parents: a forest card with the tent */
.pk-parents {
    position: relative; isolation: isolate; overflow: hidden; margin: 2.6rem 0 0; padding: 1.4rem 1.3rem 1.3rem; border-radius: 22px;
    color: var(--inv-background); background: linear-gradient(150deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--pk-drop);
}
.pk-parents::before {
    content: ''; position: absolute; inset: 6px; z-index: -1; border-radius: 17px; pointer-events: none;
    border: 1.5px dashed color-mix(in srgb, var(--inv-background) 30%, transparent);
}
.pk-parents__tent { position: absolute; z-index: -1; right: .9rem; top: .9rem; width: 4.6rem; height: auto; }
.pk-parents__label { margin: 0 0 .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.pk-parents__names { display: flex; flex-direction: column; margin: 0; padding-right: 4.5rem; font-family: var(--pk-display); font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.pk-parents__names .pk-amp { font-size: 1.15rem; color: var(--inv-shine); }
.pk-parents__address {
    display: flex; align-items: flex-start; gap: .5rem; margin: .95rem 0 0; padding-top: .85rem; font-size: .86rem; color: var(--pk-cream-muted);
    border-top: 1.5px dashed color-mix(in srgb, var(--inv-background) 30%, transparent);
}
.pk-parents__address .pk-icon { margin-top: .15rem; color: var(--inv-shine); }

/* message: no card; big words, a tab signature, a fawn over the ridge */
.pk-message { text-align: left; padding-bottom: 9rem; }
.pk-message__quote { position: relative; margin: 0; }
.pk-message__mark { display: block; width: 2.6rem; height: 2rem; margin: 0 0 .7rem; fill: var(--inv-shine); }
.pk-message__quote p { margin: 0; font-family: var(--pk-display); font-size: 1.45rem; font-weight: 600; line-height: 1.38; color: #fff; }
.pk-message__quote cite {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem; padding: .3rem .9rem .3rem .5rem; border-radius: 8px;
    font-style: normal; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: #fff; background: var(--inv-accent);
}
.pk-message__quote cite svg { width: 1.6rem; height: auto; }
.pk-message__deer { width: 5.6rem; right: 13%; bottom: 2.3rem; }

/* events: paper cards as trail stops; a round marker rising over the photo */
.pk-event__trail { margin: 1.6rem auto 1.4rem; }
.pk-event {
    position: relative; margin: 0 8px 0 0; padding: 0 0 1.3rem; border-radius: 22px; background: var(--pk-paper); text-align: left;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent), 8px 8px 0 0 color-mix(in srgb, var(--inv-soft) 90%, var(--inv-primary)), var(--pk-drop);
}
.pk-event--flip { margin: 0 0 0 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent), -8px 8px 0 0 color-mix(in srgb, var(--inv-accent) 40%, transparent), var(--pk-drop); }
.pk-event__media { padding: .55rem .55rem 0; }
.pk-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 55%; border-radius: 16px; }
.pk-event__top { display: flex; align-items: flex-end; gap: .9rem; padding: 1.1rem 1.15rem 0; }
.pk-event__media + .pk-event__top { margin-top: -3rem; }
.pk-event__media + .pk-event__top .pk-event__head { padding-top: 3.2rem; }
.pk-event--flip .pk-event__top { flex-direction: row-reverse; text-align: right; }
.pk-event__marker {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 5rem; height: 5rem; margin: 0;
    border-radius: 50%; color: var(--inv-deep);
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-shine) 60%, #fff), var(--inv-shine) 60%, color-mix(in srgb, var(--inv-shine) 80%, var(--inv-accent)));
    box-shadow: 0 0 0 4px var(--pk-paper), 0 0 0 5.5px color-mix(in srgb, var(--inv-shine) 70%, var(--inv-accent)), 0 14px 22px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.pk-event__marker::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--inv-deep) 35%, transparent); }
.pk-event__weekday { font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pk-event__day { font-family: var(--pk-display); font-size: 2.1rem; font-weight: 800; line-height: .95; }
.pk-event__month { font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pk-event--flip .pk-event__marker { color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-accent) 70%, #fff), var(--inv-accent) 60%, color-mix(in srgb, var(--inv-accent) 80%, #000)); box-shadow: 0 0 0 4px var(--pk-paper), 0 0 0 5.5px color-mix(in srgb, var(--inv-accent) 70%, #000), 0 14px 22px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.pk-event--flip .pk-event__marker::before { border-color: rgb(255 255 255 / .45); }
.pk-event__head { min-width: 0; padding-bottom: .2rem; }
.pk-event__stop { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-accent); }
.pk-event__name { margin: .05rem 0 0; font-family: var(--pk-display); font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--pk-title); }
.pk-event__full { margin: .15rem 0 0; font-size: .8rem; font-weight: 600; color: var(--pk-muted); }
.pk-event__rows { display: grid; gap: .75rem; margin: 1.1rem 1.15rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1.5px dashed var(--pk-line); }
.pk-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.pk-event__rows .pk-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-deep); background: var(--inv-soft); }
.pk-event__rows li > span { padding-top: .3rem; }
.pk-event__venue { display: block; font-weight: 700; }
.pk-event__address { display: block; font-size: .85rem; color: var(--pk-muted); }
.pk-event .inv-maps { margin: 1.15rem 1.15rem 0; text-align: center; }
.pk-event .inv-maps .inv-button { width: 100%; font-weight: 700; background: var(--inv-primary); color: #fff; }
.pk-event .inv-maps__frame { height: 190px; border-radius: 14px; }

/* countdown: round compass dials; the calendar on a paper card with a rust offset; a bear over the ridge */
.pk-countdown { padding-bottom: 8.6rem; }
.pk-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); }
.pk-countdown .inv-countdown__item {
    position: relative; display: grid; place-content: center; width: clamp(4.1rem, 19vw, 4.8rem); min-width: 0; aspect-ratio: 1; padding: 0;
    border-radius: 50%; color: var(--inv-text);
    background:
        radial-gradient(circle closest-side, var(--pk-paper) 0 76%, transparent 77%),
        repeating-conic-gradient(from -2deg, #5a3a24 0 4deg, transparent 4deg 30deg),
        radial-gradient(circle closest-side, var(--pk-paper) 0 86%, transparent 87%),
        linear-gradient(145deg, #ffe7a6, #e3a93a 45%, #9c6418);
    box-shadow: 0 16px 24px -12px rgb(0 0 0 / .6);
}
.pk-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--pk-display); font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--inv-primary); }
.pk-countdown .inv-countdown__label { margin-top: .05rem; font-size: .52rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-accent); }
.pk-countdown .inv-countdown__done { font-family: var(--pk-display); font-size: 1.35rem; color: var(--inv-shine); }
.pk-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.pk-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);
}
.pk-countdown .inv-countdown__actions .inv-button:first-child { color: #fff; background: var(--inv-accent); box-shadow: none; }
.pk-countdown .inv-cal {
    --inv-cal-bg: var(--pk-paper); --inv-cal-mark: var(--inv-accent);
    max-width: 19rem; margin: 2.6rem auto 0; border-radius: 18px; box-shadow: 9px 9px 0 0 var(--inv-accent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.pk-countdown .inv-cal__month { font-family: var(--pk-display); font-size: 1.5rem; font-weight: 800; color: var(--inv-primary); }
.pk-countdown__bear { width: 4.6rem; left: 12%; bottom: 2.6rem; }

/* prayer: an old trail-map page with fold creases, a faint compass rose and two pines */
.pk-prayer { padding-top: 4.6rem; padding-bottom: 5rem; }
.pk-prayer__panel {
    position: relative; isolation: isolate; overflow: hidden; max-width: 22rem; margin: 0 auto; padding: 2.4rem 1.4rem 2.6rem; border-radius: 8px;
    color: var(--inv-text);
    background:
        linear-gradient(90deg, transparent calc(50% - 1px), rgb(0 0 0 / .06) 50%, transparent calc(50% + 1px)),
        linear-gradient(180deg, transparent calc(33% - 1px), rgb(0 0 0 / .05) 33%, transparent calc(33% + 1px), transparent calc(66% - 1px), rgb(0 0 0 / .05) 66%, transparent calc(66% + 1px)),
        radial-gradient(120% 90% at 50% 40%, var(--pk-paper), color-mix(in srgb, var(--inv-shine) 14%, var(--pk-paper)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 16%, transparent), 10px 12px 0 0 color-mix(in srgb, var(--inv-primary) 85%, transparent), var(--pk-drop);
}
.pk-prayer__rose { position: absolute; z-index: -1; left: 50%; top: 50%; width: 19rem; height: 19rem; margin: -9.5rem 0 0 -9.5rem; color: var(--inv-primary); opacity: .13; transform: rotate(-12deg); }
.pk-prayer__eyebrow {
    display: inline-block; margin: 0 0 .9rem; padding: .28rem .85rem; border-radius: 6px; font-size: .68rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--inv-accent);
}
.pk-prayer__arabic { margin: 0 0 1rem; font-size: 1.6rem; }
.pk-prayer__text { margin: 0; }
.pk-prayer__text p { margin: 0; font-size: 1rem; font-weight: 500; font-style: italic; line-height: 1.6; }
.pk-prayer__text cite {
    display: inline-block; margin-top: 1rem; padding: .28rem .8rem; border-radius: 6px; font-style: normal; font-size: .72rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-shine);
}
.pk-prayer__pines { position: absolute; right: .4rem; bottom: -.2rem; width: 3.2rem; height: auto; opacity: .9; }

/* rundown: a dotted trail down the left with pennants; times on rust tags */
.pk-rundown { padding-bottom: 5rem; }
.pk-rundown__list { position: relative; margin: 0; padding: 0 0 0 2.2rem; list-style: none; text-align: left; }
.pk-rundown__list::before {
    content: ''; position: absolute; left: .55rem; top: .6rem; bottom: 1.4rem; width: 4px; transform-origin: top;
    background: radial-gradient(circle, var(--inv-shine) 1.8px, transparent 2.3px) center top / 4px 9px repeat-y;
}
.pk-rundown__item { position: relative; padding: 0 0 .85rem; }
.pk-rundown__item:last-child { padding-bottom: 0; }
.pk-rundown__flag { position: absolute; left: -1.9rem; top: .7rem; width: 1.5rem; height: 1.6rem; }
.pk-rundown__flag::before { content: ''; position: absolute; left: .35rem; top: 0; width: 2px; height: 100%; border-radius: 2px; background: var(--inv-background); }
.pk-rundown__flag::after { content: ''; position: absolute; left: calc(.35rem + 2px); top: .05rem; width: 1rem; height: .75rem; background: var(--inv-shine); clip-path: polygon(0 0, 100% 0, 72% 50%, 100% 100%, 0 100%); }
.pk-rundown__body {
    padding: .75rem 1rem .8rem; border-radius: 14px; background: color-mix(in srgb, var(--inv-background) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-background) 16%, transparent);
}
.pk-rundown__time {
    display: inline-block; margin-bottom: .3rem; padding: .12rem .5rem; border-radius: 5px; font-size: .8rem; font-weight: 800;
    font-variant-numeric: tabular-nums; color: #fff; background: var(--inv-accent);
}
.pk-rundown__body h3 { margin: 0; font-family: var(--pk-display); font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: #fff; }
.pk-rundown__body p { margin: .1rem 0 0; font-size: .86rem; color: var(--pk-cream-muted); }
.pk-rundown__tent { display: block; width: 4.4rem; height: auto; margin: .6rem 0 0 -.4rem; }

/* story: badges beside the text, zigzag, joined by curved dotted trails */
.pk-story__list { display: grid; gap: 3.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.pk-story__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; }
.pk-story__item--flip { grid-template-columns: minmax(0, 1fr) auto; }
.pk-story__item--flip > .pk-badge, .pk-story__item--flip > .pk-story__dot { order: 2; }
.pk-story__item + .pk-story__item::before {
    content: ''; position: absolute; left: 22%; right: 22%; top: -3.1rem; height: 2.8rem; background: var(--inv-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 4C60 4 140 36 196 36' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-dasharray='.1 9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 4C60 4 140 36 196 36' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-dasharray='.1 9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.pk-story__item--flip::before { transform: scaleX(-1); }
.pk-badge--story { --b: min(8.6rem, 36vw); --b-pos: center 40%; }
.pk-story__when {
    display: inline-block; padding: .18rem .6rem; border-radius: 5px; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--inv-accent);
}
.pk-story__body h3 { margin: .45rem 0 0; font-family: var(--pk-display); font-size: 1.32rem; font-weight: 800; line-height: 1.15; color: var(--pk-title); }
.pk-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--pk-muted); }
.pk-story__item--text { grid-template-columns: 3.4rem minmax(0, 1fr); padding: 1rem 1.1rem; border-radius: 18px; background: var(--pk-paper); box-shadow: 0 0 0 1px var(--pk-line); }
.pk-story__item--text.pk-story__item--flip { grid-template-columns: minmax(0, 1fr) 3.4rem; }
.pk-story__dot {
    display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; font-family: var(--pk-display); font-size: 1.5rem; font-weight: 800;
    color: var(--inv-deep); background: var(--inv-shine); box-shadow: 0 0 0 3px var(--pk-paper), 0 0 0 4.5px color-mix(in srgb, var(--inv-shine) 70%, var(--inv-accent));
}

/* gallery: photos sewn on like patches (a dashed cream stitch inside the edge) */
.pk-gallery .inv-gallery { gap: .65rem; }
.pk-gallery .inv-gallery__item { position: relative; border-radius: 16px; box-shadow: 0 16px 28px -18px rgb(0 0 0 / .7); }
.pk-gallery .inv-gallery__item::after { content: ''; position: absolute; inset: 5px; border-radius: 12px; border: 1.5px dashed rgb(255 255 255 / .7); pointer-events: none; }
.pk-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; border-radius: 999px 999px 18px 18px; box-shadow: 0 0 0 3px var(--inv-shine), 0 16px 28px -18px rgb(0 0 0 / .7); }
.pk-gallery .inv-gallery__item:first-child::after { border-radius: 999px 999px 14px 14px; }

/* live streaming: a forest card with rounded ends and a rust offset */
.pk-stream__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.35rem 1.35rem 1.4rem;
    border-radius: 28px; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 9px 9px 0 0 var(--inv-accent), var(--pk-drop);
}
.pk-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-deep); background: var(--inv-shine); }
.pk-stream__icon .pk-icon { width: 1.7rem; height: 1.7rem; }
.pk-stream__title { margin: 0 0 .15rem; font-family: var(--pk-display); font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: #fff; }
.pk-stream__text p { margin: 0; font-size: .86rem; color: var(--pk-cream-muted); }
.pk-stream__text .pk-stream__note { margin-top: .3rem; font-weight: 700; color: var(--inv-shine); }
.pk-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: #fff !important; background: var(--inv-accent) !important; font-weight: 700; }

/* RSVP: a cream card with a stitched edge and a rust offset */
.pk-rsvp { padding-bottom: 5rem; }
.pk-rsvp__card {
    position: relative; margin-right: 9px; padding: 1.8rem 1.15rem 1.4rem; border-radius: 20px; color: var(--inv-text); background: var(--pk-paper);
    box-shadow: 9px 9px 0 0 var(--inv-accent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.pk-rsvp__card::before { content: ''; position: absolute; inset: 7px; border-radius: 14px; border: 1.5px dashed var(--pk-line); pointer-events: none; }
.pk-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--pk-muted); }
.pk-rsvp__sent { margin-bottom: 1rem; }
.pk-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.pk-rsvp__check circle { fill: var(--inv-primary); }
.pk-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .pk-rsvp__sent .pk-rsvp__check { animation: pk-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .pk-rsvp__sent .pk-rsvp__check path { animation: pk-draw .45s ease-out .35s both; }
.pk-rsvp__thanks { margin: 0; font-family: var(--pk-display); font-size: 1.6rem; font-weight: 800; color: var(--inv-primary); }
.pk-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--pk-muted); }
.pk-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--inv-accent); }

/* gift: cream luggage tags (rust top with a punched hole), two per row */
.pk-gift__intro { color: var(--pk-cream-muted); }
.pk-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.pk-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pk-gift .inv-gift__account,
.pk-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 2.1rem .75rem 1rem; border-radius: 10px 10px 16px 16px; color: var(--inv-text); background: var(--pk-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .6);
}
.pk-gift .inv-gift__account:not(.inv-gift__address)::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.3rem;
    background: radial-gradient(circle, var(--inv-deep) 0 4px, color-mix(in srgb, var(--inv-shine) 85%, #fff) 4.5px 6px, transparent 6.5px) center / 1.3rem 1.3rem no-repeat, var(--inv-accent);
}
.pk-gift .inv-gift__account p, .pk-gift .inv-gift__address p { margin: 0; }
.pk-gift .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--inv-primary); }
.pk-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.pk-gift .inv-gift__logo img { max-width: 5rem; }
.pk-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);
}
.pk-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pk-muted); overflow-wrap: anywhere; }
.pk-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 700; background: var(--inv-primary); color: #fff; }
.pk-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.2rem; font-size: .875rem; border-radius: 16px; box-shadow: 8px 8px 0 0 var(--inv-accent); }
.pk-gift .inv-gift__address::before { content: ''; position: absolute; inset: 6px; border-radius: 11px; border: 1.5px dashed var(--pk-line); pointer-events: none; }
.pk-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* wishlist: a packing list on ruled paper with drawn checkboxes */
.pk-wishlist__intro { color: var(--pk-muted); font-size: .92rem; }
.pk-wishlist__list {
    display: grid; margin: 1.3rem 4px 0 0; padding: .4rem 1.1rem; list-style: none; text-align: left; border-radius: 6px 18px 6px 6px;
    background: var(--pk-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 14%, transparent), 6px 7px 0 0 color-mix(in srgb, var(--inv-soft) 90%, var(--inv-primary)), var(--pk-drop);
}
.pk-wishlist__item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: start; gap: .8rem; padding: .85rem 0; border-bottom: 1.5px dashed var(--pk-line); }
.pk-wishlist__item:last-child { border-bottom: 0; }
.pk-wishlist__number {
    position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 7px; border: 2px solid var(--inv-primary);
    font-family: var(--pk-display); font-size: 1.05rem; font-weight: 800; color: var(--inv-primary); transform: rotate(-3deg);
}
.pk-wishlist__item:nth-child(even) .pk-wishlist__number { border-color: var(--inv-accent); color: var(--inv-accent); transform: rotate(2deg); }
.pk-wishlist__photo { display: block; width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px var(--pk-paper), 0 0 0 3.5px var(--inv-accent); }
.pk-wishlist__text p { margin: 0; }
.pk-wishlist__name { padding-top: .05rem; font-family: var(--pk-display); font-size: 1.12rem; font-weight: 700; line-height: 1.3; color: var(--pk-title); overflow-wrap: anywhere; }
.pk-wishlist__note { margin-top: .05rem !important; font-size: .86rem; color: var(--pk-muted); }
.pk-wishlist__shop { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; margin-top: .2rem; font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--inv-accent); }
.pk-wishlist__shop .pk-icon { width: 1rem; height: 1rem; }

/* co-hosts: names on the mustard band, split by small pines */
.pk-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.pk-cohosts__list li { max-width: 26ch; font-family: var(--pk-display); font-size: 1.2rem; font-weight: 700; line-height: 1.3; color: var(--inv-deep); }
.pk-cohosts__list li + li::before {
    content: ''; display: block; width: .8rem; height: 1.1rem; margin: 0 auto .6rem; background: var(--inv-primary);
    clip-path: polygon(50% 0, 78% 45%, 64% 45%, 92% 88%, 56% 88%, 56% 100%, 44% 100%, 44% 88%, 8% 88%, 36% 45%, 22% 45%);
}

/* contacts: paper rows with a stitched forest initial and a WhatsApp button */
.pk-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.pk-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem .65rem; border-radius: 999px;
    background: var(--pk-paper); text-align: left; box-shadow: 0 0 0 1px var(--pk-line), 5px 5px 0 0 color-mix(in srgb, var(--inv-soft) 90%, var(--inv-primary));
}
.pk-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
    font-family: var(--pk-display); font-size: 1.35rem; font-weight: 800; color: #fff; background: var(--inv-primary);
    outline: 1.5px dashed rgb(255 255 255 / .7); outline-offset: -5px; box-shadow: 0 0 0 2px var(--inv-accent);
}
.pk-contact p { margin: 0; }
.pk-contact__name { font-weight: 700; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.pk-contact__role { font-size: .78rem; color: var(--pk-muted); }
.pk-contact__phone { font-size: .85rem; }
.pk-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 700; background: var(--inv-accent); color: #fff; }
.pk-contact__button .pk-icon { width: 1.05rem; height: 1.05rem; }

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

/* vendors: a paper card of rows split by dotted lines */
.pk-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 18px; background: var(--pk-paper); box-shadow: 0 0 0 1px var(--pk-line), var(--pk-drop); }
.pk-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1.5px dashed var(--pk-line); }
.pk-vendor:last-child { border-bottom: 0; }
.pk-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.pk-vendor__role { font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-accent); }
.pk-vendor__name { font-family: var(--pk-display); font-size: 1.12rem; font-weight: 700; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.pk-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; text-decoration: none; background: var(--inv-soft); color: var(--inv-deep);
}
.pk-vendor__link .pk-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the forest behind a ridge with three animals; thanks; the pennant */
.pk-closing { padding: 0 1.5rem 2.8rem !important; }
.pk-closing::after { z-index: 3; }
.pk-closing__photo { position: relative; z-index: -1; height: min(118vw, 34rem); margin: 0 -1.5rem; overflow: hidden; }
.pk-closing:not(.pk-closing--photo) .pk-closing__photo { height: 13rem; }
.pk-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 30%; --inv-parallax: 30px; }
.pk-closing__photo::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 20%, transparent) 0%, transparent 22%, transparent 45%, color-mix(in srgb, var(--inv-deep) 60%, transparent) 72%, var(--inv-deep) 96%);
}
.pk-closing__land { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 7rem; }
.pk-closing__ridge { position: absolute; inset: auto 0 -1px; z-index: 1; width: 100%; height: 6rem; }
.pk-closing__ridge .pk-m-ridge-back { fill: color-mix(in srgb, var(--inv-primary) 55%, var(--inv-deep)); }
.pk-closing__ridge .pk-m-ridge-front { fill: var(--inv-deep); }
.pk-closing__ridge .pk-m-ridge-pine { color: var(--inv-deep); }
.pk-closing .pk-animal { z-index: 0; }
.pk-closing__fox { width: 4.8rem; left: 8%; bottom: 2.2rem; }
.pk-closing__deer { width: 4.6rem; left: calc(50% - 2.3rem); bottom: 3.4rem; }
.pk-closing__bear { width: 4.5rem; right: 8%; bottom: 3rem; }
.pk-closing__body { position: relative; margin-top: 1.4rem; }
.pk-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.pk-closing__title { margin: 0 0 1rem; font-family: var(--pk-display); font-size: 3.1rem; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: #fff; }
.pk-closing__title em { font-style: normal; color: var(--inv-shine); }
.pk-closing__message { margin: 0 auto; max-width: 30ch; color: var(--pk-cream-muted); }
.pk-closing__salam { margin: 1.1rem auto 0; max-width: 24ch; font-family: var(--pk-display); font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: var(--inv-shine); }
.pk-closing__signature { margin: 1rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--pk-cream-muted); }
.pk-closing__banner { position: relative; display: flex; justify-content: center; margin: 2.2rem auto 0; padding-top: .6rem; }
.pk-closing__banner p {
    position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: .55rem 2.6rem .6rem;
    color: #fff; background: var(--inv-accent);
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.1rem) 50%, 100% 100%, 0 100%, 1.1rem 50%);
}
.pk-closing__banner p::before { content: ''; position: absolute; inset: 5px 1.4rem; border-top: 1.5px dashed rgb(255 255 255 / .55); border-bottom: 1.5px dashed rgb(255 255 255 / .55); pointer-events: none; }
.pk-closing__banner small { font-size: .6rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.pk-closing__banner span { font-family: var(--pk-display); font-size: 1.9rem; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.pk-closing__compass { position: absolute; left: calc(50% - 1.3rem); top: -1.7rem; z-index: 1; width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }

/* ---------- 7. forms (shared RSVP + wishes, restyled) ---------- */
.pk-main .inv-form { gap: 1rem; text-align: left; }
.pk-main .inv-form label, .pk-main .inv-form__choices legend { font-size: .82rem; font-weight: 700; color: var(--inv-text); }
.pk-main .inv-form input:not([type=radio]):not([type=checkbox]),
.pk-main .inv-form select,
.pk-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 12px;
    font: 400 .95rem/1.4 var(--pk-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;
}
.pk-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;
}
.pk-main .inv-form input:not([type=radio]):focus-visible,
.pk-main .inv-form select:focus-visible,
.pk-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-shine) 45%, transparent);
}
.pk-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 700; color: #fff; background: var(--inv-accent); box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-accent) 80%, transparent); }
.pk-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.pk-main .inv-form__notice { text-align: center; }

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.pk-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.pk-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.pk-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: 14px; 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;
}
.pk-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pk-rsvp .inv-form__choices label::before {
    content: ''; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none; background: var(--inv-soft);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease;
}
.pk-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(--pk-choice-icon) center / contain no-repeat; mask: var(--pk-choice-icon) center / contain no-repeat;
}
.pk-rsvp .inv-form__choices label:nth-of-type(1) {
    --pk-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");
}
.pk-rsvp .inv-form__choices label:nth-of-type(2) {
    --pk-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");
}
.pk-rsvp .inv-form__choices label:nth-of-type(3) {
    --pk-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");
}
.pk-rsvp .inv-form__choices label:has(input:checked) {
    color: #fff; background: var(--inv-primary); transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--inv-shine), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.pk-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.pk-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.pk-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

/* wishes: the form on a paper card with a forest offset, the wishes in a scroll box of about three */
.pk-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.pk-wishes .inv-form {
    position: relative; margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 18px; background: var(--pk-paper);
    box-shadow: 8px 8px 0 0 var(--inv-primary);
}
.pk-wishes .inv-wishes__list { margin-top: 1.4rem; }
.pk-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .55rem; border-radius: 16px; background: color-mix(in srgb, #fff 40%, transparent); box-shadow: inset 0 0 0 1px var(--pk-line);
}
.pk-wishes .inv-wish { padding: .75rem .9rem; border-radius: 12px; background: var(--pk-paper); text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 4px solid var(--inv-accent); }
.pk-wishes .inv-wish__name { font-weight: 700; color: var(--inv-primary); }
.pk-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.pk-wishes .inv-wish__time { font-size: .72rem; color: var(--pk-muted); }

/* ---------- 8. shared components ---------- */
.pk-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--pk-paper) 95%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 74%, transparent);
    --inv-nav-active: var(--inv-accent);
    font-family: var(--pk-sans);
}

/* ---------- 9. screen sizes ---------- */

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .pk-cover { --pk-d: min(56vw, 15rem, 32svh); }
    .pk-cover__name { font-size: 3.2rem; }
    .pk-cover__guest { margin-top: .7rem; }
    .pk-cover__open { margin-top: .75rem; }
}
@media (max-height: 660px) {
    .pk-cover { --pk-d: min(50vw, 30svh); }
    .pk-cover__scene { min-height: calc(var(--pk-d) + 5.6rem); }
    .pk-cover__compass { width: 2.8rem; height: 2.8rem; top: 2.3rem; }
    .pk-cover__title { font-size: .62rem; }
    .pk-cover__label { font-size: .64rem; }
    .pk-cover__name { font-size: 2.8rem; }
    .pk-cover--many .pk-cover__name { font-size: 2.1rem; }
    .pk-cover__date { font-size: .86rem; }
    .pk-cover__quote { font-size: .8rem; line-height: 1.35; }
    .pk-cover__guest { padding: .4rem .85rem .5rem; }
    .pk-cover__guest-name { font-size: 1.1rem; }
    .pk-cover__open { min-height: 2.75rem; padding: .55rem 1.4rem .55rem 1.6rem; font-size: 1rem; }
    .pk-cover__text { padding-bottom: 1.1rem; }
}
/* very short screens (in-app browsers): a smaller badge and quote, so everything fits */
@media (max-height: 600px) {
    .pk-cover { --pk-d: min(46vw, 29svh); }
    .pk-cover__scene { min-height: calc(var(--pk-d) + 5rem); }
    .pk-cover__name { font-size: 2.5rem; }
    .pk-cover__quote { font-size: .78rem; line-height: 1.3; }
    .pk-cover__guest { margin-top: .55rem; }
    .pk-cover__open { margin-top: .6rem; }
}

/* wide screens: the phone-width column on a forest backdrop */
@media (min-width: 560px) {
    body.pk-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.pk-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .07; background: var(--inv-soft);
        -webkit-mask: var(--pk-topo) center / 260px 260px repeat; mask: var(--pk-topo) center / 260px 260px repeat;
    }
    .pk-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
    .pk-cover__back, .pk-cover__front { -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}

/* ---------- 10. motion ---------- */
@keyframes pk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pk-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes pk-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pk-sunrise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pk-pop { 0% { opacity: 0; transform: scale(.82) translateY(14px); } 70% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes pk-zoom-out { from { transform: scale(1.1); } to { transform: scale(1); } }
@keyframes pk-peek { from { transform: translateY(58%); } to { transform: none; } }
@keyframes pk-needle { 0% { transform: rotate(-70deg); } 45% { transform: rotate(28deg); } 70% { transform: rotate(-10deg); } 88% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes pk-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the ranges rise one after another and the sun comes up (0–1.2 s), the badge pops
   in (.3–1.1 s), the fox and the bear peek over the hill (.9–1.85 s), the compass needle swings and
   settles (.6–2.2 s); the text follows through its inv-enter delays */
html.inv-anim .pk-cover__back .pk-scene__far { animation: pk-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .pk-cover__back .pk-scene__mid, html.inv-anim .pk-cover__back .pk-scene__pines { animation: pk-rise .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
html.inv-anim .pk-cover__back .pk-scene__sun { animation: pk-sunrise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .pk-badge--cover { animation: pk-pop .8s cubic-bezier(.3, .8, .3, 1) .3s both; }
html.inv-anim .pk-badge--cover .pk-badge__photo { animation: pk-zoom-out 1.2s cubic-bezier(.2, .7, .2, 1) .3s both; }
html.inv-anim .pk-cover .pk-peek { animation: pk-peek .8s cubic-bezier(.3, .9, .3, 1.15) .9s both; }
html.inv-anim .pk-cover .pk-cover__bear .pk-peek { animation-delay: 1.05s; }
html.inv-anim .pk-cover__compass .pk-compass__needle { animation: pk-needle 1.6s ease-out .6s both; }

/* section animals peek up once when their ridge is revealed */
html.inv-anim .pk-main .pk-peek { transform: translateY(58%); transition: transform .9s cubic-bezier(.3, .9, .3, 1.15) .35s; }
html.inv-anim .pk-main .is-revealed .pk-peek { transform: none; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .pk-rundown__list::before { animation: pk-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
}

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