/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1;
  border-radius: var(--radius-lg);
  cursor: pointer;
}
.btn-lg {
  font-size: 14px;
  padding: 16px 24px;
}
.btn-md {
  font-size: 13px;
  padding: 16px 24px;
}
.btn-sm {
  font-size: 13px;
  padding: 14px 20px;
}
.btn-dark {
  background: var(--color-ink);
  color: var(--color-bg);
}
.btn-light {
  background: var(--color-bg);
  color: var(--color-ink);
}
.nowrap {
  white-space: nowrap;
}

/* Home hero */
.hero {
  padding: var(--space-section-y) var(--space-page-x) var(--space-section-y);
}
.hero__eyebrow {
  font: 400 13px/1 var(--font-sans);
  letter-spacing: .14em;
  color: var(--color-coral);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero__title {
  margin: 0 0 22px;
  font: 800 clamp(36px, 7.5vw, 72px)/1.08 var(--font-sans);
  letter-spacing: -.03em;
  color: var(--color-ink);
  max-width: 820px;
  text-wrap: pretty;
}
.hero__desc {
  margin: 0;
  font: 400 clamp(15px, 2vw, 18px)/1.6 var(--font-sans);
  color: var(--color-body);
  max-width: 560px;
}

/* Signature highlight card (home) */
.highlight-card {
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: center;
}
.highlight-card__eyebrow {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-peach);
  margin-bottom: 16px;
}
.highlight-card__title {
  display: block;
  margin: 0 0 14px;
  font: 800 clamp(24px, 4.5vw, 36px)/1.25 var(--font-sans);
  letter-spacing: -.02em;
  color: var(--color-bg);
}
.highlight-card__desc {
  margin: 0 0 24px;
  font: 400 15px/1.6 var(--font-sans);
  color: rgba(247, 245, 240, .62);
  max-width: 460px;
}
.highlight-card__visual {
  min-height: 180px;
  height: clamp(180px, 28vw, 220px);
  border-radius: var(--radius-md);
}

/* Post grid / card (home list + related posts) */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.post-card {
  cursor: pointer;
}
.post-card__thumb {
  height: 190px;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
}
.post-card__tag {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: 10px;
}
.post-card__title {
  margin: 0 0 10px;
  font: 700 19px/1.3 var(--font-sans);
  color: var(--color-ink);
}
.post-card__meta {
  font: 600 11px/1 var(--font-sans);
  color: var(--color-muted);
}
.post-card--sm .post-card__thumb {
  height: 170px;
}
.post-card--sm .post-card__title {
  font-size: 18px;
  margin-bottom: 8px;
}

.section-heading {
  margin: 0 0 40px;
  font: 800 28px/1.3 var(--font-sans);
  letter-spacing: -.02em;
  color: var(--color-ink);
}
.related-heading {
  margin: 0 0 28px;
  font: 800 22px/1.3 var(--font-sans);
  color: var(--color-ink);
}

/* About page */
.about-hero {
  padding: var(--space-section-y) var(--space-page-x) 64px;
}
.about-hero__title {
  margin: 0 0 28px;
  font: 800 clamp(32px, 6.5vw, 60px)/1.15 var(--font-sans);
  letter-spacing: -.03em;
  color: var(--color-ink);
  max-width: 820px;
  text-wrap: pretty;
}
.about-hero__desc {
  margin: 0;
  font: 400 clamp(15px, 2vw, 18px)/1.7 var(--font-sans);
  color: var(--color-body);
  max-width: 640px;
}
.about-feature-image {
  height: clamp(200px, 32vw, 360px);
  border-radius: var(--radius-lg);
}

.mission-card {
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 48px);
  max-width: 1192px;
}
.mission-card__eyebrow {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-peach);
  margin-bottom: 20px;
}
.mission-card__text {
  margin: 0;
  font: 800 clamp(20px, 4vw, 30px)/1.5 var(--font-sans);
  letter-spacing: -.01em;
  color: var(--color-bg);
  max-width: 820px;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.topic__tag {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: 12px;
}
.topic__title {
  margin: 0 0 10px;
  font: 700 19px/1.3 var(--font-sans);
  color: var(--color-ink);
}
.topic__desc {
  margin: 0;
  font: 400 14px/1.6 var(--font-sans);
  color: var(--color-card-desc);
}

.subscribe-band {
  padding: clamp(40px, 6vw, 64px) clamp(8px, 2vw, 24px);
  background: var(--color-cream-band);
  margin: 0 var(--space-page-x) 96px;
  border-radius: var(--radius-lg);
}
.subscribe-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0 clamp(8px, 2vw, 24px);
}
.subscribe-band__title {
  margin: 0 0 8px;
  font: 800 24px/1.3 var(--font-sans);
  color: var(--color-ink);
}
.subscribe-band__desc {
  margin: 0;
  font: 400 14px/1.6 var(--font-sans);
  color: var(--color-cream-band-text);
}

/* Post detail page */
.post-header {
  padding: clamp(40px, 8vw, 72px) var(--space-page-x) 48px;
  max-width: 760px;
}
.post-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 var(--font-sans);
  color: var(--color-muted);
  margin-bottom: 28px;
}
.post-tag-badge {
  display: inline-block;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-ink);
  padding: 7px 12px;
  border-radius: var(--radius-xs);
}
.post-header__title {
  margin: 0 0 24px;
  font: 800 clamp(28px, 6vw, 48px)/1.2 var(--font-sans);
  letter-spacing: -.02em;
  color: var(--color-ink);
  text-wrap: pretty;
}
.post-header__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 600 13px/1 var(--font-sans);
  color: var(--color-muted);
}
.post-header__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-muted);
  display: inline-block;
}

.post-feature-image {
  height: clamp(200px, 38vw, 440px);
  border-radius: var(--radius-lg);
  max-width: 1192px;
}

.post-layout {
  padding: 0 var(--space-page-x) 96px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  max-width: var(--content-max);
}
.post-body {
  flex: 2 1 480px;
  max-width: 760px;
  font: 400 16px/1.85 var(--font-sans);
  color: var(--color-postbody);
}
.post-body p {
  margin: 0 0 24px;
}
.post-body h2 {
  margin: 48px 0 20px;
  font: 800 26px/1.3 var(--font-sans);
  color: var(--color-ink);
  padding-bottom: 12px;
  border-bottom: 3px solid var(--color-coral);
}
.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 0 0 24px;
}
.post-body code {
  font-family: var(--font-mono);
  background: var(--color-code-bg);
  padding: 2px 6px;
  border-radius: 4px;
}
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 16px;
}
.post-body th,
.post-body td {
  border: 1px solid var(--color-hairline);
  padding: 8px 12px;
  text-align: left;
}
.post-body th {
  background: var(--color-code-bg);
  font-weight: 700;
}
.code-toggle {
  margin: 0 0 24px;
}
.code-toggle summary {
  list-style: none;
  cursor: pointer;
}
.code-toggle summary::-webkit-details-marker {
  display: none;
}
.code-toggle[open] summary {
  margin-bottom: 16px;
}
.code-box {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-postbody);
  resize: vertical;
}

.post-sidebar {
  flex: 1 1 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sidebar-card {
  border-radius: var(--radius-lg);
  padding: 28px;
}
.sidebar-card--dark {
  background: var(--color-ink);
}
.sidebar-card--outline {
  border: 1px solid rgba(0, 0, 0, .1);
}
.sidebar-card__eyebrow {
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sidebar-card--dark .sidebar-card__eyebrow {
  color: var(--color-peach);
}
.sidebar-card--outline .sidebar-card__eyebrow {
  color: var(--color-coral);
}
.sidebar-related__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sidebar-related__links a {
  font: 700 15px/1.4 var(--font-sans);
  color: var(--color-bg);
}
.sidebar-card__desc {
  margin: 0 0 16px;
  font: 400 13px/1.6 var(--font-sans);
  color: var(--color-card-desc);
}