/* monolito: a dark slab, one accent, big type. For landings and project sites. */
:root {
  --bg: #0e0e10; --panel: #17171a; --fg: #f2f2f0; --muted: #9b9ba1; --line: #2a2a2f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Cantarell, sans-serif;
}
.bar, main, .foot { max-width: 68rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.bar { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mark { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; letter-spacing: .02em; color: var(--fg); text-decoration: none; }
.slab { width: 14px; height: 26px; border-radius: 2px; background: linear-gradient(180deg, var(--fg), color-mix(in srgb, var(--fg) 55%, var(--bg))); box-shadow: 0 0 0 1px var(--line); }
.bar nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: 15px; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--fg); }
main { padding-top: 3rem; padding-bottom: 5rem; }
main > h1:first-child { font-size: clamp(2.6rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -.04em; margin: 0 0 .35em; max-width: 14ch; }
main > h1:first-child + p { font-size: clamp(1.1rem, 2.4vw, 1.45rem); color: var(--muted); max-width: 38rem; margin-bottom: 2.5rem; }
h2 { font-size: 1.6rem; letter-spacing: -.02em; margin-top: 3.5rem; }
h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
a { color: var(--accent); }
p, li { max-width: 44rem; }
img { max-width: 100%; height: auto; border-radius: 10px; }
code { font: .9em ui-monospace, monospace; background: var(--panel); padding: .1em .4em; border-radius: 5px; }
pre { background: var(--panel); padding: 1rem; border-radius: 10px; overflow-x: auto; border: 1px solid var(--line); }
pre code { padding: 0; }
blockquote { margin: 2rem 0; padding: .3rem 1.3rem; border-left: 3px solid var(--accent); color: var(--muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: 3.5rem 0; }

/* cards: wrap a list of blocks in <div class="cards"> ... </div> */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.3rem; position: relative; }
.card::before { content: ""; position: absolute; left: 1.3rem; top: 0; width: 2.2rem; height: 3px; border-radius: 0 0 3px 3px; background: var(--c, var(--accent)); }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.card a { position: absolute; inset: 0; font-size: 0; }
.button { display: inline-block; padding: .7rem 1.2rem; border-radius: 999px; background: var(--accent); color: #111; font-weight: 700; text-decoration: none; }
.button.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }

.post-date { color: var(--muted); font-size: 14px; margin: 0; }
.post-list ul { list-style: none; padding: 0; }
.post-list li { display: flex; gap: 1.2rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.post-list time { color: var(--muted); font: 14px/1.8 ui-monospace, monospace; flex: none; }
.foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }