/* Self-hosted Jost: Google Fonts strips its ss01 single-storey "a".
   Built from upstream Jost-VF.ttf 3.7, subset to Latin; see fonts/Jost-OFL.txt */
@font-face {
  font-family: "Jost ss01";
  src: url("fonts/Jost-ss01.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jost ss01";
  src: url("fonts/Jost-ss01-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Scoped to this family, so the serif body text is left alone */
@font-feature-values "Jost ss01" {
  @styleset {
    single-storey-a: 1;
  }
}

:root {
  --bulma-family-primary: "Jost ss01", "Jost", sans-serif;
  --bulma-family-secondary: "Jost ss01", "Jost", sans-serif;
  --bulma-family-code: "Space Mono", monospace;
}

body {
  font-family: "Jost ss01", "Jost", sans-serif;
  font-variant-alternates: styleset(single-storey-a);
}

.section .content {
  max-width: 42rem;
  margin: 1.5rem auto 0;
  font-family: "Rokkitt", serif;
}

/* Lines non-text blocks, such as the hobby cards, up with the text above */
.reading-width {
  max-width: 42rem;
  margin: 1.5rem auto 0;
}

.section .content :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Jost ss01", "Jost", sans-serif;
}

/* Rokkitt has a small x-height; size it up to read comfortably, and keep the
   lines from spreading too far apart at that size */
.section .content :is(p, li, blockquote, dt, dd, td, th, figcaption) {
  font-size: 1.3125rem;
  line-height: 1.4;
}

/* Bulma puts 1em above any list that follows text, nested ones included; keep
   sub-lists as close to their parent item as items are to each other */
.content li > :is(ul, ol):not(:first-child) {
  margin-top: 0.25em;
}

/* A hand-drawn double arrow tying a list item to the one above it, set after
   the lower item's text and worn as a mask like the tech icons. It's drawn for
   the principles on the home page, whose upper line ends 1.86em short of the
   lower one; it spans one line plus the gap between them, so it's dropped
   where they wrap. */
.pair-arrow {
  position: relative;
  display: inline-block;
}

.pair-arrow::after {
  content: "";
  position: absolute;
  left: -1.7em;
  bottom: 0.05em;
  width: 2.94em;
  height: 2.15em;
  background-color: currentColor;
  mask: url("icons/pair-arrow.svg") center / contain no-repeat;
}

.author-avatar {
  width: 1.25em;
  height: 1.25em;
  object-fit: cover;
  border-radius: 50%;
}

.box {
  border: 1px solid hsl(221, 14%, 86%);
  --bulma-box-shadow: 0 0.5em 1.25em -0.25em rgba(10, 10, 10, 0.2);
}

/* Logos sit on their own white plate. Dark mode inverts the page and then each
   image back, so the plate stays white in both themes. */
.project-logo {
  width: 96px;
  height: 96px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid hsl(221, 14%, 86%);
  border-radius: 12px;
}

/* Stands in for a logo, drawn in the text colour */
.project-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  color: hsl(221, 14%, 35%);
}

/* Flipped back like the theme flips images, to match the logo plates */
body[theme="dark"] .project-icon {
  filter: invert(1) hue-rotate(180deg);
}

@media screen and (max-width: 768px) {
  .project-logo {
    width: 56px;
    height: 56px;
    padding: 5px;
    border-radius: 8px;
  }

  .project-icon {
    font-size: 1.6rem;
  }

  .pair-arrow {
    display: none;
  }
}

/* Simple Icons (CC0, see icons/tech/simple-icons-LICENSE.md), worn as masks so
   they take the tag's text colour, dark mode included */
.tech-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

/* Card text lines up with the title, unlike the centred measure of a page */
.project .content {
  max-width: none;
  margin: 0;
}

.navbar-brand > .navbar-item:first-child::before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  margin-right: 0em;
  background-color: currentColor;
  mask: url("favicon.svg") center / contain no-repeat;
}