/* ==========================================================================
   LAYOUT LIB — "swiss"
   --------------------------------------------------------------------------
   International Typographic Style: oversized type, a strict numbered index,
   generous whitespace, hairline rules, no boxes. The articles read as a
   confident table-of-contents. Minimal, type-led, gallery-quiet.

   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-text, currentColor);
}
.site-nav {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
  padding-block: var(--space-md);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.nav-brand {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--color-accent, currentColor); }
@media (min-width: 768px) {
  .site-nav { padding-inline: var(--space-xl); }
}

/* --- Hero: oversized statement ---------------------------------------- */
.hero {
  padding-block: var(--space-3xl) var(--space-2xl);
  padding-inline: var(--space-md);
}
.hero .container { max-width: var(--container); }
.hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.5rem + 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.hero__lead {
  margin-block-start: var(--space-lg);
  max-width: var(--measure);
  font-size: var(--text-lg);
}
@media (min-width: 768px) {
  .hero { padding-inline: var(--space-xl); }
}

/* --- Numbered typographic index --------------------------------------- */
.section-title,
.page-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding-block-end: var(--space-sm);
  border-block-end: var(--border-width) solid var(--color-text, currentColor);
}
.page-hero { padding-block: var(--space-2xl) 0; }

.articles-grid {
  display: flex;
  flex-direction: column;
  margin-block-start: 0;
  counter-reset: idx;
}
.article-card {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--border-width) solid var(--color-border, currentColor);
}
.article-card::before {
  counter-increment: idx;
  content: counter(idx, decimal-leading-zero);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent, currentColor);
  min-width: 3ch;
}
.article-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg); /* DS-11: h5-sized on mobile */
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}
@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 (same numbered system) ------------------------ */
.articles-index .container { max-width: var(--container); }
.article-list {
  margin-block-start: 0;
  counter-reset: idx;
}
.article-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding-block: var(--space-md);
  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-sans);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent, currentColor);
  min-width: 3ch;
}
.article-list__title { margin: 0; } /* DS-11: <h4> wrapper reset */
.article-list__link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg); /* DS-11: h5-sized on mobile */
  letter-spacing: -0.01em;
  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-3xl) var(--space-2xl); }
.prose h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-block-end: var(--space-xl);
}
.prose :is(h2, h3) {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- Footer ------------------------------------------------------------ */
.site-footer {
  margin-block-start: var(--space-3xl);
  padding-block: var(--space-lg);
  border-block-start: var(--border-width) solid var(--color-text, currentColor);
}
.footer-copy {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}