@import url("theme_settings/theme_settings.css");
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,400;1,700&family=Barlow+Condensed:wght@800&display=swap");

:root {
    /* Theme tokens — every reference includes a diagnostic fallback so
       a missing theme_settings.css is visually obvious during review. */
    --color-1:        var(--color-1-theme, #00ff00);
    --color-2:        var(--color-2-theme, #ff00ff);
    --color-over-1:   var(--color-over-1-theme, #000000);
    --color-over-2:   var(--color-over-2-theme, #ffffff);
    --color-1-isDark: var(--color-1-theme-isDark, 0);
    --color-2-isDark: var(--color-2-theme-isDark, 0);

    /* Breakpoint tokens — media queries can't read custom properties,
       so the rem values repeat in @media (min-width: …) below. */
    --size-sm: 48rem;     /* tablet */
    --size-md: 64rem;     /* desktop */
    --size-lg: 85.375rem; /* large desktop */
    --size-xl: 120rem;    /* max content width */
}

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Barlow', Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', Arial, Helvetica, sans-serif;
    font-weight: 800;
}

.site-header,
.site-footer { flex: none; }

#content_main {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: var(--inside-content-max, var(--size-lg));
    padding: var(--inside-content-pad-y, 1.5rem) var(--inside-content-pad-x, clamp(0.5rem, 5%, 3rem));
    margin-inline: auto;
    background-color: #fff;
}

/* Homepage reset — the .site-homepage wrapper in index.jsp gates this. */
body:has(.site-homepage) #content_main {
    max-width: none;
    padding: 0;
    background-color: transparent;
}

/* CMS-rendered page title on inside pages. margin-block keeps the
   CMS-supplied inline margins (which center the title on wide
   viewports) intact. filter: brightness keeps a light theme color
   legible when --color-1 is itself the foreground. */
.pageTitle {
    color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.25;
    margin-block: 0 1.5rem;
}

.site-header .site-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    background-color: var(--color-1);
    color: var(--color-over-1);
    text-decoration: none;
}
.site-header .site-skip-link:focus-visible {
    left: 0;
}

/* Screen-reader-only text. The CMS system stylesheet also defines
   .hidden-text with the same technique; declaring it here keeps the
   pattern available regardless of system-stylesheet load order. */
.hidden-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ============================================================
   Shared decoration utility — the ribbon/banner-shaped badge outline
   used on the quicklinks icons. An outline, not a solid fill: a
   transparent-center pennant shape masks a themed-color layer so the
   badge reads as a colored border with the icon floating inside it,
   not a solid color block. The exported shape is reused as a mask
   (not read for its own fill) so the color stays theme-driven.
   ============================================================ */
.ribbon-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ribbon-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-1);
    -webkit-mask-image: url(/pics/ribbon-badge.svg);
    mask-image: url(/pics/ribbon-badge.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ============================================================
   HEADER
   ============================================================ */

/* [Structural] header is a flex column so .topbar { order: -1 } can pull
   the search utility above the identity/nav rows, and so the mobile
   hamburger toggle (position: absolute) resolves against this element. */
.site-header {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #000;
    color: #fff;
}
/* Homepage: the header sits directly above the hero shuffle in normal
   flow (not overlaying it) and carries the same black-plus-texture
   background and dark scrim as the shuffle below it, so the two read as
   one continuous surface split at the header/shuffle boundary rather
   than the shuffle's photo running the full height behind the header. */
body:has(.site-homepage) .site-header {
    background: #000;
    color: #fff;
}
body:has(.site-homepage) .site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url(/pics/hero-texture.png);
    background-repeat: repeat;
    background-size: 61px 61px;
    opacity: 0.4;
}
/* Sits above the texture only — the nested hero shuffle (z-index: 2)
   renders above this scrim so the photo itself stays untinted; the scrim
   still darkens the header's own identity/nav area behind it. */
body:has(.site-homepage) .site-header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 76% 27%, color-mix(in srgb, var(--color-1) 20%, transparent), transparent 55%),
        rgba(0, 0, 0, 0.6);
}
body:has(.site-homepage) #hero_shuffle_container {
    position: relative;
    z-index: 2;
}
body:has(.site-homepage) .site-header__bar {
    position: relative;
    z-index: 3;
}

.topbar { order: -1; }
/* [Structural] identity/nav/search live in their own bar, separate from
   the hero shuffle nested after it — so the mobile nav-menu's `top: 100%`
   and the hamburger toggle's absolute position resolve against the bar's
   own height, not the much taller bar-plus-shuffle header. */
.site-header__bar { display: flex; flex-direction: column; position: relative; }

.site-header__identity {
    display: flex;
    justify-content: flex-start;
    padding: 1.5rem 3.5rem 1rem;
}
.site-header__logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    text-align: left;
}
body a.site-header__logo { color: inherit; }
.site-header__logo img { height: 64px; width: auto; }
.site-header__name { display: block; font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; }
.site-header__tagline { display: block; font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }

@media (min-width: 48rem) {
    .site-header__logo img { height: 100px; }
    .site-header__name { font-size: 2.5rem; }
    .site-header__tagline { font-size: 1.125rem; }
}

/* ---------- Search (topbar) ---------- */
/* A plain link to the search results page rather than an inline search
   form — the icon-only treatment the design calls for. */
.site-search {
    display: grid;
    place-content: center;
    width: 3.5rem;
    height: 2.75rem;
    margin: 1rem 0 0 1rem;
    background: #fff;
    color: #000;
    text-decoration: none;
}
@media (min-width: 64rem) {
    .site-search { margin: 0 1.5rem 0 auto; }
}
.site-search::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 2rem;
    content: 'search';
    text-transform: none;
}

/* Reserve room for the hamburger toggle at mobile widths so the topbar's
   own content doesn't sit beneath it. */
@media (max-width: 63.9375rem) {
    .topbar { padding-right: 3.5rem; min-height: 4.5rem; }
}

/* [Structural] At >= 64rem the header becomes a 2-row grid: identity and
   search share the top row (identity flush left, search flush right, via
   the middle 1fr spacer column), nav occupies the row below. Each element
   is placed by grid-area rather than DOM order, so the mobile flex-column
   order (.topbar{order:-1} above) doesn't need to change for this
   breakpoint's different visual grouping. */
@media (min-width: 64rem) {
    .site-header__bar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "identity . search" "nav nav nav";
        align-items: center;
    }
    .site-header__identity { grid-area: identity; padding-block: 1rem; }
    .topbar { grid-area: search; order: 0; }
    .site-nav--desktop { grid-area: nav; }
}

/* ---------- Navigation: shared structure (all levels) ---------- */
.nav-item-inner { text-decoration: none; color: inherit; }
/* [Structural] the CMS system stylesheet's `a:link{color:#333}` rule loads
   after this file and ties a single-class color declaration, winning the
   tie — the class+pseudo pairing here raises specificity enough to hold
   the inherited color. The underline stays visible at rest: it's the only
   signal distinguishing a link item from a CONTAINER item in the same
   visual position. */
.nav-item > a.nav-item-inner:link,
.nav-item > a.nav-item-inner:visited { text-decoration: underline; color: inherit; }
.nav-item > div.nav-item-inner { pointer-events: none; }

.dropdown-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0.85rem 1rem;
}
.dropdown-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid currentColor;
    transition: transform 0.2s ease;
}
.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Level-2 holder watches for .show on the inner sub-menu */
.site-nav .sub-menu-holder { display: none; }
.site-nav .sub-menu-holder:has(.sub-menu.show) { display: block; }
/* Level-3: no holder — the sub-menu itself carries .show */
.site-nav .sub-menu .sub-menu { display: none; }
.site-nav .sub-menu .sub-menu.show { display: block; }

.sub-menu-holder,
.sub-menu { list-style: none; margin: 0; padding: 0; }
.sub-menu-item.dropdown { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.sub-menu-item.dropdown .sub-menu-holder,
.sub-menu-item.dropdown > .sub-menu { grid-column: 1 / -1; }
.sub-menu-item.dropdown > .nav-item-inner { padding: 0.6rem 1rem; }
.sub-menu { background: var(--color-2); color: var(--color-over-2); }
.sub-menu a { display: block; padding: 0.6rem 1rem; }
body .sub-menu a { color: var(--color-over-2); }

.nav-item > a.nav-item-inner:hover,
.nav-item > a.nav-item-inner:focus-visible,
.dropdown-toggle:hover,
.dropdown-toggle:focus-visible,
.dropdown-toggle[aria-expanded="true"],
.sub-menu-item > a:hover,
.sub-menu-item > a:focus-visible {
    background: var(--color-1);
    color: var(--color-over-1);
}
/* An open dropdown keeps its trigger in the hover look for as long as it
   stays open, on the label half of the cell as well as the toggle half. */
.nav-item:has(> .dropdown-toggle[aria-expanded="true"]) > .nav-item-inner,
.sub-menu-item:has(> .dropdown-toggle[aria-expanded="true"]) > a {
    background: var(--color-1);
    color: var(--color-over-1);
}

/* ---------- Desktop nav (>= 64rem) ---------- */
.site-nav--desktop { display: none; }
.site-nav--desktop .nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0.5rem 1rem;
}
.site-nav--desktop .nav-item {
    position: relative;
    display: grid;
}
.site-nav--desktop .nav-item.dropdown {
    grid-template-columns: 1fr;
}
/* [Structural] top-level overlay pattern — label and toggle share one cell */
.site-nav--desktop .nav-item.dropdown > .nav-item-inner,
.site-nav--desktop .nav-item.dropdown > .dropdown-toggle {
    grid-column: 1;
    grid-row: 1;
}
.site-nav--desktop .nav-item.dropdown > .nav-item-inner {
    position: relative;
    z-index: 1;
    margin-right: 1.75rem;
    padding: 0.85rem 0 0.85rem 1rem;
}
.site-nav--desktop .nav-item:not(.dropdown) > a.nav-item-inner {
    display: block;
    padding: 0.85rem 1rem;
}
.site-nav--desktop .nav-item.dropdown > .dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.85rem 0.5rem 0.85rem 0;
}

.site-nav--desktop .sub-menu-holder {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    z-index: 5;
}
.site-nav--desktop .nav-item.drop-left .sub-menu-holder { left: auto; right: 0; }
.site-nav--desktop .sub-menu .sub-menu {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 14rem;
}
.site-nav--desktop .drop-left .sub-menu-item.dropdown > .sub-menu {
    left: auto;
    right: 100%;
}
.site-nav--desktop .sub-menu-item.dropdown > .dropdown-toggle {
    padding: 0.5rem;
}

@media (min-width: 64rem) {
    .site-nav--desktop { display: block; }
    .site-nav--mobile { display: none; }
}

/* ---------- Mobile nav (< 64rem) ---------- */
.site-nav--mobile {
    display: block;
    position: static;
}
.menu-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: var(--color-1);
    color: var(--color-over-1);
    cursor: pointer;
}
.menu-toggle:hover,
.menu-toggle:focus-visible { background: var(--color-2); color: var(--color-over-2); }
.menu-toggle::after {
    font-family: 'Material Symbols Outlined';
    font-size: 1.5rem;
    content: 'menu';
    text-transform: none;
}
.menu-toggle[aria-expanded="true"]::after { content: 'close'; }

.site-nav--mobile .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
}
.site-nav--mobile .nav-menu.show { display: block; }
.site-nav--mobile .nav-item > a.nav-item-inner,
.site-nav--mobile .nav-item > div.nav-item-inner {
    display: block;
    padding: 0.85rem 1rem;
}
.site-nav--mobile .nav-item.dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
/* The toggle fills the row's full height rather than centering at its own
   content height, so its hit area matches the label's and the triangle
   doesn't read as vertically offset from it. */
.site-nav--mobile .nav-item.dropdown > .dropdown-toggle {
    align-self: stretch;
    display: grid;
    place-content: center;
}
.site-nav--mobile .nav-item.dropdown .sub-menu-holder { grid-column: 1 / -1; }
.site-nav--mobile .sub-menu-item > a,
.site-nav--mobile .sub-menu-item.dropdown > .nav-item-inner { padding-left: 2rem; }
.site-nav--mobile .sub-menu .sub-menu .sub-menu-item > a { padding-left: 3rem; }
.site-nav--mobile .sub-menu .sub-menu { grid-column: 1 / -1; }

@media (min-width: 64rem) {
    .site-nav--mobile,
    .menu-toggle { display: none; }
}

/* ============================================================
   HERO / hero-01 (shared by top banner, mid-page gallery shuffle,
   and Principal's Message image — one .hero-shuffle class covers
   every instance on the page)
   ============================================================ */
.hero-shuffle { position: relative; }
/* [Structural] the top hero is nested inside the header (only on the
   homepage) and reads the header's own black-plus-texture background and
   dark scrim rather than carrying its own — the photo insets from the
   section edges via the holder's own margin, revealing that shared
   background at the sides. The gallery and Principal's Message instances
   of this same class sit in their own plain sections, unaffected. */
@media (min-width: 64rem) {
    #hero_shuffle_container .swiper-holder { margin-inline: 20px; }
}
body:has(.site-homepage) #hero_shuffle_container { padding-bottom: 2.5rem; }
.hero-shuffle .swiper { width: 100%; }
.hero-shuffle .swiper-slide { position: relative; }
.hero-shuffle figure { margin: 0; width: 100%; }
.hero-shuffle figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }

/* [Structural] the holder is a grid with every child sharing one cell at
   all widths, so the controls always overlay the photo in a corner rather
   than falling into normal flow below it on narrow viewports. */
.hero-shuffle .swiper-holder { display: grid; grid-template-columns: 100%; }
.hero-shuffle .swiper-holder > * { grid-area: 1 / 1; }
.hero-shuffle .swiper-controls { z-index: 3; }

@media (min-width: 48rem) {
    .hero-shuffle figure { display: grid; grid-template-columns: 100%; }
    .hero-shuffle figure > * { grid-area: 1 / 1; }
}

.hero-shuffle figcaption { padding: 1rem; background-color: rgba(0, 0, 0, 0.85); color: #fff; }
@media (min-width: 48rem) {
    .hero-shuffle figcaption { background-color: rgba(0, 0, 0, 0.75); }
    .hero-shuffle figcaption.caption-position-top { align-self: start; }
    .hero-shuffle figcaption.caption-position-bottom { align-self: end; }

    .hero-shuffle .navigation-position-top figcaption.caption-position-top { padding-top: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .hero-shuffle .navigation-position-bottom figcaption.caption-position-bottom { padding-bottom: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .hero-shuffle .navigation-position-left figcaption { padding-left: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
    .hero-shuffle .navigation-position-right figcaption { padding-right: calc(var(--swiper-pagination-bullet-size, 1rem) + 1rem); }
}

/* ┌─ swiper-bundle.css 11.2.10 override — removable as a group ────────────
 * Replaces the bullet container's own absolute placement (position,
 * inset, width, transform) plus the horizontal/vertical variants' edge
 * insets, so the grid placement below can take over instead.
 */
.hero-shuffle.swiper-container .swiper-pagination {
    position: initial;
    inset: auto;
    width: auto;
    transform: none;
}
.hero-shuffle.swiper-container .swiper-pagination-vertical .swiper-pagination-bullet {
    display: inline-block;
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
/* └─ end swiper-bundle.css override ──────────────────────────────────── */

.hero-shuffle .swiper-pagination { padding: 0.5rem; }
@media (min-width: 48rem) {
    .hero-shuffle .swiper-pagination { align-self: center; justify-self: center; }
    .hero-shuffle .navigation-position-top .swiper-pagination { align-self: start; }
    .hero-shuffle .navigation-position-bottom .swiper-pagination { align-self: end; }
    .hero-shuffle .navigation-position-left .swiper-pagination { justify-self: start; }
    .hero-shuffle .navigation-position-right .swiper-pagination { justify-self: end; }

    .hero-shuffle.swiper-container .swiper-pagination-vertical .swiper-pagination-bullet {
        display: block;
        margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    }
}

.hero-shuffle .swiper-controls {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.5rem;
    padding: 0.5rem;
    justify-self: end;
}
.hero-shuffle.caption-position-bottom .swiper-controls { align-self: start; }
.hero-shuffle.caption-position-top .swiper-controls { align-self: end; }
/* No caption renders on any of the three shuffle instances this site uses
   (hero, mid-page gallery, Principal's Message), so the controls sit
   bottom-right on all of them at every width, rather than the general
   rule's opposite-corner-from-caption placement (which would float them
   top-right with nothing below). */
#hero_shuffle_container.caption-position-bottom .swiper-controls,
#gallery_shuffle_container.caption-position-bottom .swiper-controls,
#principal_shuffle_container.caption-position-bottom .swiper-controls { align-self: end; }

/* ┌─ swiper-bundle.css 11.2.10 override — removable as a group ──────────── */
.hero-shuffle.swiper-container .swiper-button-prev,
.hero-shuffle.swiper-container .swiper-button-next {
    position: initial;
    inset: auto;
    margin: 0;
}
/* └─ end swiper-bundle.css override ──────────────────────────────────── */

.hero-shuffle .swiper-button,
.hero-shuffle .swiper-autoplay-toggle-button {
    display: grid;
    place-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    font-size: 1rem;
    background: var(--color-1);
    color: var(--color-over-1);
    cursor: pointer;
}

.hero-shuffle:not(.navigation-type-1) .swiper-button-prev,
.hero-shuffle:not(.navigation-type-1) .swiper-button-next { display: none; }
/* Autoplay never runs below 64rem, so the carousel is manual there
   regardless of the configured navigation type — arrows always show. */
@media (max-width: 63.9375rem) {
    .hero-shuffle:not(.navigation-type-1) .swiper-button-prev,
    .hero-shuffle:not(.navigation-type-1) .swiper-button-next { display: grid; }
}

.hero-shuffle .swiper-autoplay-toggle-button { display: none; }
@media (min-width: 64rem) {
    .hero-shuffle .swiper-autoplay-toggle-button { display: grid; }
    .hero-shuffle.navigation-type-1 .swiper-controls:has(.swiper-autoplay-toggle-button) .swiper-button-prev,
    .hero-shuffle.navigation-type-1 .swiper-controls:has(.swiper-autoplay-toggle-button) .swiper-button-next { display: none; }
}

.hero-shuffle .swiper-button-prev::after,
.hero-shuffle .swiper-button-next::after,
.hero-shuffle .swiper-autoplay-toggle-button::after {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 2.5em;
    line-height: 1;
    text-transform: none;
}
.hero-shuffle .swiper-button-prev::after { content: 'chevron_left'; }
.hero-shuffle .swiper-button-next::after { content: 'chevron_right'; }
.hero-shuffle .swiper-autoplay-toggle-button::after { content: 'pause'; }
.hero-shuffle .swiper-autoplay-toggle-button.paused::after { content: 'play_arrow'; }

.hero-shuffle.swiper-error .swiper-wrapper { display: block; }
.hero-shuffle.swiper-error .swiper-slide { width: 100% !important; height: auto !important; }
.hero-shuffle.swiper-error .swiper-controls,
.hero-shuffle.swiper-error .swiper-pagination { display: none; }

/* ============================================================
   QUICK LINKS / links-01 — no carousel: the design shows every link in
   one static row, so the block's Swiper wrapper is skinned away here in
   favor of a plain flex row (still built from the same category data
   and icon/text markup shape the block specifies).
   ============================================================ */
.quicklinks {
    background: #fff;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 0.5rem;
    padding: 0 0.75rem 2rem;
}
.quicklinks__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.25rem);
    margin-inline: auto;
}
.quicklinks__item { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-decoration: none; text-align: center; }
body a.quicklinks__item { color: var(--color-1); }
.quicklinks__icon { width: 6.25rem; height: 5.625rem; color: var(--color-1); }
/* sized on both selectors — the CMS icon renders briefly as an <img> before
   the client swaps it for the inline <svg> */
.quicklinks__icon svg,
.quicklinks__icon img { position: relative; height: 2.75rem; width: auto; }
.quicklinks__text { font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; font-size: 1.25rem; text-transform: uppercase; filter: brightness(var(--color-1-isDark)); }

@media (min-width: 48rem) {
    .quicklinks {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 0 3rem 2rem;
    }
    .quicklinks__item:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }
    .quicklinks__text { font-size: 1.5rem; white-space: nowrap; }
}

/* ============================================================
   CALENDAR / EVENTS — events-02
   ============================================================ */
/* [Structural] the bottom border is stated as a single-side stroke, not a
   shorthand border shorthand's usual all-sides value. */
.events { background: var(--color-1); color: var(--color-over-1); border-bottom: 7px solid #000; }
.events__inner { padding: 2rem 1.5rem; }
.events__title { color: inherit; font-size: 3.5rem; line-height: 1.5; margin: 0 0 1.5rem; }
/* [Structural] the heading and "More Events" CTA share one row (heading
   left, CTA right) only from tablet width up — at mobile the CTA stays
   below the cards, centered. The CTA stays last in the markup at every
   width so a keyboard user reaches the full event list before it; the
   grid area is what moves it alongside the heading visually at this
   breakpoint. */
@media (min-width: 48rem) {
    .events__inner {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "title more" "panel panel";
        align-items: center;
        column-gap: 1rem;
    }
    .events__title { grid-area: title; margin-bottom: 0; }
    .events__panel { grid-area: panel; margin-top: 1.5rem; }
    .events__more { grid-area: more; }
}

.events__panel { position: relative; padding: 0 3rem; }
.events__panel .swiper { width: 100%; }
/* [Structural] the date badge sits beside the text at desktop widths but
   stacks above it, centered, at mobile — a real shape change, not fluid
   reflow. */
.events__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    color: var(--color-over-1);
    padding: 1.5rem 0.5rem;
    min-height: 8rem;
}
.events__item-body { min-width: 0; }

@media (min-width: 48rem) {
    .events__item { flex-direction: row; align-items: center; text-align: left; gap: 0.85rem; }
}

/* [Structural] the pointed date badge is an outline, not a solid fill — the
   red section background shows through its center. Two stacked pseudo-
   elements fake the outline: ::before is the full white banner shape,
   ::after is the same shape inset a few px with the section's own red so
   only a thin white ring remains visible between them. */
/* The date badge is an outline, not a solid fill — the exported shape is
   reused as a mask (not read for its own fill) so the color stays
   theme-driven and the section's own background shows through the
   transparent center. */
.events__date {
    position: relative;
    flex: none;
    width: 5.625rem;
    height: 6.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
}
.events__date::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-over-1);
    -webkit-mask-image: url(/pics/events-date-badge.svg);
    mask-image: url(/pics/events-date-badge.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.events__date-month,
.events__date-day { position: relative; z-index: 1; color: var(--color-over-1); font-size: 1.5rem; text-transform: uppercase; line-height: 1.25; }
.events__item-title { margin: 0 0 0.35rem; font-size: 1.5rem; }
.events__item-title a { text-decoration: none; }
body .events__item-title a { color: inherit; }
.events__item-time,
.events__item-location { font-size: 1.125rem; }

.events__panel .swiper-button-prev,
.events__panel .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.25rem;
    display: grid;
    place-content: center;
    background: #fff;
    cursor: pointer;
}
.events__panel .swiper-button-prev { left: 0; }
.events__panel .swiper-button-next { right: 0; }
.events__panel .swiper-button-prev:hover,
.events__panel .swiper-button-prev:focus-visible,
.events__panel .swiper-button-next:hover,
.events__panel .swiper-button-next:focus-visible { background: var(--color-2); }
.events__panel .swiper-button-prev:hover::after,
.events__panel .swiper-button-prev:focus-visible::after,
.events__panel .swiper-button-next:hover::after,
.events__panel .swiper-button-next:focus-visible::after { background-color: var(--color-over-2); }
/* A solid triangle, masked from the exported shape so the color stays
   theme-driven; the button also carries a literal white background, so
   the color sits on this glyph layer rather than the dark/light-safety
   filter, which would recolor the button fill too if applied there. */
.events__panel .swiper-button-prev::after,
.events__panel .swiper-button-next::after {
    content: '';
    display: block;
    width: 0.625rem;
    height: 1.25rem;
    background-color: var(--color-1);
    filter: brightness(var(--color-1-isDark));
    -webkit-mask-image: url(/pics/arrow-triangle.svg);
    mask-image: url(/pics/arrow-triangle.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.events__panel .swiper-button-next::after { transform: scaleX(-1); }

.events__more {
    display: block;
    width: fit-content;
    flex: none;
    margin: 1.5rem auto 0;
    background: #fff;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.125rem;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    padding: 0.5rem 2rem;
}
@media (min-width: 48rem) {
    .events__more { margin: 0; }
}
body .events__more { color: #000; }
.events__more:hover,
.events__more:focus-visible { background: #000; color: #fff; }

/* ============================================================
   ABOUT US — 3x spotlight-02 vertical
   ============================================================ */
.about-us { padding: 3rem 1.5rem; background: #fff; }
.about-us__row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: var(--size-lg);
    margin-inline: auto;
}
@media (min-width: 64rem) {
    /* [Structural] align-items: flex-start (not stretch) lets each card size to its own content. */
    .about-us__row { flex-direction: row; align-items: flex-start; gap: 2.5rem; }
}
.about-us__card { flex: 1 1 0; text-align: center; }
.about-us__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4.75rem;
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;
}
/* Icon glyphs exported from the design rather than approximated from an
   icon font, masked so the color stays theme-driven (or literal, for the
   literal-background variant below). */
.about-us__badge::after {
    content: '';
    display: block;
    height: 2.75rem;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.about-us__badge--1 { background: var(--color-1); }
.about-us__badge--1::after { background-color: var(--color-over-1); }
/* Literal background (not the --color-2 theme token) with a literal
   foreground paired for contrast — a fixed brand-black surface, not a
   themed one. */
.about-us__badge--2 { background: #000; }
.about-us__badge--2::after { background-color: #fff; }
.about-us__badge--mission::after { width: 2.5625rem; -webkit-mask-image: url(/pics/about-us-mission.svg); mask-image: url(/pics/about-us-mission.svg); }
.about-us__badge--vision::after { width: 2.75rem; -webkit-mask-image: url(/pics/about-us-vision.svg); mask-image: url(/pics/about-us-vision.svg); }
.about-us__badge--whoweare::after { width: 2.9375rem; -webkit-mask-image: url(/pics/about-us-whoweare.svg); mask-image: url(/pics/about-us-whoweare.svg); }
.about-us__card .spotlight__title { text-transform: uppercase; font-size: 2.5rem; }
.about-us__card .spotlight__text { font-size: 1.125rem; }

/* ============================================================
   SPOTLIGHT — shared base for About Us cards, AAG banner, and
   Principal's Message (spotlight-02 vertical + horizontal variants)
   ============================================================ */
.spotlight__title { color: var(--color-1); filter: brightness(var(--color-1-isDark)); }
.spotlight__inner { display: flex; flex-direction: column; gap: 1rem; }
.spotlight__media img { display: block; width: 100%; height: auto; }
.spotlight__link {
    display: inline-block;
    margin-top: 1rem;
    background: var(--color-1);
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 2rem;
}
body a.spotlight__link { color: var(--color-over-1); }
.spotlight__link:hover,
.spotlight__link:focus-visible { background: #000; color: #fff; }

@media (min-width: 48rem) {
    .spotlight--horizontal .spotlight__inner { flex-direction: row; align-items: center; gap: 2.5rem; }
    .spotlight--horizontal .spotlight__media { flex: 1 1 45%; }
    .spotlight--horizontal .spotlight__summary { flex: 1 1 55%; }
}
#principal_spotlight_container { padding: 3rem 1.5rem; background: #fff; }
#principal_spotlight_container .spotlight__inner { max-width: var(--size-lg); margin-inline: auto; }
#principal_spotlight_container .spotlight__title { font-size: 2.5rem; line-height: 1.5; text-transform: uppercase; margin: 0 0 0.5rem; }
#principal_spotlight_container .spotlight__media .hero-shuffle figure img { aspect-ratio: 4 / 3; }

/* ============================================================
   AAG ("At A Glance") — spotlight-02 vertical (tagline/CTA) +
   infographic-01 (stat facts, Links category 188995)
   ============================================================ */
.aag { background: var(--color-1); color: var(--color-over-1); }
.aag__inner { padding: 2.5rem 1.5rem; max-width: var(--size-lg); margin-inline: auto; text-align: center; }
.aag__title-row { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.aag__title { color: inherit; font-size: 2.5rem; line-height: 1.5; margin: 0; text-transform: uppercase; }

@media (min-width: 64rem) {
    .aag__inner { text-align: left; }
    .aag__title-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
}
.aag__link {
    display: inline-block;
    flex: none;
    background: #fff;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 2rem;
}
body a.aag__link { color: #000; }
.aag__link:hover,
.aag__link:focus-visible { background: #000; color: #fff; }

/* Sibling of .aag__inner, not nested in it, so this spans the section
   edge to edge instead of being capped by .aag__inner's max-width. */
.aag__divider { height: 7px; background: #000; }

.aag__facts-wrap { max-width: var(--size-lg); margin-inline: auto; padding: 0 0.75rem; }
.aag__facts-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.aag__facts-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    background: #fff;
    padding: 0.75rem;
    height: 10.625rem;
}
/* A trailing odd item spans both grid columns and is capped to one
   column's width so it centers instead of stretching full-width. */
.aag__facts-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
    margin-inline: auto;
}
.aag__facts-value { font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; font-size: 2.5rem; text-transform: uppercase; color: #020617; line-height: 1.5; }
.aag__facts-label { font-size: 1.125rem; color: #000; }

@media (min-width: 48rem) {
    .aag__facts-wrap { padding: 0; }
    .aag__facts-list { display: flex; align-items: flex-start; gap: 1.5rem; }
    .aag__facts-item,
    .aag__facts-item:last-child:nth-child(odd) {
        flex: 1 1 0;
        max-width: none;
        margin-inline: 0;
        height: 10.625rem;
    }
    .aag__facts-item:nth-child(even) { height: 8.75rem; }
}

/* ============================================================
   PHOTO GALLERY — static 5-photo mosaic, all from the CMS shuffle
   ============================================================ */
.gallery { padding-block: 3rem; padding-inline: 10px; }
.gallery__row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
@media (min-width: 48rem) {
    .gallery { padding-inline: 0; }
    .gallery__row { flex-direction: row; }
}
.gallery__static {
    flex: 1 1 25%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.gallery__static img,
.gallery__center img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.gallery__center { flex: 1 1 50%; }

/* ============================================================
   NEWS — news-04
   ============================================================ */
/* [Structural] prev/next sit in their own grid columns beside the track
   (not layered on top of it via position: absolute) so the arrows never
   cover a card's photo or title. */
.news-cards.swiper-container {
    position: relative;
    padding: 3rem 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "title title title"
        "prev cards next"
        "more more more";
    align-items: center;
    column-gap: 1rem;
    row-gap: 1.5rem;
}
.news-cards .swiper { grid-area: cards; width: 100%; }
/* justify-self: start — a grid item stretches to fill its area by
   default, so without this the heading's own box (invisible past its
   text) would span the whole title/more row and sit in front of the
   right-aligned "more" button wherever the two areas share the row,
   swallowing clicks meant for the button. */
.news-cards__title { grid-area: title; justify-self: start; color: var(--color-1); filter: brightness(var(--color-1-isDark)); margin: 0; font-size: 2.5rem; line-height: 1.5; }

/* [Structural] the heading and "More News" CTA share one row (heading
   left, CTA right) only from tablet width up — at mobile the CTA stays
   below the cards, centered, per its own breakpoint-specific position in
   the design. The CTA stays last in the markup, after every card, so a
   keyboard user reaches the full article list before the "view more"
   action regardless of viewport — the grid area is what moves it
   alongside the heading visually at this breakpoint, the same
   content-before-utility ordering the header's topbar uses. */
@media (min-width: 48rem) {
    .news-cards.swiper-container {
        grid-template-areas: "title title ." "prev cards next";
    }
}

/* [Structural] the featured photo fills .news-cards__media as an absolute
   background; only the title overlays it (crest + divider + white text on
   a gradient scrim) — the article summary is a separate plain block below,
   not part of the overlay. */
.news-cards__item { border-radius: 0.25rem; overflow: hidden; }
/* [Structural] the dark bar/gradient scrim is a literal black-to-white
   pairing, not the --color-2 theme pair — the scrim's job is legibility
   over an arbitrary CMS photo, which needs a guaranteed-dark surface
   regardless of what the site's secondary theme color happens to be. */
/* A narrow mobile card gives the wrapped title less width per line, so
   the photo runs taller there (4:3) than on wider cards (16:9) to keep
   the title's fixed 2-line budget from outgrowing the photo it sits on. */
/* [Structural] .news-cards__media is a flex column, not a fixed-height
   crop box: the photo (.news-cards__bg) is what's pinned to aspect-ratio
   and clipped, while .news-cards__overlay stays in normal flow at the
   bottom. An uncapped title can then grow the whole card taller instead
   of clipping or spilling past the photo's own darkened area. */
/* the photo and the text overlay share one grid cell (they stack instead
   of the overlay being absolutely positioned over a fixed-height photo),
   so an uncapped title that needs more room grows the shared row instead
   of clipping or spilling past the photo it darkens; the photo itself
   (align-self: stretch, its default) grows to match, showing more of the
   image rather than leaving blank space above the text. */
.news-cards__media {
    display: grid;
    grid-template-areas: "stack";
    background: #000;
    color: #fff;
}
.news-cards__bg {
    grid-area: stack;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
@media (min-width: 48rem) {
    .news-cards__bg { aspect-ratio: 16 / 9; }
}
.news-cards__bg img { width: 100%; height: 100%; object-fit: cover; }
/* the gradient lives on the photo layer, not the text box, so a taller
   text box (more lines) still sits over a darkened area rather than a
   fixed-height scrim it could grow past. */
.news-cards__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(0, 0, 0, 0.9) 75%);
}

/* The scrim is a pseudo-element sized to the overlay's own box (not a
   fixed percentage of the photo), so a longer title — which makes the
   overlay itself taller — grows the gradient along with it instead of
   leaving text sitting past the edge of a scrim sized for shorter ones.
   z-index: -1 keeps it behind the icon/title (in front of the photo,
   since the overlay's own z-index: 1 already out-stacks .news-cards__bg). */
.news-cards__overlay {
    grid-area: stack;
    align-self: end;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}
.news-cards__overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9) 40%);
}
.news-cards__crest { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: contain; }
.news-cards__item-title {
    margin: 0;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(255, 255, 255, 0.6);
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.5rem;
    line-height: 1.5;
}
/* Clamped to 2 lines only where cards sit side by side (768px+) so one
   long title can't make its card taller than its row neighbors; a single
   mobile slide has no neighbor to stay level with, so its title runs full
   length instead of truncating. */
@media (min-width: 48rem) {
    .news-cards__item-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
body .news-cards a { color: inherit; text-decoration: none; }
.news-cards__summary { padding: 1rem 0.25rem 0; }
.news-cards__text { font-size: 1.125rem; line-height: 1.5; }

/* No-photo fallback: with no image to anchor a bottom bar against, the
   crest is enlarged and centered in the plain black card instead of
   sitting small and left-aligned next to the title. */
.news-cards__item--no-photo .news-cards__media {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 48rem) {
    .news-cards__item--no-photo .news-cards__media { aspect-ratio: 16 / 9; }
}
.news-cards__item--no-photo .news-cards__overlay {
    flex-direction: column;
    padding: 0;
    text-align: center;
}
.news-cards__item--no-photo .news-cards__overlay::before { content: none; }
.news-cards__item--no-photo .news-cards__crest { width: 4rem; height: 4rem; }
.news-cards__item--no-photo .news-cards__item-title { border-left: none; padding-left: 0; }

/* [Structural] position: static overrides swiper-bundle.css's absolute
   default so prev/next sit as their own grid columns beside the track
   instead of floating on top of the cards. */
.news-cards .swiper-button-prev,
.news-cards .swiper-button-next {
    position: static;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.25rem;
    display: grid;
    place-content: center;
    background: #000;
    cursor: pointer;
}
.news-cards .swiper-button-prev { grid-area: prev; }
/* justify-self: end — the "next" column widens to match the "more"
   button's span at tablet+ (see below), and a fixed-width item defaults
   to the start of its own grid cell, which would strand the arrow short
   of the true right edge instead of flush with it. */
.news-cards .swiper-button-next { grid-area: next; justify-self: end; }
.news-cards .swiper-button-prev:hover,
.news-cards .swiper-button-prev:focus-visible,
.news-cards .swiper-button-next:hover,
.news-cards .swiper-button-next:focus-visible { background: var(--color-1); }
/* A solid triangle, masked from the exported shape so a literal white
   fill sits on the glyph layer rather than the button background. */
.news-cards .swiper-button-prev::after,
.news-cards .swiper-button-next::after {
    content: '';
    display: block;
    width: 0.625rem;
    height: 1.25rem;
    background-color: #fff;
    -webkit-mask-image: url(/pics/arrow-triangle.svg);
    mask-image: url(/pics/arrow-triangle.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.news-cards .swiper-button-next::after { transform: scaleX(-1); }

.news-cards__more { grid-area: more; text-align: center; }
/* Placed with an explicit line range instead of the "more" named area at
   tablet+: a named area confined to the third column would size that
   column to the button's own width, leaving the narrower next-arrow
   stranded short of the true right edge instead of flush with it. */
@media (min-width: 48rem) {
    .news-cards__more {
        grid-row: 1;
        grid-column: 2 / 4;
        justify-self: end;
    }
}
.news-cards__more a {
    display: inline-block;
    background: var(--color-1);
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75rem 2rem;
}
body .news-cards__more a { color: var(--color-over-1); }
body .news-cards__more a:hover,
body .news-cards__more a:focus-visible { background: #000; color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--color-1);
    color: var(--color-over-1);
    border-top: 8px solid #000;
}
.site-footer__inner {
    max-width: var(--size-lg);
    margin-inline: auto;
    padding: 3rem 1.5rem;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    grid-template-areas:
        "logo"
        "visit"
        "map"
        "links";
}
@media (min-width: 64rem) {
    .site-footer__inner {
        grid-template-columns: 1fr auto;
        column-gap: 3rem;
        row-gap: 2.5rem;
        align-items: start;
        grid-template-areas:
            "logo  links"
            "visit map";
    }
}
.site-footer__identity { grid-area: logo; }
.site-footer__visit { grid-area: visit; }
.site-footer__map { grid-area: map; }
.site-footer__links-row { grid-area: links; }

.site-footer__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}
.site-footer__logo img { height: 80px; width: auto; }
.site-footer__name { display: block; font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; font-size: 2.5rem; line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; }
.site-footer__tagline { display: block; font-family: 'Barlow Condensed', Arial, sans-serif; font-weight: 800; font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; }
@media (min-width: 64rem) {
    .site-footer__logo img { height: 100px; }
}

.site-footer__heading { font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 0.75rem; }
.site-footer__visit { align-self: center; }
.site-footer__address,
.site-footer__phone { display: flex; align-items: center; gap: 0.5rem; font-style: normal; margin: 0 0 0.5rem; }
body .site-footer a { color: inherit; }
.site-footer__icon { width: 1.25rem; height: 1.25rem; flex: none; }
.site-footer__icon::before {
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 1;
    font-size: 1.1rem;
    text-transform: none;
}
.site-footer__icon--location::before { content: 'fmd_good'; }
.site-footer__icon--phone::before { content: 'phone'; }

.site-footer__map { aspect-ratio: 4 / 3; }
.site-footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 64rem) {
    .site-footer__map { width: 320px; justify-self: end; }
}

.site-footer__links-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}
@media (min-width: 64rem) {
    .site-footer__links-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 2rem;
    }
}

.site-footer__links ul,
.social-links__list { list-style: none; margin: 0; padding: 0; }
.site-footer__links li:not(:last-child) { margin-bottom: 0.5rem; }
.site-footer__links a {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: underline;
}

.social-links__list { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.social-links--flat .social-links__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(255, 255, 255, 0.1);
}
.social-links--flat .social-links__item svg,
.social-links--flat .social-links__item img { width: 2rem; height: 2rem; }
.social-links--flat .social-links__item svg { color: #fff; }
.social-links--flat .social-links__item:hover,
.social-links--flat .social-links__item:focus-visible { background: rgba(255, 255, 255, 0.2); }
.flat-icon-colors svg.color-flatten .color-fill { fill: currentColor; }
.flat-icon-colors svg.color-flatten .transparency-change { fill: transparent; }
.flat-icon-colors svg:not(.color-flatten) { fill: currentColor; }

.site-footer__attribution {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}
.site-footer__attribution a { display: inline-flex; align-items: center; color: inherit; }
.site-footer__attribution svg { fill: currentColor; }
.site-footer__attribution a:first-child svg { width: 140px; height: 18px; }
.site-footer__attribution a:last-child svg { height: 1.125rem; width: auto; }