:root {
    --bg: #faf6f0;
    --surface: #ffffff;
    --ink: #201812;
    --muted: #786a5d;
    --border: rgba(32, 24, 18, 0.10);
    --primary: #a4272c;
    --primary-ink: #ffffff;
    --accent: #c9972e;
    --accent-2: #5c1116;
    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow-soft: 0 1px 2px rgba(32, 24, 18, 0.05), 0 12px 32px -12px rgba(32, 24, 18, 0.14);
    --shadow-lift: 0 8px 24px -8px rgba(32, 24, 18, 0.26);
    color-scheme: light;
}

/* Dark mode intentionally disabled — the site always renders with the
   light-theme variable values above, regardless of OS/browser color-scheme
   preference. (Previously a @media (prefers-color-scheme: dark) block here
   swapped these to dark values, but body below had been hardcoded to a
   fixed light color instead of following var(--ink)/var(--bg) — meaning
   dark mode only ever flipped OTHER components' backgrounds dark while
   body-level text/backgrounds stayed light, breaking contrast all over the
   site. Simplest correct fix: commit fully to always-light.) */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: "Sora", "Inter", system-ui, sans-serif;
    line-height: 1.15;
    margin: 0 0 0.5em;
    letter-spacing: -0.01em;
}

p { margin: 0 0 1em; color: var(--muted); }
a { color: inherit; text-decoration: none; }

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Like Bootstrap's .container-fluid — full viewport width, no max-width
   cap, just the side padding. Compose with .wrap: class="wrap wrap--fluid". */
.wrap--fluid {
    max-width: none;
}

.muted { color: var(--muted); }
.text-accent { color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
    --header-gold: #e09900;
    --header-ink: #211703;

    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg, color-mix(in srgb, var(--header-gold) 96%, white 4%), var(--header-gold));
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 24px -16px rgba(33, 23, 3, 0.4);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-mark--footer {
    width: 52px;
    height: 52px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text strong {
    font-family: "Sora", sans-serif;
    font-size: 0.95rem;
    color: var(--header-ink);
}

.brand-text small {
    color: color-mix(in srgb, var(--header-ink) 65%, transparent);
    font-size: 0.75rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--header-ink) 78%, transparent);
    transition: color 0.15s ease, background 0.15s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
    color: var(--header-ink);
    background: rgba(255, 255, 255, 0.35);
}

/* ---------- Nav dropdown ---------- */
.nav-dropdown {
    position: relative;
}

.nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 18px;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--header-ink) 78%, transparent);
    cursor: pointer;
    padding: 9px 16px;
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-dropdown-trigger:hover,
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger,
.nav-dropdown.is-open .nav-dropdown-trigger {
    color: var(--header-ink);
    background: rgba(255, 255, 255, 0.35);
}

.nav-caret {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret,
.nav-dropdown.is-open .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    border-top: 3px solid var(--header-gold);
    box-shadow: var(--shadow-lift);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
    transition: background 0.15s ease;
}

.nav-dropdown-menu a:hover {
    background: var(--bg);
    color: var(--ink);
}

/* ---------- Nav search ---------- */
.nav-search {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--header-ink);
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.nav-search-toggle:hover {
    background: rgba(33, 23, 3, 0.12);
}

.nav-search-form {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    transition: width 0.2s ease, opacity 0.2s ease, visibility 0.2s;
}

.nav-search.is-open .nav-search-form {
    width: min(260px, 70vw);
    opacity: 1;
    visibility: visible;
}

.nav-search-form input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 18px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    outline: none;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--header-ink);
    border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 96px;
}

.hero-mesh {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 620px;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 55%),
        radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 50%),
        radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 55%);
    filter: blur(40px);
    z-index: -1;
}

.hero:has(.hero-slider) {
    padding: 0;
}

.hero:has(.hero-slider) .hero-mesh {
    display: none;
}

.hero-inner {
    max-width: 780px;
}

/* ---------- Hero slider ---------- */
.hero-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 320px;
    max-height: 600px;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 8fr 4fr;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero-slide-media {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.hero-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-slide-media--placeholder {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(8, 10, 16, 0.05) 0%, rgba(8, 10, 16, 0.35) 40%, rgba(8, 10, 16, 0.94) 100%);
}

/* Who published this article — merged into the "Lee Tan" button itself,
   right after the arrow, instead of floating over the cover image. */
.hero-lead-credit {
    margin-left: 2px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    opacity: 1;
}

.hero-slide-content {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 40px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    overflow: hidden;
    background: linear-gradient(160deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, #000) 100%);
}

/* Same photo as the left column, blurred/zoomed, so the right panel's
   backdrop echoes the slide's own colors instead of a fixed brand color.
   Falls back to the plain maroon gradient above when --slide-bg is unset
   (e.g. articles without a cover image). */
.hero-slide-content::before {
    content: "";
    position: absolute;
    inset: -20px;
    background-image: var(--slide-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(34px) saturate(1.3);
    transform: scale(1.15);
    z-index: 0;
}

.hero-slide-content::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 60%, transparent) 0%, rgba(8, 10, 16, 0.82) 100%);
    z-index: 1;
}

.hero-slide-content > * {
    position: relative;
    z-index: 2;
}

.hero-slide-eyebrows {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.hero-slide-content .eyebrow {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7a5312));
    color: #201203;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
    padding: 5px 14px;
    margin-bottom: 0;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.55);
}

.hero-slider .hero-slide-content h1 {
    color: #fff;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.22;
    margin-bottom: 16px;
    padding-left: 18px;
    border-left: 4px solid var(--accent);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-slide-content .hero-lead {
    font-size: 0.92rem;
    line-height: 1.6;
    max-width: 480px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
    /* Frosted-glass pill instead of a flat tint — matches the login page's
       glassmorphism language and guarantees contrast regardless of the
       slide photo, without wrapping the whole card in one outer box. */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 12px 18px;
    border-radius: 14px;
    display: inline-block;
}

.hero-slide-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: #201203;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7a5312));
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-slide-readmore:hover,
.hero-slide-readmore:focus-visible {
    color: #201203;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -10px rgba(0, 0, 0, 0.6);
}

.hero-slide-readmore span {
    transition: transform 0.15s ease;
}

.hero-slide-readmore:hover span {
    transform: translateX(3px);
}

.hero-slide-content h1 a {
    color: inherit;
}

.hero-slide-content h1 a:hover {
    text-decoration: underline;
}

.hero-slide-content .hero-lead {
    color: rgba(255, 255, 255, 0.95);
}

/* The excerpt is article body HTML rendered with |safe — editor content can
   carry its own inline color (e.g. style="color: rgb(102,102,102)"), which
   otherwise wins over the rules above and shows as barely-visible dark grey
   on the slider's dark backdrop. Force white regardless of what the editor
   saved; !important on an author stylesheet rule beats a non-!important
   inline style. */
.hero-slide-content .hero-lead,
.hero-slide-content .hero-lead * {
    color: #fff !important;
}

/* Staggered entrance for the active slide's caption — each piece slides up
   and fades in a beat after the last. Only plays on .is-active because
   that class always lands on a freshly-activated slide element (goTo()
   toggles it onto a different <article> each time), so the animation
   re-triggers correctly without needing a reflow hack. */
@keyframes hero-caption-in {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-slide.is-active .hero-slide-content .eyebrow {
    animation: hero-caption-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-slider .hero-slide.is-active .hero-slide-content h1 {
    animation: hero-caption-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.hero-slide.is-active .hero-slide-content .hero-lead {
    animation: hero-caption-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

.hero-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.15s ease;
}

.hero-nav:hover { background: rgba(255, 255, 255, 0.32); }
.hero-nav--prev { left: 24px; }
.hero-nav--next { right: 24px; }

.hero-nav-arrow {
    display: block;
}

/* Thumbnail of the slide this arrow would jump to — hidden until hover,
   and only shown at all when JS has actually populated a background-image
   (see .has-image in main.js), so a slide with no cover photo doesn't leave
   an empty box floating next to the arrow. */
.hero-nav-preview {
    position: absolute;
    top: 50%;
    width: 96px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

.hero-nav--prev .hero-nav-preview { left: calc(100% + 14px); }
.hero-nav--next .hero-nav-preview { right: calc(100% + 14px); }

.hero-nav:hover .hero-nav-preview.has-image {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
}

.hero-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.hero-dot {
    position: relative;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.hero-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* Slide title tooltip, shown above the dot on hover/focus — attr() reads
   the data-title set from the template, so no separate JS wiring needed. */
.hero-dot::after {
    content: attr(data-title);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translate(-50%, 4px);
    background: rgba(8, 10, 16, 0.85);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.hero-dot:hover::after,
.hero-dot:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

@media (max-width: 720px) {
    .hero-slider { aspect-ratio: 4 / 3; max-height: 420px; }
    .hero-nav { display: none; }
    .hero-slide { grid-template-columns: 1fr; grid-template-rows: 58% 42%; }
    .hero-slide-content { padding: 20px; }
    /* .hero-dots' "bottom: 28px" (set for the desktop side-by-side layout)
       lands inside the stacked content row here and overlaps the title,
       excerpt or readmore button depending on how much each slide's text
       wraps. Anchor from the top instead, at the image row's 58% boundary
       — that split is fixed by the grid track, so this stays inside the
       photo regardless of how tall any one slide's text content grows. */
    .hero-dots { bottom: auto; top: calc(58% - 32px); }
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(2.1rem, 4.5vw, 3.4rem);
    font-weight: 700;
}

.hero-lead {
    font-size: 1.08rem;
    max-width: 560px;
}

.hero-actions {
    display: flex;
    gap: 14px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
    background: var(--primary);
    color: var(--primary-ink);
    box-shadow: var(--shadow-lift);
}

.btn-primary:hover { transform: translateY(-2px); }

.btn-ghost {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
}

.btn-ghost:hover { border-color: var(--primary); }

/* ---------- Sections ---------- */
.section { padding: 20px 0; }
.section-muted { background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }

.section-head { margin-bottom: 40px; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.section-head--compact h2 { font-size: clamp(1.05rem, 1.6vw, 1.4rem); }

/* ---------- Leaders ---------- */
.leaders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 72px;
    max-width: 900px;
    margin: 0 auto;
}

.leader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.leader-frame {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 14px groove color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 6px;
    box-shadow: var(--shadow-lift);
    background: var(--surface);
}

.leader-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.leader-caption {
    width: 84%;
    margin-top: -32px;
    background: var(--surface);
    border: 5px groove color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 4px;
    padding: 14px 12px 12px;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.leader-caption strong {
    display: block;
    font-family: "Sora", sans-serif;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 2px;
}

.leader-caption span {
    display: block;
    font-size: 0.82rem;
    color: var(--muted);
}

@media (max-width: 640px) {
    .leaders-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        gap: 64px;
    }
}

/* ---------- Bento grid ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bento-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.bento-card--lg { grid-column: span 1; }

.bento-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 16px;
}

.bento-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.bento-card p { margin-bottom: 0; font-size: 0.92rem; }

.bento-link {
    display: inline-block;
    margin-top: 14px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--primary);
}

/* ---------- News grid ---------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.news-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
}

.news-cover {
    aspect-ratio: 16 / 9;
    background: var(--bg);
}

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

.news-cover--placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, var(--bg)), color-mix(in srgb, var(--accent) 25%, var(--bg)));
}

.news-body { padding: 24px; }

.badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.news-body h3 {
    font-family: "Fraunces", "Sora", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: 8px;
}

.news-body h3 a {
    transition: color 0.2s ease;
}

.news-card:hover .news-body h3 a {
    color: var(--primary);
}

.news-body p,
.news-body .news-excerpt {
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--muted);
}

/* Excerpt renders article body HTML with |safe — when it already starts
   with its own block element (e.g. a <p> from the rich-text editor), a <p>
   wrapper here would be invalid (p can't contain p) and the browser would
   silently close it early, breaking layout and any CSS scoped to this
   element. A div avoids that. */
.news-body .news-excerpt * {
    color: var(--muted);
    margin: 0 0 0.5em;
}

.news-body time {
    font-size: 0.8rem;
    color: var(--muted);
}

/* ---------- Internship applicants ---------- */
.applicant-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.applicant-search {
    flex: 1 1 220px;
    max-width: 340px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}

.applicant-search:focus {
    outline: none;
    border-color: var(--primary);
}

.applicant-filter {
    flex: 1 1 180px;
    max-width: 220px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}

.applicant-filter:focus {
    outline: none;
    border-color: var(--primary);
}

.applicant-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.applicant-group {
    margin-bottom: 32px;
}

.applicant-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.applicant-group .pagination {
    margin-top: 16px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .applicant-search,
    .applicant-filter {
        flex: 1 1 100%;
        max-width: none;
    }
}

.applicant-group-title .badge {
    font-size: 0.75rem;
}

.applicant-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.applicant-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    white-space: nowrap;
}

.applicant-table th {
    text-align: left;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
}

.applicant-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.applicant-table tbody tr:last-child td {
    border-bottom: none;
}

.applicant-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.applicant-table-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.applicant-table-photo--placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 25%, var(--bg)), color-mix(in srgb, var(--accent) 25%, var(--bg)));
}

/* ---------- Notísia (modern mosaic) ---------- */
.notisia-modern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 22px;
}

.notisia-modern-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.notisia-modern-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.notisia-modern-card--featured {
    grid-column: span 2;
    grid-row: span 2;
}

.notisia-modern-media {
    position: absolute;
    inset: 0;
}

.notisia-modern-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.notisia-modern-card:hover .notisia-modern-media img {
    transform: scale(1.06);
}

.notisia-modern-media--placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, var(--bg)), color-mix(in srgb, var(--accent) 30%, var(--bg)));
}

.notisia-modern-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 10, 5, 0.05) 0%, rgba(15, 10, 5, 0.4) 45%, rgba(15, 10, 5, 0.92) 100%);
}

.notisia-modern-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(15, 10, 5, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 5px 13px;
    border-radius: 999px;
}

.notisia-modern-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px;
    color: #fff;
}

.notisia-modern-body time {
    display: block;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
}

.notisia-modern-body h3 {
    font-family: "Fraunces", "Sora", serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.28;
    font-size: 1.02rem;
    margin: 0 0 8px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35);
}

.notisia-modern-excerpt {
    display: none;
}

.notisia-modern-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.notisia-modern-link span {
    transition: transform 0.2s ease;
}

.notisia-modern-card:hover .notisia-modern-link span {
    transform: translateX(3px);
}

.notisia-modern-card--featured .notisia-modern-body { padding: 28px; }
.notisia-modern-card--featured .notisia-modern-body h3 {
    font-size: 1.6rem;
    line-height: 1.22;
}

.notisia-modern-card--featured .notisia-modern-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 12px;
    font-size: 0.92rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Renders article body HTML with |safe — forces white regardless of any
   inline color the editor saved (same reasoning as .hero-lead above). */
.notisia-modern-card--featured .notisia-modern-excerpt,
.notisia-modern-card--featured .notisia-modern-excerpt * {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* ---------- Quote banner (mandate) ---------- */
.quote-banner {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.quote-banner-media {
    position: relative;
    min-height: 340px;
}

.quote-banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.quote-banner-body {
    position: relative;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-banner-mark {
    font-family: "Sora", sans-serif;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 4px;
}

.quote-banner-text {
    font-family: "Sora", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 24px;
}

.quote-banner-attrib {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 18px;
    border-top: 3px solid var(--accent);
}

.quote-banner-attrib strong {
    font-size: 0.96rem;
    color: var(--ink);
}

.quote-banner-attrib span {
    font-size: 0.84rem;
    color: var(--muted);
}

/* ---------- Partner logos (marquee) ---------- */
.partners-section { padding: 56px 0 0; }

.partners-strip {
    background: #e09c08;
    padding: 20px 0;
    margin-top: 32px;
}

.partner-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.partner-marquee-track {
    display: flex;
    align-items: center;
    gap: 64px;
    width: max-content;
    animation: partner-marquee-scroll 28s linear infinite;
}

.partner-marquee:hover .partner-marquee-track {
    animation-play-state: paused;
}

.partner-logo-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
}

.partner-logo-item img {
    max-height: 100%;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.partner-logo-item:hover img {
    transform: translateY(-2px);
}

@keyframes partner-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .partner-marquee-track { animation: none; }
    .hero-slide.is-active .hero-slide-content .eyebrow,
    .hero-slider .hero-slide.is-active .hero-slide-content h1,
    .hero-slide.is-active .hero-slide-content .hero-lead {
        animation: none;
    }
}

.empty-state {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 48px 24px;
    text-align: center;
}

.empty-state p { margin: 0; }

/* ---------- Page header (list/detail) ---------- */
.page-header {
    padding: 64px 0 40px;
    border-bottom: 1px solid var(--border);
}

.page-header h1 {
    font-family: "Fraunces", "Sora", serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.page-header h1 em {
    font-style: italic;
    font-weight: 500;
    color: var(--primary);
}

.wrap--narrow {
    max-width: 760px;
}

.section-footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ---------- Filter pills ---------- */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.pill {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--muted);
    transition: all 0.15s ease;
}

.pill:hover {
    border-color: var(--primary);
    color: var(--ink);
    box-shadow: var(--shadow-soft);
}

.pill--active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-ink);
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* ---------- Anúnsiu modern table ---------- */
.anunsiu-table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.anunsiu-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.anunsiu-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.anunsiu-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-size: 0.92rem;
    color: var(--ink);
}

.anunsiu-table tbody tr:last-child td {
    border-bottom: none;
}

.anunsiu-table tbody tr {
    transition: background 0.15s ease;
}

.anunsiu-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.anunsiu-table-title {
    font-family: "Fraunces", "Sora", serif;
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.anunsiu-table td.anunsiu-table-meta {
    color: var(--muted);
    white-space: nowrap;
}

.anunsiu-status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.anunsiu-status--aberta {
    color: #2f7a4d;
    background: color-mix(in srgb, #2f7a4d 14%, transparent);
}

.anunsiu-status--taka {
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 14%, transparent);
}

.anunsiu-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
    transition: color 0.15s ease;
}

.anunsiu-file-link:hover {
    color: var(--accent-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .anunsiu-table thead {
        display: none;
    }
    .anunsiu-table, .anunsiu-table tbody, .anunsiu-table tr, .anunsiu-table td {
        display: block;
        width: 100%;
    }
    .anunsiu-table tbody tr {
        padding: 16px 20px;
    }
    .anunsiu-table tbody td {
        border-bottom: none;
        padding: 4px 0;
    }
    .anunsiu-table tbody tr:not(:last-child) {
        border-bottom: 1px solid var(--border);
    }
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
}

.page-link {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 10px 20px;
    border-radius: 999px;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.page-link:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-soft);
}

.page-current {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0 6px;
}

/* ---------- News card link wrapper ---------- */
.news-cover-link { display: block; }

/* ---------- Article detail ---------- */
.article .badge { margin-top: 8px; }

.back-link {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
}

.back-link:hover { color: var(--primary); }

.article h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-top: 12px;
}

.article-meta {
    color: var(--muted);
    font-size: 0.88rem;
    margin-bottom: 32px;
}

/* ---------- Share buttons ---------- */
.share-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    margin-right: 4px;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.share-btn:hover {
    background: var(--primary);
    color: var(--primary-ink);
    transform: translateY(-2px);
}

.share-feedback {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.share-feedback.is-visible { opacity: 1; }

.article-cover {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: var(--shadow-soft);
}

.article-cover img {
    width: 100%;
    display: block;
}

.article-body {
    font-size: 1.05rem;
    color: var(--ink);
}

.article-body p { color: var(--ink); margin-bottom: 1.2em; }

/* Article body is editor-authored HTML rendered with |safe — some articles
   carry inline color styles from the editor (e.g. style="color: rgb(102,
   102,102)") that are hard to read against the page background. Force the
   site's normal readable ink color regardless of what the editor saved;
   !important on an author stylesheet rule beats a non-!important inline
   style. */
.article-body,
.article-body * {
    color: var(--ink) !important;
}

/* Content images (pasted/embedded via the editors) carry their own
   pixel width by default — without this they can overflow the reading
   column on narrow screens instead of scaling down with it. */
.article-body img,
.article-body iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4em auto;
    border-radius: var(--radius-md);
}

.article-body iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* ---------- Contact form ---------- */
.alert {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 28px;
    font-size: 0.92rem;
}

.alert-success {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    /* Not var(--accent) — that gold is tuned to be a background/border
       accent, not body text; at normal text size it read at ~2.2:1 against
       this alert's own faint tinted background, well under WCAG AA. */
    color: #7a5c16;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-soft);
}

.field { margin-bottom: 20px; }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.field label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.field-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.94rem;
    transition: border-color 0.15s ease;
}

.field-input:focus {
    outline: none;
    border-color: var(--primary);
}

textarea.field-input { resize: vertical; }

.field-error {
    color: #b8283a;
    font-size: 0.82rem;
    margin: 6px 0 0;
}

.contact-form .btn { border: none; cursor: pointer; font-family: inherit; }

@media (max-width: 600px) {
    .field-row { grid-template-columns: 1fr; }
    .contact-form { padding: 24px; }
}

/* ---------- Breadcrumbs ---------- */
.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 18px;
}

.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs span:last-child { color: var(--ink); font-weight: 500; }

/* ---------- Istória (Minister History timeline) ---------- */
.history-list {
    --history-gutter: 4.2rem;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 1.1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.history-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--border);
}

/* Each entry gets its own accent "tone" so the timeline reads as a sequence
   of distinct chapters rather than one flat color — cycled across 6 hues
   picked to sit with the site's warm red/gold palette, with the current
   minister always forced to --primary regardless of position in the cycle. */
.history-entry {
    --tone: var(--primary);
    --tone-ink: var(--primary);
    --tone-soft: var(--surface);
}

.history-entry:nth-child(6n+1) { --tone: #a4272c; --tone-ink: #7c1d21; --tone-soft: #fbebe9; }
.history-entry:nth-child(6n+2) { --tone: #c9972e; --tone-ink: #93701c; --tone-soft: #fbf1de; }
.history-entry:nth-child(6n+3) { --tone: #5c7a3f; --tone-ink: #43592d; --tone-soft: #edf2e6; }
.history-entry:nth-child(6n+4) { --tone: #2f7a78; --tone-ink: #215957; --tone-soft: #e6f1f0; }
.history-entry:nth-child(6n+5) { --tone: #8a3b6b; --tone-ink: #672a4e; --tone-soft: #f5e9f0; }
.history-entry:nth-child(6n+6) { --tone: #5c1116; --tone-ink: #430c0f; --tone-soft: #f1e4e5; }

.history-entry.history-entry--current {
    --tone: var(--primary);
    --tone-ink: var(--primary);
    --tone-soft: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.history-entry {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--history-gutter);
    align-items: center;
}

.history-entry > .history-stamp,
.history-entry > .history-card {
    grid-row: 1;
}

.history-entry--left > .history-card { grid-column: 1; }
.history-entry--left > .history-stamp { grid-column: 2; justify-self: start; }
.history-entry--right > .history-stamp { grid-column: 1; justify-self: end; }
.history-entry--right > .history-card { grid-column: 2; }

.history-entry::before {
    content: "";
    position: absolute;
    top: 50%;
    width: calc(var(--history-gutter) / 2);
    height: 2px;
    margin-top: -1px;
    background: var(--tone);
    opacity: 0.5;
}

.history-entry--left::before { right: 50%; }
.history-entry--right::before { left: 50%; }

.history-entry::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.15rem;
    height: 1.15rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: var(--tone);
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px rgba(15, 23, 42, 0.08);
    z-index: 1;
}

.history-entry--current::before { opacity: 0.75; }
.history-entry--current::after {
    width: 1.45rem;
    height: 1.45rem;
    box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px color-mix(in srgb, var(--primary) 24%, transparent);
}

.history-stamp {
    font-family: "Sora", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tone-ink);
    white-space: nowrap;
}

.history-card {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-areas: "photo detail" "text detail";
    gap: 8px 15px;
    align-items: center;
    padding: 15px 17px 15px 18px;
    border: 1px solid var(--border);
    border-left: 5px solid var(--tone);
    border-radius: var(--radius-md);
    background: var(--tone-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.history-entry--current > .history-card {
    border-color: color-mix(in srgb, var(--primary) 26%, transparent);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 14%, transparent);
}

.history-photo {
    grid-area: photo;
    justify-self: center;
    width: 78px;
    height: 78px;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid var(--tone);
    background: var(--surface);
}

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

.history-photo--placeholder {
    background: color-mix(in srgb, var(--tone) 20%, var(--surface));
}

.history-text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    text-align: center;
}

.history-text h2 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.history-position {
    margin: 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
}

.history-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 6px 0 0;
}

.history-years {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tone-ink);
    white-space: nowrap;
}

.history-pill {
    display: inline-flex;
    margin: 0;
    padding: 3px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.history-pill--current {
    color: var(--primary-ink);
    background: var(--tone);
    border-color: transparent;
}

.history-pill--former {
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 75%, #fff);
}

.history-detail {
    grid-area: detail;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: -15px -17px -15px 0;
    padding: 15px 16px;
    border-left: 1px solid var(--border);
    border-radius: 0 11px 11px 0;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.history-teaser {
    margin: 0;
    color: var(--ink);
    font-size: 0.82rem;
    line-height: 1.5;
}

.history-more {
    color: var(--tone-ink);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.history-more:hover,
.history-more:focus-visible {
    color: var(--ink);
}

.history-photo-credit {
    font-size: 0.68rem;
    color: var(--muted);
    opacity: 0.75;
    margin: 0;
}

.history-empty {
    text-align: center;
    color: var(--muted);
    padding: 40px 0;
}

@media (max-width: 720px) {
    .history-list {
        --history-gutter: 3rem;
        padding: 6px 0;
    }

    .history-list::before { left: 9px; }

    .history-entry,
    .history-entry--left,
    .history-entry--right {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 35px;
    }

    .history-entry--left > .history-card,
    .history-entry--right > .history-card {
        grid-column: 1;
    }

    .history-stamp { display: none; }
    .history-entry::before { display: none; }
    .history-entry::after { left: 9px; }

    .history-photo { width: 68px; height: 68px; }

    .history-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "photo" "text" "detail";
    }

    .history-detail {
        justify-self: stretch;
        margin: 2px -17px -15px -18px;
        padding: 12px 17px;
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: 0 0 11px 11px;
    }
}

/* ---------- Minister profile modal (card popup) ---------- */
body.profile-modal-open { overflow: hidden; }

.profile-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.profile-modal[hidden] { display: none; }

.profile-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 8, 0.55);
    backdrop-filter: blur(2px);
}

.profile-modal__card {
    position: relative;
    z-index: 1;
    width: min(100%, 860px);
    max-height: min(86vh, 780px);
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -20px rgba(15, 12, 8, 0.45);
    padding: 32px 32px 28px;
    animation: profile-modal-in 0.18s ease;
}

@keyframes profile-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.profile-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.profile-modal__close:hover { color: var(--primary); border-color: var(--primary); }

.profile-modal__head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 32px 20px 0;
}

.profile-modal__head .history-photo {
    width: 84px;
    height: 84px;
}

.profile-modal__head h2 {
    margin: 0 0 2px;
    font-size: 1.3rem;
}

.profile-modal__head .history-when { justify-content: flex-start; }

.profile-modal__body {
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.65;
}

.profile-modal__body p { color: var(--ink); }
.profile-modal__body p:last-child { margin-bottom: 0; }

.profile-modal .history-photo-credit { margin-top: 14px; }

@media (max-width: 560px) {
    .profile-modal { padding: 12px; }
    .profile-modal__card { padding: 26px 20px 22px; max-height: 92vh; }
    .profile-modal__head { flex-direction: column; text-align: center; margin-right: 0; }
    .profile-modal__head .history-when { justify-content: center; }
}

/* ---------- Estrutura (org chart) ---------- */
.org-chart {
    overflow-x: auto;
    padding: 8px 0 40px;
}

.org-tree,
.org-tree ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.org-tree { min-width: max-content; margin: 0 auto; }

.org-node {
    --tone: var(--primary);
    --connector-gap: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
    position: relative;
}

/* Every node inside a nested <ul> (i.e. not the single Ministru root) gets
   empty space above its box — that's where the connector lines live. */
.org-tree ul > .org-node {
    padding-top: var(--connector-gap);
}

/* Vertical stub connecting a node up to the shared horizontal bar, and the
   bar itself — classic "T-connector" org chart technique. Positioned at
   top:0 of the node's own padding box, i.e. right at the top of that empty
   gap created by padding-top above (NOT at the box, which sits below it). */
.org-tree ul > .org-node::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: var(--connector-gap);
    border-left: 2px solid rgba(32, 24, 18, 0.28);
}

.org-tree ul > .org-node::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 2px solid rgba(32, 24, 18, 0.28);
}

.org-tree ul > .org-node:first-child::after { left: 50%; }
.org-tree ul > .org-node:last-child::after { right: 50%; }

.org-tree ul > .org-node:only-child::before,
.org-tree ul > .org-node:only-child::after {
    display: none;
}

.org-tree ul > .org-node:only-child { padding-top: 0; }

/* Branch color rotation — set once on each direct child of the Minister;
   every descendant box inherits --tone automatically (CSS custom
   properties cascade), so a whole branch reads as one color family. */
.org-node--minister > ul > .org-node:nth-child(6n+1) { --tone: #a4272c; }
.org-node--minister > ul > .org-node:nth-child(6n+2) { --tone: #c9972e; }
.org-node--minister > ul > .org-node:nth-child(6n+3) { --tone: #5c7a3f; }
.org-node--minister > ul > .org-node:nth-child(6n+4) { --tone: #2f7a78; }
.org-node--minister > ul > .org-node:nth-child(6n+5) { --tone: #8a3b6b; }
.org-node--minister > ul > .org-node:nth-child(6n+6) { --tone: #5c1116; }

.org-node__box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tone);
    color: #fff;
    padding: 8px 10px 8px 8px;
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    width: 172px;
    text-align: left;
}

/* Explicit stub from a box straight down into its children's connector
   gap — belt-and-suspenders alongside the children's own upward stub so
   the line always reads as unbroken, regardless of box-shadow softening
   the boundary between a box and the bar right below it. */
.org-node__box:has(+ ul)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: var(--connector-gap);
    border-left: 2px solid rgba(32, 24, 18, 0.28);
}

.org-node--minister > .org-node__box {
    width: auto;
    background: var(--primary);
    padding: 14px 28px;
    border-radius: 10px;
    box-shadow: var(--shadow-lift);
    justify-content: center;
}

.org-node--minister > .org-node__box .org-node__name {
    font-size: 1rem;
    font-weight: 700;
}

.org-node__photo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.22);
}

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

.org-node__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.org-node__name {
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.25;
    color: #fff;
}

.org-node__abbr {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* Branches (nodes with children) are collapsed by default — see
   org_node.html / the fitOrgChart script — so only Ministru + the 9
   top-level units show up-front, no horizontal scrolling required. */
.org-node__box[data-org-toggle] {
    cursor: pointer;
    user-select: none;
}

.org-node__box[data-org-toggle]:hover,
.org-node__box[data-org-toggle]:focus-visible {
    filter: brightness(1.1);
    outline: none;
}

.org-node__caret {
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid rgba(255, 255, 255, 0.85);
    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.org-node--collapsed > .org-node__box .org-node__caret {
    transform: rotate(-45deg);
}

.org-node--collapsed > ul,
.org-node--collapsed > .org-node__box:has(+ ul)::after {
    display: none;
}

/* Below ~900px a horizontal T-connector tree stops being usable (too wide
   to scan even with horizontal scroll) — fall back to a simple indented
   list: connectors off, vertical nesting via border-left instead. */
@media (max-width: 900px) {
    .org-chart { overflow-x: visible; }

    .org-tree,
    .org-tree ul {
        display: block;
        min-width: 0;
    }

    .org-tree ul {
        padding: 10px 0 0 20px;
        margin-top: 10px;
        border-left: 2px solid var(--border);
    }

    .org-node {
        width: 100%;
        max-width: 100%;
        padding: 6px 0;
        align-items: flex-start;
    }

    .org-tree ul > .org-node::before,
    .org-tree ul > .org-node::after,
    .org-node__box:has(+ ul)::after {
        display: none;
    }

    .org-node__box {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        box-sizing: border-box;
    }

    .org-node__text { min-width: 0; }
}

/* ---------- Footer ---------- */
/* .site-footer {
    border-top: 1px solid var(--border);
    padding: 56px 0 32px;
} */

.site-footer {
    border-top: 1px solid #ef1e20;
    padding: 80px 0 40px;
    background-color: #221c16;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 48px;
}

.footer-col--wide { grid-column: span 2; }

.footer-col .eyebrow { margin-bottom: 20px; }

.footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-list--links a {
    transition: color 0.15s ease;
}

.footer-list--links a:hover {
    color: #ff5a5e;
}

.footer-list li {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 700;
}

/* Footer-only override — .eyebrow is a shared badge class used elsewhere
   on the site (page headers, cards) with its default themed color, so this
   is scoped to .footer-grid instead of changing .eyebrow itself. */
.footer-grid .eyebrow {
    color: #ffffff;
    font-weight: 700;
}

.footer-map,
.footer-visitors {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Spacing for the Kontaktu block stacked below the flag counter in the
   same footer column. */
.footer-visitors + .eyebrow {
    margin-top: 20px;
}

.footer-map {
    aspect-ratio: 4 / 3;
}

.footer-visitors img {
    max-width: 100%;
    height: auto;
    display: block;
}

.footer-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.footer-icon-link:hover {
    background: var(--primary);
    color: var(--primary-ink);
    transform: translateY(-2px);
}

.footer-map iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.footer-map--placeholder,
.footer-visitors--placeholder {
    aspect-ratio: 4 / 3;
    background: var(--surface);
    border: 1px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
}

.footer-visitors--placeholder { aspect-ratio: auto; min-height: 90px; }

.footer-map--placeholder p,
.footer-visitors--placeholder p {
    font-size: 0.8rem;
    margin: 0;
}

/* Its own section now (was nested inside .site-footer) so the background
   can be changed independently from the rest of the footer above it. */
.footer-bottom-section {
    background-color: #52504f;
    border-top: 1px solid var(--border);
    padding: 32px 0;
}

.footer-bottom {
    padding-top: 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-brand {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.footer-brand p {
    margin: 0;
    font-size: 0.88rem;
}

.footer-brand-copyright,
.footer-brand-hosted {
    color: #e19b06;
    font-weight: 500;
    line-height: 1.6;
}

.footer-brand-org {
    color: #ff5a5e;
    font-weight: 600;
}

.footer-brand-org:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-meta { text-align: right; }
.footer-meta p { margin: 0 0 4px; font-size: 0.85rem; }
.footer-meta a { text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; }
.footer-meta a:hover { color: var(--primary); }

.footer-credits-trigger {
    font: inherit;
    font-size: 0.85rem;
    color: #ff5a5e;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
}

.footer-credits-trigger:hover,
.footer-credits-trigger:focus-visible {
    color: #ffffff;
}

.footer-version {
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    /* Fixed (not var(--muted)) — the footer background is a hardcoded dark
       color regardless of light/dark mode, but --muted's light-mode value
       is a dark brown meant for light backgrounds, so it barely contrasts
       here. This stays legible in both modes since the footer never changes. */
    color: #b7a898;
}

/* ---------- Responsive ---------- */
/* Tablet / small-laptop tier for Lideransa, Notísia, Servisu — previously
   these jumped straight from the 3-column desktop layout to the 1-column
   mobile layout at 860px, with nothing in between for iPad-ish/small-laptop
   widths (~768-1024px). */
@media (max-width: 1024px) {
    .leaders-grid { gap: 48px; }

    .notisia-modern-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .notisia-modern-card--featured { grid-column: span 2; grid-row: span 1; }

    .quote-banner { grid-template-columns: minmax(220px, 300px) 1fr; }
    .quote-banner-media { min-height: 280px; }
}

@media (max-width: 860px) {
    .bento { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .site-footer { padding: 56px 0 32px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .footer-bottom { margin-top: 40px; padding-top: 24px; }
    .footer-inner { flex-direction: column; }
    .footer-meta { text-align: left; }

    /* Notísia/Servisu's own collapse-to-1-column point is 640px (below),
       not here — 768-860px covers iPad Mini/standard/Air/Pro-11 portrait
       widths, which have plenty of room for the 2-column tablet layout set
       in the 1024px tier above, so they shouldn't fall all the way back to
       the single-column phone layout too. */

    .partner-marquee-track { gap: 40px; }
    .partner-logo-item { height: 76px; }
}

@media (max-width: 720px) {
    .main-nav {
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: var(--header-gold);
        border-bottom: 1px solid rgba(33, 23, 3, 0.18);
        flex-direction: column;
        gap: 0;
        padding: 8px 24px 16px;
        display: none;
    }

    .main-nav.is-open { display: flex; }
    .main-nav a { display: block; width: 100%; text-align: left; padding: 12px 0; border-radius: 0; background: none; border-bottom: 1px solid rgba(33, 23, 3, 0.12); }
    .main-nav a:last-child { border-bottom: none; }
    .nav-toggle { display: flex; }
    .hero { padding: 88px 0 64px; }

    .nav-dropdown {
        width: 100%;
    }

    .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
        padding: 12px 0;
        border-radius: 0;
        background: none;
        border-bottom: 1px solid rgba(33, 23, 3, 0.12);
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0 16px;
        transition: max-height 0.2s ease;
    }

    .nav-dropdown.is-open .nav-dropdown-menu {
        max-height: 200px;
        transform: none;
    }

    .nav-dropdown-menu a {
        padding: 10px 0;
        border-bottom: 1px solid rgba(33, 23, 3, 0.1);
    }

    .nav-dropdown-menu a:last-child { border-bottom: none; }

    .nav-dropdown-menu a:hover {
        background: none;
        color: var(--header-ink);
    }

    .nav-search-form {
        right: -8px;
    }

    .footer-grid { grid-template-columns: 1fr; }
    .footer-col--wide { grid-column: span 1; }
}

/* Phone tier for Notísia/Servisu — placed after the 1024px tablet block
   above so it correctly wins the cascade at narrow widths (source order
   matters here since both media conditions match at ≤640px). */
@media (max-width: 640px) {
    .notisia-modern-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .notisia-modern-card,
    .notisia-modern-card--featured { grid-column: span 1; grid-row: span 1; aspect-ratio: 16 / 10; }
    .notisia-modern-card--featured .notisia-modern-body { padding: 20px; }
    .notisia-modern-card--featured .notisia-modern-body h3 { font-size: 1.2rem; }

    .quote-banner { grid-template-columns: 1fr; }
    .quote-banner-media { min-height: 260px; }
    .quote-banner-body { padding: 32px; }
    .quote-banner-mark { font-size: 3.4rem; }
    .quote-banner-text { font-size: 1.1rem; }
}

/* Large-laptop tier — #notisia/#servisu's .wrap is fluid (edge-to-edge,
   see .wrap--fluid) so on wide screens (1440-1920px+) these two grids kept
   stretching with it: Notísia's cards got increasingly letterboxed (fixed
   220px row height against an ever-wider column — up to ~2.8:1 at 1920px),
   and the quote's text column grew past 1300px, well beyond a comfortable
   reading line length (~600-750px). Re-centering just these two content
   blocks at a generous-but-bounded width fixes both without undoing the
   fluid section itself, which still spans full width around them. */
@media (min-width: 1400px) {
    .notisia-modern-grid,
    .quote-banner {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
    }
}