@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/cms/login-font.woff2") format("woff2");
}

:root {
    color-scheme: light;
    font-family: "Montserrat", Arial, sans-serif;
    color: #282a2d;
    background: #f8f7f4;
    font-synthesis: none;
    --orange: #ff8200;
    --ink: #282a2d;
    --muted: #65666a;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
:focus-visible { outline: 3px solid #b05b00; outline-offset: 4px; }
[hidden] { display: none !important; }

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 4;
    padding: 12px;
    background: #fff;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100svh;
}
.brand-panel {
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(32px, 4.4vw, 76px);
    color: #fff;
    background: #282a2d;
}
.project-photo {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 53% 50%;
    filter: saturate(.65);
}
.brand-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, #191b1de6 0%, #2325283b 35%, #1b1d20a3 58%, #202225f5 100%);
}
.brand-panel::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--orange);
}
.brand { display: inline-flex; width: fit-content; border-radius: 3px; }
.brand img { display: block; width: 193px; height: auto; }
.brand-copy { margin-top: auto; padding-top: 200px; }
.brand-line { display: block; width: 55px; height: 4px; margin-bottom: 30px; background: var(--orange); }
.brand-copy p {
    font-size: clamp(2.3rem, 4.05vw, 4.7rem);
    letter-spacing: -.055em;
    line-height: 1.09;
    font-weight: 640;
    margin: 0 0 32px;
}
.crafts { display: block; color: #f4f1ed; font-size: .85rem; letter-spacing: .035em; }
.crafts span { color: #ffa13c; padding: 0 9px; }

.form-panel {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 72px clamp(32px, 6.25vw, 116px) 94px;
    background: #f8f7f4;
    min-width: 0;
}
.form-content { width: 100%; max-width: 400px; margin: auto; }
.area {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #844500;
    font-size: .73rem;
    font-weight: 650;
    letter-spacing: .065em;
    margin-bottom: 24px;
}
.area svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
h1 {
    margin: 0;
    font-size: clamp(2.6rem, 4vw, 3.65rem);
    font-weight: 650;
    letter-spacing: -.055em;
    line-height: 1.04;
}
.intro { max-width: 330px; margin: 22px 0 34px; color: var(--muted); font-size: .86rem; line-height: 1.7; }
.login-form { margin: 0; }
.field { margin-bottom: 22px; }
.field label { display: block; margin-bottom: 9px; font-size: .77rem; font-weight: 650; }
.field input {
    display: block;
    width: 100%;
    height: 54px;
    padding: 14px 16px;
    border: 1px solid #d5d3ce;
    border-radius: 7px;
    color: var(--ink);
    background: #fff;
    font-size: .88rem;
    line-height: 1.4;
    box-shadow: 0 1px 2px #26201b04;
}
.field input::placeholder { color: #77787d; opacity: 1; }
.field input:hover { border-color: #b6b1a8; }
.field input:focus { border-color: #a95300; outline: 2px solid #ff820025; outline-offset: 2px; }
.password-field { position: relative; }
.password-field:has(.password-toggle:not([hidden])) input { padding-right: 98px; }
.password-toggle {
    position: absolute;
    right: 7px;
    top: 7px;
    height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #58595d;
    font-size: .7rem;
    font-weight: 650;
}
.password-toggle:hover { color: #804200; background: #fff4e5; }
.submit-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 54px;
    margin-top: 28px;
    padding: 14px 18px;
    border: 1px solid var(--orange);
    border-radius: 7px;
    color: #251b0f;
    background: var(--orange);
    font-size: .85rem;
    font-weight: 750;
    transition: background .15s;
}
.submit-button:hover { background: #f07800; border-color: #f07800; }
.submit-button > span:last-child { font-size: 1.3rem; line-height: 1; }
.submit-button:disabled { opacity: .7; }
.login-status { min-height: 0; margin: 0; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.login-status:not(:empty) { margin-top: 12px; }
.website-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 32px;
    padding-block: 7px;
    font-size: .73rem;
    font-weight: 600;
    color: #62646a;
    text-decoration: none;
}
.website-link:hover { color: #844500; text-decoration: underline; text-underline-offset: 4px; }
.website-link span { font-size: 1rem; }
.login-error {
    margin: 0 0 24px;
    padding: 13px 15px;
    border: 1px solid #e8c4b9;
    border-left: 3px solid #a54427;
    border-radius: 6px;
    background: #fff0e9;
    color: #822d18;
    font-size: .78rem;
    line-height: 1.6;
}
.login-footer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    position: absolute;
    inset: auto clamp(32px, 6.25vw, 116px) 28px;
    color: #76777a;
    font-size: .63rem;
    line-height: 1.5;
}
.login-footer span:first-child { font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }

@media (min-width: 1600px) {
    .form-panel { padding-inline: 110px; }
}
@media (max-width: 900px) {
    .login-layout { grid-template-columns: .85fr 1fr; }
    .brand-panel { padding: 32px; }
    .brand img { width: 158px; }
    .brand-copy p { font-size: 2.4rem; }
    .form-panel { padding: 48px 32px 85px; }
    .login-footer { inset-inline: 32px; }
    h1 { font-size: 2.85rem; }
    .crafts { font-size: .7rem; }
    .crafts span { padding-inline: 5px; }
}
@media (max-width: 620px) {
    .login-layout { display: block; }
    .brand-panel { min-height: 135px; padding: 30px 28px; justify-content: center; }
    .brand img { width: 150px; }
    .project-photo { object-position: 50% 42%; }
    .brand-panel::before { background: linear-gradient(90deg, #202225f0, #202225a6); }
    .brand-panel::after { height: 3px; }
    .brand-copy { display: none; }
    .form-panel { min-height: calc(100svh - 135px); padding: 42px 28px 84px; justify-content: flex-start; }
    .form-content { margin-block: 0 auto; }
    .area { margin-bottom: 20px; font-size: .69rem; }
    h1 { font-size: 2.7rem; }
    .intro { margin-block: 20px 28px; font-size: .83rem; }
    .field input { font-size: 16px; }
    .login-footer { inset-inline: 28px; bottom: 24px; font-size: .59rem; }
}
@media (prefers-reduced-motion: reduce) {
    .submit-button { transition: none; }
}