/* Early-access page. The site's own paper, ink, oxblood and type (assets/front/front.css, mirp-logo.css),
   copied so this page needs nothing behind the gate. No boxes, cards, shadows or blur; nothing moves. */

@font-face{font-family:"Fraunces";src:url(/login-assets/fraunces.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/login-assets/fraunces-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/login-assets/atkinson-next.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

/* Light: ivory paper (the default). */
:root,
:root:has(input[data-paper][value="light"]:checked){color-scheme:light;--paper:#f6f0e6;--paper2:#efe6d8;--ink:#1e1a17;--ink2:#5a524b;--ink3:#6a6158;--ox:#8e2f2a;--hair:#dcd1c1;--hair2:#c4b6a1;--lg-ox:#8e2a2a;--lg-blue:#24408e}
:root{--gut:clamp(16px,4vw,48px);--wide:1248px;--serif:"Fraunces","Iowan Old Style",Georgia,serif;--sans:"Atkinson Hyperlegible Next",-apple-system,system-ui,sans-serif}

/* Dark: the site's own tokens; the system setting decides until the reader chooses. */
@media (prefers-color-scheme:dark){
:root:not([data-reading-mode]){color-scheme:dark;--paper:#121010;--paper2:#1a1716;--ink:#e8dfd2;--ink2:#b3a899;--ink3:#a39887;--ox:#d9776a;--hair:#36302d;--hair2:#4a423d;--lg-ox:#c0564f;--lg-blue:#7590d6}
}
:root[data-reading-mode=dark],
:root:has(input[data-paper][value="dark"]:checked){color-scheme:dark;--paper:#121010;--paper2:#1a1716;--ink:#e8dfd2;--ink2:#b3a899;--ink3:#a39887;--ox:#d9776a;--hair:#36302d;--hair2:#4a423d;--lg-ox:#c0564f;--lg-blue:#7590d6}

/* Low glare: warm dim paper, softer ink. */
:root[data-reading-mode=low-glare],
:root:has(input[data-paper][value="low-glare"]:checked){color-scheme:dark;--paper:#302a26;--paper2:#40372f;--ink:#c9bdae;--ink2:#bdb1a1;--ink3:#b0a493;--ox:#d09e8b;--hair:#706257;--hair2:#9c8b79;--lg-ox:#c98579;--lg-blue:#98a2bd}
/* /join starts on Low glare until the reader chooses (its readers may find light painful); without JavaScript too. */
:root[data-default-paper=low-glare]:not([data-reading-mode]){color-scheme:dark;--paper:#302a26;--paper2:#40372f;--ink:#c9bdae;--ink2:#bdb1a1;--ink3:#b0a493;--ox:#d09e8b;--hair:#706257;--hair2:#9c8b79;--lg-ox:#c98579;--lg-blue:#98a2bd}
/* A Paper choice on this page (the :has selectors) outranks the system setting and the stored choice,
   so it works without JavaScript too. */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);font-variant-numeric:lining-nums}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}

/* The masthead: the MIRP wordmark, a hairline, the name as a two-line imprint. */
.bar{border-bottom:1px solid var(--hair)}
.bar-in{display:flex;align-items:center;max-width:calc(var(--wide) + 2*var(--gut));min-height:64px;margin:0 auto;padding:0 var(--gut)}
.wm{display:flex;align-items:center;gap:13px;margin:0;color:var(--ink)}
.wm-logo{display:flex;align-items:center}
.mirp-word{display:block;height:38px;width:auto;overflow:visible}
.fi{fill:var(--ink)}.si{stroke:var(--ink)}.so{stroke:var(--lg-ox)}.sb{stroke:var(--lg-blue)}.fb{fill:var(--lg-blue)}
.wm-n{display:flex;flex-direction:column;gap:3px;padding:1px 0 1px 13px;border-left:1px solid var(--hair2);font:430 13.5px/1.12 var(--serif);font-variation-settings:"opsz" 14;letter-spacing:.012em;color:var(--ink2)}
.wm-n2{font-style:italic;font-weight:400}

/* The page */
.wrap{max-width:calc(var(--wide) + 2*var(--gut));margin:0 auto;padding:0 var(--gut) 72px}
h1{max-width:18ch;margin:clamp(40px,9vh,104px) 0 28px;font:400 clamp(34px,4.2vw,56px)/1.08 var(--serif);letter-spacing:-.02em;font-variation-settings:"opsz" 144;text-wrap:balance;color:var(--ink)}
.err{max-width:34rem;margin:0 0 26px;font:600 17px/1.5 var(--sans);color:var(--ink)}

.signin{max-width:26rem;margin:0}
.field{margin:0 0 24px}
label{display:block;margin:0 0 6px;font:700 15px/1.4 var(--sans);color:var(--ink)}
input[type=text],input[type=password]{display:block;width:100%;min-height:48px;margin:0;padding:10px 2px 8px;font:400 18px/1.4 var(--sans);color:var(--ink);caret-color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink3);border-radius:0;-webkit-appearance:none;appearance:none}
input[type=text]:focus,input[type=password]:focus{outline:2px solid var(--ox);outline-offset:3px;border-bottom-color:var(--ink)}
input[aria-invalid=true]{border-bottom-color:var(--ox)}
/* Browsers paint remembered logins on a bright fill; keep the paper. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--paper) inset;box-shadow:0 0 0 1000px var(--paper) inset;caret-color:var(--ink)}

.act{margin:30px 0 0}
button{min-width:44px;min-height:48px;margin:0;padding:13px 2px;font:700 18px/1 var(--sans);color:var(--ox);background:none;border:0;border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
button:hover{color:var(--ink)}
button:focus-visible{outline:2px solid var(--ox);outline-offset:3px}

.help{max-width:34rem;margin:36px 0 0;font:400 16px/1.5 var(--sans);color:var(--ink2)}
.help+.help{margin-top:12px}
.help a{color:var(--ox);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.help a:hover{color:var(--ink)}
.lede{max-width:34rem;margin:0 0 30px;font:400 18px/1.55 var(--sans);color:var(--ink2)}

.paper{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;min-width:0;margin:56px 0 0;padding:0;border:0;font:400 15px/1.45 var(--sans);color:var(--ink2)}
.paper legend{padding:0;margin:0 0 2px;font:700 15px/1.4 var(--sans);color:var(--ink2)}
.paper label{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;font:400 15px/1.45 var(--sans);color:var(--ink2);cursor:pointer}
/* Drawn radios: the native ones are white in Light and grey in the dark papers, neither of them the site's. */
.paper input{flex:none;width:18px;height:18px;margin:0;border:1.5px solid var(--ink2);border-radius:50%;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.paper input:checked{border-color:var(--ox);background:radial-gradient(circle,var(--ox) 0 4px,transparent 4.5px)}
.paper input:focus-visible{outline:2px solid var(--ox);outline-offset:3px}

@media (max-width:760px){.mirp-word{height:32px}}
@media (forced-colors:active){input[type=text],input[type=password]{border-bottom-color:CanvasText}.paper input{-webkit-appearance:auto;appearance:auto}button{color:LinkText}.fi{fill:CanvasText}.si,.so,.sb{stroke:CanvasText}.fb{fill:CanvasText}}