/*

https://www.a11y-collective.com/blog/what-is-rem-in-css/

https://utopia.fyi/blog/css-modular-scales

https://getbootstrap.com/docs/5.3/content/typography/

https://imperavi.com/books/ui-typography


/* Typography */

html {
  font-size: 16px; /* 16 is default for most browsers*/
}
@media screen and (min-width: 320px) {
  html { font-size: 110%; }
}
@media screen and (min-width: 992px) {
  html { font-size: 114%; }
}
@media screen and (min-width: 1200px) {
  html { font-size: 116%; }
}
@media screen and (min-width: 1400px) {
  html { font-size: 118%; }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height:1.5;
  font-family: "DM Sans", sans-serif;
}


:root {
  --ssdisplayfont:'Big Shoulders Display';  
}



h2.on-detail { font-family: var( --ssdisplayfont), sans-serif; }

/* global typography */

/*
h1,h2,h3,h4,h5,h6 { font-family: var( --ssdisplayfont); text-wrap:balance; color:var(--ctybrandpurple); }
*/

h1 { font-family: var( --ssdisplayfont); text-wrap:balance; color:var(--ctybrandpurple); }

h1 { text-transform:uppercase; }

h1 { font-size: 3.2rem; line-height:1.15; font-weight:600; margin-top:0px; margin-bottom: 1rem; }
h2 { font-family: var( --ssdisplayfont); font-size: 2.25rem; line-height:1.26; font-weight:700; margin-top:1rem; margin-bottom: 0.5rem; }
h3 { font-family: var( --ssdisplayfont); font-size: 1.8rem; line-height:1.4; font-weight:500; } 

h2.on-detail { font-size: 0.85rem; font-weight:700; margin-top:1.5rem; margin-bottom: 1rem; text-transform:uppercase; letter-spacing:0.050rem; }

p, li { font-size:1rem; }
li { margin-bottom:0.25rem; } /* I like to differentiate between line height and items */
p.intro,p.lead { font-weight:inherit; font-size:1.2rem; }

p.prehead { color:var(--ctybrandred); font-weight:700; letter-spacing:0.100rem; text-transform:uppercase; font-size:1.2rem; margin-bottom:0.5rem; }

label { color:inherit; }

hr { margin-top: 1rem; margin-bottom: 1rem; border: 0; border-top-color: currentcolor; border-top-style: none; border-top-width: 0px; border-top: 1px solid rgba(0,0,0,.1); opacity:1; }

a { color:var(--cc-alink); text-decoration:underline; }
a:hover { color:var(--cc-ahover); text-decoration:underline; }