/* Spirit House — the whole site is one full-viewport lookbook panel. */

/* Self-hosted so the page opens no connection to Google. This is the latin
   subset only; characters outside it (the → in the submit button) fall back
   to the next family in --mono, which is what the hosted version did too. */
@font-face {
    font-family: "DM Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dm-mono-400.woff2") format("woff2");
}

:root {
    --ink: #050505;              /* photo and panel ground */
    --paper: #fff;
    --letterbox: #0c0c0c;        /* shows either side of the 1600px cap */
    --mono: "DM Mono", ui-monospace, SFMono-Regular, "Courier New", monospace;
    --statement: clamp(64px, 7vw, 112px);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    background: var(--letterbox);
    color: var(--ink);
    font-family: var(--mono);
}

img { display: block; max-width: 100%; }
button, input { border-radius: 0; color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.eyebrow {
    margin: 0;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* --- Lookbook -------------------------------------------------------- */

.lookbook {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    width: min(100%, 1600px);
    height: 100svh;
    margin: 0 auto;
    overflow: clip;
    background: var(--paper);
}

.lookbook__image {
    position: relative;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: var(--ink);
}

/* Wider than its column and pulled left so the seated figure sits inboard of
   the split rather than being cropped away by it. */
.lookbook__photo {
    width: 114%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 56% 55%;
    transform: translateX(-12%);
    filter: grayscale(1) contrast(1.12);
}

/* The master logo is one mark on a large transparent canvas; the frame crops
   in to the wordmark itself. */
.lookbook__wordmark {
    position: absolute;
    z-index: 1;
    top: clamp(24px, 4vw, 60px);
    left: clamp(24px, 4vw, 60px);
    width: clamp(90px, 8vw, 122px);
    aspect-ratio: 1.75;
    overflow: hidden;
}

.lookbook__wordmark img {
    position: absolute;
    top: -68%;
    left: -2%;
    width: 115%;
    max-width: none;
    /* The width/height attributes are there for aspect ratio; without this the
       height attribute lands as a presentational hint and stretches the mark. */
    height: auto;
}

.lookbook__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: clamp(28px, 4vw, 64px);
    background: var(--ink);
    color: var(--paper);
}

.lookbook__status {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.lookbook__status::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--paper);
    content: "";
}

.lookbook__statement {
    position: absolute;
    top: 40%;
    right: clamp(28px, 4vw, 64px);
    left: clamp(28px, 4vw, 64px);
}

.lookbook__statement h1 {
    margin: 0;
    font: var(--statement)/.78 Arial, Helvetica, sans-serif;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

/* --- Waitlist -------------------------------------------------------- */

.waitlist {
    display: grid;
    gap: 10px;
    max-width: 440px;
    margin-top: clamp(36px, 6vh, 70px);
}

.waitlist__row {
    display: flex;
    border-bottom: 1px solid currentColor;
}

.waitlist input {
    min-width: 0;
    flex: 1;
    padding: 14px 4px;
    border: 0;
    outline-offset: -2px;
    background: transparent;
    color: var(--paper);
}

.waitlist input::placeholder { color: rgba(255, 255, 255, .62); }

.waitlist button {
    padding: 0 18px;
    border: 0;
    background: currentColor;
    cursor: pointer;
}

.waitlist button span { color: var(--ink); }
.waitlist button[disabled] { cursor: default; opacity: .6; }

/* Turnstile only paints when Cloudflare wants a challenge; until then the
   widget is a zero-height node and must not open a gap in the form. */
.waitlist__turnstile:empty { display: none; }

.form-message {
    min-height: 16px;
    margin: 0;
    font-size: 9px;
    letter-spacing: .04em;
}

.form-message.is-error { color: #ff8b76; }

@media (max-width: 900px) {
    .lookbook {
        --statement: clamp(56px, 9vw, 78px);
        grid-template-columns: 1.05fr .95fr;
    }
}

@media (max-width: 540px) {
    .lookbook {
        --statement: clamp(54px, 18vw, 74px);
        grid-template-columns: 1fr;
    }

    .lookbook__image { min-height: 52svh; height: 52svh; }
    .lookbook__wordmark { top: 18px; left: 18px; width: 84px; }
    .lookbook__panel { min-height: 48svh; padding: 26px 22px; }
    .lookbook__status { white-space: normal; text-align: right; }

    .lookbook__statement { position: static; margin-block: auto; }
    .waitlist { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}