main.chronicle {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 6vh, 4rem);
}

.chronicle-head {
  display: flex;
  justify-content: center;
}

.chronicle-head .mark {
  display: inline-block;
  line-height: 0;
}

.chronicle-head img {
  height: clamp(2rem, 4.5vw, 3rem);
  width: auto;
  filter: brightness(0) invert(0.92);
}

.graph-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#graph {
  width: 100%;
  height: clamp(180px, 32vh, 280px);
  display: block;
}

#graph .axis-line { stroke: var(--dim); stroke-width: 1; opacity: 0.4; }
#graph .pop-line  { stroke: var(--ink); stroke-width: 1.5; fill: none; vector-effect: non-scaling-stroke; }

.graph-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 1px;
}

.days {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.day-entry {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.day-entry .head {
  font-size: 0.75rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.day-entry .line {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  max-width: 40em;
}

.day-entry.empty .line {
  color: var(--dim);
}

footer.foot {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  justify-content: flex-end;
}

footer.foot a:hover { color: var(--ink); }