/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. To learn how to do something, just try searching Google for questions like "how to change link color." */
  
  @font-face {
    font-family: "Geist Pixel";
    font-weight: 400;
    src: url("assets/fonts/GeistPixel.woff2") format("woff2");
  }
  @font-face {
    font-family: "Geist Pixel";
    font-weight: 700;
    src: url("assets/fonts/GeistPixel.woff2") format("woff2");
  }
  @font-face {
    font-family: "Geist Pixel";
    src: url("assets/fonts/GeistPixel.woff2") format("woff2");
  }
  @font-face {
    font-family: "Geist Pixel";
    src: url("assets/fonts/GeistPixel.woff2") format("woff2");
  }
  *,
  *:before,
  *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --font-body: "Geist Pixel", sans-serif;
    --font-alt: "Geist Pixel", sans-serif;
    --u: 16px;
    --c-bg: #000629;
    --c-fg: #000000;
    --c-blue: #C6CCEB;
    --c-blue2: #4F5C9B;
    --c-blue3: #1E254F;
    --c-blue4: #000629;
    --c-accent: #FF378E;
    --c-hand: #222220;
    --c-ground: var(--c-blue2);
    --border: 2px;
    --layout-width: 66em;
    --split-width: 76em;
    --gutter: calc(1em * 6 / 2);
    --gutter2: calc(1em * 5 / 6);
  }

  html:has(.toggle input:checked) {
    --c-bg: #dfdfdf;
    --c-fg: #444;
    --c-blue: #111111;
    --c-blue2: #888888;
    --c-blue3: #bbbbbb;
    --c-blue4: var(--c-blue3);
    --c-accent: #6666ff;
    --c-hand: var(--c-blue2);
    --c-ground: var(--c-bg);
    body {
        background-image: none;
    }
    .icon {
        text-shadow: none;
    }
    .visual-container {
        background: none;
        & > svg {
            color: #fff;
        }
    }
    .column > header {
        border-block-start-color: var(--c-fg);
    }
    .column > header h2,
    .sub-header h2 {
        color: var(--c-blue);
    }
    a:hover {
        text-shadow: none;
    }
    .upper-block {
        background: radial-gradient(
            farthest-side at bottom,
            color-mix(in oklch, var(--c-blue3) 40%, transparent),
            var(--c-bg)
        );
    }
  }
 
  ::selection {
      background: var(--c-accent);
      color: var(--c-bg);
  }

  html {
      scrollbar-color: var(--c-blue3) var(--c-bg);
      scrollbar-width: thin;
      hyphens: auto;
      overflow-x: hidden;
  }

  body {
      font-family: var(--font-body);
      font-size: clamp(var(--u), 2vw, 1.2rem);
      line-height: calc(4 / 3);
      background: var(--c-bg) url("./assets/images/noise.png") repeat;
      color: var(--c-blue);
  }

  a {
      color: inherit;
      text-decoration-line: underline;
      text-decoration-color: var(--c-accent);
      text-decoration-thickness: calc(1em / 6);
      &:hover {
          color: var(--c-fg);
          text-shadow: 0 0 0.5em var(--c-accent);
      }
      &[href^="http"]:after {
          content: " ⧉";
      }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-size: 1.125em;
      font-weight: inherit;
      font-family: var(--font-alt);
  }

  ul,
  ol {
      list-style-type: none;
      & > li {
          position: relative;
          padding-inline-start: calc(1em * 4 / 3);
      }
      & > li:before {
          content: "✦";
          font-family: sans-serif;
          position: absolute;
          top: 0;
          left: 0;
          color: var(--c-blue2);
      }
  }

  blockquote {
      border-inline-start: calc(var(--border) * 2) var(--c-blue3) solid;
      padding-inline-start: calc(var(--u) - var(--border));
      color: var(--c-blue2);
  }

  span.unicode {
      font-family: sans-serif;
  }

  .column {
      margin-inline: auto;
      padding: 0 1em var(--gutter);
      max-width: var(--layout-width);
      container-name: layout;
      container-type: inline-size;
      position: relative;
      &:before,
      &:after {
          display: block;
          position: absolute;
          content: " ";
          top: 0;
          height: 100%;
          z-index: -1;
          width: var(--border);
      }
      &:before {
          right: calc(100% + var(--gutter) * 1);
      }
      &:after {
          left: calc(100% + var(--gutter) * 1);
      }
      &.top {
          &:before,
          &:after {
              background: linear-gradient(to top, var(--c-blue4), transparent);
          }
      }
      &.journal {
          &:before,
          &:after {
              background: var(--c-blue4);
          }
      }
      &.bottom {
        &:before,
        &:after {
          background: linear-gradient(
              to bottom,
              var(--c-blue4),
              transparent
          );
        }
      }
  }
  
  header.column {
      text-align: center;
      background: url("/assets/images/Architect.png") center calc(1em * 5 / 2)
          no-repeat;
      background-size: 3em 3em;
      h1 {
          font-family: Geist Pixel, var(--font-body);
          font-size: calc(1em * 7 / 2);
          margin-block-start: calc(1em * 4 / 2);
          margin-block-end: calc(1em * 1 / 2);
          color: var(--c-blue4);
          background: var(--c-accent);
      }
      p {
          color: var(--c-blue2);
          time {
              font-weight: 700;
          }
      }
      &:before,
      &:after {
          background: linear-gradient(to top, var(--c-blue4), transparent);
      }
      &.split {
          max-width: var(--split-width);
      }
  }

  article.column {
      padding-block: var(--gutter);
      img {
          margin-block: 0;
          border: calc(var(--border) * 2) var(--c-blue3) solid;
      }
      & > h2:not(:first-child) {
          margin-block-start: calc(1em * 2);
      }
      &:before,
      &:after {
          background: linear-gradient(
              to bottom,
              var(--c-blue4) calc(100% - 20em),
              transparent
          );
      }
      .img-wrapper img {
          display: block;
          width: 100%;
          height: auto;
      }
      &.split {
          columns: 2;
          column-gap: var(--gutter);
          max-width: var(--split-width);
          & > * {
              break-inside: avoid-column;
              margin-block: 0 calc(1em * 3 / 2);
          }
          & > * > *:not(:first-child) {
              margin-block: 0.5em;
          }
          img {
              float: right;
              width: 50%;
              height: auto;
              margin-left: 1em;
          }
      }
  }
  .icon {
      display: inline-block;
      width: 1em;
      text-align: center;
      margin-inline-end: 0.2em;
      color: var(--c-blue3);
      text-shadow: 2px 2px 0 var(--c-blue4);
  }

  .column > *,
  article > * {
      margin-block: 1em;
  }
  
  .column > header {
      border-block-start: calc(1em * 1 / 2) var(--c-blue2) solid;
      display: flex;
      align-items: stretch;
      position: relative;
  }

  .column > header,
  .sub-header {
      margin-block: 0; /*&:hover { background:
  url("./assets/images/pattern.svg") 0 2px repeat; }*/
  }
  
  .column > header h2,
  .sub-header h2 {
      font-family: inherit;
      font-weight: 700;
      font-size: inherit;
      color: var(--c-blue2);
  }
  .column > header ul {
      /*& > li { margin-inline-end:
  calc(var(--u) / 2); } & > li:after { display: none; } a { text-decoration: none;
  border: 1px var(--c-accent) solid; box-shadow: calc(var(--border) * 3 / 2)
  calc(var(--border) * 3 / 2) 0 var(--c-accent); padding: calc(var(--border) * 3 /
  2) calc(var(--gutter2) / 2); }*/
      &.main {
          font-weight: 700;
      }
  }
  .column > header ul > li,
  .sub-header ul > li {
      display: inline;
      padding-inline-start: 0;
      &:before {
          content: "";
      }
      &:not(:last-of-type):after {
          content: " ⁄";
          margin-inline: 0.4em;
          color: var(--c-blue2);
          font-weight: 400;
      }
  }
  .column > header > * {
      border-block-end: 1px var(--c-blue3) solid;
      padding-top: calc(var(--gutter2) * 2 / 2);
  }
  .column > header .info {
      border-inline-end: 1px var(--c-blue3) solid;
      display: flex;
      flex-direction: column;
      .intro span {
          color: var(--c-blue2);
      }
      & > div {
          display: flex;
          align-items: stretch;
          border-block-end: 1px var(--c-blue3) solid;
      }
      & > *:last-child {
          border-block-end: none;
          flex: 1;
      }
  }
  .column > header .info > div > *,
  .sub-header > * {
      padding: var(--gutter2);
      margin-inline-start: 0;
  }
  .column > header .info > div > *:first-child,
  .sub-header > *:first-child {
      flex-basis: 7.5em;
  }
  .column > header .info > div > *:last-child,
  .sub-header > *:last-child {
      flex: 1;
      border-inline-end: none;
  }

  .column > header .gutter {
      & > div {
          position: relative;
          padding: var(--gutter2);
          width: 7.5em;
          height: 100%;
      }
      a {
          border: calc(1em / 6) var(--c-accent) solid;
          display: block;
          height: 100%;
      }
      a[href^="http"]:after {
          display: none;
      }
      img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
      }
      .overlay {
          font-weight: 700;
          position: absolute;
          top: calc(var(--gutter2) + 0.3em);
          left: calc(var(--gutter2) + 0.3em);
          color: var(--c-accent);
          line-height: 1.1;
      }
  }
  .sub-header {
      display: flex;
      border-block-end: 1px var(--c-blue3) solid;
      &:last-child {
          margin-block-end: calc(var(--gutter2) * -1);
          border-block-end: none;
      }
      ul > li {
          /*white-space: pre-line;*/
      }
      ul > li:not(:last-of-type):after {
          content: ", " !important;
          margin-inline: 0 0.25em !important;
      }
      &.griddle {
          display: block;
          & > * {
              padding: 0 var(--gutter2);
          }
          & > :first-child {
              padding-block: var(--gutter2);
          }
          & > :last-child {
              padding-block-end: var(--gutter2);
          }
          ul {
              columns: 4;
              column-gap: var(--gutter2);
              column-fill: balance;
              & > li {
                  display: block;
                  padding-block: calc(var(--gutter2) / 2);
                  position: relative;
                  padding-inline-start: 1.2em;
                  break-inside: avoid-column;
                  border-block-start: 1px var(--c-blue3) dashed;
                  &:after {
                      content: "?";
                      font-family: sans-serif;
                      position: absolute;
                      top: calc(var(--gutter2) / 2);
                      left: 0;
                      color: var(--c-sepia2);
                      text-shadow: 2px 2px 0 var(--c-blue4);
                  }
                  &:before {
                      display: none;
                  }
                  &:nth-child(5n + 1):after {
                      content: "✢" !important;
                  }
                  &:nth-child(5n + 2):after {
                      content: "✣" !important;
                  }
                  &:nth-child(5n + 3):after {
                      content: "✤" !important;
                  }
                  &:nth-child(5n + 4):after {
                      content: "✦" !important;
                      left: 0.04em;
                  }
                  &:nth-child(5n + 5):after {
                      content: "✧" !important;
                      left: 0.04em;
                  }
              }
          }
      }
  }
  .documents {
      counter-reset: opus-no;
      li {
          white-space: nowrap !important;
          counter-increment: opus-no;
          &:before {
              font-size: calc(1em * 4 / 5);
              margin-inline-end: 0.2em;
              content: "#" counter(opus-no) " " !important;
              position: static !important;
              font-family: inherit !important;
          }
      }
  }
  hr {
      height: var(--border);
      background: var(--c-blue4);
      border: none;
      max-width: calc(var(--layout-width) + (var(--gutter) + var(--border)) * 2);
      margin-inline: auto;
      &.split {
          max-width: calc(
              var(--split-width) + (var(--gutter) + var(--border)) * 2
          );
      }
  }

  .column.journal {
      /*columns: 2;*/
      column-gap: calc(1em * 2);
      padding-block-start: var(--gutter);
      & > * {
          break-inside: avoid-column;
      }
      img {
          margin-block-start: 0;
          border: calc(var(--border) * 2) var(--c-blue3) solid;
      }
  }
  
  .column article {
      h2 {
          --scalar: calc(9 / 8);
          font-size: calc(1em * var(--scalar));
          margin-block-start: calc(3em / var(--scalar));
          color: var(--c-fg);
          a {
              text-decoration: none;
              color: var(--c-accent);
          }
          &:before {
              content: "⬤ ";
          }
      }
      &:first-of-type {
          margin-block-start: 0;
          h2 {
              margin-block-start: 0;
          }
      }
      &.collapsed {
          border-block-end: 1px var(--c-blue3) solid;
          & > h2 {
              color: var(--c-blue2);
              a {
                  color: var(--c-blue3);
              }
          }
          & > *:not(h2) {
              display: none;
          }
          & + .collapsed > h2 {
              margin-block-start: 0;
          }
          &:last-of-type {
              border-block-end: none;
          }
      }
  }
  .divider {
      height: 0;
      max-width: var(--layout-width);
      margin-inline: auto;
      padding-inline: 1em;
      text-align: center;
      position: relative;
      z-index: 1;
      span {
          --scalar: calc(5 / 6);
          user-select: none;
          color: var(--c-blue3);
          display: inline-flex;
          font-family: var(--font-body);
          border: var(--border) var(--c-blue4) solid;
          border-radius: 2em;
          padding-inline: calc(1em * 4 / 4);
          background: var(--c-bg);
          position: relative;
          height: calc(2em / var(--scalar));
          align-items: center;
          top: calc(1em * -1 / var(--scalar) - 1px);
          margin-inline: calc(1em / var(--scalar));
          font-size: calc(1em * var(--scalar));
          font-weight: 700;
          &:before,
          &:after {
              --w: calc(1em / 3);
              content: " ";
              display: none;
              position: absolute;
              top: calc(var(--border) * -1);
              height: 100%;
              border-radius: 1em;
              border: var(--border) var(--c-blue4) solid;
              background: var(--c-bg);
              z-index: -1;
          }
          &:before {
              right: calc(var(--w) * -2 - var(--border));
              width: calc(100% + var(--w) * 4);
          }
          &:after {
              right: calc(var(--w) * -1 - var(--border));
              width: calc(100% + var(--w) * 2);
          }
      }
      a {
          text-decoration: none;
      }
  }
  .visual-container {
      position: relative;
      width: 100%;
      aspect-ratio: calc(3 / 2);
      margin-block-start: 0;
      margin-block-end: 0;
      & > * {
          position: absolute;
          top: 0;
          left: 0;
      }
      & > svg {
          --offset: 0em;
          display: block;
          left: var(--offset);
          width: calc(100% - var(--offset) * 2);
          height: auto;
          color: var(--c-blue4);
          mask: url("./assets/images/pattern2.svg") repeat;
      }
      & > img {
          display: block;
          left: 50%;
          top: 50%;
          transform: translateX(-50%) translateY(-50%);
          width: 10em;
          height: 10em;
      }
      .toggle {
          top: auto;
          left: 50%;
          transform: translateX(-50%);
          bottom: var(--gutter2);
          z-index: 1;
          color: var(--c-sepia4);
          font-weight: 700;
          cursor: pointer;
          & > input {
              display: none;
          }
          & > input:checked + span:before {
              content: "☼";
          }
          & > input:not(:checked) + span:before {
              content: "☾";
          }
      }
  }

  .column > footer {
      margin-block-start: var(--gutter);
      text-align: center;
      color: var(--c-sepia3);
      p {
          margin-block-end: var(--gutter2);
          font-weight: 700;
      }
      a {
          color: var(--c-blue2);
      }
      ul {
          display: inline-flex;
          gap: 0.8em;
          li:before {
              content: "🜚";
          }
      }
  }
  
  .upper-block {
      /*background: radial-gradient(farthest-side
  at bottom, color-mix(in oklch, var(--c-bg) 20%, transparent), var(--c-bg)),
  url("./assets/images/pattern.svg") 0 0 repeat;*/ /*background:
  radial-gradient(farthest-side at bottom, color-mix(in oklch, var(--c-sepia4)
  100%, transparent), color-mix(in oklch, var(--c-blue4) 20%, transparent));*/
      background: color-mix(in oklch, var(--c-blue4) 30%, transparent);
      user-select: none;
      & > div {
          max-width: var(--layout-width);
          margin-inline: auto;
          padding-inline: 1em;
          container-name: layout;
          container-type: inline-size;
      }
  }
  
  @container layout (max-width: 720px) {
      .visual-container {
          aspect-ratio: calc(1);
      }
      .column > header {
          flex-direction: column;
      }
      .column > header .info > div > *:first-child,
      .sub-header > *:first-child {
          flex-basis: 4.25em;
      }
      .column > header > *:last-child {
          border-block-end: none;
      }
      .column > header .info {
          border-inline-end: none;
      }
      .column > header .gutter {
          display: none;
      }
      .column {
          &:before,
          &:after {
              display: none;
          }
      }
      .sub-header.griddle ul {
          columns: 2;
      }
  }
  @media (max-width: 960px) {
      article.column.split {
          columns: 1;
      }
  }