/* =========================================================
   ALPEKIN TYPOGRAPHY LAYER
   ---------------------------------------------------------
   Purpose:
   Global readable typography for pages, Journal content,
   legal pages, marketing pages, and future service pages.

   Brand direction:
   Editorial, grounded, premium, precise, not loud.
   ========================================================= */


/* Shared heading behavior. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-4);
  color: var(--text-strong);
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-tight);
  text-wrap: balance;
}


/* Heading scale. */
h1 {
  font-size: var(--fs-fluid-h1);
  font-weight: var(--weight-bold);
}

h2 {
  font-size: var(--fs-fluid-h2);
  font-weight: var(--weight-semibold);
}

h3 {
  font-size: var(--fs-fluid-h3);
  font-weight: var(--weight-semibold);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--weight-medium);
}

h5 {
  font-size: var(--fs-h5);
  font-weight: var(--weight-medium);
}

h6 {
  font-size: var(--fs-h6);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: var(--text-case-label);
}


/* Paragraphs use generous rhythm for long reading. */
p {
  margin: 0 0 var(--space-5);
}

strong,
b {
  font-weight: var(--weight-bold);
}

em,
i {
  font-style: italic;
}

small,
.small {
  font-size: var(--fs-small);
  line-height: 1.55;
}


/* Captions are useful for images, article notes, legal notes. */
.caption {
  color: var(--text-muted-dark);
  font-size: var(--fs-xs);
  font-style: italic;
  line-height: 1.5;
}


/* Kicker: small uppercase label above titles. */
.kicker {
  display: inline-block;
  margin-block-end: var(--space-3);
  color: var(--link);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--ls-kicker);
  line-height: 1.2;
  text-transform: var(--text-case-label);
}


/* Lead text for page intros and article openings. */
.lead {
  color: var(--text-muted-dark);
  font-size: clamp(1.2rem, 0.6vw + 1rem, var(--fs-lead));
  line-height: 1.65;
}


/* Large editorial title. */
.article-title {
  margin: 0 0 var(--space-6);
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 6vw, var(--fs-article-title));
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading-tight);
}


/* General section heading. */
.section-title {
  margin: 0 0 var(--space-5);
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-size: clamp(var(--fs-section-title-min), 2.4vw, var(--fs-section-title-max));
  font-weight: var(--weight-semibold);
  line-height: var(--lh-heading);
}


/* =========================================================
   PROSE SYSTEM
   ---------------------------------------------------------
   Used heavily by Journal, legal pages, and long-form content.
   ========================================================= */

.prose {
  max-width: var(--content-measure);
}

.prose--narrow {
  max-width: var(--content-measure-narrow);
}

.prose--wide {
  max-width: var(--content-measure-wide);
}

.prose > * + * {
  margin-block-start: var(--space-5);
}

.prose p {
  margin-block-end: 0;
}

.prose ul,
.prose ol {
  margin-block: var(--space-5);
  padding-inline-start: var(--space-7);
}

.prose li + li {
  margin-block-start: var(--space-2);
}


/* Blockquotes should feel ceremonial but readable. */
blockquote,
.prose blockquote {
  margin-block: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border-inline-start: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface-muted);
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 1vw + 1rem, 1.7rem);
  line-height: 1.45;
}


/* RTL blockquote shape mirrors the LTR shape. */
[dir="rtl"] blockquote,
[dir="rtl"] .prose blockquote {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}


/* Inline and block code support future technical/scientific content. */
code {
  padding: 0.12em 0.32em;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--text-strong);
  font-size: 0.92em;
}

pre {
  overflow-x: auto;
  margin-block: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}

pre code {
  padding: 0;
  background: transparent;
  color: inherit;
}


/* Simple text helpers. */
.text-muted {
  color: var(--text-muted-dark);
}

.text-accent {
  color: var(--accent-primary);
}

.text-strong {
  color: var(--text-strong);
}