body { font-family: system-ui, sans-serif; margin:0; padding:0; line-height:1.5; }
body.dark { background:#181818; color:#f5f5f5; }
::selection { background:#444; color:#fff; }
a { color:#fff; text-decoration:none; }
a:hover { text-decoration:underline; }

.site-header { padding:1.5rem clamp(1rem,4vw,3rem); text-align:center; }
.site-title { font-size:1.25rem; font-weight:600; letter-spacing:0.05em; margin:0; display:inline-block; }
.site-title a { color:#fff; }

.shell { display:flex; flex-direction:row; align-items:stretch; justify-content:center; gap:3rem; width:100%; box-sizing:border-box; padding:0 clamp(1rem,4vw,4rem) 4rem; }

#reader { flex:0 1 640px; max-width:640px; padding-top:2rem; }
#reader h1,#reader h2,#reader h3 { font-weight:600; }
#reader p { margin:0 0 1rem; }

.reading-list { flex:0 0 320px; max-height:calc(100vh - 6rem); overflow-y:auto; padding-top:2rem; position:sticky; top:0; }
.reading-list h2 { font-size:0.9rem; font-weight:700; letter-spacing:0.02em; margin:0 0 1rem; opacity:0.7; }
.reading-list ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.35rem; }
.reading-list li a { display:block; padding:0.4rem 0.2rem; font-size:0.95rem; line-height:1.2; border-left:2px solid transparent; }
.reading-list li.active a { border-left-color:#fff; font-weight:600; }
.reading-list li a:focus-visible { outline:2px solid #666; outline-offset:2px; }

.post-meta { color:#999; font-size:0.75rem; letter-spacing:0.02em; margin:0 0 1.5rem; }

@media (max-width:1100px) {
	.shell { flex-direction:column-reverse; padding:0 1.25rem 3rem; }
	.reading-list { position:relative; max-height:none; padding-top:0; }
	.reading-list h2 { margin-top:2rem; }
	#reader { padding-top:0; }
}

@media (prefers-color-scheme: light) {
	body.dark { background:#111; color:#f0f0f0; }
}