:root {
    --wine: #3a101d;
    --deep: #18070d;
    --cream: #fff4f0;
    --rose: #e6aebb;
    --line: rgba(255,236,239,.22)
}

* {
    box-sizing: border-box
}

html {
    min-height: 100%;
    background: var(--deep)
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 28px 18px;
    color: var(--cream);
    font-family: Arial,sans-serif;
    background: radial-gradient(circle at 50% 0%,#5b1d31 0,#2c0c18 42%,#12050b 100%);
    user-select: none
}

.card {
    position: relative;
    width: min(100%,540px);
    padding: 38px 34px 30px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(91,30,48,.72),rgba(27,8,16,.78));
    box-shadow: 0 28px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);
    overflow: hidden
}

.card:after {
    content: "✦";
    position: absolute;
    right: 24px;
    top: 22px;
    color: var(--rose);
    font-size: 18px;
    opacity: .8
}

.portrait {
    width: 122px;
    height: 122px;
    margin: 0 auto 22px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255,220,225,.35);
    box-shadow: 0 0 0 8px rgba(255,220,225,.05),0 12px 28px rgba(0,0,0,.35)
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    -webkit-user-drag: none
}

.eyebrow {
    color: var(--rose);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase
}

h1 {
    margin: 12px 0 14px;
    font: 400 clamp(32px,7vw,50px)/1.04 Georgia,serif;
    letter-spacing: -.03em
}

h1 em {
    color: #f3c8cd;
    font-style: italic
}

.intro {
    max-width: 410px;
    margin: 0 auto 28px;
    color: #e6cfd0;
    font-size: 15px;
    line-height: 1.55
}

.links {
    display: grid;
    gap: 10px
}

.links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--cream);
    text-decoration: none;
    letter-spacing: .04em;
    background: rgba(255,236,239,.045);
    transition: transform .25s ease,background .25s ease,border-color .25s ease
}

.links a:hover,.links a:focus-visible {
    transform: translateY(-3px);
    background: rgba(242,180,195,.14);
    border-color: rgba(255,220,225,.6);
    outline: 0
}

.links b {
    font-size: 20px;
    color: var(--rose);
    font-weight: 400;
    transition: transform .25s ease
}

.links a:hover b,.links a:focus-visible b {
    transform: translateX(5px)
}

.links .support {
    margin-top: 5px;
    background: rgba(214,126,151,.18);
    border-color: rgba(235,165,182,.5)
}

footer {
    margin-top: 28px;
    color: #bd8e99;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase
}

@media(max-width: 420px) {
    .card {
        padding:30px 18px 24px
    }

    .portrait {
        width: 106px;
        height: 106px
    }

    h1 {
        font-size: 34px
    }

    .intro {
        font-size: 14px
    }

    .links a {
        min-height: 49px;
        padding-inline:15px}
}