/*
 * Template "Dasar" (Syukuran & Rumah Baru) — "Rumah penuh syukur": warm, calm, grateful, family-centred.
 * Warm cream + a deep primary (teal) + a terracotta accent + soft gold lines + a sand tint, with a deep band
 * colour. Signature pieces: the line-drawn house (sections/_house: gable roof, arched door, windows whose
 * light switches on), photos in arched doorways (sections/_doorway), the home photo cut in the shape of a
 * house (sections/home), the house nameplate (sections/_nameplate) and garden sprigs (sections/_sprig).
 * A soft sunrise glow, a faint "roof tile" print. Mobile-first, one column (~460px) on a deep backdrop on
 * wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (teal / navy / olive / maroon: titles, buttons, frames)
 *   --inv-accent (terracotta / gold ochre: doorsteps, tags, brush strokes; text on it via --dasar-clay)
 *   --inv-background (warm cream)   --inv-text   --inv-deep (dark bands)   --inv-shine (soft gold on dark)
 *   --inv-gold (gold lines on light grounds)   --inv-soft (sand tint for the sand tone, chips, panels)
 * Everything else is mixed from those, so a new variant only needs these eight colours.
 *
 * Section tones (set on each section in its partial): .dasar-tone--light (cream), --sand (sand tint),
 * --deep (the dark band colour), --clay (a deep terracotta band). Light and dark alternate down the page.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion);
 * without it everything is shown finished.
 *
 * Contents: 1 base · 2 section tones & photo backgrounds · 3 shared pieces (heading, house, doorway,
 *           nameplate, sprig) · 4 cover · 5 sections in page order · 6 forms (RSVP, wishes) ·
 *           7 shared components · 8 screen sizes · 9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Teal Terakota" variant (the variant's colours override these) */
    --inv-primary: #17605c;
    --inv-accent: #c4603a;
    --inv-background: #fbf5ea;
    --inv-text: #1f2a28;
    --inv-deep: #0e3d3b;
    --inv-shine: #f0c27a;
    --inv-gold: #b8892f;
    --inv-soft: #f2dfc8;
    --inv-radius: 16px;

    --dasar-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --dasar-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dasar-col: 460px;
    --dasar-paper: color-mix(in srgb, #fff 72%, var(--inv-background));
    --dasar-title: color-mix(in srgb, var(--inv-primary) 74%, var(--inv-deep));
    --dasar-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --dasar-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --dasar-ring: color-mix(in srgb, var(--inv-primary) 18%, transparent);
    --dasar-clay: color-mix(in srgb, var(--inv-accent) 82%, var(--inv-deep));
    --dasar-drop: 0 22px 40px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* a faint "roof tile" print: small staggered roof marks (a mask, so it takes any colour) */
    --dasar-tiles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M4 12l5-4.5 5 4.5M22 30l5-4.5 5 4.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* the soft brush stroke under the italic word of a heading */
    --dasar-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C28 5 60 4 97 6.5' fill='none' stroke='%23000' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");

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

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

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

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

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

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

/* ---------- 2. section tones & photo backgrounds ---------- */

/* light: warm cream with a sunrise glow in one corner, a sand glow in the other, and the faint tile print */
.dasar-tone--light {
    background:
        radial-gradient(65% 30% at 100% 0%, color-mix(in srgb, var(--inv-shine) 26%, transparent), transparent 75%),
        radial-gradient(70% 34% at 0% 100%, color-mix(in srgb, var(--inv-soft) 75%, transparent), transparent 75%),
        var(--inv-background);
}
/* sand: a warm wash of the sand colour */
.dasar-tone--sand {
    background:
        radial-gradient(80% 40% at 50% 0%, color-mix(in srgb, #fff 45%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 50%, var(--inv-background)));
}
.dasar-tone--light::before, .dasar-tone--sand::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .06;
    -webkit-mask: var(--dasar-tiles) center top / 36px 36px repeat; mask: var(--dasar-tiles) center top / 36px 36px repeat;
}

/* deep: the band colour with a glow of the primary and a low warm sunrise */
.dasar-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 10% 0%, color-mix(in srgb, var(--inv-primary) 90%, transparent), transparent 75%),
        radial-gradient(70% 30% at 90% 100%, color-mix(in srgb, var(--inv-accent) 30%, transparent), transparent 75%),
        var(--inv-deep);
}
.dasar-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .07;
    -webkit-mask: var(--dasar-tiles) center top / 36px 36px repeat; mask: var(--dasar-tiles) center top / 36px 36px repeat;
}
.dasar-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.dasar-tone--deep .dasar-arabic { color: var(--inv-shine); }

/* clay: a deep terracotta band (white text keeps ≥ 4.5:1) */
.dasar-tone--clay {
    color: #fff;
    background:
        radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--inv-shine) 30%, transparent), transparent 75%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-deep) 40%, transparent), transparent 75%),
        var(--dasar-clay);
}
.dasar-tone--clay::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: #fff; opacity: .09;
    -webkit-mask: var(--dasar-tiles) center top / 36px 36px repeat; mask: var(--dasar-tiles) center top / 36px 36px repeat;
}

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

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

/* section heading: a roof mark + letter-spaced eyebrow, a display title, the last word italic over a brush stroke */
.dasar-heading { margin: 0 0 2rem; }
.dasar-heading--left { text-align: left; }
.dasar-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .55rem;
    font-size: .7rem; font-weight: 800; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary);
}
.dasar-heading__roof { width: 1.3rem; height: .76rem; flex: none; fill: none; stroke: var(--inv-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dasar-heading__title {
    margin: 0; font-family: var(--dasar-display); font-size: 2.45rem; font-weight: 400; line-height: 1.08;
    letter-spacing: -.005em; color: var(--dasar-title); text-wrap: balance;
}
.dasar-heading__title em { position: relative; display: inline-block; font-style: italic; color: var(--inv-accent); }
.dasar-heading__title em::after {
    content: ''; position: absolute; left: -.04em; right: -.06em; bottom: -.08em; height: .28em; z-index: -1;
    background: var(--inv-shine); opacity: .55;
    -webkit-mask: var(--dasar-brush) center / 100% 100% no-repeat; mask: var(--dasar-brush) center / 100% 100% no-repeat;
}
.dasar-tone--deep .dasar-heading__eyebrow { color: var(--inv-shine); }
.dasar-tone--deep .dasar-heading__roof { stroke: var(--inv-shine); }
.dasar-tone--deep .dasar-heading__title { color: #fff; }
.dasar-tone--deep .dasar-heading__title em { color: var(--inv-shine); }
.dasar-tone--deep .dasar-heading__title em::after { background: var(--inv-accent); opacity: .7; }
.dasar-tone--clay .dasar-heading__eyebrow { color: #fff; }
.dasar-tone--clay .dasar-heading__roof { stroke: var(--inv-shine); }
.dasar-tone--clay .dasar-heading__title { color: #fff; }
.dasar-tone--clay .dasar-heading__title em { color: var(--inv-shine); }
.dasar-tone--clay .dasar-heading__title em::after { background: var(--inv-deep); opacity: .45; }

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

/* the line-drawn house (sections/_house) */
.dasar-house { display: block; overflow: visible; }
.dasar-house__line { stroke-width: 2.6; }
.dasar-house__roof { stroke-width: 3.4; }
.dasar-house__thin { stroke-width: 1.8; }
.dasar-house__knob { fill: currentColor; stroke: none; }
.dasar-house__glow { fill: var(--inv-shine); stroke: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--inv-shine) 90%, transparent)); }
.dasar-house__leaf { fill: color-mix(in srgb, currentColor 22%, transparent); stroke-width: 1.8; }

/* the arched doorway photo frame (sections/_doorway): an arch window, a gold line outside it, a doorstep;
   --door-w sets the size, --door-ratio the shape, --door-pos the crop */
.dasar-doorway {
    --door-w: 12rem; --door-ratio: 5 / 7; --door-pos: center 35%;
    position: relative; isolation: isolate; width: var(--door-w); margin: 0; flex: none;
}
.dasar-doorway::before {
    content: ''; position: absolute; z-index: -1; inset: -9px -9px -2px; pointer-events: none;
    border: 1.5px solid var(--inv-gold); border-bottom: 0; border-radius: 999px 999px 0 0;
}
.dasar-doorway__window {
    position: relative; overflow: hidden; aspect-ratio: var(--door-ratio); border-radius: 999px 999px 10px 10px;
    background: var(--inv-primary);
    box-shadow: 0 26px 40px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
/* a thin cream ring inside, around the photo's edge only */
.dasar-doorway__window::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--inv-background) 70%, transparent);
}
.dasar-doorway__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--door-pos); }
.dasar-doorway__empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 14%;
    color: var(--inv-background);
    background:
        radial-gradient(70% 38% at 50% 72%, color-mix(in srgb, var(--inv-shine) 75%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-primary) 55%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-primary)));
}
.dasar-doorway__house { width: 74%; }
.dasar-doorway__monogram {
    margin-top: .5rem; font-family: var(--dasar-display); font-style: italic; line-height: 1; white-space: nowrap;
    font-size: calc(var(--door-w) * .16); color: #fff;
}
.dasar-doorway__step {
    position: absolute; z-index: 1; left: -13%; right: -13%; bottom: -9px; height: 11px; border-radius: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 82%, #fff), var(--inv-accent) 60%, var(--dasar-clay));
    box-shadow: 0 8px 14px -8px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}

/* the house nameplate (sections/_nameplate): a deep plaque, a fine gold inner line, two brass screws */
.dasar-plate {
    position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .55rem; max-width: 100%;
    padding: .55rem .7rem; border-radius: 14px; color: #fff;
    background: radial-gradient(90% 120% at 30% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 60%), linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 16px 26px -14px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
.dasar-plate::before {
    content: ''; position: absolute; z-index: -1; inset: 4px; border-radius: 10px; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 70%, transparent);
}
.dasar-plate__screw {
    width: .55rem; height: .55rem; flex: none; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8e6, var(--inv-shine) 45%, color-mix(in srgb, var(--inv-shine) 50%, var(--inv-deep)) 100%);
    box-shadow: 0 1px 1px rgb(0 0 0 / .35);
}
.dasar-plate__text { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: .1rem .35rem .15rem; }
.dasar-plate__caption { font-size: .6rem; font-weight: 800; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.dasar-plate__name { font-family: var(--dasar-display); font-size: 1.6rem; line-height: 1.12; color: #fff; overflow-wrap: anywhere; text-wrap: balance; }
.dasar-plate__line { margin-top: .1rem; font-size: .74rem; font-weight: 600; color: var(--dasar-cream-muted); }

/* the garden sprig (sections/_sprig) */
.dasar-sprig { display: block; overflow: visible; transform-origin: 50% 100%; }
.dasar-sprig--flip { transform: scaleX(-1); }
.dasar-sprig__stem { stroke-width: 2.2; }
.dasar-sprig__leaf { fill: color-mix(in srgb, currentColor 28%, transparent); stroke-width: 1.6; }
.dasar-sprig__vein { stroke-width: 1; opacity: .7; }
.dasar-sprig__bud { fill: var(--inv-accent); stroke: none; }

/* ---------- 4. cover ---------- */
.dasar-cover {
    --door-cover: min(60vw, 15rem, calc(40svh * .714));
    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.8rem 1.4rem 1.9rem;
    isolation: isolate; color: var(--inv-text);
    background:
        radial-gradient(85% 42% at 50% 34%, color-mix(in srgb, var(--inv-shine) 42%, transparent), transparent 72%),
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 72%),
        radial-gradient(80% 32% at 0% 100%, color-mix(in srgb, var(--inv-soft) 95%, transparent), transparent 75%),
        var(--inv-background);
    transition: opacity .9s ease;
}
.dasar-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .06; background: var(--inv-primary);
    -webkit-mask: var(--dasar-tiles) center top / 36px 36px repeat; mask: var(--dasar-tiles) center top / 36px 36px repeat;
}
.dasar-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.dasar-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .7rem;
    font-size: .72rem; font-weight: 800; line-height: 1.2; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary);
}
.dasar-cover__title::before, .dasar-cover__title::after { content: ''; width: 1.4rem; height: 2px; border-radius: 2px; background: var(--inv-accent); }

.dasar-cover__art { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* the house crest over the arch */
.dasar-cover__house { width: 4.9rem; margin: 0 0 .9rem; color: var(--inv-primary); }
.dasar-cover__door { position: relative; }
/* sunrise rings behind the arch */
.dasar-cover__door::before {
    content: ''; position: absolute; z-index: -2; left: 50%; top: 34%; width: calc(var(--door-cover) * 2.1); aspect-ratio: 1; border-radius: 50%;
    transform: translate(-50%, -50%); pointer-events: none;
    background:
        repeating-radial-gradient(circle, transparent 0 15px, color-mix(in srgb, var(--inv-gold) 22%, transparent) 15px 16.5px),
        radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 55%, transparent), transparent 66%);
    -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%); mask: radial-gradient(circle, #000 30%, transparent 68%);
}
.dasar-doorway--cover { --door-w: var(--door-cover); --door-pos: 46% 38%; }
.dasar-cover__sprig { position: absolute; bottom: -2px; width: calc(var(--door-cover) * .2); color: var(--inv-primary); }
.dasar-cover__sprig--left { left: calc(var(--door-cover) * -.25); }
.dasar-cover__sprig--right { right: calc(var(--door-cover) * -.25); }
/* the monogram on a round "house number" badge beside the arch (only over the gold line, never the photo) */
.dasar-cover__number {
    position: absolute; top: 30%; right: -3.05rem; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin: 0;
    border-radius: 50%; font-family: var(--dasar-display); font-size: 1.15rem; line-height: 1; white-space: nowrap;
    color: var(--inv-primary); background: #fff;
    box-shadow: inset 0 0 0 2px var(--inv-background), inset 0 0 0 3.2px var(--inv-gold), 0 10px 18px -10px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
.dasar-cover__number--long { font-size: .8rem; }
/* the nameplate sits on the doorstep */
.dasar-cover__plate { margin-top: .2rem; max-width: min(100%, 20rem); }

.dasar-cover__text { display: flex; flex-direction: column; align-items: center; margin-top: .85rem; }
.dasar-cover__date { margin: 0; font-size: .95rem; font-weight: 800; letter-spacing: .02em; color: var(--inv-deep); }
.dasar-cover__quote {
    max-width: 31ch; margin: .3rem 0 0; font-family: var(--dasar-display); font-style: italic;
    font-size: 1.02rem; line-height: 1.38; color: var(--dasar-muted);
}
.dasar-cover__guest {
    width: min(100%, 19rem); margin: .85rem 0 0; padding: .5rem 1rem .6rem; border-radius: 16px; background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--dasar-ring), 0 10px 22px -16px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.dasar-cover__guest p { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-primary); }
.dasar-cover__guest-name { display: block; font-family: var(--dasar-display); font-size: 1.24rem; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.dasar-cover__open {
    margin-top: .95rem; min-height: 3rem; padding: .7rem 1.9rem; font-weight: 800; letter-spacing: .02em;
    background: var(--inv-primary); color: #fff;
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4.5px color-mix(in srgb, var(--inv-gold) 85%, transparent), 0 14px 24px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent);
}

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

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

/* opening: a tall arched doorway outline over the faint photo, the quote on a terracotta-edged panel */
.dasar-opening { padding: 4.4rem 1.6rem 4.4rem; }
.dasar-opening::after {
    content: ''; position: absolute; z-index: -1; left: 50%; bottom: -30%; width: 150%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 62%); pointer-events: none;
}
.dasar-opening__arch {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 2.8rem 1.5rem 2.4rem;
    border: 1.5px solid var(--inv-shine); border-bottom: 0; border-radius: 11rem 11rem 0 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-deep) 50%, transparent), color-mix(in srgb, var(--inv-deep) 20%, transparent));
}
.dasar-opening__arch::before {
    content: ''; position: absolute; inset: -10px -10px 0; z-index: -1; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--inv-shine) 40%, transparent); border-bottom: 0; border-radius: 12rem 12rem 0 0;
}
.dasar-opening__house { width: 6rem; margin: 0 auto .9rem; color: var(--inv-shine); }
.dasar-opening__basmalah { margin: 0 0 .6rem; font-size: 1.85rem; }
.dasar-opening__greeting { margin: 0 auto .8rem; max-width: 22ch; font-family: var(--dasar-display); font-size: 1.42rem; font-style: italic; line-height: 1.3; color: #fff; }
.dasar-opening__message { margin: 0 auto; max-width: 29ch; color: var(--dasar-cream-muted); }
.dasar-opening__quote {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 1.4rem 1.3rem 1.3rem 1.5rem; text-align: left;
    border-radius: 0 0 22px 22px; color: var(--inv-text); background: var(--dasar-paper);
    box-shadow: inset 5px 0 0 var(--inv-accent), 0 22px 40px -22px rgb(0 0 0 / .6);
}
.dasar-opening__mark { position: absolute; right: 1rem; top: -1.1rem; width: 2.4rem; height: 1.8rem; fill: var(--inv-accent); }
.dasar-opening__quote blockquote { margin: 0; font-family: var(--dasar-display); font-style: italic; font-size: 1.12rem; line-height: 1.45; color: var(--dasar-title); }
.dasar-opening__quote figcaption {
    display: inline-block; margin-top: .75rem; padding: .22rem .7rem; border-radius: 8px; font-size: .7rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--dasar-clay);
}

/* host: the family photo in a big doorway with a sand block behind, a white family card over the doorstep */
.dasar-host__art { position: relative; display: flex; justify-content: center; padding-top: .6rem; }
.dasar-host__art::before {
    content: ''; position: absolute; z-index: -1; left: 50%; top: 18%; width: min(19rem, 82%); height: 74%; margin-left: max(-9.5rem, -41%);
    border-radius: 999px 999px 24px 24px; transform: translateX(1.4rem) rotate(4deg);
    background: linear-gradient(170deg, var(--inv-soft), color-mix(in srgb, var(--inv-accent) 30%, var(--inv-soft)));
}
.dasar-doorway--host { --door-w: min(15rem, 66vw); --door-ratio: 4 / 5.4; --door-pos: center 35%; }
.dasar-host__sprig { position: absolute; left: calc(50% - min(7.5rem, 33vw) - 2.6rem); bottom: 0; width: 3.2rem; color: var(--inv-primary); }
.dasar-host__card {
    position: relative; z-index: 2; margin: 1.6rem .2rem 0; padding: 1.7rem 1.3rem 0; overflow: hidden; border-radius: 26px; background: #fff;
    box-shadow: 0 0 0 1.5px var(--dasar-ring), var(--dasar-drop);
}
.dasar-host__short {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .35rem;
    font-family: var(--dasar-display); font-style: italic; font-size: 1.2rem; line-height: 1.2; color: var(--inv-accent);
}
.dasar-host__short::before, .dasar-host__short::after { content: ''; width: 1.2rem; height: 1.5px; background: var(--inv-gold); }
.dasar-host__family { margin: 0; font-family: var(--dasar-display); font-weight: 400; font-size: 2.15rem; line-height: 1.08; color: var(--dasar-title); overflow-wrap: anywhere; text-wrap: balance; }
.dasar-host__divider { display: block; width: 7.5rem; height: .9rem; margin: .9rem auto .7rem; fill: none; stroke: var(--inv-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dasar-host__couple { display: flex; flex-direction: column; align-items: center; gap: .05rem; margin: 0 0 1.3rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--inv-text); }
.dasar-host__couple .dasar-amp { font-size: 1.3rem; line-height: 1.1; }
.dasar-host__members {
    display: flex; align-items: flex-start; gap: .75rem; margin: 0 -1.3rem; padding: 1rem 1.3rem 1.1rem; text-align: left;
    background: linear-gradient(135deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 45%, #fff));
}
.dasar-host__members-icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: 50%; color: #fff; background: var(--inv-primary); }
.dasar-host__members p { margin: 0; font-size: .93rem; font-weight: 600; line-height: 1.45; }
.dasar-host__members small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--dasar-clay); }

/* occasion: a rising sun of gold lines over the horizon, the type big, the intent in italic between lines */
.dasar-occasion { padding: 3.4rem 1.6rem 4.2rem; }
.dasar-occasion__horizon { display: flex; align-items: flex-end; justify-content: center; gap: .2rem; margin: 0 auto .9rem; }
.dasar-occasion__sun { display: block; width: min(13rem, 62%); color: var(--inv-shine); overflow: visible; }
.dasar-occasion__sprig { width: 2.6rem; flex: none; margin-bottom: -.2rem; color: var(--inv-shine); }
.dasar-tone--clay .dasar-bgphoto img { filter: grayscale(.2); }
.dasar-tone--clay .dasar-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--dasar-clay) 90%, transparent),
        color-mix(in srgb, var(--dasar-clay) 80%, transparent) 50%,
        color-mix(in srgb, var(--dasar-clay) 95%, transparent));
}
.dasar-occasion__disc { fill: color-mix(in srgb, var(--inv-shine) 85%, #fff); stroke: none; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--inv-shine) 70%, transparent)); }
.dasar-occasion__ray { stroke-width: 2.2; }
.dasar-occasion__eyebrow { margin: 0 0 .4rem !important; font-size: .72rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine); }
.dasar-occasion__type { margin: 0 auto 1.2rem; max-width: 14ch; font-family: var(--dasar-display); font-weight: 400; font-size: 2.6rem; line-height: 1.06; color: #fff; text-wrap: balance; }
.dasar-occasion__intent {
    position: relative; max-width: 30ch !important; margin: 0 auto !important; padding: 1.1rem 0;
    font-family: var(--dasar-display); font-style: italic; font-size: 1.16rem; line-height: 1.5; color: #fff;
    border-top: 1px solid color-mix(in srgb, var(--inv-shine) 60%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-shine) 60%, transparent);
}

/* home: the photo cut in the shape of a house, a key tag with the moving-in date, the story, the address */
.dasar-home { padding-bottom: 4rem; }
.dasar-home__art { position: relative; width: min(19rem, 86%); margin: 0 auto; padding-top: .4rem; }
.dasar-home__chimney {
    position: absolute; z-index: -1; right: 18%; top: 6%; width: 11%; height: 18%; border-radius: 3px 3px 0 0;
    background: var(--inv-gold);
}
.dasar-home__chimney::after { content: ''; position: absolute; left: -12%; right: -12%; top: 0; height: 14%; border-radius: 2px; background: color-mix(in srgb, var(--inv-gold) 70%, var(--inv-deep)); }
/* three layers in the same house shape: gold outline, cream gap, photo */
.dasar-home__frame, .dasar-home__gap, .dasar-home__photo, .dasar-home__empty { clip-path: polygon(50% 0, 100% 36%, 100% 100%, 0 100%, 0 36%); }
.dasar-home__frame { padding: 3px; background: var(--inv-gold); filter: drop-shadow(0 22px 22px color-mix(in srgb, var(--inv-deep) 40%, transparent)); }
.dasar-home__gap { padding: 6px; background: var(--inv-background); }
.dasar-home__photo { display: block; width: 100%; aspect-ratio: 1 / 1.02; object-fit: cover; object-position: center 60%; }
.dasar-home__empty {
    display: flex; align-items: flex-end; justify-content: center; width: 100%; aspect-ratio: 1 / 1.02; padding: 0 12% 12%; color: var(--inv-background);
    background:
        radial-gradient(60% 40% at 50% 78%, color-mix(in srgb, var(--inv-shine) 80%, transparent), transparent 72%),
        linear-gradient(180deg, var(--inv-deep), var(--inv-primary) 60%, color-mix(in srgb, var(--inv-accent) 70%, var(--inv-primary)));
}
.dasar-home__house { width: 82%; }
.dasar-home__ground {
    position: relative; z-index: 1; display: block; height: 10px; margin: -4px -16% 0; border-radius: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 82%, #fff), var(--inv-accent) 60%, var(--dasar-clay));
}
.dasar-home__sprig { position: absolute; bottom: 6px; width: 3.1rem; color: var(--inv-primary); }
.dasar-home__sprig--left { left: -3.2rem; }
.dasar-home__sprig--right { right: -3.2rem; }
/* the key tag hangs on a short cord under the ground line */
.dasar-home .dasar-home__key {
    position: relative; display: flex; align-items: center; gap: .5rem; width: max-content; max-width: 100%; margin: 1.2rem auto 0; padding: .45rem .95rem .45rem .5rem;
    border-radius: 999px 12px 12px 999px; transform: rotate(-3deg); text-align: left;
    color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--dasar-clay) 80%, #fff), var(--dasar-clay));
    box-shadow: 0 12px 20px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.dasar-home__key::before {
    content: ''; position: absolute; left: .9rem; bottom: 100%; width: 1.5px; height: 1.35rem; background: var(--inv-gold); transform: rotate(3deg); transform-origin: bottom;
}
.dasar-home__key-hole { width: .8rem; height: .8rem; flex: none; border-radius: 50%; background: var(--inv-soft); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }
.dasar-home__key-text { font-family: var(--dasar-display); font-size: 1.05rem; line-height: 1.15; }
.dasar-home__key-text small { display: block; font-family: var(--dasar-sans); font-size: .58rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-soft); }
.dasar-home__story {
    max-width: 30ch !important; margin: 1.7rem auto 1.6rem !important; font-family: var(--dasar-display); font-style: italic;
    font-size: 1.16rem; line-height: 1.5; color: var(--dasar-title);
}
.dasar-home__address {
    display: flex; align-items: flex-start; gap: .8rem; max-width: 22rem; margin: 0 auto; padding: 1rem 1.15rem; text-align: left; border-radius: 18px;
    background: #fff; box-shadow: 0 0 0 1.5px var(--dasar-ring), 8px 8px 0 0 color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.dasar-home__address-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 12px 12px 6px 6px; color: #fff; background: var(--inv-primary); }
.dasar-home__address p { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.5; }
.dasar-home__address small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--dasar-clay); }

/* events: a white card, the photo under an arched top, a date "door" rising over the photo's edge */
.dasar-event + .dasar-event { margin-top: 2.6rem; }
.dasar-event__card {
    margin: 0 12px 0 0; padding: 0 0 1.3rem; border-radius: 28px; background: #fff; text-align: left;
    box-shadow: 0 0 0 1.5px var(--dasar-ring), 12px 12px 0 0 var(--inv-soft);
}
.dasar-event--flip .dasar-event__card { margin: 0 0 0 12px; box-shadow: 0 0 0 1.5px var(--dasar-ring), -12px 12px 0 0 color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.dasar-event__media { padding: .55rem .55rem 0; }
.dasar-event__photo { display: block; width: 100%; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: center 55%; border-radius: 140px 140px 18px 18px / 90px 90px 18px 18px; }
.dasar-event__top { display: flex; align-items: flex-end; gap: .9rem; padding: 1.2rem 1.15rem 0; }
.dasar-event__media + .dasar-event__top { margin-top: -3rem; }
/* only the date door rises over the photo; the name always starts below it */
.dasar-event__media + .dasar-event__top .dasar-event__head { padding-top: 3.3rem; }
.dasar-event--flip .dasar-event__top { flex-direction: row-reverse; text-align: right; }
.dasar-event__date {
    position: relative; display: flex; flex-direction: column; align-items: center; flex: none; width: 4.5rem; margin: 0; padding: 1rem .2rem .8rem;
    border-radius: 999px 999px 10px 10px; color: #fff; background: linear-gradient(180deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 0 0 0 4px #fff, 0 14px 22px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.dasar-event__date::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -5px; height: 6px; border-radius: 3px; background: var(--inv-gold); }
.dasar-event__weekday { font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-shine); }
.dasar-event__day { font-family: var(--dasar-display); font-size: 2.4rem; line-height: 1.05; }
.dasar-event__month { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dasar-event--flip .dasar-event__date { background: linear-gradient(180deg, color-mix(in srgb, var(--dasar-clay) 80%, #fff), var(--dasar-clay)); }
.dasar-event--flip .dasar-event__weekday { color: #fff; }
.dasar-event__head { min-width: 0; padding-bottom: .25rem; }
.dasar-event__name { margin: 0; font-family: var(--dasar-display); font-weight: 400; font-size: 1.6rem; line-height: 1.12; color: var(--dasar-title); }
.dasar-event__full { margin: .2rem 0 0; font-size: .8rem; font-weight: 700; color: var(--dasar-muted); }
.dasar-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(--dasar-ring); }
.dasar-event__rows li { display: flex; align-items: flex-start; gap: .7rem; }
.dasar-event__rows .dasar-icon { width: 2.1rem; height: 2.1rem; padding: .45rem; border-radius: 50%; color: var(--inv-deep); background: var(--inv-soft); }
.dasar-event__rows li > span { padding-top: .3rem; }
.dasar-event__venue { display: block; font-weight: 800; }
.dasar-event__address { display: block; font-size: .85rem; color: var(--dasar-muted); }
.dasar-event .inv-maps { margin: 1.15rem 1.15rem 0; text-align: center; }
.dasar-event .inv-maps .inv-button { width: 100%; font-weight: 700; }
.dasar-event .inv-maps__frame { height: 190px; border-radius: 18px; }

/* countdown: little cream arched windows with a gold line; the calendar card well below the buttons */
.dasar-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .8rem); }
.dasar-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.7rem); min-width: 0; aspect-ratio: 4 / 5; padding: .5rem 0 .2rem;
    border-radius: 999px 999px 10px 10px; color: var(--inv-text); background: var(--dasar-paper);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-deep) 70%, transparent), 0 0 0 4.5px var(--inv-shine), 0 18px 26px -12px rgb(0 0 0 / .55);
}
.dasar-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--dasar-display); font-size: 1.85rem; line-height: 1.05; color: var(--dasar-title); }
.dasar-countdown .inv-countdown__label { margin-top: .05rem; font-size: .55rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dasar-clay); }
.dasar-countdown .inv-countdown__done { font-family: var(--dasar-display); font-size: 1.3rem; font-style: italic; color: var(--inv-shine); }
.dasar-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.dasar-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);
}
.dasar-countdown .inv-countdown__actions .inv-button:first-child { color: #fff; background: var(--dasar-clay); box-shadow: none; }
.dasar-countdown .inv-cal {
    --inv-cal-bg: var(--dasar-paper); --inv-cal-mark: var(--inv-accent);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 120px 120px 22px 22px / 70px 70px 22px 22px; padding-top: 1.6rem;
    box-shadow: 0 0 0 1.5px var(--inv-shine), 10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.dasar-countdown .inv-cal__month { font-family: var(--dasar-display); font-size: 1.5rem; font-style: italic; color: var(--dasar-title); }

/* prayer: a tall white arched window panel with a primary frame line and a gold line, standing on a sill */
.dasar-prayer { padding-top: 4.4rem; padding-bottom: 4.6rem; }
.dasar-prayer__panel {
    position: relative; max-width: 21rem; margin: 0 auto; padding: 5rem 1.4rem 2.4rem; border-radius: 10.5rem 10.5rem 14px 14px;
    color: var(--inv-text); background: #fff;
    box-shadow: 0 0 0 4px var(--inv-primary), 0 0 0 9px var(--inv-background), 0 0 0 10.5px var(--inv-gold), var(--dasar-drop);
}
.dasar-prayer__sprig { position: absolute; bottom: 8px; width: 2.4rem; color: var(--inv-primary); }
.dasar-prayer__sprig--left { left: .2rem; }
.dasar-prayer__sprig--right { right: .2rem; }
.dasar-prayer__window { position: absolute; left: 50%; top: 1.3rem; width: 2.6rem; height: 2.6rem; margin-left: -1.3rem; fill: none; stroke: var(--inv-primary); stroke-width: 2; stroke-linecap: round; }
.dasar-prayer__glow { fill: var(--inv-shine); stroke: none; filter: drop-shadow(0 0 4px var(--inv-shine)); }
.dasar-prayer__eyebrow {
    display: inline-block; margin: 0 0 .9rem; padding: .28rem .85rem; border-radius: 999px; font-size: .68rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase; color: var(--inv-deep); background: var(--inv-soft);
}
.dasar-prayer__arabic { margin: 0 0 1rem; font-size: 1.6rem; }
.dasar-prayer__text { margin: 0; }
.dasar-prayer__text p { margin: 0; font-family: var(--dasar-display); font-size: 1.12rem; font-style: italic; line-height: 1.5; }
.dasar-prayer__text cite {
    display: inline-block; margin-top: 1rem; padding: .28rem .8rem; border-radius: 10px; font-style: normal; font-size: .72rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--dasar-clay);
}
.dasar-prayer__sill {
    position: relative; display: block; width: min(24.5rem, 100%); height: 12px; margin: 10px auto 0; border-radius: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 82%, #fff), var(--inv-accent) 60%, var(--dasar-clay));
    box-shadow: 0 12px 18px -10px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}

/* rundown: a garden path of sand stepping stones, the times on terracotta tags on the path */
.dasar-rundown__sprig { position: absolute; z-index: -1; right: .6rem; bottom: -.4rem; width: 4.2rem; color: var(--inv-shine); opacity: .55; }
.dasar-rundown__list { position: relative; margin: 0; padding: 0; list-style: none; text-align: left; }
.dasar-rundown__list::before {
    content: ''; position: absolute; left: calc(2.3rem - 7px); top: .4rem; bottom: .4rem; width: 14px; transform-origin: top;
    background: radial-gradient(ellipse 6px 4.5px, color-mix(in srgb, var(--inv-soft) 75%, transparent) 92%, transparent 100%) center 4px / 14px 18px repeat-y;
}
.dasar-rundown__item { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: start; column-gap: .75rem; padding: 0 0 .8rem; }
.dasar-rundown__item:last-child { padding-bottom: 0; }
.dasar-rundown__time {
    position: relative; justify-self: center; margin-top: .6rem; padding: .28rem .6rem; border-radius: 9px; font-size: .84rem; font-weight: 800;
    font-variant-numeric: tabular-nums; color: #fff; background: var(--dasar-clay);
    box-shadow: 0 0 0 3px var(--inv-deep), 0 6px 10px -4px rgb(0 0 0 / .4);
}
.dasar-rundown__body {
    padding: .75rem 1rem .8rem; border-radius: 16px; background: color-mix(in srgb, var(--inv-background) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-background) 14%, transparent), inset 3px 0 0 var(--inv-shine);
}
.dasar-rundown__body h3 { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: #fff; }
.dasar-rundown__body p { margin: .15rem 0 0; font-size: .86rem; color: var(--dasar-cream-muted); }

/* story: arched photo windows beside the text, alternating; text-only chapters as sand cards with a house badge */
.dasar-story__list { position: relative; display: grid; gap: 2.4rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.dasar-story__item { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: center; gap: 1.3rem; }
.dasar-story__item--flip { grid-template-columns: minmax(0, 1fr) 40%; }
.dasar-story__item--flip .dasar-story__media { order: 2; }
.dasar-story__media { position: relative; padding: 8px 8px 0; }
.dasar-story__media::before {
    content: ''; position: absolute; inset: 0 0 -2px; border: 1.5px solid var(--inv-gold); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none;
}
.dasar-story__media::after { content: ''; position: absolute; left: -6%; right: -6%; bottom: -8px; height: 8px; border-radius: 3px; background: var(--inv-primary); }
.dasar-story__item--flip .dasar-story__media::after { background: var(--inv-accent); }
.dasar-story__photo {
    display: block; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 999px 999px 8px 8px;
    box-shadow: 0 20px 30px -20px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.dasar-story__when {
    display: inline-block; padding: .22rem .7rem; border-radius: 8px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--dasar-clay);
}
.dasar-story__body h3 { margin: .5rem 0 0; font-family: var(--dasar-display); font-weight: 400; font-size: 1.42rem; line-height: 1.15; color: var(--dasar-title); }
.dasar-story__body p { margin: .4rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--dasar-muted); }
.dasar-story__item--text { grid-template-columns: 2.8rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.2rem; border-radius: 22px; background: var(--inv-soft); }
.dasar-story__badge {
    display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 999px 999px 10px 10px;
    color: #fff; background: var(--inv-primary); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--inv-gold);
}
.dasar-story__badge .dasar-icon { width: 1.3rem; height: 1.3rem; }

/* gallery: the first photo a tall arched doorway over two rows, the others rounded with a cream ring */
.dasar-gallery .inv-gallery { gap: .65rem; }
.dasar-gallery .inv-gallery__item { border-radius: 16px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-background) 80%, transparent), 0 16px 28px -18px rgb(0 0 0 / .7); }
.dasar-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; border-radius: 999px 999px 16px 16px; box-shadow: 0 0 0 3px var(--inv-shine), 0 16px 28px -18px rgb(0 0 0 / .7); }

/* live streaming: a primary card with an arched top-left corner */
.dasar-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.5rem 1.35rem 1.4rem;
    border-radius: 80px 26px 26px 26px; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, #fff 16%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-accent) 55%, transparent), var(--dasar-drop);
}
.dasar-stream__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #fff; background: var(--dasar-clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-shine) 70%, transparent); }
.dasar-stream__icon .dasar-icon { width: 1.7rem; height: 1.7rem; }
.dasar-stream__title { margin: 0 0 .15rem; font-family: var(--dasar-display); font-weight: 400; font-size: 1.65rem; line-height: 1.1; color: #fff; }
.dasar-stream__text p { margin: 0; font-size: .86rem; color: var(--dasar-cream-muted); }
.dasar-stream__text .dasar-stream__note { margin-top: .3rem; font-weight: 700; color: var(--inv-shine); }
.dasar-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--inv-shine) !important; font-weight: 800; }

/* RSVP card: a little house — a terracotta roof over a cream card, a gold block offset behind */
.dasar-rsvp__house { position: relative; margin-right: 10px; }
.dasar-rsvp__roof { display: block; width: calc(100% + 1.2rem); height: 4.2rem; margin: 0 -.6rem -1px; fill: var(--dasar-clay); filter: drop-shadow(0 -2px 0 var(--inv-shine)); }
.dasar-rsvp__card {
    position: relative; padding: 1.8rem 1.15rem 1.4rem; border-radius: 0 0 24px 24px; color: var(--inv-text); background: var(--dasar-paper);
    box-shadow: 10px 10px 0 0 color-mix(in srgb, var(--inv-shine) 75%, transparent), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.dasar-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--dasar-muted); }
.dasar-rsvp__sent { margin-bottom: 1rem; }
.dasar-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.dasar-rsvp__check circle { fill: var(--inv-primary); }
.dasar-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .dasar-rsvp__sent .dasar-rsvp__check { animation: dasar-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .dasar-rsvp__sent .dasar-rsvp__check path { animation: dasar-draw .45s ease-out .35s both; }
.dasar-rsvp__thanks { margin: 0; font-family: var(--dasar-display); font-size: 1.7rem; color: var(--dasar-title); }
.dasar-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--dasar-muted); }
.dasar-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--dasar-clay); }

/* gift: cream cards with an arched top and a terracotta roof line, two per row; the address below */
.dasar-gift__intro { color: var(--dasar-cream-muted); }
.dasar-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.dasar-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dasar-gift .inv-gift__account,
.dasar-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 1.6rem .75rem 1rem; border-radius: 70px 70px 18px 18px / 40px 40px 18px 18px; color: var(--inv-text); background: var(--dasar-paper);
    box-shadow: inset 0 3px 0 var(--inv-accent), 0 18px 30px -20px rgb(0 0 0 / .6);
}
.dasar-gift .inv-gift__account p, .dasar-gift .inv-gift__address p { margin: 0; }
.dasar-gift .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--dasar-title); }
.dasar-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.dasar-gift .inv-gift__logo img { max-width: 5rem; }
.dasar-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);
}
.dasar-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dasar-muted); overflow-wrap: anywhere; }
.dasar-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 700; }
.dasar-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.3rem; font-size: .875rem; border-radius: 18px; box-shadow: inset 0 3px 0 var(--inv-accent), 8px 8px 0 0 color-mix(in srgb, var(--inv-shine) 70%, transparent); }
.dasar-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: the names in the display serif, one per line, split by a tiny gold roof mark */
.dasar-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.dasar-cohosts__list li { max-width: 26ch; font-family: var(--dasar-display); font-size: 1.32rem; line-height: 1.3; color: #fff; }
.dasar-cohosts__list li + li::before {
    content: ''; display: block; width: 14px; height: 8px; margin: 0 auto .55rem;
    background: var(--inv-shine);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.5 7 7 1.5 12.5 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1.5 7 7 1.5 12.5 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* contacts: pill rows with the initial on an arched primary badge and a WhatsApp button */
.dasar-contacts__list { display: grid; gap: .75rem; max-width: 24rem; margin: 0 auto; }
.dasar-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .6rem .6rem .6rem .65rem; border-radius: 22px;
    background: #fff; text-align: left; box-shadow: 0 0 0 1.5px var(--dasar-ring), 6px 6px 0 0 var(--inv-soft);
}
.dasar-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 3.1rem; border-radius: 999px 999px 8px 8px;
    font-family: var(--dasar-display); font-size: 1.4rem; color: #fff; background: var(--inv-primary);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--inv-gold);
}
.dasar-contact p { margin: 0; }
.dasar-contact__name { font-weight: 800; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.dasar-contact__role { font-size: .78rem; color: var(--dasar-muted); }
.dasar-contact__phone { font-size: .85rem; }
.dasar-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 700; }
.dasar-contact__button .dasar-icon { width: 1.05rem; height: 1.05rem; }

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

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

/* closing: the full photo fading into the deep colour, the house, the thanks and the nameplate on a horizon */
.dasar-closing { padding: 3.1rem 1.6rem 1.9rem; }
.dasar-closing::after {
    content: ''; position: absolute; z-index: -1; left: 50%; bottom: -40%; width: 160%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--inv-shine) 24%, transparent), transparent 60%); pointer-events: none;
}
.dasar-closing--photo { padding-top: 0; }
.dasar-closing__photo { position: relative; z-index: -1; height: min(92vw, 52svh, 23rem); margin: 0 -1.6rem; overflow: hidden; }
.dasar-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 22%; --inv-parallax: 30px; }
.dasar-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 66%, var(--inv-deep) 97%);
}
.dasar-closing__body { position: relative; }
.dasar-closing--photo .dasar-closing__body { margin-top: -4.6rem; }
.dasar-closing__house { width: 4.2rem; margin: 0 auto .5rem; color: var(--inv-shine); }
.dasar-closing__eyebrow { margin: 0 0 .3rem; font-size: .7rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine); }
.dasar-closing__title { margin: 0 0 .7rem; font-family: var(--dasar-display); font-weight: 400; font-size: clamp(1.9rem, 8.5vw, 2.4rem); line-height: 1.05; color: #fff; }
.dasar-closing__title em { font-style: italic; color: var(--inv-shine); }
.dasar-closing__message { margin: 0 auto; max-width: 32ch; font-size: .92rem; line-height: 1.6; color: var(--dasar-cream-muted); }
.dasar-closing__salam { margin: .75rem auto 0; max-width: 24ch; font-family: var(--dasar-display); font-size: 1.06rem; font-style: italic; line-height: 1.35; color: var(--inv-shine); }
.dasar-closing__signature { margin: .75rem auto 0; max-width: 30ch; font-size: .86rem; color: var(--dasar-cream-muted); }
/* the nameplate on a gold horizon line across the section */
.dasar-closing__plate { margin-top: 1.3rem; background: radial-gradient(90% 120% at 30% 0%, color-mix(in srgb, #fff 18%, transparent), transparent 60%), linear-gradient(160deg, var(--dasar-clay), color-mix(in srgb, var(--dasar-clay) 70%, var(--inv-deep))); }
.dasar-closing__plate::after {
    content: ''; position: absolute; z-index: -2; top: 50%; left: -50vw; right: -50vw; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-shine) 70%, transparent) 30%, color-mix(in srgb, var(--inv-shine) 70%, transparent) 70%, transparent);
}

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

/* the three answers as big cards with icons (the radio dot is hidden but still focusable) */
.dasar-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.dasar-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.dasar-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: 60px 60px 14px 14px / 34px 34px 14px 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;
}
.dasar-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tinted circle (::before) with a check, a cross or a question mark on it (::after, a mask in the text colour) */
.dasar-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;
}
.dasar-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(--dasar-choice-icon) center / contain no-repeat; mask: var(--dasar-choice-icon) center / contain no-repeat;
}
.dasar-rsvp .inv-form__choices label:nth-of-type(1) {
    --dasar-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");
}
.dasar-rsvp .inv-form__choices label:nth-of-type(2) {
    --dasar-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");
}
.dasar-rsvp .inv-form__choices label:nth-of-type(3) {
    --dasar-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");
}
.dasar-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);
}
.dasar-rsvp .inv-form__choices label:has(input:checked)::before { background-color: rgb(255 255 255 / .2); transform: scale(1.1); }
.dasar-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.dasar-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 */
.dasar-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.dasar-wishes .inv-form {
    margin-right: 8px; padding: 1.3rem 1.1rem; border-radius: 24px; background: #fff;
    box-shadow: 8px 8px 0 0 var(--inv-primary);
}
.dasar-wishes .inv-wishes__list { margin-top: 1.4rem; }
.dasar-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(--dasar-ring);
}
.dasar-wishes .inv-wish { padding: .75rem .9rem; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 4px solid var(--inv-accent); }
.dasar-wishes .inv-wish__name { font-weight: 800; color: var(--dasar-title); }
.dasar-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.dasar-wishes .inv-wish__time { font-size: .72rem; color: var(--dasar-muted); }

/* ---------- 7. shared components ---------- */
.dasar-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(--dasar-sans);
}

/* the room under the page (for the fixed menu and music button) continues the closing's deep colour; with the
   platform credit present, the credit's own measured colour wins */
.dasar-main ~ .inv-music__space { background: var(--inv-deep); }
.dasar-main ~ .dasar-branding ~ .inv-music__space { background: var(--inv-end-bg, var(--inv-deep)); }

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

/* short phones: the cover art and type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .dasar-cover { --door-cover: min(58vw, 14rem, calc(37svh * .714)); padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .dasar-cover__title { margin-bottom: .5rem; }
    .dasar-cover__house { width: 4.2rem; margin-bottom: .75rem; }
    .dasar-cover .dasar-plate__name { font-size: 1.45rem; }
    .dasar-cover__text { margin-top: .7rem; }
    .dasar-cover__quote { font-size: .95rem; }
    .dasar-cover__guest { margin-top: .7rem; }
    .dasar-cover__open { margin-top: .8rem; }
}
@media (max-height: 660px) {
    .dasar-cover { --door-cover: min(54vw, calc(34svh * .714)); padding-top: 1.2rem; padding-bottom: 1.3rem; }
    .dasar-cover__title { margin-bottom: .4rem; font-size: .66rem; }
    .dasar-cover__house { width: 3.5rem; margin-bottom: .6rem; }
    .dasar-cover__number { width: 2.5rem; height: 2.5rem; right: -2.7rem; font-size: 1rem; }
    .dasar-cover__number--long { font-size: .7rem; }
    .dasar-cover .dasar-plate { padding: .4rem .6rem; }
    .dasar-cover .dasar-plate__name { font-size: 1.3rem; }
    .dasar-cover__text { margin-top: .55rem; }
    .dasar-cover__date { font-size: .86rem; }
    .dasar-cover__quote { font-size: .86rem; line-height: 1.32; }
    .dasar-cover__guest { padding: .4rem .85rem .5rem; }
    .dasar-cover__guest-name { font-size: 1.1rem; }
    .dasar-cover__open { min-height: 2.75rem; padding: .6rem 1.6rem; }
}
/* very short screens (in-app browsers): a smaller doorway and quote, so everything fits */
@media (max-height: 600px) {
    .dasar-cover { --door-cover: min(48vw, calc(30svh * .714)); padding-top: 1rem; }
    .dasar-cover__house { width: 3rem; margin-bottom: .5rem; }
    .dasar-cover .dasar-plate__name { font-size: 1.2rem; }
    .dasar-cover__quote { font-size: .82rem; line-height: 1.28; }
}

/* wide screens: the phone-width column on a deep backdrop with the tile print */
@media (min-width: 560px) {
    body.dasar-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.dasar-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .1; background: var(--inv-shine);
        -webkit-mask: var(--dasar-tiles) center / 36px 36px repeat; mask: var(--dasar-tiles) center / 36px 36px repeat;
    }
    .dasar-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes dasar-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes dasar-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes dasar-photo-in { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dasar-zoom-out { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes dasar-light { 0% { opacity: 0; } 60% { opacity: 1; } 75% { opacity: .65; } 100% { opacity: 1; } }
@keyframes dasar-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dasar-unfold { from { opacity: 0; transform: rotate(-14deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes dasar-unfold-flip { from { opacity: 0; transform: scaleX(-1) rotate(-14deg) scale(.6); } to { opacity: 1; transform: scaleX(-1); } }
@keyframes dasar-plate { 0% { opacity: 0; transform: translateY(12px) scale(.94); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes dasar-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes dasar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* cover (≤ 2.5 s, once): the doorway fades up and its photo settles from a slight zoom (0–1.1 s), the house
   draws itself (.15–1.25 s) and its windows light up (1.1–1.8 s), the sprigs unfold (.7–1.4 s), the
   nameplate settles (.8–1.5 s) and the number badge pops in (1.2 s); the text follows through its
   inv-enter delays */
html.inv-anim .dasar-doorway--cover { animation: dasar-photo-in .9s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .dasar-doorway--cover .dasar-doorway__photo { animation: dasar-zoom-out 1.1s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .dasar-cover__house .dasar-house__line { stroke-dasharray: 1; animation: dasar-draw 1.1s ease-out .15s both; }
html.inv-anim .dasar-cover__house :is(.dasar-house__leaf, .dasar-house__knob) { animation: dasar-fade .5s ease .9s both; }
html.inv-anim .dasar-cover__house .dasar-house__glow { animation: dasar-light .7s ease 1.1s both; }
html.inv-anim .dasar-cover__sprig { animation: dasar-unfold .7s cubic-bezier(.3, .8, .3, 1) .7s both; }
html.inv-anim .dasar-cover__sprig.dasar-sprig--flip { animation-name: dasar-unfold-flip; }
html.inv-anim .dasar-cover__plate { animation: dasar-plate .7s cubic-bezier(.3, .8, .3, 1) .8s both; }
html.inv-anim .dasar-cover__number { animation: dasar-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }

/* section houses draw themselves once when their section part is revealed, then the windows light up */
html.inv-anim .dasar-draw .dasar-house__line,
html.inv-anim .dasar-draw .dasar-occasion__ray { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim .dasar-draw :is(.dasar-house__glow, .dasar-house__leaf, .dasar-occasion__disc) { opacity: 0; }
html.inv-anim :is(.is-revealed .dasar-draw, .dasar-draw.is-revealed) :is(.dasar-house__line, .dasar-occasion__ray) { animation: dasar-draw 1.2s ease-out .25s both; }
html.inv-anim :is(.is-revealed .dasar-draw, .dasar-draw.is-revealed) .dasar-house__leaf { animation: dasar-fade .6s ease 1s both; }
html.inv-anim :is(.is-revealed .dasar-draw, .dasar-draw.is-revealed) :is(.dasar-house__glow, .dasar-occasion__disc) { animation: dasar-light .8s ease 1.2s both; }

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

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

/* ---------- 10. intro scene "Fajar di Rumah Syukur" (scene.json + sections/_scene) ---------- */
.dasar-scene-tiles {
    position: absolute; inset: 0; opacity: .07; background: var(--inv-primary);
    -webkit-mask: var(--dasar-tiles) center top / 36px 36px repeat; mask: var(--dasar-tiles) center top / 36px 36px repeat;
}
/* a soft sun with gold rings, centred on the house's roof */
.dasar-scene-sun {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--inv-shine) 75%, #fff) 0 9%, transparent 9.4%),
        repeating-radial-gradient(circle at 50% 42%, transparent 0 18px, color-mix(in srgb, var(--inv-gold) 26%, transparent) 18px 19.5px),
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--inv-shine) 60%, transparent), transparent 52%);
    -webkit-mask: radial-gradient(circle at 50% 42%, #000 22%, transparent 48%); mask: radial-gradient(circle at 50% 42%, #000 22%, transparent 48%);
}
.dasar-scene-house { width: 100%; height: 100%; color: var(--inv-primary); }
html.inv-anim .dasar-scene-house .dasar-house__line { stroke-dasharray: 1; animation: dasar-draw 1.6s ease-out .45s both; }
html.inv-anim .dasar-scene-house :is(.dasar-house__leaf, .dasar-house__knob) { animation: dasar-fade .6s ease 1.7s both; }
html.inv-anim .dasar-scene-house .dasar-house__glow { animation: dasar-light .9s ease 2.2s both; }
.dasar-scene-ground {
    position: absolute; inset: 0; border-radius: 50% 50% 0 0 / 14% 14% 0 0;
    background: radial-gradient(64% 100% at 50% 0%, color-mix(in srgb, var(--inv-soft) 85%, var(--inv-gold) 15%) 20%, transparent 100%);
}
.dasar-scene-ground::before {
    content: ''; position: absolute; left: 6%; right: 6%; top: 0; height: 6px; border-radius: 4px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-accent) 82%, #fff), var(--inv-accent) 60%, var(--dasar-clay));
}
.dasar-scene-path { display: block; width: 100%; height: 100%; }
.dasar-scene-path ellipse {
    fill: color-mix(in srgb, var(--inv-soft) 70%, var(--inv-gold) 18%);
    stroke: color-mix(in srgb, var(--inv-gold) 55%, transparent); stroke-width: .6; vector-effect: non-scaling-stroke;
}
.dasar-scene-sprig { width: 100%; height: 100%; color: var(--inv-primary); }
/* the new house key on a short gold cord: a ring and a terracotta tag with the key */
.dasar-scene-key { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; }
.dasar-scene-key__cord { flex: 1; min-height: 1rem; width: 1.5px; background: linear-gradient(180deg, transparent, var(--inv-gold)); }
.dasar-scene-key__ring { width: 1.1rem; height: 1.1rem; margin-top: -2px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--inv-gold); }
.dasar-scene-key__tag {
    display: grid; place-items: center; width: 3rem; height: 3.6rem; margin-top: -5px; border-radius: 1.5rem 1.5rem 10px 10px; color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dasar-clay) 80%, #fff), var(--dasar-clay));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 22%, transparent), 0 12px 18px -10px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.dasar-scene-key__tag .dasar-icon { width: 1.7rem; height: 1.7rem; }
/* the name card = the house nameplate: a deep plaque, a fine gold inner line, two brass screws */
body.dasar-body .inv-intro--scene .inv-scene__card {
    top: 58%; -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; aspect-ratio: auto;
    padding: 1.15rem 2.3rem 1.25rem; border-radius: 18px; color: #fff;
    background: radial-gradient(90% 120% at 30% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 60%), linear-gradient(160deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 22px 34px -16px color-mix(in srgb, var(--inv-deep) 85%, transparent);
}
body.dasar-body .inv-intro--scene .inv-scene__card::before {
    content: ''; position: absolute; inset: 6px; border-radius: 13px; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 70%, transparent);
}
body.dasar-body .inv-intro--scene .inv-scene__card::after {
    content: ''; position: absolute; left: .85rem; right: .85rem; top: 50%; height: .62rem; margin-top: -.31rem; pointer-events: none;
    background:
        radial-gradient(circle at 35% 30%, #fff8e6, var(--inv-shine) 45%, color-mix(in srgb, var(--inv-shine) 50%, var(--inv-deep)) 100%) left / .62rem .62rem no-repeat,
        radial-gradient(circle at 35% 30%, #fff8e6, var(--inv-shine) 45%, color-mix(in srgb, var(--inv-shine) 50%, var(--inv-deep)) 100%) right / .62rem .62rem no-repeat;
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35));
}
body.dasar-body .inv-scene__card .inv-intro__label {
    font-family: var(--dasar-sans); font-size: .62rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-shine);
}
body.dasar-body .inv-scene__card .inv-intro__names { color: #fff; line-height: 1.08; overflow-wrap: anywhere; text-wrap: balance; }
body.dasar-body .inv-scene__card .inv-intro__rule { width: 2.4rem; height: 3px; border-radius: 3px; background: var(--inv-accent); }
body.dasar-body .inv-scene__card .inv-intro__date { font-family: var(--dasar-sans); font-weight: 700; font-size: .8rem; letter-spacing: .02em; color: var(--dasar-cream-muted); white-space: nowrap; }