:root {
  color-scheme: light dark;
  --special-text-color: hsla(60, 100%, 50%, 0.5);
  --border-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --special-text-color: hsla(60, 50%, 70%, 0.75);
    --border-color: white;
  }

}

@media only screen and (max-width: 767px) {

  /* one-column fluid layout */
  .l-col {
    margin-left: 0;
    margin-bottom: 1rem;
  }
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol” Oxygen, Ubuntu, Cantarell, Open Sans", "Helvetica Neue", sans-serif;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  font-optical-sizing: auto;
}

body {
  /*letter-spacing: 0 !important;*/
}

li {
  list-style: none;
}

a {
  color: currentColor;
  text-decoration: none;
}

.l-col > figcaption > h1, h2, h3, h4, h5, h6 {
  margin: 0.25rem 0 .25rem;
  font-weight: bold;
}

.l-col h3 {
  font-size: .8rem;
}

.title > h1, .title > h2, .title > h3 {
  margin: 0;
}


.page h1 {
  /*letter-spacing: -0.215rem !important;*/
  font-variant-ligatures: common-ligatures !important;
}


.page section h2 {
  font-size: 2.5rem;
}


img {
  width: 100%;
}

section .hrt {
  padding-top: .25rem;
}

/*.page {
  padding: 5vh 5vw 10vh;
}

.page > * {
  max-width: var(--content-width);
  margin: 0 auto;
}*/

.header {
  margin-bottom: 1.5rem;
}

.header a {
  position: relative;
  text-transform: uppercase;
  font-size: .875rem;
  /*letter-spacing: .05em;*/
  padding: .5rem 0;
  font-weight: 700;
}

.header .logo {
  display: block;
  margin-bottom: 1.5rem;
  padding: .5rem 0;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu a {
  margin: 0 .75rem;
}

.menu a[aria-current] {
  border-bottom: 2px solid #000;
}

@media screen and (min-width: 40rem) {
  .header .logo {
    margin-bottom: 0;
  }
  .header {
    flex-direction: row;
    justify-content: space-between;
  }
  .menu {
    margin-right: -.75rem;
  }
}


main {
  min-height: calc(100vh - 10rem);
}

.intro {
  padding: 10vh 0;
  text-align: center;
}

.intro h1 {
  position: relative;
  margin-bottom: 1rem;
  font-weight: 900;
  font-size: calc(1vw + 2rem);
  z-index: 1;
}

.tags {
  text-align: center;
  text-transform: uppercase;
  /*letter-spacing: 0.075em;*/
  font-size: .75rem;
  font-weight: 600;
}

.text {
  line-height: 1.5em;
}

.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.5em;
}

.text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.text > *:first-child {
  margin-top: 0;
}

.text a {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  z-index: 1;
  display: inline-block;
  border-bottom: 2px solid #000;
}

.text figure {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.text img {
  width: 100%;
}

.footer {
  padding: 1.5rem 5vw 10vh;
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto;
  line-height: 1.5em;
}

.footer a {
  display: inline-block;
  font-size: .875rem;
}

.footer > a {
  margin-bottom: 1.5rem;
  border-top: 2px solid #000;
  width: 16.5rem;
  padding-top: .5rem;
}

.social a {
  margin: 0 .75rem;
  padding: .5rem 1rem;
  border: 2px solid #000;
  width: 7.5rem;
}

.social a:hover {
  background: #000;
  color: #fff;
}

section img {
  vertical-align: top;
}

section#about h1 {
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga";
  text-rendering:  optimizeLegibility;
}


section#about.l-row.hrt.hrt-3 {
  border-style: none;
}

section ul {
    display: inline-block;
    padding: 0;
    margin: 0;
}

section li {
  display: block;
  float: left;
}

p {
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga";
    text-rendering:  optimizeLegibility;
}

.of-liga { font-feature-settings: "liga", "clig"; }