@font-face {
  font-family: "Roboto Delta";
  src: url('../fonts/RobotoDelta_v2-VF.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif VF";
  src: url('../fonts/SourceSerifVariable-Roman.ttf.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Voto Serif Variable Font */
/*
  Variations used:
    wght (28-194)
    wdth (50-130)
    OPSZ (12-72)
*/
@font-face {
  font-family: 'Voto Serif GX';
  src: url('../fonts/VotoSerifGX.woff2') format('woff2-variations');
  font-display: swap;
}

:root {
  /* font stack */
  --font-stack: "Roboto Delta", Helvetica, arial, sans-serif;
  --font-stack-serif: "Voto Serif GX", Georgia, "Times New Roman", serif;

  /* breakpoint variables */
  --bp-small: 25;
  --bp-medium: 45;
  --bp-large: 55;
  --bp-xlarge: 65;

  /* colors */
  --color-bg: #f9f9fd;
  --color-text: #414141;
  
  /* initial px value for text */ 
  --rem-px: 16;

  /* initial values  */
  --text-wght: 90;
  --text-wdth: 100;
  --text-opsz: 16;
  
  /* set px value sizes */
  --p-size-s-px: 16;
  --p-size-m-px: 18;
  --p-size-l-px: 20;
  
  --h1-size-s-px: 32;
  --h1-size-m-px: 45;
  --h1-size-l-px: 60;

  /* set scale values */
  --p-size-min: calc( var(--p-size-s-px) / var(--rem-px) );
  --p-size-mid: calc( var(--p-size-m-px) / var(--rem-px) );
  --p-size-max: calc( var(--p-size-l-px) / var(--rem-px) );
  --p-lh-min: 1.2;
  --p-lh-mid: 1.4;
  --p-lh-max: 1.6;
  --p-wdth-min: 90;
  --p-wdth-mid: 95;
  --p-wdth-max: 100;

  --h1-size-min: calc( var(--h1-size-s-px) / var(--rem-px) );
  --h1-size-mid: calc( var(--h1-size-m-px) / var(--rem-px) );
  --h1-size-max: calc( var(--h1-size-l-px) / var(--rem-px) );
  --h1-lh-min: 1.05;
  --h1-lh-mid: 1.075;
  --h1-lh-max: 1.1;
  --h1-wdth-min: 80;
  --h1-wdth-mid: 87.5;
  --h1-wdth-max: 115;


}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-stack-serif);
  font-weight: var(--text-wght);
  font-stretch: calc( var(--text-wdth) * 1% );
  font-variation-settings: 
    'wght' var(--text-wght),
    'wdth' var(--text-wdth),
    'opsz' var(--text-opsz);
  margin: 0;
}

h1 {
  --text-opsz: calc( var(--h1-size-min) * 16 );
  --text-wght: 525;
  font-size: calc( var(--h1-size-min) * 1em );
  font-stretch: calc( var(--h1-wdth-min) * 1% );
  font-synthesis: none;
  font-weight: var(--text-wght);
  font-variation-settings: 'opsz' var(--text-opsz), 'GRAD' var(--text-GRAD);
  line-height: var(--h1-lh-min);
  margin: 1rem auto;
  max-width: 96vw;
  transition: all 1s ease-in-out;
}
  @media screen and (min-width: 25em) {
    h1 {
      --text-wght: 575;
      line-height: calc(( var(--h1-lh-min) * 1em ) + ( var(--h1-lh-max) - var(--h1-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
      font-size: calc(( var(--h1-size-min) * 1em ) + ( var(--h1-size-max) - var(--h1-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    }
  }
  @media screen and (min-width: 45em) {
    h1 {
      --text-opsz: calc( var(--h1-size-mid) * 16 );
      --text-wght: 625;
      font-stretch: calc( var(--h1-wdth-mid) * 1% );
      max-width: 40rem;
    }
  }
  @media screen and (min-width: 55em) {
    h1 {
      --text-wght: 725;
      max-width: 42rem;
    }
  }
  @media (min-width: 65em) {
    h1 {
      --text-opsz: calc( var(--h1-size-max) * 16 );
      --text-wght: 800;
      font-size: calc( var(--h1-size-max) * 1em );
      font-stretch: calc( var(--h1-wdth-max) * 1% );
      line-height: var(--h1-lh-max);
      max-width: 44rem;
    }
  }

p {
  --text-wdth: calc( var(--p-vf-wdth) * .9 );
  font-size: calc( var(--p-size-min) * 1em );
  font-stretch: calc( var(--p-wdth-min) * 1% );
  font-synthesis: none;
  font-weight: var(--text-wght);
  font-variation-settings: 'opsz' var(--text-opsz), 'GRAD' var(--text-GRAD);
  line-height: var(--p-lh-min);
  margin: 0 auto;
  max-width: 96vw;
}
  @media screen and (min-width: 25em) {
    p {
      line-height: calc(( var(--p-lh-min) * 1em ) + ( var(--p-lh-max) - var(--p-lh-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
      font-size: calc(( var(--p-size-min) * 1em ) + ( var(--p-size-max) - var(--p-size-min) ) * ((100vw - ( var(--bp-small) * 1em )) / ( var(--bp-xlarge) - var(--bp-small) )));
    }
  }
  @media screen and (min-width: 45em) {
    p {
      font-stretch: calc( var(--p-wdth-mid) * 1% );
      max-width: 40rem;
    }
  }
  @media screen and (min-width: 55em) {
    p {
      max-width: 42rem;
    }
  }
  @media (min-width: 65em) {
    p {
      font-size: calc( var(--p-size-max) * 1em );
      font-stretch: calc( var(--p-wdth-max) * 1% );
      line-height: var(--p-lh-max);
      max-width: 44rem;
    }
  }

p + p {
  text-indent: 3em;
}

.article-detail p:first-of-type::first-letter {
  border: solid 1px #a1a1a1;
  float: left;
  font-size: 6.125em;
  font-weight: 125;
  line-height: 0.65;
  /* line-height is set smaller than 1 to even out display in Safari and Chrome; Firefox seems unaffected */
  margin: 0 0.1em 0 -0.1em;
  padding: 0.1em;
}

.article-detail p:first-of-type:first-line {
  font-weight: 150;
  font-variant: small-caps;
}


.dark {
  --color-text: #f9f9fd;
  --color-bg: #414141;
}
.dark p {
    --text-GRAD: 0.25;
    letter-spacing: 0.015em;
}

.contrast {
  --color-text: #212121;
  --color-bg: #fafafe;
}
.contrast p {
    --text-GRAD: 0.75;
    letter-spacing: 0.005em;
}

.bigtext {
  --p-size-s-px: 20;
  --p-size-m-px: 24;
  --p-size-l-px: 28;
  --p-size-min: calc( var(--p-size-s-px) / var(--rem-px) );
  --p-size-mid: calc( var(--p-size-m-px) / var(--rem-px) );
  --p-size-max: calc( var(--p-size-l-px) / var(--rem-px) );
}

.spacing {
  --p-lh-min: 2.2;
  --p-lh-mid: 2.4;
  --p-lh-max: 2.6;
}
.spacing p {
  word-spacing: 0.75em;
}

.grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 15rem) ) ;
  margin: 1rem auto;
  max-height: 100%;
  padding: 0 1rem;
}
.grid > * {
  transition: all 1s ease-in-out;
}

.teaser {
  grid-column: auto / span 1;
  --p-lh-min: 1.1;
  --p-lh-mid: 1.2;
  --p-lh-max: 1.3;
}
  @media (min-width: 67em) {
    .teaser {
      --p-size-s-px: 14;
      --p-size-m-px: 14;
      --p-size-l-px: 16;
      --p-size-min: calc( var(--p-size-s-px) / var(--rem-px) );
      --p-size-mid: calc( var(--p-size-m-px) / var(--rem-px) );
      --p-size-max: calc( var(--p-size-l-px) / var(--rem-px) );
    }
  }

.theme-alt {
  font-family: var(--font-stack-serif);  
}
.theme-alt h1 {
  --h1-size-s-px: 42;
  --h1-size-m-px: 56;
  --h1-size-l-px: 72;

  --h1-size-min: calc( var(--h1-size-s-px) / var(--rem-px) );
  --h1-size-mid: calc( var(--h1-size-m-px) / var(--rem-px) );
  --h1-size-max: calc( var(--h1-size-l-px) / var(--rem-px) );
  
}
.theme-alt p {
  --text-wght: 400;
}
  @media screen and (min-width: 25em) {
    .theme-alt p {
      --text-wght: 375;
    }
  }
  @media screen and (min-width: 45em) {
    .theme-alt p {
      --text-wght: 350;
    }
  }
  @media screen and (min-width: 55em) {
    .theme-alt p {
      --text-wght: 330;
    }
  }

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f9f9fd;
    --color-bg: #414141;
  }
  p {
    --text-GRAD: 0.25;
    letter-spacing: 0.015em;
  }
}

main {
  overflow: hidden; }

.section-content.main {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-behavior: smooth; }

/* Pagination */
.article-detail {
  padding-top: 3em;
  position: relative; }
  .article-detail > header {
    margin: -3em 0 0 0;
    padding-top: 1rem; }
    .article-detail > header h1 {
      line-height: 3rem;
      padding: 0 .5rem; }
      @media only screen and (min-width: 24.15em) {
        .article-detail > header h1 {
          line-height: 3rem; } }
      @media only screen and (min-width: 34.15em) {
        .article-detail > header h1 {
          line-height: 5rem; } }
      @media only screen and (min-width: 43.75em) {
        .article-detail > header h1 {
          line-height: 7rem; } }
  .article-detail p {
    padding-left: 1em;
    padding-right: 1em; }


/* Footer */
footer {
  display: none;
  bottom: 0;
  left: 0;
  padding: .5em 1em;
  position: absolute;
  width: 97vw; 
  z-index: 99;
}
/* Component styles */
.footer-contact {
  font-size: .75em; }

.scroll-buttons {
  float: right; 
}

.scroll-buttons button {
  --text-wght: 500;
  border-radius: 0.25em;
  border: none;
  display: inline-block;
  font-family: "Roboto Delta", Helvetica, Arial, sans-serif;
  font-size: 1.25em;
  font-weight: 650;
  padding: 0.25em 0.5em;
}
@supports (scroll-snap-align: start) {
  footer {
    display: block;
  }
  .article-detail {
    columns: 95vw auto;
    column-gap: 0;
    height: 85vh; 
    orphans: 2;
    widows: 2;
  }

  .pager-wrapper {
    display: flex;
    width: calc( 100vw * var(--pageCount)); }
    .pager-wrapper--page {
      background-color: transparent;
      border-right: solid 1px black;
      float: left;
      height: 10px;
      width: 99.9vw;
      scroll-snap-align: start;
      position: relative;
      z-index: 10; }
  
}