:root {
  --zn-green: #1f7a3f;
  --zn-ink: #151515;
  --zn-muted: #666;
  --zn-line: #e7e2dd;
  --zn-bg: #faf7f3;
  --zn-card: #fffdf9;
}

body {
  background: var(--zn-bg);
  color: var(--zn-ink);
}

.zn-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 4vw, 56px);
  background: rgba(250, 247, 243, .9);
  border-bottom: 1px solid var(--zn-line);
  backdrop-filter: blur(16px);
}

.zn-brand {
  color: var(--zn-ink);
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
}

.zn-nav, .zn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zn-nav a, .zn-tabs a, .zn-search button {
  color: var(--zn-ink);
  text-decoration: none;
  border: 1px solid var(--zn-line);
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(255,255,255,.64);
}

.zn-tabs a.active, .zn-nav a:hover, .zn-tabs a:hover, .zn-search button {
  background: var(--zn-green);
  color: white;
  border-color: var(--zn-green);
}

.zn-hero {
  min-height: 58vh;
  display: grid;
  align-items: end;
  padding: 110px clamp(18px, 5vw, 72px) 54px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.54)),
    url('/img/backgrounds/1920x1080-bg-01.webp') center/cover;
  color: white;
}

.zn-hero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(48px, 9vw, 132px);
  line-height: .92;
}

.zn-hero p {
  max-width: 680px;
  margin: 18px 0 0;
  font-size: clamp(18px, 2vw, 26px);
}

.zn-kicker, .zn-card-type {
  color: var(--zn-green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.zn-search {
  display: flex;
  gap: 10px;
  max-width: 640px;
  margin-top: 28px;
}

.zn-search.inline {
  margin: 0 0 24px;
}

.zn-search input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--zn-line);
  border-radius: 999px;
  padding: 0 18px;
}

.zn-page {
  padding: 34px clamp(18px, 5vw, 72px) 72px;
}

.zn-section h1, .zn-section h2, .zn-detail h1 {
  margin: 28px 0 20px;
}

.zn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.zn-card {
  min-height: 230px;
  border: 1px solid var(--zn-line);
  border-radius: 8px;
  background: var(--zn-card);
}

.zn-card a {
  display: grid;
  align-content: end;
  height: 100%;
  padding: 22px;
  color: var(--zn-ink);
  text-decoration: none;
}

.zn-card h2 {
  margin: 10px 0;
  font-size: 28px;
  line-height: 1.05;
}

.zn-card p, .zn-detail p {
  color: var(--zn-muted);
}

.zn-detail {
  max-width: 860px;
}

.zn-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.zn-facts div, .zn-admin-json {
  border: 1px solid var(--zn-line);
  border-radius: 8px;
  padding: 16px;
  background: white;
}

.zn-facts dt {
  color: var(--zn-muted);
}

.zn-facts dd {
  margin: 4px 0 0;
  font-weight: 700;
}

.zn-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 28px clamp(18px, 5vw, 72px);
  border-top: 1px solid var(--zn-line);
}

@media (max-width: 700px) {
  .zn-header, .zn-footer, .zn-search {
    flex-direction: column;
    align-items: stretch;
  }
}