/* The journal. Shares the site's tokens, so nothing here redefines a colour. */

.blog-top { padding-top: calc(var(--s-5xl) + var(--s-2xl)); }

/* --- category bar ----------------------------------------------------------- */
.cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4xs);
  width: 100%;
}

.cat {
  padding: var(--s-4xs) var(--s-2xs);
  border: 1px solid var(--n-05);
  border-radius: var(--s-xl);
  color: var(--muted);
  font-size: var(--body-s);
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.cat:hover { border-color: var(--ink); color: var(--ink); }
.cat.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* --- the grid of posts ------------------------------------------------------ */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-m);
  width: 100%;
}

.post-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--s-m);
  background: var(--bg-02);
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease-out-quart), box-shadow var(--t-slow);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-soft);
}

.post-card__cover {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--n-03);
  overflow: hidden;
}

.post-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* no cover image: a flat accent panel rather than an empty grey box */
.post-card__cover--blank {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
}

.post-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4xs);
  padding: var(--s-s);
}

.post-card__cat {
  align-self: flex-start;
  padding: 2px var(--s-3xs);
  border-radius: var(--s-xl);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
}

.post-card__excerpt { color: var(--muted); font-size: var(--body-s); line-height: var(--lh-s, 1.5); }
.post-card__date { margin-top: var(--s-4xs); color: var(--muted); font-size: 0.78rem; }

/* --- a single post ---------------------------------------------------------- */
.back-link { color: var(--muted); font-size: var(--body-s); }
.back-link:hover { color: var(--ink); }

.post-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-m);
  /* Full container width, so the title and the body end on the same line as
     the cover photo's right edge rather than stopping short of it. */
  max-width: none;
}

.post-meta { color: var(--muted); font-size: var(--body-s); margin: 0; }

.post-cover {
  width: 100%;
  margin: 0;
  border-radius: var(--s-l);
  overflow: hidden;
  background: var(--bg-02);
}

.post-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Type sizes lifted from the maidmo blog so the two read the same: a tight
   22 / 20 / 18 / 17 scale over 17px body copy. Each step is 2px, so headings
   read as weight and spacing more than size, which keeps them from shouting in
   a narrow column. Fonts stay Bluerendr's; only the sizes are shared. */
.post-body {
  /* Matches .post-head and .post-cover: one column, three matching edges. */
  max-width: none;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.75;
}

.post-body p { margin: 0 0 18px; }
.post-body p:last-child { margin-bottom: 0; }

.post-body h2,
.post-body h3,
.post-body h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 36px 0 14px;
}

.post-body h2:first-child,
.post-body h3:first-child,
.post-body h4:first-child { margin-top: 0; }

.post-body h2 { font-size: 20px; }
.post-body h3 { font-size: 18px; }
.post-body h4 { font-size: 17px; }

/* A post written with a leading "# Heading" used to put a second h1 on a page
   that already prints one from the title, and size alone was doing the work of
   saying which came first. The server now demotes it and marks it, so it keeps
   the size it had while the page is left with a single h1. */
.post-body h2[data-was-h1] { font-size: 22px; }

.post-body ul,
.post-body ol { margin: 0 0 20px; padding-left: var(--s-s); }
.post-body li { margin-bottom: 8px; }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }

.post-body strong { font-weight: 600; }
.post-body em { font-style: italic; }

.post-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.post-body img {
  display: block;
  width: 100%;
  margin: 24px 0;
  border-radius: var(--s-s);
}

.post-body hr { margin: 32px 0; border: 0; border-top: 1px solid var(--n-05); }

.post-body blockquote {
  margin: 0 0 20px;
  padding-left: var(--s-s);
  border-left: 3px solid var(--accent-deep);
  color: var(--muted);
}

@media (max-width: 767px) {
  .blog-top { padding-top: calc(var(--s-4xl) + var(--s-xl)); }
  .post-grid { grid-template-columns: 1fr; }
  /* no mobile step-down: at 22px the largest heading is already close to the
     body size, and shrinking further would close the gap to nothing */
}

/* Tables. The wrapper is what scrolls, so a wide table on a phone slides
   sideways on its own instead of stretching the page. */
.post-body .table-wrap {
  margin: 0 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--body-s);
}

.post-body th,
.post-body td {
  padding: 10px 14px;
  border: 1px solid var(--n-04, #e4e0d9);
  text-align: left;
  vertical-align: top;
}

.post-body th {
  background: var(--bg-02);
  font-weight: 600;
  white-space: nowrap;
}

.post-body tbody tr:nth-child(even) td { background: var(--bg-01); }