:root {
  --bg: #f4f1ea;
  --panel: #ffffff;
  --ink: #1f2933;
  --muted: #6b7280;
  --accent: #d7a900;
  --accent-ink: #3a2e00;
  --block: #1f2933;
  --cell-border: #b8bcc4;
  --correct: #bfe6c4;
  --incorrect: #f6c6c6;
  --focus-word: #fdeaa8;
  --focus-cell: #f8cf5a;
  font-family: "Georgia", "Iowan Old Style", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

.topbar {
  padding: 14px 20px 0;
  border-bottom: 4px solid var(--ink);
  background: var(--panel);
}

.brand-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px;
}

.brand {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  font-weight: bold;
}

.section-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.section-nav a {
  text-decoration: none;
  font-size: 0.85rem;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--muted);
}

.section-nav a:hover {
  border-color: var(--cell-border);
}

.section-nav a.active {
  background: var(--ink);
  color: var(--panel);
  font-weight: bold;
}

.date-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.date-tabs button {
  border: 1px solid var(--cell-border);
  background: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink);
}

.date-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: bold;
}

.footer {
  text-align: center;
  padding: 14px;
  font-size: 0.75rem;
  color: var(--muted);
}