@font-face {
  font-family: "Karmilla";
  font-weight: 400;
  src: url("./karmilla-regular-webfont.woff2") format("woff2");
}
@font-face {
  font-family: "Karmilla";
  font-weight: 700;
  src: url("./karmilla-bold-webfont.woff2") format("woff2");
}
@font-face {
  font-family: "WeissRundgotisch";
  font-weight: 400;
  src: url("../documents/textures/weiss-rundgotisch.woff2") format("woff2");
}
@font-face {
  font-family: "Stretch Pro";
  src: url("./stretch-pro-regular.woff2") format("woff2");
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --font-body: "Karmilla", sans-serif;
  --font-alt: "Stretch Pro", math;
  --c-bg: #1e2124;
  --c-fg: #fff;
  --c-sepia: #ddddcc;
  --c-sepia2: #888877;
  --c-sepia3: #444433;
  --c-sepia4: #151510;
  --c-accent: #5544ff;
  --line-height: calc(5 / 4);
}
::selection {
  background: var(--c-accent);
  color: var(--c-bg);
}
html,
body {
  height: 100%;
}
html {
  scrollbar-color: var(--c-sepia3) var(--c-sepia4);
  scrollbar-width: thin;
  hyphens: auto;
}
body {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  line-height: var(--line-height);
  background: var(--c-bg) url("./images/noise.png") repeat fixed;
  color: var(--c-sepia);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--c-sepia2);
  text-decoration-thickness: calc(1em / 6);
  &:hover {
    color: var(--c-fg);
  }
  &[href^="http"]:after {
    content: " ⧉";
  }
}
[title] {
  text-decoration-line: underline;
  text-decoration-color: var(--c-sepia3);
  text-decoration-style: dashed;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  --s: 0.875;
  font-size: calc(1em * var(--s));
  line-height: calc(1em * var(--line-height) / var(--s));
  font-weight: inherit;
  font-family: var(--font-alt);
}
ul,
ol {
  list-style-type: none;
  & > li {
    position: relative;
    padding-inline-start: calc(1em * 5 / 4);
  }
  & > li:before {
    content: "✧";
    font-family: sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    color: var(--c-sepia2);
  }
}

.visual-container {
  user-select: none;
  overflow: hidden;
  height: 100lvh;
  width: 100lvw;
  position: fixed;
  top: 0;
  left: 0;
  & > * {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.layout {
  --layout-width: 63em;
  pointer-events: none;
  position: relative;
  z-index: 1;
  padding-inline: calc(1em * 1 * var(--line-height));
  max-width: var(--layout-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns:
    calc(5em * var(--line-height)) 5fr calc(2em * var(--line-height))
    2fr;
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
  column-gap: calc(1em * 1 * var(--line-height));
  row-gap: calc(1em * 3 * var(--line-height));

  & > header {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    padding-block-start: calc(1em * 2 * var(--line-height));

    & > * {
      pointer-events: auto;
    }

    svg {
      display: block;
      width: auto;
      height: calc(1em * 3 / 2 * var(--line-height));
    }
  }

  & > aside {
    grid-column: 4 / span 1;

    hr {
      --h: 3px;
      border: none;
      margin-block-start: calc(1em * 1 * var(--line-height));
      border-block-end: var(--h) var(--c-sepia3) dotted;
    }

    &.span-all {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    p,
    a {
      pointer-events: auto;
    }

    & > .container {
      position: sticky;
      top: calc(1em * 1 * var(--line-height));

      h2 {
        pointer-events: auto;
        margin-block-end: calc(1em * 1 * var(--line-height) / var(--s));
        &:not(:first-child) {
          margin-block-start: calc(1em * 3 / 2 * var(--line-height));
        }
      }
    }

    &.corner {
      grid-row: 1 / span 1;
      position: relative;
      display: flex;
      /*align-items: center;*/
      padding-block-start: calc(1em * 2 * var(--line-height));
      justify-content: flex-end;
      color: var(--c-sepia2);

      & > * {
        pointer-events: auto;
      }

      span {
        margin-inline-start: 0.25em;
      }

      &:after {
        content: " ";
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        width: calc(100% + 1em * 1 * var(--line-height));
        height: 1px;
        background: var(--c-sepia3);
      }
    }
  }

  & > .gutter {
    grid-column: 3 / span 1;
    grid-row-start: 1;
    border-inline-end: 1px var(--c-sepia3) solid;
    position: relative;

    &:after {
      content: " ";
      display: block;
      position: sticky;
      top: 0;
      margin-left: 100%;
      width: 100lvw;
      height: 100lvh;
      background: var(--c-sepia);
      /*background: linear-gradient(to top, var(--c-sepia), transparent);*/
      opacity: 0.025;
    }
  }

  & > .logo {
    grid-row: 2 / span 1;

    svg {
      display: block;
      width: auto;
      height: calc(1em * 2 * var(--line-height));
    }
  }

  & > .section-label {
    grid-column: 1 / span 1;
    & > * {
      pointer-events: auto;
    }
    h2 {
      font-family: WeissRundgotisch;
      position: sticky;
      color: var(--c-sepia2);
      top: calc(1em * 1 * var(--line-height));
    }
  }

  & > .section {
    grid-column: 2 / span 1;
    p,
    a {
      pointer-events: auto;
    }
  }

  & > .intro {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;

    & > * {
      pointer-events: auto;
    }
    span {
      color: var(--c-sepia2);
    }
  }

  & > .banner {
    --b: 3px;
    grid-column: 1 / span 2;
    grid-row: 3 / span 1;
    aspect-ratio: calc(15 / 8);
    border: var(--b) var(--c-sepia3) solid;
    pointer-events: auto;
    position: relative;

    .banner-container {
      position: absolute;
      top: var(--b);
      left: var(--b);
      width: calc(100% - var(--b) * 2);
      height: calc(100% - var(--b) * 2);

      & > * {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  & > footer {
    --s: calc(7 / 8);
    grid-column: 2 / span 1;
    color: var(--c-sepia2);
    font-size: calc(1em * var(--s));
    padding-block-end: calc(1em * 2 * var(--line-height) / var(--s));
    p,
    a {
      pointer-events: auto;
    }

    a {
      text-decoration-color: var(--c-sepia3);
    }

    ul {
      li {
        padding-inline-start: 0;
        display: inline;
        &:before {
          display: none;
        }
        &:not(:last-of-type):after {
          content: " ⁄";
          margin-inline: 0.25em;
          color: var(--c-sepia2);
        }
      }
    }
  }
}

.games {
  color: var(--c-sepia2);
  margin-block-start: calc(1em * 1 * var(--line-height));
  a {
    color: var(--c-sepia);
    &:hover img {
      filter: none;
    }
  }
  img {
    filter: brightness(0.7) sepia(1) grayscale(0.6);
    transition: filter 0.2s ease;
  }
}

.documents {
  li {
    white-space: nowrap;
    counter-increment: opus-no;
    display: inline;
    padding-inline-start: 0;
    &:before {
      font-size: calc(1em * 3 / 4);
      margin-inline-end: 0.125em;
      content: "#" counter(opus-no) " ";
      position: static;
    }
    &:not(:last-child):after {
      content: ",";
      margin-inline-end: 0.5em;
      color: var(--c-sepia2);
    }
  }
}

.articles {
  --s: calc(6 / 3);
  --padding: calc(1em * var(--line-height) / var(--s) * 1 / 2);
  font-family: WeissRundgotisch, var(--font-body);
  line-height: 1;
  display: flex;
  flex-direction: column-reverse;
  margin-block: calc(-3 * var(--padding));
  & > li {
    padding-inline-start: 0;
    position: relative;
    font-size: calc(1em * var(--s));
    padding-block: var(--padding);
    &:before {
      content: " ";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 0;
      border-block-start: 1px var(--c-sepia3) dotted;
    }
    &:first-of-type:before {
      display: none;
    }
    a {
      text-decoration: none;
      span {
        color: var(--c-sepia2);
      }
    }
  }
}

.journal {
  margin-block-end: calc(1em * 1 / 2 * var(--line-height));
  & > * {
    white-space: nowrap;
    display: inline;
    padding-inline-start: 0;

    &:before {
      position: static;
      content: " ⁄";
      margin-inline: 0.25em 0.5em;
      color: var(--c-sepia2);
    }
    &:first-of-type {
      &:before {
        content: "✯";
        position: static;
        margin-inline: 0 0.25em;
      }
    }
    &:not(:first-of-type) {
      a:before {
        content: "'";
      }
      span {
        display: none;
      }
    }
  }
}

.journal-container {
  padding-block-end: calc(1em * 9 * var(--line-height));

  .journal-update {
    --scalar: calc(7 / 8);
    color: var(--c-sepia2);
    font-size: calc(1em * var(--scalar));
    border-block-start: 1px var(--c-sepia3) dotted;
    padding-block-start: calc(1em * 1 / 2 / var(--scalar) * var(--line-height));
    a {
      text-decoration-color: var(--c-sepia3);
    }
    &:not(:last-child) {
      margin-block-end: calc(1em * 1 / 2 / var(--scalar) * var(--line-height));
    }
  }
}

ul.menu {
  display: flex;
  flex-wrap: wrap;
  & > * {
    flex-basis: 50%;
    padding-inline: 0;
    a {
      --b: 1px;
      display: block;
    }
    &:before {
      display: none;
    }
  }
}

.terminal {
  display: flex;
  justify-content: flex-end;
  padding-block-end: calc(1em * 2 * var(--line-height));

  img {
    width: auto;
    height: calc(1em * 3 * var(--line-height));
    display: block;
  }
}

/* HACK */
.span-all {
  grid-row-end: 7;
}

.toggle {
  --c-border: var(--c-sepia2);
  --c-fill: var(--c-sepia3);
  --w: 2em;
  --h: 0.8em;
  display: inline-block;
  position: relative;
  padding-inline-start: calc(var(--w) + 0.5em);
  color: var(--c-sepia2);
  input {
    display: none;
  }
  &:before {
    position: absolute;
    content: " ";
    display: block;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: var(--w);
    height: var(--h);
    border: 1px var(--c-border) solid;
    border-radius: 1em;
  }
  &:after {
    --spacing: 3px;
    --w2: 0.66;
    position: absolute;
    content: " ";
    display: block;
    top: 50%;
    transform: translateY(-50%);
    left: var(--spacing);
    width: calc(var(--w) * var(--w2) - var(--spacing) * 2);
    height: calc(var(--h) - var(--spacing) * 2);
    border: 1px var(--c-border) solid;
    border-radius: 1em;
    background: var(--c-fill);
    transition: left 0.15s ease;
  }
  &:has(input:checked) {
    color: var(--c-sepia);
    &:after {
      left: calc(var(--w) * (1 - var(--w2)) + var(--spacing));
    }
  }
}

@media (max-width: 960px) {
  .layout {
    display: flex;
    flex-direction: column;
    row-gap: calc(1em * 2 * var(--line-height));
    pointer-events: auto;
    & > .gutter {
      display: none;
    }
    & > aside {
      &.span-all {
        order: 1;
      }
      & > .container {
        position: static;
      }
      &.corner {
        margin-block-start: calc(1em * -1 * var(--line-height));
        padding-block-start: 0;
      }
    }
    & > .banner {
      aspect-ratio: calc(3 / 2);
    }
    & > .intro {
      margin-block-start: calc(1em * -3 * var(--line-height));
      margin-block-end: calc(1em * 0 * var(--line-height));
      padding-inline-start: calc(1em * 3 * var(--line-height));
    }
    & > header {
      svg {
        margin-inline: auto;
      }
    }
    & > .section-label {
      margin-block-end: calc(1em * -1 * var(--line-height));
    }
    & > footer {
      padding-block-start: calc(1em * 1 * var(--line-height) / var(--s));
      padding-block-end: calc(1em * 1 * var(--line-height) / var(--s));
    }
  }
  .journal-container {
    padding-block-end: 0;
  }
  .terminal {
    margin-block-start: calc(1em * 0 * var(--line-height));
    margin-block-end: calc(1em * 0 * var(--line-height));
    padding-block-end: calc(1em * 1 * var(--line-height));

    img {
      height: calc(1em * 2 * var(--line-height));
    }
  }
}