:root {
  --silcrow: #FC3819;
  --asterisk: #091833;
  --dagger: #67E0A1;
  --double-dagger: #E0D4FF;
  --paper: #FFFFFF;
  --ink: #232425;
  
  --silcrow-text: #e72304;
  --silcrow-900: #FC5136;
  --silcrow-500: #FEB4A9;
  --silcrow-300: #FFE6E2;
  --silcrow-200: #FFEEEB;
  --silcrow-050: #FDFAFA;
  --silcrow-000: #FCF9F7;
  
  --ink-000: #F0F2F5;
  --ink-100: #E1E3E5;
  
  --dagger-100: #E8FFF3;
  --dagger-500: #C2F3D9;
  --dagger-900: #85E6B4;
  
  --double-dagger-100: #F9F6FF;
  
  --underline: #FEB4A940;
  --underline-hover: #FEB4A950;
  
  --r-underline: #85E6B470;
  --r-underline-hover: #85E6B490;
}

@font-face {
  font-family: 'Lyon Text';
  font-weight:  400;
  font-style:   italic;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/LyonText-RegularItalic-Web.woff2') format('woff2'),
	     url('../fonts/LyonText-RegularItalic-Web.woff') format('woff');
}

@font-face {
  font-family: 'Lyon Text';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/LyonText-Regular-Web.woff2') format('woff2'),
	     url('../fonts/LyonText-Regular-Web.woff') format('woff');
}

@font-face {
  font-family: 'Orleans';
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/Orleans-Light-Web.woff2') format('woff2'),
	     url('../fonts/Orleans-Light-Web.woff') format('woff');
}

@font-face {
  font-family: 'Dropcaps';
  font-weight:  900;
  font-style:   normal;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/Dropcaps.woff2') format('woff2'),
	     url('../fonts/Dropcaps.woff') format('woff');
}

@font-face {
  font-family: 'Anybody Silcrow Variable';
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Anybody-Silcrow-Variable.woff2') format('woff2'),
	     url('../fonts/Anybody-Silcrow-Variable.woff') format('woff') ;
}

html {
  font-size: 16px;
}

body {
  width: 100%;
  
  font-family: Lyon Text, 'Hoefler Text', Georgia, serif;
  color: var(--asterisk);
  
  transition: 0.3s;
}

.reversed {
  background-color: var(--silcrow-900);
}

body.reversed {
  color: var(--asterisk);
}

p::selection, 
h1::selection, 
h2::selection, 
h3::selection, 
h4::selection, 
h5::selection, 
h6::selection, 
small::selection, 
blockquote::selection, 
em::selection, 
span::selection, 
figcaption::selection, 
a::selection, 
img::selection {
  background: var(--silcrow-text);
  color: var(--paper);
  text-shadow: none;
}

.reversed p::selection,
.reversed h1::selection,
.reversed h2::selection,
.reversed h3::selection,
.reversed h4::selection,
.reversed h5::selection,
.reversed h6::selection,
.reversed small::selection,
.reversed .large-text::selection,
.reversed blockquote::selection,
.reversed a::selection,
.reversed img::selection,
.reversed figcaption::selection,
.reversed figcaption span::selection {
  color: var(--paper);
  background: var(--asterisk);
}

p {
  line-height: 1.44;
  font-variant-numeric: oldstyle-nums;
}

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

h1, h2, .feature-text {
  font-family: Orleans, Baskerville, Times New Roman, serif;
}

h2, .feature-text {
  font-size: 2.25rem;
  letter-spacing: -0.01em;
  line-height: 1.14;
}

h3 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.14;  
  letter-spacing: -0.01em;
  margin-bottom: 1em;
}

em {
  font-family: Lyon Text, 'Hoefler Text', Georgia, serif;
  font-style: italic;
}

h2 em {
  letter-spacing: -0.04em;  
}

a {
  text-decoration: none;
  color: var(--asterisk);
}

p a, li a {
  font-style: italic;
  background-image: linear-gradient(to right, var(--underline) 0%, var(--underline) 200%);
  background-repeat: repeat-x;
  background-position: 0 0.7em;
  background-size: 100% 20px;
  transition: 0.3s;
  overflow: visible;
  padding: 2px;
  margin: 0 -2px;
}

p a:hover, li a:hover {
  background-image: linear-gradient(to right, var(--underline-hover) 0%, var(--underline-hover) 200%);
  background-position: 0 0.1em;
  background-size: 100% 2em;
}

abbr[title] {
   border-bottom: 1px dashed var(--silcrow-500);
   cursor: help;
}

@media (hover:none) {
  
  abbr[title] {
   border-bottom: none;
  }
  
  abbr[title]:after {
   content: " (" attr(title) ")";
   font-style: italic;
  }
  
}

.sc {
  -moz-font-feature-settings: "c2sc", "smcp";
  -ms-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

.cap-heading, .quote figcaption, .testimonial figcaption {
  font-family: Lyon Text, 'Hoefler Text', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.caption {
  font-family: Lyon Text, 'Hoefler Text', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-variant-numeric: oldstyle-nums; 
}

.caption span {
  color: var(--silcrow-text);
}

.large-text {
  font-size: 1.5rem;
  line-height: 1.3;
}

.m-shrink {
  font-size: 1em;
  line-height: 1.44;
}

.hero-text {
  font-size: 3.375rem;
  letter-spacing: -0.03em;
}

.squiggle {
  background-color: var(--silcrow);
  -webkit-mask-image: url("../images/bg-tile-squiggle.svg");
  mask-image: var(--squiggle-svg);
  width: 100%;
  height: 8px;
  transition: 0.3s;
}

.squiggle.reversed {
  background-color: var(--paper);
}

.quote figcaption span, .testimonial figcaption span {
  display: block;
}

@media (min-width: 640px) {
  
  html {
	  font-size: 17px;
  }

}

@media (min-width: 800px) {
  
  .large-boost {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  
  .large-text {
	  line-height: 1.4;
  }
  
  h2, .feature-text {
    font-size: 3.375rem;
    letter-spacing: -0.02em;
  }
  
  h3 {
    font-size: 2.25em;
  }
  
  .hero-text {
    font-size: 5.0625rem;
  }
  
}

@media (min-width: 810px) {
  
}

@media (min-width: 900px) {
  
  html {
	  font-size: 16px;
  }
  
  
}

@media (min-width: 980px) {
  
  html {
	  font-size: 17px;
  }
  
  h2, .feature-text {
    font-size: 3.375rem;
    line-height: 1.1;
  }
  
  
}

@media (min-width: 1194px) {
  
}

@media (min-width: 1248px) {
  
  html {
	  font-size: 18px;
  }
  
}

@media (min-width: 1920px) {
  
  html {
	  font-size: 20px;
  }
  
  h2, .feature-text {
    font-size: 5rem;
  }
  
  .hero-text {
	  font-size: 7.5rem;
  }
  
}

@media (min-width: 2250px) {
  
  html {
	  font-size: 20px;
  }
  
  h2, .feature-text {
    font-size: 5rem;
  }
  
  .hero-text {
	  font-size: 7.5rem;
  }
  
  .cap-heading, .quote figcaption, .testimonial figcaption {
    font-size: 15px;
    letter-spacing: 0.15em;
  }
  
  .caption {
    font-size: 16px;
  }
  
}