@font-face {
    font-family: Athletics;
    src: url("../../fonts/Athletics-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Athletics;
    src: url("../../fonts/Athletics-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Athletics;
    src: url("../../fonts/Athletics-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Athletics;
    src: url("../../fonts/Athletics-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --white: #ffffff;
    --black: #000000;
    --cream: #f3e1cb;
    --red: #d93a37;
    --page-bg: #1e1e1e;
    --font: Athletics, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --profile-height: 90vh;
    --profile-height: 90svh;
    --profile-width: min(525px, calc(100vw - 40px));
    --logo-size: clamp(112px, 15vh, 166px);
    --copy-size: clamp(16px, 2.25vh, 24px);
    --copy-line: 1.32;
    --bio-gap: clamp(12px, 2.7vh, 34px);
    --section-gap: clamp(17px, 3.8vh, 50px);
    --button-height: clamp(50px, 7.25vh, 79px);
    --button-gap: clamp(11px, 1.95vh, 21px);
    --button-font: clamp(16px, 2.25vh, 24px);
    --social-height: clamp(26px, 3.7vh, 34px);
    --social-gap: clamp(22px, 3.25vw, 31px);
}

* {
    box-sizing: border-box;
}

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

body {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    margin: 0;
    background: var(--page-bg);
    color: var(--white);
    font-family: var(--font);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

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

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--page-bg);
    background-image: url("/links/assets/img/background.webp");
    background-image: var(--background-image, url("/links/assets/img/background.webp"));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    transform: translateZ(0);
}

.background {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--page-bg);
    background-image: url("/links/assets/img/background.webp");
    background-image: var(--background-image, url("/links/assets/img/background.webp"));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    transform: translateZ(0);
}

.page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.profile {
    width: var(--profile-width);
    height: min(var(--profile-height), calc(100svh - 40px));
    max-height: var(--profile-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.intro {
    width: min(199px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
}

.logo-link {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--logo-size);
    height: var(--logo-size);
    flex: 0 0 var(--logo-size);
    border-radius: 50%;
    outline-offset: 6px;
    isolation: isolate;
}

.logo-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--red);
    z-index: -1;
}

.logo {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--logo-size);
    height: var(--logo-size);
}

.bio {
    width: 199px;
    max-width: 100%;
    margin-top: var(--bio-gap);
    text-align: center;
}

.handle,
.title,
.location {
    margin: 0;
}

.handle,
.title {
    font-size: var(--copy-size);
    line-height: var(--copy-line);
    letter-spacing: 0;
}

.handle {
    font-weight: 700;
}

.title {
    font-weight: 300;
    white-space: nowrap;
}

.location {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: calc(var(--copy-size) * var(--copy-line));
    font-size: var(--copy-size);
    line-height: var(--copy-line);
    font-weight: 300;
}

.location img {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.button-list {
    width: 100%;
    margin-top: var(--section-gap);
    display: flex;
    flex-direction: column;
    gap: var(--button-gap);
    flex: 0 1 auto;
}

.link-button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: var(--button-height);
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2.1vh, 22px) clamp(24px, 9vw, 115px);
    border-radius: 67px;
    background: var(--white);
    color: var(--black);
    font-size: var(--button-font);
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    touch-action: manipulation;
    transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.link-button:hover {
    background: #d83835;
    color: var(--white);
    opacity: 1;
}

.button-label {
    position: relative;
    z-index: 3;
}

.social-link:hover {
    opacity: 0.86;
}

.link-button:active,
.link-button.is-pressed {
    transform: scale(0.985);
}

.social-list {
    width: min(320.5818176269531px, 100%);
    height: var(--social-height);
    margin-top: var(--section-gap);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--social-gap);
    flex: 0 0 auto;
    overflow: visible;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--social-height);
    touch-action: manipulation;
    transition: transform 160ms ease, opacity 160ms ease;
}

.social-link:active,
.social-link.is-pressed {
    transform: scale(0.95);
}

.social-link img {
    display: block;
    width: auto;
    height: var(--social-height);
    max-width: calc(var(--social-height) * 1.35);
    object-fit: contain;
}

.logo-link:focus-visible,
.link-button:focus-visible,
.social-link:focus-visible {
    outline: 2px solid var(--cream);
    outline-offset: 6px;
}

@media (max-width: 640px) {
    :root {
        --profile-width: min(362px, calc(100vw - 40px));
        --logo-size: clamp(112px, 17vh, 142px);
        --copy-size: clamp(16px, 2.55vh, 18px);
        --copy-line: 1.35;
        --bio-gap: clamp(12px, 2.6vh, 22px);
        --section-gap: clamp(16px, 3.1vh, 26px);
        --button-height: clamp(50px, 7.9vh, 58px);
        --button-gap: clamp(10px, 1.8vh, 14px);
        --button-font: clamp(15px, 2.35vh, 16px);
        --social-height: clamp(26px, 4vh, 30px);
        --social-gap: clamp(18px, 6.2vw, 25px);
    }

    .page {
        padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    }

    .link-button {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 360px) {
    :root {
        --logo-size: clamp(104px, 16vh, 128px);
        --social-gap: clamp(16px, 5.6vw, 22px);
    }

    .link-button {
        white-space: normal;
    }
}

@media (max-height: 690px) {
    :root {
        --logo-size: clamp(96px, 14.5vh, 124px);
        --copy-size: 15px;
        --bio-gap: 11px;
        --section-gap: 14px;
        --button-height: 46px;
        --button-gap: 9px;
        --button-font: 14px;
        --social-height: 25px;
    }
}