/*
 * Template "Sampul Majalah" (Save the Date) — a high-fashion magazine cover, then the inside pages.
 * Colors from the chosen variant: --inv-primary (masthead accent), --inv-accent (ink black of the
 * dark pages), --inv-background (ivory paper), --inv-text.
 * Fonts: Bodoni Moda (Didone display) + Manrope (clean sans).
 */

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

:root {
    --mj-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
    --mj-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* the accent as small text: darkened on paper, lightened on black, so it stays readable */
    --mj-red-ink: color-mix(in srgb, var(--inv-primary) 78%, var(--inv-text));
    --mj-red-glow: color-mix(in srgb, var(--inv-primary) 82%, #fff);
    --mj-paper: var(--inv-background);
    --mj-black: var(--inv-accent);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--mj-paper);
    color: var(--inv-text);
    font-family: var(--mj-sans);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

.mj-book { position: relative; background: var(--mj-paper); }

/* ---------- cover ---------- */
.mj-cover {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 100vh; min-height: 100svh;
    background: var(--mj-black); color: #fff;
}
.mj-cover__photo { position: absolute; inset: 0; z-index: -2; }
.mj-cover__photo img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
}
/* top: a soft veil for the issue line; bottom: a deep fade for the cover lines */
.mj-cover__shade {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(to bottom, rgb(0 0 0 / .42), rgb(0 0 0 / .06) 22%, transparent 34%),
        linear-gradient(to top, color-mix(in srgb, var(--mj-black) 94%, transparent) 0%, color-mix(in srgb, var(--mj-black) 72%, transparent) 26%, transparent 56%);
}

/* no photo: a studio backdrop in the accent with a large outlined monogram */
.mj-cover--empty .mj-cover__photo {
    display: grid; place-items: center;
    background:
        radial-gradient(70% 45% at 50% 38%, color-mix(in srgb, var(--inv-primary) 55%, var(--mj-black)), transparent 75%),
        linear-gradient(160deg, color-mix(in srgb, var(--inv-primary) 30%, var(--mj-black)), var(--mj-black) 70%);
}
.mj-cover__monogram {
    margin-top: -6svh;
    font-family: var(--mj-serif); font-weight: 400; font-size: min(62vw, 34svh, 300px); line-height: 1;
    color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, #fff 55%, transparent);
    letter-spacing: -.04em;
}
.mj-cover__monogram em { font-style: italic; -webkit-text-stroke-color: color-mix(in srgb, var(--inv-primary) 70%, #fff); }

.mj-cover__top { padding: 1rem 1rem 0; text-align: center; }

.mj-issue {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    margin: 0 0 .3rem; padding-bottom: .45rem;
    border-bottom: 1px solid rgb(255 255 255 / .55);
    font-size: .66rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
    text-shadow: 0 1px 6px rgb(0 0 0 / .35);
}
.mj-issue__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--inv-primary); }

/* masthead: names in a heavy Didone, fitted to the width by a small script */
.mj-mast {
    width: max-content; margin: 0 auto;
    font-family: var(--mj-serif); font-weight: 900; font-variation-settings: "opsz" 20;
    font-size: clamp(2.6rem, 15vw, 6rem); line-height: .86; letter-spacing: -.035em;
    text-transform: uppercase; white-space: nowrap;
    color: var(--inv-primary);
    text-shadow: 0 2px 22px rgb(0 0 0 / .16);
}
.mj-mast__l1, .mj-mast__l2 { display: inline-block; }
.mj-mast__l1 { margin-right: .16em; }
.mj-mast.is-stacked .mj-mast__l1, .mj-mast.is-stacked .mj-mast__l2 { display: block; margin: 0; text-align: center; }
.mj-mast.is-stacked .mj-mast__l2 { margin-top: .02em; }
.mj-mast__c { display: inline-block; }
.mj-mast__amp { font-style: italic; font-weight: 400; margin-right: .14em; text-transform: none; }
html.mj-fitting .mj-mast { visibility: hidden; }

.mj-cover__bottom { padding: 0 1.25rem 1.25rem; }

/* cover lines: only real fields (title, date, city) */
.mj-lead {
    margin: 0;
    font-family: var(--mj-serif); font-style: italic; font-weight: 500;
    font-size: clamp(2.3rem, 11.5vw, 3.4rem); line-height: .95; letter-spacing: -.01em;
}
.mj-lead::before {
    content: ''; display: block; width: 2.2rem; height: 3px; margin-bottom: .7rem; background: var(--inv-primary);
}
.mj-lines { margin-top: .8rem; display: grid; gap: .35rem; }
.mj-line {
    margin: 0; display: flex; align-items: baseline; gap: .6rem;
    font-size: .95rem; font-weight: 600; line-height: 1.3;
}
.mj-line__kicker {
    flex: none; min-width: 4.4rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--mj-red-glow);
}

.mj-foot {
    margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgb(255 255 255 / .28);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}

/* subscriber label with the guest's name */
.mj-label {
    margin: 0; min-width: 0; max-width: 62%;
    padding: .45rem .7rem .5rem; background: var(--mj-paper); color: var(--inv-text);
    border-left: 3px solid var(--inv-primary);
    line-height: 1.3;
}
.mj-label__to { display: block; font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--mj-red-ink); }
.mj-label__name { display: block; margin-top: .1rem; font-size: .86rem; font-weight: 600; overflow-wrap: anywhere; }

.mj-turn {
    margin: 0; display: flex; align-items: center; gap: .55rem;
    font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; opacity: .85;
}
.mj-turn__arrow {
    width: 1.5rem; height: 1.5rem; border: 1px solid rgb(255 255 255 / .6); border-radius: 50%;
    background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1.5 5.5 5 9l3.5-3.5' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* barcode block from the date digits */
.mj-barcode {
    flex: none; display: grid; justify-items: center;
    width: 5.6rem; padding: .3rem .45rem .2rem; background: #fff; color: #111;
}
.mj-barcode__issue { justify-self: start; font-size: .5rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mj-barcode svg { display: block; width: 100%; height: 1.75rem; margin-top: .15rem; fill: #111; }
.mj-barcode__digits {
    display: flex; justify-content: space-around; width: 100%;
    font-family: ui-monospace, 'Consolas', monospace; font-size: .56rem; letter-spacing: .12em; line-height: 1.3;
}

/* short phones (WhatsApp browser) */
@media (max-height: 680px) {
    .mj-lead { font-size: clamp(2rem, 10vw, 2.8rem); }
    .mj-lines { margin-top: .55rem; gap: .2rem; }
    .mj-foot { margin-top: .7rem; padding-top: .6rem; }
}
@media (max-height: 600px) {
    .mj-cover__top { padding-top: .75rem; }
    .mj-lead { font-size: 1.9rem; }
    .mj-lead::before { margin-bottom: .45rem; }
    .mj-line { font-size: .88rem; }
    .mj-cover__bottom { padding-bottom: 1rem; }
    .mj-barcode svg { height: 1.4rem; }
}

/* ---------- inside pages ---------- */
.mj { position: relative; }

.mj-folio {
    display: flex; justify-content: space-between; padding-bottom: .5rem; margin-bottom: 2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--inv-text) 22%, transparent);
    font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-text) 70%, transparent);
}
.mj-folio--dark { border-color: rgb(255 255 255 / .22); color: rgb(255 255 255 / .7); }

.mj-kicker {
    margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--mj-red-ink);
}

/* editorial spread */
.mj-spread {
    padding: 2.25rem 1.25rem 3rem;
    background:
        linear-gradient(to bottom, color-mix(in srgb, var(--inv-primary) 7%, var(--mj-paper)), var(--mj-paper) 40%);
}
.mj-head {
    margin: .55rem 0 0;
    font-family: var(--mj-serif); font-weight: 800; font-size: clamp(2.4rem, 12vw, 3.6rem);
    line-height: .98; letter-spacing: -.025em;
}
.mj-head__day {
    display: block; margin-bottom: .25rem;
    font-weight: 400; font-style: italic; font-size: .5em; letter-spacing: 0; color: var(--mj-red-ink);
}
.mj-head em { font-style: italic; font-weight: 400; color: var(--mj-red-ink); }
.mj-rule { display: block; height: 2px; margin: 1.25rem 0 1.5rem; background: var(--inv-text); transform-origin: left; }

.mj-cols { display: grid; grid-template-columns: 1.08fr 1fr; gap: 1.1rem; align-items: start; }

.mj-fig { margin: 0; position: relative; }
.mj-fig__frame {
    position: relative; aspect-ratio: 3 / 4; overflow: hidden;
    box-shadow: .55rem .55rem 0 var(--inv-primary);
    background: linear-gradient(160deg, var(--inv-primary), var(--mj-black));
}
.mj-fig__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.12); }
.mj-fig--empty .mj-fig__frame { display: grid; place-items: center; }
.mj-fig__initials { font-family: var(--mj-serif); font-size: 2.8rem; color: #fff; }
.mj-fig__initials em { font-size: .6em; margin: 0 .1em; opacity: .85; }
.mj-fig figcaption {
    margin-top: 1rem; font-size: .66rem; font-style: italic; letter-spacing: .04em;
    color: color-mix(in srgb, var(--inv-text) 75%, transparent);
}

.mj-facts { margin: 0; display: grid; gap: 1rem; }
.mj-fact { padding-top: .5rem; border-top: 1px solid color-mix(in srgb, var(--inv-text) 25%, transparent); }
.mj-fact dt { font-size: .6rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--mj-red-ink); }
.mj-fact dd { margin: .2rem 0 0; font-family: var(--mj-serif); font-weight: 600; font-size: 1.3rem; line-height: 1.15; overflow-wrap: anywhere; }
.mj-fact__city { font-style: italic; font-weight: 500 !important; font-size: 1.55rem !important; }

/* the note with a drop cap */
.mj-note {
    margin: 2rem 0 0; padding-left: 1rem; border-left: 3px solid var(--inv-primary);
    font-family: var(--mj-serif); font-style: italic; font-size: 1.3rem; line-height: 1.4;
}
/* a longer note reads as body copy with a drop cap */
.mj-note--drop { padding-left: 0; border-left: 0; font-family: var(--mj-sans); font-style: normal; font-size: 1rem; line-height: 1.7; }
.mj-note--drop::first-letter {
    float: left; margin: .02em .12em 0 0;
    font-family: var(--mj-serif); font-weight: 800; font-size: 3.6em; line-height: .8; color: var(--inv-primary);
}

/* countdown page: black, the cover photo faded underneath */
.mj-count {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 2.25rem 1.25rem 2.75rem; color: #fff;
    background:
        radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--inv-primary) 38%, transparent), transparent 70%),
        var(--mj-black);
}
.mj-count__bg {
    position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
    opacity: .3; filter: grayscale(1) contrast(1.1);
}
.mj-count--photo::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--mj-black) 55%, transparent), var(--mj-black) 92%);
}
.mj-count .mj-kicker { color: var(--mj-red-glow); }
.mj-count__title {
    margin: .4rem 0 1.6rem;
    font-family: var(--mj-serif); font-weight: 800; font-size: clamp(2.1rem, 10vw, 3rem); line-height: 1; letter-spacing: -.02em;
}
.mj-count__title em { display: block; font-weight: 400; font-style: italic; color: var(--mj-red-glow); }

.mj-countdown .inv-countdown {
    justify-content: stretch; gap: 0;
    border-block: 1px solid rgb(255 255 255 / .28);
}
.mj-countdown .inv-countdown__item {
    flex: 1; min-width: 0; padding: .9rem .25rem; border-radius: 0; background: none; text-align: left;
    border-left: 1px solid rgb(255 255 255 / .2);
    padding-left: .7rem;
}
.mj-countdown .inv-countdown__item:first-child { border-left: 0; padding-left: 0; }
.mj-countdown .inv-countdown__value {
    font-family: var(--mj-serif); font-weight: 600; font-size: clamp(2rem, 10vw, 2.7rem); line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}
.mj-countdown .inv-countdown__label {
    margin-top: .4rem; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--mj-red-glow); opacity: 1;
}
.mj-countdown .inv-countdown__done { font-family: var(--mj-serif); font-style: italic; font-size: 1.2rem; }
.mj-countdown .inv-countdown__actions { justify-content: flex-start; gap: .6rem; margin-top: 1.4rem; }
.mj-countdown .inv-button {
    border-radius: 0; padding: .7rem 1rem;
    font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.mj-countdown .inv-button--outline { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }
.mj-countdown .inv-button--outline:first-child { background: var(--inv-primary); box-shadow: none; }

/* closing: the message as a pull-quote */
.mj-closing {
    position: relative; padding: 2.5rem 1.25rem 2.75rem;
    background: var(--mj-paper);
}
.mj-closing__mark {
    display: block; height: .5em; margin-bottom: .1em;
    font-family: var(--mj-serif); font-weight: 900; font-size: 7rem; line-height: 1; color: var(--inv-primary);
}
.mj-quote {
    margin: 0;
    font-family: var(--mj-serif); font-style: italic; font-weight: 500;
    font-size: clamp(1.45rem, 6.6vw, 1.9rem); line-height: 1.28; letter-spacing: -.005em;
}
.mj-closing__names {
    display: flex; align-items: center; gap: .7rem; margin: 1.5rem 0 0;
    font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
}
.mj-closing__dash { width: 2rem; height: 2px; background: var(--inv-primary); }
/* the end-of-article mark */
.mj-end { width: .55rem; height: .55rem; background: var(--inv-primary); }

/* desktop: the magazine as an object on a dark table */
@media (min-width: 640px) {
    body {
        background:
            radial-gradient(60rem 40rem at 50% 0%, color-mix(in srgb, var(--inv-primary) 22%, transparent), transparent 70%),
            var(--mj-black);
    }
    .mj-book {
        max-width: 30rem; margin: 0 auto;
        box-shadow: 0 30px 80px -20px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06);
    }
    .mj-cover { min-height: min(100svh, 56rem); }
    .mj-spread, .mj-count, .mj-closing { padding-inline: 2rem; }
    .mj-cover__bottom { padding-inline: 1.75rem; }
}

/*
 * Motion (only with html.inv-anim; see _shared/inv.css): the photo eases in, the masthead
 * letters settle once, the cover lines follow (≤ 2.5 s). Scroll reveals are the shared "up".
 */
@keyframes mj-photo-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes mj-letter { from { opacity: 0; transform: translateY(-.32em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
html.inv-anim .mj-cover__photo { animation: mj-photo-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
html.inv-anim .mj-mast .mj-mast__c { opacity: 0; }
html.inv-anim .mj-mast.is-fit .mj-mast__c {
    animation: mj-letter .9s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(.2s + min(var(--i) * 45ms, 1s));
}