/* Cherry default theme.
 *
 * THESIS: the category standard, played straight — a typography-first blog
 * theme with nothing to prove except craft; it refuses decoration-first
 * arrangements entirely (user's standing choice, seed 5f876708).
 * OWN-WORLD: white/near-black dual ground, system serif prose (Charter
 * where available — zero bytes over the wire, owned honestly), mono
 * structure, one cherry accent; code sits on a raised quiet surface,
 * colored entirely by the site's own tokens.
 * STORY: a reader lands on a post, reads without friction, remembers the
 * code blocks; the toggle swaps the whole world, code included, instantly.
 * FIRST VIEWPORT: header (title left, nav right), post title, mono meta
 * line, prose at 42rem measure; primary action is reading.
 * FORM: canon (standing exit), quality bar: Bear/Tufte, PaperMod/Starlight,
 * gwern, Stripe/Linear.
 * FINISH: unreviewed and undocumented is unfinished; this build ends with
 * the finish review, the verdict, and the recorded design system.
 *
 * Every color lives in a custom property below — templates and component
 * rules never carry a literal color (gate-enforced). Light is defined on
 * :root; dark redefines the same tokens under prefers-color-scheme and
 * under an explicit [data-theme] set by the toggle, which always wins.
 */

:root {
  --color-bg: #ffffff;
  --color-surface: #f6f6f4;
  --color-fg: #1f2328;
  --color-muted: #59626c;
  --color-border: #e4e4e1;
  --color-accent: #b3173e;
  --color-accent-strong: #8f1132;
  --color-selection: #ffdce2;

  --syn-keyword: #b3173e;
  --syn-string: #0a3069;
  --syn-comment: #5d6570;
  --syn-function: #6639ba;
  --syn-constant: #0550ae;
  --syn-type: #953800;
  --syn-variable: #1f2328;
  --syn-punct: #59626c;

  --font-prose: "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "DejaVu Sans Mono", monospace;
  --measure: 42rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #15171b;
    --color-surface: #1d2025;
    --color-fg: #e3e1dd;
    --color-muted: #a2a6ad;
    --color-border: #2a2e35;
    --color-accent: #f4718c;
    --color-accent-strong: #ff93a8;
    --color-selection: #4a2430;

    --syn-keyword: #f4718c;
    --syn-string: #a5d6ff;
    --syn-comment: #8b949e;
    --syn-function: #d2a8ff;
    --syn-constant: #79c0ff;
    --syn-type: #ffa657;
    --syn-variable: #e3e1dd;
    --syn-punct: #a2a6ad;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #15171b;
  --color-surface: #1d2025;
  --color-fg: #e3e1dd;
  --color-muted: #a2a6ad;
  --color-border: #2a2e35;
  --color-accent: #f4718c;
  --color-accent-strong: #ff93a8;
  --color-selection: #4a2430;

  --syn-keyword: #f4718c;
  --syn-string: #a5d6ff;
  --syn-comment: #8b949e;
  --syn-function: #d2a8ff;
  --syn-constant: #79c0ff;
  --syn-type: #ffa657;
  --syn-variable: #e3e1dd;
  --syn-punct: #a2a6ad;

  color-scheme: dark;
}

/* ---------- base ---------- */

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-prose);
  font-size: 1.125rem;
  line-height: 1.7;
}

::selection {
  background: var(--color-selection);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-accent-strong);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- header / footer ---------- */

.site-header {
  padding: 2rem 0 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-title {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--color-fg);
  text-decoration: none;
}

.site-title:hover {
  color: var(--color-accent);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.site-nav a {
  color: var(--color-muted);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-accent);
}

main {
  padding: 3rem 0 4rem;
}

.site-footer {
  border-top: 1px solid var(--color-border);
  padding: 1.25rem 0 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-muted);
}

.site-footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer a {
  color: var(--color-muted);
}

.site-footer a:hover {
  color: var(--color-accent);
}

/* Theme toggle: hidden until its script runs; fails soft without JS. */
.theme-toggle {
  display: none;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  padding: 0.2rem 0.75rem;
  cursor: pointer;
}

.theme-toggle[data-ready] {
  display: inline-flex;
}

.theme-toggle:hover {
  color: var(--color-fg);
  border-color: var(--color-muted);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ---------- prose ---------- */

h1,
h2,
h3 {
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

h2 {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 2.5rem 0 0.75rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 2rem 0 0.5rem;
}

p,
ul,
ol {
  margin: 0 0 1.25rem;
}

blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 1px solid var(--color-border);
  color: var(--color-muted);
}

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

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

/* The transform stage wraps every table in .table-scroll, so tables keep
 * their semantics for assistive tech and still scroll on narrow screens. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.25rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}

.table-scroll table {
  margin: 0;
}

th,
td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

/* ---------- metadata ---------- */

.post-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0 0 2.5rem;
}

.post-meta a {
  color: var(--color-muted);
}

.post-meta a:hover {
  color: var(--color-accent);
}

/* ---------- post list ---------- */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-list li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.45rem 0;
}

.post-list time {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-muted);
  flex-shrink: 0;
}

.post-list a {
  color: var(--color-fg);
  text-decoration: none;
}

.post-list a:hover {
  color: var(--color-accent);
}

@media (max-width: 34rem) {
  .post-list li {
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.65rem 0;
  }
}

/* ---------- code: the memory moment ---------- */

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

:not(pre) > code {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

pre {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  line-height: 1.6;
}

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

/* Lumis (html_linked) token classes, colored from the theme's own tokens
 * so the toggle swaps code and prose as one world. */
pre.lumis {
  color: var(--syn-variable);
}

[class^="l-keyword"],
[class*=" l-keyword"] {
  color: var(--syn-keyword);
}

[class^="l-string"],
[class*=" l-string"],
[class^="l-character"] {
  color: var(--syn-string);
}

[class^="l-comment"],
[class*=" l-comment"] {
  color: var(--syn-comment);
  font-style: italic;
}

[class^="l-function"],
[class*=" l-function"],
[class^="l-method"] {
  color: var(--syn-function);
}

[class^="l-constant"],
[class*=" l-constant"],
[class^="l-number"],
[class^="l-boolean"] {
  color: var(--syn-constant);
}

[class^="l-type"],
[class*=" l-type"],
[class^="l-module"],
[class^="l-namespace"],
[class^="l-attribute"],
[class^="l-tag"] {
  color: var(--syn-type);
}

[class^="l-variable"],
[class*=" l-variable"],
[class^="l-property"] {
  color: var(--syn-variable);
}

[class^="l-punctuation"],
[class*=" l-punctuation"],
[class^="l-operator"] {
  color: var(--syn-punct);
}

/* String interpolation symbols read as strings. */
.l-string-special-symbol {
  color: var(--syn-constant);
}

/* ---------- portfolio: the developer story ---------- */

.profile {
  margin: 0 0 3rem;
}

.profile h1 {
  margin-bottom: 0.25rem;
}

.profile-headline {
  font-size: 1.125rem;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}

.profile-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.profile-meta a {
  color: var(--color-muted);
}

.profile-meta a:hover {
  color: var(--color-accent);
}

/* The rail: years as waypoints, entries hanging off a hairline. */

.timeline-year {
  position: relative;
  border-left: 1px solid var(--color-border);
  padding: 0 0 1.5rem 1.75rem;
  margin: 0;
}

.year-mark {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
  position: relative;
}

.year-mark::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 4.5px);
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.timeline-entry {
  margin: 0 0 1.75rem;
}

.timeline-entry h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.2rem;
}

.entry-kind {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.15rem;
}

.entry-meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0 0 0.4rem;
}

.entry-meta a {
  color: var(--color-muted);
  text-decoration-color: var(--color-border);
}

.entry-meta a:hover {
  color: var(--color-accent);
}

.entry-highlights {
  margin: 0.4rem 0 0.5rem;
  padding-left: 1.1rem;
}

.entry-highlights li {
  margin: 0.15rem 0;
}

.entry-tags {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin: 0.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
}

.entry-tags a {
  color: var(--color-muted);
  text-decoration: none;
}

.entry-tags a::before {
  content: "#";
  opacity: 0.6;
}

.entry-tags a:hover {
  color: var(--color-accent);
}

/* Standing roles, not events: open source sits beside the timeline. */

.oss h2,
.story-section h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 1rem;
}

.oss-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oss-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  padding: 0.35rem 0;
}

.oss-role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
}

.story-lede {
  color: var(--color-muted);
  margin-top: -0.5rem;
}

.story-link {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  margin: -1rem 0 2rem;
}

/* ---------- the CV: employer-shaped, print-first ---------- */

.cv-header h1 {
  margin-bottom: 0.25rem;
}

.cv-headline {
  font-size: 1.125rem;
  color: var(--color-muted);
  margin: 0 0 0.75rem;
}

.cv-contact {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin: 0 0 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.cv-contact a {
  color: var(--color-muted);
}

.cv-contact a:hover {
  color: var(--color-accent);
}

.cv-updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-muted);
  margin: 0 0 2rem;
}

.cv-section h2 {
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.35rem;
  margin: 2.25rem 0 1rem;
}

.cv-entry {
  margin: 0 0 1.25rem;
}

.cv-entry h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.15rem;
}

/* Skills are claims with receipts: each links to its story page. */

.cv-skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.cv-skills li {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.cv-skill-years {
  color: var(--color-muted);
}

/* Print: black on white, no chrome, never split an entry. */

@media print {
  :root,
  :root[data-theme="dark"] {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --color-muted: #444444;
    --color-border: #bbbbbb;
    --color-accent: #000000;
    --color-accent-strong: #000000;
  }

  .site-header,
  .site-footer,
  .theme-toggle {
    display: none;
  }

  body {
    font-size: 11pt;
  }

  .cv-entry,
  .cv-section h2 {
    break-inside: avoid;
  }

  .cv a {
    text-decoration: none;
    color: inherit;
  }

  .cv-json-link {
    display: none;
  }
}

/* --- Search (Pagefind, opt-in via `search: "pagefind"`) --------------- */
/* The Pagefind UI colors itself from these bridges to our tokens, so it
   follows both renditions for free. */

.site-search {
  min-width: 14rem;
}

#search {
  --pagefind-ui-primary: var(--color-accent);
  --pagefind-ui-text: var(--color-fg);
  --pagefind-ui-background: var(--color-bg);
  --pagefind-ui-border: var(--color-border);
  --pagefind-ui-tag: var(--color-surface);
  --pagefind-ui-font: var(--font-prose);
}