/* Blog: the archive room. Same sheet, same banner, longer scroll. */

body { padding-bottom: 0; }

.art--banner { height: clamp(160px, 24vh, 240px); }
.art--banner::after {
  background: linear-gradient(180deg, transparent 0%, transparent 56%, var(--bg) 100%);
}

.sheet { margin-top: 6px; }

.back { margin: 0 0 18px; font-size: 14.5px; }
.back a { color: var(--ink-3); border: 0; }
.back a:hover { color: var(--amber); }

.preview-note {
  margin: -8px 0 26px;
  padding: 9px 12px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: none;
}

/* ---------- listing ---------- */
.year-group h2 {
  margin: 36px 0 4px;
  font-family: "Rozha One", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.42rem;
  line-height: 1.2;
  color: var(--ink);
}
.year-group:first-of-type h2 { margin-top: 30px; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-top: 1px solid var(--line); }
.post-list li:first-child { border-top: 0; }
.post-list a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border: 0;
}
.post-list time {
  flex: 0 0 54px;
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.post-list .t { color: var(--ink-2); }
.post-list a:hover .t { color: var(--amber); }

/* ---------- a post ---------- */
.post-meta {
  margin: 0 0 8px;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.post-title {
  font-size: clamp(1.85rem, 5.6vw, 2.6rem);
  line-height: 1.08;
  margin-bottom: 20px;
}
.post-body { margin-top: 2px; }
.post-body p { margin: 0 0 1.1em; max-width: 52ch; }
.post-body h5,
.post-body h6 {
  margin: 0 0 1.1em;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.post-body hr {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.post-empty { color: var(--ink-3); font-style: italic; }

.post-image {
  margin: 26px 0;
  max-width: 100%;
}
.post-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
}

.empty { color: var(--ink-3); }

/* A current essay leads; the historical archive remains a quiet way onward. */
.featured-writing { margin: 34px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); }
.featured-writing h2 { font-family: "Rozha One", Georgia, serif; font-weight: 400; font-size: clamp(1.65rem, 5vw, 2.1rem); line-height: 1.18; margin: 10px 0 16px; }
.featured-writing h2 a { color: var(--ink); border: 0; }
.featured-writing h2 a:hover { color: var(--amber); }
.featured-writing p:not(.post-meta) { color: var(--ink-2); margin-bottom: 20px; }
.featured-read { font-size: 15px; }
.archive-aside { margin-top: 24px; font-size: 13px; }
.archive-aside a { color: var(--ink-3); border: 0; }
.archive-aside a:hover { color: var(--amber); }

.post-nav { display: block; margin-bottom: 8px; }
.post-nav:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .art--banner { height: clamp(130px, 18vh, 190px); }
  .post-list a { gap: 12px; }
  .post-list time { flex-basis: 46px; font-size: 12px; }
}

/* Transcriptions keep image-only archive posts readable at any text size. */
.image-transcript { margin: 20px 0; }
.image-transcript summary { cursor: pointer; color: var(--ink-2); }
.image-transcript[open] summary { margin-bottom: 16px; }
.image-transcript summary:hover { color: var(--amber); }

.featured-cover { display: block; border: 0; margin: 16px 0 22px; }
.featured-cover img { display: block; width: 100%; height: auto; border-radius: 4px; }