/* Same frame as the homepage opening, without the reveal: the circle paints its own slice of the glacier. */
.access-screen{color:var(--ink)}
.access-screen .intro-panel{opacity:1;visibility:visible}
.access-screen{--hero:url(/snowfields.webp);--hero-lqip:url("data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAADQBACdASoYABAAPu1iqU2ppaOiMAgBMB2JYwCdIIK//bf4Dq7jJ+8YhoApLGO0AAD+sAT9sM2E0z2o5rzG52k9KCCVpks0nKryFOjwSpSenSNYazZSCgwUKEGZfarGyY7+d/53wWsPIpL4wpJd+44BN5O5svQrFXEu/5ahHN+9Cspvfb7MxkrfYuMaDUKy/ji5n43LCAAAAA==");--hero-pos:50% 50%;--hero-dark:url(/snowfields-dark.webp);--hero-dark-lqip:url("data:image/webp;base64,UklGRpYAAABXRUJQVlA4IIoAAAAwBACdASoYABAAPu1iqU2ppaOiMAgBMB2JZQCsG1/tv8BDC+Y6NNixf0AA9wo2UxGvr31UmEvdXH3HeBz0kvtjBa6RzfLISP2VJyLkabk/J5Gh6eqOy+29E5aaKUC1GPhm7Dkqpc3umMrXO67C8aAEMtAbeVE/hqOr8dkwZtuhl6FRCwXzt2lEAAA=");--hero-dark-pos:50% 50%}
.access-screen .circle-origin{background:var(--hero) var(--hero-pos)/cover fixed,var(--hero-lqip) var(--hero-pos)/cover fixed,#18333e}
/* Its dark copy is a layer on top that fades with the theme, as on the homepage */
.access-screen .circle-origin::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:0}
[data-theme=dark] .access-screen .circle-origin::before,.both .access-screen .circle-origin::before{background:var(--hero-dark) var(--hero-dark-pos)/cover fixed,var(--hero-dark-lqip) var(--hero-dark-pos)/cover fixed,#24272b}
[data-theme=dark] .access-screen .circle-origin::before{opacity:1}
[data-theme=dark]:not(.both) .access-screen .circle-origin{background:#24272b}
.access-screen .intro-line{max-width:30ch}
.access-request{display:inline-flex;align-items:center;min-height:48px;margin-top:1.75rem;padding:.7rem 1.4rem;border-radius:4px;background:var(--ink);color:var(--paper);font-weight:500}
.access-request:hover{text-decoration:none;background:var(--button-hover)}

/* The request form, under the line; the circle stays where it is. A form taller than the window would otherwise lower
   the circle to the middle of the whole form, off where the homepage and Drops hold theirs, and a move between those pages
   would dissolve two circles that don't line up. Pinned to the middle of the window instead, the form scrolls past it. */
@media(min-width:721px){.access-screen .circle-origin{align-self:start;position:sticky;top:calc(50% - min(15.5vw,180px))}}
/* In a short window the homepage's footer is as tall as its arrow button and padding, a little over the footer's floor;
   this one has no arrow, so it takes the same height, or the middle of the window sits 3px off theirs. */
@media(max-height:580px) and (min-width:721px){.access-screen .circle-origin{top:calc(50% - 110px)}.access-screen .site-footer{min-height:calc(44px + 1.1rem)}}
.access-form{display:grid;gap:.9rem;max-width:30rem;margin-top:1.75rem;text-align:left}
.access-form .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.access-form label{display:grid;gap:.35rem;font-size:.85rem;opacity:.85}
.access-form input,.access-form textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--tint);border:1px solid var(--line);border-radius:4px;padding:.6rem .75rem;width:100%;box-sizing:border-box}
.access-form textarea{resize:vertical;min-height:5.5rem}
.access-form input:focus-visible,.access-form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.access-form .access-request{margin-top:.35rem;justify-self:start;border:0;font:inherit;font-weight:500;cursor:pointer}
.access-form .access-request:disabled{opacity:.6;cursor:default}
.access-form .trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;min-height:1.2em;font-size:.9rem}
.form-status[data-state=error]{color:#c2412d}
.form-done{margin:1.75rem 0 0;font-size:1.125rem;max-width:30ch}
@media(max-width:720px){.access-form{margin-inline:auto}.access-form .field-pair{grid-template-columns:1fr}.access-form .access-request{justify-self:stretch;justify-content:center}.form-done{margin-inline:auto}}