/* marc-bowes.com — site.css
   Plain. Long-form. Engineer's home page. */

/* ---------- variables ---------- */

:root {
  /* light: cream paper, ink black, rust accent */
  --bg:        #f5efe2;
  --bg-soft:   #ebe4d3;
  --ink:       #1a1815;
  --ink-soft:  #514c44;
  --rule:      #c9bfa8;
  --accent:    #a8431a;
  --accent-bg: #f1d8c5;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark: deep brown-navy, warm parchment ink, same rust */
    --bg:        #14161b;
    --bg-soft:   #1d2027;
    --ink:       #e9e1cf;
    --ink-soft:  #a39b88;
    --rule:      #2d313a;
    --accent:    #d97950;
    --accent-bg: #2a1d17;
  }
}

/* ---------- reset, just what we need ---------- */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
}

/* belt-and-suspenders: don't let any wide child (MathJax, an absurdly long
   word, etc.) make the whole page scroll sideways. */
html { overflow-x: clip; }
body { overflow-x: clip; }

img, svg { max-width: 100%; height: auto; display: block; }

/* ---------- type system ---------- */

html {
  font-family: "Source Serif 4", "Source Serif Pro", "Charter", "Iowan Old Style",
               "Sitka Text", "Georgia", serif;
  font-size: 18px;
  line-height: 1.6;
  font-feature-settings: "kern", "onum", "liga";
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

@media (min-width: 720px) {
  html { font-size: 19px; }
}

code, pre, kbd, samp {
  font-family: "JetBrains Mono", "Iosevka", "DejaVu Sans Mono", "Menlo",
               "Consolas", monospace;
  font-feature-settings: "kern", "liga" 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "JetBrains Mono", "Iosevka", "DejaVu Sans Mono", "Menlo",
               "Consolas", monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 2.4em 0 0.8em;
}

h1 { font-size: 1.75rem; margin-top: 0.4em; letter-spacing: -0.02em; }
h2 { font-size: 1.20rem; }
h3 { font-size: 1.00rem; }
h4 { font-size: 0.95rem; color: var(--ink-soft); }

/* heading rules: a thin underscore beneath h2/h3 to evoke org-mode === --- */
h2::after, h3::after {
  content: "";
  display: block;
  width: 3em;
  border-bottom: 1px solid var(--rule);
  margin-top: 0.3em;
}

p { margin: 0 0 1em; }

/* ---------- layout ---------- */

body > div#content,
body > #content,
.content {
  max-width: 38rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 6rem;
}

@media (min-width: 720px) {
  body > div#content,
  body > #content,
  .content {
    padding: 2.5rem 2rem 8rem;
  }
}

/* ---------- site nav (preamble) ---------- */

/* org wraps :html-preamble in <div id="preamble" class="status"> — keep that
   transparent and put all the chrome on the inner <header class="site-nav">,
   otherwise both elements draw their own border-bottom. */
#preamble.status { margin: 0; padding: 0; }

.site-nav {
  max-width: 38rem;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.25rem 0.6rem;
  font-family: "JetBrains Mono", "Iosevka", "DejaVu Sans Mono", "Menlo",
               "Consolas", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 720px) {
  .site-nav {
    padding: 2rem 2rem 0.7rem;
    font-size: 0.82rem;
  }
}

.site-nav a {
  color: var(--ink-soft);
  border-bottom: none;
}
.site-nav a:hover {
  color: var(--accent);
  background: none;
}
.site-nav .sep {
  color: var(--rule);
  margin: 0 0.4em;
}

/* org wraps each section in .outline-N — flatten margins */
.outline-2, .outline-3, .outline-4 { margin: 0; }
.outline-text-2, .outline-text-3, .outline-text-4 { margin: 0; }

/* ---------- links ---------- */

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
a:hover {
  border-bottom-color: var(--accent);
  background: var(--accent-bg);
}
a:visited { color: var(--accent); }

/* ---------- inline code, =verbatim=, kbd ---------- */

code {
  background: var(--bg-soft);
  padding: 0.08em 0.35em;
  border-radius: 2px;
  font-size: 0.92em;
  border: 1px solid var(--rule);
}

/* ---------- code blocks ---------- */

pre, .org-src-container pre {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 1.5em -0.25rem;
  border-radius: 2px;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* ---------- syntax highlighting (htmlize, css mode) ----------
   htmlize emits class names like .org-keyword, .org-string etc. when
   org-html-htmlize-output-type is 'css. Palette is hand-picked to sit
   on the cream/parchment background; dark mode swaps via :root vars. */

:root {
  --syn-keyword:  #5b6f8a;  /* steel blue */
  --syn-string:   #6b8b3a;  /* moss */
  --syn-comment:  #8a8275;  /* faded ink */
  --syn-type:     #8a6b1f;  /* ochre */
  --syn-fn:       #a8431a;  /* rust accent */
  --syn-builtin:  #7a4d8f;  /* muted plum */
}

@media (prefers-color-scheme: dark) {
  :root {
    --syn-keyword:  #8aa9c9;
    --syn-string:   #a3bf6f;
    --syn-comment:  #7a7568;
    --syn-type:     #d1a85a;
    --syn-fn:       #d97950;
    --syn-builtin:  #c39ad6;
  }
}

.org-keyword          { color: var(--syn-keyword); }
.org-string           { color: var(--syn-string); }
.org-comment,
.org-comment-delimiter { color: var(--syn-comment); font-style: italic; }
.org-type             { color: var(--syn-type); }
.org-function-name    { color: var(--syn-fn); }
.org-builtin          { color: var(--syn-builtin); }
.org-variable-name    { color: var(--ink); }
.org-constant         { color: var(--syn-builtin); }
.org-preprocessor     { color: var(--syn-keyword); }
.org-doc              { color: var(--syn-comment); font-style: italic; }
.org-warning          { color: var(--accent); font-weight: 600; }

/* ---------- quotes ---------- */

blockquote {
  margin: 1.5em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid var(--rule);
  color: var(--ink-soft);
  font-style: italic;
}

blockquote em, blockquote i { font-style: normal; }

/* ---------- asides — the #+begin_aside blocks ---------- */

.aside, aside {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-soft);
  padding: 0.8rem 1.1rem;
  margin: 1.5em -0.25rem;
  font-size: 0.93em;
  color: var(--ink-soft);
  border-radius: 2px;
}

.aside p:last-child, aside p:last-child { margin-bottom: 0; }
.aside code, aside code { font-size: 0.9em; }

/* ---------- tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.92em;
}
th, td {
  text-align: left;
  padding: 0.4em 0.7em;
  border-bottom: 1px solid var(--rule);
}
thead th, tr:first-child td {
  border-bottom: 2px solid var(--ink-soft);
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: 0.85em;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* numeric columns — right-align if cell content looks like a number.
   org doesn't help us here; users can add class="num" via attr. */

/* ---------- images & figures ---------- */

figure {
  margin: 1.5em 0;
  text-align: center;
}
figcaption {
  font-size: 0.85em;
  color: var(--ink-soft);
  margin-top: 0.4em;
  font-style: italic;
}

img {
  border: 1px solid var(--rule);
  background: var(--bg-soft);
  padding: 0.5rem;
  border-radius: 2px;
}

/* inline icons (rss glyph next to "RSS feed", etc.): no chip framing,
   keep them as plain glyphs that flow with the text */
a img,
img.icon,
img[width="16"],
img[width="20"],
img[width="24"] {
  display: inline-block;
  vertical-align: -0.18em;
  border: none;
  background: none;
  padding: 0;
  border-radius: 0;
}

/* dark mode: tint inline rss icon so it reads against the dark bg */
@media (prefers-color-scheme: dark) {
  a img[src*="rss"],
  img.icon[src*="rss"] {
    filter: invert(0.9);
  }
}

/* dark mode: invert ditaa pngs, which are black-on-white */
@media (prefers-color-scheme: dark) {
  .invert-on-dark img,
  img[src*="circle"],
  img[src*="coupler"],
  img[src*="storage"],
  img[src*="qp-on-metal"],
  img[src*="hotkeys"],
  img[src*="infinite-range"],
  img[src*="split-range"],
  img[src*="disagg"],
  img[src*="cluster-"] {
    filter: invert(0.92) hue-rotate(180deg);
  }
}

/* ---------- lists ---------- */

ul, ol { padding-left: 1.5em; margin: 0 0 1em; }
li { margin: 0.2em 0; }

/* ---------- hr ---------- */

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 2em auto;
  width: 50%;
}

/* ---------- footnotes ---------- */

.footdef {
  font-size: 0.9em;
  margin: 0.6em 0;
}
.footnum, .footref { font-family: "JetBrains Mono", monospace; }
#text-footnotes { border-top: 1px solid var(--rule); padding-top: 1em; margin-top: 3em; }
h2.footnotes { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- date / metadata under post titles ---------- */

.subtitle, .timestamp-wrapper, .timestamp {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ---------- selection ---------- */

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

/* ---------- math ---------- */

.MathJax, .equation { font-size: 0.95em; }

/* MathJax sets inline min-width on displayed equations sized to the formula
   (e.g. min-width: 21.851em), which beats our max-width and pushes the page
   on narrow screens. Override the inline min-width with !important so the
   container can shrink to fit; the inner mjx-math keeps its natural width
   and overflows horizontally inside the scroll-enabled container. */
mjx-container[display="true"] {
  display: block !important;
  max-width: 100%;
  min-width: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1em 0;
  scrollbar-width: thin;
}
mjx-container[display="true"] > mjx-math {
  display: inline-block !important;
  text-align: left;
}

/* ---------- print ---------- */

@media print {
  :root {
    --bg: white;
    --bg-soft: white;
    --ink: black;
    --rule: #999;
    --accent: black;
  }
  pre, .aside { border-color: #999; }
  a { border-bottom: none; color: black; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}