/*
 * Template "Signature Noir Editorial" — a fashion-magazine wedding issue. Mobile-first.
 * Colors from the chosen variant: --inv-primary (ink), --inv-background (paper),
 * --inv-accent (the one accent), --inv-text. Fonts from the client's choice:
 * --inv-font-display (script, used sparingly) and --inv-font-heading (titles, masthead).
 */

:root {
    --ne-display: var(--inv-font-display, 'Imperial Script', cursive);
    --ne-heading: var(--inv-font-heading, 'Bodoni Moda', Didot, Georgia, serif);
    --ne-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --ne-ink: var(--inv-primary);
    --ne-paper: var(--inv-background);
    --ne-paper-2: color-mix(in srgb, var(--inv-background) 93%, var(--inv-primary));
    --ne-paper-light: color-mix(in srgb, var(--inv-background) 55%, #fff);
    --ne-on-ink: color-mix(in srgb, var(--inv-background) 90%, #fff);
    --ne-rule: color-mix(in srgb, var(--inv-text) 26%, transparent);
    --ne-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --ne-accent-text: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-text));
    /* the spot colour as a printed block (couple plates) and as a tinted page (countdown) */
    --ne-spot: var(--inv-accent);
    --ne-spot-paper: color-mix(in srgb, var(--inv-accent) 26%, var(--inv-background));
    --ne-accent-on-ink: color-mix(in srgb, var(--inv-accent) 66%, var(--ne-on-ink));
    /* the paper scan turned into transparent grain (no blend modes: iOS Safari draws a blended grey texture as plain grey):
       the exact soft-light result over the light paper, over the ink and over a mid-tone photo */
    --ne-texture: url("../img/paper-soft.webp");
    --ne-texture-ink: url("../img/ink-soft.webp");
    --ne-texture-photo: url("../img/photo-soft.webp");
    --ne-gutter: 1.25rem;
    --ne-ease: cubic-bezier(.2, .7, .2, 1);
    --inv-radius: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ne-paper);
    color: var(--inv-text);
    font-family: var(--ne-sans);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* coated-paper grain (a real paper scan, img/CREDITS.md): laid over the background colour of every page (see "paper
   grain" at the end) and over the cover photo; never catches taps */
.ne-cover__mag::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--ne-texture-photo) 0 0 / 400px 400px; opacity: .45;
}

img { max-width: 100%; display: block; }
p { margin: 0 0 .75rem; }
a { color: inherit; }

.ne-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-size: .8125rem;
}

/* ---------- shared pieces ---------- */

.ne-kicker, .ne-label, .ne-meta {
    font-family: var(--ne-sans); font-weight: 600; font-size: .66rem; line-height: 1.4;
    letter-spacing: .3em; text-transform: uppercase;
}
.ne-kicker { margin: 0 0 .6rem; color: var(--ne-accent-text); }
.ne-label { margin: 1.1rem 0 .3rem; color: var(--ne-muted); letter-spacing: .26em; }
.ne-script { font-family: var(--ne-display); font-weight: 400; line-height: 1; }
.ne-lead { max-width: 34ch; font-size: .98rem; color: var(--ne-muted); margin-bottom: 2rem; }
.ne-muted { color: var(--ne-muted); font-size: .88rem; }

/* black-and-white photo under the cover/closing text; without a photo a deep ink gradient */
.ne-photo {
    position: absolute; inset: 0; z-index: -2;
    background-color: var(--ne-ink);
    background-image: var(--ne-photo, radial-gradient(120% 80% at 70% 20%, color-mix(in srgb, var(--inv-accent) 35%, var(--ne-ink)), var(--ne-ink)));
    background-size: cover; background-position: center 30%;
    filter: grayscale(1) contrast(1.08) brightness(.92);
}

/* figure caption, set like a magazine credit line */
.ne-cap {
    margin: .55rem 0 0; font-family: var(--ne-sans); font-weight: 500; font-size: .58rem; line-height: 1.3;
    letter-spacing: .24em; text-transform: uppercase; color: var(--ne-muted);
}

/* photos develop from black-and-white to color as they scroll into view (with motion on),
   or on hover; with "reduce motion" they are simply in color */
.ne-bw { margin: 0; overflow: hidden; }
.ne-bw img { transition: filter 2s ease .35s, transform 1.6s var(--ne-ease); }
html.inv-anim .ne-bw img { filter: grayscale(1) contrast(1.1); }
html.inv-anim .is-revealed .ne-bw img, html.inv-anim .ne-bw.is-revealed img { filter: none; }
.ne-bw:hover img { filter: none; transform: scale(1.03); }

/* buttons of the shared components: square, small capitals */
.inv-button {
    padding: .9rem 1.35rem; border-radius: 0;
    background: var(--ne-ink); color: var(--ne-on-ink);
    font-family: var(--ne-sans); font-weight: 600; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
    transition: background-color .3s ease, color .3s ease, transform .2s ease;
}
.inv-button:hover { filter: none; background: color-mix(in srgb, var(--ne-ink) 82%, var(--inv-accent)); }
.inv-button--outline { background: transparent; color: var(--ne-ink); box-shadow: inset 0 0 0 1px currentColor; }
.inv-button--outline:hover { background: var(--ne-ink); color: var(--ne-on-ink); }

.ne-link {
    display: inline-flex; align-items: center; gap: .45rem; padding-bottom: .15rem;
    border-bottom: 1px solid currentColor; text-decoration: none;
    font-size: .74rem; font-weight: 500; letter-spacing: .08em; color: var(--ne-ink);
}

/* ---------- masthead names (cover, left page) ---------- */
/* container units: the names fill the width of their page, scaled to the longest nickname */
.ne-mast {
    margin: 0; font-family: var(--ne-heading); font-weight: 500; text-transform: uppercase;
    font-size: min(calc(140cqi / var(--ne-len, 5)), 30cqi); line-height: .84; letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
.ne-mast__name { display: block; }
.ne-mast__name--end { text-align: right; }
.ne-mast__amp {
    display: block; position: relative; z-index: 1; margin: -.12em 0 -.18em; text-align: center;
    font-family: var(--ne-display); font-weight: 400; text-transform: none; letter-spacing: 0;
    font-size: .56em; line-height: 1; color: var(--ne-accent-on-ink);
}

/* ---------- cover: a magazine cover ---------- */

.ne-cover {
    position: fixed; inset: 0; z-index: 30;
    display: grid; place-items: center;
    background-color: var(--ne-ink); perspective: 2400px;
}
.ne-cover__mag {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column;
    width: 100%; height: 100%; padding: 1rem var(--ne-gutter) 1.25rem;
    container-type: inline-size;
    background: var(--ne-ink); color: var(--ne-on-ink);
    transform-origin: left center; backface-visibility: hidden;
}
/* veil: dark at the top for the masthead, dark at the bottom for the guest and button */
.ne-cover__mag::before, .ne-aside::before, .ne-closing::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--ne-ink) 72%, transparent),
        color-mix(in srgb, var(--ne-ink) 8%, transparent) 34%,
        color-mix(in srgb, var(--ne-ink) 12%, transparent) 50%,
        color-mix(in srgb, var(--ne-ink) 70%, transparent) 72%,
        color-mix(in srgb, var(--ne-ink) 95%, transparent));
}
.ne-cover__top, .ne-aside__top {
    display: flex; justify-content: space-between; gap: .75rem;
    padding-bottom: .55rem; border-bottom: 1px solid color-mix(in srgb, var(--ne-on-ink) 40%, transparent);
}
.ne-cover__edition { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ne-cover__mast { margin-top: .7rem; font-size: min(calc(100cqi / var(--ne-len, 5)), 17.5cqi); text-shadow: 0 4px 30px rgb(0 0 0 / .35); }
.ne-cover__mast .ne-mast__amp { font-size: .62em; }
/* the photo settles, then drifts slowly */
@keyframes ne-drift { from { transform: scale(1.03); } to { transform: scale(1.11) translate(-1%, 1%); } }
html.inv-anim .ne-cover__photo { transform-origin: 50% 35%; animation: ne-drift 26s ease-in-out 1s infinite alternate; }
/* a soft shade from the left behind the cover lines and the guest */
.ne-cover__photo::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ne-ink) 55%, transparent), transparent 70%);
    -webkit-mask: linear-gradient(transparent 45%, #000 70%); mask: linear-gradient(transparent 45%, #000 70%);
}

.ne-cover__lines {
    list-style: none; margin: auto 0 0; padding: 1.2rem 0 0 .9rem; width: 66%; max-width: 19rem;
    border-left: 1px solid var(--ne-accent-on-ink);
}
.ne-cover__lines li:first-child { border-top: 0; padding-top: 0; }
.ne-cover__lines li {
    padding: .4rem 0; border-top: 1px solid color-mix(in srgb, var(--ne-on-ink) 22%, transparent);
    font-family: var(--ne-heading); font-size: .95rem; line-height: 1.2;
}
.ne-cover__lines b {
    display: block; margin-bottom: .2rem;
    font-family: var(--ne-sans); font-weight: 600; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ne-accent-on-ink);
}
.ne-cover__quote {
    padding-bottom: 0 !important; margin-bottom: .3rem; font-style: italic; font-size: .8rem !important; line-height: 1.4 !important; opacity: .9;
    display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

.ne-cover__foot { margin-top: 1rem; }
.ne-cover__guest p { margin: 0 0 .15rem; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.ne-cover__guest-name { display: block; margin-bottom: .85rem; font-family: var(--ne-heading); font-size: 1.3rem; line-height: 1.2; }
.ne-cover__actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ne-open { gap: .85rem; padding: 1rem 1.3rem; background: var(--ne-on-ink); color: var(--ne-ink); }
.ne-open:hover { background: #fff; color: var(--ne-ink); }

.ne-barcode {
    display: grid; gap: .15rem; flex: none; width: 4.6rem; padding: .35rem .45rem .25rem;
    background: var(--ne-on-ink); color: var(--ne-ink);
}
.ne-barcode svg { display: block; width: 100%; height: 1.55rem; }
.ne-barcode span { font-size: .5rem; font-weight: 500; line-height: 1; letter-spacing: .22em; text-align: center; }

/* turning the page: the cover swings away on its left edge, the table fades */
.ne-cover--leave { transition: opacity .35s linear 1.05s, background-color .8s ease .35s; }
.ne-cover--leave .ne-cover__mag { transition: transform 1.25s cubic-bezier(.6, .02, .3, 1), box-shadow 1.25s ease; }
.ne-cover--gone { opacity: 0; background-color: transparent; }
.ne-cover--gone .ne-cover__mag { transform: rotateY(-108deg); box-shadow: 40px 0 80px rgb(0 0 0 / .45); }

/* ---------- inside: running header + contents ---------- */

.ne-aside { display: none; }
.ne-page { position: relative; background: var(--ne-paper); }

.ne-folio {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem var(--ne-gutter);
    background: color-mix(in srgb, var(--ne-paper) 90%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ne-rule);
    font-weight: 600; font-size: .58rem; line-height: 1; letter-spacing: .26em; text-transform: uppercase;
}
.ne-folio__mono { font-family: var(--ne-heading); font-weight: 500; font-size: .8rem; letter-spacing: .12em; }
.ne-folio__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; color: var(--ne-muted); }
.ne-folio__progress {
    position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px;
    background: var(--inv-accent); transform: scaleX(0); transform-origin: left;
}
@supports (animation-timeline: scroll()) {
    .ne-folio__progress { animation: ne-progress linear both; animation-timeline: scroll(root); }
}
@keyframes ne-progress { to { transform: scaleX(1); } }

.ne-contents { padding: 3.25rem var(--ne-gutter) 3.5rem; border-bottom: 1px solid var(--ne-rule); }
.ne-contents__head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1rem; }
.ne-contents__head .ne-kicker { grid-column: 1 / -1; }
.ne-contents__title {
    margin: 0; font-family: var(--ne-heading); font-weight: 400; font-size: 3.9rem; line-height: .86; letter-spacing: -.03em;
}
.ne-contents__title em, .ne-title em { font-style: italic; color: var(--ne-accent-text); }
.ne-contents__date { margin: 0 0 .35rem; font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ne-muted); text-align: right; }
.ne-contents__list { list-style: none; margin: 2.25rem 0 0 18%; padding: 0; border-bottom: 1px solid var(--ne-rule); }
.ne-contents__list li { border-top: 1px solid var(--ne-rule); }
.ne-contents__list a {
    display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: .5rem;
    padding: .62rem 0; text-decoration: none; transition: padding .3s var(--ne-ease), color .3s ease;
}
.ne-contents__list a::after { content: '→'; font-size: .8rem; color: var(--ne-muted); transition: transform .3s var(--ne-ease); }
.ne-contents__list a:hover { padding-left: .4rem; color: var(--ne-accent-text); }
.ne-contents__list a:hover::after { transform: translateX(.2rem); }
.ne-contents__no { font-family: var(--ne-heading); font-size: 1.35rem; line-height: 1; color: var(--ne-accent-text); font-variant-numeric: lining-nums; }
.ne-contents__label { font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

/* ---------- sections ---------- */

.ne-section { position: relative; padding: 4.25rem var(--ne-gutter); scroll-margin-top: 2.5rem; }
.ne-section + .ne-section { border-top: 1px solid var(--ne-rule); }

/* feature heading: a thick rule, the oversized number, the title set to the right */
.ne-head {
    display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 1rem;
    margin-bottom: 2.5rem; padding-top: .9rem; border-top: 2px solid currentColor;
}
.ne-head__no {
    font-family: var(--ne-heading); font-weight: 400; font-size: 5.6rem; line-height: .74; letter-spacing: -.05em;
    color: var(--inv-accent); font-variant-numeric: lining-nums;
}
.ne-head__text { text-align: right; }
.ne-title { margin: 0; font-family: var(--ne-heading); font-weight: 400; font-size: 2.75rem; line-height: .95; letter-spacing: -.025em; }

/* ink pages */
.ne-ink { background: var(--ne-ink); color: var(--ne-on-ink); --ne-rule: color-mix(in srgb, var(--ne-on-ink) 22%, transparent); --ne-muted: color-mix(in srgb, var(--ne-on-ink) 78%, var(--ne-ink)); --ne-accent-text: var(--ne-accent-on-ink); }
.ne-ink .ne-kicker, .ne-ink .ne-title em { color: var(--ne-accent-on-ink); }
.ne-ink .ne-head__no { color: var(--ne-accent-on-ink); }
.ne-ink .inv-button--outline { color: var(--ne-on-ink); }
.ne-ink .inv-button--outline:hover { background: var(--ne-on-ink); color: var(--ne-ink); }
.ne-section.ne-ink + .ne-section, .ne-section + .ne-section.ne-ink { border-top: 0; }

/* opening: editor's letter */
.ne-arabic { margin: 0 0 1.75rem; font-family: 'Amiri', 'Traditional Arabic', serif; font-size: 1.75rem; line-height: 1.7; text-align: center; }
.ne-opening__letter { margin-left: 14%; }
.ne-opening__greeting { font-family: var(--ne-heading); font-style: italic; font-size: 1.2rem; line-height: 1.35; margin-bottom: 1rem; }
.ne-dropcap { font-size: .96rem; }
.ne-dropcap::first-letter {
    float: left; margin: .32rem .55rem 0 0;
    font-family: var(--ne-heading); font-weight: 500; font-size: 4.3rem; line-height: .74; color: var(--ne-ink);
}
.ne-pull { position: relative; margin: 2.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid currentColor; }
.ne-pull__mark {
    display: block; height: 2.6rem; font-family: var(--ne-heading); font-size: 7rem; line-height: .9; color: var(--inv-accent);
}
.ne-pull blockquote {
    margin: 0; font-family: var(--ne-heading); font-style: italic; font-size: 1.32rem; line-height: 1.36; letter-spacing: -.01em;
    text-wrap: pretty;
}
.ne-pull figcaption { margin-top: 1.1rem; text-align: right; font-size: .62rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--ne-accent-text); }
.ne-pull figcaption::before { content: '— '; }

/* couple: two portrait features, offset to opposite edges */
.ne-person__figure { position: relative; width: calc(80% + var(--ne-gutter)); overflow: visible; }
.ne-person__figure img, .ne-person__empty { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ne-person__figure img { position: relative; }
.ne-person--groom .ne-person__figure { margin-left: calc(-1 * var(--ne-gutter)); }
.ne-person--bride .ne-person__figure { margin-left: auto; margin-right: calc(-1 * var(--ne-gutter)); }
.ne-person__figure { clip-path: inset(0 -3rem); }
.ne-person__empty {
    display: grid; place-items: center; background: var(--ne-paper-2);
    font-family: var(--ne-heading); font-size: 7rem; color: color-mix(in srgb, var(--inv-text) 25%, transparent);
}
/* the caption runs vertically along the free side of the photo */
.ne-person__figure .ne-cap { position: absolute; top: 0; margin: 0; writing-mode: vertical-rl; white-space: nowrap; }
.ne-person--groom .ne-cap { left: calc(100% + 1.45rem); }
.ne-person--bride .ne-cap { right: calc(100% + 1.45rem); transform: rotate(180deg); }
.ne-person__text { position: relative; z-index: 1; margin-top: -2.1rem; }
.ne-person--groom .ne-person__text { padding-left: 12%; }
.ne-person--bride .ne-person__text { padding-right: 12%; text-align: right; }
.ne-person__nick { margin: 0 0 .5rem; font-size: 3.7rem; color: var(--ne-accent-text); }
.ne-person__name { margin: 0 0 .65rem; font-family: var(--ne-heading); font-weight: 400; font-size: 1.6rem; line-height: 1.12; letter-spacing: -.01em; }
.ne-person__parents { font-size: .86rem; color: var(--ne-muted); }
.ne-person__parents span { display: block; margin-bottom: .1rem; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.ne-couple__amp {
    margin: 1.25rem 0 .75rem; text-align: center;
    font-family: var(--ne-heading); font-style: italic; font-size: 6.5rem; line-height: 1; color: var(--inv-accent);
}

/* countdown: oversized date numerals, then the countdown between rules */
.ne-bigdate { display: flex; justify-content: flex-end; align-items: flex-end; gap: 1rem; margin: 0 0 2.5rem; }
.ne-bigdate__day {
    font-family: var(--ne-heading); font-weight: 400; font-size: 10.5rem; line-height: .74; letter-spacing: -.06em;
    font-variant-numeric: lining-nums;
}
.ne-bigdate__rest {
    display: flex; flex-direction: column; gap: .2rem; padding: 0 0 .35rem .9rem;
    border-left: 1px solid var(--ne-rule);
    font-size: .66rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
}
.ne-bigdate__rest span:first-child { color: var(--ne-accent-on-ink); }
.ne-countdown .inv-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-block: 1px solid var(--ne-rule); }
.ne-countdown .inv-countdown__item { min-width: 0; padding: 1.1rem 0 .9rem; background: none; border-radius: 0; }
.ne-countdown .inv-countdown__item + .inv-countdown__item { border-left: 1px solid var(--ne-rule); }
.ne-countdown .inv-countdown__value { font-family: var(--ne-heading); font-weight: 400; font-size: 2.5rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.ne-countdown .inv-countdown__label { margin-top: .45rem; font-size: .56rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.ne-countdown .inv-countdown__done { font-family: var(--ne-heading); font-style: italic; font-size: 1.15rem; text-align: center; }
.ne-countdown .inv-countdown__actions { flex-direction: column; align-items: stretch; margin-top: 1.75rem; }

/* events */
.ne-gallery { background: var(--ne-paper-2); }
.ne-event + .ne-event { margin-top: 3.75rem; }
.ne-event__figure { margin: 0 calc(-1 * var(--ne-gutter)); }
.ne-event__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ne-event__figure .ne-cap { padding: 0 var(--ne-gutter); }
.ne-event__grid { margin-top: 1.5rem; }
.ne-event__time { margin: 0 0 1.25rem; }
.ne-event__big {
    display: block; font-family: var(--ne-heading); font-weight: 400; font-size: 5.4rem; line-height: .8; letter-spacing: -.05em;
    font-variant-numeric: lining-nums;
}
.ne-event__until { display: block; margin-top: .55rem; font-size: .62rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ne-muted); }
.ne-event__body { margin-left: 20%; padding-left: 1rem; border-left: 1px solid var(--ne-rule); }
.ne-event__name { margin: 0 0 .3rem; font-family: var(--ne-heading); font-weight: 400; font-size: 2rem; line-height: 1; letter-spacing: -.02em; }
.ne-event__date { margin: 0; font-family: var(--ne-heading); font-style: italic; font-size: 1rem; color: var(--ne-accent-text); }
.ne-event__venue { margin: 0 0 .15rem; font-weight: 500; font-size: 1rem; line-height: 1.35; }
.ne-event__address { margin: 0; font-size: .86rem; color: var(--ne-muted); }
.ne-event .inv-maps { margin-top: 1.4rem; }

/* love story: contents of chapters, then one feature per chapter */
.ne-toc { list-style: none; margin: 0 0 3.25rem; padding: 0; counter-reset: none; }
.ne-toc a { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; text-decoration: none; border-bottom: 1px solid var(--ne-rule); }
.ne-toc__no { flex: none; font-size: .58rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ne-accent-text); }
.ne-toc__title { font-family: var(--ne-heading); font-style: italic; font-size: 1.08rem; line-height: 1.25; }
.ne-toc__leader { flex: 1; min-width: 1rem; border-bottom: 1px dotted color-mix(in srgb, var(--inv-text) 40%, transparent); transform: translateY(-.25em); }
.ne-toc__date { flex: none; font-size: .7rem; color: var(--ne-muted); }

/* compact chapters: a small portrait plate beside the text, sides alternate */
.ne-chapter { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ne-chapter:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
.ne-chapter:nth-of-type(even) .ne-chapter__figure { order: 2; }
.ne-chapter:not(:has(.ne-chapter__figure)) { grid-template-columns: minmax(0, 1fr); }
.ne-chapter + .ne-chapter { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--ne-rule); }
.ne-chapter__figure { width: 100%; max-width: 10rem; }
.ne-chapter:nth-of-type(even) .ne-chapter__figure { justify-self: end; }
.ne-chapter__figure img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ne-chapter__text { display: grid; grid-template-columns: 1fr; gap: .3rem; margin-top: 0; }
.ne-chapter__no {
    margin: 0; font-family: var(--ne-heading); font-size: 4.2rem; line-height: .78; letter-spacing: -.04em;
    color: var(--inv-accent); font-variant-numeric: lining-nums;
}
.ne-chapter__no span { display: block; margin-bottom: .55rem; font-family: var(--ne-sans); font-size: .56rem; font-weight: 600; line-height: 1; letter-spacing: .3em; text-transform: uppercase; color: var(--ne-muted); }
.ne-chapter .ne-label { margin-top: 0; }
.ne-chapter h3 { margin: 0 0 .45rem; font-family: var(--ne-heading); font-weight: 400; font-size: 1.3rem; line-height: 1.12; letter-spacing: -.01em; }
.ne-chapter p:not(.ne-label):not(.ne-chapter__no) { margin: 0; font-size: .86rem; line-height: 1.6; }
.ne-chapter .ne-chapter__no { font-size: 2.6rem; }

/* gallery */
.ne-gallery { padding-inline: 0; }
.ne-gallery > .ne-head, /* the slider, set like a contact sheet over one large plate (square corners, ink arrows) */
.ne-gallery .inv-gallery-wrap { margin-inline: var(--ne-gutter); }
.ne-gallery .inv-gallery-slider { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.ne-gallery .inv-gallery-slider__thumb { width: 3.9rem; aspect-ratio: 4 / 5; border-radius: 0; border-width: 0 0 3px; border-color: transparent; opacity: .45; }
.ne-gallery .inv-gallery-slider__thumb img { filter: grayscale(1); }
.ne-gallery .inv-gallery-slider__thumb.is-active { opacity: 1; border-color: var(--inv-accent); }
.ne-gallery .inv-gallery-slider__thumb.is-active img { filter: none; }
.ne-gallery .inv-gallery-slider__arrow { width: 2.1rem; height: 2.1rem; border-radius: 0; background: var(--ne-ink); color: var(--ne-on-ink); }
.ne-gallery .inv-gallery-slider__stage { grid-template-columns: minmax(0, 1fr); aspect-ratio: 4 / 5; border-radius: 0; box-shadow: 0 30px 50px -30px rgb(0 0 0 / .6); }
.ne-gallery .inv-gallery-slider__count { right: auto; left: 0; bottom: 0; border-radius: 0; padding: .35rem .7rem; background: var(--ne-ink); font-family: var(--ne-sans); letter-spacing: .2em; }
.ne-gallery__caption { margin-inline: var(--ne-gutter); }
.ne-gallery__caption { display: flex; gap: .8rem; align-items: baseline; margin-top: 1rem; margin-bottom: 0; font-size: .74rem; color: var(--ne-muted); }
.ne-gallery__caption span { font-family: var(--ne-heading); font-style: italic; font-size: 1rem; color: var(--ne-accent-text); white-space: nowrap; }

/* live streaming */
.ne-stream__box { padding: 1.75rem 1.4rem; border: 1px solid currentColor; }
.ne-stream__live { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .4rem; font-size: .62rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ne-accent-text); }
.ne-stream__live span { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: ne-blink 1.6s ease-in-out infinite; }
@keyframes ne-blink { 50% { opacity: .25; } }
.ne-stream__platform { margin-bottom: .75rem; font-family: var(--ne-heading); font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; }
.ne-stream .inv-button { margin-top: .75rem; }

/* gift: accounts set on rules like a magazine listing, two per row (the odd last one full width) */
.ne-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .9rem; }
.ne-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ne-gift .inv-gift__account {
    min-width: 0; margin: 0; padding: .7rem 0 .2rem; border-radius: 0; background: none; border-top: 2px solid currentColor;
    display: flex; flex-direction: column; align-items: flex-start;
}
.ne-gift .inv-gift__account + .inv-gift__account { margin-top: 0; }
.ne-gift .inv-gift__account p { max-width: 100%; margin: 0; }
.ne-gift .inv-gift__bank { min-height: 1.5rem; display: flex; align-items: center; font-size: .6rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--ne-accent-text); margin-bottom: .4rem !important; }
.ne-gift .inv-gift__logo { height: 1.5rem; padding: .2rem .45rem; border-radius: 0; }
.ne-gift .inv-gift__logo img { max-width: 4.5rem; }
.ne-gift .inv-gift__number { font-family: var(--ne-heading); font-weight: 400; font-size: 1.15rem; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: anywhere; }
.ne-gift .inv-gift__holder { margin-top: .15rem !important; font-size: .6rem; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--ne-muted); overflow-wrap: anywhere; }
.ne-gift .inv-gift__account .inv-button { margin-top: .6rem; padding: .4rem .7rem; font-size: .56rem; letter-spacing: .16em; }
.ne-gift .inv-gift__address { display: block; margin-top: 1.25rem; padding-top: 1rem; border-top-width: 1px; }
.ne-gift .inv-gift__address .inv-gift__holder { font-size: .7rem; }
.ne-gift .inv-gift__address > p:not(.inv-gift__bank):not(.inv-gift__holder) { font-size: .9rem; }
.ne-gift .inv-gift__address .inv-button { margin-top: 1rem; }

/* rsvp + wishes: forms on rules */
.ne-panel { padding: 1.5rem 1.25rem; background: var(--ne-paper-light); border: 1px solid var(--ne-rule); }
.ne-panel .inv-form { gap: 1rem; }
.ne-panel .inv-form label, .ne-panel .inv-form__choices legend { font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ne-muted); }
.ne-panel .inv-form input:not([type=radio]):not([type=checkbox]),
.ne-panel .inv-form select,
.ne-panel .inv-form textarea {
    padding: .5rem 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 35%, transparent); border-radius: 0;
    background: transparent; color: var(--inv-text);
    font-size: 1rem; letter-spacing: 0; text-transform: none;
}
.ne-panel .inv-form input:focus, .ne-panel .inv-form select:focus, .ne-panel .inv-form textarea:focus { outline: none; border-bottom-color: var(--ne-ink); box-shadow: 0 1px 0 var(--ne-ink); }
.ne-panel .inv-form__choices { gap: .4rem; }
.ne-panel .inv-form__choices label {
    padding: .5rem .8rem; border: 1px solid var(--ne-rule); cursor: pointer;
    font-size: .64rem; color: var(--inv-text); transition: background-color .25s ease, color .25s ease;
}
.ne-panel .inv-form__choices label:has(:checked) { background: var(--ne-ink); border-color: var(--ne-ink); color: var(--ne-on-ink); }
.ne-panel .inv-form__choices label:has(:checked) input { accent-color: var(--inv-accent); }
.ne-panel .inv-form .inv-button { justify-self: stretch; margin-top: .25rem; }
.ne-panel .inv-form__notice { border-radius: 0; background: color-mix(in srgb, var(--inv-accent) 16%, transparent); }

/* wishes as letters: the message first, the name signed underneath */
.ne-panel .inv-wishes { --inv-wishes-height: 21rem; }
.ne-panel .inv-wishes__list { gap: 0; margin-top: 1.75rem; }
.ne-panel .inv-wish { display: flex; flex-direction: column; padding: .7rem 0; border-radius: 0; background: none; border-top: 1px solid var(--ne-rule); }
.ne-panel .inv-wish__message { order: -1; margin: 0; font-family: var(--ne-heading); font-style: italic; font-size: .95rem; line-height: 1.45; }
.ne-panel .inv-wish__message::before { content: '“'; color: var(--inv-accent); }
.ne-panel .inv-wish__message::after { content: '”'; color: var(--inv-accent); }
.ne-panel .inv-wish__name { margin-top: .4rem; font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.ne-panel .inv-wish__name::before { content: '— '; }
.ne-panel .inv-wish__time { margin-top: .15rem; font-size: .68rem; }

/* closing: the back cover */
.ne-closing {
    isolation: isolate; overflow: hidden; min-height: min(88svh, 720px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-top: 9rem; padding-bottom: 1.5rem;
    background: var(--ne-ink); color: var(--ne-on-ink);
    --ne-rule: color-mix(in srgb, var(--ne-on-ink) 30%, transparent);
}
.ne-section.ne-closing { border-top: 0; }
.ne-closing__fin {
    position: absolute; top: 1.5rem; left: var(--ne-gutter); margin: 0;
    font-family: var(--ne-heading); font-style: italic; font-weight: 400; font-size: 8.5rem; line-height: .9; letter-spacing: -.05em;
}
.ne-closing__fin span { color: var(--ne-accent-on-ink); }
.ne-closing__body { max-width: 22rem; }
.ne-closing .ne-kicker { color: var(--ne-accent-on-ink); }
.ne-closing__names { margin: 0 0 .7rem; font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
.ne-closing__message { font-size: .9rem; line-height: 1.6; opacity: .9; }
.ne-closing__signature { margin: 0; font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.ne-closing__foot {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    margin-top: 1.6rem; padding-top: .75rem; border-top: 1px solid var(--ne-rule);
}

/* shared components outside the sections */
/* music cannot start before the cover is opened: keep the button off the cover */
html:not(.inv-opened) .inv-music { visibility: hidden; }
.inv-music__button { background: var(--ne-ink); color: var(--ne-on-ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 6px 16px rgb(0 0 0 / .25); }
.inv-checkin { margin: 2.5rem var(--ne-gutter); border-radius: 0; box-shadow: 0 0 0 1px var(--ne-rule); }
.inv-checkin__code { border-radius: 0; }
.inv-branding { letter-spacing: .08em; }
.inv-lightbox { background: rgb(0 0 0 / .94); }

/* ---------- tablets: the issue lies on the dark table ---------- */

@media (min-width: 640px) {
    body { background: var(--ne-ink); }
    .ne-page { max-width: 600px; margin: 0 auto; box-shadow: 0 0 60px rgb(0 0 0 / .4); }
    .ne-cover__mag {
        width: auto; height: min(92vh, 880px); aspect-ratio: 3 / 4; padding: 1.4rem 1.6rem 1.6rem;
        box-shadow: 0 40px 90px rgb(0 0 0 / .55), inset 3px 0 0 color-mix(in srgb, #fff 12%, transparent);
    }
    .ne-cover { background-color: color-mix(in srgb, var(--ne-ink) 88%, #000); }
}

/* ---------- desktop: a two-page spread ---------- */

@media (min-width: 1024px) {
    :root { --ne-col: min(56vw, 780px); --ne-gutter: 3.25rem; }

    .ne-aside {
        position: fixed; inset: 0 auto 0 0; z-index: 0; isolation: isolate; overflow: hidden;
        display: flex; flex-direction: column; width: calc(100% - var(--ne-col));
        padding: 1.75rem 2.5rem 2.5rem; container-type: inline-size;
        background: var(--ne-ink); color: var(--ne-on-ink);
    }
    /* the fold of the spread */
    .ne-aside::after {
        content: ''; position: absolute; inset: 0 0 0 auto; width: 70px; pointer-events: none;
        background: linear-gradient(to left, rgb(0 0 0 / .45), transparent);
    }
    .ne-aside__photo { transition: filter 1.2s ease; }
    .ne-aside:hover .ne-aside__photo { filter: grayscale(.2) contrast(1.05); }
    .ne-aside__mast { margin-top: .9rem; }
    .ne-aside__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
    .ne-aside__quote { max-width: 30ch; margin: 0; font-family: var(--ne-heading); font-style: italic; font-size: 1.05rem; line-height: 1.45; opacity: .92; }
    .ne-aside__guest { flex: none; max-width: 16rem; text-align: right; }
    .ne-aside__guest .ne-kicker { color: var(--ne-accent-on-ink); margin-bottom: .25rem; }
    .ne-aside__guest-name { font-family: var(--ne-heading); font-size: 1.6rem; line-height: 1.2; }

    body { background: var(--ne-paper); }
    .ne-page {
        max-width: none; width: var(--ne-col); margin: 0 0 0 auto; min-height: 100vh; z-index: 1;
        box-shadow: inset 34px 0 34px -34px rgb(0 0 0 / .28);
    }

    /* contents: heading on the left, list on the right */
    .ne-contents { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .ne-contents__head { grid-template-columns: 1fr; }
    .ne-contents__title { font-size: 4.6rem; }
    .ne-contents__date { text-align: left; margin-top: 1rem; }
    .ne-contents__list { margin: 0; }

    .ne-section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
    .ne-head__no { font-size: 7.5rem; }
    .ne-title { font-size: 3.4rem; }

    .ne-opening__letter { margin-left: 33%; }
    .ne-pull { display: grid; grid-template-columns: 4fr 8fr; gap: 1.5rem; }
    .ne-pull__mark { font-size: 10rem; height: auto; line-height: .8; }
    .ne-pull blockquote { font-size: 1.6rem; }
    .ne-pull figcaption { grid-column: 2; margin-top: 0; }

    /* couple: side by side, the bride set lower */
    .ne-couple { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
    .ne-couple > .ne-head { grid-column: 1 / -1; }
    .ne-person--groom { grid-column: 1; grid-row: 2; }
    .ne-person--bride { grid-column: 2; grid-row: 2; margin-top: 9rem; }
    .ne-couple__amp { grid-column: 1 / -1; grid-row: 2; align-self: start; justify-self: center; z-index: 2; margin: 21rem 0 0; font-size: 8rem; }
    .ne-person__figure, .ne-person--groom .ne-person__figure, .ne-person--bride .ne-person__figure { width: 100%; margin: 0; clip-path: none; }
    .ne-person__figure .ne-cap { position: static; writing-mode: horizontal-tb; transform: none; margin-top: .6rem; }
    .ne-person--bride .ne-cap { text-align: right; }
    .ne-person__text { margin-top: 1.25rem; padding: 0 !important; }
    .ne-person__nick { font-size: 4.2rem; }

    .ne-bigdate__day { font-size: 14rem; }
    .ne-countdown .inv-countdown__value { font-size: 3.4rem; }
    .ne-countdown .inv-countdown__actions { flex-direction: row; justify-content: flex-end; }

    .ne-event__figure img { aspect-ratio: 16 / 9; }
    .ne-event__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; margin-top: 2rem; }
    .ne-event__big { font-size: 6.8rem; }
    .ne-event__body { margin-left: 0; padding-left: 2rem; }

    .ne-toc { margin-left: 33%; }
    .ne-chapter { gap: 2rem; }
    .ne-chapter__figure { max-width: 14rem; }
    .ne-chapter .ne-chapter__no { font-size: 4rem; }


    .ne-gift .inv-gift__accounts { gap: 1.5rem 2rem; }

    .ne-rsvp .ne-panel, .ne-wishes .ne-panel { margin-left: 25%; padding: 2rem; }
    .ne-closing__fin { font-size: 12rem; }
    .ne-closing__body { margin-left: 33%; }
}

@media (min-width: 640px) and (max-height: 700px) {
    .ne-cover__mag { height: 94vh; }
}

@media (max-width: 360px) {
    .ne-head__no { font-size: 4.6rem; }
    .ne-title { font-size: 2.35rem; }
    .ne-bigdate__day { font-size: 8.5rem; }
    .ne-cover__lines { width: 78%; }
}

/* short phone screens: keep the cover in one view */
@media (max-width: 639px) {
    /* the button never touches the bottom edge */
    .ne-cover__mag { padding-bottom: 1.75rem; }
}
@media (max-height: 760px) and (max-width: 639px) {
    .ne-cover__mast { font-size: min(calc(86cqi / var(--ne-len, 5)), 15cqi); }
    .ne-cover__lines { padding-top: 1rem; }
    .ne-cover__lines li { padding: .4rem 0; }
    .ne-cover__quote { -webkit-line-clamp: 6; }
    .ne-cover__foot { margin-top: .9rem; }
    .ne-cover__guest-name { margin-bottom: .8rem; }
}
@media (max-height: 680px) and (max-width: 639px) {
    /* the venue line steps aside; the date and the quote (two lines) stay */
    .ne-cover__lines li:not(:first-child):not(.ne-cover__quote) { display: none; }
    .ne-cover__mast { font-size: min(calc(76cqi / var(--ne-len, 5)), 13cqi); }
    .ne-cover__quote { font-size: .8rem !important; }
    .ne-cover__guest-name { font-size: 1.15rem; margin-bottom: .65rem; }
}

/* ---------- feature opener: full-bleed couple photo, names + countdown at the bottom ---------- */
.ne-opener {
    position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
    min-height: calc(100svh - 2.3rem); max-height: 900px; padding: 2rem var(--ne-gutter) 6.25rem; color: var(--ne-on-ink);
    background: var(--ne-ink);
}
.ne-opener__photo {
    --inv-parallax: 30px; position: absolute; inset: -32px 0; z-index: -2;
    background: var(--ne-photo, radial-gradient(120% 80% at 70% 20%, color-mix(in srgb, var(--inv-accent) 35%, var(--ne-ink)), var(--ne-ink))) center 30% / cover no-repeat;
}
/* readable text: a soft dark gradient from the bottom */
.ne-opener::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, color-mix(in srgb, var(--ne-ink) 92%, transparent) 0%, color-mix(in srgb, var(--ne-ink) 62%, transparent) 34%, transparent 62%);
}
.ne-opener__body { width: 100%; text-align: center; }
.ne-opener .ne-kicker { color: var(--ne-accent-on-ink); }
.ne-opener__names {
    margin: 0; font-family: var(--ne-heading); font-weight: 400; font-size: clamp(2.6rem, 13vw, 4.2rem); line-height: .95; letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgb(0 0 0 / .35); overflow-wrap: anywhere;
}
.ne-opener__names span { display: block; }
.ne-opener__names em { display: block; margin: .05em 0; font-size: .6em; color: var(--ne-accent-on-ink); }
.ne-opener__date { margin: .9rem 0 1.2rem; font-size: .7rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.ne-opener .inv-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 4.4rem)); justify-content: center; gap: .5rem; }
.ne-opener .inv-countdown__item {
    min-width: 0; padding: .7rem 0 .55rem; border-radius: 0; color: var(--ne-on-ink);
    background: color-mix(in srgb, var(--ne-ink) 35%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ne-on-ink) 45%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ne-opener .inv-countdown__value { font-family: var(--ne-heading); font-weight: 400; font-size: 1.7rem; line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--ne-on-ink); }
.ne-opener .inv-countdown__label { margin-top: .35rem; font-size: .52rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ne-accent-on-ink); opacity: 1; }
.ne-opener .inv-countdown__done { font-family: var(--ne-heading); font-style: italic; font-size: 1.15rem; }
/* the opener lines arrive one after another once the cover turns away */
html.inv-anim .ne-opener__body > * { transition: opacity .9s var(--ne-ease), transform 1s var(--ne-ease); }
html.inv-anim:not(.inv-opened) .ne-opener__body > * { opacity: 0; transform: translateY(26px); }
html.inv-anim .ne-opener__body > :nth-child(2) { transition-delay: .15s; }
html.inv-anim .ne-opener__body > :nth-child(3) { transition-delay: .3s; }
html.inv-anim .ne-opener__body > :nth-child(4) { transition-delay: .45s; }
@media (min-width: 1024px) { .ne-opener { min-height: min(100vh, 820px); } }

/* closing photo: a little taller than the section so its parallax drift never shows an edge */
.ne-closing__photo { --inv-parallax: 24px; inset: -30px 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ne-opener__body > * { transition: none !important; opacity: 1 !important; transform: none !important; }
    .ne-cover--leave, .ne-cover--leave .ne-cover__mag { transition: none; }
    .ne-cover__photo { animation: none !important; }
    .ne-bw img, .ne-aside__photo { transition: none; }
    .ne-stream__live span { animation: none; }
    .ne-contents__list a, .ne-contents__list a::after { transition: none; }
}

/* ---------- page end: the closing ends a steady distance above the bottom edge ---------- */
/* the closing carries the bottom space itself (in its own colour, clear of the music button and the "Gulir" pill),
   so the shared music spacer (a bare strip in the page colour) is not needed */
.inv-music__space { display: none; }
.ne-closing { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }

/* =====================================================================================================
   Batch 5: depth and one spot colour — photo spreads, a tinted page, colour plates, paper grain
   ===================================================================================================== */

/* ---------- photo behind a section (sections._bgphoto) ---------- */
.ne-section:has(> .ne-bg) { isolation: isolate; overflow: hidden; }
.ne-bg {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; isolation: isolate;
    /* without a photo: a glow of the spot colour in the ink */
    background:
        radial-gradient(90% 55% at 85% 0%, color-mix(in srgb, var(--inv-accent) 34%, transparent), transparent 70%),
        radial-gradient(70% 40% at 0% 100%, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 70%),
        var(--ne-ink);
}
.ne-bg img {
    --inv-parallax: 30px;
    position: absolute; left: 0; top: -40px; z-index: 0; width: 100%; height: min(calc(100% + 80px), 125svh); max-width: none;
    object-fit: cover; object-position: center 35%;
    filter: grayscale(1) contrast(1.18) brightness(.95);
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 98%); mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
}
/* duotone: the black-and-white photo printed in ink + the spot colour (its highlights take the colour) */
.ne-bg::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: color-mix(in srgb, var(--inv-accent) 78%, #fff); mix-blend-mode: multiply;
}
/* the ink over it, deeper towards the text */
.ne-bg::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ne-ink) 50%, transparent) 0,
        color-mix(in srgb, var(--ne-ink) 68%, transparent) min(45svh, 40%),
        color-mix(in srgb, var(--ne-ink) 88%, transparent) min(95svh, 75%),
        var(--ne-ink) 100%);
}
.ne-bg:not(:has(img))::before, .ne-bg:not(:has(img))::after { content: none; }

/* light page: the photo shows faintly at the top and fades into the paper */
.ne-bg--paper {
    background:
        radial-gradient(90% 45% at 100% 0%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        var(--ne-paper);
}
.ne-bg--paper img {
    filter: grayscale(1) contrast(1.1); opacity: .8; height: min(100%, 95svh);
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
.ne-bg--paper::before { background: color-mix(in srgb, var(--inv-accent) 45%, #fff); }
.ne-bg--paper::after {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ne-paper) 40%, transparent) 0,
        color-mix(in srgb, var(--ne-paper) 70%, transparent) 30svh,
        color-mix(in srgb, var(--ne-paper) 94%, transparent) 70svh,
        var(--ne-paper) 95svh);
}

/* ---------- ink pages: buttons, panels ---------- */
.ne-ink .inv-button:not(.inv-button--outline) { background: var(--ne-on-ink); color: var(--ne-ink); }
.ne-ink .inv-button:not(.inv-button--outline):hover { background: #fff; }
.ne-ink .ne-head { border-top-color: color-mix(in srgb, var(--ne-on-ink) 85%, transparent); }
.ne-ink .ne-title { text-shadow: 0 2px 20px rgb(0 0 0 / .35); }
/* a paper card set on the dark spread (RSVP) */
.ne-ink .ne-panel {
    background: var(--ne-paper-light); color: var(--inv-text); border: 0;
    box-shadow: 0 30px 60px -28px rgb(0 0 0 / .7), inset 0 3px 0 var(--inv-accent);
    --ne-rule: color-mix(in srgb, var(--inv-text) 24%, transparent);
    --ne-muted: color-mix(in srgb, var(--inv-text) 76%, var(--inv-background));
    --ne-accent-text: color-mix(in srgb, var(--inv-accent) 62%, var(--inv-text));
}
.ne-ink .ne-panel .inv-button:not(.inv-button--outline) { background: var(--ne-ink); color: var(--ne-on-ink); }
.ne-ink .ne-panel .inv-button--outline { color: var(--ne-ink); }

/* events on the spread */
.ne-events .ne-event__figure img { box-shadow: 0 30px 50px -30px rgb(0 0 0 / .8); }

/* live streaming: a smoked-glass box on the spread */
.ne-stream__box {
    background: color-mix(in srgb, var(--ne-ink) 45%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-color: color-mix(in srgb, var(--ne-on-ink) 55%, transparent);
}

/* ---------- countdown: the spot-colour page (paper tinted with the accent) ---------- */
.ne-spot {
    color: var(--inv-text);
    --ne-rule: color-mix(in srgb, var(--inv-text) 32%, transparent);
    --ne-muted: color-mix(in srgb, var(--inv-text) 80%, var(--ne-spot-paper));
    --ne-accent-text: color-mix(in srgb, var(--inv-accent) 45%, var(--inv-text));
}
.ne-section.ne-spot + .ne-section, .ne-section + .ne-section.ne-spot { border-top: 0; }
.ne-spot .ne-head { border-top-width: 3px; }
.ne-spot .ne-head__no { color: var(--ne-ink); }
.ne-spot .ne-bigdate__day { color: var(--ne-ink); }
.ne-spot .ne-bigdate__rest span:first-child { color: var(--ne-accent-text); }
.ne-spot .inv-countdown__label { opacity: 1; color: var(--ne-muted); }
.ne-spot .inv-countdown { border-block-width: 2px; border-block-color: var(--ne-ink); }
.ne-spot .inv-button--outline { color: var(--ne-ink); }
.ne-spot .inv-button--outline:hover { background: var(--ne-ink); color: var(--ne-on-ink); }

/* ---------- contents: an ink spine band along the free margin ---------- */
.ne-contents { position: relative; background-color: var(--ne-paper); }
.ne-contents__spine {
    position: absolute; left: 0; bottom: 3.5rem; top: 12.4rem; width: 2.35rem; margin: 0;
    display: flex; justify-content: space-between; align-items: center; padding: 1rem 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    background: var(--ne-ink); color: var(--ne-accent-on-ink); box-shadow: inset -4px 0 0 var(--inv-accent);
    font-size: .6rem; font-weight: 600; line-height: 1; letter-spacing: .32em; text-transform: uppercase; white-space: nowrap;
}
.ne-contents__spine span:last-child { color: var(--ne-on-ink); }
.ne-contents__list { margin-left: 3.6rem; }
.ne-contents__no { font-size: 1.6rem; color: var(--ne-accent-text); }
.ne-contents__label { font-size: .78rem; font-weight: 600; }
.ne-contents__title { font-size: 4.3rem; }

/* ---------- opening: the pull-quote on an ink block running off the right edge ---------- */
.ne-pull {
    margin-right: calc(-1 * var(--ne-gutter)); padding: 1.4rem var(--ne-gutter) 1.6rem 1.4rem; border-top: 0;
    background: var(--ne-ink); color: var(--ne-on-ink); box-shadow: inset 4px 0 0 var(--inv-accent), 0 30px 50px -34px rgb(0 0 0 / .6);
}
.ne-pull__mark { color: var(--ne-accent-on-ink); }
.ne-pull figcaption { color: var(--ne-accent-on-ink); }
.ne-opening__greeting { font-size: 1.32rem; }
.ne-dropcap::first-letter { color: var(--ne-accent-text); }

/* ---------- couple: each portrait printed over a block of the spot colour ---------- */
.ne-person__figure::before {
    content: ''; position: absolute; z-index: 0; top: 2.4rem; bottom: 0; width: 100%;
    background: var(--ne-spot);
}
.ne-person--groom .ne-person__figure::before { left: 1rem; }
.ne-person--bride .ne-person__figure::before { right: 1rem; }
.ne-person__figure img, .ne-person__empty { position: relative; z-index: 1; }
.ne-person__name { font-size: 1.75rem; }
.ne-person__parents { font-size: .92rem; color: var(--inv-text); }
.ne-person__parents span { color: var(--ne-accent-text); }
.ne-couple__amp { font-size: 7.5rem; }

/* ---------- closing: the photo in colour, fading into the ink ---------- */
.ne-closing__photo { filter: saturate(.9) contrast(1.06) brightness(.95); }
.ne-closing::before {
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--ne-ink) 62%, transparent) 0,
        color-mix(in srgb, var(--ne-ink) 8%, transparent) 30%,
        color-mix(in srgb, var(--ne-ink) 30%, transparent) 48%,
        color-mix(in srgb, var(--ne-ink) 88%, transparent) 68%,
        var(--ne-ink) 86%);
}
.ne-closing__names { font-size: clamp(2.2rem, 10vw, 2.7rem); }
.ne-closing__fin { text-shadow: 0 4px 30px rgb(0 0 0 / .35); }

/* ---------- paper grain: the transparent paper grain over the background colour of each page ---------- */
.ne-page, .ne-contents, .ne-section:not(.ne-closing) {
    background-image: var(--ne-texture); background-size: 400px 400px;
}
.ne-section.ne-ink { background-image: var(--ne-texture-ink); }
.ne-section { background-color: var(--ne-paper); }
.ne-gallery { background-color: var(--ne-paper-2); }
.ne-ink { background-color: var(--ne-ink); }
.ne-spot { background-color: var(--ne-spot-paper); }

@media (min-width: 1024px) {
    .ne-contents__spine { top: 4.5rem; bottom: 4.5rem; }
    .ne-contents { padding-left: calc(var(--ne-gutter) + 1.5rem); }
    .ne-contents__list { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ne-bg { opacity: 1 !important; transition: none !important; }
}

/* love story: each chapter plate printed over a block of the spot colour, like the couple portraits */
.ne-chapter__figure { position: relative; overflow: visible; }
.ne-chapter__figure::before { content: ''; position: absolute; z-index: 0; inset: .7rem -.7rem -.7rem .7rem; background: var(--ne-spot); }
.ne-chapter:nth-of-type(even) .ne-chapter__figure::before { inset: .7rem .7rem -.7rem -.7rem; }
.ne-chapter__figure img { position: relative; z-index: 1; }
.ne-chapter h3 { font-size: 1.45rem; }
.ne-toc__title { font-size: 1.15rem; }

/* wishes: the letters on a paper card with a spot-colour edge */
.ne-wishes .ne-panel { box-shadow: 0 30px 60px -36px rgb(0 0 0 / .45), inset 0 3px 0 var(--inv-accent); border: 0; }

/* ---------- intro scene "Naik Cetak" (scene.json + sections/_scene; the intro lives in <body>, outside .ne-page):
   the cover goes to press: a black-and-white proof slides onto the press, its spot-colour plate slides into
   register, the print develops into colour; masthead rule, spine band, pull-quote mark and barcode; an ink card ---------- */
.ne-scene-press { position: absolute; inset: 0; isolation: isolate;
    background:
        radial-gradient(75% 45% at 58% 40%, color-mix(in srgb, var(--inv-accent) 24%, transparent), transparent 72%),
        radial-gradient(60% 40% at 0% 100%, color-mix(in srgb, var(--inv-accent) 12%, transparent), transparent 70%),
        var(--ne-ink); }
.ne-scene-press::after { content: ''; position: absolute; inset: 0; background: var(--ne-texture-ink) 0 0 / 400px 400px; opacity: .8; }
/* the proof: the cover photo printed black-and-white on a paper margin, crop marks at the corners */
.ne-scene-plate { position: relative; width: 100%; height: 100%; isolation: isolate; background: var(--ne-on-ink);
    box-shadow: 0 30px 60px -18px rgb(0 0 0 / .7), 0 0 0 1px color-mix(in srgb, var(--ne-on-ink) 40%, transparent); }
.ne-scene-plate::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--ne-texture-photo) 0 0 / 400px 400px; opacity: .7; }
.ne-scene-plate__mono, .ne-scene-plate__print { position: absolute; inset: 7px; }
.ne-scene-plate__mono { display: flex; justify-content: center; align-items: center; gap: .22em; padding-bottom: 50%; color: var(--ne-on-ink);
    font-family: var(--ne-heading); font-size: min(22vw, 6rem, 12vh); line-height: 1;
    background: radial-gradient(120% 80% at 70% 20%, color-mix(in srgb, var(--inv-accent) 40%, var(--ne-ink)), var(--ne-ink)); }
.ne-scene-plate__mono i { width: 2px; height: .8em; background: var(--inv-accent); rotate: 18deg; }
.ne-scene-plate__print { z-index: 1; overflow: hidden; background: var(--ne-photo, none) center 30% / cover no-repeat; filter: grayscale(1) contrast(1.2) brightness(.9); }
/* the dark foot of the print, under the card (like the veil of the cover) */
.ne-scene-plate__print::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, color-mix(in srgb, var(--ne-ink) 35%, transparent), transparent 22%, transparent 45%, color-mix(in srgb, var(--ne-ink) 75%, transparent)); }
/* the spot-colour plate, out of register at first: the highlights of the photo printed in the accent (not filtered) */
.ne-scene-plate__ghost { position: absolute; inset: 7px; z-index: 2; opacity: 0; background: var(--inv-accent); mix-blend-mode: screen; }
@supports (mask-mode: luminance) {
    .ne-scene-plate__ghost { -webkit-mask: var(--ne-photo) center 30% / cover no-repeat; mask: var(--ne-photo) center 30% / cover no-repeat; mask-mode: luminance; }
}
.ne-scene-plate--empty .ne-scene-plate__print, .ne-scene-plate--empty .ne-scene-plate__ghost { display: none; }
.inv-intro.is-playing .ne-scene-plate__print { animation: ne-scene-develop 1.6s ease 2.7s forwards; }
.inv-intro.is-playing .ne-scene-plate__ghost { animation: ne-scene-register 2s cubic-bezier(.3, .6, .3, 1) .6s forwards; }
@keyframes ne-scene-develop { to { filter: grayscale(0) contrast(1.04) brightness(.95); } }
@keyframes ne-scene-register {
    0% { opacity: 0; transform: translate(-24px, 14px); }
    20% { opacity: .75; }
    70% { opacity: .55; transform: translate(0, 0); }
    100% { opacity: 0; transform: translate(0, 0); }
}
.ne-scene-crop { position: absolute; z-index: 4; width: 16px; height: 16px; border: 0 solid var(--ne-accent-on-ink); }
.ne-scene-crop--tl { left: -14px; top: -14px; border-width: 0 1px 1px 0; }
.ne-scene-crop--tr { right: -14px; top: -14px; border-width: 0 0 1px 1px; }
.ne-scene-crop--bl { left: -14px; bottom: -14px; border-width: 1px 1px 0 0; }
.ne-scene-crop--br { right: -14px; bottom: -14px; border-width: 1px 0 0 1px; }
/* the masthead rule of the cover */
.ne-scene-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; height: 100%; padding-bottom: .5rem;
    color: var(--ne-on-ink); border-bottom: 1px solid color-mix(in srgb, var(--ne-on-ink) 45%, transparent); }
.ne-scene-meta span:first-child, .ne-scene-meta span:last-child { color: var(--ne-accent-on-ink); }
.ne-scene-meta__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the ink spine band of the contents page */
.ne-scene-spine { display: flex; justify-content: space-between; align-items: center; height: 100%; margin: 0; padding: 1.1rem 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    background: color-mix(in srgb, var(--ne-ink) 82%, #000); color: var(--ne-accent-on-ink); box-shadow: inset -4px 0 0 var(--inv-accent), -6px 0 18px rgb(0 0 0 / .35);
    font: 600 .6rem/1 var(--ne-sans); letter-spacing: .32em; text-transform: uppercase; }
.ne-scene-spine span:last-child { color: var(--ne-on-ink); }
/* the gilt ampersand of the masthead, swinging over the corner of the proof */
.inv-scene__art:has(> .ne-scene-amp) { display: grid; place-items: center; }
.ne-scene-amp { display: block; font-family: var(--ne-display); font-size: min(50vw, 13rem); line-height: 1; color: var(--ne-accent-on-ink);
    text-shadow: 0 0 1px var(--ne-ink), 0 10px 26px rgb(0 0 0 / .6); }
/* the barcode sticker of the cover */
.ne-scene-barcode .ne-barcode { width: 100%; padding: .4rem .5rem .3rem; box-shadow: 0 10px 22px -6px rgb(0 0 0 / .6); }
.ne-scene-barcode .ne-barcode svg { height: 1.7rem; }
/* the folio progress line along the foot of the press */
.ne-scene-fold { position: relative; height: 100%; }
.ne-scene-fold::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--ne-on-ink) 22%, transparent); }
.ne-scene-fold span { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -.5px; background: var(--inv-accent); transform: scaleX(0); transform-origin: left center; }
.inv-intro.is-playing .ne-scene-fold span { animation: ne-scene-fold 5.6s cubic-bezier(.4, 0, .3, 1) .8s forwards; }
@keyframes ne-scene-fold { to { transform: scaleX(1); } }
/* the card: an ink cover-line block, the spot colour printed slightly out of register behind it */
.inv-intro--scene .inv-scene__card {
    left: 53%; top: 66%; aspect-ratio: auto; -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    width: min(var(--scene-card-w, 70vw), 19rem); padding: 1.3rem 1.2rem 1.25rem; color: var(--ne-on-ink);
    background: var(--ne-ink); box-shadow: 7px 7px 0 var(--inv-accent), 0 24px 50px -12px rgb(0 0 0 / .7);
    border-block: 1px solid color-mix(in srgb, var(--ne-on-ink) 40%, transparent);
}
.inv-scene__card .inv-intro__label { margin-bottom: .6rem; font: 600 .6rem/1.4 var(--ne-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--ne-accent-on-ink); }
.inv-scene__card .inv-intro__names { font-family: var(--ne-heading) !important; font-weight: 500; font-size: clamp(1.8rem, 8.6vw, 2.6rem); line-height: .95; letter-spacing: -.02em;
    text-transform: uppercase; color: var(--ne-on-ink); }
.inv-scene__card .inv-intro__rule { width: 3rem; height: 2px; margin-block: .85rem .7rem; background: var(--inv-accent); }
.inv-scene__card .inv-intro__date { font: 600 .66rem/1.4 var(--ne-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ne-on-ink); }
.inv-intro--scene .inv-intro__skip { border-radius: 0; background: color-mix(in srgb, var(--ne-ink) 70%, transparent); border-color: color-mix(in srgb, var(--ne-on-ink) 35%, transparent);
    color: var(--ne-on-ink); font-family: var(--ne-sans); }
@media (prefers-reduced-motion: reduce) {
    .inv-intro.is-playing .ne-scene-plate__print { animation: none; filter: none; }
    .inv-intro.is-playing .ne-scene-plate__ghost { animation: none; }
    .inv-intro.is-playing .ne-scene-fold span { animation: none; transform: none; }
}