/* The "Skip to main content" link uses Bootstrap 4's class, which this Bootstrap 5
   CSS lacks; it took up 24px behind the header. Hidden until focused. */
.sr-only:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sr-only:focus {
    position: fixed;
    top: 48px;
    left: 8px;
    z-index: 10000;
    padding: 8px 12px;
    background-color: #DBEAD6;
    color: #0E0E12;
}

/* Plain scrolling in place of the old Swiper full-page slider (see site.js).
   Sections are at least one screen tall but grow to fit, so nothing is cut off. */
/* Smooth for in-page links only; site.js sets the class after load, so arriving on
   /#contact jumps straight there instead of gliding down the whole page. */
html.smooth-scroll {
    scroll-behavior: smooth;
}

#homepage .homepage-scroll {
    height: auto;
    min-height: 0;
    /* Not-yet-revealed content sits 100px off to the side (see the entrance animation). */
    overflow-x: hidden;
    overflow-x: clip;
}

@media (min-width: 769px) {
    #homepage .page-section {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
    }

    #homepage .page-section > div,
    #homepage .page-section .container {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
        height: auto;
    }

    #homepage .page-section .container > .row,
    #homepage .page-section .container > .textpic-container {
        flex: 1 0 auto;
    }
}

/* Settle on a section after scrolling, as the slider did. A section taller than the
   screen still scrolls freely through its length before the next one snaps in. */
@media (min-width: 769px) {
    html:has(#homepage) {
        scroll-snap-type: y mandatory;
    }

    #homepage .page-section {
        scroll-snap-align: start;
    }
}

@media (max-width: 768px) {
    /* No top padding under the fixed header at this size. */
    #homepage .page-section {
        scroll-margin-top: 40px;
    }
}

.section-dots {
    position: fixed;
    top: 50%;
    right: 40px;
    z-index: 10;
    display: none;
    flex-direction: column;
    gap: 15px;
    transform: translateY(-50%);
}

.section-dots a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #707070;
}

.section-dots a.active,
.section-dots a:hover {
    background-color: #DBEAD6;
}

@media (min-width: 769px) {
    .section-dots {
        display: flex;
    }
}

/* The About statistic (was a GIF; see stats.js). Laid out in the GIF's own pixels:
   1u = 1/1920 of the width. As markup alone it shows the final frame. */
.stats {
    --u: calc(100cqw / 1920);
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
    background-color: #0E0E12;
    color: #BF5847;
    font-family: "stolzl", sans-serif;
}

.stats p {
    margin: 0;
}

/* stolzl has no medium weight; regular plus a stroke matches the GIF's digits. The
   counter is SVG in the same 1920x1080 units, positioned by its markup. */
.stats-count {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: #323235;
    font-size: 883px;
    font-weight: 400;
}

.stats-count tspan {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 34.9px;
    stroke-linejoin: miter;
    stroke-miterlimit: 10;
}

.stats-text {
    position: absolute;
    top: calc(71.65 * var(--u));
    left: calc(120.1 * var(--u));
    font-size: calc(101 * var(--u));
    font-weight: 300;
    letter-spacing: calc(-0.55 * var(--u));
    line-height: calc(150 * var(--u));
    white-space: nowrap;
}

.stats-line {
    display: block;
}

.stats-hl {
    position: relative;
    color: #DBEBD7;
    font-weight: 400;
}

.stats-bar {
    position: absolute;
    height: calc(8 * var(--u));
    background-color: #DBEBD7;
}

.stats-bar-1 {
    top: calc(364 * var(--u));
    left: calc(590 * var(--u));
    width: calc(573 * var(--u));
}

.stats-bar-2 {
    top: calc(508 * var(--u));
    left: calc(128 * var(--u));
    width: calc(679 * var(--u));
}

.stats-source {
    position: absolute;
    top: calc(963.5 * var(--u));
    left: calc(124 * var(--u));
    font-size: calc(41 * var(--u));
    font-weight: 300;
    letter-spacing: calc(-0.7 * var(--u));
    line-height: 1;
    white-space: nowrap;
}

/* With stats.js: the light text sweeps in, then a bold copy wipes over the highlights. */
.stats.is-js .stats-hl {
    color: inherit;
    font-weight: inherit;
}

.stats-hl-base {
    display: inline-block;
}

.stats-hl-top {
    position: absolute;
    top: 0;
    left: 0;
    color: #DBEBD7;
    font-weight: 400;
    line-height: 1.2;
}

.stats .k0 { color: transparent; }
.stats .k1 { color: #171518; }
.stats .k2 { color: #313134; }
.stats .k3 { color: #7D4138; }
.stats .k4 { color: #BF5847; }
.stats .k-dim { color: #171518; }
.stats .k-grey { color: #323235; }

.down-arrow a {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html.smooth-scroll {
        scroll-behavior: auto;
    }
}

/* The entrance animation hides content until site.js reveals it. An inline script in
   <head> sets html.reveal only when JS runs and motion is welcome; otherwise show it all. */
html:not(.reveal) #homepage .page-section .textpic-container .textpic-text,
html:not(.reveal) #homepage .page-section .textpic-container .textpic-gallery,
html:not(.reveal) #homepage .page-section .textpic-container .textpic-above,
html:not(.reveal) #homepage .page-section .textpic-container .textpic-below,
html:not(.reveal) #homepage .page-section .frame-type-header .frame-container,
html:not(.reveal) #homepage .page-section .frame-has-backgroundimage .frame-container,
html:not(.reveal) #homepage .page-section .col-md-6,
html:not(.reveal) #homepage .page-section .gallery-row .gallery-item-size-4,
html:not(.reveal) #homepage .page-section #newsArticles .col-md-4 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}