/*
 * Template "Hitam Putih Editorial" (Lamaran & Tunangan): an engagement announced like a fashion-editorial
 * spread / a one-day gallery exhibition. Warm white paper, ink black, a warm grey stone and ONE accent.
 * Client photos are high-contrast black & white with a fine grain (body.hp-photo--mono), or in their own
 * colours for the "Foto Berwarna" variant (body.hp-photo--colour). Huge didone type (Bodoni Moda), thin
 * rules, running folios with page numbers, pull quotes, big numerals for dates. Mobile-first, one column
 * (~460px) on an ink backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (ink: titles, slabs, ink sections)   --inv-accent (the one accent: rules, kickers, poster)
 *   --inv-background (paper)   --inv-text   --inv-stone (warm grey sections)
 *   --inv-onaccent (text on the accent poster)   --inv-photo (#000000 = B&W photos, #ffffff = colour; read in Blade)
 * Everything else is mixed from those.
 *
 * Section tones (set in each partial): .hp-tone--paper, --stone, --ink, --accent.
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion).
 *
 * Contents: 1 base · 2 tones & photo backgrounds · 3 shared pieces (folio, heading, print, pull quote,
 *           link) · 4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes ·
 *           9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Hitam Merah" variant */
    --inv-primary: #121212;
    --inv-accent: #b3121f;
    --inv-background: #f3f0ea;
    --inv-text: #161412;
    --inv-stone: #e2dcd2;
    --inv-onaccent: #ffffff;
    --inv-radius: 0px;

    --hp-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif;
    --hp-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hp-col: 460px;
    --hp-muted: color-mix(in srgb, var(--inv-text) 74%, var(--inv-background));
    --hp-acc-ink: color-mix(in srgb, var(--inv-accent) 80%, var(--inv-primary));
    --hp-acc-lite: color-mix(in srgb, var(--inv-accent) 62%, #fff);
    --hp-on-ink: color-mix(in srgb, var(--inv-background) 94%, #fff);
    --hp-on-ink-muted: color-mix(in srgb, var(--inv-background) 72%, var(--inv-primary));
    --hp-hair: color-mix(in srgb, var(--inv-text) 22%, transparent);
    --hp-hair-ink: color-mix(in srgb, var(--inv-background) 22%, transparent);
    --hp-ink-deep: color-mix(in srgb, var(--inv-primary) 88%, #000);
    --hp-filter: grayscale(1) contrast(1.14) brightness(1.03);

    /* film grain (a desaturated noise tile, laid over photos and ink sections) as transparent black/white specks,
       so no blend mode is needed (iPhone Safari draws blended grain as flat grey). -mul = exactly what multiply gave;
       overlay only ever lightened this grain, so -lift is the mask of the light specks (coloured with --hp-lift-*)
       and -ovl the same specks in white for photos */
    --hp-grain-mul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0' result='g'/%3E%3CfeFlood flood-color='%23fff' color-interpolation-filters='sRGB'/%3E%3CfeComposite in='g' operator='over' color-interpolation-filters='sRGB'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1 0 0 0 1' color-interpolation-filters='sRGB'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --hp-grain-ovl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0' result='g'/%3E%3CfeFlood flood-color='%23808080' color-interpolation-filters='sRGB'/%3E%3CfeComposite in='g' operator='over' color-interpolation-filters='sRGB'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 0 0 0' color-interpolation-filters='sRGB'/%3E%3CfeComponentTransfer color-interpolation-filters='sRGB'%3E%3CfeFuncR type='discrete' tableValues='0 1'/%3E%3CfeFuncG type='discrete' tableValues='0 1'/%3E%3CfeFuncB type='discrete' tableValues='0 1'/%3E%3CfeFuncA type='table' tableValues='0 0 .6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --hp-grain-lift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0' result='g'/%3E%3CfeFlood flood-color='%23808080' color-interpolation-filters='sRGB'/%3E%3CfeComposite in='g' operator='over' color-interpolation-filters='sRGB'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 1 0 0 0 0' color-interpolation-filters='sRGB'/%3E%3CfeComponentTransfer color-interpolation-filters='sRGB'%3E%3CfeFuncR type='discrete' tableValues='0 1'/%3E%3CfeFuncG type='discrete' tableValues='0 1'/%3E%3CfeFuncB type='discrete' tableValues='0 1'/%3E%3CfeFuncA type='table' tableValues='0 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* the colour of the lightening specks: overlay lifts a channel B to at most 2B, so specks of 2 × the colour
       (clamped) give exactly what overlay gave (fallback without relative colours: a lighter mix) */
    --hp-lift-ink: color-mix(in srgb, var(--inv-primary) 88%, #fff);
    --hp-lift-acc: color-mix(in srgb, var(--inv-accent) 62%, #fff);

    --inv-ambient-1: var(--inv-accent);
    --inv-ambient-2: var(--inv-background);
}
@supports (color: rgb(from red r g b)) {
    :root {
        --hp-lift-ink: rgb(from var(--inv-primary) calc(r * 2) calc(g * 2) calc(b * 2));
        --hp-lift-acc: rgb(from var(--inv-accent) calc(r * 2) calc(g * 2) calc(b * 2));
    }
}
body.hp-photo--colour { --hp-filter: saturate(1.04) contrast(1.04); }

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--hp-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; }

.hp-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; the folio numbers count from 02 (the cover is 01) */
.hp-main { max-width: var(--hp-col); margin: 0 auto; counter-reset: hp-folio 1; }
.hp-branding { max-width: var(--hp-col); margin: 0 auto; }

.hp-section { position: relative; isolation: isolate; overflow: hidden; padding: 3.2rem 1.4rem 4.4rem; text-align: left; }
.hp-section > p { margin: 0 0 1rem; max-width: 36ch; }

.hp-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; }
.hp-amp { font-family: var(--hp-serif); font-style: italic; font-weight: 400; color: var(--hp-acc-ink); }

/* ---------- 2. tones & photo backgrounds ---------- */
.hp-tone--paper { background: var(--inv-background); }
.hp-tone--stone { background: var(--inv-stone); }
/* two light sections of the same tone in a row (a hidden section between them): shift the second one */
.hp-tone--paper + .hp-tone--paper { background: color-mix(in srgb, var(--inv-stone) 45%, var(--inv-background)); }
.hp-tone--stone + .hp-tone--stone { background: color-mix(in srgb, var(--inv-stone) 45%, var(--inv-background)); }
.hp-tone--ink {
    color: var(--hp-on-ink);
    background:
        radial-gradient(90% 45% at 0% 0%, color-mix(in srgb, var(--inv-primary) 80%, #fff 9%), transparent 70%),
        var(--inv-primary);
}
.hp-tone--accent {
    color: var(--inv-onaccent);
    background:
        radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--inv-accent) 82%, #fff), transparent 70%),
        radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--inv-accent) 78%, #000), transparent 72%),
        var(--inv-accent);
}
/* paper grain on every tone: faint on paper, stronger on ink and accent */
.hp-tone--paper::before, .hp-tone--stone::before, .hp-tone--ink::before, .hp-tone--accent::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--hp-grain-mul) 0 0 / 180px 180px; opacity: .07;
}
.hp-tone--ink::before, .hp-tone--accent::before { background: var(--hp-lift-ink); -webkit-mask: var(--hp-grain-lift) 0 0 / 180px 180px; mask: var(--hp-grain-lift) 0 0 / 180px 180px; opacity: .16; }
.hp-tone--accent::before { background: var(--hp-lift-acc); }
.hp-tone--ink .hp-arabic { color: var(--hp-on-ink); }
.hp-tone--ink .hp-amp { color: var(--hp-acc-lite); }

/* a client photo behind a section, under a strong ink gradient */
.hp-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hp-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 35%; filter: var(--hp-filter); --inv-parallax: 40px; }
.hp-bgphoto::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-primary) 90%, transparent),
        color-mix(in srgb, var(--inv-primary) 80%, transparent) 40%,
        color-mix(in srgb, var(--inv-primary) 84%, transparent) 70%,
        color-mix(in srgb, var(--inv-primary) 95%, transparent));
}

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

/* running folio: a rule, the names, the page number */
.hp-folio {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 2.6rem; padding-top: .55rem;
    border-top: 1px solid currentColor; counter-increment: hp-folio;
    font-size: .62rem; font-weight: 600; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase;
}
.hp-folio__names { min-width: 0; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.hp-folio__no { flex: none; font-family: var(--hp-serif); font-style: italic; font-weight: 500; font-size: .95rem; letter-spacing: 0; text-transform: none; }
.hp-folio__no::before { content: 'Hal. ' counter(hp-folio, decimal-leading-zero); }
.hp-tone--ink .hp-folio { border-top-color: var(--hp-hair-ink); color: var(--hp-on-ink-muted); }
.hp-tone--paper .hp-folio, .hp-tone--stone .hp-folio { border-top-color: var(--inv-text); color: var(--hp-muted); }
.hp-tone--accent .hp-folio { border-top-color: color-mix(in srgb, var(--inv-onaccent) 55%, transparent); }

/* heading: kicker (accent bar + small caps), then the didone title with an italic accent word */
.hp-heading { margin: 0 0 2.2rem; }
.hp-heading--center { text-align: center; }
.hp-heading__kicker {
    display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 .7rem;
    font-size: .68rem; font-weight: 600; line-height: 1.25; letter-spacing: .26em; text-transform: uppercase; color: var(--hp-acc-ink);
}
.hp-heading__kicker::before { content: ''; width: 1.7rem; height: 3px; flex: none; background: var(--inv-accent); }
.hp-heading__title {
    margin: 0; font-family: var(--hp-serif); font-size: 3rem; font-weight: 500; line-height: .98;
    letter-spacing: -.025em; color: var(--inv-primary); text-wrap: balance;
}
.hp-heading__title em { font-style: italic; font-weight: 400; color: var(--hp-acc-ink); }
.hp-tone--ink .hp-heading__kicker { color: var(--hp-acc-lite); }
.hp-tone--ink .hp-heading__kicker::before { background: var(--hp-acc-lite); }
.hp-tone--ink .hp-heading__title { color: #fff; }
.hp-tone--ink .hp-heading__title em { color: var(--hp-acc-lite); }

/* icons */
.hp-icon { width: 1.1rem; height: 1.1rem; flex: none; }

/* a photo print: square corners, B&W + grain, an optional caption */
.hp-print { position: relative; margin: 0; }
.hp-print__frame { position: relative; overflow: hidden; aspect-ratio: var(--print-ratio, 3 / 4); background: color-mix(in srgb, var(--inv-text) 12%, var(--inv-stone)); }
.hp-print__frame::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--hp-grain-ovl) 0 0 / 180px 180px; opacity: .22;
}
.hp-photo--colour .hp-print__frame::after { opacity: .1; }
.hp-print__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--print-pos, center 30%); filter: var(--hp-filter); }
.hp-print__empty {
    position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--hp-serif); font-style: italic; font-weight: 400;
    font-size: 9rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--inv-primary);
    background: radial-gradient(80% 60% at 30% 20%, color-mix(in srgb, #fff 45%, transparent), transparent 70%), var(--inv-stone);
}
.hp-print__caption {
    margin-top: .5rem; padding-top: .4rem; border-top: 1px solid var(--hp-hair);
    font-size: .64rem; font-weight: 600; line-height: 1.35; letter-spacing: .18em; text-transform: uppercase; color: var(--hp-muted);
}
.hp-print--wide { --print-ratio: 3 / 2; --print-pos: center 45%; margin-bottom: 1.4rem; }

/* pull quote: a giant accent quotation mark and the text in the didone */
.hp-pullquote { position: relative; margin: 2.4rem 0 0; padding: 2.7rem 0 0; }
.hp-pullquote__mark {
    position: absolute; left: -.3rem; top: -1.4rem; font-family: var(--hp-serif); font-size: 7.5rem; font-weight: 500; line-height: 1;
    color: var(--inv-accent);
}
.hp-tone--ink .hp-pullquote__mark { color: var(--hp-acc-lite); }
.hp-pullquote p { margin: 0; font-family: var(--hp-serif); font-size: 1.32rem; font-weight: 400; line-height: 1.42; letter-spacing: -.005em; }
.hp-pullquote cite {
    display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; font-style: normal;
    font-size: .66rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
}
.hp-pullquote cite::before { content: ''; width: 1.7rem; height: 1px; background: currentColor; }

/* an underlined link (Instagram) */
.hp-link {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.2rem; padding: .2rem 0;
    font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; color: var(--inv-primary);
    background: linear-gradient(var(--inv-accent), var(--inv-accent)) left calc(100% - .2rem) / 100% 1.5px no-repeat;
}
.hp-link .hp-icon { width: 1rem; height: 1rem; }

/* ---------- 4. cover ---------- */
.hp-cover {
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    color: var(--inv-text); background: var(--inv-background);
    transition: opacity .8s ease;
}
.hp-cover::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--hp-grain-mul) 0 0 / 180px 180px; opacity: .08;
}
.hp-cover__inner {
    /* --hp-f: the size of the names; follows the longer nickname (--hp-name-len, set in Blade) and the screen height */
    --hp-f: min(5.7rem, 9.4svh, calc(min(100vw, 460px) * 1.52 / var(--hp-name-len, 7)));
    display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: var(--hp-col); min-height: 100svh;
    margin: 0 auto; padding: 1rem 0 2.3rem;
}

.hp-cover__mast {
    display: flex; align-items: center; gap: .8rem; margin: 0 1.2rem;
    font-size: .66rem; font-weight: 700; line-height: 1.2; letter-spacing: .3em; text-transform: uppercase;
}
.hp-cover__title { display: inline-flex; align-items: center; gap: .55rem; }
.hp-cover__title::before { content: ''; width: .6rem; height: .6rem; background: var(--inv-accent); }
.hp-cover__rule { flex: 1; height: 1px; background: var(--inv-text); }
.hp-cover__folio { font-family: var(--hp-serif); font-style: italic; font-weight: 500; font-size: .95rem; letter-spacing: 0; }

/* the stage: photo window (left 78%), the plaque in the margin column, the names across the lower edge */
.hp-cover__stage { position: relative; flex: 1 1 auto; min-height: calc(12rem + var(--hp-f) * .55); max-height: 40rem; margin-top: .85rem; }
.hp-cover__window {
    position: absolute; z-index: 1; left: 0; top: 0; right: 22%; bottom: calc(var(--hp-f) * .55); overflow: hidden;
    background: radial-gradient(90% 60% at 30% 20%, color-mix(in srgb, var(--inv-primary) 70%, #fff 14%), transparent 70%), var(--inv-primary);
}
.hp-cover__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; filter: var(--hp-filter); }
/* grain + a soft darkening at the bottom only, under the white names */
.hp-cover__window::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, color-mix(in srgb, var(--inv-primary) 62%, transparent), transparent 38%);
}
.hp-cover__window::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--hp-grain-ovl) 0 0 / 180px 180px; opacity: .22;
}
.hp-cover__initials {
    position: absolute; left: 0; right: 0; top: 10%; display: flex; justify-content: center; gap: .1em;
    font-family: var(--hp-serif); font-style: italic; font-size: min(11rem, 40vw, 22svh); line-height: 1;
    color: transparent; -webkit-text-stroke: 1.3px color-mix(in srgb, #fff 70%, transparent);
}

.hp-cover__names {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; margin: 0; padding: 0 1.1rem;
    font-family: var(--hp-serif); font-size: var(--hp-f); font-weight: 500; line-height: .9; letter-spacing: -.035em;
    white-space: nowrap; color: var(--inv-primary);
}
.hp-cover__line { display: block; }
.hp-cover__line--two { align-self: flex-end; }
.hp-cover__line i { font-weight: 400; color: var(--inv-accent); }
/* the white copy lives inside the window: same position, measured from the stage */
.hp-cover__names--light { z-index: 2; right: auto; width: calc(100% / .78); bottom: calc(var(--hp-f) * -.55); color: #fff; }
.hp-cover__names--light .hp-cover__line i { color: var(--hp-acc-lite); }

.hp-cover__plaque {
    position: absolute; right: 0; top: 0; width: 22%; display: flex; flex-direction: column; align-items: center; margin: 0;
    font-family: var(--hp-serif); line-height: .95; color: var(--inv-primary);
}
.hp-cover__num { font-size: min(2.5rem, 10.5vw, 5.4svh); font-weight: 500; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.hp-cover__num + .hp-cover__num { margin-top: .15rem; padding-top: .25rem; border-top: 2px solid var(--inv-accent); }
.hp-cover__year { margin-top: .4rem; font-family: var(--hp-sans); font-size: .64rem; font-weight: 700; letter-spacing: .2em; }
.hp-cover__vertical {
    margin-top: .9rem; writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--hp-sans); font-size: .6rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--hp-muted);
}

.hp-cover__quote {
    margin: 1rem 1.2rem 0; padding-left: .85rem; border-left: 2px solid var(--inv-accent);
    font-family: var(--hp-serif); font-style: italic; font-size: 1.04rem; line-height: 1.38; color: var(--hp-muted);
}

.hp-cover__foot { margin: 1rem 1.2rem 0; }
.hp-cover__guest { padding-top: .55rem; border-top: 1px solid var(--hp-hair); }
.hp-cover__guest p { margin: 0; font-size: .6rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--hp-acc-ink); }
.hp-cover__guest-name { display: block; margin-top: .1rem; font-family: var(--hp-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.2; color: var(--inv-text); overflow-wrap: anywhere; }
.hp-cover__open {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.1rem; margin-top: .85rem;
    padding: .7rem 1.2rem; border-radius: 0; font-size: .74rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
    color: var(--inv-background); background: var(--inv-primary);
}
.hp-cover__open .hp-icon { width: 1.25rem; height: 1.25rem; }

/* leaving: the cover fades away */
.hp-cover--leave { transition: opacity .8s ease .05s; }
.hp-cover--gone { opacity: 0; }

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

/* opening: ink over a faint photo; the greeting, the message, the verse as a pull quote */
.hp-opening { padding-bottom: 4.6rem; }
.hp-opening__basmalah { margin: 0 0 1rem !important; max-width: none !important; font-size: 1.85rem; text-align: right; }
.hp-opening__greeting { max-width: 18ch !important; font-family: var(--hp-serif); font-style: italic; font-size: 2.05rem; font-weight: 400; line-height: 1.12; letter-spacing: -.01em; color: #fff; }
.hp-opening__message { max-width: 32ch !important; color: var(--hp-on-ink-muted); }
.hp-opening__quote p { color: #fff; }
.hp-opening__quote cite { color: var(--hp-acc-lite); }

/* couple: two editorial pages */
.hp-person__spread { display: grid; grid-template-columns: minmax(0, 1fr) 4.4rem; gap: .9rem; align-items: start; }
.hp-person--flip .hp-person__spread { grid-template-columns: 4.4rem minmax(0, 1fr); }
.hp-person--flip .hp-person__margin { order: -1; }
.hp-person .hp-print { --print-ratio: 4 / 5; --print-pos: center 28%; }
.hp-person__margin { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hp-person__index { font-family: var(--hp-serif); font-size: 3.7rem; font-weight: 500; line-height: .82; letter-spacing: -.05em; color: var(--inv-accent); }
.hp-person__vertical {
    writing-mode: vertical-rl; transform: rotate(180deg); font-size: .62rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--hp-muted);
}
.hp-person__text { margin-top: 1.2rem; }
.hp-person--flip .hp-person__text { text-align: right; }
.hp-person__label { display: none; }
.hp-person__nickname {
    margin: 0; font-family: var(--hp-serif); font-size: 4rem; font-weight: 500; line-height: .9; letter-spacing: -.035em; color: var(--inv-primary);
    overflow-wrap: anywhere;
}
.hp-person__name { margin: .55rem 0 0; font-size: .82rem; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-text); overflow-wrap: anywhere; }
.hp-person__parents { margin: .7rem 0 .6rem; font-family: var(--hp-serif); font-size: 1.02rem; line-height: 1.4; color: var(--hp-muted); }
.hp-person__parents span:first-child { display: block; font-family: var(--hp-sans); font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--hp-acc-ink); }
.hp-person__parents strong { font-weight: 500; color: var(--inv-text); }
.hp-person__parents .hp-amp { padding: 0 .25em; }
.hp-couple__amp { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 2.2rem; }
.hp-couple__amp::before, .hp-couple__amp::after { content: ''; flex: 1; height: 1px; background: var(--inv-text); }
.hp-couple__amp span { font-family: var(--hp-serif); font-style: italic; font-size: 5.4rem; font-weight: 400; line-height: .7; color: var(--inv-accent); }

/* families: the intent as the lead pull quote, then the interview */
.hp-families__intent { margin-top: 0; }
.hp-families__intent p { font-style: italic; font-size: 1.42rem; color: #fff; }
.hp-interview { margin: 2.6rem 0 0; }
.hp-interview__pair { position: relative; padding: 1.3rem 0 1.4rem; border-top: 1px solid var(--hp-hair-ink); }
.hp-interview__pair:last-child { border-bottom: 1px solid var(--hp-hair-ink); }
.hp-interview__q { padding-right: 7.2rem; font-size: .76rem; font-weight: 600; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-acc-lite); }
.hp-interview__q span { letter-spacing: 0; }
.hp-interview__a { margin: .6rem 0 0; }
.hp-interview__tag {
    position: absolute; right: 0; top: 1.3rem; padding: .2rem .5rem; font-size: .56rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--hp-on-ink); box-shadow: inset 0 0 0 1px var(--hp-hair-ink);
}
.hp-interview__name { display: block; font-family: var(--hp-serif); font-size: 1.75rem; font-weight: 500; line-height: 1.1; letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.hp-interview__j { font-style: italic; font-weight: 400; font-size: .7em; color: var(--hp-acc-lite); }
.hp-interview__detail { display: flex; align-items: flex-start; gap: .5rem; margin-top: .65rem; font-size: .88rem; line-height: 1.5; color: var(--hp-on-ink-muted); }
.hp-interview__detail .hp-icon { margin-top: .15rem; color: var(--hp-acc-lite); }

/* events: an editorial spec sheet per event */
.hp-event + .hp-event { margin-top: 3.4rem; padding-top: 2.2rem; border-top: 2px solid var(--inv-primary); }
.hp-event__top { display: flex; align-items: flex-end; gap: .9rem; }
.hp-event--flip .hp-event__top { flex-direction: row-reverse; text-align: right; }
.hp-event__day { margin: 0; font-family: var(--hp-serif); font-size: 6.6rem; font-weight: 500; line-height: .74; letter-spacing: -.06em; color: var(--inv-primary); font-variant-numeric: lining-nums; }
.hp-event__when { display: flex; flex-direction: column; margin: 0 0 .1rem; padding-left: .8rem; border-left: 3px solid var(--inv-accent); }
.hp-event--flip .hp-event__when { padding: 0 .8rem 0 0; border-left: 0; border-right: 3px solid var(--inv-accent); }
.hp-event__when span:first-child { font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--hp-acc-ink); }
.hp-event__when span:last-child { font-family: var(--hp-serif); font-style: italic; font-size: 1.25rem; line-height: 1.2; }
.hp-event__name { margin: 1rem 0 0; font-family: var(--hp-serif); font-size: 2rem; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; color: var(--inv-primary); }
.hp-event--flip .hp-event__name { text-align: right; }
.hp-event__spec { margin: 1.1rem 0 0; }
.hp-event__spec > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; padding: .75rem 0; border-top: 1px solid var(--hp-hair); }
.hp-event__spec > div:last-child { border-bottom: 1px solid var(--hp-hair); }
.hp-event__spec dt { padding-top: .2rem; font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--hp-muted); }
.hp-event__spec dd { margin: 0; font-size: .94rem; line-height: 1.5; }
.hp-event__venue { display: block; font-weight: 600; }
.hp-event__address { display: block; font-size: .86rem; color: var(--hp-muted); }
.hp-event .inv-maps { margin-top: 1.2rem; }
.hp-event .inv-maps .inv-button {
    width: 100%; min-height: 2.9rem; border-radius: 0; font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--inv-primary); background: transparent; box-shadow: inset 0 0 0 1.5px var(--inv-primary);
}
.hp-event .inv-maps__frame { height: 190px; border-radius: 0; filter: grayscale(1) contrast(1.05); }
.hp-photo--colour .hp-event .inv-maps__frame { filter: none; }

/* countdown: big didone numerals split by thin rules */
.hp-countdown .inv-countdown { justify-content: stretch; gap: 0; margin-top: .4rem; border-top: 1px solid var(--hp-hair-ink); border-bottom: 1px solid var(--hp-hair-ink); }
.hp-countdown .inv-countdown__item { flex: 1; min-width: 0; padding: 1rem .2rem .9rem; border-radius: 0; background: none; text-align: center; }
.hp-countdown .inv-countdown__item + .inv-countdown__item { border-left: 1px solid var(--hp-hair-ink); }
.hp-countdown .inv-countdown__value { font-family: var(--hp-serif); font-size: clamp(2.3rem, 11vw, 3.1rem); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; color: #fff; }
.hp-countdown .inv-countdown__label { margin-top: .45rem; font-size: .58rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--hp-acc-lite); opacity: 1; }
.hp-countdown .inv-countdown__done { font-family: var(--hp-serif); font-size: 1.5rem; font-style: italic; color: #fff; }
.hp-countdown .inv-countdown__actions { flex-direction: column; align-items: stretch; gap: .55rem; margin-top: 1.8rem; }
.hp-countdown .inv-countdown__actions .inv-button {
    width: 100%; min-height: 2.8rem; border-radius: 0; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
    color: var(--hp-on-ink); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hp-on-ink) 55%, transparent);
}
.hp-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-primary); background: var(--inv-background); box-shadow: none; }
.hp-countdown .inv-cal {
    --inv-cal-bg: var(--inv-background); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--inv-accent);
    max-width: 20rem; margin: 2.8rem auto 0; border-radius: 0; box-shadow: 0 24px 40px -24px rgb(0 0 0 / .7);
}
.hp-countdown .inv-cal__month { font-family: var(--hp-serif); font-size: 1.6rem; font-weight: 500; font-style: italic; color: var(--inv-primary); }

/* wedding plan: the date poster on the accent colour */
.hp-plan { padding-bottom: 4.6rem; }
.hp-plan::after {
    content: '&'; position: absolute; right: -1.4rem; bottom: -4.2rem; z-index: -1; pointer-events: none;
    font-family: var(--hp-serif); font-style: italic; font-size: 22rem; line-height: 1; color: var(--inv-onaccent); opacity: .1;
}
.hp-plan__label { margin: 0 0 1.2rem !important; font-size: .7rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.hp-plan__date { display: flex; flex-direction: column; margin: 0 0 .2rem !important; max-width: none !important; font-family: var(--hp-serif); }
.hp-plan__lead { font-style: italic; font-size: 3rem; font-weight: 400; line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.hp-plan__big { font-size: min(9.6rem, 40vw); font-weight: 500; line-height: .82; letter-spacing: -.06em; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.hp-plan__big--long { font-size: min(5rem, 19vw); line-height: .95; letter-spacing: -.03em; }
.hp-plan__path {
    display: flex; align-items: center; gap: .9rem; margin: 1.8rem 0 0; padding: .85rem 0; list-style: none;
    border-top: 1px solid color-mix(in srgb, var(--inv-onaccent) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-onaccent) 45%, transparent);
}
.hp-plan__path li { display: flex; flex-direction: column; }
.hp-plan__path strong { font-family: var(--hp-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.1; }
.hp-plan__path span { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.hp-plan__arrow { flex: 1; align-items: center; }
.hp-plan__arrow .hp-icon { width: 100%; max-width: 3.4rem; height: 1.4rem; stroke-width: 1.2; }
.hp-plan__city { display: inline-flex; align-items: center; gap: .45rem; margin: 1.2rem 0 0 !important; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hp-plan__city .hp-icon { width: 1rem; height: 1rem; }
.hp-plan__note { max-width: 30ch !important; margin: .7rem 0 0 !important; font-family: var(--hp-serif); font-style: italic; font-size: 1.2rem; line-height: 1.42; }

/* rundown: the programme, rows split by hairlines; the ink rule draws itself */
.hp-rundown__list { position: relative; margin: 0; padding: 0; list-style: none; }
.hp-rundown__list::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--inv-primary); transform-origin: left; }
.hp-rundown__item { display: grid; grid-template-columns: 1.7rem 4.6rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--hp-hair); }
.hp-rundown__index { padding-top: .55rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; color: var(--hp-acc-ink); }
.hp-rundown__time { font-family: var(--hp-serif); font-size: 1.7rem; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--inv-primary); }
.hp-rundown__body h3 { margin: .2rem 0 0; font-size: .98rem; font-weight: 600; line-height: 1.4; }
.hp-rundown__body p { margin: .2rem 0 0; font-size: .86rem; color: var(--hp-muted); }

/* love story: chapters with huge outlined Roman numerals */
.hp-story__list { display: grid; gap: 3rem; margin: 0; padding: 0; list-style: none; }
.hp-story__head { display: flex; align-items: flex-end; gap: .9rem; margin: 0 0 .9rem; }
.hp-story__numeral {
    font-family: var(--hp-serif); font-size: 4.6rem; font-weight: 600; line-height: .78; letter-spacing: -.02em;
    color: transparent; -webkit-text-stroke: 1.3px var(--inv-primary);
}
.hp-story__when { padding-bottom: .15rem; font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--hp-acc-ink); }
.hp-story__item .hp-print { --print-ratio: 4 / 5; width: 80%; }
.hp-story__item--flip .hp-print { margin-left: auto; }
.hp-story__item--flip .hp-story__head { flex-direction: row-reverse; }
.hp-story__body { width: 88%; margin-top: 1rem; }
.hp-story__item--flip .hp-story__body { margin-left: auto; text-align: right; }
.hp-story__body h3 { margin: 0; font-family: var(--hp-serif); font-style: italic; font-size: 1.8rem; font-weight: 400; line-height: 1.08; letter-spacing: -.01em; color: var(--inv-primary); }
.hp-story__body p { margin: .4rem 0 0; font-size: .92rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-text) 82%, var(--inv-stone)); }
.hp-story__item--text .hp-story__body { width: 100%; margin-top: 0; padding-left: 1rem; border-left: 3px solid var(--inv-accent); }
.hp-story__item--text.hp-story__item--flip .hp-story__body { padding: 0 1rem 0 0; border-left: 0; border-right: 3px solid var(--inv-accent); }

/* gallery: square-cornered prints, numbered */
.hp-gallery .inv-gallery { gap: .5rem; counter-reset: hp-print; }
.hp-gallery .inv-gallery__item { border-radius: 0; aspect-ratio: 4 / 5; counter-increment: hp-print; }
.hp-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.hp-gallery .inv-gallery__item:nth-child(4n + 4) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.hp-gallery .inv-gallery__item img { filter: var(--hp-filter); }
.hp-gallery .inv-gallery__item::after {
    content: counter(hp-print, decimal-leading-zero); position: absolute; left: .55rem; bottom: .4rem;
    font-family: var(--hp-serif); font-style: italic; font-size: 1rem; line-height: 1; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .6);
}

/* live streaming: an ink slab like a lower-third */
.hp-stream__card { padding: 1.6rem 1.4rem 1.5rem; color: var(--hp-on-ink); background: var(--inv-primary); box-shadow: 10px 10px 0 var(--inv-accent); margin-right: 10px; }
.hp-stream__tag { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .64rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.hp-stream__tag i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--hp-acc-lite); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hp-acc-lite) 30%, transparent); }
.hp-stream__title { margin: .6rem 0 .5rem; font-family: var(--hp-serif); font-size: 2.2rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; color: #fff; }
.hp-stream__title em { font-weight: 400; color: var(--hp-acc-lite); }
.hp-stream__text { margin: 0; font-size: .9rem; color: var(--hp-on-ink-muted); }
.hp-stream__note { margin: .35rem 0 0; font-size: .84rem; font-weight: 600; color: #fff; }
.hp-stream__button {
    display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 2.9rem; margin-top: 1.2rem; border-radius: 0;
    font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-primary) !important; background: var(--inv-background) !important;
}

/* RSVP: a square reply card with an accent bar */
.hp-rsvp__card { position: relative; padding: 1.9rem 1.15rem 1.4rem; color: var(--inv-text); background: var(--inv-background); border-top: 5px solid var(--inv-accent); box-shadow: 0 26px 44px -26px rgb(0 0 0 / .8); }
.hp-rsvp__intro { margin: 0 0 1.1rem; font-family: var(--hp-serif); font-style: italic; font-size: 1.1rem; line-height: 1.4; color: var(--hp-muted); }
.hp-rsvp__sent { margin-bottom: 1rem; text-align: center; }
.hp-rsvp__check { display: block; width: 4rem; height: 4rem; margin: 0 auto .6rem; overflow: visible; }
.hp-rsvp__check-box { fill: var(--inv-primary); }
.hp-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: square; stroke-dasharray: 1; }
html.inv-anim .hp-rsvp__sent .hp-rsvp__check { animation: hp-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .hp-rsvp__sent .hp-rsvp__check path { animation: hp-draw .45s ease-out .3s both; }
.hp-rsvp__thanks { margin: 0; font-family: var(--hp-serif); font-size: 2rem; font-weight: 500; letter-spacing: -.02em; color: var(--inv-primary); }
.hp-rsvp__thanks em { font-weight: 400; color: var(--hp-acc-ink); }
.hp-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--hp-muted); }
.hp-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--hp-acc-ink); }

/* gift: paper museum labels */
.hp-gift__intro { max-width: 34ch; color: var(--hp-on-ink-muted); }
.hp-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.4rem; }
.hp-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hp-gift .inv-gift__account,
.hp-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-width: 0; margin: 0;
    padding: 1.25rem .85rem 1rem; border-radius: 0; color: var(--inv-text); background: var(--inv-background); text-align: left;
    border-top: 4px solid var(--inv-accent);
}
.hp-gift .inv-gift__account p, .hp-gift .inv-gift__address p { margin: 0; }
.hp-gift .inv-gift__bank { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-muted); }
.hp-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .45rem; border-radius: 0; background: #fff; }
.hp-gift .inv-gift__logo img { max-width: 5rem; }
.hp-gift .inv-gift__number { font-family: var(--hp-serif); font-size: 1.22rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; font-variant-numeric: lining-nums; overflow-wrap: anywhere; color: var(--inv-primary); }
.hp-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--hp-muted); overflow-wrap: anywhere; }
.hp-gift .inv-button {
    margin-top: .4rem; min-height: 2.3rem; padding: .35rem .85rem; border-radius: 0; font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--inv-primary); background: transparent; box-shadow: inset 0 0 0 1.2px var(--inv-primary);
}
.hp-gift .inv-gift__address { margin-top: .6rem; font-size: .88rem; }

/* co-hosts: a credits list */
.hp-cohosts__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--inv-primary); }
.hp-cohosts__list li { display: flex; align-items: baseline; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--hp-hair); font-family: var(--hp-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.3; }
.hp-cohosts__list li span { flex: none; width: 1.4rem; font-family: var(--hp-sans); font-size: .64rem; font-weight: 700; color: var(--hp-acc-ink); }

/* contacts: rows with an ink initial square */
.hp-contacts__list { border-top: 2px solid var(--inv-primary); }
.hp-contact { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .8rem 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 25%, transparent); }
.hp-contact__avatar { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; font-family: var(--hp-serif); font-style: italic; font-size: 1.5rem; color: #fff; background: var(--inv-primary); }
.hp-contact p { margin: 0; }
.hp-contact__name { font-family: var(--hp-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.hp-contact__role { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-acc-ink); }
.hp-contact__phone { font-size: .86rem; }
.hp-contact__button { gap: .4rem; min-height: 2.5rem; padding: .45rem .9rem; border-radius: 0; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-background); background: var(--inv-primary); }
.hp-contact__button .hp-icon { width: 1rem; height: 1rem; }

/* health protocol: square outlined tags */
.hp-protocol__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hp-protocol__list li { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; font-size: .84rem; font-weight: 500; box-shadow: inset 0 0 0 1px var(--inv-primary); }
.hp-protocol__list .hp-icon { width: 1rem; height: 1rem; color: var(--inv-accent); }
.hp-protocol__note { font-size: .9rem; color: var(--hp-muted); }

/* vendors: the colophon */
.hp-vendors__list { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--inv-primary); }
.hp-vendor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .8rem; padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 25%, transparent); }
.hp-vendor__role { grid-column: 1 / -1; font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--hp-acc-ink); }
.hp-vendor__name { min-width: 0; font-family: var(--hp-serif); font-size: 1.3rem; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.hp-vendor__link { font-size: .74rem; }

/* closing: the full photo fading into ink, then the thanks, the names and the end mark */
.hp-closing { padding: 3.1rem 1.4rem 2rem; text-align: center; }
.hp-closing--photo { padding-top: 0; }
.hp-closing__photo { position: relative; z-index: -1; height: min(92vw, 52svh, 23rem); margin: 0 -1.4rem; overflow: hidden; }
.hp-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 30%; filter: var(--hp-filter); --inv-parallax: 30px; }
.hp-photo--mono .hp-closing__photo img { filter: grayscale(1) contrast(1.32) brightness(.94); }
.hp-closing__photo::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: var(--hp-grain-ovl) 0 0 / 180px 180px; opacity: .14;
}
.hp-closing__photo::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 25%, transparent), transparent 22%, transparent 44%, color-mix(in srgb, var(--inv-primary) 72%, transparent) 72%, var(--inv-primary) 98%);
}
.hp-closing__body { position: relative; }
.hp-closing--photo .hp-closing__body { margin-top: -3.4rem; }
.hp-closing__title { margin: 0 0 .75rem; font-family: var(--hp-serif); font-size: clamp(1.9rem, 8.5vw, 2.4rem); font-weight: 500; line-height: .95; letter-spacing: -.035em; color: #fff; }
.hp-closing__title em { font-weight: 400; color: var(--hp-acc-lite); }
.hp-closing__message { max-width: 32ch; margin: 0 auto; font-size: .92rem; line-height: 1.6; color: var(--hp-on-ink-muted); }
.hp-closing__salam { max-width: 26ch; margin: .8rem auto 0; font-family: var(--hp-serif); font-style: italic; font-size: 1.08rem; line-height: 1.3; color: #fff; }
.hp-closing__signature { margin: .85rem auto 0; font-size: .64rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--hp-acc-lite); }
.hp-closing__names { margin: .4rem 0 0; font-family: var(--hp-serif); font-size: clamp(2.1rem, 9.5vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.hp-closing__monogram { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .7rem 0 0; font-family: var(--hp-serif); font-size: .96rem; letter-spacing: .1em; color: var(--hp-on-ink-muted); }
.hp-closing__monogram::before, .hp-closing__monogram::after { content: ''; width: 2rem; height: 1px; background: var(--hp-hair-ink); }
.hp-closing__monogram i { font-style: normal; color: var(--hp-acc-lite); }
.hp-closing__end { margin: 1.1rem 0 0; font-family: var(--hp-serif); font-style: italic; font-size: .95rem; color: var(--hp-on-ink-muted); }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.hp-main .inv-form { gap: 1rem; text-align: left; }
.hp-main .inv-form label, .hp-main .inv-form__choices legend { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-text); }
.hp-main .inv-form input:not([type=radio]):not([type=checkbox]),
.hp-main .inv-form select,
.hp-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .85rem; border: 0; border-radius: 0;
    font: 400 .95rem/1.4 var(--hp-sans); letter-spacing: 0; text-transform: none; color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 30%, transparent);
    transition: box-shadow .2s ease;
}
.hp-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='%23555' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.hp-main .inv-form input:not([type=radio]):focus-visible,
.hp-main .inv-form select:focus-visible,
.hp-main .inv-form textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 3px color-mix(in srgb, var(--inv-accent) 35%, transparent); }
.hp-main .inv-form button[type=submit] {
    width: 100%; min-height: 3rem; border-radius: 0; font-size: .74rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
    color: var(--inv-background); background: var(--inv-primary);
}
.hp-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; border-radius: 0; }
.hp-main .inv-form__notice { text-align: center; }

/* the three answers as square tiles with icons (the radio dot is hidden but still focusable) */
.hp-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.hp-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.hp-rsvp .inv-form__choices label {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; min-height: 5.2rem; padding: .85rem .3rem .75rem;
    cursor: pointer; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: none; line-height: 1.2;
    color: var(--inv-text); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 26%, transparent);
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.hp-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hp-rsvp .inv-form__choices label::before { content: ''; width: 2rem; height: 2rem; flex: none; box-shadow: inset 0 0 0 1.5px var(--inv-accent); }
.hp-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.25rem; width: 1.2rem; height: 1.2rem; margin-left: -.6rem;
    background: currentColor; color: var(--inv-primary); pointer-events: none;
    -webkit-mask: var(--hp-choice-icon) center / contain no-repeat; mask: var(--hp-choice-icon) center / contain no-repeat;
}
.hp-rsvp .inv-form__choices label:nth-of-type(1) { --hp-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.4' stroke-linecap='square'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.hp-rsvp .inv-form__choices label:nth-of-type(2) { --hp-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.4' stroke-linecap='square'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); }
.hp-rsvp .inv-form__choices label:nth-of-type(3) { --hp-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.4' 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"); }
.hp-rsvp .inv-form__choices label:has(input:checked) { color: var(--inv-background); background: var(--inv-primary); box-shadow: inset 0 -4px 0 var(--inv-accent); }
.hp-rsvp .inv-form__choices label:has(input:checked)::before { box-shadow: inset 0 0 0 1.5px var(--hp-acc-lite); }
.hp-rsvp .inv-form__choices label:has(input:checked)::after { color: #fff; }
.hp-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-accent); outline-offset: 2px; }

/* wishes: the form on a square paper card with an ink offset block; the wishes in a scroll box */
.hp-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.hp-wishes .inv-form { margin-right: 8px; padding: 1.3rem 1.1rem; background: var(--inv-background); box-shadow: 8px 8px 0 0 var(--inv-primary); }
.hp-wishes .inv-wishes__list { margin-top: 1.6rem; }
.hp-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .5rem; border-radius: 0; background: color-mix(in srgb, var(--inv-background) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-text) 18%, transparent); }
.hp-wishes .inv-wish { padding: .8rem .9rem; border-radius: 0; background: var(--inv-background); border-left: 3px solid var(--inv-accent); }
.hp-wishes .inv-wish__name { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inv-primary); }
.hp-wishes .inv-wish__message { font-family: var(--hp-serif); font-size: 1.02rem; line-height: 1.45; }
.hp-wishes .inv-wish__time { font-size: .7rem; color: var(--hp-muted); opacity: 1; }
.hp-wishes .inv-wishes__page-button { border-radius: 0; }

/* ---------- 7. shared components ---------- */
.hp-main .inv-button { border-radius: 0; font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-background) 95%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 70%, transparent);
    --inv-nav-active: var(--inv-primary);
    font-family: var(--hp-sans);
}

/* ---------- 8. screen sizes ---------- */
@media (min-width: 420px) {
    .hp-cohosts__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
}

/* short phones: tighter cover so everything fits without scrolling */
@media (max-height: 760px) {
    .hp-cover__inner { padding: .85rem 0 2.2rem; }
    .hp-cover__stage { margin-top: .7rem; }
    .hp-cover__quote { margin-top: .85rem; font-size: .98rem; line-height: 1.33; }
    .hp-cover__foot { margin-top: .85rem; }
    .hp-cover__guest-name { font-size: 1.2rem; }
    .hp-cover__open { min-height: 2.9rem; margin-top: .7rem; }
}
@media (max-height: 660px) {
    .hp-cover__inner { padding: .7rem 0 2.1rem; }
    .hp-cover__stage { min-height: calc(10rem + var(--hp-f) * .55); margin-top: .6rem; }
    .hp-cover__quote { margin-top: .7rem; font-size: .9rem; line-height: 1.3; }
    .hp-cover__foot { margin-top: .7rem; }
    .hp-cover__guest { padding-top: .4rem; }
    .hp-cover__guest-name { font-size: 1.1rem; }
    .hp-cover__open { min-height: 2.75rem; margin-top: .6rem; padding: .55rem 1.1rem; }
    .hp-cover__vertical { display: none; }
}
@media (max-height: 580px) {
    .hp-cover__stage { min-height: calc(9rem + var(--hp-f) * .55); }
    .hp-cover__quote { font-size: .84rem; }
    .hp-cover__guest-name { font-size: 1.04rem; line-height: 1.15; }
}

/* wide screens: the phone-width column on an ink backdrop */
@media (min-width: 560px) {
    body.hp-body { background: var(--inv-primary); }
    body.hp-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: var(--hp-lift-ink); -webkit-mask: var(--hp-grain-lift) 0 0 / 180px 180px; mask: var(--hp-grain-lift) 0 0 / 180px 180px; opacity: .2;
    }
    .hp-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
}

/* ---------- 9. motion ---------- */
@keyframes hp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hp-pop { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes hp-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hp-settle { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes hp-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* cover (≤ 2.5 s, once): the window wipes open from the top while the photo settles (0–1.3 s), the hairline
   of the masthead draws; the numerals and the names rise through their inv-enter delays (done by ~2.4 s) */
html.inv-anim .hp-cover__window { animation: hp-wipe 1.15s cubic-bezier(.65, 0, .35, 1) .1s both; }
html.inv-anim .hp-cover__photo { animation: hp-settle 1.4s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .hp-cover__rule { transform-origin: left; animation: hp-rule 1s cubic-bezier(.65, 0, .35, 1) .2s both; }

/* scroll-drawn rule over the programme (without support it is simply shown) */
@supports (animation-timeline: view()) {
    html.inv-anim .hp-rundown__list::before { animation: hp-rule linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
}

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

/* ---------- intro scene "Sampul Edisi Khusus" (scene.json + sections/_scene; the intro lives in <body>, outside the page) ---------- */
/* the layout table: warm paper, grain, the faint accent guides of the cover grid */
.hp-scene-paper {
    position: absolute; inset: 0; background-color: var(--inv-background);
    background-image:
        linear-gradient(90deg, transparent calc(6% - .5px), color-mix(in srgb, var(--inv-accent) 22%, transparent) 6%, transparent calc(6% + .5px), transparent calc(94% - .5px), color-mix(in srgb, var(--inv-accent) 22%, transparent) 94%, transparent calc(94% + .5px)),
        linear-gradient(180deg, transparent calc(58% - .5px), color-mix(in srgb, var(--inv-accent) 18%, transparent) 58%, transparent calc(58% + .5px)),
        radial-gradient(70% 45% at 70% 70%, rgb(255 255 255 / .55), transparent 70%);
}
.hp-scene-paper::before { content: ''; position: absolute; inset: 0; background: var(--hp-grain-mul) 0 0 / 180px 180px; opacity: .08; }
/* the accent page lifted off at the start, like turning to the cover */
.hp-scene-slab {
    position: absolute; inset: 0; box-shadow: 0 30px 40px -20px rgb(0 0 0 / .45);
    background: radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--inv-accent) 82%, #fff), transparent 70%), var(--inv-accent);
}
/* its grain: light specks, as overlay gave */
.hp-scene-slab::after { content: ''; position: absolute; inset: 0; background: var(--hp-lift-acc); -webkit-mask: var(--hp-grain-lift) 0 0 / 180px 180px; mask: var(--hp-grain-lift) 0 0 / 180px 180px; }
/* the cover photo column (B&W + grain, or the colours of "Foto Berwarna"); without a photo: ink with the date numerals */
.hp-scene-photo { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; background: var(--hp-ink-deep); }
.hp-scene-photo::before { content: ''; z-index: 1; position: absolute; inset: 0; background: var(--hp-scene-photo, none) center 24% / cover no-repeat; filter: var(--hp-filter); }
.hp-scene-photo::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, transparent 62%, rgb(0 0 0 / .35)), var(--hp-grain-ovl) 0 0 / 180px 180px;
    opacity: .5;
}
.hp-scene-photo span { grid-area: 1 / 1; font: 400 min(25vw, 15svh)/.86 var(--hp-serif); color: var(--hp-on-ink); text-align: center; }
.hp-scene-photo span::first-line { color: var(--hp-acc-lite); }
/* the giant didone initials in the margin column: the groom's outlined, the bride's solid */
.hp-scene-letter {
    height: 100%; container-type: size; display: flex; align-items: center; justify-content: flex-end;
    font: 400 min(19svh, 30vw)/.8 var(--hp-serif); color: var(--inv-text);
}
.hp-scene-letter span { font-size: min(100cqh, 110cqw); }
.hp-scene-letter--0 { color: transparent; -webkit-text-stroke: 1.5px var(--inv-text); }
/* the floating "&" over the photo's corner */
.hp-scene-amp {
    height: 100%; container-type: size; display: grid; place-items: center;
    font: italic 400 min(19svh, 32vw)/1 var(--hp-serif); color: var(--inv-accent);
    text-shadow: 0 10px 22px rgb(0 0 0 / .18);
}
.hp-scene-amp span { font-size: min(110cqh, 100cqw); }
/* printer's crop marks at the four corners (difference: dark on the paper, light on the photo) */
.inv-scene__layer:has(.hp-scene-marks) { mix-blend-mode: difference; }
.hp-scene-marks {
    --m: #fff; position: absolute; inset: 2.6% 4%;
    background:
        linear-gradient(var(--m), var(--m)) left top / 22px 1px, linear-gradient(var(--m), var(--m)) left top / 1px 22px,
        linear-gradient(var(--m), var(--m)) right top / 22px 1px, linear-gradient(var(--m), var(--m)) right top / 1px 22px,
        linear-gradient(var(--m), var(--m)) left bottom / 22px 1px, linear-gradient(var(--m), var(--m)) left bottom / 1px 22px,
        linear-gradient(var(--m), var(--m)) right bottom / 22px 1px, linear-gradient(var(--m), var(--m)) right bottom / 1px 22px;
    background-repeat: no-repeat;
}
/* the running folio (as on every page): a hairline over the names and the page number */
.hp-scene-folio {
    display: flex; justify-content: space-between; align-items: flex-start; height: 100%; padding-top: .4rem; border-top: 1px solid var(--hp-hair);
    font: 500 .58rem/1.3 var(--hp-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--hp-muted);
}
.hp-scene-folio span:last-child { font: 400 .8rem/1 var(--hp-serif); letter-spacing: .04em; color: var(--inv-text); }
/* the barcode box of a newsstand cover, with the issue line */
.hp-scene-barcode { display: flex; align-items: stretch; gap: .6rem; height: 100%; padding: 6px; background: color-mix(in srgb, var(--inv-background) 40%, #fff); }
.hp-scene-barcode i {
    flex: 0 0 52%;
    background: repeating-linear-gradient(90deg, var(--inv-text) 0 2px, transparent 2px 3px, var(--inv-text) 3px 4px, transparent 4px 7px, var(--inv-text) 7px 10px, transparent 10px 11px, var(--inv-text) 11px 12px, transparent 12px 15px);
}
.hp-scene-barcode span { align-self: center; font: 600 .56rem/1.45 var(--hp-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--inv-text); }
/* the card: the cover lines on white paper, an ink bar on top, left-aligned after an accent square */
body.hp-body .inv-intro--scene .inv-scene__card {
    top: 70%; aspect-ratio: auto; padding: 1.15rem 1.35rem 1.1rem; text-align: left; place-content: center stretch;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: color-mix(in srgb, var(--inv-background) 35%, #fff); border-top: 4px solid var(--inv-primary);
    box-shadow: 0 0 0 1px rgb(0 0 0 / .05), 0 24px 34px -24px rgb(0 0 0 / .55);
}
body.hp-body .inv-scene__card .inv-intro__label {
    display: flex; align-items: center; gap: .6rem; font: 600 .62rem/1.35 var(--hp-sans); letter-spacing: .28em; text-transform: uppercase; color: var(--hp-muted);
}
body.hp-body .inv-scene__card .inv-intro__label::before { content: ''; flex: none; width: .55rem; height: .55rem; background: var(--inv-accent); }
body.hp-body .inv-scene__card .inv-intro__names { margin-top: .3rem; font-family: var(--hp-serif) !important; font-weight: 400; font-size: clamp(2.1rem, 10vw, 2.9rem); line-height: 1.02; color: var(--inv-text); }
body.hp-body .inv-scene__card .inv-intro__rule { width: 100%; margin: .65rem 0 .55rem; background: var(--hp-hair); transform-origin: left; }
body.hp-body .inv-scene__card .inv-intro__date { font: 500 .78rem/1.3 var(--hp-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hp-acc-ink); }
body.hp-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--inv-background) 85%, transparent); border-color: var(--hp-hair); color: var(--inv-text); }