/* =========================================================
   The Commit Chronicle — page-specific styles
   Extends css/style.css (shares :root tokens)
   ========================================================= */

.chronicle main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.5rem); }

/* ---------- Masthead ---------- */
.masthead { padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; text-align: center; }
.masthead-rule {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; padding-bottom: .6rem;
  border-bottom: var(--border);
}
.masthead-rule.bottom { border-bottom: none; border-top: var(--border); padding-bottom: 0; padding-top: .6rem; margin-top: .2rem; }
.masthead-rule .dotline { flex: 1; height: 0; border-top: 2px dotted var(--ink); margin: 0 .5rem; opacity: .5; }
.masthead-title {
  font-family: var(--f-display);
  font-size: clamp(2.8rem, 11vw, 8rem);
  line-height: .9; margin: .4rem 0; text-transform: uppercase; letter-spacing: .005em;
}

/* ---------- Lede ---------- */
.lede-block { text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 0 1rem; max-width: 40ch; margin: 0 auto; }
.dek { font-family: var(--f-heavy); font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.3; margin: 0 0 .4rem; }
.big-number {
  font-family: var(--f-display);
  font-size: clamp(5rem, 22vw, 15rem); line-height: .82;
  color: var(--red); letter-spacing: -.01em;
  text-shadow: 5px 5px 0 var(--ink);
}
.big-caption { font-family: var(--f-mono); font-size: .82rem; margin: .6rem auto 0; max-width: 34ch; }

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;
  margin: 2.5rem 0;
}
.stat-tile {
  border: var(--border); border-radius: 4px; padding: 1.2rem;
  box-shadow: var(--shadow-sm); background: var(--paper-2);
}
.stat-tile:nth-child(4n+1) { background: var(--paper); }
.stat-tile:nth-child(4n+3) { background: var(--paper); }
.stat-tile .st-num { font-family: var(--f-display); font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; }
.stat-tile .st-label { font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--red); margin-top: .4rem; }
.stat-tile .st-sub { font-size: .82rem; margin-top: .3rem; opacity: .8; }

/* ---------- Editor's note ---------- */
.editors-note {
  border-left: 8px solid var(--yellow);
  background: var(--paper-2);
  border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  border-radius: 0 4px 4px 0;
  padding: 1rem 1.2rem; margin: 0 0 1rem;
  font-family: var(--f-mono); font-size: .84rem; line-height: 1.55;
}
.editors-note strong { font-family: var(--f-body); font-weight: 700; }

/* ---------- Section frame ---------- */
.chron-section { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 3px solid var(--ink); }
.chron-head { margin-bottom: 1.8rem; }
.chron-head .kicker { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.chron-head h2 { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.8rem, 5vw, 3rem); line-height: .95; margin: .2rem 0 0; }
.chron-sub { font-family: var(--f-mono); font-size: .82rem; margin: .6rem 0 0; opacity: .8; }

/* ---------- Bar chart ---------- */
.barchart { display: flex; align-items: flex-end; gap: clamp(.4rem, 1.5vw, 1rem); height: 320px; border-bottom: var(--border); padding-top: 1rem; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .4rem; }
.bar .bar-fill {
  width: 100%; background: var(--teal); border: var(--border); border-bottom: none;
  border-radius: 3px 3px 0 0; min-height: 3px;
  position: relative; transition: height .8s cubic-bezier(.2,.8,.2,1);
}
.bar:nth-child(odd) .bar-fill { background: var(--red); }
.bar.peak .bar-fill { background: var(--yellow); }
.bar .bar-val { font-family: var(--f-mono); font-size: .68rem; font-weight: 700; position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.bar .bar-year { font-family: var(--f-heavy); font-size: .8rem; }
.bar .bar-fill-wrap { width: 100%; display: flex; align-items: flex-end; height: 100%; }

/* ---------- Legend ---------- */
.legend { display: flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .72rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.legend .sw { width: 15px; height: 15px; border: 2px solid var(--ink); border-radius: 3px; display: inline-block; }

/* ---------- Calendars / heatmap ---------- */
.calendars { display: flex; flex-direction: column; gap: 2rem; }
.cal-year { }
.cal-year-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; }
.cal-year-head .cy { font-family: var(--f-display); font-size: 1.8rem; }
.cal-year-head .ct { font-family: var(--f-mono); font-size: .75rem; color: var(--red); }
.cal-scroll { overflow-x: auto; padding-bottom: .5rem; }
.cal-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; width: max-content; }
.cal-cell { width: 13px; height: 13px; border-radius: 2px; border: 1px solid rgba(26,22,20,.25); }
.cal-cell.l0 { background: #e7dcc2; }
.cal-cell.l1 { background: #9ec7c1; }
.cal-cell.l2 { background: var(--teal); }
.cal-cell.l3 { background: var(--yellow); }
.cal-cell.l4 { background: var(--red); }

/* ---------- Headlines ---------- */
.headlines { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.headline {
  border: var(--border); border-radius: 4px; padding: 1.3rem; box-shadow: var(--shadow-sm);
  background: var(--paper);
}
.headline:nth-child(3n+2) { background: var(--paper-2); }
.headline h3 { font-family: var(--f-heavy); font-size: 1.15rem; margin: 0 0 .5rem; line-height: 1.15; }
.headline p { margin: 0; font-size: .95rem; }
.headline .hl-big { font-family: var(--f-display); color: var(--red); }

.chron-note { text-align: center; font-family: var(--f-mono); font-size: .78rem; opacity: .7; padding: 1rem 0 2.5rem; }

@media (max-width: 600px) {
  .masthead-rule { font-size: .58rem; letter-spacing: .1em; }
  .barchart { height: 240px; }
  .bar .bar-val { font-size: .6rem; }
}