/*
 * sporeus-components.css — Component Library v1.0.0
 * Sporeus.com — Turkish Sports Science Blog
 * Session 2 of 8-session theme unification project
 *
 * Structure:
 *   0.  Token import
 *   1.  Typography components
 *   2.  Blockquote components
 *   3.  Callout components
 *   4.  Card components
 *   5.  Navigation components
 *   6.  Form components
 *   7.  Article-specific components
 *   8.  Utility components
 *   9.  Site-wide layout (header / footer)
 *   10. Responsive overrides (≤768px)
 *
 * Naming convention: BEM with sp- prefix
 *   Block:    .sp-card
 *   Element:  .sp-card__title
 *   Modifier: .sp-card--hero
 *
 * RULE: Every design value uses a token variable.
 * Structural exceptions: border-width (1px / 2px / 3px / 4px),
 *   outline-offset (2px), calc() arithmetic, opacity fractions,
 *   and SVG data URIs in background-image.
 */

@import url("../tokens/sporeus-tokens.css");

/* ════════════════════════════════════════════════════════════════════════════
   1. TYPOGRAPHY COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-heading ─────────────────────────────────────────────────────────── */

.sp-heading {
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin-top: 0;
}

.sp-heading--h1,
.sp-heading.is-h1,
h1.sp-heading {
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.sp-heading--h2,
.sp-heading.is-h2,
h2.sp-heading {
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.sp-heading--h3,
.sp-heading.is-h3,
h3.sp-heading {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.sp-heading--h4,
.sp-heading.is-h4,
h4.sp-heading {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.sp-heading--h5,
.sp-heading.is-h5,
h5.sp-heading {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
}

.sp-heading--h6,
.sp-heading.is-h6,
h6.sp-heading {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ── .sp-prose ───────────────────────────────────────────────────────────── */

.sp-prose,
.entry-content {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
}

.sp-prose p,
.entry-content p {
  margin-bottom: var(--space-7);
}

.sp-prose a,
.entry-content a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-default) var(--easing-default);
}

.sp-prose a:hover,
.entry-content a:hover {
  color: var(--color-text-link-hover);
}

.sp-prose strong,
.entry-content strong {
  font-weight: var(--fw-bold);
}

.sp-prose em,
.entry-content em {
  font-style: italic;
}

.sp-prose code,
.entry-content code {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background-color: var(--color-surface-data);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.sp-prose ul,
.sp-prose ol,
.entry-content ul,
.entry-content ol {
  padding-left: var(--space-8);
}

.sp-prose li,
.entry-content li {
  margin-bottom: var(--space-3);
}

/* ── .sp-lead ────────────────────────────────────────────────────────────── */

.sp-lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

/* ── .sp-caption ─────────────────────────────────────────────────────────── */

.sp-caption {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* ── .sp-label ───────────────────────────────────────────────────────────── */

.sp-label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── .sp-inline-code ─────────────────────────────────────────────────────── */

.sp-inline-code {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background-color: var(--color-surface-data);
  color: var(--color-text-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. BLOCKQUOTE COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Base reset for all sp-quote ─────────────────────────────────────────── */

.sp-quote {
  margin: 0;
  padding: 0;
}

/* ── .sp-quote--editorial (pull quote) ───────────────────────────────────── */

.sp-quote--editorial {
  border-left: 3px solid var(--color-action-secondary);
  padding-left: var(--space-7);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
}

.sp-quote--editorial cite {
  display: block;
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-style: normal;
}

/* ── .sp-quote--citation (academic) ─────────────────────────────────────── */

.sp-quote--citation {
  background-color: var(--color-surface-quote);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  position: relative;
}

.sp-quote--citation::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: var(--fs-60);
  color: var(--c-gold-500);
  line-height: 1;
  position: absolute;
  top: var(--space-3);
  left: var(--space-5);
  pointer-events: none;
}

.sp-quote--citation::after {
  content: '\201D';
  font-family: var(--font-display);
  font-size: var(--fs-60);
  color: var(--c-gold-500);
  line-height: 1;
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-5);
  pointer-events: none;
}

.sp-quote--citation p {
  padding-left: var(--space-7);
  padding-right: var(--space-7);
}

.sp-quote--citation cite {
  display: block;
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  font-style: normal;
  padding-left: var(--space-7);
}

/* ── .sp-quote--athlete (inspirational) ─────────────────────────────────── */

.sp-quote--athlete {
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
}

.sp-quote--athlete cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  font-style: normal;
  margin-top: var(--space-5);
  opacity: 0.8;
}

/* Dark mode: athlete quote flips to card style */
[data-theme="dark"] .sp-quote--athlete {
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

[data-theme="dark"] .sp-quote--athlete cite {
  opacity: 1;
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════════
   3. CALLOUT COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-callout — base ──────────────────────────────────────────────────── */

.sp-callout {
  display: flex;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  border-left-style: solid;
  border-left-width: 3px;
}

.sp-callout__icon {
  font-size: var(--fs-20);
  flex-shrink: 0;
  line-height: var(--lh-snug);
}

.sp-callout__body {
  flex: 1;
  min-width: 0;
}

.sp-callout__title {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
  margin-top: 0;
}

.sp-callout__text {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.sp-callout__citation {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

/* ── .sp-callout--info ───────────────────────────────────────────────────── */

.sp-callout--info {
  background-color: var(--c-info-100);
  border-left-color: var(--c-info-600);
  color: var(--c-info-text);
}

[data-theme="dark"] .sp-callout--info {
  background-color: rgba(37, 99, 235, 0.12);
  border-left-color: var(--c-info-600);
  color: var(--color-text-primary);
}

/* ── .sp-callout--warning ────────────────────────────────────────────────── */

.sp-callout--warning {
  background-color: var(--c-warning-100);
  border-left-color: var(--c-warning-600);
  color: var(--c-warning-text);
}

[data-theme="dark"] .sp-callout--warning {
  background-color: rgba(217, 119, 6, 0.12);
  border-left-color: var(--c-warning-600);
  color: var(--color-text-primary);
}

/* ── .sp-callout--tip ────────────────────────────────────────────────────── */

.sp-callout--tip {
  background-color: var(--c-success-100);
  border-left-color: var(--c-success-600);
  color: var(--c-success-text);
}

[data-theme="dark"] .sp-callout--tip {
  background-color: rgba(22, 163, 74, 0.12);
  border-left-color: var(--c-success-600);
  color: var(--color-text-primary);
}

/* ── .sp-callout--method ─────────────────────────────────────────────────── */

.sp-callout--method {
  background-color: var(--color-surface-data);
  border-left-color: var(--color-border-subtle);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .sp-callout--method {
  background-color: var(--color-surface-data);
  border-left-color: var(--color-border-default);
}

/* ── .sp-callout--science (MOST USED) ───────────────────────────────────── */

.sp-callout--science {
  background-color: var(--color-surface-data);
  border-left-color: var(--c-navy-200);
  color: var(--color-text-secondary);
}

[data-theme="dark"] .sp-callout--science {
  background-color: var(--color-surface-data);
  border-left-color: var(--c-navy-600);
  color: var(--color-text-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   4. CARD COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-card — base ─────────────────────────────────────────────────────── */

.sp-card {
  background-color: var(--color-surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-default) var(--easing-default);
  display: flex;
  flex-direction: column;
}

.sp-card:hover {
  box-shadow: var(--shadow-md);
}

.sp-card__image {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
}

.sp-card__image-placeholder {
  aspect-ratio: 16 / 9;
  width: 100%;
  background-color: var(--color-surface-data);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--fs-36);
}

/* ── .sp-card--hero (featured post) ─────────────────────────────────────── */

.sp-card--hero .sp-card__content {
  padding: var(--space-8);
}

.sp-card--hero .sp-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.sp-card--hero .sp-card__excerpt {
  font-size: var(--fs-18);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-card--hero .sp-card__meta {
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.sp-card--hero .sp-card__read-more {
  margin-top: var(--space-5);
}

/* ── .sp-card (default — grid) ───────────────────────────────────────────── */

.sp-card .sp-card__content {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sp-card .sp-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-card .sp-card__excerpt {
  font-size: var(--fs-16);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sp-card .sp-card__meta {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.sp-card .sp-card__read-more-text {
  display: block;
  font-size: var(--fs-13);
  color: var(--color-text-link);
  margin-top: var(--space-4);
  text-decoration: none;
}

.sp-card .sp-card__read-more-text:hover {
  color: var(--color-text-link-hover);
}

/* ── .sp-card--compact (related posts, sidebar) ──────────────────────────── */

.sp-card--compact {
  flex-direction: row;
  align-items: flex-start;
}

.sp-card--compact .sp-card__image {
  width: 80px;
  min-width: 80px;
  height: 80px;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
}

.sp-card--compact .sp-card__content {
  padding: var(--space-5);
  flex: 1;
}

.sp-card--compact .sp-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text-primary);
  margin: 0;
}

.sp-card--compact .sp-card__meta {
  font-size: var(--fs-12);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* ── .sp-card--chapter (EŞİK book chapters) ──────────────────────────────── */

.sp-card--chapter {
  border-left: 4px solid var(--color-action-secondary);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-7);
  padding-left: var(--space-7);
  overflow: visible;
  transition: box-shadow var(--duration-default) var(--easing-default);
}

.sp-card--chapter:hover {
  box-shadow: var(--shadow-md);
}

.sp-card--chapter .sp-card__chapter-number {
  /* uses .sp-label styles — apply .sp-label on the element */
  display: block;
  margin-bottom: var(--space-2);
}

.sp-card--chapter .sp-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.sp-card--chapter .sp-card__description {
  font-size: var(--fs-15);
  color: var(--color-text-secondary);
  margin-top: var(--space-3);
  line-height: var(--lh-relaxed);
}

.sp-card--chapter .sp-card__page-count {
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* ── .sp-card--calculator ─────────────────────────────────────────────────── */

.sp-card--calculator .sp-card__icon-area {
  width: 48px;
  height: 48px;
  background-color: var(--color-surface-data);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-24);
  margin: var(--space-6) auto var(--space-4);
}

.sp-card--calculator .sp-card__content {
  padding: 0 var(--space-6) var(--space-6);
  text-align: center;
}

.sp-card--calculator .sp-card__title {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.sp-card--calculator .sp-card__description {
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}

.sp-card--calculator .sp-card__calc-link {
  display: inline-block;
  font-size: var(--fs-14);
  color: var(--color-text-link);
  margin-top: var(--space-4);
  text-decoration: none;
}

.sp-card--calculator .sp-card__calc-link:hover {
  color: var(--color-text-link-hover);
}

/* ── .sp-card--glossary ──────────────────────────────────────────────────── */

.sp-card--glossary {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  align-items: flex-start;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-5) 0;
  overflow: visible;
}

.sp-card--glossary:hover {
  box-shadow: none;
}

.sp-card--glossary:last-child {
  border-bottom: none;
}

.sp-card--glossary .sp-card__term {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  min-width: 160px;
  flex-shrink: 0;
}

.sp-card--glossary .sp-card__body {
  flex: 1;
}

.sp-card--glossary .sp-card__definition {
  font-size: var(--fs-15);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.sp-card--glossary .sp-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

/* ════════════════════════════════════════════════════════════════════════════
   5. NAVIGATION COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-breadcrumb ──────────────────────────────────────────────────────── */

.sp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sp-breadcrumb__item::after {
  content: '›';
  color: var(--color-border-default);
  margin-left: var(--space-2);
  line-height: 1;
}

.sp-breadcrumb__item:last-child::after {
  display: none;
}

.sp-breadcrumb__item:last-child .sp-breadcrumb__link,
.sp-breadcrumb__item:last-child span {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}

.sp-breadcrumb__link {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-default) var(--easing-default);
}

.sp-breadcrumb__link:hover {
  color: var(--color-text-link);
}

/* ── .sp-pagination ──────────────────────────────────────────────────────── */

.sp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
}

.sp-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-default) var(--easing-default);
}

.sp-pagination__btn:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-link);
}

.sp-pagination__btn--active {
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
  border-color: transparent;
}

.sp-pagination__btn--active:hover {
  background-color: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}

.sp-pagination__btn--prev,
.sp-pagination__btn--next {
  padding: var(--space-3) var(--space-6);
  gap: var(--space-2);
}

/* ── .sp-lang-switch ─────────────────────────────────────────────────────── */

.sp-lang-switch {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.sp-lang-switch__btn {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--duration-default) var(--easing-default);
  font-family: var(--font-body);
}

.sp-lang-switch__btn--active {
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
}

.sp-lang-switch__btn--inactive {
  background-color: transparent;
  color: var(--color-text-muted);
}

.sp-lang-switch__btn--inactive:hover {
  color: var(--color-text-primary);
  background-color: var(--color-action-ghost-hover);
}

/* ── .sp-toc ─────────────────────────────────────────────────────────────── */

.sp-toc {
  background-color: var(--color-surface-data);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.sp-toc__header {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  margin-top: 0;
}

.sp-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sp-toc__list .sp-toc__list {
  padding-left: var(--space-5);
}

.sp-toc__list .sp-toc__list .sp-toc__link {
  font-size: var(--fs-14);
}

.sp-toc__item {
  margin: 0;
}

.sp-toc__link {
  display: block;
  font-size: var(--fs-15);
  color: var(--color-text-link);
  line-height: var(--lh-relaxed);
  padding: var(--space-1) 0;
  text-decoration: none;
  transition: color var(--duration-default) var(--easing-default);
}

.sp-toc__link:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════════
   6. FORM COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-field ───────────────────────────────────────────────────────────── */

.sp-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── .sp-label-text ──────────────────────────────────────────────────────── */

.sp-label-text {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  display: block;
}

/* ── .sp-input ───────────────────────────────────────────────────────────── */

.sp-input {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--duration-default) var(--easing-default),
              outline var(--duration-default) var(--easing-default);
  appearance: none;
  -webkit-appearance: none;
}

.sp-input:focus {
  outline: 2px solid var(--color-action-secondary);
  outline-offset: 2px;
  border-color: transparent;
}

.sp-input::placeholder {
  color: var(--color-text-muted);
}

/* ── .sp-select ──────────────────────────────────────────────────────────── */

.sp-select {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  padding: var(--space-3) var(--space-4);
  padding-right: var(--space-9);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  cursor: pointer;
  transition: border-color var(--duration-default) var(--easing-default);
}

.sp-select:focus {
  outline: 2px solid var(--color-action-secondary);
  outline-offset: 2px;
  border-color: transparent;
}

/* ── .sp-btn — base ──────────────────────────────────────────────────────── */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-default) var(--easing-default);
  white-space: nowrap;
  line-height: var(--lh-normal);
}

/* ── .sp-btn--primary ────────────────────────────────────────────────────── */

.sp-btn--primary {
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--space-7);
}

.sp-btn--primary:hover {
  background-color: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}

/* Dark mode: gold becomes primary CTA */
[data-theme="dark"] .sp-btn--primary {
  background-color: var(--color-action-secondary);
  color: var(--color-action-primary);
}

[data-theme="dark"] .sp-btn--primary:hover {
  background-color: var(--color-action-secondary-hover);
}

/* ── .sp-btn--secondary ──────────────────────────────────────────────────── */

.sp-btn--secondary {
  background-color: var(--color-action-secondary);
  color: var(--color-action-primary);
  padding: var(--space-4) var(--space-7);
}

.sp-btn--secondary:hover {
  background-color: var(--color-action-secondary-hover);
}

/* ── .sp-btn--ghost ──────────────────────────────────────────────────────── */

.sp-btn--ghost {
  background-color: transparent;
  color: var(--color-text-link);
  border: 1px solid var(--color-border-default);
  padding: var(--space-4) var(--space-7);
  font-weight: var(--fw-medium);
}

.sp-btn--ghost:hover {
  background-color: var(--color-action-ghost-hover);
  border-color: var(--color-border-strong);
}

/* ── .sp-calculator-output ───────────────────────────────────────────────── */

.sp-calculator-output {
  background-color: var(--color-surface-data);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-top: var(--space-6);
  border-top: 2px solid var(--color-action-secondary);
}

.sp-calculator-output__value {
  font-family: var(--font-mono);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.sp-calculator-output__label {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.sp-calculator-output__copy {
  margin-top: var(--space-4);
  font-size: var(--fs-13);
  padding: var(--space-2) var(--space-5);
}

/* ── .sp-email-capture ───────────────────────────────────────────────────── */

.sp-email-capture {
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
}

[data-theme="dark"] .sp-email-capture {
  background-color: var(--color-surface-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

.sp-email-capture__heading {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  margin: 0;
}

.sp-email-capture__sub {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  opacity: 0.85;
  margin-top: var(--space-3);
}

[data-theme="dark"] .sp-email-capture__sub {
  opacity: 1;
  color: var(--color-text-secondary);
}

.sp-email-capture__form {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.sp-email-capture__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  box-sizing: border-box;
  appearance: none;
}

.sp-email-capture__input::placeholder {
  color: var(--color-text-muted);
}

.sp-email-capture__input:focus {
  outline: 2px solid var(--color-action-secondary);
  outline-offset: 2px;
  border-color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   7. ARTICLE-SPECIFIC COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-article-header ──────────────────────────────────────────────────── */

.sp-article-header {
  margin-bottom: var(--space-10);
}

.sp-article-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

.sp-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  align-items: center;
}

.sp-article-header__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sp-article-header__avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.sp-article-header__reading-time {
  font-style: italic;
}

/* ── .sp-figure ──────────────────────────────────────────────────────────── */

.sp-figure {
  display: block;
  margin: var(--space-10) 0;
}

.sp-figure img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: block;
}

.sp-figure figcaption {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  margin-top: var(--space-3);
  text-align: center;
}

/* ── .sp-data-callout ────────────────────────────────────────────────────── */

.sp-data-callout {
  display: inline-flex;
  flex-direction: column;
  background-color: var(--color-surface-data);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  vertical-align: top;
}

.sp-data-callout__label {
  /* Apply .sp-label class on this element — extend it here */
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.sp-data-callout__value-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
}

.sp-data-callout__value {
  font-family: var(--font-mono);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--color-action-primary);
  line-height: 1;
}

.sp-data-callout__unit {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
  margin-left: var(--space-2);
  align-self: flex-end;
  padding-bottom: var(--space-1);
}

/* ── .sp-author-card ─────────────────────────────────────────────────────── */

.sp-author-card {
  display: flex;
  gap: var(--space-6);
  background-color: var(--color-surface-data);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-top: var(--space-12);
  align-items: flex-start;
}

.sp-author-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.sp-author-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.sp-author-card__bio {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-2);
}

.sp-author-card__links {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.sp-author-card__link {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-default) var(--easing-default);
}

.sp-author-card__link:hover {
  color: var(--color-text-link);
}

/* ════════════════════════════════════════════════════════════════════════════
   8. UTILITY COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-tag ─────────────────────────────────────────────────────────────── */

.sp-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  background-color: var(--color-surface-data);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.sp-tag--gold {
  background-color: var(--c-gold-100);
  color: var(--c-gold-700);
}

.sp-tag--navy {
  background-color: var(--c-navy-100);
  color: var(--c-navy-700);
}

[data-theme="dark"] .sp-tag--navy {
  background-color: rgba(26, 40, 71, 0.4);
  color: var(--c-navy-200);
}

/* ── .sp-badge ───────────────────────────────────────────────────────────── */

.sp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  background-color: var(--color-action-primary);
  color: var(--color-text-inverse);
  line-height: 1;
}

/* ── .sp-link-arrow ──────────────────────────────────────────────────────── */

.sp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--color-text-link);
  text-decoration: none;
  transition: all var(--duration-default) var(--easing-default);
}

.sp-link-arrow:hover {
  color: var(--color-text-link-hover);
  gap: var(--space-3);
}

.sp-link-arrow__arrow {
  transition: transform var(--duration-default) var(--easing-default);
}

.sp-link-arrow:hover .sp-link-arrow__arrow {
  transform: translateX(var(--space-1));
}

/* ── .sp-progress-bar / .sp-reading-progress ─────────────────────────────── */

.sp-progress-bar,
.sp-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: var(--color-action-secondary);
  z-index: var(--z-sticky);
  transition: width var(--duration-fast) var(--easing-out);
  pointer-events: none;
}

/* ── .sp-dark-toggle ─────────────────────────────────────────────────────── */

.sp-dark-toggle {
  position: fixed;
  bottom: var(--space-9);
  right: var(--space-8);
  z-index: var(--z-toast);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-card);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--duration-default) var(--easing-default);
  font-size: var(--fs-16);
}

.sp-dark-toggle:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-1px);
}

/* ── .sp-share-strip ─────────────────────────────────────────────────────── */

.sp-share-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
}

.sp-share-strip__label {
  /* uses .sp-label styles — apply the class */
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.sp-share-strip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: var(--fs-14);
  transition: opacity var(--duration-default) var(--easing-default);
  color: var(--c-neutral-0);
}

.sp-share-strip__btn:hover {
  opacity: 0.85;
}

/* Social brand backgrounds — these are brand identity colors, not design tokens.
   Per project rule: structural/brand exceptions for social share buttons. */
.sp-share-strip__btn--x       { background-color: #000000; }
.sp-share-strip__btn--wa      { background-color: #25D366; }
.sp-share-strip__btn--li      { background-color: #0A66C2; }
.sp-share-strip__btn--fb      { background-color: #1877F2; }

/* ── .sp-esik-cta ────────────────────────────────────────────────────────── */

.sp-esik-cta {
  background-color: var(--color-bg-sunken);
  border-left: 4px solid var(--color-action-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  margin: var(--space-8) 0;
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

[data-theme="dark"] .sp-esik-cta {
  background-color: var(--color-surface-card);
  border-left-color: var(--color-action-primary);
}

.sp-esik-cta__icon {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--c-navy-700);
  flex-shrink: 0;
  line-height: 1;
}

[data-theme="dark"] .sp-esik-cta__icon {
  color: var(--color-action-primary);
}

.sp-esik-cta__text {
  flex: 1;
  min-width: 0;
}

.sp-esik-cta__title {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.sp-esik-cta__desc {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  color: var(--color-text-secondary);
  margin: 0;
}

.sp-esik-cta__link {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════════════════════
   9. SITE-WIDE LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-site-header ─────────────────────────────────────────────────────── */

.sp-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg-base);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-4) 0;
  transition: box-shadow var(--duration-default) var(--easing-default);
}

.sp-site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

.sp-site-header__inner {
  max-width: var(--container-full);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.sp-site-header__logo {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.sp-site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex: 1;
}

.sp-site-header__nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-default) var(--easing-default);
}

.sp-site-header__nav-link:hover,
.sp-site-header__nav-link.is-active {
  color: var(--color-text-primary);
}

.sp-site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: auto;
}

/* ── .sp-site-footer ─────────────────────────────────────────────────────── */

.sp-site-footer {
  background-color: var(--c-navy-900);
  color: var(--color-text-inverse);
  padding-top: var(--space-14);
  padding-bottom: var(--space-10);
}

.sp-site-footer__inner {
  max-width: var(--container-full);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.sp-site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.sp-site-footer__col-heading {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-5);
  margin-top: 0;
}

.sp-site-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sp-site-footer__nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-15);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color var(--duration-default) var(--easing-default);
}

.sp-site-footer__nav-link:hover {
  color: var(--c-neutral-0);
}

.sp-site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  margin-top: var(--space-10);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ════════════════════════════════════════════════════════════════════════════
   10. RESPONSIVE OVERRIDES (≤768px)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Typography scale */
  .sp-heading--h1, h1.sp-heading { font-size: var(--fs-36); }
  .sp-heading--h2, h2.sp-heading { font-size: var(--fs-30); }
  .sp-heading--h3, h3.sp-heading { font-size: var(--fs-20); }

  /* Article header */
  .sp-article-header__title { font-size: var(--fs-36); }

  /* Author card */
  .sp-author-card {
    flex-direction: column;
  }
  .sp-author-card__avatar {
    width: 60px;
    height: 60px;
  }

  /* EŞİK CTA */
  .sp-esik-cta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Email capture form */
  .sp-email-capture__form {
    flex-direction: column;
  }

  /* Cards: hero title scale */
  .sp-card--hero .sp-card__title { font-size: var(--fs-24); }

  /* Glossary card stacks vertically */
  .sp-card--glossary {
    flex-direction: column;
    gap: var(--space-3);
  }
  .sp-card--glossary .sp-card__term {
    min-width: unset;
  }

  /* Footer grid: 2 columns then 1 */
  .sp-site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Site header nav: hide nav links on small screens (hamburger assumed elsewhere) */
  .sp-site-header__nav {
    display: none;
  }

  /* Pagination wraps */
  .sp-pagination {
    flex-wrap: wrap;
  }

  /* Share strip wraps */
  .sp-share-strip {
    gap: var(--space-3);
  }

  /* Compact card: no image */
  .sp-card--compact .sp-card__image {
    display: none;
  }
}

@media (max-width: 480px) {
  .sp-site-footer__grid {
    grid-template-columns: 1fr;
  }

  .sp-email-capture {
    padding: var(--space-7);
  }

  .sp-site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   11. GAP COMPONENTS (added v1.1.0)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── .sp-hero (full-width page/section hero — navy bg) ───────────────────── */

.sp-hero {
  background: var(--c-navy-900);
  color: var(--color-text-inverse);
  padding: var(--space-14) var(--space-8);
  text-align: center;
}
.sp-hero__label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-gold-400);
  margin-bottom: var(--space-4);
}
.sp-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-60);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-inverse);
  margin: 0 auto var(--space-6);
  max-width: var(--container-wide);
}
.sp-hero__title em { font-style: italic; color: var(--c-gold-400); }
.sp-hero__sub {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: rgba(232,226,217,.8);
  max-width: var(--measure-default);
  margin: 0 auto var(--space-9);
}
.sp-hero__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-10);
  margin-bottom: var(--space-9);
}
.sp-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.sp-hero__stat strong {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  color: var(--c-gold-400);
}
.sp-hero__stat span {
  font-size: var(--fs-13);
  color: rgba(232,226,217,.7);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.sp-hero__ctas {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .sp-hero { padding: var(--space-12) var(--space-5); }
  .sp-hero__title { font-size: var(--fs-36); }
  .sp-hero__stats { gap: var(--space-7); }
  .sp-hero__ctas { flex-direction: column; align-items: stretch; }
}

/* ── .sp-chapter-header (EŞİK book chapter header) ──────────────────────── */

.sp-chapter-header {
  border-bottom: 2px solid var(--color-border-subtle);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-10);
}
.sp-chapter-header__book-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.sp-chapter-header__number {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--color-action-secondary);
  margin-bottom: var(--space-3);
}
.sp-chapter-header__title {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}
.sp-chapter-header__progress {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}
.sp-chapter-header__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border-subtle);
  border-radius: var(--radius-full);
  max-width: 200px;
}
.sp-chapter-header__progress-fill {
  height: 100%;
  background: var(--color-action-secondary);
  border-radius: var(--radius-full);
}
@media (max-width: 768px) {
  .sp-chapter-header__title { font-size: var(--fs-30); }
}

/* ── .sp-chapter-nav (prev/next chapter navigation) ─────────────────────── */

.sp-chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-12);
}
.sp-chapter-nav__btn {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  max-width: 45%;
}
.sp-chapter-nav__btn--next { text-align: right; margin-left: auto; }
.sp-chapter-nav__direction {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sp-chapter-nav__title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  color: var(--color-text-link);
  line-height: var(--lh-snug);
  transition: color var(--duration-default) var(--easing-default);
}
.sp-chapter-nav__btn:hover .sp-chapter-nav__title {
  color: var(--color-text-link-hover);
}
@media (max-width: 768px) {
  .sp-chapter-nav { flex-direction: column; }
  .sp-chapter-nav__btn { max-width: 100%; }
  .sp-chapter-nav__btn--next { text-align: left; margin-left: 0; }
}

/* ── .sp-author-hero (centered full-page author layout) ──────────────────── */

.sp-author-hero {
  text-align: center;
  padding: var(--space-12) var(--space-8);
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.sp-author-hero__avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-6);
}
.sp-author-hero__avatar-fallback {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  margin: 0 auto var(--space-6);
}
.sp-author-hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.sp-author-hero__title {
  font-size: var(--fs-16);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.sp-author-hero__bio {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

/* ── .sp-table (responsive data table) ──────────────────────────────────── */

.sp-table-wrapper {
  overflow-x: auto;
  margin: var(--space-8) 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-15);
  background: var(--color-surface-card);
}
.sp-table thead {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
}
.sp-table th {
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.sp-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  vertical-align: top;
}
.sp-table tbody tr:last-child td { border-bottom: none; }
.sp-table tbody tr:hover { background: var(--color-bg-elevated); }
.sp-table--data thead { background: var(--c-navy-800); }
.sp-table--comparison th:first-child { min-width: 160px; }
[data-theme="dark"] .sp-table thead { background: var(--c-navy-700); }
[data-theme="dark"] .sp-table td { border-color: var(--color-border-subtle); }
[data-theme="dark"] .sp-table tbody tr:hover { background: var(--color-bg-sunken); }

/* ── .sp-jump-nav (horizontal category jump navigation) ─────────────────── */

.sp-jump-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-action-primary);
  padding: var(--space-3) var(--space-7);
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 0;
}
.sp-jump-nav::-webkit-scrollbar { display: none; }
.sp-jump-nav__link {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,.7);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--duration-fast) var(--easing-default);
}
.sp-jump-nav__link:hover { color: var(--c-gold-400); }
.sp-jump-nav__sep {
  color: rgba(255,255,255,.2);
  font-size: var(--fs-12);
  align-self: center;
}
[data-theme="dark"] .sp-jump-nav { background: var(--c-navy-800); }

/* ── .sp-avatar-fallback (initial-text avatar when no photo) ─────────────── */

.sp-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  user-select: none;
}
.sp-avatar-fallback--sm { width: 32px; height: 32px; font-size: var(--fs-14); }
.sp-avatar-fallback--md { width: 48px; height: 48px; font-size: var(--fs-18); }
.sp-avatar-fallback--lg { width: 80px; height: 80px; font-size: var(--fs-30); }
.sp-avatar-fallback--xl { width: 120px; height: 120px; font-size: var(--fs-48); }
[data-theme="dark"] .sp-avatar-fallback { background: var(--color-action-secondary); color: var(--c-navy-900); }

/* ── .sp-countdown-strip (full-width launch countdown banner) ────────────── */

.sp-countdown-strip {
  background: linear-gradient(135deg, var(--c-navy-800), var(--c-navy-900));
  color: var(--color-text-inverse);
  padding: var(--space-4) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--fs-15);
}
.sp-countdown-strip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--c-gold-400);
  flex-shrink: 0;
  animation: sp-pulse 2s ease-in-out infinite;
}
.sp-countdown-strip__text { color: rgba(232,226,217,.85); }
.sp-countdown-strip__days {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--c-gold-400);
}
.sp-countdown-strip__link {
  color: var(--c-gold-300);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  transition: color var(--duration-fast) var(--easing-default);
}
.sp-countdown-strip__link:hover { color: var(--c-gold-100); }
@keyframes sp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.2); }
}
@media (max-width: 768px) {
  .sp-countdown-strip { flex-wrap: wrap; text-align: center; gap: var(--space-2); }
}

/* ── .sp-glossary-header (compact glossary entry header) ─────────────────── */

.sp-glossary-header {
  border-bottom: 2px solid var(--color-action-secondary);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
}
.sp-glossary-header__term {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.sp-glossary-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-14);
  color: var(--color-text-muted);
}
.sp-glossary-header__category {
  font-weight: var(--fw-semibold);
  color: var(--color-action-secondary);
}
.sp-glossary-header__back {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-13);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--easing-default);
}
.sp-glossary-header__back:hover { color: var(--color-text-link); }
@media (max-width: 768px) {
  .sp-glossary-header__term { font-size: var(--fs-24); }
}