:root { --background: #07182c; --sidebar: #0d2643; --text: #f7f3e8; --muted: #c4d1e0; --line: #3a5471; --link: #b9dbff; } * { box-sizing: border-box; } body { margin: 0; background: var(--background); color: var(--text); font: 16px/1.5 system-ui, sans-serif; } .shell { min-height: 100vh; display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); } aside { padding: 2rem 1.5rem; background: var(--sidebar); border-right: 1px solid var(--line); } .brand, h1, h2 { font-family: Georgia, serif; } .brand { font-weight: 700; } .tagline, small, time, footer, .about { color: var(--muted); font-size: .82rem; } nav a, footer a { color: var(--link); text-decoration: none; padding: .2rem 0; } nav a { display: block; } nav a:hover, footer a:hover { text-decoration: underline; } nav h2, .about h2 { margin-top: 1.7rem; font: .68rem system-ui; letter-spacing: .12em; text-transform: uppercase; } main { max-width: 53rem; padding: 4.5rem clamp(2rem, 8vw, 7rem) 1.5rem; } h1 { font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1; } .feed { border-top: 1px solid var(--line); } .feed-entry { padding: 1.8rem 0; border-bottom: 1px solid var(--line); } .feed-entry h2 { font-size: 2rem; margin: .35rem 0; } .feed-entry h2 a { color: var(--text); text-decoration: none; } footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--line); } @media (max-width: 44rem) { .shell { grid-template-columns: 1fr; } aside { border-right: 0; border-bottom: 1px solid var(--line); } main { padding-top: 3rem; } }