/* ==========================================================================
   ACCESS GATE — standalone stylesheet
   Used only by index.html. Deliberately minimal: no identity, no imagery.
   ========================================================================== */

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

:root {
    --gate-ground:  #EDEBE4;
    --gate-ink:     #171E22;
    --gate-slate:   #56646C;
    --gate-mist:    #9AA3A6;
    --gate-line:    #C9C5BA;
    --gate-copper:  #B44F27;
    --gate-field:   #F7F6F1;

    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--gate-ground);
    color: var(--gate-ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 5vw, 3rem);
}

/* Fine engraved grid — pure CSS, no images ------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(23, 30, 34, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(23, 30, 34, 0.045) 1px, transparent 1px);
    background-size: 88px 88px;
    background-position: center center;
}

.gate {
    position: relative;
    width: 100%;
    max-width: 27rem;
}

/* Two hairlines that meet at the panel's top-left corner ------------------ */
.gate__rule {
    height: 1px;
    background: var(--gate-line);
    margin-bottom: clamp(2rem, 6vw, 3.25rem);
    transform-origin: left center;
    animation: gate-draw 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes gate-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.gate__label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gate-slate);
    margin: 0 0 0.75rem;
}

.gate__title {
    font-family: var(--sans);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 2.25rem;
}

.gate__field { margin-bottom: 1.125rem; }

.gate__field label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gate-slate);
    margin-bottom: 0.625rem;
}

.gate__input {
    width: 100%;
    padding: 0.9375rem 1rem;
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.16em;
    color: var(--gate-ink);
    background: var(--gate-field);
    border: 1px solid var(--gate-line);
    border-radius: 0;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.gate__input::placeholder { color: var(--gate-mist); letter-spacing: 0.16em; }

.gate__input:focus {
    outline: none;
    border-color: var(--gate-ink);
    box-shadow: inset 0 -2px 0 0 var(--gate-copper);
}

.gate__input:focus-visible { outline: 2px solid var(--gate-copper); outline-offset: 3px; }

.gate__button {
    width: 100%;
    padding: 0.9375rem 1rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gate-field);
    background: var(--gate-ink);
    border: 1px solid var(--gate-ink);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.gate__button:hover { background: var(--gate-copper); border-color: var(--gate-copper); }
.gate__button:focus-visible { outline: 2px solid var(--gate-copper); outline-offset: 3px; }

.gate__message {
    min-height: 1.5rem;
    margin: 1rem 0 0;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--gate-copper);
}

.gate__message:empty { min-height: 1.5rem; }

.gate--denied { animation: gate-shake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

@keyframes gate-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .gate__rule { animation: none; }
    .gate--denied { animation: none; }
    * { transition-duration: 1ms !important; }
}