/* base.css — reset + foundation (system fonts, rust/amber palette, hardcoded) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #f4efe6; color: #211c17; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; border: 0; }
a { color: #b8482a; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0 0 16px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
h1, .h1 { font-size: 34px; }
h2, .h2 { font-size: 26px; }
h3, .h3 { font-size: 20px; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding: 0 0 0 18px; }

.wrapper { position: relative; }
.page { display: block; }

/* technical / lab-notebook accents (no grid background) */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.rule-top { border-top: 1px solid #d8cfc0; }

/* shared section frame */
.categories, .directory, .methodology { padding: 56px 20px; max-width: 1180px; margin: 0 auto; }
.categories-title, .directory-title, .methodology-title { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #b8482a; padding-bottom: 14px; border-bottom: 1px solid #d8cfc0; margin-bottom: 28px; }

@media (min-width: 768px) {
  body { font-size: 17px; }
  h1, .h1 { font-size: 52px; }
  h2, .h2 { font-size: 34px; }
}

/* floating theme toggle (injected by theme.js, present on every page) */
.theme-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #d8cfc0; background: #faf6ef; color: #211c17; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 16px rgba(33,28,23,0.18); }
.theme-toggle:hover { background: #fff; }

/* hub long-form content (category/brand SEO sections above the FAQ) */
.hub-content { max-width: 1180px; margin: 0 auto; padding: 8px 20px 4px; }
.hub-content h2 { font-size: 22px; margin: 32px 0 12px; }
.hub-content h2:first-child { margin-top: 8px; }
.hub-content p { max-width: 74ch; color: #43392f; font-size: 16px; line-height: 1.75; margin: 0 0 16px; }
@media (min-width: 768px) { .hub-content h2 { font-size: 26px; } }

/* split intro header: text left, compact info panel right (fills empty right space on wide screens) */
.head-split { margin-bottom: 4px; }
.head-split .head-main .listing-intro,
.head-split .head-main .compare-intro { max-width: 64ch; }
.head-aside { border: 1px solid #d8cfc0; background: #faf6ef; padding: 20px 20px 14px; margin-top: 20px; }
.head-aside .head-aside-title { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #b8482a; margin: 0 0 12px; }
.head-aside .head-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-top: 1px solid #ece4d7; }
.head-aside .head-stat:first-of-type { border-top: 0; }
.head-aside .head-stat-num { font-size: 22px; font-weight: 800; color: #211c17; }
.head-aside .head-stat-lab { font-size: 13px; color: #6b6157; }
.head-aside .head-step { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #ece4d7; }
.head-aside .head-step:first-of-type { border-top: 0; }
.head-aside .head-step-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #b8482a; flex-shrink: 0; line-height: 1.5; }
.head-aside .head-step-txt { font-size: 14px; line-height: 1.5; color: #43392f; }

@media (min-width: 900px) {
  .head-split { display: grid; grid-template-columns: 1fr 300px; column-gap: 48px; align-items: start; }
  .head-aside { margin-top: 6px; }
}