* { box-sizing: border-box; }
  body {
    font-family: 'Times New Roman', Times, serif;
    background: #FBFBFA;
    margin: 0;
    padding: 0;
    color: #0D1B2A;
  }
  .page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px 40px;
  }
  .page-header {
    background: #122334;
    border-bottom: 3px solid #C9A84C;
    padding: 20px 24px 40px;
    margin-bottom: 16px;
  }
  .page-header-inner {
    max-width: 1400px;
    margin: 0 auto;
  }
  .page-header h1 {
    font-family: 'Playfair Display', serif;
    color: #FFFFFF;
    font-size: 40px;
    margin: 0 0 6px;
  }
  .page-dates {
    color: #9a9a95;
    font-size: 12px;
    font-family: Arial, sans-serif !important;
    margin: 4px 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .page-header .subhead {
    color: #C9A84C;
    font-size: 15px;
    margin: 0;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .eyebrow {
    color: #8a6d1f;
    font-size: 15px;
    letter-spacing: 1.5px;
    margin: 0 0 14px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
  }
  .columns {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  /* ---------- LEFT: TOP OFFICIALS ---------- */
  .col-left {
    width: 220px;
    flex-shrink: 0;
  }
  .official {
    margin-bottom: 16px;
  }
  .avatar {
    border-radius: 50%;
    background: #1E88E518;
    margin-bottom: 6px;
  }
  .avatar.hero {
    width: 165px; height: 165px;
    border: 6px solid #5a6472;
  }
  .avatar.hero.ring-dem { border-color: #1E88E5; }
  .avatar.hero.ring-rep { border-color: #B0453D; }
  .avatar.hero.ring-other { border-color: #C9A84C; }
  .avatar.hero.ring-none { border-color: #9a9a95; }
  .avatar.small {
    width: 120px; height: 120px;
    border: 6px solid transparent;
  }
  .avatar.small.ring-dem { border-color: #1E88E5; }
  .avatar.small.ring-rep { border-color: #B0453D; }
  .avatar.small.ring-other { border-color: #C9A84C; }
  .official .name {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
  }
  .official .title {
    color: #5a6472;
    font-size: 15px;
    margin: 0 0 4px;
    font-family: Arial, sans-serif;
  }
  .official .meta {
    color: #1E88E5;
    font-size: 14px;
    margin: 0;
    font-family: Arial, sans-serif;
    font-weight: 700;
  }
  .official .meta.neutral {
    color: #5a6472;
  }
  .pending-note {
    border-top: 1px dashed #dedede;
    padding-top: 8px;
    margin-top: 4px;
    color: #b5b5b0;
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-style: italic;
  }

  /* ---------- MIDDLE: COUNCIL / BODIES ---------- */
  .col-mid { flex: 1; min-width: 0; }
  .council-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .council-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
    border-left: 3px solid #1E88E5;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #ececea;
  }
  .council-row.rep { border-left-color: #B0453D; }
  .council-row.other { border-left-color: #C9A84C; }
  .council-row.none { border-left-color: #9a9a95; }
  .council-row .cphoto {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #1E88E518;
    border: 6px solid transparent;
    flex-shrink: 0;
  }
  .council-row .cphoto.ring-dem { border-color: #1E88E5; }
  .council-row .cphoto.ring-rep { border-color: #B0453D; }
  .council-row .cphoto.ring-other { border-color: #C9A84C; }
  .council-row .cphoto.ring-none { border-color: #9a9a95; }
  .council-row .cname {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }
  .council-row .cdist {
    color: #5a6472;
    font-size: 14.5px;
    font-family: Arial, sans-serif;
    line-height: 1.3;
  }
  .council-row .csal {
    color: #5a6472;
    font-size: 14.5px;
    font-family: Arial, sans-serif;
  }
  .council-row .cparty {
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-weight: 700;
  }
  .council-row .cparty.dem { color: #1E88E5; }
  .council-row .cparty.rep { color: #B0453D; }
  .council-row .cparty.other { color: #8a6d1f; }
  .council-row .cparty.none { color: #8a94a3; }
  .footnote {
    color: #b5b5b0;
    font-size: 14.5px;
    margin: 10px 0 22px;
    font-family: Arial, sans-serif;
    font-style: italic;
    line-height: 1.5;
  }
  details {
    margin-bottom: 10px;
  }
  summary {
    color: #8a6d1f;
    font-size: 16px;
    letter-spacing: 1.5px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    text-transform: uppercase;
  }
  summary span.note { color: #b5b5b0; text-transform: none; letter-spacing: 0; }
  .source-toggle {
    margin-top: 8px;
  }
  .source-toggle summary {
    font-size: 14.5px;
    letter-spacing: 0.5px;
    text-transform: none;
    color: #9a9a95;
    font-weight: normal;
  }
  .source-toggle .footnote {
    margin: 6px 0 0;
  }

  /* ---------- INDICATORS SECTION ---------- */
  .indicators-section {
    margin-top: 44px;
  }
  .indicators-header-bar {
    background: #122334;
    padding: 24px 32px;
    border-bottom: 3px solid #C9A84C;
  }
  .indicators-title {
    font-family: 'Playfair Display', serif;
    color: #FFFFFF;
    font-size: 30px;
    margin: 0 0 4px;
  }
  .indicators-subtitle {
    color: #a8b4c2;
    font-size: 17px;
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .indicators-columns-wrap {
    padding-top: 28px;
  }
  .indicators-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .indicator-category-label {
    color: #8a6d1f;
    font-size: 20px;
    letter-spacing: 1.5px;
    margin: 0 0 12px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
  }
  .indicator-card {
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #ececea;
    border-left: 3px solid #C9A84C;
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  .indicator-card .ivalue {
    color: #0D1B2A;
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 2px;
    font-family: Arial, sans-serif;
  }
  .indicator-card .ivalue.pending {
    color: #c5c5c0;
    font-size: 19px;
  }
  .indicator-card .ilabel {
    color: #5a6472;
    font-size: 15px;
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.3;
  }
  .indicator-card.bad { border-left-color: #B0453D; }
  .indicator-card.bad .ivalue { color: #B0453D; }
  .indicator-card.good { border-left-color: #2E7D4F; }
  .indicator-card.good .ivalue { color: #2E7D4F; }
  .vs-national {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #ececea;
  }
  .vs-national .vs-label {
    color: #9a9a95;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 2px;
    font-family: Arial, sans-serif;
  }
  .vs-national .vs-value {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    font-family: Arial, sans-serif;
    color: #0D1B2A;
  }
  .vs-national .vs-diff {
    font-size: 15px;
    font-weight: 700;
    margin: 2px 0 0;
    font-family: Arial, sans-serif;
  }
  .vs-diff.bad { color: #B0453D; }
  .vs-diff.good { color: #2E7D4F; }
  .crime-compare { margin-top: 10px; }
  .crime-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
  }
  .crime-bar-label {
    width: 52px;
    font-size: 13.5px;
    color: #5a6472;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .crime-bar-track {
    flex: 1;
    height: 16px;
    background: #f0f0ee;
    position: relative;
  }
  .crime-bar-fill {
    height: 100%;
  }
  .crime-bar-fill.buffalo { background: #B0453D; }
  .crime-bar-fill.national { background: #9a9a95; }
  .crime-bar-value {
    width: 48px;
    text-align: right;
    font-size: 15px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
  }
  .crime-diff-badge {
    text-align: center;
    margin-top: 8px;
    padding: 4px 0;
    background: #B0453D14;
    color: #B0453D;
    font-size: 16px;
    font-weight: 700;
    font-family: Arial, sans-serif;
  }
  .col-right {
    width: 195px;
    flex-shrink: 0;
  }
  .snapshot-card {
    background: #FFFFFF;
    box-shadow: 0 0 0 1px #ececea;
    padding: 12px;
    margin-bottom: 8px;
  }
  .snapshot-card .label {
    color: #0D1B2A;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    font-family: Arial, sans-serif;
  }
  .dots { display: flex; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; }
  .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
  .dot.dem { background: #1E88E5; }
  .dot.rep { background: #B0453D; }
  .dot.other { background: #C9A84C; }
  .snapshot-card .count {
    color: #5a6472;
    font-size: 17px;
    margin: 0;
    font-family: Arial, sans-serif;
    font-weight: 700;
  }
  .snapshot-card .count .n-dem { color: #1E88E5; }
  .snapshot-card .count .n-rep { color: #B0453D; }
  .timeline {
    border-left: 2px solid #dedede;
    padding-left: 12px;
  }
  .timeline-item { margin-bottom: 14px; position: relative; display: flex; gap: 8px; align-items: flex-start; }
  .timeline-item:last-child { margin-bottom: 0; }
  .timeline-photo {
    width: 85px; height: 85px;
    border-radius: 50%;
    background: #1E88E512;
    border: 6px solid transparent;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .timeline-photo.ring-dem { border-color: #1E88E5; }
  .timeline-photo.ring-rep { border-color: #B0453D; }
  .timeline-photo.ring-other { border-color: #C9A84C; }
  .timeline-dot { display: none; }
  .timeline-item .tname { font-size: 16px; font-weight: 700; margin: 0; }
  .timeline-item .tparty {
    font-size: 14.5px; font-weight: 700; margin: 1px 0 0;
    font-family: Arial, sans-serif;
  }
  .timeline-item .tparty.dem { color: #1E88E5; }
  .timeline-item .tparty.rep { color: #B0453D; }
  .timeline-item .tterm {
    color: #5a6472; font-size: 14px; margin: 1px 0 0;
    font-family: Arial, sans-serif;
  }
  .timeline-item .tmeta {
    color: #5a6472; font-size: 14px; margin: 0;
    font-family: Arial, sans-serif;
  }
  .timeline-item .tnote {
    color: #5a6472; font-size: 14px; margin: 2px 0 0;
    font-family: Arial, sans-serif; line-height: 1.4;
  }

/* ============================================================
   ADDED FOR PLUGIN: elements that were inline-styled in the
   original mockup now have real classes so every city page
   shares one stylesheet instead of repeating inline CSS.
   ============================================================ */

.breadcrumb {
  margin: 0 0 14px; padding-bottom: 16px; border-bottom: 1px solid #C9A84C33;
  font-family: Arial, sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
}
.breadcrumb a { color: #C9A84C; text-decoration: none; }
.breadcrumb .sep { color: #5a6472; margin: 0 6px; }
.breadcrumb .current { color: #FFFFFF; }

.stat-strip { display: flex; flex-wrap: wrap; gap: 0; margin-top: 14px; }
.stat-block { padding: 0 24px; border-right: 1px solid #C9A84C55; }
.stat-block:first-child { padding-left: 0; }
.stat-block:last-child { border-right: none; }
.stat-value { color: #FFFFFF; font-size: 26px; font-weight: 700; margin: 0; font-family: Arial, sans-serif; }
.stat-value .divider { color: #C9A84C99; font-weight: 400; }
.stat-label { color: #C9A84C; font-size: 11px; margin: 2px 0 0; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }

.card { background: #FFFFFF; box-shadow: 0 0 0 1px #ececea; padding: 22px 24px; margin-bottom: 28px; }

.bar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.bar-label { width: 170px; color: #0D1B2A; font-size: 16px; font-weight: 700; font-family: Arial, sans-serif; flex-shrink:0; }
.bar-track { flex: 1; height: 28px; display: flex; overflow: hidden; border-radius: 3px; }
.bar-seg { display: flex; align-items: center; justify-content: center; }
.bar-seg span { color: #FFFFFF; font-size: 13px; font-weight: 700; font-family: Arial, sans-serif; padding-left: 8px; }
.bar-seg.dem { background: #1E88E5; justify-content: flex-start; }
.bar-seg.rep { background: #B0453D; }
.bar-seg.unaff { background: #9a9a95; }
.bar-count { width: 230px; text-align: left; font-size: 16px; font-family: Arial, sans-serif; font-weight: 700; flex-shrink:0; }
.bar-count .n-dem { color: #1E88E5; }
.bar-count .n-rep { color: #B0453D; }
.bar-count .n-unaff { color: #9a9a95; }
.bar-count .sep { color: #5a6472; font-weight: 400; }

.gap-callout {
  border-top: 1px solid #ececea; padding: 18px 24px; margin: 4px -24px -22px;
  display: flex; align-items: center; gap: 20px; background: #1E88E50d;
}
.gap-number { margin: 0; font-size: 44px; font-weight: 700; color: #1E88E5; font-family: Arial, sans-serif; line-height: 1; white-space: nowrap; }
.gap-text { margin: 0; font-size: 17px; color: #0D1B2A; line-height: 1.4; }
.gap-text strong { color: #1E88E5; }

.col-heading { font-family: 'Playfair Display', serif; font-size: 18px; color: #0D1B2A; margin: 0 0 14px; }

.badge { font-size: 11px; font-weight: 700; font-family: Arial, sans-serif; padding: 2px 6px; border-radius: 3px; }
.badge.dem, .cparty.dem { color: #1E88E5; }
.badge.rep, .cparty.rep { color: #B0453D; }
.badge.none, .cparty.none { color: #8a94a3; }
.badge.other, .cparty.other { color: #8a6d1f; }

.council-row.dem { border-left-color: #1E88E5; }
.council-row.rep { border-left-color: #B0453D; }
.council-row.none { border-left-color: #9a9a95; }
.council-row.other { border-left-color: #C9A84C; }

.avatar.small, .avatar.hero, .cphoto, .timeline-photo { background-size: 165%; background-position: center 15%; }

.source-toggle.muted summary { color: #7d8a9a; }
.source-toggle.muted .footnote { color: #7d8a9a; }

.crime-diff-badge.neutral { background: #0D1B2A14; color: #0D1B2A; }
.crime-diff-badge.good { background: #2E7D4F14; color: #2E7D4F; }
.crime-bar-fill.good { background: #2E7D4F; }

.ilabel.bold { font-weight: 700; color: #0D1B2A; margin-bottom: 8px; }

.page-footer-sources { margin-top: 24px; }
.page-footer-note { text-align: center; margin-top: 24px; padding: 16px 0; }
.page-footer-note p { font-size: 14px; color: #5a6472; font-family: Arial, sans-serif; margin: 0; }
.page-footer-note a { color: #1E88E5; font-weight: 700; text-decoration: none; }

/* ============================================================
   RESPONSIVE — the mockup never had these; real production
   template needs them so the page doesn't break on phones.
   ============================================================ */
@media (max-width: 900px) {
  .columns { flex-direction: column; }
  .col-left, .col-center, .col-right { width: 100% !important; }
  .indicators-columns { grid-template-columns: 1fr 1fr; }
  .stat-block { padding: 0 14px; }
  .bar-label { width: 110px; font-size: 14px; }
  .bar-count { width: auto; }
}

@media (max-width: 600px) {
  .indicators-columns { grid-template-columns: 1fr; }
  h1 { font-size: 28px !important; }
  .stat-strip { gap: 8px; }
  .stat-block { border-right: none !important; padding: 0 14px 0 0; }
  .bar-row { flex-wrap: wrap; }
  .bar-label { width: 100%; margin-bottom: 6px; }
  .bar-count { width: 100%; margin-top: 6px; text-align: left; }
  .gap-callout { flex-direction: column; align-items: flex-start; }
  .council-grid { grid-template-columns: 1fr !important; }
}