/* Editorial black-and-white theme for the article index. Loaded after the page's own styles. */
:root {
    --bg: #fff;
    --panel: #fff;
    --panel-strong: #fff;
    --line: rgba(0, 0, 0, .14);
    --text: #000;
    --muted: rgba(0, 0, 0, .62);
    --accent: #000;
    --accent-2: #000;
    --accent-soft: rgba(0, 0, 0, .05);
    --chip: #fff;
    --shadow: none;
    --radius: 0px;
}

body {
    background: #fff;
    color: #000;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #000;
    color: #fff;
}

.panel,
.mini-panel,
.control-panel,
.sidebar-panel,
.article-card,
.featured-card,
.spotlight-item,
.metric,
.theme-chip,
.hero-highlight,
.stat-chip,
input,
select,
.select-trigger,
.select-menu,
.mobile-menu-toggle {
    border-radius: 0;
    box-shadow: none;
}

/* Masthead */
.hero-panel {
    background: #000;
    color: #fff;
    border: 0;
    border-bottom: 3px solid #000;
}

.hero-panel .eyebrow,
.hero-panel .title,
.hero-panel .sub,
.hero-panel .hero-highlight span,
.hero-panel .hero-highlight strong,
.hero-panel .hero-highlight small,
.hero-panel .stat-chip {
    color: #fff;
}

.hero-panel .sub,
.hero-panel .hero-highlight small {
    color: rgba(255, 255, 255, .78);
}

.eyebrow {
    letter-spacing: .18em;
    font-weight: 700;
}

.eyebrow::before {
    background: #fff;
}

.title {
    font-weight: 800;
    letter-spacing: -.015em;
}

.hero-panel .hero-highlight,
.hero-panel .stat-chip {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
}

.hero-panel .hero-highlight:hover {
    background: #fff;
    border-color: #fff;
}

.hero-panel .hero-highlight:hover span,
.hero-panel .hero-highlight:hover strong,
.hero-panel .hero-highlight:hover small {
    color: #000;
}

.hero-btn,
.hero-btn-primary,
.hero-btn-secondary {
    border-radius: 0;
    box-shadow: none;
    transform: none;
    letter-spacing: .04em;
}

.hero-panel .hero-btn-primary {
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

.hero-panel .hero-btn-secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .7);
}

.hero-panel .hero-btn-primary:hover {
    background: #000;
    color: #fff;
    border-color: #fff;
}

.hero-panel .hero-btn-secondary:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.hero-panel .mobile-menu-toggle {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.hero-panel .mobile-menu-toggle-icon span {
    background: #fff;
}

/* Sidebar inside the masthead */
.hero-panel .sidebar-panel,
.hero-panel .control-panel {
    background: #fff;
    color: #000;
}

/* Controls */
input,
select,
.select-trigger,
.select-menu,
.select-option {
    background: #fff;
    border-color: #000;
    color: #000;
}

.select-trigger::after {
    border-color: #000;
}

.select-option:hover,
.select-option.is-selected {
    background: #000;
    color: #fff;
}

.custom-select.open .select-trigger,
select:focus,
input:focus {
    border-color: #000;
    box-shadow: 0 0 0 2px #000;
    outline: none;
}

/* Section headings */
.block-head,
.group-section {
    border-color: #000;
}

.group-section + .group-section {
    border-top: 2px solid #000;
}

/* Theme filter chips */
.theme-chip {
    background: #fff;
    border: 1px solid #000;
    color: #000;
}

.theme-chip:hover {
    background: #fff;
    border-color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.theme-chip.active {
    background: #000;
    border-color: #000;
    color: #fff;
}

.theme-chip.active strong,
.theme-chip.active span {
    color: #fff;
}

/* Cards */
.article-card,
.featured-card,
.spotlight-item,
.metric {
    background: #fff;
    border-color: var(--line);
}

.article-card:hover,
.featured-card:hover,
.spotlight-item:hover {
    transform: none;
    box-shadow: none;
    border-color: #000;
    background: #fff;
}

.article-card:hover .card-title,
.featured-card:hover .card-title,
.spotlight-item:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.media,
.media img {
    border-radius: 0;
}

.media img {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.article-card:hover .media img,
.featured-card:hover .media img {
    transform: scale(1.04);
}

.card-title,
.metric strong,
.spotlight-item strong {
    color: #000;
}

.card-summary,
.card-file,
.metric span,
.spotlight-item span {
    color: var(--muted);
}

.thumb {
    background: #000;
    border-color: #000;
    color: #fff;
    border-radius: 0;
}

.meta,
.lang-pill,
.topic-pill {
    background: #fff;
    border-color: #000;
    color: #000;
    border-radius: 0;
}

.empty-state {
    border-color: #000;
    background: #fff;
    border-radius: 0;
}

footer {
    color: var(--muted);
    border-top: 1px solid #000;
}

@media (max-width: 700px) {
    .hero-panel {
        background: #000;
    }
}

/* Remaining blue-tinted text and placeholders */
.theme-chip span,
.theme-chip strong,
.field label,
.block-head p,
.card-file,
.metric span,
.select-trigger span {
    color: #000;
}

.theme-chip span,
.field label,
.card-file,
.metric span {
    opacity: .66;
}

.theme-chip.active span {
    color: #fff;
    opacity: .8;
}

.media,
.featured-card .media,
.article-card .media {
    background: #fafafa;
}

.select-trigger::after {
    border-right-color: #000;
    border-bottom-color: #000;
}