/* 年表, the chronology: one sheet of 宣纸 on the plate ground, with the
   deckle, and one dated column on it. The sheet is the 404 leaf's
   construction (notfound.css), which is the scroll's .unroll-paper folded
   onto one box: rice fill, the two --deckle-* tiles as edge masks, the grain
   field over it. The ground and the dark tokens come from .plate-page. */

.changes-shell {
  width: var(--qb-content-width);
  max-width: 46rem;
  margin-inline: auto;
  padding-block: var(--qb-chrome-clear-block) clamp(64px, 9vw, 112px);
}

.changes-leaf {
  position: relative;
  isolation: isolate;
  padding: clamp(36px, 6vw, 72px) clamp(24px, 6vw, 72px) clamp(40px, 6vw, 64px);
}

.changes-leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(var(--rice), var(--rice-o));
  -webkit-mask-image: var(--deckle-left), var(--deckle-right), linear-gradient(#000, #000);
  -webkit-mask-size: var(--sheet-fade) 1024px, var(--sheet-fade) 1024px, calc(100% - var(--sheet-fade) * 2) 100%;
  -webkit-mask-position: left top, right top, center top;
  -webkit-mask-repeat: repeat-y, repeat-y, no-repeat;
  mask-image: var(--deckle-left), var(--deckle-right), linear-gradient(#000, #000);
  mask-size: var(--sheet-fade) 1024px, var(--sheet-fade) 1024px, calc(100% - var(--sheet-fade) * 2) 100%;
  mask-position: left top, right top, center top;
  mask-repeat: repeat-y, repeat-y, no-repeat;
}

.changes-leaf::after {
  content: "";
  position: absolute;
  inset: 0 var(--space-3);
  z-index: -1;
  pointer-events: none;
  opacity: var(--rice-fiber);
  background-image: var(--grain-layers);
  background-size: var(--grain-sizes);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}

.changes-shadow {
  position: absolute;
  inset: 0 var(--sheet-fade);
  z-index: -2;
  pointer-events: none;
  box-shadow: var(--sheet-shadow);
}

.changes-kicker {
  margin: 0 0 var(--space-4);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: lowercase;
}

.changes-kicker b {
  margin-right: .35em;
  font-family: var(--font-cjk);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.changes-leaf h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 630;
  font-stretch: 92%;
  line-height: .98;
  letter-spacing: -.045em;
}

.changes-lede {
  max-width: 36rem;
  margin: var(--space-4) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.6;
}

.changes-lede a {
  color: inherit;
  text-underline-offset: 3px;
}

.changes-lede a:hover,
.changes-lede a:focus-visible { color: var(--cinnabar-deep); }

/* the column: a hairline down the left, one mark per entry. The date is set
   in the mono face at the size the footer's index uses, and the entry's
   name reads like a 目录 line so the two lists are recognisably kin. */
.timeline {
  margin: clamp(32px, 5vw, 56px) 0 0;
  padding: var(--space-5) 0 0;
  list-style: none;
  border-top: var(--line-thin) solid color-mix(in srgb, currentColor 30%, transparent);
}

.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-4);
  border-bottom: var(--line-thin) solid color-mix(in srgb, currentColor 14%, transparent);
}

.timeline-entry:last-child { border-bottom: 0; }

.timeline-entry time {
  padding-top: 5px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.timeline-entry p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
}

.timeline-link {
  display: inline-block;
  padding-block: 4px;
  text-decoration: none;
}

.timeline-link b {
  font-family: var(--font-cjk);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.timeline-link span {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: lowercase;
}

.timeline-link b + span { margin-left: .35em; }

.timeline-link:hover,
.timeline-link:focus-visible { color: var(--cinnabar-deep); }

.timeline-link:hover span { text-decoration: underline; text-underline-offset: 3px; }

.timeline-text {
  display: block;
  max-width: 44ch;
  margin-top: 2px;
}

/* the night sheet: the inversion the scroll makes in 科技, exactly as the
   404 leaf does it; plate.css swaps the ink and paper tokens but not --rice. */
@media (prefers-color-scheme: dark) {
  .changes-page {
    --rice: 12, 17, 12;
    --rice-o: .94;
    --rice-fiber: .26;
    --sheet-shadow: 0 14px 30px -12px rgba(0, 0, 0, .75), 0 2px 6px -2px rgba(0, 0, 0, .5);
  }
}

@media (max-width: 760px) {
  .changes-leaf h1 { max-width: 11ch; }
}

/* on a phone the date sits above its line rather than beside it */
@media (max-width: 480px) {
  .timeline-entry {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .timeline-entry time { padding-top: 0; }
}