:root {
    --paper: #f4f3ed;
    --ink: #171914;
    --muted: #6f7168;
    --line: rgba(23, 25, 20, 0.18);
    --accent: #d7ff00;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    margin: 0;
    background:
        linear-gradient(90deg, rgba(23, 25, 20, 0.06) 1px, transparent 1px) 0 0 / clamp(44px, 7vw, 96px) 100%,
        radial-gradient(circle at 78% 22%, rgba(215, 255, 0, 0.18), transparent 28rem),
        var(--paper);
}

.maintenance {
    display: grid;
    min-height: 100vh;
    padding: clamp(1.25rem, 4vw, 3rem);
    place-items: center;
}

.maintenance__panel {
    width: min(100%, 58rem);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: clamp(2.5rem, 9vw, 7rem) 0;
}

.maintenance__eyebrow {
    margin: 0 0 clamp(2rem, 5vw, 4rem);
    color: var(--muted);
    font-size: clamp(0.75rem, 1.4vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
}

h1 {
    max-width: 13ch;
    margin: 0;
    font-family: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: clamp(3.25rem, 12vw, 9.5rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.86;
}

.maintenance__copy {
    max-width: 34rem;
    margin: clamp(2rem, 5vw, 4rem) 0 0 auto;
    color: var(--muted);
    font-size: clamp(1rem, 2vw, 1.35rem);
    line-height: 1.55;
}

@media (max-width: 640px) {
    body {
        background:
            linear-gradient(90deg, rgba(23, 25, 20, 0.06) 1px, transparent 1px) 0 0 / 3rem 100%,
            var(--paper);
    }

    .maintenance {
        place-items: end start;
    }

    .maintenance__copy {
        margin-left: 0;
    }
}