/**
 * iNKPPL Design System — Section Masthead (Editorial Crest)
 *
 * The unified editorial chrome §3 masthead pattern (UNIFIED-VISION).
 * Title-first "crested" composition: oversized display-serif headline with
 * <em> italic gold accent, followed by a single-line mono caps department
 * label prefixed by a gold bullet. Hierarchy carried by scale + weight,
 * not by ornament. Goes above every major page section to give catalog and
 * editorial pages a shared rhythm.
 *
 * v2.0.0 Editorial Crest refactor — 2026-05-09
 * - Retired horizontal hairline (`border-top` + top padding) 
 *     review 2026-05-09 (V1's `02 / FEATURED` rule read as documentation,
 *     not magazine).
 *   - Title now precedes the dept label in HTML order.
 *   - Dept label loses the `NN /` numeric prefix; gains a gold bullet.
 *   - Title scale promoted to --text-4xl mobile / --text-5xl ≥768px.
 *   - Counter-driven numbering retired (data-mast-num attribute is no longer
 *     read; chunks may keep or drop it without effect).
 *
 * Reference: docs/design-system-v2/CHROME-ALTERNATIVES-2026-05-09.md §2 Alt A
 *            docs/design-system-v2/UNIFIED-VISION.md §3
 *
 * --- HTML CONTRACT ---
 *
 *   <header class="section-mast">
 *     <h2 class="section-mast__title">Discover <em>tattoo</em> conventions</h2>
 *     <span class="section-mast__caption">FEATURED</span>
 *   </header>
 *
 *   - .section-mast              block wrapper, owns the section spacing
 *   - .section-mast__title       display serif — supports <em> italic accent (gold)
 *   - .section-mast__caption     mono caps dept label, gold bullet prefix
 *
 * Variants:
 *   - .section-mast--no-divider  retained for backward compatibility (no-op
 *                                now that the divider is gone by default)
 *   - .section-mast--compact     reduce major-section spacing (for nested use)
 *
 * --- TOKENS USED ---
 *   --font-mono, --font-display, --color-text, --color-text-secondary,
 *   --color-brand-accent, --text-2xs, --text-4xl, --text-5xl,
 *   --letter-spacing-caps, --letter-spacing-tight, --line-height-display,
 *   --space-2, --space-3, --space-8, --space-10, --space-16, --space-20.
 *
 * @version 2.0.0
 * @date    2026-05-09
 * @author  design-director (DSv2 Wave 6 — Editorial Crest)
 */

/* .section-mast block-level styling intentionally removed 
   review 2026-05-09: section spacing carried by parent .section-gap /
   per-page wrapper instead of mast-owned margin. Title alone defines
   the visual rhythm. */

/* Variant — no divider (retained for backward compatibility; now a no-op
   because the default mast no longer renders a divider). */
.section-mast--no-divider {
  border-top: 0;
  padding-top: 0;
}

/* Variant — compact (nested mast inside a section, e.g. profile sub-headers) */
.section-mast--compact {
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .section-mast--compact {
    margin-top: var(--space-10);
  }
}

/* Display-serif title — supports `<em>` faux-italic gold accent.
   Promoted to --text-4xl / --text-5xl per Editorial Crest spec.
   Weight 700 — heavy editorial register. EN DM Serif Display ships 400 only
   (browser synthesizes faux-bold; acceptable since DSD body is already heavy);
   RU Literata variable wght axis renders true 700. */
.section-mast__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
  margin: 1rem auto 2rem;
  font-variation-settings: "opsz" 72;
  /* one decisive moment: italic accent picks up gold per UV §3 */
}

@media (min-width: 768px) {
  .section-mast__title {
    font-size: var(--text-4xl);
  }
}

/* Italic accent — synthesized via skew, NOT font-style: italic.
   Reason: Literata true italic glyphs are script-like (calligraphic forms);
   visually too soft against DM Serif Display's heavy display italic on
   Latin. We force NORMAL glyphs and skew to mimic the slant uniformly across
   both fonts — RU and EN look like the same gesture. */
.section-mast__title em {
  font-style: normal;
  font-weight: var(--font-weight-normal);
  color: var(--color-brand-accent);
  display: inline-block;
  /* transform: skewX(-10deg); */
  transform-origin: 0 100%;
  /* Compensate horizontal padding lost to skew on visual right edge */
  margin-right: 0.08em;
  font-variation-settings: "opsz" 72;
}

/* E10 (2026-06-18): light theme — gold em accent on section headings is low
   contrast on white. Drop it to text colour in light; dark theme keeps the
   brand gold (matches the same fix on .listing-hero__title em). */
:root:not(.dark-theme) .section-mast__title em {
  color: var(--color-text);
}

/* Dept label — HIDDEN review 2026-05-09 (visually redundant on
   pages where hero/title already names the content type). Class retained
   for backward compatibility; markup may keep the span without effect. */
.section-mast__caption {
  display: none;
}