:root { --pink: #cb2e75; --blush: #f5e6e0; --ink: #333; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--blush); color: var(--ink); font-family: "Trebuchet MS", Arial, sans-serif; }
.site-shell { width: min(960px, calc(100% - 32px)); margin: 0 auto; background: #fff; min-height: 100vh; }
.site-header { padding: 34px 28px 24px; text-align: center; border-bottom: 1px solid var(--blush); }
.portrait { width: 155px; height: 155px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 15px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.5rem); letter-spacing: .02em; }
.site-header p { margin: 9px auto 0; max-width: 650px; color: #666; font-size: .78rem; letter-spacing: .08em; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-bottom: 1px solid var(--blush); }
nav a { padding: 15px 12px; color: #444; font-size: .78rem; font-weight: bold; text-decoration: none; text-transform: uppercase; }
a { color: var(--pink); } nav a:hover, nav a:focus { background: #faedf3; color: var(--pink); }
.posts { padding: 22px 28px 12px; }
article { display: grid; grid-template-columns: 155px 1fr; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--blush); }
article > a { align-self: start; } article img { width: 155px; height: 110px; object-fit: cover; display: block; }
h2 { font-size: 1.25rem; margin: -3px 0 9px; line-height: 1.15; } h2 a { text-decoration: none; }
article p { margin: 0 0 11px; line-height: 1.5; font-size: .94rem; } time { color: #777; font-size: .75rem; }
.archive-note { margin: 0; padding: 22px 28px 32px; color: #777; font-size: .78rem; text-align: center; }
.all-posts { margin: 10px 28px 0; text-align: center; }
.all-posts a { display: inline-block; padding: 10px 15px; border: 1px solid var(--pink); text-decoration: none; font-weight: bold; }
.all-posts a:hover { background: var(--pink); color: #fff; }
.back { margin: 24px 28px 0; }.archive-list { padding: 10px 28px 34px; }.archive-list ol { padding-left: 24px; columns: 2; column-gap: 48px; }.archive-list li { break-inside: avoid; margin: 0 0 9px; font-size: .88rem; line-height: 1.35; }.archive-list a { text-decoration: none; }
@media (max-width: 550px) { .site-shell { width: 100%; } .site-header { padding-top: 24px; } .posts { padding: 12px 18px; } article { grid-template-columns: 110px 1fr; gap: 14px; } article img { width: 110px; height: 79px; } h2 { font-size: 1.05rem; } article p { font-size: .86rem; } nav a { padding: 11px 8px; font-size: .68rem; } }
@media (max-width: 700px) { .archive-list ol { columns: 1; } }