/* The Chronicle (/chronicle): what happened at any watch of the past week. Its own styles, after site.css. */

.chronicle-lead { margin-top: 1rem; }
/* The world could not be reached after it once was: how old the record on the page is. */
.chronicle-note {
  max-width: 46rem; margin: 0.6rem auto 0; padding: 0.4rem 0.9rem;
  font-family: var(--read); font-size: 0.95rem; text-align: center; color: #fff3c4;
  background: rgba(125, 26, 31, 0.55); border: 1px solid rgba(201, 162, 39, 0.55); border-radius: 6px;
}
.page-chronicle .card { font-family: var(--read); }
.page-chronicle .card a { color: #6b1418; }
.page-chronicle .card a:hover { color: #3b0d10; }
.page-chronicle time { font-variant-numeric: lining-nums tabular-nums; }

/* ---- The herald's days -------------------------------------------------------------- */

.herald-days { max-width: 52rem; margin: 0 auto; }
.herald-day + .herald-day { margin-top: 1.1rem; }
.herald-day-title {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem;
  margin: 0 0 0.3rem; padding-bottom: 0.25rem;
  font-family: var(--plain); font-weight: 700; font-size: 1.25rem; color: var(--wine-deep);
  border-bottom: 1px solid rgba(122, 92, 16, 0.55);
}
.page-chronicle .herald-day-title { margin-top: 0; font-family: var(--plain); }
.herald-day-date { font-family: var(--read); font-weight: 400; font-style: italic; font-size: 0.95rem; color: var(--ink-muted); font-variant-numeric: lining-nums tabular-nums; }
.hl-list { margin: 0; padding: 0; list-style: none; }
.page-chronicle .hl-list > li { margin: 0; }
/* A line: its family's colour, when it was said, the words, and its story where it has one. */
.hl {
  display: grid; grid-template-columns: auto minmax(5.4rem, auto) 1fr auto; column-gap: 0.65rem; align-items: baseline;
  padding: 0.45rem 0; border-bottom: 1px dotted var(--dotted);
  font-size: 1.02rem; line-height: 1.45;
}
.hl .swatch { align-self: center; margin-right: 0; }
.hl-when { color: var(--ink-faint); font-size: 0.92rem; white-space: nowrap; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.hl-words { min-width: 0; overflow-wrap: anywhere; }
.hl-times {
  display: inline-block; margin-left: 0.45rem; padding: 0 0.45rem;
  font-family: var(--read); font-weight: 700; font-size: 0.85rem; line-height: 1.5; color: var(--wine-deep);
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
  background: rgba(201, 162, 39, 0.28); border: 1px solid var(--edge); border-radius: 999px;
}
.hl-first { display: inline-block; margin-left: 0.45rem; font-size: 0.9rem; font-style: italic; color: var(--ink-faint); white-space: nowrap; }
.hl-story { display: inline-flex; align-items: center; min-height: 40px; margin: -0.6rem 0; white-space: nowrap; font-size: 0.95rem; }
.herald-days .chart-key { margin-top: 0.9rem; }
@media (max-width: 640px) {
  .hl { grid-template-columns: auto 1fr; row-gap: 0.1rem; }
  .hl-when { text-align: left; }
  .hl-words { grid-column: 2; }
  .hl-story { grid-column: 2; margin: 0; min-height: 40px; }
}

/* ---- Stories, as timelines ------------------------------------------------------------ */

.story-group {
  margin: 1.4rem 0 0.8rem; font-family: var(--plain); font-weight: 700; font-size: 1.2rem;
  letter-spacing: 0.04em; text-align: center; color: var(--pale-gold);
}
.story-group:first-child { margin-top: 0.4rem; }
.story-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.story-card { min-width: 0; scroll-margin-top: 1rem; }
.story-kind {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem;
  margin: 0 0 0.35rem; font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.story-status {
  padding: 0.1rem 0.65rem; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: none;
  color: #fffaf0; background: #6b5a44; border-radius: 999px;
}
.story-status.open { background: var(--forest); }
.page-chronicle .story-title { margin: 0 0 0.3rem; font-family: var(--plain); font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: var(--wine-deep); }
.story-goal { margin: 0 0 0.4rem; font-style: italic; color: var(--ink-soft); }
.story-line { min-width: 0; }
.story-outcome { display: flex; align-items: center; gap: 0.55rem; margin: 0.5rem 0; font-weight: 700; }
.story-seal { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--seal, #6b5a44); box-shadow: inset 0 0 0 3px rgba(255, 250, 240, 0.35), 0 1px 2px rgba(0, 0, 0, 0.35); }
.story-outcome.won { --seal: #c9a227; }
.story-outcome.failed { --seal: #8a7457; }
.story-outcome.struck { --seal: #7d1a1f; }
.story-outcome.kept { --seal: #5a3a10; }
.story-facts { margin: 0.5rem 0 0; font-size: 0.97rem; }
.story-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; padding: 0.15rem 0; border-bottom: 1px dotted var(--dotted); }
.story-facts dt { color: var(--ink-soft); }
.story-facts dd { margin: 0 0 0 auto; text-align: right; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.story-more { margin: 0.4rem 0 0; }
.story-record { display: inline-flex; align-items: center; min-height: 40px; }
.story-record::after { content: " →"; white-space: pre; }
.story-card .draw-bars { margin: 0.3rem 0 0.2rem; }

/* The timeline itself: drawn by chronicle.js at the card's own width. */
.tl .tl-axis { stroke: var(--edge-dark); stroke-width: 1.5; }
.tl .tl-period { stroke: none; }
.tl .tl-nominating { fill: #b08d3a; opacity: 0.45; }
.tl .tl-voting { fill: #5e3a6e; opacity: 0.45; }
.tl .tl-campaign { fill: #5a3a10; opacity: 0.4; }
.tl .tl-future { fill: var(--parchment); opacity: 0.55; }
.draw .tl-period-label { fill: var(--ink-soft); font-style: italic; font-size: 11px; }
.tl .tl-deadline { stroke: var(--wine); stroke-width: 1.4; stroke-dasharray: 4 3; }
.tl .tl-flag { fill: var(--wine); }
.draw .tl-flag-label { fill: var(--wine); font-style: italic; font-size: 11px; }
.tl .tl-dot { fill: var(--wine-deep); stroke: var(--paper-bright); stroke-width: 1.2; }
.tl .tl-dot.first { fill: var(--paper-bright); stroke: var(--wine-deep); stroke-width: 2; }
.tl .tl-now { fill: var(--forest); }
.draw .tl-now-label { fill: var(--forest); font-style: italic; font-size: 11px; }
.draw .tl-time { font-size: 11px; }
/* The seal: wax by the outcome, a pale mark pressed in it. */
.tl-seal-mark { --seal: #6b5a44; }
.tl-seal-mark.won { --seal: #b8901c; }
.tl-seal-mark.failed { --seal: #8a7457; }
.tl-seal-mark.struck { --seal: #7d1a1f; }
.tl-seal-mark.kept { --seal: #5a3a10; }
.tl .tl-seal { fill: var(--seal); stroke: rgba(40, 24, 8, 0.55); stroke-width: 1; }
.tl .tl-seal-ring { fill: none; stroke: rgba(255, 250, 240, 0.55); stroke-width: 1.1; }
.tl .tl-ribbon { fill: var(--seal); stroke: rgba(40, 24, 8, 0.45); stroke-width: 0.6; }
.tl .tl-glyph { fill: #fff3c4; }
.tl .tl-glyph-line { fill: none; stroke: #fff3c4; stroke-width: 2; stroke-linecap: round; }

/* ---- The Pulse ---------------------------------------------------------------------- */

.pulse-span, .pulse-quiet { margin: 0 0 0.3rem; font-size: 0.95rem; color: var(--ink-muted); }
.pulse-quiet { margin-top: 0.4rem; font-style: italic; }
.pulse-chart { min-width: 0; }