:root {
  /* ---- nord-black: near-black elevation scale, Nord accent colors on top ---- */
  --ink-0: #0d1013;  /* page background */
  --ink-1: #14181d;  /* cards, code blocks, list panels */
  --ink-2: #1b2027;  /* hover / active state, nested content */
  --ink-3: #242b34;  /* innermost nesting: inline code, blockquotes */
  --ink: var(--ink-0);

  --paper: #eceff4;      /* nord6 */
  --paper-dim: #7b88a1;
  --accent: #88c0d0;     /* nord8 — links, interactive state */
  --accent-soft: rgba(136,192,208,0.35);
  --heading: #ebcb8b;    /* nord13 — section headings, distinct from links on purpose */
  --rule: #232830;

  --profile-border: #242b34;
  --shadow-ring: rgba(255,255,255,0.05);
  --shadow-drop: rgba(0,0,0,0.5);

  /* rouge token colors */
  --token-number: #b48ead;  /* nord15 */
  --token-type: #81a1c1;    /* nord9 */
  --token-error: #bf616a;   /* nord11 */

  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --serif: 'Source Serif 4', Georgia, serif;
}

:root[data-theme="light"] {
  /* ---- nord snow-storm: light elevation scale, same accents darkened for contrast ---- */
  --ink-0: #eceff4;
  --ink-1: #e5e9f0;
  --ink-2: #d8dee9;
  --ink-3: #c7cfdc;

  --paper: #2e3440;
  --paper-dim: #4c566a;
  --accent: #5e81ac;     /* nord10 — darker blue reads better on light bg */
  --accent-soft: rgba(94,129,172,0.3);
  --heading: #a15f14;    /* darkened nord12 for AA contrast on light bg */
  --rule: #c7cfdc;

  --profile-border: #c7cfdc;
  --shadow-ring: rgba(0,0,0,0.05);
  --shadow-drop: rgba(0,0,0,0.18);

  --token-number: #7c5f96;
  --token-type: #4c72a6;
  --token-error: #a8434d;
}

* { box-sizing: border-box; }
html { background: var(--ink-0); }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--mono);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}


a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
a:hover, a:focus-visible { border-bottom-color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.prompt {
  max-width: 680px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
  font-size: 0.85rem;
  color: var(--paper-dim);
}
.prompt .cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { .prompt .cursor { animation: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---- add the nav toggle button for mobile alone ---- */
.nav-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 30;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--paper);
  font-size: 1rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); }

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 30;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--paper);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* smooth the theme switch on the surfaces that carry the elevation scale */
body, .site-nav, .bar, .card, .kv, .see-also, .log-list, .log-entry,
.detail-pane, .highlighter-rouge, .description code, .kv code, .detail-body code,
.description blockquote, .post-meta .tag, .nav-toggle, a {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ---- nav: desktop tabs or mobile sidebar using site-nav ---- */
.site-nav {
  max-width: 680px;
  margin: 1rem auto 0;
  padding: 0 1.5rem;
  display: flex;
  gap: 0.25rem;
  font-family: var(--mono);
  position: sticky;
  top: 0;
  background: var(--ink-0);
  z-index: 10;
  border-bottom: 1px solid var(--rule);
}
.site-nav a {
  padding: 0.65rem 0.75rem;
  font-size: 0.85rem;
  color: var(--paper-dim);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--paper); border-bottom-color: var(--rule); }
.site-nav a.current { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .prompt { padding-left: 3.5rem; padding-right: 3.5rem; }
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 230px;
    max-width: 75vw;
    margin: 0;
    flex-direction: column;
    background: var(--ink-1);
    border-bottom: none;
    border-right: 1px solid var(--rule);
    padding: 4.5rem 1.25rem 1.5rem;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 25;
    gap: 0.15rem;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav a { border-bottom: none; border-left: 2px solid transparent; padding: 0.6rem 0.75rem; }
  .site-nav a:hover, .site-nav a:focus-visible { border-left-color: var(--rule); }
  .site-nav a.current { border-left-color: var(--accent); }
}

.page {
  max-width: 680px;
  margin: 1.5rem auto 4rem;
  padding: 0 1.5rem;
}

.bar {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--paper-dim);
  letter-spacing: 0.02em;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.bar.footer { border-top: 1px solid var(--rule); border-bottom: none; margin-top: 3rem; }

.profile-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px;
  background: none;
}
.profile-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--profile-border);
  box-shadow: 0 0 0 6px var(--shadow-ring), 0 12px 30px var(--shadow-drop);
}

.profile-name { color: var(--paper-dim); font-size: 14px; }

h1.title { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.03em; margin: 2.2rem 0 0.25rem; }
.tagline { font-family: var(--serif); font-size: 1.15rem; font-style: italic; color: var(--paper-dim); margin: 0 0 2.5rem; }

section { margin-bottom: 2.4rem; }

/* headings: warm amber, deliberately NOT the same color as links (--accent) */
h2.section-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--heading);
  margin: 0 0 0.9rem;
}

.description { font-family: var(--serif); font-size: 1.05rem; color: var(--paper); max-width: 60ch; }
.description p { margin: 0 0 1rem; }
.description code, .kv code, .detail-body code {
  background: var(--ink-3);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.9em;
}
.description blockquote {
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  background: var(--ink-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
}

/* panels: see-also / kv now sit on their own elevation instead of bare text */
.see-also, .kv {
  font-family: var(--mono);
  font-size: 0.92rem;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.4rem 1rem;
}
.see-also ul { list-style: none; padding: 0; margin: 0; }
.see-also li { padding: 0.5rem 0; }
.see-also li + li { border-top: 1px solid var(--rule); }
.see-also .label { color: var(--paper-dim); display: inline-block; width: 6.5rem; }
.see-also .v { color: var(--paper); }

.kv-row { display: flex; gap: 0.75rem; padding: 0.5rem 0; }
.kv-row + .kv-row { border-top: 1px solid var(--rule); }
.kv-row .k { color: var(--paper-dim); width: 8rem; flex-shrink: 0; }
.kv-row .v { color: var(--paper); word-break: break-all; min-width: 0;}

.colophon { font-family: var(--mono); font-size: 0.75rem; color: var(--paper-dim); margin-top: 0.5rem; }

/* ---- add the card grid along with split pane ---- */
.split-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  text-align: left;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.9rem;
  font-family: var(--mono);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.card:hover, .card:focus-visible { background: var(--ink-2); border-color: var(--rule); }
.card.is-active { background: var(--ink-2); border-color: var(--accent); }
.card i { color: var(--accent); font-size: 1.15rem; }
.card-name { font-size: 0.88rem; }

.detail-pane {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  position: relative;
}
.detail-pane[hidden] { display: none; }
.detail-close {
  position: absolute;
  top: 0.5rem;
  right: 0;
  background: none;
  border: none;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem 0.4rem;
}
.detail-close:hover { color: var(--paper); }
.detail-title {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--heading);
  margin-bottom: 0.6rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.detail-title i { color: var(--accent); }
.detail-body { font-family: var(--serif); font-size: 1rem; color: var(--paper); max-width: 60ch; }
.detail-body p { margin: 0 0 0.9rem; }

@media (min-width: 769px) {
  .split-container.is-split { grid-template-columns: 200px 1fr; gap: 2rem; }
  .split-container.is-split .card-grid { grid-template-columns: 1fr; }
  .split-container.is-split .detail-pane { border-top: none; border-left: 1px solid var(--rule); padding-top: 0; padding-left: 1.75rem; }
}

/* ---- blog listing ---- */
.log-list {
  font-family: var(--mono);
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.log-entry {
  display: block;
  padding: 0.9rem 1rem;
  color: var(--paper);
  border: none;
}
.log-entry + .log-entry { border-top: 1px solid var(--rule); }
.log-entry:hover, .log-entry:focus-visible { background: var(--ink-2); border-bottom: none; }
.log-date { display: block; font-size: 0.72rem; color: var(--paper-dim); letter-spacing: 0.04em; }
.log-title { display: block; font-size: 0.98rem; color: var(--paper); margin: 0.15rem 0 0.25rem; }
.log-entry:hover .log-title, .log-entry:focus-visible .log-title { color: var(--accent); }
.log-tagline { display: block; font-family: var(--serif); font-size: 0.92rem; color: var(--paper-dim); }

/* ---- post meta bar (used on individual blog posts) ---- */
.post-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--paper-dim);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 2rem;
}
.post-meta .tag {
  background: var(--ink-2);
  border-radius: 3px;
  padding: 0.15rem 0.5rem;
  color: var(--paper-dim);
}

/* ---- syntax-highlighted code blocks ---- */
.code-block {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 0 0 1.4rem;
  overflow: hidden;
}
.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.8rem;
  background: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--paper-dim);
  letter-spacing: 0.03em;
}
.code-copy {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.code-copy:hover { color: var(--paper); border-color: var(--accent); }
.code-copy.copied { color: var(--accent); border-color: var(--accent); }
.code-block pre {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* Rouge (Jekyll's built-in highlighter) container, styled like the old .code-block */
.highlighter-rouge {
  position: relative;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 0 0 1.4rem;
  overflow: hidden;
}
.highlighter-rouge .highlight { background: transparent; margin: 0; }
.highlighter-rouge pre.highlight {
  margin: 0;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
  font-family: var(--mono);
}
.highlighter-rouge pre.highlight code { background: transparent; padding: 0; }

/* Rouge token theme, remapped onto the site palette instead of a stock theme */
.highlight, .highlight pre { color: var(--paper); }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .nb, .highlight .bp { color: var(--accent); } /* keywords, builtins */
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .nf { color: var(--heading); } /* strings, function names */
.highlight .c, .highlight .c1, .highlight .cm { color: var(--paper-dim); font-style: italic; } /* comments */
.highlight .mi, .highlight .mf, .highlight .il { color: var(--token-number); } /* numbers */
.highlight .kc, .highlight .no { color: var(--token-number); } /* constants / literals */
.highlight .kt, .highlight .nc { color: var(--token-type); } /* types / classes */
.highlight .na, .highlight .nv, .highlight .vi { color: var(--paper); } /* attributes, variables */
.highlight .o, .highlight .p { color: var(--paper); } /* operators, punctuation */
.highlight .err { color: var(--token-error); }

/* ---- male some responsive tweaks overall ---- */
@media (max-width: 480px) {
  .prompt { padding: 1.5rem 3.5rem 0 3.5rem; font-size: 0.78rem; }
  .site-nav a { font-size: 0.9rem; }
  .page { padding: 0 1.25rem; margin: 1rem auto 3rem; }
  .bar { font-size: 0.68rem; }
  h1.title { font-size: 0.95rem; margin-top: 1.6rem; }
  .tagline { font-size: 1.02rem; margin-bottom: 2rem; }
  .description { font-size: 0.98rem; }
  .kv-row { flex-direction: column; gap: 0.1rem; padding: 0.4rem 0; }
  .kv-row .k { width: auto; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ---- tables, styled to match the nord-black elevation scale ---- */
.description table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: 0.88rem;
  background: var(--ink-1);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

.description thead {
  background: var(--ink-2);
}

.description th {
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--paper-dim);
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.description td {
  padding: 0.55rem 0.9rem;
  color: var(--paper);
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.description tbody tr:last-child td {
  border-bottom: none;
}

.description tbody tr:hover {
  background: var(--ink-2);
}

/* inline code inside cells — reuse the innermost elevation, same as .description code elsewhere */
.description table code {
  background: var(--ink-3);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.88em;
}

/* wrap long tables (e.g. the 15-row argument mapping) in horizontal scroll instead of squeezing columns */
.description table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.description table thead,
.description table tbody,
.description table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

@media (max-width: 480px) {
  .description th,
  .description td {
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
  }
}