:root {
    --site-bg: #f8f7f4;
    --site-ink: #222426;
    --site-muted: #6a6f73;
    --site-border: #e6e1d8;
    --site-accent: #486f86;
}

.site-shell {
    min-height: 100vh;
    color: var(--site-ink);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    background:
        linear-gradient(180deg, rgba(47, 111, 115, 0.08), rgba(248, 247, 244, 0) 280px),
        var(--site-bg);
}

.site-navbar {
    --bs-navbar-brand-color: var(--site-ink);
    --bs-navbar-hover-color: var(--site-accent);
    --bs-navbar-active-color: var(--site-accent);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
}

.site-footer {
    margin-top: clamp(2.5rem, 6vw, 5rem);
    padding: 1.5rem 0;
    color: var(--site-muted);
    /* background: rgba(255, 255, 255, 0.72); */
    border-top: 1px solid var(--site-border);
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.site-footer-copy {
    margin: 0;
}

.site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.site-footer-nav a {
    color: var(--site-accent);
    font-weight: 700;
    text-decoration: none;
}

.site-footer-nav a:hover,
.site-footer-nav a:focus {
    text-decoration: underline;
}

.story-hero {
    max-width: 720px;
}

.story-hero .lead {
    color: var(--site-muted);
}

.story-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

@media (min-width: 1400px) {
    .story-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    }
}

.story-card {
    width: 100%;
    max-width: 32rem;
    overflow: hidden;
    border-color: var(--site-border);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 2.5rem rgba(32, 33, 36, 0.08);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.story-card:hover,
.story-card:focus-within {
    transform: translateY(-0.2rem);
    box-shadow: 0 1.25rem 3rem rgba(32, 33, 36, 0.12);
}

.story-card-link {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.story-card .card-body {
    display: grid;
    grid-template-rows: auto auto auto;
    min-width: 0;
    min-height: 10rem;
}

.story-card .card-title {
    min-width: 0;
    margin-bottom: 0.25rem;
}

.story-card-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background-color: #e9e3d9;
}

.story-card-carousel,
.story-card-carousel .carousel-inner,
.story-card-carousel .carousel-item {
    aspect-ratio: 4 / 3;
}

.story-card-carousel .story-card-image {
    height: 100%;
}

.story-card-carousel-indicators {
    margin-bottom: 0.5rem;
}

.story-card-carousel-indicators [data-bs-target] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

.story-card-image-placeholder {
    background:
        linear-gradient(135deg, rgba(47, 111, 115, 0.18), rgba(255, 255, 255, 0.25)),
        #e9e3d9;
}

.story-meta {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    min-height: 1.25rem;
    margin-bottom: 0.45rem;
    color: var(--site-muted);
    font-size: 0.95rem;
}

.story-meta-line {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-card-summary {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-status-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 0.25rem 0.45rem;
    color: #6f4d00;
    background: #fff2cc;
    border: 1px solid #f2d27a;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.empty-state {
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid var(--site-border);
    border-radius: 0.5rem;
}

.story-gallery-loading {
    grid-column: 1 / -1;
    padding: 2rem;
    color: var(--site-muted);
    text-align: center;
}

.story-not-found {
    display: grid;
    min-height: calc(100vh - 5rem);
    place-items: center;
    padding-block: 4rem;
}

.story-not-found-content {
    text-align: center;
}

.story-not-found h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 800;
}

.story-not-found .btn-primary {
    --bs-btn-bg: var(--site-accent);
    --bs-btn-border-color: var(--site-accent);
    --bs-btn-hover-bg: #3f6075;
    --bs-btn-hover-border-color: #3f6075;
    --bs-btn-active-bg: #365266;
    --bs-btn-active-border-color: #365266;
}

.story-detail {
    padding-bottom: 4rem;
}

.story-detail-header {
    padding: clamp(1.25rem, 4vw, 3rem) 0 2rem;
}

.story-preview-row {
    margin-bottom: 0.85rem;
}

.story-detail-toolbar {
    display: flex;
    gap: 0.85rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.15rem;
}

.story-back-link {
    display: inline-flex;
    gap: 0.35rem;
    min-width: 0;
    min-height: 2.25rem;
    align-items: center;
    color: var(--site-accent);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
}

.story-back-link-chevron {
    display: inline-flex;
    width: 0.7em;
    align-items: center;
    justify-content: center;
    font-size: 1.35em;
    line-height: 1;
}

.story-back-link:hover,
.story-back-link:visited,
.story-back-link:focus,
.story-back-link:active {
    color: var(--site-accent);
    text-decoration: none;
}

.story-back-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--site-accent) 45%, transparent);
    outline-offset: 0.2rem;
}

.story-detail-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
    min-height: 2.25rem;
    padding: 0.2rem;
    background: rgba(255, 255, 255, 0.64);
    border: 1px solid rgba(72, 111, 134, 0.14);
    border-radius: 999px;
    box-shadow: 0 0.75rem 2rem rgba(32, 33, 36, 0.05);
    backdrop-filter: blur(0.75rem);
}

.story-detail-actions.is-views-only {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.story-detail-heading {
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

.story-detail-meta {
    min-width: 0;
    margin-bottom: 0.9rem;
    color: var(--site-muted);
    font-weight: 700;
}

.story-detail-meta-date {
    white-space: nowrap;
}

.story-detail-views {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.3rem;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    min-height: 1.9rem;
    padding: 0 0.7rem;
    margin-bottom: 0;
    color: #52606a;
    background: rgba(255, 255, 255, 0.52);
    border-left: 1px solid rgba(72, 111, 134, 0.14);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.story-detail-actions.is-views-only .story-detail-views {
    border-left: 0;
}

.story-detail-views-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.story-detail-header h1 {
    margin-bottom: 0.9rem;
    font-size: 2.65rem;
    font-weight: 500;
    line-height: 1;
}

.story-detail-subtitle {
    max-width: 720px;
    margin: 0;
    color: var(--site-muted);
    font-size: 1.12rem;
    line-height: 1.45;
}

.story-view-segmented {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(4.5rem, 1fr));
    gap: 0.15rem;
}

.story-view-segmented::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: calc((100% - 0.15rem) / 2);
    background: var(--site-accent);
    border-radius: 999px;
    box-shadow: 0 0.35rem 0.9rem rgba(72, 111, 134, 0.18);
    content: "";
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.story-view-segmented.is-gallery-active::before {
    transform: translateX(calc(100% + 0.15rem));
}

.story-view-option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0 0.75rem;
    color: #52606a;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.story-view-option:hover,
.story-view-option:focus-visible {
    color: var(--site-accent);
    background: rgba(72, 111, 134, 0.08);
}

.story-view-option.is-active {
    color: #ffffff;
}

.story-view-panel[hidden],
[data-story-view-panel][hidden] {
    display: none;
}

.story-view-panels {
    position: relative;
    overflow: hidden;
}

.story-view-panel {
    min-width: 0;
}

.story-view-panels.is-transitioning-next .story-view-panel,
.story-view-panels.is-transitioning-prev .story-view-panel {
    will-change: opacity, transform;
}

.story-view-panel.is-entering,
.story-view-panel.is-exiting {
    animation-duration: 360ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.story-view-panel.is-entering {
    animation-fill-mode: both;
}

.story-view-panel.is-exiting {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    animation-fill-mode: both;
}

.story-view-panel.is-from-next {
    animation-name: story-panel-enter-next;
}

.story-view-panel.is-from-prev {
    animation-name: story-panel-enter-prev;
}

.story-view-panel.is-to-prev {
    animation-name: story-panel-exit-prev;
}

.story-view-panel.is-to-next {
    animation-name: story-panel-exit-next;
}

@keyframes story-panel-enter-next {
    from {
        opacity: 0;
        transform: translateX(2rem);
    }
}

@keyframes story-panel-enter-prev {
    from {
        opacity: 0;
        transform: translateX(-2rem);
    }
}

@keyframes story-panel-exit-prev {
    to {
        opacity: 0;
        transform: translateX(-2rem);
    }
}

@keyframes story-panel-exit-next {
    to {
        opacity: 0;
        transform: translateX(2rem);
    }
}

@media (min-width: 576px) {
    .story-view-panel.is-from-next,
    .story-view-panel.is-from-prev {
        animation-name: story-panel-fade-in;
    }

    .story-view-panel.is-to-next,
    .story-view-panel.is-to-prev {
        animation-name: story-panel-fade-out;
    }

    @keyframes story-panel-fade-in {
        from {
            opacity: 0;
        }
    }

    @keyframes story-panel-fade-out {
        to {
            opacity: 0;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-view-segmented::before {
        transition: none;
    }

    .story-view-panel.is-entering,
    .story-view-panel.is-exiting {
        animation: none;
    }
}

.story-section-list {
    display: grid;
    gap: clamp(2.75rem, 6vw, 5rem);
}

.story-section {
    min-width: 0;
}

.story-section-heading {
    max-width: 760px;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.story-section-heading h2,
.story-section-body h2 {
    margin-bottom: clamp(1rem, 2.2vw, 1.6rem);
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1.12;
}

.story-section-body {
    width: 100%;
    color: var(--site-ink);
    font-size: 1.03rem;
    line-height: 1.86;
}

.story-section-body > * {
    margin-top: 0;
}

.story-section-body > * + * {
    margin-top: 1.15rem;
}

.story-section-body h2 + p,
.story-section-body h2 + ul,
.story-section-body h2 + ol,
.story-section-body h2 + blockquote {
    margin-top: 0;
}

.story-section-body p {
    margin-bottom: 0;
}

.story-section-body strong {
    font-weight: 700;
}

.story-section-body a {
    color: var(--site-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.story-section-body ul,
.story-section-body ol {
    padding-left: 1.35rem;
}

.story-section-body li + li {
    margin-top: 0.35rem;
}

.story-section-body blockquote {
    padding-left: clamp(1rem, 2vw, 1.5rem);
    color: #454a4d;
    border-left: 0.18rem solid var(--site-accent);
    font-size: 1.04em;
    font-style: italic;
}

.story-section-body p:last-child {
    margin-bottom: 0;
}

.story-section-gallery-description {
    width: 100%;
    margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.story-section-map-description {
    width: 100%;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.story-map {
    position: relative;
    width: 100%;
    height: clamp(400px, 62vw, 700px);
    overflow: hidden;
    background: #e8ece5;
    border: 1px solid rgba(53, 64, 58, 0.16);
    box-shadow: 0 1rem 2.5rem rgba(32, 33, 36, 0.08);
}

@media (max-width: 48rem) {
    .story-map {
        height: clamp(500px, 130vw, 720px);
    }
}

.story-map.has-error {
    display: grid;
    place-items: center;
}

.story-map-loading,
.story-map-message {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--site-muted);
    background: #e8ece5;
    font-size: 0.95rem;
}

.story-map.is-ready .story-map-loading {
    display: none;
}

.story-map.is-viewbox {
    background: transparent;
}

.story-map.is-viewbox .story-map-loading,
.story-map.is-viewbox .story-map-message {
    background: transparent;
}

.story-map-viewbox-svg {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}

.story-map-viewbox-layer path,
.story-map-viewbox-layer circle {
    stroke: #2f6f73;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: #75a68c;
    fill-opacity: 0.24;
    fill-rule: evenodd;
}

.story-map-viewbox-layer circle {
    fill-opacity: 0.9;
}

.story-map-viewbox-layer path.is-line {
    fill: none;
    fill-opacity: 0;
}

.story-map-popup {
    display: grid;
    gap: 0.2rem;
}

.story-map-popup strong {
    color: var(--site-ink);
}

.story-map-popup span {
    color: #454a4d;
}

.story-section-text-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.85fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
}

.story-section-text-image-left .story-section-body {
    order: 2;
}

.story-section-text-image-left .story-section-image {
    order: 1;
}

.story-section-image {
    min-width: 0;
    margin: 0;
}

.story-section-image-expand {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

.story-section-image-expand:focus-visible {
    outline: 0.2rem solid var(--site-accent);
    outline-offset: 0.2rem;
}

.story-section-image img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 1rem 2.5rem rgba(32, 33, 36, 0.08);
}

.story-section-image figcaption {
    margin-top: 0.65rem;
    color: var(--site-muted);
    font-size: 0.95rem;
}

.story-section-image-wide img {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.story-section-full-image {
    width: min(100vw, 1600px);
    margin-right: auto;
    margin-left: auto;
}

.story-section-full-image .story-section-image-wide img {
    max-width: 100%;
}

.story-section-full-image .story-section-image figcaption {
    max-width: min(760px, calc(100% - 2rem));
    margin-right: clamp(1rem, 6vw, 5rem);
    margin-left: clamp(1rem, 6vw, 5rem);
    text-align: left;
}

.story-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.story-detail-copy {
    color: var(--site-ink);
    font-size: 1.08rem;
    line-height: 1.8;
}

.story-detail-copy p:last-child {
    margin-bottom: 0;
}

.story-detail-footer {
    margin-top: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.story-top-link {
    color: var(--site-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.story-top-link:hover,
.story-top-link:focus {
    color: #3f6075;
}

.story-photo-gallery {
    display: grid;
    gap: clamp(1rem, 2.4vw, 1.75rem);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-anchor: none;
}

.story-photo-gallery.is-masonry {
    display: flex;
    align-items: flex-start;
    gap: clamp(1rem, 2.4vw, 1.75rem);
}

.story-photo-column {
    display: grid;
    flex: 1 1 0;
    gap: clamp(1rem, 2.4vw, 1.75rem);
    min-width: 0;
}

.story-photo-tile {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: #e9e3d9;
    /* border-radius: 0.25rem; */
    box-shadow: 0 1rem 2.5rem rgba(32, 33, 36, 0.08);
    transition:
        box-shadow 160ms ease,
        transform 160ms ease;
}

.story-photo-tile-centered-row {
    width: calc((100% - clamp(1rem, 2.4vw, 1.75rem)) / 2);
    grid-column: 1 / -1;
    justify-self: center;
}

.story-photo-tile:hover,
.story-photo-tile:focus-within {
    transform: translateY(-0.25rem);
    box-shadow: 0 1.35rem 3rem rgba(32, 33, 36, 0.16);
}

.story-photo-expand {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

.story-photo-expand:focus-visible {
    outline: 0.2rem solid var(--site-accent);
    outline-offset: -0.2rem;
}

.story-photo-tile img {
    display: block;
    width: 100%;
    height: auto;
}

.story-photo-tile figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 2.5rem 1rem 1rem;
    color: #ffffff;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68));
    font-size: 0.95rem;
    pointer-events: none;
}

.story-photo-modal .modal-content {
    align-items: center;
    width: fit-content;
    max-width: 100%;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.story-photo-modal .modal-dialog {
    width: fit-content;
    max-width: calc(100vw - 2rem);
}

.story-photo-modal.modal {
    --bs-modal-bg: transparent;
}

.story-photo-modal .modal-body {
    width: fit-content;
    max-width: 100%;
    padding: 0;
}

.story-photo-modal + .modal-backdrop,
.story-photo-modal-open .modal-backdrop.show {
    background-color: rgba(18, 20, 22, 0.74);
    opacity: 1;
    -webkit-backdrop-filter: blur(0.28rem);
    backdrop-filter: blur(0.28rem);
}

.story-photo-modal-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.story-photo-modal-image-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    touch-action: pan-y;
}

.story-photo-modal-image {
    display: block;
    width: auto;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 9rem - env(safe-area-inset-bottom));
    margin: 0 auto;
    border-radius: 0.125rem;
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.38);
}

.story-photo-modal.is-image-entering-next .story-photo-modal-image {
    animation: story-photo-image-enter-next 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.story-photo-modal.is-image-entering-prev .story-photo-modal-image {
    animation: story-photo-image-enter-prev 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.story-photo-modal-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(24, 27, 29, 0.3);
}

.story-photo-modal-loading[hidden] {
    display: none;
}

.story-photo-modal-footer {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.75rem 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    width: var(--story-photo-modal-image-width, 100%);
    max-width: 100%;
}

.story-photo-modal-caption {
    min-width: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: left;
}

.story-photo-modal-caption[hidden] {
    display: none;
}

.story-photo-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
}

.story-photo-modal-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 0.75rem;
}

.story-photo-modal-carousel[hidden] {
    display: none;
}

.story-photo-modal-carousel.is-windowed {
    min-width: 4.6rem;
}

.story-photo-modal-dot {
    width: 0.42rem;
    height: 0.42rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.42);
    border: 0;
    border-radius: 999px;
    transition:
        background-color 160ms ease,
        opacity 160ms ease,
        transform 160ms ease;
}

.story-photo-modal-dot.is-active {
    background: #ffffff;
    transform: scale(1.28);
}

.story-photo-modal-dot.is-small {
    opacity: 0.7;
    transform: scale(0.7);
}

.story-photo-modal-dot.is-active.is-small {
    opacity: 1;
    transform: scale(1.05);
}

.story-photo-modal-dot:hover,
.story-photo-modal-dot:focus-visible {
    background: rgba(255, 255, 255, 0.86);
}

@keyframes story-photo-image-enter-next {
    from {
        opacity: 0.92;
        transform: translateX(0.45rem);
    }
}

@keyframes story-photo-image-enter-prev {
    from {
        opacity: 0.92;
        transform: translateX(-0.45rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .story-photo-modal.is-image-entering-next .story-photo-modal-image,
    .story-photo-modal.is-image-entering-prev .story-photo-modal-image {
        animation: none;
    }
}

.story-photo-modal-tools {
    position: fixed;
    right: 1rem;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: 1rem;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    min-width: 0;
    transition: none;
}

.story-photo-resolution-toggle,
.story-photo-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.9rem;
    color: #222426;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(34, 36, 38, 0.16);
    border-radius: 999px;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    backdrop-filter: blur(0.6rem);
    transition: none;
}

.story-photo-resolution-toggle:hover,
.story-photo-resolution-toggle:focus-visible,
.story-photo-download-link:hover,
.story-photo-download-link:focus-visible {
    color: #222426;
    background: #ffffff;
    border-color: rgba(34, 36, 38, 0.32);
}

.story-photo-resolution-toggle.is-active {
    color: #ffffff;
    background: var(--site-accent);
    box-shadow: inset 0 0 0 1px var(--site-accent);
}

.story-photo-resolution-toggle:disabled {
    cursor: default;
    opacity: 1;
}

.story-photo-resolution-toggle[hidden] {
    display: none;
}

.story-photo-download-link[hidden] {
    display: none;
}

@media (max-width: 1199.98px) {
    .story-photo-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 576px) {
    .story-detail-heading {
        text-align: center;
    }

    .story-detail-header h1 {
        font-size: 3.35rem;
    }

    .story-detail-subtitle {
        margin-right: auto;
        margin-left: auto;
        font-size: 1.22rem;
    }

    .story-section-heading h2,
    .story-section-body h2 {
        font-size: 1.75rem;
    }

    .story-section-body {
        font-size: 1.07rem;
    }
}

@media (min-width: 992px) {
    .story-detail-header h1 {
        font-size: 4.4rem;
        line-height: 0.96;
    }

    .story-detail-subtitle {
        font-size: 1.36rem;
    }

    .story-section-heading h2,
    .story-section-body h2 {
        font-size: 2rem;
    }

    .story-section-body {
        font-size: 1.13rem;
    }

    .story-section-body strong {
        font-weight: 700;
    }

    .story-section-body a {
        font-weight: 700;
    }

    .story-section-image figcaption {
        font-size: 1rem;
    }
}

@media (min-width: 1200px) {
    .story-detail-header h1 {
        font-size: 5rem;
    }

    .story-detail-subtitle {
        font-size: 1.45rem;
    }

    .story-section-body {
        font-size: 1.18rem;
    }
}

@media (max-width: 64rem) {
    .story-card {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .story-grid {
        grid-template-columns: 1fr;
    }

    .story-section-text-image,
    .story-section-text-image-left .story-section-body,
    .story-section-text-image-left .story-section-image {
        display: block;
    }

    .story-section-text-image .story-section-body {
        margin-bottom: 1.25rem;
    }

    .story-detail-toolbar {
        align-items: center;
        flex-wrap: wrap;
    }

    .story-detail-actions {
        max-width: 100%;
    }

    .story-photo-modal .modal-dialog {
        width: fit-content;
        max-width: calc(100vw - 1rem);
        margin-right: auto;
        margin-left: auto;
    }

    .story-photo-modal-image {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 6rem);
    }

    .story-photo-modal-footer {
        grid-template-columns: 1fr;
    }
}