/* ── Gruber Darker ────────────────────────────────────────────────── */
:root {
  --ratio: 1.3;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0)  / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --measure: 65ch;

  --mauve:     #ffdd33;
  --yellow:    #ffdd33;
  --green:     #73c936;
  --teal:      #73c936;
  --sky:       #96a6c8;
  --blue:      #9e95c7;
  --lavender:  #9e95c7;
  --text:      #f4f4ff;
  --subtext1:  #e4e4ef;
  --subtext0:  #b6b6b6;
  --overlay2:  #7a7076;
  --overlay1:  #52494e;
  --overlay0:  #52494e;
  --surface2:  #484848;
  --surface1:  #484848;
  --surface0:  #484848;
  --base:      #181818;
  --mantle:    #282828;
  --crust:     #282828;
  --code-background: #282828;
}

/* ── Normalize / Reset ────────────────────────────────────────────── */

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

* {
  margin: 0;
}

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

body {
  margin: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/* ── Universal measure constraint ─────────────────────────────────── */

* {
  max-inline-size: var(--measure);
}

::selection {
  background-color: color-mix(in oklch, var(--overlay2) 30%, transparent);
}

body,
footer,
header,
html,
main,
nav,
div,
section,
article,
ul,
ol,
li,
pre,
figure {
  max-inline-size: none;
}

/* ── Base ─────────────────────────────────────────────────────────── */

body {
  background: var(--base);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--s0);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

/* ── Headings ─────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, sans-serif;
  margin: 0;
}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-block-start: 0;
}

h1             { font-size: var(--s3); }
h1, h1 > code { color: var(--mauve); }

/* Article titles use text color; only the site header h1 stays mauve */
.post h1, .post h1 > code { color: var(--text); }

h2             { font-size: var(--s2); }
h3, h4, h5    { font-size: var(--s1); }

h6             { font-size: var(--s-1); }
h6, h6 > code { color: var(--subtext0); }

h1 > a:link,
h1 > a:visited {
  color: var(--mauve);
}

h2 > a:link,
h2 > a:visited,
h3 > a:link,
h3 > a:visited,
h4 > a:link,
h4 > a:visited,
h5 > a:link,
h5 > a:visited,
h6 > a:link,
h6 > a:visited {
  color: var(--text);
}

h1 > a:hover, h1 > a:active,
h2 > a:hover, h2 > a:active,
h3 > a:hover, h3 > a:active,
h4 > a:hover, h4 > a:active,
h5 > a:hover, h5 > a:active,
h6 > a:hover, h6 > a:active {
  color: var(--sky);
}

h2 > code, h3 > code, h4 > code,
h5 > code, h6 > code {
  color: var(--text);
}

/* ── Links ────────────────────────────────────────────────────────── */

a {
  text-decoration: none;
}

a:link    { color: var(--blue); }
a:visited { color: var(--lavender); }
a:hover,
a:active  { color: var(--sky); }

a:link    > code { color: var(--blue); }
a:visited > code { color: var(--lavender); }
a:hover   > code,
a:active  > code { color: var(--sky); }

/* ── Code ─────────────────────────────────────────────────────────── */

code {
  font-family: "Iosevka", monospace;
  color: #73c936;
}

pre {
  font-size: var(--s0);
  padding: var(--s-1);
  overflow-x: auto;
  background: var(--code-background) !important;
  max-inline-size: none;
  width: 100%;
  border-radius: var(--s-2);
}

pre > code {
  font-weight: 500;
  color: var(--text);
  background: none;
}

/* ── Code block wrapper with header ──────────────────────────────── */

.code-block {
  position: relative;
  border-radius: var(--s-2);
  overflow: hidden;
  width: 100%;
}

/* copy button floating over code when there is no header */
.code-block > .copy-btn {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  z-index: 1;
}

.code-block pre {
  border-radius: 0;
  margin: 0;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-1);
  background: var(--code-background);
  border-bottom: 1px solid var(--overlay1);
}

.code-lang {
  font-family: "Iosevka", monospace;
  font-size: var(--s-1);
  color: var(--subtext0);
}

.copy-btn {
  font-family: "Iosevka", monospace;
  font-size: var(--s-1);
  color: var(--subtext0);
  background: none;
  border: 1px solid var(--overlay1);
  border-radius: var(--s-3);
  padding: 0.15em 0.6em;
  cursor: pointer;
  line-height: 1.4;
  transition: color 0.15s, border-color 0.15s;
}

.copy-btn:hover {
  color: var(--text);
  border-color: var(--overlay2);
}

.copy-btn.copied {
  color: var(--green);
  border-color: var(--green);
}

.shiki span {
  color: var(--shiki-gruber);
  font-style: var(--shiki-gruber-font-style);
  font-weight: var(--shiki-gruber-font-weight);
  text-decoration: var(--shiki-gruber-text-decoration);
}

/* ── Blockquote ───────────────────────────────────────────────────── */

blockquote {
  color: var(--subtext1);
  border-left: var(--s-5) solid var(--teal);
  padding-left: var(--s1);
  margin-left: var(--s2);
}

blockquote > :first-child { margin-top: 0; }
blockquote > :last-child  { margin-bottom: 0; }

/* ── Images ───────────────────────────────────────────────────────── */

img {
  object-fit: contain;
  max-width: 100%;
  display: block;
  margin-inline: auto;
}

/* ── HR ───────────────────────────────────────────────────────────── */

hr {
  margin: 0;
  border: none;
  border-top: 1px solid var(--overlay1);
  width: 100%;
}

/* ── Layout utilities ─────────────────────────────────────────────── */

.center {
  box-sizing: border-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
  width: 100%;
  padding-inline: var(--s1);
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
}

.stack > * + * {
  margin-block-start: var(--s1);
}

.header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
  justify-content: space-between;
  padding-block-start: var(--s1);
  padding-block-end: var(--s-2);
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
  justify-content: flex-start;
}

.article {
  margin-block: var(--s2);
  overflow: auto;
  width: 100%;
}

/* ── Nav icons ────────────────────────────────────────────────────── */

.nav-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  line-height: 1;
}

.nav-icon:hover,
.nav-icon:active {
  color: var(--sky);
}

.nav-icon:visited {
  color: inherit;
}

.nav-icon svg {
  width: 2em;
  height: 2em;
}

.nav-icon .material-symbols-outlined {
  font-size: 2em;
}

.github,
.github:link,
.github:visited          { color: var(--text); }
.blog-icon,
.blog-icon:link,
.blog-icon:visited       { color: var(--text); }
.contact-icon,
.contact-icon:link,
.contact-icon:visited    { color: var(--text); }

/* ── Post list (home page) ────────────────────────────────────────── */

.post-list {
  display: flex;
  flex-direction: column;
}

.post-list > * + * {
  margin-block-start: var(--s2);
}

/* ── Article / post content ───────────────────────────────────────── */

.post > ul,
.post > ol {
  padding-inline-start: var(--s2);
}

.post > ul > li + li,
.post > ol > li + li {
  margin-block-start: var(--s-2);
}

/* ── Footnotes ────────────────────────────────────────────────────── */

.footnotes {
  border-top: 1px solid var(--overlay0);
  padding-top: var(--s1);
  margin-top: var(--s2) !important;
}

.footnotes > ol {
  padding-inline-start: var(--s2);
}

.footnotes > ol > li {
  color: var(--text);
}

.footnotes > ol > li + li {
  margin-block-start: var(--s1);
}

.footnote-back {
  font-size: 1.4em;
}

sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
  font-size: 0.9em;
}

/* ── GitHub Gist embeds ───────────────────────────────────────────── */

.gist .gist-file {
  border-color: var(--overlay1) !important;
}

.gist .gist-data,
.gist .gist-render,
.gist .render-container,
.gist .highlight,
.gist .blob-wrapper,
.gist table.highlight {
  background: var(--base) !important;
}

/* rendered markdown body */
.gist .markdown-body {
  background: var(--base) !important;
  color: var(--text) !important;
}

.gist .markdown-body h1,
.gist .markdown-body h2,
.gist .markdown-body h3,
.gist .markdown-body h4,
.gist .markdown-body h5,
.gist .markdown-body h6 {
  color: var(--text) !important;
  border-color: var(--overlay1) !important;
}

.gist .markdown-body a {
  color: var(--blue) !important;
}

.gist .markdown-body hr {
  background: var(--overlay1) !important;
  border: none !important;
}

.gist .markdown-body table,
.gist .markdown-body tr {
  background: var(--base) !important;
  border-color: var(--overlay1) !important;
}

.gist .markdown-body tr:nth-child(2n) {
  background: var(--mantle) !important;
}


.gist .markdown-body th,
.gist .markdown-body td {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--overlay1) !important;
}

.gist .markdown-body code {
  background: var(--surface2) !important;
  color: var(--green) !important;
}

/* gist footer bar */
.gist .gist-meta {
  background: var(--base) !important;
  border-color: var(--overlay1) !important;
  color: var(--subtext0) !important;
}

.gist .gist-meta a {
  color: var(--blue) !important;
}

/* code file blobs */
.gist .blob-code,
.gist .blob-code-inner {
  background: var(--code-background) !important;
  color: var(--text) !important;
}

.gist .blob-num {
  background: var(--code-background) !important;
  color: var(--subtext0) !important;
  border-color: var(--overlay1) !important;
}

/* syntax tokens */
.gist .pl-c                      { color: var(--subtext0) !important; font-style: italic; }
.gist .pl-k, .gist .pl-kos      { color: var(--sky)      !important; }
.gist .pl-s, .gist .pl-s1,
.gist .pl-pds, .gist .pl-sr     { color: var(--yellow)   !important; }
.gist .pl-sra, .gist .pl-sre    { color: var(--green)    !important; }
.gist .pl-en, .gist .pl-e       { color: var(--green)    !important; }
.gist .pl-c1, .gist .pl-cn      { color: var(--green)    !important; }
.gist .pl-v, .gist .pl-vi       { color: var(--text)     !important; }
.gist .pl-cce                   { color: var(--green)    !important; }

/* ── Footer ───────────────────────────────────────────────────────── */

footer {
  width: 100%;
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.license {
  font-size: var(--s0);
  color: var(--subtext0);
  text-align: center;
  padding-block: var(--s1);
}