:root{
  --ss-bg: #F2F2F5;
  --ss-fg: #2B2F36;
  --ss-accent: #7BA0A8;
  --ss-accent-2: #B192A6;
  --ss-muted: #C9D3D7;

  --radius: 12px;
  --space: 1rem;
  --font: "Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing: border-box; }
body{
  margin:0; background:var(--ss-bg); color:var(--ss-fg); font-family:var(--font); line-height:1.6;
}
.container{ max-width: 960px; margin: 0 auto; padding: 0 var(--space); }

.site-header, .site-footer{
  background: white; border-bottom: 1px solid var(--ss-muted);
}
.site-header .brand{
  font-weight: 700; text-decoration: none; color: var(--ss-fg); padding: 0.75rem 0; display:inline-block;
}
.site-header nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; }
.site-header a{ color: var(--ss-accent); text-decoration: none; }
.site-header a:focus, .site-header a:hover{ text-decoration: underline; }

h1,h2{ line-height:1.25; }
.card{
  background:white; border:1px solid var(--ss-muted); border-radius: var(--radius);
  padding: var(--space); margin: var(--space) 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
label{ display:block; margin-top:.5rem; }
input, textarea{
  width:100%; padding:.75rem; border-radius:10px; border:1px solid var(--ss-muted); background:#fff;
}
button{
  margin-top: .75rem; padding:.75rem 1rem; border:0; border-radius:10px;
  background: var(--ss-accent); color:white; font-weight:600; cursor:pointer;
}
button:hover{ filter: brightness(0.95); }

.posts article + article{ margin-top: var(--space); }