/* =========================================================
   Dr. Ruby Holland — landing card
   Palette: blush / lilac / mist pastels, plum + champagne accents
   Type:    Fraunces (display) + Karla (body & UI)
   ========================================================= */

:root {
    --ink:        #2f2a33;
    --ink-soft:   #6e6676;
    --ink-faint:  #9a93a2;

    --plum:       #6b2d96;
    --plum-deep:  #57237b;
    --plum-soft:  #d9c8ec;

    --gold:       #c9a15e;
    --gold-deep:  #b98f4b;

    --blush:      #f7e9ec;
    --lilac:      #ece7f6;
    --mist:       #e2edf3;
    --shell:      #faf7f8;

    --card:       #ffffff;
    --hairline:   rgba(47, 42, 51, 0.09);

    --r-card:     30px;
    --r-btn:      16px;

    --shadow-card: 0 34px 70px -34px rgba(58, 42, 66, 0.34),
                   0 3px 12px -6px rgba(58, 42, 66, 0.12);
    --shadow-lift: 0 14px 24px -14px rgba(58, 42, 66, 0.45);
}

/* ---------- reset ---------- */

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

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

body,
h1,
p { margin: 0; }

img {
    display: block;
    max-width: 100%;
    border: 0;
}

a { text-decoration: none; color: inherit; }

/* ---------- page ---------- */

body {
    min-height: 100vh;
    padding: clamp(20px, 5vw, 56px) clamp(16px, 4vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    line-height: 1.6;

    background-color: var(--shell);
    background-image:
        radial-gradient(58% 42% at 10% 4%,   rgba(247, 233, 236, 0.95), rgba(247, 233, 236, 0) 70%),
        radial-gradient(54% 44% at 92% 18%,  rgba(236, 231, 246, 0.92), rgba(236, 231, 246, 0) 72%),
        radial-gradient(78% 58% at 50% 104%, rgba(226, 237, 243, 0.95), rgba(226, 237, 243, 0) 74%);
    background-attachment: fixed;
}

.page { width: 100%; }

/* ---------- card ---------- */

.card {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- logo header ---------- */

.brandbar {
    padding: clamp(26px, 5vw, 36px) 24px clamp(22px, 4vw, 30px);
    display: flex;
    justify-content: center;
}

.brandbar__logo {
    width: clamp(180px, 56%, 250px);
    height: auto;
}

/* ---------- banner ---------- */

.banner {
    position: relative;
    line-height: 0;
    border-top: 1px solid var(--hairline);

    /* Pastel wash, visible only if no banner image is found. */
    background-color: var(--lilac);
    background-image: linear-gradient(120deg, var(--blush) 0%, var(--lilac) 52%, var(--mist) 100%);
}

/* Height comes from the image itself, so the whole picture is always visible
   and the band grows or shrinks with it. */
.banner__img {
    display: block;
    width: 100%;
    height: auto;
}

/* If neither image path resolved, the img is removed and this keeps the
   pastel band from collapsing to nothing. */
.banner:empty { height: clamp(170px, 34vw, 250px); }

/* soft plum hairline that closes the banner band */
.banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(107, 45, 150, 0)   0%,
        var(--plum-soft)       18%,
        var(--plum)            50%,
        var(--plum-soft)       82%,
        rgba(107, 45, 150, 0) 100%);
}

/* ---------- body ---------- */

.card__body {
    padding: clamp(30px, 5vw, 42px) clamp(24px, 6vw, 56px) clamp(30px, 5vw, 40px);
    text-align: center;
}

.eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--plum);
}

.title {
    margin-top: 12px;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
    font-size: clamp(1.7rem, 5.4vw, 2.3rem);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.012em;
    color: var(--ink);
}

.lede {
    max-width: 42ch;
    margin: 14px auto 0;
    font-size: 1rem;
    color: var(--ink-soft);
}

/* ---------- actions ---------- */

.actions {
    margin: clamp(26px, 4vw, 34px) auto 0;
    max-width: 470px;
    display: grid;
    gap: 14px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 16px 24px;
    border: 1.5px solid var(--plum-deep);
    border-radius: var(--r-btn);
    background: var(--lilac);
    color: var(--plum-deep);

    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: center;

    transition: transform 0.22s ease, background-color 0.22s ease,
                box-shadow 0.22s ease, border-color 0.22s ease;
}

.btn:hover,
.btn:focus-visible {
    background: #e3d9f3;
    border-color: var(--plum);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.btn:active { transform: translateY(0); }

/* ---------- footer ---------- */

.card__foot {
    padding: 18px 24px 22px;
    border-top: 1px solid var(--hairline);
    text-align: center;
    background: linear-gradient(180deg, rgba(250, 247, 248, 0) 0%, rgba(250, 247, 248, 0.7) 100%);
}

.back {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    transition: color 0.22s ease;
}

.back__arrow {
    display: inline-block;
    transition: transform 0.22s ease;
}

.back:hover,
.back:focus-visible { color: var(--plum); }

.back:hover .back__arrow { transform: translateX(-4px); }

/* ---------- focus & motion ---------- */

a:focus-visible {
    outline: 2px solid var(--plum);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- small screens ---------- */

@media (max-width: 460px) {
    .lede { font-size: 0.95rem; }
}