*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Verdana,sans-serif;background:#c8ddd0;color:#243028;line-height:1.75}
.hexes{max-width:720px;margin:0 auto;padding:16px;display:flex;flex-wrap:wrap;gap:8px}
.hexes a{width:88px;height:76px;background:#6aaa78;color:#fff;text-decoration:none;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;text-align:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hexes a.active{background:#2a6a40}
.brand{display:block;text-align:center;padding:12px;text-decoration:none;color:#2a6a40;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;font-weight:800}
article{max-width:640px;margin:0 auto;padding:8px 16px 40px;background:#eef6f0}
h1{font-size:1.9rem;margin:12px 0}
p{color:#4a6050;margin:0 0 12px}