:root {
  --bg: #f8f7f3;
  --bg-soft: #fdfcf9;
  --text: #2a2a2a;
  --muted: #6d6a63;
  --line: #e8e3d8;
  --accent: #8c9c8f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg-soft) 88%, white 12%);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { font-weight: 600; letter-spacing: 0.04em; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.menu a {
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .9rem;
}
.menu a:hover { color: var(--text); background: #fff; }

.sections { max-width: 860px; margin: 0 auto; padding: 1rem; }
.content-section {
  margin: 1.1rem 0;
  padding: 1.2rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 12px;
}
.content-section h2 { margin-top: 0; font-weight: 550; }

.item { margin: .55rem 0; }
.quote {
  border-left: 3px solid var(--accent);
  margin: .75rem 0;
  padding: .25rem 0 .25rem .8rem;
  color: #494842;
}
img { max-width: 100%; border-radius: 8px; display: block; }

a.inline-link { color: #4c6753; }
.loading, .error { color: var(--muted); padding: 2rem .4rem; }

.admin-link { text-decoration: none; color: #4c6753; border: 1px solid var(--line); padding: .35rem .7rem; border-radius: 999px; }