/* Docket Entry law-firm site: typography. Two families from one superfamily, two weights and six sizes, no capitals.
   IBM Plex Serif (headlines, weight 400 only) + IBM Plex Sans (everything else, weights 400 and 600).
   IBM Plex Mono appears in exactly one place: the case number in the docket card.
   Linked after site.css, security.css, onboarding.css and round1.css.

   THE SIX SIZES: H1, H2, H3 (Plex Serif), BODY, UI, CAP (Plex Sans). At 390 wide BODY and UI are both 16px. */

:root{
  --serif:'IBM Plex Serif','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --w-em:600;

  --f-h1:clamp(2.125rem,1.6607rem + 1.9048vw,3.375rem);      /* 34 -> 54   page headline */
  --f-hero:clamp(1.875rem,8.4cqi,3.75rem);                   /* home headline: 8.4% of its own column (30 at 390, 48 at 1440) */
  --f-h2:clamp(1.625rem,1.3464rem + 1.1429vw,2.375rem);      /* 26 -> 38   section headline, "The point" statements */
  --f-h3:clamp(1.3125rem,1.1964rem + .4762vw,1.625rem);      /* 21 -> 26   card and sub-heads */
  --f-body:clamp(1rem,.9768rem + .0952vw,1.0625rem);         /* 16 -> 17   body, lead, label above a headline */
  --t-ui:clamp(.9375rem,1.0232rem - .0952vw,1rem);           /* 16 -> 15   nav, buttons, tables, forms, docket card, small text */
  --t-caption:.8125rem;                                      /* 13 fixed   chips, form help, copyright line: nothing is smaller */

  --f-lead:var(--f-body); --f-list:var(--f-body); --f-card:var(--f-h3); --t-h4:var(--f-h3);
  --f-small:var(--t-ui); --f-eyebrow:var(--f-body); --f-label:var(--t-ui); --f-micro:var(--t-ui);
  --measure:36rem;                                           /* about 62 characters of Plex Sans at 17px */
}

/* ---------- base ---------- */
body{font-family:var(--sans);font-size:var(--f-body);line-height:1.6;font-weight:400;letter-spacing:0}

/* ---------- headlines: Plex Serif 400 ---------- */
.display,.hero .display,.h1,.h2,.h3,.h4,.point-a,.point-b,.defn-term,.prose h2{font-family:var(--serif);font-weight:400;font-synthesis:none}
.display,.hero .display,.h1{font-size:var(--f-h1);line-height:1.08;letter-spacing:-.015em}
.h2,.point-a,.point-b{font-size:var(--f-h2);line-height:1.14;letter-spacing:-.012em}
.h3,.h4,.defn-term,.prose h2{font-size:var(--f-h3);line-height:1.2;letter-spacing:-.008em}
.h4[style*="font-size:26px"]{font-size:var(--f-h3) !important;line-height:1.2;letter-spacing:-.008em}
@supports (width:1cqi){                       /* each of the two hero sentences stays on one line */
  .hero-copy{container-type:inline-size}
  .display,.hero .display{font-size:var(--f-hero)}
}

/* ---------- "The point": one size and weight for the statements, one for the supporting sentences ---------- */
.point-a{color:var(--text)}                   /* both statements the same colour */
.point-list{font-family:var(--sans);font-size:var(--f-body);line-height:1.6;font-weight:400;letter-spacing:0}

/* ---------- text: Plex Sans 400, one size for lead, body and the label above a headline ---------- */
.lead,.body,.card .body,.body[style*="font-size:19px"],.steps p,.ticks li,.prose p,.prose p.first,.defn-text{font-family:var(--sans);font-size:var(--f-body);line-height:1.6;font-weight:400;letter-spacing:0}
.lead{max-width:var(--measure)}
.split>.body,.stack>.body,.stack>p.body,.prose{max-width:var(--measure)}
.body[style*="max-width"]{max-width:var(--measure) !important}
.prose p{line-height:1.7}
.small,.kind-line,.crumbs,.byline,.field .help,.icard .meta,.foot-tag,.foot-nav,.notice,.err,.choice-d,.chain-b{font-size:var(--t-ui);line-height:1.5}
.field .help,.foot-bot{font-size:var(--t-caption)}
.field input,.field select,.field textarea{font-size:var(--f-body)}

/* ---------- small labels: Plex Sans, sentence case, normal tracking, regular weight, body size; no capitals ---------- */
.eyebrow{font-family:var(--sans);font-size:var(--f-body);font-weight:400;letter-spacing:0;line-height:1.4;text-transform:none}
.label,.steps .k,.chain-k,.diag-label,.spec dt,.defn-pos,.defn-foot,.dk-court,.dk-row.th,.dk-agent-head,.tag-their,.arrow,
.dk-no,.dk-row .n,.dk-row .d,.wf-l .mono{font-family:var(--sans);font-size:var(--t-ui);font-weight:400;letter-spacing:0;line-height:1.4;text-transform:none;font-variant-numeric:tabular-nums}
.dk-agent-head span:last-child{letter-spacing:0}
.wf-l .mono{width:24px}
.dk-no{font-family:var(--mono);font-variant-numeric:normal}   /* the only monospace on the site: the case number */
.field input.mono-in{font-family:var(--sans);font-variant-numeric:tabular-nums}

/* ---------- tables ---------- */
.cmp th,.cmp td,.wf-l,.wf-r{font-family:var(--sans);font-size:var(--t-ui);line-height:1.5}
.cmp thead th,.wf-head .wf-l,.wf-head .wf-r{font-family:var(--sans);font-size:var(--t-ui);font-weight:var(--w-em);letter-spacing:0;text-transform:none}
.wf-foot .wf-l,.wf-foot .wf-r{font-family:var(--sans);font-size:var(--f-body);line-height:1.4;letter-spacing:0}

/* ---------- the docket card and the sealed-environment picture: the same two styles ---------- */
.dk-row,.dk-steps li,.dk-note,.dk-done span,.pill,.dk-case,.dk-done b,.node-t,.seal-node,.verdict{font-family:var(--sans);font-size:var(--t-ui)}
.seal-text,.seal-env-t,.seal-out>span,.verdict,.choice-t{font-family:var(--sans);font-size:var(--f-body);line-height:1.3;letter-spacing:0}
.chips,.seal-chips,.node .sub{font-size:var(--t-caption)}
@media (max-width:860px){.seal-text{font-size:var(--t-ui)}.seal-out>span{font-size:var(--t-ui)}}

/* ---------- weight: regular everywhere, one emphasis ---------- */
.nav a,.mobile-nav a,.wf-r,.dk-motion .t,.cmp td.ours,.err,.pill,.prose p.first,.chain-h{font-weight:400}
strong,b,.btn,.textlink,.cmp tbody th,.field label,.err-summary-t,.dk-case,.dk-done b,.choice-t,.choice legend,.seal-node,.seal-text,.seal-env-t,.seal-out>span,
.node-t,.verdict,.foot-nav a.go,.err-list a,.brand-name,.foot-brand,.steps h3,.chain-h{font-weight:var(--w-em)}

/* ---------- titles that sit in running text: Plex Sans, emphasis, body size ---------- */
.steps h3,.chain-h{font-family:var(--sans);font-size:var(--f-body);line-height:1.3;letter-spacing:0}
.brand-name,.foot-brand{font-family:var(--sans);font-size:var(--f-body);line-height:1;letter-spacing:-.01em}

/* ---------- buttons and navigation ---------- */
.btn,.btn-lg,.head-right .btn{font-family:var(--sans);font-size:var(--t-ui);letter-spacing:0}
.textlink{font-size:var(--t-ui)}
.nav a,.mobile-nav a{font-family:var(--sans);font-size:var(--t-ui);letter-spacing:0}
