/*
Style: Vietnamese Typography
Author: Donny Truong
Author URI: https://www.visualgui.com/
Description: Responsive design, readability
*/
@font-face {
  src: url("/type-recommendations/adapter/fonts/AdapterPEVFWeb-All.woff2") format("woff2");
  font-family: "Adapter";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  src: url("/type-recommendations/fern/fonts/FernVariable-Roman-VF.woff2") format("woff2");
  font-family: "Fern";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  src: url("/type-recommendations/fern/fonts/FernVariable-Italic-VF.woff2") format("woff2");
  font-family: "Fern";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
/* Primary Styles
   Author: Donny Truong
*/
/* Base Rules */
@viewport {
  width: device-width;
}
:root {
  font-size: 100%;
}

body {
  color: #444;
  background: #fff;
  font: 100%/1.5 "Fern", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-variation-settings: "wght" 400, "opsz" 8;
  font-weight: 400;
  text-align: left;
  padding: 0;
  margin: 0;
  font-variant-ligatures: common-ligatures;
}

h1, h2 {
  padding: 0;
  line-height: 0.8;
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 2rem;
  margin: 1.5em 0 1em 0;
  font-variation-settings: "wght" 900, "opsz" 18;
  text-transform: uppercase;
}

h2 {
  font-size: 1.5rem;
  margin: 2em 0 0.5em 0;
  font-variation-settings: "wght" 700, "opsz" 18;
  line-height: 1;
}

p {
  margin: 0;
  text-wrap: pretty;
}

p + p, .indent {
  text-indent: 1.5em;
}

img, iframe, embed, object, video {
  width: 100%;
}

img {
  height: auto;
  vertical-align: middle;
}

a {
  color: #444;
  text-decoration: none;
}

a:visited {
  color: #444;
}

a:hover {
  color: #F06351;
}

a {
  transition: all 0.5s ease;
}
a img {
  transition: opacity 0.2s ease-in-out;
}

a:hover img {
  opacity: 0.7;
}

p a {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

sup {
  vertical-align: super;
  font-size: 0.7rem;
  line-height: 1;
}

ul, ol, dd {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  list-style-image: none;
}

nav li {
  padding: 0.2em 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #f1f1f1;
  margin: 1em 0;
  padding: 0;
}

[role=contentinfo] {
  margin: 2em 0 0 0;
}
[role=contentinfo] p {
  font-size: 0.75rem;
  padding-bottom: 2em;
}

main, .nav-content, [role=contentinfo] {
  padding: 0 2em;
}

main {
  margin-bottom: 2em;
}

.nav-wrap {
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  border-top: 1px solid #f1f1f1;
}

nav h1, aside h1 {
  font-size: 1.6rem;
  padding-top: 1em;
  margin-bottom: 0.5em;
  font-variation-settings: "wght" 650, "opsz" 18;
}

nav li[aria-current=page] a, [role=contentinfo] li[aria-current=page] a {
  opacity: 0.5;
}

.advising {
  margin-top: 2em;
  font-size: 1.5rem;
  font-variation-settings: "wght" 500, "opsz" 18;
  line-height: 1.3;
}

[value="0"] {
  list-style: none;
  list-style-image: none;
}

blockquote {
  padding: 2em 0;
  margin: 0;
  border-top: 1px solid #f1f1f1;
  text-indent: -0.4em;
}
blockquote p {
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variation-settings: "wght" 400, "opsz" 18;
}
blockquote p cite {
  font-variation-settings: "wght" 400, "opsz" 18, "slnt" -8;
}
blockquote footer {
  text-align: right;
  padding-top: 0.5em;
  color: #888;
  font-family: "Fern", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 0.9rem;
}
blockquote footer cite {
  font-style: normal;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}

.pagination {
  margin: 4em 0;
  font-variation-settings: "wght" 650, "opsz" 4;
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.pagination a {
  text-align: center;
  font-size: 0.8rem;
  background: #444;
  color: #fff;
  padding: 0.6em;
  width: 8em;
}
.pagination a:hover {
  background: #F06351;
}

.footnotes, figcaption, .caption {
  color: #888;
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variation-settings: "wght" 400, "opsz" 4;
}
.footnotes em, .footnotes cite, figcaption em, figcaption cite, .caption em, .caption cite {
  font-variation-settings: "slnt" -8;
}

.footnotes {
  margin: 4em 0;
}
.footnotes li {
  /*list-style-type: none; text-indent: -.6em;*/
  font-size: 0.8rem;
  word-break: break-word;
}

figure {
  margin: 2em 0;
}

figcaption, .caption {
  margin-top: 2em;
  font-size: 0.8rem;
}

.button a:link, .button a:active, .button a:visited {
  display: block;
  text-align: center;
  background: #444;
  color: #fff;
  padding: 1em 0;
  margin: 2em 0;
}
.button a:hover {
  background: #F06351;
}

abbr, #praise cite a {
  font-variant-caps: all-small-caps;
  text-decoration: none;
}

.no-bullet li {
  list-style-type: none;
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.font-info {
  list-style-type: none;
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/* Mobile First */
[role=banner] {
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 1em 2em;
}
[role=banner] em, [role=banner] a {
  font-size: 0.8rem;
  font-style: normal;
}

.short, .long {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 0.5em;
}

.long {
  display: none;
}

/*home style moved to homepage*/
.Home .short {
  display: none;
}
.Home .long {
  display: block;
  padding: 8em 0;
}
.Home .long a {
  display: block;
}
.Home .long .second, .Home .long .support {
  margin-top: 3em;
  font-size: 0.8rem;
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.Home .long a.support {
  /*color: $link_color;*/
  position: absolute;
  top: 0;
}

.quote {
  margin: 0 0 2em 0;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/*EXAMPLES*/
.alphabet, .extended-alphabet {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 0.5em;
  font-size: 6vw;
  margin-top: 1em;
  line-height: 1;
}

.alphabet {
  font-family: "Adapter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-variation-settings: "wght" 400, "opsz" 4;
}

.tone-marks {
  text-align: justify;
  margin-top: 0.5em;
  font-size: 10vw;
}
.tone-marks .uppercase {
  text-transform: uppercase;
}
.tone-marks span, .tone-marks em {
  display: block;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 45em) {
  h1 {
    margin: 1em 0;
    font-size: 4rem;
  }

  .short {
    display: none;
  }

  .long {
    display: grid;
    grid-column-gap: 4em;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 4em;
  }

  /*
  #praise {
  	column-count:2; column-gap:4em;
  	blockquote {break-inside: avoid;}
  }
  */
  .alphabet, .extended-alphabet {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .quote {
    grid-area: quote;
  }

  .intro {
    grid-area: intro;
  }

  .grid {
    grid-template-areas: "intro  quote";
  }

  .alphabet {
    margin-top: 0;
  }

  .tone-marks {
    font-size: 6vw;
  }

  #foundries h2 {
    margin-top: 0;
  }

  /*.quocngu {margin-top: 60%;}*/
}
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 80em) {
  main, .nav-content, [role=contentinfo] {
    padding: 0 4em;
  }

  [role=banner] {
    padding: 1em 4em;
  }

  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .text, .footnotes {
    grid-column: span 2;
  }

  figure, [role=presentation] {
    grid-column: span 3;
  }

  .grid {
    grid-template-areas: "intro  quote";
  }

  .alphabet, .extended-alphabet {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  /*#praise {column-count:4;}*/
  figcaption, .caption {
    max-width: 35em;
  }

  /*.tone-marks { 
  	span, em {display: inline;}
  	}
  */
}
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
/*
$dark-bg:#323232;
$dark-text: #ebebee;
$dark_border_line: 1px solid #444;



@media (prefers-color-scheme: dark) {

	body{	
		background:$dark-bg;
		color: $dark-text;		
		}

a { color: $dark-text; 
	}
a:visited { color: $dark-text; }
a:hover { color: $link_hover; }

.nav-wrap, blockquote { border-top: $dark_border_line;}		

.pagination {
	a:link, a:active, a:visited, a:hover {color: $dark-text;}
	}     

}
*/
/* ------------------------------------------------------------------------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    margin: 1em 5em;
    color: #444;
  }

  .nav-wrap, [rel=next], [rel=prev], [role=banner] {
    display: none;
  }
}
/*Close media*/

/*# sourceMappingURL=style.css.map */