#loginScreen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,.85fr);align-items:center;gap:6vw;position:fixed;inset:0;overflow-y:auto;z-index:2000;padding:48px 7vw 70px;background:#06121c url('../assets/login-campaign.jpg') center/cover no-repeat;color:#f4f6f8;isolation:isolate}
#loginScreen.hidden{display:none}
#loginScreen::before{content:'';position:absolute;inset:0;min-height:100%;z-index:-1;background:linear-gradient(90deg,#020a1240,#04111a44 45%,#04111a70),linear-gradient(0deg,#01080fee,transparent 70%);pointer-events:none}
.login-story{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:12px 0 20px;min-height:680px}
.login-mission{font-size:12px;letter-spacing:.36em;line-height:2.5;color:#afbdce;margin:0}
.login-campaign{margin:110px 0 55px 12%;max-width:420px}.login-campaign h2{font-family:'Arial Narrow','Impact',sans-serif;font-stretch:condensed;font-style:italic;font-weight:900;font-size:clamp(38px,4vw,66px);line-height:.98;letter-spacing:-.03em;margin:0;text-shadow:0 3px 18px #000}.login-campaign h2 em{color:#e7c475;font-style:inherit}.login-campaign p{font-size:12px;letter-spacing:.15em;color:#c4ccd7;border-top:2px solid #c9a65a;padding-top:14px;margin-top:18px}
.login-values{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;font-size:10px;line-height:1.4;color:#aebfd0}.login-values svg{display:block;width:30px;height:30px;margin:0 auto 12px;fill:none;stroke:currentColor;stroke-width:1.4}.login-values span{max-width:110px;display:block;margin:auto}
#loginScreen .login-card{width:100%;max-width:530px;justify-self:center;padding:30px 38px 32px!important;background:linear-gradient(145deg,#152b3cdb,#040c13ed 78%,#102c3e9c);border:1px solid #688197a3;box-shadow:0 24px 90px #0008,inset 0 1px #ffffff0d;border-radius:22px;color:#f4f6f8;backdrop-filter:blur(16px)}
.login-identity{text-align:center}.login-identity img{width:clamp(135px,15vw,225px);height:auto;filter:drop-shadow(0 6px 15px #0005)}#loginScreen .login-identity h1{font:700 22px Inter,sans-serif;margin:12px 0 8px;color:white}.login-identity p{font-size:11px;line-height:1.5;text-transform:uppercase;letter-spacing:.035em;margin:0;color:#eef2f6}.login-divider{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.25em;color:#b3c4d8;text-align:center;margin:25px 0}.login-divider:before,.login-divider:after{content:'';height:1px;background:#526171;flex:1}
#loginScreen .login-card label{color:#c6d3df;font-size:11px;margin:0 0 16px;display:block}#loginScreen .login-card input{width:100%;height:52px;background:#07111b85;border:1px solid #61748a;border-radius:9px;color:#fff;font:400 14px Inter,sans-serif;padding:0 16px;margin-top:7px;box-shadow:inset 0 2px 6px #0002}#loginScreen .login-card input::placeholder{color:#a5b3c4;opacity:1}#loginScreen .login-card input:focus{outline:2px solid #edc979;outline-offset:3px;border-color:#edc979}#loginScreen .password-field input{padding-right:65px}#loginScreen .password-field button{top:15px;color:#d4deea;min-height:36px}
#loginScreen .login-button{background:linear-gradient(110deg,#eacb80,#c59a4d)!important;border:1px solid #edce85;color:#101a20!important;min-height:54px;font-size:15px;font-weight:800;letter-spacing:.04em;box-shadow:0 5px 22px #c49a4c20;border-radius:9px;margin-top:8px}#loginScreen .login-button:hover{filter:brightness(1.1);transform:translateY(-1px)}
.login-assistance{margin:2px 0 18px;text-align:right;color:#d7e2ec;font-size:11px}.login-assistance summary{cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:4px}.login-assistance p{padding:12px;text-align:left;line-height:1.6;border:1px solid #566576;border-radius:8px;background:#152736}
.login-trust{text-align:center;font-size:10px!important;color:#a8bacb!important;letter-spacing:.1em;margin:20px 0 0!important;line-height:1.7}.login-trust svg{width:14px;height:14px;vertical-align:middle;fill:none;stroke:#d7b569;stroke-width:1.6;margin-right:5px}
.login-signature{position:absolute;bottom:23px;left:4vw;border-left:2px solid #d8b366;padding-left:12px;font-size:9px;line-height:1.6;letter-spacing:.07em;color:#bac7d3}.login-motto{position:absolute;top:28px;right:3vw;border-left:2px solid #d8b366;padding-left:10px;font-size:9px;line-height:1.6;letter-spacing:.2em;color:#bac7d3}.login-dignity{position:absolute;bottom:27px;right:8vw;font-size:9px;letter-spacing:.3em;color:#92a8bd}
@media(min-width:901px) and (max-height:800px){#loginScreen{padding-top:28px;padding-bottom:48px}.login-story{min-height:590px}.login-campaign{margin-top:85px;margin-bottom:35px}.login-identity img{width:145px}#loginScreen .login-card{padding:24px 32px!important}.login-divider{margin:17px 0}.login-motto{top:12px}.login-signature{bottom:12px}.login-dignity{bottom:16px}}
@media(max-width:900px){#loginScreen{grid-template-columns:1fr;padding:36px 22px 32px;gap:25px;align-content:start;background-position:40% center;background-attachment:fixed}.login-story{min-height:0;display:block;text-align:center;padding:0}.login-mission,.login-values,.login-motto{display:none}.login-campaign{margin:0 auto;max-width:420px}.login-campaign h2{font-size:29px;line-height:1.1}.login-campaign h2 br{display:none}.login-campaign p{font-size:9px;margin:10px 0 0;padding-top:10px;display:inline-block}#loginScreen .login-card{max-width:440px;padding:25px!important;border-radius:20px}.login-identity img{width:138px}#loginScreen .login-identity h1{font-size:20px}.login-identity p{font-size:10px}.login-divider{font-size:9px;margin:22px 0}.login-signature{position:static;text-align:center;border:0;padding:0;font-size:8px}.login-dignity{position:static;text-align:center;line-height:1.7;font-size:8px;letter-spacing:.18em}.login-card input{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){#loginScreen *{transition:none!important}}
.login-identity img{clip-path:circle(49% at 50% 50%)}
body:has(#loginScreen:not(.hidden)){overflow:hidden}@media(max-width:900px){#loginScreen{grid-auto-rows:max-content;grid-template-rows:max-content max-content max-content max-content}.login-story{min-height:max-content}}

/* Keep institutional captions in the layout, never over the form or CAPTCHA. */
#loginScreen{grid-template-rows:minmax(min-content,1fr) auto;column-gap:6vw;row-gap:22px;padding-bottom:24px;align-content:start}
#loginScreen .login-story{grid-column:1;grid-row:1;min-width:0}
#loginScreen .login-card{grid-column:2;grid-row:1;min-width:0}
#loginScreen .login-signature{position:static;grid-column:1;grid-row:2;justify-self:start;max-width:100%}
#loginScreen .login-dignity{position:static;grid-column:2;grid-row:2;justify-self:center;text-align:center;line-height:1.7;max-width:100%;overflow-wrap:anywhere}
@media(min-width:901px) and (max-height:800px){
  #loginScreen{padding-top:24px;row-gap:16px}
  #loginScreen .login-story{min-height:0}
  #loginScreen .login-identity img{width:110px}
  #loginScreen .login-card{padding:20px 30px!important}
  #loginScreen .login-divider{margin:14px 0}
  #loginScreen .login-card label{margin-bottom:12px}
  #loginScreen .login-card input{height:46px}
  #loginScreen .login-trust{margin-top:14px!important}
}
@media(max-width:900px){
  #loginScreen{grid-template-rows:repeat(4,max-content);row-gap:22px;padding-bottom:24px}
  #loginScreen .login-story{grid-column:1;grid-row:1}
  #loginScreen .login-card{grid-column:1;grid-row:2}
  #loginScreen .login-signature{grid-column:1;grid-row:3;justify-self:center}
  #loginScreen .login-dignity{grid-column:1;grid-row:4}
}
@media(max-width:380px){
  #loginScreen{padding-left:12px;padding-right:12px}
  #loginScreen .login-card{padding:20px 14px!important}
}
/* Fit the login to the available height; keep scrolling only as an accessibility fallback. */
#loginScreen{padding:clamp(12px,3vh,32px) 7vw 16px;row-gap:12px;min-height:0}
#loginScreen .login-story{min-height:0;padding:0}
#loginScreen .login-campaign{margin:24px 0 24px 12%}
#loginScreen .login-campaign h2{font-size:clamp(32px,6vh,66px)}
#loginScreen .login-identity img{width:clamp(72px,calc(30dvh - 130px),190px)}
#loginScreen .login-card{padding:clamp(14px,2.3vh,26px) 30px!important}
#loginScreen .login-divider{margin:clamp(10px,1.8vh,18px) 0}
#loginScreen .login-card label{margin-bottom:10px}
#loginScreen .login-card input{height:44px;margin-top:5px}
#loginScreen .password-field button{top:9px}
#loginScreen .login-assistance{margin:0 0 10px}
#loginScreen .login-turnstile{margin:10px 0;gap:6px}
#loginScreen .login-button{min-height:46px;margin-top:4px}
#loginScreen .login-trust{margin-top:10px!important}
@media(max-width:900px){
 #loginScreen{padding:12px 16px;grid-template-rows:minmax(min-content,1fr) auto;row-gap:10px;align-content:center}
 #loginScreen .login-story,#loginScreen .login-signature{display:none}
 #loginScreen .login-card{grid-row:1;align-self:center;padding:20px!important}
 #loginScreen .login-dignity{grid-row:2}
 #loginScreen .login-identity img{width:clamp(64px,calc(30dvh - 130px),138px)}
}
@media(max-height:680px){
 #loginScreen{padding-top:10px;padding-bottom:10px;row-gap:8px}
 #loginScreen .login-card{padding:12px 20px!important}
 #loginScreen .login-identity img{width:64px}
 #loginScreen .login-identity h1{font-size:18px;margin:5px 0}
 #loginScreen .login-identity p{font-size:10px}
 #loginScreen .login-divider{margin:10px 0}
 #loginScreen .login-trust,#loginScreen .login-signature,#loginScreen .login-dignity{display:none}
 #loginScreen{grid-template-rows:minmax(min-content,1fr)}
 #loginScreen .login-mission{line-height:1.8}
 #loginScreen .login-values{gap:8px;font-size:9px}
}
@media(max-width:380px){
 #loginScreen{padding-left:6px;padding-right:6px}
 #loginScreen .login-card{padding-left:8px!important;padding-right:8px!important}
}
/* Give the desktop panel more presence when there is spare vertical room. */
@media(min-width:901px) and (min-height:760px){
 #loginScreen .login-card{min-height:calc(100dvh - 130px);display:flex;flex-direction:column;justify-content:center}
 #loginScreen .login-divider{margin-top:auto;margin-bottom:18px;padding-top:18px}
 #loginScreen .login-trust{margin-top:auto!important;padding-top:14px}
}