/*
 * Template "Buku Tahunan" (Reuni & Halal Bihalal) — the reunion invitation as a premium yearbook.
 * A hard leather cover (deep colour, grain, a gold-foil double frame, the crest, a ribbon bookmark) that
 * swings open on its spine; inside, cream yearbook pages with a running head and a page number, the title
 * page, a "senior superlatives" page, a table of contents, yearbook spreads, autograph pages, library cards,
 * a staff page of portrait ovals, a colophon and the back cover.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (leather / book cloth: titles on cream, banners, buttons)
 *   --inv-accent (darker gold: rules and ornaments on cream — never text)
 *   --inv-background (cream page)   --inv-text (ink)   --inv-deep (the deep leather)
 *   --inv-shine (bright gold: foil and gold TEXT on the leather only)   --inv-gold (spare)   --inv-soft (tint)
 * Everything else is mixed from those, so a new variant only needs these eight colours.
 *
 * Rule of the template: gold is only used as text on the dark tones (leather, cloth); on the cream pages
 * gold appears in rules, diamonds and photo corners, and text is the leather colour or the ink.
 *
 * Section tones (set in each partial): .bt-tone--paper (cream page, gutter shadow on the left),
 * --tint (tinted page, gutter on the right), --leather (deep leather with grain), --cloth (book cloth in
 * the primary colour). .bt-endpaper adds a faint foil lattice to a leather section. Page numbers are a CSS
 * counter over .bt-page (sections/_folio).
 *
 * Tilts use the individual `rotate` property (not `transform`), so the reveal-on-scroll transforms of
 * invitation.js never undo them. Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest
 * prefers reduced motion); without it everything is shown finished.
 *
 * Contents: 1 base · 2 tones · 3 shared pieces (heading, foil, crest, folio, photo, seal, frame, doodle,
 *           medal) · 4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes ·
 *           9 motion
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Marun Emas" variant (the variant's colours override these) */
    --inv-primary: #7c1d2d;
    --inv-accent: #b5832e;
    --inv-background: #f7f0e1;
    --inv-text: #2a1a1c;
    --inv-deep: #4a0e1a;
    --inv-shine: #ebcb7c;
    --inv-gold: #8c6220;
    --inv-soft: #ecdcbf;
    --inv-radius: 10px;

    --bt-serif: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
    --bt-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bt-hand: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
    --bt-col: 460px;

    --bt-paper: color-mix(in srgb, #fff 45%, var(--inv-background));
    --bt-ink: color-mix(in srgb, var(--inv-primary) 72%, var(--inv-deep));
    --bt-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    --bt-cream: color-mix(in srgb, #fff 30%, var(--inv-background));
    --bt-cream-muted: color-mix(in srgb, var(--inv-background) 86%, transparent);
    --bt-ring: color-mix(in srgb, var(--inv-primary) 18%, transparent);
    --bt-rule: color-mix(in srgb, var(--inv-accent) 70%, transparent);
    --bt-pen: color-mix(in srgb, var(--inv-primary) 88%, #000);
    --bt-drop: 0 24px 32px -22px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* gold foil: three stops (also used by the crest's SVG gradient) and the sweep for text and buttons */
    --bt-foil-1: color-mix(in srgb, #fff 42%, var(--inv-shine));
    --bt-foil-2: var(--inv-shine);
    --bt-foil-3: color-mix(in srgb, var(--inv-accent) 82%, var(--inv-deep));
    --bt-foil: linear-gradient(100deg, var(--bt-foil-3) 0%, var(--bt-foil-2) 20%, var(--bt-foil-1) 34%, var(--bt-foil-2) 48%, var(--bt-foil-3) 64%, var(--bt-foil-2) 80%, var(--bt-foil-1) 100%);

    /* a fine noise tile for the leather grain and the paper fibre (an inline SVG, no image file) */
    /* the grain is black noise in its alpha channel: drawn normally it equals the old multiply/overlay over these dark
       or light paper grounds, so no blend modes are needed (iOS Safari draws blends over images wrongly) */
    --bt-grain: 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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%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(--bt-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); }

.bt-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; the page counter */
.bt-main { max-width: var(--bt-col); margin: 0 auto; counter-reset: bt-page 1; }
.bt-branding { max-width: var(--bt-col); margin: 0 auto; }

.bt-section { position: relative; isolation: isolate; overflow: hidden; padding: 4.6rem 1.5rem; text-align: center; }
.bt-section > p { margin: 0 auto 1rem; max-width: 34ch; }
.bt-page { counter-increment: bt-page; }

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

/* ---------- 2. tones ---------- */

/* paper: a cream page, the gutter shadow on its left edge, a soft warm light in the top corner, fibre */
.bt-tone--paper {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-deep) 13%, transparent), color-mix(in srgb, var(--inv-deep) 3%, transparent) 3%, transparent 7%),
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-shine) 18%, transparent), transparent 72%),
        var(--bt-paper);
}
/* tint: the tinted page, gutter on the right edge */
.bt-tone--tint {
    background:
        linear-gradient(270deg, color-mix(in srgb, var(--inv-deep) 13%, transparent), color-mix(in srgb, var(--inv-deep) 3%, transparent) 3%, transparent 7%),
        linear-gradient(180deg, color-mix(in srgb, var(--inv-soft) 80%, var(--inv-background)), color-mix(in srgb, var(--inv-soft) 40%, var(--inv-background)));
}
.bt-tone--paper::before, .bt-tone--tint::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--bt-grain); opacity: .07;
}

/* leather: the deep colour with a soft sheen of the primary at the top, grain over it */
.bt-tone--leather {
    color: var(--inv-background);
    background:
        radial-gradient(110% 50% at 15% 0%, color-mix(in srgb, var(--inv-primary) 75%, transparent), transparent 72%),
        radial-gradient(80% 40% at 100% 100%, color-mix(in srgb, #000 28%, transparent), transparent 72%),
        var(--inv-deep);
}
/* cloth: the primary colour as book cloth (a fine weave), a gold glow at the top */
.bt-tone--cloth {
    color: #fff;
    background:
        repeating-linear-gradient(0deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgb(0 0 0 / .05) 0 1px, transparent 1px 3px),
        radial-gradient(90% 40% at 50% 0%, color-mix(in srgb, var(--inv-shine) 20%, transparent), transparent 72%),
        radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, var(--inv-deep) 55%, transparent), transparent 72%),
        var(--inv-primary);
}
.bt-tone--leather::before, .bt-tone--cloth::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--bt-grain); opacity: .3;
}
.bt-tone--leather a:not(.inv-button), .bt-tone--cloth a:not(.inv-button) { color: var(--inv-shine); }
.bt-tone--leather .bt-arabic { color: var(--inv-shine); }

/* endpaper: a faint foil lattice over a leather section */
.bt-endpaper::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        repeating-linear-gradient(45deg, transparent 0 25px, color-mix(in srgb, var(--inv-shine) 8%, transparent) 25px 26px),
        repeating-linear-gradient(-45deg, transparent 0 25px, color-mix(in srgb, var(--inv-shine) 8%, transparent) 25px 26px);
    -webkit-mask: linear-gradient(180deg, #000, rgb(0 0 0 / .35) 60%, #000);
    mask: linear-gradient(180deg, #000, rgb(0 0 0 / .35) 60%, #000);
}

/* a client photo behind a section, under a strong gradient of the section's own tone */
.bt-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.bt-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 45%; --inv-parallax: 40px; }
.bt-bgphoto::after { content: ''; position: absolute; inset: 0; }
.bt-tone--paper .bt-bgphoto::after, .bt-tone--tint .bt-bgphoto::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bt-paper) 92%, transparent),
        color-mix(in srgb, var(--bt-paper) 80%, transparent) 45%,
        color-mix(in srgb, var(--bt-paper) 95%, transparent));
}
.bt-tone--paper:has(.bt-bgphoto) { background: var(--bt-paper); }
.bt-tone--leather .bt-bgphoto img { filter: saturate(.85); }
.bt-tone--leather .bt-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) 88%, transparent),
            color-mix(in srgb, var(--inv-deep) 76%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 94%, transparent));
}

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

/* section heading: an eyebrow between two gold hairlines, the serif title, a foil rule with a diamond */
.bt-heading { margin: 0 0 2.3rem; }
.bt-heading--left { text-align: left; }
.bt-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 .65rem;
    font-size: .66rem; font-weight: 800; line-height: 1.25; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary);
}
.bt-heading__eyebrow::before, .bt-heading__eyebrow::after { content: ''; flex: none; width: 1.5rem; height: 1px; background: var(--inv-accent); }
.bt-heading__title {
    margin: 0; font-family: var(--bt-serif); font-size: 2.65rem; font-weight: 600; line-height: 1.02;
    letter-spacing: -.005em; color: var(--bt-ink); text-wrap: balance;
}
.bt-heading__title em { font-style: italic; font-weight: 500; color: var(--inv-primary); }
.bt-heading__rule {
    position: relative; display: block; width: 7rem; height: 9px; margin: .95rem auto 0;
    background: linear-gradient(90deg, transparent, var(--inv-accent) 30%, var(--inv-accent) 70%, transparent) center / 100% 1px no-repeat;
}
.bt-heading__rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; rotate: 45deg; background: var(--inv-accent); box-shadow: 0 0 0 3px var(--bt-paper); }
.bt-tone--tint .bt-heading__rule::after { box-shadow: 0 0 0 3px color-mix(in srgb, var(--inv-soft) 70%, var(--inv-background)); }
.bt-heading--left .bt-heading__rule { margin-left: 0; }
:is(.bt-tone--leather, .bt-tone--cloth) .bt-heading__eyebrow { color: var(--inv-shine); }
:is(.bt-tone--leather, .bt-tone--cloth) .bt-heading__eyebrow::before,
:is(.bt-tone--leather, .bt-tone--cloth) .bt-heading__eyebrow::after { background: color-mix(in srgb, var(--inv-shine) 75%, transparent); }
:is(.bt-tone--leather, .bt-tone--cloth) .bt-heading__title { color: var(--bt-cream); }
:is(.bt-tone--leather, .bt-tone--cloth) .bt-heading__title em {
    color: var(--inv-shine); background: var(--bt-foil); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
:is(.bt-tone--leather, .bt-tone--cloth) .bt-heading__rule { background-image: linear-gradient(90deg, transparent, var(--inv-shine) 30%, var(--inv-shine) 70%, transparent); }
:is(.bt-tone--leather, .bt-tone--cloth) .bt-heading__rule::after { background: var(--inv-shine); box-shadow: 0 0 0 3px var(--inv-deep); }
.bt-tone--cloth .bt-heading__rule::after { box-shadow: 0 0 0 3px var(--inv-primary); }

/* foil text (only on the dark tones) */
.bt-foil {
    color: var(--inv-shine); background: var(--bt-foil); background-size: 220% 100%; background-position: 0 0;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

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

/* the crest (sections/_crest): foil on the leather; .bt-crest--ink = the leather colour on the cream pages */
.bt-crest { display: block; overflow: visible; }
.bt-crest__mono { font-family: var(--bt-serif); font-size: 25px; font-weight: 700; font-style: italic; letter-spacing: .02em; }
.bt-crest--ink {
    --bt-foil-1: color-mix(in srgb, var(--inv-primary) 70%, #fff);
    --bt-foil-2: var(--inv-primary);
    --bt-foil-3: var(--inv-deep);
}

/* running head + page number (sections/_folio) */
.bt-folio { position: absolute; inset: 1.15rem 1.25rem 1.1rem; z-index: 0; pointer-events: none; }
.bt-folio__head {
    position: absolute; top: 0; right: 0; max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: clip;
    font-size: .58rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--bt-muted);
}
.bt-folio__num {
    position: absolute; bottom: 0; right: 0; display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--bt-serif); font-size: 1rem; font-style: italic; font-weight: 600; line-height: 1; color: var(--bt-ink);
}
.bt-folio__num::before { content: ''; width: 1.4rem; height: 1px; background: var(--inv-accent); }
.bt-folio__num::after { content: counter(bt-page, decimal-leading-zero); }
.bt-folio--left .bt-folio__head { right: auto; left: 0; }
.bt-folio--left .bt-folio__num { right: auto; left: 0; flex-direction: row-reverse; }

/* a mounted photograph with photo corners (sections/_photo) */
.bt-photo {
    --photo-ratio: 4 / 3; --photo-pos: center 35%;
    position: relative; margin: 0; padding: 7px; background: #fffdf7;
    box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 18px 28px -18px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
.bt-photo__window { position: relative; overflow: hidden; aspect-ratio: var(--photo-ratio); background: var(--inv-deep); }
.bt-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--photo-pos); }
.bt-photo__empty {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 75%), var(--inv-deep);
}
.bt-photo__crest { width: 34%; max-width: 6rem; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .5)); }
.bt-photo__corner {
    position: absolute; z-index: 2; width: 1.45rem; height: 1.45rem; pointer-events: none;
    background: linear-gradient(135deg, var(--inv-primary) 0 calc(50% - 1px), var(--inv-shine) calc(50% - 1px) 50%, transparent 50%);
    filter: drop-shadow(0 1px 1px rgb(0 0 0 / .35));
}
.bt-photo__corner--tl { top: 2px; left: 2px; }
.bt-photo__corner--tr { top: 2px; right: 2px; rotate: 90deg; }
.bt-photo__corner--br { bottom: 2px; right: 2px; rotate: 180deg; }
.bt-photo__corner--bl { bottom: 2px; left: 2px; rotate: 270deg; }
.bt-photo:has(.bt-photo__caption) .bt-photo__corner--bl, .bt-photo:has(.bt-photo__caption) .bt-photo__corner--br { bottom: calc(2px + 2.05rem); }
.bt-photo__caption {
    margin: 0; padding: .55rem .3rem .2rem; height: 2.05rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
    font-family: var(--bt-serif); font-size: 1rem; font-style: italic; font-weight: 500; line-height: 1.2; color: var(--bt-muted);
}

/* the round seal with the milestone: foil with deep text (cover); leather with gold text (.bt-seal--leather) */
.bt-seal {
    position: relative; display: grid; place-content: center; width: 4.5rem; height: 4.5rem; margin: 0; border-radius: 50%; text-align: center; rotate: 9deg;
    color: var(--inv-deep);
    background: radial-gradient(circle at 34% 28%, var(--bt-foil-1), var(--bt-foil-2) 48%, var(--bt-foil-3));
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 10px 18px -8px rgb(0 0 0 / .6);
}
.bt-seal::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--inv-deep) 50%, transparent); }
.bt-seal strong { font-family: var(--bt-serif); font-size: 1.95rem; font-weight: 700; line-height: .85; }
.bt-seal span { font-size: .52rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; line-height: 1.25; }
.bt-seal--text span { padding: 0 .5rem; font-size: .6rem; letter-spacing: .06em; }

/* a gold double frame with corner ornaments (cover, live streaming) */
.bt-frame { position: absolute; inset: 0; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--inv-shine) 72%, transparent); }
.bt-frame::before, .bt-cover__frame::before { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--inv-shine) 40%, transparent); }
.bt-cover__corner { position: absolute; width: 1.5rem; height: 1.5rem; }
.bt-cover__corner::before {
    content: ''; position: absolute; top: -5px; left: -5px; width: 9px; height: 9px; rotate: 45deg;
    background: linear-gradient(135deg, var(--bt-foil-1), var(--bt-foil-3)); box-shadow: 0 0 0 2px var(--inv-deep);
}
.bt-cover__corner::after {
    content: ''; position: absolute; top: 10px; left: 10px; width: 1.15rem; height: 1.15rem;
    border-top: 1.5px solid var(--inv-shine); border-left: 1.5px solid var(--inv-shine); border-radius: 6px 0 0 0;
}
.bt-cover__corner--tl { top: 0; left: 0; }
.bt-cover__corner--tr { top: 0; right: 0; rotate: 90deg; transform-origin: center; }
.bt-cover__corner--br { bottom: 0; right: 0; rotate: 180deg; }
.bt-cover__corner--bl { bottom: 0; left: 0; rotate: 270deg; }
/* the rotated corners keep their diamond on the frame's corner point */
.bt-cover__corner--tr::before, .bt-cover__corner--br::before, .bt-cover__corner--bl::before { top: -5px; left: -5px; }

/* the satin ribbon bookmark with a notched end */
.bt-cover__ribbon, .bt-closing__ribbon {
    position: absolute; z-index: 3; top: 0; width: 1.45rem; pointer-events: none;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .22), transparent 25%, rgb(255 255 255 / .28) 45%, transparent 62%, rgb(0 0 0 / .2)),
        linear-gradient(180deg, var(--bt-foil-3), var(--inv-accent) 40%, var(--bt-foil-2));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .7rem), 0 100%);
    filter: drop-shadow(2px 3px 3px rgb(0 0 0 / .45));
}

/* autograph doodles (sections/_doodle) */
.bt-doodle { display: block; overflow: visible; color: var(--bt-pen); }

/* the superlative medal (sections/_medal) */
.bt-medal { display: block; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .3)); }
.bt-medal__tail { fill: var(--inv-primary); }
.bt-medal__tail--2 { fill: var(--inv-deep); }
.bt-medal__rosette { fill: var(--bt-foil-2); stroke: var(--bt-foil-3); stroke-width: 1; }
.bt-medal__ring { fill: var(--bt-foil-1); stroke: var(--bt-foil-3); stroke-width: 1.4; }
.bt-medal__star { fill: var(--inv-deep); }

/* ---------- 4. cover ---------- */
.bt-cover {
    --win-w: min(78vw, 20rem, calc(31svh * 1.4));
    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: 2.2rem 2rem 2rem 2.6rem;
    isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(90% 45% at 50% 32%, color-mix(in srgb, var(--inv-primary) 85%, transparent), transparent 75%),
        radial-gradient(70% 40% at 100% 100%, color-mix(in srgb, #000 35%, transparent), transparent 75%),
        radial-gradient(60% 35% at 0% 0%, color-mix(in srgb, #fff 6%, transparent), transparent 70%),
        var(--inv-deep);
    transform-origin: left center;
    transition: opacity .9s ease;
}
.bt-cover::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--bt-grain); opacity: .38;
}
/* the spine on the left edge: a darker band with a hinge groove */
.bt-cover__spine {
    position: fixed; z-index: 0; top: 0; bottom: 0; left: 0; width: 1.05rem; pointer-events: none;
    background: linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / .22) 55%, rgb(255 255 255 / .07) 82%, rgb(0 0 0 / .35));
}
.bt-cover__spine::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(100% + .35rem); width: 3px;
    background: linear-gradient(90deg, rgb(0 0 0 / .4), rgb(255 255 255 / .08));
}
.bt-cover__frame { position: fixed; z-index: 0; inset: .85rem .85rem .85rem 2rem; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--inv-shine) 72%, transparent); }
.bt-cover__ribbon { position: fixed; right: 2.4rem; height: 5.2rem; }

.bt-cover__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 22rem; text-align: center; }

.bt-cover__head { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin: 0 0 1.05rem; }
.bt-cover__crest { width: 3.8rem; height: auto; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .55)) drop-shadow(0 -1px 0 rgb(255 255 255 / .08)); }
.bt-cover__title {
    margin: 0; max-width: 100%; font-size: .64rem; font-weight: 800; line-height: 1.3; letter-spacing: .32em; text-transform: uppercase;
    color: var(--inv-shine);
}

/* the debossed photo window with a fine foil rule, the foil seal over its corner */
.bt-cover__art { position: relative; width: var(--win-w); margin: 0 0 1.15rem; }
.bt-cover__window {
    position: relative; aspect-ratio: 7 / 5; padding: 6px; border-radius: 3px;
    background: color-mix(in srgb, var(--inv-deep) 70%, #000);
    box-shadow: inset 0 3px 8px rgb(0 0 0 / .65), inset 0 -1px 0 rgb(255 255 255 / .1), 0 1px 0 rgb(255 255 255 / .08), 0 -1px 0 rgb(0 0 0 / .35);
}
.bt-cover__window::after {
    content: ''; position: absolute; inset: 2px; border-radius: 2px; pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 65%, transparent);
}
.bt-cover__photo { display: block; width: 100%; height: 100%; border-radius: 1px; object-fit: cover; object-position: center 40%; }
.bt-cover__empty {
    display: grid; place-items: center; width: 100%; height: 100%;
    background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 75%);
}
.bt-cover__empty-crest { width: 30%; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .5)); }
.bt-cover__seal { position: absolute; z-index: 2; top: -1.25rem; right: -1.15rem; }

.bt-cover__text { display: flex; flex-direction: column; align-items: center; width: 100%; }
.bt-cover__name {
    margin: 0; max-width: 16ch; font-family: var(--bt-serif); font-size: clamp(1.7rem, 8vw, 2.25rem); font-weight: 700; line-height: 1.02;
    letter-spacing: .035em; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere;
    filter: drop-shadow(0 1px 0 rgb(0 0 0 / .55));
}
.bt-cover__batch {
    display: flex; align-items: center; gap: .7rem; margin: .6rem 0 0; max-width: 100%;
    font-size: .68rem; font-weight: 800; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine);
}
.bt-cover__batch::before, .bt-cover__batch::after { content: ''; flex: none; width: 1.5rem; height: 1px; background: color-mix(in srgb, var(--inv-shine) 75%, transparent); }
.bt-cover__date { margin: .45rem 0 0; font-family: var(--bt-serif); font-size: 1.12rem; font-style: italic; font-weight: 600; line-height: 1.3; color: var(--bt-cream); }
.bt-cover__quote {
    max-width: 30ch; margin: .3rem 0 0; font-family: var(--bt-serif); font-style: italic; font-weight: 500;
    font-size: 1.02rem; line-height: 1.32; color: var(--bt-cream-muted); text-wrap: balance;
}

/* the guest box: a cream bookplate with a thin double frame */
.bt-plate {
    position: relative; width: min(100%, 17.5rem); margin: .95rem 0 0; padding: .55rem 1rem .6rem; border-radius: 2px;
    color: var(--inv-text); background: var(--bt-paper);
    box-shadow: 0 0 0 3px var(--bt-paper), 0 0 0 4px var(--inv-shine), 0 14px 24px -12px rgb(0 0 0 / .75);
}
.bt-plate::before { content: ''; position: absolute; inset: 4px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--inv-primary) 35%, transparent); }
.bt-plate__label { margin: 0; font-size: .56rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary); }
.bt-plate__name {
    display: block; margin: .05rem 0 0; font-family: var(--bt-serif); font-size: 1.45rem; font-style: italic; font-weight: 600; line-height: 1.15;
    color: var(--bt-ink); overflow-wrap: anywhere;
}
.bt-cover__open {
    margin-top: 1.05rem; min-height: 3rem; padding: .7rem 2rem; border-radius: 999px; font-weight: 800; letter-spacing: .04em;
    color: var(--inv-deep); background: var(--bt-foil); background-size: 200% 100%;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -1px 0 rgb(0 0 0 / .2), 0 14px 24px -12px rgb(0 0 0 / .8);
}

/* opening: the cover swings open on its spine and fades (Alpine waits for the first transition, 1.05 s) */
.bt-cover--leave { transition: transform 1.05s cubic-bezier(.55, .05, .35, 1), opacity .4s ease .6s; }
.bt-cover--gone { transform: perspective(1800px) rotateY(-86deg); opacity: 0; }

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

/* opening: the inside cover — eyebrow, greeting, message, the quote on a cream page */
.bt-opening { padding: 4.8rem 1.6rem 5rem; }
.bt-opening__eyebrow {
    display: inline-flex !important; align-items: center; gap: .7rem; margin-bottom: 1.1rem !important;
    font-size: .66rem; font-weight: 800; line-height: 1.25; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-shine);
}
.bt-opening__eyebrow::before, .bt-opening__eyebrow::after { content: ''; width: 1.5rem; height: 1px; background: color-mix(in srgb, var(--inv-shine) 75%, transparent); }
.bt-opening__basmalah { margin: 0 0 .6rem; font-size: 1.85rem; }
.bt-opening__greeting {
    margin: 0 auto 1rem !important; max-width: 14ch !important; font-family: var(--bt-serif); font-size: 2.85rem; font-style: italic; font-weight: 600;
    line-height: 1.02; color: var(--bt-cream); text-wrap: balance;
}
.bt-opening__message { margin: 0 auto; max-width: 31ch; color: var(--bt-cream-muted); }
.bt-opening__quote {
    position: relative; max-width: 21rem; margin: 3.4rem auto 0; padding: 2.2rem 1.5rem 1.5rem; border-radius: 2px;
    color: var(--inv-text); background: var(--bt-paper);
    box-shadow: 0 2px 0 -1px color-mix(in srgb, var(--inv-soft) 85%, #fff), 0 4px 0 -2px var(--inv-soft), 0 28px 34px -22px rgb(0 0 0 / .8);
}
.bt-opening__quote::before { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid var(--bt-rule); }
.bt-opening__mark {
    position: absolute; top: -1.55rem; left: 50%; width: 3.1rem; height: 3.1rem; margin-left: -1.55rem; border-radius: 50%;
    font-family: var(--bt-serif); font-size: 3.1rem; font-weight: 700; line-height: 1.12; color: var(--inv-shine);
    background: var(--inv-deep); box-shadow: 0 0 0 2px var(--inv-shine), 0 0 0 5px var(--bt-paper);
}
.bt-opening__quote blockquote { margin: 0; font-family: var(--bt-serif); font-style: italic; font-weight: 500; font-size: 1.32rem; line-height: 1.38; color: var(--bt-ink); }
.bt-opening__quote figcaption {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem;
    font-size: .64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--inv-primary);
}
.bt-opening__quote figcaption::before { content: ''; width: 1.2rem; height: 1px; background: var(--inv-accent); }

/* organizer: the title page */
.bt-organizer { padding: 4.9rem 1.4rem 4.8rem; }
.bt-organizer__title { position: relative; z-index: 0; padding-top: .3rem; }
.bt-organizer__year {
    position: absolute; z-index: -1; left: 50%; top: 52%; translate: -50% -50%; white-space: nowrap;
    font-family: var(--bt-serif); font-size: 8.6rem; font-weight: 700; line-height: 1; letter-spacing: -.01em;
    color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--inv-accent) 42%, transparent);
}
.bt-organizer__crest { width: 3.5rem; margin: 0 auto .7rem; }
.bt-organizer__eyebrow { margin: 0 0 .55rem !important; font-size: .64rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary); }
.bt-organizer__name {
    margin: 0 auto; max-width: 12ch; font-family: var(--bt-serif); font-size: 2.85rem; font-weight: 700; line-height: .98;
    color: var(--bt-ink); text-wrap: balance; overflow-wrap: anywhere;
}
/* the ribbon banner with notched ends ("Class of …") */
.bt-banner {
    position: relative; z-index: 0; display: inline-block; max-width: calc(100% - 3rem); margin: 1.2rem 0 0 !important; padding: .5rem 1.4rem .48rem;
    font-size: .74rem; font-weight: 800; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-shine);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 85%, #fff), var(--inv-primary) 45%, color-mix(in srgb, var(--inv-primary) 85%, #000));
    box-shadow: 0 8px 14px -8px color-mix(in srgb, var(--inv-deep) 80%, transparent);
}
.bt-banner::before, .bt-banner::after {
    content: ''; position: absolute; z-index: -1; top: .38rem; width: 1.5rem; height: 100%;
    background: color-mix(in srgb, var(--inv-primary) 70%, #000);
}
.bt-banner::before { left: -1.15rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.bt-banner::after { right: -1.15rem; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.bt-banner span::before, .bt-banner span::after { content: '\25C6'; margin: 0 .55rem; font-size: .5rem; vertical-align: .18em; color: color-mix(in srgb, var(--inv-shine) 80%, transparent); }

.bt-organizer__art { position: relative; width: min(18rem, 84%); margin: 2.6rem auto 0; }
.bt-organizer__photo { --photo-ratio: 1 / 1; --photo-pos: center 32%; rotate: -1.4deg; }
.bt-organizer__photo .bt-photo__img { filter: sepia(.1) saturate(.95); }
.bt-organizer__seal {
    position: absolute; z-index: 3; top: -1.5rem; right: -1.35rem;
    color: var(--inv-shine); background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 45%, var(--inv-deep));
    box-shadow: inset 0 0 0 2px var(--inv-shine), inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 80%, transparent), 0 10px 18px -8px rgb(0 0 0 / .6);
}
.bt-organizer__seal::before { border-color: color-mix(in srgb, var(--inv-shine) 55%, transparent); inset: 7px; }
.bt-organizer__note {
    position: absolute; z-index: 3; left: -1rem; bottom: -2.9rem; rotate: -6deg; white-space: nowrap;
    font-family: var(--bt-hand); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--bt-pen);
}
.bt-organizer__arrow { position: absolute; left: 4.6rem; bottom: .9rem; width: 2.6rem; height: 2.6rem; rotate: -20deg; }
.bt-organizer__foot { max-width: 22rem; margin: 3.8rem auto 0; padding-top: 1.2rem; border-top: 3px double var(--bt-rule); }
.bt-organizer__milestone { margin: 0 0 .35rem; font-size: .64rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-primary); }
.bt-organizer__tagline { margin: 0 auto; max-width: 25ch; font-family: var(--bt-serif); font-style: italic; font-weight: 500; font-size: 1.42rem; line-height: 1.32; color: var(--bt-ink); }

/* party (book cloth): superlative award entries */
.bt-award {
    position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: 1rem; max-width: 22rem; margin: 0 auto;
    padding: 1.25rem 1.2rem 1.2rem 1.05rem; border-radius: 2px; text-align: left; color: var(--inv-text); background: var(--bt-paper);
    box-shadow: 0 24px 30px -22px rgb(0 0 0 / .75);
}
.bt-award::before { content: ''; position: absolute; inset: 5px; pointer-events: none; border: 1px solid var(--bt-rule); }
.bt-award + .bt-award { margin-top: 1.25rem; }
.bt-award__medal { width: 4rem; height: auto; }
.bt-award__body { min-width: 0; }
.bt-award__title { margin: 0 0 .2rem; font-family: var(--bt-serif); font-size: 1.2rem; font-style: italic; font-weight: 600; line-height: 1.1; color: var(--inv-primary); }
.bt-award__label { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--bt-muted); }
.bt-party__theme { margin: .1rem 0 0; font-family: var(--bt-serif); font-weight: 700; font-size: 1.95rem; line-height: 1.02; color: var(--bt-ink); overflow-wrap: anywhere; }
.bt-award--dress { grid-template-columns: 4.3rem minmax(0, 1fr); }
.bt-party__shirt { display: block; width: 100%; overflow: visible; }
.bt-party__shirt-body { fill: var(--bt-pick, #fff); stroke: var(--inv-deep); stroke-width: 2; stroke-linejoin: round; transition: fill .35s ease; }
.bt-party__shirt-line { fill: none; stroke: var(--inv-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.bt-party__dress { margin: .1rem 0 0; font-family: var(--bt-serif); font-weight: 700; font-size: 1.32rem; line-height: 1.15; color: var(--bt-ink); }
.bt-swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.bt-swatch {
    width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--bt-swatch);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), 0 0 0 2px #fff, 0 0 0 3px var(--bt-ring);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.bt-swatch[aria-pressed="true"] { transform: scale(1.15); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), 0 0 0 2px #fff, 0 0 0 4px var(--inv-primary); }
.bt-swatch:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 4px; }
.bt-party__hint { margin: .5rem 0 0; font-size: .74rem; color: var(--bt-muted); }
.bt-party__slip {
    position: relative; max-width: 20rem; margin: 2.4rem auto 0; padding: 1.5rem 1.3rem 1.2rem 1.5rem; rotate: -1.4deg; text-align: left;
    color: var(--inv-text); background: var(--bt-paper);
    box-shadow: 0 20px 24px -16px rgb(0 0 0 / .65);
}
.bt-party__clip {
    position: absolute; z-index: 2; top: -1.1rem; left: 1.4rem; width: 1rem; height: 2.7rem; rotate: -8deg;
    border: 2.5px solid var(--inv-shine); border-radius: 999px; box-shadow: 0 1px 2px rgb(0 0 0 / .35);
}
.bt-party__clip::after { content: ''; position: absolute; left: 2px; right: 2px; top: .5rem; bottom: .5rem; border: 2px solid var(--inv-shine); border-top: 0; border-radius: 0 0 999px 999px; }
.bt-party__slip-title { margin-bottom: .35rem; }
.bt-party__note {
    margin: 0; font-family: var(--bt-serif); font-size: 1.22rem; font-style: italic; font-weight: 500; line-height: 28px; color: var(--bt-ink);
    background: repeating-linear-gradient(180deg, transparent 0 27px, var(--bt-ring) 27px 28px);
}
.bt-party__tag { margin-top: 2.2rem; }
.bt-party__tag-title { margin: 0 0 .7rem; color: var(--inv-shine); }
.bt-party__hashtag {
    display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; padding: .35rem .4rem .35rem 1.1rem; border-radius: 999px;
    background: rgb(255 255 255 / .1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 70%, transparent);
}
.bt-party__hashtag-text { min-width: 0; font-family: var(--bt-serif); font-style: italic; font-weight: 700; font-size: 1.3rem; color: #fff; overflow-wrap: anywhere; }
.bt-party__copy {
    flex: none; min-height: 2.2rem; padding: .3rem .95rem; border: 0; border-radius: 999px; cursor: pointer;
    font: 800 .76rem/1 var(--bt-sans); color: var(--inv-deep); background: var(--bt-foil); background-size: 200% 100%;
}
.bt-party__hint--light { margin: .6rem auto 0; color: rgb(255 255 255 / .85); }

/* events: entries with a thumb-index tab at the page edge */
.bt-event { position: relative; max-width: 24rem; margin: 0 auto; text-align: left; }
.bt-event + .bt-event { margin-top: 3.4rem; }
.bt-event__photo { --photo-ratio: 16 / 10; --photo-pos: center 55%; margin: 0 0 1.2rem; rotate: -.8deg; }
.bt-event--flip .bt-event__photo { rotate: .8deg; }
.bt-event__top { position: relative; min-height: 5.4rem; padding-right: 4rem; }
.bt-event--flip .bt-event__top { padding: 0 0 0 4rem; text-align: right; }
.bt-event__tab {
    position: absolute; z-index: 2; top: 0; right: -1.5rem; display: flex; flex-direction: column; align-items: center; width: 4.6rem; margin: 0;
    padding: .55rem .25rem .6rem .5rem; border-radius: 12px 0 0 12px; color: var(--bt-cream);
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 88%, #fff), var(--inv-primary) 40%, var(--inv-deep));
    box-shadow: inset 1px 0 0 rgb(255 255 255 / .2), -6px 8px 16px -8px rgb(0 0 0 / .55);
}
.bt-event--flip .bt-event__tab { right: auto; left: -1.5rem; padding: .55rem .5rem .6rem .25rem; border-radius: 0 12px 12px 0; }
.bt-event__weekday { font-size: .6rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--inv-shine); }
.bt-event__day { font-family: var(--bt-serif); font-weight: 700; font-size: 2.4rem; line-height: .95; color: var(--inv-shine); }
.bt-event__month { margin-top: .15rem; font-size: .56rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bt-event__head { display: flex; flex-direction: column; justify-content: center; min-height: 5.4rem; }
.bt-event__no { font-size: .62rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--inv-primary); }
.bt-event__name { margin: .15rem 0 0; font-family: var(--bt-serif); font-weight: 700; font-size: 1.75rem; line-height: 1.05; color: var(--bt-ink); }
.bt-event__full { margin: .25rem 0 0; font-family: var(--bt-serif); font-size: 1.05rem; font-style: italic; font-weight: 600; color: var(--bt-muted); }
.bt-event__rows {
    display: grid; gap: .8rem; margin: 1.1rem 0 0; padding: 1rem 0 .95rem; list-style: none; font-size: .9rem;
    border-top: 3px double var(--bt-rule); border-bottom: 1px solid var(--bt-rule);
}
.bt-event__rows li { display: flex; align-items: flex-start; gap: .75rem; }
.bt-event__rows .bt-icon {
    width: 2.1rem; height: 2.1rem; padding: .48rem; border-radius: 50%; color: var(--inv-shine); background: var(--inv-deep);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 45%, transparent);
}
.bt-event__rows li > span { padding-top: .3rem; }
.bt-event__venue { display: block; font-weight: 800; }
.bt-event__address { display: block; font-size: .85rem; color: var(--bt-muted); }
.bt-event .inv-maps { margin: 1.15rem 0 0; text-align: center; }
.bt-event .inv-maps .inv-button { width: 100%; font-weight: 700; }
.bt-event .inv-maps__frame { height: 190px; border-radius: 4px; box-shadow: 0 0 0 5px #fffdf7, 0 0 0 6px var(--bt-ring); }

/* countdown: the date stamped in foil, leather tiles */
.bt-stamp { margin: 0 auto 2.5rem; }
.bt-stamp__weekday { margin: 0 0 .35rem !important; font-size: .72rem; font-weight: 800; letter-spacing: .42em; text-transform: uppercase; color: var(--inv-shine); }
.bt-stamp__date {
    display: flex; justify-content: center; align-items: stretch; margin: 0 auto !important; max-width: none !important;
    font-family: var(--bt-serif); font-weight: 700; font-size: clamp(3rem, 15vw, 3.9rem); line-height: 1; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .45));
}
.bt-stamp__date span { padding: 0 .8rem; }
.bt-stamp__date span + span { border-left: 1px solid color-mix(in srgb, var(--inv-shine) 45%, transparent); }
.bt-stamp__time { margin: .7rem auto 0 !important; font-family: var(--bt-serif); font-size: 1.2rem; font-style: italic; font-weight: 600; color: var(--bt-cream); }
.bt-countdown .inv-countdown { gap: clamp(.45rem, 2.4vw, .75rem); }
.bt-countdown .inv-countdown__item {
    display: grid; place-content: center; width: clamp(4rem, 18.5vw, 4.7rem); min-width: 0; aspect-ratio: 4 / 4.5; padding: .4rem 0 .2rem; border-radius: 4px;
    color: var(--bt-cream); background: linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-deep)), color-mix(in srgb, var(--inv-deep) 80%, #000));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 55%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--inv-deep) 70%, #000),
        inset 0 0 0 5px color-mix(in srgb, var(--inv-shine) 25%, transparent), 0 16px 22px -12px rgb(0 0 0 / .7);
}
.bt-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--bt-serif); font-weight: 700; font-size: 2.05rem; line-height: 1; color: var(--inv-shine); }
.bt-countdown .inv-countdown__label { margin-top: .15rem; font-size: .55rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--bt-cream); opacity: 1; }
.bt-countdown .inv-countdown__done { font-family: var(--bt-serif); font-size: 1.4rem; font-style: italic; color: var(--inv-shine); }
.bt-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2.1rem; }
.bt-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(--bt-cream); background: color-mix(in srgb, var(--inv-background) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 65%, transparent);
}
.bt-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--bt-foil); background-size: 200% 100%; box-shadow: none; }

/* rundown: the table of contents */
.bt-toc { position: relative; max-width: 24rem; margin: 0 auto; text-align: left; }
.bt-toc__label {
    margin: 0 0 .3rem; padding-bottom: .55rem; text-align: center; border-bottom: 3px double var(--bt-rule);
    font-family: var(--bt-serif); font-size: 1.35rem; font-style: italic; font-weight: 600; color: var(--bt-ink);
}
.bt-toc__doodle { position: absolute; top: -2.3rem; right: -.4rem; width: 3.3rem; height: 3.3rem; }
.bt-toc__list { margin: 0; padding: 0; list-style: none; }
.bt-toc__row { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .35rem; padding: .8rem 0 .78rem; border-bottom: 1px solid var(--bt-ring); }
.bt-toc__row:last-child { border-bottom: 3px double var(--bt-rule); }
.bt-toc__num { font-family: var(--bt-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--inv-primary); }
.bt-toc__line { display: flex; align-items: baseline; gap: .45rem; margin: 0; }
.bt-toc__title { flex: 0 1 auto; min-width: 0; font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--inv-text); }
.bt-toc__dots { flex: 1 1 1rem; min-width: 1rem; height: 1px; border-bottom: 2px dotted color-mix(in srgb, var(--inv-primary) 40%, transparent); }
.bt-toc__time { flex: none; font-family: var(--bt-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--bt-ink); }
.bt-toc__desc { margin: .1rem 0 0; font-family: var(--bt-serif); font-size: 1.02rem; font-style: italic; font-weight: 500; line-height: 1.35; color: var(--bt-muted); }

/* story: yearbook spreads — left and right pages in turn on the leather */
.bt-spread { display: grid; gap: 1.7rem; max-width: 23rem; margin: 0 auto; padding: 0; list-style: none; }
.bt-leaf {
    position: relative; margin: 0 1.1rem 0 0; padding: 1rem 1.05rem 2.4rem; text-align: left; color: var(--inv-text); border-radius: 3px 1px 1px 3px;
    background: linear-gradient(270deg, color-mix(in srgb, var(--inv-deep) 22%, transparent), color-mix(in srgb, var(--inv-deep) 5%, transparent) 5%, transparent 11%), var(--bt-paper);
    box-shadow: -3px 3px 0 -1px color-mix(in srgb, var(--inv-soft) 85%, #fff), -6px 6px 0 -2px var(--inv-soft), 0 26px 30px -20px rgb(0 0 0 / .8);
}
.bt-leaf--right {
    margin: 0 0 0 1.1rem; border-radius: 1px 3px 3px 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-deep) 22%, transparent), color-mix(in srgb, var(--inv-deep) 5%, transparent) 5%, transparent 11%), var(--bt-paper);
    box-shadow: 3px 3px 0 -1px color-mix(in srgb, var(--inv-soft) 85%, #fff), 6px 6px 0 -2px var(--inv-soft), 0 26px 30px -20px rgb(0 0 0 / .8);
}
.bt-leaf__photo { --photo-ratio: 3 / 2; margin: 0 0 .9rem; box-shadow: 0 1px 3px rgb(0 0 0 / .18); }
.bt-leaf__when { margin: 0; font-family: var(--bt-serif); font-size: 2.6rem; font-style: italic; font-weight: 700; line-height: .95; color: var(--inv-primary); }
.bt-leaf__title { margin: .2rem 0 0; font-family: var(--bt-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: var(--bt-ink); }
.bt-leaf__story { margin: .45rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--bt-muted); }
.bt-leaf__folio { position: absolute; bottom: .75rem; right: 1.05rem; font-family: var(--bt-serif); font-size: .95rem; font-style: italic; font-weight: 600; color: var(--bt-muted); }
.bt-leaf--right .bt-leaf__folio { right: auto; left: 1.05rem; }
.bt-leaf--text { padding-top: 1.5rem; }
.bt-leaf--text .bt-leaf__when { font-size: 3.4rem; }
.bt-leaf__doodle { position: absolute; top: 1.1rem; right: 1.1rem; width: 2.8rem; height: 2.8rem; rotate: 8deg; }

/* gallery: mounted photos with photo corners; a doodle and a handwritten note in the margin */
.bt-gallery .inv-gallery { gap: .85rem .8rem; padding: .2rem; }
.bt-gallery .inv-gallery__item {
    position: relative; border: 5px solid #fffdf7; border-radius: 1px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 14px 22px -14px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}
.bt-gallery .inv-gallery__item::before, .bt-gallery .inv-gallery__item::after {
    content: ''; position: absolute; z-index: 1; width: 1.15rem; height: 1.15rem; pointer-events: none;
    background: linear-gradient(135deg, var(--inv-primary) 0 calc(50% - 1px), var(--inv-shine) calc(50% - 1px) 50%, transparent 50%);
}
.bt-gallery .inv-gallery__item::before { top: 0; left: 0; }
.bt-gallery .inv-gallery__item::after { bottom: 0; right: 0; rotate: 180deg; }
.bt-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; }
.bt-gallery__note {
    display: flex !important; align-items: center; justify-content: flex-end; gap: .35rem; max-width: none !important; margin: 1.3rem .3rem 0 !important; rotate: -2deg;
    font-family: var(--bt-hand); font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--bt-pen);
}
.bt-gallery__doodle { width: 2.2rem; height: 2.2rem; }

/* live streaming: a framed panel on the leather */
.bt-stream__panel { position: relative; max-width: 22rem; margin: 0 auto; padding: 2.5rem 1.6rem 2.1rem; }
.bt-stream__panel .bt-cover__corner::before { box-shadow: 0 0 0 2px color-mix(in srgb, var(--inv-deep) 90%, var(--inv-primary)); }
.bt-stream__icon {
    display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: 0 auto .85rem; border-radius: 50%;
    color: var(--inv-deep); background: radial-gradient(circle at 34% 28%, var(--bt-foil-1), var(--bt-foil-2) 50%, var(--bt-foil-3));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--inv-shine) 22%, transparent);
}
.bt-stream__icon .bt-icon { width: 1.8rem; height: 1.8rem; }
.bt-stream__eyebrow { margin: 0 0 .2rem; font-size: .64rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--inv-shine); }
.bt-stream__title { margin: 0 0 .45rem; font-family: var(--bt-serif); font-weight: 700; font-size: 2.2rem; line-height: 1.05; color: var(--bt-cream); }
.bt-stream__text { margin: 0 auto; max-width: 28ch; font-size: .88rem; color: var(--bt-cream-muted); }
.bt-stream__note { margin: .45rem auto 0; max-width: 30ch; font-size: .86rem; font-weight: 700; color: var(--inv-shine); }
.bt-stream__button { margin-top: 1.3rem; min-height: 2.9rem; padding: .65rem 1.6rem; font-weight: 800; color: var(--inv-deep) !important; background: var(--bt-foil) !important; background-size: 200% 100% !important; }

/* RSVP: the attendance register */
.bt-register {
    position: relative; max-width: 25rem; margin: 0 auto; border-radius: 3px; overflow: hidden; background: var(--bt-paper);
    box-shadow: 0 0 0 1px var(--bt-ring), 0 3px 0 -1px color-mix(in srgb, var(--inv-soft) 80%, #fff), 0 6px 0 -2px var(--inv-soft), var(--bt-drop);
}
.bt-register__head {
    padding: 1rem 1.2rem .95rem; text-align: left; color: var(--bt-cream); border-bottom: 2px solid var(--inv-shine);
    background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--inv-shine) 22%, transparent), transparent 60%), linear-gradient(120deg, var(--inv-deep), var(--inv-primary));
}
.bt-register__label { margin: 0; font-size: .62rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }
.bt-register__for { margin: .1rem 0 0; font-family: var(--bt-serif); font-weight: 700; font-size: 1.6rem; line-height: 1.1; overflow-wrap: anywhere; }
.bt-register__sheet {
    position: relative; padding: 1.5rem 1.15rem 1.35rem 1.7rem; color: var(--inv-text);
    background:
        linear-gradient(90deg, transparent .95rem, color-mix(in srgb, #c0392b 32%, transparent) .95rem calc(.95rem + 1px), transparent calc(.95rem + 1px)),
        repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--inv-primary) 8%, transparent) 27px 28px),
        var(--bt-paper);
}
.bt-register__intro { margin: 0 auto 1.1rem; max-width: 30ch; text-align: center; font-size: .9rem; color: var(--bt-muted); }
.bt-register__sent { margin-bottom: 1rem; text-align: center; }
.bt-register__stamp {
    display: inline-grid; place-items: center; width: 6.6rem; height: 6.6rem; margin: .2rem 0 .7rem; padding: .5rem; border-radius: 50%; rotate: -12deg;
    font-size: .95rem; font-weight: 800; line-height: 1.15; letter-spacing: .12em; text-transform: uppercase; color: var(--inv-primary);
    box-shadow: inset 0 0 0 3px var(--inv-primary), inset 0 0 0 6px var(--bt-paper), inset 0 0 0 7px var(--inv-primary);
}
html.inv-anim .bt-register__sent .bt-register__stamp { animation: bt-stamp .55s cubic-bezier(.3, 1.4, .6, 1) both; }
.bt-register__line { margin: 0; font-size: .9rem; color: var(--bt-muted); }
.bt-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; color: var(--inv-primary); text-align: center; }

/* wishes: autograph pages */
.bt-wishes__intro { color: var(--bt-cream-muted); margin-top: -.6rem !important; }
.bt-wishes__book { position: relative; max-width: 25rem; margin: 1.8rem auto 0; }
.bt-wishes__doodle { position: absolute; z-index: 2; pointer-events: none; color: var(--bt-pen); }
.bt-wishes__doodle--star { top: .8rem; left: .9rem; width: 2.2rem; height: 2.2rem; rotate: -12deg; }
.bt-wishes__doodle--sign { top: .55rem; right: .9rem; width: 3.6rem; height: 3.6rem; }
.bt-wishes .inv-wishes { --inv-wishes-height: 21rem; }
.bt-wishes .inv-form {
    position: relative; padding: 3.2rem 1.15rem 1.35rem; border-radius: 2px; color: var(--inv-text);
    background: radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--inv-soft) 60%, transparent), transparent 70%), var(--bt-paper);
    box-shadow: 3px 3px 0 -1px color-mix(in srgb, var(--inv-soft) 85%, #fff), 6px 6px 0 -2px var(--inv-soft), 0 28px 34px -22px rgb(0 0 0 / .85);
}
.bt-wishes .inv-form::before { content: ''; position: absolute; inset: 6px; pointer-events: none; border: 1px solid var(--bt-rule); }
.bt-wishes .inv-wishes__list { margin-top: 1.7rem; }
.bt-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .6rem; border-radius: 4px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-shine) 30%, transparent);
}
.bt-wishes .inv-wish {
    padding: .8rem 1rem .75rem; border-radius: 1px; text-align: left; color: var(--inv-text); background: var(--bt-paper); rotate: -.5deg;
    box-shadow: 0 8px 14px -10px rgb(0 0 0 / .7);
}
.bt-wishes .inv-wish:nth-child(even) { rotate: .5deg; background: color-mix(in srgb, var(--inv-soft) 75%, #fff); }
.bt-wishes .inv-wish__name { font-family: var(--bt-serif); font-size: 1.12rem; font-weight: 700; color: var(--bt-ink); }
.bt-wishes .inv-wish__message { font-family: var(--bt-hand); font-size: 1.06rem; line-height: 1.45; color: var(--bt-pen); }
.bt-wishes .inv-wish__time { font-size: .72rem; color: var(--bt-muted); opacity: 1; }
.bt-wishes .inv-wishes__empty, .bt-wishes .inv-wishes__pager { color: var(--bt-cream); }

/* gift ("Iuran & donasi"): library cards */
.bt-gift__intro { color: var(--bt-muted); }
.bt-gift__treasurer {
    display: inline-flex !important; align-items: center; gap: .5rem; padding: .35rem .95rem; border-radius: 999px;
    font-size: .84rem; font-weight: 700; color: var(--bt-cream); background: var(--inv-primary);
}
.bt-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; max-width: 24rem; margin: 1.5rem auto 0; }
.bt-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bt-gift .inv-gift__account,
.bt-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0;
    padding: 1.6rem .75rem 1.05rem; border-radius: 3px; color: var(--inv-text);
    background:
        linear-gradient(180deg, var(--inv-primary) 0 .5rem, color-mix(in srgb, var(--inv-shine) 80%, transparent) .5rem calc(.5rem + 2px), transparent calc(.5rem + 2px)),
        linear-gradient(90deg, transparent 1rem, color-mix(in srgb, #c0392b 30%, transparent) 1rem calc(1rem + 1px), transparent calc(1rem + 1px)),
        repeating-linear-gradient(180deg, transparent 0 23px, color-mix(in srgb, var(--inv-primary) 9%, transparent) 23px 24px) 0 .9rem,
        color-mix(in srgb, #f1dfb2 55%, var(--bt-paper));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-deep) 10%, transparent), 0 18px 26px -18px color-mix(in srgb, var(--inv-deep) 75%, transparent);
}
.bt-gift .inv-gift__account p, .bt-gift .inv-gift__address p { margin: 0; }
.bt-gift .inv-gift__bank { font-weight: 800; font-size: .85rem; color: var(--bt-ink); }
.bt-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .3rem; background: #fff; }
.bt-gift .inv-gift__logo img { max-width: 5rem; }
.bt-gift .inv-gift__number {
    font-family: 'Courier New', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1rem; font-weight: 700;
    letter-spacing: .04em; line-height: 1.3; overflow-wrap: anywhere; color: var(--bt-ink);
}
.bt-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bt-muted); overflow-wrap: anywhere; }
.bt-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .95rem; font-size: .74rem; font-weight: 700; }
.bt-gift .inv-gift__address { max-width: 24rem; margin: .9rem auto 0; font-size: .875rem; }
.bt-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts ("Panitia"): the staff page, a portrait grid of ovals */
.bt-portraits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 1rem; max-width: 22rem; margin: 0 auto; padding: 0; list-style: none; }
.bt-portrait { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bt-portrait:last-child:nth-child(odd) { grid-column: 1 / -1; }
.bt-portrait__oval {
    display: grid; place-items: center; width: 5.4rem; aspect-ratio: 4 / 5; margin-bottom: .7rem; border-radius: 50%;
    font-family: var(--bt-serif); font-size: 2.5rem; font-weight: 700; line-height: 1;
    background: radial-gradient(60% 50% at 50% 35%, color-mix(in srgb, var(--inv-primary) 75%, transparent), transparent 80%), color-mix(in srgb, var(--inv-deep) 82%, #000);
    box-shadow: inset 0 3px 8px rgb(0 0 0 / .6), 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 75%, transparent), 0 0 0 5px color-mix(in srgb, var(--inv-deep) 85%, #000),
        0 0 0 6px color-mix(in srgb, var(--inv-shine) 30%, transparent), 0 14px 20px -10px rgb(0 0 0 / .7);
}
.bt-portrait__role { font-size: .58rem; font-weight: 800; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; color: var(--inv-shine); }
.bt-portrait__class { margin-top: .1rem; font-family: var(--bt-serif); font-size: 1rem; font-style: italic; font-weight: 500; line-height: 1.2; color: var(--bt-cream-muted); }
.bt-portrait__name { margin-top: .15rem; font-family: var(--bt-serif); font-size: 1.18rem; font-weight: 600; line-height: 1.18; color: var(--bt-cream); overflow-wrap: anywhere; }

/* contacts: the class directory */
.bt-directory { max-width: 24rem; margin: 0 auto; border-top: 3px double var(--bt-rule); border-bottom: 3px double var(--bt-rule); }
.bt-contact { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .9rem .1rem; text-align: left; }
.bt-contact + .bt-contact { border-top: 1px solid var(--bt-ring); }
.bt-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; aspect-ratio: 4 / 5; border-radius: 50%;
    font-family: var(--bt-serif); font-size: 1.45rem; font-weight: 700; background: var(--inv-deep);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-shine) 70%, transparent), 0 6px 10px -6px rgb(0 0 0 / .5);
}
.bt-contact p { margin: 0; }
.bt-contact__name { font-family: var(--bt-serif); font-weight: 700; font-size: 1.22rem; line-height: 1.15; color: var(--bt-ink); overflow-wrap: anywhere; }
.bt-contact__role { font-size: .78rem; color: var(--bt-muted); }
.bt-contact__phone { font-size: .85rem; }
.bt-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 700; }
.bt-contact__button .bt-icon { width: 1.05rem; height: 1.05rem; }

/* health protocol: cream chips with a check in a leather disc */
.bt-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.bt-protocol__list li {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .4rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    background: var(--bt-paper); box-shadow: inset 0 0 0 1px var(--bt-ring);
}
.bt-protocol__list .bt-icon { width: 1.45rem; height: 1.45rem; padding: .25rem; border-radius: 50%; color: var(--inv-shine); background: var(--inv-deep); }
.bt-protocol__note { font-family: var(--bt-serif); font-size: 1.05rem; font-style: italic; color: var(--bt-muted); }

/* vendors: the colophon */
.bt-vendors { padding-bottom: 4.8rem; }
.bt-colophon { display: grid; max-width: 22rem; margin: 0 auto; padding: 0; list-style: none; }
.bt-colophon__item { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .95rem 0; }
.bt-colophon__item + .bt-colophon__item::before { content: ''; width: 6px; height: 6px; margin: -1.25rem 0 .9rem; rotate: 45deg; background: var(--inv-accent); }
.bt-colophon__role { font-size: .6rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-primary); }
.bt-colophon__name { font-family: var(--bt-serif); font-size: 1.4rem; font-weight: 700; line-height: 1.15; color: var(--bt-ink); overflow-wrap: anywhere; }
.bt-colophon__link {
    display: inline-flex; align-items: center; gap: .3rem; min-height: 2.1rem; margin-top: .3rem; padding: .25rem .75rem; border-radius: 999px;
    font-size: .74rem; font-weight: 700; text-decoration: none; color: var(--inv-primary); background: var(--bt-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-primary) 30%, transparent);
}
.bt-colophon__link .bt-icon { width: .95rem; height: .95rem; }

/* closing: the back cover */
.bt-closing {
    padding: 3.4rem 1.6rem 2.5rem;
    background: radial-gradient(100% 40% at 50% 100%, color-mix(in srgb, var(--inv-primary) 55%, transparent), transparent 75%), var(--inv-deep);
}
.bt-closing--photo { padding-top: 0; }
.bt-closing__photo { position: relative; z-index: -1; height: min(100vw, 27rem); margin: 0 -1.6rem; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); mask: linear-gradient(180deg, #000 0, #000 52%, rgb(0 0 0 / .55) 74%, rgb(0 0 0 / .18) 90%, transparent 100%); }
.bt-closing__photo img { display: block; width: 100%; height: calc(100% + 60px); margin-top: -30px; object-fit: cover; object-position: center 35%; --inv-parallax: 30px; }
.bt-closing__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 34%, color-mix(in srgb, var(--inv-deep) 55%, transparent) 62%, var(--inv-deep) 97%);
}
.bt-closing__ribbon { right: 2.2rem; height: 5.2rem; }
.bt-closing__body { position: relative; }
.bt-closing--photo .bt-closing__body { margin-top: -5rem; }
.bt-closing__crest { width: 2.9rem; margin: 0 auto .6rem; filter: drop-shadow(0 1px 0 rgb(0 0 0 / .55)); }
.bt-closing__eyebrow { margin: 0 0 .3rem !important; font-size: .68rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--inv-shine); }
.bt-closing__title { margin: 0 0 .7rem; font-family: var(--bt-serif); font-weight: 700; font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1; color: var(--bt-cream); }
.bt-closing__title em {
    font-style: italic; font-weight: 600; color: var(--inv-shine); background: var(--bt-foil); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bt-closing__message { margin: 0 auto; max-width: 32ch; font-size: .93rem; line-height: 1.6; color: var(--bt-cream-muted); }
.bt-closing__salam { margin: .8rem auto 0 !important; max-width: 24ch; font-family: var(--bt-serif); font-size: 1.2rem; font-style: italic; font-weight: 600; line-height: 1.3; color: var(--inv-shine); }
.bt-closing__signature { margin: .35rem auto 0 !important; max-width: 30ch; font-size: .86rem; color: var(--bt-cream-muted); }
.bt-closing__imprint {
    display: flex; flex-direction: column; gap: .2rem; max-width: 20rem !important; margin: 1.5rem auto 0 !important; padding-top: .8rem;
    border-top: 1px solid color-mix(in srgb, var(--inv-shine) 45%, transparent);
    font-size: .6rem; font-weight: 800; line-height: 1.5; letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-shine) 85%, var(--inv-deep));
}

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

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

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

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

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

/* short phones: the window, the crest and the type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .bt-cover { --win-w: min(74vw, 18rem, calc(28svh * 1.4)); padding-top: 1.8rem; padding-bottom: 1.7rem; }
    .bt-cover__crest { width: 2.9rem; }
    .bt-cover__head { margin-bottom: .9rem; gap: .35rem; }
    .bt-cover__name { font-size: clamp(1.6rem, 7.4vw, 2.05rem); }
    .bt-cover__quote { font-size: .96rem; }
    .bt-cover__guest { margin-top: .8rem; }
    .bt-cover__open { margin-top: .9rem; }
}
@media (max-height: 660px) {
    .bt-cover { --win-w: min(70vw, calc(27svh * 1.4)); padding-top: 1.5rem; padding-bottom: 1.4rem; }
    .bt-cover__ribbon { height: 4rem; }
    .bt-cover__crest { width: 2.5rem; }
    .bt-cover__head { margin-bottom: .75rem; }
    .bt-cover__title { font-size: .6rem; }
    .bt-cover .bt-seal { width: 3.8rem; height: 3.8rem; }
    .bt-cover .bt-seal strong { font-size: 1.6rem; }
    .bt-cover__art { margin-bottom: 1rem; }
    .bt-cover__name { font-size: clamp(1.5rem, 6.9vw, 1.85rem); }
    .bt-cover__batch { margin-top: .45rem; }
    .bt-cover__date { margin-top: .3rem; font-size: 1.02rem; }
    .bt-cover__quote { font-size: .9rem; line-height: 1.28; }
    .bt-cover__guest { margin-top: .7rem; padding: .45rem .9rem .5rem; }
    .bt-plate__name { font-size: 1.3rem; }
    .bt-cover__open { min-height: 2.75rem; margin-top: .8rem; padding: .6rem 1.7rem; }
}
/* very short screens (in-app browsers): a smaller window and quote, so everything fits */
@media (max-height: 600px) {
    .bt-cover { --win-w: min(62vw, calc(25svh * 1.4)); padding-top: 1.2rem; }
    .bt-cover__ribbon { height: 2.9rem; }
    .bt-cover__head { flex-direction: row; gap: .55rem; margin-bottom: .7rem; }
    .bt-cover__crest { width: 2.1rem; }
    .bt-cover__name { font-size: 1.45rem; }
    .bt-cover__quote { font-size: .84rem; line-height: 1.25; }
}

/* wide screens: the phone-width column on the deep leather */
@media (min-width: 560px) {
    body.bt-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.bt-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
        background: var(--bt-grain); opacity: .3;
    }
    .bt-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
    .bt-cover__inner { max-width: 24rem; }
}

/* ---------- 9. motion ---------- */
@keyframes bt-press { from { opacity: 0; scale: 1.18; filter: blur(3px); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes bt-settle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
@keyframes bt-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes bt-pop { 0% { opacity: 0; scale: .4; } 70% { opacity: 1; scale: 1.1; } 100% { opacity: 1; scale: 1; } }
@keyframes bt-ribbon { from { clip-path: polygon(0 0, 100% 0, 100% 0, 50% 0, 0 0); } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .7rem), 0 100%); } }
@keyframes bt-stamp { 0% { opacity: 0; scale: 1.8; } 70% { opacity: 1; scale: .94; } 100% { opacity: 1; scale: 1; } }
@keyframes bt-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* cover (≤ 2.5 s, once): the crest is pressed in (.1–.9 s), the photo settles (.2–1.4 s), the ribbon drops
   (.3–1.1 s), the seal pops (1.1 s), one sweep of light runs over the foil name (.9–2.5 s); the text follows
   through its inv-enter delays (.9–1.36 s + 1.1 s) */
html.inv-anim .bt-cover__crest { animation: bt-press .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .bt-cover__photo { animation: bt-settle 1.2s cubic-bezier(.2, .7, .2, 1) .2s both; }
html.inv-anim .bt-cover__ribbon { animation: bt-ribbon .8s cubic-bezier(.3, .7, .2, 1) .3s both; }
html.inv-anim .bt-cover__seal { animation: bt-pop .5s cubic-bezier(.34, 1.56, .64, 1) 1.1s both; }
html.inv-anim .bt-cover__name .bt-foil { animation: bt-sheen 1.6s ease-in-out .9s both; }

/* margin doodles draw themselves once when their section part is revealed */
html.inv-anim .bt-draw :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.inv-anim :is(.is-revealed .bt-draw, .bt-draw.is-revealed) :is(path, circle) { animation: bt-draw 1.1s ease-out .35s both; }

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

/* ---------- 10. intro scene "Lembar Demi Lembar" (scene.json + sections/_scene) ----------
   The yearbook lies open on its leather board; the class-portrait pages riffle past (CSS 3D turn), the title
   page stays: the crest is stamped in the leather colour, the batch comes on the ribbon banner, a medal swings
   on its strap, the bookmark drops, autograph doodles draw themselves and the milestone seal is pressed on.
   The card is printed on the page itself (no frosted cloud). Times in ms from the start of the intro. */
.bt-scene-board {
    position: absolute; inset: 0;
    background:
        var(--bt-grain) 0 0 / 180px 180px,
        radial-gradient(90% 50% at 30% 20%, color-mix(in srgb, var(--inv-primary) 80%, transparent), transparent 75%),
        var(--inv-deep);
}
.bt-scene-page, .bt-scene-sheet {
    position: absolute; inset: 0; border-radius: 2px 6px 6px 2px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--inv-deep) 30%, transparent), color-mix(in srgb, var(--inv-deep) 5%, transparent) 4%, transparent 9%),
        radial-gradient(70% 30% at 100% 0%, color-mix(in srgb, var(--inv-shine) 20%, transparent), transparent 72%),
        var(--bt-paper);
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .7), 3px 0 0 color-mix(in srgb, var(--inv-soft) 90%, #000), 5px 0 0 color-mix(in srgb, var(--inv-soft) 75%, #000);
}
.bt-scene-page__head {
    position: absolute; bottom: 1.15rem; left: 1.6rem; max-width: 58%; overflow: hidden; white-space: nowrap;
    font: 700 .58rem/1 var(--bt-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--bt-muted);
}
.bt-scene-page__year {
    position: absolute; left: 50%; top: 54%; translate: -50% -50%; white-space: nowrap;
    font: 700 min(9.5rem, 40vw)/1 var(--bt-serif); color: transparent;
    -webkit-text-stroke: 1.2px color-mix(in srgb, var(--inv-accent) 34%, transparent);
}
.bt-scene-page__num {
    position: absolute; right: 1.2rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem;
    font: italic 600 1rem/1 var(--bt-serif); color: var(--bt-ink);
}
.bt-scene-page__num::before { content: ''; width: 1.4rem; height: 1px; background: var(--inv-accent); }
/* the portrait pages: ovals and name lines in a grid, turning over the gutter one after another */
.bt-scene-riffle { position: absolute; inset: 0; perspective: 1400px; display: none; }
html.inv-anim .bt-scene-riffle { display: block; }
.bt-scene-sheet {
    transform-origin: left center; backface-visibility: hidden; z-index: calc(10 - var(--i));
    background:
        linear-gradient(var(--inv-primary), var(--inv-primary)) 50% 1.5rem / 34% 3px no-repeat,
        linear-gradient(var(--inv-accent), var(--inv-accent)) 50% 2.1rem / 20% 1px no-repeat,
        radial-gradient(ellipse 25% 27% at 50% 40%, color-mix(in srgb, var(--inv-primary) 26%, var(--inv-soft)) 96%, transparent 100%) 1.3rem 3.4rem / calc((100% - 2.6rem) / 3) 20% repeat-x,
        radial-gradient(ellipse 24% 2.4% at 50% 82%, color-mix(in srgb, var(--inv-text) 30%, transparent) 90%, transparent 100%) 1.3rem 3.4rem / calc((100% - 2.6rem) / 3) 20% repeat-x,
        radial-gradient(ellipse 25% 27% at 50% 40%, color-mix(in srgb, var(--inv-primary) 20%, var(--inv-soft)) 96%, transparent 100%) 1.3rem calc(3.4rem + 21%) / calc((100% - 2.6rem) / 3) 20% repeat-x,
        radial-gradient(ellipse 24% 2.4% at 50% 82%, color-mix(in srgb, var(--inv-text) 30%, transparent) 90%, transparent 100%) 1.3rem calc(3.4rem + 21%) / calc((100% - 2.6rem) / 3) 20% repeat-x,
        radial-gradient(ellipse 25% 27% at 50% 40%, color-mix(in srgb, var(--inv-primary) 26%, var(--inv-soft)) 96%, transparent 100%) 1.3rem calc(3.4rem + 42%) / calc((100% - 2.6rem) / 3) 20% repeat-x,
        radial-gradient(ellipse 24% 2.4% at 50% 82%, color-mix(in srgb, var(--inv-text) 30%, transparent) 90%, transparent 100%) 1.3rem calc(3.4rem + 42%) / calc((100% - 2.6rem) / 3) 20% repeat-x,
        radial-gradient(ellipse 25% 27% at 50% 40%, color-mix(in srgb, var(--inv-primary) 20%, var(--inv-soft)) 96%, transparent 100%) 1.3rem calc(3.4rem + 63%) / calc((100% - 2.6rem) / 3) 20% repeat-x,
        radial-gradient(ellipse 24% 2.4% at 50% 82%, color-mix(in srgb, var(--inv-text) 30%, transparent) 90%, transparent 100%) 1.3rem calc(3.4rem + 63%) / calc((100% - 2.6rem) / 3) 20% repeat-x,
        linear-gradient(90deg, color-mix(in srgb, var(--inv-deep) 30%, transparent), transparent 9%),
        var(--bt-paper);
}
.bt-scene-sheet:nth-child(even) { filter: brightness(.97) sepia(.06); }
html.inv-anim .bt-scene-sheet { animation: bt-scene-turn .62s cubic-bezier(.45, .05, .4, 1) calc(800ms + var(--i) * 250ms) both; }
@keyframes bt-scene-turn {
    from { transform: rotateY(0); filter: brightness(1); }
    60% { filter: brightness(.82); }
    to { transform: rotateY(-178deg); filter: brightness(.7); }
}
.inv-scene__art > svg.bt-scene-crest { height: auto; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .6)); }
.bt-scene-banner { position: absolute; inset: 0; display: grid; place-items: center; }
.bt-scene-banner .bt-banner { margin: 0 !important; max-width: calc(100% - 4rem); }
.bt-scene-medal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.bt-scene-medal__strap {
    flex: 1; width: 34%; margin-bottom: -16%;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .25), transparent 30%, rgb(255 255 255 / .2) 50%, transparent 70%, rgb(0 0 0 / .25)),
        repeating-linear-gradient(90deg, var(--inv-primary) 0 30%, var(--inv-shine) 30% 40%, var(--inv-primary) 40% 60%, var(--inv-shine) 60% 70%, var(--inv-primary) 70% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}
.bt-scene-medal__art { width: 100%; height: auto; flex: none; }
.bt-scene-ribbon {
    position: absolute; inset: 0; width: auto;
    background:
        linear-gradient(90deg, rgb(0 0 0 / .22), transparent 25%, rgb(255 255 255 / .28) 45%, transparent 62%, rgb(0 0 0 / .2)),
        linear-gradient(180deg, var(--bt-foil-3), var(--inv-accent) 40%, var(--bt-foil-2));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .8rem), 0 100%);
    filter: drop-shadow(2px 3px 3px rgb(0 0 0 / .4));
}
.bt-scene-doodle .bt-doodle { width: 100%; height: auto; color: var(--bt-pen); }
html.inv-anim .bt-scene-doodle :is(path, circle) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bt-scene-draw 1s ease-out var(--draw-at) both; }
@keyframes bt-scene-draw { from { stroke-dashoffset: 1; opacity: 0; } 2% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
.bt-scene-seal { position: absolute; inset: 0; display: grid; place-items: center; }
.bt-scene-seal .bt-seal {
    width: 5rem; height: 5rem; rotate: -8deg; color: var(--inv-shine);
    background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-primary) 45%, var(--inv-deep));
    box-shadow: inset 0 0 0 2px var(--inv-shine), inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 80%, transparent), 0 10px 18px -8px rgb(0 0 0 / .6);
}
.bt-scene-seal .bt-seal::before { border-color: color-mix(in srgb, var(--inv-shine) 55%, transparent); inset: 7px; }
/* the card: printed on the title page */
body.bt-body .inv-intro--scene .inv-scene__card {
    top: 50.5%; width: min(var(--scene-card-w, 76vw), 20rem); aspect-ratio: auto; padding: 1.2rem .6rem;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: none; color: var(--bt-ink);
}
body.bt-body .inv-scene__card .inv-intro__label { margin-bottom: .6rem; font: 800 .64rem/1.3 var(--bt-sans); letter-spacing: .3em; color: var(--inv-primary); }
body.bt-body .inv-scene__card .inv-intro__names {
    font-family: var(--bt-serif) !important; font-weight: 700; font-size: clamp(2.2rem, 10.5vw, 2.9rem); line-height: .98;
    color: var(--bt-ink); text-wrap: balance;
}
body.bt-body .inv-scene__card .inv-intro__rule { width: 7rem; height: 4px; margin-block: .9rem .7rem; background: none; border-block: 1px solid var(--inv-accent); }
body.bt-body .inv-scene__card .inv-intro__date { font: 700 .76rem/1.4 var(--bt-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bt-muted); }
body.bt-body .inv-intro--scene .inv-intro__skip { background: color-mix(in srgb, var(--bt-paper) 85%, transparent); border-color: color-mix(in srgb, var(--inv-primary) 35%, transparent); color: var(--inv-primary); }