:root {
  --alessi-color-black: #000;
  --alessi-color-white: #fff;
  --alessi-color-canvas: #f5f5f5;
  --alessi-color-accent: #7ce3ac;
  --alessi-color-copy: #444a46;
  --alessi-color-rule: #dadada;
  --alessi-page-gutter: 15px;
  --alessi-section-space: 60px;
  --alessi-wide: 1440px;
  --alessi-radius: 10px;
  --alessi-ease: cubic-bezier(.44, 0, .56, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
body.alessi-menu-open { overflow: hidden; }
.admin-bar .alessi-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .alessi-header { top: 32px; } }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, textarea, select):focus-visible { outline: 2px solid var(--alessi-color-accent); outline-offset: 4px; }
.alessi-main { min-height: 30vh; }
.alessi-main:empty { display: none; }

@media (min-width: 810px) {
  :root { --alessi-page-gutter: 20px; --alessi-section-space: 80px; }
}
@media (min-width: 1200px) {
  :root { --alessi-page-gutter: 30px; --alessi-section-space: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}