:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #07150f; color: #f5f7f6; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.app-header, .app-footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.25rem clamp(1rem, 4vw, 4rem); border-color: #784578; }
.app-header { border-bottom: 1px solid; }
.app-footer { border-top: 1px solid; color: #afc8ba; }
.brand, nav a { text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
main { width: min(1100px, calc(100% - 2rem)); min-height: 76vh; margin: 0 auto; padding: 4rem 0; }
h1 { font: 700 clamp(2.5rem, 7vw, 5rem)/1 Georgia, serif; margin: .4rem 0 1.5rem; }
.eyebrow { color: #e45cd4; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
article { padding: 1.5rem; border: 1px solid #315e47; border-radius: 1rem; background: #0d2419; }