/* Procuro type system. Four styles only: Display, Title, Body, Caption.
   Loaded last; overrides every earlier font rule. Change sizes here and nowhere else. */
:root{
  --f-serif:"Source Serif 4",Georgia,serif;
  --f-label:"Montserrat",system-ui,sans-serif;
  /* Display and Title scale with the screen: full size on large monitors, smaller on laptops,
     and Display also shrinks on short screens so a hero or the menu fits. */
  --display-size:clamp(64px, min(7.6vw, 12.5vh), 120px); --display-lh:.95;  --display-ls:-.035em;
  --title-size:clamp(32px, 1.5vw + 20px, 44px);    --title-lh:1.12;   --title-ls:-.015em;
  --body-size:18px;     --body-lh:1.6;
  --caption-size:11px;  --caption-lh:1.5;  --caption-ls:.16em;
}
@media (max-width:960px){
  :root{--display-size:54px;--title-size:30px;--body-size:17px}
}

/* BODY: the default for every block of running text */
body,
main p, main li, main dd, main dt, main td, main th, main summary, main label, main figcaption,
main input, main select, main textarea, main blockquote,
.site-foot p, .site-foot li, .site-foot a, .menu p, .menu-meta p,
.md, .ix-use, .s-sub, .s-lede, .close-lede, .brief-text, .hero-lede, .s-next-line, .panel-text, .body,
.sf-addr, .sf-tag, .s-note, .s-body, .grade-use, .grade-note, .which-all, .tag-row, .tag-row span, .s-points li, .w-b, main caption, html body .s-done, .bfacts-grid dd{
  font-family:var(--f-serif)!important; font-size:var(--body-size)!important; line-height:var(--body-lh)!important;
  font-weight:400!important; letter-spacing:0!important; text-transform:none!important; font-style:normal!important;
}

/* Inline text takes the style of the block it sits in (bold stays bold for emphasis) */
main b, main strong, main em, main i, main small, main sup, main sub,
main a:not([class]), main span:not([class]), .site-foot span:not([class]), .menu span:not([class]){
  font-family:inherit!important; font-size:inherit!important; line-height:inherit!important;
  letter-spacing:inherit!important; text-transform:inherit!important;
}
main sub, main sup{font-size:.7em!important;line-height:0!important}
main b, main strong, .site-foot b{font-weight:600!important}

/* TITLE: every heading, question, statement and figure */
main h2:not(.label), main h3:not(.label), main h4:not(.label),
.h2, .s-h2, .reel-h, .map-h, .slabs-h, .s-band-text, .thesis-text, .thesis-text .w,
.panel-line, .ix-name, .c-name, .proof-n, .s-fig, .apps li, .desk b, .grade-name, .st-h, .w-t,
main summary, .s-faq summary, .s-faq summary span, .faq summary span, .door-q{
  font-family:var(--f-serif)!important; font-size:var(--title-size)!important; line-height:var(--title-lh)!important;
  font-weight:300!important; letter-spacing:var(--title-ls)!important; text-transform:none!important; font-style:normal!important;
}
.s-band-text b, .grade-name b, .thesis-text b{font-weight:300!important}

/* DISPLAY: heroes, panel names, the menu, the closing line and the big marquees */
html body :is(.hero-title, .hero-title .ln, .hero-title .ln > span, .s-title, .s-title .ln, .s-title .ln > span,
.panel-name, .s-next-name, .plain-title, .close-h, .close-h .ln, .close-h .ln > span,
.menu-links .ml, .menu-links .ml span, .fin-in span, .fin-in i, .marquee-in span){
  font-family:var(--f-serif)!important; font-size:var(--display-size)!important; line-height:var(--display-lh)!important;
  font-weight:300!important; letter-spacing:var(--display-ls)!important; text-transform:none!important;
}
.hero-title em{font-style:italic!important}

/* CAPTION: labels, eyebrows, buttons, tags, form labels, table headers and fine print */
html body :is(.label, .label *, h1.label, h2.label, .crumb, .crumb *, .pill, .pill span, .fld label, main label,
.s-chips li, .s-chips li a, .tbl thead th, .st-n, .ix-n, .t-n, .fam-n, .mn, main figcaption, .eng-tag, .stamp,
.burger-label, .sf-h, .fam-cta, .grade-link, .stn a, .stn-n, .kids a, .s-link, .desk span, .tag-hd, .tag-hd span,
.draft, .sf-addr b, .skip, .s-small, .sf-base, .sf-base span, .sf-base a, .slabs-names li, .grade-hd, .grade-hd span,
.cfacts dt, .facts-list dt, .bfacts-grid dt, .hero-scroll, .reel-count, .w-n, .panel-cta, .s-next-link > .label){
  font-family:var(--f-label)!important; font-size:var(--caption-size)!important; line-height:var(--caption-lh)!important;
  font-weight:600!important; letter-spacing:var(--caption-ls)!important; text-transform:uppercase!important; font-style:normal!important;
}

/* MENU: names never clip. The name column takes its natural width, the description wraps beside it,
   and the six names shrink with screen height so the whole menu fits without scrolling. */
.menu-links{container-type:inline-size}
.menu-links a{grid-template-columns:52px max-content minmax(0,1fr);align-items:center}
.menu-links .ml{padding-right:22px}
.menu-links .md{text-align:right;justify-self:end;max-width:30ch}
html body .menu-links .ml, html body .menu-links .ml span{font-size:clamp(40px, min(var(--display-size), calc((100vh - 140px) / 6.4 - 19px)), 120px)!important}
@container (max-width:600px){
  .menu-links a{grid-template-columns:52px minmax(0,1fr)}
  .menu-links .md{display:none}
}
@media (max-width:960px){
  .menu-links a{grid-template-columns:40px minmax(0,1fr)}
  html body .menu-links .ml, html body .menu-links .ml span{font-size:var(--display-size)!important}
}

/* DESCENDERS: Display lines sit in reveal masks (overflow hidden) with a tight line height.
   Give every mask room below the baseline for g, p and y, without changing the line spacing. */
html body .ln, html body .menu-links .ml{padding-bottom:.22em!important;margin-bottom:-.22em!important}

/* PAGE H1: the sentence that says what the page sells is set as a Title, above the Display line. */
html body :is(h1.s-kicker, h1.hero-eyebrow){
  font-family:var(--f-serif)!important; font-size:var(--title-size)!important; line-height:var(--title-lh)!important;
  font-weight:300!important; letter-spacing:var(--title-ls)!important; text-transform:none!important; font-style:normal!important;
  display:block!important; max-width:30ch!important; margin:0 0 .45em!important; padding:0!important; background:none!important;
  color:#fff!important; text-shadow:0 1px 14px rgba(0,0,0,.5)!important;
}
html body h1.s-kicker::before{display:none!important}