/* Font Faces */
@font-face {
  font-family: 'Libre Caslon';
  src: url('/font/LibreCaslonText[wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

@font-face {
  font-family: 'Libre Caslon';
  src: url('/font/LibreCaslonText-Italic[wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('/font/LibreCaslonCondensed[wdth,wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  size-adjust: 100%;
}

@font-face {
  font-family: 'Libre Caslon Condensed';
  src: url('/font/LibreCaslonCondensed-Italic[wght].woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* Theme */
:root {
  --primary-color: #4F8FE6;
  --background: #fff;
  --background-secondary: #eee;
  --foreground: #000019;
  --foreground-emphasis: #191919;
  --selection-color: #eee;
  --font-display: 'Libre Caslon Condensed', 'Times New Roman', Georgia, serif;
  --font-body: 'Libre Caslon', 'Times New Roman', Georgia, serif;
  --font-windows: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* There's an issue with Helvetica Neue Bold's glyph sizing that wrecks the grid. */
  --font-windows-bold: Helvetica, Arial, sans-serif;
  --root-font-size: 1rem;
  --base-grid: 1.5625rem;
  --radius: 4px;
  --border-width: 1px;
  --outer-radius: calc(var(--radius) - var(--border-width));
}

::selection {
  background-color: var(--selection-color);
  -webkit-text-stroke: 0;
  color: var(--primary-color);
  text-shadow: none;
}

/* CSS Reset */
* {margin: 0; padding: 0; box-sizing: border-box}
html { scroll-behavior: smooth }

/* Base Elements */
h1,h2,h3,h4 { font-weight: 300 }
li,p {
  hyphens: auto;
  text-align: justify;
  transform: translateY(7px);
}
strong {
  font-family: var(--font-body);
  color: var(--foreground-emphasis);
  font-weight: 700;
  line-height: 1;
}
p { margin-bottom: var(--base-grid); }
pre {
  background: var(--background-secondary);
  border-radius: var(--radius);
  display: block;
  margin: 1lh 0;
  overflow-x: scroll;
  padding: 1lh;
}
a[role="button"],
button {
  border: var(--border-width) solid var(--foreground);
  border-radius: var(--radius);
  background-color: var(--background);
  color: var(--foreground);
  cursor: pointer;
  font-family: var(--font-windows-bold);
  font-size: 1rem;
  line-height: var(--base-grid);
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  transition: 0.1s all linear;
  padding: calc(0.5lh - var(--border-width)) 1lh;
  margin-bottom: 1lh;

  &:active {
    background-color: var(--foreground);
    color: var(--background);
  }

  label {
    line-height: var(--base-grid);
    cursor: pointer;
  }
}

.textured {
  h2, p, ul {
    paint-order: stroke fill;
  }
}

ol {
  list-style: lower-roman;
  margin: 1lh;
}

ul {

  list-style: none;

  > li {
    position: relative;
    padding-left: var(--base-grid);

    > ol { margin: 0 0 1lh 1lh }


    p { display: inline }

    &::before {
      content: "✳\FE0E";
      width: var(--base-grid);
      display: inline-block;
      margin-left: calc(-1 * var(--base-grid));
      text-align: left;
    }
  }
}


/* The Contents */
body {
  font-family: var(--font-body);
  font-synthesis: none;
  font-variant-emoji: text;
  color: var(--foreground);
  background: var(--primary-color);
  font-size: var(--root-font-size);
  line-height: var(--base-grid);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100vh;


/* Header */

  & > header {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 0;
    background: var(--primary-color);
    background-image: url("/img/weave_diag_3.png");
    font-family: var(--font-display);
    padding: 1lh 1lh 4lh;
    position: relative;

    @media (max-width: 385px) {
      grid-template-rows: 3lh auto;
    }

    &::after {
      content: '';
      width: 100vw;
      height: 256px;
      display:block;
      position: absolute;
      background-image: url("/img/dither.png");
      background-position: 0;
      background-repeat: repeat-x;
      bottom: 0;

    }

    h1 {
      font-size: 1.3125rem;
      flex: 0 0 auto;
      grid-column: 1;
      grid-row: 1;
      line-height: var(--base-grid);

      a {
        color: var(--background);
      }

      img {
        width: calc(4 * var(--base-grid));
        filter: brightness(0) invert(1);
        margin-bottom: 8px;

        @media (max-width: 600px) {
          width: calc(3 * var(--base-grid));
          margin-bottom: 0px;
        }
      }
    }

    ul {
      line-height: var(--base-grid);
      align-self: end;
      grid-column: 1;
      grid-row: 2;
      z-index: 1000;

      @media (max-width: 385px) {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: first-baseline;
        position: relative;
        top: -1lh;
      }


      li {
        padding: 0;

        &::before {
          display: none;
        }

        a {
          background-color: rgba(255, 255, 255, 0.1);
          background-image: url("/img/dither.png");
          background-repeat: repeat-x;
          background-position-y: -2.5lh;
          text-align: center;
          color: var(--foreground);
          width: 4lh;
          border: 1px solid var(--foreground);
          border-radius: var(--radius);
        }
      }
    }

    p {
      color: var(--background);
      font-size: 4.5rem;
      font-style: italic;
      grid-column: 2;
      grid-row: 1 / 3;
      line-height: 4.6875rem;
      margin: var(--base-grid) 0;
      text-shadow: -4px 4px 0px var(--primary-color), 0px 0px 20px var(--primary-color), 0px 0px 20px var(--primary-color);
      transform: translateY(12px);
      white-space: pre;
      width: min-content;
      z-index: 10;

      @media (max-width: 800px) {
        font-size: 3rem;
        line-height: 3.125rem;
        margin: 1lh auto var(--base-grid);
        transform: translateY(7px)
      }

      @media (max-width: 600px) {
        font-size: 2rem;
        margin: 0.75lh auto 0.25lh;
        transform: translateY(1px)
      }

      @media (max-width: 385px) {
        font-size: 1rem;
        font-size: var(--base-grid);
        transform: translateY(3px);
        grid-column: 1 / 3;
        grid-row: 2;
        justify-self: end;
      }
    }

    a {
      display: block;
      margin-top: 5px;
      text-decoration: none;
      width: min-content;
      word-spacing: 100vw;
    }
  }
}
/* The Main Body **************************************************************/

main {
  align-items: center;
  flex-grow: 1;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;

  h2 {
    font-size: 1.5rem;
    line-height: 3.125rem;
    font-family: var(--font-display);
    font-weight: 500;
    transform: translateY(-8px);
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.25;
    font-weight: 500;
    transform: translateY(2px);
    margin: 2lh 0 1lh;
  }

  h4 {
    font-weight: 500;
    font-size: 1rem;
    line-height: var(--base-grid);
    transform: translateY(4px);
    margin: 1lh 0;
  }

  ul {
    list-style: none;
    margin-left: 0;
    margin-bottom: var(--base-grid);
  }

  .floating-key {
    position: absolute;
    top: -8lh;
    margin-bottom: -8lh;
    a {
      display: block;
    }

    img {
      max-width: min(75vw, calc(40 * var(--base-grid)));
      filter: brightness(110%) saturate(80%) opacity(95%);
      transition: all 200ms;
    }

    a:hover, a:active {
      img {
        filter: none;
        transform: scaleX(1.1) scaleY(1.1);
        position: relative;
        z-index: 1000;
      }
    }

    @media (max-width: 800px) {
      margin-left: var(--base-grid);
    }

    @media (max-width: 600px) {
      margin-left: calc(2 * var(--base-grid));
    }

    @media (max-width: 600px) {
      margin-left: calc(3 * var(--base-grid));
    }

    @media (max-width: 385px) {
      top: calc(-3 * var(--base-grid));
      margin-left: 0;
    }
  }
}

/* Key Layout *****************************************************************/

.key-layout {

  text-align: left;
  width: 100vw;
  margin: 17lh 0 2lh;
  padding: 0 1lh;
  column-gap: 2lh;
  row-gap: 3lh;
  max-width: 83lh;
  background: var(--background);
  display: flex;
  justify-content: center;
  max-width: 59lh;
  flex-wrap: wrap;

  section {
    flex: 1;
    min-width: calc(13 * var(--base-grid));
    max-width: calc(25 * var(--base-grid));

    img {
      width: 100%;
      border: 1px solid var(--foreground);
      border-radius: var(--radius)
    }

    ul {
      margin-bottom: 0;
    }

    @media (max-width: 360px) {
      min-width: calc(100vw - 2 * var(--base-grid));
    }
  }


  h2, p, ul {
    max-width: calc(20 * var(--base-grid));
  }

  .button-holder {
    text-align: center;
  }

  @media (max-width: 1195px) {
    margin-top: 14lh;
  }

  @media (max-width: 1050px) {
    margin-top: 12lh;
  }

  @media (max-width: 945px) {
    margin-top: 10lh;
  }

  @media (max-width: 840px) {
    margin-top: 8lh;
  }

  @media (max-width: 800px) {
    margin-top: 7lh;
  }

  @media (max-width: 700px) {
    margin-top: 5lh;
  }

  @media (max-width: 600px) {
    margin-top: 3lh;
  }

  @media (max-width: 550px) {
    margin-top: 2lh;
  }

  @media (max-width: 385px) {
    margin-top: 5lh;
  }
}

/* Footer *********************************************************************/

footer {

  color: var(--background);
  background: var(--foreground);
  padding: calc(2 * var(--base-grid));

  ul {
    list-style-position: inside;
  }
  li {
    float: left;
    list-style-position: inside;
    padding: 0 var(--base-grid);
    text-align: left;

    @media (max-width: 360px) {
      padding: 0 1lh;
      float: none;
      text-align: left;
    }

    img {
      filter: brightness(0) invert(1);
      width: var(--base-grid);
    }
  }

  a {
    color: #fff;
    display: inline-block;
    padding: 0 0 calc(1lh - 5px);
    margin-bottom: 5px;
  }

  @media (max-width: 360px) {
    padding: var(--base-grid);
  }
}

/* Floating Window ************************************************************/
.cutoff-corners {
  background-color: #fff;
  border: var(--border-width) solid #000;
  border-radius: var(--radius);
}

.window {

  font-family: var(--font-windows);

  .titlebar {
    border-bottom: var(--border-width) solid #000;
    font-family: var(--font-windows-bold);
    padding: calc(6 * var(--border-width)) calc(8 * var(--border-width)) calc(6 * var(--border-width)) ;
    line-height: calc(9 * var(--border-width));
    text-align: center;
    font-weight: 700;
    background: repeating-linear-gradient(
      0deg,
      black,
      black var(--border-width),
      white var(--border-width),
      white calc(var(--border-width) * 2)
    );
    background-clip: content-box;
    background-origin: content-box;
    list-style: none;

    &::marker {
      content: "";
    }

    .label {
      background-color: #fff;
      padding: var(--border-width) calc(5 * var(--border-width));
      line-height: calc(12 * var(--border-width));
      height: calc(12 * var(--border-width));
      display: inline-block;
    }
  }

  .content {
    padding: calc(var(--base-grid) - 1px) var(--base-grid);
  }

  hr.divider {
    margin-left: -6px;
    margin-right: -6px;
  }
}

aside {
  background: var(--background)
}

/* Lightbox Overlay ***********************************************************/

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  transform: scale(0.95);
  transition: transform 0.3s;
  opacity: 1;
}

.lightbox-overlay.active img {
  transform: scale(1);
}

.lightbox-close {
  position: fixed;
  width: 2lh;
  height: 2lh;
  padding: 0;
  top: var(--base-grid);
  right: var(--base-grid);
  font-size: 2em;
}

/* Text Pages *****************************************************************/

#text  {
  max-width: 35lh;
  padding: var(--base-grid);

  h1 { margin: 0 0 1lh }
  h2 { margin: 1lh 0 0.5lh }
  h3 { margin: 1lh 0 }
  h2 + h3 { margin: 0 0 1lh }
}