:root {
  --uk-ink: #111827;
  --uk-paper: #f4f1e8;
  --uk-blue: #123b5d;
  --uk-red: #d83b35;
  --uk-lime: #d9f26b;
}

body {
  background:
    linear-gradient(90deg, rgba(18, 59, 93, .06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--uk-paper);
  color: var(--uk-ink);
}

.site-header {
  border-bottom: 5px solid var(--uk-red);
  background: rgba(244, 241, 232, .96);
}

.brand span,
.eyebrow {
  color: var(--uk-blue);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.header-action,
.rewrite-actions .button:first-child {
  background: var(--uk-lime);
  border: 2px solid var(--uk-ink);
  box-shadow: 4px 4px 0 var(--uk-ink);
  color: var(--uk-ink);
}

.rewrite-main {
  max-width: 1180px;
}

.rewrite-hero {
  background: var(--uk-blue);
  border: 0;
  border-radius: 0;
  box-shadow: 12px 12px 0 var(--uk-red);
  color: white;
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding: clamp(2rem, 6vw, 5rem);
}

.rewrite-hero .eyebrow {
  color: var(--uk-lime);
}

.rewrite-hero h1 {
  max-width: 18ch;
}

.rewrite-hero p {
  max-width: 70ch;
}

.uk-brief-grid,
.uk-start-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.uk-brief-grid article,
.uk-start-grid article {
  background: #fffdf7;
  border: 2px solid var(--uk-ink);
  padding: 1.35rem;
}

.uk-brief-grid article:nth-child(2),
.uk-start-grid article:nth-child(2) {
  transform: translateY(1rem);
}

.uk-brief-grid strong,
.uk-start-grid strong {
  color: var(--uk-red);
  display: block;
  font-size: .78rem;
  letter-spacing: .08em;
  margin-bottom: .6rem;
  text-transform: uppercase;
}

.uk-proof-strip {
  background: var(--uk-ink);
  color: white;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  margin: 2rem 0;
}

.uk-proof-strip span {
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 1rem;
}

.uk-boundary {
  border-left: 8px solid var(--uk-red);
  padding-left: 1.5rem;
}

@media (max-width: 780px) {
  .uk-brief-grid,
  .uk-start-grid,
  .uk-proof-strip {
    grid-template-columns: 1fr;
  }

  .uk-brief-grid article:nth-child(2),
  .uk-start-grid article:nth-child(2) {
    transform: none;
  }

  .rewrite-hero {
    box-shadow: 7px 7px 0 var(--uk-red);
  }
}

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