@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@view-transition {
  navigation: auto;
}

.post-list-title,
.post-header h1 {
  view-transition-class: post-title;
}

::view-transition-group(.post-title) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(.post-title) {
  animation-duration: 0.18s;
}

:root {
  color-scheme: light dark;

  --bg: light-dark(oklch(98.8% 0.002 90), oklch(18% 0.005 270));
  --surface: light-dark(oklch(96.5% 0.003 90), oklch(22% 0.006 270));
  --text: light-dark(oklch(22% 0.006 270), oklch(93% 0.003 90));
  --muted: light-dark(oklch(48% 0.008 270), oklch(70% 0.008 270));
  --line: light-dark(oklch(90% 0.004 90), oklch(30% 0.007 270));
  --accent: light-dark(oklch(52% 0.2 28), oklch(72% 0.17 28));

  --code-keyword: light-dark(oklch(50% 0.2 28), oklch(74% 0.15 28));
  --code-string: light-dark(oklch(45% 0.11 155), oklch(78% 0.13 155));
  --code-function: light-dark(oklch(45% 0.14 260), oklch(77% 0.11 260));
  --code-number: light-dark(oklch(50% 0.12 70), oklch(80% 0.12 80));
  --code-comment: var(--muted);

  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 42rem;
  --gutter: clamp(1.25rem, 5vw, 2rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  margin: 0 auto;
  padding-inline: var(--gutter);
  max-width: calc(var(--measure) + 2 * var(--gutter));
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main {
  min-width: 0;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.15s, text-decoration-thickness 0.15s;
}

a:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

.site-header {
  padding-block: 2rem;
}

.site-title {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.avatar {
  flex: none;
  border-radius: 50%;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.site-footer a {
  text-decoration: none;
}

.intro {
  padding-block: 1rem 3rem;
  text-wrap: pretty;
}

.intro p {
  margin: 0;
}

.eyebrow {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.post-list li {
  border-bottom: 1px solid var(--line);
}

.post-list a {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding-block: 1.1rem;
  text-decoration: none;
}

.post-list a::after {
  content: "→";
  align-self: center;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 0.15s, transform 0.15s;
}

.post-list a:hover::after,
.post-list a:focus-visible::after {
  opacity: 1;
  transform: none;
}

.post-list a.has-topo {
  position: relative;
}

.post-list a.has-topo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--topo) right center / cover no-repeat;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 25%, #000 85%);
  mask-image: linear-gradient(to right, transparent 25%, #000 85%);
  transition: opacity 0.2s;
}

.post-list a.has-topo:hover::before,
.post-list a.has-topo:focus-visible::before {
  opacity: 1;
}

.post-list a > * {
  position: relative;
}

.post-list time {
  color: var(--muted);
  font: 400 0.8125rem/1.4 var(--mono);
}

.post-list-title {
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-wrap: balance;
}

.post-header {
  padding-block: clamp(2rem, 7vw, 4rem) 2.5rem;
}

.post-header h1 {
  margin: 0;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 1.25rem 0 0;
  color: var(--muted);
  font: 400 0.8125rem/1.5 var(--mono);
}

.prose {
  text-wrap: pretty;
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose table,
.prose figure {
  margin-block: 1.25em;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  scroll-margin-top: 1.5rem;
}

.prose h1,
.prose h2 {
  margin: 2.5em 0 0.75em;
  font-size: 1.625rem;
  letter-spacing: -0.025em;
}

.prose h3 {
  margin: 2em 0 0.5em;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.prose h4 {
  margin: 1.75em 0 0.5em;
  font-size: 1.0625rem;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose li::marker {
  color: var(--muted);
}

.prose blockquote {
  margin-inline: 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--accent);
  color: var(--muted);
}

.prose blockquote > :first-child {
  margin-top: 0;
}

.prose blockquote > :last-child {
  margin-bottom: 0;
}

.prose hr {
  margin-block: 3em;
  border: 0;
  border-top: 1px solid var(--line);
}

.prose img,
.prose video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
}

.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: 0.5em 1em 0.5em 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.back-link {
  display: inline-block;
  margin-top: 3rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-decoration: none;
}

.back-link::before {
  content: "← ";
}

code,
pre {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

:not(pre) > code {
  padding: 0.125em 0.35em;
  border: 1px solid var(--line);
  border-radius: 0.3em;
  background: var(--surface);
  font-size: 0.85em;
}

.prose pre {
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--surface);
  font-size: 0.8438rem;
  line-height: 1.65;
  tab-size: 4;
  text-wrap: nowrap;
  white-space: pre;
}

.prose div.highlighter-rouge,
.prose figure.highlight {
  margin-block: 1.5em;
}

.prose div.highlight pre,
.prose figure.highlight pre {
  margin: 0;
}

.prose .katex-display {
  margin-block: 1.5em;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.25em;
}

.prose .katex {
  font-size: 1.1em;
}

.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn,
.highlight .kp, .highlight .kr, .highlight .kt, .highlight .nt,
.highlight .o, .highlight .ow, .highlight .cp, .highlight .cpf {
  color: var(--code-keyword);
}

.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa,
.highlight .sb, .highlight .sc, .highlight .sd, .highlight .se,
.highlight .sh, .highlight .si, .highlight .sr, .highlight .ss,
.highlight .sx, .highlight .dl {
  color: var(--code-string);
}

.highlight .nf, .highlight .fm, .highlight .nc, .highlight .nb,
.highlight .bp, .highlight .nd, .highlight .ne, .highlight .nn,
.highlight .na {
  color: var(--code-function);
}

.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .mo, .highlight .il, .highlight .nv,
.highlight .vc, .highlight .vg, .highlight .vi {
  color: var(--code-number);
}

.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs,
.highlight .ch, .highlight .cd {
  color: var(--code-comment);
  font-style: italic;
}

.highlight .gd {
  color: var(--code-keyword);
}

.highlight .gi {
  color: var(--code-string);
}

[data-accent="red"] { --accent: light-dark(#95443e, #cb6860); }
[data-accent="ochre"] { --accent: light-dark(#977a50, #cda977); }
[data-accent="sage"] { --accent: light-dark(#6e8271, #9cb49f); }
[data-accent="terracotta"] { --accent: light-dark(#996b57, #d0987f); }
[data-accent="slate"] { --accent: light-dark(#6a7a93, #97aac9); }
[data-accent="rose"] { --accent: light-dark(#926f7c, #c79dad); }
[data-accent="olive"] { --accent: light-dark(#848063, #b6b28e); }

.topo-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 600px;
  z-index: 0;
  opacity: 0.5;
  background: center top / cover no-repeat;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 80%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 80%);
}

.topo-full {
  position: fixed;
  inset: 0;
  height: auto;
  opacity: 0.7;
  background-position: right center;
  -webkit-mask-image: none;
  mask-image: none;
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

.pin {
  position: fixed;
  right: 24%;
  top: 42%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--accent);
  font: 500 0.8rem/1 var(--mono);
}

.pin i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 34rem) {
  .post-list a {
    grid-template-columns: 1fr;
  }

  .post-list a::after {
    display: none;
  }

  .topo-hero {
    height: 460px;
    opacity: 0.4;
  }

  .topo-full {
    height: auto;
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}