/* ─────────────────────────────────────────────────────────
   case-study.css — components specific to case study pages

   Linked from gist.html, moye.html, beauty-forward.html (engineering
   shape) and waeve.html (founder shape), AFTER site.css. Owns only
   the components that are case-study-specific:

   - .stack        inline mono middle-dot stack list (Architecture)
   - .decisions    vertical list of technical decisions with kicker,
                   title, body paragraphs
   - code, .path   inline mono chips for code identifiers and
                   file:line references

   Anything reused outside case studies (hero, section-head, list,
   tag, links, footer reach/stamp) lives in site.css.
   ───────────────────────────────────────────────────────── */

/* ── stack list (Architecture section) ─────────────────── */

.stack {
  list-style: none;
  margin: 0 0 24px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.stack li {
  display: inline;
}

.stack li:not(:last-child)::after {
  content: " ·";
  margin-left: 16px;
  color: var(--border-strong);
}

/* ── decisions list (Technical decisions section) ──────── */

.decisions {
  list-style: none;
  margin-top: 16px;
  counter-reset: decision-counter;
}

.decisions > li {
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  counter-increment: decision-counter;
}

.decisions > li:last-child {
  border-bottom: none;
}

.decisions > li::before {
  content: "[ " counter(decision-counter, decimal-leading-zero) " ]";
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--tag-amber);
  margin-bottom: 8px;
}

.decision-title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
  margin-bottom: 12px;
  line-height: 1.2;
}

.decision-why {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}

/* ── inline mono chips: code identifiers + file:line refs ── */

code,
.path {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface-alt);
  color: var(--ink);
  white-space: nowrap;
}

.path {
  color: var(--tag-amber);
}

/* ── case study body paragraphs ────────────────────────── */

/* Body text inside section-content blocks. Slightly tighter than
   the hero lede; this is dense engineering prose. */
.case-body p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 62ch;
}

.case-body p:last-child {
  margin-bottom: 0;
}

.case-body strong {
  color: var(--ink-strong);
  font-weight: 600;
}

.case-body em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05em;
}