/* amo-constanta — base / reset / typography */

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--color-cream-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.5;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0 0 var(--space-3);
  line-height: 1.05;
  color: var(--color-ink);
}
h1{ font-size: var(--text-hero); line-height: .95; }
h2{ font-size: var(--text-4xl); }
h3{ font-size: var(--text-xl); }
h4{ font-size: var(--text-lg); }

p{ margin: 0 0 var(--space-4); }

a{ color: var(--color-accent); text-decoration: none; }
a:hover{ color: var(--color-accent-hover); }

img{ display: block; max-width: 100%; height: auto; }

button, input, select, textarea{ font-family: inherit; }

:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}
.screen-reader-text:focus{
  position: fixed !important;
  top: var(--space-2); left: var(--space-2);
  width: auto; height: auto;
  background: var(--color-ink);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 100000;
  clip: auto;
}

/* container */
.amo-container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  position: relative;
  background: var(--color-cream);
}
@media (max-width: 1023px){
  .amo-container{ --container-pad: var(--space-6); }
}
@media (max-width: 767px){
  .amo-container{ --container-pad: var(--space-4); }
}

.amo-skip-link{ position: relative; z-index: 1000; }

.amo-visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}