/*
Theme Name: CEIU Theme
Theme URI: https://example.com
Author: NIGHTFIRE STUDIOS
Description: A minimal block theme editable by non-developers.
Version: 2.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: CEIU-Theme
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Newsreader:opsz,wght@6..72,300..700&display=swap');

/* The design's baseline, which the theme was missing. WP's block CSS
   already border-boxes the block wrappers, but form controls were left on
   content-box, so a `width: 100%` input added its padding and border on
   top and overflowed its container. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --theme-blue: #164E68;
    --theme-blue-dark: #0E3446;
    --theme-wash: #EAF1F5;
    --theme-ink: #111827;
    --theme-slate: #4b5563;
    --theme-muted: #6b7280;
    --theme-line: #e5e7eb;
    --theme-line-strong: #d1d5db;
    --theme-ui: "Inter", system-ui, -apple-system, sans-serif;
    --theme-body: "Newsreader", Georgia, "Times New Roman", serif;
}

/* ---------------------------------------------------------------
   Top utility bar — desktop only, matching the design's 1024px cut
   --------------------------------------------------------------- */

.ceiu-topbar {
    font-family: var(--theme-ui);
    font-optical-sizing: auto;
}

.ceiu-topbar__inner {
    width: 90%;
    margin: 0 auto;
    min-height: 34px;
    gap: 4px 24px;
}

.ceiu-topbar__inner > * {
    margin-block: 0;
}

.ceiu-topbar__id {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    letter-spacing: 0.01em;
}

.ceiu-topbar__links {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 20px;
}

.ceiu-topbar__links li {
    list-style-type: none;
    margin: 0;
}

.ceiu-topbar__links a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
}

.ceiu-topbar__links a:hover {
    color: #ffffff;
}

.ceiu-topbar__links .is-underlined a {
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.ceiu-topbar__links .is-underlined a:hover {
    border-bottom-color: #ffffff;
}

/* Editor-only "add list item" button — no room for it in a flex nav row. */
.ceiu-topbar__links .block-list-appender {
    display: none;
}

@media (max-width: 1024px) {
    .ceiu-topbar {
        display: none;
    }
}

/* ---------------------------------------------------------------
   Masthead
   --------------------------------------------------------------- */

.ceiu-masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid var(--theme-line);
    font-family: var(--theme-ui);
}

.ceiu-masthead__inner {
    width: 90%;
    margin: 0 auto;
    padding: 12px 0;
    gap: 12px 28px;
}

.ceiu-masthead__inner > * {
    margin-block: 0;
}

/* Brand ------------------------------------------------------- */

.ceiu-brand {
    gap: 12px;
    margin-right: auto;
    flex: 0 0 auto;
}

.ceiu-brand > * {
    margin-block: 0;
}

.ceiu-brand .wp-block-site-logo img {
    width: 104px;
    height: auto;
    display: block;
}

.ceiu-brand__local {
    font-family: var(--theme-ui);
    font-weight: 700;
    font-size: 14px;
    color: var(--theme-ink);
    line-height: 1.25;
    border-left: 1px solid var(--theme-line-strong);
    padding-left: 12px;
}

/* Navigation -------------------------------------------------- */

.ceiu-nav {
    flex: 1 1 0;
    min-width: 0;
    gap: 10px 22px;
}

.ceiu-nav .wp-block-navigation-item__content {
    font-family: var(--theme-ui);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--theme-slate);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s;
}

.ceiu-nav .wp-block-navigation-item__content:hover {
    color: var(--theme-blue-dark);
}

.ceiu-nav .current-menu-item .wp-block-navigation-item__content,
.ceiu-nav .current_page_item .wp-block-navigation-item__content {
    color: var(--theme-blue-dark);
    font-weight: 700;
    border-bottom-color: var(--theme-blue);
}

/* Collapse to the hamburger at the design's 1024px, not core's 600px. */
@media (max-width: 1024px) {
    .ceiu-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none;
    }

    .ceiu-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

    .ceiu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        display: flex;
    }

    .ceiu-nav {
        flex: 0 0 auto;
        margin-left: auto;
    }
}

.ceiu-nav .wp-block-navigation__responsive-container-open {
    display: none;
}

@media (max-width: 1024px) {
    .ceiu-nav .wp-block-navigation__responsive-container-open {
        display: flex;
    }
}

.ceiu-nav .wp-block-navigation__responsive-container-open,
.ceiu-nav .wp-block-navigation__responsive-container-close {
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--theme-line-strong);
    border-radius: 10px;
    background: #ffffff;
    color: var(--theme-blue-dark);
}

.ceiu-nav .wp-block-navigation__responsive-container-open:hover,
.ceiu-nav .wp-block-navigation__responsive-container-close:hover {
    background: #f3f4f6;
}

.ceiu-nav .wp-block-navigation__responsive-container.is-menu-open {
    background: #ffffff;
    padding: 20px;
}

.ceiu-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 16px;
    color: #374151;
    padding: 14px 20px;
    border-bottom: 0;
    border-left: 3px solid transparent;
    min-height: 48px;
    display: flex;
    align-items: center;
    width: 100%;
}

.ceiu-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
    color: var(--theme-blue-dark);
    font-weight: 700;
    border-left-color: var(--theme-blue);
    background: var(--theme-wash);
}

/* Actions ----------------------------------------------------- */

.ceiu-actions {
    gap: 8px;
    flex: 0 0 auto;
}

.ceiu-actions > * {
    margin-block: 0;
}

.ceiu-search .wp-block-search__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--theme-slate);
    cursor: pointer;
}

.ceiu-search .wp-block-search__button:hover {
    background: #f3f4f6;
}

.ceiu-search .wp-block-search__button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.ceiu-join .wp-block-button__link {
    padding: 10px 18px;
    background: var(--theme-blue);
    color: #ffffff;
    border-radius: 8px;
    font-family: var(--theme-ui);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ceiu-join .wp-block-button__link:hover {
    background: var(--theme-blue-dark);
}

/* Language pill ----------------------------------------------- */

.ceiu-lang {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--theme-line-strong);
    border-radius: 999px;
    flex: 0 0 auto;
}

.ceiu-lang > * {
    margin-block: 0;
}

/* Sliding thumb — positioned/sized in px by lang-toggle.js so it lands
   exactly under whichever button is active, iOS-segmented-control style. */
.ceiu-lang__thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    border-radius: 999px;
    background: var(--theme-blue);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    pointer-events: none;
    z-index: 0;
}

.ceiu-lang__opt {
    position: relative;
    z-index: 1;
    display: block;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: none;
    font-family: var(--theme-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--theme-muted);
    text-decoration: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.ceiu-lang__opt.is-active {
    color: #ffffff;
}

.ceiu-lang__opt:not(.is-active):hover {
    color: var(--theme-blue-dark);
}

/* Bilingual text pairs: JS flips [data-lang] on <html>; until JS runs,
   default to English so content is never hidden if scripts are blocked. */
[lang="fr"] {
    display: none;
}

html[data-lang="fr"] [lang="en"] {
    display: none;
}

html[data-lang="fr"] [lang="fr"] {
    display: inline;
}

/* Crossfade on toggle: lang-toggle.js fades these to opacity 0, swaps the
   text while invisible, then fades back in — the transition below is what
   makes both halves of that swap actually animate instead of jumping. */
.ceiu-topbar__id,
.ceiu-topbar__links a,
.ceiu-join .wp-block-button__link,
.ceiu-nav .wp-block-navigation-item__label,
.ceiu-footer__tagline,
.ceiu-footer__heading,
.ceiu-footer__links a,
.ceiu-footer__note,
.ceiu-footer__orgname,
.ceiu-footer__metalinks a,
.ceiu-footer__legal {
    transition: opacity 0.16s ease;
}

@media (prefers-reduced-motion: reduce) {
    .ceiu-lang__opt,
    .ceiu-lang__thumb,
    .ceiu-topbar__id,
    .ceiu-topbar__links a,
    .ceiu-join .wp-block-button__link,
    .ceiu-nav .wp-block-navigation-item__label,
    .ceiu-footer__tagline,
    .ceiu-footer__heading,
    .ceiu-footer__links a,
    .ceiu-footer__note,
    .ceiu-footer__orgname,
    .ceiu-footer__metalinks a,
    .ceiu-footer__legal {
        transition: none;
    }
}

/* Custom hamburger (the header part's own button). Core Navigation's
   hamburger and overlay are suppressed below 1024px in favour of the
   panel, so this is the only menu trigger on mobile. */
.ceiu-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid var(--theme-line-strong);
    border-radius: 14px;
    background: #ffffff;
    color: var(--theme-blue-dark);
    cursor: pointer;
}

.ceiu-burger:hover {
    background: #f3f4f6;
}

.ceiu-burger .ceiu-icon {
    width: 26px;
    height: 26px;
    stroke-width: 2.2;
}

/* Mobile: brand, then language pill, then the hamburger. */
@media (max-width: 1024px) {
    /* Two classes, because WP's own .wp-block-buttons.is-layout-flex
       outranks a single-class rule and kept the Join button visible in the
       mobile bar. */
    .ceiu-search,
    .ceiu-actions .ceiu-join {
        display: none;
    }

    .ceiu-burger {
        display: inline-flex;
    }

    /* Core Navigation is desktop-only from here down. Three classes,
       because WP's .wp-block-navigation.is-layout-flex would otherwise tie
       and leave core's hamburger rendering alongside ours. */
    .ceiu-masthead__inner .ceiu-nav.wp-block-navigation {
        display: none;
    }

    .ceiu-brand {
        order: 1;
    }

    .ceiu-actions {
        order: 2;
        margin-left: auto;
        gap: 12px;
    }

    .ceiu-masthead__inner {
        gap: 12px;
        padding: 16px 0;
        justify-content: space-between;
    }

    /* Bigger touch targets to match the design's mobile bar. */
    .ceiu-lang {
        padding: 4px;
        gap: 4px;
    }

    .ceiu-lang__opt {
        min-width: 62px;
        padding: 10px 14px;
        font-size: 15px;
    }

    .ceiu-brand .wp-block-site-logo img {
        width: 118px;
    }

    .ceiu-brand__local {
        font-size: 15px;
    }
}

/* Phones: the 1024px tier above is sized for tablets and wraps the bar to
   two lines once the viewport drops under ~420px (brand + actions no
   longer fit side by side). Scale everything down to keep it on one row
   all the way to a 320px viewport. */
@media (max-width: 480px) {
    .ceiu-masthead__inner {
        gap: 8px;
    }

    .ceiu-brand {
        gap: 8px;
    }

    .ceiu-brand .wp-block-site-logo img {
        width: 80px;
    }

    .ceiu-brand__local {
        font-size: 11.5px;
        padding-left: 8px;
        line-height: 1.2;
    }

    .ceiu-actions {
        gap: 8px;
    }

    .ceiu-lang__opt {
        min-width: 40px;
        padding: 8px 10px;
        font-size: 12.5px;
    }

    .ceiu-burger {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .ceiu-burger .ceiu-icon {
        width: 20px;
        height: 20px;
    }
}

/* ---------------------------------------------------------------
   Mobile menu panel
   --------------------------------------------------------------- */

.ceiu-mobilemenu {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.ceiu-mobilemenu[hidden] {
    display: none;
}

.ceiu-mobilemenu__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 29, 38, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ceiu-mobilemenu.is-open .ceiu-mobilemenu__backdrop {
    opacity: 1;
}

/* The design leaves a sliver of the page showing on the right rather than
   covering it entirely. */
.ceiu-mobilemenu__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(85%, 520px);
    height: 100%;
    overflow-y: auto;
    background: #ffffff;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.ceiu-mobilemenu.is-open .ceiu-mobilemenu__panel {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .ceiu-mobilemenu__backdrop,
    .ceiu-mobilemenu__panel {
        transition: none;
    }
}

.ceiu-mobilemenu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--theme-line);
}

.ceiu-mobilemenu__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.ceiu-mobilemenu__brand img {
    width: 104px;
    height: auto;
    display: block;
}

.ceiu-mobilemenu__local {
    font-family: var(--theme-ui);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
    color: var(--theme-ink);
    border-left: 1px solid var(--theme-line-strong);
    padding-left: 12px;
}

.ceiu-mobilemenu__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceiu-mobilemenu__link {
    display: block;
    padding: 24px;
    border-bottom: 1px solid var(--theme-line);
    border-left: 4px solid transparent;
    font-family: var(--theme-ui);
    font-size: 20px;
    font-weight: 500;
    color: var(--theme-slate);
    text-decoration: none;
}

.ceiu-mobilemenu__link:hover {
    background: #f9fafb;
    color: var(--theme-blue-dark);
}

.ceiu-mobilemenu__link.is-current {
    background: var(--theme-wash);
    border-left-color: var(--theme-blue-dark);
    color: var(--theme-ink);
    font-weight: 700;
}

.ceiu-mobilemenu__join {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 24px 24px 28px;
    padding: 18px 24px;
    background: var(--theme-blue-dark);
    color: #ffffff;
    border-radius: 12px;
    font-family: var(--theme-ui);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.ceiu-mobilemenu__join:hover {
    background: var(--theme-blue);
    color: #ffffff;
}

.ceiu-mobilemenu__join .ceiu-icon {
    width: 18px;
    height: 18px;
}

/* Follows the Join button directly, as in the design, rather than being
   pinned to the bottom of the panel. */
.ceiu-mobilemenu__office {
    padding: 24px;
    border-top: 1px solid var(--theme-line);
}

.ceiu-mobilemenu__office > * {
    margin: 0;
}

.ceiu-mobilemenu__officehead {
    font-family: var(--theme-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme-muted);
    margin-bottom: 16px;
}

.ceiu-mobilemenu__officerow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--theme-ui);
    font-size: 15px;
    line-height: 1.5;
    color: var(--theme-slate);
    margin-bottom: 14px;
}

.ceiu-mobilemenu__officerow .ceiu-icon {
    width: 18px;
    height: 18px;
    color: var(--theme-blue);
    flex-shrink: 0;
    margin-top: 3px;
}

.ceiu-mobilemenu__officerow a {
    color: var(--theme-blue);
    font-weight: 600;
    text-decoration: none;
}

.ceiu-mobilemenu__officenote {
    font-family: var(--theme-ui);
    font-size: 13.5px;
    color: #9ca3af;
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.ceiu-footer {
    --theme-footer-muted: #9ca3af;
    font-family: var(--theme-ui);
    color: var(--theme-footer-muted);
    /* The prototype inherits line-height 1.6 from its body; WordPress does
       not, and the footer's vertical rhythm is built on that figure. */
    line-height: 1.6;
}

.ceiu-footer a {
    color: var(--theme-footer-muted);
    text-decoration: none;
}

.ceiu-footer a:hover {
    color: #ffffff;
}

.ceiu-footer__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 24px 24px;
}

.ceiu-footer__top {
    gap: 40px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ceiu-footer__brand > * {
    margin-block: 0;
}

.ceiu-footer__tagline {
    font-family: "Newsreader", Georgia, serif;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #ffffff;
    line-height: 1.4;
    max-width: 22ch;
    text-wrap: pretty;
    margin-bottom: 18px;
}

.ceiu-footer__social {
    gap: 12px;
}

.ceiu-footer__social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-footer-muted);
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ceiu-footer__social-link:hover {
    background: #ffffff;
    color: #111827;
    border-color: #ffffff;
}

.ceiu-footer__heading {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Flex, not the block's flow layout — `gap` only applies to flex/grid, and
   the design's 8px link gap depends on it. */
.ceiu-footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ceiu-footer__links p {
    margin: 0;
    font-size: 13.5px;
}

.ceiu-footer__email {
    color: #ffffff !important;
    font-weight: 600;
}

.ceiu-footer__email:hover {
    color: var(--theme-footer-muted) !important;
}

.ceiu-footer__meta {
    gap: 12px 24px;
    padding: 20px 0;
}

.ceiu-footer__orgname {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.ceiu-footer__metalinks {
    gap: 10px 24px;
}

.ceiu-footer__metalinks p {
    margin: 0;
    font-size: 12.5px;
}

.ceiu-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 18px;
    font-size: 12px;
    margin: 0;
}

/* Standard WP visually-hidden helper. Core blocks (read-more, pagination,
   comment forms) emit .screen-reader-text spans and assume the theme hides
   them — without this the read-more link renders "Read update: <title>". */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ---------------------------------------------------------------
   Homepage — shared primitives
   --------------------------------------------------------------- */

/* Same block-gap issue one level up: WP's .wp-site-blocks > * rule puts a
   24px margin-top on <main> and <footer> (the header/main/footer template
   parts are its top-level children), showing as a gap above the hero and
   above the footer. */
.wp-site-blocks > * {
    margin-block: 0;
}

/* WP's default block-gap gives every top-level section a 24px margin-top
   (is-layout-flow on .ceiu-main) — invisible between plain text blocks, but
   these sections are full-bleed color bands, so it showed as a seam of body
   background between them. Each section owns its own padding already. */
.ceiu-main > * {
    margin-block: 0;
}

/* The homepage sections live in the Home page's content, so they render one
   level deeper — inside post-content's wrapper — and need the same block-gap
   reset plus full width for their alignfull children. */
.ceiu-home__content {
    max-width: none;
}

.ceiu-home__content > * {
    margin-block: 0;
}

/* Same treatment for any other page whose design lives in post content and
   is built from full-bleed bands (Resources, and pages added later). */
.ceiu-flow {
    max-width: none;
}

.ceiu-flow > * {
    margin-block: 0;
}

.ceiu-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.ceiu-section {
    padding: clamp(48px, 6vw, 84px) 0;
}

.ceiu-section--tight {
    padding: clamp(2px, 5vw, 45px) 0;
}

.ceiu-section--surface {
    background: #f9fafb;
    border-top: 1px solid var(--theme-line);
}

.ceiu-section--bordered {
    border-bottom: 1px solid var(--theme-line);
}

.ceiu-icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.ceiu-eyebrow {
    font-family: var(--theme-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme-blue);
    margin: 0;
}

.ceiu-eyebrow--light {
    color: #8FD0EC;
    margin-bottom: 18px;
}

.ceiu-h2 {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.6;
    margin: 8px 0 0;
}

.ceiu-h2--lg {
    font-size: clamp(26px, 3vw, 36px);
    margin: 8px 0 10px;
    text-wrap: pretty;
    line-height: 1.25;
    margin-top: 20px !important;
}

.ceiu-h3 {
    font-size: clamp(21px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 6px;
    text-wrap: pretty;
}

.ceiu-lede {
    font-size: 16px;
    color: var(--theme-muted);
    line-height: 1.7;
    text-wrap: pretty;
    margin: 0;
}

/* Section headers ---------------------------------------------- */

.ceiu-sectionhead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #c7cdd4;
    margin-bottom: 36px;
}

/* Strips WP's 24px blockGap off section-head children... */
.ceiu-sectionhead > *,
.ceiu-sectionhead__text > * {
    margin-block: 0;
}

/* ...but the design's own heading rhythm (12px above, 14px below) has to be
   restored afterwards at higher specificity, or the reset above flattens the
   eyebrow → heading → lede spacing to nothing. */
.ceiu-sectionhead .ceiu-h2 {
    margin-block: 8px 0;
}

.ceiu-sectionhead .ceiu-h2--lg {
    margin-block: 8px 10px;
}

.ceiu-sectionhead__text {
    min-width: 0;
    max-width: 620px;
}

.ceiu-sectionhead__link {
    margin: 0;
}

.ceiu-sectionhead__link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--theme-ui);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--theme-blue);
    white-space: nowrap;
}

.ceiu-sectionhead__link .ceiu-icon {
    width: 15px;
    height: 15px;
}

.ceiu-sectionhead--center {
    display: block;
    max-width: 620px;
    margin-inline: auto;
    margin-bottom: 44px;
    text-align: center;
}

.ceiu-sectionhead--narrow {
    display: block;
    max-width: 620px;
    margin-bottom: 44px;
}

/* Buttons ------------------------------------------------------- */

.ceiu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 6px;
    font-family: var(--theme-ui);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ceiu-btn .ceiu-icon {
    width: 16px;
    height: 16px;
}

.ceiu-btn--light {
    background: #ffffff;
    color: var(--theme-blue-dark);
}

.ceiu-btn--light:hover {
    background: var(--theme-wash);
    color: var(--theme-blue-dark);
}

.ceiu-btn--bold {
    font-weight: 700;
}

.ceiu-btn--ghost {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.ceiu-btn--ghost:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.ceiu-btn--primary {
    background: var(--theme-blue);
    color: #ffffff;
}

.ceiu-btn--primary:hover {
    background: var(--theme-blue-dark);
    color: #ffffff;
}

.ceiu-btn--sm {
    padding: 13px 24px;
    font-size: 14px;
}

/* Icon tiles ---------------------------------------------------- */

.ceiu-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--theme-wash);
    color: var(--theme-blue);
    flex-shrink: 0;
}

.ceiu-icon--tile {
    width: 21px;
    height: 21px;
}

.ceiu-tile--lg {
    width: 56px;
    height: 56px;
    border-radius: 12px;
}

.ceiu-icon--tile-lg {
    width: 26px;
    height: 26px;
}

.ceiu-tile--sm {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}

.ceiu-icon--tile-sm {
    width: 20px;
    height: 20px;
}

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

.ceiu-hero {
    position: relative;
    border-bottom: 1px solid var(--theme-blue-dark);
    background-image:
        linear-gradient(90deg, rgba(11, 29, 38, 0.82) 0%, rgba(11, 29, 38, 0.55) 40%, rgba(11, 29, 38, 0.15) 70%, rgba(11, 29, 38, 0.05) 100%),
        url("assets/images/hero-desktop.jpg");
    background-size: cover, cover;
    background-position: center, center 42%;
    background-repeat: no-repeat, no-repeat;
}

.ceiu-hero__inner {
    padding-block: clamp(32px, 4vw, 56px);
    max-width: 1240px;
}

.ceiu-hero__inner > * {
    margin-block: 0;
}

.ceiu-hero__title {
    font-size: clamp(32px, 4.2vw, 50px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #ffffff;
    margin: 0 0 20px;
    max-width: 20ch;
    text-wrap: pretty;
    text-shadow: 0 1px 14px rgba(11, 29, 38, 0.85);
}

.ceiu-hero__copy {
    font-size: 17px;
    line-height: 1.7;
    color: #e5e7eb;
    max-width: 52ch;
    margin: 0 0 28px;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgba(11, 29, 38, 0.85);
}

.ceiu-hero__actions {
    gap: 12px;
    margin-bottom: 28px;
}

.ceiu-trust {
    gap: 10px 20px;
    align-items: center;
    font-family: var(--theme-ui);
    font-size: 13.5px;
    color: #e5e7eb;
}

.ceiu-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ceiu-icon--check {
    width: 15px;
    height: 15px;
    color: #7BC24B;
}

@media (max-width: 640px) {
    .ceiu-hero {
        min-height: 75svh;
        display: flex;
        background-image:
            linear-gradient(90deg, rgba(11, 29, 38, 0.82) 0%, rgba(11, 29, 38, 0.55) 40%, rgba(11, 29, 38, 0.15) 70%, rgba(11, 29, 38, 0.05) 100%),
            url("assets/images/hero-mobile.jpg");
        background-position: center, center;
    }

    .ceiu-hero__inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        flex: 1;
    }

    .ceiu-hero__copy {
        display: none;
    }

    /* The design stacks the two calls to action full width rather than
       squeezing them onto one row. */
    .ceiu-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ceiu-hero__actions .ceiu-btn {
        justify-content: center;
        width: 100%;
    }

    /* All three trust items show, wrapping two-up — they used to be
       hidden behind .ceiu-trust__item--extra. */
    .ceiu-trust {
        flex-wrap: wrap;
        gap: 12px 24px;
    }

    .ceiu-trust__item--extra {
        display: inline-flex;
    }
}

/* ---------------------------------------------------------------
   News
   --------------------------------------------------------------- */

.ceiu-news__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceiu-news__grid > li {
    /* post-template carries WP's is-layout-flow, which puts a 24px
       margin-block-start on every li but the first — inside this grid that
       just shortens cards 2..n against the row height. */
    margin-block: 0;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--theme-line);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}

.ceiu-news__grid > li:hover {
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.1);
    border-color: var(--theme-blue);
    transform: translateY(-3px);
}

.ceiu-news__media {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.ceiu-news__media .wp-block-post-featured-image {
    margin: 0;
    overflow: hidden;
}

.ceiu-news__media img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ceiu-news__grid > li:hover .ceiu-news__media img {
    transform: scale(1.05);
}

.ceiu-news__badge {
    position: absolute;
    left: 14px;
    top: 14px;
    font-family: var(--theme-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 2px;
    background: var(--theme-blue);
    color: #ffffff;
    margin: 0;
    line-height: 1;
}

.ceiu-news__badge a {
    color: #ffffff;
    text-decoration: none;
}

.ceiu-news__grid > li.category-strike-action .ceiu-news__badge {
    background: #B45309;
}

.ceiu-news__grid > li.category-resources .ceiu-news__badge {
    background: var(--theme-slate);
}

.ceiu-news__body {
    padding: 22px 22px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ceiu-news__body > * {
    margin-block: 0;
}

.ceiu-news__date {
    font-family: var(--theme-ui);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-muted);
}

.ceiu-news__title {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.32;
}

.ceiu-news__title a {
    color: var(--theme-ink);
    transition: color 0.25s;
}

.ceiu-news__grid > li:hover .ceiu-news__title a {
    color: var(--theme-blue);
}

.ceiu-news__excerpt {
    font-size: 14.5px;
    color: var(--theme-muted);
    line-height: 1.65;
    flex: 1;
}

.ceiu-news__excerpt p {
    margin: 0;
}

.ceiu-news__cta {
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
    font-family: var(--theme-ui);
    font-size: 13.5px;
    font-weight: 600;
}

.ceiu-news__cta a {
    color: var(--theme-blue);
    text-decoration: none;
}

/* The design pairs this CTA with an arrow that slides on card hover. The
   read-more block renders a bare <a> with no room for child markup, so the
   arrow is a pseudo-element (currentColor can't reach a background SVG,
   hence the hardcoded brand blue). */
.ceiu-news__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
}

.ceiu-news__cta::after {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23164E68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s;
}

.ceiu-news__grid > li:hover .ceiu-news__cta::after {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------
   Service cards / steps
   --------------------------------------------------------------- */

/* WP's grid layout emits repeat(auto-fill, ...), which keeps empty trailing
   tracks — with 3 steps and room for 4 tracks the columns render at 274px
   instead of stretching to 376px. The design uses auto-fit, which collapses
   the empty track. Two-class selectors so these beat WP's generated
   .wp-container-* rule regardless of stylesheet order. */
.ceiu-services .ceiu-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.ceiu-steps .ceiu-steps__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.ceiu-cards {
    gap: 24px;
}

.ceiu-card {
    border: 1px solid var(--theme-line);
    border-radius: 10px;
    padding: 28px;
    background: #ffffff;
    transition: box-shadow 0.25s;
}

.ceiu-card:hover {
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.07);
}

.ceiu-card > *,
.ceiu-step > * {
    margin-block: 0;
}

.ceiu-card .ceiu-tile {
    margin-bottom: 18px;
}

.ceiu-card__title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
}

.ceiu-card__copy {
    font-size: 14.5px;
    color: var(--theme-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.ceiu-card__link {
    margin: 0;
}

.ceiu-card__link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--theme-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-blue);
}

.ceiu-card__link .ceiu-icon {
    width: 14px;
    height: 14px;
}

/* Below 640px the 6-card grid becomes a swipeable, scroll-snapped
   carousel — one card at a time with a peek of the next, plus dot nav
   (JS in services-carousel.js keeps the dots and scroll position in
   sync). Above 640px it stays the auto-fit grid from .ceiu-services
   .ceiu-cards above. */
@media (max-width: 640px) {
    .ceiu-services .ceiu-cards {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;
        gap: 16px;
        margin: 0 -24px;
        padding: 0 24px 4px;
        /* Hide the scrollbar; dots are the wayfinding on this breakpoint. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ceiu-services .ceiu-cards::-webkit-scrollbar {
        display: none;
    }

    .ceiu-services .ceiu-card {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

.ceiu-cards__dots {
    display: none;
}

@media (max-width: 640px) {
    .ceiu-cards__dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin-top: 20px;
    }
}

.ceiu-cards__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--theme-line-strong);
    cursor: pointer;
    transition: background-color 0.2s, width 0.2s;
}

.ceiu-cards__dot.is-active {
    width: 22px;
    background: var(--theme-blue);
}

.ceiu-steps__grid {
    gap: 32px;
}

.ceiu-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-blue);
    color: #ffffff;
    font-family: var(--theme-ui);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
}

.ceiu-steps .ceiu-card__copy {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Grievance band
   --------------------------------------------------------------- */

.ceiu-grievance {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0E3446 0%, #164E68 100%);
    margin-top: clamp(16px, 2vw, 28px);
    padding: clamp(44px, 5.5vw, 72px) 0;
}

.ceiu-grievance::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 14px);
    pointer-events: none;
}

.ceiu-grievance .ceiu-container {
    position: relative;
}

.ceiu-grievance__panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: #ffffff;
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    padding: clamp(28px, 3.5vw, 44px);
}

.ceiu-grievance__panel > * {
    margin-block: 0;
}

.ceiu-grievance__lead {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.ceiu-grievance__lead > * {
    margin-block: 0;
}

.ceiu-grievance__text > * {
    margin-block: 0;
}

.ceiu-grievance__copy {
    font-size: 14.5px;
    color: var(--theme-muted);
    line-height: 1.6;
    max-width: 56ch;
    margin: 0;
}

.ceiu-grievance__cta {
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .ceiu-grievance__cta {
        align-self: flex-end;
        margin-left: auto;
    }
}

/* ---------------------------------------------------------------
   Resource rows
   --------------------------------------------------------------- */

.ceiu-reslist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ceiu-res {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    text-decoration: none;
    background: #ffffff;
    transition: border-color 0.2s, background-color 0.2s;
    /* The grid's own item (the <li> from the Query Loop, or the card itself
       when there is no <li>) already stretches to the row's tallest card —
       this is what actually fills that height, so a short card's border
       reaches as far down as a neighbour whose title or excerpt wrapped to
       an extra line. */
    height: 100%;
    box-sizing: border-box;
}

.ceiu-res:hover {
    border-color: var(--theme-blue);
    background: var(--theme-wash);
}

.ceiu-res__text {
    flex: 1;
    min-width: 0;
}

.ceiu-res__title {
    display: block;
    font-family: var(--theme-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--theme-ink);
}

.ceiu-res__sub {
    display: block;
    font-family: var(--theme-body);
    font-size: 12.5px;
    color: var(--theme-muted);
}

.ceiu-icon--res {
    width: 17px;
    height: 17px;
    color: #9ca3af;
}

.ceiu-res--primary {
    border-color: var(--theme-blue);
    background: var(--theme-blue);
}

.ceiu-res--primary:hover {
    background: var(--theme-blue-dark);
    border-color: var(--theme-blue-dark);
}

.ceiu-res--primary .ceiu-res__title {
    color: #ffffff;
}

.ceiu-res--primary .ceiu-res__sub {
    color: rgba(255, 255, 255, 0.75);
}

.ceiu-res--primary .ceiu-icon--res {
    color: #ffffff;
}

/* Document cards are built from real blocks — editable paragraphs plus a
   core/file block — so the PDF can be swapped from the media library. The
   file link is stretched over the card so the whole tile stays clickable,
   matching the plain-anchor cards above; the arrow is drawn on the card
   itself, because a mask on the link would clip the stretched overlay. */
.ceiu-resgrid .ceiu-res--file.wp-block-group {
    position: relative;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
}

.ceiu-res--file .ceiu-res__text.wp-block-group {
    flex: 1;
    min-width: 0;
}

.ceiu-res--file .ceiu-res__text > p {
    margin: 0;
}

.ceiu-res--file::after {
    content: "";
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    background: #9ca3af;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}

/* A file block with no document selected renders nothing, so drop the arrow
   too — an arrow on a card that cannot be clicked is a false affordance. */
.ceiu-res--file:not(:has(.ceiu-res__file))::after {
    visibility: hidden;
}

/* ceiu_render_resource_file() reduces the File block to this one link, which
   covers the card so the whole tile opens the document. */
a.ceiu-res__file {
    position: absolute;
    inset: 0;
    text-decoration: none;
}

/* In the block editor the same link must not swallow clicks aimed at the
   paragraphs, so show it as a small inline link instead. [data-type] only
   exists on the editor's block wrapper, never on the front end. */
.ceiu-res__file.wp-block-file[data-type] {
    display: block;
    flex-shrink: 0;
    margin: 0;
}

/* An unfilled file block renders a big Upload / Media Library panel that would
   blow the card out of shape. Strip it back to a compact pair of buttons so a
   card without a document yet still reads like the designed card. These
   classes only exist in the editor, so the front end is untouched. */
.ceiu-res--file .components-placeholder.block-editor-media-placeholder {
    min-height: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    flex-direction: row;
    align-items: center;
}

.ceiu-res--file .components-placeholder__label,
.ceiu-res--file .components-placeholder__instructions {
    display: none;
}

.ceiu-res--file .components-placeholder__fieldset {
    flex: 0 0 96px;
    flex-direction: column;
    gap: 4px;
    width: 96px;
    margin: 0;
}

.ceiu-res--file .components-placeholder__fieldset .components-button {
    width: 100%;
    height: 26px;
    min-height: 26px;
    justify-content: center;
    padding: 0 8px;
    font-size: 11px;
}

/* Once a document is chosen, core overwrites the link text with the media
   title. Collapse it to the same 17px arrow the front end draws, so picking a
   file never changes how the card looks; the card's own arrow steps aside. */
.ceiu-res__file.wp-block-file[data-type]:has(a) {
    width: 17px;
    height: 17px;
    overflow: hidden;
}

.ceiu-res--file:has(.wp-block-file[data-type] a)::after {
    display: none;
}

.ceiu-res__file.wp-block-file[data-type] a {
    position: static;
    display: block;
    width: 17px;
    height: 17px;
    font-size: 0;
    text-decoration: none;
    background: #9ca3af;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}

/* Core can also emit an inline PDF preview and a Download button; neither
   belongs in a card this size, in the editor or on the front end. */
.ceiu-res__file .wp-block-file__embed,
.ceiu-res__file .wp-block-file__button {
    display: none;
}

/* Meeting minutes cards come from a Query Loop, so their pieces are post
   blocks rather than hand-written markup — but they wear the same card. */
/* The homepage's featured list is one Query Loop per section, so each card
   arrives wrapped in a query and a post template. Collapse those wrappers so
   the cards sit directly in the list, as the static ones used to.
   [data-type] only exists in the editor, where the wrappers must stay
   selectable. */
.ceiu-reslist .ceiu-featquery:not([data-type]),
.ceiu-reslist .ceiu-featlist:not([data-type]) {
    display: contents;
}

.ceiu-reslist .ceiu-res--post.wp-block-group {
    position: relative;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
}

.ceiu-reslist .ceiu-resgroup__empty {
    margin: 0;
    padding: 18px;
    border: 1px dashed var(--theme-line);
    border-radius: 12px;
}

/* auto-fill here, unlike the rest of the page: this section's card count is
   whatever has been published, and auto-fit would stretch a lone card across
   the full width instead of sitting it in the same column as its neighbours. */
.ceiu-secquery .ceiu-resgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
    gap: 14px;
}

.ceiu-resgrid .ceiu-res--post.wp-block-group {
    position: relative;
    gap: 16px;
    align-items: center;
    flex-wrap: nowrap;
}

.ceiu-res--post .ceiu-res__text.wp-block-group {
    flex: 1;
    min-width: 0;
}

.ceiu-res--post .ceiu-res__title {
    margin: 0;
    font-family: var(--theme-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--theme-ink);
}

.ceiu-res--post .ceiu-res__title a {
    color: inherit;
    text-decoration: none;
}

/* One link, stretched over the card, so the whole tile opens the document. */
.ceiu-res--post .ceiu-res__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ceiu-res--post .ceiu-res__sub {
    margin: 0;
    font-family: var(--theme-body);
    font-size: 12.5px;
    color: var(--theme-muted);
}

.ceiu-res--post::after {
    content: "";
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    background: #9ca3af;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}

/* Editor only: the front end never sees a Featured Image block, because
   ceiu_minutes_thumb() replaces it with the icon tile. In the editor it is
   still a real block, and with no image set it renders a placeholder tall
   enough to distort the card — so hold it to the tile's size. */
.ceiu-res--post .wp-block-post-featured-image {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--theme-wash);
}

.ceiu-res--post .wp-block-post-featured-image__placeholder {
    min-height: 42px;
    height: 42px;
}

.ceiu-res--post .wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A featured image takes the icon tile's place at the same size. */
.ceiu-tile--img {
    padding: 0;
    overflow: hidden;
}

.ceiu-tile--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ceiu-resgroup__empty {
    margin: 0;
    font-family: var(--theme-body);
    font-size: 13.5px;
    color: var(--theme-muted);
}

.ceiu-tile--onprimary {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* ---------------------------------------------------------------
   Join CTA
   --------------------------------------------------------------- */

.ceiu-joincta {
    position: relative;
    overflow: hidden;
    padding: clamp(44px, 5.5vw, 72px) 0;
    background-image:
        linear-gradient(90deg, rgba(11, 29, 38, 0.92) 0%, rgba(14, 52, 70, 0.85) 55%, rgba(22, 78, 104, 0.75) 100%),
        url("assets/images/join-cta.avif");
    background-size: cover, cover;
    background-position: center, center;
}

.ceiu-joincta__inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    align-items: center;
}

.ceiu-joincta__inner > * {
    margin-block: 0;
}

.ceiu-joincta__text > * {
    margin-block: 0;
}

.ceiu-joincta__title {
    font-size: clamp(24px, 2.9vw, 34px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 0 12px;
    max-width: 24ch;
    text-wrap: pretty;
}

.ceiu-joincta__copy {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    max-width: 52ch;
    margin: 0;
}

.ceiu-joincta__actions {
    gap: 12px;
}

/* ---------------------------------------------------------------
   Generic page / single post
   --------------------------------------------------------------- */

.ceiu-container--narrow {
    max-width: 760px;
}

.ceiu-page {
    padding-block: clamp(40px, 6vw, 72px);
}

.ceiu-page__title {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 24px;
    text-wrap: pretty;
}

.ceiu-post__meta {
    gap: 8px 16px;
    align-items: center;
    margin-bottom: 12px;
}

.ceiu-post__meta > * {
    margin-block: 0;
}

.ceiu-post__terms,
.ceiu-post__terms a {
    font-family: var(--theme-ui);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-blue);
}

.ceiu-post__date {
    font-family: var(--theme-ui);
    font-size: 13px;
    color: var(--theme-muted);
}

.ceiu-post__image {
    margin: 0 0 32px;
}

.ceiu-post__image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.ceiu-page__content {
    font-size: 17px;
    line-height: 1.7;
    color: #374151;
}

.ceiu-page__content > * {
    margin-block: 0 24px;
}

.ceiu-page__content h2 {
    font-size: 26px;
    margin-block: 40px 16px;
}

.ceiu-page__content h3 {
    font-size: 20px;
    margin-block: 32px 12px;
}

.ceiu-page__content ul,
.ceiu-page__content ol {
    padding-left: 1.4em;
}

.ceiu-page__content a {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   Page hero (inner-page banner)
   --------------------------------------------------------------- */

.ceiu-pagehero {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 5vw, 68px) 0;
    background: linear-gradient(135deg, var(--theme-blue-dark) 0%, var(--theme-blue) 100%);
}

/* The prototype's diagonal hatch overlay. */
.ceiu-pagehero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0 2px,
        transparent 2px 14px
    );
    pointer-events: none;
}

.ceiu-pagehero__inner {
    position: relative;
}

.ceiu-pagehero__inner > * {
    margin-block: 0;
}

.ceiu-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--theme-ui);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 16px;
}

.ceiu-crumbs a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

.ceiu-crumbs a:hover {
    color: #ffffff;
}

.ceiu-crumbs__current {
    color: rgba(255, 255, 255, 0.82);
}

.ceiu-pagehero__title {
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: #ffffff;
    max-width: 24ch;
    margin: 0 0 18px;
    text-wrap: pretty;
}

.ceiu-pagehero__lede {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.76);
    max-width: 58ch;
    margin: 0;
    text-wrap: pretty;
}

/* ---------------------------------------------------------------
   Resources page
   --------------------------------------------------------------- */

.ceiu-resources {
    background: #ffffff;
}

.ceiu-resgroups {
    display: flex;
    flex-direction: column;
    gap: 52px;
}

.ceiu-resgroups > *,
.ceiu-resgroup > * {
    margin-block: 0;
}

.ceiu-resgroup__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 6px;
}

.ceiu-resgroup__head > * {
    margin-block: 0;
}

.ceiu-resgroup__title {
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.ceiu-resgroup__count {
    font-family: var(--theme-ui);
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    margin: 0;
}

.ceiu-resgroup__note {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--theme-muted);
    max-width: 64ch;
    margin: 0 0 22px;
}

.ceiu-resgrid {
    display: grid;
    /* auto-fit, not WP's auto-fill: a trailing empty track would leave the
       last row's cards narrower than the rest. min() keeps the 330px floor
       from overflowing a phone viewport. */
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: 14px;
}

.ceiu-resgrid > * {
    margin-block: 0;
}

/* A group with no intro paragraph: the grid carries the head's spacing. */
.ceiu-resgroup__head + .ceiu-resgrid {
    margin-top: 22px;
}

.ceiu-reshelp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #f9fafb;
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    padding: 28px;
}

.ceiu-reshelp > * {
    margin-block: 0;
}

.ceiu-reshelp__text {
    min-width: 0;
    max-width: 56ch;
}

.ceiu-reshelp__text > * {
    margin-block: 0;
}

.ceiu-reshelp__title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px;
}

.ceiu-reshelp__copy {
    font-size: 14px;
    line-height: 1.7;
    color: var(--theme-muted);
    margin: 0;
}

/* ---------------------------------------------------------------
   Page hero — photo variant (Executive)
   --------------------------------------------------------------- */

/* Photo hero: the same dark gradient the design specifies, laid over a
   full-bleed cover photo. */
.ceiu-pagehero--photo {
    background-image:
        linear-gradient(
            90deg,
            rgba(11, 29, 38, 0.92) 0%,
            rgba(11, 29, 38, 0.85) 55%,
            rgba(11, 29, 38, 0.75) 100%
        ),
        url("assets/images/executive-hero.webp");
    background-size: cover, cover;
    background-position: center, center;
    background-color: #0B1D26;
}

.ceiu-pagehero--photo::before {
    display: none;
}

/* About's rally photo. It is a wide 960x400 crop, so it is anchored to the
   centre-top: the placards and faces sit in the upper half, and bottom
   anchoring would crop them out on the taller mobile band. */
.ceiu-abouthero.ceiu-pagehero--photo {
    background-image: linear-gradient(
            90deg,
            rgba(11, 29, 38, 0.92) 0%,
            rgba(11, 29, 38, 0.85) 55%,
            rgba(11, 29, 38, 0.75) 100%
        ),
        url("assets/images/about-hero.webp");
    background-position: center, center 30%;
}

/* The design hides the hero's lede on mobile to keep the band short. */
@media (max-width: 640px) {
    .ceiu-abouthero__lede {
        display: none;
    }
}

/* Contact's hero photo, framed the way the design's object-position:75% 25%
   does — biased right and up, away from centre. */
.ceiu-contacthero.ceiu-pagehero--photo {
    background-image: linear-gradient(
            90deg,
            rgba(11, 29, 38, 0.92) 0%,
            rgba(11, 29, 38, 0.85) 55%,
            rgba(11, 29, 38, 0.75) 100%
        ),
        url("assets/images/contact-hero.jpg");
    background-position: center, 75% 25%;
}

.ceiu-contacthero__title {
    max-width: 20ch;
}

/* ---------------------------------------------------------------
   Executive page
   --------------------------------------------------------------- */

.ceiu-executive {
    background: #ffffff;
}

.ceiu-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FEF3C7;
    border: 1px solid #FDE68A;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 36px;
}

.ceiu-notice .ceiu-icon {
    width: 18px;
    height: 18px;
    color: #B45309;
    flex-shrink: 0;
}

.ceiu-notice p {
    font-family: var(--theme-ui);
    font-size: 13.5px;
    color: #92400e;
    line-height: 1.6;
    margin: 0;
}

/* auto-fit, not WP's auto-fill: with 3 cards and room for 4×280px tracks,
   auto-fill keeps the phantom 4th track and never stretches to fill. */
.ceiu-executive .ceiu-execgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.ceiu-execgrid {
    gap: 24px;
    margin-bottom: 56px;
}

.ceiu-execcard {
    border: 1px solid var(--theme-line-strong);
    border-top: 3px solid var(--theme-blue);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
}

.ceiu-execcard > * {
    margin-block: 0;
}

/* A real wp:image block (not a wp:html placeholder div) — clicking it in
   the editor opens the ordinary Gutenberg image toolbar (Replace / Upload
   / Media Library), so a real photo can be dropped in without touching
   HTML. Ships with a bundled placeholder image already in the src. */
.ceiu-execcard__photo {
    margin: 0;
    height: 240px;
    overflow: hidden;
    flex-shrink: 0;
    /* Kept as the backdrop: it shows through until a photo is set, and
       still renders correctly if a page somewhere is running the older
       placeholder markup. */
    background: repeating-linear-gradient(135deg, #f3f4f6 0 10px, #eceef1 10px 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ceiu-execcard__photo span {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #9ca3af;
    letter-spacing: 0.04em;
}

.ceiu-execcard__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ceiu-execcard__body {
    padding: 24px;
}

.ceiu-execcard__body > * {
    margin-block: 0;
}

.ceiu-execcard__role {
    font-family: var(--theme-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-blue);
    margin: 0;
}

.ceiu-execcard__name {
    font-weight: 700;
    font-size: 24px;
    margin: 8px 0 10px;
}

.ceiu-execcard__email {
    font-family: var(--theme-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ceiu-execcard__email:hover {
    color: var(--theme-blue-dark);
}

.ceiu-execcard__email .ceiu-icon {
    width: 14px;
    height: 14px;
}

/* A phone number is optional — .ceiu-execcard__body zeroes every child's
   margin, so the 6px gaps here only need to be added where a phone line is
   actually present, without touching the role/name spacing above them. */
.ceiu-execcard__phone {
    margin-top: 6px;
    font-family: var(--theme-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ceiu-execcard__phone + .ceiu-execcard__email {
    margin-top: 6px;
}

.ceiu-execcard__phone .ceiu-icon {
    width: 14px;
    height: 14px;
}

.ceiu-exechead {
    align-items: baseline;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--theme-line-strong);
    margin-bottom: 20px;
}

.ceiu-exechead > * {
    margin-block: 0;
}

.ceiu-exechead__title {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.ceiu-exechead__count {
    font-family: var(--theme-ui);
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    margin: 0;
}

.ceiu-execlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ceiu-execlist > * {
    margin-block: 0;
}

.ceiu-execrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
    background: #ffffff;
}

/* Same real-image treatment as .ceiu-execcard__photo above. */
.ceiu-execrow__avatar {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0;
    background: repeating-linear-gradient(135deg, #f3f4f6 0 8px, #eceef1 8px 16px);
}

.ceiu-execrow__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ceiu-execrow__body {
    flex: 1 1 220px;
    min-width: 0;
}

.ceiu-execrow__name {
    display: block;
    font-weight: 700;
    font-size: 17px;
    margin: 0 0 3px;
}

.ceiu-execrow__role {
    display: block;
    font-family: var(--theme-ui);
    font-size: 12.5px;
    color: var(--theme-muted);
}

.ceiu-execrow__email {
    font-family: var(--theme-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ceiu-execrow__email:hover {
    color: var(--theme-blue-dark);
}

.ceiu-execrow__email .ceiu-icon {
    width: 14px;
    height: 14px;
}

/* A seat with no name or email confirmed yet — a plain dash rather than a
   blue mailto link with nothing to send to. */
.ceiu-execrow__email--empty {
    color: var(--theme-muted);
    font-weight: 500;
}

/* Site representatives --------------------------------------------- */

.ceiu-siterepgrid {
    display: grid;
    /* auto-fit, not WP's auto-fill: a trailing empty track would leave the
       last row's cards narrower than the rest. */
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 16px;
}

.ceiu-siterepgrid > * {
    margin-block: 0;
}

.ceiu-siterepcard {
    padding: 22px;
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    background: #ffffff;
}

.ceiu-siterepcard > * {
    margin-block: 0;
}

.ceiu-siterepcard__site {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.ceiu-siterepcard__site .ceiu-icon {
    width: 16px;
    height: 16px;
    color: var(--theme-blue);
    flex-shrink: 0;
}

.ceiu-siterepcard__title {
    font-weight: 700;
    font-size: 16px;
    margin: 0;
}

.ceiu-siterepcard__people {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ceiu-siterepcard__person + .ceiu-siterepcard__person {
    padding-top: 12px;
    border-top: 1px solid var(--theme-line);
}

.ceiu-siterepcard__name {
    display: block;
    font-family: var(--theme-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-ink);
    margin: 0 0 4px;
}

.ceiu-siterepcard__email {
    font-family: var(--theme-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--theme-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ceiu-siterepcard__email:hover {
    color: var(--theme-blue-dark);
}

.ceiu-siterepcard__email .ceiu-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Finding-your-steward split section ------------------------------ */

/* Same auto-fill fix: two children with room for 3×300px tracks otherwise
   sit at 360px instead of stretching to fill the container. */
.ceiu-steward .ceiu-stewardgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.ceiu-stewardgrid {
    gap: clamp(32px, 4vw, 56px);
    align-items: stretch;
}

.ceiu-stewardtext {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ceiu-stewardtext > * {
    margin-block: 0;
}

.ceiu-stewardtext__copy {
    font-size: 15.5px;
    color: var(--theme-muted);
    line-height: 1.75;
    max-width: 52ch;
    margin: 14px 0 28px;
    text-wrap: pretty;
}

.ceiu-steward__steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ceiu-steward__steps > * {
    margin-block: 0;
}

.ceiu-steward__step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.ceiu-steward__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--theme-wash);
    color: var(--theme-blue);
    font-family: var(--theme-ui);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.ceiu-steward__text {
    font-size: 15px;
    color: #374151;
    line-height: 1.65;
    padding-top: 3px;
}

.ceiu-stewardcta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--theme-blue-dark);
    border-radius: 16px;
    padding: clamp(28px, 3.2vw, 40px);
}

.ceiu-stewardcta > * {
    margin-block: 0;
}

.ceiu-stewardcta .ceiu-tile {
    margin-bottom: 22px;
}

.ceiu-stewardcta__title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.25;
    color: #ffffff;
    margin-bottom: 12px;
    text-wrap: pretty;
}

.ceiu-stewardcta__copy {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.75;
    margin-bottom: 28px;
}

.ceiu-stewardcta__actions {
    gap: 12px;
    margin-top: auto;
}

/* ---------------------------------------------------------------
   News page (templates/home.html)

   Values here come straight from News.dc.html. The page is three bands:
   a featured story, then the filterable feed, then the signup. Generic
   archives (category, search, date) use templates/index.html instead and
   keep the plainer .ceiu-news__* card styling shared with the homepage
   teaser — so everything specific to this design is scoped to
   .ceiu-newsfeatured / .ceiu-newsarchive.
   --------------------------------------------------------------- */

/* The design's band rhythm: the featured band carries only top padding so
   it sits tight against the feed band, which carries both. */
.ceiu-newsfeatured {
    background: #ffffff;
    padding: clamp(40px, 5vw, 64px) 0 0;
}

.ceiu-newsarchive {
    background: #ffffff;
    padding: clamp(40px, 5vw, 64px) 0 clamp(52px, 6.5vw, 88px);
}

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

.ceiu-newsfeatured__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ceiu-newsfeatured__list > li {
    margin-block: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(24px, 3.5vw, 48px);
    align-items: center;
    border: 1px solid var(--theme-line);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    transition: box-shadow 0.3s;
}

.ceiu-newsfeatured__list > li:hover {
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.1);
}

.ceiu-newsfeatured__media {
    margin: 0;
}

.ceiu-newsfeatured__media .wp-block-post-featured-image,
.ceiu-newsfeatured__media .wp-block-post-featured-image a {
    display: block;
    margin: 0;
}

/* A definite height (not 100%): with align-items:center the taller of the
   image and the body sets the card height, and at desktop widths the
   image is the taller one, so it reads as full-bleed. */
.ceiu-newsfeatured__media img {
    width: 100%;
    height: clamp(240px, 30vw, 360px);
    object-fit: cover;
    display: block;
}

.ceiu-newsfeatured__body {
    min-width: 0;
    padding: clamp(20px, 3vw, 36px);
}

.ceiu-newsfeatured__body > * {
    margin-block: 0;
}

/* Side by side, the grid gap supplies the text's left inset, so the body
   drops its own left padding (as the design does). Stacked in one column
   it keeps the padding, otherwise the text would sit flush to the edge. */
@media (min-width: 740px) {
    .ceiu-newsfeatured__body {
        padding-left: 0;
    }
}

.ceiu-newsfeatured__meta {
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.ceiu-newsfeatured__meta > * {
    margin-block: 0;
}

.ceiu-newsfeatured__title {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-bottom: 14px;
    text-wrap: pretty;
}

.ceiu-newsfeatured__title a {
    color: var(--theme-ink);
    transition: color 0.25s;
}

.ceiu-newsfeatured__list > li:hover .ceiu-newsfeatured__title a {
    color: var(--theme-blue);
}

.ceiu-newsfeatured__excerpt {
    font-size: 15px;
    color: var(--theme-muted);
    line-height: 1.7;
    margin-bottom: 20px;
    max-width: 56ch;
}

.ceiu-newsfeatured__excerpt p {
    margin: 0;
}

/* Inherits the arrow pseudo-element from .ceiu-news__cta; the design gives
   the featured CTA no rule above it, unlike the teaser cards. */
.ceiu-newsfeatured__cta.ceiu-news__cta {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 14px;
    gap: 8px;
}

.ceiu-newsfeatured__cta.ceiu-news__cta::after {
    width: 15px;
    height: 15px;
}

.ceiu-newsfeatured__list > li:hover .ceiu-newsfeatured__cta::after {
    transform: translateX(4px);
}

/* Filter toolbar -------------------------------------------------- */

.ceiu-newsfeed__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--theme-line);
    margin-bottom: 32px;
}

.ceiu-newsfeed__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ceiu-chip {
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--theme-line);
    background: #ffffff;
    color: var(--theme-slate);
    font-family: var(--theme-ui);
    font-size: 13.5px;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ceiu-chip:hover {
    border-color: var(--theme-line-strong);
}

.ceiu-chip.is-active {
    border-color: var(--theme-blue);
    background: var(--theme-blue);
    color: #ffffff;
}

.ceiu-newsfeed__alllink {
    font-family: var(--theme-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--theme-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ceiu-newsfeed__alllink:hover {
    color: var(--theme-blue-dark);
}

.ceiu-newsfeed__alllink .ceiu-icon {
    width: 14px;
    height: 14px;
}

.ceiu-newsfeed__note {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 26px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Feed cards ------------------------------------------------------ */

.ceiu-newsarchive .ceiu-news__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    gap: 22px;
}

.ceiu-newsarchive .ceiu-news__grid > li {
    border-radius: 14px;
    /* The design gives these cards a box-shadow transition and nothing
       else — no lift, no border-colour shift, no image zoom. */
    transition: box-shadow 0.3s;
}

.ceiu-newsarchive .ceiu-news__grid > li:hover {
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
    border-color: var(--theme-line);
    transform: none;
}

.ceiu-newsarchive .ceiu-news__grid > li:hover .ceiu-news__media img {
    transform: none;
}

.ceiu-newsarchive .ceiu-news__media img {
    height: 190px;
}

.ceiu-newsarchive .ceiu-news__body {
    padding: 20px;
    gap: 0;
}

.ceiu-newsarchive .ceiu-news__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.ceiu-newsarchive .ceiu-news__excerpt {
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 14px;
}

/* Category chip + date, shared by the featured story and the feed cards.
   Both inherit the body serif here rather than the UI sans the homepage
   teaser uses for them, matching the design. */
.ceiu-newsfeatured .ceiu-news__badge,
.ceiu-newsarchive .ceiu-news__badge {
    position: static;
    align-self: flex-start;
    font-family: var(--theme-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: inherit;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--theme-wash);
    color: var(--theme-blue);
}

.ceiu-newsarchive .ceiu-news__badge {
    margin-bottom: 12px;
}

.ceiu-newsfeatured .ceiu-news__badge a,
.ceiu-newsarchive .ceiu-news__badge a {
    color: inherit;
}

.ceiu-newsfeatured__list > li.category-strike-action .ceiu-news__badge,
.ceiu-newsarchive .ceiu-news__grid > li.category-strike-action .ceiu-news__badge {
    background: #FEF3C7;
    color: #B45309;
}

.ceiu-newsfeatured__list > li.category-resources .ceiu-news__badge,
.ceiu-newsarchive .ceiu-news__grid > li.category-resources .ceiu-news__badge {
    background: #f3f4f6;
    color: var(--theme-slate);
}

.ceiu-newsfeatured .ceiu-news__date,
.ceiu-newsarchive .ceiu-news__date {
    font-family: var(--theme-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #9ca3af;
}

.ceiu-newsfeatured .ceiu-news__readtime,
.ceiu-newsarchive .ceiu-news__readtime {
    margin-left: 6px;
}

/* Newsletter signup ----------------------------------------------- */

.ceiu-newsletter {
    background: var(--theme-blue);
    padding: clamp(44px, 5.5vw, 72px) 0;
}

/* auto-fit, not WP's auto-fill: at 1192px three 300px tracks fit, so
   auto-fill would strand an empty third column and squeeze the heading
   and form into two narrow ones. */
.ceiu-newsletter .ceiu-newsletter__inner {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px;
    align-items: center;
}

.ceiu-newsletter__text > * {
    margin-block: 0;
}

.ceiu-newsletter__title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 12px;
    max-width: 26ch;
    text-wrap: pretty;
}

.ceiu-newsletter__copy {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.7;
    max-width: 50ch;
}

.ceiu-newsletter__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.ceiu-newsletter__input {
    flex: 1;
    min-width: 220px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 14.5px;
    font-family: var(--theme-ui);
}

.ceiu-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.ceiu-newsletter__input:focus {
    border-color: #ffffff;
    outline: none;
}

.ceiu-newsletter__submit {
    padding: 14px 26px;
    background: #ffffff;
    color: var(--theme-blue-dark);
    border: none;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--theme-ui);
}

.ceiu-newsletter__submit:hover {
    background: var(--theme-wash);
}

.ceiu-newsletter__thanks {
    width: 100%;
    font-size: 13.5px;
    color: #ffffff;
    font-weight: 600;
    margin: 4px 0 0;
}

/* ---------------------------------------------------------------
   About page
   --------------------------------------------------------------- */

.ceiu-sectionhead--narrow > * {
    margin-block: 0;
}

/* Mission (text + photo) ----------------------------------------- */

/* auto-fit, not WP's auto-fill: with 2 items and room for a 3rd
   min-width(320px) track, auto-fill would keep the phantom track and
   the two real columns would sit narrower than the container allows. */
.ceiu-mission .ceiu-mission__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    align-items: center;
}

.ceiu-mission__text > * {
    margin-block: 0;
}

.ceiu-mission__copy {
    font-size: 15px;
    color: var(--theme-slate);
    line-height: 1.75;
    margin: 14px 0 0;
    text-wrap: pretty;
}

.ceiu-mission__copy--muted {
    color: var(--theme-muted);
}

.ceiu-mission__image {
    margin: 0;
}

.ceiu-mission__image img {
    width: 100%;
    height: clamp(280px, 32vw, 400px);
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* History timeline ------------------------------------------------ */

.ceiu-history .ceiu-timeline {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 28px;
}

.ceiu-timeline__item {
    border-top: 2px solid var(--theme-line);
    padding-top: 20px;
}

.ceiu-timeline__item > * {
    margin-block: 0;
}

.ceiu-timeline__item--active {
    border-top-color: var(--theme-blue);
}

.ceiu-timeline__year {
    font-size: 26px;
    color: var(--theme-blue);
    margin-bottom: 8px;
    font-family: var(--theme-body);
}

/* A small bold label under the year — not a heading-sized .ceiu-h3, which
   is what these used before and rendered nearly as large as the section
   title itself. */
.ceiu-timeline__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 8px;
}

.ceiu-timeline__copy {
    font-size: 14px;
    color: var(--theme-muted);
    line-height: 1.7;
}

/* Equity & inclusion ------------------------------------------------ */

.ceiu-equity .ceiu-equity__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 18px;
}

.ceiu-equity__card {
    background: #ffffff;
    border: 1px solid var(--theme-line);
    border-radius: 14px;
    padding: 24px;
}

.ceiu-equity__card > * {
    margin-block: 0;
}

.ceiu-equity__card .ceiu-tile {
    margin-bottom: 16px;
}

.ceiu-equity__title {
    font-size: 15.5px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ceiu-equity__copy {
    font-size: 13.5px;
    color: var(--theme-muted);
    line-height: 1.65;
}

/* Closing CTA ------------------------------------------------------- */

.ceiu-aboutcta {
    background: var(--theme-blue);
    padding: clamp(44px, 5.5vw, 72px) 0;
}

.ceiu-aboutcta__inner {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px;
    align-items: center;
}

.ceiu-aboutcta__title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(24px, 2.8vw, 34px);
    line-height: 1.2;
    color: #ffffff;
    max-width: 26ch;
    text-wrap: pretty;
    margin: 0;
}

.ceiu-aboutcta__actions {
    gap: 12px;
}

/* ---------------------------------------------------------------
   Contact page
   --------------------------------------------------------------- */

.ceiu-contactpage {
    background: #ffffff;
}

.ceiu-contactpage .ceiu-contactpage__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(32px, 4.5vw, 64px);
    align-items: start;
}

/* Ways to reach us ------------------------------------------------ */

.ceiu-contactinfo__title {
    margin: 0 0 24px;
}

.ceiu-contactinfo__methods {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
}

.ceiu-contactinfo__methods > * {
    margin-block: 0;
}

.ceiu-contactinfo__method {
    display: flex;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--theme-line);
    border-radius: 12px;
}

.ceiu-contactinfo__method-body {
    min-width: 0;
}

.ceiu-contactinfo__method-body h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
}

.ceiu-contactinfo__method-body a {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-blue);
    text-decoration: none;
}

.ceiu-contactinfo__method-body a:hover {
    color: var(--theme-blue-dark);
}

.ceiu-contactinfo__method-body p {
    font-size: 12.5px;
    color: #9ca3af;
    margin-top: 4px;
    line-height: 1.5;
}

.ceiu-contactinfo__method-body p.ceiu-contactinfo__method-note {
    font-size: 13.5px;
    color: var(--theme-muted);
    line-height: 1.6;
    margin-top: 0;
}

/* This page's warning notice has two-line text, so the icon aligns to the
   top of the block rather than centering against it. */
.ceiu-notice--top {
    align-items: flex-start;
    padding: 18px;
    margin-bottom: 0;
}

.ceiu-notice--top .ceiu-icon {
    margin-top: 2px;
}

/* Message form ------------------------------------------------------ */

.ceiu-contactform {
    background: #f9fafb;
    border: 1px solid var(--theme-line);
    border-radius: 18px;
    padding: clamp(24px, 3vw, 36px);
}

.ceiu-contactform__title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: clamp(23px, 2.6vw, 30px);
    line-height: 1.2;
    margin: 0 0 8px;
}

.ceiu-contactform__note {
    font-size: 13.5px;
    color: var(--theme-muted);
    margin: 0 0 26px;
}

.ceiu-form {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.ceiu-form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 20px;
}

.ceiu-form__field label {
    display: block;
    font-family: var(--theme-ui);
    font-size: 15px;
    font-weight: 700;
    color: var(--theme-ink);
    margin-bottom: 10px;
}

.ceiu-form__field input,
.ceiu-form__field select,
.ceiu-form__field textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--theme-line-strong);
    border-radius: 12px;
    font-size: 15px;
    color: var(--theme-ink);
    background: #ffffff;
    font-family: var(--theme-ui);
}

.ceiu-form__field textarea {
    resize: vertical;
}

.ceiu-form__field input:focus,
.ceiu-form__field select:focus,
.ceiu-form__field textarea:focus {
    border-color: var(--theme-blue);
    box-shadow: 0 0 0 3px rgba(22, 78, 104, 0.12);
    outline: none;
}

.ceiu-form__submit {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: var(--theme-blue-dark);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--theme-ui);
}

.ceiu-form__submit:hover {
    background: var(--theme-blue);
}

.ceiu-form__submit .ceiu-icon {
    width: 18px;
    height: 18px;
}

.ceiu-form__hint {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.6;
    margin: 0;
}

/* Grievance form -------------------------------------------------- */

.ceiu-grievance__inner {
    max-width: 880px;
}

.ceiu-grievance__form {
    gap: 34px;
}

/* The lettered blocks of the paper form: A grievor, B what happened,
   C what is being asked for. */
.ceiu-grievance__section {
    border: 1px solid var(--theme-line);
    border-radius: 16px;
    padding: clamp(20px, 3vw, 32px);
    background: #ffffff;
}

.ceiu-grievance__sectionhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.ceiu-grievance__letter {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--theme-blue-dark);
    color: #ffffff;
    font-family: var(--theme-ui);
    font-size: 15px;
    font-weight: 700;
}

.ceiu-grievance__sectiontitle {
    margin: 0;
    font-family: var(--theme-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--theme-ink);
}

.ceiu-grievance__fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ceiu-form__req {
    color: #b32d2e;
}

.ceiu-form__field--error input,
.ceiu-form__field--error textarea {
    border-color: #b32d2e;
}

.ceiu-form__error {
    margin: 8px 0 0;
    font-family: var(--theme-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: #b32d2e;
}

.ceiu-notice--error {
    background: #fef2f2;
    border-color: #fecaca;
}

.ceiu-notice--error .ceiu-icon {
    color: #b32d2e;
}

/* Honeypot: kept out of sight and out of the tab order, but still
   rendered — a bot that ignores CSS fills it in and gives itself away. */
.ceiu-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ceiu-grievance__done {
    max-width: 640px;
}

/* Message received ---------------------------------------------- */

.ceiu-contactform__donetile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--theme-wash);
    color: var(--theme-blue);
    margin-bottom: 20px;
}

.ceiu-contactform__donetile .ceiu-icon {
    width: 26px;
    height: 26px;
}

.ceiu-contactform__donecopy {
    font-size: 14.5px;
    color: var(--theme-muted);
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 46ch;
}

.ceiu-contactform__doneactions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ceiu-contactform__doneactions .ceiu-btn {
    padding: 12px 22px;
    font-size: 14px;
}

.ceiu-btn--outline {
    background: transparent;
    color: var(--theme-blue);
    border: 1px solid var(--theme-line-strong);
}

.ceiu-btn--outline:hover {
    border-color: var(--theme-blue);
}