/* Login only. The approved photograph is shown intact with contain sizing. */
.beirut-login {
    --login-background: #102022;
    --login-input: #1b252a;
    --login-border: #3b494b;
    --login-text: #eff4f5;
    --login-muted: #bdc8ca;
    --login-copper: #e6ad83;
    min-width: 0;
    margin: 0;
    background: var(--login-background);
    color: var(--login-text);
}
.beirut-login *, .beirut-login *::before, .beirut-login *::after { box-sizing: border-box; }
.beirut-login .login-layout {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
}
.beirut-login .login-scene { position: absolute; inset: 0; z-index: -1; margin: 0; pointer-events: none; }
.beirut-login .login-photo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: var(--login-image-position, left center); }
.beirut-login .login-panel { grid-column: 1; width: min(100% - 80px, 400px); margin-inline: auto; padding-block: 56px; }
.beirut-login .login-brand { display: flex; align-items: center; gap: 14px; margin-block-end: 36px; }
.beirut-login .login-brand h2 { min-width: 0; margin: 0; color: var(--login-text); font-size: 21px; font-weight: 700; line-height: 1.9; }
.beirut-login .login-header { margin-block-end: 32px; }
.beirut-login .login-header h1 { color: var(--login-text); font-size: clamp(30px, 2.6vw, 38px); font-weight: 700; line-height: 1.4; }
.beirut-login .login-header p { margin-block-start: 12px; color: var(--login-muted); font-size: var(--text-base); }
.beirut-login .login-form { display: grid; gap: 24px; }
.beirut-login .login-field { min-width: 0; }
.beirut-login .login-field label { display: block; margin-block-end: 9px; font-size: var(--text-md); font-weight: 700; }
.beirut-login .auth-input {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 13px 16px;
    border: 1px solid var(--login-border);
    border-radius: 11px;
    background: var(--login-input);
    color: var(--login-text);
    font: inherit;
    font-size: var(--text-base);
    line-height: 1.7;
}
.beirut-login .auth-input::placeholder { color: #aebabe; opacity: 1; }
.beirut-login .auth-input:placeholder-shown { text-align: right; }
.beirut-login .auth-input:focus { border-color: var(--login-copper); }
.beirut-login .auth-input[aria-invalid="true"] { border-color: #eb9aa3; }
.beirut-login .login-password { position: relative; }
.beirut-login .login-password .auth-input { padding-left: 58px; }
.beirut-login .login-password-toggle { position: absolute; inset-inline-end: 5px; top: 5px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--login-muted); }
.beirut-login .login-password-toggle:hover { background: #293439; color: var(--login-text); }
.beirut-login .login-submit { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; min-height: 54px; margin-block-start: 8px; padding: 12px 18px; border: 1px solid var(--login-copper); border-radius: 11px; background: var(--login-copper); color: #152628; font: inherit; font-size: var(--text-base); font-weight: 700; }
.beirut-login .login-submit .icon { width: 18px; height: 18px; }
.beirut-login .login-submit:hover { background: #edbb97; border-color: #edbb97; }
.beirut-login .login-note { max-width: 360px; margin-block-start: 26px; color: var(--login-muted); font-size: var(--text-sm); line-height: 2; }
.beirut-login .login-errors { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid #70464c; border-radius: 10px; background: #36282d; color: #ffd1d5; font-size: var(--text-md); line-height: 1.9; }
.beirut-login .login-errors .icon { width: 18px; height: 18px; margin-block-start: 3px; }
.beirut-login .field-error { margin-block-start: 8px; color: #ffc3ca; font-size: var(--text-sm); line-height: 1.9; }
.beirut-login button:focus-visible, .beirut-login input:focus-visible { outline: 2px solid var(--login-copper); outline-offset: 4px; }
@media (min-width: 1201px) and (max-width: 1350px) {
    .beirut-login .login-panel { width: min(100% - 64px, 360px); }
}
@media (max-width: 1200px) {
    /* Separate the whole photograph before a narrow form could meet a face. */
    .beirut-login .login-layout { display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 44px 24px 24px; }
    .beirut-login .login-panel { width: min(100%, 400px); padding: 0; }
    .beirut-login .login-brand { margin-block-end: 28px; }
    .beirut-login .login-scene { position: relative; inset: auto; z-index: 0; width: min(100%, 660px); border: 1px solid #344245; border-radius: 12px; overflow: hidden; }
    .beirut-login .login-photo { width: 100%; height: auto; }
}
@media (max-width: 480px) {
    .beirut-login .login-layout { justify-content: flex-start; gap: 32px; padding: 36px 24px 24px; }
    .beirut-login .login-header { margin-block-end: 28px; }
    .beirut-login .login-form { gap: 22px; }
    .beirut-login .login-header h1 { font-size: 32px; }
    .beirut-login .login-brand { gap: 12px; }
    .beirut-login .login-brand h2 { font-size: var(--text-xl); }
}