:root {
    --ink: #120d07;
    --ink-2: #1c140b;
    --copper: #c06a26;
    --copper-bright: #e08a3c;
    --paper: #f6f1ea;
    --blush: #f29a9a;
    --font: "Alfa Slab One", "Rockwell", "Roboto Slab", Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    min-height: 100%;
    display: grid;
    place-items: center;
    padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
    background:
    radial-gradient(circle at 50% 38%, var(--ink-2) 0, var(--ink) 62%) fixed,
    var(--ink);
    color: var(--paper);
    font-family: var(--font);
    overflow-x: hidden;
}
/* echo of the logo's copper ring, drawn faintly behind the page */
body::before {
    content: "";
    position: fixed;
    left: 50%; top: 38%;
    width: min(150vmin, 1400px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid rgba(192, 106, 38, .18);
    box-shadow: 0 0 0 clamp(14px, 3vmin, 34px) var(--ink),
                0 0 0 calc(clamp(14px, 3vmin, 34px) + 2px) rgba(192, 106, 38, .1);
    pointer-events: none;
}
main {
    position: relative;
    width: 100%;
    max-width: 34rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 5vh, 2.75rem);
}
.logo {
    width: min(78vw, 100vh, 30rem);
    min-width: 13rem;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .65));
    animation: settle .9s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes settle {
    from { opacity: 0; transform: scale(.92) rotate(-6deg); }
    to   { opacity: 1; transform: none; }
}
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}
.link {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1rem 1.5rem;
    min-height: 3.5rem;
    color: var(--copper-bright);
    text-decoration: none;
    font-size: 1.2rem;
    letter-spacing: .02em;
    background: var(--ink);
    border: 3px solid var(--copper);
    border-radius: 999px;
    box-shadow: 0 5px 0 rgba(192, 106, 38, .35);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.link svg { width: 1.6rem; height: 1.6rem; flex: none; }
.link:hover {
    background: var(--copper);
    color: var(--ink);
    transform: translateY(2px);
    box-shadow: 0 3px 0 rgba(192, 106, 38, .35);
}
.link:active { transform: translateY(5px); box-shadow: 0 0 0 rgba(192, 106, 38, .35); }
.link:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
.link.insta:hover { background: var(--blush); border-color: var(--blush); }
@media (prefers-reduced-motion: reduce) {
    .logo { animation: none; }
    .link { transition: none; }
}
@media (max-width: 30rem) {
    nav { flex-direction: column; }
    .link { flex-basis: auto; }
}