:root {
  --graphite: #4A4A4A;
  --taupe: #B8AFA6;
  --paper: #FAF8F6;
  --radius-sm: 18px;
  --radius-lg: 30px;
  --border: 1px solid rgba(74,74,74,0.12);
  --shadow-glass: 0 8px 32px rgba(74,74,74,0.10);
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}
body { font-family: var(--font-body); color: var(--graphite); background: var(--paper); margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); }
.glass { background: rgba(255,255,255,0.6); backdrop-filter: blur(12px); border-radius: var(--radius-lg); border: var(--border); box-shadow: var(--shadow-glass); }
.btn { border-radius: var(--radius-sm); padding: 12px 24px; border: none; background: var(--graphite); color: #fff; font-family: var(--font-body); }
.btn.secondary { background: transparent; color: var(--graphite); border: var(--border); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Stevark diamond mark — shared by header.php and footer.php. Lives here
   (not in header.php) because theme.css is the one file every page is
   guaranteed to link, regardless of include order. */
.stevark-logo-icon { width: 1.95em; height: 1.95em; flex-shrink: 0; font-size: 20px; }
.stevark-logo-icon rect { fill: none; stroke: currentColor; stroke-width: 0.115em; vector-effect: non-scaling-stroke; }
.stevark-logo-icon .icon-wave path { fill: currentColor; stroke: currentColor; stroke-width: 0.05em; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stevark-logo-icon--sm { font-size: 13px; }

/* footer.php layout — kept here rather than in header.php's <style> for
   the same reason as the logo rules above. */
.site-footer { border-top: var(--border); background: var(--paper); margin-top: 40px; }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 24px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; }
.site-footer__contacts { display: flex; flex-wrap: wrap; gap: 6px 20px; font-family: var(--font-body); }
.site-footer__contacts a { color: var(--graphite); text-decoration: none; }
.site-footer__copyright { width: 100%; margin: 0; color: var(--taupe); font-size: 14px; font-family: var(--font-body); }