/* ===================================================================
   About page
   =================================================================== */

.nk-ab-hero { padding: 96px 0 68px; text-align: center; }
.nk-ab-hero-inner { max-width: 700px; margin: 0 auto; }
.nk-ab-title { font-size: 42px; line-height: 1.3; font-weight: 700; }
.nk-ab-sub { color: var(--text-dim); font-size: 16.5px; line-height: 1.7; max-width: 540px; margin: 22px auto 0; }
.nk-ab-credit { color: var(--text-quiet); font-size: 13px; margin-top: 26px; letter-spacing: 0.02em; }

/* ---------- Narrative ---------- */

.nk-ab-narrative { display: grid; grid-template-columns: 1fr 2fr; gap: 70px; padding-top: 80px; }
.nk-ab-sticky { position: sticky; top: 120px; }
.nk-ab-narrative-title { font-size: 28px; margin-top: 16px; line-height: 1.4; }

.nk-ab-story p { color: var(--text-dim); font-size: 17.5px; line-height: 1.9; margin: 0 0 26px; }
.nk-ab-story-bright { color: var(--text) !important; }

.nk-ab-dropcap::first-letter {
  font-family: 'Cinzel', serif; font-size: 68px; font-weight: 700; color: var(--gold-bright);
  float: left; line-height: 0.8; margin: 8px 10px 0 0;
}

/* ---------- What real means here ---------- */

.nk-ab-real { text-align: center; }
.nk-ab-real-inner { max-width: 700px; }
.nk-ab-real-title { font-size: 30px; line-height: 1.5; font-weight: 600; }

/* ---------- CTA ---------- */

.nk-ab-cta { padding: 20px 0 110px; text-align: center; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .nk-ab-hero { padding: 56px 0 44px; }
  .nk-ab-title { font-size: 30px; }

  .nk-ab-narrative { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
  .nk-ab-sticky { position: static; }
  .nk-ab-story p { font-size: 16px; }

  .nk-ab-real { padding: 56px 0; }
  .nk-ab-real-title { font-size: 22px; }

  .nk-ab-cta { padding: 12px 0 64px; }
  .nk-ab-cta .nk-btn { width: 100%; }
}