/* eb-garamond-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/eb-garamond-v33-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* eb-garamond-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/eb-garamond-v33-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* eb-garamond-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/eb-garamond-v33-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ibm-plex-mono-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/ibm-plex-mono-v20-latin-regular.woff2') format('woff2');
}


/* color-scheme hands native UI — scrollbars, form controls,
   selection — to the browser so it matches the theme. */
:root {
  color-scheme: light;
  --bg: white;
  --text: black;
  --code-bg: #f4f4f4;
  --link: #0645ad;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Link blue has to flip with the theme: #0645ad is 8.5:1 on white
   but only 2.2:1 on #111, and 1.4:1 for a link inside a code span. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111;
  --text: #eee;
  --code-bg: #262626;
  --link: #8ab4f8;
}

pre, code {
  background: var(--code-bg);
}

body {
  max-width: 48rem; /* ~93 characters at 20.8px Garamond */
  margin: 2rem auto;
  padding: 0 1rem;
  font-family: "EB Garamond", serif;
  font-size: 1.3rem;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
}

/* Bottom-only margins: no collapse fight with the headings below.
   1.25em keeps the paragraph break well clear of the line gap. */
p {
  margin: 0 0 1.25em;
}

/* Asymmetric: binds the heading to the text it introduces. */
main h1, main h2, main h3 {
  line-height: 1.2;
  margin: 2.2rem 0 .4rem;
}

pre {
  overflow-x: auto;
  padding: 1rem;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.06em;
}

/* The wordmark is a link but shouldn't read as one. */
header nav h1 a {
  color: inherit;
  text-decoration: none;
}

/* .85em matches Plex Mono's x-height to Garamond's, so inline
   code sits level with the prose instead of reading small. */
code {
  overflow-x: auto;
  padding: .15em .3em;
  font-family: var(--mono);
  font-size: .85em;
}

/* Inside a block, <code> is just the text: pre owns the chrome. */
pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

/* Mono without the code-block chrome. Entity-escaped @ in the
   markdown keeps goldmark from autolinking it into a mailto. */
.email {
  font-family: var(--mono);
  font-size: .85em;
}

img, iframe {
  max-width: 100%;
}

header nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

header nav h1 {
  margin: 0;
  line-height: 1.2;
}

header nav a:first-child {
  margin-right: auto;
}

.tags a {
  margin-right: .5rem;
}

.posts {
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.posts li {
  margin-bottom: 2.5rem;
}

.posts h1 {
  margin: .1em 0 0;
  font-size: 1.5rem;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.color-scheme-toggle {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    outline: none;
}

.color-scheme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    padding: 0.5rem;
}