﻿.site-header {
  border-top: 3px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--surface) 0%, rgba(250, 247, 241, 0.92) 100%);
}

.header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
}

.header-meta__line {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fz-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.brand-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl) 0 var(--space-lg);
}

.brand-block__kicker {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fz-300);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.brand-block__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fz-900);
  letter-spacing: 0.01em;
  line-height: 1.05;
  font-weight: 600;
}

.brand-block__subtitle {
  margin: var(--space-xs) 0 0;
  color: var(--ink-soft);
  max-width: 52ch;
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-lg) 0 var(--space-xl);
  border-top: 1px solid var(--rule);
}

.alphabet-panel {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface-soft), white 40%);
}

.alphabet-panel__inner {
  padding: var(--space-xl) 0 var(--space-2xl);
}

.alphabet-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.alphabet-index {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: var(--space-xl);
}

.alphabet-track-wrap {
  min-width: 0;
}

.alphabet-track {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface), white 20%);
}

.alphabet-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-sm);
}

.site-footer {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface), white 18%);
}

.site-footer__inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-xl) 0 var(--space-2xl);
}

.site-footer__section,
.site-footer__credit {
  min-width: 0;
}

.site-footer__eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-ui);
  font-size: var(--fz-300);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.site-footer__links a,
.site-footer__credit a {
  font-family: var(--font-ui);
  font-size: var(--fz-400);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 0.12rem;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  border-bottom-color: var(--rule-strong);
}

.site-footer__credit {
  align-self: end;
  font-size: var(--fz-300);
  white-space: nowrap;
}

.home-main {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.word-page-main {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.article-page-main {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.painting-page-main {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.archive-page-main {
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.editorial-shell {
  min-width: 0;
}

.home-hero-banner {
  width: var(--container);
  max-width: var(--container);
  margin: 0;
  margin-inline: auto;
  overflow: hidden;
  background: #111;
  border-bottom: 1px solid var(--rule);
}

.home-hero-banner__image {
  display: block;
  width: 100%;
  height: auto;
}

.primary-nav--home-banner {
  padding: var(--space-md) 0 var(--space-lg);
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--surface), white 24%);
}

.editorial-hero {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-xl);
}

.daily-grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "word word word word word word word word painting painting painting painting"
    "word word word word word word word word quote quote quote quote"
    "material material material material material material material material quote quote quote quote";
  gap: var(--space-xl);
}

.feature-card--word {
  grid-area: word;
}

.feature-card--painting {
  grid-area: painting;
}

.feature-card--material {
  grid-area: material;
}

.feature-card--quote {
  grid-area: quote;
}

@media (max-width: 1200px) {
  .daily-grid {
    grid-template-areas:
      "word word word word word word word word word word word word"
      "painting painting painting painting painting painting quote quote quote quote quote quote"
      "material material material material material material material material material material material material";
  }
}

@media (max-width: 1050px) {
  .home-main {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .word-page-main {
    padding-top: var(--space-xl);
  }

  .article-page-main {
    padding-top: var(--space-xl);
  }

  .painting-page-main {
    padding-top: var(--space-xl);
  }

  .archive-page-main {
    padding-top: var(--space-xl);
  }

  .catalog-sidebar {
    order: 2;
  }

  .editorial-shell {
    order: 1;
  }

  .site-footer__inner {
    align-items: start;
    flex-direction: column;
  }

  .site-footer__credit {
    white-space: normal;
  }

  .alphabet-index {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .daily-grid {
    grid-template-areas:
      "word word word word word word word word word word word word"
      "painting painting painting painting painting painting painting painting painting painting painting painting"
      "material material material material material material material material material material material material"
      "quote quote quote quote quote quote quote quote quote quote quote quote";
  }
}

@media (max-width: 760px) {
  .header-meta {
    padding: var(--space-sm) 0;
  }

  .brand-row {
    align-items: start;
    flex-direction: column;
    padding: var(--space-lg) 0;
  }

  .primary-nav {
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    padding-top: var(--space-md);
  }

  .primary-nav.is-open {
    display: flex;
  }

  .alphabet-panel__head {
    flex-direction: column;
    align-items: start;
  }

  .home-main {
    padding-top: var(--space-xl);
  }
}
