@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap");

:root {
    --canvas: #ffcc66;
    --canvas-light: #ffdc8a;
    --ink: #241407;
    --ink-soft: #66401d;
    --accent: #7a4216;
    --line: rgba(76, 40, 16, 0.42);
    --panel: rgba(255, 247, 214, 0.42);
    --panel-strong: rgba(255, 246, 208, 0.68);
    --shadow: rgba(92, 48, 12, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--canvas);
}

body {
    min-height: 100dvh;
    margin: 0;
    color: var(--ink);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background:
        radial-gradient(circle at 10% 16%, rgba(83, 40, 11, 0.15) 0 1px, transparent 2px),
        radial-gradient(circle at 77% 72%, rgba(83, 40, 11, 0.11) 0 1px, transparent 2px),
        repeating-linear-gradient(96deg, transparent 0 43px, rgba(105, 57, 18, 0.13) 44px 47px, transparent 49px 97px),
        linear-gradient(112deg, #f2b743 0%, var(--canvas) 46%, var(--canvas-light) 100%);
    background-size: 41px 41px, 67px 67px, 100% 100%, 100% 100%;
}

a {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

:focus-visible {
    outline: 3px solid #fff9dc;
    outline-offset: 3px;
}

.page-wrap {
    width: min(calc(100% - 32px), 58rem);
    margin: 0 auto;
    padding: 24px 0 56px;
}

.return-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 20px;
    padding: 7px 11px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 650;
    text-decoration: none;
}

.return-link:hover {
    border-color: var(--line);
    background: rgba(255, 248, 218, 0.25);
    color: var(--ink);
}

.kicker {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

@media (max-width: 560px) {
    body {
        font-size: 15px;
        background-size: 37px 37px, 61px 61px, 100% 100%, 100% 100%;
    }

    .page-wrap {
        width: min(calc(100% - 24px), 58rem);
        padding-top: 12px;
        padding-bottom: 36px;
    }

    .return-link {
        margin-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}