@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root {
    --ink: #202622;
    --muted: #778079;
    --cream: #f7f6f1;
    --green: #285c48;
    --green-dark: #1d4335;
    --lime: #d8ec9b;
    --orange: #e98550;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: 'DM Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.error-page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding: 46px clamp(28px, 7vw, 96px) 48px;
    background: radial-gradient(circle at 90% 10%, rgba(216, 236, 155, .48), transparent 24rem);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    color: var(--green);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: var(--green-dark);
    background: var(--lime);
    border-radius: 11px 11px 11px 3px;
    font-size: 11px;
    letter-spacing: .05em;
}

.error-content {
    width: min(100%, 600px);
    margin: auto;
}

.error-code {
    margin: 0 0 18px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
}

h1 {
    max-width: 520px;
    margin: 0;
    color: var(--green-dark);
    font-size: clamp(38px, 7vw, 72px);
    letter-spacing: -.045em;
    line-height: .98;
}

.error-content > p:not(.error-code) {
    max-width: 430px;
    margin: 24px 0 32px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.home-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    color: var(--cream);
    background: var(--green);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.home-link:hover {
    background: var(--green-dark);
}