/* ================================================
   Magazine Eighteen ("Naslovna") — Digital Invitation Theme
   The invitation is a glossy magazine: guests meet the cover (the host's
   photo under a big serif masthead), tap to turn the page and land on the
   editor's letter, then read the program as "in this issue", the map as
   "where to find us", an RSVP filled in on a subscription card, and a
   colophon for the footer. Concept A of the approved prototype.
   Fonts (Bodoni Moda / Archivo) both ship Serbian Latin as served by
   Google Fonts.
   ================================================ */

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

:root {
    /* One recolourable seed (the editor's / demo's "Accent Color"); every
       other accent tint derives from it. palette[1] in config/themes.php. */
    --accent: #8E2432;
    --accent-color: var(--accent);
    --accent-soft: color-mix(in srgb, var(--accent) 35%, transparent);
    --accent-deep: color-mix(in srgb, var(--accent) 78%, black);

    --paper:   #F5EEE6;
    --paper-2: #EFE5DA;
    --card:    #FFFFFF;
    --ink:     #2A1D1A;
    --body:    #4A3C37;
    --muted:   #6F625A;
    --line:    rgba(42, 29, 26, .3);
    --cover:   #1F6FB5;
    --desk:    #E2D6C8;
    --mg-page: 560px;

    --radius: 4px;
    --btn-radius: 2px;
    --ff-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
    --ff-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: 1.1rem;
    font-optical-sizing: none; /* Bodoni at its low optical size everywhere: sturdier hairlines that stay visible on a phone */
    color: var(--body);
    background-color: var(--paper);
    line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mg-container         { max-width: 1080px; margin: 0 auto; }
.mg-container--narrow { max-width: 640px; }

.mg-kicker {
    font: 700 max(12.5px, 3.5cqw)/1 var(--ff-body);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ================================================================
   One magazine page on wide screens: the hero, every section and the footer
   share a single centred page column on a darker "desk", so the invitation
   reads as one printed page instead of a narrow hero over wide sections.
   On phones the column is the whole screen and nothing changes.
   ================================================================ */
@media (min-width: 700px) {
    body { background-color: var(--desk); }
    .mg-hero,
    .mg-alt-sections,
    .mg-footer,
    .mg-gallery-page {
        max-width: var(--mg-page);
        margin-left: auto;
        margin-right: auto;
        box-shadow: 0 0 46px rgba(42, 29, 26, .2);
    }
    .mg-alt-sections { clip-path: inset(0 -60px); }
}

/* ================================================================
   The stage — the editor's page (hero) and the page under the intro gate,
   sized in cqw of its width and used identically by both so the hand-off when
   the gate fades is seamless. On phones it is the whole screen, edge to edge;
   on wider screens it becomes a phone-proportioned page (320:700) filling the
   screen height, centred.
   ================================================================ */
.mg-stage {
    position: relative;
    width: 100%;
    min-height: 100svh;
    margin: 0 auto;
    container-type: inline-size;
    perspective: 1400px;
    color: var(--ink);
}
@media (min-width: 700px) {
    .mg-stage { width: min(100%, calc(100svh * 320 / 700)); }
}

/* ---------- The editor's page ---------- */
.mg-inside {
    min-height: 100svh;
    padding: 21cqw 8cqw 9cqw;
    background: var(--paper);
    display: flex;
    flex-direction: column;
}
.mg-inside__head {
    display: flex;
    justify-content: space-between;
    padding-bottom: 2.4cqw;
    border-bottom: .3cqw solid var(--ink);
    font: 700 max(12px, 3.2cqw)/1 var(--ff-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
}
.mg-inside .mg-kicker { margin: 7cqw 0 2cqw; }

.mg-inside__name {
    font: italic 600 23cqw/.88 var(--ff-display);
    color: var(--ink);
    overflow-wrap: anywhere;
}
.mg-inside__name span {
    display: block;
    margin-top: 2.6cqw;
    font: 700 max(13px, 3.8cqw)/1.2 var(--ff-body);
    font-style: normal;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--body);
}

.mg-inside__photo { margin: 6cqw 0 0; position: relative; }
.mg-inside__photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 16%;
}
.mg-inside__photo figcaption {
    margin-top: 1.8cqw;
    font: 700 max(12px, 3.1cqw)/1 var(--ff-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.mg-inside__letter {
    margin-top: 6cqw;
    font: italic 600 max(19px, 5.6cqw)/1.4 var(--ff-display);
    color: var(--ink);
    white-space: pre-line;
}

.mg-inside__facts {
    margin-top: auto;
    padding-top: 6cqw;
    border-top: .3cqw solid var(--ink);
}
.mg-inside__facts > div {
    display: flex;
    align-items: baseline;
    gap: 2cqw;
    padding: 2.6cqw 0;
}
.mg-inside__facts dt {
    font: 700 max(13px, 3.7cqw)/1.2 var(--ff-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}
.mg-inside__facts i { flex: 1; min-width: 4cqw; border-bottom: max(2px, .45cqw) dotted var(--line); transform: translateY(-.8cqw); }
.mg-inside__facts dd {
    font: italic 600 max(17px, 4.8cqw)/1.2 var(--ff-display);
    color: var(--ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.mg-hero { background: var(--paper); }

/* ================================================================
   The cover (partials/cover.blade.php) — the front of the magazine, on the
   intro gate only. It sits over the editor's page and swings open from its
   left edge.
   ================================================================ */
.mg-cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    background: var(--cover);
    color: #fff;
    transform-origin: left center;
    transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .25s ease-out;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}
/* a glossy sheen that sweeps across the cover now and then */
.mg-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .26) 48%, rgba(255, 255, 255, .06) 54%, transparent 62%) no-repeat;
    background-size: 300% 100%;
    background-position: 130% 0;
    animation: mg-sheen 5.5s ease-in-out 2.4s infinite;
    pointer-events: none;
}
@keyframes mg-sheen {
    0%, 60%  { background-position: 130% 0; }
    100%     { background-position: -30% 0; }
}
.mg-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 22, 38, .5), rgba(14, 22, 38, 0) 30%, rgba(14, 22, 38, 0) 52%, rgba(14, 22, 38, .72));
    pointer-events: none;
}
.mg-cover__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 16%;
}
.mg-cover__numeral {
    position: absolute;
    left: 50%;
    top: 34%;
    transform: translateX(-50%);
    font: 800 62cqw/1 var(--ff-display);
    color: transparent;
    -webkit-text-stroke: .6cqw rgba(255, 255, 255, .55);
}
.mg-cover > :not(.mg-cover__photo):not(.mg-cover__numeral) { z-index: 2; }

.mg-cover__mast {
    position: absolute;
    top: 6cqw;
    left: 0;
    right: 0;
    text-align: center;
    font: 800 11.3cqw/1 var(--ff-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    /* a low optical size keeps Bodoni's hairlines from vanishing on the photo */
    font-variation-settings: 'opsz' 10;
}
.mg-cover__issue {
    position: absolute;
    top: 21.6cqw;
    left: 0;
    right: 0;
    text-align: center;
    font: 600 max(12px, 3.4cqw)/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #F3E7DC;
}
.mg-cover__lines {
    position: absolute;
    left: 5.6cqw;
    /* 55% down, but never lower than the name block needs on a squat screen */
    top: min(55%, calc(100% - 86cqw));
    width: 52%;
    font: italic 600 5.6cqw/1.2 var(--ff-display);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.mg-cover__lines span { display: block; margin-bottom: 4.4cqw; }
.mg-cover__lines b {
    display: block;
    margin-bottom: 1cqw;
    font: 700 max(12px, 3.4cqw)/1 var(--ff-body);
    font-style: normal;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #F3D7C5;
}
.mg-cover__name {
    position: absolute;
    left: 5.6cqw;
    right: 30cqw;
    bottom: 14cqw;
    font: italic 600 20.6cqw/.85 var(--ff-display);
    overflow-wrap: anywhere;
}
.mg-cover__name--l { font-size: 15cqw; }
.mg-cover__name--m { font-size: 11.5cqw; }
.mg-cover__name small {
    display: block;
    margin-top: 3cqw;
    font: 700 max(12px, 3.8cqw)/1.2 var(--ff-body);
    font-style: normal;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.mg-cover__barcode {
    position: absolute;
    right: 5cqw;
    bottom: 13.5cqw;
    padding: 1.4cqw 1.4cqw .8cqw;
    background: #fff;
    color: #111;
    text-align: center;
    font: 700 max(10px, 2.7cqw)/1 var(--ff-body);
    letter-spacing: .06em;
}
.mg-cover__bars { display: flex; gap: .45cqw; width: 21cqw; height: 9cqw; margin-bottom: 1cqw; }
.mg-cover__bars i { display: block; background: #111; }

/* ================================================================
   Intro gate (partials/intro.blade.php). Behaviour comes from the shared
   envelope JS via #theme-envelope (it adds body.env-has-envelope /
   env-scroll-lock and .is-open); the shared component's own CSS isn't on
   this page, so the two body rules live here.
   ================================================================ */
body.env-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.mg-gate {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    justify-content: center;
    cursor: pointer;
    background: #1A1311;
    /* fade only once the cover has turned */
    transition: opacity .5s ease 1.3s, visibility 0s linear 1.9s;
}
.env-has-envelope .mg-gate { display: flex; }
.mg-gate:focus-visible { outline: 2px solid var(--paper); outline-offset: -6px; }
.mg-gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

.mg-gate .mg-stage { height: 100svh; min-height: 0; overflow: hidden; }
.mg-gate .mg-inside { height: 100%; overflow: hidden; }

.mg-gate__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.5cqw;
    z-index: 4;
    text-align: center;
    font: 700 max(12px, 3.5cqw)/1 var(--ff-body);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    transition: opacity .3s;
}
@keyframes mg-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(1.5cqw); }
}
.mg-gate__hint::after { content: ' →'; }

/* the turn: the cover swings open from its left edge */
.mg-gate.is-open .mg-cover { transform: rotateY(-168deg); transition: transform 1.1s cubic-bezier(.6, .05, .25, 1); }
.mg-gate.is-open .mg-gate__hint { opacity: 0; }

/* ---------- The foil sticker ("Invited only") ---------- */
.mg-cover__sticker {
    position: absolute;
    right: 4.5cqw;
    top: 27%;
    width: 24cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: rotate(12deg);
    background: conic-gradient(from 200deg, #F4DD9A, #C9993A, #FBEFC2, #B8862B, #F4DD9A);
    box-shadow: 0 1.2cqw 2.6cqw rgba(0, 0, 0, .35), inset 0 0 0 .9cqw rgba(255, 255, 255, .28), inset 0 0 0 1.1cqw rgba(120, 80, 10, .25);
    overflow: hidden;
}
.mg-cover__sticker span {
    position: relative;
    max-width: 80%;
    text-align: center;
    font: 800 max(10px, 3.25cqw)/1.15 var(--ff-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3A2A0C;
}
.mg-cover__sticker::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%;
    background-position: 160% 0;
    animation: mg-foil 4.2s ease-in-out 2.8s infinite;
}
@keyframes mg-foil {
    0%, 55% { background-position: 160% 0; }
    100%    { background-position: -60% 0; }
}

/* ---------- The cover prints in on the gate, line by line ----------
   (backwards fill: the resting style is the finished cover, so anything that
   freezes animations still sees it complete) */
.mg-gate .mg-cover__mast   { animation: mg-drop .9s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.mg-gate .mg-cover__issue  { animation: mg-fade .6s ease .55s backwards; }
.mg-gate .mg-cover__lines span:nth-child(1) { animation: mg-slide .7s ease .8s backwards; }
.mg-gate .mg-cover__lines span:nth-child(2) { animation: mg-slide .7s ease 1s backwards; }
.mg-gate .mg-cover__name   { animation: mg-rise .9s cubic-bezier(.2, .7, .2, 1) 1s backwards; }
.mg-gate .mg-cover__barcode { animation: mg-fade .6s ease 1.3s backwards; }
.mg-gate .mg-cover__sticker { animation: mg-stick .6s cubic-bezier(.3, 1.6, .5, 1) 1.55s backwards; }
.mg-gate .mg-gate__hint    { animation: mg-fade .6s ease 1.9s backwards, mg-nudge 2.2s ease-in-out 2.5s infinite; }
@keyframes mg-drop  { from { opacity: 0; transform: translateY(-5cqw) scale(1.05); } }
@keyframes mg-fade  { from { opacity: 0; } }
@keyframes mg-slide { from { opacity: 0; transform: translateX(-5cqw); } }
@keyframes mg-rise  { from { opacity: 0; transform: translateY(7cqw); } }
@keyframes mg-stick { from { opacity: 0; transform: rotate(-6deg) scale(1.7); } }

/* ================================================================
   Page sections — paper pages alternating two tints, a hairline rule
   between them and a folio (page number) at the foot of each, counted by CSS.
   ================================================================ */
.mg-alt-sections { counter-reset: mg-page 2; }
.mg-alt-sections > * {
    position: relative;
    counter-increment: mg-page;
    background-color: var(--paper);
    border-top: 1px solid var(--line);
}
.mg-alt-sections > *:nth-child(even) { background-color: var(--paper-2); }
.mg-alt-sections > *:not(.mg-closing)::after {
    content: '— ' counter(mg-page, decimal-leading-zero) ' —';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.4rem;
    text-align: center;
    font: 700 .8rem/1 var(--ff-body);
    letter-spacing: .3em;
    color: var(--muted);
    pointer-events: none;
}

.mg-section-title {
    font: italic 600 clamp(2.2rem, 6.4vw, 3.1rem)/1.05 var(--ff-display);
    color: var(--ink);
    text-align: center;
    margin-bottom: 2.25rem;
    position: relative;
    padding-bottom: 1rem;
    text-wrap: balance;
}
.mg-section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
}

.mg-countdown,
.mg-audio,
.mg-story,
.mg-gallery,
.mg-program,
.mg-dress-code,
.mg-good-to-know,
.mg-location,
.mg-accommodation,
.mg-guest-wall,
.mg-gallery-upload,
.mg-rsvp { padding: 6.5rem 1.25rem 7rem; text-align: center; }

/* ---------- Countdown: boxed numbers like a magazine's issue counter ---------- */
.mg-countdown__timer {
    display: flex;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.mg-countdown__unit {
    min-width: 92px;
    padding: 1rem .5rem .8rem;
    border: 1px solid var(--ink);
    background: var(--card);
}
.mg-countdown__number {
    display: block;
    font: 700 2.4rem/1 var(--ff-display);
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
}
.mg-countdown__label {
    display: block;
    margin-top: .55rem;
    font: 700 .8rem/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Section kicker (the small caps line above a page title) ---------- */
.mg-section-kicker {
    margin-bottom: .7rem;
    font: 700 .86rem/1 var(--ff-body);
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent);
    text-align: center;
}

/* ---------- Growing up: paper clippings (components/birthday-18-magazine-story-timeline) ---------- */
.mg-story__intro { max-width: 34rem; margin: -.75rem auto 0; color: var(--body); }

.mg-clips {
    --mg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .26 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --mg-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V7L113 11 105 6 97 12 88 5 80 10 71 4 63 11 54 6 46 12 38 5 29 10 21 4 13 11 6 6 0 9Z'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
    max-width: 640px;
    margin: 3rem auto 0;
    text-align: left;
}
.mg-clip {
    position: relative;
    width: min(100%, 31rem);
    filter: drop-shadow(0 7px 8px rgba(42, 29, 26, .16)) drop-shadow(0 1px 1px rgba(42, 29, 26, .2));
}
.mg-clip--left  { align-self: flex-start; transform: rotate(-1.4deg); }
.mg-clip--right { align-self: flex-end;   transform: rotate(1.2deg); }
.mg-clip__sheet {
    position: relative;
    padding: 2.1rem 1.7rem 2.6rem;
    background: var(--mg-grain), #FFFDF8;
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 13px) no-repeat, var(--mg-torn) bottom / 120px 14px repeat-x;
            mask: linear-gradient(#000, #000) top / 100% calc(100% - 13px) no-repeat, var(--mg-torn) bottom / 120px 14px repeat-x;
    overflow: hidden;
}
/* a strip of washi tape holding the sheet to the page */
.mg-clip__tape {
    position: absolute;
    z-index: 2;
    top: -.8rem;
    left: 50%;
    width: 6.2rem;
    height: 1.7rem;
    transform: translateX(-50%) rotate(-2.5deg);
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, #fff) 0 7px, color-mix(in srgb, var(--accent) 26%, #fff) 7px 14px);
    opacity: .85;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 4px calc(100% - 4px), transparent 100%);
            mask: linear-gradient(90deg, transparent 0, #000 4px calc(100% - 4px), transparent 100%);
}
.mg-clip--right .mg-clip__tape { transform: translateX(-50%) rotate(2deg); }
/* the ghost numeral behind the text */
.mg-clip__no {
    position: absolute;
    right: 1rem;
    top: .2rem;
    font: italic 500 7rem/1 var(--ff-display);
    color: color-mix(in srgb, var(--accent) 9%, transparent);
    pointer-events: none;
}
.mg-clip__photo { position: relative; margin: 0 0 1.2rem; padding: .45rem .45rem 0; background: #fff; box-shadow: 0 2px 6px rgba(42, 29, 26, .22); transform: rotate(-1deg); }
.mg-clip__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mg-clip__photo figcaption { padding: .5rem .2rem .6rem; font: 700 .8rem/1.2 var(--ff-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.mg-clip__period {
    position: relative;
    display: block;
    margin-bottom: .5rem;
    font: 700 .78rem/1 var(--ff-body);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--accent);
}
.mg-clip__title { position: relative; font: italic 600 1.85rem/1.1 var(--ff-display); color: var(--ink); margin-bottom: .6rem; }
.mg-clip__desc { position: relative; font-size: 1.08rem; line-height: 1.6; color: var(--body); }

@media (max-width: 600px) {
    .mg-clips { gap: 2.4rem; }
    .mg-clip { width: 100%; }
    .mg-clip--left { transform: rotate(-.8deg); }
    .mg-clip--right { transform: rotate(.7deg); }
    .mg-clip__sheet { padding: 2rem 1.35rem 2.4rem; }
    .mg-clip__no { font-size: 5.5rem; }
}

/* ---------- Style guide (dress code): a pull quote and paint-chip swatches ---------- */
.mg-style__quote { position: relative; max-width: 34rem; margin: 0 auto; padding-top: 2.6rem; }
.mg-style__mark {
    position: absolute;
    top: -.4rem;
    left: 50%;
    transform: translateX(-50%);
    font: 700 6.5rem/1 Georgia, 'Times New Roman', serif;
    color: var(--accent);
    opacity: .9;
}
.mg-style__quote p {
    font: italic 600 1.55rem/1.4 var(--ff-display);
    color: var(--ink);
    text-wrap: balance;
}
.mg-chips {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 2.5rem auto 0;
}
.mg-chip {
    width: 6.7rem;
    background: #fff;
    padding: .5rem .5rem .75rem;
    box-shadow: 0 8px 18px rgba(42, 29, 26, .16), 0 1px 2px rgba(42, 29, 26, .2);
    text-align: left;
}
.mg-chip:nth-child(odd)  { transform: rotate(-1.5deg); }
.mg-chip:nth-child(even) { transform: rotate(1.2deg) translateY(.35rem); }
.mg-chip__color { display: block; height: 7.2rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.mg-chip__label { display: block; margin-top: .6rem; }
.mg-chip__label b { display: block; font: 700 .76rem/1 var(--ff-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.mg-chip__label span { display: block; margin-top: .35rem; font: 500 .95rem/1 var(--ff-body); letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Good to know: the editors' tip boxes ---------- */
.mg-tips__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    max-width: 880px;
    margin: 2.5rem auto 0;
    text-align: left;
}
.mg-tip {
    position: relative;
    padding: 1.6rem 1.5rem 1.7rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 4px solid var(--ink);
}
.mg-tip::after {
    content: '';
    position: absolute;
    inset: .35rem;
    border: 1px solid var(--line);
    pointer-events: none;
}
.mg-tip__icon { position: absolute; top: 1.4rem; right: 1.4rem; width: 1.7rem; height: 1.7rem; color: var(--accent); }
.mg-tip__kicker { margin-bottom: .6rem; font: 700 .8rem/1 var(--ff-body); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.mg-tip__title { padding-right: 2.4rem; margin-bottom: .5rem; font: italic 600 1.4rem/1.2 var(--ff-display); color: var(--ink); }
.mg-tip__text { font-size: 1.02rem; line-height: 1.6; color: var(--body); }

/* ---------- Photo essay: a magazine spread of mixed-size photos ----------
   The shared grid, re-flowed on six columns: a big picture, two beside it,
   then a pair, repeating. Each photo carries a figure number. Used for the
   host's own photos ("Foto reportaža") and for the guests' photo gallery,
   both on the invitation page and on the full gallery page (whose own
   "first photo featured" rule is outranked here). */
:is(.mg-gallery, .mg-gallery-upload) .gg-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(4.6rem, 7vw);
    grid-auto-flow: dense;
    gap: .5rem;
    counter-reset: mg-fig;
}
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item-wrap { aspect-ratio: auto; counter-increment: mg-fig; }
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item { border-radius: 0; aspect-ratio: auto; height: 100%; }
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item-wrap:nth-child(5n + 1) { grid-column: span 4; grid-row: span 3; }
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item-wrap:nth-child(5n + 2) { grid-column: span 2; grid-row: span 2; }
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item-wrap:nth-child(5n + 3) { grid-column: span 2; grid-row: span 1; }
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item-wrap:nth-child(5n + 4),
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item-wrap:nth-child(5n + 5) { grid-column: span 3; grid-row: span 2; }
:is(.mg-gallery, .mg-gallery-upload) .gg-grid .gg-item::before {
    content: counter(mg-fig, decimal-leading-zero);
    position: absolute;
    left: .6rem;
    bottom: .5rem;
    z-index: 2;
    font: 700 .8rem/1 var(--ff-body);
    letter-spacing: .22em;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .65);
    pointer-events: none;
}
@media (max-width: 640px) {
    :is(.mg-gallery, .mg-gallery-upload) .gg-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 3.9rem; gap: .35rem; }
}

/* ---------- In this issue (program): a contents list ---------- */
.mg-toc {
    list-style: none;
    max-width: 520px;
    margin: 0 auto;
    text-align: left;
    border-top: 1px solid var(--ink);
    counter-reset: mg-toc 2;
}
.mg-toc__row {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: 1.05rem 0;
    counter-increment: mg-toc;
    border-bottom: 1px solid var(--line);
}
/* the page number, as in a contents list */
.mg-toc__row::before {
    content: counter(mg-toc, decimal-leading-zero);
    flex: 0 0 2rem;
    font: italic 700 1.15rem/1 var(--ff-display);
    color: var(--accent);
    font-variant-numeric: lining-nums tabular-nums;
}
.mg-toc__act {
    font: 700 1.1rem/1.2 var(--ff-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    min-width: 0;
}
.mg-toc__where {
    display: block;
    margin-top: .3rem;
    font: 400 .95rem/1.4 var(--ff-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}
.mg-toc__where a { color: var(--accent); }
.mg-toc__dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--line); transform: translateY(-.25rem); }
.mg-toc__time {
    font: italic 600 1.4rem/1 var(--ff-display);
    color: var(--accent);
    font-variant-numeric: lining-nums tabular-nums;
}

/* ---------- Where to find us (map) ---------- */
.mg-location__map iframe {
    width: 100%;
    height: 300px;
    display: block;
    border: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    filter: grayscale(.35) sepia(.12);
}
.mg-location__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.4rem 1.5rem;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    text-align: left;
}
.mg-location__card b {
    display: block;
    font: 700 .8rem/1 var(--ff-body);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .4rem;
}
.mg-location__name { font: italic 600 1.7rem/1.1 var(--ff-display); }
.mg-location__address { font: 400 .95rem/1.4 var(--ff-body); color: var(--body); margin-top: .25rem; }
.mg-location__card .mg-btn { flex-shrink: 0; width: auto; margin-top: 0; }

@media (max-width: 520px) {
    .mg-location__card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Album / closing ---------- */
.mg-album { padding: 5rem 1.25rem 6rem; text-align: center; }
.mg-album__text { margin-bottom: 1.5rem; }
.mg-closing { padding: 3rem 1.25rem; text-align: center; }
.mg-closing p { font: italic 600 1.7rem/1.2 var(--ff-display); color: var(--ink); }

/* ---------- Gallery upload ---------- */
.mg-gallery-upload .gu-form {
    max-width: 620px;
    padding: 0 1.5rem;
    background: none;
    border: none;
    box-shadow: none;
}

/* ---------- Letters to the editor (<x-guest-wall-slider>) ----------
   Each wish is a letter on lined paper with a postage stamp in the corner. */
.mg-guest-wall .gws-swiper {
    position: relative;
    max-width: 560px;
    padding-top: 2.25rem;
    background-color: var(--card);
    background-image: repeating-linear-gradient(transparent 0 calc(2rem - 1px), color-mix(in srgb, var(--ink) 10%, transparent) calc(2rem - 1px) 2rem);
    border: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(42, 29, 26, .12);
}
/* the stamp: a perforated square with a big italic 18 */
.mg-guest-wall .gws-swiper::after {
    content: '18';
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 3;
    width: 3.4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    font: italic 700 1.7rem/1 var(--ff-display);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 9%, #fff);
    border: 3px solid #fff;
    outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: -7px;
    box-shadow: 0 1px 4px rgba(42, 29, 26, .3);
    transform: rotate(4deg);
    pointer-events: none;
}
.mg-guest-wall .gws-quote-mark { font-family: var(--ff-display); color: var(--accent); opacity: 1; }
.mg-guest-wall .gws-text { font-family: var(--ff-display); font-style: italic; font-weight: 600; font-size: 1.25rem; line-height: 2rem; color: var(--ink); }
.mg-guest-wall .gws-name { font-family: var(--ff-body); letter-spacing: .2em; color: var(--accent); }
.mg-guest-wall .gws-slide { padding-bottom: 1.5rem; }
.mg-guest-wall .gws-swiper .swiper-pagination { padding-bottom: 1.25rem; }

/* ---------- RSVP: a cut-out subscription coupon ----------
   The shared editorial reply-card engine (components/editorial-rsvp-form, erf-*)
   driven by the --erf-* variables below and restyled as a coupon: a dashed
   cut line with scissors, check-box answers, a form to fill in with lined
   fields and the typed answers in italic serif. */
:root {
    --erf-ink: var(--ink);
    --erf-accent: var(--accent);
    --erf-line: var(--line);
    --erf-panel: var(--card);
    --erf-on-accent: #fff;
}

.mg-rsvp .erf-wrap { max-width: 34rem; padding: 0 1rem; }
.mg-rsvp .erf-card {
    position: relative;
    padding: 3rem 2.25rem 2.5rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 6px solid var(--accent);
    box-shadow: 0 18px 40px rgba(42, 29, 26, .12);
    text-align: left;
}
/* the cut line, with the scissors sitting on it */
.mg-rsvp .erf-card::before {
    content: '';
    position: absolute;
    inset: .7rem;
    border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent);
    pointer-events: none;
}
.mg-rsvp .erf-card::after {
    content: '\2702';
    position: absolute;
    top: .1rem;
    left: 1.6rem;
    padding: 0 .4rem;
    background: var(--card);
    font: 400 1.35rem/1 var(--ff-body);
    color: var(--ink);
}

.mg-rsvp .erf-deadline { color: var(--ink); opacity: 1; font: italic 600 1.05rem/1.5 var(--ff-display); }
.mg-rsvp .erf-deadline__days { font-style: normal; color: var(--accent); }

/* the answer: two check boxes */
.mg-rsvp .erf-cta { gap: 0; margin-bottom: 1.75rem; border-top: 1px solid var(--ink); }
.mg-rsvp .erf-btn-attend,
.mg-rsvp .erf-btn-decline {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem .25rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    opacity: 1;
    font: 700 .86rem/1.2 var(--ff-body);
    letter-spacing: .14em;
    text-align: left;
}
.mg-rsvp .erf-btn-attend::before,
.mg-rsvp .erf-btn-decline::before {
    content: '';
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid var(--ink);
    background: #fff;
    transition: background .15s;
}
.mg-rsvp .erf-btn-attend.active::before,
.mg-rsvp .erf-btn-decline.active::before {
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
    border-color: var(--accent);
}
.mg-rsvp .erf-btn-attend.active,
.mg-rsvp .erf-btn-decline.active { background: transparent; color: var(--accent); border-color: var(--line); }
.mg-rsvp .erf-btn-decline:hover { border-color: var(--line); color: var(--accent); }

/* the form: small-caps labels over lined fields, answers typed in italic serif */
.mg-rsvp .erf-group label {
    font: 700 .82rem/1 var(--ff-body);
    letter-spacing: .2em;
    color: var(--muted);
    opacity: 1;
}
.mg-rsvp .erf-group input[type="text"],
.mg-rsvp .erf-group input[type="email"],
.mg-rsvp .erf-group textarea {
    border-bottom: 1px solid var(--ink);
    padding: .55rem .1rem;
    font: italic 600 1.2rem/1.4 var(--ff-display);
    color: var(--ink);
}
.mg-rsvp .erf-group input::placeholder,
.mg-rsvp .erf-group textarea::placeholder { color: color-mix(in srgb, var(--ink) 38%, transparent); }
.mg-rsvp .erf-group input:focus,
.mg-rsvp .erf-group textarea:focus { border-bottom-color: var(--accent); }
/* the wishes box is a ruled lined page */
.mg-rsvp .erf-group textarea {
    border-bottom: 0;
    line-height: 2rem;
    padding: 0 .1rem;
    background-image: repeating-linear-gradient(transparent 0 calc(2rem - 1px), color-mix(in srgb, var(--ink) 35%, transparent) calc(2rem - 1px) 2rem);
}
.mg-rsvp .erf-error { color: var(--accent-deep); }

/* seat count: boxed numeral */
.mg-rsvp .erf-stepper { border: 1px solid var(--ink); max-width: 11rem; }
.mg-rsvp .erf-stepper__btn { width: 2.75rem; font: 500 1.3rem/1 var(--ff-body); }
.mg-rsvp .erf-stepper input[type="number"] {
    font: italic 700 1.4rem/1 var(--ff-display);
    border-left-color: var(--ink);
    border-right-color: var(--ink);
}

.mg-rsvp .erf-submit {
    border-radius: var(--btn-radius);
    font: 700 .85rem/1 var(--ff-body);
    letter-spacing: .22em;
}
.mg-rsvp .erf-submit:hover { background: var(--accent-deep); opacity: 1; }

.mg-rsvp .erf-thank-you { background: color-mix(in srgb, var(--accent) 8%, #fff); border-color: var(--accent-soft); }
.mg-rsvp .erf-thank-you__text { font: italic 600 1.2rem/1.5 var(--ff-display); }
.mg-rsvp .erf-recaptcha-notice { max-width: 34rem; margin: 1.25rem auto 0; padding: 0 1rem; font-size: .75rem; color: var(--muted); }

@media (max-width: 500px) {
    .mg-rsvp .erf-card { padding: 2.75rem 1.5rem 2.25rem; }
}

/* ---------- Buttons ---------- */
.mg-btn {
    display: block;
    width: 100%;
    padding: .95rem 1.75rem;
    background: var(--accent);
    color: #fff;
    font: 700 .8rem/1 var(--ff-body);
    letter-spacing: .22em;
    text-transform: uppercase;
    border: 1px solid var(--accent);
    border-radius: var(--btn-radius);
    cursor: pointer;
    margin-top: .5rem;
    transition: background .15s, border-color .15s, transform .15s;
}
.mg-btn:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}
.mg-btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.mg-btn--outline:hover { background: var(--ink); border-color: var(--ink); }
.mg-album .mg-btn { display: inline-block; width: auto; }

/* ---------- Footer: the colophon ---------- */
.mg-footer {
    padding: 3.5rem 1.25rem 3.5rem;
    text-align: center;
    background: var(--paper);
    border-top: 3px double var(--ink);
}
.mg-footer__colophon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    max-width: 100%;
}
.mg-footer__code { display: flex; gap: 2px; width: 180px; max-width: 100%; height: 36px; }
.mg-footer__code i { display: block; background: var(--ink); }
.mg-footer__name { font: italic 600 1.9rem/1 var(--ff-display); color: var(--ink); overflow-wrap: anywhere; }
.mg-footer__meta { font: 700 .8rem/1 var(--ff-body); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.mg-footer__signoff { max-width: 22rem; margin: 1.5rem auto 1.25rem; font: italic 600 1.25rem/1.5 var(--ff-display); color: var(--ink); }
.mg-footer__cal { display: inline-flex; width: auto; align-items: center; gap: .5rem; }
.mg-footer__cal-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Hairline insurance for the display serif ----------
   Bodoni's thinnest strokes (the first stem of an "M", the left of a "U") can
   drop below a device pixel on a phone and disappear. A hairline of text stroke
   in the text's own colour thickens every stroke a touch, evenly, so none of
   them vanishes. Bigger type gets a little more. */
.mg-inside__name,
.mg-section-title,
.mg-cover__name,
.mg-cover__mast,
.mg-clip__no,
.mg-og__date { -webkit-text-stroke-width: .022em; }
.mg-inside__letter,
.mg-inside__facts dd,
.mg-cover__lines,
.mg-clip__title,
.mg-style__quote p,
.mg-tip__title,
.mg-toc__time,
.mg-toc__row::before,
.mg-location__name,
.mg-closing p,
.mg-footer__name,
.mg-footer__signoff,
.mg-countdown__number,
.mg-guest-wall .gws-text,
.mg-rsvp .erf-deadline,
.mg-rsvp .erf-thank-you__text,
.mg-rsvp .erf-group input[type="text"],
.mg-rsvp .erf-group input[type="email"],
.mg-rsvp .erf-group textarea { -webkit-text-stroke-width: .014em; }

/* the small sans lines set inside the big display text must not inherit its stroke */
.mg-inside__name span,
.mg-cover__name small,
.mg-cover__lines b { -webkit-text-stroke-width: 0; }

/* ---------- Floating topbar: a ribbon bookmark hanging from the page's top edge ----------
   One look at every width (no row of links on desktop): the ribbon sits at the
   top-right of the page column and opens a contents-list card. */
.mg-topbar {
    position: fixed;
    top: 0;
    left: 50%;
    width: min(100%, var(--mg-page));
    transform: translateX(-50%);
    z-index: 200;
    padding: 0 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    pointer-events: none;
}
.mg-topbar > * { pointer-events: auto; }
.mg-topbar__toggle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 2.9rem;
    height: 4.1rem;
    padding-top: 1.05rem;
    border: 0;
    background: var(--accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    cursor: pointer;
}
.mg-topbar__toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
}
.mg-topbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mg-topbar__toggle.is-active span:nth-child(2) { opacity: 0; }
.mg-topbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mg-topbar__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* the menu opens as a contents list on a paper card */
.mg-topbar__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 4.4rem;
    left: 1rem;
    right: 1rem;
    padding: .35rem 1.1rem;
    background: var(--card);
    border: 1px solid var(--ink);
    border-top-width: 4px;
    box-shadow: 0 14px 30px rgba(42, 29, 26, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.mg-topbar__links.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mg-topbar__links a {
    text-align: left;
    padding: 1rem .1rem;
    font: 700 .88rem/1 var(--ff-body);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    transition: color .2s;
}
.mg-topbar__links a:last-child { border-bottom: 0; }
.mg-topbar__links a:hover { color: var(--accent); text-decoration: none; }

/* Demo-only Basic/Standard switch + close + cart badge — shared look defined
   globally in layouts/theme.blade.php, positioned here at opposite bottom
   corners at every screen width. */
.dpb-switch,
.dpb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
}
.dpb-fab { right: 1rem; }
.dpb-close { right: 4rem; }
.dpb-switch {
    left: 1rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .25rem;
}
.dpb-switch a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .9rem;
    font-size: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 500px) {
    .mg-countdown__timer { gap: .45rem; flex-wrap: nowrap; }
    .mg-countdown__unit { min-width: 0; flex: 1; padding: .9rem .3rem .75rem; }
    .mg-countdown__number { font-size: 1.9rem; }
}

@media (max-width: 600px) {
    .mg-countdown,
    .mg-audio,
    .mg-story,
    .mg-gallery,
    .mg-program,
    .mg-dress-code,
    .mg-good-to-know,
    .mg-location,
    .mg-accommodation,
    .mg-guest-wall,
    .mg-gallery-upload,
    .mg-album,
    .mg-closing,
    .mg-rsvp,
    .mg-footer { padding-left: 1rem; padding-right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .mg-gate *, .mg-cover::before, .mg-cover__sticker::after { animation: none !important; }
    .mg-gate__hint { animation: none; }
    .mg-cover, .mg-gate { transition-duration: .01ms; transition-delay: 0s; }
}