/* Reset + typography scale. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}
a:hover { color: var(--accent); }

p { margin: 0 0 22px; color: var(--body); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

h1 { font-size: 84px; line-height: 0.98; letter-spacing: -0.03em; }
h2 { font-size: 44px; line-height: 1.05; }
h3 { font-size: 26px; line-height: 1.18; letter-spacing: -0.015em; }

em, i { font-style: italic; }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Italic display accents inside headings render in the accent color. */
h1 em, h2 em, h3 em,
.hero__title em,
.feature-grid__title em,
.archive-head__title em,
.recent__title em,
.cta-band__title em,
.about-hero__title em,
.about-long__title em {
  color: var(--accent);
  font-style: italic;
  font-weight: 300;
}

/* Responsive type scale. */
@media (max-width: 768px) {
  body { font-size: 16px; }
  h1 { font-size: 52px; line-height: 1.0; }
  h2 { font-size: 32px; }
  h3 { font-size: 22px; }
}

/* Common atoms reused across components. */

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow--wide { letter-spacing: 0.42em; }

.meta-cap {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-cap--accent { color: var(--accent); }

.hand-note {
  font-family: var(--font-hand);
  font-size: 22px;
  color: var(--muted);
  line-height: 1.2;
}
.hand-note--accent { color: var(--accent); }

.micro-link {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.micro-link:hover { border-bottom-color: var(--accent); color: var(--accent); }

.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-accent:hover { background: var(--ink); color: var(--bg); }
.btn-accent--lg { padding: 16px 32px; letter-spacing: 0.28em; }

.chip-solid {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 5px 12px;
}

.chip-outline {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 5px 12px;
}
.chip-outline:hover { background: var(--accent); color: var(--bg); }

/* Empty-state fallback when no posts exist yet. */
.empty-state {
  padding: calc(var(--pad-y) * 2) var(--pad-x);
  text-align: center;
  color: var(--muted);
}
.empty-state__title { font-size: 60px; margin-bottom: 18px; }