/** _typography module **/

/*
  headings in GT Sectra,
  body text in Benton Sans,
  root font size = 16px,
  line height at 1.625,
  scale factor at 1.333 (perfect fourth),
*/



html, :root {
  --fw-light: 100;
  --fw-book: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  --fs-x-large: 1.75em;
  --fs-large: 1.3125em;
  --fs-normal: 1em;
  --fs-small: .875em;
  --fs-x-small: .8em;

  /* --line-height: 1.625;
  --line-height-em: 1.625em; */

  --line-height: 1.7;
  --line-height-em: 1.7em;
}

@font-face {
  font-family: 'GT Sectra Bold';
  src: url('fonts/GT-Sectra-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/GT-Sectra-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/GT-Sectra-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/GT-Sectra-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/GT-Sectra-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */
}

@font-face {
  font-family: 'GT Sectra Book Italic';
  font-weight: 400;
  font-style: italic;
  src: url('fonts/GT-Sectra-Book-Italic.eot'); /* IE9 Compat Modes */
  src: url('fonts/GT-Sectra-Book-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/GT-Sectra-Book-Italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/GT-Sectra-Book-Italic.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/GT-Sectra-Book-Italic.ttf')  format('truetype'); /* Safari, Android, iOS */
}


/* Benton Sans regular */
@font-face {
  font-family: 'BentonSans';
  src: url('fonts/BentonSans-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSans-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSans-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSans-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSans-Regular.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 400;
  font-style: normal;
}


/* Benton Sans book weight */
@font-face {
  font-family: 'BentonSans';
  src: url('fonts/BentonSans-Book.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSans-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSans-Book.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSans-Book.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSans-Book.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 300;
  font-style: normal;
}

/* Benton Sans light weight */
@font-face {
  font-family: 'BentonSans';
  src: url('fonts/BentonSans-Light.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSans-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSans-Light.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSans-Light.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSans-Light.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 100;
  font-style: normal;
}

/* Benton Sans medium weight */
@font-face {
  font-family: 'BentonSans';
  src: url('fonts/BentonSans-Medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSans-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSans-Medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSans-Medium.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSans-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 500;
  font-style: normal;
}

/* Benton Sans bold weight */
@font-face {
  font-family: 'BentonSans';
  src: url('fonts/BentonSans-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSans-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSans-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSans-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 600;
  font-style: normal;
}

/* Benton Sans Condensed black weight */
@font-face {
  font-family: 'BentonSans Condensed';
  src: url('fonts/BentonSansCond-Black.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSansCond-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSansCond-Black.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSansCond-Black.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSansCond-Black.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 700;
  font-style: normal;
}

/* Benton Sans Condensed bold weight */
@font-face {
  font-family: 'BentonSans Condensed';
  src: url('fonts/BentonSansCond-Bold.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSansCond-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSansCond-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSansCond-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSansCond-Bold.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 600;
  font-style: normal;
}

/* Benton Sans Condensed medium weight */
@font-face {
  font-family: 'BentonSans Condensed';
  src: url('fonts/BentonSansCond-Medium.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSansCond-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSansCond-Medium.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSansCond-Medium.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSansCond-Medium.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 500;
  font-style: normal;
}

/* Benton Sans Condensed book weight */
@font-face {
  font-family: 'BentonSans Condensed';
  src: url('fonts/BentonSansCond-Book.eot'); /* IE9 Compat Modes */
  src: url('fonts/BentonSansCond-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/BentonSansCond-Book.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/BentonSansCond-Book.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/BentonSansCond-Book.ttf')  format('truetype'); /* Safari, Android, iOS */

  font-weight: 300;
  font-style: normal;
}

html, .root {
  font-size: 16px;
  line-height: var(--line-height);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "GT Sectra Bold", sans-serif;
  letter-spacing: 0px;
}

body, p, ul, ol, pre, table, a, b, i, strong, em, small, sub, sup {
  font-family: "BentonSans", "LibreFrank", serif;
  letter-spacing: 0px;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  text-decoration: none;
  font-family: "GT Sectra Bold", sans-serif;
  letter-spacing: 0px;
}

body, .article {
  font-size: 1em;
  line-height: var(--line-height);
  margin: auto;
}

h1, .h1 {
  font-size: 2.375em;
  /* line-height: 1.36842105em; */
  /* margin-top: 0.68421053em;
  margin-bottom: 1.36842106em; */

  line-height: calc( var(--line-height)*2 / 2.375 );
  margin-top: calc( var(--line-height-em) / 2.375 );
  margin-bottom: calc( var(--line-height-em) / 2.375 );
}

h2, .h2 {
  font-size: 1.75em;
  line-height: calc( var(--line-height)*2 / 1.75 );
  /* line-height: 1.85714286em; */
  /* margin-top: 0.92857143em;
  margin-bottom: calc(0.92857143em); */

  margin-top: calc( var(--line-height-em) / 1.75 );
  margin-bottom: calc( var(--line-height-em) / 1.75 );

}

h3, .h3 {
  /* line-height: 1.23809524em; */
  /* margin-top: 1.23809524em;
  margin-bottom: 1.23809524em; */
  font-size: 1.3125em;
  line-height: calc( var(--line-height) / 1.3125 );

  margin-top: calc( var(--line-height-em) / 1.3125 );
  margin-bottom: calc( var(--line-height-em) / 1.3125 );
}

h4, .h4 {
  font-size: 1em;
  line-height: var(--line-height);
  margin-top: calc(var(--line-height-em)/2);
  margin-bottom: calc(var(--line-height-em)/2);
}

h5, .h5, h6, .h6 {
  font-size: 1em;
  line-height: var(--line-height);
  margin-top: calc(var(--line-height-em)/2);
  margin-bottom: calc(var(--line-height-em)/2);
}

p, li, pre, table, blockquote {
  line-height: var(--line-height);
  margin-top: 0em;
  margin-bottom: var(--line-height-em);
}

li {
  margin-bottom: calc(var(--line-height-em)/2);
}

li > ul > li, ol ol, ul ol, ol ul {
  line-height: var(--line-height);
  margin-top: 0em;
  margin-bottom: 0em;
}

ul.flush, ol.flush {
  padding-left: calc(var(--line-height-em)/2);
}

.large {
  font-size: 1.3125em;
  line-height: var(--line-height);
  margin-bottom: calc( var(--line-height-em) / 1.3125 );

  /* margin-bottom: 1.23809524em; */
}

small, .small {
  margin-top: 0;
  font-size: .875em;
  line-height: var(--line-height);
  margin-bottom: var(--line-height-em);
}

.x-small {
  font-size: .8em;
  line-height: var(--line-height);
  margin-bottom: var(--line-height-em);
}

.medium {
  font-weight: var(--fw-medium);
}

b, .bold {
  font-weight: var(--fw-bold);
}

.text-underline {
  text-decoration: underline;
}

/* ---- margins --- */

.bottom-margin {
  margin-bottom: var(--line-height-em);
}

.no-bottom-margin {
  margin-bottom: 0;
}

/* Let's make sure all's aligned */

hr, .hr {
  border: 1px solid;
  margin: -1px 0;
}

sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}


a {
  color: var(--burnt-orange);
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  color: var(--bright-orange);
}

a:focus {
  color: var(--bright-orange);
}

a.email {
  text-decoration: none;
}

a.short {
  text-decoration: none;
  border-bottom: 1px solid var(--burnt-orange);
}

a.short:hover {
  border-color: var(--bright-orange);
}

/* --- external links --- */
a.external {
  position: relative;
  margin-right: calc(1em + .5em + .2em);  /* space for the external symbol */
}

a.external::after {
  display: inline-block;
  content: '';
  height: 1em;
  width: 1em;
  background-image: url('./assets/external.webp');
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: .3em;
  position: absolute;
  bottom: 2px;
}

a.external:hover::after {
  background-image: url('./assets/external-hovered.webp');
}

a.short.external {
  bottom: 4px;
}

.no-webp a.external::after {
  background-image: url('./assets/external.png');
}

.no-webp a.external:hover::after {
  background-image: url('./assets/external-hovered.png');
}

/* --- popup links --- */
a.popup {
  position: relative;
  margin-right: calc(1em + .5em + .2em);  /* space for the popup symbol */
}

a.popup::after {
  display: inline-block;
  content: '';
  height: 1em;
  width: 1em;
  background-image: url('./assets/popup.webp');
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: .3em;
  position: absolute;
  bottom: 2px;
}

a.popup:hover::after {
  background-image: url('./assets/popup--hovered.webp');
}


.no-webp a.popup::after {
  background-image: url('./assets/popup--hovered.png');
}

.no-webp a.popup:hover::after {
  background-image: url('./assets/popup--hovered.png');
}

/* -----  */
.text-center {
  text-align: center;
}



@media screen and (max-width:639px) {
  html {
    font-size: 14px;
  }
}

@media print {
  html {
    font-size: 11px;
  }
}