:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 52rem; padding: 2.5rem 1.25rem 4rem; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #1a1a1a; background: #fff; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .25rem; }
header p { margin: 0; color: #555; max-width: 38rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 3rem 0 0; padding-bottom: .5rem; border-bottom: 1px solid #1a1a1a; }
article { display: grid; grid-template-columns: 11rem 1fr; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid #e5e5e5; }
h3 { font-size: 1rem; font-weight: 600; margin: 0; }
article p { margin: 0; }
.pic { display: block; }
.pic img { display: block; width: 100%; height: 7.5rem; object-fit: contain; }
.meta { color: #666; font-size: .875rem; }
.note { color: #666; font-size: .875rem; }
.links { margin-top: .375rem; display: flex; flex-wrap: wrap; gap: 0 .875rem; }
a { color: #0645ad; text-underline-offset: 2px; }
footer { margin-top: 2rem; font-size: .875rem; }
@media (max-width: 34rem) { article { grid-template-columns: 6.5rem 1fr; gap: .875rem; } .pic img { height: 5rem; } .pic.none { display: block; } }