:root {
  --font-family: 'LS';
  --text-color: #190000;
  --black: #000;
  --purple: #b7aab5;
  --bg-color: #fafbf5;
  --blue-gray: #75808b;
  --blue-gray-light: #c6cfd8;
  /* --highlight: #fada00; */
  /* --artwork-color: #d150cc;
  --films-color: #ff7234;
  --projects-color: #26c666; */
  --white: #fff;
  --h1: 34px;
  --h2: 20px;
  --h2-leading: 26px;
  --h3: 18px;
  --h3-leading: 23px;
  --p: 16px;
  --p-leading: 20px;
  --caption: 13px;
  --caption-leading: 16px;
  --tiny: 11px;
}

*, *:before, *:after { box-sizing: border-box; }
/* html, body {
  height: 100%;
} */
body {
  display: flex;
  flex-flow: column;
  font-family: var(--font-family);
  padding: 0;
  margin: 0;
  color: var(--text-color);
  background: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  -webkit-text-size-adjust: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 26px;
  padding: 26px 26px 23px 26px;
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6, p, figure, ul, ol, li {
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-size: initial;
}
input, button {
  border: 0;
  padding: 0;
  -webkit-appearance: none;
  border-radius: 0;
  font-size: 12px;
  background: transparent;
}

/* Header */
header {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: max-content;
  /* grid-template-rows: repeat(2, 1fr); */
  grid-gap: 52px 26px;
  grid-column: 1 / 7;
  margin-bottom: 26px;
}
header h1#site-title {
  grid-column: 1 / 2;
  font-size: var(--h2);
  width: max-content;
}
header h1#site-title a {
  color: var(--text-color);
  text-decoration: none;
}
header nav#menu {
  grid-column: 2 / 6;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 0 auto;
  font-size: var(--h2);
}
header nav#menu a {
  margin-right: 26px;
  text-decoration: none;
  color: var(--blue-gray);
  /* opacity: 0.6; */
}
header nav#menu a:hover, header nav#menu a.active {
  opacity: 1;
  color: var(--blue-gray);
}
header nav#menu a::before {
  content: '';
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .1em;
  background-color: var(--blue-gray);
}
header nav#menu a:last-child {
  margin-right: 0;
}

/* Submenu */
nav#submenu {
  grid-row: 2 / 3;
  grid-column: 1 / 7;
  display: flex;
  flex-flow: column nowrap;
  margin-bottom: 52px;
  /* justify-content: flex-start; */
  /* padding: 0 26px; */
}
nav#submenu a {
  color: var(--purple);
  font-size: var(--h2);
  line-height: var(--h2-leading);
  margin-bottom: 1px;
  text-decoration-skip-ink: none;
  max-width: max-content;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.065em;
}
nav#submenu a:hover, nav#submenu a.active {
    color: var(--black) !important;
}

/* Footer */
footer {
  font-size: var(--tiny);
  margin-top: auto;
  padding-top: 114px;
  grid-column: 1 / 7;
}



/* Breakpoints */

/* Tablet */
@media(min-width: 948px) {

}

/* Mobile */
@media(max-width: 642px) {
    body {
      grid-template-columns: repeat(4, 1fr);
    }
    header {
      grid-column: 1/-1;
      grid-template-columns: repeat(4, 1fr);
    }
    header nav#menu {
      grid-column: 1/-1;
      grid-row: 2;
    }
    /* header nav#submenu {
      grid-column: 1/-1;
      grid-row: 3;
    } */
    nav#submenu {
      grid-column: 1/-1;
    }
    footer {
      grid-column: 1/-1;
    }
}