/* Dedicated 1024 × 1536 artwork, displayed at most 512 CSS px wide.
   Its aspect ratio and scale stay fixed: narrower gutters crop the artwork. */
:root { --side-art-width: min(512px, max(0px, calc((100vw - 1272px) / 2))); }
body { background: #fff; }
body::before,
body::after {
    width: var(--side-art-width);
    /* Duotone panels and paper dots soften the portraits into background texture. */
    background-image: radial-gradient(circle, #ffffffa8 .7px, transparent 1px),
        linear-gradient(145deg, #e60019 0 31%, #d9d9df 31.2% 56%, #ec001a 56.2% 77%, #d9d9df 77.2%),
        url('../img/side-art-2026.webp');
    background-size: 4px 4px, 512px 768px, 512px auto;
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: right top;
    background-blend-mode: screen, color, normal;
    opacity: .54;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%, #000),
        linear-gradient(to bottom, #000 0 44%, transparent 92%),
        repeating-linear-gradient(145deg, #000 0 144px, transparent 145px 155px, #000 156px 310px, transparent 311px 322px);
    mask-image: linear-gradient(to right, transparent, #000 45%, #000),
        linear-gradient(to bottom, #000 0 44%, transparent 92%),
        repeating-linear-gradient(145deg, #000 0 144px, transparent 145px 155px, #000 156px 310px, transparent 311px 322px);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
body::before {
    left: calc(50% - 636px - var(--side-art-width));
}
body::after {
    right: calc(50% - 636px - var(--side-art-width));
    /* Face the same illustration inward, retaining its natural proportions. */
    transform: scaleX(-1);
    filter: grayscale(1);
    opacity: .36;
}
.brand {
    --brand-size: 156px;
    width: var(--brand-size);
    height: calc(var(--brand-size) * .955);
    left: 20px;
    top: -17px;
    filter: drop-shadow(0 2px 3px #40000024);
}
.brand-mark {
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 0;
    clip-path: none;
    background-size: calc(var(--brand-size) * 8.22727273) calc(var(--brand-size) * 6.17045455);
    background-position: calc(var(--brand-size) * -.58522727) calc(var(--brand-size) * -.10227273);
    -webkit-mask-image: radial-gradient(ellipse 49.5% 49% at 50% 50%, #000 98.6%, transparent 100%);
    mask-image: radial-gradient(ellipse 49.5% 49% at 50% 50%, #000 98.6%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.brand-image { width: 100%; height: 100%; object-fit: contain; }
.masthead { padding-left: 208px; }
@media (max-width: 1272px) {
    body::before, body::after { display: none; }
}
@media (max-width: 1250px) {
    .brand { --brand-size: 144px; left: 14px; top: -14px; }
    .masthead { padding-left: 180px; }
}
@media (max-width: 1080px) {
    .brand { --brand-size: 136px; top: -12px; }
    .masthead { padding-left: 170px; }
}
@media (max-width: 760px) {
    .brand { --brand-size: 94px; left: 10px; top: -22px; }
    .masthead { padding-left: 116px; }
}
@media (max-width: 400px) {
    .brand { --brand-size: 86px; left: 8px; top: -20px; }
    .masthead { padding-left: 104px; }
}