@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,600&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
    --kudla-red: #791f17;
    --coastal-green: #323a1f;
    --warm-cream: #fef6eb;
    --red-line: rgba(121, 31, 23, .28);
    --green-line: rgba(50, 58, 31, .25);
    --muted-green: rgba(50, 58, 31, .72);
    --display: "Cormorant Garamond", Georgia, serif;
    --body: "Libre Baskerville", Georgia, serif;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--warm-cream);
}

body {
    margin: 0;
    color: var(--coastal-green);
    background: var(--warm-cream);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
}

button,
input {
    font: inherit;
}

.auth-body {
    min-height: 100vh;
    min-height: 100svh;
}

.auth-body::before {
    position: fixed;
    z-index: 10;
    inset: 0;
    opacity: .1;
    pointer-events: none;
    content: "";
    background-image: radial-gradient(rgba(50, 58, 31, .28) .4px, transparent .55px);
    background-size: 7px 8px;
    mix-blend-mode: multiply;
}

.auth-shell {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(560px, 1.12fr) minmax(480px, .88fr);
}

.auth-story {
    position: relative;
    min-width: 0;
    padding: clamp(36px, 4vw, 64px) clamp(44px, 6vw, 96px);
    overflow: hidden;
    border-right: 1px solid var(--green-line);
    background: var(--warm-cream);
}

.auth-brand {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 42px);
}

.auth-brand img {
    width: clamp(210px, 18vw, 275px);
    height: auto;
    display: block;
}

.auth-brand span {
    padding-left: clamp(22px, 3vw, 42px);
    border-left: 1px solid var(--red-line);
    color: var(--coastal-green);
    font: 700 9px/1.5 var(--body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.auth-story-copy {
    position: relative;
    z-index: 3;
    width: min(100%, 690px);
    margin-top: clamp(82px, 14vh, 150px);
}

.auth-eyebrow {
    margin: 0 0 20px;
    color: var(--kudla-red);
    font: 700 10px/1.4 var(--body);
    letter-spacing: .17em;
    text-transform: uppercase;
}

.auth-story-copy h1,
.auth-panel h2 {
    margin: 0;
    color: var(--kudla-red);
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -.035em;
}

.auth-story-copy h1 {
    font-size: clamp(58px, 5.6vw, 88px);
    line-height: .91;
}

.auth-story-copy h1 em {
    color: var(--coastal-green);
    font-weight: 600;
}

.auth-story-copy > p:last-child {
    width: min(100%, 570px);
    margin: 32px 0 0;
    color: var(--muted-green);
    font: 400 14px/1.9 var(--body);
}

.auth-coastal-image {
    position: absolute;
    z-index: 1;
    right: -7%;
    bottom: -12%;
    width: min(78%, 900px);
    margin: 0;
    opacity: .24;
    filter: grayscale(1) sepia(.13) contrast(1.05);
    -webkit-mask-image: linear-gradient(130deg, transparent 0%, #000 24%, #000 75%, transparent 100%);
    mask-image: linear-gradient(130deg, transparent 0%, #000 24%, #000 75%, transparent 100%);
}

.auth-coastal-image img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

.auth-panel {
    min-width: 0;
    padding: clamp(60px, 7vw, 110px);
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 88% 10%, rgba(121, 31, 23, .06), transparent 28%),
        var(--warm-cream);
}

.auth-panel-inner {
    width: min(100%, 500px);
}

.auth-rule {
    width: 170px;
    margin: 0 0 clamp(48px, 7vh, 76px);
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--kudla-red);
}

.auth-rule::before,
.auth-rule::after {
    height: 1px;
    flex: 1;
    content: "";
    background: var(--red-line);
}

.auth-rule span {
    font: 400 18px/1 Georgia, serif;
}

.auth-panel h2 {
    font-size: clamp(49px, 4.5vw, 68px);
    line-height: .98;
}

.auth-intro {
    width: min(100%, 430px);
    margin: 20px 0 0;
    color: var(--muted-green);
    font: 400 13px/1.8 var(--body);
}

.auth-notice {
    margin-top: 28px;
    padding: 14px 16px;
    border: 1px solid var(--coastal-green);
    background: rgba(50, 58, 31, .06);
    color: var(--coastal-green);
    font: 400 12px/1.6 var(--body);
}

.auth-notice.error {
    border-color: var(--kudla-red);
    background: rgba(121, 31, 23, .06);
    color: var(--kudla-red);
}

.auth-form {
    margin-top: 42px;
    display: grid;
    gap: 28px;
}

.auth-form label {
    display: grid;
    gap: 9px;
}

.auth-form label > span {
    color: var(--coastal-green);
    font: 700 9px/1.4 var(--body);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-form input {
    width: 100%;
    min-height: 52px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--green-line);
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--coastal-green);
    font: 400 15px/1.5 var(--body);
}

.auth-form input:focus {
    border-color: var(--kudla-red);
    box-shadow: 0 1px 0 var(--kudla-red);
}

.auth-form button {
    width: fit-content;
    min-height: 52px;
    margin-top: 8px;
    padding: 15px 25px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border: 0;
    border-radius: 0;
    background: var(--kudla-red);
    color: var(--warm-cream);
    font: 700 11px/1.3 var(--body);
    letter-spacing: .05em;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
}

.auth-form button:hover {
    background: var(--coastal-green);
    transform: translateY(-1px);
}

.auth-help {
    margin: 36px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--green-line);
    color: var(--muted-green);
    font: 400 11px/1.8 var(--body);
}

.auth-help a {
    color: var(--kudla-red);
    font-weight: 700;
    text-underline-offset: 4px;
}

.auth-security {
    margin: 42px 0 0;
    color: rgba(50, 58, 31, .5);
    font: 700 8px/1.5 var(--body);
    letter-spacing: .12em;
    text-transform: uppercase;
}

@media (max-width: 1050px) {
    .auth-shell {
        grid-template-columns: minmax(430px, .9fr) minmax(430px, 1.1fr);
    }

    .auth-story {
        padding-inline: 52px;
    }

    .auth-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .auth-brand span {
        padding: 13px 0 0;
        border-top: 1px solid var(--red-line);
        border-left: 0;
    }
}

@media (max-width: 820px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-story {
        min-height: 550px;
        padding: 40px clamp(28px, 8vw, 68px) 80px;
        border-right: 0;
        border-bottom: 1px solid var(--green-line);
    }

    .auth-story-copy {
        margin-top: 75px;
    }

    .auth-coastal-image {
        right: -5%;
        bottom: -15%;
        width: 78%;
    }

    .auth-panel {
        padding: 82px clamp(28px, 10vw, 90px);
    }
}

@media (max-width: 540px) {
    .auth-story {
        min-height: 510px;
        padding: 30px 24px 68px;
    }

    .auth-brand img {
        width: 190px;
    }

    .auth-story-copy {
        margin-top: 62px;
    }

    .auth-story-copy h1 {
        font-size: clamp(49px, 15vw, 64px);
    }

    .auth-story-copy > p:last-child {
        font-size: 12px;
    }

    .auth-coastal-image {
        right: -22%;
        bottom: -8%;
        width: 105%;
    }

    .auth-panel {
        padding: 70px 24px;
    }

    .auth-rule {
        margin-bottom: 48px;
    }

    .auth-panel h2 {
        font-size: 50px;
    }

    .auth-form button {
        width: 100%;
        justify-content: center;
    }
}