@font-face {
    font-family: "North Avellion";
    src: url("north-avellion.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Navill;
    src: url("navill-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Navill;
    src: url("navill-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

* { box-sizing: border-box; }
html { min-width: 280px; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    color: #191716;
    background: linear-gradient(100deg, #fff 58%, #fffaf7 80%, #ffe4d5 100%);
    font-family: Navill, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.card {
    width: min(1080px, 100%);
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
}

.illustration { display: block; width: 112%; height: auto; }
.details { position: relative; text-align: center; padding-top: 30px; }
.wordmark { margin: 0 0 48px; font-weight: 400; }

.name {
    display: block;
    font-family: "North Avellion", cursive;
    font-size: clamp(140px, 18vw, 210px);
    font-weight: 400;
    line-height: 1;
}

.profession {
    display: block;
    margin-top: -26px;
    font-size: clamp(19px, 2.25vw, 25px);
    font-weight: 700;
    line-height: 1.4;
}

address { font-style: normal; font-size: 17px; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid #875b62; outline-offset: 6px; border-radius: 2px; }
.address { display: inline-block; }
.appointments { margin-top: 34px; font-size: 17px; line-height: 1.6; }
.appointments p { margin: 0; }
.appointments .phone-label { margin-top: 20px; font-size: 15px; }
.phone-label a { display: inline-block; padding-block: 5px; }
.phone { display: inline-block; padding: 5px 8px; font-size: 25px; }

@media (max-width: 680px) {
    body { background: linear-gradient(150deg, #fff 45%, #fffaf7 78%, #ffe4d5 100%); }
    .card { max-width: 440px; grid-template-columns: 1fr; padding: 24px 24px 42px; }
    .illustration { width: 100%; max-width: 330px; margin-inline: auto; }
    .details { padding-top: 0; margin-top: -44px; }
    .wordmark { margin-bottom: 28px; }
    .name { font-size: clamp(140px, 40vw, 166px); }
    .profession { font-size: 21px; margin-top: -20px; }
    address { font-size: 16px; }
    .appointments { margin-top: 24px; font-size: 16px; }
    .appointments .phone-label { margin-top: 14px; }
    .phone { font-size: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
    a { transition: color .15s ease; }
    a:hover { color: #875b62; }
}