/*
 * NarraFlect typography system (v2.16.42)
 * ---------------------------------------------------------------------------
 * Loaded after style.css on every page. Earlier versions grew 21 different
 * serif heading sizes, 13 body sizes and 18 label styles one patch at a time.
 * This file restates the type in one place with a small set of roles:
 *
 *   Display   page-level h1                     Source Serif 4
 *   Section   section h2                        Source Serif 4
 *   Title     card / panel h3                   Source Serif 4
 *   Subtitle  small serif titles, FAQ questions Source Serif 4
 *   Lead      the first paragraph under a title Inter
 *   Body      running text                      Inter
 *   Small     notes, meta, helper text          Inter
 *   Label     short uppercase tags              Inter
 *
 * Selectors start with #narraflect (the <body> id) so this one file wins over
 * the many layered class selectors in style.css without !important. Only type
 * properties are set here: no layout, spacing between sections, or colour of
 * backgrounds is changed. Product mock-ups drawn in HTML (deck cards, the
 * checklist cover) keep their own miniature type.
 */

#narraflect {
  --nf-serif: "Source Serif 4 Variable", Georgia, "Times New Roman", serif;
  --nf-sans: "Inter Variable", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale: fluid between a 390px phone and a 1440px desktop. */
  --nf-type-display: clamp(2.625rem, 2.25rem + 2.4vw, 4.25rem);   /* 42 → 68 */
  --nf-type-display-hero: clamp(2.75rem, 2.3rem + 2.2vw, 3.875rem); /* 44 → 62 */
  --nf-type-display-article: clamp(2.375rem, 2rem + 2.2vw, 4rem); /* 38 → 64 */
  --nf-type-section: clamp(2rem, 1.7rem + 1.45vw, 3rem);          /* 32 → 48 */
  --nf-type-title-lg: clamp(1.75rem, 1.5rem + 0.95vw, 2.5rem);    /* 28 → 40 */
  --nf-type-title: clamp(1.375rem, 1.25rem + 0.45vw, 1.75rem);    /* 22 → 28 */
  --nf-type-subtitle: clamp(1.1875rem, 1.12rem + 0.25vw, 1.375rem); /* 19 → 22 */
  --nf-type-lead: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);   /* 17 → 18 */
  --nf-type-body: 1rem;                                          /* 16 */
  --nf-type-small: 0.875rem;                                     /* 14 */
  --nf-type-label: 0.75rem;                                      /* 12 */

  /* Readable greys on the light sections (AA for body text, ≥ 6:1). */
  --nf-ink-strong: #0a1a26;
  --nf-ink-body: #33505c;
  --nf-ink-muted: #4c6470;

  font-family: var(--nf-sans);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
 * Serif headings: one family everywhere, wrapped evenly, never cramped.
 * ------------------------------------------------------------------------- */

#narraflect :is(h1, h2, h3, h4, blockquote, summary, .hero-title, .nf-reveal-line) {
  font-family: var(--nf-serif);
  font-feature-settings: "kern", "liga", "lnum";
}

#narraflect :is(h1, h2, h3, h4) {
  text-wrap: balance;
}

#narraflect :is(p, li, dd, figcaption) {
  text-wrap: pretty;
}

/* Display — page-level h1 */
#narraflect :is(
  .hero-title,
  .product-hero h1,
  .insights-hero-copy h1,
  .about-hero-copy h1,
  .legal-hero h1,
  .content-page-hero h1
) {
  font-size: var(--nf-type-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

/* Toolkit library title: an h2 (the homepage keeps a single h1) set at
   display size. Kept out of the :is() list so its specificity stays local. */
#narraflect .subpage-hero-grid .library-hero-title {
  font-size: var(--nf-type-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
}

/* The homepage headline is set in two deliberate lines. Its size follows the
   width of the copy column so "From scientific depth" never breaks. */
#narraflect .hero .hero-copy {
  container-type: inline-size;
}

#narraflect .hero .hero-title {
  max-width: none;
  font-size: var(--nf-type-display-hero);
}

@supports (font-size: 1cqi) {
  #narraflect .hero .hero-title {
    font-size: clamp(1.75rem, 100cqi / 10.2, 3.875rem);
  }
}

#narraflect .hero-title :is(.hero-title-mask, .hero-title-line, em) {
  letter-spacing: inherit;
}

#narraflect .insight-article-hero h1 {
  font-size: var(--nf-type-display-article);
  font-weight: 420;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* Section — section h2 */
#narraflect :is(
  .homepage-trust h2,
  .toolkit-header h2,
  .framework-heading h2,
  .checklist-copy h2,
  .faq-intro h2,
  .section-heading h2,
  .editorial-charter-intro h2,
  .about-founder-thesis h2,
  .about-principles-intro h2,
  .about-closing-grid h2,
  .about-journey-heading h2,
  .about-fit-heading h2,
  .featured-insight-title,
  .related-insights-heading h2,
  .insights-latest-heading h2
) {
  font-size: var(--nf-type-section);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

#narraflect .about-desktop-line {
  letter-spacing: -0.018em;
}

/* Title — large card and panel h3 */
#narraflect :is(
  .toolkit-slide-copy h3,
  .framework-panel h3,
  .insight-prose h2
) {
  font-size: var(--nf-type-title-lg);
  font-weight: 420;
  line-height: 1.14;
  letter-spacing: -0.014em;
}

/* Title — regular card h3 */
#narraflect :is(
  .framework-control h3,
  .product-copy h3,
  .price-card h3,
  .bundle-component-card h3,
  .about-journey-step h3,
  .insight-card h3,
  .legal-document h2,
  .catalog-copy h3,
  .catalog-bundle-copy h3,
  .recommended-bundle-strip h3,
  .insight-prose h3
) {
  font-size: var(--nf-type-title);
  font-weight: 420;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Subtitle — small serif titles and FAQ questions */
#narraflect :is(
  .framework-tab strong,
  .framework-outcomes h3,
  .framework-outcomes strong,
  .accordion summary,
  .product-faq summary,
  .license-comparison summary strong
) {
  font-family: var(--nf-serif);
  font-size: var(--nf-type-subtitle);
  font-weight: 420;
  line-height: 1.3;
  letter-spacing: -0.006em;
}

/* Pull quotes keep their scale, gain the shared family and spacing. */
#narraflect :is(.framework-panel blockquote, .about-founder-thesis blockquote, .insights-manifesto blockquote) {
  line-height: 1.32;
  letter-spacing: -0.008em;
}

/* ---------------------------------------------------------------------------
 * Running text
 * ------------------------------------------------------------------------- */

/* Lead */
#narraflect :is(
  .hero-lede,
  .product-hero-copy > p,
  .about-hero-lede,
  .featured-insight-summary,
  .homepage-trust-stat p,
  .homepage-trust-copy > p,
  .toolkit-use-description,
  .legal-intro
) {
  font-size: var(--nf-type-lead);
  line-height: 1.6;
  letter-spacing: -0.003em;
}

/* Body */
#narraflect :is(
  .framework-panel > p,
  .checklist-copy > p,
  .checklist-copy li,
  .faq-intro > p,
  .faq-answer p,
  .accordion details p,
  .product-copy > p,
  .check-list li,
  .price-card > p,
  .price-card li,
  .editorial-charter-intro p,
  .about-fit-copy p,
  .about-principles-intro p,
  .key-takeaway p,
  .homepage-trust-boundary,
  .section-heading > p,
  .product-boundary p,
  .legal-document p,
  .legal-document li
) {
  font-size: var(--nf-type-body);
  line-height: 1.65;
}

/* Small */
#narraflect :is(
  .framework-control > p,
  .framework-control small,
  .framework-outcomes p,
  .trust-line,
  .checklist-action-helper,
  .product-compatibility-note,
  .license-comparison-note,
  .product-purchase-disclosure p,
  .editorial-note p,
  .slide-meta > span:not(.status-pill),
  .purchase-quick-info span:not(.product-hero-save),
  .featured-insight-meta,
  .insight-card-meta,
  .content-breadcrumbs,
  .insight-toc a,
  .newsletter-privacy,
  .product-card-contents span,
  .about-entity-statement,
  .about-portrait-context
) {
  font-size: var(--nf-type-small);
  line-height: 1.55;
}

#narraflect .insight-card-copy > p {
  font-family: var(--nf-sans);
  font-size: var(--nf-type-small);
  line-height: 1.6;
}

#narraflect .wp-block-image figcaption {
  font-family: var(--nf-sans);
  font-size: var(--nf-type-small);
  line-height: 1.5;
}

/* Reading greys on light sections */
#narraflect .light-section :is(
  .faq-intro > p,
  .section-heading > p,
  .checklist-copy > p,
  .product-copy > p,
  .price-card > p,
  .editorial-charter-intro p,
  .insight-card-copy > p,
  .about-principles-intro p,
  .about-fit-copy p,
  .homepage-trust-copy > p
) {
  color: var(--nf-ink-body);
}

#narraflect .light-section :is(
  .homepage-trust-boundary,
  .license-comparison-note,
  .product-purchase-disclosure p,
  .checklist-action-helper,
  .insight-card-meta,
  .slide-meta > span:not(.status-pill)
) {
  color: var(--nf-ink-muted);
}

/* ---------------------------------------------------------------------------
 * Labels — one style for every short uppercase tag
 * ------------------------------------------------------------------------- */

#narraflect :is(
  .eyebrow,
  .status-pill,
  .toolkit-number,
  .use-when-label,
  .framework-panel-number,
  .release-badge > span,
  .license-label,
  .legal-hero-meta span,
  .legal-nav > span,
  .checklist-format-note,
  .product-disclosure-label,
  .insight-toc-label,
  .key-takeaway > span,
  .recommended,
  .consultant-roi > span
) {
  font-family: var(--nf-sans);
  font-size: var(--nf-type-label);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Step numbers in the framework read as numbers, not as code. */
#narraflect :is(.framework-tab > span:first-child, .framework-panel-number, .about-principle-item > span) {
  font-family: var(--nf-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Prices: lining figures that line up across the license cards. */
#narraflect :is(.price strong, .product-card-price strong, .hero-price-amount, .purchase-quick-info strong) {
  font-variant-numeric: lining-nums tabular-nums;
}