/* Aljaž Hamberger / CGP 1.1 / Source: CGP.md
   Keep fonts/ relative to this file, or adapt paths when integrating. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('./fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --ah-green: #6fbf44;
  --ah-green-dark: #2e7d32;
  --ah-background: #0b0f0b;
  --ah-gray: #a7a7a7;
  --ah-white: #ffffff;
  --ah-border: rgb(255 255 255 / 16%);
  --ah-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --ah-font-body: 'Montserrat', Arial, sans-serif;
  --ah-space-1: 8px;
  --ah-space-2: 16px;
  --ah-space-3: 24px;
  --ah-space-4: 32px;
  --ah-space-6: 48px;
  --ah-space-8: 64px;
  --ah-space-12: 96px;
  --ah-content-max: 1200px;
  --ah-gutter: 20px;
  --ah-grid-gap: 16px;
  --ah-section-space: 64px;
  --ah-radius: 4px;
  --ah-h1: clamp(40px, 5.6vw, 80px);
  --ah-h2: clamp(32px, 3.5vw, 48px);
  --ah-h3: clamp(26px, 2.4vw, 32px);
  --ah-body: 16px;
  --ah-leading-display: 1.05;
  --ah-leading-body: 1.6;
  --ah-tracking-display: 0.01em;
  --ah-tracking-slogan: 0.18em;
  --ah-transition: 160ms ease;
  --ah-focus-color: var(--ah-white);
}
.ah-brand {
  background: var(--ah-background);
  color: var(--ah-white);
  font: 400 var(--ah-body)/var(--ah-leading-body) var(--ah-font-body);
}
.ah-container {
  width: min(calc(100% - 2 * var(--ah-gutter)), var(--ah-content-max));
  margin-inline: auto;
}
.ah-section { padding-block: var(--ah-section-space); }
.ah-display {
  font-family: var(--ah-font-display);
  font-weight: 400;
  line-height: var(--ah-leading-display);
  letter-spacing: var(--ah-tracking-display);
  text-transform: uppercase;
}
.ah-h1 { font-size: var(--ah-h1); }
.ah-h2 { font-size: var(--ah-h2); }
.ah-h3 { font-size: var(--ah-h3); }
.ah-copy { max-width: 65ch; }
.ah-muted { color: var(--ah-gray); }
.ah-slogan {
  font-weight: 500;
  letter-spacing: var(--ah-tracking-slogan);
  text-transform: uppercase;
}
.ah-brand a:not(.ah-button) {
  color: var(--ah-green);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.ah-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--ah-radius);
  background: var(--ah-green);
  color: var(--ah-background);
  font: 600 16px/1.4 var(--ah-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ah-transition), color var(--ah-transition);
}
.ah-button--secondary {
  background: transparent;
  border-color: var(--ah-white);
  color: var(--ah-white);
}
@media (hover: hover) {
  .ah-button:hover { background: var(--ah-white); color: var(--ah-background); }
}
.ah-brand :focus-visible {
  outline: 2px solid var(--ah-focus-color);
  outline-offset: 3px;
}
/* Set on any light section to keep focus visible. */
.ah-light {
  --ah-focus-color: var(--ah-background);
  background: var(--ah-white);
  color: var(--ah-background);
}
.ah-light a:not(.ah-button) { color: var(--ah-green-dark); }
.ah-light .ah-muted { color: var(--ah-background); }
.ah-light .ah-button--secondary { color: var(--ah-background); border-color: var(--ah-background); }
@media (min-width: 768px) {
  :root { --ah-gutter: 32px; --ah-grid-gap: 24px; --ah-section-space: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .ah-brand { --ah-transition: 0ms; }
}