@font-face {
  font-family: "Kasnov Display";
  src: url("assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --ks-color-paper-100: #f7f7ef;
  --ks-color-paper-500: #ddddd3;
  --ks-color-brand-400: #609dc4;
  --ks-color-brand-600: #255d84;
  --ks-color-ink-900: #003153;
  --ks-color-success-700: #17653d;
  --ks-color-success-100: #e1eddf;
  --ks-color-warning-700: #73520a;
  --ks-color-warning-100: #f5e7bd;
  --ks-color-danger-700: #8f272c;
  --ks-color-danger-100: #f4d9d6;

  --ks-font-display: "Kasnov Display", "Arial Narrow", sans-serif;
  --ks-font-interface: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ks-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --ks-text-display-xl: clamp(3.5rem, 8vw, 6rem);
  --ks-text-display-l: clamp(2.75rem, 6vw, 4rem);
  --ks-text-h1: clamp(2.25rem, 4vw, 3rem);
  --ks-text-h2: clamp(1.875rem, 3vw, 2.25rem);
  --ks-text-h3: 1.75rem;
  --ks-text-body-l: 1.25rem;
  --ks-text-body-m: 1rem;
  --ks-text-body-s: .875rem;

  --ks-space-1: .25rem;
  --ks-space-2: .5rem;
  --ks-space-3: .75rem;
  --ks-space-4: 1rem;
  --ks-space-6: 1.5rem;
  --ks-space-8: 2rem;
  --ks-space-12: 3rem;
  --ks-space-16: 4rem;
  --ks-space-24: 6rem;

  --ks-border-control: 2px solid var(--ks-color-ink-900);
  --ks-border-modal: 3px solid var(--ks-color-ink-900);
  --ks-shadow-button: 4px 4px 0 var(--ks-color-brand-400);
  --ks-shadow-card: 7px 7px 0 var(--ks-color-brand-400);
  --ks-shadow-hero: 12px 12px 0 var(--ks-color-brand-600);
  --ks-motion-fast: 120ms;
  --ks-motion-standard: 220ms;
  --ks-motion-emphasis: 600ms;
  --ks-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ks-container: 1240px;
}

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

.ks-surface {
  color: var(--ks-color-ink-900);
  background-color: var(--ks-color-paper-500);
  background-image:
    linear-gradient(90deg, rgb(0 49 83 / 3.5%) 1px, transparent 1px),
    linear-gradient(rgb(0 49 83 / 3.5%) 1px, transparent 1px);
  background-size: 16px 16px;
  font-family: var(--ks-font-interface);
}

.ks-display, .ks-heading, .ks-eyebrow, .ks-button, .ks-badge {
  font-family: var(--ks-font-display);
  text-transform: uppercase;
}

.ks-display { font-size: var(--ks-text-display-xl); line-height: .86; letter-spacing: .01em; }
.ks-heading { margin: 0; font-size: var(--ks-text-h2); line-height: 1; }
.ks-eyebrow { color: var(--ks-color-brand-600); letter-spacing: .12em; }

.ks-card {
  padding: var(--ks-space-6);
  border: var(--ks-border-control);
  background: rgb(247 247 239 / 94%);
  box-shadow: var(--ks-shadow-card);
}

.ks-button {
  min-height: 48px;
  padding: 12px 20px;
  border: var(--ks-border-control);
  border-radius: 0;
  color: var(--ks-color-paper-500);
  background: var(--ks-color-ink-900);
  box-shadow: var(--ks-shadow-button);
  font-size: 1.25rem;
  letter-spacing: .055em;
  cursor: pointer;
  transition: transform var(--ks-motion-fast), box-shadow var(--ks-motion-fast);
}

.ks-button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ks-color-brand-400); }
.ks-button:active { transform: translate(4px, 4px); box-shadow: none; }
.ks-button:focus-visible, .ks-control:focus-visible { outline: 3px solid var(--ks-color-brand-600); outline-offset: 3px; }
.ks-button--secondary { color: var(--ks-color-ink-900); background: var(--ks-color-paper-500); }
.ks-button--danger { color: #fff; background: var(--ks-color-danger-700); }
.ks-button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--ks-color-brand-400); }

.ks-field { display: grid; gap: var(--ks-space-2); }
.ks-label { font-family: var(--ks-font-display); font-size: 1.125rem; text-transform: uppercase; }
.ks-control {
  min-height: 52px;
  width: 100%;
  padding: 13px 14px;
  border: var(--ks-border-control);
  border-radius: 0;
  color: var(--ks-color-ink-900);
  background: var(--ks-color-paper-100);
  font: 1rem/1.4 var(--ks-font-interface);
}
.ks-field--error .ks-control { border-color: var(--ks-color-danger-700); box-shadow: 4px 4px 0 #d98787; }
.ks-message { margin: 0; color: var(--ks-color-brand-600); font-size: var(--ks-text-body-s); }
.ks-field--error .ks-message { color: var(--ks-color-danger-700); }

.ks-badge, .ks-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 2px solid currentColor;
  font-size: .875rem;
  line-height: 1;
}
.ks-badge { color: var(--ks-color-ink-900); background: var(--ks-color-brand-400); }
.ks-status--success { color: var(--ks-color-success-700); background: var(--ks-color-success-100); }
.ks-status--warning { color: var(--ks-color-warning-700); background: var(--ks-color-warning-100); }
.ks-status--danger { color: var(--ks-color-danger-700); background: var(--ks-color-danger-100); }

@media (max-width: 850px) {
  .ks-card { padding: var(--ks-space-4); box-shadow: 5px 5px 0 var(--ks-color-brand-400); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}