/* devankahq.com additions on top of the shared design system. Keep this file small. */
main:focus { outline: none; }
.split h3 { font-size: var(--fs-md); }
.split p { max-width: var(--measure); }
.page-head .callout { max-width: 52ch; }

/* Brand marks from the brand repo: colour on light, reversed on dark, following the same theme rules as tokens.css.
   Header lockups are about 1.13px per grid unit (Devanka 140px, Ankasum 150px wide), above the BRAND.md minimums of 120px and 130px;
   clear space (8u, about 9px) is covered by the header padding and the gap to the nav. */
.wordmark { display: inline-flex; align-items: baseline; }
.wordmark img, .footer-mark img { height: auto; }
.wordmark__by { margin-left: var(--s-3); }
.footer-mark { display: inline-flex; align-items: center; gap: var(--s-2); }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark { display: block; }
}
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }

/* Contact us: the one outlined item in the header nav. Opens the hosted form in a new tab. */
.site-nav a.nav-cta {
  padding-inline: var(--s-3);
  border: var(--hair) solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent-text);
  font-weight: var(--fw-medium);
}
.site-nav a.nav-cta:visited { color: var(--accent-text); }
.site-nav a.nav-cta:hover { background: var(--accent); color: var(--bg); text-decoration: none; }