/* Hallmark · pre-emit critique: P5 H4 E5 S5 R5 V4
 * Hallmark · auth surface · theme: Workshop
 */
:root {
    --font-display: "Fraunces", ui-serif, serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-mono: "IBM Plex Mono", monospace;
    --color-ink: #172820;
    --color-ink-2: #30443b;
    --color-ink-3: #52645d;
    --color-paper: #f5f3ec;
    --color-surface: #fbfaf5;
    --color-rule: #d6d1c4;
    --color-workshop: #183d36;
    --color-workshop-2: #102f2b;
    --color-accent: #e5a735;
    --color-accent-ink: #39290c;
    --color-danger: #a83f36;
    --color-danger-soft: #f5e5e1;
    --color-success: #1d6a51;
    --color-success-soft: #e0eee8;
    --color-focus: #b77400;
    --color-auth-overlay: rgba(7, 30, 27, .82);
    --color-shadow: rgba(7, 30, 27, .3);
    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --radius-sm: .375rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body { display: grid; min-height: 100dvh; padding: var(--space-md); color: var(--color-ink); background: linear-gradient(var(--color-auth-overlay), var(--color-auth-overlay)), url("../images/bg-login.jpg") center / cover fixed; font: 400 1rem/1.55 var(--font-body); }
a { color: var(--color-workshop); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.auth-layout { display: grid; width: min(100%, 68rem); margin: auto; background: var(--color-paper); box-shadow: 0 18px 42px var(--color-shadow); }
.auth-story { display: none; padding: var(--space-xl); color: var(--color-surface); background: var(--color-workshop); }
.auth-story h1 { max-width: 9ch; margin-block: var(--space-lg); font: 700 clamp(2.6rem, 6vw, 4.8rem)/.92 var(--font-display); letter-spacing: -.055em; overflow-wrap: anywhere; }
.auth-story p { max-width: 34ch; color: var(--color-paper); }
.auth-kicker, .auth-note { font: 600 .7rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.auth-note { margin-block-start: auto; color: var(--color-accent); }
.auth-panel { padding: var(--space-lg); background: var(--color-surface); }
.auth-brand { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-xl); }
.auth-logo { width: 3.2rem; height: 3.2rem; padding: .22rem; object-fit: contain; border: 1px solid var(--color-rule); border-radius: 50%; background: #fff; }
.auth-brand strong { display: block; color: var(--color-workshop); font: 700 1.2rem/1.1 var(--font-display); }
.auth-brand span { color: var(--color-ink-3); font: 600 .64rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.auth-panel h2 { color: var(--color-workshop); font: 700 2rem/1 var(--font-display); letter-spacing: -.035em; }
.auth-lead { margin-block: var(--space-xs) var(--space-lg); color: var(--color-ink-3); font-size: .88rem; }
.form-group { margin-block-end: var(--space-md); }
.form-group label { display: block; margin-block-end: .25rem; color: var(--color-ink-2); font-size: .75rem; font-weight: 700; }
.form-group input { width: 100%; min-height: 2.9rem; padding: .65rem .7rem; color: var(--color-ink); border: 1px solid var(--color-rule); outline: 2px solid transparent; outline-offset: 1px; border-radius: var(--radius-sm); background: var(--color-surface); font: .88rem var(--font-body); transition: background 180ms ease, border-color 180ms ease; }
.form-group input:focus { border-color: var(--color-workshop); outline-color: var(--color-focus); }
.form-group input:hover { background: var(--color-paper); }
.password-field { position: relative; }
.password-field input { padding-inline-end: 3rem; }
.password-toggle { position: absolute; inset-block: .35rem; inset-inline-end: .35rem; display: grid; place-items: center; width: 2.2rem; color: var(--color-ink-3); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; cursor: pointer; transition: color 180ms ease, background 180ms ease, border-color 180ms ease; }
.password-toggle svg { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-visible .icon-eye { display: none; }
.password-toggle.is-visible .icon-eye-off { display: block; }
.password-toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.auth-button { width: 100%; min-height: 2.9rem; padding: .7rem var(--space-md); color: var(--color-surface); border: 1px solid var(--color-workshop); border-radius: var(--radius-sm); background: var(--color-workshop); cursor: pointer; font-size: .82rem; font-weight: 700; transition: background 180ms ease, transform 180ms ease; }
.auth-button:active { transform: translateY(1px); }
.auth-switch { margin-block-start: var(--space-lg); color: var(--color-ink-3); font-size: .82rem; text-align: center; }
.auth-switch a { font-weight: 700; white-space: nowrap; }
.alert { display: flex; gap: var(--space-xs); margin-block-end: var(--space-md); padding: .65rem .75rem; border: 1px solid; font-size: .78rem; font-weight: 600; }
.alert-error { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-soft); }
.alert-success { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-soft); }
.field-error { margin-block-start: var(--space-xs); }
@media (hover: hover) and (pointer: fine) { .auth-button:hover { background: var(--color-workshop-2); } .password-toggle:hover { color: var(--color-workshop); border-color: var(--color-rule); background: var(--color-paper); } }
@media (max-width: 29.99rem) {
    body { padding: var(--space-sm); background-attachment: scroll; }
    .auth-panel { padding: var(--space-md); }
    .auth-brand { margin-block-end: var(--space-lg); }
    .auth-brand strong { font-size: 1.1rem; }
    .auth-brand span { font-size: .58rem; }
    .auth-panel h2 { font-size: 1.75rem; }
    .form-group input { min-height: 3.1rem; font-size: 1rem; }
    .auth-button { min-height: 3.1rem; font-size: .88rem; }
}
@media (min-width: 48rem) {
    body { padding: var(--space-xl); }
    .auth-layout { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr); }
    .auth-story { display: flex; flex-direction: column; min-height: 38rem; }
    .auth-panel { padding: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }