:root { --bg: #e4ddc8; --fg: #1d1c17; --dim: #615c4b; --acc: #8a1c1c; --line: #cfc7ad; --card: #ece6d4; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1a17; --fg: #e8e2d0; --dim: #968f78; --acc: #e0a064; --line: #35322a; --card: #23211c; }
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0 auto; max-width: 44rem; padding: 0 1.25rem 5rem; color: var(--fg);
  font: 19px/1.65 system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif; }
a { color: var(--acc); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999rem; }
.skip:focus { left: 1rem; top: 1rem; z-index: 1; padding: .4rem .8rem; background: var(--card); border: 1px solid var(--line); }
nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline; padding: 1.6rem 0 1.1rem; border-bottom: 1px solid var(--line); margin-bottom: 2.4rem; }
nav .me { font-weight: 700; font-size: 1.25rem; margin-right: auto; text-decoration: none; color: var(--fg); letter-spacing: -.01em; }
nav a:not(.me) { font-size: .95rem; text-decoration: none; color: var(--dim); }
nav a:not(.me):hover { color: var(--acc); }
h1 { font-size: 2.4rem; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; text-transform: lowercase; letter-spacing: .06em; color: var(--dim); margin: 2.8rem 0 .8rem; font-weight: 700; }
h2 a { color: inherit; text-decoration: none; }
h2 a:hover { color: var(--acc); }
p { margin: 0 0 1.1rem; }
.hero { display: flex; gap: 2rem; align-items: center; margin-bottom: 1rem; }
.hero img { width: 210px; height: 210px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex: none; }
.hero h1 { font-size: 3.4rem; margin: 0; }
.hero p { margin: .5rem 0 0; font-size: 1.1rem; }
@media (max-width: 34rem) { .hero { flex-direction: column; align-items: flex-start; } .hero img { width: 100%; height: auto; max-height: 340px; } }
ul.posts { list-style: none; margin: 0; padding: 0; }
ul.posts li { display: grid; grid-template-columns: 6.6rem 1fr auto; gap: 1rem; align-items: baseline; padding: .45rem 0; border-top: 1px solid var(--line); }
ul.posts li:last-child { border-bottom: 1px solid var(--line); }
ul.posts time { color: var(--dim); font-size: .85rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
ul.posts a { text-decoration: none; color: var(--fg); }
ul.posts a:hover { color: var(--acc); }
.tag { color: var(--dim); font-size: .85rem; }
ul { padding-left: 1.2rem; }
li { margin: .3rem 0; }
.meta { color: var(--dim); font-size: .9rem; margin: 0 0 1.8rem; }
article img { display: block; max-width: 100%; height: auto; margin: 1.6rem 0; border-radius: 4px; border: 1px solid var(--line); }
code { font: .88em ui-monospace, Menlo, Consolas, monospace; background: var(--card); padding: .1em .35em; border-radius: 3px; }
pre { background: var(--card); padding: .9rem 1rem; overflow-x: auto; border-radius: 4px; }
pre code { background: none; padding: 0; }
.links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }