@font-face {
  font-family: Chubbo;
  src: url(/static/Chubbo-Variable.woff2) format(woff2);
}

@font-face {
  font-family: Chubbo;
  src: url(/static/Chubbo-VariableItalic.woff2) format(woff2);
  font-style: italic;
}

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


h1, h2, h3 {
  font-size: inherit;
  font-weight: inherit;
}

:root {
  --line-across: calc(2rlh - 1rem);
  --line-side: calc(1rlh - 1rem);
  --foreground: #111e27;
  --background: #f8f4d1;
}

html {
  font-size: 16px;
  line-height: 1.45;
}

body {
  font-family: Chubbo, 'Hiragino Maru Gothic ProN', sans-serif;
  font-feature-settings: "palt", "vpal";
  hyphens: auto;
  color: var(--foreground);
  background-color: var(--background);

  padding: var(--line-across);
  margin: calc(-1 * var(--line-side)) 0;

  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
}

p:not(:first-of-type) {
  text-indent: 1rem;
}

h1, h2, h3, b {
  font-weight: 540;
}

.icon {
  height: 1rlh;
  vertical-align: middle;
}

.rounded {
  border-radius: 0.333rem;
}

header {
  h1 {
    writing-mode: vertical-rl;
  }

  -webkit-user-select: none;
  user-select: none;
}

main {
  display: grid;
  grid-template-columns: max-content 30rem;
  column-gap: 1rem;

  h2 {
    border-bottom: 1px dotted var(--foreground);
  }

  section:not(:first-of-type) h2 {
    margin-block-start: 1rlh;
  }

  article, section {
    display: contents;
  }

  article:not(:has(time)) {
    &::before {
      content: '';
      grid-column: 1;
    }
  }

  time {
    grid-column: 1;
  }

  h2 {
    grid-column: 2;
  }
}