/* GENERAL */
* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  text-decoration: inherit;
  font-weight: inherit;
  box-sizing: border-box; }

strong {
  font-weight: bold; }

img {
  display: block;
  max-width: 100%; }

a {
  text-decoration: underline; }
  a:hover {
    color: var(--link-color); }

:root {
  --text-color: black;
  --bg-color: white;
  --link-color: blue;
  --margin: 1rem; }

.running-text, body {
  font-size: 1rem;
  letter-spacing: -.25px;
  line-height: 1.25em; }

.title-text, body > header h2, body > header .about, body > main section.about, .contentBlocks .bigtitle, .contentBlocks .mediumtitle {
  font-size: 1.33rem;
  letter-spacing: -.5px;
  line-height: 1.25em; }

.small-text, body > main section.publications .publication .description .category, body > footer {
  font-size: .75rem;
  letter-spacing: 0px;
  line-height: 1.25em; }

html, body {
  min-height: 100%; }

body {
  font-family: "Grotesque", "helvetica neue", "helvetica", "arial", sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: var(--text-color);
  background: var(--bg-color);
  margin: var(--margin); }

/* HEADER */
body > header h1 {
  margin: var(--margin) 0; }
  body > header h1 a {
    line-height: 0; }
  body > header h1 svg {
    width: calc((100% - var(--margin)) / 2); }
    body > header h1 svg path {
      fill: var(--text-color); }
      body > header h1 svg path.outline {
        fill: var(--bg-color); }
    body > header h1 svg:hover path {
      fill: var(--bg-color); }
      body > header h1 svg:hover path.outline {
        fill: var(--link-color); }
body > header .cover_image {
  max-height: calc(100vh - 2 * var(--margin));
  margin: var(--margin) 0; }
body > header h2 {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1em; }
body > header .about {
  margin: var(--margin) 0; }
  body > header .about .technical_details {
    white-space: pre-wrap; }
  body > header .about .buy {
    margin: var(--margin) 0; }

/* MAIN */
body > main section.about {
  margin-top: var(--margin); }
  body > main section.about > * {
    margin: var(--margin) 0; }
body > main section.description {
  width: calc((100% - var(--margin)) / 2);
  margin: var(--margin) 0; }
  body > main section.description > *:not(:last-child) {
    margin-bottom: var(--margin); }
  body > main section.description.columned {
    width: 100%;
    columns: 2;
    column-gap: var(--margin); }
body > main section.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin);
  margin: var(--margin) 0; }
  body > main section.gallery img {
    width: calc((100% - var(--margin)) / 2); }
body > main section.publications {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin);
  margin: var(--margin) 0; }
  body > main section.publications .publication {
    width: calc((100% - 2 * var(--margin)) / 3);
    cursor: pointer;
    position: relative; }
    body > main section.publications .publication a {
      text-decoration: inherit; }
    body > main section.publications .publication .cover-image {
      background-color: var(--link-color); }
    body > main section.publications .publication:hover {
      color: var(--link-color); }
      body > main section.publications .publication:hover .cover-image img {
        filter: grayscale(1);
        mix-blend-mode: screen; }
    body > main section.publications .publication .description {
      padding-top: calc(var(--margin) / 4);
      display: flex;
      justify-content: space-between; }
      body > main section.publications .publication .description .category {
        line-height: 1em; }
      body > main section.publications .publication .description .buy, body > main section.publications .publication .description .soldout {
        text-align: right;
        margin-left: calc(var(--margin) * 2); }
      body > main section.publications .publication .description .buy .button {
        text-decoration: underline;
        position: relative;
        padding: .2em .2em 0 .2em; }
        body > main section.publications .publication .description .buy .button:hover {
          background-color: var(--link-color);
          color: var(--bg-color); }
      body > main section.publications .publication .description .soldout {
        text-decoration: line-through; }
body > main section.post-text {
  width: calc((100% - var(--margin)) / 2);
  margin: var(--margin) 0; }
  body > main section.post-text > *:not(:last-child) {
    margin-bottom: var(--margin); }
  body > main section.post-text.columned {
    width: 100%;
    columns: 2;
    column-gap: var(--margin); }

/* CONTENT BLOCKS */
.contentBlocks > * {
  margin: var(--margin) 0; }
.contentBlocks .bigtitle {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1em; }
.contentBlocks article.paragraph {
  width: calc((100% - var(--margin)) / 2);
  margin: var(--margin) 0; }
  .contentBlocks article.paragraph > *:not(:last-child) {
    margin-bottom: var(--margin); }
  .contentBlocks article.paragraph.columned {
    width: 100%;
    columns: 2;
    column-gap: var(--margin); }
.contentBlocks figure.singleimage img {
  max-height: calc(100vh - 2 * var(--margin)); }
.contentBlocks figure.singleimage figcaption {
  width: calc((100% - var(--margin)) / 2);
  font-style: italic;
  margin-top: .5rem;
  margin-left: var(--margin); }
.contentBlocks article.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin);
  margin: var(--margin) 0; }
  .contentBlocks article.gallery img {
    width: calc((100% - var(--margin)) / 2); }

/* FOOTER */
body > footer {
  margin-top: 50vh;
  display: flex;
  gap: var(--margin);
  flex-wrap: wrap; }
  body > footer .col {
    width: calc((100% - 3 * var(--margin)) / 4); }
    body > footer .col > *:not(:first-child) {
      margin-top: .5rem; }

/* TABLET */
@media screen and (max-width: 750px) {
  body > header h1 svg {
    width: 100%; }

  body > main section.publications .publication {
    width: calc((100% - 1 * var(--margin)) / 2); }
  body > main section.post-text {
    width: 100%; }
  body > main section.description.columned {
    columns: 1; }

  body > footer .col {
    width: calc((100% - 1 * var(--margin)) / 2); }

  .contentBlocks article.paragraph {
    width: 100%; }
    .contentBlocks article.paragraph.columned {
      columns: 1; } }
/* PHONE */
@media screen and (max-width: 450px) {
  body > main section.publications .publication {
    width: 100%; }
  body > main section.gallery img {
    width: 100%; }
  body > main .contentBlocks article.gallery img {
    width: 100%; }

  body > footer .col {
    width: 100%; } }