/* =========================================================================
   Noko — blog/article typography. Loaded by blog posts IN ADDITION to
   style.css. Keeps article pages readable with just text, small images,
   lists, tables, and captioned figures — no JS required for any of it.
   ========================================================================= */

.article {
  max-width: 720px;          /* comfortable reading measure */
  margin: 0 auto;
  padding: 8px 18px 40px;
}

.article .post-meta {
  color: var(--text-muted);
  font-size: .85rem;
  margin: 0 0 6px;
  text-align: center;
}
.article h1 {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.15;
  text-align: center;
  margin: 0 0 18px;
  color: var(--text);
}
.article h2 {
  font-family: var(--font-head);
  font-size: 1.4rem;
  margin: 1.8em 0 .5em;
  color: var(--accent);
}
.article h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; color: var(--accent-2); }
.article p { margin: 0 0 1.1em; }
.article a { color: var(--link); text-underline-offset: 2px; }

.article ul, .article ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.article li { margin: .3em 0; }

.article blockquote {
  margin: 1.2em 0;
  padding: .4em 1em;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-muted);
}

/* Captioned figure (image OR gif). Keep media small + inline. */
.article figure {
  margin: 1.4em auto;
  max-width: 100%;
  text-align: center;
}
.article figure img {
  margin: 0 auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  /* cap size so big media never dominates the reading column */
  max-height: 460px;
  width: auto;
}
.article figcaption {
  margin-top: 8px;
  font-size: .82rem;
  color: var(--text-muted);
}

/* Simple, responsive table. */
.article .table-scroll { overflow-x: auto; margin: 1.4em 0; }
.article table {
  border-collapse: collapse;
  width: 100%;
  font-size: .92rem;
}
.article th, .article td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  text-align: left;
}
.article thead th { background: var(--surface-2); color: var(--accent); }
.article tbody tr:nth-child(even) { background: var(--surface); }

/* Back-to-home link at the top of a post. */
.article .back {
  display: inline-block;
  margin-bottom: 14px;
  font-size: .9rem;
  text-decoration: none;
  color: var(--text-muted);
}
.article .back:hover { color: var(--accent); }