/* =============================================================
   The Smile Art Pavilion — single-screen landing
   Desktop fits in one viewport. Mobile scales gracefully.
   ============================================================= */

:root {
    --ink: #0a0a0a;
    --mute: #6b6b6b;
    --line: #d6d6d6;
    --paper: #ffffff;
    --error: #8a2a2a;
    --serif: 'Cormorant Garamond', 'Didot', 'Bodoni 72', 'Times New Roman', serif;
    --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --tracking-wide: 0.32em;
    --tracking-wider: 0.5em;
    --tap: 48px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

/* Fine paper grain — built from inline SVG noise, very subtle */
body {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

/* Desktop: lock to one screen. Mobile/tablet: allow scroll. */
@media (min-width: 721px) {
    html, body { overflow: hidden; }
}

img { max-width: 100%; display: block; }

/* ---------- ORNAMENTS (decorative SVG layer behind content) ---------- */

.ornaments {
    position: fixed;
    inset: 0;
    pointer-events: none;
    color: var(--ink);
    z-index: 0;
    overflow: hidden;
}

.ornaments__arch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1320px, 92vw);
    height: auto;            /* viewBox 1600x280 → ≈1/5.7 of width tall */
    max-height: 32vh;        /* never reach far enough down to brush the logo */
    opacity: 0.16;
}

.ornaments__frieze {
    position: absolute;
    left: 50%;
    bottom: 5vh;
    transform: translateX(-50%);
    width: min(1180px, 86vw);
    height: auto;
    opacity: 0.13;
}

.ornaments__col {
    position: absolute;
    top: 8vh;
    height: 84vh;
    width: 44px;
    opacity: 0.14;
}

.ornaments__col--l { left: 3vw; }
.ornaments__col--r { right: 3vw; }

/* ---------- STAGE ---------- */

.stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vh 6vw;
    background: transparent;
}

.stage__inner {
    width: 100%;
    max-width: 940px;
    text-align: center;
}

.stage__logo {
    width: min(720px, 86%);
    height: auto;
    margin: 0 auto clamp(1.2rem, 3vh, 2.2rem);
}

.stage__tagline {
    font-family: var(--sans);
    font-weight: 300;
    font-size: clamp(0.7rem, 1.1vw, 0.8rem);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 clamp(1.8rem, 4vh, 3rem);
}

.stage__thanks {
    font-family: var(--serif);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    color: var(--ink);
    margin: 0 auto 2rem;
    max-width: 44ch;
    line-height: 1.5;
    padding: 0 0.5rem;
}

.stage__back {
    display: inline-block;
    min-height: var(--tap);
    padding: 0.95rem 2.4rem;
    border: 1px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: background 280ms ease, color 280ms ease;
}

.stage__back:hover,
.stage__back:focus-visible {
    background: var(--ink);
    color: var(--paper);
    outline: none;
}

/* ---------- FORM ---------- */

.form { margin: 0 auto; max-width: 720px; }

.form__row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.form__field {
    position: relative;
    flex: 1 1 220px;
    min-width: 200px;
    text-align: left;
}

.form__input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    padding: 0.85rem 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--ink);
    transition: border-color 220ms ease;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.form__input::placeholder {
    color: var(--mute);
    font-style: italic;
    opacity: 1;
}

.form__input:focus {
    outline: none;
    border-bottom-color: var(--ink);
}

.form__error {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    display: block;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--error);
    min-height: 1em;
}

.form__submit {
    flex: 0 0 auto;
    min-height: var(--tap);
    padding: 0.85rem 2rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 0.72rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    cursor: pointer;
    align-self: stretch;
    -webkit-appearance: none;
    appearance: none;
    transition: background 260ms ease, color 260ms ease, letter-spacing 260ms ease;
}

.form__submit:hover,
.form__submit:focus-visible {
    background: var(--paper);
    color: var(--ink);
    letter-spacing: calc(var(--tracking-wide) + 0.04em);
    outline: none;
}

/* ---------- TABLET & MOBILE (≤720) ---------- */

@media (max-width: 720px) {
    .ornaments__col { display: none; }
    .ornaments__arch { width: 120vw; top: 0; max-height: 24vh; opacity: 0.14; }
    .ornaments__frieze { width: 135vw; bottom: 3vh; opacity: 0.12; }

    .stage { padding: 5vh 5vw; }

    .stage__logo { width: 92%; margin-bottom: 1.6rem; }

    .stage__tagline {
        font-size: 0.68rem;
        letter-spacing: 0.28em;
        margin-bottom: 2rem;
        line-height: 1.6;
    }

    .form__row {
        flex-direction: column;
        gap: 1.4rem;
    }

    .form__field {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    .form__input {
        font-size: 16px;            /* prevent iOS auto-zoom on focus */
        padding: 0.95rem 0;
    }

    .form__submit {
        width: 100%;
        padding: 1.05rem;
        margin-top: 0.4rem;
        font-size: 0.75rem;
    }

    .form__error {
        position: static;
        margin-top: 0.4rem;
        font-size: 0.72rem;
        min-height: 0;
    }
}

/* ---------- PHONE (≤480) ---------- */

@media (max-width: 480px) {
    .stage { padding: 6vh 7vw; }

    .stage__logo { width: 96%; margin-bottom: 1.4rem; }

    .stage__tagline {
        font-size: 0.62rem;
        letter-spacing: 0.22em;
        margin-bottom: 1.8rem;
    }

    .stage__thanks {
        font-size: 1.15rem;
        margin-bottom: 1.6rem;
    }

    .stage__back {
        padding: 0.9rem 2rem;
        font-size: 0.7rem;
    }
}

/* ---------- TINY PHONE (≤360) — break tagline into two lines ---------- */

@media (max-width: 360px) {
    .stage__tagline {
        letter-spacing: 0.18em;
        font-size: 0.58rem;
    }
}

/* ---------- LANDSCAPE PHONE — keep things tight vertically ---------- */

@media (max-height: 520px) and (orientation: landscape) {
    .stage { padding: 3vh 6vw; align-items: flex-start; }
    .stage__logo { width: min(520px, 60%); margin-bottom: 0.8rem; }
    .stage__tagline { margin-bottom: 1.2rem; }
    .form__row { flex-direction: row; gap: 0.8rem; }
    .form__submit { width: auto; }

    /* Viewport is too short to host the full composition without crossing the logo */
    .ornaments__arch { display: none; }
    .ornaments__frieze { width: 110vw; bottom: 1vh; opacity: 0.08; }
}

/* ---------- VALIDATION ---------- */

.input-validation-error { border-bottom-color: var(--error) !important; }
.field-validation-error { color: var(--error); }