/*
 * Template "Domba Mungil" (Aqiqah & Kelahiran): the aqiqah lamb as a sweet, fluffy character in a fresh
 * morning meadow. Creamy wool white + a fresh grass green as the deep colour + butter yellow + a soft sky.
 * Signature pieces: the round wool frame with the peeking lamb (sections/_woolframe), the wooden farm
 * nameplate with the birth data (sections/baby), the sleeping lamb on the prayer panel, the stepping
 * stones of the rundown, the gift bales of the wishlist; rolling hills, a picket fence, a red barn,
 * daisies and fluffy clouds (all original inline SVG, shared gradients in sections/_defs).
 * Mobile-first, one column (~460px) on a deep meadow backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (grass green / sky blue / terracotta / lavender: titles, buttons, ribbons)
 *   --inv-accent (butter yellow: pills, the open button, badges; text on it = --inv-text)
 *   --inv-background (creamy wool white)   --inv-text   --inv-deep (dark meadow bands)
 *   --inv-sky (soft sky)   --inv-soft (pale meadow tint)   --inv-grass (the hills)
 * The wood of the nameplate, the barn red and the wool are fixed natural colours.
 *
 * Section tones (set on each section in its partial): .dm-tone--light (cream), --meadow (soft tint),
 * --sky (soft sky), --deep (the dark band colour), --sun (a butter band). Light and deep alternate.
 * Edges: .dm-edge--hills (a rolling-hill top edge, for deep sections) and .dm-edge--cloud (a row of
 * fluffy puffs, for light sections) rise over the section above: the section moves up by --dm-edge,
 * paints its background from there (::before) and draws the edge shape in its top colour (::after).
 *
 * 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 tones, edges & photo backgrounds · 3 shared pieces (heading, wool frame, lamb,
 *           meadow) · 4 cover · 5 sections in page order · 6 forms · 7 shared components ·
 *           8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Padang Hijau" variant (the variant's colours override these) */
    --inv-primary: #3f7a36;
    --inv-accent: #f5c13d;
    --inv-background: #fbf7ec;
    --inv-text: #1c2a19;
    --inv-deep: #244a26;
    --inv-sky: #a8d5ef;
    --inv-soft: #e1eed2;
    --inv-grass: #6fae4b;
    --inv-radius: 18px;

    --dm-display: 'Young Serif', Georgia, 'Times New Roman', serif;
    --dm-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dm-col: 460px;
    --dm-edge: 34px;
    --dm-paper: color-mix(in srgb, #fff 72%, var(--inv-background));
    --dm-title: color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep));
    --dm-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --dm-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --dm-ring: color-mix(in srgb, var(--inv-primary) 20%, transparent);
    --dm-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);
    --dm-deep-top: color-mix(in srgb, var(--inv-primary) 52%, var(--inv-deep));
    --dm-sky-top: color-mix(in srgb, var(--inv-sky) 60%, #fff);
    --dm-wood: repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 11px, rgb(90 45 15 / .07) 11px 13px, transparent 13px 27px),
        linear-gradient(180deg, #cc9159, #b97a42 55%, #a86b36);

    /* edge shapes (masks): rolling hills, and a tile of two fluffy puffs */
    --dm-hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V26C42 8 104 2 166 14s124 26 180 12c22-6 40-8 54-6V40Z'/%3E%3C/svg%3E");
    --dm-puffs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 34'%3E%3Cpath d='M0 34V24a21 21 0 0 1 38-9 22 22 0 0 1 42 9v10Z'/%3E%3C/svg%3E");
    /* a wool puff: a disc with fourteen soft bumps (mask) */
    --dm-puff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='90' cy='50' r='9.6'/%3E%3Ccircle cx='86' cy='67.4' r='9.6'/%3E%3Ccircle cx='74.9' cy='81.3' r='9.6'/%3E%3Ccircle cx='58.9' cy='89' r='9.6'/%3E%3Ccircle cx='41.1' cy='89' r='9.6'/%3E%3Ccircle cx='25.1' cy='81.3' r='9.6'/%3E%3Ccircle cx='14' cy='67.4' r='9.6'/%3E%3Ccircle cx='10' cy='50' r='9.6'/%3E%3Ccircle cx='14' cy='32.6' r='9.6'/%3E%3Ccircle cx='25.1' cy='18.7' r='9.6'/%3E%3Ccircle cx='41.1' cy='11' r='9.6'/%3E%3Ccircle cx='58.9' cy='11' r='9.6'/%3E%3Ccircle cx='74.9' cy='18.7' r='9.6'/%3E%3Ccircle cx='86' cy='32.6' r='9.6'/%3E%3C/svg%3E");
    /* a white picket fence (repeating tile) */
    --dm-fence: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 30'%3E%3Cg fill='%23fffaf1' stroke='%23d6c9b2' stroke-width='.7'%3E%3Crect x='-1' y='11' width='20' height='3.4'/%3E%3Crect x='-1' y='21' width='20' height='3.4'/%3E%3Cpath d='M5 30V6l4-5 4 5v24Z'/%3E%3C/g%3E%3C/svg%3E");
    /* a grass tuft (mask) */
    --dm-tuft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M2 20c3-6 6-10 10-12-2 4-3 8-3 12Zm8 0c1-8 4-14 9-18-2 6-3 12-2 18Zm9 0c2-6 6-11 12-13-4 4-6 8-6 13Zm9 0c2-4 5-7 10-8-3 3-5 5-5 8Z'/%3E%3C/svg%3E");
    /* the soft wavy thread under the accent word of a heading */
    --dm-thread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7c8-5 14-5 20 0s12 5 19 0 13-5 19 0 13 5 19 0 12-5 19 0' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");

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

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

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

.dm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.dm-section {
    --dm-pad: 4.25rem;
    position: relative; isolation: isolate; overflow: hidden; padding: var(--dm-pad) 1.4rem calc(var(--dm-pad) + .4rem); text-align: center;
}
.dm-section > p { margin: 0 auto 1rem; max-width: 34ch; }

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

/* ---------- 2. tones, edges & photo backgrounds ---------- */

/* every tone paints on ::before (so an edge can leave the strip above it free) */
.dm-section::before { content: ''; position: absolute; inset: 0; z-index: -3; pointer-events: none; background: var(--dm-bg); }

/* light: creamy wool white with a sky glow and a meadow glow */
.dm-tone--light {
    --dm-top: var(--inv-background);
    --dm-bg:
        radial-gradient(70% 26% at 100% 0%, color-mix(in srgb, var(--inv-sky) 30%, transparent), transparent 75%),
        radial-gradient(70% 30% at 0% 100%, color-mix(in srgb, var(--inv-soft) 80%, transparent), transparent 75%),
        var(--inv-background);
}
/* meadow: a fresh wash of the soft colour */
.dm-tone--meadow {
    --dm-top: var(--inv-soft);
    --dm-bg:
        radial-gradient(80% 30% at 50% 100%, color-mix(in srgb, #fff 40%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 55%, var(--inv-background)));
}
/* sky: a soft morning sky fading into cream */
.dm-tone--sky {
    --dm-top: var(--dm-sky-top);
    --dm-bg: linear-gradient(180deg, var(--dm-sky-top), color-mix(in srgb, var(--inv-sky) 22%, var(--inv-background)) 55%, var(--inv-background));
}
/* deep: the dark meadow band, lighter at the top, with a grass glow at the foot */
.dm-tone--deep {
    --dm-top: var(--dm-deep-top);
    color: var(--inv-background);
    --dm-bg:
        radial-gradient(70% 30% at 100% 100%, color-mix(in srgb, var(--inv-grass) 30%, transparent), transparent 75%),
        linear-gradient(180deg, var(--dm-deep-top), var(--inv-deep) 42%);
}
.dm-tone--deep a:not(.inv-button) { color: var(--inv-accent); }
.dm-tone--deep .dm-arabic { color: var(--inv-accent); }
/* sun: a full butter band */
.dm-tone--sun {
    --dm-top: var(--inv-accent);
    color: var(--inv-text);
    --dm-bg: radial-gradient(80% 60% at 50% 100%, color-mix(in srgb, #fff 32%, transparent), transparent 75%), var(--inv-accent);
}

/* edges: the section rises over the one above */
.dm-edge--hills, .dm-edge--cloud { margin-top: calc(-1 * var(--dm-edge)); padding-top: calc(var(--dm-pad) + var(--dm-edge)); }
.dm-edge--hills::before, .dm-edge--cloud::before { top: calc(var(--dm-edge) - 1px); }
.dm-edge--hills::after, .dm-edge--cloud::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--dm-edge); z-index: -3; pointer-events: none;
    background: var(--dm-top);
}
.dm-edge--hills::after { -webkit-mask: var(--dm-hills) center top / 100% 100% no-repeat; mask: var(--dm-hills) center top / 100% 100% no-repeat; }
.dm-edge--cloud::after { -webkit-mask: var(--dm-puffs) 12px top / 80px 100% repeat-x; mask: var(--dm-puffs) 12px top / 80px 100% repeat-x; }
.dm-main > .dm-section:first-child { margin-top: 0; padding-top: var(--dm-pad); }
.dm-main > .dm-section:first-child::before { top: 0; }
.dm-main > .dm-section:first-child::after { display: none; }

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

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

/* section heading: a daisy + letter-spaced eyebrow, a Young Serif title, the last word with a wavy thread */
.dm-heading { margin: 0 0 2rem; }
.dm-heading--left { text-align: left; }
.dm-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .65rem;
    font-size: .7rem; font-weight: 900; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary);
}
.dm-heading__daisy { width: 1.15rem; height: 1.15rem; flex: none; overflow: visible; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .18)); }
.dm-heading__title {
    margin: 0; font-family: var(--dm-display); font-size: 2.3rem; font-weight: 400; line-height: 1.12;
    letter-spacing: -.01em; color: var(--dm-title); text-wrap: balance;
}
.dm-heading__title em { position: relative; display: inline-block; font-style: normal; color: var(--inv-primary); }
.dm-heading__title em::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -.2em; height: .3em; z-index: -1;
    background: var(--inv-accent);
    -webkit-mask: var(--dm-thread) center / 100% 100% no-repeat; mask: var(--dm-thread) center / 100% 100% no-repeat;
}
.dm-tone--deep .dm-heading__eyebrow { color: var(--inv-accent); }
.dm-tone--deep .dm-heading__title { color: #fff; }
.dm-tone--deep .dm-heading__title em { color: var(--inv-accent); }
.dm-tone--deep .dm-heading__title em::after { background: color-mix(in srgb, var(--inv-background) 70%, transparent); }
.dm-tone--sun .dm-heading__eyebrow, .dm-tone--sun .dm-heading__title, .dm-tone--sun .dm-heading__title em { color: var(--inv-text); }
.dm-tone--sun .dm-heading__title em::after { background: #fff; }

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

/* the round wool frame (sections/_woolframe): --wf-w sets the size, --wf-pos the crop */
.dm-wool { --wf-w: 12rem; --wf-pos: center 30%; position: relative; width: var(--wf-w); aspect-ratio: 1; margin: 0; flex: none; }
.dm-wool__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dm-wool__shadow { filter: blur(6px); }
.dm-wool__line { stroke: var(--inv-accent); }
.dm-wool__curls { opacity: .7; }
.dm-wool__window {
    position: absolute; inset: 15%; z-index: 1; overflow: hidden; border-radius: 50%;
    background: var(--inv-primary); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5);
}
.dm-wool__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--wf-pos); }
.dm-wool__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background:
        radial-gradient(70% 45% at 50% 22%, color-mix(in srgb, var(--inv-sky) 70%, #fff), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 70%, #fff) 0 46%, var(--inv-grass) 46% 60%, var(--inv-deep));
}
.dm-wool__daisy { position: absolute; left: 18%; bottom: 13%; width: 20%; overflow: visible; }
.dm-wool__initial {
    position: relative; margin-top: 8%; font-family: var(--dm-display); line-height: 1;
    font-size: calc(var(--wf-w) * .32); color: #fff; text-shadow: 0 4px 14px rgb(0 0 0 / .3);
}
.dm-wool__initial--many { font-size: calc(var(--wf-w) * .17); white-space: nowrap; }

/* the lamb (sections/_lamb, _lambhead) */
.dm-lamb { display: block; overflow: visible; }
.dm-lamb__ribbon { stroke: var(--inv-primary); }
.dm-tone--deep .dm-lamb__ribbon, .dm-cover .dm-lamb__ribbon { stroke: var(--inv-accent); }

/* the meadow scene (sections/_meadow) */
.dm-meadow { display: block; }

/* the wooden nails of a nameplate */
.dm-plate__nail {
    width: .62rem; height: .62rem; flex: none; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0, #d3ccc0 38%, #6f675c 100%);
    box-shadow: 0 1px 1px rgb(60 30 10 / .5);
}

/* ---------- 4. cover ---------- */
.dm-cover {
    --wf-cover: min(72vw, 18.5rem, 41svh);
    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: 1.5rem 1.25rem 1.7rem;
    isolation: isolate; color: var(--inv-background);
    background: var(--inv-deep);
    transition: opacity .9s ease;
}
.dm-cover__cloud { position: absolute; z-index: 1; overflow: visible; filter: drop-shadow(0 6px 10px rgb(40 80 120 / .12)); pointer-events: none; }
.dm-cover__cloud--a { top: 4svh; left: -6%; width: min(32vw, 9.5rem); }
.dm-cover__cloud--b { top: 8.5svh; right: 3%; width: min(20vw, 5.6rem); opacity: .95; }
.dm-cover__cloud--c { top: 27svh; left: 7%; width: min(15vw, 4.2rem); opacity: .8; }
/* a soft morning sun behind the small cloud */
.dm-cover__sun {
    position: absolute; z-index: 1; top: 3svh; right: 9%; width: min(17vw, 4.6rem); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #fff6c4, var(--inv-accent) 62%, color-mix(in srgb, var(--inv-accent) 80%, #e08a00));
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--inv-accent) 22%, transparent), 0 0 0 26px color-mix(in srgb, var(--inv-accent) 10%, transparent);
}
.dm-cover__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 420px; min-height: calc(100svh - 3.2rem); text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.dm-cover__title {
    position: relative; z-index: 1; margin: 0; padding: .38rem 1rem; border-radius: 999px;
    font-size: .68rem; font-weight: 900; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase;
    color: var(--inv-deep); background: color-mix(in srgb, #fff 78%, transparent);
    box-shadow: 0 6px 14px -8px rgb(40 80 120 / .45);
}

/* the art: the sky (::before, reaching up to the top of the screen), the hills, the wool frame */
.dm-cover__art { position: relative; flex: 1 0 auto; display: flex; align-items: flex-end; justify-content: center; width: 100%; padding: 1.5rem 0 .4rem; }
.dm-cover__art::before {
    content: ''; position: absolute; z-index: -1; left: 50%; width: 100vw; top: -100svh; bottom: calc(var(--wf-cover) * .15); transform: translateX(-50%);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 85%, #fff) 70%, color-mix(in srgb, var(--inv-sky) 35%, #fff8e4) 98%);
}
.dm-cover__meadow {
    position: absolute; z-index: -1; left: 50%; bottom: -1px; width: 100vw; height: calc(var(--wf-cover) * .64); transform: translateX(-50%);
}
.dm-wool--cover { --wf-w: var(--wf-cover); --wf-pos: 50% 8%; }

.dm-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: .55rem; }
.dm-cover__name {
    margin: 0; max-width: 100%; font-family: var(--dm-display); font-weight: 400; font-size: 3.3rem; line-height: 1.05; letter-spacing: -.01em;
    color: #fff; overflow-wrap: anywhere; text-shadow: 0 3px 0 color-mix(in srgb, var(--inv-deep) 60%, #000);
}
.dm-cover--many .dm-cover__name { font-size: 2.3rem; }
.dm-cover__date { margin: .3rem 0 0; font-size: .95rem; font-weight: 800; letter-spacing: .02em; color: var(--inv-accent); }
.dm-cover__quote { max-width: 32ch; margin: .3rem 0 0; font-size: .9rem; font-style: italic; font-weight: 600; line-height: 1.45; color: var(--dm-cream-muted); }
.dm-cover__guest {
    width: min(100%, 19rem); margin: .85rem 0 0; padding: .5rem 1rem .6rem; border-radius: 18px; color: var(--inv-text); background: var(--dm-paper);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-grass) 55%, transparent), 0 12px 24px -14px rgb(0 0 0 / .6);
}
.dm-cover__guest p { margin: 0; font-size: .62rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary); }
.dm-cover__guest-name { display: block; font-family: var(--dm-display); font-size: 1.16rem; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
.dm-cover__open {
    margin-top: .95rem; min-height: 3rem; padding: .7rem 2rem; font-weight: 800; letter-spacing: .02em;
    background: var(--inv-accent); color: var(--inv-text);
    box-shadow: 0 4px 0 color-mix(in srgb, var(--inv-accent) 55%, #6b4a00), 0 16px 24px -12px rgb(0 0 0 / .6);
}

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

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

/* opening: a big cream cloud panel over the faint photo */
.dm-opening { padding-top: 5.2rem; padding-bottom: 4.8rem; }
.dm-opening__cloud {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 1.8rem 1.4rem 1.2rem;
    border-radius: 34px 34px 40px 40px; color: var(--inv-text); background: var(--dm-paper);
    box-shadow: 0 26px 40px -24px rgb(0 0 0 / .7);
}
/* the cloud's fluffy top: puffs of the same cream */
.dm-opening__cloud::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: -26px; height: 40px; z-index: -1;
    background:
        radial-gradient(circle at 18% 100%, var(--dm-paper) 0 26px, transparent 26.5px),
        radial-gradient(circle at 44% 100%, var(--dm-paper) 0 38px, transparent 38.5px),
        radial-gradient(circle at 72% 100%, var(--dm-paper) 0 31px, transparent 31.5px),
        radial-gradient(circle at 92% 100%, var(--dm-paper) 0 20px, transparent 20.5px);
}
.dm-opening__basmalah { margin: 0 0 .5rem; font-size: 1.85rem; color: var(--inv-primary) !important; }
.dm-opening__greeting { margin: 0 auto .7rem; max-width: 22ch; font-family: var(--dm-display); font-size: 1.32rem; line-height: 1.35; color: var(--dm-title); }
.dm-opening__message { margin: 0 auto; max-width: 30ch; font-size: .95rem; color: var(--dm-muted); }
.dm-opening__flowers { display: block; width: 5rem; height: 1.9rem; margin: .8rem auto 0; overflow: visible; }

/* baby: wool frame + name, the wooden nameplate, the name meaning; parents on a deep block */
.dm-babies { text-align: left; }
.dm-babies .dm-heading { text-align: center; }
.dm-baby + .dm-baby { position: relative; margin-top: 2.4rem; padding-top: 3.4rem; }
.dm-baby + .dm-baby::before {
    content: ''; position: absolute; left: -1.4rem; right: -1.4rem; top: 0; height: 1.9rem;
    background: var(--dm-fence) center bottom / auto 100% repeat-x;
}
.dm-baby__intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.dm-wool--baby { --wf-w: min(9.8rem, 40vw); --wf-pos: center 45%; }
.dm-baby--many .dm-wool--baby { --wf-w: min(8.2rem, 34vw); }
.dm-baby__label { margin: 0; font-size: .68rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.dm-baby__name {
    margin: .2rem 0 .7rem; font-family: var(--dm-display); font-weight: 400; font-size: 1.5rem; line-height: 1.2;
    color: var(--dm-title); overflow-wrap: anywhere; text-wrap: balance;
}
.dm-baby__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.dm-baby__chip { padding: .22rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 800; line-height: 1.4; color: var(--inv-deep); background: var(--inv-soft); }
.dm-baby__chip--accent { color: var(--inv-text); background: var(--inv-accent); }

/* the farm nameplate: a wooden board on two posts in the grass */
.dm-plate { position: relative; margin: 2rem 0 0; padding-bottom: 2.3rem; }
.dm-plate__board {
    position: relative; z-index: 1; padding: .55rem .55rem .65rem; border-radius: 18px; background: var(--dm-wood);
    box-shadow: inset 0 0 0 2px rgb(90 45 15 / .18), inset 0 2px 0 rgb(255 255 255 / .2), 0 20px 30px -18px rgb(70 35 10 / .75);
}
.dm-plate__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; padding: .3rem .45rem .6rem; }
.dm-plate__nick {
    display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center;
    font-family: var(--dm-display); font-size: 2.3rem; line-height: 1.05; color: #fff8e8; overflow-wrap: anywhere;
    text-shadow: 0 2px 0 rgb(90 45 15 / .45);
}
.dm-plate__nick small {
    margin-bottom: .2rem; font-family: var(--dm-sans); font-size: .62rem; font-weight: 900; letter-spacing: .26em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-accent) 70%, #fff); text-shadow: none;
}
.dm-plate__panel { overflow: hidden; border-radius: 12px; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgb(120 70 30 / .2), inset 0 3px 6px rgb(120 70 30 / .12); }
.dm-plate__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.dm-plate__cell { min-width: 0; padding: .85rem 1rem .9rem; border-bottom: 1.5px dashed var(--dm-ring); }
.dm-plate__cell:nth-child(odd) { border-right: 1.5px dashed var(--dm-ring); }
.dm-plate__cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.dm-plate__cell dt { font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--dm-muted); }
.dm-plate__cell dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem; margin: .15rem 0 0; }
.dm-plate__num { font-family: var(--dm-display); font-size: 2.35rem; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; color: var(--inv-primary); }
.dm-baby--many .dm-plate__num { font-size: 2rem; }
.dm-plate__unit { font-size: .95rem; font-weight: 800; color: var(--inv-deep); }
.dm-plate__month { font-size: .8rem; font-weight: 800; line-height: 1.25; color: var(--inv-deep); }
.dm-plate__place { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .75rem 1rem .85rem; font-size: .92rem; font-weight: 700; background: color-mix(in srgb, var(--inv-soft) 55%, #fff); }
.dm-plate__place .dm-icon { margin-top: .15rem; color: var(--inv-primary); }
.dm-plate__place small { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--dm-muted); }
.dm-plate__posts {
    position: absolute; z-index: 0; left: 15%; right: 15%; bottom: .8rem; height: 3rem;
    background:
        linear-gradient(90deg, #8f5a2c, #b97a42 40%, #9a6231) left bottom / 1.05rem 100% no-repeat,
        linear-gradient(90deg, #8f5a2c, #b97a42 40%, #9a6231) right bottom / 1.05rem 100% no-repeat;
}
.dm-plate__grass { position: absolute; z-index: 2; left: 4%; right: 4%; bottom: .2rem; width: 92%; height: 1.9rem; overflow: visible; }

/* the name meaning: a soft sky cloud panel with puffs on top */
.dm-meaning {
    position: relative; margin: 2rem 0 0; padding: 1.2rem 1.3rem 1.3rem; border-radius: 26px;
    background: color-mix(in srgb, var(--inv-sky) 42%, #fff);
}
.dm-meaning::before {
    content: ''; position: absolute; left: 1.2rem; right: 1.2rem; top: -15px; height: 18px;
    background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--inv-sky) 42%, #fff) 0 15px, transparent 15.5px) center bottom / 34px 18px repeat-x;
}
.dm-meaning::after {
    content: '\201C'; position: absolute; right: 1rem; top: -.4rem; font-family: var(--dm-display); font-size: 4.6rem; line-height: 1; color: var(--inv-accent);
    text-shadow: 0 2px 0 color-mix(in srgb, var(--inv-accent) 50%, #6b4a00);
}
.dm-meaning figcaption { font-size: .66rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary); }
.dm-meaning blockquote { margin: .4rem 2rem 0 0; font-family: var(--dm-display); font-size: 1.08rem; line-height: 1.55; color: var(--inv-text); }

/* parents: a deep block with the red barn in the corner */
.dm-parents {
    position: relative; isolation: isolate; overflow: hidden; margin: 2.6rem 0 0; padding: 1.4rem 1.4rem 1.35rem; border-radius: 26px;
    color: var(--inv-background); background: linear-gradient(150deg, var(--inv-primary), var(--inv-deep));
    box-shadow: var(--dm-drop);
}
.dm-parents::after {
    content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; bottom: -1.2rem; height: 3rem; border-radius: 50% 50% 0 0;
    background: color-mix(in srgb, var(--inv-grass) 45%, var(--inv-deep));
}
.dm-parents__barn { position: absolute; z-index: -1; right: 1rem; bottom: .9rem; width: 4.6rem; overflow: visible; opacity: .95; }
.dm-parents__label { margin: 0 0 .35rem; font-size: .66rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent); }
.dm-parents__names { display: flex; flex-direction: column; margin: 0; padding-right: 3.6rem; font-family: var(--dm-display); font-size: 1.36rem; line-height: 1.3; }
.dm-parents__names .dm-amp { font-size: 1.05rem; color: var(--inv-accent); }
.dm-parents__address {
    display: flex; align-items: flex-start; gap: .5rem; margin: .95rem 0 1.4rem; padding-top: .85rem; padding-right: 4.6rem; font-size: .86rem; color: var(--dm-cream-muted);
    border-top: 1px dashed color-mix(in srgb, var(--inv-background) 35%, transparent);
}
.dm-parents__address .dm-icon { margin-top: .15rem; color: var(--inv-accent); }

/* message: no card; clouds in the corner, large words, a wooden tag signature */
.dm-message { text-align: left; }
.dm-message__cloud { position: absolute; z-index: -1; overflow: visible; }
.dm-message__cloud--a { top: 3.1rem; right: -1.6rem; width: 7.4rem; }
.dm-message__cloud--b { top: 4.3rem; right: 5.4rem; width: 3.6rem; opacity: .85; }
.dm-message__quote { position: relative; margin: 0; }
.dm-message__mark { display: block; width: 2.5rem; height: 1.9rem; margin: 0 0 .7rem; fill: var(--inv-accent); }
.dm-message__quote p { margin: 0; font-family: var(--dm-display); font-size: 1.3rem; line-height: 1.55; color: #fff; }
.dm-message__quote cite { display: inline-block; margin-top: 1.5rem; font-style: normal; }
.dm-message__quote cite span {
    position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .42rem .95rem; border-radius: 8px;
    font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #fff8e8; background: var(--dm-wood);
    box-shadow: inset 0 0 0 1.5px rgb(90 45 15 / .2), 0 10px 18px -10px rgb(0 0 0 / .6); transform: rotate(-2deg);
}
.dm-message__quote cite span::before {
    content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d3ccc0 40%, #6f675c);
}

/* events: a white card, the arch photo window, a daisy date badge on its foot */
.dm-event + .dm-event { margin-top: 2.6rem; }
.dm-event__card {
    margin: 0 12px 0 0; padding: 0 0 1.3rem; border-radius: 30px; background: #fff; text-align: left;
    box-shadow: 0 0 0 1.5px var(--dm-ring), 12px 12px 0 0 color-mix(in srgb, var(--inv-grass) 45%, var(--inv-soft));
}
.dm-event--flip .dm-event__card { margin: 0 0 0 12px; box-shadow: 0 0 0 1.5px var(--dm-ring), -12px 12px 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.dm-event__media { padding: .6rem .6rem 0; }
.dm-event__photo { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 55%; border-radius: 50% 50% 22px 22px / 36% 36% 22px 22px; }
.dm-event__top { display: flex; align-items: flex-end; gap: .8rem; padding: 1.1rem 1.1rem 0; }
.dm-event__media + .dm-event__top { margin-top: -2.9rem; }
.dm-event__media + .dm-event__top .dm-event__head { padding-top: 3.2rem; }
.dm-event--flip .dm-event__top { flex-direction: row-reverse; text-align: right; }
.dm-event__date { position: relative; display: grid; place-items: center; flex: none; width: 5.4rem; height: 5.4rem; margin: 0; }
.dm-event__petals { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .22)); }
.dm-event__day {
    position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    font-family: var(--dm-display); font-size: 1.4rem; line-height: 1; color: var(--inv-text);
    background: radial-gradient(circle at 38% 32%, #fff2b0, var(--inv-accent) 55%, color-mix(in srgb, var(--inv-accent) 70%, #b06d00));
}
.dm-event__head { min-width: 0; padding-bottom: .35rem; }
.dm-event__name { margin: 0; font-family: var(--dm-display); font-weight: 400; font-size: 1.45rem; line-height: 1.15; color: var(--dm-title); }
.dm-event__full { margin: .2rem 0 0; font-size: .82rem; font-weight: 700; color: var(--dm-muted); }
.dm-event__rows { display: grid; gap: .75rem; margin: 1.1rem 1.1rem 0; padding: 1rem 0 0; list-style: none; font-size: .9rem; border-top: 1.5px dashed var(--dm-ring); }
.dm-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.dm-event__rows .dm-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-deep); background: var(--inv-soft); }
.dm-event__rows li > span { padding-top: .3rem; }
.dm-event__venue { display: block; font-weight: 800; }
.dm-event__address { display: block; font-size: .85rem; color: var(--dm-muted); }
.dm-event .inv-maps { margin: 1.15rem 1.1rem 0; text-align: center; }
.dm-event .inv-maps .inv-button { width: 100%; font-weight: 800; }
.dm-event .inv-maps__frame { height: 190px; border-radius: 18px; }

/* countdown: cream wool puffs with big numerals; the calendar card well below the buttons */
.dm-countdown .inv-countdown { gap: clamp(.4rem, 2.4vw, .8rem); }
.dm-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4.2rem, 19.5vw, 5rem); min-width: 0; aspect-ratio: 1; padding: 0;
    border-radius: 0; color: var(--inv-text);
    background: radial-gradient(circle at 36% 30%, #fff, #faf3e4 50%, #e6d9c2);
    -webkit-mask: var(--dm-puff) center / 100% 100% no-repeat; mask: var(--dm-puff) center / 100% 100% no-repeat;
}
.dm-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--dm-display); font-size: 1.6rem; line-height: 1.05; color: var(--inv-primary); }
.dm-countdown .inv-countdown__label { margin-top: .05rem; font-size: .55rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--dm-muted); }
.dm-countdown .inv-countdown__done { font-family: var(--dm-display); font-size: 1.3rem; color: var(--inv-accent); }
.dm-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.dm-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 800;
    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);
}
.dm-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-text); background: var(--inv-accent); box-shadow: none; }
.dm-countdown .inv-cal {
    --inv-cal-bg: var(--dm-paper); --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 26px; box-shadow: 10px 10px 0 0 var(--inv-accent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.dm-countdown .inv-cal__month { font-family: var(--dm-display); font-size: 1.4rem; color: var(--inv-primary); }

/* prayer: a white panel with the lamb asleep on its top edge */
.dm-prayer { padding-bottom: 4.8rem; }
.dm-prayer__panel {
    position: relative; max-width: 23rem; margin: 5.6rem auto 0; padding: 2.4rem 1.4rem 2.2rem; border-radius: 32px;
    color: var(--inv-text); background: #fff;
    box-shadow: 0 0 0 6px color-mix(in srgb, #fff 55%, transparent), 0 24px 40px -26px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.dm-prayer__sleep { position: absolute; left: 50%; top: -6.2rem; width: 12.5rem; transform: translateX(-50%); }
.dm-prayer__lamb { width: 100%; height: auto; }
.dm-prayer__moon { position: absolute; left: -2.2rem; top: -.2rem; width: 2.4rem; height: 2.4rem; overflow: visible; }
.dm-prayer__moon path { fill: var(--inv-accent); }
.dm-prayer__moon .dm-prayer__star { fill: var(--inv-primary); }
.dm-prayer__eyebrow {
    display: inline-block; margin: 0 0 .9rem; padding: .28rem .85rem; border-radius: 999px; font-size: .66rem; font-weight: 900;
    letter-spacing: .2em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-soft);
}
.dm-prayer__arabic { margin: 0 0 1rem; font-size: 1.6rem; }
.dm-prayer__text { margin: 0; }
.dm-prayer__text p { margin: 0; font-family: var(--dm-display); font-size: 1.05rem; line-height: 1.6; color: var(--inv-text); }
.dm-prayer__text cite {
    display: inline-block; margin-top: 1rem; padding: .28rem .8rem; border-radius: 10px; font-style: normal; font-size: .7rem; font-weight: 900;
    letter-spacing: .14em; text-transform: uppercase; color: var(--inv-text); background: var(--inv-accent);
}

/* rundown: stepping stones zigzagging across the meadow, a dotted path between them */
.dm-rundown__list { position: relative; margin: 0; padding: 0; list-style: none; text-align: left; }
.dm-step { position: relative; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: start; column-gap: .85rem; padding-bottom: 1.7rem; }
.dm-step:last-child { padding-bottom: 0; }
.dm-step--flip { grid-template-columns: minmax(0, 1fr) 5.2rem; }
.dm-step--flip .dm-step__stone { order: 2; }
.dm-step--flip .dm-step__body { text-align: right; }
.dm-step__path { position: absolute; z-index: 0; left: 2.6rem; right: 2.6rem; top: 2.1rem; width: calc(100% - 5.2rem); height: 100%; overflow: visible; }
.dm-step__path path { fill: none; stroke: var(--inv-accent); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .1 9; vector-effect: non-scaling-stroke; opacity: .85; }
.dm-step__stone {
    position: relative; z-index: 1; display: grid; place-items: center; width: 5.2rem; height: 4.2rem;
    border-radius: 52% 48% 46% 54% / 56% 52% 48% 44%;
    background: radial-gradient(circle at 38% 28%, #fbf6ec, #ddd2bf 55%, #b4a58b);
    box-shadow: inset 0 -5px 0 rgb(90 70 40 / .14), inset 0 2px 0 rgb(255 255 255 / .6), 0 12px 16px -8px rgb(0 0 0 / .6);
}
.dm-step--flip .dm-step__stone { border-radius: 46% 54% 52% 48% / 50% 56% 44% 50%; }
.dm-step__stone::after {
    content: ''; position: absolute; right: -.5rem; bottom: -.3rem; width: 2rem; height: 1rem; background: var(--inv-grass);
    -webkit-mask: var(--dm-tuft) center / contain no-repeat; mask: var(--dm-tuft) center / contain no-repeat;
}
.dm-step--flip .dm-step__stone::after { right: auto; left: -.5rem; transform: scaleX(-1); }
.dm-step__time { font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums; color: #3a3024; }
.dm-step__body {
    position: relative; z-index: 1; padding: .75rem 1rem .8rem; border-radius: 18px;
    background: color-mix(in srgb, var(--inv-deep) 88%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-background) 16%, transparent);
}
.dm-step__body h3 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.35; color: #fff; }
.dm-step__body p { margin: .15rem 0 0; font-size: .86rem; color: var(--dm-cream-muted); }

/* story: photos in fluffy wool frames beside the text, alternating; text-only chapters as meadow cards */
.dm-story__list { display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.dm-story__item { display: grid; grid-template-columns: 42% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.dm-story__item--flip { grid-template-columns: minmax(0, 1fr) 42%; }
.dm-story__item--flip .dm-story__media { order: 2; }
.dm-story__media { position: relative; isolation: isolate; }
.dm-story__media::before {
    content: ''; position: absolute; z-index: -1; inset: 0; transform: translate(7px, 8px); background: var(--inv-accent);
    -webkit-mask: var(--dm-puff) center / 100% 100% no-repeat; mask: var(--dm-puff) center / 100% 100% no-repeat;
}
.dm-story__item--flip .dm-story__media::before { transform: translate(-7px, 8px); background: color-mix(in srgb, var(--inv-grass) 70%, #fff); }
.dm-story__photo {
    display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
    -webkit-mask: var(--dm-puff) center / 100% 100% no-repeat; mask: var(--dm-puff) center / 100% 100% no-repeat;
}
.dm-story__when {
    display: inline-block; padding: .24rem .7rem; border-radius: 7px; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    color: #fff8e8; background: var(--dm-wood); box-shadow: inset 0 0 0 1px rgb(90 45 15 / .2);
}
.dm-story__body h3 { margin: .5rem 0 0; font-family: var(--dm-display); font-weight: 400; font-size: 1.28rem; line-height: 1.25; color: var(--dm-title); }
.dm-story__body p { margin: .4rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--dm-muted); }
.dm-story__item--text { grid-template-columns: 3rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.2rem; border-radius: 24px; background: var(--inv-soft); }
.dm-story__dot { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; }
.dm-story__dot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dm-story__dot span {
    position: relative; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; font-family: var(--dm-display); font-size: .9rem; line-height: 1; color: var(--inv-text);
    background: radial-gradient(circle at 38% 32%, #fff2b0, var(--inv-accent) 60%);
}

/* gallery: the first photo tall with a round pebble top, the others rounded with a cream ring */
.dm-gallery__cloud { position: absolute; z-index: -1; top: 3.4rem; left: -1.8rem; width: 6.8rem; overflow: visible; opacity: .95; }
.dm-gallery .inv-gallery { gap: .65rem; }
.dm-gallery .inv-gallery__item { border-radius: 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-background) 80%, transparent), 0 16px 28px -18px rgb(0 0 0 / .7); }
.dm-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; border-radius: 999px 999px 24px 24px; box-shadow: 0 0 0 3px var(--inv-accent), 0 16px 28px -18px rgb(0 0 0 / .7); }

/* live streaming: a deep card with fully rounded ends and a butter offset block */
.dm-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: 34px; 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: 10px 10px 0 0 var(--inv-accent), var(--dm-drop);
}
.dm-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: var(--inv-text); background: var(--inv-accent); }
.dm-stream__icon .dm-icon { width: 1.7rem; height: 1.7rem; }
.dm-stream__title { margin: 0 0 .15rem; font-family: var(--dm-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: #fff; }
.dm-stream__text p { margin: 0; font-size: .86rem; color: var(--dm-cream-muted); }
.dm-stream__text .dm-stream__note { margin-top: .3rem; font-weight: 800; color: var(--inv-accent); }
.dm-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-text) !important; background: var(--inv-accent) !important; font-weight: 800; }

/* RSVP card: cream with a white picket fence standing along its top */
.dm-rsvp__card {
    position: relative; margin: 2.2rem 10px 0 0; padding: 1.9rem 1.15rem 1.4rem; border-radius: 24px; color: var(--inv-text); background: var(--dm-paper);
    box-shadow: 10px 10px 0 0 var(--inv-accent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.dm-rsvp__card::before {
    content: ''; position: absolute; left: .9rem; right: .9rem; top: -1.75rem; height: 2.1rem;
    background: var(--dm-fence) left bottom / auto 100% repeat-x;
}
.dm-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--dm-muted); }
.dm-rsvp__sent { margin-bottom: 1rem; }
.dm-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.dm-rsvp__check circle { fill: var(--inv-primary); }
.dm-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .dm-rsvp__sent .dm-rsvp__check { animation: dm-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .dm-rsvp__sent .dm-rsvp__check path { animation: dm-draw .45s ease-out .35s both; }
.dm-rsvp__thanks { margin: 0; font-family: var(--dm-display); font-size: 1.6rem; color: var(--inv-primary); }
.dm-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--dm-muted); }
.dm-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--inv-primary); }

/* gift: cream cards with a butter band stitched like wool, two per row; the address below */
.dm-gift__intro { color: var(--dm-cream-muted); }
.dm-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.dm-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dm-gift .inv-gift__account,
.dm-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: 20px; color: var(--inv-text); background: var(--dm-paper);
    box-shadow: 0 18px 30px -20px rgb(0 0 0 / .6);
}
.dm-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1.15rem; background: var(--inv-accent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--inv-accent) 70%, #6b4a00);
}
.dm-gift .inv-gift__account::after {
    content: ''; position: absolute; left: .6rem; right: .6rem; top: .5rem; border-top: 1.5px dashed color-mix(in srgb, #fff 85%, transparent);
}
.dm-gift .inv-gift__account p, .dm-gift .inv-gift__address p { margin: 0; }
.dm-gift .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--inv-primary); }
.dm-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.dm-gift .inv-gift__logo img { max-width: 5rem; }
.dm-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);
}
.dm-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dm-muted); overflow-wrap: anywhere; }
.dm-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 800; }
.dm-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.1rem; font-size: .875rem; box-shadow: 8px 8px 0 0 var(--inv-accent); }
.dm-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* wishlist: gift bales — hay bales tied with a ribbon and a bow, a cream label beside each */
.dm-wishlist__intro { color: var(--dm-muted); font-size: .92rem; }
.dm-wishlist__list { display: grid; gap: 1.5rem; margin: 1.8rem 0 0; padding: 0; list-style: none; text-align: left; }
.dm-bale { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: center; gap: .9rem; }
.dm-bale--flip { grid-template-columns: minmax(0, 1fr) 6.2rem; }
.dm-bale--flip .dm-bale__hay { order: 2; }
.dm-bale__hay {
    position: relative; display: grid; place-items: center; height: 5rem; margin-top: .7rem; border-radius: 20px 20px 16px 16px;
    background:
        repeating-linear-gradient(180deg, rgb(150 95 20 / .2) 0 1.5px, transparent 1.5px 6px),
        repeating-linear-gradient(90deg, rgb(255 255 255 / .2) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #f7da80, #ebbd4d 58%, #d69d33);
    box-shadow: inset 0 0 0 2px rgb(160 105 25 / .35), inset 0 -6px 0 rgb(150 95 20 / .2), 0 12px 18px -10px rgb(110 70 15 / .6);
}
/* the ribbon: a vertical and a horizontal band crossing */
.dm-bale__hay::before, .dm-bale__hay::after { content: ''; position: absolute; background: var(--inv-primary); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 60%, #000); }
.dm-bale__hay::before { left: 50%; top: 0; bottom: 0; width: .9rem; transform: translateX(-50%); }
.dm-bale__hay::after { left: 0; right: 0; top: 50%; height: .8rem; transform: translateY(-50%); }
.dm-bale__bow {
    position: absolute; z-index: 1; left: 50%; top: -.95rem; width: 2.8rem; height: 1.5rem; transform: translateX(-50%);
    background:
        radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--inv-primary) 70%, #000) 0 .3rem, transparent .32rem),
        radial-gradient(ellipse 46% 42% at 24% 50%, var(--inv-primary) 0 96%, transparent 100%),
        radial-gradient(ellipse 46% 42% at 76% 50%, var(--inv-primary) 0 96%, transparent 100%);
    filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25));
}
.dm-bale__number {
    position: relative; z-index: 1; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
    font-family: var(--dm-display); font-size: 1.1rem; color: var(--inv-primary); background: #fffaf0;
    box-shadow: 0 0 0 3px var(--inv-primary);
}
.dm-bale__photo { position: relative; z-index: 1; width: 2.9rem; height: 2.9rem; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px var(--inv-primary), 0 0 0 5px #fffaf0; }
.dm-bale__label { padding: .85rem 1rem .9rem; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1.5px var(--dm-ring), 0 14px 24px -18px color-mix(in srgb, var(--inv-deep) 70%, transparent); }
.dm-bale--flip .dm-bale__label { text-align: right; }
.dm-bale__label p { margin: 0; }
.dm-bale__name { font-family: var(--dm-display); font-size: 1.08rem; line-height: 1.3; color: var(--dm-title); overflow-wrap: anywhere; }
.dm-bale__note { margin-top: .15rem !important; font-size: .85rem; color: var(--dm-muted); }
.dm-bale__shop { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; margin-top: .2rem; font-size: .82rem; font-weight: 800; text-decoration: none; }
.dm-bale__shop .dm-icon { width: 1rem; height: 1rem; }

/* co-hosts: names in Young Serif, one per line, split by small daisies, on the butter band */
.dm-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.dm-cohosts__list li { max-width: 26ch; font-family: var(--dm-display); font-size: 1.12rem; line-height: 1.3; color: var(--inv-text); }
.dm-cohosts__list li + li::before { content: ''; display: block; width: 7px; height: 7px; margin: 0 auto .5rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-accent) 60%, #8a5a00); }

/* contacts: pill rows with the initial in a wool puff and a WhatsApp button */
.dm-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.dm-contact {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem .6rem .55rem .55rem; border-radius: 999px;
    background: #fff; text-align: left; box-shadow: 0 0 0 1.5px var(--dm-ring), 6px 6px 0 0 var(--inv-soft);
}
.dm-contact__avatar {
    display: grid; place-items: center; width: 3rem; height: 3rem; font-family: var(--dm-display); font-size: 1.3rem; color: #fff; background: var(--inv-primary);
    -webkit-mask: var(--dm-puff) center / 100% 100% no-repeat; mask: var(--dm-puff) center / 100% 100% no-repeat;
}
.dm-contact p { margin: 0; }
.dm-contact__name { font-weight: 800; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.dm-contact__role { font-size: .78rem; color: var(--dm-muted); }
.dm-contact__phone { font-size: .85rem; }
.dm-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 800; }
.dm-contact__button .dm-icon { width: 1.05rem; height: 1.05rem; }

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

/* vendors: a white card of rows split by dashed lines */
.dm-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1.5px var(--dm-ring), var(--dm-drop); }
.dm-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1.5px dashed var(--dm-ring); }
.dm-vendor:last-child { border-bottom: 0; }
.dm-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.dm-vendor__role { font-size: .64rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.dm-vendor__name { font-family: var(--dm-display); font-size: 1.08rem; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
.dm-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: 800; text-decoration: none; background: var(--inv-soft); color: var(--inv-deep);
}
.dm-vendor__link .dm-icon { width: .95rem; height: .95rem; }

/* closing: the full photo fading into the deep colour, the meadow with the lamb rising over its foot */
.dm-closing { padding-bottom: 1.5rem; }
.dm-closing.dm-edge--hills { padding-top: calc(1.6rem + var(--dm-edge)); }
.dm-closing--photo.dm-edge--hills { padding-top: var(--dm-edge); }
.dm-closing__scene { position: relative; z-index: 0; height: 10rem; margin: 0 -1.4rem; }
.dm-closing--photo .dm-closing__scene { height: min(56svh, 25rem); }
.dm-closing__photo { position: absolute; inset: 0 0 2rem; overflow: hidden; }
.dm-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 25%; --inv-parallax: 30px; }
.dm-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dm-deep-top) 30%, transparent), transparent 22%, transparent 55%, color-mix(in srgb, var(--inv-grass) 40%, transparent) 85%);
}
.dm-closing__cloud { position: absolute; top: .4rem; left: 12%; width: 5rem; overflow: visible; }
.dm-closing:not(.dm-closing--photo) .dm-closing__scene::before {
    content: ''; position: absolute; inset: 0 0 2rem; border-radius: 0;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--inv-sky) 55%, transparent) 75%);
}
.dm-closing__meadow { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 6.4rem; }
.dm-closing__lamb { position: absolute; left: 36%; bottom: .9rem; width: 5.5rem; height: auto; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .25)); }
.dm-closing__body { position: relative; margin-top: .4rem; }
.dm-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-accent); }
.dm-closing__title { margin: 0 0 .7rem; font-family: var(--dm-display); font-weight: 400; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.08; color: #fff; }
.dm-closing__title em { font-style: normal; color: var(--inv-accent); }
.dm-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--dm-cream-muted); }
.dm-closing__salam { margin: .8rem auto 0; max-width: 30ch; font-family: var(--dm-display); font-size: 1.02rem; line-height: 1.4; color: var(--inv-accent); }
.dm-closing__signature { margin: .7rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--dm-cream-muted); }
.dm-closing__plate {
    display: inline-flex; align-items: center; gap: .8rem; margin: 1.2rem 0 0; padding: .5rem .95rem .6rem; border-radius: 14px;
    background: var(--dm-wood); box-shadow: inset 0 0 0 2px rgb(90 45 15 / .2), 0 16px 24px -14px rgb(0 0 0 / .7); transform: rotate(-1.5deg);
}
.dm-closing__names {
    display: flex; flex-direction: column; align-items: center; font-family: var(--dm-display); font-size: 1.75rem; line-height: 1.1; color: #fff8e8;
    text-shadow: 0 2px 0 rgb(90 45 15 / .45); overflow-wrap: anywhere;
}
.dm-closing__names small { font-family: var(--dm-sans); font-size: .58rem; font-weight: 900; letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-accent) 70%, #fff); text-shadow: none; }

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

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.dm-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.dm-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.dm-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: 18px; cursor: pointer; text-align: center;
    font-size: .84rem; font-weight: 800; 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;
}
.dm-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dm-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;
}
.dm-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(--dm-choice-icon) center / contain no-repeat; mask: var(--dm-choice-icon) center / contain no-repeat;
}
.dm-rsvp .inv-form__choices label:nth-of-type(1) {
    --dm-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");
}
.dm-rsvp .inv-form__choices label:nth-of-type(2) {
    --dm-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");
}
.dm-rsvp .inv-form__choices label:nth-of-type(3) {
    --dm-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");
}
.dm-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-accent), 0 12px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}
.dm-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.dm-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.dm-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 3px; }

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

/* ---------- 7. shared components ---------- */
.dm-main .inv-button { font-weight: 700; }
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(--dm-sans);
}

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

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .dm-cover { --wf-cover: min(64vw, 16rem, 36svh); padding-top: 1.25rem; padding-bottom: 1.4rem; }
    .dm-cover__art { padding-top: 1.2rem; }
    .dm-cover__name { font-size: 2.9rem; }
    .dm-cover__quote { font-size: .86rem; }
    .dm-cover__guest { margin-top: .7rem; }
    .dm-cover__open { margin-top: .85rem; }
}
@media (max-height: 660px) {
    .dm-cover { --wf-cover: min(56vw, 31svh); padding-top: 1rem; padding-bottom: 1.1rem; }
    .dm-cover__title { font-size: .62rem; padding: .32rem .85rem; }
    .dm-cover__art { padding-top: .95rem; }
    .dm-cover__name { font-size: 2.5rem; }
    .dm-cover--many .dm-cover__name { font-size: 2rem; }
    .dm-cover__date { font-size: .86rem; margin-top: .15rem; }
    .dm-cover__quote { font-size: .8rem; line-height: 1.35; }
    .dm-cover__guest { padding: .4rem .85rem .5rem; margin-top: .6rem; }
    .dm-cover__guest-name { font-size: 1.05rem; }
    .dm-cover__open { min-height: 2.75rem; padding: .6rem 1.6rem; margin-top: .75rem; }
}
/* very short screens (in-app browsers): a smaller frame and a two-line quote, so everything fits */
@media (max-height: 600px) {
    .dm-cover { --wf-cover: min(46vw, 28svh); padding-top: .8rem; }
    .dm-cover__art { padding-top: .8rem; }
    .dm-cover__name { font-size: 2.2rem; }
    .dm-cover__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* wide screens: the phone-width column on a deep meadow backdrop */
@media (min-width: 560px) {
    body.dm-body {
        background:
            radial-gradient(80vw 50vh at 50% 0%, color-mix(in srgb, var(--inv-sky) 35%, transparent), transparent 70%),
            radial-gradient(70vw 50vh at 50% 100%, color-mix(in srgb, var(--inv-grass) 35%, transparent), transparent 70%),
            var(--inv-deep);
        background-attachment: fixed;
    }
    .dm-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes dm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dm-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes dm-frame-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes dm-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes dm-hills-up { from { transform: translate(-50%, 18%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes dm-peek { 0% { opacity: 0; transform: translate(-14px, 22px); } 70% { opacity: 1; transform: translate(1px, -2px); } 100% { opacity: 1; transform: none; } }
@keyframes dm-ring { 0% { transform: rotate(0); } 25% { transform: rotate(16deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes dm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dm-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.03); } }

/* cover (≤ 2.5 s, once): the frame rises in and its photo settles (0–1.1 s), the hills slide up
   (.15–1.05 s), the clouds fade in, the lamb pops up from behind the wool (.8–1.6 s) and its bell gives
   one small swing (1.5–2.3 s); the text follows through its inv-enter delays */
html.inv-anim .dm-wool--cover { animation: dm-frame-in .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .dm-wool--cover .dm-wool__photo { animation: dm-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .dm-cover__meadow { animation: dm-hills-up .9s cubic-bezier(.2, .7, .2, 1) .15s both; }
html.inv-anim .dm-cover__cloud { animation: dm-fade 1.2s ease .3s both; }
html.inv-anim .dm-wool--cover .dm-wool__lamb { animation: dm-peek .8s cubic-bezier(.3, .8, .3, 1) .8s both; transform-box: fill-box; }
html.inv-anim .dm-wool--cover .dm-lamb__bell { animation: dm-ring .8s ease-in-out 1.5s both; transform-box: fill-box; transform-origin: 50% 0; }

/* the sleeping lamb breathes very slowly */
.dm-lamb__breath { transform-box: fill-box; transform-origin: 50% 100%; }
html.inv-anim .dm-lamb__breath { animation: dm-breathe 4.5s ease-in-out infinite; }

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

/* ---------- intro scene "Domba Melompat di Padang Pagi" (scene.json + sections/_scene) ---------- */
.dm-scene-sky { display: block; width: 100%; height: 100%;
    background:
        radial-gradient(60% 34% at 80% 8%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-sky) 92%, #fff) 0%, color-mix(in srgb, var(--inv-sky) 55%, #fff) 52%, color-mix(in srgb, var(--inv-sky) 30%, #fff8e4) 80%);
}
.dm-scene-sun {
    display: block; width: 100%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 40% 38%, #fff6c4, var(--inv-accent) 62%, color-mix(in srgb, var(--inv-accent) 80%, #e08a00));
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--inv-accent) 22%, transparent), 0 0 0 28px color-mix(in srgb, var(--inv-accent) 10%, transparent);
}
.dm-scene-cloud { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgb(40 80 120 / .12)); }
.inv-scene__art > svg.dm-scene-cloud { height: auto; }
.dm-scene-lamb { filter: drop-shadow(0 8px 10px rgb(30 50 20 / .22)); }
.dm-scene-lamb .dm-lamb__bell { transform-box: fill-box; transform-origin: 50% 0; animation: dm-ring 1.1s ease-in-out infinite; }
.dm-scene-hills { filter: saturate(.75) brightness(1.08); opacity: .9; }
.dm-scene-hills .dm-meadow__front, .dm-scene-hills .dm-meadow__front ~ use { display: none; }
/* the card: the farm nameplate, a cream panel in a wooden board with four nails */
body.dm-body .inv-intro--scene .inv-scene__card {
    top: 43%; aspect-ratio: auto; min-height: 14rem; padding: 2rem 1.3rem 1.8rem; border: 11px solid transparent; border-radius: 22px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--inv-text);
    background: radial-gradient(90% 60% at 50% 0%, #fff, transparent 80%) padding-box, linear-gradient(#fffaf0, #fffaf0) padding-box, var(--dm-wood) border-box;
    box-shadow: inset 0 0 0 1.5px rgb(120 70 30 / .2), inset 0 3px 6px rgb(120 70 30 / .12), 0 26px 40px -20px rgb(70 35 10 / .75);
}
body.dm-body .inv-intro--scene .inv-scene__card::after {
    content: ''; position: absolute; inset: -6px; pointer-events: none;
    --nail: radial-gradient(circle at 35% 30%, #fff 0, #d3ccc0 38%, #6f675c 100%);
    background: var(--nail) 0 0 / 8px 8px no-repeat, var(--nail) 100% 0 / 8px 8px no-repeat, var(--nail) 0 100% / 8px 8px no-repeat, var(--nail) 100% 100% / 8px 8px no-repeat;
}
body.dm-body .inv-scene__card .inv-intro__label { color: var(--inv-primary); font: 900 .66rem/1.4 var(--dm-sans); letter-spacing: .22em; }
body.dm-body .inv-scene__card .inv-intro__names { color: var(--dm-title); font: 400 clamp(2.2rem, 10.5vw, 3rem)/1.08 var(--dm-display); font-family: var(--dm-display) !important; }
body.dm-body .inv-scene__card .inv-intro__rule { width: 6.5rem; height: 6px; background: var(--inv-accent); -webkit-mask: var(--dm-thread) center / 100% 100% no-repeat; mask: var(--dm-thread) center / 100% 100% no-repeat; }
body.dm-body .inv-scene__card .inv-intro__date { color: var(--inv-text); font: 800 .86rem/1.4 var(--dm-sans); letter-spacing: .02em; }
body.dm-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, #fffaf0 85%, transparent); color: var(--inv-primary); border-color: var(--dm-ring); }
@media (prefers-reduced-motion: reduce) { .dm-scene-lamb .dm-lamb__bell { animation: none; } }