<form class="lf-brut" aria-label="Brutalist sign in">
  <span class="lf-brut-stamp" aria-hidden="true">
    <span>SECURE</span>
    <span>· AUTH ·</span>
    <span>2025</span>
  </span>
  <h2 class="lf-brut-title">Sign in.</h2>
  <p class="lf-brut-sub">No frills. Get back to work.</p>
  <label class="lf-brut-row">
    <span>EMAIL</span>
    <input type="email" name="email" autocomplete="email" placeholder="[email protected]" required />
  </label>
  <label class="lf-brut-row">
    <span>PASSWORD</span>
    <input
      type="password"
      name="password"
      autocomplete="current-password"
      placeholder="••••••••"
      required
    />
  </label>
  <button type="submit" class="lf-brut-btn">▸ ENTER</button>
</form>

.lf-brut {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #fef9c3;
  border: 2.5px solid #15151d;
  border-radius: 6px;
  padding: 22px 20px;
  display: grid;
  gap: 12px;
  box-shadow: 6px 6px 0 0 #15151d;
  font-family: "JetBrains Mono", "DM Mono", monospace;
}
.lf-brut-stamp {
  position: absolute;
  top: -14px;
  right: 12px;
  background: #ef4444;
  color: #fef9c3;
  border: 2px solid #15151d;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  display: inline-flex;
  gap: 6px;
  transform: rotate(2deg);
  box-shadow: 3px 3px 0 #15151d;
}
.lf-brut-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #15151d;
  letter-spacing: -0.02em;
}
.lf-brut-sub {
  margin: -6px 0 4px;
  font-size: 12px;
  color: #4a4a5e;
}
.lf-brut-row {
  display: grid;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #15151d;
}
.lf-brut-row input {
  background: #fff;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: #15151d;
  outline: none;
  transition:
    box-shadow 0.15s,
    transform 0.12s;
}
.lf-brut-row input:focus {
  box-shadow: 4px 4px 0 #15151d;
  transform: translate(-2px, -2px);
}
.lf-brut-btn {
  background: #15151d;
  color: #fef9c3;
  border: 2px solid #15151d;
  border-radius: 4px;
  padding: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.15s,
    background 0.15s,
    color 0.15s;
}
.lf-brut-btn:hover {
  background: #ef4444;
  color: #fef9c3;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #15151d;
}