/* ==========================================================================
   Type: one scale, four self-hosted faces (see site/fonts). Colours and spacing
   live in styles.css; this file only sets font roles.
   Display: Bodoni Moda. Body: Hanken Grotesk. Labels: IBM Plex Mono.
   Arabic: Noto Naskh Arabic. Minimum size anywhere is 12px.
   ========================================================================== */

:root{
  --font-display:'Bodoni Moda',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-label:'IBM Plex Mono',monospace;
  --font-ar:'Noto Naskh Arabic',serif;
  --fs-display:clamp(44px,6vw,84px);
  --fs-h2:clamp(32px,3.8vw,52px);
  --fs-h3:clamp(22px,2vw,27px);
  --fs-lead:18px;
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:13px;
  --fs-micro:12px;
}

/* Headline clarity (client feedback): Bodoni Moda is a variable font with an
   optical-size axis. Left on auto, a 58px headline draws hairlines that all but
   vanish on phones. Pinning opsz 14 draws sturdier hairlines in the same file.
   Set once on <html> so every Bodoni use inherits it; the other faces have no
   opsz axis and ignore it. */
html{font-variation-settings:'opsz' 14}

body{font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;line-height:1.7}
p{text-wrap:pretty}
.h1,.h2{text-wrap:balance}

/* ----- Display and headings (Bodoni Moda: 400 display, 500 for h3) ----- */
.h1,.article-header h1{font-family:var(--font-display);font-weight:400;font-size:var(--fs-display);line-height:1.08;letter-spacing:-.025em}
.h2,.journal-list-head h2,.postarticle h2{font-family:var(--font-display);font-weight:400;font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.article-header h1{font-size:clamp(36px,4.4vw,60px)}
.postarticle h2{font-size:30px;line-height:1.3;letter-spacing:-.015em}
.journal-list-head h2{font-size:clamp(28px,3vw,36px)}
.stagetitle,.spectitle,.faqq,.def dt,.factname,.posttitle,.tiername,.pricingask-title,.visit-card h3,.usesboxhead,.next-note a{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.015em}
.faqq{font-size:clamp(20px,1.8vw,24px)}
.usescolhead{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.3}
.next-note a{font-size:clamp(24px,3vw,38px);line-height:1.25}
.postcard.lead .posttitle{font-size:clamp(26px,3vw,38px)}
.statnum{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,3.4vw,44px);line-height:1;letter-spacing:-.02em}

/* ----- Body copy ----- */
.subhead,.leadsub,.postlead{font-size:var(--fs-lead);line-height:1.75}
.stagedesc,.specdesc,.def dd,.faqa>p,.postdesc,.factdesc,.visit-card p,.pricingask p,.rung-layers li,.rung-extras li,.includes li{font-size:var(--fs-body);line-height:1.7}
.postarticle p{font-size:18px;line-height:1.8}
.reading-nav a{font-size:var(--fs-small);line-height:1.5}
.cfnote,.brochurenote,.consentnote,.statnote,.licnote,.disc,.footnote,.usescolnote,.usessrc,.refnote,.useslist li,.usesrf,.postrefs,.postdisc,.loctagline,.cell-caption,.page-hero-art figcaption,.brochurefig figcaption,.reflist a,.refcount{font-size:var(--fs-small);line-height:1.7}
.postarticle .postrefs,.postarticle .postdisc{font-size:var(--fs-small)}
.loctagline{font-family:var(--font-display);font-style:italic;font-size:17px}
.cffield input,.cffield select,.cffield textarea,.brochureform input[type=email]{font-family:var(--font-body);font-size:16px;font-weight:400;line-height:1.5}

/* ----- Labels and UI text (IBM Plex Mono 500, sentence case) ----- */
.eyebrow,.stagelbl,.specid,.speccite,.tiernum,.tierflag,.postmeta,.cffield label,.footcol .ct,.statlbl,.refsummary,.refjrnl,.usesdoi,.reading-time,.locaddr,.journal-list-head span{font-family:var(--font-label);font-weight:500;font-size:var(--fs-label);letter-spacing:.04em;line-height:1.6;text-transform:none}
.statlbl{font-weight:400;line-height:1.6}
.usessrc a,.reflist a{font-family:var(--font-body)}
.refjrnl,.usesdoi{font-weight:400}
.eyebrow.ar,.tiernum .ar{font-family:var(--font-ar);font-size:15px;letter-spacing:0;line-height:1.8}
.btnfill,.btnghost,.tiercta,.book,.motion-toggle,.postread,.editorial-link,.faqmore a,.postback,.section-nav a,.navlinks a,.footcol a,.footstatic,.reading-consult{font-family:var(--font-label);font-weight:500;font-size:14px;letter-spacing:.02em;line-height:1.4;text-transform:none}
.motion-toggle{font-size:var(--fs-label)}
.footcol a,.footstatic{font-weight:400}
.wordmark{font-family:var(--font-label);font-weight:500;font-size:var(--fs-micro);letter-spacing:.14em;line-height:1.5;text-transform:uppercase}

/* ----- Counter (protected). Uppercase with wide tracking is for this title only ----- */
.counter .ctitle{font-family:var(--font-label);font-weight:500;font-size:var(--fs-micro);letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.counter .cval{font-family:var(--font-label);font-weight:500;font-size:26px;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.counter .clab{font-family:var(--font-label);font-weight:400;font-size:var(--fs-micro);letter-spacing:.02em;line-height:1.4}
.stagetemp{font-family:var(--font-label);font-weight:500;font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.2}

/* ----- Arabic ----- */
.ar{font-family:var(--font-ar);font-weight:500;line-height:1.9}
.artag{font-size:clamp(24px,2.4vw,28px)}
.leadsub.ar{font-size:20px}
.factdesc .ar,.useslist .ar,.usesrf .ar,.usescolhead .ar,.consentnote .ar{font-size:15px}
.loctagline.ar{font-style:normal;font-size:20px}

@media(max-width:900px){
  .navlinks a,.navlinks a.book{font-size:16px}
}
@media(max-width:760px){
  .stagetemp{font-size:18px}
  .postarticle p{font-size:17px}
  .postarticle h2{font-size:26px}
}