@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --cgx-ink: #1a0709;
  --cgx-ink-soft: #3d1418;
  --cgx-burgundy: #4a0d16;
  --cgx-burgundy-deep: #340810;
  --cgx-red: #d81f2a;
  --cgx-red-bright: #f5333f;
  --cgx-paper: #fbf6f2;
  --cgx-paper-warm: #f4e9e2;
  --cgx-mist: #e6d9d2;
  --cgx-grey: #8d7d78;
  --cgx-line: #d9c7bf;
  --cgx-white: #ffffff;

  --cgx-surface: var(--cgx-paper);
  --cgx-surface-alt: var(--cgx-paper-warm);
  --cgx-on-dark: #fbeceb;
  --cgx-on-dark-dim: #d9b3b1;

  --cgx-font-display: "Archivo", "Arial Black", Arial, sans-serif;
  --cgx-font-utility: "Inter", "Segoe UI", system-ui, -apple-system, Helvetica, sans-serif;

  --cgx-radius-s: 10px;
  --cgx-radius-m: 18px;
  --cgx-radius-l: 30px;
  --cgx-radius-xl: 46px;

  --cgx-shadow-soft: 0 18px 40px -28px rgba(52, 8, 16, 0.55);
  --cgx-shadow-lift: 0 34px 70px -40px rgba(52, 8, 16, 0.7);

  --cgx-shell: min(1280px, 92vw);
  --cgx-shell-wide: min(1540px, 95vw);
  --cgx-shell-narrow: min(940px, 90vw);

  --cgx-step: clamp(0.75rem, 0.5rem + 1vw, 1.2rem);
  --cgx-motion: 220ms;
}

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

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

body {
  margin: 0;
  font-family: var(--cgx-font-utility);
  background-color: var(--cgx-surface);
  color: var(--cgx-ink);
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  overflow-x: hidden;
  min-height: 100vh;
}

h1,
h2,
h3,
h4 {
  font-family: var(--cgx-font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

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

ul,
ol {
  margin: 0 0 1.1em;
  padding-inline-start: 1.3em;
}

li {
  margin-block: 0.35em;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--cgx-red);
  outline-offset: 3px;
  border-radius: 4px;
}

.cgx-skip {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -120%;
  z-index: 999;
  background-color: var(--cgx-ink);
  color: var(--cgx-on-dark);
  padding: 0.85rem 1.4rem;
  border-radius: var(--cgx-radius-s);
  font-weight: 700;
  transition: inset-block-start var(--cgx-motion) ease;
}

.cgx-skip:focus {
  inset-block-start: 1rem;
}

.cgx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.cgx-shell {
  width: var(--cgx-shell);
  margin-inline: auto;
}

.cgx-shell--wide {
  width: var(--cgx-shell-wide);
  margin-inline: auto;
}

.cgx-shell--narrow {
  width: var(--cgx-shell-narrow);
  margin-inline: auto;
}

.cgx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--cgx-font-display);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cgx-red);
  margin-bottom: 1rem;
}

.cgx-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background-color: var(--cgx-red);
}

.cgx-tag {
  font-family: var(--cgx-font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--cgx-line);
  color: var(--cgx-ink-soft);
  background-color: var(--cgx-white);
}

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