/*
 * The landing page. One image, one button, and a field for them to sit on.
 *
 * Deliberately not app.css. That sheet is the staff side: a dense,
 * information-first surface built for reading numbers in columns for six hours
 * a day, on a light ground. This is a door. They share a project and nothing
 * else, and making one sheet serve both would end with the quote builder
 * inheriting a colour scheme chosen for a picture.
 *
 * No webfont, the same rule the rest of the application follows. There is no
 * build step on the production host, and a front door that waits on a font
 * from somebody else's CDN to render two words is a slow front door with an
 * outage it does not control.
 *
 * EVERY COLOUR HERE WAS SAMPLED OUT OF THE ARTWORK rather than chosen beside
 * it. The background is the image's own corner pixel, so the picture has no
 * visible edge and reads as part of the page instead of as a photograph
 * pasted onto one; the bronze is the fill of the lettering in the mark.
 */

:root {
    --field: #0a1018;   /* the image's corner, give or take a shade */
    --bronze: #987a5e;  /* the fill of PROJECT SCYLLA in the mark */
    --bronze-lit: #c8ab86;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--field);
    color: var(--bronze-lit);
    font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 32px 20px 56px;
}

/*
 * BOUNDED ON BOTH AXES, and the height bound is the one that earns its keep.
 * At its native 1408x768 the mark plus the button plus the padding comes to
 * about 930px, so on a laptop the only thing you can click on this page would
 * have sat below the fold. A door you have to scroll to open is a bad door.
 *
 * It is never scaled UP past 1408 either: enlarging a JPEG of fine filigree is
 * how it starts looking like a JPEG.
 *
 * width and height auto let the image satisfy whichever bound it meets first
 * while keeping its ratio, and the width and height attributes on the tag
 * still reserve the right space before the bytes arrive.
 */
.mark {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 1408px);
    max-height: 68vh;
}

.enter {
    display: inline-block;
    padding: 11px 34px;
    border: 1px solid var(--bronze);
    border-radius: 3px;
    background: transparent;
    color: var(--bronze-lit);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

.enter:hover,
.enter:focus {
    background: var(--bronze);
    color: #0a1018;
}

/*
 * Never remove this without replacing it. The button is the only thing on the
 * page that can be operated, so a keyboard user who cannot see where focus is
 * has nothing at all to go on.
 */
.enter:focus-visible {
    outline: 2px solid var(--bronze-lit);
    outline-offset: 3px;
}

/*
 * Under about 700px the mark is small enough that the generous vertical
 * rhythm above it wastes most of a phone screen.
 */
@media (max-width: 700px) {
    main { gap: 24px; padding: 20px 14px 36px; }
}