/* ================================================
   Wedding Atelier — Standard Wedding Theme
   Palette: cool porcelain · dusty champagne-rose · soft graphite
   Fonts:   Bodoni Moda (display) + Cinzel (eyebrows) + Cormorant Garamond
            (body) + Pinyon Script (couple names / back-cover heading)
   Style:   Fashion-editorial — a two-panel magazine hero, a numbered
            ceremony/reception spread, and a graphite back-cover close that
            bookends the hero's own accent panel. Deliberately a cooler,
            paler register than this app's other ivory/gold editorial
            wedding themes (Riviera, Noir, Minimal Luxe).
   ================================================ */

/* Cinzel draws Đ/đ as D + a floating macron (D̄). 'Cinzel Dj' is a 2-glyph
   subset of Cinzel's own Eth/eth (Ð/ð, correct crossbar, same width and
   weight axis) mapped to U+0110/U+0111, stacked in front of Cinzel so only
   those two letters come from it. Inlined so print cards get it too. */
@font-face {
    font-family: 'Cinzel Dj';
    src: url(data:font/woff;base64,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) format('woff');
    font-weight: 400 900;
    unicode-range: U+0110-0111;
}


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

:root {
    --at-ground:      #f7f5f1;
    --at-ground-soft: #efece5;
    --at-ink:         #2b2a28;
    --at-ink-soft:    #7a746c;
    --at-accent:      #b8927e;
    --at-accent-soft: #cbaa99;
    --at-accent-deep: #93715f;
    --at-line:        rgba(43, 42, 40, .14);

    --radius:     2px;
    --btn-radius: 0;

    --ff-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
    --ff-eyebrow: 'Cinzel Dj', 'Cinzel', Georgia, serif;
    --ff-body:    'Cormorant Garamond', Georgia, serif;
    --ff-script:  'Pinyon Script', cursive;

    /* Shared engines (editorial-story-timeline / -dress-code / -good-to-know /
       -accommodation / -guest-wall / -rsvp-form) read these — see each
       component's own doc comment. Kept here, next to the rest of the
       palette, so a future theme adopting one of them only has to copy this
       block and change the values. */
    --est-ink: var(--at-ink); --est-accent: var(--at-accent-deep); --est-line: var(--at-line);
    --est-numeral-font: var(--ff-display); --est-title-font: var(--ff-display);

    --edc-ink: var(--at-ink); --edc-line: var(--at-line);

    --egk-ink: var(--at-ink); --egk-accent: var(--at-accent-deep); --egk-line: var(--at-line);
    --egk-numeral-font: var(--ff-display);

    --eac-ink: var(--at-ink); --eac-accent: var(--at-accent); --eac-line: var(--at-line);
    --eac-panel: var(--at-ground-soft); --eac-title-font: var(--ff-display);

    --egw-ink: var(--at-ink); --egw-accent: var(--at-accent-deep); --egw-line: var(--at-line);
    --egw-title-font: var(--ff-display);

    --erf-ink: var(--at-ink); --erf-accent: var(--at-accent-deep); --erf-line: var(--at-line);
    --erf-panel: var(--at-ground-soft); --erf-on-accent: #fdfcfa;
}

.at-page {
    position: relative;
    background: var(--at-ground);
    color: var(--at-ink);
    font-family: var(--ff-body);
    overflow-x: clip;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

.at-page ::selection { background: color-mix(in srgb, var(--at-accent) 25%, transparent); color: var(--at-ink); }

.at-container {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.at-container--sm { max-width: 30rem; }

.at-rule {
    display: block;
    height: 1px;
    width: 5rem;
    margin: 1.25rem auto;
    background: linear-gradient(90deg, transparent, var(--at-line) 18%, var(--at-line) 82%, transparent);
}

.at-rule--sm { width: 3.5rem; }

.at-eyebrow {
    font-family: var(--ff-eyebrow);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--at-accent-deep);
    margin-bottom: .6rem;
}

.at-section-title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 5vw, 2.3rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--at-ink);
}

.at-pill-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding: .7rem 1.5rem;
    border: 1px solid var(--at-accent);
    font-family: var(--ff-eyebrow);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--at-ink);
    background: transparent;
    transition: background .3s ease, color .3s ease;
}

.at-pill-link:hover {
    background: var(--at-accent);
    color: #fff;
}

/* ================================================
   ENVELOPE INTRO — fading fashion-invitation card
   ================================================ */
body.env-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

.at-envelope {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 6vh 6vw;
    background: var(--at-ink);
    cursor: pointer;
    transition: opacity .6s ease, visibility .6s ease;
}

body.env-has-envelope .at-envelope { display: flex; }

.at-envelope.is-open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.at-envelope__card {
    width: min(24rem, 88vw);
    padding: 3rem 2rem;
    text-align: center;
    background: var(--at-ground);
    border: 1px solid rgba(255, 255, 255, .16);
    outline: 1px solid rgba(0, 0, 0, .5);
    outline-offset: -10px;
    transition: opacity .6s ease, transform .6s ease;
}

.at-envelope.is-open .at-envelope__card {
    opacity: 0;
    transform: translateY(-16px) scale(.98);
}

.at-envelope__mono {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--ff-display);
    font-size: 1.3rem;
    letter-spacing: .06em;
    color: var(--at-accent-deep);
    margin-bottom: 1.5rem;
}

.at-envelope__mono-rule {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: currentColor;
    opacity: .5;
    transform: rotate(14deg);
}

.at-envelope__kicker {
    font-family: var(--ff-eyebrow);
    font-size: .62rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--at-ink-soft);
    margin-bottom: 1rem;
}

.at-envelope__names {
    font-family: var(--ff-script);
    font-size: clamp(2.2rem, 9vw, 2.75rem);
    color: var(--at-ink);
}

.at-envelope__date {
    font-family: var(--ff-eyebrow);
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--at-ink-soft);
}

.at-envelope__cta {
    margin-top: 1.75rem;
    display: inline-block;
    font-family: var(--ff-eyebrow);
    font-size: .64rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--at-ink);
    padding: .7rem 1.75rem;
    border: 1px solid var(--at-accent);
}

/* ================================================
   HERO
   ================================================ */
.at-hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.at-hero__accent {
    background: var(--at-ink);
    padding: 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-hero__accent-eyebrow {
    font-family: var(--ff-eyebrow);
    font-size: .64rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--at-accent-soft);
}

.at-hero__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem 1.5rem 4rem;
    text-align: center;
}

.at-hero__names {
    font-family: var(--ff-script);
    font-size: clamp(2.4rem, 11vw, 3.75rem);
    line-height: 1.05;
    color: var(--at-ink);
    margin: .5rem 0 2rem;
}

.at-hero__amp {
    display: inline-block;
    font-family: var(--ff-body);
    font-style: italic;
    font-size: .7em;
    opacity: .7;
    margin: 0 .15em;
}

.at-hero__frame {
    width: min(78vw, 22rem);
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    padding: .5rem;
    border: 1px solid var(--at-line);
    background: var(--at-ground-soft);
}

.at-hero__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.at-hero__sub {
    max-width: 26rem;
    margin: 2rem auto 0;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.8;
    color: var(--at-ink-soft);
}

.at-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.75rem;
    font-family: var(--ff-eyebrow);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--at-accent-deep);
}

.at-hero__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

@media (min-width: 860px) {
    .at-hero {
        flex-direction: row;
        align-items: stretch;
    }

    .at-hero__accent {
        flex: 0 0 5rem;
        padding: 3rem 0;
    }

    .at-hero__accent-eyebrow {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .at-hero__content {
        padding: 4rem 3rem;
    }
}

/* ================================================
   EDITORIAL NOTE
   ================================================ */
.at-editorial {
    padding: 6.5rem 0;
    text-align: center;
}

.at-editorial__text {
    font-size: 1.15rem;
    line-height: 1.95;
    color: var(--at-ink-soft);
    max-width: 30rem;
    margin: 0 auto;
}

/* ================================================
   COUNTDOWN
   ================================================ */
.at-countdown { padding: 6rem 0; text-align: center; }

.at-countdown__row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .85rem;
    margin-top: 2.5rem;
}

.at-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: .5rem; }

.at-countdown__num {
    font-family: var(--ff-display);
    font-size: clamp(2rem, 7vw, 2.75rem);
    color: var(--at-ink);
}

.at-countdown__label {
    font-family: var(--ff-eyebrow);
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--at-ink-soft);
}

.at-countdown__sep {
    font-family: var(--ff-display);
    font-size: clamp(1.4rem, 5vw, 2rem);
    color: var(--at-line);
    align-self: flex-start;
    margin-top: .15em;
}

/* ================================================
   SCHEDULE
   ================================================ */
.at-schedule { padding: 6rem 0; }

.at-schedule__list {
    margin-top: 2.5rem;
}

.at-schedule__row {
    display: flex;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--at-line);
    text-align: left;
}

.at-schedule__row:last-child {
    border-bottom: 1px solid var(--at-line);
}

.at-schedule__index {
    flex: none;
    font-family: var(--ff-display);
    font-size: 1.6rem;
    color: var(--at-accent);
    line-height: 1;
}

.at-schedule__time {
    font-family: var(--ff-eyebrow);
    font-size: .62rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--at-accent-deep);
    margin-bottom: .4rem;
}

.at-schedule__title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.3rem;
}

.at-schedule__loc {
    margin-top: .35rem;
    font-size: .95rem;
    color: var(--at-ink-soft);
}

/* ================================================
   GALLERY (shared <x-gallery-grid> reskin)
   ================================================ */
.at-wedding-party { padding: 6rem 0; text-align: center; }
.at-gallery { padding: 6rem 0; text-align: center; }
.at-gallery .gg-item { border-radius: 0; }

/* ================================================
   VENUE
   ================================================ */
.at-venue { padding: 6rem 0; text-align: center; }

.at-venue__address {
    font-size: 1rem;
    color: var(--at-ink-soft);
    margin-bottom: 1.5rem;
}

.at-venue__map {
    border: 1px solid var(--at-line);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.at-venue__map iframe { width: 100%; height: 100%; border: 0; }

/* ================================================
   DRESS CODE / GOOD TO KNOW / ACCOMMODATION /
   GALLERY UPLOAD / GUEST WALL / ALBUM — shared padding rhythm
   ================================================ */
.at-dress-code,
.at-good-to-know,
.at-accommodation,
.at-gallery-upload,
.at-guest-wall,
.at-album { padding: 6rem 0; text-align: center; }

.at-album__sub { color: var(--at-ink-soft); margin-top: .5rem; }

/* ================================================
   RSVP (wrapper spacing only — see editorial-rsvp-form.blade.php for the
   engine's own card/field CSS, driven by the --erf-* vars above)
   ================================================ */
.at-rsvp { padding: 6rem 0; text-align: center; }

/* ================================================
   BACK COVER — bookends the hero's graphite accent panel
   ================================================ */
.at-outro {
    background: var(--at-ink);
    padding: 7rem 1.5rem;
    text-align: center;
}

.at-outro__micro {
    font-family: var(--ff-eyebrow);
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--at-accent-soft);
    margin-bottom: 1.25rem;
}

.at-outro__title {
    font-family: var(--ff-script);
    font-size: clamp(2.4rem, 9vw, 3.25rem);
    color: #fdfcfa;
}

.at-outro__text {
    margin-top: 1rem;
    font-size: .95rem;
    font-style: italic;
    color: color-mix(in srgb, #fdfcfa 70%, transparent);
}

/* ================================================
   FOOTER
   ================================================ */
.at-footer {
    padding: 6rem 1.5rem;
    text-align: center;
}

.at-footer__mono {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: var(--ff-display);
    font-size: 1.3rem;
    letter-spacing: .06em;
    color: var(--at-accent-deep);
    margin-bottom: 1.5rem;
}

.at-footer__mono-rule {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: currentColor;
    opacity: .5;
    transform: rotate(14deg);
}

.at-footer__script {
    font-family: var(--ff-script);
    font-size: clamp(2.4rem, 9vw, 3.25rem);
    color: var(--at-ink);
    margin-bottom: 1rem;
}

.at-footer__date {
    font-family: var(--ff-eyebrow);
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--at-ink-soft);
}