/* ============================================================
   Casel Marketing — Typography (R6)

   Two-face register system. Apoc-set classes carry voice; Inter-set
   classes carry content. Never mix faces within a sentence.

   Display-face classes:
     .ap-wordmark-hero    — 184/84 hero wordmark, uppercase, line-height 0.92
     .ap-headline         — 88/44 section headlines, mixed case, line-height 0.98
     .ap-stat             — 144/48 §03 stat lines
     .ap-micro            — 13px microlabel, uppercase, +0.28em tracking, Casel Red
     .ap-tier             — 28/24 pricing tier names, uppercase
     .ap-num              — 88/48 pricing big numbers, Casel Red
     .ap-quote            — 56/26 §05 testimonial body (Regular weight)
     .ap-wordmark-footer-it / -en — footer wordmark scales per language

   Body-face role: everything else inherits Inter from base.
   ============================================================ */

/* ---------- Apoc-set: hero wordmark ---------- */
.ap-wordmark-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-wordmark-hero);
  line-height: var(--lh-wordmark);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--color-fg);
}
.ap-wordmark-hero > span {
  display: block;
}

/* ---------- Apoc-set: section headlines ---------- */
.ap-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-headline-section);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-headline);
  color: var(--color-fg);
}

/* ---------- Apoc-set: §03 stat lines ---------- */
.ap-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  letter-spacing: var(--tracking-stat);
  color: var(--color-fg);
}
.ap-stat > span {
  display: block;
}

/* ---------- Apoc-set: microlabel (masthead category mark) ---------- */
.ap-micro {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-microlabel);
  line-height: 1;
  letter-spacing: var(--tracking-microlabel);
  text-transform: uppercase;
  color: var(--color-red);
  display: inline-block;
  position: relative;
}
/* underline draws in on reveal */
.ap-micro::after {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  margin-top: 8px;
  background: var(--color-red);
  transition: width 700ms var(--ease-out);
}
.is-revealed .ap-micro::after,
.ap-micro.is-revealed::after {
  width: 56px;
}

/* ---------- Apoc-set: pricing ---------- */
.ap-tier {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-pricing-tier);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-fg);
  line-height: 1;
}
.ap-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-pricing-num);
  letter-spacing: -0.02em;
  color: var(--color-red);
  line-height: 1;
}

/* ---------- Apoc-set: §05 quote (Regular weight, literary) ---------- */
.ap-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-fg);
}

/* ---------- Apoc-set: footer wordmark — per language ---------- */
.ap-wordmark-footer {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-wordmark);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--color-fg);
  white-space: nowrap;
}
/* IT: 132px — long phrase, deliberately bleeds past the right viewport edge */
:root[lang='it'] .ap-wordmark-footer {
  font-size: var(--fs-wordmark-footer-it);
}
/* EN: 240px — short phrase, fits inside the viewport */
:root[lang='en'] .ap-wordmark-footer {
  font-size: var(--fs-wordmark-footer-en);
}
.ap-wordmark-footer > span {
  display: block;
}

/* ---------- Red period accent — used at end of editorial moments ---------- */
.red-period {
  color: var(--color-red);
}

/* ---------- Body face: prose blocks ---------- */
.body-prose {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--color-muted);
  line-height: var(--lh-body);
  max-width: 42ch;
}