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

html {
  font-family: var(--font-sans);
  color: var(--color-cream);
  background: var(--color-ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

body { overflow-x: hidden; min-height: 100vh; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section__head { margin-bottom: 2.5rem; max-width: 42rem; }
.section__head p { color: var(--color-muted); margin-top: 1.1rem; }

.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--fill { fill: currentColor; stroke: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--color-gold); color: #000; padding: 0.6rem 1rem; border-radius: var(--radius-btn); z-index: 100; }
.skip-link:focus { top: 1rem; }

/* Red brush-stroke label, the signature element from the flyers */
.brush { position: relative; display: inline-block; isolation: isolate; padding: 0.3em 1.5em 0.3em 0.8em; color: var(--color-white); }
.brush::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-red);
  clip-path: polygon(0 10%, 3% 0, 38% 7%, 70% 0, 95% 6%, 100% 32%, 97% 56%, 100% 82%, 94% 100%, 60% 93%, 28% 100%, 2% 93%, 0 70%, 2% 40%);
  transform: skewX(-8deg);
}
h2.brush, h3.brush { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3.brush { font-size: clamp(1.4rem, 3vw, 1.9rem); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}