@font-face {
    font-family: "LFC Serif Condensed";
    src: url("../fonts/LFCSerifCondensed-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.gallery-page {
    --gallery-red: #e31b23;
    --gallery-ink: #17171a;
    --gallery-muted: #696972;
    --gallery-line: #dedee3;
    --gallery-soft: #f4f3f2;
    --gallery-shadow: 0 18px 45px rgba(20, 20, 24, .09);
    min-height: 450px;
    padding: clamp(64px, 8vw, 108px) 0;
    color: var(--gallery-ink);
    background: #fff;
}

.gallery-page *,
.gallery-page *::before,
.gallery-page *::after {
    box-sizing: border-box;
}

.gallery-page .shell {
    width: min(calc(100% - 48px), 1180px);
    margin-right: auto;
    margin-left: auto;
}

.gallery-page img {
    display: block;
    max-width: 100%;
}

.gallery-page .page-intro {
    max-width: 850px;
    margin-bottom: 64px;
}

.gallery-page .page-intro--split {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.gallery-page .eyebrow {
    margin: 0 0 12px;
    color: var(--gallery-red);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.gallery-page .page-intro h2 {
    margin: 0;
    color: var(--gallery-ink);
    font-family: "LFC Serif Condensed", Georgia, serif;
    font-size: clamp(2.25rem, 5vw, 4.7rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.015em;
}

.gallery-page .page-intro > div > p:last-child {
    max-width: 670px;
    margin: 16px 0 0;
    color: var(--gallery-muted);
    font-size: 1.08rem;
    line-height: 1.65;
}

.gallery-page .page-intro__count {
    flex: 0 0 auto;
    margin: 0;
    padding-bottom: 6px;
    color: var(--gallery-red);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gallery-page .album-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.gallery-page .album-card {
    overflow: hidden;
    border: 1px solid var(--gallery-line);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(20, 20, 24, .06);
    color: var(--gallery-ink);
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.gallery-page .album-card:hover,
.gallery-page .album-card:focus-visible {
    color: var(--gallery-ink);
    text-decoration: none;
    transform: translateY(-5px);
    box-shadow: var(--gallery-shadow);
}

.gallery-page .album-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    display: block;
    overflow: hidden;
    background: #242328;
}

.gallery-page .album-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.gallery-page .album-card:hover .album-card__image img {
    transform: scale(1.035);
}

.gallery-page .album-card__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .2);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .16em;
}

.gallery-page .album-card__count {
    position: absolute;
    right: 14px;
    bottom: 14px;
    padding: 7px 11px;
    border-radius: 2px;
    background: rgba(23, 23, 26, .86);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.gallery-page .album-card__body {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
}

.gallery-page .album-card__body time {
    margin-bottom: 8px;
    color: var(--gallery-red);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gallery-page .album-card__body strong {
    font-family: "LFC Serif Condensed", Georgia, serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.05;
}

.gallery-page .album-card__body > span {
    display: -webkit-box;
    margin-top: 11px;
    overflow: hidden;
    color: var(--gallery-muted);
    font-size: 1rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.gallery-page .album-card__body em {
    margin-top: auto;
    padding-top: 20px;
    color: var(--gallery-red);
    font-size: .95rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gallery-page .gallery-back {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 28px;
    color: var(--gallery-red);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.gallery-page .gallery-album-meta {
    flex: 0 0 auto;
    display: grid;
    gap: 5px;
    padding-bottom: 6px;
    color: var(--gallery-muted);
    text-align: right;
}

.gallery-page .gallery-album-meta time {
    color: var(--gallery-red);
    font-weight: 700;
}

.gallery-page .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gallery-page .gallery-card {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: var(--gallery-soft);
    text-align: left;
    cursor: pointer;
}

.gallery-page .gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .35s ease;
}

.gallery-page .gallery-card > span {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 9px 13px;
    background: var(--gallery-red);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .08em;
    opacity: 0;
    text-transform: uppercase;
    transition: opacity .2s ease;
}

.gallery-page .gallery-card small {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 44px 15px 12px;
    overflow: hidden;
    background: linear-gradient(transparent, rgba(0, 0, 0, .82));
    color: #fff;
    font-size: .94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-page .gallery-card:hover img {
    transform: scale(1.03);
}

.gallery-page .gallery-card:hover > span,
.gallery-page .gallery-card:focus-visible > span {
    opacity: 1;
}

.gallery-page .gallery-dialog {
    width: min(96vw, 1280px);
    max-width: none;
    max-height: 94vh;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    overflow: visible;
}

.gallery-page .gallery-dialog::backdrop {
    background: rgba(0, 0, 0, .94);
}

.gallery-page .gallery-dialog figure {
    margin: 0;
    display: grid;
    justify-items: center;
}

.gallery-page .gallery-dialog img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
}

.gallery-page .gallery-dialog figcaption {
    min-height: 30px;
    padding: 9px 60px 0;
    color: #fff;
    text-align: center;
}

.gallery-page .gallery-dialog__close {
    position: fixed;
    z-index: 2;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.gallery-page .gallery-dialog__nav {
    position: fixed;
    z-index: 2;
    top: 50%;
    width: 54px;
    height: 70px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 3px;
    background: rgba(17, 17, 17, .72);
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.gallery-page .gallery-dialog__nav--previous { left: 20px; }
.gallery-page .gallery-dialog__nav--next { right: 20px; }

.gallery-page .empty-state {
    width: 100%;
    min-height: 220px;
    display: grid;
    place-content: center;
    padding: 36px;
    border: 1px dashed #c9c9cf;
    background: var(--gallery-soft);
    text-align: center;
}

.gallery-page .empty-state h3,
.gallery-page .empty-state p { margin: 0; }
.gallery-page .empty-state p { color: var(--gallery-muted); }

@media (max-width: 960px) {
    .gallery-page .album-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .gallery-page { padding: 64px 0; }
    .gallery-page .shell { width: min(calc(100% - 32px), 1180px); }
    .gallery-page .page-intro--split {
        align-items: flex-start;
        flex-direction: column;
    }
    .gallery-page .page-intro { margin-bottom: 44px; }
    .gallery-page .album-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .gallery-page .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 520px) {
    .gallery-page .album-grid { grid-template-columns: 1fr; }
    .gallery-page .album-card__body { min-height: 190px; }
    .gallery-page .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .gallery-page .gallery-dialog__nav {
        top: auto;
        bottom: 18px;
        width: 48px;
        height: 48px;
        transform: none;
    }
    .gallery-page .gallery-dialog__nav--previous { left: 18px; }
    .gallery-page .gallery-dialog__nav--next { right: 18px; }
    .gallery-page .gallery-dialog__close { top: 14px; right: 14px; }
    .gallery-page .gallery-dialog figcaption { padding-right: 70px; padding-left: 70px; }
    .gallery-page .gallery-album-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-page .album-card,
    .gallery-page .album-card__image img,
    .gallery-page .gallery-card img,
    .gallery-page .gallery-card > span { transition: none; }
}

.gallery-views { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.gallery-views a { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 2px solid #c8102e; color: #c8102e; font-weight: 800; text-decoration: none; }
.gallery-views a[aria-current="page"] { background: #c8102e; color: #fff; }
.gallery-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 32px; padding: 20px; border: 1px solid #e3e3e3; background: #fff; }
.gallery-filters label { display: grid; gap: 6px; color: #111; font-weight: 700; }
.gallery-filters select { min-width: 210px; min-height: 44px; padding: 11px 38px 11px 12px; border: 1px solid #bbb; background: #fff; }
.gallery-filters button,
.gallery-filters a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 0; font-weight: 700; text-decoration: none; }
.gallery-filters button { background: #c8102e; color: #fff; }
.gallery-filters a { background: #111; color: #fff; }
.album-card__category { display: block; margin: 4px 0; color: #c8102e; font-size: .82rem; font-style: normal; font-weight: 800; }
.activity-year { margin: 38px 0 16px; font-size: 1.6rem; }
.activity-year:first-child { margin-top: 0; }
.history-register__grid { display: grid; gap: 14px; }
.history-item { padding: 18px 20px; border-left: 4px solid #c8102e; background: #f5f5f5; }
.history-item time,
.history-item__category { display: inline-block; margin-right: 10px; color: #666; font-size: .9rem; }
.history-item h3 { margin: 7px 0 5px; }
.history-item p { margin: 0; color: #444; }

@media (max-width: 640px) {
    .gallery-views { display: grid; grid-template-columns: 1fr 1fr; }
    .gallery-views a { padding: 0 10px; text-align: center; }
    .gallery-filters { display: grid; }
    .gallery-filters select { width: 100%; min-width: 0; }
}

/* Center photographs in the landscape viewport, independently of caption */
@media(orientation:landscape){.gallery-page .gallery-dialog{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-height:none;margin:0;box-sizing:border-box;overflow:hidden;}.gallery-page .gallery-dialog figure{height:100%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:20px 80px;padding-block:calc(20px + max(env(safe-area-inset-top,0px),env(safe-area-inset-bottom,0px)));}.gallery-page .gallery-dialog img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}.gallery-page .gallery-dialog figcaption{position:absolute;left:80px;right:80px;bottom:4px;min-height:0;padding:0;}.gallery-page .gallery-dialog__close{top:10px;right:14px;width:44px;height:44px;}.gallery-page .gallery-dialog__nav{top:50%;bottom:auto;transform:translateY(-50%);width:44px;height:54px;}.gallery-page .gallery-dialog__nav--previous{left:14px;}.gallery-page .gallery-dialog__nav--next{right:14px;}}


/* Mobile gallery frame correction, 2026-09-16 */
.album-card{min-width:0;max-width:100%}
.album-card__image{display:block;width:100%;max-width:100%;overflow:hidden}
.album-card__image img{display:block;max-width:100%}
.album-card__body{min-width:0;max-width:100%;box-sizing:border-box}
.album-card__body strong,.album-card__body>span{max-width:100%;overflow-wrap:anywhere}
.album-card[href$="/olsc-bahrain-founding-gathering-19-march-2013"] .album-card__image img{object-fit:contain;background:#f8f7f7}
@media(max-width:600px){.album-card__body strong{font-size:clamp(1.35rem,6vw,1.75rem);line-height:1.25}}

/* Visible cover frame and direct album navigation, 2026-09-16 */
.gallery-page .album-card{display:block;padding:10px;border:1px solid #dedee3}
.gallery-page .album-card__image{border-radius:2px;background:#f4f3f2}
.gallery-page .album-card__image img{object-fit:contain}
.gallery-page .album-card:hover .album-card__image img{transform:none}
.gallery-page .album-card__body{padding:20px 14px}
.album-navigation{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:0 0 28px}
.album-navigation a{flex:1;min-width:140px;display:block;padding:12px;border:1px solid #dedee3;color:#c8102e;text-decoration:none;font-weight:700}
.album-navigation__title{display:block;margin-top:6px;color:#696972;font-size:.85rem;font-weight:400;overflow-wrap:anywhere}
.gallery-dialog__albums{position:fixed;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:10px;max-width:calc(100vw - 150px)}
.gallery-dialog__albums a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;background:#fff;color:#a00;font-weight:700;text-decoration:none;border-radius:3px;text-align:center}
@media(max-width:720px),(max-height:520px){.gallery-dialog__albums{bottom:76px;max-width:calc(100vw - 24px)}.gallery-dialog__albums a{font-size:.85rem}}

.gallery-page .gallery-dialog figure{padding-bottom:100px}@media(max-width:720px),(max-height:520px){.gallery-page .gallery-dialog figure{padding-bottom:140px}}
.gallery-page .gallery-grid--album{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.gallery-page .gallery-grid--album .gallery-card{flex:none;width:calc(50% - 6px);height:auto;aspect-ratio:auto;background:transparent}.gallery-page .gallery-grid--album .gallery-card img{width:100%;height:auto;object-fit:contain}.gallery-page .gallery-grid--album .gallery-card:hover img{transform:none}.gallery-page .gallery-dialog figure{padding-bottom:20px}@media(max-width:520px){.gallery-page .gallery-dialog figure{padding-bottom:76px}}.album-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.album-navigation a{min-width:0}.album-navigation a:only-child{grid-column:1/-1}

/* Codex photo framing fixes 2026-09-18: show complete gallery images without cropping. */
.gallery-page .album-card__image,.gallery-album-photo,.gallery-grid--album button{background:#f7f7f8;}
.gallery-page .album-card__image img,.gallery-album-photo img,.gallery-grid--album button img{object-fit:contain!important;background:#f7f7f8;}
.gallery-album-video video{object-fit:contain!important;background:#111;}