/* ==========================================================================
   Gubadley theme — screen.css
   Single stylesheet, no framework, no build step. Sections:
   1 Tokens  2 Base  3 Layout  4 Header/nav  5 Breaking bar  6 Hero
   7 Sections & cards  8 Tiles  9 Gallery  10 Contact/map  11 Footer
   12 Post & Ghost content  13 Archives/pagination  14 Section pages
   15 Forms  16 Error  17 Utilities  18 Dark mode  19 Motion  20 Polish
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
/* @font-face for Inter lives in default.hbs so the URL matches the preload (both use the asset helper). */

:root {
    --blue: #0B3D91;
    --blue-dark: #082E6E;
    --blue-deeper: #061F4C;
    --sky: #4AA3DF;
    --sky-soft: #E6F2FB;
    --sand: #F4EFE6;
    --sand-dark: #E3DED4;
    --ink: #1B1F24;
    --muted: #5B6470;
    --green: #167A4B;
    --green-soft: #E3F5EC;
    --amber: #935A12;
    --amber-soft: #FBF0DF;
    --red: #B42318;
    --white: #FFFFFF;

    --bg: #FBFAF7;
    --surface: #FFFFFF;
    --surface-alt: var(--sand);
    --text: var(--ink);
    --text-muted: var(--muted);
    --border: var(--sand-dark);
    --link: var(--blue);
    --link-hover: var(--sky);
    --focus: var(--sky);

    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(27, 31, 36, .06), 0 6px 20px rgba(11, 61, 145, .07);
    --shadow-lg: 0 2px 4px rgba(27, 31, 36, .08), 0 16px 40px rgba(11, 61, 145, .14);
    --container: 1200px;
    --narrow: 760px;
    --gutter: 1rem;
    --topbar-h: 4rem;
}

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: anywhere;
    hyphens: auto;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-family: var(--gh-font-heading, var(--font-sans));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--text);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem); }
h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); }
h3 { font-size: 1.125rem; }

p { margin: 0 0 1em; }

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
}

a:hover { color: var(--link-hover); }

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: var(--sky); color: var(--white); }

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100;
    padding: .5rem 1rem;
    background: var(--blue);
    color: var(--white);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { top: 0; }

/* 3. Layout ------------------------------------------------------------- */
.container {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
}

.container--narrow { max-width: var(--narrow); }

.site-main { min-height: 50vh; }

.section { padding-block: clamp(2rem, 4vw, 3.5rem); }

.section--services, .section--gallery { background: var(--surface-alt); }

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1.25rem;
}

.section__title {
    position: relative;
    margin: 0;
    padding-left: .85rem;
}

.section__title::before {
    content: "";
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 4px;
    border-radius: 2px;
    background: var(--sky);
}

.section__lead { margin: .35rem 0 0 .85rem; color: var(--text-muted); font-size: .95rem; }

.section__more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    text-decoration: none;
}
.section__more:hover { text-decoration: underline; }

.grid {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 640px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .6rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-dark); color: var(--white); }
.btn--outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--outline:hover { background: var(--sky-soft); color: var(--blue); }
.btn--light { background: var(--white); color: var(--blue); }
.btn--light:hover { background: var(--sky-soft); color: var(--blue-dark); }
.btn--outline-light { border-color: rgba(255, 255, 255, .8); color: var(--white); background: transparent; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

.icon { flex: none; }

/* 4. Header / nav ------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 2px 10px rgba(6, 31, 76, .25);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--topbar-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.brand__logo {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 6px;
    background: var(--white);
    padding: 2px;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.brand__sub { font-size: .75rem; opacity: .85; }

.topbar__actions { display: flex; align-items: center; gap: .25rem; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}
.icon-btn:hover { background: rgba(255, 255, 255, .14); }

.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.lang-switch {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
    overflow-wrap: normal;
    margin-right: .5rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.lang-switch__item { color: inherit; text-decoration: none; opacity: .75; padding: .15rem .2rem; }
.lang-switch__item:hover { opacity: 1; color: inherit; text-decoration: underline; }
.lang-switch__item.is-active { opacity: 1; color: var(--white); }
.lang-switch__sep { opacity: .5; }

.site-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav__link {
    display: block;
    padding: .9rem .85rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text);
    text-decoration: none;
    border-bottom: 3px solid transparent;
}
.nav__link:hover { color: var(--blue); border-bottom-color: var(--sky); }
.nav__item.is-current .nav__link { color: var(--blue); border-bottom-color: var(--blue); }

@media (max-width: 899.98px) {
    .site-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 40;
        box-shadow: var(--shadow-lg);
        max-height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
    }
    body.nav-open .site-nav { display: block; }
    .nav { flex-direction: column; padding-block: .5rem; }
    .nav__link { padding: .85rem 0; border-bottom: 1px solid var(--border); }
    .nav__item:last-child .nav__link { border-bottom: 0; }
    .nav__item.is-current .nav__link { border-bottom-color: var(--border); }
    .brand__sub { display: none; }
}

@media (max-width: 419.98px) {
    .brand__name { font-size: .95rem; }
    .brand__logo { width: 40px; height: 40px; }
    .icon-btn { width: 2.5rem; }
    .lang-switch { margin-right: .25rem; padding: .2rem .45rem; }
}

@media (min-width: 900px) {
    .nav-toggle { display: none; }
    .nav { justify-content: flex-start; margin-inline: -.85rem; }
}

/* 5. Breaking bar -------------------------------------------------------- */
.breaking {
    background: var(--red);
    color: var(--white);
}

.breaking__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 2.75rem;
    padding-block: .35rem;
}

.breaking__label {
    flex: none;
    padding: .1rem .5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .2);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.breaking__link {
    flex: 1;
    min-width: 0;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breaking__link:hover { color: inherit; text-decoration: underline; }

.breaking__close {
    flex: none;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}
.breaking__close:hover { background: rgba(255, 255, 255, .2); }

/* 6. Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    color: var(--white);
    background: var(--blue-dark);
    overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 31, 76, .15) 0%, rgba(6, 31, 76, 0) 40%, rgba(6, 31, 76, .55) 100%),
        linear-gradient(100deg, rgba(6, 31, 76, .94) 0%, rgba(11, 61, 145, .8) 50%, rgba(11, 61, 145, .35) 100%);
}
.hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 3rem;
    background: var(--bg);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.hero__inner {
    display: grid;
    gap: 2rem;
    align-items: center;
    min-height: min(34rem, 72vh);
    padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem);
}

.hero__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    align-self: center;
    margin-left: .25rem;
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    opacity: .9;
}
.hero__link:hover { opacity: 1; color: var(--white); text-decoration: underline; }

.hero__kicker {
    margin: 0 0 .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sky);
}

.hero__title {
    margin: 0 0 .75rem;
    font-size: clamp(2rem, 1.4rem + 3.2vw, 3.5rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.05;
}

.hero__title-sub {
    display: block;
    font-size: .55em;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    margin-top: .35rem;
}

.hero__lead {
    max-width: 34rem;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, .9);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.dc-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}

.dc-card__photo {
    width: 88px;
    height: 88px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--sky-soft);
}

.dc-card__role {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blue);
}

.dc-card__name { margin: .15rem 0 .5rem; font-size: 1.15rem; }

.dc-card__welcome {
    font-size: .95rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dc-card__welcome p { margin: 0; }

.dc-card__more {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .6rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}
.dc-card__more:hover { text-decoration: underline; }

@media (min-width: 900px) {
    .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
    .dc-card { justify-self: end; max-width: 30rem; }
}

/* 7. Sections & cards ---------------------------------------------------- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--sand);
    overflow: hidden;
}
.card__img { width: 100%; height: 100%; object-fit: cover; }
.card__img--placeholder { opacity: .9; }

.card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.2rem; }

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    font-size: .8rem;
    color: var(--text-muted);
}

.card__title { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.card__title a { color: var(--text); text-decoration: none; }
.card__title a:hover { color: var(--blue); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card a:not(.card__title a) { position: relative; z-index: 1; }

.card__excerpt { margin: 0; font-size: .93rem; color: var(--text-muted); }
.card__date { font-size: .8rem; color: var(--text-muted); }

.tag-pill {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--sky-soft);
    color: var(--blue);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}
.tag-pill:hover { background: var(--blue); color: var(--white); }

.badge {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 1;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--blue);
}
.badge--done { background: var(--green); }
.badge--ongoing { background: var(--amber); }

/* News: lead story (text over image) + compact list */
.home-news { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .home-news { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

.news-grid { display: grid; gap: 1rem; }

.post-card--large { position: relative; color: var(--white); background: var(--blue-deeper); }
.post-card--large .card__media { aspect-ratio: 16 / 9; }
.post-card--large .card__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6, 31, 76, 0) 30%, rgba(6, 31, 76, .55) 65%, rgba(6, 31, 76, .92) 100%);
}
.post-card--large .card__body {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.25rem 1.4rem 1.4rem;
    gap: .5rem;
}
.post-card--large .card__title { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem); line-height: 1.2; }
.post-card--large .card__title a, .post-card--large .card__date, .post-card--large .card__excerpt { color: var(--white); }
.post-card--large .card__title a:hover { color: var(--sky); }
.post-card--large .card__excerpt { opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card--large .tag-pill { background: var(--sky); color: var(--blue-deeper); }
@media (max-width: 639.98px) {
    .post-card--large .card__media { aspect-ratio: 4 / 3; }
    .post-card--large .card__excerpt { display: none; }
}

.post-card--compact { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: stretch; }
.post-card--compact .card__media { aspect-ratio: auto; min-height: 5.5rem; height: 100%; }
.post-card--compact .card__body { padding: .7rem .9rem; gap: .25rem; justify-content: center; }
.post-card--compact .card__title { font-size: 1rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card--compact .card__meta { font-size: .75rem; }
@media (min-width: 640px) {
    .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .news-grid .post-card--large { grid-column: 1 / -1; }
    .post-card--compact { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* Side panels */
.panel {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}
.panel + .panel { margin-top: 1.25rem; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.panel__title { margin: 0; font-size: 1.05rem; }
.panel__more { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.panel__more:hover { text-decoration: underline; }
.panel--notices { border-top: 4px solid var(--amber); }

.notice-list { margin: 0; padding: 0; list-style: none; }
.notice { display: flex; gap: .85rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--border); }
.notice:first-child { border-top: 0; padding-top: 0; }
.notice__date {
    flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    border-radius: var(--radius-sm);
    background: var(--amber-soft);
    color: var(--amber);
    line-height: 1;
}
.notice__day { font-size: 1.15rem; font-weight: 800; }
.notice__month { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.notice__link { color: var(--text); font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.4; }
.notice__link:hover { color: var(--blue); text-decoration: underline; }

.panel--cta { background: var(--blue); color: var(--white); text-align: center; }
.panel--cta .icon { width: 2.75rem; height: 2.75rem; margin: 0 auto .5rem; color: var(--sky); }
.panel--cta .panel__title { color: var(--white); margin-bottom: .35rem; }
.panel--cta p { opacity: .9; font-size: .95rem; }

/* Facts strip */
.facts { position: relative; z-index: 1; background: var(--surface); border-bottom: 1px solid var(--border); }
.facts__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .facts__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { display: flex; flex-direction: column; padding: 1.1rem 1rem; border-left: 1px solid var(--border); }
.fact:first-child { border-left: 0; }
@media (max-width: 767.98px) { .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n + 3) { border-top: 1px solid var(--border); } }
.fact__value { font-size: 1.6rem; font-weight: 800; color: var(--blue); line-height: 1.1; letter-spacing: -.02em; }
.fact__label { font-size: .8rem; color: var(--text-muted); font-weight: 600; margin-top: .15rem; }

.empty { color: var(--text-muted); font-style: italic; }

/* 8. Tiles (quick services) --------------------------------------------- */
.tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; } }

.tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 7rem;
    padding: 1rem .75rem;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s, color .15s;
}
.tile .icon {
    width: 3rem;
    height: 3rem;
    padding: .65rem;
    border-radius: 50%;
    background: var(--sky-soft);
    color: var(--blue);
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--blue); }
.tile:hover .icon { background: var(--blue); color: var(--white); }

/* 9. Photos: home mosaic, album chips, masonry albums ------------------------------------- */
.home-album { margin-bottom: 1.25rem; }
.home-album__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .75rem; }
.home-album__title { margin: 0; font-size: 1.15rem; }
.home-album__title a { color: var(--text); text-decoration: none; }
.home-album__title a:hover { color: var(--blue); }
.home-album__meta { margin: 0; font-size: .875rem; color: var(--text-muted); }
.home-album__count::before { content: "\00b7"; margin: 0 .4rem; }
.home-album__count:empty { display: none; }

/* Ghost renders galleries as flex rows; both layouts below flatten those rows first. */
.mosaic .kg-gallery-card, .masonry .kg-gallery-card { margin: 0; width: 100%; }
.mosaic .kg-gallery-container, .mosaic .kg-gallery-row,
.masonry .kg-gallery-container, .masonry .kg-gallery-row { display: contents; }
.mosaic > p, .masonry > p { display: none; }
.mosaic .kg-gallery-image, .masonry .kg-gallery-image { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--sand-dark); }
.mosaic .kg-gallery-image img, .masonry .kg-gallery-image img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; transition: transform .35s ease; }
.mosaic .kg-gallery-image:hover img, .masonry .kg-gallery-image:hover img { transform: scale(1.04); }
.mosaic .kg-gallery-image::after, .masonry .kg-gallery-image::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 31, 76, 0) 60%, rgba(6, 31, 76, .35) 100%);
    opacity: 0; transition: opacity .25s;
}
.mosaic .kg-gallery-image:hover::after, .masonry .kg-gallery-image:hover::after { opacity: 1; }

/* Home mosaic: 1 hero tile + 5 small tiles, extra images hidden (a "+N" chip links to the album) */
.mosaic .kg-gallery-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 7.5rem; gap: .5rem; }
.mosaic .kg-gallery-row:first-child .kg-gallery-image:first-child { grid-column: span 2; grid-row: span 2; }
.mosaic .kg-gallery-image { min-height: 0; }
/* 5 tiles fill the grid exactly (2x2 hero + 4); Ghost rows hold 3 images, so hide row 3+ and the 3rd image of row 2 */
.mosaic .kg-gallery-row:nth-child(n + 3), .mosaic .kg-gallery-row:nth-child(2) .kg-gallery-image:nth-child(3) { display: none; }
@media (min-width: 640px) {
    .mosaic .kg-gallery-card { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 9.5rem; gap: .75rem; }
}
@media (min-width: 1024px) { .mosaic .kg-gallery-card { grid-auto-rows: 12rem; } }
.mosaic__more {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    background: rgba(6, 31, 76, .62);
    color: var(--white); font-size: 1.35rem; font-weight: 800; text-decoration: none;
    backdrop-filter: blur(1px);
}
.mosaic__more:hover { background: rgba(6, 31, 76, .75); color: var(--white); }

.album-chips { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .album-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .album-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.album-chip {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .75rem .55rem .55rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text); text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.album-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); color: var(--blue); }
.album-chip img { width: 3.5rem; height: 3.5rem; flex: none; border-radius: 6px; object-fit: cover; }
.album-chip__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.album-chip__title { font-weight: 600; font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.album-chip__date { font-size: .75rem; color: var(--text-muted); }
.album-chip .icon { color: var(--sky); }

/* Albums page: masonry columns */
.masonry .kg-gallery-card { columns: 2; column-gap: .6rem; }
@media (min-width: 768px) { .masonry .kg-gallery-card { columns: 3; column-gap: .9rem; } }
@media (min-width: 1200px) { .masonry .kg-gallery-card { columns: 4; } }
.masonry .kg-gallery-image { break-inside: avoid; margin-bottom: .6rem; }
@media (min-width: 768px) { .masonry .kg-gallery-image { margin-bottom: .9rem; } }
.masonry .kg-gallery-image img { height: auto; }

/* 10. Contact strip & map ----------------------------------------------- */
.contact-strip { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .contact-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } }

.contact-list {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}
.contact-list li { display: flex; align-items: flex-start; gap: .6rem; }
.contact-list .icon { color: var(--blue); margin-top: .15rem; }

.map {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 16rem;
    border-radius: var(--radius);
    background:
        linear-gradient(rgba(74, 163, 223, .12) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(90deg, rgba(74, 163, 223, .12) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--sky-soft);
    border: 1px solid var(--border);
    overflow: hidden;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-loaded .map__load, .map.is-loaded .map__link { display: none; }
.map__link { font-size: .85rem; display: inline-flex; align-items: center; gap: .3rem; }

/* 11. Footer ------------------------------------------------------------- */
.site-footer {
    margin-top: 2rem;
    background: var(--blue-deeper);
    color: rgba(255, 255, 255, .85);
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--sky); text-decoration: underline; }

.footer__grid {
    display: grid;
    gap: 2rem;
    padding-block: 2.5rem;
}
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }

.footer__title {
    margin: 0 0 .9rem;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sky);
}

.brand--footer { margin-bottom: .75rem; }
.brand--footer .brand__logo { width: 40px; height: 40px; }
.footer__desc { font-size: .95rem; max-width: 30rem; }

.social { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.social a {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.social a:hover { background: var(--sky); color: var(--white); }

.footer__links, .site-footer .nav { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.site-footer .nav__link { padding: 0; border: 0; color: var(--white); font-weight: 500; font-size: .95rem; }
.site-footer .nav__link:hover { color: var(--sky); }
.site-footer .nav__item.is-current .nav__link { color: var(--sky); }

.footer__contact { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; font-size: .95rem; }
.footer__contact li { display: flex; align-items: flex-start; gap: .55rem; }
.footer__contact .icon { color: var(--sky); margin-top: .15rem; }

.footer__about a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .9rem; }

.newsletter {
    display: grid; gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
}
@media (min-width: 768px) { .newsletter { grid-template-columns: 1fr 1fr; align-items: center; } }
.newsletter__title { margin: 0 0 .25rem; color: var(--white); font-size: 1.15rem; }
.newsletter__desc { margin: 0; font-size: .9rem; opacity: .85; }
.newsletter__row { display: flex; gap: .5rem; }
.newsletter__input {
    flex: 1; min-width: 0; min-height: 2.75rem;
    padding: .6rem .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .95);
    color: var(--ink); font: inherit;
}
.newsletter__msg { display: none; margin: .6rem 0 0; font-size: .9rem; font-weight: 600; }
.newsletter.success .newsletter__msg--ok { display: block; color: #8FE3B4; }
.newsletter.error .newsletter__msg--err { display: block; color: #F5A39B; }
.newsletter.success .newsletter__row, .newsletter.loading .btn { opacity: .6; pointer-events: none; }
@media (max-width: 479.98px) { .newsletter__row { flex-direction: column; } }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; }
.footer__bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: 1rem;
}
.footer__bottom p { margin: 0; }

/* 12. Post & Ghost content ---------------------------------------------- */
.post { padding-block: clamp(1.5rem, 3vw, 3rem) 0; }

.post__head { margin-bottom: 1.5rem; }
.post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin-bottom: .9rem;
    font-size: .875rem;
    color: var(--text-muted);
}
.post__title { margin-bottom: .5rem; }
.post__excerpt { font-size: 1.15rem; color: var(--text-muted); }

.post__cover { margin: 0 auto 2rem; }
.post__cover img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.post__cover figcaption { margin-top: .5rem; font-size: .85rem; color: var(--text-muted); text-align: center; }

.post__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.share { display: flex; align-items: center; gap: .4rem; }
.share__label { font-size: .85rem; font-weight: 600; color: var(--text-muted); margin-right: .25rem; }
.share__btn {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--blue);
}
.share__btn:hover { background: var(--blue); color: var(--white); border-color: var(--blue); }
.share__btn.is-copied { background: var(--green); border-color: var(--green); color: var(--white); }

.tag-pill--done { background: var(--green-soft); color: var(--green); }
.tag-pill--ongoing { background: var(--amber-soft); color: var(--amber); }

.post__cover--portrait { max-width: 22rem; }
.post__cover--portrait img { aspect-ratio: 1; border-radius: 50%; }

.post-nav { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__link {
    display: flex; flex-direction: column; gap: .2rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
}
.post-nav__link:hover { border-color: var(--sky); color: var(--blue); }
.post-nav__link--next { text-align: right; grid-column: 2; }
.post-nav__label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.post-nav__title { font-weight: 600; }
.post-nav--back { grid-template-columns: 1fr; }
.post-back {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    font-weight: 600;
    color: var(--text);
}
.post-back:hover { border-color: var(--sky); color: var(--blue); }

/* Ghost editor content */
.gh-content {
    font-size: 1.0625rem;
    line-height: 1.75;
}
/* Base spacing for direct block children: reset margin-top, then re-add the 1.25em gap between
   siblings. Both rules share the ".gh-content > *" specificity, so the later one (the gap) wins for
   every non-first child, while a first child (matched only by the reset) stays at margin-top: 0.
   The per-element rules below only ever set margin-bottom (never margin-top), so they can't out-rank
   this pair on specificity and re-introduce the old bug. */
.gh-content > * { margin-top: 0; }
.gh-content > * + * { margin-top: 1.25em; }
.gh-content h2, .gh-content h3, .gh-content h4 { margin-top: 1.8em; margin-bottom: .5em; }
.gh-content h2 { font-size: 1.5rem; }
.gh-content h3 { font-size: 1.25rem; }
.gh-content p { margin-bottom: 0; }
.gh-content ul, .gh-content ol { padding-left: 1.5em; margin-bottom: 0; }
.gh-content li + li { margin-top: .35em; }
.gh-content blockquote {
    margin-inline: 0;
    margin-bottom: 0;
    padding: .5rem 0 .5rem 1.25rem;
    border-left: 4px solid var(--sky);
    color: var(--text-muted);
    font-size: 1.1em;
}
.gh-content hr { border: 0; border-top: 1px solid var(--border); margin-block: 2em; }
.gh-content img { border-radius: var(--radius-sm); margin-inline: auto; }
.gh-content figure { margin-inline: 0; margin-bottom: 0; }
.gh-content figcaption { margin-top: .6rem; font-size: .85rem; color: var(--text-muted); text-align: center; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.gh-content th, .gh-content td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.gh-content th { background: var(--surface-alt); font-weight: 700; }
.gh-content pre { padding: 1rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--white); overflow-x: auto; font-size: .9rem; }
.gh-content code { font-size: .9em; background: var(--surface-alt); padding: .1em .35em; border-radius: 4px; }
.gh-content pre code { background: none; padding: 0; }
.gh-content iframe { border-radius: var(--radius-sm); }

.gh-content .kg-width-wide { width: min(1000px, 100vw - 2rem); margin-left: calc(50% - min(500px, 50vw - 1rem)); }
.gh-content .kg-width-full { width: calc(100vw - 2rem); margin-left: calc(50% - 50vw + 1rem); }
.gh-content .kg-width-full img { border-radius: 0; }
.gh-content .kg-embed-card > iframe[src*="youtube"], .gh-content .kg-embed-card > iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.gh-content .kg-button-card .kg-btn { border-radius: var(--radius-sm); font-weight: 600; }
.gh-content .kg-callout-card { border-radius: var(--radius-sm); }
.gh-content .kg-file-card a, .gh-content .kg-bookmark-container { border-radius: var(--radius-sm); }

/* 13. Archives & pagination --------------------------------------------- */
.page-head { margin-bottom: 1.75rem; }
.page-head__kicker {
    margin: 0 0 .25rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--blue);
}
.page-head__title { margin-bottom: .4rem; }
.page-head__desc { max-width: 50rem; color: var(--text-muted); font-size: 1.05rem; }
.page-head--author { display: flex; gap: 1rem; align-items: center; }
.page-head__avatar { border-radius: 50%; }

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.pagination__status { font-size: .9rem; color: var(--text-muted); margin-inline: auto; }
.pagination__link { font-weight: 600; text-decoration: none; }
.pagination__link:hover { text-decoration: underline; }

/* 14. Section pages (leaders, departments, projects, documents, gallery) */
.leader-card {
    text-align: center;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.25rem;
    transition: box-shadow .2s, transform .2s;
}
.leader-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.leader-card__link { color: inherit; text-decoration: none; display: block; }
.leader-card__photo {
    width: 9rem;
    height: 9rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--sky-soft);
}
.leader-card__name { margin: 0 0 .25rem; font-size: 1.1rem; }
.leader-card__role { margin: 0 0 .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.leader-card__bio { margin: 0; font-size: .9rem; color: var(--text-muted); }
.leader-card.featured { grid-column: 1 / -1; }
.leader-card.featured .leader-card__photo { width: 11rem; height: 11rem; }

/* Section page head */
.page-head--section { max-width: 52rem; margin-bottom: 2rem; }
.page-head__intro { font-size: 1.05rem; color: var(--text-muted); }
.page-head__intro p:last-child { margin-bottom: 0; }

/* Featured leader */
.leader-feature {
    display: grid; gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--blue);
}
@media (min-width: 900px) { .leader-feature { grid-template-columns: 20rem minmax(0, 1fr); align-items: center; padding: 2rem; } }
.leader-feature__photo { width: min(20rem, 60vw); aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.leader-feature__role { margin: 0 0 .25rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.leader-feature__name { margin-bottom: .75rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.leader-feature__text { color: var(--text-muted); margin-bottom: 1.25rem; }
.leader-feature__text p:last-child { margin-bottom: 0; }

/* Department cards */
.dept-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--sky);
    transition: transform .2s, box-shadow .2s;
}
.dept-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.dept-card__link { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.4rem 1.3rem; color: var(--text); text-decoration: none; }
.dept-card__icon { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--sky-soft); color: var(--blue); margin-bottom: .25rem; }
.dept-card__icon .icon { width: 1.6rem; height: 1.6rem; }
/* A department with a feature image shows the photo in place of the icon. */
.dept-card__icon--photo { overflow: hidden; background: var(--sand); }
.dept-card__icon--photo img { width: 100%; height: 100%; object-fit: cover; }
.dept-card__title { margin: 0; font-size: 1.1rem; }
.dept-card__desc { margin: 0; font-size: .93rem; color: var(--text-muted); flex: 1; }
.dept-card__more { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--blue); margin-top: .5rem; }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.tab {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 2.5rem; padding: .4rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-weight: 600; font-size: .95rem;
}
.tab:hover { border-color: var(--sky); color: var(--blue); }
.tab.is-active { background: var(--blue); border-color: var(--blue); color: var(--white); }
.tab__count { display: inline-flex; min-width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; padding: 0 .4rem; border-radius: 999px; background: var(--sky-soft); color: var(--blue); font-size: .75rem; font-weight: 800; }
.tab.is-active .tab__count { background: rgba(255, 255, 255, .2); color: var(--white); }

/* Documents table */
.doc-table-wrap { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th { padding: .9rem 1.1rem; text-align: left; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-alt); }
.doc-table td { padding: 1rem 1.1rem; border-top: 1px solid var(--border); vertical-align: middle; }
.doc-table__title { display: block; font-weight: 700; color: var(--text); text-decoration: none; }
.doc-table__title:hover { color: var(--blue); text-decoration: underline; }
.doc-table__desc { display: block; margin-top: .2rem; font-size: .875rem; color: var(--text-muted); }
.doc-table__dl { white-space: nowrap; }
.doc-table__content .kg-file-card { margin: 0; }
.doc-table__content p { display: none; }
.btn--sm { min-height: 2.25rem; padding: .35rem .9rem; font-size: .875rem; }
@media (max-width: 767.98px) {
    .doc-table thead { display: none; }
    .doc-table tr { display: grid; gap: .35rem; padding: 1rem 1.1rem; border-top: 1px solid var(--border); }
    .doc-table td { display: block; padding: 0; border: 0; }
    .doc-table td[data-th]:not(:first-child)::before { content: attr(data-th) ": "; font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
    .doc-table__dl { margin-top: .4rem; }
}

/* Albums */
.albums { display: grid; gap: 2.5rem; }
.album__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.album__title { margin: 0; font-size: 1.3rem; }
.album__title a { color: var(--text); text-decoration: none; }
.album__title a:hover { color: var(--blue); }
.album__desc { margin: .25rem 0 0; color: var(--text-muted); font-size: .95rem; }
.album__date { font-size: .875rem; color: var(--text-muted); }
.album__meta { margin: 0; font-size: .875rem; color: var(--text-muted); white-space: nowrap; }
.album__count::before { content: "\00b7"; margin: 0 .4rem; }
.album__count:empty { display: none; }
.album__content > p { display: none; }
.album__content .kg-gallery-card, .album__content .kg-width-wide { width: 100%; margin-left: 0; }
.albums { gap: 3rem; }
.album { padding-top: 2rem; border-top: 1px solid var(--border); }
.album:first-child { padding-top: 0; border-top: 0; }
.album__head { border-bottom: 0; padding-bottom: 0; }

/* Lightbox */
.lightbox__trigger { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.lightbox__trigger:focus-visible { outline: 3px solid var(--sky); outline-offset: -3px; }
.is-zoomable { cursor: zoom-in; }
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 3.5rem 1rem;
    background: rgba(6, 31, 76, .94);
}
body.lightbox-open { overflow: hidden; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox__caption { color: var(--white); font-size: .9rem; text-align: center; opacity: .9; }
.lightbox__counter { position: absolute; top: 1.4rem; left: 1.25rem; color: var(--white); font-size: .85rem; font-weight: 600; opacity: .85; letter-spacing: .04em; }
.lightbox__img { touch-action: pan-y; user-select: none; }
.lightbox__btn {
    position: absolute;
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    font-size: 2rem; line-height: 1;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .25); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: .75rem; top: 50%; transform: translateY(-50%); }

/* Contact page layout */
.contact-layout { display: grid; gap: 2rem; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.contact-layout__info .map { margin-top: 1.5rem; }
.contact-form { padding: 1.5rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); border-top: 4px solid var(--blue); }
.contact-form__title { font-size: 1.25rem; margin-bottom: .25rem; }

/* 15. Forms -------------------------------------------------------------- */
.form { display: grid; gap: 1rem; }
.form__field { display: grid; gap: .35rem; }
.form__label { font-weight: 600; font-size: .95rem; }
.form__hint { font-size: .85rem; color: var(--text-muted); }
.form__input, .form__select, .form__textarea {
    width: 100%;
    min-height: 2.9rem;
    padding: .6rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}
.form__textarea { min-height: 9rem; resize: vertical; }
.form__input:focus, .form__select:focus, .form__textarea:focus { border-color: var(--sky); outline-color: var(--sky); }
.form__input[aria-invalid="true"], .form__textarea[aria-invalid="true"] { border-color: var(--red); }
.form__error { font-size: .85rem; color: var(--red); }
.form__status { padding: .9rem 1rem; border-radius: var(--radius-sm); font-weight: 600; }
.form__status--ok { background: var(--green-soft); color: var(--green); }
.form__status--error { background: #FDECEA; color: var(--red); }

/* 16. Error -------------------------------------------------------------- */
.error__inner { text-align: center; padding-block: 3rem; }
.error__code { margin: 0; font-size: clamp(4rem, 15vw, 8rem); font-weight: 800; line-height: 1; color: var(--sky); }
.error__title { margin-bottom: .5rem; }
.error__desc { color: var(--text-muted); max-width: 32rem; margin-inline: auto; }
.error__stack { text-align: left; margin-top: 2rem; font-size: .9rem; }

/* 17. Utilities ---------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
[hidden] { display: none !important; }

/* 18. Dark mode ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0F1319;
        --surface: #171C24;
        --surface-alt: #131821;
        --text: #E8EAED;
        --text-muted: #9AA3AE;
        --border: #2A3140;
        --link: #7FC0EC;
        --link-hover: #A9D6F4;
        --sky-soft: #1B2A40;
        --green-soft: #12301F;
        --amber-soft: #2E2210;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .5);
    }
    .tag-pill { color: #A9D6F4; }
    .tile .icon, .contact-list .icon, .share__btn, .page-head__kicker, .dc-card__role, .leader-card__role { color: #7FC0EC; }
    .btn--primary { background: var(--sky); color: var(--blue-deeper); }
    .btn--primary:hover { background: #7FC0EC; color: var(--blue-deeper); }
    .btn--outline { border-color: #7FC0EC; color: #7FC0EC; }
    .site-nav { background: #10151D; }
    .nav__link:hover, .nav__item.is-current .nav__link { color: #A9D6F4; }
    .card__title a:hover { color: #A9D6F4; }
    .gh-content pre { background: #0A0D12; }
    .form__status--error { background: #3A1512; color: #F5A39B; }
    .map { background: var(--surface); }
    .notice__date { background: #33230B; color: #F0B36A; }
    .tag-pill--done { color: #8FE3B4; }
    .tag-pill--ongoing { color: #F0B36A; }
    .facts { background: var(--surface-alt); }
    .panel--cta { background: var(--blue-dark); }
    .tab.is-active { background: var(--sky); border-color: var(--sky); color: var(--blue-deeper); }
    .tab.is-active .tab__count { background: rgba(6, 31, 76, .25); color: var(--blue-deeper); }
    .dept-card__more, .dept-card__icon { color: #7FC0EC; }
    .album-chip .icon { color: #7FC0EC; }
}

/* 19. Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 20. Polish (phase 3) --------------------------------------------------- */
/* Refinements layered on top of the components above; kept in one block so the
   base rules stay readable. Dark-mode variants live at the end of this section. */

/* Focus: the whole card lights up when its main link is keyboard-focused, so the hit target
   is obvious. These cards stretch their title link over the whole card with an ::after overlay,
   which makes the anchor's own ring wrap the card untidily — draw it on the card instead.
   Secondary links inside a card (tag pills) keep their own ring. */
.card:focus-within,
.tile:focus-visible,
.leader-card:focus-within,
.dept-card:focus-within,
.album-chip:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}
.card .card__title a:focus-visible,
.leader-card__link:focus-visible,
.dept-card__link:focus-visible { outline: none; }

/* The base :focus-visible rule squares corners off to 4px; keep each component's own radius. */
.tile:focus-visible { border-radius: var(--radius); }
.album-chip:focus-visible { border-radius: var(--radius-sm); }

/* Same lift on hover and on focus, so keyboard and pointer see the same feedback. */
.card:focus-within, .leader-card:focus-within, .dept-card:focus-within { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.tile:focus-visible, .album-chip:focus-visible { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.tile:focus-visible .icon { background: var(--blue); color: var(--white); }
.card__media img { transition: transform .35s ease; }
.card:hover .card__media img, .card:focus-within .card__media img { transform: scale(1.02); }

/* Pills: one height everywhere, whatever the label length or container. */
.tag-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding-block: .2rem;
    line-height: 1.25;
}

/* Section headings: a touch tighter, matching the h1/h2 letter-spacing of the base styles. */
.section__title { letter-spacing: -.015em; }

/* Numbers in the facts strip line up in a column. */
.fact__value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Cover image: a hairline keeps pale photos from bleeding into the page background.
   The round leader portrait gets the same ring as .leader-card__photo instead. */
.post__cover img { border: 1px solid var(--border); }
.post__cover--portrait img { border: 4px solid var(--sky-soft); }

/* Hero: on small screens the first news card should be reachable with one swipe. */
@media (max-width: 639.98px) {
    .hero__inner { min-height: min(24rem, 58vh); }
}

/* Breadcrumb (post.hbs) */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .4rem;
    margin-bottom: .75rem;
    font-size: .8125rem;
    color: var(--text-muted);
}
.breadcrumb__link { color: var(--text-muted); text-decoration: none; }
.breadcrumb__link:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb__sep { color: var(--border); }
.breadcrumb__current { color: var(--text-muted); }

/* News lead paragraph: the section content types keep the plain body size. */
.post:not(.page):not(.post--leader):not(.post--dept):not(.post--document):not(.post--album) .post__content > p:first-child {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* "Last updated" line on static pages */
.post__updated { margin: .6rem 0 0; font-size: .85rem; color: var(--text-muted); }

/* Category chips reuse .tabs/.tab; only the archive spacing is new. */
.tabs--categories { margin-bottom: 1.5rem; }
.tabs--categories .tab { text-decoration: none; }

/* Documents filter bar */
.doc-filter { display: grid; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .doc-filter { grid-template-columns: minmax(0, 1fr) 14rem; } }
.doc-filter__field { display: grid; }
.doc-filter__empty td { text-align: center; }

/* Album header: cover thumbnail, then title/description, then date and count. */
.album__head { align-items: center; }
.album__cover {
    width: 4rem;
    height: 4rem;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--border);
}
.album__headtext { flex: 1 1 14rem; min-width: 0; }

/* Footer bottom bar: a little more air under the columns above it. */
.footer__bottom-inner { padding-block: 1.15rem; row-gap: .65rem; }

/* Dark mode variants for this section.
   Everything else above rides on the tokens that section 18 redefines (--border, --sky-soft,
   --text-muted, --focus), so only the literal link colour needs an override here. */
@media (prefers-color-scheme: dark) {
    .breadcrumb__link:hover { color: #A9D6F4; }
}