/* ==========================================================================
   PCP — editorial typography + reveal primitives
   --------------------------------------------------------------------------
   Two jobs:
     1. A shared display scale so major statements carry real weight, with
        mobile tuned independently rather than just scaled down.
     2. The structural primitives the reveal system in assets/js/reveals.js
        needs (masks, no-JS guard, reduced-motion escape).

   Safety rule that governs this whole file: text is only ever hidden when
   JavaScript is confirmed running (the .pcp-js class is set by an inline
   script in <head>). With no JS, a failed CDN, or reduced motion, every
   [data-reveal] element renders normally and immediately.
   ========================================================================== */

/* --- Display scale ---------------------------------------------------------
   Fluid between the two ends, then re-tuned below 640px so headlines stay
   punchy on a phone instead of collapsing to body-size text. */
.t-display {
  font-size: clamp(2.75rem, 6.6vw, 5.25rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.t-h2 {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.t-h3 {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.t-lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.68;
  max-width: 44rem;
}

@media (max-width: 640px) {
  .t-display { font-size: clamp(2.5rem, 10.5vw, 3.4rem); line-height: 1.04; letter-spacing: -0.01em; }
  .t-h2 { font-size: clamp(2rem, 8.2vw, 2.6rem); line-height: 1.1; }
  .t-h3 { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .t-lede { font-size: 1.0625rem; line-height: 1.62; }
}

/* --- Rhythm / negative space -----------------------------------------------
   Replaces the flat py-24 / lg:py-32 pairing on the non-Home pages so major
   statements get room to land, matching the scale Home already uses. */
/* Tightened in step with --section-y on Home and About (assets/css/site.css),
   so every page keeps one rhythm: was clamp(5.5rem, 9.5vw, 9rem), 88px mobile
   / 144px desktop. */
/* Matched to --section-y in site.css so every page keeps one rhythm and any
   two adjacent sections add up to about an inch. See the note there. */
.section-y {
  padding-top: clamp(1.75rem, 3.4vw, 3rem);    /* 28px mobile → 48px desktop */
  padding-bottom: clamp(1.75rem, 3.4vw, 3rem);
}
.section-y-tight {
  padding-top: clamp(1.5rem, 2.8vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 2.8vw, 2.5rem);
}

/* --- Reveal primitives ------------------------------------------------------ */
.pcp-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.pcp-unit {
  display: inline-block;
  will-change: transform;
}
.pcp-num-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

/* --- No-JS / pre-JS safety guard --------------------------------------------
   Only hide reveal targets once JS is known to be running. Without .pcp-js
   these rules never apply, so the page is fully readable regardless. */
.pcp-js [data-reveal] { opacity: 0; }
.pcp-js [data-reveal="clip"] { opacity: 1; }

/* Reduced motion wins over everything: nothing is hidden, nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .pcp-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .pcp-unit { transform: none !important; }
}

/* ==========================================================================
   One face, one weight — Montserrat, bold
   --------------------------------------------------------------------------
   Requested directly: a single typeface across the whole site, set bold, for
   legibility. This replaces the previous pairing (Cormorant Garamond for the
   display voice, Inter for body) everywhere it was declared — and it was
   declared in roughly sixty places across site.css and the six page
   stylesheets, several of which load AFTER this file.

   Rather than edit every one of those declarations, this is a single sweep at
   the end of a stylesheet every page loads. `!important` is what makes it
   reliable: an important declaration beats any normal one whatever the
   specificity and whatever the load order, so home.css and founder.css cannot
   quietly reinstate the serif further down the cascade. The original
   declarations are left in place and intact, so removing this block restores
   the old pairing exactly.

   Deliberately NOT touched: font-size, line-height, letter-spacing, colour,
   text-transform, margins and padding. Only the family and the weight change.
   font-style is left alone too, so the italic passages stay italic — the
   variable face loaded in the head carries its own true italics.
   ========================================================================== */
*,
*::before,
*::after {
  font-family: Montserrat, ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
}