/* ==========================================
   FONT
========================================== */

@font-face {
  font-family: "Tempos";
  src:
    url("_assets/font/TemposRomanMono.woff2") format("woff2"),
    url("_assets/font/TemposRomanMono.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: "Tempos";
  src:
    url("_assets/font/TemposRomanMonoItalic.woff2") format("woff2"),
    url("_assets/font/TemposRomanMonoItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}



/* ==========================================
   VARIABLES
========================================== */

:root {
  --header-height: 28px;
  --border: 1px solid black;
  --padding: 5px;
}



/* ==========================================
   GENERAL
========================================== */

* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
}


html {
  background: white;
}


body {
  font-family: "Tempos", monospace;
  font-size: 15px;
  line-height: 1;
  color: black;
  background: white;
}


button,
input,
textarea {
  font: inherit;
}


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


a:hover {
  text-decoration: underline;
}


.active {
  text-decoration: underline;
}



/* ==========================================
   HEADER
========================================== */

.header {
  position: relative;
  z-index: 100;

  width: 100%;
  height: var(--header-height);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 var(--padding);

  border-bottom: var(--border);

  background: white;

  white-space: nowrap;
}


.navigation {
  display: flex;
  align-items: center;
  gap: 4px;
}


.language {
  display: flex;
  align-items: center;
  gap: 2px;
}


.language button {
  appearance: none;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;
  color: inherit;

  cursor: pointer;
}


.language button:hover {
  text-decoration: underline;
}



/* ==========================================
   HOMEPAGE
========================================== */

.home-page {
  overflow: hidden;
}


.project-gallery {
  width: 100%;

  height:
    calc(
      100dvh -
      var(--header-height)
    );

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}


.project-gallery::-webkit-scrollbar {
  display: none;
}


.gallery-track {
  display: flex;

  width: max-content;
  height: 100%;
}


.gallery-item {
  display: block;

  flex: 0 0 auto;

  height: 100%;

  margin: 0;
  padding: 0;
}


.gallery-item img {
  display: block;

  width: auto;
  height: 100%;

  object-fit: contain;
}



/* ==========================================
   INDEX
========================================== */

.archive {
  width: 100%;
}


.archive-project {
  width: 100%;
}



/* ==========================================
   INDEX ROW
========================================== */

.archive-row {
  appearance: none;

  position: relative;

  width: 100%;
  height: 26px;

  display: flex;
  align-items: center;

  margin: 0;

  padding: 0 var(--padding);

  border: 0;
  border-bottom: var(--border);

  background: white;
  color: black;

  font: inherit;

  text-align: left;

  cursor: pointer;
}


.archive-row:hover {
  text-decoration: none;
}


.archive-title {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.archive-client {
  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  max-width: 35%;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  text-align: center;
}


.archive-year {
  margin-left: auto;

  white-space: nowrap;

  text-align: right;
}



/* ==========================================
   OPEN / CLOSED PROJECT
========================================== */

.archive-content {
  display: none;
}


.archive-project.is-open .archive-content {
  display: block;
}



/* ==========================================
   PROJECT GALLERY
========================================== */

.archive-gallery {
  width: 100%;
  height: 355px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  border-bottom: var(--border);
}


.archive-gallery::-webkit-scrollbar {
  display: none;
}


.archive-gallery-track {
  display: flex;

  width: max-content;
  min-width: 100%;

  height: 100%;
}


.archive-gallery-item {
  flex: 0 0 auto;

  height: 100%;

  margin: 0;
  padding: 0;

  border-right: var(--border);
}


.archive-gallery-item:last-child {
  border-right: 0;
}


.archive-gallery-item img {
  display: block;

  width: auto;
  height: 100%;

  object-fit: contain;
}


.archive-gallery-track
.archive-gallery-item:only-child {
  border-right: 0;
}



/* ==========================================
   PROJECT INFORMATION
========================================== */

.archive-information {
  display: grid;

  grid-template-columns:
    50%
    25%
    25%;

  width: 100%;

  min-height: 130px;

  border-bottom: var(--border);
}



/* ==========================================
   PROJECT DESCRIPTION
========================================== */

.archive-description {
  padding: var(--padding);
}


.archive-description p {
  max-width: 500px;

  margin: 0;

  line-height: 1.05;

  white-space: pre-line;
}


/* Italic text marked with *...* in project.json */

.archive-description em {
  font-style: italic;
}



/* ==========================================
   PROJECT DETAILS
========================================== */

.archive-details {
  padding: var(--padding);
}


.archive-detail {
  margin: 0 0 15px 0;
}


.archive-detail:last-child {
  margin-bottom: 0;
}


/*
  Display:

  Zusammenarbeit:
  mit Basil Mayer
*/

.archive-detail-label {
  display: block;

  margin: 0;

  font-style: normal;
}


.archive-detail-label::after {
  content: ":";
}


.archive-detail-value {
  display: block;

  margin: 0;
}


.archive-detail a {
  color: inherit;

  text-decoration: none;
}


.archive-detail a:hover {
  text-decoration: underline;
}


.archive-details:empty {
  padding: 0;
}



/* ==========================================
   PROJECT LINKS
========================================== */

.archive-links {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  padding: var(--padding);
}


.archive-links a {
  display: block;

  color: inherit;

  text-decoration: none;
}


.archive-links a:hover {
  text-decoration: underline;
}


.archive-links:empty {
  padding: 0;
}



/* ==========================================
   INFO
========================================== */

.info {
  min-height:
    calc(
      100dvh -
      var(--header-height)
    );

  padding: var(--padding);
}


.info-column {
  width: 48%;

  max-width: 500px;
}


.info p {
  margin-top: 0;
}


.info-text p {
  margin-top: 0;
}


.info-text p:last-child {
  margin-bottom: 30px;
}


.info-block {
  margin-bottom: 30px;
}


.info-block p {
  margin-top: 0;
  margin-bottom: 0;
}


.info-label {
  margin: 0;

  font-style: italic;
}



/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {


  /* ------------------------------------------
     GENERAL
  ------------------------------------------ */

  body {
    font-size: 13px;
  }



  /* ------------------------------------------
     INDEX ROW

     Titel / Client                Jahr
  ------------------------------------------ */

  .archive-row {
    height: 26px;

    display: flex;
    align-items: center;

    padding: 0 var(--padding);
  }


  .archive-title {
    flex: 0 1 auto;

    display: inline;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


  .archive-title::after {
    content: " / ";
  }


  .archive-client {
    position: static;

    flex: 0 1 auto;

    display: inline;

    transform: none;

    max-width: none;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    text-align: left;
  }


  .archive-year {
    flex: 0 0 auto;

    margin-left: auto;

    padding-left: 10px;

    white-space: nowrap;

    text-align: right;
  }



  /* ------------------------------------------
     PROJECT GALLERY
  ------------------------------------------ */

  .archive-gallery {
    height: 45vh;
  }



  /* ------------------------------------------
     PROJECT INFORMATION
  ------------------------------------------ */

  .archive-information {
    grid-template-columns: 1fr;
  }


  .archive-description,
  .archive-details,
  .archive-links {
    padding: var(--padding);
  }


  .archive-description p {
    max-width: none;
  }


  .archive-details:empty,
  .archive-links:empty {
    display: none;
  }


  .archive-links {
    align-items: flex-start;
  }



  /* ------------------------------------------
     INFO
  ------------------------------------------ */

  .info-column {
    width: 100%;

    max-width: none;
  }

}