.log-intro { padding-top: var(--s-8); }
.log-intro h1 {
  margin-top: var(--s-6);
  font-size: var(--t-h1);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
#log-sources {
  max-width: var(--measure);
  margin-block: var(--s-6) var(--s-4);
}
#log-sources li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13ch 15ch;
  align-items: center;
  gap: var(--s-5);
  min-height: 44px;
  font-size: var(--t-small);
}
#log-sources a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 44px;
  text-decoration: none;
}
#log-sources a:hover,
#log-sources a:focus-visible { text-decoration: underline; }
.source-handle, .source-total, .log-date, .log-source, .log-hash {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.source-total { text-align: right; }
.log-note {
  max-width: var(--measure);
  margin-bottom: var(--s-7);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
}
#log-rows { margin-bottom: var(--s-9); }
#log-rows > li {
  display: grid;
  grid-template-columns: 13ch minmax(0, 19ch) minmax(0, 1fr) 10ch;
  align-items: start;
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.log-date, .log-source { padding-top: var(--s-3); }
.log-source span { display: block; margin-top: var(--s-3); }
.log-source { overflow-wrap: anywhere; }
.log-subject {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.log-hash {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-4);
  min-height: 44px;
  text-decoration: none;
}
a.log-hash:hover, a.log-hash:focus-visible {
  color: var(--fg);
  text-decoration: underline;
}
.skip { min-height: 44px; }

@media (min-width: 768px) and (max-width: 1000px) {
  #log-rows > li {
    grid-template-columns: 13ch minmax(0, 1fr) 10ch;
    column-gap: var(--s-5);
    row-gap: var(--s-4);
  }
  .log-date { grid-column: 1; grid-row: 1; }
  .log-source { grid-column: 1; grid-row: 2; }
  .log-subject { grid-column: 2; grid-row: 1 / 3; }
  .log-hash { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 767px) {
  .log-intro { padding-top: var(--s-7); }
  #log-sources li {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--s-4);
  }
  .source-total { margin-left: auto; }
  #log-rows > li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-5);
  }
  .log-date { grid-column: 1; }
  .log-source { grid-column: 1 / -1; grid-row: 2; padding: 0; }
  .log-source span { display: inline; margin-left: var(--s-5); }
  .log-subject { grid-column: 1 / -1; grid-row: 3; }
  .log-hash { grid-column: 2; grid-row: 1; margin-top: calc(-1 * var(--s-4)); }
}