/* ==========================================================================
   LAYOUT LIB — "editorial"
   --------------------------------------------------------------------------
   A narrow, print-inspired reading layout: a masthead header, a single
   centered measure, and an article index rendered as a stacked run of
   entries divided by hairline rules. Calm, text-first, magazine-masthead feel.

   Structure ONLY. This file owns display/grid/flex/spacing/border-structure
   for the shared class API surface; it carries NO palette HEX and NO font
   families — those come from theme.css. It consumes the theme's named color
   variables with safe fallbacks so it renders even before theme.css loads:

     --color-bg --color-text --color-accent --color-surface --color-border

   Link order (set by templates): base.css → theme.css → layout.css (this).
   Build on base.css tokens (--space-* / --text-* / --measure / --container).
   ========================================================================== */

/* --- Site frame -------------------------------------------------------- */
.site-header {
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}

.site-nav {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  text-align: center;
}

.nav-brand {
  font-family: var(--font-serif, var(--font-sans));
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--color-accent, currentColor); }

@media (min-width: 768px) {
  .site-nav {
    flex-direction: row;
    justify-content: space-between;
    padding-inline: var(--space-xl);
  }
  .nav-links { gap: var(--space-lg); }
}

/* --- Hero (homepage masthead) ----------------------------------------- */
.hero {
  padding-block: var(--space-2xl);
  padding-inline: var(--space-md);
  text-align: center;
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}

.hero__title {
  font-family: var(--font-serif, var(--font-sans));
  max-width: 18ch;
  margin-inline: auto;
}

.hero__lead {
  max-width: var(--measure);
  margin-inline: auto;
  margin-block-start: var(--space-md);
  font-size: var(--text-lg);
  color: var(--color-accent, currentColor);
}

@media (min-width: 768px) {
  .hero { padding-inline: var(--space-xl); }
}

/* --- Article index as stacked editorial entries ----------------------- */
.articles-section .container,
.articles-index .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;
}

/* Homepage cards: one column, divided by rules — no boxes. */
.articles-grid {
  display: flex;
  flex-direction: column;
  margin-block-start: var(--space-xl);
}

.article-card {
  padding-block: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-border, currentColor);
}
.article-card:last-child {
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}

.article-card__title {
  font-family: var(--font-serif, var(--font-sans));
  font-size: var(--text-lg); /* DS-11: h5-sized on mobile */
}
@media (min-width: 768px) {
  .article-card__title { font-size: var(--text-xl); } /* DS-11: h4-sized on desktop */
}

.article-card__link { text-decoration: none; }
.article-card__link:hover { color: var(--color-accent, currentColor); }

/* Articles list page: numbered editorial rows. */
.article-list {
  margin-block-start: var(--space-lg);
  counter-reset: idx;
}

.article-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-start: var(--border-width) solid var(--color-border, currentColor);
}
.article-list__item:last-child {
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}
.article-list__item::before {
  counter-increment: idx;
  content: counter(idx, decimal-leading-zero);
  font-family: var(--font-serif, var(--font-sans));
  font-size: var(--text-sm);
  color: var(--color-accent, currentColor);
  min-width: 2.5ch;
}

.article-list__title {
  margin: 0; /* DS-11: <h4> wrapper — reset browser margin, sizing comes from link */
}
.article-list__link {
  font-family: var(--font-serif, var(--font-sans));
  font-size: var(--text-lg); /* DS-11: h5-sized on mobile */
  text-decoration: none;
}
@media (min-width: 768px) {
  .article-list__link { font-size: var(--text-xl); } /* DS-11: h4-sized on desktop */
}
.article-list__link:hover { color: var(--color-accent, currentColor); }

/* --- Article body ------------------------------------------------------ */
.prose {
  margin-block: var(--space-2xl);
}
.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-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}