/* ============================================================
   THE ACCOUNT DOOR — wp-login.php, restyled.

   Written against the real markup of WordPress 7.1, read off the
   server rather than guessed at:

     body.login.loopa-login
     .loopa-gate__art          our own, printed by login_header
     #login                    the column WordPress gives us
       h1.wp-login-logo > a    the wordmark link
       #login_error            wp_admin_notice(), type error
       .notice.notice-info     wp_admin_notice(), type info
       form#loginform          also #lostpasswordform, #resetpassform
         #user_login, #user_pass, #wp-submit
         p.forgetmenot
       p#nav                   "Lost your password?"
       p#backtoblog            "Go to <site>"
       .privacy-policy-page-link
     .loopa-gate__origin       our own, printed by login_footer

   WordPress ships SEVEN stylesheets before this file - dashicons,
   buttons, forms, l10n, admin-schemes, wp-tooltip and login - so most
   rules here are overrides rather than declarations. Where that is the
   case the comment says so, because a rule that looks redundant is
   exactly the one somebody deletes.

   Verify against verify/login-real.html, which is the page as the
   server actually sent it with all seven loaded locally. An earlier
   hand-written harness loaded only login.css and that is precisely why
   this looked right here and fell apart on staging.

   ONE ACCOUNT, NOT ONE PER EVENT. The mark is the plain wordmark and
   never the event numeral: a player may enter Loopa I, II and III on
   one account, so the door does not belong to any single event.
   ============================================================ */

:root{
  --ocean-bk:#061c22;
  --ocean-dp:#0a2b33;
  --paper-hi:#fdf1d4;
  --rule-dk:rgba(228,199,126,.22);
  --gold:#c9a227;
  --gold-lt:#e4c77e;
  --terra:#c0461d;   /* matches main.css: cream on terracotta needs 4.5 */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- box-sizing ----------
   WordPress's login.css does NOT set a global border-box reset - it applies
   box-sizing to one admin-email screen under 782px and nowhere else. Every
   `width:100%` below sits next to horizontal padding, so without this the page
   overflows by exactly the padding and scrolls sideways at every width. It did.
   Scoped to the login screen so nothing else on the site is touched. */
body.loopa-login,
body.loopa-login *,
body.loopa-login *::before,
body.loopa-login *::after{box-sizing:border-box}

/* ---------- the screen ---------- */
body.loopa-login{
  /* WordPress sets a light background and a min-width; both go. */
  min-width:0;
  background:var(--ocean-bk);
  color:var(--paper-hi);
  font-family:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-weight:300;
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  min-height:100svh;
  margin:0;
  padding:0;
}

/* ---------- the picture ---------- */
.loopa-gate__art{
  position:relative;overflow:hidden;
  min-height:32svh;
  background:var(--ocean-dp);
}
.loopa-gate__art img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 46%;
  /* the site grade, so this reads as the same picture as everywhere else */
  filter:brightness(.93) contrast(1.06) saturate(.82) sepia(.16) hue-rotate(-8deg);
}
/* the wash keeps the caption legible whatever the photograph does */
.loopa-gate__art::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,28,34,.3) 0%,rgba(6,28,34,.5) 48%,rgba(5,24,29,.88) 100%);
}
/* Its own dark ground, not the wash. Cream over a photograph has no
   guaranteed contrast: against the worst case the picture can present - a white
   region where the wash is thinnest - the caption measured 2.70:1. A gradient
   that reaches .82 of near-black under the text makes the ratio a property of
   the design instead of a property of whichever frame ends up here. */
.loopa-gate__cap{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:clamp(30px,4.4vw,52px) clamp(20px,3.4vw,40px) clamp(20px,3.4vw,40px);
  background:linear-gradient(180deg,rgba(5,24,29,0) 0%,rgba(5,24,29,.76) 38%,rgba(5,24,29,.92) 100%);
}
.loopa-gate__cap p{
  margin:0;max-width:34ch;
  font-size:clamp(13px,1.5vw,15.5px);line-height:1.7;
  /* .88 measured 3.95:1 against the band's pessimistic floor - just under. */
  color:rgba(253,241,212,.96);
}
.loopa-gate__cap b{
  display:block;margin-bottom:8px;font-weight:400;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:clamp(19px,2.6vw,26px);letter-spacing:.08em;
  color:var(--paper-hi);
}

/* ---------- the column WordPress gives us ----------
   #login is 320px wide with a percentage top padding by default. Both
   are replaced: this is a full column, vertically centred, and the
   form inside it is the only thing that has a max width. */
body.loopa-login #login{
  width:100%;max-width:none;
  /* Little bottom padding: the origin note follows and carries its own. On the
     screens without it (resetpass, checkemail) the note's absence leaves a
     tighter foot, which is right for a screen that is only a message. */
  padding:clamp(30px,5vw,64px) clamp(20px,5vw,56px) clamp(22px,3vw,30px);
  margin:0;
  display:flex;flex-direction:column;
  justify-content:center;
  gap:0;
}
/* everything inside shares one measure and one left edge */
body.loopa-login #login > *{
  width:100%;max-width:404px;
  margin-inline:auto;
}

/* ---------- the wordmark ----------
   WordPress prints its own logo as a background-image on the anchor and
   hides the text with text-indent. Both are replaced: the anchor gets our
   wordmark as an inline SVG background and keeps its accessible text. */
body.loopa-login h1.wp-login-logo{
  margin:0 0 clamp(24px,4vw,40px);
  padding:0;
  order:1;
}
body.loopa-login h1.wp-login-logo a{
  display:block;
  width:clamp(122px,15vw,158px);
  height:0;
  padding-top:28.24%;            /* 704.887 x 199.166, the wordmark's own ratio */
  margin:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 704.887 199.166'%3E%3Cg transform='translate(-147 -742)' fill='%23fdf1d4'%3E%3Cpath d='M0,0H20V199H0Z' transform='translate(147 742)'/%3E%3Cpath d='M0,0H11V199H0Z' transform='translate(173 742)'/%3E%3Cpath d='M0,13.774,15,0V105H0Z' transform='translate(278 926) rotate(90)'/%3E%3Cpath d='M86.5,163A76.5,76.5,0,1,0,46,21.584V151.415A75.929,75.929,0,0,0,86.5,163m0,10A86.119,86.119,0,0,1,36,156.736V16.264A86.5,86.5,0,1,1,86.5,173Z' transform='translate(199 749)'/%3E%3Cpath d='M0,0H11V199H0Z' transform='translate(567 742)'/%3E%3Cpath d='M20.008,199.166h0ZM20,199H0V0H10.459l0,.023a77.812,77.812,0,0,1,28.918,6.27,78.459,78.459,0,0,1,13.251,7.26A78.934,78.934,0,0,1,73.69,34.741a78.523,78.523,0,0,1,7.186,13.3,78.808,78.808,0,0,1,0,60.916,78.489,78.489,0,0,1-7.186,13.3,78.934,78.934,0,0,1-21.061,21.187,78.458,78.458,0,0,1-13.251,7.26A77.626,77.626,0,0,1,20,156.173V199l.008.168ZM20,44V145.036a66.7,66.7,0,0,0,15.051-4.442,67.423,67.423,0,0,0,11.388-6.241,67.9,67.9,0,0,0,18.122-18.23,67.469,67.469,0,0,0,6.178-11.434,67.81,67.81,0,0,0,0-52.378,67.461,67.461,0,0,0-6.178-11.433A67.917,67.917,0,0,0,46.438,22.647,67.485,67.485,0,0,0,35.05,16.406,66.746,66.746,0,0,0,20,11.964Z' transform='translate(583 742)'/%3E%3Cpath d='M0,86.5A86.323,86.323,0,0,1,31,20.15v132.7A86.323,86.323,0,0,1,0,86.5Z' transform='translate(199 749)'/%3E%3Cpath d='M86.5,163A76.5,76.5,0,1,0,46,21.584V151.415A75.929,75.929,0,0,0,86.5,163m0,10A86.119,86.119,0,0,1,36,156.736V16.264A86.5,86.5,0,1,1,86.5,173Z' transform='translate(382 749)'/%3E%3Cpath d='M0,86.5A86.323,86.323,0,0,1,31,20.15v132.7A86.323,86.323,0,0,1,0,86.5Z' transform='translate(382 749)'/%3E%3Cpath d='M694.589,351.807h-10.5l67.452-153.772,63.732,153.772H803.438L749.862,223.133Z' transform='translate(-2 589)'/%3E%3Cpath d='M0,0H87V10H0Z' transform='translate(704 901)'/%3E%3Cpath d='M754.868,191.891,771.144,153l82.743,197.982H820.315Z' transform='translate(-2 589)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left top;
  background-size:contain;
  /* WordPress's own hiding trick, kept: the link text stays for a screen
     reader and the mark is the only thing drawn. */
  overflow:hidden;
  text-indent:-9999px;
  outline-offset:6px;
}

/* ---------- the form ----------
   #loginform, #lostpasswordform and #resetpassform share a shape, so they
   share the rules. WordPress gives them a white card, a border and a
   shadow; all three go. */
body.loopa-login form{
  order:3;
  margin:0;padding:0;
  background:none;border:0;box-shadow:none;
  font-weight:300;
}
body.loopa-login form p{margin:0 0 18px}
body.loopa-login form p:last-of-type{margin-bottom:0}

body.loopa-login form label{
  display:block;
  margin-bottom:7px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(253,241,212,.72);
  line-height:1.4;
}

body.loopa-login input[type=text],
body.loopa-login input[type=email],
body.loopa-login input[type=password]{
  width:100%;
  min-height:52px;
  padding:0 15px;
  background:rgba(253,241,212,.05);
  border:1px solid var(--rule-dk);
  border-radius:0;
  box-shadow:none;
  color:var(--paper-hi);
  font-family:'Jost',sans-serif;font-size:15px;font-weight:300;
  transition:border-color .3s var(--ease),background-color .3s var(--ease);
}
body.loopa-login input[type=text]:focus,
body.loopa-login input[type=email]:focus,
body.loopa-login input[type=password]:focus{
  outline:none;
  border-color:var(--gold-lt);
  background:rgba(253,241,212,.08);
  box-shadow:none;
}
body.loopa-login input::placeholder{color:rgba(253,241,212,.38)}

/* ---------- the show/hide-password button ----------
   Two things put the eye 26px above the field.

   WordPress makes `.wp-pwd` 68px tall around a 52px input, so its 50% is 8px
   below the field's - pinned to the input's own height here.

   And `.login .wp-pwd button.wp-hide-pw` is specificity (0,2,2), which beat the
   (0,1,2) this rule used to have, so the position never applied at all. Every
   selector below is deliberately at least (0,3,2). It reads as overkill and it
   is not: WordPress will win any tie. */
body.loopa-login .wp-pwd{
  position:relative;display:block;
  min-height:52px;
  height:auto;                    /* resetpass also nests the strength meter here */
}
body.loopa-login .wp-pwd input[type=password],
body.loopa-login .wp-pwd input[type=text]{padding-right:78px}
body.loopa-login .wp-pwd button.wp-hide-pw{
  position:absolute;right:4px;top:26px;transform:translateY(-50%);
  width:auto;height:auto;min-height:44px;min-width:44px;padding:0 12px;
  margin:0;
  background:none;border:0;box-shadow:none;border-radius:0;
  color:var(--gold);
  transition:color .3s var(--ease);
}
body.loopa-login .wp-pwd button.wp-hide-pw:hover{color:var(--gold-lt)}
body.loopa-login .wp-pwd button.wp-hide-pw:focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:2px;
}
body.loopa-login .wp-pwd button.wp-hide-pw .dashicons{
  width:20px;height:20px;font-size:20px;line-height:20px;
  color:inherit;
}

/* "Remember me" */
body.loopa-login form p.forgetmenot{
  display:flex;align-items:center;
  margin:12px 0 20px !important;
  font-size:12.5px;color:rgba(253,241,212,.78);
}
body.loopa-login form p.forgetmenot label{
  display:flex;align-items:center;
  margin:0;font-size:12.5px;letter-spacing:.02em;text-transform:none;
  color:rgba(253,241,212,.78);
}
body.loopa-login input[type=checkbox]{
  /* 24 square, which is what SC 2.5.8 asks for. WordPress ships it at 20. */
  width:24px;height:24px;
  margin:0 8px 0 0;
  border:1px solid var(--rule-dk);border-radius:0;
  background:rgba(253,241,212,.05);
  box-shadow:none;
}
body.loopa-login input[type=checkbox]:checked{
  background:var(--gold);border-color:var(--gold);
}
body.loopa-login input[type=checkbox]:checked::before{
  content:"";
  /* the tick, drawn rather than a dashicon, so it lands in the box */
  display:block;width:100%;height:100%;
  background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23061c22' stroke-width='2.4'/%3E%3C/svg%3E");
  margin:0;
}

/* the submit */
body.loopa-login .submit{margin:0}
body.loopa-login #wp-submit{
  display:flex;align-items:center;justify-content:center;
  width:100%;
  min-height:54px;
  padding:0 24px;
  background:var(--terra);
  border:1px solid var(--terra);
  border-radius:0;
  box-shadow:none;
  text-shadow:none;
  /* White, not the paper cream: cream on terracotta measures 4.38:1 and
     this is the primary action on the screen. White is 4.92. */
  color:#fff;
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:19px;line-height:1;letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .35s var(--ease),border-color .35s var(--ease);
}
body.loopa-login #wp-submit:hover{background:#9d360f;border-color:#9d360f}
body.loopa-login #wp-submit:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}

/* ---------- notices ----------
   WP 7.1 renders both through wp_admin_notice(), so they arrive as
   .notice with an id of login_error on the error. The legacy .message
   selector is kept because a downgrade should not un-style the page. */
body.loopa-login #login_error,
body.loopa-login .notice,
body.loopa-login .message{
  order:2;
  margin:0 auto clamp(18px,2.6vw,24px);
  padding:13px 15px;
  border:1px solid var(--rule-dk);
  border-left-width:3px;
  border-radius:0;
  background:rgba(253,241,212,.05);
  box-shadow:none;
  font-size:13px;line-height:1.7;
  color:var(--paper-hi);
}
body.loopa-login #login_error,
body.loopa-login .notice-error{
  border-color:var(--terra);
  background:rgba(196,71,30,.14);
}
body.loopa-login .notice-info,
body.loopa-login .message{
  border-color:var(--gold);
  background:rgba(201,162,39,.1);
}
body.loopa-login #login_error p,
body.loopa-login .notice p,
body.loopa-login .message p{margin:0}
body.loopa-login #login_error p + p,
body.loopa-login .notice p + p{margin-top:8px}
body.loopa-login .login-error-list{margin:0;padding-left:18px}
body.loopa-login #login_error strong,
body.loopa-login .notice strong,
body.loopa-login .message strong{font-weight:400}
body.loopa-login #login_error a,
body.loopa-login .notice a,
body.loopa-login .message a{color:var(--gold-lt)}

/* ---------- alignment, stated rather than inherited ----------
   Every element in this column says where its text goes. I could not reproduce
   the right-aligned "Lost your password?" from the client's screenshot - the
   harness has the same eight stylesheets, the same body classes and no inline
   style, and puts both anchors at the form's own left edge - so instead of
   guessing at a rule I cannot see, nothing here inherits an alignment it could
   get wrong. `text-align:left` rather than `start`: `start` follows the writing
   direction, and if anything ever sets `direction:rtl` on an ancestor, `start`
   becomes the right-hand edge and `left` does not. */
body.loopa-login #login,
body.loopa-login #login > *,
body.loopa-login #login p,
body.loopa-login #login h1,
body.loopa-login p#nav,
body.loopa-login p#backtoblog,
body.loopa-login .privacy-policy-page-link,
body.loopa-login .loopa-gate__origin,
body.loopa-login .loopa-gate__origin p{
  text-align:left;
  direction:ltr;
}
/* the submit is the one thing that is centred, because its label is centred
   inside a full-width button rather than aligned to the column */
body.loopa-login #wp-submit{text-align:center}

/* ---------- the links under the form ---------- */
body.loopa-login p#nav{
  order:4;
  margin:clamp(16px,2.4vw,20px) auto 0;
  padding:0;
  background:none;border:0;
  font-size:12.5px;
  color:rgba(253,241,212,.7);
}
body.loopa-login p#nav a,
body.loopa-login p#backtoblog a,
body.loopa-login .privacy-policy-page-link a{
  display:inline-block;
  padding:8px 2px;
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.4);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
body.loopa-login p#nav a:hover,
body.loopa-login p#backtoblog a:hover,
body.loopa-login .privacy-policy-page-link a:hover{
  color:var(--gold-lt);border-bottom-color:var(--gold-lt);
}

/* How an account comes to exist.

   printed by login_footer, which fires at wp-login.php line 442 - AFTER the
   </div> that closes #login at line 358. So this is a sibling of the column,
   not a child of it, and it is placed by the grid rather than by `order`. The
   border and the measure live on the paragraph because the div is carrying the
   page gutters. */
body.loopa-login .loopa-gate__origin{
  width:100%;
  margin:0;
  padding:0 clamp(20px,5vw,56px) clamp(30px,5vw,56px);
}
body.loopa-login .loopa-gate__origin p{
  max-width:404px;margin:0 auto;
  padding-top:clamp(20px,3vw,26px);
  border-top:1px solid var(--rule-dk);
  font-size:12.5px;line-height:1.75;
  color:rgba(253,241,212,.7);
}
body.loopa-login .loopa-gate__origin b{color:var(--paper-hi);font-weight:400}
body.loopa-login .loopa-gate__origin a{
  display:inline-block;padding:8px 2px;
  color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.4);
}
body.loopa-login .loopa-gate__origin a:hover{
  color:var(--gold-lt);border-bottom-color:var(--gold-lt);
}

body.loopa-login p#backtoblog{
  order:6;
  margin:clamp(18px,2.6vw,24px) auto 0;
  padding:0;
  font-size:12px;
  color:rgba(253,241,212,.6);
}
body.loopa-login .privacy-policy-page-link{
  order:7;
  margin:10px auto 0;
  text-align:left;
  font-size:12px;
}

/* ---------- WordPress 7.1's tooltip ----------
   New in 7.1: a help toggle beside "Remember Me". It is an admin affordance -
   wp-tooltip.min.css paints the glyph #50575e, which on this ground measures
   2.39:1 and reads as a smudge - and on a player's sign-in screen a "?" bubble
   explaining a checkbox is clutter. "Remember Me" needs no gloss.

   Hidden rather than restyled. I tried restyling it and lost: the colour sits on
   the button and inherits to the glyph, and overriding it did not take even at
   higher specificity with the cache busted. Hiding it is one line, cannot lose a
   specificity argument, and is the better design anyway - so the reason this is
   display:none is design first and stubbornness second.

   aria-hidden is not needed: display:none takes it out of the accessibility
   tree too, and the checkbox keeps its own label. */
body.loopa-login .wp-tooltip__toggle,
body.loopa-login .wp-tooltip__bubble{display:none !important}
body.loopa-login .wp-tooltip{display:inline}

/* the password-strength meter on the reset screen */
body.loopa-login #pass-strength-result{
  margin:10px 0 8px;padding:10px 12px;
  border:1px solid var(--rule-dk);border-radius:0;
  background:rgba(253,241,212,.04);
  color:rgba(253,241,212,.82);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;
}
body.loopa-login #pass-strength-result.short,
body.loopa-login #pass-strength-result.bad{border-color:var(--terra);background:rgba(196,71,30,.12)}
body.loopa-login #pass-strength-result.good{border-color:var(--gold);background:rgba(201,162,39,.1)}
body.loopa-login #pass-strength-result.strong{border-color:#7fa86b;background:rgba(127,168,107,.12);color:#a9cd93}
body.loopa-login .indicator-hint,
body.loopa-login .description{
  font-size:11.5px;line-height:1.65;
  color:rgba(253,241,212,.6);
}

/* WordPress puts both reset actions in one flex row and leaves its secondary
   action in admin blue. On this narrow account door they are a deliberate
   vertical pair: same target size, a clear gap, primary action last. */
body.loopa-login .reset-pass-submit{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:24px !important;
}
body.loopa-login .reset-pass-submit .wp-generate-pw,
body.loopa-login .reset-pass-submit #wp-submit{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:54px;
  margin:0;
  border-radius:0;
  box-shadow:none;
  text-shadow:none;
}
body.loopa-login .reset-pass-submit .wp-generate-pw{
  padding:0 24px;
  background:transparent;
  border:1px solid var(--gold);
  color:var(--paper-hi);
  font-family:'Bebas Neue',Impact,sans-serif;
  font-size:18px;line-height:1;letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
body.loopa-login .reset-pass-submit .wp-generate-pw:hover{
  background:rgba(201,162,39,.12);
  border-color:var(--gold-lt);
  color:#fff;
}
body.loopa-login .reset-pass-submit .wp-generate-pw:focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:3px;
}

/* WordPress's language switcher is filtered off, but if a plugin puts one
   back it should not be the only unstyled thing on the page. */
body.loopa-login .language-switcher{order:8;margin-top:18px}

/* ---------- two columns once there is room ---------- */
@media (min-width:900px){
  /* Three rows so the pair in column two can be centred as a pair: the two
     1fr rows do the centring, the middle two hold the form and the note. */
  body.loopa-login{
    grid-template-columns:1.02fr .98fr;
    grid-template-rows:1fr auto auto 1fr;
  }
  .loopa-gate__art{grid-column:1;grid-row:1 / -1;min-height:100svh}
  body.loopa-login #login{grid-column:2;grid-row:2;align-items:flex-start}
  body.loopa-login #login > *{margin-inline:0}
  body.loopa-login .loopa-gate__origin{grid-column:2;grid-row:3;padding-bottom:0}
  /* Each of these sets `margin: <top> auto 0` in its own rule further up, and a
     shorthand re-introduces the `auto` this branch is trying to remove. Zeroing
     `#login > *` is not enough - the inline axis has to be named per element, or
     the column ends up with the form on the left and its own links centred 95px
     to the right of it. Which is exactly what the client photographed. */
  body.loopa-login .loopa-gate__origin p,
  body.loopa-login p#nav,
  body.loopa-login p#backtoblog,
  body.loopa-login .privacy-policy-page-link,
  body.loopa-login h1.wp-login-logo,
  body.loopa-login form,
  body.loopa-login #login_error,
  body.loopa-login .notice{margin-inline:0}
}

/* ---------- interim login ----------
   The little popup WordPress shows when a session expires inside the admin.
   It has no room for a photograph and no business having one. */
body.loopa-login.interim-login .loopa-gate__art,
body.loopa-login.interim-login .loopa-gate__origin,
body.loopa-login.interim-login p#backtoblog{display:none}
body.loopa-login.interim-login{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
body.loopa-login.interim-login #login{padding:24px}

@media (prefers-reduced-motion:reduce){
  body.loopa-login input,
  body.loopa-login #wp-submit,
  body.loopa-login button.wp-hide-pw,
  body.loopa-login p#nav a,
  body.loopa-login .loopa-gate__origin a{transition:none}
}
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-ext.woff2') format('woff2');font-weight:200 500;font-style:normal;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('../fonts/bebas-neue-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}