/*
 * Template "Ijazah Emas" (Wisuda & Kelulusan) — a classic, formal graduation in the language of a diploma: deep wine
 * velvet, rich gold foil and warm cream parchment. Signature pieces: guilloche work (interlaced wave rosettes and
 * borders like banknotes and diplomas: the #ij-rosette symbol and the --ij-wave / --ij-lattice masks), the embossed
 * gold seal, the red wax seal, the rolled diploma (sections/_rod) and the oval photo cameo (sections/_cameo).
 * Mobile-first, one column (~460px) on a velvet backdrop on wide screens.
 *
 * Colours come from the chosen colour variant (template.json → <x-inv.head>):
 *   --inv-primary (wine / navy / emerald / leather: titles, the velvet glow)   --inv-accent (gold: the foil of every ornament)
 *   --inv-background (cream parchment)   --inv-text   --inv-deep (the velvet night)   --inv-shine (light gold)
 *   --inv-soft (the deeper parchment)   --inv-wax (the red wax seal)   --inv-ribbon (the diploma ribbon and award tails)
 *
 * Section tones (set on each section in its partial): .ij-tone--light (parchment), --soft (deeper parchment),
 * --deep (wine velvet with gold). Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers
 * reduced motion); without it everything is shown finished.
 *
 * Revision standard (docs/template-guide.md section 10): the cover is sized in px steps per screen height, never
 * svh/vh; ornaments stay clear of faces; photos melt into sections with masks; the closing is compact and its names
 * end above the bottom menu.
 *
 * Contents: 1 base · 2 tones · 3 shared pieces (sheet, heading, divider, cameo, seal, wax, compare, tap marker)
 *           · 4 cover · 5 sections in page order · 6 forms · 7 shared components · 8 screen sizes · 9 motion
 *           · 10 intro scene
 */

/* ---------- 1. base ---------- */
:root {
    /* defaults = the "Anggur Emas" variant (the variant's colours override these) */
    --inv-primary: #7a1430;
    --inv-accent: #cf9f3f;
    --inv-background: #f8eedb;
    --inv-text: #2c1015;
    --inv-deep: #2c0611;
    --inv-shine: #f6d98e;
    --inv-soft: #efdcb6;
    --inv-wax: #b8162d;
    --inv-ribbon: #1d4b8f;
    --inv-radius: 10px;

    --ij-script: var(--inv-font-display, 'Pinyon Script'), 'Brush Script MT', cursive;
    --ij-serif: var(--inv-font-heading, 'Playfair Display'), Georgia, 'Times New Roman', serif;
    --ij-read: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --ij-caps: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --ij-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ij-col: 460px;

    /* gold foil, mixed from the accent: dark bronze → gold → pale light */
    --ij-gold-1: color-mix(in srgb, var(--inv-accent) 56%, #3a1e02);
    --ij-gold-2: var(--inv-accent);
    --ij-gold-3: color-mix(in srgb, var(--inv-accent) 38%, #fff8dc);
    --ij-gold-ink: color-mix(in srgb, var(--inv-accent) 62%, #3a1e02);
    --ij-foil: linear-gradient(100deg, var(--ij-gold-1), var(--ij-gold-2) 30%, var(--ij-gold-3) 48%, var(--ij-gold-2) 62%, var(--ij-gold-1));
    --ij-foil-dark: linear-gradient(100deg, var(--ij-gold-ink), var(--ij-gold-1) 30%, var(--ij-gold-2) 50%, var(--ij-gold-1) 70%, var(--ij-gold-ink));

    /* wax (seal), ribbon, the rolled parchment */
    --ij-wax-1: color-mix(in srgb, var(--inv-wax) 62%, #1a0004);
    --ij-wax-2: var(--inv-wax);
    --ij-wax-3: color-mix(in srgb, var(--inv-wax) 66%, #ffd2c4);
    --ij-ribbon-1: color-mix(in srgb, var(--inv-ribbon) 70%, #000);
    --ij-ribbon-2: color-mix(in srgb, var(--inv-ribbon) 82%, #fff);
    --ij-roll-0: color-mix(in srgb, var(--inv-soft) 52%, #4a2a10);
    --ij-roll-1: color-mix(in srgb, var(--inv-soft) 78%, #6b4318);
    --ij-roll-2: var(--inv-soft);
    --ij-roll-3: color-mix(in srgb, var(--inv-background) 70%, #fff);

    --ij-paper: color-mix(in srgb, #fff 55%, var(--inv-background));
    --ij-title: color-mix(in srgb, var(--inv-primary) 86%, var(--inv-deep));
    --ij-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --ij-cream-muted: color-mix(in srgb, var(--inv-background) 84%, transparent);
    --ij-line: color-mix(in srgb, var(--inv-accent) 60%, transparent);
    --ij-drop: 0 26px 42px -26px color-mix(in srgb, var(--inv-deep) 75%, transparent);

    /* guilloche masks (any colour shows through them): a wave band (48×16, sideways 16×48), a banknote lattice for
       grounds and a scalloped seal outline */
    --ij-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M0 8L1 9.1L2 10.1L3 11.1L4 12L5 12.7L6 13.2L7 13.5L8 13.6L9 13.5L10 13.2L11 12.7L12 12L13 11.1L14 10.1L15 9.1L16 8L17 6.9L18 5.9L19 4.9L20 4L21 3.3L22 2.8L23 2.5L24 2.4L25 2.5L26 2.8L27 3.3L28 4L29 4.9L30 5.9L31 6.9L32 8M0 8L1 6.9L2 5.9L3 4.9L4 4L5 3.3L6 2.8L7 2.5L8 2.4L9 2.5L10 2.8L11 3.3L12 4L13 4.9L14 5.9L15 6.9L16 8L17 9.1L18 10.1L19 11.1L20 12L21 12.7L22 13.2L23 13.5L24 13.6L25 13.5L26 13.2L27 12.7L28 12L29 11.1L30 10.1L31 9.1L32 8M0 8L1 8.8L2 9.5L3 10.2L4 10.8L5 11.3L6 11.7L7 11.9L8 12L9 11.9L10 11.7L11 11.3L12 10.8L13 10.2L14 9.5L15 8.8L16 8L17 7.2L18 6.5L19 5.8L20 5.2L21 4.7L22 4.3L23 4.1L24 4L25 4.1L26 4.3L27 4.7L28 5.2L29 5.8L30 6.5L31 7.2L32 8M0 8L1 7.2L2 6.5L3 5.8L4 5.2L5 4.7L6 4.3L7 4.1L8 4L9 4.1L10 4.3L11 4.7L12 5.2L13 5.8L14 6.5L15 7.2L16 8L17 8.8L18 9.5L19 10.2L20 10.8L21 11.3L22 11.7L23 11.9L24 12L25 11.9L26 11.7L27 11.3L28 10.8L29 10.2L30 9.5L31 8.8L32 8M0 8L1 8.5L2 8.9L3 9.3L4 9.7L5 10L6 10.2L7 10.4L8 10.4L9 10.4L10 10.2L11 10L12 9.7L13 9.3L14 8.9L15 8.5L16 8L17 7.5L18 7.1L19 6.7L20 6.3L21 6L22 5.8L23 5.6L24 5.6L25 5.6L26 5.8L27 6L28 6.3L29 6.7L30 7.1L31 7.5L32 8M0 8L1 7.5L2 7.1L3 6.7L4 6.3L5 6L6 5.8L7 5.6L8 5.6L9 5.6L10 5.8L11 6L12 6.3L13 6.7L14 7.1L15 7.5L16 8L17 8.5L18 8.9L19 9.3L20 9.7L21 10L22 10.2L23 10.4L24 10.4L25 10.4L26 10.2L27 10L28 9.7L29 9.3L30 8.9L31 8.5L32 8M0 13.6L1 13.5L2 13.2L3 12.7L4 12L5 11.1L6 10.1L7 9.1L8 8L9 6.9L10 5.9L11 4.9L12 4L13 3.3L14 2.8L15 2.5L16 2.4L17 2.5L18 2.8L19 3.3L20 4L21 4.9L22 5.9L23 6.9L24 8L25 9.1L26 10.1L27 11.1L28 12L29 12.7L30 13.2L31 13.5L32 13.6M0 2.4L1 2.5L2 2.8L3 3.3L4 4L5 4.9L6 5.9L7 6.9L8 8L9 9.1L10 10.1L11 11.1L12 12L13 12.7L14 13.2L15 13.5L16 13.6L17 13.5L18 13.2L19 12.7L20 12L21 11.1L22 10.1L23 9.1L24 8L25 6.9L26 5.9L27 4.9L28 4L29 3.3L30 2.8L31 2.5L32 2.4' stroke-width='.5'/%3E%3Cpath d='M0 .7H32M0 15.3H32' stroke-width='.9'/%3E%3Cpath d='M0 1.9H32M0 14.1H32' stroke-width='.35'/%3E%3C/g%3E%3C/svg%3E");
    --ij-wave-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M8 0L9.1 1L10.1 2L11.1 3L12 4L12.7 5L13.2 6L13.5 7L13.6 8L13.5 9L13.2 10L12.7 11L12 12L11.1 13L10.1 14L9.1 15L8 16L6.9 17L5.9 18L4.9 19L4 20L3.3 21L2.8 22L2.5 23L2.4 24L2.5 25L2.8 26L3.3 27L4 28L4.9 29L5.9 30L6.9 31L8 32M8 0L6.9 1L5.9 2L4.9 3L4 4L3.3 5L2.8 6L2.5 7L2.4 8L2.5 9L2.8 10L3.3 11L4 12L4.9 13L5.9 14L6.9 15L8 16L9.1 17L10.1 18L11.1 19L12 20L12.7 21L13.2 22L13.5 23L13.6 24L13.5 25L13.2 26L12.7 27L12 28L11.1 29L10.1 30L9.1 31L8 32M8 0L8.8 1L9.5 2L10.2 3L10.8 4L11.3 5L11.7 6L11.9 7L12 8L11.9 9L11.7 10L11.3 11L10.8 12L10.2 13L9.5 14L8.8 15L8 16L7.2 17L6.5 18L5.8 19L5.2 20L4.7 21L4.3 22L4.1 23L4 24L4.1 25L4.3 26L4.7 27L5.2 28L5.8 29L6.5 30L7.2 31L8 32M8 0L7.2 1L6.5 2L5.8 3L5.2 4L4.7 5L4.3 6L4.1 7L4 8L4.1 9L4.3 10L4.7 11L5.2 12L5.8 13L6.5 14L7.2 15L8 16L8.8 17L9.5 18L10.2 19L10.8 20L11.3 21L11.7 22L11.9 23L12 24L11.9 25L11.7 26L11.3 27L10.8 28L10.2 29L9.5 30L8.8 31L8 32M8 0L8.5 1L8.9 2L9.3 3L9.7 4L10 5L10.2 6L10.4 7L10.4 8L10.4 9L10.2 10L10 11L9.7 12L9.3 13L8.9 14L8.5 15L8 16L7.5 17L7.1 18L6.7 19L6.3 20L6 21L5.8 22L5.6 23L5.6 24L5.6 25L5.8 26L6 27L6.3 28L6.7 29L7.1 30L7.5 31L8 32M8 0L7.5 1L7.1 2L6.7 3L6.3 4L6 5L5.8 6L5.6 7L5.6 8L5.6 9L5.8 10L6 11L6.3 12L6.7 13L7.1 14L7.5 15L8 16L8.5 17L8.9 18L9.3 19L9.7 20L10 21L10.2 22L10.4 23L10.4 24L10.4 25L10.2 26L10 27L9.7 28L9.3 29L8.9 30L8.5 31L8 32M13.6 0L13.5 1L13.2 2L12.7 3L12 4L11.1 5L10.1 6L9.1 7L8 8L6.9 9L5.9 10L4.9 11L4 12L3.3 13L2.8 14L2.5 15L2.4 16L2.5 17L2.8 18L3.3 19L4 20L4.9 21L5.9 22L6.9 23L8 24L9.1 25L10.1 26L11.1 27L12 28L12.7 29L13.2 30L13.5 31L13.6 32M2.4 0L2.5 1L2.8 2L3.3 3L4 4L4.9 5L5.9 6L6.9 7L8 8L9.1 9L10.1 10L11.1 11L12 12L12.7 13L13.2 14L13.5 15L13.6 16L13.5 17L13.2 18L12.7 19L12 20L11.1 21L10.1 22L9.1 23L8 24L6.9 25L5.9 26L4.9 27L4 28L3.3 29L2.8 30L2.5 31L2.4 32' stroke-width='.5'/%3E%3Cpath d='M.7 0V32M15.3 0V32' stroke-width='.9'/%3E%3Cpath d='M1.9 0V32M14.1 0V32' stroke-width='.35'/%3E%3C/g%3E%3C/svg%3E");
    --ij-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M0 7.5L3 9.2L6 10.8L9 12L12 12.8L15 13.1L18 12.8L21 12L24 10.8L27 9.2L30 7.5L33 5.8L36 4.2L39 3L42 2.2L45 1.9L48 2.2L51 3L54 4.2L57 5.8L60 7.5M0 13.1L3 12.8L6 12L9 10.8L12 9.2L15 7.5L18 5.8L21 4.2L24 3L27 2.2L30 1.9L33 2.2L36 3L39 4.2L42 5.8L45 7.5L48 9.2L51 10.8L54 12L57 12.8L60 13.1M0 7.5L3 5.8L6 4.2L9 3L12 2.2L15 1.9L18 2.2L21 3L24 4.2L27 5.8L30 7.5L33 9.2L36 10.8L39 12L42 12.8L45 13.1L48 12.8L51 12L54 10.8L57 9.2L60 7.5M0 1.9L3 2.2L6 3L9 4.2L12 5.8L15 7.5L18 9.2L21 10.8L24 12L27 12.8L30 13.1L33 12.8L36 12L39 10.8L42 9.2L45 7.5L48 5.8L51 4.2L54 3L57 2.2L60 1.9M0 26.5L3 27.5L6 28L9 28L12 27.5L15 26.5L18 25L21 23.4L24 21.6L27 20L30 18.5L33 17.5L36 17L39 17L42 17.5L45 18.5L48 20L51 21.6L54 23.4L57 25L60 26.5M0 26.5L3 25L6 23.4L9 21.6L12 20L15 18.5L18 17.5L21 17L24 17L27 17.5L30 18.5L33 20L36 21.6L39 23.4L42 25L45 26.5L48 27.5L51 28L54 28L57 27.5L60 26.5M0 18.5L3 17.5L6 17L9 17L12 17.5L15 18.5L18 20L21 21.6L24 23.4L27 25L30 26.5L33 27.5L36 28L39 28L42 27.5L45 26.5L48 25L51 23.4L54 21.6L57 20L60 18.5M0 18.5L3 20L6 21.6L9 23.4L12 25L15 26.5L18 27.5L21 28L24 28L27 27.5L30 26.5L33 25L36 23.4L39 21.6L42 20L45 18.5L48 17.5L51 17L54 17L57 17.5L60 18.5' fill='none' stroke='%23000' stroke-width='.5'/%3E%3C/svg%3E");
    --ij-scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cpath d='M49.6 0L48.9 1.3L47 2.5L44.7 3.5L42.9 4.5L42 5.5L42.6 6.7L44.1 8.2L46.1 9.8L47.6 11.4L47.9 12.8L46.9 13.9L44.8 14.6L42.3 15L40.2 15.4L39.2 16.2L39.4 17.5L40.5 19.3L42 21.4L43 23.3L43 24.8L41.7 25.6L39.5 25.7L37 25.4L34.9 25.3L33.6 25.8L33.5 27.1L34.1 29.2L35 31.5L35.5 33.7L35.1 35.1L33.7 35.5L31.5 35L29.2 34.1L27.1 33.5L25.8 33.6L25.3 34.9L25.4 37L25.7 39.5L25.6 41.7L24.8 43L23.3 43L21.4 42L19.3 40.5L17.5 39.4L16.2 39.2L15.4 40.2L15 42.3L14.6 44.8L13.9 46.9L12.8 47.9L11.4 47.6L9.8 46.1L8.2 44.1L6.7 42.6L5.5 42L4.5 42.9L3.5 44.7L2.5 47L1.3 48.9L0 49.6L-1.3 48.9L-2.5 47L-3.5 44.7L-4.5 42.9L-5.5 42L-6.7 42.6L-8.2 44.1L-9.8 46.1L-11.4 47.6L-12.8 47.9L-13.9 46.9L-14.6 44.8L-15 42.3L-15.4 40.2L-16.2 39.2L-17.5 39.4L-19.3 40.5L-21.4 42L-23.3 43L-24.8 43L-25.6 41.7L-25.7 39.5L-25.4 37L-25.3 34.9L-25.8 33.6L-27.1 33.5L-29.2 34.1L-31.5 35L-33.7 35.5L-35.1 35.1L-35.5 33.7L-35 31.5L-34.1 29.2L-33.5 27.1L-33.6 25.8L-34.9 25.3L-37 25.4L-39.5 25.7L-41.7 25.6L-43 24.8L-43 23.3L-42 21.4L-40.5 19.3L-39.4 17.5L-39.2 16.2L-40.2 15.4L-42.3 15L-44.8 14.6L-46.9 13.9L-47.9 12.8L-47.6 11.4L-46.1 9.8L-44.1 8.2L-42.6 6.7L-42 5.5L-42.9 4.5L-44.7 3.5L-47 2.5L-48.9 1.3L-49.6 0L-48.9 -1.3L-47 -2.5L-44.7 -3.5L-42.9 -4.5L-42 -5.5L-42.6 -6.7L-44.1 -8.2L-46.1 -9.8L-47.6 -11.4L-47.9 -12.8L-46.9 -13.9L-44.8 -14.6L-42.3 -15L-40.2 -15.4L-39.2 -16.2L-39.4 -17.5L-40.5 -19.3L-42 -21.4L-43 -23.3L-43 -24.8L-41.7 -25.6L-39.5 -25.7L-37 -25.4L-34.9 -25.3L-33.6 -25.8L-33.5 -27.1L-34.1 -29.2L-35 -31.5L-35.5 -33.7L-35.1 -35.1L-33.7 -35.5L-31.5 -35L-29.2 -34.1L-27.1 -33.5L-25.8 -33.6L-25.3 -34.9L-25.4 -37L-25.7 -39.5L-25.6 -41.7L-24.8 -43L-23.3 -43L-21.4 -42L-19.3 -40.5L-17.5 -39.4L-16.2 -39.2L-15.4 -40.2L-15 -42.3L-14.6 -44.8L-13.9 -46.9L-12.8 -47.9L-11.4 -47.6L-9.8 -46.1L-8.2 -44.1L-6.7 -42.6L-5.5 -42L-4.5 -42.9L-3.5 -44.7L-2.5 -47L-1.3 -48.9L0 -49.6L1.3 -48.9L2.5 -47L3.5 -44.7L4.5 -42.9L5.5 -42L6.7 -42.6L8.2 -44.1L9.8 -46.1L11.4 -47.6L12.8 -47.9L13.9 -46.9L14.6 -44.8L15 -42.3L15.4 -40.2L16.2 -39.2L17.5 -39.4L19.3 -40.5L21.4 -42L23.3 -43L24.8 -43L25.6 -41.7L25.7 -39.5L25.4 -37L25.3 -34.9L25.8 -33.6L27.1 -33.5L29.2 -34.1L31.5 -35L33.7 -35.5L35.1 -35.1L35.5 -33.7L35 -31.5L34.1 -29.2L33.5 -27.1L33.6 -25.8L34.9 -25.3L37 -25.4L39.5 -25.7L41.7 -25.6L43 -24.8L43 -23.3L42 -21.4L40.5 -19.3L39.4 -17.5L39.2 -16.2L40.2 -15.4L42.3 -15L44.8 -14.6L46.9 -13.9L47.9 -12.8L47.6 -11.4L46.1 -9.8L44.1 -8.2L42.6 -6.7L42 -5.5L42.9 -4.5L44.7 -3.5L47 -2.5L48.9 -1.3Z'/%3E%3C/svg%3E");

    /* colours of the shared components */
    --inv-ambient-1: var(--inv-shine);
    --inv-ambient-2: color-mix(in srgb, var(--inv-shine) 60%, #fff);
}

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

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--ij-sans);
    font-size: 15px;
    line-height: 1.65;
    font-variant-numeric: lining-nums;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--ij-title); }

/* the SVG definitions: present for the gradients and symbols, never seen */
.ij-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ij-wax__letters { font-family: var(--ij-caps); font-size: 21px; font-weight: 700; letter-spacing: .02em; }

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

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

.ij-arabic { font-family: 'Amiri', 'Traditional Arabic', serif; line-height: 1.9; color: var(--ij-title); }
.ij-icon { width: 1.15rem; height: 1.15rem; flex: none; }
.ij-mark { display: block; width: 2.2rem; height: 1.7rem; margin: 0 auto .6rem; }

/* gold foil text: the gradient clipped to the letters with a slow moving shine */
.ij-heading__title em, .ij-cover__names, .ij-closing__names {
    background: var(--ij-foil); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 2. section tones ---------- */
/* light: parchment with a warm glow in two corners and the banknote lattice */
.ij-tone--light {
    background:
        radial-gradient(60% 26% at 100% 0%, color-mix(in srgb, var(--inv-soft) 90%, transparent), transparent 75%),
        radial-gradient(60% 26% at 0% 100%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 75%),
        var(--inv-background);
}
/* soft: the deeper parchment */
.ij-tone--soft {
    background:
        radial-gradient(80% 30% at 50% 0%, color-mix(in srgb, #fff 50%, transparent), transparent 75%),
        linear-gradient(180deg, var(--inv-soft), color-mix(in srgb, var(--inv-soft) 60%, var(--inv-background)));
}
.ij-tone--light::before, .ij-tone--soft::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-primary); opacity: .07;
    -webkit-mask: var(--ij-lattice) center top / 60px 30px repeat; mask: var(--ij-lattice) center top / 60px 30px repeat;
}
/* deep: the wine velvet — a glow of the primary, a gold light, a sheen, and the lattice in gold */
.ij-tone--deep {
    color: var(--inv-background);
    background:
        radial-gradient(90% 40% at 18% 0%, color-mix(in srgb, var(--inv-primary) 92%, transparent), transparent 75%),
        radial-gradient(70% 34% at 100% 100%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 75%),
        radial-gradient(50% 30% at 90% 30%, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 75%),
        var(--inv-deep);
}
.ij-tone--deep::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--inv-shine); opacity: .08;
    -webkit-mask: var(--ij-lattice) center top / 60px 30px repeat; mask: var(--ij-lattice) center top / 60px 30px repeat;
}
.ij-tone--deep a:not(.inv-button) { color: var(--inv-shine); }
.ij-tone--deep .ij-arabic { color: var(--inv-shine); }

/* a client photo behind a section, under a strong gradient of the velvet */
.ij-bgphoto { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.ij-bgphoto img { display: block; width: 100%; height: calc(100% + 80px); margin-top: -40px; object-fit: cover; object-position: center 30%; --inv-parallax: 40px; }
.ij-bgphoto::after { content: ''; position: absolute; inset: 0; }
.ij-tone--deep .ij-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) 92%, transparent),
            color-mix(in srgb, var(--inv-deep) 80%, transparent) 45%,
            color-mix(in srgb, var(--inv-deep) 95%, transparent));
}

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

/* the certificate sheet: parchment inside a gold guilloche border (four wave bands, one mask each) and a fine inner
   rule; sections/_corners puts a rosette on each corner */
.ij-sheet {
    position: relative; isolation: isolate; padding: 2.9rem 2.2rem 2.7rem; border-radius: 4px; color: var(--inv-text);
    background:
        radial-gradient(90% 60% at 50% 40%, color-mix(in srgb, #fff 70%, transparent), transparent 80%),
        linear-gradient(170deg, var(--ij-paper), color-mix(in srgb, var(--inv-soft) 50%, var(--ij-paper)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent), var(--ij-drop);
}
.ij-sheet::before {
    content: ''; position: absolute; inset: 9px; z-index: -1; pointer-events: none; background: var(--ij-foil-dark);
    -webkit-mask: var(--ij-wave) left top / 28px 14px repeat-x, var(--ij-wave) left bottom / 28px 14px repeat-x,
        var(--ij-wave-v) left top / 14px 28px repeat-y, var(--ij-wave-v) right top / 14px 28px repeat-y;
    mask: var(--ij-wave) left top / 28px 14px repeat-x, var(--ij-wave) left bottom / 28px 14px repeat-x,
        var(--ij-wave-v) left top / 14px 28px repeat-y, var(--ij-wave-v) right top / 14px 28px repeat-y;
}
.ij-sheet::after {
    content: ''; position: absolute; inset: 26px; z-index: -1; pointer-events: none; border: 1px solid var(--ij-line);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ij-paper) 80%, transparent), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 35%, transparent);
}
.ij-corner { --ij-rw: 4.5; position: absolute; z-index: 1; width: 2.5rem; height: 2.5rem; overflow: visible; color: var(--ij-gold-1); pointer-events: none; }
.ij-corner--tl { left: -4px; top: -4px; }
.ij-corner--tr { right: -4px; top: -4px; }
.ij-corner--bl { left: -4px; bottom: -4px; }
.ij-corner--br { right: -4px; bottom: -4px; }

/* heading: engraved-caps eyebrow between two rosettes, serif title, the last word in the script in gold foil, divider */
.ij-heading { margin: 0 0 2rem; }
.ij-heading__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .55rem;
    font-family: var(--ij-caps); font-size: .72rem; font-weight: 700; line-height: 1.25; letter-spacing: .22em; text-transform: uppercase; color: var(--ij-gold-ink);
}
.ij-heading__eyebrow svg { --ij-rw: 7; width: 1.05rem; height: 1.05rem; flex: none; overflow: visible; color: var(--inv-accent); }
.ij-heading__title {
    margin: 0; font-family: var(--ij-serif); font-size: 2.05rem; font-weight: 500; line-height: 1.12;
    color: var(--ij-title); text-wrap: balance;
}
.ij-heading__title em {
    display: inline-block; padding: 0 .1em .12em; font-family: var(--ij-script); font-style: normal; font-weight: 400;
    font-size: 1.32em; line-height: .9; word-spacing: .12em;
}
.ij-heading__divider { margin: .9rem auto 0; }
.ij-tone--deep .ij-heading__eyebrow { color: var(--inv-shine); }
.ij-tone--deep .ij-heading__title { color: #fff; }
/* on parchment the foil runs darker, so the script word keeps its contrast */
.ij-tone--light .ij-heading__title em, .ij-tone--soft .ij-heading__title em { background-image: var(--ij-foil-dark); }

/* the guilloche divider: wave bands fading out to the ends around a small seal-rosette */
.ij-divider { display: flex; align-items: center; justify-content: center; gap: .3rem; width: min(14rem, 74%); }
.ij-divider__band {
    flex: 1; height: 12px; background: var(--ij-foil);
    -webkit-mask: linear-gradient(90deg, transparent, #000 70%), var(--ij-wave) right center / 24px 12px repeat-x;
    -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 70%) intersect, var(--ij-wave) right center / 24px 12px repeat-x;
}
.ij-divider__band--right {
    -webkit-mask: linear-gradient(270deg, transparent, #000 70%), var(--ij-wave) left center / 24px 12px repeat-x;
    -webkit-mask-composite: source-in; mask: linear-gradient(270deg, transparent, #000 70%) intersect, var(--ij-wave) left center / 24px 12px repeat-x;
}
.ij-divider__knot { --ij-rw: 5; width: 1.9rem; height: 1.9rem; flex: none; overflow: visible; color: var(--ij-gold-1); }

/* the photo cameo (sections/_cameo): figure 200:260, the photo oval inside the ring */
.ij-cameo { --cameo-w: 14rem; --cameo-pos: center 25%; position: relative; width: var(--cameo-w); aspect-ratio: 200 / 260; margin: 0 auto; flex: none; }
.ij-cameo__oval {
    position: absolute; left: 12%; right: 12%; top: 10.77%; bottom: 10.77%; overflow: hidden; border-radius: 50%;
    background:
        radial-gradient(70% 50% at 50% 30%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 72%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep));
}
.ij-cameo__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cameo-pos); }
.ij-cameo__photo--bg { background: var(--cameo-pos) / cover no-repeat; }
.ij-cameo__empty { position: absolute; inset: 0; display: grid; place-items: center; }
.ij-cameo__empty-rosette { --ij-rw: 1.6; position: absolute; width: 86%; height: auto; color: var(--inv-shine); opacity: .45; overflow: visible; }
.ij-cameo__initials { position: relative; font-family: var(--ij-caps); font-weight: 700; font-size: calc(var(--cameo-w) * .17); line-height: 1; letter-spacing: .06em; color: #fff; white-space: nowrap; text-shadow: 0 6px 18px rgb(0 0 0 / .3); }
.ij-cameo__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25)); }
.ij-pearls { stroke-width: 3; stroke-linecap: round; stroke-dasharray: .1 6.4; }
.ij-cameo__wreath { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 3px 3px rgb(0 0 0 / .3)); }
/* the award at the foot of the oval: the gold seal with two ribbon tails (over the chest, never the face) */
.ij-cameo__award { position: absolute; left: 50%; bottom: -4%; width: 27%; aspect-ratio: 1; margin-left: -13.5%; pointer-events: none; }
.ij-cameo__seal { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.ij-cameo__tails { position: absolute; left: 14%; top: 52%; width: 72%; height: auto; overflow: visible; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .3)); }

/* the rolled parchment */
.ij-rod { display: block; width: 100%; height: 100%; overflow: visible; }

/* the wax seal */
.ij-wax { display: block; overflow: visible; }
.ij-wax__piece { transform-box: view-box; transform-origin: 50% 50%; }

/* the award rosette of the predicate: a small gold seal with ribbon tails beside a wine plaque */
.ij-award { display: inline-flex; align-items: center; margin: 1rem auto 0 !important; max-width: 100%; }
.ij-award__seal { position: relative; z-index: 1; width: 3.4rem; height: 3.4rem; flex: none; margin-right: -1.1rem; }
.ij-award__disc { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35)); }
.ij-award__tails { position: absolute; left: 16%; top: 50%; width: 68%; height: auto; overflow: visible; }
.ij-award__text {
    padding: .45rem 1rem .45rem 1.5rem; border-radius: 0 999px 999px 0; text-align: left;
    font-family: var(--ij-read); font-size: 1.12rem; font-style: italic; font-weight: 700; line-height: 1.2; color: var(--inv-shine);
    background: linear-gradient(120deg, var(--ij-title), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)));
    box-shadow: inset 0 0 0 1px var(--ij-line), 0 10px 20px -10px color-mix(in srgb, var(--inv-deep) 70%, transparent);
}

/* "Dulu & Sekarang" (sections/_compare): two photos in the oval cameo, the handle drags */
.ij-compare-wrap { position: relative; width: min(100%, 15rem); aspect-ratio: 200 / 260; margin: 0 auto 3.3rem; }
.ij-compare { position: absolute; left: 12%; right: 12%; top: 10.77%; bottom: 10.77%; overflow: hidden; border-radius: 50%; touch-action: pan-y; background: var(--inv-deep); }
.ij-compare__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .25)); }
.ij-compare__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ij-compare__then { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ij-compare__then .ij-compare__img { filter: sepia(.5) contrast(1.05) brightness(.98); }
.ij-compare__tag {
    position: absolute; bottom: 2%; padding: .18rem .6rem; border-radius: 3px; font-family: var(--ij-caps); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%; box-shadow: 0 4px 10px -4px rgb(0 0 0 / .4); pointer-events: none;
}
.ij-compare__tag--then { left: -4%; }
.ij-compare__tag--now { right: -4%; }
.ij-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--ij-gold-3); box-shadow: 0 0 8px rgb(0 0 0 / .5); pointer-events: none; }
.ij-compare__knob {
    position: absolute; left: 50%; top: 56%; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin: -1.35rem 0 0 -1.35rem; border-radius: 50%;
    color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%; box-shadow: 0 0 0 3px #fff, 0 8px 18px -6px rgb(0 0 0 / .6);
}
.ij-compare__knob svg { width: 1.25rem; height: 1.25rem; }
.ij-compare .ij-tap { inset: auto; left: 50%; top: 56%; width: 5.2rem; height: 5.2rem; margin: -2.6rem 0 0 -2.6rem; }
.ij-compare .ij-tap__ring { left: 50%; top: 50%; width: 100%; margin: -50% 0 0 -50%; }
.ij-compare .ij-tap__hand { left: 46%; top: 58%; }
.ij-compare__hint {
    position: absolute; left: 50%; top: 100%; margin-top: .55rem; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
    padding: .36rem .95rem; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .03em;
    color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%; box-shadow: 0 8px 16px -8px rgb(0 0 0 / .6);
}
.ij-compare__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ij-compare__range:focus-visible { opacity: .01; }
.ij-compare:has(.ij-compare__range:focus-visible) .ij-compare__knob { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--inv-shine); }

/* the tap marker: two pulsing gold rings, a tapping hand */
.ij-tap { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.ij-tap__ring {
    position: absolute; left: 50%; top: 50%; width: 6rem; aspect-ratio: 1; margin: -3rem 0 0 -3rem; border-radius: 50%;
    border: 2.5px solid var(--inv-shine); opacity: 0;
}
.ij-tap__hand {
    position: absolute; left: 56%; top: 62%; width: 2.6rem; height: 2.6rem;
    fill: #fff; stroke: var(--ij-gold-1); stroke-width: 1.4; stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .35));
}

/* ---------- 4. cover ---------- */
.ij-cover {
    --cameo-cover: 14.4rem;
    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;
    padding: 2.6rem 1.4rem 1.8rem; isolation: isolate; color: var(--inv-background);
    background:
        radial-gradient(75% 38% at 50% 30%, color-mix(in srgb, var(--inv-primary) 95%, transparent), transparent 75%),
        radial-gradient(60% 30% at 0% 100%, color-mix(in srgb, var(--inv-primary) 60%, transparent), transparent 75%),
        radial-gradient(60% 30% at 100% 100%, color-mix(in srgb, var(--inv-accent) 18%, transparent), transparent 75%),
        var(--inv-deep);
    transition: opacity .9s ease;
}
/* the banknote lattice in gold */
.ij-cover::before {
    content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .1; background: var(--inv-shine);
    -webkit-mask: var(--ij-lattice) center top / 60px 30px repeat; mask: var(--ij-lattice) center top / 60px 30px repeat;
}
/* gold dust drifting up slowly (a living ground) */
.ij-cover::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .8;
    background:
        radial-gradient(1.6px 1.6px at 12% 82%, var(--inv-shine), transparent),
        radial-gradient(1.2px 1.2px at 28% 64%, var(--inv-shine), transparent),
        radial-gradient(2px 2px at 76% 74%, var(--inv-shine), transparent),
        radial-gradient(1.3px 1.3px at 88% 40%, var(--inv-shine), transparent),
        radial-gradient(1.8px 1.8px at 8% 30%, var(--inv-shine), transparent),
        radial-gradient(1.2px 1.2px at 62% 18%, var(--inv-shine), transparent),
        radial-gradient(1.5px 1.5px at 42% 92%, var(--inv-shine), transparent);
    background-size: 100% 420px;
}
/* the guilloche band along the bottom and both sides, fading out before the top corners */
.ij-cover__frame {
    position: absolute; inset: .7rem; z-index: -1; pointer-events: none;
    -webkit-mask: linear-gradient(0deg, #000 55%, transparent 88%); mask: linear-gradient(0deg, #000 55%, transparent 88%);
}
.ij-cover__frame::before {
    content: ''; position: absolute; inset: 0; background: var(--ij-foil); opacity: .85;
    -webkit-mask: var(--ij-wave) left bottom / 24px 12px repeat-x, var(--ij-wave-v) left top / 12px 24px repeat-y, var(--ij-wave-v) right top / 12px 24px repeat-y;
    mask: var(--ij-wave) left bottom / 24px 12px repeat-x, var(--ij-wave-v) left top / 12px 24px repeat-y, var(--ij-wave-v) right top / 12px 24px repeat-y;
}
.ij-cover__corner { --ij-rw: 3; position: absolute; z-index: -1; bottom: -.2rem; width: 3.2rem; height: 3.2rem; overflow: visible; color: var(--ij-gold-2); pointer-events: none; }
.ij-cover__corner--bl { left: -.2rem; }
.ij-cover__corner--br { right: -.2rem; }
/* the big guilloche rosette turning very slowly behind the cameo */
.ij-cover__rosette {
    position: absolute; z-index: -1; left: 50%; top: calc(2.6rem + var(--cameo-cover) * .65); width: calc(var(--cameo-cover) * 2.15); height: auto; margin-left: calc(var(--cameo-cover) * -1.075);
    translate: 0 -50%; transform-origin: 50% 50%; transform-box: border-box; overflow: visible; color: var(--inv-shine); opacity: .2; pointer-events: none;
}
.ij-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; text-align: center; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.ij-cover__title {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem;
    font-family: var(--ij-caps); font-size: .74rem; font-weight: 700; line-height: 1.25; letter-spacing: .26em; text-transform: uppercase; color: var(--inv-shine);
}
.ij-cover__title::before, .ij-cover__title::after { content: ''; width: 1.6rem; height: 1px; background: var(--inv-shine); opacity: .8; }

.ij-cover__art { position: relative; width: var(--cameo-cover); margin-bottom: .3rem; }
/* a warm light breathing behind the cameo */
.ij-cover__art::before {
    content: ''; position: absolute; z-index: -1; left: -26%; right: -26%; top: 2%; bottom: 2%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 34%, transparent), transparent);
}
.ij-cameo--cover { --cameo-w: var(--cameo-cover); }

.ij-cover__names {
    margin: 1.1rem 0 0; max-width: 100%; font-family: var(--ij-script); font-size: 3.3rem; font-weight: 400; line-height: 1.12;
    padding: 0 .25em .08em; word-spacing: .12em; text-wrap: balance; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .35));
}
.ij-cover__degree { margin: .05rem 0 0; font-family: var(--ij-caps); font-size: .84rem; font-weight: 600; letter-spacing: .12em; line-height: 1.4; color: var(--inv-shine); text-wrap: balance; }
.ij-cover__date { margin: .55rem 0 0; }
.ij-cover__date span {
    display: inline-block; padding: .3rem 1.6rem .34rem; font-family: var(--ij-read); font-size: 1.1rem; font-weight: 700; letter-spacing: .03em;
    color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%;
    /* a certificate cartouche: notched corners */
    clip-path: polygon(.6rem 0, calc(100% - .6rem) 0, 100% .6rem, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, .6rem 100%, 0 calc(100% - .6rem), 0 .6rem);
}
.ij-cover__quote {
    max-width: 30ch; margin: .5rem 0 0; font-family: var(--ij-read); font-style: italic; font-weight: 500;
    font-size: 1.08rem; line-height: 1.3; color: var(--ij-cream-muted);
}
.ij-cover__guest {
    position: relative; width: min(100%, 18rem); margin: .75rem 0 0; padding: .45rem 1rem .5rem; border-radius: 3px; color: var(--inv-text);
    background: linear-gradient(170deg, var(--ij-paper), color-mix(in srgb, var(--inv-soft) 70%, var(--ij-paper)));
    box-shadow: inset 0 0 0 3px var(--ij-paper), inset 0 0 0 4px var(--ij-line), 0 14px 24px -14px rgb(0 0 0 / .7);
}
.ij-cover__guest p { margin: 0; font-family: var(--ij-caps); font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-cover__guest-name { display: block; font-family: var(--ij-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.22; color: var(--ij-title); overflow-wrap: anywhere; }
.ij-cover__open {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: .85rem; min-height: 2.9rem; padding: .5rem 1.7rem .5rem .55rem; font-weight: 600; letter-spacing: .05em;
    color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%;
    box-shadow: 0 0 0 3px var(--inv-deep), 0 0 0 4.2px var(--ij-line), 0 14px 26px -12px rgb(0 0 0 / .6);
}
.ij-cover__open-wax { width: 2.1rem; height: 2.1rem; flex: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .35)); }

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

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

/* opening: the certificate sheet */
.ij-opening { padding: 3.6rem 1.2rem 4rem; }
.ij-opening__sheet { max-width: 23rem; margin: 0 auto; padding: 3.2rem 2.3rem 3rem; }
.ij-opening__basmalah { margin: 0 0 .5rem; font-size: 1.7rem; }
.ij-opening__greeting { margin: 0 auto; max-width: 22ch; font-family: var(--ij-read); font-size: 1.42rem; font-weight: 700; font-style: italic; line-height: 1.3; color: var(--ij-title); text-wrap: balance; }
.ij-opening__divider { margin: .9rem auto; }
.ij-opening__message { margin: 0 auto; max-width: 28ch; color: var(--ij-muted); }
.ij-opening__quote { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--ij-line); }
.ij-opening__quote p { margin: 0; font-family: var(--ij-read); font-style: italic; font-size: 1.16rem; font-weight: 500; line-height: 1.48; color: var(--inv-text); }
.ij-opening__quote cite,
.ij-prayer__text cite {
    display: inline-block; margin-top: .9rem; padding: .26rem .9rem; border-radius: 999px; font-style: normal; font-family: var(--ij-caps); font-size: .66rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ij-gold-ink); box-shadow: inset 0 0 0 1px var(--ij-line);
}

/* graduate: a card per graduate — the compare slider or the cameo, the name and degree, major, award, thesis, parents */
.ij-graduate__list { display: grid; gap: 3rem; }
.ij-graduate__card { max-width: 24rem; margin: 0 auto; }
.ij-cameo--graduate { --cameo-w: min(13.5rem, 62vw); --cameo-pos: center 22%; }
.ij-graduate__name { margin: 1.3rem auto 0; max-width: 20ch; font-family: var(--ij-serif); font-size: 1.75rem; font-weight: 600; line-height: 1.18; color: var(--ij-title); text-wrap: balance; }
.ij-graduate__degree { font-weight: 500; color: var(--ij-gold-ink); }
.ij-graduate__major { margin: .45rem auto 0 !important; font-family: var(--ij-caps); font-size: .78rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-graduate__thesis {
    position: relative; margin: 1.2rem auto 0; padding: 1.3rem 1.1rem .95rem; max-width: 22rem; border-radius: 3px; background: var(--ij-paper);
    box-shadow: inset 0 0 0 1px var(--ij-line), 0 14px 26px -18px color-mix(in srgb, var(--inv-deep) 60%, transparent);
}
.ij-graduate__thesis::before {
    content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 10px; background: var(--ij-foil-dark);
    -webkit-mask: var(--ij-wave) left center / 20px 10px repeat-x; mask: var(--ij-wave) left center / 20px 10px repeat-x;
}
.ij-graduate__thesis span { display: block; font-family: var(--ij-caps); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-graduate__thesis p { margin: .25rem 0 0; font-family: var(--ij-read); font-size: 1.14rem; font-style: italic; font-weight: 600; line-height: 1.38; color: var(--inv-text); }
.ij-graduate__parents { margin: 1.1rem auto 0 !important; font-size: .9rem; color: var(--ij-muted); }
.ij-graduate__parents span { display: block; font-size: .8rem; }
.ij-graduate__parents strong { display: block; font-family: var(--ij-serif); font-size: 1.12rem; font-weight: 600; color: var(--inv-text); text-wrap: balance; }

/* institution: "Ketuk untuk membuka ijazah" — the rolled diploma, the certificate, the gold stamp */
.ij-institution { padding: 4.2rem 1rem 4.6rem; }
.ij-diploma { --dip-w: min(21rem, calc(100vw - 2rem)); --rod-h: calc(var(--dip-w) * 72 / 320); position: relative; width: var(--dip-w); margin: 0 auto; text-align: center; }
.ij-diploma__roll { position: relative; z-index: 2; height: var(--rod-h); filter: drop-shadow(0 12px 12px rgb(0 0 0 / .45)); }
/* the sheet hangs from the middle of the top roll to the middle of the bottom roll */
.ij-diploma__body { display: grid; grid-template-rows: 1fr; margin: calc(var(--rod-h) * -.5) 4.5%; }
.ij-diploma__clip { min-height: 0; overflow: hidden; }
.ij-cert { padding: calc(var(--rod-h) * .5 + 2.2rem) 1.9rem calc(var(--rod-h) * .5 + 1.9rem); border-radius: 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent); }
.ij-cert .ij-corner--tl, .ij-cert .ij-corner--tr { top: calc(var(--rod-h) * .5 - 4px); }
.ij-cert .ij-corner--bl, .ij-cert .ij-corner--br { bottom: calc(var(--rod-h) * .5 - 4px); }
.ij-cert::before { top: calc(var(--rod-h) * .5 + 9px); bottom: calc(var(--rod-h) * .5 + 9px); }
.ij-cert::after { top: calc(var(--rod-h) * .5 + 26px); bottom: calc(var(--rod-h) * .5 + 26px); }
.ij-cert__crest { display: grid; place-items: center; margin: 0 auto .7rem; }
.ij-cert__rosette { --ij-rw: 2.6; width: 4.2rem; height: 4.2rem; overflow: visible; color: var(--ij-gold-1); }
.ij-cert__logo { display: block; width: 4.4rem; height: 4.4rem; object-fit: contain; padding: .45rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--inv-accent), 0 0 0 5px var(--ij-paper), 0 0 0 6px var(--ij-line); }
.ij-cert__school { margin: 0 auto; max-width: 20ch; font-family: var(--ij-caps); font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--ij-title); text-wrap: balance; }
.ij-cert__faculty { margin: .3rem auto 0; font-family: var(--ij-read); font-size: 1.08rem; font-style: italic; font-weight: 600; line-height: 1.3; color: var(--ij-muted); text-wrap: balance; }
.ij-cert__lead { margin: 1.1rem 0 0; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-cert__graduate + .ij-cert__graduate { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--ij-line); }
.ij-cert__name { margin: .25rem auto 0; max-width: 100%; font-family: var(--ij-script); font-size: clamp(1.7rem, 8vw, 2.2rem); line-height: 1.2; word-spacing: .12em; color: var(--ij-title); text-wrap: balance; overflow-wrap: break-word; }
.ij-cert__degree { margin: .05rem 0 0; font-family: var(--ij-caps); font-size: .92rem; font-weight: 700; letter-spacing: .1em; color: var(--ij-gold-ink); }
.ij-cert__line { margin: .55rem 0 0; font-family: var(--ij-read); font-size: 1rem; font-style: italic; color: var(--ij-muted); }
.ij-cert__major { margin: .05rem auto 0; max-width: 22ch; font-family: var(--ij-caps); font-size: .95rem; font-weight: 700; line-height: 1.35; letter-spacing: .06em; color: var(--ij-title); text-wrap: balance; }
.ij-cert__predicate { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: .6rem 0 0; font-family: var(--ij-read); font-size: 1.12rem; font-style: italic; font-weight: 700; line-height: 1.25; color: var(--ij-gold-ink); }
.ij-cert__predicate svg { width: 1.05rem; height: auto; flex: none; overflow: visible; transform: rotate(-30deg); }
.ij-cert__predicate .ij-cert__predicate-right { transform: scaleX(-1) rotate(-30deg); }
.ij-cert__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: .95rem 0 0; }
.ij-cert__facts span { padding: .2rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--ij-title); box-shadow: inset 0 0 0 1px var(--ij-line); }
.ij-cert__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .8rem; margin-top: 1.1rem; text-align: left; }
.ij-cert__ceremony { margin: 0; font-size: .7rem; font-weight: 600; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--ij-muted); }
.ij-cert__sign { display: block; width: 7.5rem; height: 1px; margin-bottom: .35rem; background: var(--ij-gold-ink); }
.ij-cert__stamp { position: relative; display: block; width: 4.6rem; height: 4.6rem; margin-right: -.3rem; }
.ij-cert__stamp-seal { position: relative; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 6px rgb(0 0 0 / .35)); }
.ij-cert__stamp-tails { position: absolute; left: 16%; top: 50%; width: 68%; height: auto; overflow: visible; }

/* the tie (ribbon + wax) closes the scroll; only shown once Alpine armed the section */
.ij-diploma__tie {
    position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: none; height: calc(var(--rod-h) * 1.9); padding: 0; border: 0;
    background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ij-diploma__tie:focus-visible { outline: 2px solid var(--inv-shine); outline-offset: 4px; border-radius: 1rem; }
.ij-diploma__ribbon {
    position: absolute; left: 50%; top: calc(var(--rod-h) * .05); width: calc(var(--rod-h) * .96); height: calc(var(--rod-h) * 1.92); margin-left: calc(var(--rod-h) * -.48);
    overflow: visible; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .35));
}
.ij-diploma__wax {
    position: absolute; left: 50%; top: calc(var(--rod-h) * .5); width: 4.9rem; height: 4.9rem; margin: -2.45rem 0 0 -2.45rem;
    filter: drop-shadow(0 6px 7px rgb(0 0 0 / .45));
}
.ij-diploma__tie .ij-tap { inset: auto; left: 50%; top: calc(var(--rod-h) * .5); width: 0; height: 0; }
.ij-diploma__tie .ij-tap__hand { left: 1.2rem; top: .9rem; }
.ij-diploma__label {
    display: none; position: relative; z-index: 3; margin: 0; padding: .4rem 1rem; border-radius: 999px; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%; box-shadow: 0 8px 16px -8px rgb(0 0 0 / .6);
}
.ij-institution.is-armed .ij-diploma__body { grid-template-rows: 0fr; }
.ij-institution.is-armed .ij-diploma__tie, .ij-institution.is-open .ij-diploma__tie { display: block; }
.ij-institution.is-armed .ij-diploma__label { display: inline-block; margin-top: calc(var(--rod-h) * 1.05); }
.ij-institution.is-open .ij-diploma__tie { pointer-events: none; visibility: hidden; }
.ij-institution.is-armed .ij-cert__stamp { opacity: 0; }

/* thanks: the letter with the names on ruled lines, the signature and a small wax seal */
.ij-thanks__card { max-width: 23rem; margin: 0 auto; padding: 3rem 1.8rem 2.6rem; }
.ij-thanks__words { margin: 0; font-family: var(--ij-read); font-size: 1.22rem; font-style: italic; font-weight: 500; line-height: 1.5; color: var(--inv-text); }
.ij-thanks__names { display: grid; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.ij-thanks__names li { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .42rem 0; font-size: .9rem; font-weight: 500; line-height: 1.35; color: var(--ij-title); border-bottom: 1px solid var(--ij-line); text-wrap: balance; }
.ij-thanks__names li:first-child { border-top: 1px solid var(--ij-line); }
.ij-thanks__names li::before { content: ''; width: 9px; height: 9px; flex: none; background: var(--inv-accent); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ij-thanks__sign { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.1rem; }
.ij-thanks__signature { font-family: var(--ij-script); font-style: normal; font-size: 2.4rem; line-height: 1.15; word-spacing: .12em; color: var(--ij-title); }
.ij-thanks__wax { width: 3.2rem; height: 3.2rem; flex: none; transform: rotate(-12deg); filter: drop-shadow(0 4px 5px rgb(0 0 0 / .35)); }

/* next step: the quill writing up to the card */
.ij-next__quill { display: block; width: min(15rem, 80%); height: auto; margin: 0 auto -.6rem; overflow: visible; }
.ij-next__ink { stroke-dasharray: 1; }
.ij-next__card {
    position: relative; max-width: 22rem; margin: 0 auto; padding: 2rem 1.4rem 1.6rem; border-radius: 3px; background: var(--ij-paper);
    box-shadow: inset 0 0 0 1px var(--ij-line), var(--ij-drop);
}
.ij-next__card::before {
    content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 12px; background: var(--ij-foil-dark);
    -webkit-mask: var(--ij-wave) left center / 24px 12px repeat-x; mask: var(--ij-wave) left center / 24px 12px repeat-x;
}
.ij-next__label { margin: 0; font-family: var(--ij-caps); font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-next__title { margin: .3rem auto 0; max-width: 18ch; font-family: var(--ij-serif); font-size: 1.55rem; font-weight: 600; line-height: 1.22; color: var(--ij-title); text-wrap: balance; }
.ij-next__text { margin: .5rem auto 0; max-width: 30ch; font-size: .9rem; color: var(--ij-muted); }

/* events: certificate cards with a notched photo window and a scalloped gold seal for the date */
.ij-event { margin: 0 auto; max-width: 25rem; padding: 1.4rem 1.3rem 2rem; text-align: left; }
.ij-event + .ij-event { margin-top: 2.4rem; }
.ij-event__media { position: relative; margin: .2rem 0 0; }
.ij-event__photo {
    display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 30%;
    clip-path: polygon(1.1rem 0, calc(100% - 1.1rem) 0, 100% 1.1rem, 100% calc(100% - 1.1rem), calc(100% - 1.1rem) 100%, 1.1rem 100%, 0 calc(100% - 1.1rem), 0 1.1rem);
}
.ij-event__top { display: flex; align-items: center; gap: .9rem; padding: .6rem .2rem 0; }
.ij-event__media + .ij-event__top { margin-top: -2.4rem; align-items: flex-end; }
.ij-event__date {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 5rem; height: 5rem; margin: 0;
    color: var(--ij-title); font-size: .54rem; font-weight: 700; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase;
    filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--inv-deep) 45%, transparent));
}
.ij-event__date::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle, var(--ij-paper) 0 56%, var(--ij-gold-1) 57% 59%, transparent 60%), var(--ij-foil);
    -webkit-mask: var(--ij-scallop) center / contain no-repeat; mask: var(--ij-scallop) center / contain no-repeat;
}
.ij-event__date strong { font-family: var(--ij-serif); font-size: 1.7rem; font-weight: 700; line-height: 1; letter-spacing: 0; }
.ij-event__date span { color: var(--ij-gold-ink); }
.ij-event__head { position: relative; min-width: 0; padding-bottom: .1rem; }
.ij-event__media + .ij-event__top .ij-event__head { padding-top: 2.7rem; }
.ij-event__name { margin: 0; font-family: var(--ij-serif); font-size: 1.45rem; font-weight: 600; line-height: 1.15; color: var(--ij-title); text-wrap: balance; }
.ij-event__full { margin: .15rem 0 0; font-size: .8rem; color: var(--ij-muted); }
.ij-event__rows { display: grid; gap: .7rem; margin: 1rem .2rem 0; padding: .95rem 0 0; list-style: none; font-size: .9rem; border-top: 1px solid var(--ij-line); }
.ij-event__rows li { display: flex; align-items: flex-start; gap: .65rem; }
.ij-event__rows .ij-icon { width: 2rem; height: 2rem; padding: .42rem; border-radius: 50%; color: var(--ij-gold-ink); box-shadow: inset 0 0 0 1px var(--ij-line); }
.ij-event__rows li > span { padding-top: .28rem; }
.ij-event__venue { display: block; font-weight: 600; }
.ij-event__address { display: block; font-size: .85rem; color: var(--ij-muted); }
.ij-event .inv-maps { margin: 1.1rem .2rem 0; text-align: center; }
.ij-event .inv-maps .inv-button { width: 100%; font-weight: 600; }
.ij-event .inv-maps__frame { height: 180px; border-radius: 6px; }

/* countdown: scalloped gold seals */
.ij-countdown .inv-countdown { gap: clamp(.4rem, 2.2vw, .75rem); }
.ij-countdown .inv-countdown__item {
    position: relative; isolation: isolate; display: grid; place-content: center; width: clamp(4.1rem, 19vw, 4.9rem); min-width: 0; aspect-ratio: 1; padding: 0;
    color: var(--inv-text); background: none; box-shadow: none; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--inv-shine) 30%, transparent));
}
.ij-countdown .inv-countdown__item::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle, var(--ij-paper) 0 55%, var(--ij-gold-1) 56% 58%, transparent 59%), var(--ij-foil);
    -webkit-mask: var(--ij-scallop) center / contain no-repeat; mask: var(--ij-scallop) center / contain no-repeat;
}
.ij-countdown .inv-countdown__value { font-variant-numeric: lining-nums tabular-nums; font-family: var(--ij-serif); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--ij-title); }
.ij-countdown .inv-countdown__label { margin-top: .05rem; font-size: .5rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-countdown .inv-countdown__done { font-family: var(--ij-read); font-size: 1.3rem; font-style: italic; color: var(--inv-shine); }
.ij-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 2rem; }
.ij-countdown .inv-countdown__actions .inv-button {
    width: min(100%, 17rem); min-height: 2.75rem; padding: .6rem 1rem; font-size: .84rem; font-weight: 600;
    color: var(--inv-background); background: color-mix(in srgb, var(--inv-background) 10%, transparent);
    box-shadow: inset 0 0 0 1px var(--ij-line);
}
.ij-countdown .inv-countdown__actions .inv-button:first-child { color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%; box-shadow: none; }
.ij-countdown .inv-cal {
    --inv-cal-bg: var(--ij-paper); --inv-cal-mark: var(--inv-primary);
    max-width: 19rem; margin: 2.8rem auto 0; border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--ij-line), inset 0 0 0 5px var(--ij-paper), inset 0 0 0 6px var(--ij-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.ij-countdown .inv-cal__month { font-family: var(--ij-serif); font-size: 1.4rem; font-weight: 600; font-style: italic; color: var(--ij-title); }

/* prayer: a certificate panel with the gold seal resting on its top edge */
.ij-prayer { padding-top: 5.6rem; }
.ij-prayer__panel { max-width: 22rem; margin: 0 auto; padding: 3.6rem 1.7rem 3rem; }
.ij-prayer__seal { position: absolute; z-index: 2; left: 50%; top: -2.4rem; width: 4.8rem; height: 4.8rem; margin-left: -2.4rem; overflow: visible; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .3)); }
.ij-prayer__eyebrow { margin: 0 0 .9rem; font-family: var(--ij-caps); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-prayer__arabic { margin: 0 0 1rem; font-size: 1.55rem; text-wrap: balance; }
.ij-prayer__text { margin: 0; }
.ij-prayer__text p { margin: 0; font-family: var(--ij-read); font-size: 1.16rem; font-style: italic; font-weight: 500; line-height: 1.5; }

/* rundown: a gold thread, the times on wine plaques, the steps on parchment slips */
.ij-rundown__list { position: relative; max-width: 24rem; margin: 0 auto; padding: 0; list-style: none; text-align: left; }
.ij-rundown__list::before {
    content: ''; position: absolute; left: 2.35rem; top: .6rem; bottom: .6rem; width: 2px; transform-origin: top;
    background: linear-gradient(180deg, var(--inv-accent), color-mix(in srgb, var(--inv-accent) 40%, transparent));
}
.ij-rundown__item { position: relative; display: grid; grid-template-columns: 4.7rem minmax(0, 1fr); align-items: start; column-gap: .8rem; padding: 0 0 1rem; }
.ij-rundown__item:last-child { padding-bottom: 0; }
.ij-rundown__time {
    position: relative; justify-self: center; margin-top: .45rem; padding: .22rem .6rem; border-radius: 3px; font-size: .84rem; font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--inv-shine); background: linear-gradient(120deg, var(--ij-title), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)));
    box-shadow: 0 0 0 3px var(--inv-background), 0 0 0 4px var(--ij-line);
}
.ij-rundown__body { padding: .7rem .95rem .75rem; border-radius: 3px; background: var(--ij-paper); box-shadow: inset 0 0 0 1px var(--ij-line); border-left: 3px solid var(--inv-accent); }
.ij-rundown__body h3 { margin: 0; font-family: var(--ij-serif); font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: var(--ij-title); }
.ij-rundown__body p { margin: .1rem 0 0; font-size: .85rem; color: var(--ij-muted); }

/* party: the theme cartouche, the shirt on its hanger and its swatches, the note and the hashtag */
.ij-party__label { display: block; font-family: var(--ij-caps); font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-party__theme-card {
    position: relative; max-width: 19rem; margin: 0 auto; padding: 1.6rem 3.3rem 1.7rem; border-radius: 50%; background: var(--ij-paper);
    box-shadow: inset 0 0 0 2px var(--inv-accent), inset 0 0 0 6px var(--ij-paper), inset 0 0 0 7px var(--ij-line), var(--ij-drop);
}
.ij-party__theme { margin: .25rem 0 0; font-family: var(--ij-script); font-size: 2.2rem; line-height: 1.12; word-spacing: .12em; color: var(--ij-title); text-wrap: balance; }
.ij-party__sprig { position: absolute; top: 50%; width: 2.4rem; height: auto; margin-top: -1.8rem; overflow: visible; }
.ij-party__sprig--left { left: -.6rem; transform: rotate(-20deg); }
.ij-party__sprig--right { right: -.6rem; transform: scaleX(-1) rotate(-20deg); }
.ij-party__dress {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: 1rem; max-width: 22rem; margin: 1.6rem auto 0;
    padding: 1.1rem 1.2rem; border-radius: 4px; text-align: left; background: var(--ij-paper); box-shadow: inset 0 0 0 1px var(--ij-line), var(--ij-drop);
}
.ij-party__gown { width: 5rem; height: auto; overflow: visible; }
.ij-party__hanger { fill: none; stroke: var(--ij-gold-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ij-party__gown-body { fill: var(--ij-pick, var(--inv-primary)); stroke: var(--ij-gold-1); stroke-width: 1.2; stroke-linejoin: round; transition: fill .4s ease; }
.ij-party__gown-line { fill: none; stroke: color-mix(in srgb, #000 30%, transparent); stroke-width: 1; stroke-linecap: round; }
.ij-party__tie { fill: var(--inv-wax); stroke: var(--ij-gold-1); stroke-width: .8; }
.ij-party__dress-name { margin: .15rem 0 .55rem; font-family: var(--ij-serif); font-size: 1.18rem; font-weight: 600; line-height: 1.25; color: var(--ij-title); }
.ij-swatches { display: flex; flex-wrap: wrap; gap: .45rem; }
.ij-swatch {
    width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--ij-swatch);
    box-shadow: 0 0 0 2px var(--ij-paper), 0 0 0 3px var(--ij-line); transition: transform .2s ease;
}
.ij-swatch[aria-pressed=true] { transform: scale(1.12); box-shadow: 0 0 0 2px var(--ij-paper), 0 0 0 4px var(--inv-accent); }
.ij-party__hint { margin: .5rem 0 0 !important; font-size: .76rem; color: var(--ij-muted); }
.ij-party__hint--center { margin: .5rem auto 0 !important; text-align: center; }
.ij-party__note { margin-top: 1.4rem !important; font-family: var(--ij-read); font-size: 1.14rem; font-style: italic; font-weight: 600; line-height: 1.45; color: var(--inv-text); }
.ij-party__hashtag {
    display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; margin-top: .4rem; padding: .35rem .4rem .35rem .9rem; border-radius: 999px;
    background: var(--ij-paper); box-shadow: inset 0 0 0 1px var(--ij-line);
}
.ij-party__hashtag .ij-icon { color: var(--ij-gold-ink); }
.ij-party__hashtag-text { font-weight: 600; color: var(--ij-title); overflow-wrap: anywhere; }
.ij-party__copy {
    min-height: 2.2rem; padding: .3rem .9rem; border: 0; border-radius: 999px; cursor: pointer; font: 600 .78rem/1 var(--ij-sans);
    color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%;
}

/* wishlist: parchment rows, numbered on small gold seals */
.ij-wishlist__intro { color: var(--ij-muted); font-size: .92rem; }
.ij-wishlist__list { display: grid; gap: .65rem; max-width: 24rem; margin: 1.3rem auto 0; padding: 0; list-style: none; text-align: left; }
.ij-wishlist__item { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: .85rem 1rem; border-radius: 4px; background: var(--ij-paper); box-shadow: inset 0 0 0 1px var(--ij-line); }
.ij-wishlist__number {
    position: relative; isolation: isolate; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; font-family: var(--ij-serif); font-size: 1.1rem; font-weight: 700; color: var(--ij-title);
}
.ij-wishlist__number::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle, var(--ij-paper) 0 52%, var(--ij-gold-1) 53% 56%, transparent 57%), var(--ij-foil);
    -webkit-mask: var(--ij-scallop) center / contain no-repeat; mask: var(--ij-scallop) center / contain no-repeat;
}
.ij-wishlist__photo { display: block; width: 2.9rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 50%; border: 1.5px solid var(--inv-accent); }
.ij-wishlist__text p { margin: 0; }
.ij-wishlist__name { padding-top: .1rem; font-family: var(--ij-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--ij-title); overflow-wrap: anywhere; }
.ij-wishlist__note { margin-top: .1rem !important; font-size: .86rem; color: var(--ij-muted); }
.ij-wishlist__shop { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.2rem; margin-top: .25rem; font-size: .82rem; font-weight: 600; text-decoration: none; }
.ij-wishlist__shop .ij-icon { width: 1rem; height: 1rem; }

/* story: small oval cameos beside the text, alternating; text-only chapters as parchment slips */
.ij-story__list { display: grid; gap: 2.2rem; margin: 0; padding: 0; list-style: none; text-align: left; }
.ij-story__item { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.ij-story__item--flip { grid-template-columns: minmax(0, 1fr) 40%; }
.ij-story__item--flip .ij-story__media { order: 2; }
.ij-story__media { padding: 5px; border-radius: 50%; border: 1px solid var(--ij-line); filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--inv-deep) 28%, transparent)); }
.ij-story__photo { display: block; width: 100%; aspect-ratio: 200 / 260; object-fit: cover; object-position: center 28%; border-radius: 50%; border: 3px solid var(--inv-accent); }
.ij-story__when {
    display: inline-block; padding: .18rem .7rem; border-radius: 3px; font-family: var(--ij-caps); font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    color: var(--inv-shine); background: linear-gradient(120deg, var(--ij-title), color-mix(in srgb, var(--inv-primary) 70%, var(--inv-deep)));
}
.ij-story__body h3 { margin: .5rem 0 0; font-family: var(--ij-serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--ij-title); text-wrap: balance; }
.ij-story__body p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.55; color: var(--ij-muted); }
.ij-story__item--text { grid-template-columns: 2.8rem minmax(0, 1fr); align-items: start; gap: .9rem; padding: 1.15rem 1.2rem; border-radius: 4px; background: var(--ij-paper); box-shadow: inset 0 0 0 1px var(--ij-line); }
.ij-story__dot {
    position: relative; isolation: isolate; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; font-family: var(--ij-serif); font-size: 1.15rem; font-weight: 700; color: var(--ij-title);
}
.ij-story__dot::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(circle, var(--ij-paper) 0 52%, var(--ij-gold-1) 53% 56%, transparent 57%), var(--ij-foil);
    -webkit-mask: var(--ij-scallop) center / contain no-repeat; mask: var(--ij-scallop) center / contain no-repeat;
}

/* gallery: the first photo a tall oval-topped window over two rows, the others with a fine gold rule */
.ij-gallery .inv-gallery { gap: .6rem; }
.ij-gallery .inv-gallery__item { border-radius: 4px; border: 1.5px solid var(--ij-line); }
.ij-gallery .inv-gallery__item:first-child { grid-row: span 2; aspect-ratio: auto; border-radius: 999px 999px 6px 6px; border: 2px solid var(--inv-accent); }

/* live streaming */
.ij-stream__card {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1rem; max-width: 24rem; margin: 0 auto; padding: 1.35rem;
    border-radius: 6px; color: var(--inv-background); text-align: left;
    background: radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, #fff 14%, transparent), transparent 70%), linear-gradient(140deg, var(--inv-primary), var(--inv-deep));
    box-shadow: inset 0 0 0 1px var(--ij-line), inset 0 0 0 5px color-mix(in srgb, var(--inv-deep) 40%, transparent), inset 0 0 0 6px var(--ij-line), var(--ij-drop);
}
.ij-stream__icon { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; color: var(--inv-deep); background: var(--ij-foil); background-size: 220% 100%; }
.ij-stream__icon .ij-icon { width: 1.65rem; height: 1.65rem; }
.ij-stream__title { margin: 0 0 .1rem; font-family: var(--ij-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: #fff; }
.ij-stream__text p { margin: 0; font-size: .86rem; color: var(--ij-cream-muted); }
.ij-stream__text .ij-stream__note { margin-top: .3rem; font-weight: 600; color: var(--inv-shine); }
.ij-stream__button { grid-column: 1 / -1; min-height: 2.75rem; color: var(--inv-deep) !important; background: var(--ij-foil) !important; background-size: 220% 100% !important; font-weight: 600; }

/* RSVP card: parchment with a guilloche band on top */
.ij-rsvp__card {
    position: relative; overflow: hidden; max-width: 25rem; margin: 0 auto; padding: 2.3rem 1.15rem 1.4rem; border-radius: 4px; color: var(--inv-text); background: var(--ij-paper);
    box-shadow: inset 0 0 0 1px var(--ij-line), 0 22px 40px -24px rgb(0 0 0 / .6);
}
.ij-rsvp__card::before {
    content: ''; position: absolute; left: 7px; right: 7px; top: 7px; height: 12px; background: var(--ij-foil-dark);
    -webkit-mask: var(--ij-wave) left center / 24px 12px repeat-x; mask: var(--ij-wave) left center / 24px 12px repeat-x;
}
.ij-rsvp__intro { margin: 0 auto 1.1rem; max-width: 30ch; font-size: .9rem; color: var(--ij-muted); }
.ij-rsvp__sent { margin-bottom: 1rem; }
.ij-rsvp__check { display: block; width: 4.25rem; height: 4.25rem; margin: 0 auto .5rem; }
.ij-rsvp__check circle { fill: var(--inv-primary); }
.ij-rsvp__check path { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
html.inv-anim .ij-rsvp__sent .ij-rsvp__check { animation: ij-bounce .8s cubic-bezier(.34, 1.56, .64, 1) both; }
html.inv-anim .ij-rsvp__sent .ij-rsvp__check path { animation: ij-draw .45s ease-out .35s both; }
.ij-rsvp__thanks { margin: 0; font-family: var(--ij-script); font-size: 2.3rem; line-height: 1.15; color: var(--ij-title); }
.ij-rsvp__line { margin: .1rem 0 0; font-size: .9rem; color: var(--ij-muted); }
.ij-rsvp .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 600; color: var(--ij-title); }

/* gift: parchment cards with a gold foil guilloche band, two per row (odd last across) */
.ij-gift__intro { color: var(--ij-cream-muted) !important; }
.ij-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.3rem; }
.ij-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ij-gift .inv-gift__account,
.ij-gift .inv-gift__address {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; margin: 0; overflow: hidden;
    padding: 1.9rem .75rem 1rem; border-radius: 4px; color: var(--inv-text); background: var(--ij-paper);
    box-shadow: inset 0 0 0 1px var(--ij-line), 0 18px 30px -20px rgb(0 0 0 / .6);
}
.ij-gift .inv-gift__account::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1rem; background: var(--ij-foil); background-size: 220% 100%;
    -webkit-mask: var(--ij-wave) left center / 28px 14px repeat-x; mask: var(--ij-wave) left center / 28px 14px repeat-x;
}
.ij-gift .inv-gift__account p, .ij-gift .inv-gift__address p { margin: 0; }
.ij-gift .inv-gift__bank { font-weight: 600; font-size: .85rem; color: var(--ij-title); }
.ij-gift .inv-gift__logo { height: 1.6rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.ij-gift .inv-gift__logo img { max-width: 5rem; }
.ij-gift .inv-gift__number { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700; letter-spacing: .03em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text); }
.ij-gift .inv-gift__holder { font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ij-muted); overflow-wrap: anywhere; }
.ij-gift .inv-button { margin-top: .35rem; min-height: 2.25rem; padding: .35rem .9rem; font-size: .74rem; font-weight: 600; }
.ij-gift .inv-gift__address { margin-top: .75rem; padding-top: 1.1rem; font-size: .875rem; }
.ij-gift .inv-gift__address .inv-gift__holder { font-size: .72rem; }

/* co-hosts: names in the serif split by small gold rosettes, on the velvet */
.ij-cohosts__list { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ij-cohosts__list li { max-width: 26ch; font-family: var(--ij-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.3; color: #fff; text-wrap: balance; }
.ij-cohosts__list li + li::before {
    content: ''; display: block; width: 10px; height: 10px; margin: 0 auto .55rem; background: var(--inv-shine);
    clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
}

/* contacts */
.ij-contacts__list { display: grid; gap: .7rem; max-width: 24rem; margin: 0 auto; }
.ij-contact {
    display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem .55rem .55rem .6rem; border-radius: 999px;
    background: var(--ij-paper); text-align: left; box-shadow: inset 0 0 0 1px var(--ij-line);
}
.ij-contact__avatar {
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; font-family: var(--ij-caps); font-size: 1.2rem; font-weight: 700;
    color: var(--inv-shine); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--inv-primary) 80%, #fff), var(--inv-deep)); box-shadow: 0 0 0 2px var(--ij-paper), 0 0 0 3.2px var(--inv-accent);
}
.ij-contact p { margin: 0; }
.ij-contact__name { font-weight: 600; font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.ij-contact__role { font-size: .78rem; color: var(--ij-muted); }
.ij-contact__phone { font-size: .85rem; }
.ij-contact__button { min-height: 2.5rem; padding: .45rem .95rem; font-size: .8rem; font-weight: 600; }
.ij-contact__button .ij-icon { width: 1.05rem; height: 1.05rem; }

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

/* vendors */
.ij-vendors__list { max-width: 24rem; margin: 0 auto; padding: .3rem 1.15rem; list-style: none; border-radius: 4px; background: var(--ij-paper); box-shadow: inset 0 0 0 1px var(--ij-line), var(--ij-drop); }
.ij-vendor { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 0; text-align: left; border-bottom: 1px solid var(--ij-line); }
.ij-vendor:last-child { border-bottom: 0; }
.ij-vendor__text { display: flex; flex-direction: column; min-width: 0; }
.ij-vendor__role { font-family: var(--ij-caps); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ij-gold-ink); }
.ij-vendor__name { font-family: var(--ij-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.25; color: var(--inv-text); overflow-wrap: anywhere; }
.ij-vendor__link {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-height: 2.2rem; padding: .3rem .7rem; border-radius: 999px;
    font-size: .74rem; font-weight: 600; text-decoration: none; color: var(--ij-title); box-shadow: inset 0 0 0 1px var(--ij-line);
}
.ij-vendor__link .ij-icon { width: .95rem; height: .95rem; }

/* closing: compact — the photo melting into the velvet, a crest of seal and laurels, thanks and the name (above the menu) */
.ij-closing { padding: 2.6rem 1.6rem 5.8rem; }
.ij-closing--photo { padding-top: 0; }
.ij-closing__photo {
    position: relative; z-index: -1; height: min(22rem, calc(var(--inv-screen, 100svh) * .48)); margin: 0 -1.6rem; overflow: hidden;
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent);
}
.ij-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ij-closing__body { position: relative; isolation: isolate; }
.ij-closing--photo .ij-closing__body { margin-top: -4.2rem; }
.ij-closing__rosette { position: absolute; z-index: -1; left: 50%; bottom: -3.5rem; width: 22rem; height: 22rem; margin-left: -11rem; overflow: visible; color: var(--inv-shine); opacity: .12; pointer-events: none; }
.ij-closing__crest { display: flex; justify-content: center; align-items: flex-end; gap: .2rem; margin: 0 auto .5rem; }
.ij-closing__seal { width: 3.9rem; height: 3.9rem; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .4)); }
.ij-closing__sprig { width: 1.9rem; height: auto; overflow: visible; transform: rotate(-30deg); }
.ij-closing__sprig--right { transform: scaleX(-1) rotate(-30deg); }
.ij-closing__title { margin: 0 0 .6rem; font-family: var(--ij-serif); font-size: 2.05rem; font-weight: 500; line-height: 1.05; color: #fff; }
.ij-closing__title em { font-family: var(--ij-script); font-style: normal; font-weight: 400; font-size: 1.32em; color: var(--inv-shine); }
.ij-closing__message { margin: 0 auto; max-width: 32ch; font-size: .9rem; line-height: 1.55; color: var(--ij-cream-muted); }
.ij-closing__salam { margin: .7rem auto 0; max-width: 28ch; font-family: var(--ij-read); font-size: 1.06rem; font-style: italic; font-weight: 600; line-height: 1.35; color: var(--inv-shine); }
.ij-closing__signature { margin: .45rem auto 0; max-width: 30ch; font-size: .84rem; color: var(--ij-cream-muted); }
.ij-closing__names { margin: .5rem auto 0; max-width: 16ch; font-family: var(--ij-script); font-size: 2.6rem; word-spacing: .12em; line-height: 1.15; padding: 0 .2em .08em; text-wrap: balance; }

/* ---------- 6. forms (shared RSVP + wishes, restyled) ---------- */
.ij-main .inv-form { gap: 1rem; text-align: left; }
.ij-main .inv-form label, .ij-main .inv-form__choices legend { font-size: .82rem; font-weight: 600; color: var(--inv-text); }
.ij-main .inv-form input:not([type=radio]):not([type=checkbox]),
.ij-main .inv-form select,
.ij-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; padding: .7rem .9rem; border: 0; border-radius: 6px;
    font: 400 .95rem/1.4 var(--ij-sans); color: var(--inv-text); background: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent);
    transition: box-shadow .2s ease;
}
.ij-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.ij-main .inv-form input:not([type=radio]):focus-visible,
.ij-main .inv-form select:focus-visible,
.ij-main .inv-form textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--inv-primary), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 35%, transparent); }
.ij-main .inv-form button[type=submit] { width: 100%; min-height: 3rem; font-weight: 600; box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--inv-primary) 80%, transparent); }
.ij-main .inv-form .inv-button--outline { width: 100%; min-height: 2.75rem; }
.ij-main .inv-form__notice { text-align: center; }

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

/* wishes */
.ij-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.ij-wishes .inv-form { padding: 1.3rem 1.1rem; border-radius: 6px; background: var(--ij-paper); box-shadow: inset 0 0 0 1px var(--ij-line), var(--ij-drop); }
.ij-wishes .inv-wishes__list { margin-top: 1.4rem; }
.ij-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list { padding: .55rem; border-radius: 6px; background: color-mix(in srgb, #fff 45%, transparent); box-shadow: inset 0 0 0 1px var(--ij-line); }
.ij-wishes .inv-wish { padding: .75rem .9rem; border-radius: 4px; background: #fff; text-align: left; box-shadow: 0 2px 10px rgb(0 0 0 / .05); border-left: 3px solid var(--inv-accent); }
.ij-wishes .inv-wish__name { font-weight: 600; color: var(--ij-title); }
.ij-wishes .inv-wish__message { font-size: .88rem; line-height: 1.5; }
.ij-wishes .inv-wish__time { font-size: .72rem; color: var(--ij-muted); }

/* ---------- 7. shared components ---------- */
.ij-main .inv-button { font-weight: 600; }
body .inv-nav {
    --inv-nav-bg: color-mix(in srgb, var(--inv-deep) 94%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-background) 72%, transparent);
    --inv-nav-active: var(--inv-shine);
    font-family: var(--ij-sans);
}

/* ---------- 8. screen sizes ---------- */
/* the cover in px steps per screen height (never svh: Chrome on iPhone sizes it to the whole screen) */
@media (max-height: 800px) {
    .ij-cover { --cameo-cover: 13.2rem; }
    .ij-cover__names { font-size: 3rem; }
}
@media (max-height: 740px) {
    .ij-cover { --cameo-cover: 11.8rem; padding-top: 2.4rem; padding-bottom: 1.3rem; }
    .ij-cover__title { margin-bottom: .85rem; }
    .ij-cover__names { font-size: 2.75rem; margin-top: 1.05rem; }
    .ij-cover__quote { font-size: 1rem; margin-top: .4rem; }
    .ij-cover__guest { margin-top: .55rem; }
    .ij-cover__open { margin-top: .65rem; }
}
@media (max-height: 680px) {
    .ij-cover { --cameo-cover: 10.4rem; padding-top: 2.2rem; padding-bottom: 1.1rem; }
    .ij-cover__title { font-size: .66rem; margin-bottom: .7rem; }
    .ij-cover__names { font-size: 2.45rem; }
    .ij-cover__degree { font-size: .76rem; }
    .ij-cover__date span { font-size: 1rem; }
    .ij-cover__quote { font-size: .94rem; line-height: 1.26; }
    .ij-cover__guest { padding: .35rem .85rem .4rem; }
    .ij-cover__guest-name { font-size: 1.1rem; }
    .ij-cover__open { min-height: 2.7rem; }
    .ij-cover__open-wax { width: 1.9rem; height: 1.9rem; }
}
@media (max-height: 620px) {
    .ij-cover { --cameo-cover: 9.2rem; }
    .ij-cover__names { font-size: 2.2rem; }
    .ij-cover__quote { font-size: .88rem; }
}
@media (max-width: 360px) {
    .ij-cover__names { font-size: 2.6rem; }
    .ij-sheet { padding-left: 2rem; padding-right: 2rem; }
}

/* wide screens: the phone-width column on the velvet with the gold lattice */
@media (min-width: 560px) {
    body.ij-body {
        background: radial-gradient(70vw 60vh at 50% 0%, color-mix(in srgb, var(--inv-primary) 70%, transparent), transparent 70%), var(--inv-deep);
        background-attachment: fixed;
    }
    body.ij-body::before {
        content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background: var(--inv-shine);
        -webkit-mask: var(--ij-lattice) center / 60px 30px repeat; mask: var(--ij-lattice) center / 60px 30px repeat;
    }
    .ij-main { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
}

/* ---------- 9. motion ---------- */
@keyframes ij-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ij-bounce { 0% { transform: scale(0); } 55% { transform: scale(1.15); } 75% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes ij-rise { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ij-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes ij-shine { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes ij-breathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes ij-motes { from { background-position: 0 0; } to { background-position: 0 -420px; } }
@keyframes ij-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ij-ring-in { from { opacity: 0; transform: rotate(-24deg) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes ij-wreath-in { from { opacity: 0; transform: translateY(6%) scale(.9); clip-path: inset(70% 0 0 0); } to { opacity: 1; transform: none; clip-path: inset(-20% -20% -20% -20%); } }
@keyframes ij-stamp { 0% { opacity: 0; transform: scale(2.4) rotate(-28deg); } 62% { opacity: 1; transform: scale(.9) rotate(3deg); } 80% { transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
@keyframes ij-tails-drop { from { opacity: 0; transform: translateY(-30%) scaleY(.3); } to { opacity: 1; transform: none; } }
@keyframes ij-ping { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes ij-tap { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-3px, -5px) scale(.92); } }
@keyframes ij-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ij-sway-x { 0%, 100% { left: 50%; } 30% { left: 38%; } 70% { left: 62%; } }
@keyframes ij-sway-clip { 0%, 100% { clip-path: inset(0 50% 0 0); } 30% { clip-path: inset(0 62% 0 0); } 70% { clip-path: inset(0 38% 0 0); } }
@keyframes ij-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ij-wax-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ij-crack { 0% { transform: none; opacity: 1; } 22% { transform: translate(calc(var(--dx) * .1), calc(var(--dy) * .1)) rotate(calc(var(--r) * .08)); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 2.4), calc(var(--dy) * 2.4 + 40px)) rotate(var(--r)); opacity: 0; } }
@keyframes ij-ribbon-fall { 0% { transform: none; opacity: 1; } 30% { transform: translateY(8%) rotate(2deg); opacity: 1; } 100% { transform: translateY(70%) rotate(16deg); opacity: 0; } }
@keyframes ij-sheet-in { from { opacity: .4; filter: blur(1.5px); } to { opacity: 1; filter: none; } }
@keyframes ij-flash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.8); } }

/* gold foil: a slow moving shine */
html.inv-anim :is(.ij-heading__title em, .ij-cover__names, .ij-closing__names, .ij-cover__open, .ij-diploma__label, .ij-compare__hint, .ij-cover__date span) { animation: ij-shine 7s ease-in-out infinite; }

/* cover (≤ 2.5 s, once): the ring turns in, its photo settles, the sprigs grow, the gold seal stamps onto the shoulder
   and its ribbons drop; then a living ground: the rosette turns, the light breathes, gold dust drifts up */
html.inv-anim .ij-cameo--cover .ij-cameo__oval { animation: ij-rise .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .ij-cameo--cover .ij-cameo__photo { animation: ij-zoom-out 1.4s cubic-bezier(.2, .7, .2, 1) .1s both; }
html.inv-anim .ij-cameo--cover .ij-cameo__ring { animation: ij-ring-in 1.1s cubic-bezier(.2, .8, .3, 1) .2s both; }
html.inv-anim .ij-cameo--cover .ij-cameo__wreath { transform-origin: 50% 100%; animation: ij-wreath-in 1s cubic-bezier(.2, .8, .3, 1) .55s both; }
html.inv-anim .ij-cameo--cover .ij-cameo__seal { animation: ij-stamp .7s cubic-bezier(.3, 1.3, .5, 1) 1s both; }
html.inv-anim .ij-cameo--cover .ij-cameo__tails { transform-origin: 50% 0; animation: ij-tails-drop .6s cubic-bezier(.25, 1.3, .4, 1) 1.45s both; }
html.inv-anim .ij-cover__art::before { animation: ij-breathe 5s ease-in-out infinite; }
html.inv-anim .ij-cover::after { animation: ij-motes 22s linear infinite; }
html.inv-anim .ij-cover__rosette { animation: ij-turn 140s linear infinite; }
html.inv-anim .ij-cover__open-wax { animation: ij-wax-throb 2.4s ease-in-out 2s infinite; }

/* Ketuk untuk membuka ijazah: the scroll floats gently while it waits; tapped, the wax cracks and its pieces fly,
   the ribbon falls, the scroll unrolls (grid rows) and the gold seal stamps in last */
html.inv-anim .ij-institution.is-armed .ij-diploma { animation: ij-float 3.8s ease-in-out infinite; }
html.inv-anim .ij-institution.is-armed .ij-diploma__wax { animation: ij-wax-throb 1.8s ease-in-out infinite; }
html.inv-anim .ij-institution .ij-diploma__body { transition: grid-template-rows 1.5s cubic-bezier(.5, .05, .3, 1) .75s; }
html.inv-anim .ij-institution.is-open .ij-wax__piece { animation: ij-crack .9s cubic-bezier(.3, .6, .4, 1) both; }
html.inv-anim .ij-institution.is-open .ij-diploma__ribbon { transform-origin: 50% 0; animation: ij-ribbon-fall 1s cubic-bezier(.5, 0, .7, .4) .3s both; }
html.inv-anim .ij-institution.is-open .ij-diploma__tie { transition: visibility 0s 1.6s; }
html.inv-anim .ij-institution.is-open .ij-cert > :not(.ij-corner):not(.ij-cert__foot) { animation: ij-sheet-in 1.2s ease 1.1s both; }
html.inv-anim .ij-institution.is-open .ij-cert__stamp { animation: ij-stamp .65s cubic-bezier(.3, 1.3, .5, 1) 2.3s both; }
.ij-cert__stamp::after {
    content: ''; position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 80%, transparent), transparent);
}
html.inv-anim .ij-institution.is-open .ij-cert__stamp::after { animation: ij-flash .9s ease-out 2.6s both; }

/* the compare handle sways until touched */
html.inv-anim .ij-compare-wrap:not(.is-touched) .ij-compare__handle { animation: ij-sway-x 3.6s ease-in-out 1s infinite; }
html.inv-anim .ij-compare-wrap:not(.is-touched) .ij-compare__then { animation: ij-sway-clip 3.6s ease-in-out 1s infinite; }

/* the tap marker: rings ping outward, the hand taps */
html.inv-anim .ij-tap__ring { animation: ij-ping 1.8s ease-out infinite; }
html.inv-anim .ij-tap__ring--late { animation-delay: .9s; }
html.inv-anim .ij-tap__hand { animation: ij-tap 1.2s ease-in-out infinite; }
html:not(.inv-anim) .ij-tap__ring { opacity: .6; }

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

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

/* ---------- 10. intro scene "Ijazah Terbuka" (scene.json + sections/_scene) ----------
   The intro is teleported to <body>: everything here stands on its own classes. The diploma's moves are CSS
   animations timed to the 7 s scene (the intro starts them when it is shown). */
.ij-scene-ground { position: absolute; inset: 0; overflow: hidden; }
.ij-scene-ground::before {
    content: ''; position: absolute; inset: 0; background: var(--inv-shine); opacity: .09;
    -webkit-mask: var(--ij-lattice) center / 60px 30px repeat; mask: var(--ij-lattice) center / 60px 30px repeat;
}
.ij-scene-ground__rosette { position: absolute; left: 50%; top: 36%; width: 150vmin; height: 150vmin; margin: -75vmin 0 0 -75vmin; overflow: visible; color: var(--inv-shine); opacity: .16; transform-origin: 50% 50%; transform-box: border-box; }
html.inv-anim .ij-scene-ground__rosette { animation: ij-turn 90s linear infinite; }
.ij-scene-glow { position: absolute; inset: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--inv-shine) 36%, transparent), transparent); }
html.inv-anim .ij-scene-glow { animation: ij-breathe 4s ease-in-out infinite; }

.ij-scene-box { position: absolute; inset: 0; container-type: size; }
.ij-scene-dip { --rod-h: calc(100cqw * 72 / 320); position: absolute; inset: 0; }
.ij-scene-dip__rod { position: absolute; z-index: 2; left: 0; right: 0; height: var(--rod-h); filter: drop-shadow(0 12px 12px rgb(0 0 0 / .5)); }
.ij-scene-dip__rod--top { top: 0; }
.ij-scene-dip__rod--bottom { top: calc(100cqh - var(--rod-h)); }
.ij-scene-dip__sheet {
    position: absolute; left: 5%; right: 5%; top: calc(var(--rod-h) * .5); bottom: calc(var(--rod-h) * .5); overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.4cqh; padding: calc(var(--rod-h) * .5 + 5cqh) 0;
    background: radial-gradient(90% 60% at 50% 40%, color-mix(in srgb, #fff 70%, transparent), transparent 80%), linear-gradient(170deg, var(--ij-paper), color-mix(in srgb, var(--inv-soft) 55%, var(--ij-paper)));
}
.ij-scene-dip__frame {
    position: absolute; left: 7px; right: 7px; top: calc(var(--rod-h) * .5 + 4px); bottom: calc(var(--rod-h) * .5 + 4px); background: var(--ij-foil-dark);
    -webkit-mask: var(--ij-wave) left top / 24px 12px repeat-x, var(--ij-wave) left bottom / 24px 12px repeat-x, var(--ij-wave-v) left top / 12px 24px repeat-y, var(--ij-wave-v) right top / 12px 24px repeat-y;
    mask: var(--ij-wave) left top / 24px 12px repeat-x, var(--ij-wave) left bottom / 24px 12px repeat-x, var(--ij-wave-v) left top / 12px 24px repeat-y, var(--ij-wave-v) right top / 12px 24px repeat-y;
}
.ij-scene-dip__crest { --ij-rw: 3; flex: none; width: 13cqw; height: 13cqw; overflow: visible; color: var(--ij-gold-1); }
.ij-scene-dip__cameo { --cameo-w: min(44cqw, (100cqh - 22.5cqw - 13cqw - 38cqh) * 200 / 260); margin: 0; }
.ij-scene-dip__lines { flex: none; width: 56%; display: grid; justify-items: center; gap: 1.2cqh; }
.ij-scene-dip__lines i { display: block; width: 100%; height: 2px; background: var(--ij-gold-ink); opacity: .5; }
.ij-scene-dip__lines i:nth-child(2) { width: 72%; }
.ij-scene-dip__lines i:nth-child(3) { width: 46%; }
.ij-scene-dip__stamp { position: absolute; right: 6%; bottom: calc(var(--rod-h) * .5 + 3%); width: 21cqw; height: 21cqw; }
.ij-scene-dip__stamp svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .35)); }
.ij-scene-dip__ribbon { position: absolute; z-index: 3; left: 50%; top: calc(var(--rod-h) * .05); width: calc(var(--rod-h) * .96); height: calc(var(--rod-h) * 1.92); margin-left: calc(var(--rod-h) * -.48); overflow: visible; opacity: 0; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .35)); }
@keyframes ij-scene-rod { from { top: 0; } to { top: calc(100cqh - var(--rod-h)); } }
@keyframes ij-scene-unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ij-scene-untie { 0% { opacity: 1; transform: none; } 35% { opacity: 1; transform: translateY(6%) rotate(3deg); } 100% { opacity: 0; transform: translateY(80%) rotate(18deg); } }
html.inv-anim .ij-scene-dip__rod--bottom { animation: ij-scene-rod 1.9s cubic-bezier(.5, .05, .3, 1) 2.15s both; }
html.inv-anim .ij-scene-dip__sheet { animation: ij-scene-unroll 1.9s cubic-bezier(.5, .05, .3, 1) 2.15s both; }
html.inv-anim .ij-scene-dip__ribbon { transform-origin: 50% 0; animation: ij-scene-untie 1.1s cubic-bezier(.5, 0, .7, .4) 1.15s both; }
html.inv-anim .ij-scene-dip__cameo .ij-cameo__photo { animation: ij-zoom-out 2.6s cubic-bezier(.2, .7, .2, 1) 2.6s both; }
html.inv-anim .ij-scene-dip__stamp { animation: ij-stamp .7s cubic-bezier(.3, 1.3, .5, 1) 4.25s both; }

/* the name card: parchment in a guilloche border */
body.ij-body .inv-intro--scene .inv-scene__card {
    top: 72%;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; aspect-ratio: auto;
    padding: 1.5rem 1.3rem 1.3rem; border-radius: 4px;
    background: linear-gradient(170deg, var(--ij-paper), color-mix(in srgb, var(--inv-soft) 60%, var(--ij-paper)));
    box-shadow: inset 0 0 0 1px var(--ij-line), inset 0 0 0 5px var(--ij-paper), inset 0 0 0 6px var(--ij-line), 0 24px 40px -14px rgb(0 0 0 / .6);
}
body.ij-body .inv-scene__card::before {
    content: ''; position: absolute; left: 8px; right: 8px; top: 8px; height: 10px; background: var(--ij-foil-dark);
    -webkit-mask: var(--ij-wave) left center / 20px 10px repeat-x; mask: var(--ij-wave) left center / 20px 10px repeat-x;
}
body.ij-body .inv-scene__card .inv-intro__label { font-family: var(--ij-caps); font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ij-gold-ink); }
body.ij-body .inv-scene__card .inv-intro__names { color: var(--ij-title); line-height: 1.15; word-spacing: .12em; overflow-wrap: anywhere; }
body.ij-body .inv-scene__card .inv-intro__rule { height: 1px; width: 3rem; background: var(--inv-accent); }
body.ij-body .inv-scene__card .inv-intro__date { font-family: var(--ij-read); font-weight: 700; font-size: 1rem; color: var(--ij-muted); white-space: nowrap; }