/* Vars
-------------------- */
:root {
  --color-1-raw: 46, 56, 56;
  --color-1: rgb(var(--color-1-raw));
  --color-2-raw: 246, 246, 223;
  --color-2: rgb(var(--color-2-raw));
  --color-3-raw: 202, 83, 93;
  --color-3: rgb(var(--color-3-raw));

  --pattern-scan-gap: 0.5vh;
  --pattern-scan-width:
      calc(2 * var(--pattern-scan-gap));
  --pattern-scan-width:
    max(calc(2 * var(--pattern-scan-gap)),0.4vw);
  --pattern-scan-size:
      calc(var(--pattern-scan-gap) + var(--pattern-scan-width));
  --pattern-scan-color: var(--color-1);
  --pattern-scan:
    linear-gradient(
        var(--pattern-scan-color) var(--pattern-scan-width),
        transparent var(--pattern-scan-width)
      ) 0.00px 0.00px / var(--pattern-scan-size) var(--pattern-scan-size);

  --pattern-dither-gap: 0.5vh;
  --pattern-dither-width: 2.0vh;
  --pattern-dither-size:
      calc(var(--pattern-dither-gap) + var(--pattern-dither-width));
  --pattern-dither-color: var(--color-1);
  --pattern-dither:
    linear-gradient(
        45deg,
        var(--pattern-dither-color) var(--pattern-dither-width),
        transparent var(--pattern-dither-width)
      ) 0.00px 0.00px / var(--pattern-dither-size) var(--pattern-dither-size);

  --body-width-min: 320px;
  --body-width-max: 95%;

  --font-size-h1: max(2.6rem,6.4vw);
  --font-size-h2: max(2.0rem,5.8vw);
  --font-size-h3: max(1.8rem,5.3vw);
  --font-size-h4: max(1.6rem,5.0vw);
  --font-size-h5: max(1.4rem,4.5vw);
  --font-size-h6: max(1.2rem,4.2vw);
  --font-size-p:  max(1.0rem,3.8vw);

  --border-color: var(--color-1);
  --border-width-minor: 0.2vh;
  --border-width-major: 0.9vh;
}

@media screen and (min-width: 800px) {
  :root {
    --body-width-max: 75%;

    --font-size-h1: max(2.6rem,4.4vw);
    --font-size-h2: max(2.2rem,3.8vw);
    --font-size-h3: max(2.0rem,3.3vw);
    --font-size-h4: max(1.8rem,3.0vw);
    --font-size-h5: max(1.6rem,2.5vw);
    --font-size-h6: max(1.4rem,2.2vw);
    --font-size-p:  max(1.0rem,1.8vw);
  }
}

/* Normalization
-------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Common
-------------------- */
html {
  font-family: var(--sans-font);
  scroll-behavior: smooth;
}

body a {
  color: var(--color-3);
}

a[href$="feed.xml"]::after {
  --icon-rss-size: calc(0.65 * var(--font-size-p));
  margin: 0 3px 0 3px;
  content: "";
  background-image: url(/assets/svg/rss-feed.svg);
  background-size: cover;
  display: inline-block;
  height: var(--icon-rss-size);
  width: var(--icon-rss-size);
}

span.tag {
  font-size: var(--font-size-p);
  margin: 0 3px 0 3px;
  &::before { content: "["; }
  &::after { content: "]"; }
}

body {
  & h1 { font-size: var(--font-size-h1); margin: 0; }
  & h2 { font-size: var(--font-size-h2); margin: 0; }
  & h3 { font-size: var(--font-size-h3); margin: 0; }
  & h4 { font-size: var(--font-size-h4); margin: 0; }
  & h5 { font-size: var(--font-size-h5); margin: 0; }
  & h6 { font-size: var(--font-size-h6); margin: 0; }
  & p, & a, & pre, & span, & li
       { font-size: var(--font-size-p);  margin: 0; }
  /* Word-wrap content in containers */
  & span, & td, & p, & h1, & h2, & h3, & h4, & h5, & h6 {
    overflow-wrap: break-word;
  }
}

article {
  --article-unit: var(--font-size-p);
  --article-padding-p: calc(0.3 * var(--article-unit));
  --article-block-margin-vert: calc(0.8 * var(--article-unit));
  --article-padding-horizontal: calc(0.3 * var(--article-unit));
  --article-indent-margin: calc(0.7 * var(--article-unit));
  --article-indent-padding: calc(0.4 * var(--article-unit));

  text-align: justify;

  padding-left: var(--article-padding-horizontal);
  padding-right: var(--article-padding-horizontal);

  & h1 { font-size: calc(0.7 * var(--font-size-h1)); margin-top: calc(0.8 * var(--article-unit)); }
  & h2 { font-size: calc(0.7 * var(--font-size-h2)); margin-top: calc(0.6 * var(--article-unit)); }
  & h3 { font-size: calc(0.7 * var(--font-size-h3)); margin-top: calc(0.4 * var(--article-unit)); }
  & h4 { font-size: calc(0.7 * var(--font-size-h4)); margin-top: calc(0.2 * var(--article-unit)); }
  & h5 { font-size: calc(0.7 * var(--font-size-h5)); margin-top: calc(0.1 * var(--article-unit)); }
  & h6 { font-size: calc(0.7 * var(--font-size-h6)); margin-top: calc(0.1 * var(--article-unit)); }

  & p { padding: var(--article-padding-p); }

  & > img, & > picture, & > table, & > blockquote, & > pre:has(code) {
    margin-top: var(--article-block-margin-vert);
    margin-bottom: var(--article-block-margin-vert);
  }

  & pre, & code, & blockquote { font-family: "VT323"; }

  & > pre:has(code), & blockquote {
    margin-left: var(--article-indent-margin);
    margin-right: var(--article-indent-margin);
    padding-left: var(--article-indent-padding);
    padding-right: var(--article-indent-padding);

    border-left: solid var(--color-1) calc(0.2 * var(--article-unit));
  }

  & > pre:has(code) {
    overflow: scroll;

    border-right: dashed var(--color-1) calc(0.2 * var(--article-unit));
    border-top: solid var(--color-1) calc(0.05 * var(--article-unit));
    border-bottom: solid var(--color-1) calc(0.05 * var(--article-unit));
  }

  & blockquote, & q, & cite { font-style: italic; }

  & ul, & ol {
    margin-left: calc(1.2 * var(--article-unit));
    margin-right: calc(1.2 * var(--article-unit));
    padding-left: calc(1.0 * var(--article-unit));
    padding-right: calc(1.0 * var(--article-unit));

    border-left: dotted var(--color-1) calc(0.1 * var(--article-unit));

    list-style-type: square;
    list-style-position: inside;
  }

  & > ol {
    list-style-type: upper-roman;
    & > * > ol {
      list-style-type: lower-roman;
      & > * > ol {
        list-style-type: lower-latin;
      }
    }
  }

  & img, & picture img, & figure img {
    max-width: 70%;
    display: block;
    margin-top: calc(0.7* var(--article-unit));
    margin-bottom: calc(0.7* var(--article-unit));
    margin-inline: auto;
    border: solid var(--color-1) calc(0.1 * var(--article-unit));
    outline: dashed var(--color-1) calc(0.1 * var(--article-unit));
  }

  & table {
    border: double var(--color-1) calc(0.10 * var(--article-unit));
    border-collapse: collapse;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;

    & tr, & td, & th {
      padding: calc(0.8 * var(--article-unit));
      font-size: calc(0.8 * var(--font-size-p));

      border: dashed var(--color-1) calc(0.05 * var(--article-unit));

      overflow: scroll;
      max-width: 30vw;
    }
  }
}

/* Base
-------------------- */
body {
  /* Split into one-row, sub-main-sub-column grid */
  display: grid;
  grid-template-columns:
    1fr
    max(var(--body-width-min), var(--body-width-max))
    1fr;

  color: var(--color-1);
  background:
    var(--color-2)
    var(--pattern-scan);

  & >  * {
    /* All immediate body elements go into center column */
    grid-column: 2;
  }

  main {
    padding: 8px;
    margin-top: 2vh;
    margin-bottom: 2vh;

    display: flex;
    justify-content: center;

    border: solid var(--border-color) var(--border-width-minor);
    border-left-width: var(--border-width-major);
    border-right-width: var(--border-width-major);
    background: var(--color-2);
  }

  footer {
    margin-top: 1vh;

    & > nav {
      display: flex;

      & > * {
        margin-left: auto;
        padding: 1.2vw;
        padding-left: 1.05vw;
        padding-right: 1.05vw;

        border: solid var(--border-color) var(--border-width-minor);
        border-left-width: var(--border-width-major);
        border-right-width: var(--border-width-major);
        background: var(--color-2);
      }

      & a {
        text-transform: uppercase;
        font-size: calc(var(--font-size-p) * 1.05);
      }
    }
  }
}

/* Container Styles
-------------------- */
div.card {
  --card-unit: var(--font-size-p);

  width: 90%;
  margin: var(--card-unit);
  padding: var(--card-unit);

  background: var(--color-2);

  --card-border-width: calc(0.55 * var(--card-unit));
  outline: double var(--card-border-width) var(--color-1);
  border: dashed var(--card-border-width) var(--color-1);

  & section {
    justify-content: center;
  }

  & h1 {
    font-family: "Jacquard 12";
    text-decoration: underline;
    margin-top: calc(0.6 * var(--card-unit));
    margin-bottom: calc(0.6 * var(--card-unit));
  }

  & p {
    margin-left: var(--card-unit);
    margin-right: var(--card-unit);
  }

  & a {
    margin: calc(0.4 * var(--card-unit));
    font-size: calc(1.2*var(--card-unit));
    /* display as own block with internal content centered */
    display: block;
    text-align: center;
  }
}

div.index {
  --index-unit: var(--font-size-p);

  display: flex;
  justify-content: center;

  width: 95%;
  margin: var(--index-unit);
  padding: calc(0.8 * var(--index-unit));

  background: var(--color-2);

  --index-border-size: calc(0.2 * var(--index-unit));
  --index-shadow-size: calc(0.5 * var(--index-unit));

  border-top: dashed var(--color-1) var(--index-border-size);
  outline: solid var(--color-1) var(--index-border-size);
  box-shadow: var(--index-shadow-size) var(--index-shadow-size) var(--color-1);

  & table {
    --index-border-outer: double var(--color-1) calc(0.10 * var(--index-unit));
    --index-border-inner: dashed var(--color-1) calc(0.05* var(--index-unit));

    border-collapse: collapse;
    width: 100%;

    &, & tr, & td, & th {
      font-size: calc(0.7 * var(--font-size-p));
    }

    padding: var(--index-unit);
    border-top: var(--index-border-outer);
    border-bottom: var(--index-border-outer);

    & > tbody {
      & td, & th {
        text-align: left;
        padding: calc(0.15 * var(--index-unit));
      }

      & > tr > td:last-child,
      & > tr > th:last-child {
        text-align: right;
        border-left: var(--index-border-inner);
      }

      & > tr:nth-child(4n+2) {
        border-top: var(--index-border-inner);
      }
      & > tr:nth-child(4n+3) {
        border-bottom: var(--index-border-inner);
      }

      & > tr:first-child > th {
        border: none;
        border-bottom: var(--index-border-outer);

        & a {
          font-style: italic;
          font-size: calc(0.75 * var(--font-size-p));
        }
      }

      & h1 {
        font-family: "Jacquard 12";
        font-size: calc(0.7 * var(--font-size-h1));
      }

      & h2 {
        font-size: calc(0.65 * var(--font-size-h2));
      }
    }
  }
}

div.post {
  --post-unit: var(--font-size-p);

  display: flow;

  width: 95%;
  margin: var(--post-unit);
  padding: calc(0.8 * var(--post-unit));

  background: var(--color-2);

  --post-border-size: calc(0.05 * var(--post-unit));
  --post-shadow-size: calc(0.5 * var(--post-unit));

  outline: solid var(--color-1) var(--post-border-size);
  border-top: solid var(--color-1) var(--post-border-size);
  border-bottom: solid var(--color-1) var(--post-border-size);
  box-shadow: var(--post-shadow-size) var(--post-shadow-size) var(--color-1);

  & > header {
    padding: calc(0.8 * var(--post-unit));
    padding-bottom: calc(1.2 * var(--post-unit));

    text-align: center;
    font-family: "Jacquard 12";
    & p {
      margin: calc(0.7 * var(--post-unit));
      font-family: "VT323";
    }
  }

  & article {
    padding-top: calc(1.2 * var(--post-unit));
    border-top: double var(--color-1) calc(0.3 * var(--post-unit));
    border-bottom: double var(--color-1) calc(0.3 * var(--post-unit));
    padding-bottom: calc(1.2 * var(--post-unit));
  }

  & article + p {
    text-align: center;
    display: block;

    font-family: "Jacquard 12";
    font-size: var(--font-size-p);
    font-style: italic;
  }
}

div.note {
  --note-unit: var(--font-size-p);
  --note-content-height: calc(1.0 * var(--font-size-p));
  --note-line-height: calc(1.2 * var(--note-content-height));
  --note-punch-border: dotted var(--color-1) calc(0.5 * var(--note-unit));
  --note-padding: calc(0.2 * var(--note-unit));
  --note-padding-horizontal: calc(0.8 * var(--note-padding));

  outline: solid var(--color-1) calc(0.1 * var(--note-unit));
  outline-offset: calc(0.5 * var(--note-unit));
  border-left: var(--note-punch-border);
  border-right: var(--note-punch-border);

  width: 90%;
  padding: var(--note-padding);
  padding-left: var(--note-padding-horizontal);
  padding-right: var(--note-padding-horizontal);

  & > hr {
    border: 0;
    border-top: var(--color-1) calc(0.2 * var(--note-unit)) solid;
  }

  & p, & span, & a, & pre, & li,
  & td, & th,
  & h1, & h2, & h3, & h4, & h5 {
    /* margin: 0; */
    padding: calc(0.2 * var(--note-content-height));
    font-family: "VT323";
    font-size: var(--note-content-height);
    line-height: var(--note-line-height);
  }

  & h1, & h2, & h3, & h4, & h5 {
    font-variant: full-width;
    text-decoration-line: underline;
    font-size: calc(1.2 * var(--note-content-height));
  }

  & h1       { text-decoration-style: double; }
  & h2       { text-decoration-style: single; }
  & h3       { text-decoration-style: dashed; }
  & h4, & h5 { text-decoration-style: dotted; }

  & header {
    text-align: center;
  }

  & article {
    padding: calc(0.5 * var(--note-unit));

    & > img, & > picture,
    & > table, & > ul, & > ol,
    & > blockquote, & > pre:has(code) {
      max-width: 80vw;
      margin-left: auto;
      margin-right: auto;
    }

    & > blockquote, & > pre:has(code) {
      padding-left: calc(0.5 * var(--note-unit));
    }
  }
}