/* ===========================================================================
   BASE STYLES: the only engine rules the 30 site themes still rely on
   (measured with Chrome CSS coverage on 559 pages at 1280 and 375 px, 2026-11-09).
   Each site's look comes from its own themes/<name>.css. The full former
   stylesheet is kept as style.css for reference only.
   =========================================================================== */

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img,svg { max-width: 100%; }
p { margin: 0 0 1rem; }

.main { padding: 28px 0 56px; min-height: 60vh; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus { left:0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* Header and navigation (a few sites keep the engine header markup) */
.site-header {
  position: sticky; top:0; z-index: 40;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display:flex; align-items:center; gap:16px; height:64px; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--brand); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.brand:hover { text-decoration:none; }
.brand__name { color: var(--ink); }
.primary-nav { margin-left:auto; display:flex; align-items:center; gap:4px; }
.primary-nav a {
  color: var(--ink-soft); font-weight:600; font-size:.95rem;
  padding:.5em .85em; border-radius: var(--radius-pill); transition:.16s;
}
.primary-nav a:hover { background: var(--brand-soft); color: var(--brand-700); text-decoration:none; }
.nav-toggle { display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; transition:.2s; }

.site-footer { border-top:1px solid var(--border); background: var(--surface); margin-top: 48px; }

@media (max-width: 680px) {
  .nav-toggle { display:block; }
  .primary-nav {
    position:absolute; top:64px; left:0; right:0; margin:0; flex-direction:column; align-items:stretch;
    background: var(--surface); border-bottom:1px solid var(--border); padding:10px; gap:2px;
    box-shadow: var(--shadow); display:none;
  }
  .primary-nav.is-open { display:flex; }
  .primary-nav a { padding:.8em 1em; border-radius:10px; }
}