/* pt-serif-regular - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-serif-v17-latin-regular.woff2') format('woff2');
}

/* pt-serif-italic - latin */
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-serif-v17-latin-italic.woff2') format('woff2');
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2');
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/roboto-condensed-v25-latin-700.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --text: #151515;
  --heading: #3c3c3c;
  --link: #991848;
  --border: #d1d1d1;
  --code-bg: #f4f5f6;
  --muted: #606c76;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181818;
    --text: #d6d6d6;
    --heading: #e6e6e6;
    --link: #e07aa3;
    --border: #333333;
    --code-bg: #202020;
    --muted: #9a9a9a;
  }
}

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

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'PT Serif', serif;
  font-size: 1.8em;
  line-height: 1.5;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2.0rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.1rem;
  color: var(--heading);
}

h1 { font-size: 4.6rem; line-height: 1.2; }
h2 { font-size: 3.6rem; line-height: 1.25; }
h3 { font-size: 2.8rem; }
h4 { font-size: 2.2rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.6rem; line-height: 1.4; letter-spacing: 0; }

/* Block spacing */
p, blockquote, dl, figure, form, ol, pre, table, ul {
  margin-top: 0;
  margin-bottom: 2.5rem;
}

dd, dt, li {
  margin-bottom: 1.0rem;
}

b, strong {
  font-weight: bold;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
}

a:focus,
a:hover {
  text-decoration: underline;
}

/* Lists */
ul {
  list-style: circle outside;
}

/* Blockquote */
blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 1rem 1.5rem;
  border-left: 0.3rem solid var(--border);
}

blockquote *:last-child {
  margin-bottom: 0;
}

/* Code */
code, kbd, pre, samp {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: .9em;
  white-space: nowrap;
  background: var(--code-bg);
  border-radius: .4rem;
}

pre {
  overflow-x: auto;
  font-size: .9em;
  background: var(--code-bg);
  border-left: 0.3rem solid var(--link);
}

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  margin: 0;
  font-size: 1em;
  white-space: pre;
  background: transparent;
  border-radius: 0;
}

/* Rules */
hr {
  border: 0;
  border-top: 0.1rem solid var(--border);
  margin: 4.0rem 0;
}

/* Tables */
table {
  width: 100%;
  border-spacing: 0;
}

td, th {
  padding: 1.2rem 1.5rem;
  text-align: left;
  border-bottom: 0.1rem solid var(--border);
}

td:first-child, th:first-child {
  padding-left: 0;
}

td:last-child, th:last-child {
  padding-right: 0;
}

/* Images */
img {
  max-width: 100%;
}

picture img {
  display: block;
  margin: 2rem 0;
  padding: 0;
  width: 100%;
}

/* Layout */
.wrapper {
  display: block;
}

.container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 2.0rem;
}

/* Navigation */
.navigation {
  margin-bottom: 4.0rem;
  border-bottom: 0.1rem solid var(--border);
  font-family: 'Roboto Condensed', sans-serif;
}

.navigation .container {
  display: flex;
  align-items: center;
  min-height: 6.0rem;
}

.navigation-list {
  display: flex;
  align-items: center;
  gap: 1.0rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.navigation-item {
  margin: 0;
}

/* Footer */
.footer {
  margin-top: 4.0rem;
  border-top: 0.1rem solid var(--border);
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.0rem;
}

/* Post navigation */
.post-navigation {
  margin-bottom: 4.0rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: larger;
}

/* Footnotes */
.footnotes {
  font-size: smaller;
}

.footnotes li {
  list-style: decimal;
  margin-bottom: 0.5rem;
}

/* Comments */
.comment {
  margin-bottom: 1.6rem;
}

.comment-header {
  margin-bottom: 0.5rem;
  font-family: 'Roboto Condensed', sans-serif;
}