:root {
  color: #1b241c;
  background: #f6f1e7;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}

body {
  margin: 0;
}

.shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(209, 137, 71, 0.24), transparent 28rem),
    linear-gradient(135deg, #f8f2e7 0%, #e5efdf 54%, #dce8ee 100%);
}

.hero,
.panel {
  margin: 0 auto;
  max-width: 980px;
  padding: 32px;
}

.hero {
  padding-top: 56px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto;
  max-width: 980px;
  padding: 24px 32px 0;
}

a,
button {
  border: 1px solid #20351f;
  border-radius: 999px;
  color: #20351f;
  background: rgba(255, 255, 255, 0.72);
  padding: 9px 14px;
  text-decoration: none;
}

button {
  cursor: pointer;
  font: inherit;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.card,
.notice {
  border: 1px solid rgba(32, 53, 31, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 60px rgba(25, 36, 22, 0.12);
  padding: 20px;
}

.muted {
  color: #536150;
}