@font-face {
    font-family: 'Manrope';
    src: url('landing/manrope-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: optional;
}

:root {
    --auth-ink: #20211e;
    --auth-muted: #676861;
    --auth-paper: #f6f4ef;
    --auth-soft: #ece9e1;
    --auth-rule: #d9d7cf;
    --auth-dark: #141210;
    --auth-light: #f8f6ef;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--auth-paper); }
body.inkmal-auth {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100svh;
    color: var(--auth-ink);
    background: var(--auth-paper);
    font-family: 'Instrument Sans', 'Manrope', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -.006em;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
.inkmal-auth, .inkmal-auth * { -webkit-tap-highlight-color: transparent; }
.inkmal-auth a { color: inherit; text-decoration: none; }
.inkmal-auth button, .inkmal-auth input { font: inherit; }
.inkmal-auth :focus:not(:focus-visible) { outline: none; }
.inkmal-auth :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.inkmal-auth ::selection { background: #e5eab4; color: #20211e; }

.auth-page {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(420px, 1.02fr) minmax(460px, .98fr);
}

.auth-story {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(28px, 3.2vw, 54px);
    color: var(--auth-light);
    background: var(--auth-dark);
}
.auth-story::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 138% 92% at 118% -16%,
            rgba(137, 86, 55, .19) 0%,
            rgba(112, 72, 50, .12) 30%,
            rgba(83, 56, 43, .065) 52%,
            rgba(45, 34, 29, .028) 68%,
            rgba(20, 18, 16, 0) 84%),
        radial-gradient(ellipse 92% 70% at -18% 112%,
            rgba(117, 128, 93, .10) 0%,
            rgba(76, 84, 64, .045) 48%,
            rgba(20, 18, 16, 0) 80%);
}
.auth-story::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.2));
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: var(--auth-light);
}
.auth-brand-word {
    font-size: clamp(33px, 2.5vw, 40px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.055em;
}
.auth-brand-word span { color: #daddaa; }
.auth-brand-sub {
    padding-top: 5px;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .145em;
}

.auth-story-copy {
    width: min(700px, 92%);
    margin-top: auto;
    padding: clamp(72px, 10vh, 132px) 0 clamp(12px, 3vh, 34px);
}
.auth-story-copy h1 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(54px, 6vw, 94px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.055em;
    text-wrap: balance;
}
.auth-story-copy p {
    max-width: 520px;
    margin: 26px 0 0;
    color: #d5d0c7;
    font-size: clamp(15px, 1.15vw, 18px);
    line-height: 1.65;
    letter-spacing: -.01em;
}
.auth-story-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(248, 246, 239, .2);
    color: #bdb8ae;
    font-size: 12px;
}
.auth-story-bottom span:last-child { text-align: right; }

.auth-form-side {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(30px, 4vw, 70px);
    background: var(--auth-paper);
}
.auth-form-top {
    position: absolute;
    top: clamp(28px, 3.4vw, 52px);
    right: clamp(30px, 4vw, 70px);
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--auth-muted);
    font-size: 13px;
}
.auth-form-top a {
    color: var(--auth-ink);
    font-weight: 600;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.auth-form-top a:hover { opacity: .62; }

.auth-card {
    width: min(500px, 100%);
    margin: auto;
    padding: 70px 0 36px;
}
.auth-card h2 {
    margin: 0;
    font-size: clamp(42px, 4.1vw, 64px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.05em;
}
.auth-card-intro {
    max-width: 430px;
    margin: 18px 0 38px;
    color: var(--auth-muted);
    font-size: 15px;
    line-height: 1.65;
}

.auth-toast {
    margin: 0 0 24px;
    padding: 13px 15px;
    border: 1px solid var(--auth-rule);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    line-height: 1.5;
}
.auth-toast-error { color: #7b2c25; border-color: #d9b9b2; background: #fff8f6; }
.auth-toast-success { color: #3f5431; border-color: #c7cfb2; background: #f7f8ef; }

.auth-form { display: grid; gap: 23px; }
.auth-field { display: grid; gap: 9px; }
.auth-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}
.auth-field > label,
.auth-field-head > label {
    color: var(--auth-ink);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
}
.auth-field-head a {
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.3;
    border-bottom: 1px solid transparent;
}
.auth-field-head a:hover { color: var(--auth-ink); border-bottom-color: currentColor; }
.auth-input {
    width: 100%;
    height: 55px;
    padding: 0 16px;
    border: 1px solid #cfcfc7;
    border-radius: 6px;
    outline: 0;
    background: rgba(255,255,255,.74);
    color: var(--auth-ink);
    font-size: 15px;
    line-height: 1;
    caret-color: var(--auth-ink);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.auth-input:hover { border-color: #aaa99f; }
.auth-input:focus,
.auth-input:focus-visible {
    border-color: var(--auth-ink);
    background: #fff;
    outline: none;
    box-shadow: none;
}
.auth-input::placeholder { color: #97988f; opacity: 1; }

.auth-submit {
    width: 100%;
    min-height: 58px;
    margin-top: 7px;
    padding: 16px 24px;
    border: 1px solid var(--auth-ink);
    border-radius: 6px;
    background: var(--auth-ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.auth-submit:hover { background: #41433c; border-color: #41433c; }
.auth-submit:active { transform: scale(.995); }
.auth-submit-label { transform: translateX(15px); transition: transform .35s cubic-bezier(.645,.045,.355,1); }
.auth-submit-arrow {
    width: 20px;
    flex: 0 0 20px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    opacity: 0;
    transform: translateX(-12px);
    transition: transform .35s cubic-bezier(.645,.045,.355,1), opacity .25s ease;
}
.auth-submit:hover .auth-submit-label,
.auth-submit:focus-visible .auth-submit-label { transform: translateX(0); }
.auth-submit:hover .auth-submit-arrow,
.auth-submit:focus-visible .auth-submit-arrow { opacity: 1; transform: translateX(0); }

.auth-mobile-switch {
    display: none;
    margin-top: 24px;
    color: var(--auth-muted);
    font-size: 13px;
    text-align: center;
}
.auth-mobile-switch a {
    color: var(--auth-ink);
    font-weight: 600;
    border-bottom: 1px solid currentColor;
}

@media (max-width: 980px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-story {
        min-height: 310px;
        padding: 26px 28px 30px;
    }
    .auth-story-copy {
        width: min(680px, 100%);
        padding: 72px 0 4px;
    }
    .auth-story-copy h1 { font-size: clamp(47px, 8.6vw, 72px); max-width: 600px; }
    .auth-story-copy p { max-width: 560px; margin-top: 18px; }
    .auth-story-bottom { display: none; }
    .auth-form-side {
        min-height: 0;
        padding: 64px 28px 72px;
    }
    .auth-form-top { top: 28px; right: 28px; }
    .auth-card { width: min(560px, 100%); padding: 38px 0 0; }
}

@media (max-width: 620px) {
    .auth-page { display: block; min-height: 100svh; }

    /* Mobile keeps the dark brand bar, but removes the oversized decorative
       desktop headline so the actual form is the first thing users see. */
    .auth-story {
        min-height: 68px;
        padding: 14px 20px;
        justify-content: center;
    }
    .auth-brand { gap: 8px; }
    .auth-brand-word { font-size: 29px; }
    .auth-brand-sub { display: none; }
    .auth-story-copy { display: none; }

    .auth-form-side {
        display: block;
        min-height: calc(100svh - 68px);
        padding: 18px 20px 42px;
    }
    .auth-form-top { display: none; }
    .auth-card { width: 100%; margin: 0; padding: 0; }
    .auth-card h2 {
        font-size: clamp(32px, 8.8vw, 36px);
        line-height: 1.04;
        letter-spacing: -.045em;
    }
    .auth-card-intro {
        margin: 9px 0 27px;
        font-size: 14px;
        line-height: 1.55;
    }
    .auth-form { gap: 20px; }
    .auth-input { height: 54px; font-size: 16px; }
    .auth-submit { min-height: 56px; }
    .auth-mobile-switch { display: block; }
}

@media (max-width: 380px) {
    .auth-story { min-height: 62px; padding: 13px 17px; }
    .auth-brand-word { font-size: 28px; }
    .auth-form-side {
        min-height: calc(100svh - 62px);
        padding: 16px 17px 38px;
    }
    .auth-card h2 { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .inkmal-auth *, .inkmal-auth *::before, .inkmal-auth *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Keep form fields to one clean border on focus. The global keyboard focus ring
   remains available for links and buttons, but inputs use their dark border. */
.inkmal-auth .auth-input:focus-visible {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
}

/* Google sign-in placeholder: visual only until OAuth is connected. */
.auth-google {
    width: 100%;
    min-height: 55px;
    padding: 14px 18px;
    border: 1px solid #cfcfc7;
    border-radius: 6px;
    background: rgba(255,255,255,.74);
    color: var(--auth-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    transition: border-color .18s ease, background .18s ease, transform .15s ease;
}
.auth-google:hover {
    border-color: #aaa99f;
    background: #fff;
}
.auth-google:active { transform: scale(.995); }
.auth-google-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: block;
}
.auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 13px;
    margin: 22px 0 23px;
    color: #8b8c84;
    font-size: 12px;
    line-height: 1;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    background: var(--auth-rule);
}
.auth-divider span { transform: translateY(-1px); }

@media (max-width: 620px) {
    .auth-google { min-height: 54px; font-size: 14px; }
    .auth-divider { margin: 20px 0; }
}


/* Register page: same visual system as login, with a denser four-field form. */
.auth-card-register {
    width: min(560px, 100%);
    padding-top: 54px;
}
.auth-card-register .auth-card-intro {
    margin-bottom: 30px;
}
.auth-register-form {
    gap: 18px;
}
.auth-register-passwords {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.auth-field-help {
    display: block;
    margin-top: -2px;
    color: #85867e;
    font-size: 11px;
    line-height: 1.4;
}
.auth-card-register .auth-submit {
    margin-top: 3px;
}

@media (max-width: 620px) {
    .auth-card-register { width: 100%; padding-top: 0; }
    .auth-card-register .auth-card-intro { margin-bottom: 28px; }
    .auth-register-passwords { grid-template-columns: 1fr; gap: 18px; }
    .auth-register-form { gap: 18px; }
}

/* Login password visibility toggle. */
.auth-password-wrap {
    position: relative;
}
.auth-password-wrap .auth-input {
    padding-right: 52px;
}
.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #707169;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .18s ease, background .18s ease;
}
.auth-password-toggle:hover {
    color: var(--auth-ink);
    background: rgba(20,18,16,.055);
}
.auth-password-toggle:focus-visible {
    outline: 2px solid var(--auth-ink);
    outline-offset: 1px;
}
.auth-password-eye {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.auth-password-eye[hidden] {
    display: none;
}

/* Register password quality feedback. */
.auth-register-passwords .auth-password-guidance {
    grid-column: 1 / -1;
    margin-top: -1px;
    padding: 14px 15px 15px;
    border: 1px solid var(--auth-rule);
    border-radius: 6px;
    background: rgba(255,255,255,.42);
}
.auth-password-strength {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: var(--auth-muted);
    font-size: 11px;
    line-height: 1.35;
}
.auth-password-strength strong {
    color: var(--auth-muted);
    font-size: 11px;
    font-weight: 600;
}
.auth-password-strength.is-weak strong,
.auth-password-strength.is-weak + .auth-password-strength-bar { color: #9d493e; }
.auth-password-strength.is-fair strong,
.auth-password-strength.is-fair + .auth-password-strength-bar { color: #8a6428; }
.auth-password-strength.is-good strong,
.auth-password-strength.is-good + .auth-password-strength-bar { color: #536936; }
.auth-password-strength.is-strong strong,
.auth-password-strength.is-strong + .auth-password-strength-bar { color: #2f6b45; }
.auth-password-strength-bar {
    height: 3px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #dedcd4;
    color: var(--auth-muted);
}
.auth-password-strength-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    transition: width .2s ease, background-color .2s ease;
}
.auth-password-strength-bar > span.is-weak { color: #9d493e; }
.auth-password-strength-bar > span.is-fair { color: #8a6428; }
.auth-password-strength-bar > span.is-good { color: #536936; }
.auth-password-strength-bar > span.is-strong { color: #2f6b45; }
.auth-password-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
}
.auth-password-rules li {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #7e7f77;
    font-size: 11px;
    line-height: 1.35;
    transition: color .18s ease;
}
.auth-password-rule-icon {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfcdc4;
    border-radius: 50%;
    color: transparent;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.auth-password-rules li.is-met { color: #3e6548; }
.auth-password-rules li.is-met .auth-password-rule-icon {
    border-color: #6f8b73;
    background: #edf4eb;
    color: #32613d;
}
.auth-password-match {
    min-height: 15px;
    margin-top: -2px;
    color: var(--auth-muted);
    font-size: 11px;
    line-height: 1.35;
}
.auth-password-match.is-valid { color: #32613d; }
.auth-password-match.is-invalid { color: #9d493e; }
.auth-register-passwords .auth-input.is-valid {
    border-color: #7f9b82;
}
.auth-register-passwords .auth-input.is-invalid {
    border-color: #bd837b;
}

@media (max-width: 620px) {
    .auth-password-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-register-passwords .auth-password-guidance { margin-top: -3px; }
}