/* design-system/layout.css
   .footer, .slide-header, .grid-*, .rule, .tag, .dot */

/* ============ Footer ============ */
.footer {
  position: absolute;
  left: 88px;
  right: 88px;
  bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.slide.dark .footer { color: #8A8A84; }
.slide.accent .footer { color: rgba(10,10,10,0.55); }
.footer .brand { font-weight: 600; color: var(--ink); }
.slide.dark .footer .brand { color: var(--bg); }
.footer .num { font-weight: 600; }

/* ============ Header (deck-wide) ============ */
.slide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 48px;
}
.slide-header .chip {
  white-space: nowrap;
  display: inline-block;
  padding: 6px 14px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.slide.dark .slide-header .chip { background: var(--accent); color: var(--ink); }
.slide.accent .slide-header .chip { background: var(--ink); color: var(--accent); }

/* ============ Utility ============ */
.rule { height: 1px; background: var(--ink); opacity: 0.15; }
.rule-heavy { height: 2px; background: var(--ink); }
.slide.dark .rule, .slide.dark .rule-heavy { background: #fff; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: transparent;
}
.tag.accent { background: var(--accent); border-color: var(--accent); }
.tag.dark { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.dot { display:inline-block; width: 10px; height:10px; border-radius: 50%; background: var(--ink); }
.dot.accent { background: var(--accent); border: 1px solid var(--ink); }
.dot.green { background: #2DBE7B; }
.dot.amber { background: #F5B800; }
.dot.red { background: #E24A3F; }

/* ============ Grids ============ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }