/* ------------------------------------------------------------------ */
/* Argument Computer Corporation — site styles                         */
/* Experiment: Selenized palette (jan-warchol/selenized) + Commit Mono */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: 'Commit Mono';
  src: url('/static/fonts/CommitMonoV143-VF.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Palette: Selenized light (default) / dark                          */
/* ------------------------------------------------------------------ */

:root {
  --bg: #fbf3db;      /* bg_0 */
  --bg-1: #ece3cc;
  --bg-2: #d5cdb6;
  --fg: #3a4d53;      /* fg_1 */
  --fg-strong: #3a4d53; /* fg_1 */
  --muted: #53676d; /* fg_0 */
  --border: #d5cdb6;
  --code-bg: #ece3cc;
  --accent: #cc1729;  /* br_red */
  --link: #006dce;    /* br_blue */
  --logo-accent: #489100; /* green */
  /* Selenized hues at adjusted lightness: darker here, lighter in the dark
     themes below. Stock accent values sit near L*50 and land under 4.5:1 on
     the code background, which the axe pass in tests/browser.mjs rejects;
     yellow and cyan reach only ~2.8:1. Hue is held within 2 degrees. */

  --syn-kw: #735c00;
  --syn-str: #006f66;
  --syn-num: #9b176b;
  --syn-fn: #005da9;
  --syn-type: #6842a1;
  --syn-op: #94420d;
  --syn-com: #53676d;  /* fg_0 */

  --mono: 'Commit Mono', ui-monospace, 'IBM Plex Mono', monospace;
  --sans: 'Commit Mono', ui-monospace, monospace;
  --measure: 46rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #103c48;
    --bg-1: #184956;
    --bg-2: #2d5b69;
    --fg: #cad8d9;
    --fg-strong: #cad8d9;
    --muted: #adbcbc;
    --border: #2d5b69;
    --code-bg: #184956;
    --accent: #ff7b73;
    --link: #58a3ff;
    --logo-accent: #75b938;

    --syn-kw: #f0c541;
    --syn-str: #63d9cc;
    --syn-num: #ff8aca;
    --syn-fn: #75b6ff;
    --syn-type: #c8a4ff;
    --syn-op: #ff9f6a;
    --syn-com: #adbcbc;
  }
}

:root[data-theme="dark"] {
  --bg: #103c48;
  --bg-1: #184956;
  --bg-2: #2d5b69;
  --fg: #cad8d9;
  --fg-strong: #cad8d9;
  --muted: #adbcbc;
  --border: #2d5b69;
  --code-bg: #184956;
  --accent: #ff7b73;
  --link: #58a3ff;
  --logo-accent: #75b938;

  --syn-kw: #f0c541;
  --syn-str: #63d9cc;
  --syn-num: #ff8aca;
  --syn-fn: #75b6ff;
  --syn-type: #c8a4ff;
  --syn-op: #ff9f6a;
  --syn-com: #adbcbc;
}

/* Verso's Lean rendering reads these variables (defined in its builtin
   styles; this sheet loads after them, so these win). */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --verso-text-font-family: var(--sans);
  --verso-structure-font-family: var(--sans);
  --verso-code-font-family: var(--mono);
  --verso-text-color: var(--fg);
  --verso-code-color: var(--fg-strong);
  --verso-structure-color: var(--fg-strong);
  --verso-code-keyword-color: var(--syn-kw);
  --verso-code-const-color: var(--syn-fn);
  --verso-code-var-color: var(--syn-op);
  --verso-selected-color: var(--bg-2);
  --verso-info-color: var(--fg);
  --verso-warning-color: var(--fg);
  --verso-error-color: var(--accent);
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.55rem 0.8rem;
  color: var(--fg-strong);
  background: var(--bg);
  border: 2px solid var(--link);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

:where(a, button, summary, [tabindex="0"]):focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.7;
}

::selection { background: var(--bg-2); }

/* ------------------------------------------------------------------ */
/* Header / footer                                                     */
/* ------------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--border);
}

.nav {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fg-strong);
  text-decoration: none;
}
.wordmark svg {
  height: 1.15rem;
  width: auto;
  display: block;
  /* The C curves touch the viewBox edge; preserve their antialiasing at fractional zoom. */
  overflow: visible;
}
.wordmark path { fill: currentColor; }
.wordmark .accent-path { fill: var(--logo-accent); }
.wordmark:hover { color: var(--logo-accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--fg);
  text-decoration: none;
}
.nav-links a:hover {
  background: var(--bg-2);
  color: var(--fg-strong);
}
.nav-links a[aria-current="page"] {
  color: var(--fg-strong);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-underline-offset: 0.25em;
}
.theme-toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: none;
  border: none;
  padding: 0.35rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--fg);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }

main { flex: 1; }

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 6rem;
}
.footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-links {
  display: flex;
  gap: 0.25rem 1.25rem;
  flex-wrap: wrap;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--muted);
}
.footer-links a:hover { background: var(--bg-2); color: var(--fg-strong); }

/* ------------------------------------------------------------------ */
/* Content                                                             */
/* ------------------------------------------------------------------ */

.content {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  /* Long words must still fit when readers enlarge or space out the text. */
  overflow-wrap: anywhere;
}

.content pre code { overflow-wrap: normal; }

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-strong);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 2.5em 0 0.6em;
}
h1 { font-size: 1.9rem; margin-top: 1.2em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.95rem; }
h6 { font-size: 0.9rem; }

p, .paragraph { margin: 0 0 1.1em; }

strong { color: var(--fg-strong); }

a {
  color: var(--fg-strong);
  text-decoration: underline;
  text-decoration-color: var(--link);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}
a:hover { background: var(--bg-2); }

ul, ol { padding-left: 1.4rem; margin: 0 0 1.1em; }
li { margin-bottom: 0.4em; }

img { max-width: 100%; height: auto; }

blockquote {
  margin: 1.5em 0;
  padding-left: 1.25em;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }

/* Code */
code, pre {
  font-family: var(--mono);
  font-size: 0.9em;
}
code {
  background: var(--code-bg);
  padding: 0.12em 0.3em;
  border-radius: 3px;
  color: var(--fg-strong);
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  line-height: 1.55;
  margin: 1.4em 0;
}
pre code { background: none; padding: 0; }

/* Syntax highlighting (highlight.js) — selenized token mapping */
.hljs { background: none; color: var(--fg-strong); }
.hljs-keyword, .hljs-selector-tag, .hljs-tag { color: var(--syn-kw); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--syn-str); }
.hljs-number, .hljs-literal { color: var(--syn-num); }
.hljs-title, .hljs-title.function_, .hljs-name, .hljs-section { color: var(--syn-fn); }
.hljs-type, .hljs-class, .hljs-title.class_, .hljs-built_in { color: var(--syn-type); }
.hljs-symbol, .hljs-operator, .hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: var(--syn-op); }
.hljs-comment, .hljs-quote, .hljs-meta, .hljs-deletion { color: var(--syn-com); font-style: italic; }

/* KaTeX display math shouldn't overflow on small screens */
.math.display {
  display: block;
  overflow-x: auto;
  padding: 0.25em;
}
.katex-display { margin: 0.5em 0; }

/* Math lives in <code class="math"> elements; don't give it code-chip styling */
.math { color: inherit; }

/* Footnotes: Verso renders them as inline <details class="footnote"> */
details.footnote { display: inline; }
details.footnote summary {
  display: inline;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  vertical-align: super;
  color: var(--accent);
}
details.footnote summary::-webkit-details-marker { display: none; }
details.footnote[open] {
  display: block;
  margin: 0.6em 0;
  padding: 0.5em 1em;
  background: var(--code-bg);
  border-left: 3px solid var(--accent);
  font-size: 0.9em;
}
details.footnote[open] summary { color: var(--fg-strong); }

/* ------------------------------------------------------------------ */
/* Front page                                                          */
/* ------------------------------------------------------------------ */

/* Full Argument Computer Corporation lockup, theme-aware */
.front-logo { margin: 3.5rem 0 2rem; }
.front-logo svg { width: 100%; height: auto; display: block; }
.front-logo path { fill: var(--fg-strong); }
.front-logo .accent-path { fill: var(--logo-accent); }

/* Subtitle under the logo */
.frontpage > p:first-of-type {
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: -0.01em;
  margin: 0 0 2.75rem;
}

.frontpage > p:nth-of-type(2) {
  font-size: 1.05rem;
}

/* ------------------------------------------------------------------ */
/* Blog                                                                */
/* ------------------------------------------------------------------ */

ul.post-list {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
ul.post-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}
ul.post-list a.title {
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
}
ul.post-list a.title:hover { background: var(--bg-2); }
/* The index is a clean title+date listing: hide preview content entirely */
ul.post-list li > *:not(.title):not(.metadata) { display: none; }
ul.post-list .authors { display: none; }
ul.post-list .metadata { flex-shrink: 0; }

/* Post metadata (date, authors) */
.table-of-contents {
  margin: 0 0 2rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
}
.table-of-contents summary { color: var(--fg-strong); cursor: pointer; }
.table-of-contents ol { list-style: none; padding: 0; margin: 1rem 0 0; }
.table-of-contents .toc-subsection { margin-left: 1.2rem; }

.metadata {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
}
/* Post byline: "Authors · date" */
.post > .metadata { margin: -0.5rem 0 2.5rem; display: flex; gap: 0.5rem; }
.post > .metadata .authors::after { content: "·"; margin-left: 0.5rem; }

/* Tables (benchmarks etc.) */
table {
  border-collapse: collapse;
  font-size: 0.85rem;
  font-family: var(--mono);
}
.table-scroll {
  overflow-x: auto;
  margin: 1.5em 0;
}
th, td {
  border: 1px solid var(--border);
  padding: 0.35em 0.7em;
  text-align: left;
  white-space: nowrap;
}
th { background: var(--code-bg); color: var(--fg-strong); }

/* ------------------------------------------------------------------ */
/* Team                                                                */
/* ------------------------------------------------------------------ */

.content section img[src*="/images/team/"] {
  width: 14rem;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border: 12px solid var(--border);
  border-radius: 100%;
}

/* Two-column member layout: text stays bound to the left column instead of
   wrapping under the portrait. The image's wrapping <p> is the right cell. */
.content section:has(img[src*="/images/team/"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  column-gap: 2.5rem;
  margin-top: 2.5rem;
}
/* Separator above each member, spanning the section only */
.content section:has(img[src*="/images/team/"]) {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
/* ...and one closing line under the last member */
.content section:has(img[src*="/images/team/"]):last-of-type {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2.5rem;
}
.content section:has(img[src*="/images/team/"]) > * { grid-column: 1; }
.content section:has(img[src*="/images/team/"]) > h2 { margin-top: 0; }
.content section:has(img[src*="/images/team/"]) > p:has(> img[src*="/images/team/"]) {
  grid-column: 2;
  grid-row: 1 / span 99;
  margin: 0;
  align-self: center;
}

@media (max-width: 46rem) {
  .content section:has(img[src*="/images/team/"]) { display: block; }
  .content section img[src*="/images/team/"] { margin: 0 auto 1rem; }
}

@media (max-width: 30rem) {
  ul.post-list li {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }
}