.posts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  /* keeps the first title well clear of the filters' tag */
  padding-right: 5rem;
}

.post-card {
  display: block;
}

.post-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-card-link:hover .post-title {
  color: var(--color-accent);
}

/* The date line sits with equal air above and below: the title's
   margin over it, the tags' margin under it (and none when the tags
   are hidden) */
.post-card .post-meta {
  margin-bottom: 0;
}

.post-card .post-tags {
  margin-top: var(--spacing-sm);
}

.post-card .post-date {
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

.post-card .post-title {
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-strong);
  transition: color var(--transition-fast);
}

.post-card .post-description {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.no-posts {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--spacing-3xl) 0;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.tag {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: var(--text-label-small);
  font-weight: 500;
  font-family: inherit;
  color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border: none;
  border-radius: 4px;
}

button.tag,
a.tag {
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

button.tag:hover,
a.tag:hover {
  background-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

button.tag.active {
  color: var(--color-bg);
  background-color: var(--color-accent);
}

/* A tag in the sheet's upper right corner shows and hides the tags,
   on the list (the filters and the cards' tags) and on an essay */
.sheet:has(.tag-filters-toggle) {
  position: relative;
}

/* The essays' sheet is as wide as its longest line, no wider */
#post-list-container.sheet {
  width: fit-content;
  max-width: 100%;
}

.post-header {
  padding-right: 5rem;
}

.tag-filters-toggle {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.tag-filters-toggle:hover,
.tag-filters-toggle[aria-expanded="true"] {
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-ink) 7%, transparent);
}

/* The drawer: closed it has no height, open it has its content's; the
   change is a grid row growing from nothing. It takes the sheet's
   width (the titles set that) and never widens it: inline-size
   containment keeps the tags out of the sheet's measure, so they wrap
   within it. */
.tag-drawer {
  display: grid;
  grid-template-rows: 0fr;
  contain: inline-size;
  transition:
    grid-template-rows var(--transition-base),
    padding-bottom var(--transition-base);
}

.tag-drawer.open {
  grid-template-rows: 1fr;
  padding-bottom: var(--spacing-2xl);
}

.tag-drawer > * {
  min-height: 0;
  overflow: hidden;
}

.tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding-right: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  .tag-drawer {
    transition: none;
  }
}

/* On a wash of ink, like the nav's current section: the paper's own
   subtle shade all but vanishes on the sheet */
.tag-filter {
  padding: 0.375rem 0.75rem;
  font-size: var(--text-label);
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-muted);
  background-color: color-mix(in srgb, var(--color-ink) 7%, transparent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.tag-filter:hover {
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-ink) 13%, transparent);
}

.tag-filter.active {
  color: var(--color-bg);
  background-color: var(--color-text);
}

.post-header {
  margin-bottom: var(--spacing-2xl);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}

.post-meta .separator {
  color: var(--color-text-muted);
}

/* The essay's sheet runs wider than the column, by the same amount
   each side, so the nav and the other pages hold their edge while
   the reading gets more room. Only where the window can spare it. */
.post.sheet {
  --bleed: 0px;
  margin-inline: calc(-1 * var(--bleed));
}

@media (min-width: 1120px) {
  .post.sheet {
    --bleed: 5rem;
  }
}

/* The article's head is ordered like the list card's (title, date
   line, tags) but the title keeps its own size */
.post .post-title {
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--color-text-strong);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-md);
}

.post .post-tags {
  margin-top: var(--spacing-md);
}

.post-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-2xl) 0;
}

/* The text, with the table of contents to its right */
.post-layout {
  display: flex;
  gap: 3rem;
}

.post-content {
  flex: 1;
  min-width: 0;
}

.toc-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.toc-nav {
  position: sticky;
  top: var(--spacing-xl);
  max-height: calc(100vh - var(--spacing-xl) - var(--spacing-xl));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.toc-nav::-webkit-scrollbar {
  width: 6px;
}

.toc-nav::-webkit-scrollbar-track {
  background: transparent;
}

.toc-nav::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.toc-nav::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.toc-title {
  font-size: var(--text-label-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-md) 0;
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li {
  margin-bottom: var(--spacing-xs);
}

/* The contents are a guide beside the text, not text: a step under
   it, and above the labels */
.toc a {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--spacing-xs) 0;
  transition: color var(--transition-fast);
}

.toc a:hover {
  color: var(--color-accent);
}

.toc ul ul {
  padding-left: var(--spacing-md);
}

.toc ul ul a {
  font-size: 1rem;
}

.toc-drawer-wrapper {
  display: none;
}

.toc-drawer-toggle {
  position: fixed;
  bottom: var(--spacing-xl);
  left: var(--spacing-xl);
  z-index: 100;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-text);
  color: var(--color-bg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.toc-drawer-toggle:hover {
  background-color: var(--color-text-muted);
  transform: translateY(-2px);
}

.toc-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}

.toc-drawer-overlay-open {
  opacity: 1;
  pointer-events: auto;
}

.toc-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 85vw;
  max-width: 320px;
  background-color: var(--color-bg);
  z-index: 201;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.2s ease-out;
}

.toc-drawer-open {
  transform: translateX(0);
}

.toc-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.toc-drawer-header .toc-title {
  font-size: var(--text-label-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0;
}

.toc-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.toc-drawer-close:hover {
  background-color: var(--color-bg-subtle);
  color: var(--color-text);
}

.toc-drawer-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--spacing-lg);
}

.toc-drawer-content .toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-drawer-content .toc li {
  margin-bottom: var(--spacing-sm);
}

.toc-drawer-content .toc a {
  display: block;
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--spacing-sm) 0;
  transition: color var(--transition-fast);
}

.toc-drawer-content .toc a:hover {
  color: var(--color-accent);
}

.toc-drawer-content .toc ul ul {
  padding-left: var(--spacing-lg);
}

.toc-drawer-content .toc ul ul a {
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.-translate-x-full {
  transform: translateX(-100%);
}

.translate-x-0 {
  transform: translateX(0);
}

/* The essay's close, under its text: a way to answer it, and the
   essays nearest it */
.post-colophon {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl) var(--spacing-3xl);
  font-size: var(--text-body);
}

.post-reply a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.post-reply a:hover {
  color: var(--color-accent-hover);
}

.post-related {
  flex: 1;
  min-width: 16rem;
}

.post-related-title {
  font-size: var(--text-label-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.post-related ul {
  list-style: none;
}

.post-related li + li {
  margin-top: var(--spacing-sm);
}

.post-related a {
  color: var(--color-text-strong);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.post-related a:hover {
  color: var(--color-accent);
}

.post-related time {
  margin-left: var(--spacing-sm);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}