@font-face {
    font-family: "StartPage Roboto Condensed";
    src: url("../fonts/RobotoCondensed-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: #000; }
body.startpage {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    color: #bdbdbd;
    font-family: "StartPage Roboto Condensed", "Arial Narrow", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.startpage__background { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.startpage__background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.startpage__header { position: absolute; top: 36px; left: 0; width: 100%; text-align: center; }
.startpage__logo { display: inline-block; width: 164px; height: auto; }
.startpage__main { display: grid; min-height: 100vh; min-height: 100svh; padding: 110px 24px 70px; }
.startpage__content { width: 100%; max-width: 620px; margin: auto; text-align: center; transform: translateY(-28px); }
.startpage__heading { margin: 0; font-weight: 900; }
.startpage__headline { display: block; color: #b60018; font-size: 78px; line-height: 1.1; }
.startpage__subheadline { display: block; margin-top: 3px; font-size: 58px; line-height: 1.12; }
.startpage__tagline { margin: 5px 0 0; color: #a4a4a4; font-size: 30px; line-height: 1.4; }
.startpage__form { position: relative; max-width: 582px; margin: 96px auto 0; }
.startpage__password {
    display: block; width: 100%; height: 104px; padding: 20px 58px;
    border: 1px solid #777; border-radius: 0; background: rgb(0 0 0 / 30%);
    color: #bdbdbd; font: inherit; font-size: 30px; line-height: 1.2; text-align: center;
    appearance: none; transition: border-color 150ms;
}
.startpage__password::placeholder { color: #707070; opacity: 1; }
.startpage__password:focus-visible { outline: 2px solid #b60018; outline-offset: 4px; border-color: #bdbdbd; }
.startpage__submit {
    position: absolute; top: 1px; right: 1px; display: grid; place-items: center;
    width: 54px; height: 102px; padding: 0; border: 0; background: transparent;
    color: #bdbdbd; cursor: pointer; opacity: 0; transition: opacity 150ms;
}
.startpage__form:focus-within .startpage__submit,
.startpage__form:hover .startpage__submit,
.startpage__password:not(:placeholder-shown) + .startpage__submit { opacity: 1; }
.startpage__submit:focus-visible { outline: 2px solid #b60018; outline-offset: -5px; opacity: 1; }
.startpage__submit:hover { color: #e50019; }
.startpage__error { margin: 16px 0 0; color: #ff7081; font-size: 18px; line-height: 1.4; }
.startpage__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 767px) {
    .startpage__header { top: max(28px, env(safe-area-inset-top)); }
    .startpage__logo { width: 145px; }
    .startpage__main { padding: 100px 24px 70px; }
    .startpage__content { transform: translateY(-45px); }
    .startpage__headline { font-size: clamp(43px, 11.2vw, 70px); }
    .startpage__subheadline { margin-top: 5px; font-size: clamp(34px, 8.5vw, 52px); }
    .startpage__tagline { max-width: 330px; margin: 10px auto 0; font-size: 20px; line-height: 1.35; }
    .startpage__form { margin-top: 58px; }
    .startpage__password { height: 72px; padding: 16px 48px; font-size: 22px; }
    .startpage__submit { width: 46px; height: 70px; opacity: 1; }
}
@media (max-height: 550px) and (min-width: 768px) {
    .startpage__header { top: 20px; }
    .startpage__main { padding-top: 85px; padding-bottom: 35px; }
    .startpage__content { transform: none; }
    .startpage__headline { font-size: 56px; }
    .startpage__subheadline { font-size: 42px; }
    .startpage__tagline { font-size: 23px; }
    .startpage__form { margin-top: 32px; }
    .startpage__password { height: 72px; }
    .startpage__submit { height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
    .startpage__password, .startpage__submit { transition: none; }
}