Брутализм в веб-дизайне: сырая структура, громкий шрифт и жёсткие тени

:root {
  --nb-ink: #171817;
  --nb-accent: #E4FF4E;
  --nb-border: 3px solid var(--nb-ink);
  --nb-shadow: 5px 5px 0 var(--nb-ink);   /* сдвиг без размытия */
  --nb-radius: 0.5rem;
}

.nb-button {
  min-height: 3rem;
  padding: 0 1.5rem;
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  background: var(--nb-accent);
  box-shadow: var(--nb-shadow);
  font: 700 1rem/1 system-ui, sans-serif;
  transition: transform 0.12s, box-shadow 0.12s;
}

.nb-button:hover  { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--nb-ink); }
.nb-button:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--nb-ink); }
.nb-button:focus-visible { outline: 3px solid var(--nb-ink); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .nb-button { transition: none; }
}

body {
  margin: 0;
  background: #F8F8F8;
  color: #171817;
  font: 1.125rem/1.4 "Times New Roman", Times, serif;
}

/* Линии сетки — и есть оформление */
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-top: 1px solid;
  border-left: 1px solid;
}

.grid > * {
  padding: 1rem;
  border-right: 1px solid;
  border-bottom: 1px solid;
}

h1 {
  margin: 0;
  font: 700 clamp(3.5rem, 14vw, 12rem)/0.85 Arial, Helvetica, sans-serif;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration-thickness: 2px; }

.label {
  font: 0.75rem/1 ui-monospace, "Courier New", monospace;
  text-transform: uppercase;
}