/* =========================================================
   Racket Hour — the blog
   Same tokens as the rest of the site. This file only adds the two
   things base.css has no reason to know about: a list of posts, and
   a long piece of prose.
========================================================== */

/* ---------- index ---------- */
.blog-head {
  padding-top: clamp(1.75rem, 5vw, 3rem);
  padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 0.7rem;
}
.blog-head h1 { max-width: 14ch; }

.blog-list { padding-bottom: calc(var(--tabbar-clear) + 1rem); }

.blog-grid {
  display: grid;
  gap: 0.85rem;
  align-items: start;
}
@media (min-width: 700px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.post-card { padding: 0; overflow: hidden; gap: 0; }

.post-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--shell-deep);
}

.post-body {
  padding: 0.9rem 1.05rem 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.post-title {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.post-excerpt {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: none;
  /* Excerpts run to three sentences in the table; the card shows the start. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-empty {
  background: var(--shell);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  color: var(--ink-dim);
  max-width: none;
}
.blog-empty a { color: var(--green); font-weight: 600; }

/* ---------- one article ---------- */
.article {
  max-width: 44rem;
  margin-inline: auto;
  padding-top: clamp(1.75rem, 5vw, 2.75rem);
  padding-bottom: 1rem;
}

.article-head { display: grid; gap: 0.7rem; margin-bottom: 1.4rem; }
.article-head h1 { font-size: clamp(1.75rem, 5vw, 2.7rem); }

.article-meta {
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.article-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--shell-deep);
  box-shadow: var(--lift-2);
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

/* ---------- prose ---------- */
.prose { font-size: 1.02rem; line-height: 1.72; }

.prose > * + * { margin-top: 1.1rem; }

.prose p { max-width: none; }

.prose h2 {
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.65rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin-top: 2.4rem;
  text-wrap: balance;
}

.prose h3 {
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-top: 1.8rem;
}

.prose h2 + *, .prose h3 + * { margin-top: 0.7rem; }

.prose a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 112, 74, 0.35);
}
.prose a:hover { text-decoration-color: var(--green); }

.prose strong { font-weight: 700; }

.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: 0.45rem; }
.prose li { padding-left: 0.2rem; }
.prose li::marker { color: var(--ink-faint); }
.prose ol li::marker { font-variant-numeric: tabular-nums; font-weight: 700; }
.prose li > ul, .prose li > ol { margin-top: 0.45rem; }

.prose blockquote {
  border-left: 3px solid var(--green);
  padding: 0.15rem 0 0.15rem 1.1rem;
  color: var(--ink-dim);
}
.prose blockquote p { margin-top: 0; }

.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--shell);
  border-radius: 5px;
  padding: 0.12em 0.4em;
}

.prose hr { border: 0; border-top: 1px solid var(--hair); margin-block: 2rem; }

.prose img { border-radius: var(--r); margin-block: 1.4rem; }

/* Nearly every post has a table, and several are four columns wide. The
   wrapper scrolls so the page itself never does. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hair);
  border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--lift-1);
}

.prose table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9rem;
}

.prose th {
  text-align: left;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  white-space: nowrap;
  background: var(--shell);
}

.prose td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: top;
  color: var(--ink-dim);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child { color: var(--ink); font-weight: 600; }

/* ---------- foot of the article ---------- */
.article-origin {
  margin-top: clamp(2rem, 5vw, 2.75rem);
  padding: 1rem 1.15rem;
  background: var(--shell);
  border-radius: var(--r);
  font-size: 0.9rem;
  color: var(--ink-dim);
  max-width: none;
}
.article-origin a { color: var(--green); font-weight: 600; }

.article-more {
  padding-top: clamp(2.25rem, 6vw, 3.25rem);
  padding-bottom: calc(var(--tabbar-clear) + 1rem);
  border-top: 1px solid var(--hair-soft);
  margin-top: clamp(2.25rem, 6vw, 3.25rem);
}
.article-more h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: 1.1rem; }