/* The holding page, standing alone.

   Deliberately does not load Pico or site.css: this page has to render when
   nothing else on the site is being served, so it carries its own styling and
   depends on nothing. It is a copy of the sibling marketing site's shape — mark,
   name, one card — because it is the same company saying the same thing. */

:root {
    color-scheme: light dark;

    --oc-ink: #1F2328;
    --oc-bg: #ffffff;
    /* Neutral, not the sibling site's warm beige: that one is chosen to sit
       under bronze, and it fights this mark's blue. */
    --oc-card-bg: #F3F4F6;
    --oc-card-label: #55585E;
    /* Taken from the mark's own gradient (#1A5CC4 -> #3D8BFF) rather than
       chosen, so the stripe and the link belong to the same logo the page
       shows. The darker stop is the one that holds contrast on the card. */
    --oc-accent: #1A5CC4;
    --oc-accent-hover: #12408b;
    --oc-footer-bg: #f4f4f5;
    --oc-footer-ink: #52525b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --oc-ink: #e8e8ea;
        --oc-bg: #111113;
        --oc-card-bg: #1c1c1f;
        --oc-card-label: #a1a1aa;
        --oc-accent: #3D8BFF;
        --oc-accent-hover: #6faaff;
        --oc-footer-bg: #17171a;
        --oc-footer-ink: #a1a1aa;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--oc-bg);
    color: var(--oc-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.6;
}

.oc-home {
    flex: 1 0 auto;
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
    padding: 6rem 1.5rem 2rem;
    text-align: center;
}

.oc-mark {
    display: block;
    width: min(120px, 40vw);
    height: auto;
    margin: 0 auto 1.5rem;
}

.oc-home h1 {
    margin: 0 0 2.5rem;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* One row today. The grid is here so an address or a phone can be added later
   without the card changing shape. */
.oc-card {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2rem 2.25rem 2rem 2.5rem;
    text-align: left;
    background: var(--oc-card-bg);
    border-left: 6px solid var(--oc-accent);
    border-radius: 10px;
}

.oc-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 1.15rem 2rem;
    align-items: baseline;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.oc-card dt {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oc-card-label);
}

.oc-card dd {
    margin: 0;
}

.oc-card a {
    color: var(--oc-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.oc-card a:hover {
    color: var(--oc-accent-hover);
}

@media (max-width: 34rem) {
    .oc-card {
        padding: 1.5rem 1.5rem 1.5rem 1.75rem;
    }

    .oc-card dl {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

.oc-footer {
    flex-shrink: 0;
    background: var(--oc-footer-bg);
    color: var(--oc-footer-ink);
    padding: 3rem 1.5rem;
    font-size: 0.8125rem;
}

.oc-footer p {
    margin: 0;
    text-align: left;
}