:root {
    --brand-coral: #f15a24;
    --brand-coral-deep: #c53f0d;
    --brand-peach: #f79355;
    --brand-ink: #000000;
}

.brand-wordmark,
.intro-wordmark {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 112px;
    aspect-ratio: 856 / 326;
}

.brand-wordmark::before,
.brand-wordmark::after,
.intro-wordmark::before,
.intro-wordmark::after {
    position: absolute;
    inset: 0;
    content: "";
    -webkit-mask: url("uploads/prh-brand-mask.png") center / contain no-repeat;
    mask: url("uploads/prh-brand-mask.png") center / contain no-repeat;
}

.brand-wordmark::before,
.intro-wordmark::before {
    background: var(--brand-coral);
    clip-path: inset(0 82% 0 0);
}

.brand-wordmark::after,
.intro-wordmark::after {
    background: var(--brand-ink);
    clip-path: inset(0 0 0 18%);
}

.app-header {
    border-top: 3px solid var(--brand-coral);
}

.brand-block > div {
    min-width: 0;
}

.brand-block > div > span {
    display: block;
    font-size: 13px;
    line-height: 1.25;
}

.navigation-band nav {
    border-left: 3px solid var(--brand-coral);
}

.navigation-band nav a:hover,
.navigation-band nav a:focus-visible {
    color: var(--brand-coral-deep);
}

.login-card {
    border-top: 3px solid var(--brand-coral);
}

.login-brand {
    align-items: center;
}

.login-brand .brand-wordmark {
    width: 140px;
}

.login-brand p {
    max-width: 170px;
    margin-top: 0;
    line-height: 1.25;
}

.login-form button {
    background: var(--brand-coral-deep);
    border-color: var(--brand-coral-deep);
}

.login-form button:hover {
    background: #8e311b;
}

.login-form input:focus,
.login-form select:focus {
    border-color: var(--brand-coral-deep);
    box-shadow: 0 0 0 3px rgb(246 111 67 / 18%);
}

.intro-mark {
    width: min(80vw, 420px);
    height: 180px;
    aspect-ratio: auto;
    background: var(--brand-ink);
    border-color: var(--brand-ink);
}

.intro-wordmark {
    width: min(66vw, 260px);
}

html[data-theme="dark"] .brand-wordmark::after,
html[data-theme="Oscuro"] .brand-wordmark::after,
.intro-wordmark::after {
    background: #ffffff;
}

html[data-theme="dark"] .navigation-band nav a:hover,
html[data-theme="Oscuro"] .navigation-band nav a:hover,
html[data-theme="dark"] .navigation-band nav a:focus-visible,
html[data-theme="Oscuro"] .navigation-band nav a:focus-visible {
    color: var(--brand-peach);
}

@media (max-width: 640px) {
    .brand-block {
        gap: 8px;
        padding-right: 98px;
    }

    .brand-block .brand-wordmark {
        width: 100px;
    }

    .login-brand {
        gap: 12px;
    }

    .login-brand .brand-wordmark {
        width: 116px;
    }
}