@font-face {
    font-family: "Awen Sans";
    src: url("../content/font/IBMPlexSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Awen Sans";
    src: url("../content/font/IBMPlexSans-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.auth-page {
    /* Primary colour sampled from the original, unfiltered Awen logo. */
    --auth-brand: #9b7f61;
    --auth-paper: #faf8f4;
    --auth-ink: #352b23;
    --auth-muted: #746a60;
    --auth-line: #dcd2c5;
    --auth-focus: #806347;
    --auth-dark: #30261f;
    margin: 0;
    background: var(--auth-paper);
    color: var(--auth-ink);
    font-family: "Awen Sans", Tahoma, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }
.auth-page [hidden] { display: none !important; }
.auth-page button, .auth-page input { font: inherit; }
.auth-page button, .auth-page a, .auth-page input { -webkit-tap-highlight-color: transparent; }
.auth-page button { cursor: pointer; }
.auth-page a { color: inherit; text-underline-offset: 4px; }
.auth-page svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.auth-page :focus-visible { outline: 2px solid var(--auth-focus); outline-offset: 4px; }
.auth-page ::selection { background: #e3d6c5; color: #352b23; }

.auth-skip { position: fixed; top: 12px; left: 24px; z-index: 5; padding: 12px 18px; background: var(--auth-paper); transform: translateY(-150%); }
.auth-skip:focus { transform: translateY(0); }

.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(470px, 1.1fr); min-height: 100vh; min-height: 100svh; }
.auth-story { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; min-height: 660px; margin: 20px 0 20px 20px; padding: clamp(32px, 4.2vw, 72px); background: var(--auth-dark); color: #e4d7c7; }
.auth-story__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.auth-story::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(48, 38, 31, .28), rgba(48, 38, 31, .08) 34%, rgba(48, 38, 31, .08) 64%, rgba(48, 38, 31, .88)); }
.auth-story__top { display: flex; align-items: center; gap: 24px; font-size: 13px; }
.auth-story__rule { height: 1px; flex: 1; background: #75614e; }
.auth-story__identity { display: flex; flex: 1; align-items: center; justify-content: center; padding: 72px 0; }
.auth-story__identity img { display: block; width: 251px; max-width: 100%; height: auto; }
.auth-story__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid #75614e; font-size: 13px; color: #d8c8b4; }
.auth-story__footer > :last-child { font-size: 12px; }

.auth-panel { display: flex; flex-direction: column; min-width: 0; padding: 44px clamp(32px, 6vw, 112px) 28px; }
.auth-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.auth-panel__wordmark { color: #78634f; font-size: 15px; }
.auth-panel__access { color: var(--auth-muted); font-size: 13px; }
.auth-mobile-logo { display: none; }
.auth-form-wrap { width: 100%; max-width: 404px; margin: auto; padding: 68px 0; }
.auth-intro { margin-bottom: 35px; }
.auth-intro h1 { margin: 0 0 12px; font-size: 31px; font-weight: 400; line-height: 1.3; letter-spacing: -.02em; }
.auth-intro p { margin: 0; color: var(--auth-muted); font-size: 15px; line-height: 1.6; }
.auth-field { margin-bottom: 24px; }
.auth-field > label { display: block; margin-bottom: 9px; font-size: 14px; }
.auth-input { width: 100%; min-height: 55px; padding: 14px 16px; border: 1px solid #c8b9a7; border-radius: 3px; background: #fffefa; color: var(--auth-ink); transition: border-color 160ms ease, box-shadow 160ms ease; }
.auth-input::placeholder { color: #7c7266; opacity: 1; font-size: 14px; }
.auth-input:hover { border-color: var(--auth-brand); }
.auth-input:focus { border-color: var(--auth-focus); outline: none; box-shadow: 0 0 0 3px rgba(155, 127, 97, .14); }
.auth-input.input-validation-error { border-color: #b25a43; }
.auth-password { position: relative; }
.auth-password .auth-input { padding-right: 58px; }
.auth-password__toggle { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 2px; background: transparent; color: #78634f; }
.auth-password__toggle:hover { background: #efe7dc; color: var(--auth-ink); }
.auth-eye-off, .auth-password__toggle[aria-pressed="true"] .auth-eye { display: none; }
.auth-password__toggle[aria-pressed="true"] .auth-eye-off { display: block; }
.auth-remember { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; margin: -7px 0 20px; color: #625448; cursor: pointer; font-size: 14px; }
.auth-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--auth-focus); cursor: pointer; }
.auth-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 15px 20px; border: 1px solid var(--auth-brand); border-radius: 3px; background: var(--auth-brand); color: #21170f; font-size: 15px; font-weight: 700; transition: background 160ms ease, border-color 160ms ease; }
.auth-submit:hover:not(:disabled) { background: #ad9274; border-color: #ad9274; }
.auth-submit:active:not(:disabled) { background: #a68a6c; border-color: #a68a6c; }
.auth-submit:disabled { cursor: wait; }
.auth-submit__spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(33, 23, 15, .3); border-top-color: currentColor; border-radius: 50%; animation: auth-spin 800ms linear infinite; }
.auth-submit:disabled .auth-submit__arrow { display: none; }
.auth-submit:disabled .auth-submit__spinner { display: block; }
.auth-access-note { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 19px 0 0; color: var(--auth-muted); font-size: 12px; }
.auth-access-note svg { width: 14px; height: 14px; }
.auth-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 24px; padding: 14px; border: 1px solid #dec5bb; border-radius: 3px; background: #faf0e9; color: #943f2a; font-size: 14px; }
.auth-alert svg { width: 19px; height: 19px; margin-top: 1px; }
.auth-validation.validation-summary-valid { display: none; }
.auth-validation.validation-summary-errors { margin: 0 0 24px; padding: 14px; background: #faf0e9; color: #943f2a; border-left: 2px solid #b25a43; font-size: 14px; }
.auth-validation ul { margin: 0; padding-left: 18px; }
.auth-footer { width: 100%; }
.auth-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 16px; border-bottom: 1px solid var(--auth-line); }
.auth-legal-links a { display: inline-flex; align-items: center; min-height: 28px; color: #716151; font-size: 12px; text-decoration: none; }
.auth-legal-links a:hover { color: var(--auth-ink); text-decoration: underline; }
.auth-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 17px; color: var(--auth-muted); font-size: 9px; }
.auth-footer__bottom strong { font-weight: 400; color: #625448; }

@keyframes auth-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
    .auth-layout { grid-template-columns: minmax(0, 1fr) minmax(430px, 1.15fr); }
    .auth-story { padding: 32px; }
    .auth-panel { padding: 36px 38px 26px; }
}

@media (max-width: 800px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-story { flex-direction: row; align-items: center; gap: 24px; min-height: 146px; margin: 12px 12px 0; padding: 24px 28px; }
    .auth-story__photo { object-position: center 60%; }
    .auth-story::after { background: rgba(48, 38, 31, .48); }
    .auth-story__top { display: none; }
    .auth-story__identity { flex: 0 0 auto; padding: 0; }
    .auth-story__identity img { width: 135px; }
    .auth-story__footer { display: block; margin-left: auto; padding: 0 0 0 24px; border-top: 0; border-left: 1px solid #75614e; }
    .auth-story__footer > span { display: block; }
    .auth-story__footer > :last-child { margin-top: 8px; font-size: 11px; }
    .auth-panel { padding: 38px 28px 24px; }
    .auth-panel__header { display: none; }
    .auth-form-wrap { max-width: 440px; padding: 0 0 38px; }
    .auth-intro { margin-bottom: 28px; }
    .auth-intro h1 { font-size: 28px; }
    .auth-intro p { font-size: 14px; }
    .auth-input { font-size: 16px; }
    .auth-footer { max-width: 440px; margin: 0 auto; }
    .auth-legal-links { gap: 4px 16px; }
    .auth-legal-links a { font-size: 11px; }
}

@media (max-width: 370px) {
    .auth-story { padding: 22px; gap: 16px; }
    .auth-story__identity img { width: 118px; }
    .auth-story__footer { padding-left: 16px; font-size: 12px; }
    .auth-story__footer > :last-child { font-size: 10px; }
    .auth-panel { padding: 30px 22px 24px; }
    .auth-intro h1 { font-size: 25px; }
}

@media (max-width: 1100px) and (max-height: 580px) {
    .auth-layout { grid-template-columns: 1fr; }
    .auth-story { display: none; }
    .auth-panel { padding: 24px 28px; }
    .auth-panel__header { display: flex; max-width: 440px; width: 100%; margin: 0 auto 24px; }
    .auth-form-wrap { max-width: 440px; padding: 0 0 32px; }
    .auth-footer { max-width: 440px; margin: 0 auto; }
    .auth-mobile-logo { display: block; width: 104px; height: auto; }
    .auth-panel__wordmark { display: none; }
}

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