/* Trade Gothic LT Std Regular */
@font-face {
    font-family: "Trade Gothic LT Std";
    src: url("assets/fonts/trade-gothic-lt-std-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================
Maintenance Landing Styles
============================ */
:root {
    --bg: #ffffff;
    --fg: #111111;
    --muted: #75736D;
    --title: #253746;
    --maxw: 720px;
    --gap: 20px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: "Trade Gothic LT Std", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 24px;
}

main {
    width: 100%;
    max-width: var(--maxw);
    text-align: center;
}

.brand {
    margin: 0 auto var(--gap);
    display: inline-block;
}

.brand img {
    display: block;
    width: var(--image_width, 90vw);
    height: auto;
    max-width: 700px;
}

h1 {
    margin: 10px 0 8px;
    font-size: var(--h1_font-size, 30px);
    letter-spacing: 0.02em;
    color: var(--title);
    font-weight: 400;
}

p.lead {
    margin: 0 auto;
    font-size: var(--p_font-size, 22px);
    color: var(--muted);
    max-width: var(--p_width, 630px);
    padding: var(--p_padding, 10px);
    font-weight: 400;
}

@media (min-width: 768px) {
    body {
        --image_width: 670px;
        --h1_font-size: 32px;
        --p_font-size: 24px;
        --p_padding: 0 30px;
        --p_width: 100%;
    }
}