:root {
  --padding: 1.5rem;
  --max-width: 40rem;
  --color-red: #be2727;
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #efefef;
  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-white);
  --color-code-light-grey: #cacbd1;
  --color-code-comment: #a9aaad;
  --color-code-white: #c5c9c6;
  --color-code-red: #d16464;
  --color-code-orange: #de935f;
  --color-code-yellow: #f0c674;
  --color-code-green: #a7bd68;
  --color-code-aqua: #8abeb7;
  --color-code-blue: #7e9abf;
  --color-code-purple: #b294bb;
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    Courier, monospace;
}

html {
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background: var(--color-background);
}

p {
  margin-top: 0;
}
img {
  width: 100%;
}
body {
  margin: 0 auto;
}
main {
  margin-bottom: 5em;
}

.content {
  max-width: var(--max-width);
  margin: 0 auto;
}
a {
  color: var(--color-red);
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}
a:visited {
  color: var(--color-red);
}
strong,
b {
  font-weight: 600;
}

.header {
  position: relative;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.headergrid {
  max-width: var(--max-width);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 4em;
}

.logowrap {
  display: flex;
  align-items: center;
}
.logo {
  padding-inline: 0 0.5em;
  padding-block: 1em;
  display: flex;
  align-items: center;
  font-weight: 600;
  pointer-events: all;
  color: currentColor;
  text-decoration: none;
}
.logo:hover {
  color: var(--color-red);
}
.menu {
  display: flex;
  pointer-events: all;
}
.menu a {
  padding-inline: 1em;
  padding-block: 1em;
  display: block;
  color: currentColor;
  text-decoration: none;
}
.menu a:hover {
  text-decoration: underline;
}
.menu a[aria-current] {
  text-decoration: underline;
}

h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

h1 {
  font-size: 2rem;
  font-weight: normal;
  margin-bottom: 3rem;
  line-height: 1.25em;
}
h2 {
  font-size: 1.25rem;
  font-weight: normal;
  margin-bottom: 1.25rem;
}
h3 {
  font-weight: 600;
}

@media screen and (max-width: 42em) {
  header {
    padding: 0 1em;
  }
  .content {
    padding: 0 1em;
  }
}

hr {
  margin: 6rem 0;
}
dt {
  font-weight: 600;
}
blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-black);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
blockquote footer {
  font-size: 0.875rem;
  font-style: italic;
}

.text figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
  list-style: none;
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}
.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-black);
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

figure {
  /* margin: 2em -3em 2em; */
  margin-block: 2em 2em;
  margin-inline: -3em;
}
@media screen and (max-width: 740px) {
  figure {
    margin-inline: 0;
  }
}
figure iframe {
  aspect-ratio: 16/9;
  width: 100%;
  background-color: black;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: 0.75rem;
  line-height: 1.5em;
}
figcaption {
  padding-top: 0.75rem;
  color: var(--color-text-grey);
}

.curriculum {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2em;

  & .row {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding: 0.5em 0;
  }
  & h2 + .row {
    border-top: none;
  }

  & h2 {
    grid-column: span 2;
    margin-top: 2em;
  }

  & .label {
    grid-column-start: 1;
  }
  & .description {
    grid-column-start: 2;

    & p:last-child {
      margin-bottom: 0;
    }
  }
}

.home {
  & header {
    position: absolute;
    width: 100%;
    z-index: 10;
    & .headergrid {
      margin-bottom: 0;
    }
  }
  & .main {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;

    display: flex;
    align-items: center;

    & > div {
      max-height: 100vh;
    }
  }
}

@media screen and (max-width: 550px) {
  .headergrid {
    display: block;
    pointer-events: all;
  }
  .menu a {
    padding-block-start: 0;
  }
  .menu a:first-child {
    padding-inline-start: 0;
  }
}