:root {
    color-scheme: dark;
    --ink: #fff7fa;
    --muted: #e7b7c8;
    --pink: #ef7fa8;
    --deep-pink: #b73363;
    --maroon: #4a0f27;
    --dark-maroon: #200812;
    --panel: rgb(73 13 38 / 72%);
    --edge: rgb(255 179 207 / 20%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    background: var(--dark-maroon);
}

body {
    min-height: 100svh;
    margin: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgb(190 48 99 / 32%), transparent 32rem),
        radial-gradient(circle at 90% 88%, rgb(239 127 168 / 18%), transparent 30rem),
        linear-gradient(145deg, #210711 0%, #4a0d27 54%, #260914 100%);
    color: var(--ink);
}

body::before,
body::after {
    position: fixed;
    border: 1px solid rgb(255 178 205 / 12%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

body::before {
    width: min(55rem, 78vw);
    aspect-ratio: 1;
    top: -34rem;
    right: -18rem;
}

body::after {
    width: min(38rem, 64vw);
    aspect-ratio: 1;
    bottom: -27rem;
    left: -15rem;
}

.page {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: clamp(1.25rem, 5vw, 4rem);
}

.profile {
    position: relative;
    width: min(100%, 61rem);
    min-height: min(72vh, 39rem);
    padding: clamp(2rem, 7vw, 6.5rem);
    overflow: hidden;
    border: 1px solid var(--edge);
    border-radius: clamp(1.5rem, 3vw, 2.75rem);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 7%), transparent 45%),
        var(--panel);
    box-shadow: 0 2rem 6rem rgb(10 1 5 / 44%);
    isolation: isolate;
}

.profile::after {
    position: absolute;
    z-index: -1;
    width: clamp(12rem, 32vw, 24rem);
    aspect-ratio: 1;
    right: clamp(-8rem, -9vw, -4rem);
    bottom: clamp(-10rem, -12vw, -5rem);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--deep-pink), var(--maroon));
    box-shadow: 0 0 7rem rgb(239 127 168 / 18%);
    content: "";
}

.monogram {
    position: absolute;
    top: clamp(1.5rem, 4vw, 3rem);
    right: clamp(1.5rem, 4vw, 3rem);
    display: grid;
    width: 3.25rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgb(255 189 214 / 34%);
    border-radius: 50%;
    color: var(--muted);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
}

.profession {
    margin: 0 0 clamp(3.5rem, 10vh, 7rem);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1 {
    max-width: 13ch;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.9rem, 8.2vw, 7.4rem);
    font-weight: 400;
    letter-spacing: -0.055em;
    line-height: 0.91;
}

h1 span {
    display: block;
}

h1 small {
    display: inline-block;
    color: var(--pink);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.18em;
    font-weight: 650;
    letter-spacing: 0.08em;
    vertical-align: 0.4em;
    white-space: nowrap;
}

.accent {
    width: clamp(4rem, 9vw, 7rem);
    height: 0.22rem;
    margin-top: clamp(2rem, 5vw, 3.5rem);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pink), transparent);
}

@media (max-width: 560px) {
    .profile {
        min-height: 76svh;
        padding: 2rem 1.7rem;
    }

    .profession {
        margin-top: 4.5rem;
        margin-bottom: 4rem;
    }

    h1 {
        font-size: clamp(3rem, 16vw, 5rem);
        line-height: 0.94;
    }

    h1 small {
        display: block;
        margin-top: 1.4rem;
        font-size: 0.22em;
        vertical-align: initial;
    }
}