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

:root {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;

  --color-background: #f8f9fa;
  --color-foreground: #111;
  --color-link: magenta;
  --color-link-visited: rgb(145, 0, 145);

  --space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4744rem + 0.1136vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.6989rem + 0.2273vw, 0.875rem);
  --space-s: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4233rem + 0.3409vw, 1.6875rem);
  --space-l: clamp(2rem, 1.8977rem + 0.4545vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8466rem + 0.6818vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.7955rem + 0.9091vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.6932rem + 1.3636vw, 6.75rem);

  --font-step--2: clamp(0.6944rem, 0.684rem + 0.0465vw, 0.72rem);
  --font-step--1: clamp(0.8333rem, 0.8061rem + 0.1212vw, 0.9rem);
  --font-step-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
  --font-step-1: clamp(1.2rem, 1.1156rem + 0.375vw, 1.4063rem);
  --font-step-2: clamp(1.44rem, 1.31rem + 0.5778vw, 1.7578rem);
  --font-step-3: clamp(1.728rem, 1.536rem + 0.8532vw, 2.1973rem);
  --font-step-4: clamp(2.0736rem, 1.7983rem + 1.2236vw, 2.7466rem);
  --font-step-5: clamp(2.4883rem, 2.1018rem + 1.718vw, 3.4332rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-foreground: #f8f9fa;
    --color-background: #111;
    --color-link: yellow;
    --color-link-visited: rgb(255, 208, 0);
  }

  img {
    filter: invert();
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-background: #f8f9fa;
    --color-foreground: #111;
    --color-link: magenta;
    --color-link-visited: rgb(145, 0, 145);
  }
}

strong, b {
  font-weight: bold;
}

body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  font-size: var(--font-step-0);
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--color-foreground);
  background-color: var(--color-background);
}

#now-index {
  h3 {
    font-family: "Averia Serif Libre", sans-serif;
    margin-block: var(--space-3xs);
    font-size: var(--font-step-0);
  }

  p {
    margin: 0;
  }
}

#index {
  list-style: none;
  margin-left: 0;
}


#modified-index,
#now-index,
#blog-index {
  list-style: none;
  display: grid;
  gap: var(--space-3xs);
  margin-block: 0;
  margin-left: 0;

  li {
    display: flex;
    gap: 0.5rem;

    span:first-child {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden !important;
      text-overflow: ellipsis;
      text-transform: lowercase;
    }
  }
}

#now-index {
  gap: var(--space-xs)
}


.links {
  ul {
    margin: 0;
    list-style: none;
  }

  h2 {
    margin: 0;
    margin-top: var(--space-m);
  }
}

#content {
  margin-bottom: var(--space-xl);
}

wordmark {
  display: block;
  padding: var(--space-s);
  font-size: var(--font-step-2);
  font-family: "Averia Serif Libre", sans-serif;
  font-weight: bold;

  > a {
    text-decoration: none;
    color: var(--color-foreground);
  }

  > a:visited {
    text-decoration: none;
    color: var(--color-foreground);
  }

  > p {
    display: flex;
    gap: var(--space-2xs);

    > img {
      height: var(--font-step-2);
    }
  }
}

body > footer {
  padding: var(--space-2xs);
  border-top: 1px solid var(--color-foreground);
  display: flex;
  gap: 0 1rem;
  flex-wrap: wrap;
  line-height: 1.3;

  a {
    padding: 0 0.4rem;
    color: var(--color-background);
    background-color: var(--color-foreground);
    text-decoration: none;
  }

  a:visited {
    padding: 0 0.4rem;
    color: var(--color-background);
    background-color: var(--color-foreground);
    text-decoration: none;
  }

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

main {
  max-width: 800px;
  padding: var(--space-xs);
  margin: auto;
  height: 100%;
  width: 100%;

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

  a:visited {
    color: var(--color-link-visited);
  }

  h1:first-child,
  h2:first-child,
  h3:first-child,
  p:first-child {
    margin-top: 0;
  }

  h1,
  h2 {
    font-family: "Averia Serif Libre", sans-serif;
    font-weight: bold;
    margin-block: var(--space-l) var(--space-s);
  }

  h3 {
    font-family: "Archivo", sans-serif;
    margin-block: var(--space-3xs);
  }

  p {
    font-family: "Source Serif 4", serif;
    max-width: 36rem;
    margin-block: var(--space-xs);
    font-size: var(--font-step-0);
    line-height: 1.4;
  }

  ul {
    margin-block: var(--space-xs);
    margin-left: var(--space-s);
  }

  aside {
    font-size: var(--font-step--1);
    max-width: 26rem;
    line-height: 1.3;

    @media (width > 800px) {
      position: absolute;
      margin-left: 37.3rem;
      max-width: 11rem;
    }

    @media (width < 800px) {
      margin-block: var(--space-3xs);
    }
  }

  #content .summary {
    font-family: "Averia Serif Libre", sans-serif;
    font-size: var(--font-step-2);
    line-height: 1.2;
    max-width: 40ch;
    font-weight: normal;
  }

  #content p {
    font-family: "Source Serif 4", serif;
    line-height: 1.4;
  }

  #content ul {
    li {
      font-family: "Source Serif 4", serif;
      max-width: 36rem;
    }
  }

  hr {
    margin-block: var(--space-m);
    border: none;
    border-bottom: 1px solid var(--color-foreground);
  }

  figure {
    margin-block: var(--space-m);
  }

  figcaption {
    font-family: "Archivo", sans-serif;
    font-size: var(--font-step-0);
    margin-top: var(--space-2xs);
    line-height: 1.25;
  }

  figcaption::before {
    content: "⬔";
  }

  figure video,
  figure img {
    width: 100%;
  }
}

.home {
  > section {
    margin-block: var(--space-l);
  }
}

img {
  max-width: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-m);

  @media (width < 800px) {
    flex-direction: column;
  }

  nav {
    display: flex;
    align-items: end;
    padding: var(--space-s) var(--space-l);
    gap: var(--space-s);
    a {
      display: block;
      font-size: var(--font-step-2);
      font-family: "Averia Serif Libre", sans-serif;
      font-weight: bold;
      color: var(--color-foreground);
    }

    a:visited {
      color: var(--color-foreground);
    }

    @media (width < 800px) {
      padding: 0 var(--space-s);
    }
  }
}

header a:hover {
  text-decoration: none;
}