@charset "UTF-8";
/* =========================================================
   Theme CSS — single-knob content width + tidy structure
   Change only --content-width to resize your content area.
   ========================================================= */
/* -------- Web fonts (optional; use <link> in HTML for speed) -------- */
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400&family=Roboto:wght@400;700&family=Roboto+Slab:wght@400;700&display=swap");
/* reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  /* list-style: none; */
  /* list-style-position: inside; */
  margin-left: 1rem;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
}

pre {
  min-width: -webkit-fill-available;
  min-width: -moz-available;
  min-width: stretch;
  max-width: 0;
}

img {
  display: block;
}

/* 
html,
body,
img,
canvas,
iframe,
video,
svg,
select,
textarea {
  max-width: 100%;
} */
/* end Eric Meyer reset */
/* -------- Design tokens -------- */
:root {
  /* Colors */
  --color-bg: whitesmoke;
  --color-text: #333; /* body copy */
  --color-heading: #111; /* titles/headings */
  --color-link: #222; /* links */
  --color-link-hover: #000; /* link hover */
  --color-border: #000;
  --color-muted: #666; /* metadata, timestamps, subtle text */
  /* Typography */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-mono: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-size: 1.3rem; /* base */
  --line: 1.3; /* base line-height */
  /* ONE knob to control overall content width */
  --content-width: 1200px; /* ← tweak this value */
  /* Derived layout values */
  --gutter: clamp(12px, 3vw, 48px); /* side padding that scales with viewport */
  /* Navbar */
  --nav-height: 2.5rem;
  --nav-font-size: 1.1rem;
  --nav-z: 100;
  /* HR styling (shared) */
  --hr-color: rgba(0,0,0,.18);
  --hr-thickness: 2px;
  --hr-radius: 2px;
  --hr-mt-base: 1rem;
  --hr-mb-base: 1.5rem;
  --hr-scale: 2; /* 2x spacing */
  --hr-mt: calc(var(--hr-mt-base) * var(--hr-scale));
  --hr-mb: calc(var(--hr-mb-base) * var(--hr-scale));
  /* Back-compat aliases */
  --main-bg-color: var(--color-bg);
  --font-color: var(--color-text);
  /* Code */
  --code-bg: #151515;
  --code-fg: #d0d0d0;
  --code-radius: 10px;
  --code-pad: 0.75rem;
  --code-font: var(--font-mono);
  --icode-bg: rgba(21,21,21,.06);
  --icode-radius: 6px;
  /* Nav Bar */
  --nav-bg: var(--color-bg, whitesmoke);
  --nav-fg: var(--color-text, #222);
  --nav-link: var(--color-link, #111);
  --nav-link-hover: var(--color-link-hover, #000);
  --nav-border: var(--color-border, #000);
  --nav-font: var(--font-body, system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  --nav-font-size: 1.7rem;
  --nav-gap: 4rem;
  --nav-pad-y: 0.3rem;
  --nav-pad-x: 0.5rem;
  --nav-height: 1.5rem;
  --nav-z: 1000;
}

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

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Images */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Horizontal rule — short, centered, with shared spacing */
hr {
  border: 0;
  height: var(--hr-thickness);
  background: var(--hr-color);
  border-radius: var(--hr-radius);
  margin: var(--hr-mt) auto var(--hr-mb);
}

/* ---------- Icons / Images ---------- */
.nav-img-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem; /* reserve height to prevent layout shift */
  flex: 0 0 auto;
}

.nav-img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

/* -------- Base / Normalize-lite -------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--font-size)/var(--line) var(--font-body);
}

/* Emphasis */
strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

body, .article, .archive {
  color: var(--color-text);
}

/* Common elements explicitly inherit body color (in case earlier rules set their own) */
h1, h2, h3, h4, h5, h6,
p, li, blockquote, figcaption,
.article .meta, .archive-year, .archive-tag, .tag-chip {
  color: inherit;
}

/* -------- Layout: single, consolidated content wrapper -------- */
#content-wrapper {
  max-width: var(--content-width); /* uses the single knob */
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-top: calc(var(--nav-height) + 0.75rem);
}

/* _sass/0foo/_navbar.scss
   Drop-in navbar styles. Uses CSS variables; falls back if unset.
   Markup example:
     <nav id="nav_container" role="navigation" aria-label="Primary">
       <a class="nav_item" href="/">Home</a>
       <a class="nav_item is-active" href="/posts/">Posts</a>
       <a class="nav_item" href="/about/">About</a>
       <a class="nav_item" href="https://github.com/0foo">
         <span class="nav-img-wrapper">
           <img src="{{ '/assets/img/github.svg' | relative_url }}" alt="GitHub">
         </span>
       </a>
     </nav>
*/
/* ---------- Container ---------- */
#nav_container {
  position: sticky; /* pin without layout hacks */
  top: 0;
  z-index: var(--nav-z);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* center items by default */
  flex-wrap: wrap;
  gap: var(--nav-gap);
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: 2px solid var(--nav-border);
  font-family: var(--nav-font);
  font-size: var(--nav-font-size);
  font-weight: 700;
  line-height: 1.2;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  margin: 0;
  list-style: none;
}

/* Alignment modifiers (optional) */
#nav_container.nav--left {
  justify-content: flex-start;
}

#nav_container.nav--right {
  justify-content: flex-end;
}

/* ---------- Items & Links ---------- */
.nav_item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem; /* space between icon and text */
}

#nav_container a,
.nav_item a {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem; /* touch-friendly */
  color: var(--nav-link);
  text-decoration: none;
  border-radius: 6px; /* subtle hover outline radius */
}

#nav_container a:hover,
.nav_item a:hover {
  color: var(--nav-link-hover);
  text-decoration: underline;
}

#nav_container a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Active state helper */
.nav_item.is-active > a,
#nav_container a[aria-current=page] {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ----------------------------------------
   Code & Syntax Highlighting (Rouge)
   - Keeps your original palette
   - Fixes wrapping (scroll horizontally)
   - Supports Rouge line-numbers table layout
   - Adds inline code styling
   - Clamps blocks to the page/content width
----------------------------------------- */
/* Tokens (adjust as you like) */
:root {
  --code-bg: #151515;
  --code-fg: #d0d0d0;
  --code-border: #000000;
  --code-radius: 10px;
  --code-pad: 0.75rem;
  --code-font: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace);
  /* Inline code chip */
  --icode-bg: rgba(21,21,21,.06);
  --icode-fg: inherit;
  --icode-pad-y: 0.1rem;
  --icode-pad-x: 0.35rem;
  --icode-radius: 6px;
  /* Clamp width to content area (falls back to 100%) */
  --code-max-width: var(--content-max, 100%);
}

/* -------- Inline code -------- */
:not(pre) > code,
code.highlighter-rouge {
  font-family: var(--code-font);
  font-size: 0.95em;
  background: var(--icode-bg);
  color: var(--icode-fg);
  padding: var(--icode-pad-y) var(--icode-pad-x);
  border-radius: var(--icode-radius);
  white-space: normal; /* inline flows with text */
}

/* -------- Block code wrapper --------
   Rouge usually emits:
   <div class="highlight"><pre class="highlight language-..."><code>…</code></pre></div>
   or a table for line numbers.
------------------------------------- */
.highlight {
  background: var(--code-bg);
  color: var(--code-fg);
  border-radius: var(--code-radius);
  margin: 1rem auto; /* center */
  overflow: auto;
  width: 100%;
  max-width: var(--code-max-width); /* clamp to page width */
  /* Optional subtle border:
  border: 1px solid var(--code-border);
  */
}

/* The actual pre/code */
.highlight pre,
pre.highlight {
  margin: 0;
  padding: var(--code-pad);
  font-family: var(--code-font);
  font-size: 1rem; /* was 1.2rem; scale from base instead */
  line-height: 1.5;
  white-space: pre; /* keep code layout intact */
  overflow-x: auto;
  max-width: 100%; /* respect clamp */
  -webkit-overflow-scrolling: touch;
}

.highlight pre code {
  display: block;
  padding: 0; /* pre handles padding */
  background: transparent;
  color: inherit;
  word-break: normal; /* keep monospace words intact */
}

/* -------- Line numbers variant --------
   Rouge can render a <table> with .gutter (numbers) and .code (content)
--------------------------------------- */
.highlight table {
  display: block; /* allow horizontal scroll within clamp */
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.highlight td {
  padding: 0;
  vertical-align: top;
}

.highlight td.gutter {
  user-select: none;
  padding: var(--code-pad) 0 var(--code-pad) var(--code-pad);
  opacity: 0.65;
  text-align: right;
  white-space: nowrap;
}

.highlight td.gutter pre {
  padding: 0;
  margin: 0;
}

.highlight td.code {
  width: 100%;
  padding-right: var(--code-pad);
}

.highlight td.code pre {
  padding: 0;
  margin: 0;
  max-width: 100%; /* respect clamp */
  overflow-x: auto;
}

/* -------- Token colors (your palette) -------- */
.highlight, .highlight .w {
  color: #d0d0d0;
  background-color: #151515;
}

.highlight .err {
  color: #151515;
  background-color: #ac4142;
} /* error */
.highlight .c,
.highlight .ch,
.highlight .cd,
.highlight .cm,
.highlight .cpf,
.highlight .c1,
.highlight .cs {
  color: #505050;
} /* comments */
.highlight .cp {
  color: #f4bf75;
} /* preproc */
.highlight .nt {
  color: #f4bf75;
} /* tag name */
.highlight .o,
.highlight .ow {
  color: #d0d0d0;
} /* operators */
.highlight .p,
.highlight .pi {
  color: #d0d0d0;
} /* punctuation */
.highlight .gi {
  color: #90a959;
} /* diff add */
.highlight .gd {
  color: #ac4142;
} /* diff del */
.highlight .gh {
  color: #6a9fb5;
  background-color: #151515;
  font-weight: bold;
} /* headers */
.highlight .k,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kv {
  color: #aa759f;
} /* keywords */
.highlight .kc,
.highlight .kt,
.highlight .kd {
  color: #d28445;
} /* types/defs */
.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .dl,
.highlight .sd,
.highlight .s2,
.highlight .sh,
.highlight .sx,
.highlight .s1 {
  color: #90a959;
} /* strings */
.highlight .sa {
  color: #aa759f;
} /* string affix */
.highlight .sr {
  color: #75b5aa;
} /* regex */
.highlight .si,
.highlight .se {
  color: #8f5536;
} /* special */
.highlight .nn,
.highlight .nc,
.highlight .no {
  color: #f4bf75;
} /* names */
.highlight .na {
  color: #6a9fb5;
} /* attrs */
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .il,
.highlight .mo,
.highlight .mx {
  color: #90a959;
} /* numbers */
.highlight .ss {
  color: #90a959;
} /* symbol */
/* -------- Small screens: slightly smaller code to reduce overflow -------- */
@media (max-width: 420px) {
  .highlight pre,
  pre.highlight {
    font-size: 0.95rem;
  }
}
/* -------- Optional: opt-in soft wrap for very long lines --------
   Add class 'code-wrap' to .highlight to enable wrapping for that block only.
------------------------------------------------------------------ */
.highlight.code-wrap pre,
.highlight.code-wrap pre code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Force wrapping for all code blocks */
.highlight,
pre.highlight {
  overflow-x: hidden; /* hide horizontal scroll */
}

.highlight pre,
pre.highlight {
  white-space: pre-wrap; /* wrap long lines */
  word-break: break-word; /* break long tokens */
  overflow-wrap: anywhere; /* extra safety for very long strings */
}

/* Rouge table (line numbers) variant */
.highlight table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* no scroll */
  table-layout: fixed; /* prevent cells from expanding */
}

.highlight td {
  padding: 0;
  vertical-align: top;
  word-break: break-word; /* allow breaks in both cols */
}

.highlight td.code pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 2) Make all links look like unhovered archive links */
a,
.article .article-title a,
.archive-link,
.article a,
.nav a {
  color: inherit; /* no special link color */
  text-decoration: underline; /* always underlined */
  text-underline-offset: 2px; /* same offset as archive */
  text-decoration-thickness: 1.5px; /* subtle, consistent */
}

/* (Optional) If any headings previously forced their own color, neutralize it */
.article .article-title,
.article > h1,
.article h2, .article h3, .article h4 {
  color: inherit !important;
}

/* -------- Article header & body -------- */
/* Title (works with .article-title OR plain h1 inside .article) */
.article .article-title,
.article > h1 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: 0.2px;
  margin-top: 0;
  margin-bottom: var(--hr-mb); /* match HR spacing below */
  text-align: center; /* ← left-align title per request */
  color: var(--color-heading);
}

.article .article-title a,
.article > h1 a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Meta row (date + tags) centered under the title */
.article .meta {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.85;
  margin: 0 auto var(--hr-mb);
  color: var(--color-muted);
}

.article .meta .date,
.article .meta time {
  font-variant-numeric: tabular-nums;
}

.article .meta .tags {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.article .meta .tag {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article .meta .tag:hover {
  text-decoration-thickness: 2px;
}

/* Optional divider under the header (matches HR vars) */
.article .header-divider {
  height: var(--hr-thickness);
  width: var(--hr-width);
  background: var(--hr-color);
  border: 0;
  border-radius: var(--hr-radius);
  margin: var(--hr-mt) auto var(--hr-mb);
  opacity: 0.6;
}

/* Body typography */
.article p {
  margin: 0 0 1.05rem;
}

.article h2,
.article h3,
.article h4 {
  margin: 1.75rem 0 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.2px;
  color: var(--color-heading);
}

.article h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 0.25rem;
}

.article h3 {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}

.article h4 {
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
}

.article ul,
.article ol {
  margin: 0 0 1.1rem 1.25rem;
  padding: 0;
}

.article li {
  margin: 0.25rem 0;
}

.article blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

.article figure {
  margin: 1.25rem auto;
  text-align: center;
}

.article figcaption {
  font-size: 0.92rem;
  opacity: 0.8;
  margin-top: 0.4rem;
}

/* Read more link as bordered chip */
.article-read-more {
  margin-top: 1.25rem;
}

.article-read-more > a {
  display: inline-block;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid #111;
  border-radius: 8px;
  color: #111;
  background: transparent;
  text-decoration: none;
  line-height: 1;
}

.article-read-more > a:hover,
.article-read-more > a:focus-visible {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

/* Force underline on titles (listing + article pages) */
.article .article-title a,
.article > h1,
.article > h1 a {
  text-decoration-line: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  :root {
    --nav-font-size: 1.7rem;
  }
  #nav_container {
    gap: 0.6rem;
  }
  #nav_container a {
    padding: 1rem 0.75rem;
  }
}
/* ---------- Reduced motion ---------- */
/* -------- Responsive tweaks -------- */
@media (max-width: 480px) {
  :root {
    --nav-height: 64px; /* was ~2.5rem; give thumbs 44px+ tap area */
    --nav-font-size: 1.25rem;
  }
  .highlight pre, pre.highlight {
    font-size: 0.95rem;
  }
}

/*# sourceMappingURL=theme.css.map */