/* Pillar-page-specific extensions. Reuses ../style.css. */

.pillar-hero {
  max-width: 880px; margin: 0 auto;
  padding: 64px 40px 40px;
}
.pillar-back {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  text-decoration: none; border: 0;
  display: inline-block; margin-bottom: 28px;
}
.pillar-back:hover { color: var(--red); }
.pillar-tag {
  font-family: var(--mono); font-size: 11px;
  color: var(--red); letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 16px;
}
.pillar-title {
  font-family: var(--serif); font-weight: 700;
  font-size: 52px; line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 18px; color: var(--ink);
}
.pillar-deck {
  font-family: var(--serif); font-weight: 400;
  font-size: 22px; line-height: 1.45;
  color: var(--ink-2); margin: 0;
}
.pillar-body {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 40px 64px;
}
.pillar-body .prose { max-width: 740px; }
.pillar-foot-cta {
  max-width: 740px; margin: 0 auto;
  padding: 48px 40px 56px;
  text-align: center;
}
.pillar-foot-cta h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: 28px; line-height: 1.2;
  margin: 0 0 14px;
}
.pillar-foot-cta p { color: var(--ink-2); margin: 0 0 22px; }
.pillar-foot-cta .cta-btn {
  display: inline-block;
  background: var(--ink); color: var(--paper);
  padding: 14px 26px; border: 0;
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; text-decoration: none;
  transition: background 120ms ease;
}
.pillar-foot-cta .cta-btn:hover { background: var(--red); }

@media (max-width: 768px) {
  .pillar-hero { padding: 36px 24px 28px; }
  .pillar-title { font-size: 34px; }
  .pillar-deck { font-size: 18px; }
  .pillar-body { padding: 40px 24px 48px; }
  .pillar-foot-cta { padding: 36px 24px 44px; }
  .pillar-foot-cta h3 { font-size: 22px; }
}