/* ============================================================
   囍帖製作所 更新日誌（/changelog/changelog.css）
   時間軸列表；疊在 shared/base.css 之上，
   導覽列樣式沿用 /legal/legal.css 的 .lg-nav。
   ============================================================ */

body {
  font-family: var(--font-serif-tc);
  font-size: var(--text-body);
  background: var(--paper);
  color: var(--ink);
}

.cl-head {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
}
.cl-head h1 {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: .12em;
}
.cl-head p {
  margin-top: .9rem;
  color: var(--ink-soft);
  max-width: 34em;
  line-height: 1.9;
}

.cl-timeline {
  display: grid;
  gap: clamp(2rem, 5vw, 2.75rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  border-left: 1px solid var(--hairline);
}

.cl-entry {
  position: relative;
  padding-left: clamp(1.5rem, 4vw, 2.25rem);
}
.cl-entry::before {
  content: "";
  position: absolute;
  left: -5px;
  top: .5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.cl-date {
  display: flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: var(--text-small);
  letter-spacing: .18em;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cl-date::-webkit-details-marker { display: none; }
.cl-date::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.cl-entry[open] > .cl-date::after { transform: rotate(45deg); }

.cl-body { margin-top: 1.1rem; }
.cl-group { margin-top: 1.1rem; }
.cl-body > .cl-group:first-child { margin-top: 0; }
.cl-group h2 {
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink-soft);
}
.cl-group ul {
  margin-top: .6rem;
  padding-left: 1.3em;
  list-style: disc;
  display: grid;
  gap: .55rem;
  line-height: 1.85;
}
.cl-group + .cl-group { margin-top: 1.5rem; }