/* ══════════════════════════════════════════════════════════════════════════════════
   MESAscale · one set of grounds (every page except the home page and the Growth Diagnostic, which carry no data-theme attribute)
   Dark: the page is black (#000); anything raised (a sheet, a card) is #111 with a hairline edge; the nav is black glass over it; the footer is
   black. The old obsidian (#0f1011) that some pages still carried is gone, so there is one black, not four.
   Light: the page is white; anything raised is #f4f4f6; the footer is #f4f4f6.
   The closing lead form (theme/lead.css) takes the page ground in both themes, so it flows out of the page and into the footer.
   ══════════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] { background-color: #000; }
html[data-theme="dark"] body { background-color: #000; }
html[data-theme="dark"] nav.nav { background: rgba(0, 0, 0, .94); }   /* near-solid: over the light case-study pages a thinner glass read as grey */
html[data-theme="dark"] footer.site-footer, html[data-theme="dark"] footer.site-footer.sf-footer-v2 { background: #000 !important; }

/* one film grain over the whole page, so every section carries the same texture and no section's black or white is lifted on its own
   (a grain laid on a single section brightened it: the lead form read as #131313 on a #000 page). Fixed, static, ignored by the pointer. */
html[data-theme]::after { content: ''; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; background: url("/theme/grain-film.webp") 0 0 / 154px repeat; opacity: .045; }
html[data-theme="light"]::after { opacity: .028; }
@media print { html[data-theme]::after { display: none; } }

/* the footer's small print on black: the copyright line (40% white on the case studies, 3.7:1) and the badge's 8px "Premier" (38%, 3.4:1) clear AA */
html[data-theme="dark"] .sf-footer-v2 .sf-copy-line { color: #808080; }
html[data-theme="dark"] .sfb-premier-em { color: #8c8c8c; }