/* A closer rhythm between reading sections, with small editorial image windows. */
.serif, .prose blockquote, .journal-now-number,
.journal-note-paper-heading > span:last-child, .journal-note-hand,
.mega-topic-description, .mobile-topic-description {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
.article-category.serif { font-style: normal; }
.topic-filter { border-top: 0; }
.site-header .brand-portrait {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: none;
  overflow: hidden;
}
.site-header .brand-portrait img {
  object-fit: cover;
  object-position: 51% 38%;
  transform: translateY(10%) scale(1.85);
  transform-origin: 51% 38%;
}
@media (min-width: 1440px) {
  .has-hero .site-header .brand-portrait { flex-basis: 76px; width: 76px; height: 76px; }
}
.topics-section { padding-bottom: clamp(28px, 3vw, 48px); }
.latest-section { padding-top: clamp(35px, 4vw, 64px); }
.latest-heading { position: relative; }
.latest-cover {
  display: block;
  width: clamp(112px, 12vw, 170px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a211b;
}
.latest-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.latest-row > a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 25px; align-items: center; }
.latest-row .latest-cover { grid-column: 1; grid-row: 1 / 4; }
.latest-row .post-meta, .latest-row h3, .latest-row .latest-bottom { grid-column: 2; }
.latest-row:hover .latest-cover > img { transform: scale(1.04); }
.topic-tile { min-height: 280px; overflow: hidden; }
.topic-tile::before { content: none; }
.topic-tile h3, .topic-tile p, .topic-tile .topic-number, .topic-tile .topic-arrow { position: relative; z-index: 2; }
.topic-tile .topic-arrow { position: absolute; }
.topic-drawing {
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 210px;
  height: 210px;
  color: #b3c79b;
  opacity: .18;
  pointer-events: none;
  transition: opacity .3s ease, transform .45s ease;
}
.topic-tile:hover .topic-drawing, .topic-tile:focus-visible .topic-drawing {
  color: #1b2a19;
  opacity: .6;
  transform: translate(-7px, -5px) rotate(-6deg) scale(1.04);
}
.topic-tile:focus-visible { background: var(--accent); color: var(--ink); }
.topic-tile:focus-visible .topic-number, .topic-tile:focus-visible p { color: var(--ink); }
.topic-tile h3, .topic-tile .topic-arrow { transition: transform .3s ease; }
.topic-tile:hover h3, .topic-tile:focus-visible h3 { transform: translateY(-3px); }
.topic-tile:hover .topic-arrow, .topic-tile:focus-visible .topic-arrow { transform: translate(4px, -4px); }
.topic-tile svg.topic-drawing { fill: none; stroke: currentColor; stroke-width: 1; }
@media (max-width: 809px) {
  .site-header .brand-portrait { flex-basis: 48px; width: 48px; height: 48px; }
  .topics-section { padding-bottom: 20px; }
  .latest-section { padding-top: 30px; padding-bottom: 56px; gap: 30px; }
  .topic-tile { min-height: 200px; }
  .topic-drawing { width: 180px; height: 180px; right: -20px; bottom: -34px; }
  .latest-row > a { column-gap: 16px; align-items: start; }
  .latest-cover { width: 92px; aspect-ratio: 3 / 4; }
  .latest-row .post-meta { flex-wrap: wrap; gap: 5px 10px; }
  .latest-row h3 { font-size: clamp(25px, 6.9vw, 35px); margin-block: 11px; }
  .latest-bottom p { font-size: 12px; }
}
@media (max-width: 359px) {
  .latest-cover { width: 72px; }
  .latest-row > a { column-gap: 13px; }
  .latest-row h3 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .latest-cover > img, .topic-drawing { transition: none; }
  .latest-row:hover .latest-cover > img,
  .topic-tile:hover .topic-drawing, .topic-tile:focus-visible .topic-drawing,
  .topic-tile:hover h3, .topic-tile:focus-visible h3,
  .topic-tile:hover .topic-arrow, .topic-tile:focus-visible .topic-arrow { transform: none; }
}