/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Layout and typography constants — these don't change between themes */
:root {
  --font-family-base:   system-ui, sans-serif;
  --font-family-serif:  Georgia, serif;
  --max-w:        1100px;
  --section-gap:  5rem;
}

/* Theme tokens live in bold-editorial.css and soft.css, generated by design/generate-tokens.mjs */

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-family-base);
  background: var(--color-background);
  color: var(--color-text-primary);
  line-height: 1.7;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ─── Layout ─── */
.container {
  width: min(var(--max-w), 100% - 2rem);
  margin-inline: auto;
}

.section { padding-block: var(--section-gap); }

/* ─── Nav ─── */
.site-header {
  position: sticky;
  top: 0;
  background: var(--color-surface);
  border-bottom: var(--border-width-ui) solid var(--color-border);
  z-index: 100;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

.nav__logo {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.nav__links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav__links a {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}

.nav__links a:hover { color: var(--color-text-primary); text-decoration: none; }

/* ─── Buttons ─── */
.btn {
  display: inline-block;
  background: var(--color-text-primary);
  color: #fff;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-ui);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  border: var(--border-width-ui) solid var(--color-text-primary);
  cursor: pointer;
  transition: opacity 0.15s;
}

.btn:hover { opacity: 0.82; text-decoration: none; }

.btn--outline {
  background: transparent;
  color: var(--color-text-primary);
}

.btn--outline:hover { background: var(--color-accent-subtle); }

/* ─── App hero ─── */
.app-hero {
  padding-block: 8rem 6rem;
  background: linear-gradient(160deg, var(--color-accent-subtle) 0%, var(--color-background) 60%);
  text-align: center;
}

.app-hero__inner { max-width: 600px; margin-inline: auto; }

.app-hero__title {
  font-family: var(--font-family-serif);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.app-hero__sub {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-bottom: 2.5rem;
}

.app-hero__note {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

/* ─── Store buttons ─── */
.store-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-text-primary);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-ui);
  border: var(--border-width-ui) solid var(--color-text-primary);
  text-decoration: none;
  transition: opacity 0.15s;
  min-width: 160px;
}

.store-btn:hover { opacity: 0.82; text-decoration: none; }

.store-btn__icon { width: 24px; height: 24px; flex-shrink: 0; }

.store-btn__text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.store-btn__sub {
  font-size: 0.68rem;
  opacity: 0.72;
  line-height: 1;
  margin-bottom: 0.15rem;
}

.store-btn__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

/* ─── Section headings ─── */
.section__heading {
  font-family: var(--font-family-serif);
  font-size: 1.75rem;
  margin-bottom: 2.5rem;
}

.section__cta { margin-top: 3rem; }

/* ─── Post grid ─── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
}

.post-card {
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.15s;
}

.post-card:hover { box-shadow: 4px 4px 0 var(--color-border); }

.post-card__date { font-size: 0.78rem; color: var(--color-text-secondary); letter-spacing: 0.05em; }

.post-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }

.post-card__title a { color: var(--color-text-primary); }
.post-card__title a:hover { color: var(--color-accent); text-decoration: none; }

.post-card__excerpt { font-size: 0.9rem; color: var(--color-text-secondary); flex: 1; }

.post-card__link { font-size: 0.85rem; font-weight: 700; margin-top: 0.5rem; letter-spacing: 0.03em; }

/* ─── Newsletter ─── */
.newsletter { background: var(--color-accent); color: #fff; }

.newsletter__inner { max-width: 540px; }

.newsletter h2 {
  font-family: var(--font-family-serif);
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.newsletter p { opacity: 0.85; margin-bottom: 1.5rem; }

.newsletter__form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.newsletter__form input[type="email"] {
  flex: 1;
  min-width: 220px;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-ui);
  border: var(--border-width-ui) solid transparent;
  font-size: 0.9rem;
  font-family: var(--font-family-base);
}

.newsletter__form .btn {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.newsletter__note {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

/* ─── Blog list page ─── */
.page-title {
  font-family: var(--font-family-serif);
  font-size: 2.2rem;
  margin-bottom: 2.5rem;
}

.page-intro { color: var(--color-text-secondary); margin-bottom: 2.5rem; max-width: 580px; }

/* ─── Single post ─── */
.post__header { margin-bottom: 2.5rem; }

.post__section {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.post__title {
  font-family: var(--font-family-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.post__date { font-size: 0.82rem; color: var(--color-text-secondary); }

.post__body {
  max-width: 680px;
  font-size: 1.05rem;
  line-height: 1.8;
}

.post__body h2, .post__body h3 { font-family: var(--font-family-serif); margin-block: 2rem 0.75rem; }
.post__body p { margin-bottom: 1.25rem; }
.post__body ul, .post__body ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post__body blockquote {
  border-left: var(--border-width-card) solid var(--color-text-primary);
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-block: 1.5rem;
}

.post__footer { margin-top: 3rem; padding-top: 2rem; border-top: var(--border-width-ui) solid var(--color-border); }

/* ─── Footer ─── */
.site-footer {
  border-top: var(--border-width-ui) solid var(--color-border);
  padding-block: 2rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .nav__links { gap: 1.25rem; }
  .app-hero { padding-block: 4rem 3rem; }
  .store-buttons { flex-direction: column; align-items: center; }
  .newsletter__form { flex-direction: column; }
  .newsletter__form input[type="email"] { min-width: unset; }
}