:root {
    color-scheme: dark;
    --ink: #f7f2eb;
    --muted: #b8aea4;
    --surface: #11100f;
    --ember: #ef6b3b;
    --ember-light: #ff9a72;
    --line: rgba(247, 242, 235, 0.14);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 78% 18%, rgba(239, 107, 59, 0.13), transparent 34rem),
        var(--surface);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 5vw, 5rem);
}

.hero {
    width: min(70rem, 100%);
    min-height: min(42rem, calc(100vh - 6rem));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    padding: clamp(1.75rem, 5vw, 4.5rem);
    background: rgba(17, 16, 15, 0.72);
    backdrop-filter: blur(1.25rem);
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.ember-mark {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50% 50% 45% 55%;
    background: linear-gradient(145deg, var(--ember-light), var(--ember));
    box-shadow: 0 0 2rem rgba(239, 107, 59, 0.5);
    transform: rotate(35deg);
}

.copy {
    max-width: 51rem;
    padding-block: 5rem;
}

.eyebrow {
    margin: 0 0 1.4rem;
    color: var(--ember-light);
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 {
    max-width: 10ch;
    margin: 0;
    font-size: clamp(3.4rem, 10vw, 8.5rem);
    font-weight: 570;
    letter-spacing: -0.065em;
    line-height: 0.88;
}

.lede {
    max-width: 39rem;
    margin: 2.25rem 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    line-height: 1.55;
}

.status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 1rem rgba(239, 107, 59, 0.65);
}

@media (max-width: 40rem) {
    main {
        padding: 0;
    }

    .hero {
        min-height: 100vh;
        border: 0;
        border-radius: 0;
        padding: 2rem 1.4rem;
    }

    .copy {
        padding-block: 4rem;
    }
}