/* ai-4-construction.com — a reference handbook: white pages, Source Serif
   headings, numbered sections, a blue left sidebar of contents. */
:root {
  --bg: #ffffff;
  --surface: #f3f6fa;
  --ink: #18212f;
  --muted: #586274;
  --line: #e0e6ee;
  --accent: #1f5fbf;
  --accent-ink: #ffffff;
  --accent-soft: #edf3fc;
  --head: "Source Serif 4", Georgia, serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  --radius: 6px;
}
body { font-size: 18px; }
.edition { background: var(--surface); }
.top { border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }
.brand::before { content: ""; width: 22px; height: 22px; border-radius: 5px; background: var(--accent); box-shadow: inset -7px -7px 0 rgba(255, 255, 255, 0.28); }
.brand small { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--muted); border-left: 1px solid var(--line); padding-left: 10px; }
h1 { font-weight: 700; font-size: clamp(34px, 4vw, 48px); }
h2 { font-weight: 600; }
.content { counter-reset: sec; }
.content > section > h2::before { counter-increment: sec; content: counter(sec) ". "; color: var(--accent); }
.content > #list > h2::before, .content > .faq > h2::before, .content > .sources > h2::before, .content > .next > h2::before { content: none; }
.kicker { font-family: var(--body); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.answer { background: var(--accent-soft); border: 1px solid #d3e1f5; border-radius: var(--radius); padding: 18px 22px; }
.answer-label { color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.answer-text { font-size: 19px; }
.ranked .rank { font-weight: 600; color: var(--accent); }
.toc { background: var(--surface); border: 0; border-radius: var(--radius); padding: 14px 18px; }
dl.terms { columns: 2; column-gap: 40px; }
dl.terms dt { break-after: avoid; }
dl.terms dd { break-inside: avoid; margin-bottom: 8px; }
.side { padding-right: 8px; border-right: 1px solid var(--line); }
.pickcard { background: var(--surface); border-color: #d3e1f5; }
.foot { background: var(--surface); }
@media (max-width: 880px) {
  .side { border-right: 0; padding-right: 0; }
  dl.terms { columns: 1; }
}