/* ── Tokens ── */
:root {
  --c-primary: #3D7D17;
  --c-primary-active: #2C5E0F;
  --c-canvas: #faf9f5;
  --c-surface-soft: #f2efe6;
  --c-surface-card: #ece7db;
  --c-ink: #141413;
  --c-body: #4a4842;
  --c-muted: #8e8b82;
  --c-hairline: #e2dccf;
  --font-display: "Copernicus", "Tiempos Headline", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-body: "StyreneB", "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* ── Section + grid ──
   One section = one grid row band. `--cols` and `--span` are written as
   inline styles by the renderer, which is what makes the layout fully
   author-controlled without generating a stylesheet per page. */
.sec { padding: var(--pad) 0; }
.sec-inner { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
/* The section is `--tracks` equal parts wide; each column takes `--span` of
   them, so widths are relative and always add up. */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(var(--tracks), minmax(0, 1fr));
  gap: var(--gap);
  align-items: var(--align);
}
/* Each column is its own vertical stack, so any number of blocks can sit
   above one another within a single column. */
.col {
  grid-column: span min(var(--span), var(--tracks));
  display: flex; flex-direction: column; gap: 20px; min-width: 0;
}
.blk { min-width: 0; }
/* A "columns" block is the same grid again, one level down — it inherits
   nothing but its own --tracks/--gap/--align, so nesting needs no extra CSS. */
.blk-columns { width: 100%; }

.sec.bg-soft { background: var(--c-surface-soft); }
.sec.bg-card .sec-inner {
  background: var(--c-surface-card);
  border-radius: 26px;
  padding: 48px 40px;
}

@media (max-width: 860px) {
  .sec-grid { grid-template-columns: 1fr; }
  .col { grid-column: 1 / -1; }
  .sec-inner { padding: 0 22px; }
}

/* ── Blocks ── */
.blk-heading {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  color: var(--c-ink);
}
.blk-heading.lvl-1 { font-size: clamp(36px, 5.2vw, 60px); letter-spacing: -0.035em; }
.blk-heading.lvl-2 { font-size: clamp(27px, 3.4vw, 40px); }
.blk-heading.lvl-3 { font-size: clamp(20px, 2.2vw, 25px); }

.blk-text { color: var(--c-body); line-height: 1.65; }
.blk-text p { margin: 0 0 1em; }
.blk-text p:last-child { margin-bottom: 0; }
.blk-text a { color: var(--c-primary); }

.blk-image {
  margin: 0;
  overflow: hidden;
  background: var(--c-surface-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blk-image img { width: 100%; height: 100%; }
.blk-image-empty { color: var(--c-muted); font-size: 13px; letter-spacing: .04em; }

.blk-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.blk-list li { color: var(--c-body); }
.blk-list.style-check, .blk-list.style-bullet { list-style: none; }
.blk-list.style-check li, .blk-list.style-bullet li { position: relative; padding-left: 30px; }
.blk-list.style-check li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(-45deg);
}
.blk-list.style-bullet li::before {
  content: "";
  position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-primary);
}
.blk-list.style-number { padding-left: 22px; }
.blk-list.style-number li { padding-left: 6px; }

.blk-card { display: flex; flex-direction: column; gap: 10px; }
.blk-card .card-img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 12px; margin-bottom: 4px; }
.blk-card .card-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(19px, 2.1vw, 24px); letter-spacing: -.015em;
  line-height: 1.15; margin: 0; color: var(--c-ink);
}
.blk-card .card-body { color: var(--c-body); font-size: 15.5px; line-height: 1.6; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; text-decoration: none;
  padding: 13px 26px; border-radius: 999px;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-primary { background: var(--c-ink); color: var(--c-canvas); border: 1px solid var(--c-ink); }
.btn-primary:hover { background: var(--c-primary); border-color: var(--c-primary); }
.btn-ghost { border: 1px solid var(--c-hairline); color: var(--c-ink); }
.btn-ghost:hover { border-color: var(--c-ink); }

.page-empty { text-align: center; color: var(--c-muted); padding: 80px 20px; }