/* Recreates the WordPress "Hello Agency" block theme front page (dark palette, Public Sans). */
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 300 900;
    font-display: fallback;
    src: url('/fonts/PublicSans-VariableFont_wght.ttf') format('truetype');
}

:root {
    --background: #202124;
    --foreground: #a7a7a7;
    --heading: #ffffff;
    --primary: #4261ee;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font-family: 'Public Sans', sans-serif;
    font-size: 16px;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
    padding: 8px 12px;
    background: var(--heading);
    color: var(--background);
}

.site-header {
    padding: 32px 16px;
}

.site-title {
    margin: 0;
    font-size: clamp(15.747px, 0.984rem + ((1vw - 3.2px) * 0.503), 24px);
    font-weight: 500;
}

.site-title a {
    color: var(--heading);
    text-decoration: none;
}

.site-title a:hover {
    color: var(--primary);
}

.hero {
    padding: 100px 24px;
    animation: fade-in-up 0.7s ease-out both;
}

.hero h2 {
    margin: 0;
    font-size: clamp(67.975px, 4.248rem + ((1vw - 3.2px) * 4.88), 148px);
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

.hero .outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--heading);
}

.hero .accent {
    margin-top: 24px;
    color: var(--primary);
}

.hero p {
    margin: 85px 0 0;
    color: var(--heading);
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.122), 16px);
    font-weight: 500;
    line-height: 1.7;
    text-transform: uppercase;
}

.hero a {
    color: var(--heading);
}

.site-footer {
    padding: 7rem 16px 3rem;
}

.site-footer .container {
    max-width: 1200px;
}

.site-footer p {
    margin: 0;
    font-size: 14px;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(50%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero {
        animation: none;
    }
}