/* Events & Activities pages (events.php, all-events.php). Every rule is scoped to ev-* classes so other pages are untouched. */

.ev-page {
    --ev-blue: #006ab2;
    --ev-navy: #0d4c83;
    --ev-ink: #222222;
    --ev-text: #565656;
    --ev-muted: #848484;
    --ev-line: #e3e8ef;
    --ev-tint: #dcebf6;
    --ev-surface: #f9fafc;
    --ev-surface-alt: #f4f7fa;
    font-family: 'Roboto', sans-serif;
    color: var(--ev-text);
    background: var(--ev-surface);
}

.ev-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* On desktop the site's sticky header (91px) covers the top of the window once the page scrolls; keep
   focused and linked-to content clear of it. Below 992px the site hides that header. */
html:has(.ev-page) {
    scroll-padding-top: 120px;
}

@media (max-width: 991px) {
    html:has(.ev-page) {
        scroll-padding-top: 24px;
    }
}

.ev-page a,
.ev-page button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 106, 178, 0.18);
}

/* The site stylesheet gives every h2 a 40px !important top margin at 768px and below (meant for the home page
   popup); no heading here has a top margin. */
.ev-page h2 {
    margin-top: 0 !important;
}

/* The site stylesheet removes focus outlines from links and buttons; restore them here. */
.ev-page a:focus-visible,
.ev-page button:focus-visible {
    outline: 2px solid var(--ev-blue);
    outline-offset: 3px;
}

.ev-hero a:focus-visible,
.ev-band a:focus-visible,
.ev-story__link:focus-visible,
.ev-viewer a:focus-visible,
.ev-viewer button:focus-visible {
    outline-color: #ffffff;
}

.ev-skip {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 10000;
    padding: 12px 18px;
    border-radius: 0 0 8px 8px;
    background: #0d4c83;
    font-size: 14px;
    color: #ffffff;
}

.ev-skip:focus {
    top: 0;
    color: #ffffff;
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.ev-icon {
    width: 18px;
    height: 18px;
    flex: none;
}

.ev-accent {
    color: var(--ev-navy);
}

/* Shared section furniture -------------------------------------------------------------------- */

.ev-section {
    padding: 112px 0;
    background: var(--ev-surface);
    border-top: 1px solid var(--ev-line);
}

.ev-section--alt {
    background: var(--ev-surface-alt);
}

.ev-head {
    margin-bottom: 56px;
}

.ev-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
}

.ev-head--split > div {
    min-width: 0;
}

.ev-eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ev-blue);
}

.ev-title {
    margin: 0;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ev-ink);
    text-wrap: balance;
}

.ev-lede {
    max-width: 640px;
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ev-text);
}

.ev-head__note {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--ev-muted);
}

.ev-textlink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ev-ink);
}

/* The site stylesheet sets border: none on a:hover, a:focus and a:active, so for links with a border the
   rules for those states below restate the whole border, not just its colour. */
.ev-textlink:hover,
.ev-textlink:focus,
.ev-textlink:active {
    border-bottom: 1px solid currentColor;
    color: var(--ev-blue);
}

.ev-textlink .ev-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.ev-textlink:hover .ev-icon {
    transform: translateX(3px);
}

.ev-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 32px;
    border: 1px solid var(--ev-navy);
    border-radius: 999px;
    background: var(--ev-navy);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.ev-button:hover,
.ev-button:focus,
.ev-button:active {
    border: 1px solid var(--ev-blue);
    background: var(--ev-blue);
    color: #ffffff;
}

.ev-button .ev-icon {
    width: 16px;
    height: 16px;
}

.ev-button--ghost {
    background: transparent;
    border-color: var(--ev-ink);
    color: var(--ev-ink);
}

.ev-button--ghost:hover,
.ev-button--ghost:focus,
.ev-button--ghost:active {
    background: var(--ev-ink);
    border: 1px solid var(--ev-ink);
    color: #ffffff;
}

.ev-button[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.ev-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ev-ink);
}

.ev-badge--dark {
    background: rgba(10, 18, 30, 0.55);
    color: #ffffff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.ev-badge__icon {
    width: 12px;
    height: 12px;
}

.ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--ev-line);
    border-radius: 999px;
    background: #ffffff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ev-ink);
    cursor: pointer;
}

.ev-chip:hover,
.ev-chip:focus,
.ev-chip:active {
    border: 1px solid var(--ev-blue);
    color: var(--ev-blue);
}

.ev-chip__icon {
    width: 14px;
    height: 14px;
}

/* Hero ---------------------------------------------------------------------------------------- */

/* A column so the Bootstrap .container keeps its own fixed width and centring. */
.ev-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 600px;
    min-height: clamp(600px, 82vh, 820px);
    padding: 160px 0 128px;
    overflow: hidden;
    isolation: isolate;
    background: #0b1726;
    color: #ffffff;
}

.ev-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ev-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Dark only behind the text (bottom left), so the photograph still reads as a photograph. */
    background:
        linear-gradient(90deg, rgba(5, 12, 22, 0.6) 0%, rgba(5, 12, 22, 0.28) 50%, rgba(5, 12, 22, 0.04) 100%),
        linear-gradient(0deg, rgba(5, 12, 22, 0.78) 0%, rgba(5, 12, 22, 0.22) 45%, rgba(5, 12, 22, 0) 75%);
}

.ev-hero__inner {
    position: relative;
}

/* The site's reset clears ul/li but not ol, so both ordered lists here reset their own indent. */
.ev-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
}

.ev-crumbs ol::before {
    content: "";
    width: 40px;
    height: 1px;
    margin-right: 6px;
    background: rgba(255, 255, 255, 0.6);
}

.ev-crumbs li + li::before {
    content: "/";
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.5);
}

.ev-crumbs a {
    color: rgba(255, 255, 255, 0.72);
}

.ev-crumbs a:hover,
.ev-crumbs a:focus {
    color: #ffffff;
}

.ev-hero__title {
    margin: 26px 0 40px;
    font-size: 64px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
    text-wrap: balance;
}

.ev-hero .ev-accent {
    color: rgba(255, 255, 255, 0.62);
}

.ev-hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 32px clamp(48px, 12vw, 176px);
}

.ev-hero__text {
    max-width: 576px;
    margin: 0;
    font-size: 18px;
    line-height: 1.65;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.86);
}

/* Wraps, so extra hero figures added in the admin cannot widen the hero past a phone screen. */
.ev-hero__stats {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    margin: 0;
}

.ev-hero__stat {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 24px;
}

.ev-hero__stat:first-child {
    padding-left: 0;
}

.ev-hero__stat + .ev-hero__stat {
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.ev-hero__stat dd {
    margin: 0;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.ev-hero__stat dt {
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.ev-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: translateX(-50%);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.ev-hero__scroll::after {
    content: "";
    width: 1px;
    height: 40px;
    background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

.ev-hero__scroll:hover,
.ev-hero__scroll:focus {
    color: #ffffff;
}

/* Featured story ------------------------------------------------------------------------------ */

.ev-feature {
    display: grid;
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    gap: 40px;
    align-items: center;
}

.ev-feature__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    background: var(--ev-navy);
}

a.ev-feature__media {
    cursor: zoom-in;
}

.ev-feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

a.ev-feature__media:hover img {
    transform: scale(1.02);
}

.ev-feature__media .ev-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    /* Keeps the light badge visible on a light photo; the story cards get this from their shade. */
    box-shadow: 0 1px 4px rgba(10, 18, 30, 0.22);
}

.ev-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0 0 18px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ev-muted);
}

.ev-meta__date {
    color: var(--ev-blue);
}

.ev-meta__rule {
    width: 32px;
    height: 1px;
    background: #cfd6de;
}

.ev-feature__title {
    margin: 0 0 22px;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ev-ink);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.ev-feature__text {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ev-text);
}

/* Stories: a masonry grid. Rows are 1/40 of a column's width, so each card's height follows its shape
   and the browser's normal grid placement drops each card into the shortest column. */

.ev-journal__body {
    container-type: inline-size;
}

.ev-grid {
    --ev-cols: 3;
    --ev-gap: 24px;
    display: grid;
    grid-template-columns: repeat(var(--ev-cols), minmax(0, 1fr));
    grid-auto-rows: 9px;
    grid-auto-rows: calc((100cqw - (var(--ev-cols) - 1) * var(--ev-gap)) / var(--ev-cols) / 40);
    column-gap: var(--ev-gap);
    align-items: start;
}

.ev-story {
    grid-row-end: span 56;
}

.ev-story--portrait {
    grid-row-end: span 53;
}

.ev-story--square {
    grid-row-end: span 43;
}

.ev-story__link {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    background: var(--ev-navy);
    color: #ffffff;
}

.ev-story--portrait .ev-story__link {
    aspect-ratio: 4 / 5;
}

.ev-story--square .ev-story__link {
    aspect-ratio: 1 / 1;
}

a.ev-story__link:hover,
a.ev-story__link:focus {
    color: #ffffff;
}

a.ev-story__link[aria-haspopup] {
    cursor: zoom-in;
}

.ev-story__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

a.ev-story__link:hover .ev-story__img {
    transform: scale(1.03);
}

.ev-story__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 15, 28, 0.32) 0%, rgba(8, 15, 28, 0) 26%, rgba(8, 15, 28, 0) 44%, rgba(8, 15, 28, 0.84) 100%);
}

.ev-story__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--ev-navy), var(--ev-blue));
}

.ev-story__placeholder-icon {
    width: 56px;
    height: 56px;
    color: rgba(255, 255, 255, 0.35);
}

.ev-story__badges {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ev-story__body {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
}

.ev-story__date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.ev-story__date-icon {
    width: 13px;
    height: 13px;
}

.ev-story__title {
    display: -webkit-box;
    margin: 10px 0 0;
    overflow: hidden;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    color: #ffffff;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.ev-notice {
    padding: 48px 24px;
    border: 1px dashed #cdd5df;
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
}

.ev-notice[hidden] {
    display: none;
}

.ev-notice__text {
    margin: 0 0 16px;
    font-size: 16px;
    color: var(--ev-text);
}

.ev-notice__text:only-child {
    margin-bottom: 0;
}

.ev-notice--error {
    margin-bottom: 24px;
    border-style: solid;
    border-color: #f0c4c4;
    background: #fff8f8;
}

.ev-journal__more {
    margin-top: 40px;
    text-align: center;
}

/* Categories ---------------------------------------------------------------------------------- */

.ev-kinds__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ev-kind {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    min-height: 120px;
    padding: 28px;
    border: 1px solid var(--ev-line);
    border-radius: 14px;
    background: #ffffff;
    color: var(--ev-ink);
}

.ev-kind:hover,
.ev-kind:focus,
.ev-kind:active {
    border: 1px solid #a9c6e0;
    color: var(--ev-ink);
}

.ev-kind__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ev-tint);
    color: var(--ev-navy);
}

.ev-kind__icon .ev-icon {
    width: 22px;
    height: 22px;
}

.ev-kind__num {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.2;
    color: #9aa1a9;
}

.ev-kind__name {
    display: block;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ev-kind__count {
    font-size: 26px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ev-kind__arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.ev-kind:hover .ev-kind__arrow {
    transform: translate(2px, -2px);
}

/* Gallery: square cells, so a large tile is exactly four small ones. Each photo's size is chosen on the admin
   Gallery screen. Tiles keep the page's order (no dense packing), as in the reference, so what you see, the tab
   order and the photo viewer all agree; a tile too wide for the rest of a row starts the next one. */

.ev-gallery__body {
    container-type: inline-size;
}

.ev-mosaic {
    --ev-cols: 4;
    --ev-gap: 16px;
    display: grid;
    grid-template-columns: repeat(var(--ev-cols), minmax(0, 1fr));
    grid-auto-rows: 260px;
    grid-auto-rows: calc((100cqw - (var(--ev-cols) - 1) * var(--ev-gap)) / var(--ev-cols));
    gap: var(--ev-gap);
}

.ev-mosaic__item--large {
    grid-column: span 2;
    grid-row: span 2;
}

.ev-mosaic__item--wide {
    grid-column: span 2;
}

.ev-mosaic__item--tall {
    grid-row: span 2;
}

.ev-tile {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #dde3ea;
    cursor: zoom-in;
}

.ev-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ev-tile:hover img {
    transform: scale(1.03);
}

/* Years --------------------------------------------------------------------------------------- */

.ev-years {
    overflow-x: auto;
    scrollbar-width: thin;
}

/* As wide as all its years, so the line runs under every year when they scroll sideways. */
.ev-years__track {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-years__track::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 0;
    right: 0;
    height: 1px;
    background: #dfe4ea;
}

.ev-year {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 10px 8px 8px;
    color: #a9afb7;
}

.ev-year:hover,
.ev-year:focus {
    color: var(--ev-text);
}

.ev-year__dot {
    position: relative;
    width: 16px;
    height: 16px;
}

.ev-year__dot::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid #c3c9d1;
    border-radius: 50%;
    background: var(--ev-surface);
}

.ev-year__label {
    font-size: 36px;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ev-year:hover .ev-year__dot::before,
.ev-year:focus .ev-year__dot::before {
    border-color: var(--ev-blue);
}

/* Numbers band -------------------------------------------------------------------------------- */

.ev-band {
    padding: 112px 0 120px;
    background: var(--ev-navy);
    color: #ffffff;
}

.ev-band .ev-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.ev-band__title {
    margin: 0 0 56px;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 500;
    color: #ffffff;
    text-wrap: balance;
}

.ev-band__grid {
    display: grid;
    grid-template-columns: repeat(var(--ev-band-cols, 4), minmax(0, 1fr));
    gap: 40px;
    margin: 0;
}

.ev-band__item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 16px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ev-band__item dd {
    margin: 0;
    font-size: 56px;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}

.ev-band__suffix {
    color: rgba(255, 255, 255, 0.55);
}

.ev-band__item dt {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Call to action ------------------------------------------------------------------------------ */

.ev-cta {
    padding: 140px 0 150px;
    background: var(--ev-surface);
    text-align: center;
}

.ev-cta__title {
    max-width: 760px;
    margin: 0 auto 24px;
    font-size: 52px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ev-ink);
    text-wrap: balance;
}

.ev-cta__text {
    max-width: 560px;
    margin: 0 auto 44px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--ev-text);
}

/* All stories --------------------------------------------------------------------------------- */

.ev-hero.ev-hero--compact {
    min-height: 0;
    padding: 120px 0 80px;
}

.ev-hero--compact .ev-hero__title {
    margin-bottom: 20px;
}

/* The filters open the section, so it needs less space above than a section heading. */
.ev-section.ev-list {
    padding-top: 64px;
}

.ev-filters {
    display: grid;
    gap: 14px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ev-line);
}

.ev-filters__group {
    display: flex;
    align-items: baseline;
    gap: 10px 20px;
}

.ev-filters__label {
    flex: none;
    width: 44px;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ev-muted);
}

.ev-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-chip.is-active {
    border-color: var(--ev-navy);
    background: var(--ev-navy);
    color: #ffffff;
}

.ev-chip.is-active:hover,
.ev-chip.is-active:focus,
.ev-chip.is-active:active {
    border: 1px solid var(--ev-blue);
    background: var(--ev-blue);
    color: #ffffff;
}

.ev-list__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-bottom: 40px;
}

.ev-list__status[hidden],
.ev-chip[hidden],
.ev-list__more[hidden] {
    display: none;
}

.ev-list__status-text {
    margin: 0;
    font-size: 15px;
    color: var(--ev-ink);
}

.ev-list__items {
    transition: opacity 0.2s ease;
}

.ev-list__items.is-loading,
.ev-list__items.is-stale {
    opacity: 0.45;
}

.ev-list__items.is-loading {
    pointer-events: none;
}

.ev-list__items .ev-feature + .ev-feature {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--ev-line);
}

.ev-list__more {
    margin-top: 56px;
    text-align: center;
}

/* When "Load more" fails, its notice moves below the stories, beside the button. */
.ev-list__items ~ .ev-notice--error {
    margin: 40px 0 0;
}

/* Unavailable state --------------------------------------------------------------------------- */

.ev-unavailable {
    padding: 140px 0;
    border-top: 0;
}

.ev-unavailable .ev-lede {
    margin-bottom: 32px;
}

/* Photo viewer -------------------------------------------------------------------------------- */

html.ev-locked {
    overflow: hidden;
}

.ev-viewer {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border: 0;
    background: rgba(6, 12, 22, 0.96);
    color: #ffffff;
    overscroll-behavior: contain;
}

.ev-viewer[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.ev-viewer::backdrop {
    background: rgba(6, 12, 22, 0.6);
}

.ev-viewer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}

.ev-viewer__count {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.7);
}

.ev-viewer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    cursor: pointer;
}

.ev-viewer__button:hover {
    background: rgba(255, 255, 255, 0.22);
}

.ev-viewer__button[hidden] {
    display: none;
}

.ev-viewer__button .ev-icon {
    width: 22px;
    height: 22px;
}

.ev-viewer__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 0;
    padding: 0 20px;
}

.ev-viewer__figure {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    margin: 0;
}

.ev-viewer__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 6px;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ev-viewer__img.is-loaded {
    opacity: 1;
}

.ev-viewer__fail {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
}

/* Capped and scrollable, so a long summary cannot squeeze the photo out of a phone screen. Positioned, so the
   hidden "(opens in a new tab)" note is clipped here instead of making the whole viewer scroll. */
.ev-viewer__info {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 40vh;
    margin: 0 auto;
    padding: 20px 24px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ev-viewer__meta {
    margin: 0 0 8px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.ev-viewer__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    color: #ffffff;
}

.ev-viewer__summary {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.ev-viewer__meta:empty,
.ev-viewer__title:empty,
.ev-viewer__summary:empty {
    display: none;
}

.ev-viewer__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.ev-viewer__link[hidden] {
    display: none;
}

.ev-viewer__link:hover,
.ev-viewer__link:focus,
.ev-viewer__link:active {
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    color: #9cd7ff;
}

.ev-viewer__link .ev-icon {
    width: 14px;
    height: 14px;
}

/* Responsive ---------------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .ev-hero__title {
        font-size: 56px;
    }

    .ev-kind {
        padding: 24px;
        gap: 16px;
    }
}

@media (max-width: 991px) {
    .ev-section {
        padding: 88px 0;
    }

    .ev-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .ev-grid {
        --ev-cols: 2;
    }

    .ev-kinds__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ev-mosaic {
        --ev-cols: 3;
    }

    .ev-band {
        padding: 88px 0;
    }

    .ev-band__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ev-cta {
        padding: 104px 0 112px;
    }

    .ev-cta__title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .ev-section {
        padding: 72px 0;
    }

    .ev-head {
        margin-bottom: 40px;
    }

    .ev-head--split {
        flex-direction: column;
        align-items: flex-start;
    }

    .ev-title {
        font-size: 28px;
    }

    .ev-hero {
        min-height: 560px;
        padding: 120px 0 64px;
    }

    .ev-hero__title {
        margin: 20px 0 28px;
        font-size: 40px;
    }

    .ev-hero__text {
        font-size: 16px;
    }

    .ev-hero__scroll {
        display: none;
    }

    .ev-hero.ev-hero--compact {
        padding: 88px 0 56px;
    }

    .ev-section.ev-list {
        padding-top: 40px;
    }

    .ev-feature__title {
        font-size: 26px;
    }

    .ev-list__items .ev-feature + .ev-feature {
        margin-top: 40px;
        padding-top: 40px;
    }

    .ev-filters__group {
        flex-direction: column;
        align-items: flex-start;
    }

    .ev-kinds__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ev-kind {
        min-height: 96px;
        padding: 20px;
    }

    /* Four years fit a phone; any more scroll sideways within the timeline. */
    .ev-years__track {
        grid-auto-columns: minmax(80px, 1fr);
    }

    .ev-year__label {
        font-size: 26px;
    }

    .ev-band__title {
        font-size: 26px;
        margin-bottom: 40px;
    }

    .ev-band__grid {
        gap: 32px 20px;
    }

    .ev-band__item dd {
        font-size: 44px;
    }

    .ev-cta {
        padding: 88px 0 96px;
    }

    .ev-cta__title {
        font-size: 34px;
    }

    .ev-cta__text {
        font-size: 16px;
    }

    .ev-viewer__stage {
        padding: 0 8px;
    }

    .ev-viewer__nav {
        position: absolute;
        top: 50%;
        z-index: 1;
        transform: translateY(-50%);
        background: rgba(6, 12, 22, 0.55);
    }

    .ev-viewer__nav--prev {
        left: 12px;
    }

    .ev-viewer__nav--next {
        right: 12px;
    }

    .ev-viewer__info {
        padding: 16px 20px 24px;
    }
}

@media (max-width: 575px) {
    /* Bootstrap's container has no width here; in the column-flex hero it would shrink to short content (the
       All stories banner) and sit off the page's gutter. */
    .ev-hero__inner {
        width: 100%;
    }

    .ev-grid {
        --ev-cols: 1;
    }

    .ev-story,
    .ev-story--square {
        grid-row-end: span 53;
    }

    .ev-story .ev-story__link,
    .ev-story--square .ev-story__link {
        aspect-ratio: 4 / 5;
    }

    /* With two columns, following the order strictly would leave a hole beside every odd small tile. */
    .ev-mosaic {
        --ev-cols: 2;
        --ev-gap: 10px;
        grid-auto-flow: dense;
    }

    .ev-tile {
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ev-page *,
    .ev-page *::before,
    .ev-page *::after {
        transition: none !important;
        animation: none !important;
    }
}