/* ==========================================================================
   LAYOUT LIB — "journal"
   --------------------------------------------------------------------------
   A calm two-column reading journal. The homepage runs a steady two-up grid
   of equal, quietly-bordered entries; inner pages keep a warm, roomy single
   column. Understated, blog-classic, comfortable — neither dense nor flashy.

   Structure ONLY — no palette HEX, no font families (theme.css owns those).
   Consumes theme color vars with fallbacks:
     --color-bg --color-text --color-accent --color-surface --color-border
   Link order: base.css → theme.css → layout.css (this). Tokens from base.css.
   ========================================================================== */

/* --- Site frame -------------------------------------------------------- */
.site-header {
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}
.site-nav {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.nav-brand {
  font-family: var(--font-serif, var(--font-sans));
  font-weight: 700;
  font-size: var(--text-xl);
  text-decoration: none;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: var(--text-base);
  font-style: italic;
  font-family: var(--font-serif, var(--font-sans));
}
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--color-accent, currentColor); text-decoration: underline; }

/* --- Hero -------------------------------------------------------------- */
.hero {
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
  text-align: center;
}
.hero .container { max-width: var(--container-narrow); }
.hero__title {
  font-family: var(--font-serif, var(--font-sans));
  font-weight: 700;
  margin-inline: auto;
  max-width: 18ch;
}
.hero__lead {
  margin-block-start: var(--space-md);
  margin-inline: auto;
  max-width: var(--measure);
  font-size: var(--text-lg);
  font-style: italic;
  font-family: var(--font-serif, var(--font-sans));
  color: var(--color-accent, currentColor);
}

/* --- Two-up journal grid ---------------------------------------------- */
.articles-section .container { max-width: var(--container-narrow); }
.section-title,
.page-title {
  font-family: var(--font-serif, var(--font-sans));
  text-align: center;
}
.page-hero { padding-block: var(--space-2xl) var(--space-lg); text-align: center; }

.articles-grid {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
  grid-template-columns: 1fr;
}
.article-card {
  padding: var(--space-lg);
  border: var(--border-width) solid var(--color-border, currentColor);
  border-radius: var(--radius-sm);
  background: var(--color-surface, transparent);
}
.article-card__title {
  font-family: var(--font-serif, var(--font-sans));
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.article-card__link { text-decoration: none; }
.article-card__link:hover { color: var(--color-accent, currentColor); text-decoration: underline; }

@media (min-width: 768px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Articles list page ------------------------------------------------ */
.articles-index .container { max-width: var(--container-narrow); }
.article-list {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-direction: column;
}
.article-list__item {
  padding-block: var(--space-md);
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}
.article-list__item:first-child {
  border-block-start: var(--border-width) solid var(--color-border, currentColor);
}
.article-list__link {
  font-family: var(--font-serif, var(--font-sans));
  font-size: var(--text-lg);
  text-decoration: none;
}
.article-list__link:hover { color: var(--color-accent, currentColor); text-decoration: underline; }

/* --- Article body ------------------------------------------------------ */
.prose {
  margin-block: var(--space-2xl);
  font-size: var(--text-lg);
}
.prose h1 {
  font-family: var(--font-serif, var(--font-sans));
  text-align: center;
  margin-block-end: var(--space-xl);
}
.prose :is(h2, h3, h4) {
  font-family: var(--font-serif, var(--font-sans));
}

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  margin-block-start: var(--space-2xl);
  padding-block: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-border, currentColor);
  text-align: center;
}
.footer-copy {
  font-size: var(--text-base);
  font-style: italic;
  font-family: var(--font-serif, var(--font-sans));
}