/* ============================================================
   TYPE SYSTEM
   Loaded last. Defines nine roles and points every component at one.

   The problem it fixes: each component used to declare its own clamp(), so the
   same nominal size rendered with four to eight different line-heights
   depending on where it landed — the body face at 13px existed in eight variants.
   Here, size + line-height + tracking travel together as one role, and no
   component sets them independently.

   Taxonomy borrowed in shape from Material 3 (display / title / body / label)
   and trimmed to what an editorial site actually needs. Values are ours: a
   scale is only correct for the content it was measured against.
   ============================================================ */

:root{
  /* ---- display: the one statement on the page ---- */
  --t-display-size:clamp(2rem, 1.05rem + 4.2vw, 4.25rem);      /* 32 -> 68 */
  --t-display-lh:1.08;
  --t-display-ls:-0.02em;

  /* ---- title-1: standfirsts, theses, pull quotes ---- */
  --t-1-size:clamp(1.375rem, 1.1rem + 1.25vw, 2.375rem);       /* 22 -> 38 */
  --t-1-lh:1.22;
  --t-1-ls:-0.022em;

  /* ---- title-2: card titles, section headings ---- */
  --t-2-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);          /* 20 -> 28 */
  --t-2-lh:1.18;
  --t-2-ls:-0.018em;

  /* ---- title-3: sub-headings, article titles, quotes ---- */
  --t-3-size:clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);        /* 17 -> 22 */
  --t-3-lh:1.25;
  --t-3-ls:-0.012em;

  /* ---- body: all running prose ---- */
  --t-body-size:clamp(1rem, 0.96rem + 0.19vw, 1.1875rem);      /* 16 -> 19 */
  --t-body-lh:1.55;

  /* ---- body-sm: captions, card copy, table cells ---- */
  --t-sm-size:clamp(0.8125rem, 0.78rem + 0.14vw, 0.9375rem);   /* 13 -> 15 */
  --t-sm-lh:1.5;

  /* ---- label: uppercase metadata, eyebrows, kickers ---- */
  --t-label-size:clamp(0.75rem, 0.72rem + 0.11vw, 0.8125rem);  /* 12 -> 13 */
  --t-label-lh:1.4;
  --t-label-ls:0.14em;

  /* ---- wordmark ---- */
  --t-mark-size:clamp(21px, 1rem + 0.75vw, 26px);
}

/* ---------- role definitions ----------
   THE RULE: Merriweather is reserved for the single largest statement on a page
   — the hero h1 and the case study h1. Everything else is Inter, and weight
   carries the hierarchy (600 for titles, 500 for emphasis, 400 for prose).

   This is the arrangement the NYT uses and the one the shadcn case-study block
   uses: one workhorse doing the structural work, the display face kept rare so
   it still lands. To widen the serif back out, add selectors to the .t-display
   and .t-1 rules — that is the only place the choice is made.

   Every rule sets family, weight, size, line-height and tracking together.
   Nothing outside this file may set font-size on text. */

/* .thesis sits here rather than with the standfirsts: the Approach statement is
   a display moment in its own right, not a subtitle. */
.t-display,
.rd-hero h1, h1.name, .demo-h1,
.thesis,
h1.cs-title, .contact h1{
  font-family:var(--display);font-weight:500;
  font-size:var(--t-display-size);
  line-height:var(--t-display-lh);
  letter-spacing:var(--t-display-ls);
}

.thesis{
  font-size:clamp(1.375rem, 1.1rem + 1.25vw, 2.375rem);   /* title-1 size */
  line-height:1.22;letter-spacing:-0.018em;
}
/* How I work: title-1 from the scale, not a size of its own */
.practices-band .thesis{
  font-size:var(--t-1-size);line-height:var(--t-1-lh);letter-spacing:var(--t-1-ls);
}

/* title-1 — the role line, standfirsts, pull quotes.
   Sans at 500: a statement, but no longer competing with the h1. */
.t-1,
.rd-hero .role, .demo-role,
.cs-lede,
.pullquote, .section .body p.pullquote,
.section .body h4.callout,
.contact h3{
  font-family:var(--body);font-weight:500;
  font-size:var(--t-1-size);
  line-height:1.28;
  letter-spacing:-0.012em;
}

/* title-2 — card titles and section headings. Sans 600. */
.t-2,
.section > h3, .section .body h3,
.case h3, .demo-card h4,
blockquote.quote h3,
.status h3,
.stats p.stat, .section .body p.stat,
.contact-row h4, .contact-linkedin{
  font-family:var(--body);font-weight:500;
  font-size:var(--t-2-size);
  line-height:1.2;
  letter-spacing:-0.014em;
}

/* title-3 — article titles, claim headings, quotes. Sans 500, smaller. */
.t-3,
.art-title, .idx-title,
.claim h3,
.section .body .card h4, .card h4{
  font-family:var(--body);font-weight:500;
  font-size:var(--t-3-size);
  line-height:1.28;
  letter-spacing:-0.01em;
}

.t-body,
.section .body p,
.case-desc, .art-desc, .idx-desc,
.demo-body, .demo-desc,
.claim p, .status p, .exp-role,
ul.points li, blockquote.quote p{
  font-family:var(--body);font-weight:400;
  font-size:var(--t-body-size);
  line-height:var(--t-body-lh);
  letter-spacing:normal;
}

.t-sm,
figcaption, .section .body .caption,
.section .body .card p, .trow p,
footer, .rd-foot .inner{
  font-family:var(--body);font-weight:400;
  font-size:var(--t-sm-size);
  line-height:var(--t-sm-lh);
  letter-spacing:normal;
}

.t-label,
.tier-label, .case-meta, .cs-meta, .art-kind,
.exp-note, .exp-when, .idx-meta,
.contact .label, .contact-row p.label,
.rd-id-line, .eyebrow, .rd-id p,
.spec-num, .spec-tag, .spec-note{
  font-family:var(--label, var(--body));font-weight:500;
  font-size:var(--t-label-size);
  line-height:var(--t-label-lh);
  letter-spacing:var(--t-label-ls);
  text-transform:uppercase;
}

.t-mono, code, .trow code, .section .body code{
  font-family:'DM Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:0.94em;line-height:inherit;letter-spacing:normal;
}

.mark, .rd-top .mark{
  font-family:var(--mark);font-weight:400;
  font-size:var(--t-mark-size);
  line-height:1.4;letter-spacing:-0.02em;
}

/* ---------- exceptions, stated rather than drifted ----------
   The specimen page is comparing faces, so its demo blocks keep whatever the
   block declares rather than inheriting the site's serif-only-on-h1 rule. */
.spec .demo-h1{font-family:var(--display);}
.spec .demo-role,.spec .demo-card h4{font-family:var(--body);}

/* Four strays the first pass missed, now given roles rather than left to drift:
   the checklist item, the nav link, the contact clock, and the card standfirst
   (folded into body — it was the only 1.45 line-height on the site). */
/* the checklist / emphasis line inside a section body — not card titles, which
   are title-3, and not the callout, which is title-1 */
.section .body > h4{
  font-family:var(--body);font-weight:500;
  font-size:var(--t-body-size);line-height:var(--t-body-lh);
  letter-spacing:normal;text-transform:none;
}
.rd-top nav a, .top nav a{
  font-family:var(--body);font-weight:500;
  font-size:var(--t-sm-size);line-height:var(--t-sm-lh);
  letter-spacing:normal;text-transform:none;
}
.contact-row time{
  font-family:'DM Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  font-size:var(--t-sm-size);line-height:var(--t-sm-lh);letter-spacing:normal;
}
.case-desc{line-height:var(--t-body-lh);}

/* Table cells and the failure-mode grid run at body-sm without the uppercase
   the label role carries. */
.trow p{text-transform:none;letter-spacing:normal;}
.trow.thead p{
  font-family:var(--body);font-weight:500;
  font-size:var(--t-body-size);line-height:var(--t-body-lh);
  color:var(--ink);text-transform:none;letter-spacing:normal;
}

/* ---------- body rhythm ----------
   These live here because type.css loads last, which is the only way they can
   win. `.section .body p{margin:0}` scores (0,2,1); the generic sibling rule
   `> * + *` scores (0,2,0), so it loses on specificity no matter what order it
   is written in — every transition INTO a paragraph or heading collapsed to
   zero. Naming the element in the sibling selector ties the specificity, and
   loading last breaks the tie. */
.section .body > * + p,
.section .body > * + h3,
.section .body > * + h4,
.section .body > * + ul,
.section .body > * + blockquote{margin-top:clamp(40px,4.6vw,72px);}

/* consecutive paragraphs sit tight; a heading hugs the text it introduces */
.section .body > p + p{margin-top:20px;}
.section .body > h3 + p,
.section .body > h3 + ul{margin-top:16px;}
.section .body > p + h4.callout{margin-top:40px;}

/* the pull quote gets air on both sides */
.section .body > * + p.pullquote,
.section .body > p.pullquote + *{margin-top:clamp(40px,4.6vw,72px);}

/* a caption belongs to the figure above it */
figure figcaption{margin-top:10px;}

/* Inter ships tabular figures as an option. Metrics, table cells and stats are
   the only numerals on the site that have to line up in a column. */
.metrics .num, table td, .stat{font-variant-numeric:tabular-nums;}