/* Bozza B — Sorgente. Tutto in mono, il Markdown resta visibile: i segni (#, -, >) restano in grigio. */

@font-face { font-family: "Commit Mono"; src: url("/fonts/commit-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Commit Mono"; src: url("/fonts/commit-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: oklch(0.16 0.006 75);
  --text: oklch(0.86 0.012 80);
  --strong: oklch(0.96 0.01 85);
  --muted: oklch(0.60 0.012 75);
  --faint: oklch(0.40 0.01 75);
  --rule: oklch(0.28 0.008 75);
  --accent: oklch(0.80 0.12 72);
  --mono: "Commit Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scrollbar-color: var(--rule) var(--bg); }
body { margin: 0; color: var(--text); font: 400 15px/1.75 var(--mono); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--bg); }
* { caret-color: var(--accent); }

main { max-width: 68ch; margin: 0 auto; padding: 4rem 1.25rem 4rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* i segni del markdown, visibili ma spenti */
.mk { color: var(--faint); user-select: none; }

/* barra in cima: dove sei a sinistra, le sezioni a destra */
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 3ch; margin: 0 0 3.5rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); }
.crumb { margin: 0; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--strong); }
.crumb [aria-current] { color: var(--strong); }
.sep { color: var(--faint); margin: 0 1ch; }
.bar nav { display: flex; flex-wrap: wrap; gap: 0 2.5ch; }
.bar nav a[aria-current] { color: var(--strong); }

h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: 700; color: var(--strong); margin: 0; }
h1 { margin-bottom: 0.25rem; text-wrap: balance; }
h2 { margin: 2.5rem 0 0.75rem; }
h3, h4, h5, h6 { margin: 2rem 0 0.5rem; }
p { margin: 0 0 1.1rem; }
strong { color: var(--strong); font-weight: 700; }

ul { list-style: none; margin: 0 0 1.1rem; padding: 0; }
ul.md li { padding-left: 2ch; text-indent: -2ch; }
ol.md { list-style: none; margin: 0 0 1.1rem; padding: 0; }
ol.md li { padding-left: 3ch; text-indent: -3ch; }
.md li > * + * { text-indent: 0; }
input[type=checkbox] { accent-color: var(--accent); margin: 0 1ch 0 0; vertical-align: -0.1em; }
em { font-style: normal; color: var(--strong); }

.dim { color: var(--muted); }

/* home */
.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--accent); vertical-align: -0.18em; margin-left: 0.15em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* lista writing */
.posts li { display: grid; grid-template-columns: 8ch 1fr; gap: 1ch; padding: 0.15rem 0; }
.posts .tags { grid-column: 2; font-size: 0.875em; line-height: 1.5; margin-bottom: 0.45rem; }
.tags a { color: var(--muted); margin-right: 1ch; white-space: nowrap; }
.tags a:hover { color: var(--accent); }

/* articolo */
.meta { color: var(--muted); margin-bottom: 2.25rem; }
code { color: var(--strong); }
pre { margin: 0 0 1.2rem; padding: 0; overflow-x: auto; color: var(--strong); line-height: 1.6; }
pre .mk { display: block; }
blockquote { margin: 0 0 1.1rem; color: var(--muted); padding-left: 2ch; text-indent: -2ch; }
blockquote > p:last-child, li > p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; vertical-align: middle; }
figure img { display: block; margin: 1.5rem 0 0.4rem; }
figure { margin: 0 0 1.2rem; }
figcaption { color: var(--muted); font-size: 0.875em; }
table { border-collapse: collapse; margin: 0 0 1.2rem; font-variant-numeric: tabular-nums; display: block; overflow-x: auto; }
th { color: var(--strong); font-weight: 700; text-align: left; border-bottom: 1px solid var(--rule); }
th, td { padding: 0.15rem 3ch 0.15rem 0; vertical-align: top; }

hr { border: 0; margin: 2.5rem 0; height: 1.75em; }
hr::before { content: "---"; color: var(--faint); }

footer { margin-top: 3.5rem; color: var(--muted); }

@media (max-width: 30rem) {
  body { font-size: 14px; }
  main { padding-top: 2.5rem; }
  .posts li { grid-template-columns: 1fr; gap: 0; }
  .bar { margin-bottom: 2.5rem; }
  .posts .tags { grid-column: 1; margin-bottom: 0.6rem; }
}