/* janschuette.de
------------------------------------------------ */



/* font-face
-------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/inter-300-light.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url(../fonts/inter-300-light-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/inter-500-medium.woff2) format('woff2');
}



/* color
-------------------------------------------------- */

:root {
  --gray-light: rgb(170, 170, 170);
  --gray-medium: rgb(85, 85, 85);
  --gray-dark: rgb(0, 0, 0);
}



*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0; /* lists */
}

html {
  font-size: 100%; /* rem */
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.75; /* 28 */
}

img, video, audio {
  display: block;
  width: 100%;
}



/* font
------------------------------------------------ */

body {
  font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

strong {
  font-weight: 500;
}

/* font
------------------------------------------------ */

h1 {
  font-size: 3rem; /* 48 */
  line-height: 1.167; /* 56 */
}

h2, h3 {
  font-size: 1.5rem; /* 24 */
  line-height: 1.167; /* 28 */
}

h4, h5, h6 {
  font-size: 1.125rem; /* 18 */
  line-height: 1.167; /* 21 */
}

blockquote, dl, figure, ol, p, pre, ul {
  font-size: 1rem; /* 16 */
  line-height: 1.75; /* 28 */
}

figcaption {
  font-size: .875rem; /* 14 */
  line-height: 2; /* 28 */
}

.header *,
.footer * {
  font-size: 1rem; /* 16 */
  line-height: 1.75; /* 28 */
}

.filmography-column h2,
.review-column h2 {
  font-size: 1.125rem; /* 18 */
  line-height: 1.167; /* 21 */
}



/* color
------------------------------------------------ */

body {
  color: var(--gray-dark);
}

figcaption {
  color: var(--gray-light);
}

a {
  color: var(--gray-dark);
}


/* margin
------------------------------------------------ */

h1, h2, h3, h4, h5, h6,
blockquote, dl, figure, ol, p, pre, ul {
  margin: 1.75rem 0;
}

.header *,
.footer * {
  margin: 0;
}

.essays-column li {
  margin: 3.5rem 0;
}

.filmography-column li {
  margin: 2.625rem 0;
}



/* lists
------------------------------------------------ */

ul, ol {
  list-style: none;
}



/* rule
------------------------------------------------ */

hr {
  border: none;
  border-top: 1px solid var(--gray-medium);
}



/* focus
------------------------------------------------ */

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 4px solid var(--gray-light);
  outline-offset: .21875rem;
}



/* links
------------------------------------------------ */

a {
  text-decoration: none;
}

.block-essays a {
  display: block;
}

.block-education a,
.block-copy a,
.block-review a {
  text-decoration: underline;
}

/* links
------------------------------------------------ */

.block-site a:hover {
  text-decoration: underline;
}

.block-filmography a:hover h3,
.block-essays a:hover h2 {
  text-decoration: underline;
}



/* layout
------------------------------------------------ */

.main,
.main > * {
  padding: 1.75rem 0;
}

.footer,
.footer > * {
  padding: 1.75rem 0;
}



/* site-header
------------------------------------------------ */

.site-header {
  display: flex;
  flex-wrap: wrap;
}

.header-identity,
.header-languages,
.header-menu {
  flex-basis: 100%;
  padding: .4375rem 1.75rem;
}

.header-languages ul,
.header-menu ul {
  display: flex;
  flex-wrap: nowrap;
}

.header-menu li {
  margin-right: .875rem;
}

.header-languages li {
  margin-left: .875rem;
}

@media screen and (min-width: 30em) {
  .header-identity {
    flex-basis: 50%;
  }
  .header-languages {
    flex-basis: 50%;
  }
  .header-languages ul {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 50em) {
  .site-header {
    flex-wrap: nowrap;
  }
  .header-identity {
    order: 1;
    flex-basis: auto;
    flex-grow: 0;
  }
  .header-languages {
    order: 3;
    flex-basis: auto;
    flex-grow: 0;
  }
  .header-menu {
    order: 2;
    flex-basis: auto;
    flex-grow: 1;
  }
}

@media screen and (min-width: 90em) {
  .site-header {
    padding: 0 calc(50% - 40rem); /* 80 */
  }
}

/* site-header
------------------------------------------------ */

.site-footer {
  display: flex;
  flex-wrap: wrap;
}

.footer-identity,
.footer-contents,
.footer-copyright {
  flex-basis: 100%;
  padding: .4375rem 1.75rem;
}

.footer-contents ul {
  display: flex;
  flex-wrap: nowrap;
}

.footer-contents li {
  margin-right: .875rem;
}

@media screen and (min-width: 90em) {
  .site-footer {
    padding: 0 calc(50% - 40rem); /* 80 */
  }
}



/* block-headline
------------------------------------------------ */

.headline-columns {
  display: flex;
  flex-wrap: wrap;
}

.headline-column {
  flex-basis: 100%;
  padding: 0 1.75rem; /* typo */
}

@media screen and (min-width: 50em) {
  .headline-columns {
    padding: 0 calc(50% - 20rem); /* 40 */
  }
}

/* block-education
------------------------------------------------ */

.education-columns {
  display: flex;
  flex-wrap: wrap;
}

.education-column {
  flex-basis: 100%;
  padding: 0 1.75rem; /* typo */
}

@media screen and (min-width: 50em) {
  .education-columns {
    padding: 0 calc(50% - 20rem); /* 40 */
  }
}

/* block-filmography
------------------------------------------------ */

.filmography-columns {
  display: flex;
  flex-wrap: wrap;
}

.filmography-column {
  flex-basis: 100%;
  padding: 0 1.75rem; /* typo */
}

@media screen and (min-width: 40em) {
  .filmography-column {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 50em) {
  .filmography-column {
    flex-basis: 33.333%;
  }
}

@media screen and (min-width: 90em) {
  .filmography-columns {
    padding: 0 calc(50% - 40rem); /* 80 */
  }
}

/* block-essays
------------------------------------------------ */

.essays-columns {
  display: flex;
  flex-wrap: wrap;
}

.essays-column {
  flex-basis: 100%;
  padding: 0 1.75rem; /* typo */
}

@media screen and (min-width: 50em) {
  .essays-columns {
    padding: 0 calc(50% - 20rem); /* 40 */
  }
}


/* block-copy
------------------------------------------------ */

.copy-columns {
  display: flex;
  flex-wrap: wrap;
}

.copy-column {
  flex-basis: 100%;
  padding: 0 1.75rem; /* typo */
}

@media screen and (min-width: 50em) {
  .copy-columns {
    padding: 0 calc(50% - 20rem); /* 40 */
  }
}

/* block-review
------------------------------------------------ */

.review-columns {
  display: flex;
  flex-wrap: wrap;
}

.review-column {
  flex-basis: 100%;
  padding: 0 1.75rem; /* typo */
}

@media screen and (min-width: 50em) {
  .review-columns {
    padding: 0 calc(50% - 20rem); /* 40 */
  }
}

/* block-images-large
------------------------------------------------ */

.images-columns-large {
  display: flex;
  flex-wrap: wrap;
}

.images-column-large {
  flex-basis: 100%;
  padding: .875rem 0;
}

.images-column-large figure {
  margin: 0; /* reset */
}

.images-column-large figcaption {
  padding: 0 1.75rem; /* typo */
}

@media screen and (min-width: 90em) {
  .images-columns-large {
    padding: 0 calc(50% - 40rem); /* 80 */
  }
}

/* block-images-medium
------------------------------------------------ */

.images-columns-medium {
  display: flex;
  flex-wrap: wrap;
  padding: .875rem .875rem;
}

.images-column-medium {
  flex-basis: 100%;
  padding: .875rem .875rem;
}

.images-column-medium figure {
  margin: 0; /* reset */
}

@media screen and (min-width: 50em) {
  .images-column-medium {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 90em) {
  .images-columns-medium {
    padding: 0 calc(50% - 40rem); /* 80 */
  }
}

/* block-images-small
------------------------------------------------ */

.images-columns-small {
  display: flex;
  flex-wrap: wrap;
  padding: .875rem .875rem;
}

.images-column-small {
  flex-basis: 100%;
  padding: .875rem .875rem;
}

.images-column-small figure {
  margin: 0; /* reset */
}

@media screen and (min-width: 30em) {
  .images-column-small {
    flex-basis: 50%;
  }
}

@media screen and (min-width: 50em) {
  .images-column-small {
    flex-basis: 33.333%;
  }
}

@media screen and (min-width: 90em) {
  .images-columns-small {
    padding: 0 calc(50% - 40rem); /* 80 */
  }
}



/* sticky
------------------------------------------------ */

.header {
  z-index: 999;
  background-color: rgba(255, 255, 255, 1);
}

@media screen and (min-width: 30em) {
  .header {
    position: -webkit-sticky; /* safari */
    position: sticky;
    top: -2.625rem;
  }
}

@media screen and (min-width: 50em) {
  .header {
    top: 0;
  }
}