/* ── Google Fonts ──────────────────────────────────────────────
   Cormorant Garamond  — headlines & message body (elegant serif)
   Montserrat          — eyebrow & small labels (clean sans)
──────────────────────────────────────────────────────────────── */

:root
{
    --cream: #faf7f2;
    --gold: #b8955a;
    --gold-light: #d4b483;
    --text-dark: #1c1712;
    --text-mid: #4a3f32;
    --text-light: #8c7d6a;
    --border: rgba(184, 149, 90, 0.3);
}

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

html,
body
{
    margin: 0;
    padding: 0;
    background-color: var(--cream);
    color: var(--text-dark);
    min-height: 100vh;
}

body
{
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Page wrapper ── */
.page-wrapper
{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0 48px;
    background-color: var(--cream);
    background-image:
        radial-gradient(ellipse at 20% 0%, rgba(184, 149, 90, .08) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(184, 149, 90, .07) 0%, transparent 55%);
}

/* ── Ornaments ── */
.ornament
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 36px;
}

.bottom-ornament
{
    margin: 36px auto 0;
}

.ornament span
{
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-light);
    opacity: 0.6;
}

.ornament span:nth-child(2)
{
    width: 9px;
    height: 9px;
    opacity: 0.9;
}

/* ── Eyebrow ── */
.eyebrow
{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: .72rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
    text-align: center;
    margin-bottom: 18px;
}

/* ── Headline ── */
.headline
{
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    line-height: 1.15;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 0;
    letter-spacing: .01em;
}

.headline em
{
    font-style: italic;
    color: var(--gold);
    display: block;
    font-size: clamp(3.2rem, 9vw, 5.6rem);
    line-height: 1.05;
    margin-top: 4px;
}

/* ── Divider ── */
.divider
{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 28px auto 36px;
    max-width: 260px;
}

.divider-line
{
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-light), transparent);
}

.divider-diamond
{
    font-size: .55rem;
    color: var(--gold);
    line-height: 1;
}

/* ── Photo frame ── */
.photo-frame
{
    position: relative;
    margin: 0 auto 44px;
    max-width: 460px;
    width: 100%;
}

/* Elegant double-border frame effect */
.photo-frame::before,
.photo-frame::after
{
    content: '';
    position: absolute;
    border: 1px solid var(--border);
    border-radius: 2px;
    pointer-events: none;
    z-index: 2;
}

.photo-frame::before
{
    inset: -10px;
}

.photo-frame::after
{
    inset: -18px;
    border-color: rgba(184, 149, 90, .15);
}

.birthday-photo
{
    /* display: none; */
    /* Remove this line once your photo is in place */
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
    position: relative;
    z-index: 1;
}

/* Placeholder — remove this whole block once your photo is in place */
/* .photo-placeholder
{
    width: 100%;
    aspect-ratio: 4 / 5;
    background: linear-gradient(145deg, #ede8df, #ddd5c5);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
} */

.photo-placeholder span
{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* ── Message ── */
.message
{
    text-align: center;
    padding: 0 8px;
    margin-bottom: 40px;
}

.message-date
{
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 24px;
}

.message-body
{
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight: 300;
    line-height: 1.85;
    color: var(--text-mid);
    margin-bottom: 1.4em;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.message-signature
{
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 300;
    line-height: 1.9;
    color: var(--text-light);
    margin-bottom: 0;
}

.message-signature em
{
    font-style: italic;
    color: var(--gold);
}

/* ── Date badge ── */
.date-badge
{
    text-align: center;
    margin-top: 8px;
}

.date-badge-year
{
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: .95rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--gold-light);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 6px 28px;
}

/* ── Responsive ── */
@media (max-width: 575px)
{
    .page-wrapper
    {
        padding: 40px 0 36px;
    }

    .photo-frame::before
    {
        inset: -7px;
    }

    .photo-frame::after
    {
        inset: -13px;
    }
}