/* ============================================================
   Jennifer & Felix — Save the Date
   "Golden Hour, Castle Estate"
   ============================================================ */

:root {
    /* Warm dark — casino */
    --paper:        #160f0a;
    --paper-2:      #1e150d;
    --paper-3:      #291a10;

    /* Text (light on dark) */
    --ink:          #f2e7d4;
    --ink-2:        #ccb9a0;
    --ink-3:        #998770;

    /* Sunset accents (brightened for dark) */
    --terracotta:   #d75f35;
    --terracotta-2: #c04e26;
    --amber:        #de9f57;
    --amber-soft:   #ecb56d;
    --gold:         #c69c62;

    /* Deep bands */
    --espresso:     #120b06;
    --espresso-2:   #0b0603;
    --cream:        #f6ecdc;

    /* Casino felt (accent) */
    --felt:         #143f2b;
    --felt-2:       #0c2c1e;

    --wrap:         640px;
    --ease:         cubic-bezier(.2, .7, .2, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: "EB Garamond", Georgia, serif;
    font-size: clamp(1.05rem, 0.6rem + 0.9vw, 1.28rem);
    line-height: 1.75;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

::selection { background: var(--terracotta); color: var(--paper); }

/* Film grain over everything */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Shared type helpers ---------- */
.display { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; }
.eyebrow {
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: 0.42em;
    font-size: 0.72rem;
    color: var(--terracotta);
}
.amp {
    font-family: "Fraunces", serif;
    font-style: italic;
    font-weight: 380;
    color: var(--amber);
}
.rule {
    display: inline-block;
    width: 46px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    vertical-align: middle;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2; /* keeps the calendar dropdown above the next section */
}
/* Mobile: photo is a full-bleed backdrop behind the text panel. */
.hero__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    animation: kenburns 16s var(--ease) forwards;
}
.hero__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@keyframes kenburns {
    from { transform: scale(1.14); }
    to   { transform: scale(1); }
}
.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(36,22,14,0) 40%, rgba(36,22,14,0.30) 100%),
        linear-gradient(to top, rgba(28,16,10,0.86) 0%, rgba(28,16,10,0.35) 34%, rgba(28,16,10,0.08) 60%, rgba(40,24,14,0.30) 100%);
}
.hero__inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 7vw 8vh;
    text-align: center;
    color: var(--cream);
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
    color: var(--amber-soft);
    margin-bottom: clamp(1.4rem, 4vw, 2.6rem);
}
.hero__eyebrow .rule { width: 34px; opacity: 0.7; }

.hero__names {
    font-family: "Fraunces", Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 340;
    font-size: clamp(3.4rem, 13vw, 9rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 40px rgba(20,10,6,0.35);
}
.hero__names .amp {
    display: block;
    font-size: 0.62em;
    line-height: 1.1;
    margin: 0.04em 0;
    color: var(--amber-soft);
}
.hero__meta {
    margin-top: clamp(1.8rem, 5vw, 3rem);
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    font-size: clamp(0.7rem, 0.5rem + 0.5vw, 0.9rem);
    color: rgba(246,236,220,0.92);
}
.hero__meta span { white-space: nowrap; }
.hero__meta .dot { color: var(--amber-soft); margin: 0 0.7em; }
.hero__place { display: block; margin-top: 0.7em; color: rgba(246,236,220,0.72); letter-spacing: 0.3em; }

/* staggered load reveal */
.hero__inner > * { opacity: 0; animation: rise 1.3s var(--ease) forwards; }
.hero__eyebrow { animation-delay: 0.25s; }
.hero__names   { animation-delay: 0.5s; }
.hero__meta    { animation-delay: 0.95s; }
@keyframes rise {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}

.hero__cue {
    position: absolute;
    left: 50%;
    bottom: 2.2rem;
    transform: translateX(-50%);
    z-index: 1;
    width: 1px;
    height: 54px;
    background: linear-gradient(to bottom, transparent, var(--amber-soft));
    opacity: 0;
    animation: rise 1.3s var(--ease) 1.4s forwards, drift 2.6s ease-in-out 2.4s infinite;
}
@keyframes drift {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.9; }
    50%      { transform: translateX(-50%) translateY(8px); opacity: 0.4; }
}

/* ---------- Add to calendar ---------- */
.hero__cal { position: relative; display: inline-block; margin-top: clamp(1.7rem, 4vw, 2.5rem); }
.cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--cream);
    background: rgba(18,11,7,0.42);
    border: 1px solid rgba(198,156,98,0.75);
    border-radius: 3px;
    padding: 0.72rem 1.25rem;
    cursor: pointer;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s;
}
.cal-btn:hover { background: var(--gold); border-color: var(--gold); color: #17100a; }
.cal-btn .chev { opacity: 0.8; transition: transform 0.25s var(--ease); }
.hero__cal.open .cal-btn .chev { transform: rotate(180deg); }

.cal-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 224px;
    background: #1a120b;
    border: 1px solid rgba(198,156,98,0.45);
    border-radius: 6px;
    box-shadow: 0 -22px 54px rgba(0,0,0,0.55);
    padding: 0.35rem;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    z-index: 50;
}
.hero__cal.open .cal-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.cal-menu a {
    display: block;
    padding: 0.62rem 0.85rem;
    font-family: "EB Garamond", Georgia, serif;
    font-size: 1.02rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.cal-menu a:hover { background: rgba(198,156,98,0.15); color: var(--amber-soft); }

/* Desktop: split the hero — photo on the left, text panel on the right,
   so the portrait photo is shown properly instead of a cropped sliver. */
@media (min-width: 900px) {
    .hero { flex-direction: row; justify-content: flex-start; }

    .hero__photo {
        position: relative;
        inset: auto;
        flex: 0 0 46%;
        height: 100svh;
    }
    .hero__media { object-position: 50% 38%; }

    /* Only a soft vignette + a warm blend toward the panel — no heavy darkening. */
    .hero__scrim {
        background:
            linear-gradient(to right, rgba(36,22,14,0) 82%, rgba(36,22,14,0.14) 100%),
            radial-gradient(130% 110% at 45% 45%, rgba(36,22,14,0) 62%, rgba(36,22,14,0.22) 100%);
    }

    .hero__panel {
        flex: 1;
        min-height: 100svh;
        justify-content: center;
        background:
            radial-gradient(120% 90% at 100% 0%, rgba(214,138,60,0.12), transparent 55%),
            linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
        border-left: 1px solid rgba(178,138,84,0.55);
    }
    .hero__inner {
        padding: 6vh 5vw;
        color: var(--ink);
    }
    .hero__eyebrow { color: var(--terracotta); }
    .hero__eyebrow .rule { opacity: 0.45; }
    .hero__names { color: var(--ink); text-shadow: none; }
    .hero__names .amp { color: var(--gold); }
    .hero__meta { color: var(--ink-2); }
    .hero__place { color: var(--ink-3); }
    .hero__cue { display: none; }

    /* Art-deco corner brackets framing the panel */
    .hero__panel::before,
    .hero__panel::after {
        content: "";
        position: absolute;
        width: 44px;
        height: 44px;
        opacity: 0.5;
        pointer-events: none;
    }
    .hero__panel::after {
        top: 28px;
        right: 28px;
        border-top: 1px solid var(--gold);
        border-right: 1px solid var(--gold);
    }
    .hero__panel::before {
        bottom: 28px;
        left: 28px;
        border-bottom: 1px solid var(--gold);
        border-left: 1px solid var(--gold);
    }
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   INVITE
   ============================================================ */
.section { padding: clamp(4.5rem, 12vw, 9rem) 7vw; }
.wrap { max-width: var(--wrap); margin: 0 auto; }

.invite { text-align: center; }
.invite__greeting {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 360;
    font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem);
    color: var(--terracotta);
    line-height: 1.2;
    margin-bottom: clamp(1.6rem, 5vw, 2.6rem);
}
.invite__title {
    font-family: "Fraunces", Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 330;
    font-size: clamp(2.4rem, 1.4rem + 4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    margin-bottom: 1.6rem;
}
.invite__body { color: var(--ink-2); }
.invite__body p + p { margin-top: 1.1rem; }

.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: clamp(2rem, 6vw, 3.2rem) auto;
    color: var(--gold);
}
.ornament__amp {
    font-family: "Fraunces", serif;
    font-style: italic;
    font-size: 2.3rem;
    line-height: 1;
    color: var(--gold);
}
.ornament__rule {
    width: clamp(36px, 11vw, 82px);
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
}
.ornament__pip {
    width: 6px;
    height: 6px;
    background: var(--gold);
    transform: rotate(45deg);
    opacity: 0.72;
    flex: none;
}

.plusone {
    margin: clamp(1.8rem, 5vw, 2.6rem) auto 0;
    max-width: 460px;
    padding: 1.15rem 1.6rem;
    border: 1px solid rgba(178,138,84,0.45);
    border-radius: 2px;
    background: rgba(214,138,60,0.07);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    line-height: 1.5;
}
.plusone__badge {
    flex: none;
    font-family: "Marcellus", serif;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--terracotta);
    border: 1px solid rgba(182,74,38,0.5);
    border-radius: 999px;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
}

.note {
    margin: 1.6rem auto 0;
    max-width: 460px;
    font-style: italic;
    color: var(--ink-3);
}

/* ============================================================
   COUNTDOWN (espresso band)
   ============================================================ */
.countdown { text-align: center; }
/* A contained felt "card table" sitting on the dark page */
.countdown__table {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(2.6rem, 6vw, 4rem) clamp(1.4rem, 5vw, 3rem);
    border-radius: 8px;
    color: var(--cream);
    background:
        radial-gradient(110% 120% at 50% -8%, rgba(222,159,87,0.16), transparent 58%),
        linear-gradient(180deg, #241812 0%, #17100a 100%);
    border: 1px solid rgba(198,156,98,0.55);
    box-shadow: 0 28px 64px rgba(0,0,0,0.5);
}
/* Inset gold hairline — the table rail */
.countdown__table::before {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(198,156,98,0.3);
    border-radius: 4px;
    pointer-events: none;
}
.countdown__table > * { position: relative; z-index: 1; }
.countdown__table .suits { margin: 0 0 clamp(1rem, 3vw, 1.4rem); }
.countdown .eyebrow { color: var(--amber-soft); }
.countdown__intro {
    font-family: "Fraunces", serif;
    font-style: italic;
    font-weight: 340;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
    margin: 1rem 0 clamp(2rem, 6vw, 3.2rem);
    color: rgba(246,236,220,0.9);
}
.clock {
    display: flex;
    justify-content: center;
    gap: clamp(0.4rem, 4vw, 2.6rem);
    max-width: 620px;
    margin: 0 auto;
}
.clock__unit { flex: 1; position: relative; }
.clock__unit + .clock__unit::before {
    content: "\2666"; /* ♦ */
    position: absolute;
    left: calc(-1 * clamp(0.2rem, 2vw, 1.3rem));
    top: 32%;
    transform: translate(-50%, -50%);
    font-size: 0.6rem;
    color: rgba(214,169,92,0.7);
}
.clock__num {
    font-family: "Fraunces", Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 330;
    font-size: clamp(2.3rem, 1rem + 6vw, 4.6rem);
    line-height: 1;
    color: var(--amber-soft);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.clock__label {
    display: block;
    margin-top: 0.7rem;
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.66rem;
    color: rgba(246,236,220,0.66);
}

/* ============================================================
   DETAILS
   ============================================================ */
.details { text-align: center; background: var(--paper-2); }
.venue-art {
    color: var(--gold);
    max-width: 460px;
    margin: clamp(1.4rem, 4vw, 2rem) auto clamp(2.6rem, 8vw, 4rem);
}
.venue-art .castle { display: block; width: 100%; height: auto; }
.details__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(2rem, 6vw, 4.5rem);
    max-width: 760px;
    margin: 0 auto;
    align-items: center;
}
.detail__label {
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.72rem;
    color: var(--terracotta);
    margin-bottom: 1rem;
}
.detail__icon { display: block; margin: 0 auto 1.1rem; color: var(--gold); }
.detail__primary {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 340;
    font-size: clamp(1.5rem, 1rem + 2vw, 2.3rem);
    line-height: 1.1;
}
.detail__secondary { color: var(--ink-2); margin-top: 0.35rem; }
.details__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(178,138,84,0.4);
}
.venue-note {
    max-width: 540px;
    margin: clamp(2.4rem, 6vw, 3.4rem) auto 0;
    color: var(--ink-3);
    font-style: italic;
    font-size: 0.96em;
    line-height: 1.6;
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing { text-align: center; }
.closing__more { color: var(--ink-2); max-width: 500px; margin: 0 auto; }
.suits {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin: clamp(1.8rem, 5vw, 2.6rem) 0;
    color: var(--gold);
    font-size: 1.05rem;
    opacity: 0.8;
}
.suits span { line-height: 1; }
.suits span:nth-child(2), .suits span:nth-child(3) { color: var(--terracotta); opacity: 0.85; }
.closing__love {
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.78rem;
    color: var(--ink-3);
    margin-bottom: 0.6rem;
}
.closing__sign {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 340;
    font-size: clamp(2rem, 1.2rem + 3.5vw, 3.6rem);
    color: var(--ink);
}
.footer {
    text-align: center;
    padding: 2.4rem 7vw 3rem;
    font-family: "Marcellus", serif;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.62rem;
    color: var(--ink-3);
    background: var(--paper-2);
}
.footer .amp { letter-spacing: 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 560px) {
    .hero__inner { padding-bottom: 12vh; }
    .details__grid { grid-template-columns: 1fr; gap: 2.6rem; }
    .details__divider { display: none; }
    .clock { gap: 0.3rem; }
    .clock__label { letter-spacing: 0.14em; }
    .plusone { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hero__media { animation: none; transform: none; }
    .hero__inner > *, .hero__cue { animation: none; opacity: 1; transform: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}