@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #141414;
  --paper: #fff;
  --ink: #111;
  --muted: #8a8a8a;
  --pad: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: 0;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .5; }

.sheet {
  background: var(--paper);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 0;
  padding: var(--pad);
}

.sheet > header,
.sheet > footer {
  display: contents;
}

.cell-l, .cell-r { padding-right: var(--pad); }

.top-l { grid-column: 1; grid-row: 1; }
.top-r { grid-column: 2; grid-row: 1; }
.main-l { grid-column: 1; grid-row: 2; padding-top: 54px; }
.main-r { grid-column: 2; grid-row: 2; padding-top: 54px; }
.bot-l { grid-column: 1; grid-row: 3; align-self: end; padding-top: 40px; }
.bot-r { grid-column: 2; grid-row: 3; align-self: end; padding-top: 40px; }

.block { margin-bottom: 2.2em; max-width: 34em; }
.block p + p { margin-top: 1.25em; }

.list a { display: block; }

.portrait {
  display: block;
  width: 120px;
  height: auto;
  filter: grayscale(1) contrast(1.04);
  mix-blend-mode: multiply;
}

.portrait-wrap { display: inline-block; isolation: isolate; line-height: 0; }
.portrait-wrap[hidden] { display: none; }

.active { text-decoration: underline; text-underline-offset: 2px; }
.muted { color: var(--muted); }

/* project page */
.gallery { display: flex; flex-direction: column; gap: var(--pad); }
.gallery img, .gallery .ph {
  width: 100%;
  height: auto;
  display: block;
  background: #ececec;
}
.gallery .ph { aspect-ratio: 3 / 2; }
.gallery .ph.tall { aspect-ratio: 4 / 5; }

.sticky { position: sticky; top: var(--pad); }

/* startseite: eine Spalte, Porträt unten mittig */
.home-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--pad) var(--pad) 0;
}
.home .block { max-width: 72em; margin-bottom: 1.25em; }
.home .block p + p { margin-top: 0; }
.home #name { margin-bottom: 1.25em; }
.home .block.last { margin-bottom: 80px; }
.home-wrap { position: relative; }
.corner {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}
.corner a:hover { opacity: 1; color: var(--ink); }
.home .portrait-wrap {
  display: block;
  width: min(256px, 56vw);
  margin: auto auto 0;
}
.home .portrait { width: 100%; display: block; }

/* mobile */
@media (max-width: 720px) {
  body { font-size: 14px; }
  .sheet {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    min-height: 100svh;
  }
  .top-l, .bot-l { grid-column: 1; padding-right: 0; }
  .top-r, .bot-r { grid-column: 2; padding-right: 0; text-align: right; }
  .top-l, .top-r { grid-row: 1; }
  .bot-l, .bot-r { grid-row: 5; align-self: end; padding-top: 64px; }
  .main-l { grid-column: 1 / 3; grid-row: 2; padding: 40px 0 0; }
  .main-r { grid-column: 1 / 3; grid-row: 3; padding: 32px 0 0; }
  .project .main-r { grid-row: 2; padding: 40px 0 0; }
  .project .main-l { grid-row: 3; padding: 8px 0 0; }
  .sticky { position: static; }
  .portrait { width: 38vw; max-width: 180px; }
}