/*
Theme Name: CCNN
Theme URI: https://ccnn.news
Author: Cook County News Network
Author URI: https://ccnn.news
Description: Custom theme for CCNN, Cook County News Network. A single centered column news feed built from the approved CCNN design tokens: navy masthead, pale yellow active nav container, story cards with fact chips.
Version: 0.9.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccnn
Tags: news, one-column, custom-menu, featured-images
*/

/* ------------------------------------------------------------------
   Fonts (bundled, from the CCNN art direction set)
------------------------------------------------------------------- */
@font-face {
  font-family: "Anton";
  src: url("assets/fonts/Anton.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/InterTight.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Design tokens
------------------------------------------------------------------- */
:root {
  --ccnn-navy: #0d2b45;
  --ccnn-navy-dark: #06182b;
  --ccnn-ink: #16232e;
  --ccnn-ink-soft: #43525e;
  --ccnn-paper: #f7f6f2;
  --ccnn-card: #ffffff;
  --ccnn-line: #ddd9cf;
  --ccnn-active: #fff6d3;
  --ccnn-column: 864px;

  --ccnn-chip-bg: #eef0ee;
  --ccnn-chip-line: #9aa5a0;
  --ccnn-chip-ink: #33413c;

  --ccnn-chip-outcome-bg: #e2f0ee;
  --ccnn-chip-outcome-line: #0e6b6b;
  --ccnn-chip-outcome-ink: #0a4f4f;

  --ccnn-chip-money-bg: #fdf3d3;
  --ccnn-chip-money-line: #d9a81c;
  --ccnn-chip-money-ink: #6f5500;

  --ccnn-chip-video-bg: #e4e9fb;
  --ccnn-chip-video-line: #0028dc;
  --ccnn-chip-video-ink: #0028dc;

  --ccnn-font-display: "Anton", "Arial Narrow", sans-serif;
  --ccnn-font-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --ccnn-font-alt: "Space Grotesk", "Inter Tight", sans-serif;
  --ccnn-font-mono: "Space Mono", "Courier New", monospace;
  --ccnn-font-quote: "Instrument Serif", Georgia, serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ccnn-paper);
  color: var(--ccnn-ink);
  font-family: var(--ccnn-font-body);
  font-size: 17px;
  line-height: 1.55;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ccnn-navy);
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  white-space: normal;
}

/* Single centered column at every screen size. No side columns. */
.ccnn-column {
  max-width: var(--ccnn-column);
  margin: 0 auto;
  padding: 0 16px;
}

/* ------------------------------------------------------------------
   Masthead
------------------------------------------------------------------- */
.site-header {
  background: var(--ccnn-navy);
  color: #ffffff;
  padding: 20px 0 0;
}

.site-branding {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 14px;
}

.site-wordmark {
  font-family: var(--ccnn-font-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: #ffffff;
  text-decoration: none;
}

.site-name-full {
  font-family: var(--ccnn-font-alt);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
}

/* ------------------------------------------------------------------
   Primary navigation
------------------------------------------------------------------- */
.primary-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  list-style: none;
  margin: 0;
  padding: 8px 0 10px;
}

.primary-nav li {
  margin: 0;
}

.primary-nav a {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 6px;
  color: #ffffff;
  font-family: var(--ccnn-font-alt);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a:focus {
  background: rgba(255, 255, 255, 0.14);
}

/* Active item sits in a pale yellow container. */
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a {
  background: var(--ccnn-active);
  color: var(--ccnn-navy);
  font-weight: 700;
}

.primary-nav .current-menu-item > a:hover,
.primary-nav .current_page_item > a:hover {
  background: var(--ccnn-active);
}

/* ------------------------------------------------------------------
   Feed and story cards
------------------------------------------------------------------- */
.site-main {
  padding: 22px 0 34px;
}

.feed-heading {
  font-family: var(--ccnn-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ccnn-ink-soft);
  margin: 0 0 14px;
}

.story-card {
  display: flex;
  gap: 16px;
  background: var(--ccnn-card);
  border: 1px solid var(--ccnn-line);
  border-radius: 10px;
  padding: 14px;
  margin: 0 0 14px;
}

.story-card-thumb {
  flex: 0 0 128px;
}

.story-card-thumb img {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 6px;
}

.story-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.story-card-title {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.22;
  margin: 0 0 6px;
}

.story-card-title a {
  color: var(--ccnn-ink);
  text-decoration: none;
}

.story-card-title a:hover,
.story-card-title a:focus {
  text-decoration: underline;
}

.story-card-summary {
  margin: 0;
  color: var(--ccnn-ink-soft);
  font-size: 15.5px;
}

.story-card-summary p {
  margin: 0;
}

/* ------------------------------------------------------------------
   Fact chips: one shared container style, a colorway per fact kind.
   The outcome chip is the template; money is gold.
------------------------------------------------------------------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--ccnn-chip-line);
  border-radius: 5px;
  background: var(--ccnn-chip-bg);
  color: var(--ccnn-chip-ink);
  font-family: var(--ccnn-font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
}

.chip-outcome {
  background: var(--ccnn-chip-outcome-bg);
  border-color: var(--ccnn-chip-outcome-line);
  color: var(--ccnn-chip-outcome-ink);
}

.chip-money {
  background: var(--ccnn-chip-money-bg);
  border-color: var(--ccnn-chip-money-line);
  color: var(--ccnn-chip-money-ink);
}

.chip-video {
  background: var(--ccnn-chip-video-bg);
  border-color: var(--ccnn-chip-video-line);
  color: var(--ccnn-chip-video-ink);
}

a.chip:hover,
a.chip:focus {
  text-decoration: underline;
}

/* Body and meeting date line, shared by cards and story pages. */
.story-meta {
  font-family: var(--ccnn-font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ccnn-ink-soft);
  margin: 0 0 6px;
}

.story-card .story-meta {
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------
   Single story page
------------------------------------------------------------------- */
.story-single {
  background: var(--ccnn-card);
  border: 1px solid var(--ccnn-line);
  border-radius: 10px;
  padding: 22px;
}

.story-headline {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 8px;
}

.story-single .chip-row {
  margin: 10px 0 4px;
}

.story-thumb {
  margin: 14px 0 4px;
}

.story-thumb img {
  display: block;
  border-radius: 6px;
}

.story-body {
  font-size: 18px;
  margin-top: 12px;
}

.story-body p {
  margin: 0 0 14px;
}

.story-section-heading {
  font-family: var(--ccnn-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ccnn-ink-soft);
  margin: 22px 0 8px;
}

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

.vote-item {
  padding: 6px 0;
  border-top: 1px solid var(--ccnn-line);
}

.vote-name {
  font-weight: 700;
}

.vote-position {
  font-family: var(--ccnn-font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ccnn-ink-soft);
}

.vote-note {
  color: var(--ccnn-ink-soft);
  font-size: 14.5px;
}

.source-line {
  margin: 22px 0 0;
  font-size: 14.5px;
  color: var(--ccnn-ink-soft);
}

.correction-line {
  margin: 14px 0 0;
}

.correction-link {
  display: inline-block;
  padding: 6px 13px;
  border: 1px solid var(--ccnn-line);
  border-radius: 6px;
  background: var(--ccnn-card);
  font-family: var(--ccnn-font-mono);
  font-size: 13.5px;
  text-decoration: none;
}

.correction-link:hover,
.correction-link:focus {
  background: var(--ccnn-active);
  color: var(--ccnn-navy);
}

/* ------------------------------------------------------------------
   Board pages (v0.3)
------------------------------------------------------------------- */
.board-single {
  background: var(--ccnn-card);
  border: 1px solid var(--ccnn-line);
  border-radius: 10px;
  padding: 22px;
}

.board-description {
  font-size: 18px;
  margin: 10px 0 6px;
}

.board-facts {
  color: var(--ccnn-ink-soft);
  font-size: 15px;
  margin: 0 0 8px;
}

.board-spending {
  margin: 10px 0;
}

.board-law {
  margin: 12px 0;
}

.board-law-line {
  margin: 2px 0;
  font-size: 14.5px;
}

.board-official {
  font-size: 14.5px;
  color: var(--ccnn-ink-soft);
  overflow-wrap: anywhere;
}

.member-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--ccnn-line);
}

.person-circle {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0e6b6b;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ccnn-font-alt);
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}

.person-circle-staff {
  background: #d9a81c;
  color: #16232e;
}

.person-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.member-text {
  min-width: 0;
}

.member-line1 {
  margin: 0;
}

.member-name {
  font-weight: 700;
}

.member-seat {
  color: var(--ccnn-ink-soft);
}

.member-line2 {
  margin: 2px 0 0;
  color: var(--ccnn-ink-soft);
  font-size: 14.5px;
  line-height: 1.45;
}

.chip-role {
  font-size: 11px;
  padding: 1px 7px;
  vertical-align: 1px;
}

.member-email {
  font-size: 19px;
  line-height: 36px;
  text-decoration: none;
  color: var(--ccnn-ink-soft);
}

.board-card-count {
  margin: 6px 0 0;
  color: var(--ccnn-ink-soft);
  font-size: 14.5px;
}

.board-card .board-spending {
  margin-bottom: 0;
}

.decision-line {
  margin: 0;
  padding: 7px 0;
  border-top: 1px solid var(--ccnn-line);
}

.decision-date {
  font-family: var(--ccnn-font-mono);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ccnn-ink-soft);
  margin-right: 8px;
}

.decision-line .chip {
  margin-left: 8px;
}

/* ------------------------------------------------------------------
   Pagination
------------------------------------------------------------------- */
.pagination {
  margin-top: 22px;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pagination .page-numbers {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid var(--ccnn-line);
  border-radius: 6px;
  background: var(--ccnn-card);
  font-family: var(--ccnn-font-mono);
  font-size: 13.5px;
  text-decoration: none;
}

.pagination .page-numbers.current {
  background: var(--ccnn-active);
  color: var(--ccnn-navy);
  font-weight: 700;
}

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--ccnn-line);
  padding: 20px 0 30px;
  color: var(--ccnn-ink-soft);
  font-size: 14.5px;
}

.site-footer .footer-name {
  font-family: var(--ccnn-font-alt);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ccnn-ink);
}

.site-footer p {
  margin: 4px 0;
}

/* ------------------------------------------------------------------
   Small screens: same single column, cards stack the thumbnail up.
------------------------------------------------------------------- */
@media (max-width: 560px) {
  .site-wordmark {
    font-size: 36px;
  }

  .story-card {
    flex-direction: column;
  }

  .story-card-thumb {
    flex: none;
  }

  .story-card-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ------------------------------------------------------------------
   Dark mode: masthead goes darker navy, letters stay white,
   active nav container warms up.
------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ccnn-paper: #0c141c;
    --ccnn-card: #14202c;
    --ccnn-ink: #eef3f6;
    --ccnn-ink-soft: #b6c2cc;
    --ccnn-line: #2b3d4d;
    --ccnn-active: #ffedb0;
  }

  .site-header {
    background: var(--ccnn-navy-dark);
  }

  a {
    color: #9fc3e8;
  }

  .primary-nav .current-menu-item > a,
  .primary-nav .current_page_item > a,
  .pagination .page-numbers.current {
    color: var(--ccnn-navy-dark);
  }
}

/* Budgets (v0.4) */
.ccnn-pie-wrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:12px 0 20px}
.ccnn-pie{flex:0 0 auto}
.ccnn-pie-list{list-style:none;margin:0;padding:0;flex:1 1 300px}
.ccnn-pie-list li{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid #ddd}
.ccnn-swatch{width:12px;height:12px;border-radius:2px;flex:0 0 auto;position:relative;top:1px}
.ccnn-pie-label{flex:1 1 auto}
.ccnn-pie-amt{font-variant-numeric:tabular-nums;font-weight:600}
.ccnn-pie-share{color:#666;min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.ccnn-pie-list li.ccnn-pie-total{font-weight:700;border-top:2px solid #333;border-bottom:none}
.ccnn-budget-group h3{margin:18px 0 4px}
.ccnn-budget-statement{font-size:1.05em}

/* Calendar and Projects (v0.5) */
.cal-entry{display:flex;gap:14px;padding:8px 0;border-bottom:1px solid #ddd}
.cal-when{flex:0 0 108px;font-weight:600;font-variant-numeric:tabular-nums}
.cal-body{font-weight:700}
.cal-type{color:#444}
.cal-time{color:#444}
.cal-badge{display:inline-block;font-size:.78em;font-weight:600;padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:1px}
.cal-confirmed{background:#dff2ee;color:#0c5a4a}
.cal-schedule{background:#eceff1;color:#546e7a}
.cal-note{color:#666;font-size:.92em;margin-top:2px}
.project-card{border:1px solid #ddd;border-radius:8px;padding:14px 16px;margin:12px 0}
.project-name{margin:0 0 2px}
.project-owner{color:#666;margin:0 0 8px;font-size:.95em}
.project-scope{margin:6px 0}
.project-field{margin:4px 0}
.project-sub{margin:20px 0 4px}

/* Person records (v0.6) */
.person-head{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.person-head .person-circle{width:72px;height:72px;font-size:26px}
.person-email{font-size:22px;text-decoration:none;margin-left:8px}
.person-body{margin:22px 0}
.person-body-line{color:#444;margin:2px 0}
.person-decisions{list-style:none;margin:8px 0;padding:0}
.person-decisions li{padding:6px 0;border-bottom:1px solid #eee}
.decision-date{font-weight:600;font-variant-numeric:tabular-nums;margin-right:6px}
.decision-outcome{color:#666}
.decision-note{color:#666;font-size:.92em}
.chip.pos-aye{background:#dff2ee;color:#0c5a4a}
.chip.pos-nay{background:#eceff1;color:#37474f}
.chip.pos-abstain{background:#fff6d3;color:#6d5c00}
.chip.pos-absent{background:#f1f1f1;color:#666}
.people-list{list-style:none;padding:0}
.people-list li{padding:6px 0;border-bottom:1px solid #eee}
.people-bodies{color:#666;font-size:.92em}

/* ------------------------------------------------------------------
   v0.7.0: match the original site's format (Patrick's check-off list)
   Serif masthead title and story type, pill navigation, open cards,
   member circles, sentence case chips, top story feature, Subscribe.
   ------------------------------------------------------------------ */

.site-title-serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 36px;
  line-height: 1.05;
  color: #ffffff;
  text-decoration: none;
}

.site-branding {
  align-items: center;
}

.ccnn-subscribe-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #d9a81c;
  color: #231a05;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--ccnn-font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ccnn-subscribe-btn:hover,
.ccnn-subscribe-btn:focus {
  background: #e7ba2e;
}

.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.primary-nav li a {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  text-decoration: none;
}

.primary-nav li a:hover,
.primary-nav li a:focus {
  background: rgba(255, 255, 255, 0.2);
}

.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
  background: var(--ccnn-active);
  border-color: var(--ccnn-active);
  color: var(--ccnn-navy);
}

.story-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ccnn-line);
  border-radius: 0;
  padding: 22px 0;
  margin: 0;
}

.story-card-title,
.story-feature-title,
.story-headline {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
}

.story-card-title {
  font-size: 24px;
  line-height: 1.18;
}

.story-card-summary {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ccnn-ink);
}

.chip {
  text-transform: none;
  letter-spacing: 0.01em;
}

.story-meta-body {
  color: #4fc4bc;
}

.story-circles {
  display: none;
}

@media (min-width: 900px) {
  .story-circles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 2px;
  }
}

.member-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0e6b6b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  flex: 0 0 36px;
}

.member-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.circle-initials {
  color: #ffffff;
  font-family: var(--ccnn-font-body);
  font-size: 12px;
  font-weight: 700;
}

.story-full-record {
  margin: 8px 0 0;
  font-size: 14px;
}

.story-feature {
  border-bottom: 1px solid var(--ccnn-line);
  padding: 22px 0;
}

.top-story-tag {
  display: inline-block;
  background: #d9a81c;
  color: #231a05;
  font-family: var(--ccnn-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin: 0 0 12px;
}

.story-feature-thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 16px;
}

.story-feature-title {
  font-size: 36px;
  line-height: 1.12;
  margin: 0 0 6px;
}

.story-feature-title a {
  color: var(--ccnn-ink);
  text-decoration: none;
}

.ccnn-subscribe-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 12, 20, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 1000;
}

.ccnn-subscribe-overlay[hidden] {
  display: none;
}

.ccnn-subscribe-panel {
  position: relative;
  background: var(--ccnn-card);
  color: var(--ccnn-ink);
  border: 1px solid var(--ccnn-line);
  border-radius: 12px;
  padding: 26px 24px;
  max-width: 430px;
  width: 100%;
}

.ccnn-subscribe-panel h2 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  margin: 0 0 8px;
}

.ccnn-subscribe-text {
  color: var(--ccnn-ink-soft);
  margin: 0 0 16px;
}

.ccnn-subscribe-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: 0;
  color: var(--ccnn-ink-soft);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.ccnn-subscribe-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ccnn-subscribe-panel input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--ccnn-line);
  border-radius: 8px;
  background: var(--ccnn-paper);
  color: var(--ccnn-ink);
  font-size: 16px;
  margin-bottom: 12px;
}

.ccnn-subscribe-notify {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  margin-bottom: 16px;
}

.ccnn-subscribe-submit {
  background: #d9a81c;
  color: #231a05;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.ccnn-subscribe-msg {
  margin: 12px 0 0;
  font-size: 14.5px;
}

/* ------------------------------------------------------------------
   v0.7.1: exact font match with the original site.
   The original loads one webfont, Source Serif 4 (400, 600, 700,
   900), and uses it ONLY for the masthead title, page headings,
   story headlines, and avatar initials, at the sizes and weights
   below. Everything else is the plain default sans stack. There is
   no monospace and no condensed face anywhere in the original.
   ------------------------------------------------------------------ */

:root {
  --ccnn-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ccnn-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ccnn-font-mono: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.site-title-serif {
  font-family: var(--ccnn-font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .site-title-serif {
    font-size: 30px;
  }
}

.site-main h1,
.feed-heading {
  font-family: var(--ccnn-font-display);
  font-weight: 900;
}

.feed-heading {
  font-size: 30px;
}

.story-feature-title {
  font-family: var(--ccnn-font-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.25;
}

@media (min-width: 640px) {
  .story-feature-title {
    font-size: 36px;
  }
}

.story-card-title {
  font-family: var(--ccnn-font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.375;
}

.story-headline {
  font-family: var(--ccnn-font-display);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.25;
}

.story-card-summary {
  font-family: var(--ccnn-font-body);
  font-size: 14px;
  line-height: 1.625;
  color: var(--ccnn-ink);
}

.story-feature .story-card-summary {
  font-size: 16px;
}

.chip {
  font-size: 14px;
  font-weight: 700;
  padding: 4px 8px;
}

.story-meta {
  font-size: 12px;
  letter-spacing: 0.025em;
}

.story-meta-body {
  font-weight: 600;
  text-transform: none;
}

.circle-initials,
.person-circle {
  font-family: var(--ccnn-font-display);
  font-weight: 700;
}

.top-story-tag {
  font-family: var(--ccnn-font-body);
  font-weight: 900;
}

.ccnn-subscribe-panel h2 {
  font-family: var(--ccnn-font-display);
}

/* ------------------------------------------------------------------
   v0.8.0 exact-match pass: section pages matched to the artifact.
   Tokens: column 864px, background #f7f4ec, surface #fffdf7,
   border #ddd5c2, radius 10px, gold #a07d14, teal #1f7a6d.
------------------------------------------------------------------- */
:root {
  --ccnn-paper: #f7f4ec;
  --ccnn-surface: #fffdf7;
  --ccnn-border: #ddd5c2;
  --ccnn-gold: #a07d14;
  --ccnn-teal: #1f7a6d;
}

.page-heading {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  margin: 18px 0 8px;
}

.page-intro {
  font-size: 14px;
  color: var(--ccnn-ink-soft);
  line-height: 1.55;
  margin: 6px 0 14px;
}

.back-link {
  font-size: 14px;
  margin: 14px 0 0;
}

.back-link a {
  color: var(--ccnn-teal);
  font-weight: 600;
  text-decoration: none;
}

.empty-note {
  font-size: 14px;
  color: var(--ccnn-ink-soft);
}

/* Language toggle */
.ccnn-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.ccnn-lang-btn {
  background: none;
  border: 0;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  opacity: 0.75;
}

.ccnn-lang-btn.is-active {
  opacity: 1;
  text-decoration: underline;
}

.ccnn-lang-sep {
  color: rgba(255, 255, 255, 0.5);
}

/* Boards landing */
.boards-count {
  font-size: 14px;
  color: var(--ccnn-ink-soft);
  margin: 0 0 4px;
}

@media (max-width: 639px) {
  .boards-intro {
    display: none;
  }
}

.boards-search {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
}

.board-acc {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  margin: 10px 0;
}

.board-acc-head {
  display: block;
  cursor: pointer;
  padding: 12px 14px;
  list-style: none;
}

.board-acc-head::-webkit-details-marker {
  display: none;
}

.board-acc-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.board-acc-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
}

.board-acc-chevron {
  font-size: 22px;
  color: var(--ccnn-teal);
  transition: transform 0.15s ease;
}

.board-acc[open ] .board-acc-chevron {
  transform: rotate(90deg);
}

.board-acc-line2 {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.025em;
}

.board-acc-juris {
  color: var(--ccnn-teal);
  font-weight: 600;
  text-transform: uppercase;
}

.board-acc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ccnn-ink-soft);
}

.chip-money-solid {
  background: var(--ccnn-gold);
  border-color: var(--ccnn-gold);
  color: #ffffff;
}

.board-page-link {
  color: var(--ccnn-teal);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.board-acc-panel {
  border-top: 1px solid var(--ccnn-border);
  padding: 12px 14px;
}

.board-acc-subhead {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 8px 0;
}

/* Member containers (board detail and landing) */
.member-list {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  overflow: hidden;
}

.member-list .member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.member-list .member-row + .member-row {
  border-top: 1px solid var(--ccnn-border);
}

.member-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700;
}

.member-term {
  color: var(--ccnn-teal);
  font-weight: 600;
}

.chip-role2,
.chip-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: #fdf3d3;
  border: 1px solid var(--ccnn-gold);
  color: var(--ccnn-gold);
  padding: 1px 6px;
}

.chip-spend {
  background: var(--ccnn-gold);
  border: 1px solid var(--ccnn-gold);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.member-spend-link {
  margin-left: auto;
  text-decoration: none;
}

/* Board detail */
.board-jurisdiction {
  color: var(--ccnn-teal);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin: 10px 0 0;
}

.board-fact-line {
  font-size: 14px;
  margin: 4px 0;
}

.law-label {
  font-variant: small-caps;
  font-weight: 600;
}

.spending-label {
  font-size: 13px;
  color: var(--ccnn-ink-soft);
  margin: 10px 0 0;
}

.spending-total {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--ccnn-gold);
}

.spending-stat {
  font-size: 16px;
  margin: 2px 0 8px;
}

.spending-counted-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0 4px;
}

.spending-counted {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 14px;
}

.spending-amount {
  color: var(--ccnn-gold);
  font-weight: 600;
}

.staff-intro {
  font-size: 14px;
  color: var(--ccnn-ink-soft);
  margin: 0 0 8px;
}

.park-fund-lines {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

.park-fund-lines li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--ccnn-border);
}

.park-fund-amount {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700;
  color: var(--ccnn-gold);
}

/* Budgets */
.budget-card {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 14px 16px;
  margin: 12px 0;
}

.budget-card-fy,
.budget-fy-line {
  color: var(--ccnn-teal);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin: 0 0 2px;
}

.budget-card-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px;
}

.budget-card-status {
  color: var(--ccnn-gold);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 4px;
}

.budget-card-total,
.budget-total {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--ccnn-gold);
}

.budget-status-pill {
  display: inline-block;
  border: 1.5px solid var(--ccnn-gold);
  color: var(--ccnn-gold);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 13px;
  font-weight: 700;
}

.ccnn-budget-card {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 16px;
  max-width: 48rem;
  margin: 12px 0;
}

.ccnn-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ccnn-pie-list {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccnn-pie-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--ccnn-border);
  font-size: 14px;
}

.ccnn-pie-amt {
  margin-left: auto;
  min-width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ccnn-pie-share {
  min-width: 52px;
  text-align: right;
  color: var(--ccnn-ink-soft);
}

/* Calendar */
.chip-checked,
.chip-snapshot {
  background: var(--ccnn-gold);
  border: 1px solid var(--ccnn-gold);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.cal-honesty-box {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 10px 14px;
  font-size: 14px;
  margin: 10px 0 16px;
}

.cal-minis {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0;
}

.cal-mini-title {
  font-weight: 700;
  margin: 0 0 4px;
  font-size: 14px;
}

.cal-mini table {
  border-collapse: collapse;
  font-size: 12px;
}

.cal-mini th,
.cal-mini td {
  width: 26px;
  height: 24px;
  text-align: center;
}

.cal-day-meeting {
  background: var(--ccnn-gold);
  color: #ffffff;
  border-radius: 50%;
  font-weight: 700;
}

.cal-card {
  display: flex;
  gap: 14px;
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 12px 14px;
  margin: 10px 0;
}

.cal-card-stream {
  border: 2px solid var(--ccnn-gold);
}

.cal-card-nodate {
  border-style: dashed;
}

.cal-date-block {
  background: #efe9d8;
  border-radius: 8px;
  min-width: 64px;
  text-align: center;
  padding: 8px 4px;
  height: fit-content;
}

.cal-day-num {
  display: block;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--ccnn-gold);
  line-height: 1;
}

.cal-weekday {
  font-size: 12px;
  text-transform: uppercase;
}

.cal-card-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 2px;
}

.chip-stream {
  background: var(--ccnn-gold);
  border: 1px solid var(--ccnn-gold);
  color: #ffffff;
  font-size: 11px;
}

.cal-badge {
  border-radius: 999px;
  color: #ffffff;
  margin-left: 0;
}

.cal-confirmed {
  background: var(--ccnn-teal);
}

.cal-schedule {
  background: #8a8f8c;
}

.cal-streams-box {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 12px 16px;
  margin: 16px 0;
}

/* Projects */
.projects-figure-box {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 10px 14px;
  font-size: 14px;
}

.projects-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.projects-stat {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.projects-stat-value {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--ccnn-gold);
}

.projects-stat-source {
  font-size: 11px;
  color: var(--ccnn-ink-soft);
}

.projects-map {
  height: 420px;
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  margin: 12px 0 4px;
  background: #e8e4d8;
}

.projects-map-detail {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 12px 16px;
  margin: 10px 0;
}

.projects-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}

.projects-pill {
  border: 1px solid var(--ccnn-border);
  background: var(--ccnn-surface);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.projects-pill.is-active {
  background: var(--ccnn-gold);
  border-color: var(--ccnn-gold);
  color: #ffffff;
}

.project-card {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 14px 16px;
  margin: 12px 0;
}

.project-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.chip-cat-gold {
  background: var(--ccnn-gold);
  border: 1px solid var(--ccnn-gold);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.project-owner {
  color: var(--ccnn-teal);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.project-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
}

.project-dl {
  border-top: 1px solid var(--ccnn-border);
  margin: 10px 0;
}

.project-dl-row {
  display: flex;
  gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ccnn-border);
}

.project-dl dt {
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ccnn-ink-soft);
  min-width: 150px;
  padding-top: 3px;
}

.project-dl dd {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  color: var(--ccnn-gold);
}

.project-note,
.projects-panel {
  background: #efe9d8;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}

.road-notices {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 12px 16px;
  margin: 12px 0;
}

.road-notices h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  margin: 4px 0;
}

.road-notice-item {
  border-top: 1px solid var(--ccnn-border);
  padding: 8px 0;
  font-size: 14px;
}

.road-notices-fetched {
  font-size: 12px;
  color: var(--ccnn-ink-soft);
}

/* ------------------------------------------------------------------
   v0.8.1 spec completion pass: map attribution line under the map,
   the gold-bordered weather panel, the marker detail thumbnail,
   and the road notices source footer rows.
------------------------------------------------------------------- */
.projects-map-attribution {
  font-size: 12px;
  color: var(--ccnn-ink-soft);
  margin: 4px 0;
}

.projects-panel-gold {
  border: 2px solid var(--ccnn-gold);
}

.map-detail-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 8px;
}

.map-detail-prompt {
  margin: 4px 0;
}

.road-notice-source-row {
  font-size: 12px;
  color: var(--ccnn-ink-soft);
  border-top: 1px solid var(--ccnn-border);
  padding-top: 8px;
  margin: 8px 0 0;
}

/* ------------------------------------------------------------------
   v0.8.2: dark mode repair. The v0.8.0 token block re-declared
   --ccnn-paper after the dark scheme block, so on a phone in dark
   mode the text flipped to the dark palette (near-white ink) while
   the background stayed light: headlines and summaries rendered
   white on cream and were unreadable. Re-assert the dark tokens
   last so both color schemes resolve correctly.
------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --ccnn-paper: #0c141c;
    --ccnn-surface: #14202c;
    --ccnn-border: #2b3d4d;
  }
}

/* ------------------------------------------------------------------
   v0.8.4: board groups on Boards & Commissions. Cook County and
   City of Grand Marais are outer accordions holding their board
   accordions; the school board and North Shore Health stand as
   their own top level board accordions, unlabeled as a set.
------------------------------------------------------------------- */
.board-group {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  margin: 10px 0;
}

.board-group-head {
  display: block;
  cursor: pointer;
  padding: 12px 14px;
  list-style: none;
}

.board-group-head::-webkit-details-marker {
  display: none;
}

.board-group-name {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 900;
}

.board-group-count {
  color: var(--ccnn-teal);
  font-weight: 600;
  text-transform: uppercase;
}

.board-group[open ] > .board-group-head .board-acc-chevron {
  transform: rotate(90deg);
}

.board-group-panel {
  border-top: 1px solid var(--ccnn-border);
  padding: 2px 10px 6px;
}

.board-group-panel .board-acc {
  margin: 8px 0;
}

/* ------------------------------------------------------------------
   v0.9.0: record notes on board pages, levy blocks, the Also
   levied list, the EDA grants and loans tracker, the Bids & RFPs
   page, and the EDA tracker link inside its landing accordion.
------------------------------------------------------------------- */
.board-record-note {
  font-size: 14px;
  color: var(--ccnn-ink-soft);
  line-height: 1.55;
  margin: 6px 0;
}

.board-levy-block {
  margin: 4px 0 10px;
}

.board-levy-block .chip-row {
  margin-top: 4px;
}

.board-acc-tracker-link {
  margin: 10px 0 2px;
}

.also-levied {
  margin: 18px 0 6px;
}

.also-levied-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

.also-levied-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ccnn-border);
}

.also-levied-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
}

.eda-tracker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 6px 0 16px;
}

.eda-tracker-table th,
.eda-tracker-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ccnn-border);
  vertical-align: top;
}

.eda-tracker-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ccnn-ink-soft);
}

.eda-tracker-amount {
  color: var(--ccnn-gold);
  font-weight: 600;
  white-space: nowrap;
}

.bid-item {
  border: 1px solid var(--ccnn-border);
  border-radius: 10px;
  background: var(--ccnn-surface);
  padding: 12px 14px;
  margin: 10px 0;
}

.bid-seeker {
  color: var(--ccnn-teal);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  margin: 0;
}

.bid-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  margin: 4px 0 6px;
}

.bids-group-heading {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  margin: 14px 0 6px;
}

.bid-source {
  margin: 8px 0;
}

.bid-source p {
  margin: 2px 0;
}

.bid-source-name {
  font-weight: 600;
}

/* ------------------------------------------------------------------
   v0.9.2: every chip kind carries its own colorway (Patrick,
   Nov 2, 2026), and the chip font comes down two steps, 14px to
   12px. Unchanged colorways: outcome teal, money pale gold,
   video cobalt, spending approved solid gold (chip-money-solid),
   project category solid gold (chip-cat-gold, Projects page only).
------------------------------------------------------------------- */
.chip {
  font-size: 12px;
}

/* Voted to spend (person pages): bronze, distinct from the
   board level solid gold spending chip. */
.chip-spend {
  background: #8a6d3b;
  border-color: #8a6d3b;
  color: #ffffff;
}

/* Levy: solid navy. */
.chip-levy {
  background: #0d2b45;
  border-color: #0d2b45;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .chip-levy {
    border-color: #7fa3c4;
  }
}

/* Per resident: plum. */
.chip-perresident {
  background: #f0e6ee;
  border-color: #7a4e6d;
  color: #5b3550;
}

/* EDA grants: olive green. */
.chip-grants {
  background: #eef3e2;
  border-color: #6b7f3e;
  color: #47571f;
}

/* EDA loans: steel blue. */
.chip-loans {
  background: #e3ebf5;
  border-color: #4a6fa5;
  color: #2f4d73;
}

/* Openings: solid teal, a link to the board's application page. */
.chip-openings {
  background: #1f7a6d;
  border-color: #1f7a6d;
  color: #ffffff;
}

/* Calendar checked stamp: green tint. */
.chip-checked {
  background: #e6f0e9;
  border-color: #3e6b4f;
  color: #2e523c;
}

/* Projects snapshot stamp: sepia. */
.chip-snapshot {
  background: #efe9dc;
  border-color: #96865f;
  color: #66582f;
}

/* Calendar stream marker: purple. */
.chip-stream {
  background: #ece5f7;
  border-color: #6a4fa3;
  color: #4b3580;
}

/* ------------------------------------------------------------------
   v0.9.4: nav slimming and font correction (Patrick, Nov 2, 2026)

   The nav pills drop their borders and translucent fill and get
   slimmer padding; the active item keeps its pale yellow container.
   The one variable the earlier font pass missed, --ccnn-font-alt,
   plus the quote stack, now point at the site's real stacks: the
   plain default sans for alt, Source Serif 4 for quotes. Nav type
   follows the design spec: 14px semibold, plain sans stack.
------------------------------------------------------------------- */
:root {
  --ccnn-font-alt: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ccnn-font-quote: "Source Serif 4", Georgia, "Times New Roman", serif;
}

.primary-nav ul {
  gap: 2px 4px;
  padding: 6px 0 8px;
}

.primary-nav a,
.primary-nav li a {
  font-family: var(--ccnn-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px;
  border: none;
  background: transparent;
  border-radius: 999px;
}

.primary-nav li a:hover,
.primary-nav li a:focus {
  background: rgba(255, 255, 255, 0.14);
  border: none;
}

.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a {
  background: var(--ccnn-active);
}