/* Blog: the /blog/ hub, the topic pages, post cards, and what
   blog/post_extras.py places inside a post (CTA bands, photos and diagrams).
   Loaded after styles.css by blog/templates/blog/_base.html; every color and
   font comes from the tokens defined there. */

/* --- Hero and topic navigation ------------------------------------------ */
.blog-hero-text { max-width: 860px; margin-top: 28px; padding-bottom: 56px; }
.blog-hero .lede { max-width: 660px; }
.blog-hero .lede a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 2px; }
.topic-hero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.04; max-width: 900px; }
.topic-hero .guide-link { margin: -12px 0 0; font-size: 16px; color: var(--graphite); }
.topic-hero .guide-link a { color: var(--orange-deep); text-decoration: underline; text-underline-offset: 2px; }

.topic-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.topic-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  background: var(--bone);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.topic-nav a:hover { border-color: var(--ink); }
.topic-nav a .count { color: var(--orange-deep); }
.topic-nav a.current { background: var(--ink); border-color: var(--ink); color: var(--bone); }

/* --- Cards ----------------------------------------------------------------- */
.card { display: block; color: var(--ink); }
.card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sand);
  border: 1px solid var(--rule);
  margin-bottom: 16px;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-media--empty { display: flex; align-items: flex-end; padding: 16px; background: var(--ink); border-color: var(--ink); }
.card-media--empty span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.card-topic {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin: 0 0 8px;
}
.card-title {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.card:hover .card-title { color: var(--orange-deep); }
.card-dek {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0 0 12px;
}
.card-meta {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.card-meta .sep, .topic-total .sep, .related-links .sep { margin: 0 8px; color: var(--rule); }
.card--lead .card-title { font-size: 28px; line-height: 1.12; letter-spacing: -0.02em; }
.card--lead .card-dek { font-size: 16px; -webkit-line-clamp: 4; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}
@media (max-width: 1000px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; gap: 40px; } }

/* --- Hub ------------------------------------------------------------------ */
.hub-block { padding: 72px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 72px; }
.hub-block--tint { background: var(--paper); }
.hub-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 32px;
}
.hub-block-head h2, .topic-head h2, .related-head h2 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.hub-total, .topic-total, .topic-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}
.latest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 32px;
}
@media (max-width: 1000px) {
  .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .latest-grid .card--lead { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .latest-grid { grid-template-columns: 1fr; } }

.topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.topic-head .topic-count { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.4; color: var(--orange-deep); margin: 0 0 14px; }
.topic-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.topic-head h2 { margin-bottom: 14px; }
.topic-head p { font-size: 16px; line-height: 1.6; color: var(--slate); margin: 0 0 22px; }
.topic-links { display: flex; flex-direction: column; gap: 10px; }
.topic-links a, .related-head a {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.topic-links a:hover, .related-head a:hover { color: var(--orange-deep); }
.topic-links .arrow, .related-head .arrow { color: var(--orange); }

.headline-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.headline-list li { border-bottom: 1px solid var(--rule); }
.headline-list a { display: block; padding: 15px 0; }
.headline-list .hl-title {
  display: block;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.headline-list a:hover .hl-title { color: var(--orange-deep); }
.headline-list .hl-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
@media (max-width: 1000px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-head { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hub-block { padding: 52px 0; }
  .topic-grid { grid-template-columns: 1fr; gap: 28px; }
  .card--lead .card-title { font-size: 24px; }
}

/* --- Topic pages ----------------------------------------------------------- */
.topic-list { padding: 56px 0 88px; }
.topic-total { margin-bottom: 28px; }
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.pager a { color: var(--ink); }
.pager a:hover { color: var(--orange-deep); }
.pager .disabled { color: var(--rule); }
.empty-state { padding: 64px 0; font-size: 18px; color: var(--slate); }

/* --- Post page --------------------------------------------------------------- */
.guide-body .post-eyebrow { margin: 28px 0 0; font-size: 11px; line-height: 1.4; color: var(--orange-deep); }
.guide-body .post-eyebrow a { color: inherit; text-decoration: none; }
.guide-body .post-eyebrow a:hover { color: var(--orange); }
.post-title {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 14px 0 16px;
}
.guide-body .post-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
  margin: 0 0 36px;
}

.related-posts { padding: 64px 0 72px; border-top: 1px solid var(--rule); background: var(--paper); }
.related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 32px;
}
.related-links {
  margin: 48px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.related-links a { color: var(--orange-deep); }
.related-links a:hover { color: var(--orange); }

/* --- Inside a post: CTA bands ---------------------------------------------- */
/* A charcoal band with a clay rule, so it reads as a break in the article and
   never as one more paragraph. */
.guide-body .post-cta {
  margin: 52px 0;
  padding: 30px 32px 32px;
  background: var(--ink);
  border-top: 4px solid var(--orange);
  color: var(--bone);
}
.guide-body .post-cta .post-cta-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
}
.guide-body .post-cta .post-cta-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.guide-body .post-cta .post-cta-heading {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0 0 10px;
}
.guide-body .post-cta .post-cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250, 248, 242, .8);
  margin: 0 0 16px;
  max-width: 640px;
}
.guide-body .post-cta .post-cta-fact {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--sand);
  margin: 0 0 22px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-dark);
}
.guide-body .post-cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.guide-body .post-cta a.btn { text-decoration: none; }
.guide-body .post-cta a.btn-primary, .guide-body .post-cta a.btn-primary:hover { color: var(--bone); }
.guide-body .post-cta a.btn-light-outline { color: var(--bone); }
.guide-body .post-cta a.btn-light-outline:hover { color: var(--ink); }

/* --- Inside a post: figures ------------------------------------------------- */
.guide-body .post-figure { margin: 30px 0 44px; }
.guide-body .post-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.guide-body .post-figure figcaption {
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--orange);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate);
}

/* On a wide screen, bands, photos and diagrams step out past the text column,
   which is what makes them read as breaks rather than more text. The band's
   own padding keeps its words lined up with the article. */
@media (min-width: 1100px) {
  .guide-body .post-cta,
  .guide-body .post-figure { margin-left: -96px; margin-right: -96px; }
  .guide-body .post-cta { padding: 34px 96px 36px; }
  .guide-body .post-figure figcaption { margin-left: 96px; margin-right: 96px; }
}
/* On a phone they run edge to edge. */
@media (max-width: 720px) {
  .guide-body .post-cta,
  .guide-body .post-figure--photo { margin-left: -24px; margin-right: -24px; }
  .guide-body .post-cta { padding: 26px 24px 28px; }
  .guide-body .post-figure--photo figcaption { margin-left: 24px; margin-right: 24px; }
}

/* --- Diagrams ----------------------------------------------------------------- */
.dg { background: var(--paper); border: 1px solid var(--rule); padding: 26px 30px 30px; }
.guide-body .dg p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.guide-body .dg ol, .guide-body .dg ul { list-style: none; margin: 0; padding: 0; }
.guide-body .dg li { margin: 0; font-size: 15px; line-height: 1.5; color: var(--graphite); }
.guide-body .dg .dg-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 8px;
}
.guide-body .dg .dg-title {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 22px;
}
.guide-body .dg .dg-foot { margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.guide-body .dg strong { color: var(--ink); }

/* Timelines: a rail with a dot per date, the election in clay. */
.dg-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.guide-body .dg .dg-track-name { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.guide-body .dg .dg-track-who { font-size: 13.5px; line-height: 1.5; color: var(--slate); margin-bottom: 18px; }
.guide-body .dg .dg-steps li { position: relative; padding: 0 0 15px 24px; display: grid; gap: 1px; }
.dg-steps li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: -6px;
  width: 2px;
  background: var(--rule);
}
.dg-steps li:last-child::before { display: none; }
.dg-steps li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 10px;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
}
.dg-steps li.is-final::after { background: var(--orange); }
.dg-date { font-family: "JetBrains Mono", monospace; font-size: 12.5px; font-weight: 500; color: var(--ink); }
.dg-steps li.is-final .dg-what { font-weight: 600; color: var(--ink); }

/* Flows: numbered steps that wrap, the last one in clay. */
.dg-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 20px; counter-reset: dgflow; }
.guide-body .dg .dg-flow li {
  counter-increment: dgflow;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dg-flow li::before {
  content: counter(dgflow, decimal-leading-zero);
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--orange-deep);
}
.guide-body .dg .dg-flow li.is-final { border-top-color: var(--orange); }
.dg-flow-step { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); }
.dg-flow-note { font-size: 14px; line-height: 1.5; color: var(--slate); }

/* The door screen: the eight result buttons on a charcoal phone panel, and the
   rest of what a canvasser can add beside it. The dot colors are the app's. */
.dg-door-row { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 28px; align-items: start; }
.guide-body .dg .dg-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 18px;
  background: var(--ink);
  border-radius: 18px;
}
.guide-body .dg .dg-results li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px;
  background: var(--graphite);
  border: 1px solid var(--graphite-2);
  border-radius: 8px;
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  color: var(--bone);
}
.dg-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.guide-body .dg .dg-sub { font-size: 15px; color: var(--graphite); margin-bottom: 12px; }
.dg-numbered { counter-reset: dgnum; display: flex; flex-direction: column; gap: 10px; }
.guide-body .dg .dg-numbered li { counter-increment: dgnum; display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.dg-numbered li::before {
  content: counter(dgnum);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--orange);
  color: var(--bone);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
}

/* Two records side by side: the paper sheet and Beacon. */
.dg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); }
.dg-col { padding: 20px 22px 22px; }
.dg-col--paper { background: var(--bone); }
.dg-col--beacon { background: var(--ink); }
.guide-body .dg .dg-col-name { font-family: "Inter Tight", "Inter", sans-serif; font-weight: 600; font-size: 17px; color: var(--ink); }
.guide-body .dg .dg-col-role {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 4px 0 14px;
}
.guide-body .dg .dg-col--beacon .dg-col-name { color: var(--bone); }
.guide-body .dg .dg-col--beacon .dg-col-role { color: var(--orange); }
.guide-body .dg .dg-col--beacon li { color: rgba(250, 248, 242, .85); }
.dg-ticks { display: flex; flex-direction: column; gap: 9px; }
.guide-body .dg .dg-ticks li { position: relative; padding-left: 18px; }
.dg-ticks li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--olive); }
.dg-col--beacon .dg-ticks li::before { background: var(--orange); }

/* A small table (committeeperson seats). */
.dg-table { overflow-x: auto; border: 1px solid var(--rule); background: var(--bone); }
.guide-body .dg table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.guide-body .dg th, .guide-body .dg td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); color: var(--graphite); }
.guide-body .dg th {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  background: var(--paper);
}
.guide-body .dg td:first-child { font-weight: 600; color: var(--ink); }
.guide-body .dg tr:last-child td { border-bottom: none; }

/* A worked example under a diagram. */
.guide-body .dg .dg-example {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--bone);
  border-left: 3px solid var(--olive);
  font-size: 15px;
  line-height: 1.55;
  color: var(--graphite);
}
.dg-example-tag {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-deep);
  margin-bottom: 4px;
}

/* Bars: one series, so one color and no legend; the value sits at the tip. */
.guide-body .dg .dg-bars li { padding: 10px 0; border-top: 1px solid var(--rule); }
.guide-body .dg .dg-bars li:first-child { border-top: none; padding-top: 0; }
.dg-bar-label { display: block; font-size: 14px; color: var(--slate); margin-bottom: 6px; }
.dg-bar-label strong { margin-right: 6px; }
.dg-bar-track { display: flex; align-items: center; gap: 10px; }
.dg-bar { display: block; height: 14px; background: var(--ink); border-radius: 0 4px 4px 0; }
.dg-bar-value { font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }

@media (max-width: 720px) {
  .dg { padding: 20px 18px 22px; }
  .dg-tracks, .dg-split, .dg-door-row { grid-template-columns: 1fr; }
  .dg-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-body .dg .dg-results { max-width: 340px; }
}